Merge pull request #46 from JECT-Study/feature/modal

[TASK-72] refactor: 모달 구현 로직 변경
JECT-Study · Jan 18, 2025 · 084e927 · 084e927
2 parents 7370733 + 49187b1
commit 084e927
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 16 deletions.
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -26,7 +26,6 @@ const RootLayout = ({ children, modal }: Readonly<LayoutProps>) => {
         <MSWProvider>
           <TanStackQueryProvider>
             <AppShell>{children}</AppShell>
-            {modal}
           </TanStackQueryProvider>
         </MSWProvider>
         <KakaoProvider />

diff --git a/src/app/@Modal/page.tsx → src/app/providers/ModalProvider.tsx b/src/app/@Modal/page.tsx → src/app/providers/ModalProvider.tsx
@@ -1,11 +1,12 @@
 'use client';
 
 import { useEffect } from 'react';
+import { createPortal } from 'react-dom';
 import { useStore } from 'zustand';
 
 import modalStore from '@/stores/modalStore';
 
-const ModalPage = () => {
+const ModalProvider = () => {
   const { isOpen, modalSize, contents } = useStore(modalStore);
 
   useEffect(() => {
@@ -23,19 +24,18 @@ const ModalPage = () => {
     lg: 'tablet:w-[1011px] rounded-[20px]',
   };
 
-  return (
-    <>
-      {isOpen && (
-        <div className='fixed top-0 left-0 w-full h-full bg-black bg-opacity-50 z-50'>
-          <div
-            className={`${modalClassNames[modalSize]} absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-[366px] h-content bg-background-overlay text-black`}
-          >
-            {contents}
-          </div>
-        </div>
-      )}
-    </>
+  if (!isOpen) return null;
+
+  return createPortal(
+    <div className='fixed top-0 left-0 w-full h-full bg-black bg-opacity-50 z-50'>
+      <div
+        className={`${modalClassNames[modalSize]} absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-[366px] h-content bg-background-overlay text-black`}
+      >
+        {contents}
+      </div>
+    </div>,
+    document.body,
   );
 };
 
-export default ModalPage;
+export default ModalProvider;
diff --git a/src/components/Layout/AppShell.tsx b/src/components/Layout/AppShell.tsx
@@ -4,6 +4,7 @@ import { NextUIProvider } from '@nextui-org/react';
 import { ThemeProvider as NextThemesProvider } from 'next-themes';
 import { ReactNode } from 'react';
 
+import ModalProvider from '@/app/providers/ModalProvider';
 import Footer from '@/components/Footer';
 import Navbar from '@/components/Navbar';
 
@@ -25,6 +26,7 @@ const AppShell = ({ children }: { children: ReactNode }) => {
             </main>
             <Footer />
           </div>
+          <ModalProvider />
         </NextThemesProvider>
       </NextUIProvider>
     </>

diff --git a/src/stores/modalStore.ts b/src/stores/modalStore.ts
@@ -28,7 +28,7 @@ const modalStore = create<ModalState & ModalAction>((set) => ({
     set((state) => {
       if (state.isOpen) return state;
 
-      return { isOpen: true, ...props };
+      return { ...state, isOpen: true, ...props };
     }),
   closeModal: () =>
     set((state) => {