Refactor: 리뷰 탭 분리

2024-10-02 20:17:28 +09:00 · 2024-10-02 20:17:28 +09:00 · 474674ba93
commit 474674ba93
parent f11e8d91d6
15 changed files with 122 additions and 71 deletions
--- a/frontend/src/components/AdminMenuSidebar/index.tsx
+++ b/frontend/src/components/AdminMenuSidebar/index.tsx
@ -6,10 +6,6 @@ export default function AdminMenuSidebar() {
  const { workspaceId, projectId } = useParams<{ workspaceId: string; projectId?: string }>();

  const menuItems = [
-    {
-      label: '리뷰',
-      path: projectId ? `/admin/${workspaceId}/reviews/${projectId}` : `/admin/${workspaceId}/reviews`,
-    },
    {
      label: '멤버 관리',
      path: projectId ? `/admin/${workspaceId}/members/${projectId}` : `/admin/${workspaceId}/members`,
--- a/frontend/src/components/AdminProjectSidebar/index.tsx
+++ b/frontend/src/components/AdminProjectSidebar/index.tsx
@ -2,11 +2,8 @@ import { ResizablePanel, ResizableHandle } from '../ui/resizable';
 import { Link, useLocation, useParams } from 'react-router-dom';
 import { SquarePen } from 'lucide-react';
 import useProjectListQuery from '@/queries/projects/useProjectListQuery';
-import useCreateProjectQuery from '@/queries/projects/useCreateProjectQuery';
 import useWorkspaceQuery from '@/queries/workspaces/useWorkspaceQuery';
-import { ProjectRequest } from '@/types';
 import useAuthStore from '@/stores/useAuthStore';
-import ProjectCreateModal from '../ProjectCreateModal';
 import { cn } from '@/lib/utils';

 export default function AdminProjectSidebar(): JSX.Element {
@ -20,20 +17,7 @@ export default function AdminProjectSidebar(): JSX.Element {

  const { data: projects } = useProjectListQuery(Number(workspaceId), memberId);

-  const createProject = useCreateProjectQuery();
-
-  const handleCreateProject = (data: ProjectRequest) => {
-    createProject.mutate({
-      workspaceId: Number(workspaceId),
-      memberId,
-      data,
-    });
-  };
-
  const getNewPath = (newProjectId: string) => {
-    if (location.pathname.includes('reviews')) {
-      return `/admin/${workspaceId}/reviews/${newProjectId}`;
-    }
    if (location.pathname.includes('members')) {
      return `/admin/${workspaceId}/members/${newProjectId}`;
    }
@ -64,10 +48,6 @@ export default function AdminProjectSidebar(): JSX.Element {
          <button className="p-2">
            <SquarePen size={16} />
          </button>
-          <ProjectCreateModal
-            buttonClass="caption"
-            onSubmit={handleCreateProject}
-          />
        </header>
        <div className="flex flex-col gap-2 p-4">
          {projects.map((project) => {
--- a/frontend/src/components/Header/WorkspaceNavigation.tsx
+++ b/frontend/src/components/Header/WorkspaceNavigation.tsx
@ -1,9 +1,15 @@
 import { cn } from '@/lib/utils';
-import { Link, useParams } from 'react-router-dom';
+import { Link, useLocation, useParams } from 'react-router-dom';
 import useAuthStore from '@/stores/useAuthStore';
 import useWorkspaceListQuery from '@/queries/workspaces/useWorkspaceListQuery';

 export default function WorkspaceNavigation() {
+  const location = useLocation();
+  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 { workspaceId } = useParams<{ workspaceId: string }>();
  const profile = useAuthStore((state) => state.profile);
  const memberId = profile?.id;
@ -21,7 +27,7 @@ export default function WorkspaceNavigation() {
    <nav className="hidden items-center gap-5 md:flex">
      <Link
        to={activeWorkspaceId ? `/browse/${activeWorkspaceId}` : '/browse'}
-        className={cn('text-color-text-default-default', 'font-body-strong', 'text-sm sm:text-base md:text-lg')}
+        className={cn('', isBrowsePage ? 'body-strong' : 'body')}
      >
        workspace
      </Link>
@ -29,13 +35,19 @@ export default function WorkspaceNavigation() {
        <>
          <Link
            to={`/workspace/${activeWorkspaceId}`}
-            className={cn('text-color-text-default-default', 'font-body', 'text-sm sm:text-base md:text-lg')}
+            className={cn('', isWorkspacePage ? 'body-strong' : 'body')}
          >
            labeling
          </Link>
+          <Link
+            to={`/review/${activeWorkspaceId}`}
+            className={cn('', isReviewPage ? 'body-strong' : 'body')}
+          >
+            review
+          </Link>
          <Link
            to={`/admin/${activeWorkspaceId}`}
-            className={cn('text-color-text-default-default', 'font-body', 'text-sm sm:text-base md:text-lg')}
+            className={cn('', isAdminPage ? 'body-strong' : 'body')}
          >
            admin
          </Link>
--- a/frontend/src/components/MemberAddModal/index.tsx
+++ b/frontend/src/components/MemberAddModal/index.tsx
@ -2,7 +2,6 @@ import React from 'react';
 import MemberAddForm, { MemberAddFormValues } from './MemberAddForm';
 import { Dialog, DialogContent, DialogHeader, DialogTrigger } from '../ui/dialogCustom';
 import { Button } from '@/components/ui/button';
-import { Plus } from 'lucide-react';
 import useAddProjectMemberQuery from '@/queries/projects/useAddProjectMemberQuery';
 import { ProjectMemberRequest } from '@/types';

@ -42,12 +41,11 @@ export default function MemberAddModal({ projectId, buttonClass = '' }: MemberAd
          className={`${buttonClass}`}
          onClick={handleOpen}
        >
-          <Plus size={16} />
-          <span>프로젝트 멤버 초대하기</span>
+          <span>프로젝트에 새 멤버 초대</span>
        </Button>
      </DialogTrigger>
      <DialogContent>
-        <DialogHeader title="새 멤버 초대" />
+        <DialogHeader title="프로젝트에 새 멤버 초대" />
        <MemberAddForm onSubmit={handleMemberAdd} />
      </DialogContent>
    </Dialog>
--- a/frontend/src/components/ReviewLayout/index.tsx
+++ b/frontend/src/components/ReviewLayout/index.tsx
@ -0,0 +1,57 @@
+import { Link, Outlet, useParams } from 'react-router-dom';
+import Header from '../Header';
+import useAuthStore from '@/stores/useAuthStore';
+import useWorkspaceQuery from '@/queries/workspaces/useWorkspaceQuery';
+import useProjectListQuery from '@/queries/projects/useProjectListQuery';
+import { cn } from '@/lib/utils';
+import { ProjectResponse } from '@/types';
+
+export default function ReviewLayout() {
+  const { workspaceId, projectId } = useParams<{ workspaceId: string; projectId?: string }>();
+  const profile = useAuthStore((state) => state.profile);
+  const memberId = profile?.id || 0;
+
+  const { data: workspaceData } = useWorkspaceQuery(Number(workspaceId), memberId);
+  const workspaceTitle = workspaceData?.title || `Workspace-${workspaceId}`;
+
+  const { data: projects } = useProjectListQuery(Number(workspaceId), memberId);
+
+  return (
+    <>
+      <Header className="fixed left-0 top-0 w-full" />
+
+      <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">
+              <Link
+                to={`/review/${workspaceId}`}
+                className="heading w-full overflow-hidden text-ellipsis whitespace-nowrap"
+              >
+                {workspaceTitle}
+              </Link>
+            </div>
+            {projects.map((project: ProjectResponse) => (
+              <Link
+                key={project.id}
+                to={`/review/${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 className="flex w-[calc(100%-280px)] flex-col gap-24">
+            <main className="h-full grow overflow-y-auto">
+              <Outlet />
+            </main>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
--- a/frontend/src/components/ReviewList/ReviewItem.tsx
+++ b/frontend/src/components/ReviewList/ReviewItem.tsx
@ -42,7 +42,7 @@ export default function ReviewItem({

  return (
    <Link
-      to={`/admin/${workspaceId}/reviews/${projectId}/${reviewId}`}
+      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">
--- a/frontend/src/components/WorkspaceBrowseLayout/index.tsx
+++ b/frontend/src/components/WorkspaceBrowseLayout/index.tsx
@ -6,6 +6,7 @@ import WorkSpaceCreateModal from '../WorkSpaceCreateModal';
 import { WorkspaceRequest, WorkspaceResponse } from '@/types';
 import useWorkspaceListQuery from '@/queries/workspaces/useWorkspaceListQuery';
 import useCreateWorkspaceQuery from '@/queries/workspaces/useCreateWorkspaceQuery';
+import { cn } from '@/lib/utils';

 export default function WorkspaceBrowseLayout() {
  const { profile } = useAuthStore();
@ -33,19 +34,22 @@ export default function WorkspaceBrowseLayout() {
  return (
    <>
      <Header className="fixed left-0 top-0 w-full" />
+
      <div className="flex min-h-screen flex-col justify-between">
        <div className="mt-16 flex flex-1">
-          <div className="flex w-[280px] flex-col gap-4 border-r border-gray-200 bg-gray-100 px-6 py-4">
-            <div className="flex items-center justify-center gap-5">
-              <h1 className="heading mr-2.5 w-full">내 워크스페이스</h1>
+          <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>
              <WorkSpaceCreateModal onSubmit={handleCreateWorkspace} />
            </div>
            {workspaces.length > 0 ? (
              workspaces.map((workspace: WorkspaceResponse) => (
                <NavLink
-                  to={`/browse/${workspace.id}`}
                  key={workspace.id}
-                  className={({ isActive }) => (isActive ? 'body-strong' : 'body') + ' cursor-pointer'}
+                  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>
--- a/frontend/src/components/WorkspaceMemberAddModal/index.tsx
+++ b/frontend/src/components/WorkspaceMemberAddModal/index.tsx
@ -2,7 +2,6 @@ import React from 'react';
 import MemberAddForm, { MemberAddFormValues } from './MemberAddForm';
 import { Dialog, DialogContent, DialogHeader, DialogTrigger } from '../ui/dialogCustom';
 import { Button } from '@/components/ui/button';
-import { Plus } from 'lucide-react';
 import useAddWorkspaceMemberQuery from '@/queries/workspaces/useAddWorkspaceMemberQuery';

 interface WorkspaceMemberAddModalProps {
@ -42,12 +41,11 @@ export default function WorkspaceMemberAddModal({
          className={`${buttonClass}`}
          onClick={handleOpen}
        >
-          <Plus size={16} />
-          <span>워크스페이스 멤버 초대하기</span>
+          <span>워크스페이스에 새 멤버 초대</span>
        </Button>
      </DialogTrigger>
      <DialogContent>
-        <DialogHeader title="새 워크스페이스 멤버 초대" />
+        <DialogHeader title="워크스페이스에 새 멤버 초대" />
        <MemberAddForm onSubmit={handleSubmit} />
      </DialogContent>
    </Dialog>
--- a/frontend/src/hooks/useReviewRequest.ts
+++ b/frontend/src/hooks/useReviewRequest.ts
@ -39,7 +39,7 @@ export default function useReviewRequest() {
      },
      {
        onSuccess: () => {
-          navigate(`/admin/${workspaceId}/reviews`);
+          navigate(`/review/${workspaceId}`);
        },
      }
    );
--- a/frontend/src/pages/AdminIndex.tsx
+++ b/frontend/src/pages/AdminIndex.tsx
@ -7,7 +7,7 @@ export default function AdminIndex() {

  useEffect(() => {
    if (workspaceId) {
-      navigate(`/admin/${workspaceId}/reviews`);
+      navigate(`/admin/${workspaceId}/members`);
    }
  }, [navigate, workspaceId]);

--- a/frontend/src/pages/ProjectReviewList.tsx
+++ b/frontend/src/pages/ProjectReviewList.tsx
@ -63,12 +63,13 @@ export default function ProjectReviewList() {
        <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>
          <Link
-            to={`/admin/${workspaceId}/reviews/request`}
+            to={`/review/${workspaceId}/request`}
            className="ml-auto"
          >
            <Button variant="blue">리뷰 요청</Button>
          </Link>
        </header>
+
        <ReviewList
          key={`${sortValue}-${activeTab}`}
          reviews={projectReviews}
--- a/frontend/src/pages/ReviewDetail.tsx
+++ b/frontend/src/pages/ReviewDetail.tsx
@ -153,7 +153,7 @@ export default function ReviewDetail(): JSX.Element {
      </div>

      <div className="mt-6 flex justify-end gap-2">
-        <Link to={`/admin/${workspaceId}/reviews`}>
+        <Link to={`/review/${workspaceId}`}>
          <Button variant="black">목록으로 돌아가기</Button>
        </Link>
        {isAdminOrManager && reviewDetail.reviewStatus !== 'APPROVED' && reviewDetail.reviewStatus !== 'REJECTED' && (
--- a/frontend/src/pages/ReviewRequest.tsx
+++ b/frontend/src/pages/ReviewRequest.tsx
@ -28,7 +28,7 @@ export default function ReviewRequest(): JSX.Element {
        reviewData,
      },
      {
-        onSuccess: () => navigate(`/admin/${workspaceId}/reviews`),
+        onSuccess: () => navigate(`/review/${workspaceId}`),
      }
    );
  };
--- a/frontend/src/pages/WorkspaceReviewList.tsx
+++ b/frontend/src/pages/WorkspaceReviewList.tsx
@ -63,7 +63,7 @@ export default function WorkspaceReviewList() {
        <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>
          <Link
-            to={`/admin/${workspaceId}/reviews/request`}
+            to={`/review/${workspaceId}/request`}
            className="ml-auto"
          >
            <Button variant="blue">리뷰 요청</Button>
@ -80,9 +80,7 @@ export default function WorkspaceReviewList() {
          setSortValue={setSortValue}
          workspaceId={Number(workspaceId)}
        />
-
        {isFetchingNextPage}
-
        <div
          ref={loadMoreRef}
          className="h-1"
--- a/frontend/src/router/index.tsx
+++ b/frontend/src/router/index.tsx
@ -20,11 +20,13 @@ 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';

 export const webPath = {
  home: () => '/',
  browse: () => '/browse',
  workspace: () => '/workspace',
+  review: () => '/review',
  admin: () => `/admin`,
  oauthCallback: () => '/redirect/oauth2',
 };
@ -80,6 +82,32 @@ const router = createBrowserRouter([
      },
    ],
  },
+  {
+    path: `${webPath.review()}/:workspaceId`,
+    element: (
+      <Suspense fallback={<div></div>}>
+        <ReviewLayout />
+      </Suspense>
+    ),
+    children: [
+      {
+        index: true,
+        element: <WorkspaceReviewList />,
+      },
+      {
+        path: 'request',
+        element: <ReviewRequest />,
+      },
+      {
+        path: ':projectId',
+        element: <ProjectReviewList />,
+      },
+      {
+        path: ':projectId/:reviewId',
+        element: <ReviewDetail />,
+      },
+    ],
+  },
  {
    path: `${webPath.admin()}/:workspaceId`,
    element: (
@ -92,27 +120,6 @@ const router = createBrowserRouter([
        index: true,
        element: <AdminIndex />,
      },
-      {
-        path: 'reviews',
-        children: [
-          {
-            index: true,
-            element: <WorkspaceReviewList />,
-          },
-          {
-            path: 'request',
-            element: <ReviewRequest />,
-          },
-          {
-            path: ':projectId',
-            element: <ProjectReviewList />,
-          },
-          {
-            path: ':projectId/:reviewId',
-            element: <ReviewDetail />,
-          },
-        ],
-      },
      {
        path: 'members',
        children: [