Merge pull request #31 from prgrms-web-devcourse-final-project/1-feature/global-modal-management

[Feature]: #1 Modal 전역 상태관리

Author: shlee9999

src/App.tsx

@@ -6,6 +6,7 @@ import { useState } from 'react'
 import { RouterProvider } from 'react-router-dom'
 import styled, { ThemeProvider } from 'styled-components'
 import { Helmet, HelmetProvider } from 'react-helmet-async'
+import ModalContainer from '~modals/ModalContainer'
 
 function App() {
   //* 다크모드 확장성 고려
@@ -28,6 +29,7 @@ function App() {
             <RouterProvider router={router} />
           </MobileWrapper>
           <PWABadge />
+          <ModalContainer />
         </ThemeProvider>
       </HelmetProvider>
     </>

src/modals/ModalContainer/index.tsx

@@ -0,0 +1,8 @@
+import * as S from './styles'
+import { useModalStore } from '~stores/modalStore'
+
+export default function ModalContainer() {
+  const { modalList } = useModalStore()
+
+  return <>{modalList.length ? <S.ModalWrapper>{...modalList}</S.ModalWrapper> : null}</>
+}

src/modals/ModalContainer/styles.ts

@@ -0,0 +1,11 @@
+import { styled } from 'styled-components'
+
+export const ModalWrapper = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100dvw;
+  height: 100dvh;
+  background-color: rgba(0, 0, 0, 0.4);
+  z-index: 999;
+`

src/stores/modalStore.ts

@@ -0,0 +1,22 @@
+import { ReactNode } from 'react'
+import { create } from 'zustand'
+
+interface ModalStore {
+  modalList: ReactNode[]
+  pushModal: (modal: ReactNode) => void
+  popModal: () => void
+  clearModal: () => void
+}
+
+export const useModalStore = create<ModalStore>(set => ({
+  modalList: [],
+  pushModal: modal =>
+    set(state => ({
+      modalList: [...state.modalList, modal],
+    })),
+  popModal: () =>
+    set(state => ({
+      modalList: state.modalList.slice(0, -1),
+    })),
+  clearModal: () => set({ modalList: [] }),
+}))