From 9156608ceac689092a58687fb3e7893b4f4dbcba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=A0=95=ED=98=84=EC=A1=B0?= <j96263732@gmail.com>
Date: Thu, 19 Sep 2024 09:16:42 +0900
Subject: [PATCH] =?UTF-8?q?Refactor:=20=EB=A6=AC=EB=B7=B0=EB=A6=AC?=
 =?UTF-8?q?=EC=8A=A4=ED=8A=B8,=20=EC=95=84=EC=9D=B4=ED=85=9C=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/ReviewList/ReviewItem.tsx  | 30 +++++++------------
 frontend/src/components/ReviewList/index.tsx  | 15 ++++++++--
 2 files changed, 24 insertions(+), 21 deletions(-)

diff --git a/frontend/src/components/ReviewList/ReviewItem.tsx b/frontend/src/components/ReviewList/ReviewItem.tsx
index 4784329..cfcbfc0 100644
--- a/frontend/src/components/ReviewList/ReviewItem.tsx
+++ b/frontend/src/components/ReviewList/ReviewItem.tsx
@@ -1,31 +1,23 @@
-import { Briefcase, Tag, Box, Layers, Pen } from 'lucide-react';
+import { Briefcase, Tag, Box, Layers } from 'lucide-react';
+import { ProjectResponse } from '@/types';
 
 interface ReviewItemProps {
   title: string;
   createdTime: string;
   creatorName: string;
-  project: string;
+  project: ProjectResponse;
   status: string;
-  type: { text: 'Classification' | 'Detection' | 'Polygon' | 'Polyline'; color: string };
+  type: { text: 'classification' | 'detection' | 'segmentation'; color: string };
 }
 
-const typeIcons: Record<'Classification' | 'Detection' | 'Polygon' | 'Polyline', JSX.Element> = {
-  Classification: <Tag className="h-4 w-4 text-white" />,
-  Detection: <Box className="h-4 w-4 text-white" />,
-  Polygon: <Layers className="h-4 w-4 text-white" />,
-  Polyline: <Pen className="h-4 w-4 text-white" />,
-};
-
-const typeStyles: Record<'Classification' | 'Detection' | 'Polygon' | 'Polyline', string> = {
-  Classification: '#a2eeef',
-  Detection: '#d4c5f9',
-  Polygon: '#f9c5d4',
-  Polyline: '#c5f9d4',
+const typeIcons: Record<'classification' | 'detection' | 'segmentation', JSX.Element> = {
+  classification: <Tag className="h-4 w-4 text-white" />,
+  detection: <Box className="h-4 w-4 text-white" />,
+  segmentation: <Layers className="h-4 w-4 text-white" />,
 };
 
 export default function ReviewItem({ title, createdTime, creatorName, project, status, type }: ReviewItemProps) {
-  const icon = typeIcons[type.text];
-  const bgColor = typeStyles[type.text];
+  const icon = typeIcons[project.projectType];
 
   return (
     <div className="flex h-[100px] w-full items-center justify-between border-b-[0.67px] border-[#ececef] bg-[#fbfafd] p-4">
@@ -34,12 +26,12 @@ export default function ReviewItem({ title, createdTime, creatorName, project, s
         <p className="mt-1 text-xs text-[#737278]">by {creatorName}</p>
         <div className="mt-1 flex items-center">
           <Briefcase className="h-3 w-3 text-[#737278]" />
-          <p className="ml-1 text-xs text-[#737278]">{project}</p>
+          <p className="ml-1 text-xs text-[#737278]">{project.title}</p>
         </div>
         {type && (
           <div
             className="mt-1 inline-flex max-w-fit items-center gap-1 rounded-full px-3 py-1 text-xs text-white"
-            style={{ backgroundColor: bgColor, padding: '1px 5px' }}
+            style={{ backgroundColor: type.color, padding: '1px 5px' }}
           >
             {icon}
             <span className="overflow-hidden text-ellipsis whitespace-nowrap">{type.text}</span>
diff --git a/frontend/src/components/ReviewList/index.tsx b/frontend/src/components/ReviewList/index.tsx
index d5a990d..b55a38b 100644
--- a/frontend/src/components/ReviewList/index.tsx
+++ b/frontend/src/components/ReviewList/index.tsx
@@ -2,6 +2,7 @@ import { useState } from 'react';
 import ReviewItem from './ReviewItem';
 import ReviewSearchInput from './ReviewSearchInput';
 import useReviewByStatusQuery from '@/queries/useReviewByStatusQuery';
+import useProjectQuery from '@/queries/useProjectQuery';
 import useAuthStore from '@/stores/useAuthStore';
 import { useParams } from 'react-router-dom';
 
@@ -14,6 +15,8 @@ export default function ReviewList(): JSX.Element {
   const [, setSearchQuery] = useState('');
   const [sortValue, setSortValue] = useState('latest');
 
+  const { data: project } = useProjectQuery(Number(projectId), memberId);
+
   const { data: reviews = [] } = useReviewByStatusQuery(
     Number(projectId),
     memberId,
@@ -77,9 +80,17 @@ export default function ReviewList(): JSX.Element {
             title={item.title}
             createdTime={item.createAt}
             creatorName={item.nickname}
-            project={item.content}
+            project={project}
             status={item.status}
-            type={{ text: 'Classification', color: '#a2eeef' }}
+            type={{
+              text: project.projectType,
+              color:
+                project.projectType === 'classification'
+                  ? '#a2eeef'
+                  : project.projectType === 'detection'
+                    ? '#d4c5f9'
+                    : '#f9c5d4',
+            }}
           />
         ))}
       </div>