feat: 토스트 스토리북 작성

YAPP-Github · Jan 14, 2024 · baafe25 · baafe25
1 parent 2c1dbf1
commit baafe25
Showing 1 changed file with 54 additions and 35 deletions.
diff --git a/src/components/Toast/Toast.stories.tsx b/src/components/Toast/Toast.stories.tsx
@@ -1,21 +1,22 @@
-import { useEffect } from 'react';
-
+import Button from '@components/Button';
 import { TOAST_DURATION_TIME } from '@constants/toast';
 import { useToastStore } from '@stores/toast';
 import type { Meta, StoryObj } from '@storybook/react';
 
 import Toast from '.';
 
 const meta: Meta<typeof Toast> = {
-  title: 'Toast',
+  title: 'Components/Toast',
   component: Toast,
-  decorators: [
-    (Story) => (
-      <div style={{ height: '500px' }}>
-        <Story />
-      </div>
-    ),
-  ],
+  parameters: {
+    docs: {
+      story: {
+        inline: false,
+        iframeHeight: 300,
+      },
+    },
+    componentSubtitle: '사용자에게 알려야하는 정보를 보여주는 컴포넌트',
+  },
 };
 
 export default meta;
@@ -25,37 +26,55 @@ export const Basic: Story = {
   render: function Render() {
     const { showToast } = useToastStore();
 
-    useEffect(() => {
-      showToast({ message: '테스트', type: TOAST_DURATION_TIME.SHOW });
-
-      const interval = setInterval(
-        () => showToast({ message: '테스트', type: TOAST_DURATION_TIME.SHOW }),
-        TOAST_DURATION_TIME.SHOW + 1000,
-      );
-
-      return () => clearInterval(interval);
-    }, [showToast]);
-
-    return <Toast />;
+    return (
+      <>
+        <Button
+          state="enabled"
+          size="M"
+          onClick={() => showToast({ message: '일반 토스트 노출' })}
+        >
+          일반 토스트 노출
+        </Button>
+        <Toast />
+      </>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: '사용자 액션이 없는 토스트 (노출시간: 3.5초)',
+      },
+    },
   },
 };
 
 export const WithAction: Story = {
   render: function Render() {
     const { showToast } = useToastStore();
 
-    useEffect(() => {
-      showToast({ message: '테스트', type: TOAST_DURATION_TIME.ACTION });
-
-      const interval = setInterval(
-        () =>
-          showToast({ message: '테스트', type: TOAST_DURATION_TIME.ACTION }),
-        TOAST_DURATION_TIME.ACTION + 1000,
-      );
-
-      return () => clearInterval(interval);
-    }, [showToast]);
-
-    return <Toast />;
+    return (
+      <>
+        <Button
+          state="enabled"
+          size="M"
+          onClick={() =>
+            showToast({
+              message: '액션이 있는 토스트 노출',
+              type: TOAST_DURATION_TIME.ACTION,
+            })
+          }
+        >
+          액션이 있는 토스트 노출
+        </Button>
+        <Toast />
+      </>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: '사용자 액션이 없는 토스트 (노출시간: 5초)',
+      },
+    },
   },
 };