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

Merge branch 'fe/develop' of https://lab.ssafy.com/s11-s-project/S11P21S002 into fe/refactor/model

Browse Source
This commit is contained in:
정현조 2024-10-04 05:02:21 +09:00
commit 59d27c23b4
16 changed files with 122 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
frontend/src/components/ManageLayout/index.tsx
View File

@ -22,27 +22,29 @@ export default function ManageLayout({ tabTitle }: { tabTitle: string }) {
<div className="flex min-h-screen flex-col justify-between">
<div className="mt-16 flex flex-1">
<div className="flex w-[280px] flex-col border-r border-gray-200 bg-gray-100 p-2">
<div className="flex items-center justify-center gap-5 p-2">
<div className="flex w-[280px] flex-col gap-1 border-r border-gray-200 bg-gray-100 p-2">
<div className="flex items-center justify-center gap-5">
<Link
to={`/${tabTitle}/${workspaceId}`}
className="subheading w-full overflow-hidden text-ellipsis whitespace-nowrap"
className="subheading w-full overflow-hidden text-ellipsis whitespace-nowrap p-2"
>
{workspaceTitle}
</Link>
</div>
{projects.map((project: ProjectResponse) => (
<Link
key={project.id}
to={`/${tabTitle}/${workspaceId}/${project.id}`}
className={cn(
'cursor-pointer rounded-lg p-3 hover:bg-gray-200',
projectId === String(project.id) ? 'body-strong bg-gray-300' : 'body'
)}
>
{project.title}
</Link>
))}
<div className="flex flex-col">
{projects.map((project: ProjectResponse) => (
<Link
key={project.id}
to={`/${tabTitle}/${workspaceId}/${project.id}`}
className={cn(
'cursor-pointer rounded-lg p-3 hover:bg-gray-200',
projectId === String(project.id) ? 'body-strong bg-gray-300' : 'body'
)}
>
{project.title}
</Link>
))}
</div>
</div>
<div className="flex w-[calc(100%-280px)] flex-col gap-24">

2
frontend/src/components/MemberAddModal/index.tsx
View File

@ -38,7 +38,7 @@ export default function MemberAddModal({ projectId, buttonClass = '' }: MemberAd
<DialogTrigger asChild>
<Button
variant="blue"
className={`${buttonClass}`}
className={buttonClass}
onClick={handleOpen}
>
<span>프로젝트에 새 멤버 초대</span>

4
frontend/src/components/ModelManage/EvaluationTab.tsx
View File

@ -111,8 +111,8 @@ function ModelEvaluation({ projectId, selectedModel }: ModelEvaluationProps) {
data={[
{ name: 'precision', value: resultData[0]?.precision, fill: 'var(--color-precision)' },
{ name: 'recall', value: resultData[0]?.recall, fill: 'var(--color-recall)' },
{ name: 'mAP50', value: resultData[0]?.map50, fill: 'var(--color-map50)' },
{ name: 'mAP50_95', value: resultData[0]?.map5095, fill: 'var(--color-map50-95)' },
{ name: 'map50', value: resultData[0]?.map50, fill: 'var(--color-map50)' },
{ name: 'map5095', value: resultData[0]?.map5095, fill: 'var(--color-map5095)' },
{ name: 'fitness', value: resultData[0]?.fitness, fill: 'var(--color-fitness)' },
]}
className="h-full"

21
frontend/src/components/ModelManage/ModelBarChart.tsx
View File

@ -24,11 +24,11 @@ const chartConfig = {
label: 'Recall',
color: '#1E90FF',
},
mAP50: {
map50: {
label: 'mAP50',
color: '#32CD3',
color: '#32CD30',
},
mAP50_95: {
map5095: {
label: 'mAP50-95',
color: '#BA55D3',
},
@ -62,21 +62,26 @@ export default function ModelBarChart({ data, className }: ModelBarChartProps) {
<YAxis />
<ChartTooltip
cursor={false}
content={<ChartTooltipContent hideLabel />}
content={
<ChartTooltipContent
hideLabel
className="bg-white"
/>
}
/>
<Bar
dataKey="value"
strokeWidth={2}
strokeWidth={0}
radius={8}
activeIndex={2}
activeBar={({ ...props }) => {
return (
<Rectangle
{...props}
fillOpacity={0.8}
fillOpacity={1}
stroke={props.payload.fill}
strokeDasharray={4}
strokeDashoffset={4}
strokeDasharray={0}
strokeDashoffset={0}
/>
);
}}

21
frontend/src/components/ModelManage/index.tsx
View File

@ -10,8 +10,8 @@ export default function ModelManage() {
return (
<div className="grid h-screen w-full">
<div className="flex flex-col">
<header className="bg-background sticky top-0 z-10 flex h-[57px] items-center gap-1 border-b px-4">
<h1 className="text-xl font-semibold">모델 관리</h1>
<header className="bg-background flex h-16 items-center gap-1 border-b border-gray-200 px-4">
<h1 className="heading">모델 관리</h1>
</header>
<main className="grid flex-1 gap-4 overflow-auto p-4">
@ -19,9 +19,20 @@ export default function ModelManage() {
defaultValue="train"
className="w-full"
>
<TabsList>
<TabsTrigger value="train">모델 학습</TabsTrigger>
<TabsTrigger value="results">모델 평가</TabsTrigger>
{/* TabsList랑 TabsTrigger 디자인이 shadcn 문서에서 본 것과 많이 다르고 이상함.. 그래서 일단 className을 일일이 지정함.. */}
<TabsList className="rounded-none border-transparent bg-transparent shadow-none">
<TabsTrigger
value="train"
className="rounded-none border-b-2 border-transparent bg-transparent shadow-none data-[state=active]:border-blue-500 data-[state=active]:shadow-none"
>
모델 학습
</TabsTrigger>
<TabsTrigger
value="results"
className="rounded-none border-b-2 border-transparent bg-transparent shadow-none data-[state=active]:border-blue-500 data-[state=active]:shadow-none"
>
모델 평가
</TabsTrigger>
</TabsList>
<TabsContent value="train">

6
frontend/src/components/ProjectCard/index.tsx
View File

@ -12,7 +12,7 @@ export default function ProjectCard({ title, description, imageUrl = '', to = ''
return (
<Link
to={to}
className="relative flex w-[327px] cursor-pointer items-start gap-4 rounded-lg border border-gray-200 bg-white p-4 transition-colors hover:bg-gray-100 hover:text-gray-900 dark:border-gray-800 dark:bg-gray-950 dark:hover:bg-gray-800 dark:hover:text-gray-50"
className="flex w-[327px] cursor-pointer items-start gap-4 rounded-lg border border-gray-200 bg-white p-4 transition-colors hover:bg-gray-100 hover:text-gray-900 dark:border-gray-800 dark:bg-gray-950 dark:hover:bg-gray-800 dark:hover:text-gray-50"
>
<div className="flex h-24 w-24 shrink-0 items-center justify-center rounded-lg bg-gray-100">
{imageUrl ? (
@ -26,8 +26,8 @@ export default function ProjectCard({ title, description, imageUrl = '', to = ''
)}
</div>
<div className="flex flex-col items-start gap-1 overflow-hidden">
<div className="font-sans text-lg leading-tight text-black dark:text-white">{title}</div>
<div className="text-sm leading-tight text-gray-500 dark:text-gray-400">{description}</div>
<div className="body leading-tight text-black dark:text-white">{title}</div>
<div className="caption leading-tight text-gray-500 dark:text-gray-400">{description}</div>
</div>
</Link>
);

2
frontend/src/components/ProjectCreateModal/index.tsx
View File

@ -24,7 +24,7 @@ export default function ProjectCreateModal({ onSubmit, buttonClass = '' }: Proje
<Button
variant="blue"
className={buttonClass}
size={'xs'}
size="xs"
onClick={handleOpen}
>
<span>새 프로젝트</span>

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

@ -45,7 +45,7 @@ export default function ReviewItem({
to={`/review/${workspaceId}/${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 h-[100px] w-full items-center justify-between border-b border-gray-200 bg-white p-4 hover:bg-gray-100">
<div className="flex flex-col">
<p className="body-small-strong text-black">{title}</p>
<p className="caption mt-1 text-gray-500">
@ -68,7 +68,7 @@ export default function ReviewItem({
<div className="flex flex-col items-end gap-1">
<div
className={cn(
'caption flex items-center gap-1 rounded-full px-3 py-0.5',
'caption flex items-center gap-1 rounded-md px-2 py-0.5',
status === 'APPROVED'
? 'bg-green-100 text-green-600'
: status === 'REJECTED'

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

@ -28,12 +28,12 @@ export default function ReviewList({
{['REQUESTED', 'APPROVED', 'REJECTED', 'ALL'].map((tab) => (
<button
key={tab}
className={`flex h-12 w-[100px] items-center justify-center px-3 ${
className={`mt-[3px] flex h-12 w-[100px] items-center justify-center px-3 ${
activeTab === tab ? 'border-b-[3px] border-blue-500' : 'border-b-[3px] border-transparent'
}`}
onClick={() => setActiveTab(tab as typeof activeTab)}
>
<span className={`text-sm ${activeTab === tab ? 'font-semibold' : 'font-normal'} text-black`}>
<span className={`${activeTab === tab ? 'body-small-strong' : 'body-small'} text-black`}>
{tab === 'REQUESTED' ? '요청' : tab === 'APPROVED' ? '승인' : tab === 'REJECTED' ? '거부' : '전체'}
</span>
</button>

41
frontend/src/components/WorkspaceBrowseLayout/index.tsx
View File

@ -38,28 +38,33 @@ export default function WorkspaceBrowseLayout() {
<div className="flex min-h-screen flex-col justify-between">
<div className="mt-16 flex flex-1">
<div className="flex w-[280px] flex-col border-r border-gray-200 bg-gray-100 p-2">
<div className="flex items-center justify-center gap-5 p-2">
<h1 className="subheading mr-2.5 w-full overflow-hidden text-ellipsis whitespace-nowrap">
<div className="flex w-[280px] flex-col gap-1 border-r border-gray-200 bg-gray-100 p-2">
<div className="flex items-center justify-center gap-5">
<h1 className="subheading mr-2.5 w-full overflow-hidden text-ellipsis whitespace-nowrap p-2">
내 워크스페이스
</h1>
<WorkSpaceCreateModal onSubmit={handleCreateWorkspace} />
</div>
{workspaces.length > 0 ? (
workspaces.map((workspace: WorkspaceResponse) => (
<NavLink
key={workspace.id}
to={`/browse/${workspace.id}`}
className={({ isActive }) =>
cn('cursor-pointer rounded-lg p-3 hover:bg-gray-200', isActive ? 'body-strong bg-gray-300' : 'body')
}
>
{workspace.title}
</NavLink>
))
) : (
<p className="text-gray-500">워크스페이스가 없습니다.</p>
)}
<div className="flex flex-col">
{workspaces.length > 0 ? (
workspaces.map((workspace: WorkspaceResponse) => (
<NavLink
key={workspace.id}
to={`/browse/${workspace.id}`}
className={({ isActive }) =>
cn(
'cursor-pointer rounded-lg p-3 hover:bg-gray-200',
isActive ? 'body-strong bg-gray-300' : 'body'
)
}
>
{workspace.title}
</NavLink>
))
) : (
<p className="text-gray-500">워크스페이스가 없습니다.</p>
)}
</div>
</div>
<div className="flex w-[calc(100%-280px)] flex-col gap-24">
<main className="grow">

8
frontend/src/pages/ProjectMemberManage.tsx
View File

@ -88,14 +88,14 @@ export default function ProjectMemberManage() {
};
return (
<div className="grid h-screen w-full">
<div className="grid w-full">
<div className="flex flex-col">
<header className="bg-background sticky top-0 z-10 flex h-[57px] items-center gap-4 border-b px-4">
<h1 className="flex-1 text-xl font-semibold">프로젝트 멤버 관리</h1>
<header className="bg-background flex h-16 items-center gap-4 px-4">
<h1 className="heading flex-1">프로젝트 멤버 관리</h1>
{isAdminOrManager && <MemberAddModal projectId={projectId ? Number(projectId) : 0} />}
</header>
<main className="grid flex-1 gap-4 overflow-auto p-4">
<main className="grid flex-1 gap-4 overflow-auto px-4 pb-4">
{sortedMembers.length === 0 ? (
<div className="py-4 text-center">프로젝트에 멤버가 없습니다.</div>
) : (

4
frontend/src/pages/ProjectReviewList.tsx
View File

@ -60,8 +60,8 @@ export default function ProjectReviewList() {
return (
<Suspense fallback={<div></div>}>
<div>
<header className="sticky top-0 z-10 flex h-[57px] items-center gap-1 border-b bg-white px-4">
<h1 className="text-xl font-semibold">프로젝트 리뷰</h1>
<header className="sticky top-0 z-10 flex h-16 items-center gap-1 border-b border-gray-200 bg-white px-4">
<h1 className="heading">프로젝트 리뷰</h1>
<Link
to={`/review/${workspaceId}/request`}
className="ml-auto"

38
frontend/src/pages/ReviewDetail.tsx
View File

@ -68,7 +68,7 @@ export default function ReviewDetail(): JSX.Element {
<div className="mb-1 flex gap-1">
<div
className={cn(
'caption mr-1 flex items-center gap-1 rounded-full px-3 py-0.5',
'caption mr-1 flex items-center gap-1 rounded-md px-2 py-0.5',
reviewDetail.reviewStatus === 'APPROVED'
? 'bg-green-100 text-green-600'
: reviewDetail.reviewStatus === 'REJECTED'
@ -88,25 +88,31 @@ export default function ReviewDetail(): JSX.Element {
{reviewDetail.reviewStatus === 'APPROVED' || reviewDetail.reviewStatus === 'REJECTED' ? (
<>
<p className="body-small text-gray-500">by</p>
<p className="body-small-strong text-gray-500">
{reviewDetail.reviewer.nickname} ({reviewDetail.reviewer.email})
</p>
<p className="body-small-strong text-gray-500">{reviewDetail.reviewer.nickname}</p>
<p className="body-small text-gray-500">({reviewDetail.reviewer.email})</p>
<p className="body-small-strong text-gray-500">{timeAgo(reviewDetail.updatedAt)}</p>
<p className="body-small text-gray-500">({formatDateTime(reviewDetail.updatedAt)})</p>
</>
) : (
<p className="body-small text-gray-500">updated</p>
<>
<p className="body-small text-gray-500">by</p>
<p className="body-small-strong text-gray-500">{reviewDetail.author.nickname}</p>
<p className="body-small text-gray-500">({reviewDetail.author.email})</p>
<p className="body-small-strong text-gray-500">{timeAgo(reviewDetail.createdAt)}</p>
<p className="body-small text-gray-500">({formatDateTime(reviewDetail.createdAt)})</p>
</>
)}
<p className="body-small-strong text-gray-500">{timeAgo(reviewDetail.updatedAt)}</p>
<p className="body-small text-gray-500">({formatDateTime(reviewDetail.updatedAt)})</p>
</div>
<div className="flex gap-1">
<p className="body-small-strong text-gray-500">
{reviewDetail.author.nickname} ({reviewDetail.author.email})
</p>
<p className="body-small text-gray-500">requested a review</p>
<p className="body-small-strong text-gray-500">{timeAgo(reviewDetail.createdAt)}</p>
<p className="body-small text-gray-500">({formatDateTime(reviewDetail.createdAt)})</p>
</div>
{reviewDetail.reviewStatus === 'APPROVED' || reviewDetail.reviewStatus === 'REJECTED' ? (
<div className="flex gap-1">
<p className="body-small-strong text-gray-500">{reviewDetail.author.nickname}</p>
<p className="body-small text-gray-500">({reviewDetail.author.email}) requested a review</p>
<p className="body-small-strong text-gray-500">{timeAgo(reviewDetail.createdAt)}</p>
<p className="body-small text-gray-500">({formatDateTime(reviewDetail.createdAt)})</p>
</div>
) : (
<></>
)}
</div>
<div className="relative w-full">

18
frontend/src/pages/WorkspaceBrowseDetail.tsx
View File

@ -29,7 +29,7 @@ export default function WorkspaceBrowseDetail() {
};
return (
<div className="flex h-full w-full flex-col gap-8 px-6 py-4">
<div className="flex h-full w-full flex-col">
<HeaderSection
workspaceName={workspaceData?.title ?? `Workspace-${workspaceId}`}
onCreateProject={handleCreateProject}
@ -54,15 +54,13 @@ function HeaderSection({
onCreateProject: (data: ProjectRequest) => void;
}) {
return (
<div className="flex items-center justify-center">
<h1 className="small-title flex grow">{workspaceName}</h1>
<div className="flex h-16 items-center justify-center px-4">
<h1 className="heading flex grow">{workspaceName}</h1>
<div className="flex flex-col">
<div className="flex gap-3">
<ProjectCreateModal
buttonClass="flex items-center gap-2 body-small-strong h-10 px-4 py-2"
onSubmit={onCreateProject}
/>
</div>
<ProjectCreateModal
buttonClass="flex items-center gap-2 h-10 px-4 py-2"
onSubmit={onCreateProject}
/>
</div>
</div>
);
@ -96,7 +94,7 @@ function ProjectList({ projects, workspaceId }: { projects: ProjectResponse[]; w
}
return (
<div className="flex flex-wrap gap-6">
<div className="flex flex-wrap gap-6 px-4 pb-4">
{projects.map((project: ProjectResponse) => (
<ProjectCard
key={project.id}

8
frontend/src/pages/WorkspaceMemberManage.tsx
View File

@ -11,10 +11,10 @@ export default function WorkspaceMemberManage() {
const { data: members = [] } = useWorkspaceMembersQuery(Number(workspaceId));
return (
<div className="grid h-screen w-full">
<div className="grid w-full">
<div className="flex flex-col">
<header className="bg-background sticky top-0 z-10 flex h-[57px] items-center gap-4 border-b px-4">
<h1 className="flex-1 text-xl font-semibold">워크스페이스 멤버 관리</h1>
<header className="bg-background flex h-16 items-center gap-4 px-4">
<h1 className="heading flex-1">워크스페이스 멤버 관리</h1>
<WorkspaceMemberAddModal
workspaceId={Number(workspaceId)}
@ -22,7 +22,7 @@ export default function WorkspaceMemberManage() {
/>
</header>
<main className="flex-1 overflow-auto p-4">
<main className="flex-1 overflow-auto px-4 pb-4">
{members.length === 0 ? (
<div className="py-4 text-center">워크스페이스에 멤버가 없습니다.</div>
) : (

4
frontend/src/pages/WorkspaceReviewList.tsx
View File

@ -60,8 +60,8 @@ export default function WorkspaceReviewList() {
return (
<Suspense fallback={<div></div>}>
<div>
<header className="sticky top-0 z-10 flex h-[57px] items-center gap-1 border-b bg-white px-4">
<h1 className="text-xl font-semibold">워크스페이스 리뷰</h1>
<header className="sticky top-0 z-10 flex h-16 items-center gap-1 border-b border-gray-200 bg-white px-4">
<h1 className="heading">워크스페이스 리뷰</h1>
<Link
to={`/review/${workspaceId}/request`}
className="ml-auto"