From 750a9d8a0f7ce9c99302cbb699a82b6512413d7f Mon Sep 17 00:00:00 2001
From: sohee <soheek@fairsquarelab.com>
Date: Sun, 10 Dec 2023 12:23:01 +0900
Subject: [PATCH] =?UTF-8?q?chore:=20storybook=20=EC=A0=95=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/docs/src/stories/Button.stories.tsx   |  52 ++--
 apps/docs/src/stories/CheckBox.stories.tsx |  73 ++----
 apps/docs/src/stories/Dialog.stories.tsx   | 282 ++-------------------
 apps/docs/src/stories/Toast.stories.tsx    |  67 ++---
 4 files changed, 74 insertions(+), 400 deletions(-)

diff --git a/apps/docs/src/stories/Button.stories.tsx b/apps/docs/src/stories/Button.stories.tsx
index 223a5de..368eb74 100644
--- a/apps/docs/src/stories/Button.stories.tsx
+++ b/apps/docs/src/stories/Button.stories.tsx
@@ -5,6 +5,7 @@ interface ButtonOwnProps {
   size?: 'sm' | 'md' | 'lg';
   theme?: 'white' | 'black' | 'blue' | 'red';
   rounded?: 'md' | 'lg';
+  disabled?: boolean;
   LeftIcon?: React.ComponentType;
   RightIcon?: React.ComponentType;
 }
@@ -15,6 +16,16 @@ export default {
   title: 'Components/Button',
   component: Button,
   tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+    backgrounds: {
+      default: 'dark', // 기본 배경을 'dark'로 설정
+      values: [
+        { name: 'dark', value: "#0F1012" }, // 'dark' 배경의 색상을 검정색으로 지정
+        { name: 'white', value: '#ffffff' }
+      ],
+    },
+  },
 } as Meta<ButtonStoryProps>;
 
 // 기본 버튼 스토리
@@ -24,16 +35,7 @@ export const Default: StoryObj<ButtonStoryProps> = {
     size: 'md',
     theme: 'white',
     rounded: 'md',
-  },
-  parameters: {
-    layout: 'centered',
-    backgrounds: {
-      default: 'dark', // 기본 배경을 'dark'로 설정
-      values: [
-        { name: 'dark', value: '#2c2c2c' }, // 'dark' 배경의 색상을 검정색으로 지정
-        { name: 'white', value: '#ffffff' }
-      ],
-    },
+    disabled: false,
   },
 };
 
@@ -44,30 +46,16 @@ export const Another: StoryObj<ButtonStoryProps> = {
     size: 'lg',
     theme: 'red',
     rounded: 'lg',
-  },
-  parameters: {
-    layout: 'centered',
-    backgrounds: {
-      default: 'dark', // 기본 배경을 'dark'로 설정
-      values: [
-        { name: 'dark', value: '#2c2c2c' }, // 'dark' 배경의 색상을 검정색으로 지정
-        { name: 'white', value: '#ffffff' }
-      ],
-    },
+    disabled: false,
   },
 };
 
