[feat/#46] 페이지 이동 시, 모달 닫도록 수정

src/components/Modal/Modals.tsx

@@ -1,10 +1,11 @@
 import { ModalsDispatchContext, ModalsStateContext } from "@/contexts/ModalsContext"
-import { useContext } from "react"
+import { useContext, useEffect } from "react"
 import CreateCrewModal from "./CreateCrewModal"
 import InviteCrewModal from "./InviteCrewModal"
 import JoinCrewModal from "./JoinCrewModal"
 import WithdrawCrewModal from "./WithdrawCrewModal"
 import ToWithdrawModal from "./ToWithdrawModal"
+import { useLocation } from "react-router-dom"
 
 export const modals = {
   createCrewModal: CreateCrewModal,
@@ -18,6 +19,15 @@ const Modals = (): React.ReactNode => {
   const openedModals = useContext(ModalsStateContext)
   const { close } = useContext(ModalsDispatchContext)
 
+  const location = useLocation() // 페이지 이동 감지
+
+  // 페이지 이동 시 모든 모달 닫기 (context 상태 초기화)
+  useEffect(() => {
+    if (openedModals.length > 0) {
+      openedModals.forEach((modal) => close(modal.Component))
+    }
+  }, [location.pathname]) // 경로가 변경될 때마다 실행
+
   return openedModals.map((modal, index) => {
     const { Component, props } = modal
     if (!props) return null

src/providers/ModalsProvider.tsx

@@ -1,4 +1,3 @@
-import Modals from "@/components/Modal/Modals"
 import {
   ModalsDispatchContext,
   ModalsStateContext,
@@ -30,10 +29,7 @@ const ModalsProvider = ({ children }: PropsWithChildren): React.ReactNode => {
 
   return (
     <ModalsStateContext.Provider value={openedModals}>
-      <ModalsDispatchContext.Provider value={dispatch}>
-        {children}
-        <Modals />
-      </ModalsDispatchContext.Provider>
+      <ModalsDispatchContext.Provider value={dispatch}>{children}</ModalsDispatchContext.Provider>
     </ModalsStateContext.Provider>
   )
 }

src/routes/Router.tsx

@@ -1,3 +1,4 @@
+import Modals from "@/components/Modal/Modals"
 import RoutePath from "@/constants/routes.json"
 import AnalysisLayout from "@/layouts/AnalysisLayout"
 import BaseLayout from "@/layouts/BaseLayout"
@@ -42,6 +43,7 @@ const Router: React.FC = () => {
 
         <Route path="*" element={<Navigate to="/" replace />} />
       </Routes>
+      <Modals />
     </BrowserRouter>
   )
 }