Skip to content

Commit

Permalink
[feat/#46] 페이지 이동 시, 모달 닫도록 수정
Browse files Browse the repository at this point in the history
  • Loading branch information
lkhoony committed Sep 18, 2024
1 parent 2d68440 commit 479a38a
Show file tree
Hide file tree
Showing 3 changed files with 14 additions and 6 deletions.
12 changes: 11 additions & 1 deletion src/components/Modal/Modals.tsx
Original file line number Diff line number Diff line change
@@ -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,
Expand All @@ -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
Expand Down
6 changes: 1 addition & 5 deletions src/providers/ModalsProvider.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import Modals from "@/components/Modal/Modals"
import {
ModalsDispatchContext,
ModalsStateContext,
Expand Down Expand Up @@ -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>
)
}
Expand Down
2 changes: 2 additions & 0 deletions src/routes/Router.tsx
Original file line number Diff line number Diff line change
@@ -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"
Expand Down Expand Up @@ -42,6 +43,7 @@ const Router: React.FC = () => {

<Route path="*" element={<Navigate to="/" replace />} />
</Routes>
<Modals />
</BrowserRouter>
)
}
Expand Down

0 comments on commit 479a38a

Please sign in to comment.