From 745a1198d82520e2c9cfbb0c90418bf490c09763 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=A0=95=ED=98=84=EC=A1=B0?= <j96263732@gmail.com>
Date: Fri, 20 Sep 2024 07:11:32 +0900
Subject: [PATCH] =?UTF-8?q?Feat:=20=EB=A6=AC=EB=B7=B0=EC=83=81=EC=84=B8?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EA=B4=80=EB=A0=A8=20=EA=B5=AC?=
 =?UTF-8?q?=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ReviewList/ProjectReviewList.tsx          |  4 +-
 .../src/components/ReviewList/ReviewItem.tsx  | 63 ++++++++++++-------
 .../ReviewList/WorkspaceReviewList.tsx        |  2 +
 3 files changed, 46 insertions(+), 23 deletions(-)

diff --git a/frontend/src/components/ReviewList/ProjectReviewList.tsx b/frontend/src/components/ReviewList/ProjectReviewList.tsx
index e2ec225..a9c3002 100644
--- a/frontend/src/components/ReviewList/ProjectReviewList.tsx
+++ b/frontend/src/components/ReviewList/ProjectReviewList.tsx
@@ -9,7 +9,7 @@ interface ProjectReviewListProps {
   workspaceId: number;
 }
 
-export default function ProjectReviewList({ projectId }: ProjectReviewListProps): JSX.Element {
+export default function ProjectReviewList({ projectId, workspaceId }: ProjectReviewListProps): JSX.Element {
   const profile = useAuthStore((state) => state.profile);
   const memberId = profile?.id || 0;
 
@@ -58,6 +58,8 @@ export default function ProjectReviewList({ projectId }: ProjectReviewListProps)
           projectReviews.map((item) => (
             <ReviewItem
               key={item.reviewId}
+              workspaceId={workspaceId}
+              reviewId={item.reviewId}
               title={item.title}
               createdTime={item.createAt}
               creatorName={item.nickname}
diff --git a/frontend/src/components/ReviewList/ReviewItem.tsx b/frontend/src/components/ReviewList/ReviewItem.tsx
index 6ef0d01..3e599e1 100644
--- a/frontend/src/components/ReviewList/ReviewItem.tsx
+++ b/frontend/src/components/ReviewList/ReviewItem.tsx
@@ -1,6 +1,8 @@
 import { Briefcase, Tag, Box, Layers } from 'lucide-react';
+import { Link } from 'react-router-dom';
 import useProjectQuery from '@/queries/projects/useProjectQuery';
 import useAuthStore from '@/stores/useAuthStore';
+
 interface ReviewItemProps {
   title: string;
   createdTime: string;
@@ -8,6 +10,8 @@ interface ReviewItemProps {
   projectId: number;
   status: 'REQUESTED' | 'APPROVED' | 'REJECTED';
   type?: { text: 'classification' | 'detection' | 'segmentation'; color: string };
+  workspaceId: number;
+  reviewId: number;
 }
 
 const typeIcons: Record<'classification' | 'detection' | 'segmentation', JSX.Element> = {
@@ -16,34 +20,49 @@ const typeIcons: Record<'classification' | 'detection' | 'segmentation', JSX.Ele
   segmentation: <Layers className="h-4 w-4 text-white" />,
 };
 
-export default function ReviewItem({ title, createdTime, creatorName, projectId, status, type }: ReviewItemProps) {
+export default function ReviewItem({
+  title,
+  createdTime,
+  creatorName,
+  projectId,
+  status,
+  type,
+  workspaceId,
+  reviewId,
+}: ReviewItemProps) {
   const profile = useAuthStore((state) => state.profile);
   const memberId = profile?.id || 0;
   const icon = type ? typeIcons[type.text] : null;
   const { data: projectData } = useProjectQuery(projectId, memberId);
+
   return (
-    <div className="flex h-[100px] w-full items-center justify-between border-b-[0.67px] border-[#ececef] bg-[#fbfafd] p-4">
-      <div className="flex flex-col">
-        <p className="text-sm font-semibold text-[#333238]">{title}</p>
-        <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]">{projectData.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: type.color, padding: '1px 5px' }}
-          >
-            {icon}
-            <span className="overflow-hidden text-ellipsis whitespace-nowrap">{type.text}</span>
+    <Link
+      to={`/admin/${workspaceId}/reviews/${projectId}/${reviewId}`}
+      className="block hover:bg-gray-100"
+    >
+      <div className="flex h-[100px] w-full items-center justify-between border-b-[0.67px] border-[#ececef] bg-[#fbfafd] p-4">
+        <div className="flex flex-col">
+          <p className="text-sm font-semibold text-[#333238]">{title}</p>
+          <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]">{projectData?.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: type.color, padding: '1px 5px' }}
+            >
+              {icon}
+              <span className="overflow-hidden text-ellipsis whitespace-nowrap">{type.text}</span>
+            </div>
+          )}
+        </div>
+        <div className="flex flex-col items-end gap-1">
+          <div className="rounded-full bg-[#cbe2f9] px-3 py-0.5 text-center text-xs text-[#0b5cad]">{status}</div>
+          <p className="text-xs text-[#737278]">Created at {createdTime}</p>
+        </div>
       </div>
-      <div className="flex flex-col items-end gap-1">
-        <div className="rounded-full bg-[#cbe2f9] px-3 py-0.5 text-center text-xs text-[#0b5cad]">{status}</div>
-        <p className="text-xs text-[#737278]">Created at {createdTime}</p>
-      </div>
-    </div>
+    </Link>
   );
 }
diff --git a/frontend/src/components/ReviewList/WorkspaceReviewList.tsx b/frontend/src/components/ReviewList/WorkspaceReviewList.tsx
index cdae53f..4209653 100644
--- a/frontend/src/components/ReviewList/WorkspaceReviewList.tsx
+++ b/frontend/src/components/ReviewList/WorkspaceReviewList.tsx
@@ -57,6 +57,8 @@ export default function WorkspaceReviewList({ workspaceId }: WorkspaceReviewList
           workspaceReviews.map((item) => (
             <ReviewItem
               key={item.reviewId}
+              workspaceId={workspaceId}
+              reviewId={item.reviewId}
               title={item.title}
               createdTime={item.createAt}
               creatorName={item.nickname}