feat: Tab 스토리북 추가

packages/wow-ui/src/components/Tabs/Tabs.stories.tsx

@@ -0,0 +1,160 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+
+import type { TabsProps } from "@/components/Tabs";
+import { Tabs } from "@/components/Tabs";
+import { TabsContent } from "@/components/Tabs/TabsContent";
+import { TabsList } from "@/components/Tabs/TabsList";
+import { TabsTrigger } from "@/components/Tabs/TabsTrigger";
+
+const meta: Meta<TabsProps> = {
+  title: "UI/Tabs",
+  component: Tabs,
+  tags: ["autodocs"],
+  parameters: {
+    componentSubtitle: "탭을 통해 콘텐츠를 선택할 수 있는 컴포넌트입니다.",
+    docs: {
+      description: {
+        component:
+          "TabsList 로 TabsTrigger 를 감싸서 탭 트리거를 관리하고 TabsContent 로 탭 콘텐츠를 관리합니다.",
+      },
+    },
+  },
+  argTypes: {
+    value: {
+      description: "현재 선택된 탭의 값을 나타냅니다.",
+      table: {
+        type: { summary: "string" },
+      },
+      control: "text",
+    },
+    defaultValue: {
+      description: "초기 선택된 탭 값을 나타냅니다.",
+      table: {
+        type: { summary: "string" },
+      },
+      control: "text",
+    },
+    onChange: {
+      description: "탭 값이 변경될 때 호출되는 함수입니다.",
+      table: {
+        type: { summary: "(value: string) => void" },
+      },
+      action: "changed",
+    },
+  },
+} satisfies Meta<typeof Tabs>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    children: (
+      <>
+        <TabsList>
+          <TabsTrigger value="tab1">Tab 1</TabsTrigger>
+          <TabsTrigger value="tab2">Tab 2</TabsTrigger>
+        </TabsList>
+        <TabsContent value="tab1">Tab 1 Content</TabsContent>
+        <TabsContent value="tab2">Tab 2 Content</TabsContent>
+      </>
+    ),
+    defaultValue: "tab1",
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "기본적인 탭 컴포넌트입니다. 탭 1과 탭 2가 제공됩니다.",
+      },
+    },
+  },
+};
+
+export const WithDefaultValue: Story = {
+  args: {
+    children: (
+      <>
+        <TabsList>
+          <TabsTrigger value="tab1">Tab 1</TabsTrigger>
+          <TabsTrigger value="tab2">Tab 2</TabsTrigger>
+          <TabsTrigger value="tab3">Tab 3</TabsTrigger>
+        </TabsList>
+        <TabsContent value="tab1">Tab 1 Content</TabsContent>
+        <TabsContent value="tab2">Tab 2 Content</TabsContent>
+        <TabsContent value="tab3">Tab 3 Content</TabsContent>
+      </>
+    ),
+    defaultValue: "tab2",
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "초기 값으로 두 번째 탭이 선택된 상태로 시작하는 컴포넌트입니다.",
+      },
+    },
+  },
+};
+
+const ControlledTabsComponent = () => {
+  const [selectedTab, setSelectedTab] = useState("tab1");
+
+  const handleChange = (value: string) => {
+    setSelectedTab(value);
+  };
+
+  return (
+    <Tabs value={selectedTab} onChange={handleChange}>
+      <TabsList>
+        <TabsTrigger value="tab1">Tab 1</TabsTrigger>
+        <TabsTrigger value="tab2">Tab 2</TabsTrigger>
+        <TabsTrigger value="tab3">Tab 3</TabsTrigger>
+      </TabsList>
+      <TabsContent value="tab1">Tab 1 Content</TabsContent>
+      <TabsContent value="tab2">Tab 2 Content</TabsContent>
+      <TabsContent value="tab3">Tab 3 Content</TabsContent>
+    </Tabs>
+  );
+};
+
+export const ControlledValue: Story = {
+  render: () => <ControlledTabsComponent />,
+  parameters: {
+    docs: {
+      description: {
+        story: "외부 상태에 따라 제어되는 탭 컴포넌트입니다.",
+      },
+    },
+  },
+};
+
+export const ManyTabs: Story = {
+  args: {
+    children: (
+      <>
+        <TabsList>
+          {Array.from({ length: 10 }, (_, index) => (
+            <TabsTrigger key={index} value={`tab${index + 1}`}>
+              Tab {index + 1}
+            </TabsTrigger>
+          ))}
+        </TabsList>
+        {Array.from({ length: 10 }, (_, index) => (
+          <TabsContent key={index} value={`tab${index + 1}`}>
+            Tab {index + 1} Content
+          </TabsContent>
+        ))}
+      </>
+    ),
+    defaultValue: "tab1",
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "여러 개의 탭을 가진 탭 컴포넌트입니다.",
+      },
+    },
+  },
+};