From 8886c5c7ab871a25d81d83518060a9e39d1fff45 Mon Sep 17 00:00:00 2001
From: suji8073 <suzy8073@naver.com>
Date: Tue, 17 Jun 2025 00:16:19 +0900
Subject: [PATCH 1/3] =?UTF-8?q?[feat]=20TopList=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EA=B5=AC=ED=98=84=20-=20folder.svg=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80(=EC=9E=84=EC=8B=9C)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/folder.svg                            |  3 +++
 src/components/molecules/topList/TopList.tsx | 28 ++++++++++++++++++++
 src/components/molecules/topList/index.ts    |  1 +
 3 files changed, 32 insertions(+)
 create mode 100644 public/folder.svg
 create mode 100644 src/components/molecules/topList/TopList.tsx
 create mode 100644 src/components/molecules/topList/index.ts

diff --git a/public/folder.svg b/public/folder.svg
new file mode 100644
index 0000000..fe14dd6
--- /dev/null
+++ b/public/folder.svg
@@ -0,0 +1,3 @@
+<svg width="171" height="171" viewBox="0 0 171 171" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 16C0 7.16344 7.16344 0 16 0H91.3948C97.9271 0 103.803 3.97092 106.24 10.0317L108.841 16.5L112.741 28.9738C113.676 31.1884 115.206 32.999 119.405 32.999H114L114 32.9992H155C163.837 32.9992 171 40.1626 171 48.9992V154.999C171 163.836 163.837 170.999 155 170.999H87.6781C87.6241 171 87.57 171 87.5159 171H16C7.16346 171 0 163.837 0 155V16Z" fill="#2C2E3A"/>
+</svg>
diff --git a/src/components/molecules/topList/TopList.tsx b/src/components/molecules/topList/TopList.tsx
new file mode 100644
index 0000000..0de2e52
--- /dev/null
+++ b/src/components/molecules/topList/TopList.tsx
@@ -0,0 +1,28 @@
+import Folder from '../../../../public/folder.svg';
+
+interface TopListProps {
+  label: string;
+  progressText?: string; // '0/8' or undefined
+}
+
+export const TopList = ({ label, progressText }: TopListProps) => {
+  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] ${
+          progressText ? 'bg-primary-400' : 'bg-gray-300'
+        }`}
+      >
+        <span className='text-sm font-medium text-gray-900'>
+          {progressText ?? '완료'}
+        </span>
+      </div>
+
+      <Folder className='absolute inset-0 z-0' />
+
+      <div className='absolute bottom-5 left-5 text-base font-semibold text-white'>
+        {label}
+      </div>
+    </div>
+  );
+};
diff --git a/src/components/molecules/topList/index.ts b/src/components/molecules/topList/index.ts
new file mode 100644
index 0000000..e03aa6a
--- /dev/null
+++ b/src/components/molecules/topList/index.ts
@@ -0,0 +1 @@
+export { TopList } from './TopList';

From 0efab5dfc211da6848d7252eb1d282a8da00c0d2 Mon Sep 17 00:00:00 2001
From: suji8073 <suzy8073@naver.com>
Date: Tue, 17 Jun 2025 00:17:46 +0900
Subject: [PATCH 2/3] =?UTF-8?q?[feat]=20TopList=20=EC=8A=A4=ED=86=A0?=
 =?UTF-8?q?=EB=A6=AC=EB=B6=81=20=EA=B5=AC=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../molecules/topList/TopList.stories.tsx     | 23 +++++++++++++++++++
 1 file changed, 23 insertions(+)
 create mode 100644 src/components/molecules/topList/TopList.stories.tsx

diff --git a/src/components/molecules/topList/TopList.stories.tsx b/src/components/molecules/topList/TopList.stories.tsx
new file mode 100644
index 0000000..07db134
--- /dev/null
+++ b/src/components/molecules/topList/TopList.stories.tsx
@@ -0,0 +1,23 @@
+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',
+    progressText: '0/8',
+  },
+};
+
+export const complete: Story = {
+  args: {
+    label: 'text',
+  },
+};

From 3bcc8b596a4037f883da83ea3a613d33b9c37aaf Mon Sep 17 00:00:00 2001
From: suji8073 <suzy8073@naver.com>
Date: Tue, 17 Jun 2025 23:54:21 +0900
Subject: [PATCH 3/3] =?UTF-8?q?[refactor]=20currentCount,=20totlaCount=20p?=
 =?UTF-8?q?rops=20=EC=B6=94=EA=B0=80=20-=20progressText=EC=99=80=20?=
 =?UTF-8?q?=EA=B0=99=EC=9D=B4=20=EA=B0=80=EA=B3=B5=EB=90=9C=20=EB=AC=B8?=
 =?UTF-8?q?=EC=9E=90=EC=97=B4=EC=9D=B4=20=EC=95=84=EB=8B=8C=20=EA=B0=81?=
 =?UTF-8?q?=EA=B0=81=20Number=20=ED=83=80=EC=9E=85=EC=9C=BC=EB=A1=9C=20pro?=
 =?UTF-8?q?ps=20=EC=A0=84=EB=8B=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../molecules/topList/TopList.stories.tsx          |  5 ++++-
 src/components/molecules/topList/TopList.tsx       | 14 ++++++++------
 2 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/src/components/molecules/topList/TopList.stories.tsx b/src/components/molecules/topList/TopList.stories.tsx
index 07db134..e6a8a47 100644
--- a/src/components/molecules/topList/TopList.stories.tsx
+++ b/src/components/molecules/topList/TopList.stories.tsx
@@ -12,12 +12,15 @@ type Story = StoryObj<typeof TopList>;
 export const inprogress: Story = {
   args: {
     label: 'text',
-    progressText: '0/8',
+    currentCount: 0,
+    totalCount: 8,
   },
 };
 
 export const complete: Story = {
   args: {
     label: 'text',
+    currentCount: 8,
+    totalCount: 8,
   },
 };
diff --git a/src/components/molecules/topList/TopList.tsx b/src/components/molecules/topList/TopList.tsx
index 0de2e52..1926645 100644
--- a/src/components/molecules/topList/TopList.tsx
+++ b/src/components/molecules/topList/TopList.tsx
@@ -2,27 +2,29 @@ import Folder from '../../../../public/folder.svg';
 
 interface TopListProps {
   label: string;
-  progressText?: string; // '0/8' or undefined
+  currentCount: number;
+  totalCount: number;
 }
 
-export const TopList = ({ label, progressText }: TopListProps) => {
+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] ${
-          progressText ? 'bg-primary-400' : 'bg-gray-300'
+          isCompleted ? 'bg-primary-400' : 'bg-gray-300'
         }`}
       >
         <span className='text-sm font-medium text-gray-900'>
-          {progressText ?? '완료'}
+          {isCompleted ? '완료' : `${currentCount}/${totalCount}`}
         </span>
       </div>
 
       <Folder className='absolute inset-0 z-0' />
 
-      <div className='absolute bottom-5 left-5 text-base font-semibold text-white'>
+      <span className='absolute bottom-5 left-5 text-base font-semibold text-white'>
         {label}
-      </div>
+      </span>
     </div>
   );
 };