From 56feb98560156ffe5b78cfc888380d0470504c0f Mon Sep 17 00:00:00 2001 From: juyeon-park Date: Mon, 30 Oct 2023 02:19:08 +0900 Subject: [PATCH 1/2] =?UTF-8?q?:tada:=20Tabs=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 3 +- pnpm-lock.yaml | 37 ++++++++++++++++-- src/components/ui/Tabs/Tabs.stories.tsx | 36 +++++++++++++++++ src/components/ui/Tabs/Tabs.tsx | 51 +++++++++++++++++++++++++ src/components/ui/Tabs/index.tsx | 3 ++ 5 files changed, 126 insertions(+), 4 deletions(-) create mode 100644 src/components/ui/Tabs/Tabs.stories.tsx create mode 100644 src/components/ui/Tabs/Tabs.tsx create mode 100644 src/components/ui/Tabs/index.tsx diff --git a/package.json b/package.json index 9263f78a..ce0ec224 100644 --- a/package.json +++ b/package.json @@ -13,12 +13,13 @@ "build-storybook": "storybook build" }, "dependencies": { - "@radix-ui/react-dropdown-menu": "^2.0.6", "@radix-ui/react-dialog": "^1.0.5", + "@radix-ui/react-dropdown-menu": "^2.0.6", "@radix-ui/react-icons": "^1.3.0", "@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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 84a70096..434ddf72 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -5,12 +5,12 @@ settings: excludeLinksFromLockfile: false dependencies: - '@radix-ui/react-dropdown-menu': - specifier: ^2.0.6 - version: 2.0.6(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0)(react@18.0.0) '@radix-ui/react-dialog': specifier: ^1.0.5 version: 1.0.5(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0)(react@18.0.0) + '@radix-ui/react-dropdown-menu': + specifier: ^2.0.6 + version: 2.0.6(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0)(react@18.0.0) '@radix-ui/react-icons': specifier: ^1.3.0 version: 1.3.0(react@18.0.0) @@ -23,6 +23,9 @@ dependencies: '@radix-ui/react-switch': specifier: ^1.0.3 version: 1.0.3(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0)(react@18.0.0) + '@radix-ui/react-tabs': + specifier: ^1.0.4 + version: 1.0.4(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0)(react@18.0.0) '@tanstack/react-query': specifier: ^5.0.0 version: 5.0.0(react-dom@18.0.0)(react@18.0.0) @@ -2787,6 +2790,34 @@ packages: react-dom: 18.0.0(react@18.0.0) dev: false + /@radix-ui/react-tabs@1.0.4(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0)(react@18.0.0): + resolution: {integrity: sha512-egZfYY/+wRNCflXNHx+dePvnz9FbmssDTJBtgRfDY7e8SE5oIo3Py2eCB1ckAbh1Q7cQ/6yJZThJ++sgbxibog==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + dependencies: + '@babel/runtime': 7.23.2 + '@radix-ui/primitive': 1.0.1 + '@radix-ui/react-context': 1.0.1(@types/react@18.0.0)(react@18.0.0) + '@radix-ui/react-direction': 1.0.1(@types/react@18.0.0)(react@18.0.0) + '@radix-ui/react-id': 1.0.1(@types/react@18.0.0)(react@18.0.0) + '@radix-ui/react-presence': 1.0.1(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0)(react@18.0.0) + '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0)(react@18.0.0) + '@radix-ui/react-roving-focus': 1.0.4(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0)(react@18.0.0) + '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.0.0)(react@18.0.0) + '@types/react': 18.0.0 + '@types/react-dom': 18.0.0 + react: 18.0.0 + react-dom: 18.0.0(react@18.0.0) + dev: false + /@radix-ui/react-toggle-group@1.0.4(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0)(react@18.0.0): resolution: {integrity: sha512-Uaj/M/cMyiyT9Bx6fOZO0SAG4Cls0GptBWiBmBxofmDbNVnYYoyRWj/2M/6VCi/7qcXFWnHhRUfdfZFvvkuu8A==} peerDependencies: diff --git a/src/components/ui/Tabs/Tabs.stories.tsx b/src/components/ui/Tabs/Tabs.stories.tsx new file mode 100644 index 00000000..c2859925 --- /dev/null +++ b/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 + +export default meta +type Story = StoryObj + +export const Normal: Story = { + args: {}, + render: () => { + return ( + + + 오퍼하기 + 찔러보기 + + +
카드1
+
카드2
+
카드3
+ + +
카드4
+
카드5
+
카드6
+ + + ) + }, +} diff --git a/src/components/ui/Tabs/Tabs.tsx b/src/components/ui/Tabs/Tabs.tsx new file mode 100644 index 00000000..327f3bc0 --- /dev/null +++ b/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, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +TabsList.displayName = TabsPrimitive.List.displayName + +const TabsTrigger = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +TabsTrigger.displayName = TabsPrimitive.Trigger.displayName + +const TabsContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +TabsContent.displayName = TabsPrimitive.Content.displayName + +export { Tabs, TabsList, TabsTrigger, TabsContent } diff --git a/src/components/ui/Tabs/index.tsx b/src/components/ui/Tabs/index.tsx new file mode 100644 index 00000000..010f6d3a --- /dev/null +++ b/src/components/ui/Tabs/index.tsx @@ -0,0 +1,3 @@ +import { Tabs, TabsList, TabsTrigger, TabsContent } from './Tabs' + +export { Tabs, TabsList, TabsTrigger, TabsContent } From b5eecae5e9133afd7b229613acc8c4742b4551fa Mon Sep 17 00:00:00 2001 From: juyeon-park Date: Wed, 1 Nov 2023 14:32:20 +0900 Subject: [PATCH 2/2] =?UTF-8?q?:tada:=20Tab=20CSS=20=ED=94=84=EB=A1=9C?= =?UTF-8?q?=EC=A0=9D=ED=8A=B8=EC=97=90=20=EB=A7=9E=EA=B2=8C=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/ui/Tabs/Tabs.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/ui/Tabs/Tabs.tsx b/src/components/ui/Tabs/Tabs.tsx index 327f3bc0..51d0343d 100644 --- a/src/components/ui/Tabs/Tabs.tsx +++ b/src/components/ui/Tabs/Tabs.tsx @@ -13,7 +13,7 @@ const TabsList = React.forwardRef<