jhynsoo/worlabel
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
정현조 2024-09-20 07:11:32 +09:00
parent b3550ae5f4
commit 745a1198d8
3 changed files with 46 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/components/ReviewList/ProjectReviewList.tsx
View File

@ -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}

63
frontend/src/components/ReviewList/ReviewItem.tsx
View File

@ -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>
);
}

2
frontend/src/components/ReviewList/WorkspaceReviewList.tsx
View File

@ -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}