Merge pull request #12 from team-nabi/NABI-24

🎉 Tabs 컴포넌트 구현

package.json

@@ -21,6 +21,7 @@
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-switch": "^1.0.3",
+    "@radix-ui/react-tabs": "^1.0.4",
     "@tanstack/react-query": "^5.0.0",
     "autoprefixer": "^10.4.16",
     "class-variance-authority": "^0.7.0",

src/components/ui/Tabs/Tabs.stories.tsx

@@ -0,0 +1,36 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Tabs, TabsList, TabsTrigger, TabsContent } from './Tabs'
+
+const meta = {
+  title: 'UI/Tabs',
+  component: Tabs,
+  tags: ['autodocs'],
+  argTypes: {},
+} satisfies Meta<typeof Tabs>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Normal: Story = {
+  args: {},
+  render: () => {
+    return (
+      <Tabs defaultValue="offer">
+        <TabsList>
+          <TabsTrigger value="offer">오퍼하기</TabsTrigger>
+          <TabsTrigger value="poke">찔러보기</TabsTrigger>
+        </TabsList>
+        <TabsContent value="offer">
+          <div>카드1</div>
+          <div>카드2</div>
+          <div>카드3</div>
+        </TabsContent>
+        <TabsContent value="poke">
+          <div>카드4</div>
+          <div>카드5</div>
+          <div>카드6</div>
+        </TabsContent>
+      </Tabs>
+    )
+  },
+}

src/components/ui/Tabs/Tabs.tsx

@@ -0,0 +1,51 @@
+'use client'
+
+import * as React from 'react'
+import * as TabsPrimitive from '@radix-ui/react-tabs'
+import { cn } from '@/utils/cn'
+
+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 mb-4 items-center justify-center',
+      className,
+    )}
+    {...props}
+  />
+))
+TabsList.displayName = TabsPrimitive.List.displayName
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      'inline-flex items-center justify-center whitespace-nowrap p-2 text-sm font-medium border-b-2 border-transparent transition-all disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background-color data-[state=active]:text-primary-color data-[state=active]:font-bold  data-[state=active]:border-primary-color',
+      className,
+    )}
+    {...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('grid grid-flow-row gap-y-6', className)}
+    {...props}
+  />
+))
+TabsContent.displayName = TabsPrimitive.Content.displayName
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }

src/components/ui/Tabs/index.tsx

@@ -0,0 +1,3 @@
+import { Tabs, TabsList, TabsTrigger, TabsContent } from './Tabs'
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }