Merge pull request #39 from Wedvice/f/tab/heeji_kang

[feat] Tab 컴포넌트 구현

Author: vvizi

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}
+      />
+    );
+  },
+};

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;

src/components/molecules/tab/index.ts

@@ -0,0 +1 @@
+export { Tab } from './Tab';