[feat] TopList 컴포넌트 구현

[suji8073]

Motivation 🤔

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

Key Changes 🔑

const ListPage = () => {
  // 서버에서 받아오는 값
  const currentCount = 0;
  const totalCount = 8;

  return (
    <div className='h-full w-full overflow-hidden bg-gray-50 text-center'>

      {/* inProgress */}
      <TopList label='text' progressText={`${currentCount}/${totalCount}`} />

      {/* // 완료 */}
      <TopList label='text' />

    </div>
  );
};

export default ListPage;

• Folder.svg

  • PNG 사용 시 화질 저하로 임시 SVG 적용
  • 해당 부분이 이미지로 교체되는 지에 대한 여부는 피그마를 통해 문의

• TopList 내 props

  • currentCount, totalCount props를 각각 넘기는 방식으로 진행

Attachment 📷

[jungjunhyung99]

오 저는 요 부분 총 일정 개수와 완료된 일정 개수가 number 타입으로 내려오고, 총 일정 개수와 완료된 일정 개수가 같아지면 완료 를 렌더링 하면 될 줄 알았는데... 어떻게 될 지 모르겠네요...! 추후 의논해보는 거 어떠신가요?!

[suji8073]

헉 ! 제가 생각했을 때도 그게 맞는 것 같네용 ! 수정하겠습니다 ~~

[github-actions]

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