feat: Tab 컴포넌트 생성 (#13)

* feat: Tab 컴포넌트 생성

* fix: git tsc 에러 수정

* refactor: tab css 수정

components/ui/Tabs.stories.tsx

@@ -0,0 +1,64 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import {
+  Tabs,
+  TabsList,
+  TabsTrigger,
+  TabsContent,
+  TabTriggerProps,
+} from './Tabs';
+
+const meta: Meta<typeof Tabs> = {
+  title: 'Components/ui/Tabs',
+  component: Tabs,
+  tags: ['autodocs'],
+  argTypes: {
+    color: {
+      control: 'inline-radio',
+      options: ['gray', 'purple', 'blue', 'red'],
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Tabs>;
+
+export const Default: Story = {
+  args: {
+    color: 'gray',
+  },
+  render: (args) => (
+    <Tabs defaultValue="tab1">
+      <TabsList>
+        <TabsTrigger
+          value="tab1"
+          color={args.color as TabTriggerProps['color']}
+        >
+          Tab 1
+        </TabsTrigger>
+        <TabsTrigger
+          value="tab2"
+          color={args.color as TabTriggerProps['color']}
+        >
+          Tab 2
+        </TabsTrigger>
+        <TabsTrigger
+          value="tab3"
+          color={args.color as TabTriggerProps['color']}
+        >
+          Tab 3
+        </TabsTrigger>
+        <TabsTrigger
+          value="tab4"
+          color={args.color as TabTriggerProps['color']}
+        >
+          Tab 4
+        </TabsTrigger>
+      </TabsList>
+      <TabsContent value="tab1">Content 1</TabsContent>
+      <TabsContent value="tab2">Content 2</TabsContent>
+      <TabsContent value="tab3">Content 3</TabsContent>
+      <TabsContent value="tab4">Content 4</TabsContent>
+    </Tabs>
+  ),
+};

components/ui/Tabs.tsx

@@ -0,0 +1,75 @@
+import * as React from 'react';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+
+import { cn } from '@/lib/utils';
+import { cva, VariantProps } from 'class-variance-authority';
+
+const Tabs = TabsPrimitive.Root;
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      'inline-flex h-10 items-center justify-center rounded-full bg-white p-1 text-gray-500',
+      className,
+    )}
+    {...props}
+  />
+));
+TabsList.displayName = TabsPrimitive.List.displayName;
+
+const tabTriggerVariants = cva('', {
+  variants: {
+    color: {
+      gray: 'data-[state=active]:bg-gray-200 data-[state=active]:text-black',
+      purple:
+        'data-[state=active]:bg-purple-200 data-[state=active]:text-purple-500',
+      blue: 'data-[state=active]:bg-blue-200 data-[state=active]:text-blue-500',
+      red: 'data-[state=active]:bg-red-200 data-[state=active]:text-red-500',
+    },
+  },
+  defaultVariants: {
+    color: 'gray',
+  },
+});
+
+export interface TabTriggerProps
+  extends VariantProps<typeof tabTriggerVariants> {
+  color?: 'gray' | 'purple' | 'blue' | 'red';
+}
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger> & TabTriggerProps
+>(({ className, color = 'gray', ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      'inline-flex items-center justify-center whitespace-nowrap rounded-full px-5 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-md',
+      className,
+      tabTriggerVariants({ color }),
+    )}
+    {...props}
+  />
+));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      'mt-4 text-gray-200 rounded-full ring-2 ring-gray-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+      className,
+    )}
+    {...props}
+  />
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+
+export { Tabs, TabsList, TabsTrigger, TabsContent, tabTriggerVariants };