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

Merge branch 'fe/feat/review' into 'fe/develop'

Browse Source 
Feat: 리뷰 디테일 가안 구현

See merge request s11-s-project/S11P21S002!83
This commit is contained in:
김용수 2024-09-19 10:20:05 +09:00
commit 97816e30db
27 changed files with 754 additions and 587 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
frontend/src/api/projectApi.ts
View File

@ -1,5 +1,5 @@
import api from '@/api/axiosConfig';
import { ProjectListResponse, ProjectResponse } from '@/types';
import { ProjectListResponse, ProjectResponse, ProjectMemberRequest, ProjectMemberResponse } from '@/types';
export async function getProjectList(
workspaceId: number,
@ -46,32 +46,6 @@ export async function deleteProject(projectId: number, memberId: number) {
.then(({ data }) => data);
}
export async function addProjectMember(
projectId: number,
memberId: number,
newMemberId: number,
privilegeType: string
) {
return api
.post(
`/projects/${projectId}/members`,
{ memberId: newMemberId, privilegeType },
{
params: { memberId },
}
)
.then(({ data }) => data);
}
export async function removeProjectMember(projectId: number, memberId: number, targetMemberId: number) {
return api
.delete(`/projects/${projectId}/members`, {
params: { memberId },
data: { memberId: targetMemberId },
})
.then(({ data }) => data);
}
export async function createProject(
workspaceId: number,
memberId: number,
@ -83,3 +57,43 @@ export async function createProject(
})
.then(({ data }) => data);
}
// 프로젝트 멤버 조회
export async function getProjectMembers(projectId: number, memberId: number) {
return api
.get<ProjectMemberResponse[]>(`/projects/${projectId}/members`, {
params: { memberId },
})
.then(({ data }) => data);
}
// 프로젝트 멤버 추가
export async function addProjectMember(projectId: number, memberId: number, newMember: ProjectMemberRequest) {
return api
.post<ProjectMemberResponse>(`/projects/${projectId}/members`, newMember, {
params: { memberId },
})
.then(({ data }) => data);
}
// 프로젝트 멤버 권한 수정
export async function updateProjectMemberPrivilege(
projectId: number,
memberId: number,
privilegeData: ProjectMemberRequest
) {
return api
.put<ProjectMemberResponse>(`/projects/${projectId}/members`, privilegeData, {
params: { memberId },
})
.then(({ data }) => data);
}
// 프로젝트 멤버 삭제
export async function removeProjectMember(projectId: number, memberId: number, targetMemberId: number) {
return api
.delete(`/projects/${projectId}/members`, {
params: { memberId, targetMemberId },
})
.then(({ data }) => data);
}

70
frontend/src/api/reviewApi.ts Normal file
View File

@ -0,0 +1,70 @@
import api from '@/api/axiosConfig';
import { ReviewDetailResponse, ReviewRequest, ReviewResponse } from '@/types';
// 리뷰 단건 조회
export async function getReviewDetail(projectId: number, reviewId: number, memberId: number) {
return api
.get<ReviewDetailResponse>(`/projects/${projectId}/reviews/${reviewId}`, {
params: { memberId },
})
.then(({ data }) => data);
}
// 리뷰 생성
export async function createReview(projectId: number, memberId: number, reviewData: ReviewRequest) {
return api
.post<ReviewResponse>(`/projects/${projectId}/reviews`, reviewData, {
params: { memberId },
})
.then(({ data }) => data);
}
// 리뷰 수정
export async function updateReview(projectId: number, reviewId: number, memberId: number, reviewData: ReviewRequest) {
return api
.put<ReviewResponse>(`/projects/${projectId}/reviews/${reviewId}`, reviewData, {
params: { memberId },
})
.then(({ data }) => data);
}
// 리뷰 삭제
export async function deleteReview(projectId: number, reviewId: number, memberId: number) {
return api
.delete(`/projects/${projectId}/reviews/${reviewId}`, {
params: { memberId },
})
.then(({ data }) => data);
}
// 리뷰 상태 변경
export async function updateReviewStatus(projectId: number, reviewId: number, memberId: number, reviewStatus: string) {
return api
.put<ReviewResponse>(
`/projects/${projectId}/reviews/${reviewId}/status`,
{ reviewStatus },
{
params: { memberId },
}
)
.then(({ data }) => data);
}
export async function getReviewByStatus(
projectId: number,
memberId: number,
reviewStatus?: 'REQUESTED' | 'APPROVED' | 'REJECTED',
lastReviewId?: number,
limitPage: number = 10
) {
return api
.get<ReviewResponse[]>(`/projects/${projectId}/reviews`, {
params: {
memberId,
limitPage,
...(reviewStatus ? { reviewStatus } : {}),
...(lastReviewId ? { lastReviewId } : {}),
},
})
.then(({ data }) => data);
}

39
frontend/src/components/AdminLayout/index.stories.tsx
View File

@ -1,39 +0,0 @@
import '@/index.css';
import { Meta, StoryObj } from '@storybook/react';
import AdminLayout from './index';
import { Workspace } from '@/types';
const meta: Meta<typeof AdminLayout> = {
title: 'Layout/AdminLayout',
component: AdminLayout,
parameters: {
layout: 'fullscreen',
},
};
export default meta;
type Story = StoryObj<typeof AdminLayout>;
const workspace: Workspace = {
id: 1,
name: 'Workspace Alpha',
projects: [
{
id: 1,
name: 'Project Alpha',
type: 'Segmentation',
children: [],
},
{
id: 2,
name: 'Project Beta',
type: 'Classification',
children: [],
},
],
};
export const Default: Story = {
render: () => <AdminLayout workspace={workspace} />,
};

58
frontend/src/components/AdminLayout/index.tsx
View File

