chore: storybook 정리

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,
   },
 };

apps/docs/src/stories/CheckBox.stories.tsx

@@ -1,79 +1,44 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { useState } from 'react';
 import CheckBox from 'ui/CheckBox';
 
 const meta = {
   title: 'Components/CheckBox',
   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>;
 
 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'
   },
 };