feat: storybook 생성

web-app/app/shared/components/button/Button.stories.tsx

@@ -0,0 +1,113 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Button } from './Button'
+
+const meta = {
+  title: 'Components/Button', 
+  component: Button,
+  argTypes: {
+    color: {
+      control: 'select',
+      options: ['primary', 'light', 'green', 'lightGreen', 'black', 'gray', 'orange', 'navy', 'lightNavy'],
+    },
+    size: {
+      control: 'select',
+      options: ['small', 'medium', 'large'],
+    },
+    isDisabled: {
+      control: 'boolean',
+    },
+    isPending: {
+      control: 'boolean',
+    },
+  },
+} satisfies Meta<typeof Button>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    children: '버튼',
+    color: 'primary',
+    size: 'medium',
+  },
+}
+
+export const Small: Story = {
+  args: {
+    children: '작은 버튼',
+    size: 'small',
+  },
+}
+
+export const Medium: Story = {
+  args: {
+    children: '중간 버튼',
+    size: 'medium',
+  },
+}
+
+export const Large: Story = {
+  args: {
+    children: '큰 버튼',
+    size: 'large',
+  },
+}
+
+export const Primary: Story = {
+  args: {
+    children: 'Primary',
+    color: 'primary',
+  },
+}
+
+export const Light: Story = {
+  args: {
+    children: 'Light',
+    color: 'light',
+  },
+}
+
+export const Green: Story = {
+  args: {
+    children: 'Green',
+    color: 'green',
+  },
+}
+
+export const Navy: Story = {
+  args: {
+    children: 'Navy',
+    color: 'navy',
+  },
+}
+
+export const Disabled: Story = {
+  args: {
+    children: '비활성화',
+    isDisabled: true,
+  },
+}
+
+export const Loading: Story = {
+  args: {
+    children: '로딩 중',
+    isPending: true,
+  },
+}
+
+export const AllColors: Story = {
+  render: () => (
+    <div className="flex flex-wrap gap-2">
+      <Button color="primary">Primary</Button>
+      <Button color="light">Light</Button>
+      <Button color="green">Green</Button>
+      <Button color="lightGreen">Light Green</Button>
+      <Button color="black">Black</Button>
+      <Button color="gray">Gray</Button>
+      <Button color="orange">Orange</Button>
+      <Button color="navy">Navy</Button>
+      <Button color="lightNavy">Light Navy</Button>
+    </div>
+  ),
+}