From 8ef03e258d9aef21b6bc07bc3fe7eb024e3a42f0 Mon Sep 17 00:00:00 2001
From: vvizi <gmlwl70@gmail.com>
Date: Wed, 5 Mar 2025 22:54:17 +0900
Subject: [PATCH 1/2] =?UTF-8?q?[feat]=20Tab=20=EC=BB=B4=ED=8F=AC=EB=84=8C?=
 =?UTF-8?q?=ED=8A=B8=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 부모 컴포넌트에서 선택된 탭을 관리하는 방식으로 구현
- 제네릭을 활용하여 다양한 탭 타입 지원 (타입 안정성 보장)
- TabInfo, ContentInfo로 정해진 형식으로 탭을 연동할 수 있음
---
 src/components/molecules/tab/Tab.tsx  | 57 +++++++++++++++++++++++++++
 src/components/molecules/tab/index.ts |  1 +
 2 files changed, 58 insertions(+)
 create mode 100644 src/components/molecules/tab/Tab.tsx
 create mode 100644 src/components/molecules/tab/index.ts

diff --git a/src/components/molecules/tab/Tab.tsx b/src/components/molecules/tab/Tab.tsx
new file mode 100644
index 0000000..d9a3985
--- /dev/null
+++ b/src/components/molecules/tab/Tab.tsx
@@ -0,0 +1,57 @@
+'use client';
+
+import { Dispatch, forwardRef, ReactNode, SetStateAction } from 'react';
+
+// Tab 정보를 나타내는 타입
+export type TabInfo<T> = {
+  tabType: T; // Tab의 타입을 나타내는 제네릭 타입 T
+  label: string; // Tab의 이름
+  count?: number; // 컨텐츠 개수
+}[];
+
+// 각 tab에 대응되는 content
+export type ContentInfo<TabType extends string> = Record<
+  TabType,
+  { render: () => ReactNode }
+>;
+
+export interface TabProps<T> {
+  tabInfo: TabInfo<T>;
+  selectedTab: T;
+  className?: string;
+  onClick: Dispatch<SetStateAction<T>>;
+}
+
+const TabComponent = <T,>(
+  { className, tabInfo, selectedTab, onClick, ...props }: TabProps<T>,
+  ref: React.Ref<HTMLDivElement>,
+) => {
+  return (
+    <div
+      ref={ref}
+      className={`${className} flex h-[45px] w-full items-center text-center`}
+      {...props}
+    >
+      {tabInfo.map(({ tabType, label, count }) => (
+        <button
+          key={String(tabType)}
+          className={`h-[45px] w-full select-none border-b-2 text-base font-medium ${
+            selectedTab === tabType
+              ? 'border-white text-white'
+              : 'border-gray-200 text-gray-600'
+          }`}
+          onClick={() => onClick(tabType)}
+        >
+          <span>{label}</span>
+          {count !== undefined && count > 0 && (
+            <span className='ml-1'>{count}</span>
+          )}
+        </button>
+      ))}
+    </div>
+  );
+};
+
+export const Tab = forwardRef(TabComponent) as <T>(
+  props: TabProps<T> & { ref?: React.Ref<HTMLDivElement> },
+) => JSX.Element;
diff --git a/src/components/molecules/tab/index.ts b/src/components/molecules/tab/index.ts
new file mode 100644
index 0000000..3080831
--- /dev/null
+++ b/src/components/molecules/tab/index.ts
@@ -0,0 +1 @@
+export { Tab } from './Tab';

From 8292c6a75c1f324da2abdc4a2cb9dc371f57db7b Mon Sep 17 00:00:00 2001
From: vvizi <gmlwl70@gmail.com>
Date: Wed, 5 Mar 2025 22:59:08 +0900
Subject: [PATCH 2/2] =?UTF-8?q?[feat]=20Tab=20Story=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Tab 컴포넌트의 스토리 구현
---
 src/components/molecules/tab/Tab.stories.tsx | 58 ++++++++++++++++++++
 1 file changed, 58 insertions(+)
 create mode 100644 src/components/molecules/tab/Tab.stories.tsx

diff --git a/src/components/molecules/tab/Tab.stories.tsx b/src/components/molecules/tab/Tab.stories.tsx
new file mode 100644
index 0000000..d8e7a97
--- /dev/null
+++ b/src/components/molecules/tab/Tab.stories.tsx
@@ -0,0 +1,58 @@
+'use client';
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+import { Tab, TabInfo, TabProps } from './Tab';
+
+// Tab 타입 정의
+type TabType = 'comment' | 'photo' | 'link';
+
+const defaultTabInfo: TabInfo<TabType> = [
+  { tabType: 'comment', label: '댓글' },
+  { tabType: 'photo', label: '사진', count: 0 },
+  { tabType: 'link', label: '링크', count: 0 },
+];
+
+const meta: Meta<typeof Tab> = {
+  title: 'components/Tab',
+  component: Tab,
+  argTypes: {
+    selectedTab: { control: 'text' },
+    onClick: { action: 'clicked' },
+  },
+};
+export default meta;
+
+type Story = StoryObj<TabProps<TabType>>;
+
+// 기본 Tab UI
+export const Default: Story = {
+  render: (args) => {
+    const [selectedTab, setSelectedTab] = useState<TabType>('comment');
+
+    return <Tab {...args} selectedTab={selectedTab} onClick={setSelectedTab} />;
+  },
+  args: {
+    tabInfo: defaultTabInfo,
+  },
+};
+
+// count가 있는 Tab
+export const WithCounts: Story = {
+  render: (args) => {
+    const [selectedTab, setSelectedTab] = useState<TabType>('comment');
+
+    return (
+      <Tab
+        {...args}
+        tabInfo={[
+          { tabType: 'comment', label: '댓글' },
+          { tabType: 'photo', label: '사진', count: 9 },
+          { tabType: 'link', label: '링크', count: 5 },
+        ]}
+        selectedTab={selectedTab}
+        onClick={setSelectedTab}
+      />
+    );
+  },
+};