Merge branch 'fe/refactor/improve-design' into 'fe/develop'

Refactor: API 잘못된 parameter 값 수정, admin 탭 제거하고 model 탭과 member 탭으로 분리 - S11P21S002-251

See merge request s11-s-project/S11P21S002!271

frontend/src/api/projectApi.ts

@@ -5,14 +5,14 @@ export async function getProjectList(
   workspaceId: number,
   memberId: number,
   lastProjectId?: number,
-  limit: number = 50
+  limitPage: number = 50
 ) {
   return api
     .get<ProjectResponse[]>(`/workspaces/${workspaceId}/projects`, {
       params: {
         memberId,
         lastProjectId,
-        limit,
+        limitPage,
       },
     })
     .then(({ data }) => data);

frontend/src/api/workspaceApi.ts

@@ -8,10 +8,10 @@ import {
   ReviewStatus,
 } from '@/types';
 
-export async function getWorkspaceList(memberId: number, lastWorkspaceId?: number, limit?: number) {
+export async function getWorkspaceList(memberId: number, lastWorkspaceId?: number, limitPage: number = 30) {
   return api
     .get<WorkspaceListResponse>('/workspaces', {
-      params: { memberId, lastWorkspaceId, limit },
+      params: { memberId, lastWorkspaceId, limitPage },
     })
     .then(({ data }) => data);
 }

frontend/src/components/AdminLayout/index.tsx

@@ -1,25 +0,0 @@
-import { Outlet } from 'react-router-dom';
-import Header from '../Header';
-import { ResizablePanelGroup, ResizablePanel } from '../ui/resizable';
-import AdminProjectSidebar from '../AdminProjectSidebar';
-import AdminMenuSidebar from '../AdminMenuSidebar';
-
-export default function AdminLayout() {
-  return (
-    <>
-      <Header className="fixed left-0 top-0" />
-      <div className="mt-16 h-[calc(100vh-64px)] w-screen">
-        <ResizablePanelGroup direction="horizontal">
-          <AdminProjectSidebar />
-
-          <ResizablePanel className="flex w-full items-center">
-            <main className="h-full grow overflow-y-auto">
-              <Outlet />
-            </main>
-          </ResizablePanel>
-          <AdminMenuSidebar />
-        </ResizablePanelGroup>
-      </div>
-    </>
-  );
-}

frontend/src/components/Header/WorkspaceNavigation.tsx

@@ -8,7 +8,8 @@ export default function WorkspaceNavigation() {
   const isBrowsePage = location.pathname.startsWith('/browse');
   const isWorkspacePage = location.pathname.startsWith('/workspace');
   const isReviewPage = location.pathname.startsWith('/review');
-  const isAdminPage = location.pathname.startsWith('/admin');
+  const isModelPage = location.pathname.startsWith('/model');
+  const isMemberPage = location.pathname.startsWith('/member');
 
   const { workspaceId } = useParams<{ workspaceId: string }>();
   const profile = useAuthStore((state) => state.profile);
@@ -35,21 +36,27 @@ export default function WorkspaceNavigation() {
         <>
           <Link
             to={`/workspace/${activeWorkspaceId}`}
-            className={cn('', isWorkspacePage ? 'body-strong' : 'body')}
+            className={isWorkspacePage ? 'body-strong' : 'body'}
           >
             labeling
           </Link>
           <Link
             to={`/review/${activeWorkspaceId}`}
-            className={cn('', isReviewPage ? 'body-strong' : 'body')}
+            className={isReviewPage ? 'body-strong' : 'body'}
           >
             review
           </Link>
           <Link
-            to={`/admin/${activeWorkspaceId}`}
-            className={cn('', isAdminPage ? 'body-strong' : 'body')}
+            to={`/model/${activeWorkspaceId}`}
+            className={isModelPage ? 'body-strong' : 'body'}
           >
-            admin
+            model
+          </Link>
+          <Link
+            to={`/member/${activeWorkspaceId}`}
+            className={isMemberPage ? 'body-strong' : 'body'}
+          >
+            member
           </Link>
         </>
       )}

frontend/src/components/ManageLayout/index.tsx

@@ -6,7 +6,7 @@ import useProjectListQuery from '@/queries/projects/useProjectListQuery';
 import { cn } from '@/lib/utils';
 import { ProjectResponse } from '@/types';
 
-export default function ReviewLayout() {
+export default function ManageLayout({ tabTitle }: { tabTitle: string }) {
   const { workspaceId, projectId } = useParams<{ workspaceId: string; projectId?: string }>();
   const profile = useAuthStore((state) => state.profile);
   const memberId = profile?.id || 0;
@@ -25,8 +25,8 @@ export default function ReviewLayout() {
           <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">
               <Link
-                to={`/review/${workspaceId}`}
-                className="heading w-full overflow-hidden text-ellipsis whitespace-nowrap"
+                to={`/${tabTitle}/${workspaceId}`}
+                className="subheading w-full overflow-hidden text-ellipsis whitespace-nowrap"
               >
                 {workspaceTitle}
               </Link>
@@ -34,7 +34,7 @@ export default function ReviewLayout() {
             {projects.map((project: ProjectResponse) => (
               <Link
                 key={project.id}
-                to={`/review/${workspaceId}/${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'

frontend/src/components/WorkspaceBrowseLayout/index.tsx

@@ -30,6 +30,7 @@ export default function WorkspaceBrowseLayout() {
   };
 
   const workspaces = workspacesResponse?.workspaceResponses ?? [];
+  console.log(workspaces);
 
   return (
     <>
@@ -39,7 +40,9 @@ export default function WorkspaceBrowseLayout() {
         <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="heading mr-2.5 w-full overflow-hidden text-ellipsis whitespace-nowrap">내 워크스페이스</h1>
+              <h1 className="subheading mr-2.5 w-full overflow-hidden text-ellipsis whitespace-nowrap">
+                내 워크스페이스
+              </h1>
               <WorkSpaceCreateModal onSubmit={handleCreateWorkspace} />
             </div>
             {workspaces.length > 0 ? (

frontend/src/components/WorkspaceSidebar/index.tsx

@@ -32,28 +32,28 @@ export default function WorkspaceSidebar({ workspaceName, projects }: { workspac
         defaultSize={15}
         onResize={(size) => setSidebarSize(size)}
       >
-        <div className="box-border flex h-full flex-col gap-2 bg-gray-50 p-3">
-          <header className="body flex w-full items-center gap-2">
+        <div className="box-border flex h-full flex-col gap-2 bg-gray-100 p-2">
+          <header className="body flex w-full flex-col items-center gap-2 p-2">
             <h1 className="subheading w-full overflow-hidden text-ellipsis whitespace-nowrap">{workspaceName}</h1>
+            <Select
+              onValueChange={handleSelectProject}
+              defaultValue={selectedProjectId}
+            >
+              <SelectTrigger>
+                <SelectValue placeholder="프로젝트를 선택해주세요" />
+              </SelectTrigger>
+              <SelectContent>
+                {projects.map((project) => (
+                  <SelectItem
+                    key={project.id}
+                    value={project.id.toString()}
+                  >
+                    {project.name}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
           </header>
-          <Select
-            onValueChange={handleSelectProject}
-            defaultValue={selectedProjectId}
-          >
-            <SelectTrigger>
-              <SelectValue placeholder="프로젝트를 선택해주세요" />
-            </SelectTrigger>
-            <SelectContent>
-              {projects.map((project) => (
-                <SelectItem
-                  key={project.id}
-                  value={project.id.toString()}
-                >
-                  {project.name}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
           <Suspense fallback={<div></div>}>
             {selectedProject && <ProjectStructure project={selectedProject} />}
           </Suspense>

frontend/src/pages/AdminIndex.tsx

@@ -1,15 +0,0 @@
-import { useEffect } from 'react';
-import { useNavigate, useParams } from 'react-router-dom';
-
-export default function AdminIndex() {
-  const navigate = useNavigate();
-  const { workspaceId } = useParams<{ workspaceId: string }>();
-
-  useEffect(() => {
-    if (workspaceId) {
-      navigate(`/admin/${workspaceId}/members`);
-    }
-  }, [navigate, workspaceId]);
-
-  return null;
-}

frontend/src/router/index.tsx

@@ -3,7 +3,6 @@ import PageLayout from '@/components/PageLayout';
 import WorkspaceBrowseDetail from '@/pages/WorkspaceBrowseDetail';
 import WorkspaceBrowseLayout from '@/components/WorkspaceBrowseLayout';
 import WorkspaceLayout from '@/components/WorkspaceLayout';
-import AdminLayout from '@/components/AdminLayout';
 import WorkspaceReviewList from '@/pages/WorkspaceReviewList';
 import ProjectReviewList from '@/pages/ProjectReviewList';
 import WorkspaceMemberManage from '@/pages/WorkspaceMemberManage';
@@ -13,21 +12,21 @@ import { createBrowserRouter } from 'react-router-dom';
 import { Suspense } from 'react';
 import Home from '@/pages/Home';
 import WorkspaceBrowseIndex from '@/pages/WorkspaceBrowseIndex';
-import AdminIndex from '@/pages/AdminIndex';
 import LabelCanvas from '@/pages/LabelCanvas';
 import ReviewDetail from '@/pages/ReviewDetail';
 import NotFound from '@/pages/NotFound';
 import ReviewRequest from '@/pages/ReviewRequest';
 import ModelIndex from '@/pages/ModelIndex';
 import ModelDetail from '@/pages/ModelDetail';
-import ReviewLayout from '@/components/ReviewLayout';
+import ManageLayout from '@/components/ManageLayout';
 
 export const webPath = {
   home: () => '/',
   browse: () => '/browse',
   workspace: () => '/workspace',
   review: () => '/review',
-  admin: () => `/admin`,
+  model: () => '/model',
+  member: () => '/member',
   oauthCallback: () => '/redirect/oauth2',
 };
 
@@ -86,7 +85,7 @@ const router = createBrowserRouter([
     path: `${webPath.review()}/:workspaceId`,
     element: (
       <Suspense fallback={<div></div>}>
-        <ReviewLayout />
+        <ManageLayout tabTitle="review" />
       </Suspense>
     ),
     children: [
@@ -109,42 +108,38 @@ const router = createBrowserRouter([
     ],
   },
   {
-    path: `${webPath.admin()}/:workspaceId`,
+    path: `${webPath.model()}/:workspaceId`,
     element: (
       <Suspense fallback={<div></div>}>
-        <AdminLayout />
+        <ManageLayout tabTitle="model" />
       </Suspense>
     ),
     children: [
       {
         index: true,
-        element: <AdminIndex />,
+        element: <ModelIndex />,
       },
       {
-        path: 'members',
-        children: [
-          {
-            index: true,
-            element: <WorkspaceMemberManage />,
-          },
-          {
-            path: ':projectId',
-            element: <ProjectMemberManage />,
-          },
-        ],
+        path: ':projectId',
+        element: <ModelDetail />,
+      },
+    ],
+  },
+  {
+    path: `${webPath.member()}/:workspaceId`,
+    element: (
+      <Suspense fallback={<div></div>}>
+        <ManageLayout tabTitle="member" />
+      </Suspense>
+    ),
+    children: [
+      {
+        index: true,
+        element: <WorkspaceMemberManage />,
       },
       {
-        path: 'models',
-        children: [
-          {
-            index: true,
-            element: <ModelIndex />,
-          },
-          {
-            path: ':projectId',
-            element: <ModelDetail />,
-          },
-        ],
+        path: ':projectId',
+        element: <ProjectMemberManage />,
       },
     ],
   },