@ -1,72 +1,24 @@
import { Outlet } from 'react-router-dom';
import { useParams } from 'react-router-dom';
import { Outlet, useParams } from 'react-router-dom';
import Header from '../Header';
import { ResizablePanelGroup, ResizablePanel } from '../ui/resizable';
import AdminProjectSidebar from '../AdminProjectSidebar';
import AdminMenuSidebar from '../AdminMenuSidebar';
import { Workspace } from '@/types';
interface AdminLayoutProps {
workspace?: Workspace;
}
export default function AdminLayout({ workspace }: AdminLayoutProps) {
const { workspaceId } = useParams<{ workspaceId: string }>();
const numericWorkspaceId = workspaceId ? parseInt(workspaceId, 10) : 0;
const effectiveWorkspace: Workspace = workspace || {
id: numericWorkspaceId,
name: workspaceId ? `workspace-${workspaceId}` : 'default-workspace',
projects: [
{
id: 1,
name: 'project1',
type: 'Detection',
children: [],
},
{
id: 2,
name: 'project2',
type: 'Detection',
children: [],
},
{
id: 3,
name: 'project3',
type: 'Detection',
children: [],
},
{
id: 4,
name: 'project4',
type: 'Detection',
children: [],
},
{
id: 5,
name: 'project5',
type: 'Detection',
children: [],
},
],
};
export default function AdminLayout() {
const { projectId } = useParams<{ projectId?: string }>();
return (
<>
<Header className="fixed left-0 top-0" />
<div className="mt-16 h-[calc(100vh-64px)] w-screen">
<ResizablePanelGroup direction="horizontal">
<AdminProjectSidebar
workspaceName={effectiveWorkspace.name}
projects={effectiveWorkspace.projects}
/>
<AdminProjectSidebar />
<ResizablePanel className="flex w-full items-center">
<main className="h-full grow">
<Outlet />
</main>
</ResizablePanel>
<AdminMenuSidebar />
{projectId && <AdminMenuSidebar />}
</ResizablePanelGroup>
</div>
</>

194
frontend/src/components/AdminMemberManage/AdminMemberManageForm.tsx
View File

@ -1,25 +1,29 @@
import { useParams } from 'react-router-dom';
import { useForm } from 'react-hook-form';
import { z } from 'zod';
import { zodResolver } from '@hookform/resolvers/zod';
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '../ui/form';
import { Form, FormControl, FormField, FormItem, FormMessage } from '../ui/form';
import { Input } from '../ui/input';
import { Button } from '../ui/button';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select';
import { ProjectMemberResponse } from '@/types';
import { useUpdateProjectMemberPrivilege } from '@/hooks/useProjectHooks';
type Role = 'admin' | 'editor' | 'viewer';
type Role = 'ADMIN' | 'MANAGER' | 'EDITOR' | 'VIEWER';
const roles: Role[] = ['admin', 'editor', 'viewer'];
const roles: Role[] = ['ADMIN', 'MANAGER', 'EDITOR', 'VIEWER'];
const roleToStr: { [key in Role]: string } = {
admin: '관리자',
editor: '에디터',
viewer: '뷰어',
ADMIN: '관리자',
MANAGER: '매니저',
EDITOR: '에디터',
VIEWER: '뷰어',
};
const formSchema = z.object({
members: z.array(
z.object({
email: z.string().email({ message: '올바른 이메일 형식을 입력해주세요.' }),
memberId: z.number(),
nickname: z.string().nonempty('닉네임을 입력하세요.'),
role: z.enum(roles as [Role, ...Role[]], { errorMap: () => ({ message: '역할을 선택해주세요.' }) }),
})
),
@ -27,113 +31,95 @@ const formSchema = z.object({
export type MemberManageFormValues = z.infer<typeof formSchema>;
interface Member {
email: string;
role: Role;
}
interface AdminMemberManageFormProps {
members: Member[];
onSubmit: (data: MemberManageFormValues) => void;
members: ProjectMemberResponse[];
}
export default function AdminMemberManageForm({ members, onSubmit }: AdminMemberManageFormProps) {
export default function AdminMemberManageForm({ members }: AdminMemberManageFormProps) {
const { projectId } = useParams<{ projectId: string }>();
const { mutate: updatePrivilege } = useUpdateProjectMemberPrivilege();
const form = useForm<MemberManageFormValues>({
resolver: zodResolver(formSchema),
defaultValues: { members },
defaultValues: {
members: members.map((m) => ({
memberId: m.memberId,
nickname: m.nickname,
role: m.privilegeType as Role,
})),
},
});
const groupedMembers = members.reduce<{ [key: string]: { email: string; role: Role }[] }>((acc, member) => {
if (!acc[member.role]) acc[member.role] = [];
acc[member.role].push(member);
return acc;
}, {});
const roleOrder: Role[] = ['admin', 'editor', 'viewer'];
const sortedGroupedMembers = Object.entries(groupedMembers).sort(
([roleA], [roleB]) => roleOrder.indexOf(roleA as Role) - roleOrder.indexOf(roleB as Role)
);
const handleRoleChange = (memberId: number, role: Role) => {
updatePrivilege({
projectId: Number(projectId),
memberId,
privilegeData: {
memberId,
privilegeType: role,
},
});
};
return (
<Form {...form}>
<form
onSubmit={form.handleSubmit(onSubmit)}
className="flex flex-col gap-4"
>
<div className="flex w-full flex-col gap-4">
{sortedGroupedMembers.map(([role, groupMembers]) => {
if (!groupMembers || groupMembers.length === 0) return null;
<div className="flex w-full flex-col gap-4">
{members.map((member, index) => (
<div
key={member.memberId}
className="flex items-center gap-4"
>
<FormField
name={`members.${index}.nickname`}
control={form.control}
render={({ field }) => (
<FormItem className="flex-1">
<FormControl>
<Input
placeholder="닉네임을 입력하세요."
{...field}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
return (
<div
key={role}
className="flex flex-col gap-3"
>
<FormLabel className="text-sm font-semibold text-[#333238]">{roleToStr[role as Role]}</FormLabel>
{groupMembers.map((member, index) => (
<div
key={index}
className="flex items-center gap-4"
>
<FormField
name={`members.${members.findIndex((m) => m.email === member.email)}.email`}
control={form.control}
render={({ field }) => (
<FormItem className="flex-1">
<FormControl>
<Input
placeholder="email@example.com"
{...field}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
name={`members.${members.findIndex((m) => m.email === member.email)}.role`}
control={form.control}
render={({ field }) => (
<FormItem className="flex-1">
<FormControl>
<Select
onValueChange={field.onChange}
defaultValue={field.value}
>
<SelectTrigger>
<SelectValue placeholder="역할을 선택해주세요." />
</SelectTrigger>
<SelectContent>
{roles.map((role) => (
<SelectItem
key={role}
value={role}
>
{roleToStr[role]}
</SelectItem>
))}
</SelectContent>
</Select>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</div>
))}
</div>
);
})}
</div>
<Button
type="submit"
variant="outlinePrimary"
disabled={!form.formState.isValid}
>
역할 설정
</Button>
</form>
<FormField
name={`members.${index}.role`}
control={form.control}
render={({ field }) => (
<FormItem className="flex-1">
<FormControl>
<Select
onValueChange={(value) => {
field.onChange(value);
handleRoleChange(member.memberId, value as Role);
}}
defaultValue={field.value}
>
<SelectTrigger>
<SelectValue placeholder="역할을 선택해주세요." />
</SelectTrigger>
<SelectContent>
{roles.map((role) => (
<SelectItem
key={role}
value={role}
>
{roleToStr[role]}
</SelectItem>
))}
</SelectContent>
</Select>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</div>
))}
</div>
</Form>
);
}

40
frontend/src/components/AdminMemberManage/index.stories.tsx
View File

@ -1,40 +0,0 @@
import { Meta, StoryObj } from '@storybook/react';
import AdminMemberManage from '.';
import { MemberManageFormValues } from './AdminMemberManageForm';
const meta: Meta<typeof AdminMemberManage> = {
title: 'Components/AdminMemberManage',
component: AdminMemberManage,
argTypes: {
title: { control: 'text' },
members: { control: 'object' },
projects: { control: 'object' },
},
};
export default meta;
type Story = StoryObj<typeof AdminMemberManage>;
export const Default: Story = {
args: {
title: '프로젝트 멤버 관리하기',
members: [
{ email: 'admin1@example.com', role: 'admin' },
{ email: 'admin2@example.com', role: 'admin' },
{ email: 'viewer3@example.com', role: 'viewer' },
{ email: 'editor1@example.com', role: 'editor' },
{ email: 'editor2@example.com', role: 'editor' },
{ email: 'editor3@example.com', role: 'editor' },
{ email: 'editor4@example.com', role: 'editor' },
],
projects: [
{ id: 'project-1', name: '프로젝트 A' },
{ id: 'project-2', name: '프로젝트 B' },
{ id: 'project-3', name: '프로젝트 C' },
],
onProjectChange: (projectId: string) => console.log('Selected Project:', projectId),
onMemberInvite: () => console.log('Invite member'),
onSubmit: (data: MemberManageFormValues) => console.log('Submitted:', data),
},
};

93
frontend/src/components/AdminMemberManage/index.tsx
View File

@ -1,70 +1,45 @@
import { Select, SelectTrigger, SelectContent, SelectItem, SelectValue } from '@/components/ui/select';
import AdminMemberManageForm, { MemberManageFormValues } from './AdminMemberManageForm';
import { Button } from '@/components/ui/button';
import { useState } from 'react';
import AdminMemberManageForm from './AdminMemberManageForm';
import { useParams } from 'react-router-dom';
import useProjectMembersQuery from '@/queries/useProjectMembersQuery';
import useAuthStore from '@/stores/useAuthStore';
import { useAddProjectMember } from '@/hooks/useProjectHooks';
import MemberAddModal from '../MemberAddModal';
import { MemberAddFormValues } from '../MemberAddModal/MemberAddForm';
type Role = 'admin' | 'editor' | 'viewer';
export default function AdminMemberManage() {
const { projectId } = useParams<{ workspaceId: string; projectId: string }>();
const profile = useAuthStore((state) => state.profile);
const memberId = profile?.id || 0;
interface Member {
email: string;
role: Role;
}
const { data: members = [] } = useProjectMembersQuery(Number(projectId), memberId);
const addProjectMember = useAddProjectMember();
interface Project {
id: string;
name: string;
}
const [, setInviteModalOpen] = useState(false);
const handleMemberInvite = (data: MemberAddFormValues) => {
addProjectMember.mutate({
projectId: Number(projectId),
memberId: memberId,
newMember: {
// Todo : 멤버 id로 수정하는 로직 수정해야한다.
// memberId: data.email,
memberId: 0,
privilegeType: data.role,
},
});
console.log('Invited:', data);
setInviteModalOpen(false);
};
export default function AdminMemberManage({
title = '멤버 관리',
projects = [
{ id: 'project-1', name: '프로젝트 A' },
{ id: 'project-2', name: '프로젝트 B' },
],
onProjectChange = (projectId: string) => console.log('Selected Project:', projectId),
onSubmit = (data: MemberManageFormValues) => console.log('Submitted:', data),
members = [
{ email: 'admin1@example.com', role: 'admin' },
{ email: 'viewer2@example.com', role: 'viewer' },
],
onMemberInvite = () => console.log('Invite member'),
}: {
title?: string;
projects?: Project[];
onProjectChange?: (projectId: string) => void;
onSubmit?: (data: MemberManageFormValues) => void;
members?: Member[];
onMemberInvite?: () => void;
}) {
return (
<div className="flex w-full flex-col gap-6 border-b-[0.67px] border-[#dcdcde] bg-[#fbfafd] p-6">
<header className="flex w-full items-center gap-4">
<h1 className="flex-1 text-lg font-semibold text-[#333238]">{title}</h1>
<Button
variant="outlinePrimary"
onClick={onMemberInvite}
>
멤버 초대하기
</Button>
<Select onValueChange={onProjectChange}>
<SelectTrigger className="w-[200px]">
<SelectValue placeholder="프로젝트 선택" />
</SelectTrigger>
<SelectContent>
{projects.map((project) => (
<SelectItem
key={project.id}
value={project.id}
>
{project.name}
</SelectItem>
))}
</SelectContent>
</Select>
<h1 className="flex-1 text-lg font-semibold text-[#333238]">멤버 관리</h1>
<MemberAddModal onSubmit={handleMemberInvite} />
</header>
<AdminMemberManageForm
onSubmit={onSubmit}
members={members}
/>
<AdminMemberManageForm members={members} />
</div>
);
}

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

@ -3,11 +3,11 @@ import { cn } from '@/lib/utils';
export default function AdminMenuSidebar() {
const navigate = useNavigate();
const { id } = useParams<{ id: string }>();
const { workspaceId, projectId } = useParams<{ workspaceId: string; projectId?: string }>();
const menuItems = [
{ label: '리뷰', path: `/admin/${id}/review` },
{ label: '멤버 관리', path: `/admin/${id}/members` },
{ label: '리뷰', path: `/admin/${workspaceId}${projectId ? `/project/${projectId}` : ''}/reviews` },
{ label: '멤버 관리', path: `/admin/${workspaceId}${projectId ? `/project/${projectId}` : ''}/members` },
];
return (

51
frontend/src/components/AdminProjectSidebar/index.tsx
View File

@ -1,16 +1,31 @@
import { ResizablePanel, ResizableHandle } from '../ui/resizable';
import { Project } from '@/types';
import { useNavigate } from 'react-router-dom';
import { useNavigate, useParams } from 'react-router-dom';
import { SquarePen } from 'lucide-react';
import { Button } from '../ui/button';
import useProjectListQuery from '@/queries/useProjectListQuery';
import { useCreateProject } from '@/hooks/useProjectHooks';
import { ProjectRequest } from '@/types';
import useAuthStore from '@/stores/useAuthStore';
import ProjectCreateModal from '../ProjectCreateModal';
interface AdminProjectSidebarProps {
workspaceName: string;
projects: Project[];
}
export default function AdminProjectSidebar({ workspaceName, projects }: AdminProjectSidebarProps): JSX.Element {
export default function AdminProjectSidebar(): JSX.Element {
const navigate = useNavigate();
const { workspaceId } = useParams<{ workspaceId: string }>();
const profile = useAuthStore((state) => state.profile);
const memberId = profile?.id || 0;
const { data: projectsResponse } = useProjectListQuery(Number(workspaceId), memberId);
const projects = projectsResponse?.workspaceResponses ?? [];
const createProject = useCreateProject();
const handleCreateProject = (data: ProjectRequest) => {
createProject.mutate({
workspaceId: Number(workspaceId),
memberId,
data,
});
};
return (
<>
@ -22,28 +37,24 @@ export default function AdminProjectSidebar({ workspaceName, projects }: AdminPr
>
<header className="flex w-full items-center justify-between gap-2 border-b border-gray-200 p-4">
<h1 className="heading w-full overflow-hidden text-ellipsis whitespace-nowrap text-xl font-bold text-gray-900">
{workspaceName}
{workspaceId}
</h1>
<button className="p-2">
<SquarePen size={16} />
</button>
<Button
variant="outline"
size="xs"
className="caption border-gray-800 bg-gray-100"
onClick={() => console.log('New project')}
>
새 프로젝트
</Button>
<ProjectCreateModal
buttonClass="caption border-gray-800 bg-gray-100"
onSubmit={handleCreateProject}
/>
</header>
<div className="flex flex-col gap-2 p-4">
{projects.map((project) => (
<button
key={project.id}
className="body cursor-pointer rounded-md px-3 py-2 text-left hover:bg-gray-200"
onClick={() => navigate(`/project/${project.id}`)}
onClick={() => navigate(`/admin/${workspaceId}/project/${project.id}`)}
>
{project.name}
{project.title}
</button>
))}
</div>

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

@ -7,7 +7,7 @@ export interface HeaderProps extends React.HTMLAttributes<HTMLDivElement> {}
export default function Header({ className, ...props }: HeaderProps) {
const location = useLocation();
const { workspaceId } = useParams<{ workspaceId: string }>();
const { workspaceId, projectId } = useParams<{ workspaceId: string; projectId?: string }>();
const isWorkspaceIdNaN = isNaN(Number(workspaceId));
const isHomePage = location.pathname === '/';
@ -46,7 +46,7 @@ export default function Header({ className, ...props }: HeaderProps) {
labeling
</Link>
<Link
to={`/admin/${workspaceId}`}
to={`/admin/${workspaceId}/project/${projectId ?? ''}`}
className={cn('text-color-text-default-default', 'font-body', 'text-sm sm:text-base md:text-lg')}
>
admin

19
frontend/src/components/MemberAddModal/MemberAddForm.tsx
View File

@ -6,14 +6,15 @@ import { Input } from '../ui/input';
import { Button } from '../ui/button';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select';
type Role = 'admin' | 'editor' | 'viewer';
type PrivilegeType = 'ADMIN' | 'MANAGER' | 'EDITOR' | 'VIEWER';
const roles: Role[] = ['admin', 'editor', 'viewer'];
const privilegeTypes: readonly ['ADMIN', 'MANAGER', 'EDITOR', 'VIEWER'] = ['ADMIN', 'MANAGER', 'EDITOR', 'VIEWER'];
const roleToStr: { [key in Role]: string } = {
admin: '관리자',
editor: '에디터',
viewer: '뷰어',
const privilegeTypeToStr: { [key in PrivilegeType]: string } = {
ADMIN: '관리자',
MANAGER: '매니저',
EDITOR: '에디터',
VIEWER: '뷰어',
};
const formSchema = z.object({
@ -26,7 +27,7 @@ const formSchema = z.object({
.min(1, {
message: '초대할 멤버의 이메일 주소를 입력해주세요.',
}),
role: z.enum(['admin', 'editor', 'viewer']),
role: z.enum(privilegeTypes),
});
export type MemberAddFormValues = z.infer<typeof formSchema>;
@ -80,12 +81,12 @@ export default function MemberAddForm({ onSubmit }: { onSubmit: (data: MemberAdd
<SelectValue placeholder="초대할 멤버의 역할을 선택해주세요." />
</SelectTrigger>
<SelectContent>
{roles.map((role) => (
{privilegeTypes.map((role) => (
<SelectItem
key={role}
value={role}
>
{roleToStr[role]}
{privilegeTypeToStr[role]}
</SelectItem>
))}
</SelectContent>

19
frontend/src/components/MemberAddModal/index.stories.tsx
View File

@ -1,19 +0,0 @@
import '@/index.css';
import MemberAddModal from '.';
export default {
title: 'Modal/MemberAddModal',
component: MemberAddModal,
};
export const Default = () => (
<MemberAddModal
title="프로젝트 멤버 초대하기"
onClose={() => {
console.log('close');
}}
onSubmit={(data) => {
console.log(data);
}}
/>
);

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

@ -1,27 +1,44 @@
import React from 'react';
import MemberAddForm, { MemberAddFormValues } from './MemberAddForm';
import XIcon from '@/assets/icons/x.svg?react';
import { Dialog, DialogContent, DialogHeader, DialogTrigger } from '../ui/dialogCustom';
import { Button } from '@/components/ui/button';
import { Plus } from 'lucide-react';
export default function MemberAddModal({
title = '새 멤버 초대',
onClose,
onSubmit,
}: {
title?: string;
onClose: () => void;
interface MemberAddModalProps {
onSubmit: (data: MemberAddFormValues) => void;
}) {
buttonClass?: string;
}
export default function MemberAddModal({ onSubmit, buttonClass = '' }: MemberAddModalProps) {
const [isOpen, setIsOpen] = React.useState(false);
const handleOpen = () => setIsOpen(true);
const handleClose = () => setIsOpen(false);
return (
<div className="flex w-[610px] flex-col gap-10 rounded-3xl border px-10 py-5 shadow-lg">
<header className="flex gap-5">
<h1 className="small-title w-full">{title}</h1>
<button
className="flex h-8 w-8 items-center justify-center"
onClick={onClose}
<Dialog
open={isOpen}
onOpenChange={setIsOpen}
>
<DialogTrigger asChild>
<Button
variant="outlinePrimary"
className={`${buttonClass}`}
onClick={handleOpen}
>
<XIcon className="stroke-gray-900" />
</button>
</header>
<MemberAddForm onSubmit={onSubmit} />
</div>
<Plus size={16} />
<span>멤버 초대하기</span>
</Button>
</DialogTrigger>
<DialogContent>
<DialogHeader title="새 멤버 초대" />
<MemberAddForm
onSubmit={(data: MemberAddFormValues) => {
onSubmit(data);
handleClose();
}}
/>
</DialogContent>
</Dialog>
);
}

86
frontend/src/components/ReviewDetail/index.tsx Normal file
View File

@ -0,0 +1,86 @@
import useReviewDetailQuery from '@/queries/useReviewDetailQuery';
import { useUpdateReview, useDeleteReview } from '@/hooks/useReviewHooks';
import { useParams } from 'react-router-dom';
export default function ReviewDetail() {
const { projectId, reviewId } = useParams<{ projectId: string; reviewId: string }>();
const memberId = 1;
const { data: reviewDetail } = useReviewDetailQuery(Number(projectId), Number(reviewId), memberId);
const updateReview = useUpdateReview();
const deleteReview = useDeleteReview();
const handleUpdate = () => {
updateReview.mutate({
projectId: Number(projectId),
reviewId: Number(reviewId),
memberId,
reviewData: {
title: reviewDetail.title,
content: reviewDetail.content,
imageIds: reviewDetail.images.map((image) => image.id),
},
});
};
const handleDelete = () => {
deleteReview.mutate({
projectId: Number(projectId),
reviewId: Number(reviewId),
memberId,
});
};
if (!reviewDetail) return <p>Loading...</p>;
const { title, content, reviewStatus, images } = reviewDetail;
return (
<div className="flex flex-col gap-4 bg-white p-6">
<header className="flex items-center justify-between">
<h1 className="text-2xl font-bold text-[#333238]">{title}</h1>
<div className="rounded-full bg-[#cbe2f9] px-3 py-0.5 text-xs text-[#0b5cad]">{reviewStatus}</div>
</header>
<div className="flex items-center gap-2">
<p className="text-sm text-[#737278]">by 김용수</p>
<p className="text-sm text-[#737278]">|</p>
<p className="text-sm text-[#737278]">8 hours ago</p>
</div>
<div className="border-b pb-4">
<h2 className="text-xl font-semibold">내용</h2>
<p className="mt-2 text-sm text-[#333238]">{content}</p>
</div>
<div className="flex flex-col">
<h2 className="text-xl font-semibold">이미지 목록</h2>
<ul className="mt-2 list-inside list-disc">
{images.map((image) => (
<li
key={image.id}
className="text-sm text-[#737278]"
>
{image.imageTitle} (status: {image.status})
</li>
))}
</ul>
</div>
<div className="flex gap-2">
<button
onClick={handleUpdate}
className="rounded-lg bg-blue-500 px-4 py-2 text-white hover:bg-blue-600"
>
수정하기
</button>
<button
onClick={handleDelete}
className="rounded-lg bg-red-500 px-4 py-2 text-white hover:bg-red-600"
>
삭제하기
</button>
</div>
</div>
);
}

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 {
title: string;
createdTime: string;
creatorName: string;
project: string;
project: ProjectResponse;
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> = {
Classification: <Tag 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" />,
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',
const typeIcons: Record<'classification' | 'detection' | 'segmentation', JSX.Element> = {
classification: <Tag className="h-4 w-4 text-white" />,
detection: <Box className="h-4 w-4 text-white" />,
segmentation: <Layers className="h-4 w-4 text-white" />,
};
export default function ReviewItem({ title, createdTime, creatorName, project, status, type }: ReviewItemProps) {
const icon = typeIcons[type.text];
const bgColor = typeStyles[type.text];
const icon = typeIcons[project.projectType];
return (
<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>
<div className="mt-1 flex items-center">
<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>
{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: bgColor, padding: '1px 5px' }}
style={{ backgroundColor: type.color, padding: '1px 5px' }}
>
{icon}
<span className="overflow-hidden text-ellipsis whitespace-nowrap">{type.text}</span>

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

@ -5,8 +5,6 @@ import { cn } from '@/lib/utils';
const sortOptions = [
{ value: 'latest', label: '최신 순' },
{ value: 'oldest', label: '오래된 순' },
{ value: 'comments', label: '댓글 많은 순' },
{ value: 'updates', label: '업데이트 많은 순' },
];
interface ReviewSearchInputProps {

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

@ -1,152 +1,66 @@
import { useState } from 'react';
import ReviewItem from './ReviewItem';
import ReviewSearchInput from './ReviewSearchInput';
import useReviewByStatusQuery from '@/queries/useReviewByStatusQuery';
import useProjectQuery from '@/queries/useProjectQuery';
import useAuthStore from '@/stores/useAuthStore';
import { useParams } from 'react-router-dom';
interface ReviewListProps {
acceptedCount?: number;
rejectedCount?: number;
pendingCount?: number;
totalCount?: number;
items?: {
title: string;
createdTime: string;
creatorName: string;
project: string;
type: 'Classification' | 'Detection' | 'Polygon' | 'Polyline';
status: string;
}[];
}
export default function ReviewList(): JSX.Element {
const { projectId } = useParams<{ projectId: string }>();
const profile = useAuthStore((state) => state.profile);
const memberId = profile?.id || 0;
const typeColors: Record<'Classification' | 'Detection' | 'Polygon' | 'Polyline', string> = {
Classification: '#a2eeef',
Detection: '#d4c5f9',
Polygon: '#f9c5d4',
Polyline: '#c5f9d4',
};
const defaultItems: ReviewListProps['items'] = [
{
title: '리뷰 항목 1',
createdTime: '2024-09-09T10:00:00Z',
creatorName: '사용자 1',
project: '프로젝트 A',
type: 'Classification',
status: 'needs_review',
},
{
title: '리뷰 항목 2',
createdTime: '2024-09-08T14:30:00Z',
creatorName: '사용자 2',
project: '프로젝트 B',
type: 'Detection',
status: 'completed',
},
{
title: '리뷰 항목 3',
createdTime: '2024-09-07T08:45:00Z',
creatorName: '사용자 3',
project: '프로젝트 C',
type: 'Polygon',
status: 'in_progress',
},
{
title: '리뷰 항목 4',
createdTime: '2024-09-06T10:20:00Z',
creatorName: '사용자 4',
project: '프로젝트 D',
type: 'Polyline',
status: 'pending',
},
];
export default function ReviewList({
acceptedCount = 1,
rejectedCount = 1,
pendingCount = 1,
totalCount = 3,
items = defaultItems,
}: ReviewListProps): JSX.Element {
const [activeTab, setActiveTab] = useState('pending');
const [searchQuery, setSearchQuery] = useState('');
const [activeTab, setActiveTab] = useState<'REQUESTED' | 'APPROVED' | 'REJECTED' | 'all'>('REQUESTED');
const [, setSearchQuery] = useState('');
const [sortValue, setSortValue] = useState('latest');
const filteredItems = (items ?? [])
.filter((item) => {
if (activeTab === 'pending') return item.status.toLowerCase() === 'needs_review';
if (activeTab === 'accepted') return item.status.toLowerCase() === 'completed';
if (activeTab === 'rejected')
return item.status.toLowerCase() === 'in_progress' || item.status.toLowerCase() === 'pending';
if (activeTab === 'all') return true;
return false;
})
.filter((item) => item.title.includes(searchQuery))
.sort((a, b) => {
switch (sortValue) {
case 'oldest':
return new Date(a.createdTime).getTime() - new Date(b.createdTime).getTime();
default:
return new Date(b.createdTime).getTime() - new Date(a.createdTime).getTime();
}
});
const { data: project } = useProjectQuery(Number(projectId), memberId);
const { data: reviews = [] } = useReviewByStatusQuery(
Number(projectId),
memberId,
activeTab !== 'all' ? activeTab : undefined
);
return (
<div className="relative w-full">
<div className="relative w-full px-4">
<div className="flex w-full items-center border-b-[0.67px] border-solid border-[#dcdcde]">
<button
className={`flex h-12 w-[100px] items-center justify-between px-3 ${
activeTab === 'pending' ? 'shadow-[inset_0px_-2px_0px_#1f75cb]' : ''
}`}
onClick={() => setActiveTab('pending')}
className={`flex h-12 w-[100px] items-center justify-between px-3 ${activeTab === 'REQUESTED' ? 'shadow-[inset_0px_-2px_0px_#1f75cb]' : ''}`}
onClick={() => setActiveTab('REQUESTED')}
>
<span className={`text-sm ${activeTab === 'pending' ? 'font-semibold' : 'font-normal'} text-[#333238]`}>
<span className={`text-sm ${activeTab === 'REQUESTED' ? 'font-semibold' : 'font-normal'} text-[#333238]`}>
요청
</span>
<span className="flex h-4 w-6 items-center justify-center rounded-[160px] bg-[#ececef] text-xs text-[#626168]">
{pendingCount}
</span>
</button>
<button
className={`flex h-12 w-[100px] items-center justify-between px-3 ${
activeTab === 'accepted' ? 'shadow-[inset_0px_-2px_0px_#1f75cb]' : ''
}`}
onClick={() => setActiveTab('accepted')}
className={`flex h-12 w-[100px] items-center justify-between px-3 ${activeTab === 'APPROVED' ? 'shadow-[inset_0px_-2px_0px_#1f75cb]' : ''}`}
onClick={() => setActiveTab('APPROVED')}
>
<span className={`text-sm ${activeTab === 'accepted' ? 'font-semibold' : 'font-normal'} text-[#333238]`}>
<span className={`text-sm ${activeTab === 'APPROVED' ? 'font-semibold' : 'font-normal'} text-[#333238]`}>
승인
</span>
<span className="flex h-4 w-6 items-center justify-center rounded-[160px] bg-[#ececef] text-xs text-[#626168]">
{acceptedCount}
</span>
</button>
<button
className={`flex h-12 w-[100px] items-center justify-between px-3 ${
activeTab === 'rejected' ? 'shadow-[inset_0px_-2px_0px_#1f75cb]' : ''
}`}
onClick={() => setActiveTab('rejected')}
className={`flex h-12 w-[100px] items-center justify-between px-3 ${activeTab === 'REJECTED' ? 'shadow-[inset_0px_-2px_0px_#1f75cb]' : ''}`}
onClick={() => setActiveTab('REJECTED')}
>
<span className={`text-sm ${activeTab === 'rejected' ? 'font-semibold' : 'font-normal'} text-[#333238]`}>
<span className={`text-sm ${activeTab === 'REJECTED' ? 'font-semibold' : 'font-normal'} text-[#333238]`}>
거부
</span>
<span className="flex h-4 w-6 items-center justify-center rounded-[160px] bg-[#ececef] text-xs text-[#626168]">
{rejectedCount}
</span>
</button>
<button
className={`flex h-12 w-[100px] items-center justify-between px-3 ${
activeTab === 'all' ? 'shadow-[inset_0px_-2px_0px_#1f75cb]' : ''
}`}
className={`flex h-12 w-[100px] items-center justify-between px-3 ${activeTab === 'all' ? 'shadow-[inset_0px_-2px_0px_#1f75cb]' : ''}`}
onClick={() => setActiveTab('all')}
>
<span className={`text-sm ${activeTab === 'all' ? 'font-semibold' : 'font-normal'} text-[#333238]`}>
전체
</span>
<span className="flex h-4 w-6 items-center justify-center rounded-[160px] bg-[#ececef] text-xs text-[#626168]">
{totalCount}
</span>
</button>
</div>
</div>
@ -160,15 +74,23 @@ export default function ReviewList({
</div>
<div className="relative w-full overflow-y-auto px-4">
{filteredItems.map((item, index) => (
{reviews.map((item) => (
<ReviewItem
key={index}
key={item.reviewId}
title={item.title}
createdTime={item.createdTime}
creatorName={item.creatorName}
project={item.project}
createdTime={item.createAt}
creatorName={item.nickname}
project={project}
status={item.status}
type={{ text: item.type, color: typeColors[item.type] }}
type={{
text: project.projectType,
color:
project.projectType === 'classification'
? '#a2eeef'
: project.projectType === 'detection'
? '#d4c5f9'
: '#f9c5d4',
}}
/>
))}
</div>

47
frontend/src/hooks/useProjectHooks.ts
View File

@ -113,8 +113,15 @@
// });
// };
import { useMutation, useQueryClient } from '@tanstack/react-query';
import { createProject, updateProject, deleteProject, addProjectMember, removeProjectMember } from '@/api/projectApi';
import { ProjectResponse, ProjectRequest, ProjectMemberRequest } from '@/types';
import {
createProject,
updateProject,
deleteProject,
addProjectMember,
updateProjectMemberPrivilege,
removeProjectMember,
} from '@/api/projectApi';
import { ProjectResponse, ProjectRequest, ProjectMemberRequest, ProjectMemberResponse } from '@/types';
export const useCreateProject = () => {
const queryClient = useQueryClient();
@ -151,23 +158,41 @@ export const useDeleteProject = () => {
export const useAddProjectMember = () => {
const queryClient = useQueryClient();
return useMutation<void, Error, { projectId: number; memberId: number; data: ProjectMemberRequest }>({
mutationFn: ({ projectId, memberId, data }) =>
addProjectMember(projectId, memberId, data.memberId, data.privilegeType),
onSuccess: (_, variables) => {
queryClient.invalidateQueries({ queryKey: ['project', variables.projectId] });
return useMutation<
ProjectMemberResponse,
Error,
{ projectId: number; memberId: number; newMember: ProjectMemberRequest }
>({
mutationFn: ({ projectId, memberId, newMember }) => addProjectMember(projectId, memberId, newMember),
onSuccess: (_, { projectId }) => {
queryClient.invalidateQueries({ queryKey: ['projectMembers', projectId] });
},
});
};
// 프로젝트 멤버 권한 수정 훅
export const useUpdateProjectMemberPrivilege = () => {
const queryClient = useQueryClient();
return useMutation<
ProjectMemberResponse,
Error,
{ projectId: number; memberId: number; privilegeData: ProjectMemberRequest }
>({
mutationFn: ({ projectId, memberId, privilegeData }) =>
updateProjectMemberPrivilege(projectId, memberId, privilegeData),
onSuccess: (_, { projectId }) => {
queryClient.invalidateQueries({ queryKey: ['projectMembers', projectId] });
},
});
};
// 프로젝트 멤버 삭제 훅
export const useRemoveProjectMember = () => {
const queryClient = useQueryClient();
return useMutation<void, Error, { projectId: number; memberId: number; targetMemberId: number }>({
mutationFn: ({ projectId, memberId, targetMemberId }) => removeProjectMember(projectId, memberId, targetMemberId),
onSuccess: (_, variables) => {
queryClient.invalidateQueries({ queryKey: ['project', variables.projectId] });
onSuccess: (_, { projectId }) => {
queryClient.invalidateQueries({ queryKey: ['projectMembers', projectId] });
},
});
};

57
frontend/src/hooks/useReviewHooks.ts Normal file
View File

@ -0,0 +1,57 @@
import { useMutation, useQueryClient } from '@tanstack/react-query';
import { createReview, updateReview, deleteReview, updateReviewStatus } from '@/api/reviewApi';
import { ReviewRequest, ReviewResponse } from '@/types';
// 리뷰 생성 훅
export const useCreateReview = () => {
const queryClient = useQueryClient();
return useMutation<ReviewResponse, Error, { projectId: number; memberId: number; reviewData: ReviewRequest }>({
mutationFn: ({ projectId, memberId, reviewData }) => createReview(projectId, memberId, reviewData),
onSuccess: (_, { projectId, memberId }) => {
queryClient.invalidateQueries({ queryKey: ['reviewList', projectId, memberId] });
},
});
};
// 리뷰 수정 훅
export const useUpdateReview = () => {
const queryClient = useQueryClient();
return useMutation<
ReviewResponse,
Error,
{ projectId: number; reviewId: number; memberId: number; reviewData: ReviewRequest }
>({
mutationFn: ({ projectId, reviewId, memberId, reviewData }) =>
updateReview(projectId, reviewId, memberId, reviewData),
onSuccess: (_, { projectId, reviewId }) => {
queryClient.invalidateQueries({ queryKey: ['reviewDetail', projectId, reviewId] });
},
});
};
// 리뷰 삭제 훅
export const useDeleteReview = () => {
const queryClient = useQueryClient();
return useMutation<void, Error, { projectId: number; reviewId: number; memberId: number }>({
mutationFn: ({ projectId, reviewId, memberId }) => deleteReview(projectId, reviewId, memberId),
onSuccess: (_, { projectId, reviewId }) => {
queryClient.invalidateQueries({ queryKey: ['reviewDetail', projectId, reviewId] });
},
});
};
// 리뷰 상태 변경 훅
export const useUpdateReviewStatus = () => {
const queryClient = useQueryClient();
return useMutation<
ReviewResponse,
Error,
{ projectId: number; reviewId: number; memberId: number; reviewStatus: string }
>({
mutationFn: ({ projectId, reviewId, memberId, reviewStatus }) =>
updateReviewStatus(projectId, reviewId, memberId, reviewStatus),
onSuccess: (_, { projectId, reviewId }) => {
queryClient.invalidateQueries({ queryKey: ['reviewDetail', projectId, reviewId] });
},
});
};

87
frontend/src/mocks/handlers.ts
View File

@ -155,6 +155,93 @@ export const handlers = [
return HttpResponse.json({});
}),
http.post('/api/projects/:projectId/label/auto', () => {
const response: AutoLabelingResponse = {
imageId: 1,
imageUrl: 'image-url.jpg',
data: `{
"version": "0.1.0",
"task_type": "cls",
"shapes": [
{
"label": "NG",
"color": "#FF0000",
"points": [[0, 0]],
"group_id": null,
"shape_type": "point",
"flags": {}
}
],
"split": "none",
"imageHeight": 2000,
"imageWidth": 4000,
"imageDepth": 4
}`,
};
return HttpResponse.json(response);
}),
// DELETE: 프로젝트 멤버 제거 핸들러
http.delete('/api/projects/:projectId/members', ({ params }) => {
const { projectId } = params;
return HttpResponse.json({ message: `프로젝트 ${projectId}에서 멤버 제거 성공` });
}),
// PUT: 프로젝트 멤버 권한 수정 핸들러
http.put('/api/projects/:projectId/members', () => {
return HttpResponse.json({});
}),
// POST: 워크스페이스 멤버 추가 핸들러
http.post('/api/workspaces/:workspaceId/members/:memberId', ({ params }) => {
const { workspaceId, memberId } = params;
if (!workspaceId || !memberId) {
const errorResponse: ErrorResponse = {
status: 400,
code: 1002,
message: '잘못된 요청입니다. 요청을 확인해주세요.',
isSuccess: false,
};
return HttpResponse.json(errorResponse, { status: 400 });
}
// 성공 응답
const response: WorkspaceResponse = {
id: parseInt(workspaceId as string, 10),
memberId: parseInt(memberId as string, 10),
title: 'Workspace 1',
content: 'Workspace for testing',
createdAt: new Date().toISOString(),
updatedAt: new Date().toISOString(),
};
return HttpResponse.json(response, { status: 200 });
}),
// GET: 프로젝트 멤버 리스트 조회 핸들러 (가상)
// 실제 구현 시 API 경로와 메서드를 확인 후 업데이트 필요
http.get('/api/projects/:projectId/members', () => {
const members: MemberResponse[] = [
{ id: 1, nickname: 'admin', profileImage: 'admin.jpg' },
{ id: 2, nickname: 'editor', profileImage: 'editor.jpg' },
{ id: 3, nickname: 'viewer', profileImage: 'viewer.jpg' },
];
return HttpResponse.json(members);
}),
// GET: 워크스페이스 멤버 리스트 조회 핸들러 (가상)
// 실제 구현 시 API 경로와 메서드를 확인 후 업데이트 필요
http.get('/api/workspaces/:workspaceId/members', () => {
const members: MemberResponse[] = [
{ id: 1, nickname: 'admin', profileImage: 'admin.jpg' },
{ id: 2, nickname: 'editor', profileImage: 'editor.jpg' },
{ id: 3, nickname: 'viewer', profileImage: 'viewer.jpg' },
];
return HttpResponse.json(members);
}),
// Folder and Image Handlers
http.get('/api/projects/:projectId/folders/:folderId', ({ params }) => {
const { folderId } = params;

15
frontend/src/pages/AdminIndex.tsx Normal file
View File

@ -0,0 +1,15 @@
import { Smile } from 'lucide-react';
export default function AdminIndex() {
return (
<div className="flex h-full w-full flex-col items-center justify-center">
<div className="flex flex-col items-center">
<Smile
size={48}
className="mb-2 text-gray-300"
/>
<div className="body text-gray-400">프로젝트를 선택하거나 생성하세요.</div>
</div>
</div>
);
}

43
frontend/src/pages/Home.tsx
View File

@ -3,7 +3,7 @@ import { Link } from 'react-router-dom';
import GoogleLogo from '@/assets/icons/web_neutral_rd_ctn@1x.png';
import useAuthStore from '@/stores/useAuthStore';
import { Button } from '@/components/ui/button';
import { getProfile, reissueToken } from '@/api/authApi';
import { getProfile } from '@/api/authApi';
const BASE_URL = import.meta.env.VITE_API_URL;
export default function Home() {
@ -17,20 +17,10 @@ export default function Home() {
hasFetchedProfile.current = true;
});
}
const handleReissueToken = async () => {
try {
const response = await reissueToken();
console.log('토큰 재발급 성공:', response);
alert('토큰 재발급 성공! 새로운 액세스 토큰을 콘솔에서 확인하세요.');
} catch (error) {
console.error('토큰 재발급 실패:', error);
alert('토큰 재발급에 실패했습니다. 다시 시도해 주세요.');
}
const handleGoogleSignIn = () => {
window.location.href = `${BASE_URL}/api/login/oauth2/authorization/google`;
};
const isHidden = true;
return (
<div className="flex h-full flex-col items-center justify-center bg-gray-50 p-8">
<div className="mb-6 max-w-xl rounded-lg bg-white p-6 shadow-lg">
@ -53,9 +43,19 @@ export default function Home() {
</div>
{!isLoggedIn ? (
<Link
to={`${BASE_URL}/api/login/oauth2/authorization/google`}
// onClick={handleGoogleSignIn}
// <Link
// to={`${BASE_URL}/api/login/oauth2/authorization/google`}
// // onClick={handleGoogleSignIn}
// className="mb-4 transition hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-gray-300 active:opacity-80"
// >
// <img
// src={GoogleLogo}
// alt="Sign in with Google"
// className="h-auto w-full"
// />
// </Link>
<button
onClick={handleGoogleSignIn}
className="mb-4 transition hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-gray-300 active:opacity-80"
>
<img
@ -63,7 +63,7 @@ export default function Home() {
alt="Sign in with Google"
className="h-auto w-full"
/>
</Link>
</button> // 404 에러 방지
) : (
<>
<Button
@ -73,15 +73,6 @@ export default function Home() {
>
<Link to="/browse">시작하기</Link>
</Button>
<Button
variant="outlinePrimary"
size="lg"
onClick={handleReissueToken}
className="mt-4"
style={{ display: isHidden ? 'none' : 'block' }}
>
리프레시 토큰 재발급 테스트
</Button>
</>
)}
</div>

10
frontend/src/queries/useProjectMembersQuery.ts Normal file
View File

@ -0,0 +1,10 @@
import { getProjectMembers } from '@/api/projectApi';
import { useSuspenseQuery } from '@tanstack/react-query';
import { ProjectMemberResponse } from '@/types';
export default function useProjectMembersQuery(projectId: number, memberId: number) {
return useSuspenseQuery<ProjectMemberResponse[]>({
queryKey: ['projectMembers', projectId, memberId],
queryFn: () => getProjectMembers(projectId, memberId),
});
}

13
frontend/src/queries/useReviewByStatusQuery.ts Normal file
View File

@ -0,0 +1,13 @@
import { getReviewByStatus } from '@/api/reviewApi';
import { useSuspenseQuery } from '@tanstack/react-query';
export default function useReviewByStatusQuery(
projectId: number,
memberId: number,
reviewStatus: 'REQUESTED' | 'APPROVED' | 'REJECTED' | undefined
) {
return useSuspenseQuery({
queryKey: ['reviewByStatus', projectId, reviewStatus],
queryFn: () => getReviewByStatus(projectId, memberId, reviewStatus),
});
}

9
frontend/src/queries/useReviewDetailQuery.ts Normal file
View File

@ -0,0 +1,9 @@
import { getReviewDetail } from '@/api/reviewApi';
import { useSuspenseQuery } from '@tanstack/react-query';
export default function useReviewDetailQuery(projectId: number, reviewId: number, memberId: number) {
return useSuspenseQuery({
queryKey: ['reviewDetail', projectId, reviewId, memberId],
queryFn: () => getReviewDetail(projectId, reviewId, memberId),
});
}

17
frontend/src/router/index.tsx
View File

@ -9,16 +9,13 @@ import ReviewList from '@/components/ReviewList';
import AdminMemberManage from '@/components/AdminMemberManage';
import OAuthCallback from '@/components/OAuthCallback';
import { createBrowserRouter } from 'react-router-dom';
import { Navigate } from 'react-router-dom';
import { Suspense } from 'react';
import WorkspaceBrowseIndex from '@/pages/WorkspaceBrowseIndex';
import AdminIndex from '@/pages/AdminIndex';
export const webPath = {
home: () => '/',
browse: () => '/browse',
workspace: () => '/workspace',
// workspace: (workspaceId: string, projectId?: string) =>
// projectId ? `/workspace/${workspaceId}/project/${projectId}` : `/workspace/${workspaceId}`,
admin: () => `/admin`,
oauthCallback: () => '/redirect/oauth2',
};
@ -73,15 +70,19 @@ const router = createBrowserRouter([
],
},
{
path: `${webPath.admin()}/:workspaceId`,
element: <AdminLayout />,
path: `${webPath.admin()}/:workspaceId/project/:projectId?`,
element: (
<Suspense fallback={<div></div>}>
<AdminLayout />
</Suspense>
),
children: [
{
index: true,
element: <Navigate to="review" />,
element: <AdminIndex />,
},
{
path: 'review',
path: 'reviews',
element: <ReviewList />,
},
{

47
frontend/src/types/index.ts
View File

@ -149,23 +149,52 @@ export interface AutoLabelingResponse {
data: string;
}
// 리뷰 요청 DTO
export interface ReviewRequest {
title: string;
content: string;
imageIds: number[];
}
// 리뷰 응답 DTO
export interface ReviewResponse {
reviewId: number;
title: string;
content: string;
status: 'REQUESTED' | 'APPROVED' | 'REJECTED';
nickname: string;
email: string;
createAt: string;
updateAt: string;
}
// 리뷰 상태 요청 DTO
export interface ReviewStatusRequest {
reviewStatus: 'REQUESTED' | 'APPROVED' | 'REJECTED';
}
// 리뷰 이미지 응답 DTO
export interface ReviewImageResponse {
id: number; // 이미지 ID
imageTitle: string; // 이미지 파일 제목
status: 'PENDING' | 'IN_PROGRESS' | 'SAVE' | 'REVIEW_REQUEST' | 'COMPLETED';
}
// 리뷰 디테일 응답 DTO
export interface ReviewDetailResponse {
reviewId: number;
title: string;
content: string;
reviewStatus: 'REQUESTED' | 'APPROVED' | 'REJECTED';
images: ReviewImageResponse[];
}
// 프로젝트 멤버 응답 DTO
export interface ProjectMemberResponse {
memberId: number;
nickname: string;
profileImage: string;
privilegeType: 'ADMIN' | 'MANAGER' | 'EDITOR' | 'VIEWER';
}
export interface FolderIdResponse {
id: number;
title: string;
@ -175,7 +204,7 @@ export interface ImageDetailResponse {
id: number;
imageTitle: string;
imageUrl: string;
data: string | null; // PENDING 상태라면 null
data: string | null;
status: 'PENDING' | 'IN_PROGRESS' | 'SAVE' | 'REVIEW_REQUEST' | 'COMPLETED';
}
@ -192,12 +221,16 @@ export interface LabelSaveRequest {
data: string;
}
export interface ReviewDetailResponse {
reviewId: number;
title: string;
content: string;
reviewStatus: 'REQUESTED' | 'APPROVED' | 'REJECTED';
images: ImageResponse[];
export interface ProjectMemberResponse {
memberId: number;
nickname: string;
profileImage: string;
privilegeType: 'ADMIN' | 'MANAGER' | 'EDITOR' | 'VIEWER';
}
export interface ProjectMemberRequest {
memberId: number;
privilegeType: 'ADMIN' | 'MANAGER' | 'EDITOR' | 'VIEWER';
}
export interface ErrorResponse {