From 069dd4a60cf45df35c5dc541b304aade7698ce9e Mon Sep 17 00:00:00 2001
From: steven-yn <ssungyeon94@gmail.com>
Date: Sat, 2 Mar 2024 23:46:39 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20Tab=20=EC=BB=B4=ED=8F=AC=EB=84=8C?=
 =?UTF-8?q?=ED=8A=B8=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/composable/Tab/Tab.css.ts            | 50 ++++++++++++++++++++++++
 src/composable/Tab/Tab.tsx               | 44 ++++++++++++++++++++-
 src/hook/useOceanTab.ts                  | 16 ++++++++
 src/stories/Common/Tab/Tab.stories.tsx   | 32 +++++++++++++++
 src/stories/Common/Tab/Usage.stories.tsx | 39 ++++++++++++++++++
 5 files changed, 179 insertions(+), 2 deletions(-)
 create mode 100644 src/composable/Tab/Tab.css.ts
 create mode 100644 src/hook/useOceanTab.ts
 create mode 100644 src/stories/Common/Tab/Tab.stories.tsx
 create mode 100644 src/stories/Common/Tab/Usage.stories.tsx

diff --git a/src/composable/Tab/Tab.css.ts b/src/composable/Tab/Tab.css.ts
new file mode 100644
index 0000000..afb865a
--- /dev/null
+++ b/src/composable/Tab/Tab.css.ts
@@ -0,0 +1,50 @@
+import { style, styleVariants } from '@vanilla-extract/css';
+import { backgroundColorVariants } from '@/styles/common/color.css';
+import { flexCenter } from '@/styles/common/flex.css';
+
+export const wrapStyle = style({
+  display: 'flex',
+  gap: '0.25rem',
+});
+
+const buttonAnchorCommonStyle = style([
+  flexCenter,
+  backgroundColorVariants['secondary-variant'],
+  {
+    position: 'relative',
+    height: '0.125rem',
+    borderRadius: '0.25rem',
+    transition: 'all 0.3s ease-in-out',
+  },
+]);
+
+export const buttonAnchorStyleVariant = styleVariants({
+  SELECTED: [
+    buttonAnchorCommonStyle,
+    {
+      width: '2rem',
+      opacity: 1,
+      ':hover': {
+        opacity: 0.8,
+      },
+    },
+  ],
+  DEFAULT: [
+    buttonAnchorCommonStyle,
+    {
+      width: '1.5rem',
+      opacity: 0.4,
+      ':hover': {
+        opacity: 0.2,
+      },
+    },
+  ],
+});
+
+export const buttonStyle = style({
+  position: 'absolute',
+  boxSizing: 'content-box',
+  width: '100%',
+  height: '100%',
+  padding: '0.25rem 0.1rem',
+});
diff --git a/src/composable/Tab/Tab.tsx b/src/composable/Tab/Tab.tsx
index 26f63ad..6315cfa 100644
--- a/src/composable/Tab/Tab.tsx
+++ b/src/composable/Tab/Tab.tsx
@@ -1,7 +1,47 @@
 import React from 'react';
+import Button from '../Button/Button';
+import { buttonAnchorStyleVariant, buttonStyle, wrapStyle } from './Tab.css';
 
-const Tab = () => {
-  return <div></div>;
+export interface TabProps {
+  selectedIdx: number;
+  onClick: (currentIdx: number) => void;
+  length: number;
+}
+
+const Tab = ({ length, selectedIdx, onClick }: TabProps) => {
+  return (
+    <div className={wrapStyle}>
+      {Array.from({ length: length > 5 ? 5 : length }).map((_, idx) => (
+        <Tab.Item
+          key={idx}
+          idx={idx}
+          isSelected={idx === selectedIdx}
+          onClick={onClick}
+        />
+      ))}
+    </div>
+  );
 };
 
+interface ItemProps {
+  idx: number;
+  isSelected: boolean;
+  onClick: (currentIdx: number) => void;
+}
+
+const Item = ({ idx, isSelected, onClick }: ItemProps) => {
+  const handleClick = () => {
+    onClick(idx);
+  };
+  return (
+    <span
+      className={buttonAnchorStyleVariant[isSelected ? 'SELECTED' : 'DEFAULT']}
+    >
+      <Button as="button" className={buttonStyle} onClick={handleClick} />
+    </span>
+  );
+};
+
+Tab.Item = Item;
+
 export default Tab;
diff --git a/src/hook/useOceanTab.ts b/src/hook/useOceanTab.ts
new file mode 100644
index 0000000..6bd1787
--- /dev/null
+++ b/src/hook/useOceanTab.ts
@@ -0,0 +1,16 @@
+import { useState } from 'react';
+
+const useOceanTab = (initIdx?: number) => {
+  const [selectedIdx, setSelectedIdx] = useState(initIdx || 0);
+
+  const handleClick = (idx: number) => {
+    setSelectedIdx(idx);
+  };
+
+  return {
+    selectedIdx,
+    handleClick,
+  };
+};
+
+export default useOceanTab;
diff --git a/src/stories/Common/Tab/Tab.stories.tsx b/src/stories/Common/Tab/Tab.stories.tsx
new file mode 100644
index 0000000..4c7dd21
--- /dev/null
+++ b/src/stories/Common/Tab/Tab.stories.tsx
@@ -0,0 +1,32 @@
+import { Meta, StoryObj } from '@storybook/react';
+import Tab from '@/composable/Tab/Tab';
+
+const meta: Meta<typeof Tab> = {
+  title: 'Common/Tab',
+  component: Tab,
+  tags: ['autodocs'],
+  parameters: { layout: 'fullscreen' },
+  decorators: [
+    (Story) => (
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          height: '10rem',
+          backgroundColor: 'lightgray',
+        }}
+      >
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+type Story = StoryObj<typeof Tab>;
+export const Static: Story = {
+  args: {
+    length: 5,
+    selectedIdx: 0,
+  },
+};
+export default meta;
diff --git a/src/stories/Common/Tab/Usage.stories.tsx b/src/stories/Common/Tab/Usage.stories.tsx
new file mode 100644
index 0000000..121e539
--- /dev/null
+++ b/src/stories/Common/Tab/Usage.stories.tsx
@@ -0,0 +1,39 @@
+import { Meta, StoryObj } from '@storybook/react';
+import Tab, { TabProps } from '@/composable/Tab/Tab';
+import useOceanTab from '@/hook/useOceanTab';
+
+const Template = (args: TabProps) => {
+  const { selectedIdx, handleClick } = useOceanTab(args.selectedIdx);
+  return (
+    <div
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        height: '10rem',
+        backgroundColor: 'lightgray',
+      }}
+    >
+      <Tab
+        length={args.length}
+        selectedIdx={selectedIdx}
+        onClick={handleClick}
+      />
+    </div>
+  );
+};
+
+const meta: Meta<typeof Tab> = {
+  title: 'Common/Tab',
+  component: Template,
+  parameters: { layout: 'fullscreen' },
+};
+
+type Story = StoryObj<typeof Tab>;
+export const Usage: Story = {
+  args: {
+    length: 5,
+    selectedIdx: 0,
+  },
+};
+
+export default meta;