[FEAT] Tab 컴포넌트 구현

packages/timo-design-system/src/components/index.ts

@@ -5,3 +5,4 @@ export { Tag } from "@components/tag/Tag";
 export { PriorityIcon } from "@components/priority-icon/PriorityIcon";
 export { CreateButton } from "@components/button/create-button/CreateButton";
 export { TodayBadge } from "@components/badge/today-badge/TodayBadge";
+export { Tab } from "@components/tab/Tab";

packages/timo-design-system/src/components/tab/Tab.stories.tsx

@@ -0,0 +1,161 @@
+import {
+  ChartHoverIcon,
+  ChartOffIcon,
+  ChartOnIcon,
+  HomeHoverIcon,
+  HomeOffIcon,
+  HomeOnIcon,
+  SettingHoverIcon,
+  SettingOffIcon,
+  SettingOnIcon,
+  TimerHoverIcon,
+  TimerOffIcon,
+  TimerOnIcon,
+  TodayHoverIcon,
+  TodayOffIcon,
+  TodayOnIcon,
+} from "@icons";
+import { useState } from "react";
+
+import { Tab } from "./Tab";
+
+import type { Meta, StoryObj } from "@storybook/react";
+import type { ComponentProps } from "react";
+
+const meta = {
+  title: "Components/Tab",
+  component: Tab,
+  parameters: {
+    layout: "centered",
+  },
+  argTypes: {
+    label: {
+      control: "text",
+    },
+    isSelected: {
+      control: "boolean",
+    },
+    onClick: {
+      action: "clicked",
+    },
+  },
+  args: {
+    label: "홈",
+    icon: <HomeOffIcon width={24} height={24} />,
+    hoverIcon: <HomeHoverIcon width={24} height={24} />,
+    isSelected: false,
+  },
+} satisfies Meta<typeof Tab>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const AllStates: Story = {
+  parameters: {
+    controls: { disable: true },
+  },
+  render: () => (
+    <div className="grid grid-cols-3 gap-6">
+      <div className="flex flex-col gap-3">
+        <Tab
+          label="홈"
+          icon={<HomeOnIcon width={24} height={24} />}
+          isSelected
+        />
+        <Tab
+          label="홈"
+          icon={<HomeOffIcon width={24} height={24} />}
+          hoverIcon={<HomeHoverIcon width={24} height={24} />}
+        />
+        <Tab label="홈" icon={<HomeOffIcon width={24} height={24} />} />
+      </div>
+
+      <div className="flex flex-col gap-3">
+        <Tab
+          label="오늘"
+          icon={<TodayOnIcon width={24} height={24} />}
+          isSelected
+        />
+        <Tab
+          label="오늘"
+          icon={<TodayOffIcon width={24} height={24} />}
+          hoverIcon={<TodayHoverIcon width={24} height={24} />}
+        />
+        <Tab label="오늘" icon={<TodayOffIcon width={24} height={24} />} />
+      </div>
+
+      <div className="flex flex-col gap-3">
+        <Tab
+          label="집중 모드"
+          icon={<TimerOnIcon width={24} height={24} />}
+          isSelected
+        />
+        <Tab
+          label="집중 모드"
+          icon={<TimerOffIcon width={24} height={24} />}
+          hoverIcon={<TimerHoverIcon width={24} height={24} />}
+        />
+        <Tab label="집중 모드" icon={<TimerOffIcon width={24} height={24} />} />
+      </div>
+
+      <div className="flex flex-col gap-3">
+        <Tab
+          label="통계"
+          icon={<ChartOnIcon width={24} height={24} />}
+          isSelected
+        />
+        <Tab
+          label="통계"
+          icon={<ChartOffIcon width={24} height={24} />}
+          hoverIcon={<ChartHoverIcon width={24} height={24} />}
+        />
+        <Tab label="통계" icon={<ChartOffIcon width={24} height={24} />} />
+      </div>
+
+      <div className="flex flex-col gap-3">
+        <Tab
+          label="설정"
+          icon={<SettingOnIcon width={24} height={24} />}
+          isSelected
+        />
+        <Tab
+          label="설정"
+          icon={<SettingOffIcon width={24} height={24} />}
+          hoverIcon={<SettingHoverIcon width={24} height={24} />}
+        />
+        <Tab label="설정" icon={<SettingOffIcon width={24} height={24} />} />
+      </div>
+    </div>
+  ),
+};
+
+const InteractiveHomeTab = (args: ComponentProps<typeof Tab>) => {
+  const [isSelected, setIsSelected] = useState(false);
+
+  return (
+    <Tab
+      {...args}
+      label="홈"
+      icon={
+        isSelected ? (
+          <HomeOnIcon width={24} height={24} />
+        ) : (
+          <HomeOffIcon width={24} height={24} />
+        )
+      }
+      hoverIcon={<HomeHoverIcon width={24} height={24} />}
+      isSelected={isSelected}
+      onClick={() => {
+        args.onClick?.();
+        setIsSelected((prevIsSelected) => !prevIsSelected);
+      }}
+    />
+  );
+};
+
+export const Interactive: Story = {
+  parameters: {
+    controls: { disable: true },
+  },
+  render: (args) => <InteractiveHomeTab {...args} />,
+};

packages/timo-design-system/src/components/tab/Tab.tsx

@@ -0,0 +1,51 @@
+import { cn } from "@lib";
+
+import type { ReactNode } from "react";
+
+type TabVariant = "default" | "selected";
+
+const TAB_VARIANT_CLASS_NAME: Record<TabVariant, string> = {
+  default: "text-timo-gray-800 hover:bg-timo-gray-500",
+  selected: "bg-timo-blue-65 text-timo-blue-300",
+};
+
+export interface TabProps {
+  label: string;
+  icon: ReactNode;
+  hoverIcon?: ReactNode;
+  isSelected?: boolean;
+  onClick?: () => void;
+}
+
+export const Tab = ({
+  label,
+  icon,
+  hoverIcon,
+  isSelected = false,
+  onClick,
+}: TabProps) => {
+  const baseButtonClassName =
+    "group flex w-45 items-center gap-2 rounded-8 px-3 py-1";
+
+  const variant: TabVariant = isSelected ? "selected" : "default";
+
+  const hasHoverIcon = hoverIcon && !isSelected;
+
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={cn(baseButtonClassName, TAB_VARIANT_CLASS_NAME[variant])}
+    >
+      {hasHoverIcon ? (
+        <>
+          <span className="group-hover:hidden">{icon}</span>
+          <span className="hidden group-hover:block">{hoverIcon}</span>
+        </>
+      ) : (
+        icon
+      )}
+      <span>{label}</span>
+    </button>
+  );
+};