From 479a38a866b320ac6ade4086a2d8cc2a86c390da Mon Sep 17 00:00:00 2001
From: "lkh14011424@gmail.com" <lkh14011424@gmail.com>
Date: Wed, 18 Sep 2024 09:56:14 +0900
Subject: [PATCH] =?UTF-8?q?[feat/#46]=20=ED=8E=98=EC=9D=B4=EC=A7=80=20?=
 =?UTF-8?q?=EC=9D=B4=EB=8F=99=20=EC=8B=9C,=20=EB=AA=A8=EB=8B=AC=20?=
 =?UTF-8?q?=EB=8B=AB=EB=8F=84=EB=A1=9D=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Modal/Modals.tsx  | 12 +++++++++++-
 src/providers/ModalsProvider.tsx |  6 +-----
 src/routes/Router.tsx            |  2 ++
 3 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/src/components/Modal/Modals.tsx b/src/components/Modal/Modals.tsx
index d99745b..497e838 100644
--- a/src/components/Modal/Modals.tsx
+++ b/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
diff --git a/src/providers/ModalsProvider.tsx b/src/providers/ModalsProvider.tsx
index 8968cbd..2dbfecc 100644
--- a/src/providers/ModalsProvider.tsx
+++ b/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>
   )
 }
diff --git a/src/routes/Router.tsx b/src/routes/Router.tsx
index 709f93c..1115e49 100644
--- a/src/routes/Router.tsx
+++ b/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>
   )
 }