🚨 문제 상황모달을 열면 console에 아래와 같은 에러가 떴다.installHook.js:1 Skipping auto-scroll behavior due to `position: sticky` or `position: fixed` on element: ​…​​overrideMethod @ installHook.js:1shouldSkipElement @ layout-router.tsx:139InnerScrollAndFocusHandler.handlePotentialScroll @ layout-router.tsx:227componentDidMount @ layout-router.tsx:294react_stack_bottom_frame @ react-dom-client.development.js:2360..

🚨 문제 상황Next 15에서 Parallel Routes & Intercepting Routes로 모달을 구현했다.아래처럼 게임 카드 리스트가 존재하고 특정 게임 카드를 클릭하면 모달이 열려야 한다. 문제는 모달을 열면 뒷배경이 페이지의 하단으로 내려간다...아직 UI 구현 단계라 api 연동을 하지 않아 데이터가 좀 이상한데 첫 번째 줄에 있던 게임 카드를 클릭했는데 스크롤이 아래로 내려간 상황이다.모달을 닫으면 다시 원위치로 돌아오기는 하지만, 게임 카드 리스트가 무한 스크롤로 구현되어 있기에 모달을 열고 스크롤이 내려가는 과정에서 다음 게임 리스트 네트워크 요청이 가는 문제가 있다... 챗지피티한테 물어보니 모달이 열릴 때 body 태그의 overflow 스타일을 hidden으로 설정했다가 모달..

🚨 문제 상황와 이거 때문에 진짜 미치는 줄 알았다.............이거 거의 두 시간 동안 헤매고 있었어.......................... 흑그흑흘읍흑흑 1. postcss.config.mjsNext.js 15 버전으로 프로젝트 생성하고 TailwindCSS도 자동으로 세팅이 됐다.이제 npm create storybook@latest를 입력하고 Storybook을 설치하려고 하는데 이런 에러가 떴다.=> Failed to build the previewSB_FRAMEWORK_NEXTJS_0003 (IncompatiblePostCssConfigError): Incompatible PostCSS configuration format detected.Next.js uses an arra..

🚨 문제 상황Next.js로 x(구 트위터) 클론코딩하는 강의를 듣는 중 문제가 발생했다.나는 분명 강의 코드를 복사해서 내 프로젝트에 붙여 넣었는데 강의처럼 작동하지 않았다. 'use client';import { useRouter } from 'next/navigation';import Main from '@/app/(beforeLogin)/_component/Main';export default function Login() { const router = useRouter(); router.replace('/i/flow/login'); return ;}코드는 이런 단순한 코드이다.클라이언트에서 로그인 페이지(/login)로 접근할 경우, 내부적으로 router.replace('/i/flow/..

🚨 문제 상황import {useMutation, useQueryClient} from '@tanstack/react-query';import {deleteMedication} from '@/apis/medication/deleteMedication';export const useDeleteMedication = () => { const queryClient = useQueryClient(); return useMutation({ mutationFn: deleteMedication, onSuccess: () => { queryClient.invalidateQueries(['medicationList']); }, onError: (error: Error) => { ..

🚨 문제 상황svgr을 쓰기 위해 환경세팅을 하고 있었다.  global.d.tsdeclare module '*.svg' { import * as React from 'react'; export const ReactComponent: React.FC>; const src: string; export default src;}  위 파일의 마지막 src 부분에서 계속 아래와 같은 에러가 뜬다.  이름을 계속 바꿔봤는데 계속 안된다..저기서 중복되었다는 client.d.ts로 들어가 봤다.C:\\S11P12A808\\front-end\\node_modules\\vite\\client.d.ts  여기서 이미 선언되었다고 나온다.global.d.ts 내용이 덮어 써지는 건 줄 알았는데 아닌가 보다..일단..

🚨 에러 발생Unhandled Runtime ErrorError: Text content does not match server-rendered HTML.See more info here:  🧨 문제 상황공식 문서: Text content does not match server-rendered HTML더보기Incorrect nesting of HTML tags nested in another  tag nested in a  tag or  nested in a  tagInteractive Content cannot be nested ( nested in a  tag,  nested in a  tag, etc.)Using checks like typeof window !== 'undefined' in y..

🚨 에러 발생Error: attribute height: Expected length, "auto". 🧨 문제 상황svg 파일에 width, height를 current로 설정해뒀는데 import하여 사용할 때 아래처럼 width에 값을 주고 height를 auto로 설정했더니 이런 에러가 떴다.// icon svg// component svg 파일에서 height를 auto로 바꿔보기도 했지만 문제는 여전했다.height를 auto로 설정해서 생긴 문제인데 아이콘이 정사각형인 경우면 height를 width와 똑같이 지정하면 되지만, 직사각형인 경우에는 width를 지정한 후에 height를 몇으로 줘야 할지 알 수 없었다. 🚔 해결 방법이전까지는 svg 파일에서 width, height를 커스..