[Feature/BAR-36] 모달 컴포넌트 개발

pages/_app.tsx

@@ -3,6 +3,7 @@ import type { AppProps } from 'next/app';
 import '@/src/styles/global.css';
 
 import Layout from '@/src/components/Layout/Layout';
+import Modal from '@/src/components/Modal/Modal';
 import TanstackQueryProvider from '@/src/components/Providers/TanstackQueryProvider';
 import Toast from '@/src/components/Toast/Toast';
 import { pretendard } from '@/src/styles/font';
@@ -14,6 +15,7 @@ const App = ({ Component, pageProps }: AppProps) => {
         <Layout>
           <Component {...pageProps} />
           <Toast />
+          <Modal />
         </Layout>
       </TanstackQueryProvider>
     </main>

src/components/Modal/Modal.stories.tsx

@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import ModalContainer from './ModalContainer';
+
+const meta: Meta<typeof ModalContainer> = {
+  title: 'Components/Modal',
+  component: ModalContainer,
+  decorators: [
+    (Story) => (
+      <div style={{ height: '500px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ModalContainer>;
+
+export const Second: Story = {
+  args: { title: '제목', children: '설명' },
+};

src/components/Modal/Modal.tsx

@@ -0,0 +1,13 @@
+import { useModalStore } from '@/src/stores/modalStore';
+
+import DeleteArticle from './components/DeleteArticle';
+
+const Modal = () => {
+  const { type } = useModalStore();
+
+  if (type === 'deleteArticle') return <DeleteArticle />;
+
+  return null;
+};
+
+export default Modal;

src/components/Modal/ModalContainer.tsx

@@ -0,0 +1,81 @@
+import type { PropsWithChildren } from 'react';
+import { assignInlineVars } from '@vanilla-extract/dynamic';
+
+import { useModalStore } from '@/src/stores/modalStore';
+import { COLORS } from '@/src/styles/tokens';
+
+import * as styles from './style.css';
+
+interface ModalButtonProps {
+  text?: string;
+  backgroundColor?: string;
+  color?: string;
+  onClick: () => void;
+}
+
+interface ModalContainerProps {
+  title: string;
+  firstButtonProps?: ModalButtonProps;
+  secondButtonProps?: ModalButtonProps;
+}
+
+const ModalContainer = ({
+  children,
+  title,
+  firstButtonProps,
+  secondButtonProps,
+}: PropsWithChildren<ModalContainerProps>) => {
+  const { closeModal } = useModalStore();
+
+  const {
+    text: firstButtonText = '취소',
+    color: firstButtonColor = COLORS['Grey/600'],
+    backgroundColor: firstButtonBackgroundColor = COLORS['Grey/150'],
+    onClick: onClickFirstButton = closeModal,
+  } = firstButtonProps || {};
+
+  const {
+    text: secondButtonText = '만들기',
+    color: secondButtonColor = COLORS['Grey/White'],
+    backgroundColor: secondButtonBackgroundColor = COLORS['Blue/Default'],
+  } = secondButtonProps || {};
+
+  return (
+    <>
+      <div className={styles.dimmed} />
+      <div className={styles.modalStyle}>
+        <strong className={styles.title}>{title}</strong>
+        {typeof children === 'string' ? (
+          <p className={styles.body}>{children}</p>
+        ) : (
+          <>{children}</>
+        )}
+        <div>
+          <button
+            type="button"
+            className={styles.button}
+            style={assignInlineVars({
+              [styles.buttonColor]: firstButtonColor,
+              [styles.buttonBackgroundColor]: firstButtonBackgroundColor,
+            })}
+            onClick={onClickFirstButton}
+          >
+            {firstButtonText}
+          </button>
+          <button
+            type="button"
+            className={styles.button}
+            style={assignInlineVars({
+              [styles.buttonColor]: secondButtonColor,
+              [styles.buttonBackgroundColor]: secondButtonBackgroundColor,
+            })}
+          >
+            {secondButtonText}
+          </button>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default ModalContainer;

src/components/Modal/components/DeleteArticle.tsx

@@ -0,0 +1,17 @@
+import ModalContainer from '../ModalContainer';
+
+const DeleteArticle = () => {
+  return (
+    <ModalContainer
+      title="해당 글을 삭제할까요?"
+      secondButtonProps={{
+        text: '삭제하기',
+        onClick: () => {},
+      }}
+    >
+      {'삭제한 글은 복구할 수 없어요!\n삭제하시겠어요'}
+    </ModalContainer>
+  );
+};
+
+export default DeleteArticle;

src/components/Modal/style.css.ts

@@ -0,0 +1,69 @@
+import { createVar, style } from '@vanilla-extract/css';
+
+import { sprinkles } from '@/src/styles/sprinkles.css';
+import { COLORS } from '@/src/styles/tokens';
+import { middleLayer, positionCenter, topLayer } from '@/src/styles/utils.css';
+
+export const modalStyle = style([
+  positionCenter,
+  topLayer,
+  {
+    padding: '32px',
+    width: '400px',
+    borderRadius: '16px',
+    backgroundColor: COLORS['Grey/White'],
+  },
+]);
+
+export const dimmed = style([
+  middleLayer,
+  {
+    backgroundColor: COLORS['Dim/50'],
+    position: 'fixed',
+    left: '0',
+    top: '0',
+    right: '0',
+    bottom: '0',
+  },
+]);
+
+export const title = style([
+  sprinkles({
+    typography: '20/Title/Semibold',
+  }),
+  {
+    display: 'block',
+    marginBottom: '18px',
+  },
+]);
+
+export const body = style([
+  sprinkles({
+    typography: '15/Body/Regular',
+  }),
+  {
+    display: 'block',
+  },
+]);
+
+export const buttonColor = createVar();
+export const buttonBackgroundColor = createVar();
+
+export const button = style([
+  sprinkles({
+    typography: '15/Title/Medium',
+  }),
+  {
+    width: '164px',
+    color: buttonColor,
+    backgroundColor: buttonBackgroundColor,
+    padding: '16px 40px',
+    borderRadius: '8px',
+    marginTop: '24px',
+    selectors: {
+      '& + &': {
+        marginLeft: '8px',
+      },
+    },
+  },
+]);

src/components/Toast/Toast.stories.tsx

@@ -2,7 +2,7 @@ import { useEffect } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { TOAST_DURATION_TIME } from '@/src/models/toastModel';
-import { useToast } from '@/src/stores/toastStore';
+import { useToastStore } from '@/src/stores/toastStore';
 
 import Toast from './Toast';
 
@@ -23,7 +23,7 @@ type Story = StoryObj<typeof Toast>;
 
 export const Basic: Story = {
   render: function Render() {
-    const { showToast } = useToast();
+    const { showToast } = useToastStore();
 
     useEffect(() => {
       showToast({ message: '테스트', type: TOAST_DURATION_TIME.SHOW });
@@ -42,7 +42,7 @@ export const Basic: Story = {
 
 export const WithAction: Story = {
   render: function Render() {
-    const { showToast } = useToast();
+    const { showToast } = useToastStore();
 
     useEffect(() => {
       showToast({ message: '테스트', type: TOAST_DURATION_TIME.ACTION });

src/components/Toast/Toast.tsx

@@ -1,16 +1,16 @@
 import { useEffect } from 'react';
 
-import { useToast } from '@/src/stores/toastStore';
+import { useToastStore } from '@/src/stores/toastStore';
 
 import * as styles from './style.css';
 
 const Toast = () => {
-  const { toastData, hideToast } = useToast();
+  const { toastData, hideToast } = useToastStore();
 
   const { message, type, isToastVisible } = toastData;
 
   useEffect(() => {
-    let timer;
+    let timer: ReturnType<typeof setTimeout>;
 
     if (isToastVisible) {
       timer = setTimeout(() => hideToast(), type);

src/components/Toast/style.css.ts

@@ -1,7 +1,7 @@
 import { recipe } from '@vanilla-extract/recipes';
 
 import { sprinkles } from '@/src/styles/sprinkles.css';
-import { theme } from '@/src/styles/theme.css';
+import { COLORS } from '@/src/styles/tokens';
 import { modalLayer } from '@/src/styles/utils.css';
 
 export const toast = recipe({
@@ -11,9 +11,9 @@ export const toast = recipe({
       typography: '14/Body/Regular',
     }),
     {
-      backgroundColor: theme.colors['Dim/70'],
+      backgroundColor: COLORS['Dim/70'],
       position: 'fixed',
-      color: theme.colors['Grey/White'],
+      color: COLORS['Grey/White'],
       bottom: 0,
       left: '50%',
       transform: 'translateX(-50%) translateY(30px)',

src/stores/modalStore.ts

@@ -0,0 +1,31 @@
+import { createStore } from 'zustand';
+import { shallow } from 'zustand/shallow';
+import { useStoreWithEqualityFn as useStore } from 'zustand/traditional';
+
+type ModalType = 'no' | 'deleteArticle';
+
+interface State {
+  type: ModalType;
+}
+
+interface Action {
+  openModal: (type: ModalType) => void;
+  closeModal: () => void;
+}
+
+export const modalStore = createStore<State & Action>((set) => ({
+  type: 'no',
+  openModal: (type) => set({ type }),
+  closeModal: () => set({ type: 'no' }),
+}));
+
+export const useModalStore = () =>
+  useStore(
+    modalStore,
+    (state) => ({
+      type: state.type,
+      openModal: state.openModal,
+      closeModal: state.closeModal,
+    }),
+    shallow,
+  );

src/stores/toastStore.ts

@@ -39,13 +39,9 @@ export const toastStore = createStore<State & Action>((set, get) => ({
   },
 }));
 
-const useToastStore = <T>(
-  selector: (state: State & Action) => T,
-  equals?: (a: T, b: T) => boolean,
-) => useStore(toastStore, selector, equals);
-
-export const useToast = () =>
-  useToastStore(
+export const useToastStore = () =>
+  useStore(
+    toastStore,
     (state) => ({
       toastData: state.toastData,
       showToast: state.showToast,

tsconfig.json

@@ -1,10 +1,10 @@
 {
   "compilerOptions": {
+    "strict": true,
     "target": "es5",
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
-    "strict": false,
     "noEmit": true,
     "esModuleInterop": true,
     "module": "esnext",