[feat] ListTab 컴포넌트 구현

[suji8073]

Motivation 🤔

• 상위 리스트 페이지 중 ListTab 컴포넌트 구현
• ListTab 스토리북 구성

Key Changes 🔑

• TabComponent 내 타입과 구조를 가져와서 재정의했습니당 ! 😆

import { ContentInfo, TabInfo } from '@/components/molecules/tab/Tab';
import { ListTab } from '@/components/molecules/listTab';

type ListTabType = 'all' | 'inProgress' | 'completed';

const tabInfo: TabInfo<ListTabType> = [
  { tabType: 'all', label: '전체', count: 7 },
  { tabType: 'inProgress', label: '진행 중', count: 5 },
  { tabType: 'completed', label: '진행 완료', count: 2 },
];

const contentInfo: ContentInfo<ListTabType> = {
  all: { render: () => <div></div> },
  inProgress: { render: () => <div></div> },
  completed: { render: () => <div></div> },
};

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

  return (
    <div className='h-full w-full overflow-hidden bg-gray-50 text-center'>
      <div className='px-5'>
        <ListTab
          tabInfo={tabInfo}
          selectedTab={selectedTab}
          onClick={setSelectedTab}
        />
        {contentInfo[selectedTab].render()}
      </div>
    </div>
  );
};

export default ListPage;

Attachment 📷

[github-actions]

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

[jungjunhyung99]

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

[github-actions]

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

[github-actions]

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