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

Refactor: 리뷰리스트, 아이템 수정

Browse Source
This commit is contained in:
정현조 2024-09-19 09:16:42 +09:00
parent 3e397556bb
commit 9156608cea
2 changed files with 24 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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 { interface ReviewItemProps {
title: string; title: string;
createdTime: string; createdTime: string;
creatorName: string; creatorName: string;
project: string; project: ProjectResponse;
status: string; 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> = { const typeIcons: Record<'classification' | 'detection' | 'segmentation', JSX.Element> = {
Classification: <Tag className="h-4 w-4 text-white" />, classification: <Tag className="h-4 w-4 text-white" />,
Detection: <Box 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" />, segmentation: <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',
}; };
export default function ReviewItem({ title, createdTime, creatorName, project, status, type }: ReviewItemProps) { export default function ReviewItem({ title, createdTime, creatorName, project, status, type }: ReviewItemProps) {
const icon = typeIcons[type.text]; const icon = typeIcons[project.projectType];
const bgColor = typeStyles[type.text];
return ( 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 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> <p className="mt-1 text-xs text-[#737278]">by {creatorName}</p>
<div className="mt-1 flex items-center"> <div className="mt-1 flex items-center">
<Briefcase className="h-3 w-3 text-[#737278]" /> <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> </div>
{type && ( {type && (
<div <div
className="mt-1 inline-flex max-w-fit items-center gap-1 rounded-full px-3 py-1 text-xs text-white" 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} {icon}
<span className="overflow-hidden text-ellipsis whitespace-nowrap">{type.text}</span> <span className="overflow-hidden text-ellipsis whitespace-nowrap">{type.text}</span>

15
frontend/src/components/ReviewList/index.tsx
View File

@ -2,6 +2,7 @@ import { useState } from 'react';
import ReviewItem from './ReviewItem'; import ReviewItem from './ReviewItem';
import ReviewSearchInput from './ReviewSearchInput'; import ReviewSearchInput from './ReviewSearchInput';
import useReviewByStatusQuery from '@/queries/useReviewByStatusQuery'; import useReviewByStatusQuery from '@/queries/useReviewByStatusQuery';
import useProjectQuery from '@/queries/useProjectQuery';
import useAuthStore from '@/stores/useAuthStore'; import useAuthStore from '@/stores/useAuthStore';
import { useParams } from 'react-router-dom'; import { useParams } from 'react-router-dom';
@ -14,6 +15,8 @@ export default function ReviewList(): JSX.Element {
const [, setSearchQuery] = useState(''); const [, setSearchQuery] = useState('');
const [sortValue, setSortValue] = useState('latest'); const [sortValue, setSortValue] = useState('latest');
const { data: project } = useProjectQuery(Number(projectId), memberId);
const { data: reviews = [] } = useReviewByStatusQuery( const { data: reviews = [] } = useReviewByStatusQuery(
Number(projectId), Number(projectId),
memberId, memberId,
@ -77,9 +80,17 @@ export default function ReviewList(): JSX.Element {
title={item.title} title={item.title}
createdTime={item.createAt} createdTime={item.createAt}
creatorName={item.nickname} creatorName={item.nickname}
project={item.content} project={project}
status={item.status} status={item.status}
type={{ text: 'Classification', color: '#a2eeef' }} type={{
text: project.projectType,
color:
project.projectType === 'classification'
? '#a2eeef'
: project.projectType === 'detection'
? '#d4c5f9'
: '#f9c5d4',
}}
/> />
))} ))}
</div> </div>