diff --git a/package.json b/package.json index e07ced4..1519475 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "@yourssu/design-system-react", "packageManager": "pnpm@9.15.2", "private": false, - "version": "2.3.4", + "version": "2.3.5", "description": "Yourssu Design System for React", "keywords": [ "yourssu", diff --git a/src/components/Tabs/Tabs.mdx b/src/components/Tabs/Tabs.mdx index bf23970..d2804a3 100644 --- a/src/components/Tabs/Tabs.mdx +++ b/src/components/Tabs/Tabs.mdx @@ -33,6 +33,14 @@ import React from 'react';

+
+ +또한, 기본적으로 탭 변경시 transition update를 제공합니다.
+ +자세한 내용은 사용법 > transition update 파트를 참고해주세요. + +
+ ## 사용법 Tabs의 기본 사용법입니다.
@@ -72,7 +80,7 @@ const [Tabs] = useTabs({ defaultTab: 'tab-0', scrollable: true }); ### transition update -Tabs 컴포넌트는 기본적으로 Tab의 변경 시 transtion update를 제공합니다. +Tabs 컴포넌트는 **기본적으로** Tab의 변경 시 transtion update를 제공합니다. useTabs의 리턴값으로 `isPending` 을 제공하므로, 이 값으로 트랜지션 상태 여부를 확인하실 수 있습니다. @@ -86,6 +94,21 @@ isPending; // boolean
+원한다면, `transtion` 프로퍼티를 사용하여 transition update를 끌 수 있습니다. + +이때, `isPending` 값은 항상 `false`가 됩니다. + +```tsx +const [Tabs, isPending] = useTabs({ + defaultTab: 'tab-0', + transition: false, +}); + +isPending; // 항상 false +``` + +
+ ### useTabs `Tabs`를 사용하기 위한 커스텀 훅입니다. 객체 형태의 인자를 받습니다.
diff --git a/src/components/Tabs/Tabs.stories.tsx b/src/components/Tabs/Tabs.stories.tsx index b550662..8f85e36 100644 --- a/src/components/Tabs/Tabs.stories.tsx +++ b/src/components/Tabs/Tabs.stories.tsx @@ -3,7 +3,7 @@ import { Meta, StoryObj } from '@storybook/react'; import { TabListProps, TabSize, TabsProps } from './Tabs.type'; import { useTabs } from './hooks/useTabs'; -const meta: Meta = { +const meta: Meta & TabListProps> = { title: 'Components/Tabs', parameters: { layout: 'centered', @@ -12,6 +12,12 @@ const meta: Meta = { defaultTab: { description: '기본으로 설정될 Tabs.Tab의 id', }, + transition: { + control: { + type: 'boolean', + }, + description: '탭 변경 시 transition update 여부', + }, scrollable: { control: { type: 'boolean', @@ -29,7 +35,7 @@ const meta: Meta = { }; export default meta; -type Story = StoryObj; +type Story = StoryObj>; type TabType = 'tab-0' | 'tab-1' | 'tab-2' | 'tab-3'; const TabsTest = ({ defaultTab, size = 'large' }: { defaultTab: TabType; size?: TabSize }) => { diff --git a/src/components/Tabs/Tabs.type.ts b/src/components/Tabs/Tabs.type.ts index 09e7992..0e45b42 100644 --- a/src/components/Tabs/Tabs.type.ts +++ b/src/components/Tabs/Tabs.type.ts @@ -1,7 +1,7 @@ -export interface TabsProps { +export interface TabsProps { scrollable?: boolean; - children: React.ReactNode; - defaultTab: string; + defaultTab: TabType; + transition?: boolean; } export type TabSize = 'large' | 'small'; diff --git a/src/components/Tabs/hooks/useTabs.tsx b/src/components/Tabs/hooks/useTabs.tsx index ce98892..6c6cfd8 100644 --- a/src/components/Tabs/hooks/useTabs.tsx +++ b/src/components/Tabs/hooks/useTabs.tsx @@ -1,17 +1,13 @@ import { Children, isValidElement, useRef, useState, useTransition } from 'react'; import { StyledFixedTab, StyledList, StyledScrollableTab } from '../Tabs.style'; -import { TabListProps, TabPanelProps, TabProps } from '../Tabs.type'; +import { TabListProps, TabPanelProps, TabProps, TabsProps } from '../Tabs.type'; export const useTabs = ({ defaultTab, scrollable = true, transition = true, -}: { - defaultTab: TabType; - scrollable?: boolean; - transition?: boolean; -}) => { +}: TabsProps) => { const [isPending, startTransition] = useTransition(); const [currentTab, setCurrentTab] = useState(defaultTab);