From 1ab2ea53683b63901e81afbc169ba8b7a7eff160 Mon Sep 17 00:00:00 2001
From: sohee <soheek@fairsquarelab.com>
Date: Fri, 14 Jun 2024 17:37:25 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20storybook=20argTypes=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/docs/src/stories/Button.stories.tsx   | 24 +++++++++++++++-------
 apps/docs/src/stories/Callout.stories.tsx  |  3 +++
 apps/docs/src/stories/CheckBox.stories.tsx |  5 +++++
 apps/docs/src/stories/Chip.stories.tsx     |  6 ++++++
 apps/docs/src/stories/Radio.stories.tsx    |  5 +++++
 apps/docs/src/stories/Tag.stories.tsx      | 17 ++++++---------
 apps/docs/src/stories/Toggle.stories.tsx   |  3 +++
 7 files changed, 45 insertions(+), 18 deletions(-)

diff --git a/apps/docs/src/stories/Button.stories.tsx b/apps/docs/src/stories/Button.stories.tsx
index c6214ac..c17006d 100644
--- a/apps/docs/src/stories/Button.stories.tsx
+++ b/apps/docs/src/stories/Button.stories.tsx
@@ -1,5 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { Button } from '@sopt-makers/ui';
+import { IconPlus, IconChevronRight } from '@sopt-makers/icons';
 
 interface ButtonOwnProps {
   size?: 'sm' | 'md' | 'lg';
@@ -16,6 +17,13 @@ export default {
   title: 'Components/Button',
   component: Button,
   tags: ['autodocs'],
+  argTypes: {
+    size: { control: 'radio', options: ['sm', 'md', 'lg'] },
+    theme: { control: 'radio', options: ['white', 'black', 'blue', 'red'] },
+    rounded: { control: 'radio', options: ['md', 'lg'] },
+    LeftIcon: { control: false },
+    RightIcon: { control: false }
+  }
 } as Meta<ButtonStoryProps>;
 
 // 기본 버튼 스토리
@@ -30,22 +38,24 @@ export const Default: StoryObj<ButtonStoryProps> = {
 };
 
 // 커스텀 버튼 스토리
-export const Another: StoryObj<ButtonStoryProps> = {
+export const LeftIcon: StoryObj<ButtonStoryProps> = {
   args: {
-    children: 'Another Button',
-    size: 'lg',
+    children: 'LeftIcon Button',
+    size: 'sm',
     theme: 'red',
     rounded: 'lg',
     disabled: false,
+    LeftIcon: IconPlus,
   },
 };
 
-export const Disabled: StoryObj<ButtonStoryProps> = {
+export const RightIcon: StoryObj<ButtonStoryProps> = {
   args: {
-    children: 'Disabled Button',
-    size: 'md',
+    children: 'RightIcon Button',
+    size: 'lg',
     theme: 'blue',
     rounded: 'lg',
-    disabled: true,
+    disabled: false,
+    RightIcon: IconChevronRight,
   },
 };
\ No newline at end of file
diff --git a/apps/docs/src/stories/Callout.stories.tsx b/apps/docs/src/stories/Callout.stories.tsx
index 39a6d0d..ebf6546 100644
--- a/apps/docs/src/stories/Callout.stories.tsx
+++ b/apps/docs/src/stories/Callout.stories.tsx
@@ -14,6 +14,9 @@ export default {
   title: "Components/Callout",
   component: Callout,
   tags: ["autodocs"],
+  argTypes: {
+    type: { control: 'radio', options: ['danger', 'information', 'warning'] },
+  }
 } as Meta<CalloutProps>;
 
 // danger 콜아웃 스토리
diff --git a/apps/docs/src/stories/CheckBox.stories.tsx b/apps/docs/src/stories/CheckBox.stories.tsx
index a57213e..b15c29d 100644
--- a/apps/docs/src/stories/CheckBox.stories.tsx
+++ b/apps/docs/src/stories/CheckBox.stories.tsx
@@ -5,6 +5,11 @@ const meta = {
   title: "Components/Control/CheckBox",
   component: CheckBox,
   tags: ["autodocs"],
+  argTypes: {
+    size: { control: 'radio', options: ['sm', 'lg'] },
+    label: { control: 'text' },
+    color: { control: 'color' },
+  }
 } as Meta<typeof CheckBox>;
 
 export default meta;
diff --git a/apps/docs/src/stories/Chip.stories.tsx b/apps/docs/src/stories/Chip.stories.tsx
index 1ad69f4..307b95c 100644
--- a/apps/docs/src/stories/Chip.stories.tsx
+++ b/apps/docs/src/stories/Chip.stories.tsx
@@ -16,6 +16,12 @@ export default {
   title: 'Components/Chip',
   component: Chip,
   tags: ['autodocs'],
+  argTypes: {
+    size: { control: 'radio', options: ['sm', 'md'] },
+    iconColor: { control: 'color' },
+    LeftIcon: { control: false },
+    RightIcon: { control: false },
+  }
 } as Meta<ChipStoryProps>;
 
 // 기본 chip 스토리
diff --git a/apps/docs/src/stories/Radio.stories.tsx b/apps/docs/src/stories/Radio.stories.tsx
index af05b50..0f93cdf 100644
--- a/apps/docs/src/stories/Radio.stories.tsx
+++ b/apps/docs/src/stories/Radio.stories.tsx
@@ -5,6 +5,11 @@ const meta = {
   title: "Components/Control/Radio",
   component: Radio,
   tags: ["autodocs"],
+  argTypes: {
+    size: { control: 'radio', options: ['sm', 'lg'] },
+    label: { control: 'text' },
+    color: { control: 'color' },
+  }
 } as Meta<typeof Radio>;
 
 export default meta;
diff --git a/apps/docs/src/stories/Tag.stories.tsx b/apps/docs/src/stories/Tag.stories.tsx
index 2bd216c..43b8aab 100644
--- a/apps/docs/src/stories/Tag.stories.tsx
+++ b/apps/docs/src/stories/Tag.stories.tsx
@@ -17,6 +17,12 @@ export default {
   title: "Components/Tag",
   component: Tag,
   tags: ["autodocs"],
+  argTypes: {
+    size: { control: 'radio', options: ['sm', 'md', 'lg'] },
+    shape: { control: 'radio', options: ['rect', 'pill'] },
+    variant: { control: 'radio', options: ['default', 'primary', 'secondary'] },
+    type: { control: 'radio', options: ['solid', 'line'] },
+  }
 } as Meta<TagStoryProps>;
 
 // 기본 태그 스토리
@@ -29,14 +35,3 @@ export const Default: StoryObj<TagStoryProps> = {
     type: "solid",
   },
 };
-
-// 커스텀 버튼 스토리
-export const Another: StoryObj<TagStoryProps> = {
-  args: {
-    children: "Another Tag",
-    size: "md",
-    shape: "pill",
-    variant: "primary",
-    type: "line",
-  },
-};
diff --git a/apps/docs/src/stories/Toggle.stories.tsx b/apps/docs/src/stories/Toggle.stories.tsx
index 6f26fb8..3cb8546 100644
--- a/apps/docs/src/stories/Toggle.stories.tsx
+++ b/apps/docs/src/stories/Toggle.stories.tsx
@@ -5,6 +5,9 @@ const meta = {
   title: "Components/Control/Toggle",
   component: Toggle,
   tags: ["autodocs"],
+  argTypes: {
+    size: { control: 'radio', options: ['sm', 'lg'] },
+  }
 } as Meta<typeof Toggle>;
 
 export default meta;