feat: storybook 추가

2026-04-14 10:38:36 +09:00
parent 52f8c30b2e
commit 8d6bff88d6
23 changed files with 1687 additions and 10 deletions
--- a/web-app/app/shared/components/tab/Tab.stories.tsx
+++ b/web-app/app/shared/components/tab/Tab.stories.tsx
@@ -0,0 +1,138 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { useState } from 'react'
+import { Tab } from './Tab'
+
+const meta = {
+  title: 'Components/Tab',
+  component: Tab,
+  args: {
+    items: [],
+  },
+} satisfies Meta<typeof Tab>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const defaultItems = [
+  { key: 'tab1', label: '탭 1', children: <div className="p-4">탭 1의 내용입니다.</div> },
+  { key: 'tab2', label: '탭 2', children: <div className="p-4">탭 2의 내용입니다.</div> },
+  { key: 'tab3', label: '탭 3', children: <div className="p-4">탭 3의 내용입니다.</div> },
+]
+
+export const Default: Story = {
+  args: {
+    items: defaultItems,
+  },
+}
+
+export const WithDefaultSelected: Story = {
+  args: {
+    items: defaultItems,
+    defaultSelectedKey: 'tab2',
+  },
+}
+
+export const Controlled: Story = {
+  render: function Render() {
+    const [selectedKey, setSelectedKey] = useState('tab1')
+    return (
+      <Tab
+        items={defaultItems}
+        selectedKey={selectedKey}
+        onSelectionChange={(key) => setSelectedKey(key as string)}
+      />
+    )
+  },
+}
+
+export const WithDisabledTab: Story = {
+  args: {
+    items: [
+      { key: 'tab1', label: '탭 1', children: <div className="p-4">탭 1의 내용입니다.</div> },
+      { key: 'tab2', label: '탭 2 (비활성화)', children: <div className="p-4">탭 2의 내용입니다.</div>, disabled: true },
+      { key: 'tab3', label: '탭 3', children: <div className="p-4">탭 3의 내용입니다.</div> },
+    ],
+  },
+}
+
+export const WithRichContent: Story = {
+  args: {
+    items: [
+      {
+        key: 'overview',
+        label: '개요',
+        children: (
+          <div className="p-4 space-y-2">
+            <h3 className="text-lg font-bold">프로젝트 개요</h3>
+            <p>이 프로젝트는 항공영상 탐지 시스템입니다.</p>
+            <ul className="list-disc list-inside">
+              <li>항공영상 업로드</li>
+              <li>AI 기반 객체 탐지</li>
+              <li>결과 분석 및 리포트</li>
+            </ul>
+          </div>
+        ),
+      },
+      {
+        key: 'details',
+        label: '상세 정보',
+        children: (
+          <div className="p-4 space-y-2">
+            <h3 className="text-lg font-bold">상세 정보</h3>
+            <table className="w-full border-collapse">
+              <tbody>
+                <tr className="border-b">
+                  <td className="py-2 font-medium">버전</td>
+                  <td className="py-2">1.0.0</td>
+                </tr>
+                <tr className="border-b">
+                  <td className="py-2 font-medium">최종 수정일</td>
+                  <td className="py-2">2024-01-15</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        ),
+      },
+      {
+        key: 'settings',
+        label: '설정',
+        children: (
+          <div className="p-4">
+            <h3 className="text-lg font-bold mb-4">설정</h3>
+            <div className="space-y-4">
+              <div>
+                <label className="block text-sm font-medium mb-1">알림 설정</label>
+                <select className="border border-gray-300 rounded px-3 py-2 w-full">
+                  <option>모든 알림</option>
+                  <option>중요 알림만</option>
+                  <option>알림 끄기</option>
+                </select>
+              </div>
+            </div>
+          </div>
+        ),
+      },
+    ],
+  },
+}
+
+export const ManyTabs: Story = {
+  args: {
+    items: [
+      { key: 'tab1', label: '첫 번째', children: <div className="p-4">첫 번째 탭</div> },
+      { key: 'tab2', label: '두 번째', children: <div className="p-4">두 번째 탭</div> },
+      { key: 'tab3', label: '세 번째', children: <div className="p-4">세 번째 탭</div> },
+      { key: 'tab4', label: '네 번째', children: <div className="p-4">네 번째 탭</div> },
+      { key: 'tab5', label: '다섯 번째', children: <div className="p-4">다섯 번째 탭</div> },
+    ],
+  },
+}
+
+export const WithCustomClassName: Story = {
+  args: {
+    items: defaultItems,
+    className: 'bg-gray-50 p-4 rounded-lg',
+    tabPanelClassName: 'bg-white rounded border',
+  },
+}