From 3c13219e3364a48d213291b4001432b2fd9c8e27 Mon Sep 17 00:00:00 2001 From: shlee9999 <95556588+shlee9999@users.noreply.github.com> Date: Sat, 16 Nov 2024 10:44:36 +0900 Subject: [PATCH 1/2] =?UTF-8?q?=E2=9C=A8=20Feat:=20modal=20=EC=A0=84?= =?UTF-8?q?=EC=97=AD=20=EC=83=81=ED=83=9C=EA=B4=80=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .vscode/typescriptreact.code-snippets | 20 ++++++++++---------- src/App.tsx | 2 ++ src/modals/ModalContainer/index.tsx | 8 ++++++++ src/modals/ModalContainer/styles.ts | 11 +++++++++++ src/stores/modalStore.ts | 22 ++++++++++++++++++++++ 5 files changed, 53 insertions(+), 10 deletions(-) create mode 100644 src/modals/ModalContainer/index.tsx create mode 100644 src/modals/ModalContainer/styles.ts create mode 100644 src/stores/modalStore.ts diff --git a/.vscode/typescriptreact.code-snippets b/.vscode/typescriptreact.code-snippets index cf66035..aac3c68 100644 --- a/.vscode/typescriptreact.code-snippets +++ b/.vscode/typescriptreact.code-snippets @@ -11,13 +11,13 @@ "", "export default function ${1:${TM_DIRECTORY/^.+\\\\(.*)$/$1/}}({ $2 }: ${1:${TM_DIRECTORY/^.+\\\\(.*)$/$1/}}Props ) {", " return (", - " ", + " ", " ${1:${TM_DIRECTORY/^.+\\\\(.*)$/$1/}}", " ", " )", - "}" + "}", ], - "description": "Creates a React Functional Component" + "description": "Creates a React Functional Component", }, "Typescript React component with no props": { "scope": "typescriptreact", @@ -31,9 +31,9 @@ " ${1:${TM_DIRECTORY/^.+\\\\(.*)$/$1/}}", " ", " )", - "}" + "}", ], - "description": "Creates a React Functional Component" + "description": "Creates a React Functional Component", }, "Typescript React component with props in Mac": { "scope": "typescriptreact", @@ -51,9 +51,9 @@ " ${3:${TM_DIRECTORY/.*\\/(.*)$/$1/}}", " ", " )", - "}" + "}", ], - "description": "Creates a React Functional Component" + "description": "Creates a React Functional Component", }, "Typescript React component with no props in Mac": { "scope": "typescriptreact", @@ -67,8 +67,8 @@ " ${1:${TM_DIRECTORY/.*\\/(.*)$/$1/}}", " ", " )", - "}" + "}", ], - "description": "Creates a React Functional Component" - } + "description": "Creates a React Functional Component", + }, } diff --git a/src/App.tsx b/src/App.tsx index bf374d7..f85949a 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -2,6 +2,7 @@ import PWABadge from '@/PWABadge' import { router } from '@/router' import GlobalStyle from '@/styles/globalStyle' import { lightTheme, darkTheme } from '@/styles/theme' +import ModalContainer from '@modals/ModalContainer' import { useState } from 'react' import { RouterProvider } from 'react-router-dom' import { ThemeProvider } from 'styled-components' @@ -20,6 +21,7 @@ function App() { + ) diff --git a/src/modals/ModalContainer/index.tsx b/src/modals/ModalContainer/index.tsx new file mode 100644 index 0000000..d72bb76 --- /dev/null +++ b/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 ? {...modalList} : null} +} diff --git a/src/modals/ModalContainer/styles.ts b/src/modals/ModalContainer/styles.ts new file mode 100644 index 0000000..a2e698e --- /dev/null +++ b/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; +` diff --git a/src/stores/modalStore.ts b/src/stores/modalStore.ts new file mode 100644 index 0000000..dd8737b --- /dev/null +++ b/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(set => ({ + modalList: [], + pushModal: modal => + set(state => ({ + modalList: [...state.modalList, modal], + })), + popModal: () => + set(state => ({ + modalList: state.modalList.slice(0, -1), + })), + clearModal: () => set({ modalList: [] }), +})) From 8dd428f43dfac0deb74bcdeb4be216bcbd762ad6 Mon Sep 17 00:00:00 2001 From: shlee9999 <95556588+shlee9999@users.noreply.github.com> Date: Thu, 21 Nov 2024 17:47:39 +0900 Subject: [PATCH 2/2] =?UTF-8?q?=F0=9F=90=9BFix:=20Build=20Error?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.tsx | 2 +- src/modals/ModalContainer/index.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 2e2966d..d157fcd 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,4 +1,3 @@ - import PWABadge from '~/PWABadge' import { router } from '~/router' import GlobalStyle from '~/styles/globalStyle' @@ -7,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() { //* 다크모드 확장성 고려 diff --git a/src/modals/ModalContainer/index.tsx b/src/modals/ModalContainer/index.tsx index d72bb76..76591b0 100644 --- a/src/modals/ModalContainer/index.tsx +++ b/src/modals/ModalContainer/index.tsx @@ -1,5 +1,5 @@ import * as S from './styles' -import { useModalStore } from '@stores/modalStore' +import { useModalStore } from '~stores/modalStore' export default function ModalContainer() { const { modalList } = useModalStore()