refactor(Tab): Tab 컴포넌트 storybook 및 접근성 개선

apps/docs/src/stories/Tab.stories.tsx

@@ -5,15 +5,45 @@ const meta = {
   title: 'Components/Tab',
   component: Tab,
   tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: '동일한 위계의 요소를 그룹화하여 화면이동 없이 빠르게 탐색합니다.',
+      },
+    },
+  },
   args: {
     tabItems: ['Tab1', 'Tab2', 'Tab3'],
     selectedInitial: 'Tab1',
     translator: { Tab1: '탭1', Tab2: '탭2', Tab3: '탭3' },
   },
   argTypes: {
-    style: { control: 'radio', options: ['primary', 'secondary'] },
-    size: { control: 'radio', options: ['sm', 'md', 'lg'] },
-    selectedInitial: { control: 'select', options: ['Tab1', 'Tab2', 'Tab3'] },
+    tabItems: {
+      description: '여러 Tab 항목을 전달합니다.',
+      table: { type: { summary: 'T[]' } },
+    },
+    selectedInitial: {
+      control: 'select',
+      options: ['Tab1', 'Tab2', 'Tab3'],
+      description: 'Tab의 초기 선택 값을 설정합니다.',
+      table: { type: { summary: 'T (optional)' } },
+    },
+    translator: {
+      description: 'Tab 항목의 텍스트를 원하는 컴포넌트로 변경합니다.',
+      table: { type: { summary: 'Record<T, ReactNode>' } },
+    },
+    style: {
+      control: 'inline-radio',
+      options: ['primary', 'secondary'],
+      description: 'Tab의 스타일을 설정합니다.',
+      table: { type: { summary: 'primary | secondary' } },
+    },
+    size: {
+      control: 'inline-radio',
+      options: ['sm', 'md', 'lg'],
+      description: 'Tab의 크기를 설정합니다.',
+      table: { type: { summary: 'sm | md | lg' } },
+    },
   },
 } as Meta<typeof Tab>;
 

packages/ui/Tab/Tab.tsx

@@ -1,4 +1,4 @@
-import type { ReactNode} from 'react';
+import type { ReactNode } from 'react';
 import { useState } from 'react';
 import * as S from './style.css';
 import { createTabItemVariant, createTabVariant } from './utils';
@@ -30,21 +30,24 @@ function Tab<T extends string>(props: TabProps<T>) {
   };
 
   return (
-    <div className={`${S.tab} ${tabVariant} ${className}`}>
+    <div className={`${S.tab} ${tabVariant} ${className}`} role='tablist'>
       {tabItems.map((item) => {
-        const isSelected = selected === item ? 'selected' : '';
+        const isSelected = selected === item;
         return (
           <div className={S.tabItemWrap} key={item}>
             <button
-              className={`${S.tabItem} ${tabItemVariant} ${isSelected} ${S.fontStyles[size]}`}
+              aria-selected={isSelected}
+              className={`${S.tabItem} ${tabItemVariant} ${isSelected ? 'selected' : ''} ${S.fontStyles[size]}`}
               onClick={() => {
                 handleClickTabItem(item);
               }}
+              role='tab'
+              tabIndex={isSelected ? 0 : -1}
               type='button'
             >
               {translator ? translator[item] : item}
             </button>
-            <div className={`${S.tabItemUnderline} ${isSelected}`} />
+            <div className={`${S.tabItemUnderline} ${isSelected ? 'selected' : ''}`} />
           </div>
         );
       })}
@@ -53,3 +56,5 @@ function Tab<T extends string>(props: TabProps<T>) {
 }
 
 export default Tab;
+
+Tab.displayName = 'Tab';