feat: storybook 추가

web-app/app/shared/components/switch/Switch.stories.tsx

@@ -0,0 +1,132 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { useState } from 'react'
+import { Switch } from './Switch'
+
+const meta = {
+  title: 'Components/Switch',
+  component: Switch,
+  argTypes: {
+    isDisabled: {
+      control: 'boolean',
+    },
+    isReadOnly: {
+      control: 'boolean',
+    },
+  },
+} satisfies Meta<typeof Switch>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    children: '알림 설정',
+  },
+}
+
+export const Selected: Story = {
+  render: function Render() {
+    const [isSelected, setIsSelected] = useState(true)
+    return (
+      <Switch isSelected={isSelected} onChange={setIsSelected}>
+        활성화됨
+      </Switch>
+    )
+  },
+}
+
+export const Unselected: Story = {
+  render: function Render() {
+    const [isSelected, setIsSelected] = useState(false)
+    return (
+      <Switch isSelected={isSelected} onChange={setIsSelected}>
+        비활성화됨
+      </Switch>
+    )
+  },
+}
+
+export const Disabled: Story = {
+  args: {
+    isDisabled: true,
+    children: '비활성화된 스위치',
+  },
+}
+
+export const DisabledSelected: Story = {
+  args: {
+    isDisabled: true,
+    isSelected: true,
+    children: '비활성화됨 (켜짐)',
+  },
+}
+
+export const ReadOnly: Story = {
+  args: {
+    isReadOnly: true,
+    isSelected: true,
+    children: '읽기 전용',
+  },
+}
+
+export const WithoutLabel: Story = {
+  args: {},
+}
+
+export const Controlled: Story = {
+  render: function Render() {
+    const [isSelected, setIsSelected] = useState(false)
+    return (
+      <div className="space-y-4">
+        <Switch isSelected={isSelected} onChange={setIsSelected}>
+          알림 받기
+        </Switch>
+        <p className="text-sm text-gray-600">상태: {isSelected ? '켜짐' : '꺼짐'}</p>
+      </div>
+    )
+  },
+}
+
+export const MultipleSettings: Story = {
+  render: function Render() {
+    const [settings, setSettings] = useState({
+      notifications: true,
+      darkMode: false,
+      autoSave: true,
+    })
+
+    const handleChange = (key: keyof typeof settings) => (isSelected: boolean) => {
+      setSettings((prev) => ({ ...prev, [key]: isSelected }))
+    }
+
+    return (
+      <div className="space-y-4">
+        <Switch isSelected={settings.notifications} onChange={handleChange('notifications')}>
+          알림 설정
+        </Switch>
+        <Switch isSelected={settings.darkMode} onChange={handleChange('darkMode')}>
+          다크 모드
+        </Switch>
+        <Switch isSelected={settings.autoSave} onChange={handleChange('autoSave')}>
+          자동 저장
+        </Switch>
+      </div>
+    )
+  },
+}
+
+export const AllStates: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <Switch>기본 (꺼짐)</Switch>
+      <Switch isSelected>기본 (켜짐)</Switch>
+      <Switch isDisabled>비활성화 (꺼짐)</Switch>
+      <Switch isDisabled isSelected>
+        비활성화 (켜짐)
+      </Switch>
+      <Switch isReadOnly isSelected>
+        읽기 전용
+      </Switch>
+    </div>
+  ),
+}