feat: storybook 추가

web-app/app/shared/components/section/Section.stories.tsx

@@ -0,0 +1,96 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Section } from './Section'
+
+const meta = {
+  title: 'Components/Section',
+  component: Section,
+  args: {
+    variant: 'base',
+    children: <div>Base 섹션</div>,
+  },
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['base', 'card', 'list', 'searchFilterGray'],
+    },
+  },
+} satisfies Meta<typeof Section>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Base: Story = {
+  args: {
+    variant: 'base',
+    children: (
+      <div>
+        <h2 className="text-lg font-bold mb-2">기본 섹션</h2>
+        <p>이것은 기본 섹션입니다.</p>
+      </div>
+    ),
+  },
+}
+
+export const Card: Story = {
+  args: {
+    variant: 'card',
+    children: (
+      <div>
+        <h2 className="text-lg font-bold mb-2">카드 섹션</h2>
+        <p>이것은 카드 형태의 섹션입니다.</p>
+      </div>
+    ),
+  },
+}
+
+export const List: Story = {
+  args: {
+    variant: 'list',
+    children: (
+      <>
+        <h2 className="text-lg font-bold">리스트 섹션</h2>
+        <ul className="space-y-2">
+          <li className="p-2 bg-gray-50 rounded">항목 1</li>
+          <li className="p-2 bg-gray-50 rounded">항목 2</li>
+          <li className="p-2 bg-gray-50 rounded">항목 3</li>
+        </ul>
+      </>
+    ),
+  },
+}
+
+export const SearchFilterGray: Story = {
+  args: {
+    variant: 'searchFilterGray',
+    children: (
+      <>
+        <span>필터:</span>
+        <select className="border border-gray-300 rounded px-2 py-1">
+          <option>전체</option>
+          <option>옵션 1</option>
+          <option>옵션 2</option>
+        </select>
+        <input type="text" placeholder="검색어 입력" className="border border-gray-300 rounded px-2 py-1" />
+      </>
+    ),
+  },
+}
+
+export const AllVariants: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <Section variant="base">
+        <div>Base 섹션</div>
+      </Section>
+      <Section variant="card">
+        <div>Card 섹션</div>
+      </Section>
+      <Section variant="list">
+        <div>List 섹션</div>
+      </Section>
+      <Section variant="searchFilterGray">
+        <span>SearchFilterGray 섹션</span>
+      </Section>
+    </div>
+  ),
+}