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);