feat: storybook 추가

web-app/app/shared/components/radioGroup/RadioGroup.stories.tsx

@@ -0,0 +1,122 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { useState } from 'react'
+import { RadioGroup } from './RadioGroup'
+
+const meta = {
+  title: 'Components/RadioGroup',
+  component: RadioGroup,
+  args: {
+    items: [],
+    orientation: 'horizontal',
+    isDisabled: false,
+    isReadOnly: false,
+  },
+  argTypes: {
+    orientation: {
+      control: 'select',
+      options: ['horizontal', 'vertical'],
+    },
+    isDisabled: {
+      control: 'boolean',
+    },
+    isReadOnly: {
+      control: 'boolean',
+    },
+  },
+} satisfies Meta<typeof RadioGroup>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const defaultItems = [
+  { value: 'option1', label: '옵션 1' },
+  { value: 'option2', label: '옵션 2' },
+  { value: 'option3', label: '옵션 3' },
+]
+
+export const Default: Story = {
+  args: {
+    items: defaultItems,
+  },
+}
+
+export const Horizontal: Story = {
+  args: {
+    items: defaultItems,
+    orientation: 'horizontal',
+  },
+}
+
+export const Vertical: Story = {
+  args: {
+    items: defaultItems,
+    orientation: 'vertical',
+  },
+}
+
+export const WithDefaultValue: Story = {
+  render: function Render() {
+    const [value, setValue] = useState('option2')
+    return (
+      <RadioGroup
+        items={defaultItems}
+        value={value}
+        onChange={setValue}
+      />
+    )
+  },
+}
+
+export const Disabled: Story = {
+  args: {
+    items: defaultItems,
+    isDisabled: true,
+  },
+}
+
+export const ReadOnly: Story = {
+  args: {
+    items: defaultItems,
+    isReadOnly: true,
+    value: 'option1',
+  },
+}
+
+export const WithDisabledOption: Story = {
+  args: {
+    items: [
+      { value: 'option1', label: '옵션 1' },
+      { value: 'option2', label: '옵션 2 (비활성화)', isDisabled: true },
+      { value: 'option3', label: '옵션 3' },
+    ],
+  },
+}
+
+export const WithManyOptions: Story = {
+  args: {
+    items: [
+      { value: 'apple', label: '사과' },
+      { value: 'banana', label: '바나나' },
+      { value: 'orange', label: '오렌지' },
+      { value: 'grape', label: '포도' },
+      { value: 'strawberry', label: '딸기' },
+    ],
+    orientation: 'vertical',
+  },
+}
+
+export const Controlled: Story = {
+  render: function Render() {
+    const [value, setValue] = useState('')
+    return (
+      <div className="space-y-4">
+        <RadioGroup
+          items={defaultItems}
+          value={value}
+          onChange={setValue}
+        />
+        <p className="text-sm text-gray-600">선택된 값: {value || '없음'}</p>
+      </div>
+    )
+  },
+}