feat: storybook 추가

2026-04-14 10:38:36 +09:00
parent 52f8c30b2e
commit 8d6bff88d6
23 changed files with 1687 additions and 10 deletions
--- a/web-app/app/shared/components/radio/Radio.stories.tsx
+++ b/web-app/app/shared/components/radio/Radio.stories.tsx
@@ -0,0 +1,126 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { useState } from 'react'
+import { Radio } from './Radio'
+
+const meta = {
+  title: 'Components/Radio',
+  component: Radio,
+  args: {
+    name: 'default',
+    value: 'option1',
+  },
+  argTypes: {
+    disabled: {
+      control: 'boolean',
+    },
+    readOnly: {
+      control: 'boolean',
+    },
+  },
+} satisfies Meta<typeof Radio>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    name: 'default',
+    value: 'option1',
+    children: '옵션 1',
+  },
+}
+
+export const Checked: Story = {
+  args: {
+    name: 'checked',
+    value: 'option1',
+    checked: true,
+    children: '선택됨',
+  },
+}
+
+export const Disabled: Story = {
+  args: {
+    name: 'disabled',
+    value: 'option1',
+    disabled: true,
+    children: '비활성화',
+  },
+}
+
+export const DisabledChecked: Story = {
+  args: {
+    name: 'disabled-checked',
+    value: 'option1',
+    disabled: true,
+    checked: true,
+    children: '비활성화 (선택됨)',
+  },
+}
+
+export const ReadOnly: Story = {
+  args: {
+    name: 'readonly',
+    value: 'option1',
+    readOnly: true,
+    checked: true,
+    children: '읽기 전용',
+  },
+}
+
+export const RadioGroup: Story = {
+  render: () => {
+    const [selected, setSelected] = useState('option1')
+    return (
+      <div className="flex flex-col gap-2">
+        <Radio name="group" value="option1" checked={selected === 'option1'} onChange={setSelected}>
+          옵션 1
+        </Radio>
+        <Radio name="group" value="option2" checked={selected === 'option2'} onChange={setSelected}>
+          옵션 2
+        </Radio>
+        <Radio name="group" value="option3" checked={selected === 'option3'} onChange={setSelected}>
+          옵션 3
+        </Radio>
+      </div>
+    )
+  },
+}
+
+export const HorizontalRadioGroup: Story = {
+  render: () => {
+    const [selected, setSelected] = useState('option1')
+    return (
+      <div className="flex gap-4">
+        <Radio name="horizontal-group" value="option1" checked={selected === 'option1'} onChange={setSelected}>
+          옵션 1
+        </Radio>
+        <Radio name="horizontal-group" value="option2" checked={selected === 'option2'} onChange={setSelected}>
+          옵션 2
+        </Radio>
+        <Radio name="horizontal-group" value="option3" checked={selected === 'option3'} onChange={setSelected}>
+          옵션 3
+        </Radio>
+      </div>
+    )
+  },
+}
+
+export const WithMixedStates: Story = {
+  render: () => {
+    const [selected, setSelected] = useState('option1')
+    return (
+      <div className="flex flex-col gap-2">
+        <Radio name="mixed" value="option1" checked={selected === 'option1'} onChange={setSelected}>
+          활성화 옵션 1
+        </Radio>
+        <Radio name="mixed" value="option2" checked={selected === 'option2'} onChange={setSelected}>
+          활성화 옵션 2
+        </Radio>
+        <Radio name="mixed" value="option3" disabled>
+          비활성화 옵션
+        </Radio>
+      </div>
+    )
+  },
+}