feat: storybook 생성

web-app/app/shared/components/select/Select.stories.tsx

@@ -0,0 +1,98 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { useState } from 'react'
+import { Select, type SelectOption } from './Select'
+
+const meta = {
+  title: 'Components/Select',
+  component: Select,
+  argTypes: {
+    isDisabled: { control: 'boolean' },
+    isReadOnly: { control: 'boolean' },
+    placement: {
+      control: 'select',
+      options: ['bottom', 'top'],
+    },
+  },
+} satisfies Meta<typeof Select>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const sampleItems: SelectOption[] = [
+  { label: '옵션 1', value: '1' },
+  { label: '옵션 2', value: '2' },
+  { label: '옵션 3', value: '3' },
+  { label: '비활성화 옵션', value: '4', isDisabled: true },
+]
+
+export const Default: Story = {
+  args: {
+    items: sampleItems,
+    placeholder: '선택해주세요',
+  },
+}
+
+export const WithSelectedValue: Story = {
+  args: {
+    items: sampleItems,
+    defaultSelectedKey: '2',
+  },
+}
+
+export const Disabled: Story = {
+  args: {
+    items: sampleItems,
+    defaultSelectedKey: '1',
+    isDisabled: true,
+  },
+}
+
+export const ReadOnly: Story = {
+  args: {
+    items: sampleItems,
+    defaultSelectedKey: '1',
+    isReadOnly: true,
+  },
+}
+
+export const PlacementTop: Story = {
+  args: {
+    items: sampleItems,
+    placeholder: '위로 열림',
+    placement: 'top',
+  },
+  decorators: [
+    (Story) => (
+      <div className="pt-40">
+        <Story />
+      </div>
+    ),
+  ],
+}
+
+export const Controlled: Story = {
+  render: function Render() {
+    const [value, setValue] = useState<string | number>('1')
+    return (
+      <div className="flex flex-col gap-4">
+        <Select
+          items={sampleItems}
+          selectedKey={value}
+          onChange={setValue}
+        />
+        <p className="text-sm">선택된 값: {value}</p>
+      </div>
+    )
+  },
+}
+
+export const ManyOptions: Story = {
+  args: {
+    items: Array.from({ length: 20 }, (_, i) => ({
+      label: `옵션 ${i + 1}`,
+      value: String(i + 1),
+    })),
+    placeholder: '많은 옵션',
+    maxHeight: 200,
+  },
+}