-export const DefaultDisabled: StoryObj = {
-  name: "Disabled",
-  render: () => <Button disabled>Disabled</Button>,
-  parameters: {
-    layout: 'centered',
-    backgrounds: {
-      default: 'dark', // 기본 배경을 'dark'로 설정
-      values: [
-        { name: 'dark', value: '#2c2c2c' }, // 'dark' 배경의 색상을 검정색으로 지정
-        { name: 'white', value: '#ffffff' }
-      ],
-    },
+export const Disabled: StoryObj<ButtonStoryProps> = {
+  args: {
+    children: 'Disabled Button',
+    size: 'md',
+    theme: 'blue',
+    rounded: 'lg',
+    disabled: true,
   },
 };
\ No newline at end of file
diff --git a/apps/docs/src/stories/CheckBox.stories.tsx b/apps/docs/src/stories/CheckBox.stories.tsx
index ae54970..aa4adb3 100644
--- a/apps/docs/src/stories/CheckBox.stories.tsx
+++ b/apps/docs/src/stories/CheckBox.stories.tsx
@@ -1,5 +1,4 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { useState } from 'react';
 import CheckBox from 'ui/CheckBox';
 
 const meta = {
@@ -7,6 +6,13 @@ const meta = {
   component: CheckBox,
   parameters: {
     layout: 'centered',
+    backgrounds: {
+      default: 'dark', // 기본 배경을 'dark'로 설정
+      values: [
+        { name: 'dark', value: "#0F1012" }, // 'dark' 배경의 색상을 검정색으로 지정
+        { name: 'white', value: '#ffffff' },
+      ],
+    },
   },
   tags: ['autodocs'],
 } as Meta<typeof CheckBox>;
@@ -14,66 +20,25 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Basic: Story = {
-  render: function Render() {
-    const [checked, onChange] = useState<boolean>(false);
-
-    return <CheckBox checked={checked} size="small" onChange={(e) => onChange(e.target.checked)} />;
+export const Default: Story = {
+  args: {
+    checked: true,
+    size: 'small',
   },
-
-  name: '체크박스 기본',
 };
 
 export const LargeLabel: StoryObj = {
-  render: function Render() {
-    const [checked, onChange] = useState<boolean>(false);
-
-    return (
-      <CheckBox
-        checked={checked}
-        size="large"
-        label="Label"
-        onChange={(e) => onChange(e.target.checked)}
-      />
-    );
-  },
-
-  name: '체크박스 설명 있는 큰 사이즈',
-  parameters: {
-    layout: 'centered',
-    backgrounds: {
-      default: 'dark', // 기본 배경을 'dark'로 설정
-      values: [
-        { name: 'dark', value: '#2c2c2c' }, // 'dark' 배경의 색상을 검정색으로 지정
-        { name: 'white', value: '#ffffff' },
-      ],
-    },
+  args: {
+    checked: false,
+    size: 'large',
+    label: 'Label'
   },
 };
 
 export const SmallLabel: StoryObj = {
-  render: function Render() {
-    const [checked, onChange] = useState<boolean>(false);
-
-    return (
-      <CheckBox
-        checked={checked}
-        size="small"
-        label="Label"
-        onChange={(e) => onChange(e.target.checked)}
-      />
-    );
-  },
-
-  name: '체크박스 설명 있는 작은 사이즈',
-  parameters: {
-    layout: 'centered',
-    backgrounds: {
-      default: 'dark', // 기본 배경을 'dark'로 설정
-      values: [
-        { name: 'dark', value: '#2c2c2c' }, // 'dark' 배경의 색상을 검정색으로 지정
-        { name: 'white', value: '#ffffff' },
-      ],
-    },
+  args: {
+    checked: false,
+    size: 'small',
+    label: 'Label'
   },
 };
diff --git a/apps/docs/src/stories/Dialog.stories.tsx b/apps/docs/src/stories/Dialog.stories.tsx
index d93afb1..175fc6d 100644
--- a/apps/docs/src/stories/Dialog.stories.tsx
+++ b/apps/docs/src/stories/Dialog.stories.tsx
@@ -11,6 +11,16 @@ export default {
   title: 'Components/Dialog',
   component: Dialog,
   tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+    backgrounds: {
+      default: 'dark', // 기본 배경을 'dark'로 설정
+      values: [
+        { name: 'dark', value: "#0F1012" }, // 'dark' 배경의 색상을 검정색으로 지정
+        { name: 'white', value: '#ffffff' },
+      ],
+    },
+  },
   decorators: [
     (Story: StoryFn) => (
       <DialogProvider>
@@ -46,17 +56,6 @@ export const DesktopDefault: StoryObj = {
 
     return <DialogButton option={option} />;
   },
-  name: '다이얼로그 데스크탑 - default',
-  parameters: {
-    layout: 'centered',
-    backgrounds: {
-      default: 'dark', // 기본 배경을 'dark'로 설정
-      values: [
-        { name: 'dark', value: '#2c2c2c' }, // 'dark' 배경의 색상을 검정색으로 지정
-        { name: 'white', value: '#ffffff' },
-      ],
-    },
-  },
 };
 
 export const DesktopDanger: StoryObj = {
@@ -77,17 +76,6 @@ export const DesktopDanger: StoryObj = {
 
     return <DialogButton option={option} />;
   },
-  name: '다이얼로그 데스크탑 - danger',
-  parameters: {
-    layout: 'centered',
-    backgrounds: {
-      default: 'dark', // 기본 배경을 'dark'로 설정
-      values: [
-        { name: 'dark', value: '#2c2c2c' }, // 'dark' 배경의 색상을 검정색으로 지정
-        { name: 'white', value: '#ffffff' },
-      ],
-    },
-  },
 };
 
 export const DesktopSingle: StoryObj = {
@@ -107,94 +95,6 @@ export const DesktopSingle: StoryObj = {
 
     return <DialogButton option={option} />;
   },
-  name: '다이얼로그 데스크탑 - single',
-  parameters: {
-    layout: 'centered',
-    backgrounds: {
-      default: 'dark', // 기본 배경을 'dark'로 설정
-      values: [
-        { name: 'dark', value: '#2c2c2c' }, // 'dark' 배경의 색상을 검정색으로 지정
-        { name: 'white', value: '#ffffff' },
-      ],
-    },
-  },
-};
-
-// 라벨 o
-export const DesktopDefaultLabel: StoryObj = {
-  render: function Render() {
-    const { closeDialog, checkCheckBox } = useContext(DialogContext);
-
-    const option: DialogOptionType = {
-      device: 'desktop',
-      title: '타이틀 자리입니다.',
-      description: '안녕하세요! makers입니다.',
-      checkBoxOptions: {
-        label: '다시는 보지 않기',
-        checked: false,
-        size: 'small',
-        color: 'white',
-        onChange: checkCheckBox,
-      },
-      type: 'default',
-      typeOptions: {
-        cancelButtonText: '취소',
-        approveButtonText: '확인',
-        buttonFunction: closeDialog,
-      },
-    };
-
-    return <DialogButton option={option} />;
-  },
-  name: '다이얼로그 데스크탑 - default -label',
-  parameters: {
-    layout: 'centered',
-    backgrounds: {
-      default: 'dark', // 기본 배경을 'dark'로 설정
-      values: [
-        { name: 'dark', value: '#2c2c2c' }, // 'dark' 배경의 색상을 검정색으로 지정
-        { name: 'white', value: '#ffffff' },
-      ],
-    },
-  },
-};
-
-export const DesktopDangerLabel: StoryObj = {
-  render: function Render() {
-    const { closeDialog, checkCheckBox } = useContext(DialogContext);
-
-    const option: DialogOptionType = {
-      device: 'desktop',
-      title: '타이틀 자리입니다.',
-      description: <>안녕하세요! makers입니다.</>,
-      checkBoxOptions: {
-        label: '다시는 보지 않기',
-        checked: false,
-        size: 'small',
-        color: 'white',
-        onChange: checkCheckBox,
-      },
-      type: 'danger',
-      typeOptions: {
-        cancelButtonText: '취소',
-        approveButtonText: '확인',
-        buttonFunction: closeDialog,
-      },
-    };
-
-    return <DialogButton option={option} />;
-  },
-  name: '다이얼로그 데스크탑 - danger - label',
-  parameters: {
-    layout: 'centered',
-    backgrounds: {
-      default: 'dark', // 기본 배경을 'dark'로 설정
-      values: [
-        { name: 'dark', value: '#2c2c2c' }, // 'dark' 배경의 색상을 검정색으로 지정
-        { name: 'white', value: '#ffffff' },
-      ],
-    },
-  },
 };
 
 export const DesktopSingleLabel: StoryObj = {
@@ -221,20 +121,10 @@ export const DesktopSingleLabel: StoryObj = {
 
     return <DialogButton option={option} />;
   },
-  name: '다이얼로그 데스크탑 - single - label',
-  parameters: {
-    layout: 'centered',
-    backgrounds: {
-      default: 'dark', // 기본 배경을 'dark'로 설정
-      values: [
-        { name: 'dark', value: '#2c2c2c' }, // 'dark' 배경의 색상을 검정색으로 지정
-        { name: 'white', value: '#ffffff' },
-      ],
-    },
-  },
+  name: 'Desktop Single - Label',
 };
 
-export const DesktopLong: StoryObj = {
+export const DesktopSingleLong: StoryObj = {
   render: function Render() {
     const { closeDialog, checkCheckBox } = useContext(DialogContext);
 
@@ -311,17 +201,7 @@ export const DesktopLong: StoryObj = {
     theme: 'white',
     rounded: 'md',
   },
-  name: '다이얼로그 데스크탑 - long',
-  parameters: {
-    layout: 'centered',
-    backgrounds: {
-      default: 'dark', // 기본 배경을 'dark'로 설정
-      values: [
-        { name: 'dark', value: '#2c2c2c' }, // 'dark' 배경의 색상을 검정색으로 지정
-        { name: 'white', value: '#ffffff' },
-      ],
-    },
-  },
+  name: 'Desktop Single - Long',
 };
 
 // 모바일
@@ -344,17 +224,6 @@ export const MobileDefault: StoryObj = {
 
     return <DialogButton option={option} />;
   },
-  name: '다이얼로그 모바일 - default',
-  parameters: {
-    layout: 'centered',
-    backgrounds: {
-      default: 'dark', // 기본 배경을 'dark'로 설정
-      values: [
-        { name: 'dark', value: '#2c2c2c' }, // 'dark' 배경의 색상을 검정색으로 지정
-        { name: 'white', value: '#ffffff' },
-      ],
-    },
-  },
 };
 
 export const MobileDanger: StoryObj = {
@@ -375,17 +244,6 @@ export const MobileDanger: StoryObj = {
 
     return <DialogButton option={option} />;
   },
-  name: '다이얼로그 모바일 - danger',
-  parameters: {
-    layout: 'centered',
-    backgrounds: {
-      default: 'dark', // 기본 배경을 'dark'로 설정
-      values: [
-        { name: 'dark', value: '#2c2c2c' }, // 'dark' 배경의 색상을 검정색으로 지정
-        { name: 'white', value: '#ffffff' },
-      ],
-    },
-  },
 };
 
 export const MobileSingle: StoryObj = {
@@ -405,94 +263,6 @@ export const MobileSingle: StoryObj = {
 
     return <DialogButton option={option} />;
   },
-  name: '다이얼로그 모바일 - single',
-  parameters: {
-    layout: 'centered',
-    backgrounds: {
-      default: 'dark', // 기본 배경을 'dark'로 설정
-      values: [
-        { name: 'dark', value: '#2c2c2c' }, // 'dark' 배경의 색상을 검정색으로 지정
-        { name: 'white', value: '#ffffff' },
-      ],
-    },
-  },
-};
-
-// 라벨 o
-export const MobileDefaultLabel: StoryObj = {
-  render: function Render() {
-    const { closeDialog, checkCheckBox } = useContext(DialogContext);
-
-    const option: DialogOptionType = {
-      device: 'mobile',
-      title: '타이틀 자리입니다.',
-      description: <>안녕하세요! makers입니다.</>,
-      checkBoxOptions: {
-        label: '다시는 보지 않기',
-        checked: false,
-        size: 'small',
-        color: 'white',
-        onChange: checkCheckBox,
-      },
-      type: 'default',
-      typeOptions: {
-        cancelButtonText: '취소',
-        approveButtonText: '확인',
-        buttonFunction: closeDialog,
-      },
-    };
-
-    return <DialogButton option={option} />;
-  },
-  name: '다이얼로그 모바일 - default - label',
-  parameters: {
-    layout: 'centered',
-    backgrounds: {
-      default: 'dark', // 기본 배경을 'dark'로 설정
-      values: [
-        { name: 'dark', value: '#2c2c2c' }, // 'dark' 배경의 색상을 검정색으로 지정
-        { name: 'white', value: '#ffffff' },
-      ],
-    },
-  },
-};
-
-export const MobileDangerLabel: StoryObj = {
-  render: function Render() {
-    const { closeDialog, checkCheckBox } = useContext(DialogContext);
-
-    const option: DialogOptionType = {
-      device: 'mobile',
-      title: '타이틀 자리입니다.',
-      description: <>안녕하세요! makers입니다.</>,
-      checkBoxOptions: {
-        label: '다시는 보지 않기',
-        checked: false,
-        size: 'small',
-        color: 'white',
-        onChange: checkCheckBox,
-      },
-      type: 'danger',
-      typeOptions: {
-        cancelButtonText: '취소',
-        approveButtonText: '확인',
-        buttonFunction: closeDialog,
-      },
-    };
-
-    return <DialogButton option={option} />;
-  },
-  name: '다이얼로그 모바일 - danger - label',
-  parameters: {
-    layout: 'centered',
-    backgrounds: {
-      default: 'dark', // 기본 배경을 'dark'로 설정
-      values: [
-        { name: 'dark', value: '#2c2c2c' }, // 'dark' 배경의 색상을 검정색으로 지정
-        { name: 'white', value: '#ffffff' },
-      ],
-    },
-  },
 };
 
 export const MobileSingleLabel: StoryObj = {
@@ -519,20 +289,10 @@ export const MobileSingleLabel: StoryObj = {
 
     return <DialogButton option={option} />;
   },
-  name: '다이얼로그 모바일 - single - label',
-  parameters: {
-    layout: 'centered',
-    backgrounds: {
-      default: 'dark', // 기본 배경을 'dark'로 설정
-      values: [
-        { name: 'dark', value: '#2c2c2c' }, // 'dark' 배경의 색상을 검정색으로 지정
-        { name: 'white', value: '#ffffff' },
-      ],
-    },
-  },
+  name: 'Mobile Single - Label',
 };
 
-export const MobileLong: StoryObj = {
+export const MobileSingleLong: StoryObj = {
   render: function Render() {
     const { closeDialog, checkCheckBox } = useContext(DialogContext);
 
@@ -595,15 +355,5 @@ export const MobileLong: StoryObj = {
 
     return <DialogButton option={option} />;
   },
-  name: '다이얼로그 모바일 - long',
-  parameters: {
-    layout: 'centered',
-    backgrounds: {
-      default: 'dark', // 기본 배경을 'dark'로 설정
-      values: [
-        { name: 'dark', value: '#2c2c2c' }, // 'dark' 배경의 색상을 검정색으로 지정
-        { name: 'white', value: '#ffffff' },
-      ],
-    },
-  },
+  name: 'Mobile Single - Long',
 };
diff --git a/apps/docs/src/stories/Toast.stories.tsx b/apps/docs/src/stories/Toast.stories.tsx
index 11c4a51..46fefa7 100644
--- a/apps/docs/src/stories/Toast.stories.tsx
+++ b/apps/docs/src/stories/Toast.stories.tsx
@@ -6,6 +6,17 @@ import { IconArchive } from "../../../../packages/icons/src";
 const meta: Meta = {
   title: "Components/Toast",
   component: Button,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+    backgrounds: {
+      default: 'dark', // 기본 배경을 'dark'로 설정
+      values: [
+        { name: 'dark', value: "#0F1012" }, // 'dark' 배경의 색상을 검정색으로 지정
+        { name: 'white', value: '#ffffff' },
+      ],
+    },
+  },
   decorators: [
     (Story: StoryFn) => (
       <ToastProvider>
@@ -23,26 +34,16 @@ const ToastSample = ({ option }: { option: ToastOptionType }) => {
   return <button onClick={() => open(option)}>Open Toast</button>;
 };
 
-export const Default: Story = {
-  name: "default - success",
+export const DefaultSuccess: Story = {
+  name: "Default - Success",
   render: () => {
     const option: ToastOptionType = { icon: "success", content: "기본 토스트" };
     return <ToastSample option={option} />;
   },
-  parameters: {
-    layout: "centered",
-    backgrounds: {
-      default: "dark", // 기본 배경을 'dark'로 설정
-      values: [
-        { name: "dark", value: "#2c2c2c" }, // 'dark' 배경의 색상을 검정색으로 지정
-        { name: "white", value: "#ffffff" },
-      ],
-    },
-  },
 };
 
-export const TextOver: Story = {
-  name: "text over - alert",
+export const TextOverAlert: Story = {
+  name: "Text Over - Alert",
   render: () => {
     const option: ToastOptionType = {
       icon: "alert",
@@ -51,20 +52,10 @@ export const TextOver: Story = {
     };
     return <ToastSample option={option} />;
   },
-  parameters: {
-    layout: "centered",
-    backgrounds: {
-      default: "dark", // 기본 배경을 'dark'로 설정
-      values: [
-        { name: "dark", value: "#2c2c2c" }, // 'dark' 배경의 색상을 검정색으로 지정
-        { name: "white", value: "#ffffff" },
-      ],
-    },
-  },
 };
 
-export const ActionButton: Story = {
-  name: "action button - error",
+export const ActionButtonError: Story = {
+  name: "Action Button - Error",
   render: () => {
     const option: ToastOptionType = {
       icon: "error",
@@ -73,20 +64,10 @@ export const ActionButton: Story = {
     };
     return <ToastSample option={option} />;
   },
-  parameters: {
-    layout: "centered",
-    backgrounds: {
-      default: "dark", // 기본 배경을 'dark'로 설정
-      values: [
-        { name: "dark", value: "#2c2c2c" }, // 'dark' 배경의 색상을 검정색으로 지정
-        { name: "white", value: "#ffffff" },
-      ],
-    },
-  },
 };
 
-export const CustomIcon: Story = {
-  name: "custom icon",
+export const ActionButtonCustomIcon: Story = {
+  name: "Action Button - Custom Icon",
   render: () => {
     const option: ToastOptionType = {
       icon: <IconArchive />,
@@ -95,14 +76,4 @@ export const CustomIcon: Story = {
     };
     return <ToastSample option={option} />;
   },
-  parameters: {
-    layout: "centered",
-    backgrounds: {
-      default: "dark", // 기본 배경을 'dark'로 설정
-      values: [
-        { name: "dark", value: "#2c2c2c" }, // 'dark' 배경의 색상을 검정색으로 지정
-        { name: "white", value: "#ffffff" },
-      ],
-    },
-  },
 };