Merge remote-tracking branch 'origin/main' into feat/#1033

.storybook/preview.tsx

@@ -7,6 +7,7 @@ import { RouterContext } from 'next/dist/shared/lib/router-context';
 import { QueryParamProvider } from 'use-query-params';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { RecoilRoot } from 'recoil';
+import { OverlayProvider } from '@toss/use-overlay';
 
 import ResponsiveProvider from '../src/components/common/Responsive/ResponsiveProvider';
 import StorybookToastProvider from '../src/components/common/Toast/providers/StorybookToastProvider';
@@ -17,7 +18,7 @@ import GlobalStyle from '../src/styles/GlobalStyle';
 initialize();
 
 const queryClient = new QueryClient({
-  defaultOptions: { queries: { cacheTime: 300000, refetchOnWindowFocus: false, staleTime: 300000, retry: 1 } },
+  defaultOptions: { queries: { gcTime: 300000, refetchOnWindowFocus: false, staleTime: 300000, retry: 1 } },
 });
 
 export const parameters = {
@@ -52,7 +53,9 @@ export const decorators = [
               <StorybookToastProvider>
                 <GlobalStyle />
                 <ResponsiveProvider>
-                  <Story />
+                  <OverlayProvider>
+                    <Story />
+                  </OverlayProvider>
                 </ResponsiveProvider>
               </StorybookToastProvider>
             </StorybookEventLoggerProvider>

package.json

@@ -41,8 +41,10 @@
     "@radix-ui/react-tabs": "^1.0.2",
     "@radix-ui/react-tooltip": "^1.0.5",
     "@sopt-makers/colors": "^3.0.0",
+    "@sopt-makers/fonts": "^1.0.0",
     "@tanstack/react-query": "^5.4.3",
     "@toss/emotion-utils": "^1.1.10",
+    "@toss/use-overlay": "^1.3.6",
     "await-to-js": "^3.0.0",
     "axios": "^0.27.2",
     "cmdk": "^0.2.0",

src/components/common/Modal/index.stories.tsx

@@ -1,8 +1,6 @@
 import { Meta } from '@storybook/react';
 
 import Button from '@/components/common/Button';
-import { Alert } from '@/components/common/Modal/Alert';
-import { Confirm } from '@/components/common/Modal/Confirm';
 import useModalState from '@/components/common/Modal/useModalState';
 
 import Modal from '.';
@@ -18,51 +16,19 @@ export const Default = {
     return (
       <>
         <Button onClick={onOpen}>클릭하여 모달 열기</Button>
-        <Modal title='모달 예시' isOpen={isOpen} onClose={onClose} />
+        <Modal isOpen={isOpen} onClose={onClose}>
+          <Modal.Content style={{ minWidth: '500px' }}>
+            <Modal.Title>모달 제목!</Modal.Title>
+            <div>안녕하세요, 반가워요.</div>
+            <Modal.Footer align='stretch'>
+              <Modal.Button action='normal'>버튼1</Modal.Button>
+              <Modal.Button action='close'>닫기</Modal.Button>
+            </Modal.Footer>
+          </Modal.Content>
+        </Modal>
       </>
     );
   },
 
   name: '기본',
 };
-
-export const ConfirmModal = {
-  render: () => {
-    const onConfirm = async () => {
-      const result = await Confirm({
-        title: '컨펌 모달',
-      });
-      if (result) {
-        alert('confirm!');
-      }
-    };
-
-    return (
-      <>
-        <Button onClick={onConfirm}>클릭하여 모달 열기</Button>
-      </>
-    );
-  },
-
-  name: '컨펌',
-};
-
-export const AlertModal = {
-  render: () => {
-    return (
-      <>
-        <Button
-          onClick={() => {
-            Alert({
-              title: '알럿 모달',
-            });
-          }}
-        >
-          클릭하여 모달 열기
-        </Button>
-      </>
-    );
-  },
-
-  name: '알럿',
-};