refactor: Dialog 컴포넌트 사용 방법 변경을 위한 useDialog 및 DialogProvider 구현

- BooltiUIProvider로 Provider 통합
- useDialogState 삭제

apps/admin/src/App.tsx

@@ -1,6 +1,6 @@
 import { QueryClientProvider } from '@boolti/api';
 import { createBrowserRouter, RouterProvider, Navigate } from 'react-router-dom';
-import { ThemeProvider } from '@boolti/ui';
+import { BooltiUIProvider } from '@boolti/ui';
 import LoginPage from './pages/Login/LoginPage';
 import SignUpCompletePage from './pages/SignUpComplete/SignUpCompletePage';
 import 'the-new-css-reset/css/reset.css';
@@ -33,9 +33,9 @@ const App = () => {
   // console.log(data?.hello)
   return (
     <QueryClientProvider>
-      <ThemeProvider>
+      <BooltiUIProvider>
         <RouterProvider router={router} />
-      </ThemeProvider>
+      </BooltiUIProvider>
     </QueryClientProvider>
   );
 };

apps/admin/src/pages/HomePage/HomePage.tsx

@@ -1,13 +1,15 @@
-import { useToast } from '@boolti/ui';
+import { useToast, useDialog } from '@boolti/ui';
 import Header from '../../components/Header/Header';
 import Layout from '../../components/Layout/Layout';
 import { PATH } from '../../constants/routes';
 import Styled from './HomePage.styles';
