[feat] Tab 컴포넌트 구현

[vvizi]

Motivation 🤔

• DesignSystem Tab 컴포넌트 구현
• Tab Story 구현

Key Changes 🔑

• 부모 컴포넌트에서 선택된 탭을 관리하는 방식으로 구현
• 제네릭을 활용하여 다양한 탭 타입 지원 (타입 안정성 보장)
• TabInfo, ContentInfo로 정해진 형식으로 탭을 연동할 수 있음

// 사용 방법

// 1. 탭의 타입들 정의
type TabType = 'comment' | 'photo' | 'link';

// 2. 탭의 정보 정의
// count는 필요 시 초기값을 0으로 설정한 후, useState와 useEffect를 활용하여 서버에서 받아온 데이터로 업데이트하면 됩니다.
const tabInfo: TabInfo<TabType> = [
  { tabType: 'comment', label: '댓글' },
  { tabType: 'photo', label: '사진', count: 0 },
  { tabType: 'link', label: '링크', count: 5 },
];

// 3. 탭 선택에 따른 렌더링 되는 화면 정의
const contentInfo: ContentInfo<TabType> = {
    comment: { render: () => <div>댓글 컨텐츠</div> },
    photo: { render: () => <div>사진 컨텐츠</div> },
    link: { render: () => <div>링크 컨텐츠</div> },
};

// 4. 탭 컴포넌트 활용
export const Test = () => {

const [selectedTab, setSelectedTab] = useState<TabType>(tabInfo[0].tabType);

return (
    <div className='w-full overflow-hidden text-center'>
      <Tab
        tabInfo={tabInfo}
        selectedTab={selectedTab}
        onClick={setSelectedTab}
      />
      {contentInfo[selectedTab].render()}
    </div>
  );
};

Attachment 📷

[github-actions]

🚀 storybook: https://67481b940a79e0e1c9da60fb-ztealshpzv.chromatic.com/

[suji8073]

아 굳이에여 굳 ~

[jungjunhyung99]

고생하셨습니다 희지님!!!