feat: storybook 추가

web-app/app/shared/components/checkbox/Checkbox.stories.tsx

@@ -0,0 +1,115 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { useState } from 'react'
+import { Checkbox } from './Checkbox'
+
+const meta = {
+  title: 'Components/Checkbox',
+  component: Checkbox,
+  argTypes: {
+    isDisabled: {
+      control: 'boolean',
+    },
+    isIndeterminate: {
+      control: 'boolean',
+    },
+  },
+} satisfies Meta<typeof Checkbox>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    children: '동의합니다',
+  },
+}
+
+export const Checked: Story = {
+  render: function Render() {
+    const [isSelected, setIsSelected] = useState(true)
+    return (
+      <Checkbox isSelected={isSelected} onChange={setIsSelected}>
+        선택됨
+      </Checkbox>
+    )
+  },
+}
+
+export const Unchecked: Story = {
+  render: function Render() {
+    const [isSelected, setIsSelected] = useState(false)
+    return (
+      <Checkbox isSelected={isSelected} onChange={setIsSelected}>
+        선택 안됨
+      </Checkbox>
+    )
+  },
+}
+
+export const Indeterminate: Story = {
+  args: {
+    isIndeterminate: true,
+    children: '일부 선택됨',
+  },
+}
+
+export const Disabled: Story = {
+  args: {
+    isDisabled: true,
+    children: '비활성화',
+  },
+}
+
+export const DisabledChecked: Story = {
+  args: {
+    isDisabled: true,
+    isSelected: true,
+    children: '비활성화 (선택됨)',
+  },
+}
+
+export const WithoutLabel: Story = {
+  args: {},
+}
+
+export const MultipleCheckboxes: Story = {
+  render: function Render() {
+    const [checkedItems, setCheckedItems] = useState<Record<string, boolean>>({
+      option1: false,
+      option2: true,
+      option3: false,
+    })
+
+    const handleChange = (key: string) => (isSelected: boolean) => {
+      setCheckedItems((prev) => ({ ...prev, [key]: isSelected }))
+    }
+
+    return (
+      <div className="flex flex-col gap-2">
+        <Checkbox isSelected={checkedItems.option1} onChange={handleChange('option1')}>
+          옵션 1
+        </Checkbox>
+        <Checkbox isSelected={checkedItems.option2} onChange={handleChange('option2')}>
+          옵션 2
+        </Checkbox>
+        <Checkbox isSelected={checkedItems.option3} onChange={handleChange('option3')}>
+          옵션 3
+        </Checkbox>
+      </div>
+    )
+  },
+}
+
+export const AllStates: Story = {
+  render: () => (
+    <div className="flex flex-col gap-2">
+      <Checkbox>기본</Checkbox>
+      <Checkbox isSelected>선택됨</Checkbox>
+      <Checkbox isIndeterminate>일부 선택</Checkbox>
+      <Checkbox isDisabled>비활성화</Checkbox>
+      <Checkbox isDisabled isSelected>
+        비활성화 (선택됨)
+      </Checkbox>
+    </div>
+  ),
+}