[feat] TopList 컴포넌트 구현

src/components/molecules/topList/TopList.stories.tsx

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { TopList } from './TopList';
+
+const meta: Meta<typeof TopList> = {
+  title: 'components/TopList',
+  component: TopList,
+};
+
+export default meta;
+type Story = StoryObj<typeof TopList>;
+
+export const inprogress: Story = {
+  args: {
+    label: 'text',
+    currentCount: 0,
+    totalCount: 8,
+  },
+};
+
+export const complete: Story = {
+  args: {
+    label: 'text',
+    currentCount: 8,
+    totalCount: 8,
+  },
+};

src/components/molecules/topList/TopList.tsx

@@ -0,0 +1,30 @@
+import Folder from '../../../../public/folder.svg';
+
+interface TopListProps {
+  label: string;
+  currentCount: number;
+  totalCount: number;
+}
+
+export const TopList = ({ label, currentCount, totalCount }: TopListProps) => {
+  const isCompleted = currentCount === totalCount;
+  return (
+    <div className='relative h-[171px] w-[171px]'>
+      <div
+        className={`absolute right-0 top-[7px] flex h-[42px] w-[67px] justify-center rounded-tr-[8px] pt-[3px] ${
+          isCompleted ? 'bg-primary-400' : 'bg-gray-300'
+        }`}
+      >
+        <span className='text-sm font-medium text-gray-900'>
+          {isCompleted ? '완료' : `${currentCount}/${totalCount}`}
+        </span>
+      </div>
+
+      <Folder className='absolute inset-0 z-0' />
+
+      <span className='absolute bottom-5 left-5 text-base font-semibold text-white'>
+        {label}
+      </span>
+    </div>
+  );
+};

src/components/molecules/topList/index.ts

@@ -0,0 +1 @@
+export { TopList } from './TopList';