release 2.3.5: useTabs 문서에 transition props 설명 추가

package.json

@@ -2,7 +2,7 @@
   "name": "@yourssu/design-system-react",
   "packageManager": "[email protected]",
   "private": false,
-  "version": "2.3.4",
+  "version": "2.3.5",
   "description": "Yourssu Design System for React",
   "keywords": [
     "yourssu",

src/components/Tabs/Tabs.mdx

@@ -33,6 +33,14 @@ import React from 'react';
     <br />
     <br />
 
+<br />
+
+또한, 기본적으로 탭 변경시 transition update를 제공합니다.<br />
+
+자세한 내용은 사용법 > transition update 파트를 참고해주세요.
+
+<br />
+
 ## 사용법
 
 Tabs의 기본 사용법입니다.<br/ >
@@ -72,7 +80,7 @@ const [Tabs] = useTabs<TabType>({ defaultTab: 'tab-0', scrollable: true });
 
 ### transition update
 
-Tabs 컴포넌트는 기본적으로 Tab의 변경 시 transtion update를 제공합니다.
+Tabs 컴포넌트는 **기본적으로** Tab의 변경 시 transtion update를 제공합니다.
 
 useTabs의 리턴값으로 `isPending` 을 제공하므로, 이 값으로 트랜지션 상태 여부를 확인하실 수 있습니다.
 
@@ -86,6 +94,21 @@ isPending; // boolean
 
 <br />
 
+원한다면, `transtion` 프로퍼티를 사용하여 transition update를 끌 수 있습니다.
+
+이때, `isPending` 값은 항상 `false`가 됩니다.
+
+```tsx
+const [Tabs, isPending] = useTabs<TabType>({
+  defaultTab: 'tab-0',
+  transition: false,
+});
+
+isPending; // 항상 false
+```
+
+<br />
+
 ### useTabs
 
 `Tabs`를 사용하기 위한 커스텀 훅입니다. 객체 형태의 인자를 받습니다.<br />

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<TabsProps & TabListProps> = {
+const meta: Meta<TabsProps<string> & TabListProps> = {
   title: 'Components/Tabs',
   parameters: {
     layout: 'centered',
@@ -12,6 +12,12 @@ const meta: Meta<TabsProps & TabListProps> = {
     defaultTab: {
       description: '기본으로 설정될 Tabs.Tab의 id',
     },
+    transition: {
+      control: {
+        type: 'boolean',
+      },
+      description: '탭 변경 시 transition update 여부',
+    },
     scrollable: {
       control: {
         type: 'boolean',
@@ -29,7 +35,7 @@ const meta: Meta<TabsProps & TabListProps> = {
 };
 
 export default meta;
-type Story = StoryObj<TabsProps>;
+type Story = StoryObj<TabsProps<string>>;
 type TabType = 'tab-0' | 'tab-1' | 'tab-2' | 'tab-3';
 
 const TabsTest = ({ defaultTab, size = 'large' }: { defaultTab: TabType; size?: TabSize }) => {

src/components/Tabs/Tabs.type.ts

@@ -1,7 +1,7 @@
-export interface TabsProps {
+export interface TabsProps<TabType extends string> {
   scrollable?: boolean;
-  children: React.ReactNode;
-  defaultTab: string;
+  defaultTab: TabType;
+  transition?: boolean;
 }
 
 export type TabSize = 'large' | 'small';

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 = <TabType extends string>({
   defaultTab,
   scrollable = true,
   transition = true,
-}: {
-  defaultTab: TabType;
-  scrollable?: boolean;
-  transition?: boolean;
-}) => {
+}: TabsProps<TabType>) => {
   const [isPending, startTransition] = useTransition();
   const [currentTab, setCurrentTab] = useState<TabType>(defaultTab);