✨ feat: 모달 관련 컴포넌트 정리 및 방 만들기 모달 추가

[danggin]

🛠️ PR 개요 [#이슈번호]

• 변경 사항 요약:

  모달 관련 컴포넌트 정리 및 방 만들기 모달 추가
  

🔍 주요 변경 사항

• 추가/수정된 기능:
  • 모달 관련 컴포넌트 정리 및 방 만들기 모달 추가

✅ 체크리스트

• 기능이 정상적으로 동작
• 코드 리뷰 반영 완료
• 관련 문서(있는 경우) 업데이트

💥 트러블 슈팅

• 기입 예 - 1. ~~ 발생한 예외 이름 또는 뭐 하다가 예외 발생했다. 기록

발생한 예외

useNavigate 가 실행되지 않는 에러 발생

// App.tsx

function App() {
  const { showModal } = useModalStore();

  return (
    <>
      <GlobalStyles />
      <RouterProvider router={router} />
      <Toast />
      {showModal && <Modal />}
    </>
  );
}

원인 분석

모달과 토스트 컴포넌트를 react-router-dom의 밖에서 불러와서 react-router-dom의 useNavigate 사용 불가
➡️ 모달, 토스트 컴포넌트를 Layout.tsx로 이동

수정한 코드

// Layout.tsx

export default function Layout() {
  const { showModal } = useModalStore();
  const location = useLocation();
  const pathname = location.pathname;
  const isHiddenHeader = pathname.includes(HIDDEN_HEADERS);

  return (
    <>
      <Wrapper>
        {!isHiddenHeader ? <Header /> : <GameRoomHeader />}
        <Container>
          <Outlet />
        </Container>
        <Footer />
      </Wrapper>

      <Toast />
      {showModal && <Modal />}
    </>
  );
}

[aws-amplify-ap-northeast-2]

This pull request is automatically being deployed by Amplify Hosting (learn more).

Access this pull request here: https://pr-81.dlmectwu1vrkw.amplifyapp.com