Feat: 리뷰상세페이지 관련 구현

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}

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,19 +20,33 @@ 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 (
+    <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>
+            <p className="ml-1 text-xs text-[#737278]">{projectData?.title}</p>
           </div>
           {type && (
             <div
@@ -45,5 +63,6 @@ export default function ReviewItem({ title, createdTime, creatorName, projectId,
           <p className="text-xs text-[#737278]">Created at {createdTime}</p>
         </div>
       </div>
+    </Link>
   );
 }

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}