-import { Dialog, useDialogState } from '@boolti/ui';
 
 const HomePage = () => {
   const toast = useToast();
-  const { open, openDialog, closeDialog } = useDialogState();
+
+  const dialog1 = useDialog();
+  const dialog2 = useDialog();
+  const dialog3 = useDialog();
 
   return (
     <Layout
@@ -57,20 +59,59 @@ const HomePage = () => {
       </div>
       <button
         onClick={() => {
-          openDialog();
+          dialog1.open({
+            title: '다이얼로그 1 ',
+            content: (
+              <button
+                onClick={() => {
+                  dialog3.open({
+                    title: '다이얼로그 안의 다이얼로그',
+                    content: (
+                      <p>
+                        다이얼로그 내용
+                        <br />
+                        다이얼로그 ID : {dialog3.id}
+                      </p>
+                    ),
+                    onClose: () => {
+                      console.log('다이얼로그 안의 다이얼로그 닫힘');
+                    },
+                  });
+                }}
+              >
+                다이얼로그 안의 다이얼로그 열기
+                <br />
+                다이얼로그 ID : {dialog1.id}
+              </button>
+            ),
+            onClose: () => {
+              console.log('다이얼로그 1 닫힘');
+            },
+          });
         }}
       >
-        Open Dialog
+        Open Dialog 1
       </button>
-      <Dialog
-        title="Dialog Title"
-        open={open}
-        onClose={() => {
-          closeDialog();
+
+      <button
+        onClick={() => {
+          dialog2.open({
+            title: '다이얼로그 2',
+            content: (
+              <p>
+                다이얼로그 내용
+                <br />
+                다이얼로그 ID : {dialog2.id}
+              </p>
+            ),
+            onClose: () => {
+              console.log('다이얼로그 2 닫힘');
+            },
+          });
         }}
       >
-        <p>Dialog Content</p>
-      </Dialog>
+        Open Dialog 2
+      </button>
     </Layout>
   );
 };

packages/ui/package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
+    "nanoid": "^5.0.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hot-toast": "^2.4.1"

packages/ui/src/components/BooltiUIProvider/index.tsx

@@ -0,0 +1,16 @@
+import DialogProvider from '../DialogProvider';
+import ThemeProvider from '../ThemeProvider';
+
+interface BooltiUIProviderProps {
+  children: React.ReactNode;
+}
+
+const BooltiUIProvider = ({ children }: BooltiUIProviderProps) => {
+  return (
+    <ThemeProvider>
+      <DialogProvider>{children}</DialogProvider>
+    </ThemeProvider>
+  );
+};
+
+export default BooltiUIProvider;

packages/ui/src/components/DialogProvider/index.tsx

@@ -0,0 +1,32 @@
+import { useState } from 'react';
+import dialogContext, { IDialog } from '../../contexts/dialogContext';
+import Dialog from '../Dialog';
+
+interface DialogProviderProps {
+  children: React.ReactNode;
+}
+
+const DialogProvider = ({ children }: DialogProviderProps) => {
+  const [dialogList, setDialogList] = useState<IDialog[]>([]);
+
+  return (
+    <dialogContext.Provider value={{ dialogList, setDialogList }}>
+      {children}
+      {dialogList.map((dialog) => (
+        <Dialog
+          key={dialog.id}
+          open={!!dialogList.find(({ id }) => dialog.id === id)}
+          title={dialog.title}
+          onClose={() => {
+            dialog.onClose?.();
+            setDialogList((prev) => prev.filter(({ id }) => dialog.id !== id));
+          }}
+        >
+          {dialog.content}
+        </Dialog>
+      ))}
+    </dialogContext.Provider>
+  );
+};
+
+export default DialogProvider;

packages/ui/src/components/index.ts

@@ -1,7 +1,7 @@
-import ThemeProvider from './ThemeProvider';
+import BooltiUIProvider from './BooltiUIProvider';
 import Button from './Button';
 import TextButton from './TextButton';
 import Badge from './Badge';
 import Dialog from './Dialog';
 
-export { ThemeProvider, Button, TextButton, Badge, Dialog };
+export { BooltiUIProvider, Button, TextButton, Badge, Dialog };

packages/ui/src/contexts/dialogContext.tsx

@@ -0,0 +1,17 @@
+import { createContext } from 'react';
+
+export interface IDialog {
+  id: string;
+  content: React.ReactNode;
+  title?: string;
+  onClose?: () => void;
+}
+
+interface DialogContext {
+  dialogList: IDialog[];
+  setDialogList: React.Dispatch<React.SetStateAction<IDialog[]>>;
+}
+
+const dialogContext = createContext<DialogContext | null>(null);
+
+export default dialogContext;

packages/ui/src/hooks/index.ts

@@ -1,4 +1,4 @@
 import useToast from './useToast';
-import useDialogState from './useDialogState';
+import useDialog from './useDialog';
 
-export { useToast, useDialogState };
+export { useToast, useDialog };

packages/ui/src/hooks/useDialog.ts

@@ -0,0 +1,43 @@
+import { useCallback, useContext, useRef } from 'react';
+import { nanoid } from 'nanoid';
+import dialogContext, { IDialog } from '../contexts/dialogContext';
+
+const useDialog = () => {
+  const id = useRef<string>(nanoid(6));
+
+  const context = useContext(dialogContext);
+
+  const open = useCallback(
+    ({
+      content,
+      title,
+      onClose,
+    }: {
+      content: React.ReactNode;
+      title?: string;
+      onClose?: () => void;
+    }) => {
+      const newDialog: IDialog = {
+        id: id.current,
+        content,
+        title,
+        onClose,
+      };
+
+      context?.setDialogList((prev) => [...prev, newDialog]);
+    },
+    [context, id],
+  );
+
+  const close = useCallback(() => {
+    context?.setDialogList((prev) => prev.filter((dialog) => dialog.id !== id.current));
+  }, [context, id]);
+
+  return {
+    id: id.current,
+    open,
+    close,
+  };
+};
+
+export default useDialog;

yarn.lock

@@ -336,6 +336,7 @@ __metadata:
     "@emotion/styled": "npm:^11.11.0"
     "@types/react": "npm:^18.2.43"
     "@types/react-dom": "npm:^18.2.17"
+    nanoid: "npm:^5.0.4"
     react: "npm:^18.2.0"
     react-dom: "npm:^18.2.0"
     react-hot-toast: "npm:^2.4.1"
@@ -2776,6 +2777,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"nanoid@npm:^5.0.4":
+  version: 5.0.4
+  resolution: "nanoid@npm:5.0.4"
+  bin:
+    nanoid: bin/nanoid.js
+  checksum: 28c22d3ff96ea9e6abc059813b8483890c1f52de0f185d8347b0ea205c5966530205c374f1f77492bb53dc5d649de5d36d6eade16645055eb9220dc62080c1b1
+  languageName: node
+  linkType: hard
+
 "natural-compare@npm:^1.4.0":
   version: 1.4.0
   resolution: "natural-compare@npm:1.4.0"