2024 12 24 프론트 이슈 대응 - To-Letter/To-Letter-front GitHub Wiki

문제

인덱스 페이지에서 login(/auth/login) 및 signup(/auth/signup) 모달 페이지 접근 후 x버튼을 눌러 다시 인덱스 페이지 복귀 시 모달에서 공통적으로 사용되는 menuTab(/components/molecules/menuTab.tsx, 모달 메뉴탭 헤더 UI) 호출 pathkey(상수 데이터 파일 key) 미스매치 에러가 생기는 점을 발견

대응 1

menuTab에 해당 pathKey가 없는 경우 처리

// menuList에 해당 pathKey가 없는 경우 처리
if (!menuList[pathKey]) {
  return null; // 또는 기본 메뉴나 에러 UI를 표시
}

X버튼을 클릭하여 인덱스 페이지로 돌아갔음에도 modal이 남아 있는 현상 발생

대응 2[채택]

usePathname을 통해 MenuTab을 호출하는 도메인을 살펴본 결과 인덱스 페이지에서 @modal 폴더 내부의 layout.tsx를 불러옴을 확인
rootRayout에서 병렬경로로 처리된 modal을 선택적으로 렌더링하여 해결

  const pathname = usePathname();

  return (
    <html lang="ko">
      <body>
        <RecoilRoot>
          <StyledComponentsRegistry>
            <LoadingSpinner />
            {children}
            {pathname === "/" ? <></> : modal}
          </StyledComponentsRegistry>
        </RecoilRoot>
      </body>
    </html>
  );

그간 같이 논의하고 해결했던 이슈 몇가지 찾아서 다같이 정리해두면 좋을 것 같아요~!

⚠️ GitHub.com Fallback ⚠️