From fc1a371f6a8d5ac74a34d6d551123e069cb30931 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=ED=99=8D=EC=B0=BD=EA=B8=B0?= <hckhong@naver.com>
Date: Fri, 4 Oct 2024 13:08:18 +0900
Subject: [PATCH 1/2] =?UTF-8?q?Refactor:=20browse=20=ED=8E=98=EC=9D=B4?=
 =?UTF-8?q?=EC=A7=80=EC=99=80=20=EB=A6=AC=EB=B7=B0=20=ED=8E=98=EC=9D=B4?=
 =?UTF-8?q?=EC=A7=80=EC=99=80=20=EB=A9=A4=EB=B2=84=20=ED=8E=98=EC=9D=B4?=
 =?UTF-8?q?=EC=A7=80=20=ED=97=A4=EB=8D=94=20=EC=97=AC=EB=B0=B1=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95,=20WorkspaceBrowseDetail=20=EB=A6=AC=ED=8C=A9?=
 =?UTF-8?q?=ED=86=A0=EB=A7=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/pages/ProjectMemberManage.tsx   |   6 +-
 frontend/src/pages/ProjectReviewList.tsx     |   2 +-
 frontend/src/pages/WorkspaceBrowseDetail.tsx | 121 ++++++++-----------
 frontend/src/pages/WorkspaceMemberManage.tsx |   6 +-
 frontend/src/pages/WorkspaceReviewList.tsx   |   2 +-
 5 files changed, 57 insertions(+), 80 deletions(-)

diff --git a/frontend/src/pages/ProjectMemberManage.tsx b/frontend/src/pages/ProjectMemberManage.tsx
index bb471fd..2ad257d 100644
--- a/frontend/src/pages/ProjectMemberManage.tsx
+++ b/frontend/src/pages/ProjectMemberManage.tsx
@@ -89,13 +89,13 @@ export default function ProjectMemberManage() {
 
   return (
     <div className="grid w-full">
-      <div className="flex flex-col">
-        <header className="bg-background flex h-16 items-center gap-4 px-4">
+      <div className="flex flex-col gap-4 p-4">
+        <header className="bg-background flex items-center">
           <h1 className="heading flex-1">프로젝트 멤버 관리</h1>
           {isAdminOrManager && <MemberAddModal projectId={projectId ? Number(projectId) : 0} />}
         </header>
 
-        <main className="grid flex-1 gap-4 overflow-auto px-4 pb-4">
+        <main className="grid flex-1 gap-4 overflow-auto">
           {sortedMembers.length === 0 ? (
             <div className="py-4 text-center">프로젝트에 멤버가 없습니다.</div>
           ) : (
diff --git a/frontend/src/pages/ProjectReviewList.tsx b/frontend/src/pages/ProjectReviewList.tsx
index b0e8d2c..941cede 100644
--- a/frontend/src/pages/ProjectReviewList.tsx
+++ b/frontend/src/pages/ProjectReviewList.tsx
@@ -60,7 +60,7 @@ export default function ProjectReviewList() {
   return (
     <Suspense fallback={<div></div>}>
       <div>
-        <header className="sticky top-0 z-10 flex h-16 items-center gap-1 border-b border-gray-200 bg-white px-4">
+        <header className="flex items-center border-b border-gray-200 bg-white p-4">
           <h1 className="heading">프로젝트 리뷰</h1>
           <Link
             to={`/review/${workspaceId}/request`}
diff --git a/frontend/src/pages/WorkspaceBrowseDetail.tsx b/frontend/src/pages/WorkspaceBrowseDetail.tsx
index 0ef2ecc..e49be97 100644
--- a/frontend/src/pages/WorkspaceBrowseDetail.tsx
+++ b/frontend/src/pages/WorkspaceBrowseDetail.tsx
@@ -29,81 +29,58 @@ export default function WorkspaceBrowseDetail() {
   };
 
   return (
-    <div className="flex h-full w-full flex-col">
-      <HeaderSection
-        workspaceName={workspaceData?.title ?? `Workspace-${workspaceId}`}
-        onCreateProject={handleCreateProject}
-      />
+    <div className="flex h-full w-full flex-col gap-4 p-4">
+      <div className="flex w-full flex-col gap-2">
+        <div className="flex items-center justify-center">
+          <h1 className="heading flex grow">{workspaceData?.title ?? `Workspace-${workspaceId}`}</h1>
+          <div className="flex flex-col">
+            <ProjectCreateModal
+              buttonClass="flex items-center gap-2 h-10 px-4 py-2"
+              onSubmit={handleCreateProject}
+            />
+          </div>
+        </div>
+        {workspaceData && (
+          <div className="flex items-center">
+            <p className="body">{workspaceData.content ?? '프로젝트에 대한 설명이 없습니다.'}</p>
+          </div>
+        )}
+      </div>
       {isNaN(workspaceId) || isError || !workspaceId ? (
-        <EmptyStateMessage workspaceId={workspaceId} />
+        <div className="flex h-full w-full flex-col items-center justify-center">
+          <Smile
+            size={48}
+            className="mb-2 text-gray-300"
+          />
+          <div className="body-strong text-gray-400">
+            {!workspaceId ? '작업할 워크스페이스를 선택하세요.' : '작업할 프로젝트가 없습니다.'}
+          </div>
+        </div>
       ) : (
-        <ProjectList
-          projects={projects}
-          workspaceId={workspaceId}
-        />
+        <>
+          {projects.length === 0 ? (
+            <div className="flex h-full w-full flex-col items-center justify-center">
+              <Smile
+                size={48}
+                className="mb-2 text-gray-300"
+              />
+              <div className="body-strong text-gray-400">작업할 프로젝트가 없습니다.</div>
+            </div>
+          ) : (
+            <div className="flex flex-wrap gap-6">
+              {projects.map((project: ProjectResponse) => (
+                <ProjectCard
+                  key={project.id}
+                  title={project.title}
+                  to={`${webPath.workspace()}/${workspaceId}/${project.id}`}
+                  description={project.projectType}
+                  imageUrl={project.thumbnail}
+                />
+              ))}
+            </div>
+          )}
+        </>
       )}
     </div>
   );
 }
-
-function HeaderSection({
-  workspaceName,
-  onCreateProject,
-}: {
-  workspaceName: string;
-  onCreateProject: (data: ProjectRequest) => void;
-}) {
-  return (
-    <div className="flex h-16 items-center justify-center px-4">
-      <h1 className="heading flex grow">{workspaceName}</h1>
-      <div className="flex flex-col">
-        <ProjectCreateModal
-          buttonClass="flex items-center gap-2 h-10 px-4 py-2"
-          onSubmit={onCreateProject}
-        />
-      </div>
-    </div>
-  );
-}
-
-function EmptyStateMessage({ workspaceId }: { workspaceId: number }) {
-  return (
-    <div className="flex h-full w-full flex-col items-center justify-center">
-      <Smile
-        size={48}
-        className="mb-2 text-gray-300"
-      />
-      <div className="body-strong text-gray-400">
-        {!workspaceId ? '작업할 워크스페이스를 선택하세요.' : '작업할 프로젝트가 없습니다.'}
-      </div>
-    </div>
-  );
-}
-
-function ProjectList({ projects, workspaceId }: { projects: ProjectResponse[]; workspaceId: number }) {
-  if (projects.length === 0) {
-    return (
-      <div className="flex h-full w-full flex-col items-center justify-center">
-        <Smile
-          size={48}
-          className="mb-2 text-gray-300"
-        />
-        <div className="body-strong text-gray-400">작업할 프로젝트가 없습니다.</div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="flex flex-wrap gap-6 px-4 pb-4">
-      {projects.map((project: ProjectResponse) => (
-        <ProjectCard
-          key={project.id}
-          title={project.title}
-          to={`${webPath.workspace()}/${workspaceId}/${project.id}`}
-          description={project.projectType}
-          imageUrl={project.thumbnail}
-        />
-      ))}
-    </div>
-  );
-}
diff --git a/frontend/src/pages/WorkspaceMemberManage.tsx b/frontend/src/pages/WorkspaceMemberManage.tsx
index 467b31c..016fd25 100644
--- a/frontend/src/pages/WorkspaceMemberManage.tsx
+++ b/frontend/src/pages/WorkspaceMemberManage.tsx
@@ -12,8 +12,8 @@ export default function WorkspaceMemberManage() {
 
   return (
     <div className="grid w-full">
-      <div className="flex flex-col">
-        <header className="bg-background flex h-16 items-center gap-4 px-4">
+      <div className="flex flex-col gap-4 p-4">
+        <header className="bg-background flex items-center">
           <h1 className="heading flex-1">워크스페이스 멤버 관리</h1>
 
           <WorkspaceMemberAddModal
@@ -22,7 +22,7 @@ export default function WorkspaceMemberManage() {
           />
         </header>
 
-        <main className="flex-1 overflow-auto px-4 pb-4">
+        <main className="flex-1 overflow-auto">
           {members.length === 0 ? (
             <div className="py-4 text-center">워크스페이스에 멤버가 없습니다.</div>
           ) : (
diff --git a/frontend/src/pages/WorkspaceReviewList.tsx b/frontend/src/pages/WorkspaceReviewList.tsx
index bc14e38..9cb45d1 100644
--- a/frontend/src/pages/WorkspaceReviewList.tsx
+++ b/frontend/src/pages/WorkspaceReviewList.tsx
@@ -60,7 +60,7 @@ export default function WorkspaceReviewList() {
   return (
     <Suspense fallback={<div></div>}>
       <div>
-        <header className="sticky top-0 z-10 flex h-16 items-center gap-1 border-b border-gray-200 bg-white px-4">
+        <header className="flex items-center border-b border-gray-200 bg-white p-4">
           <h1 className="heading">워크스페이스 리뷰</h1>
           <Link
             to={`/review/${workspaceId}/request`}

From e8dc0c8d7ec0dd86b402a0e0a663c319f4e57a9d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=ED=99=8D=EC=B0=BD=EA=B8=B0?= <hckhong@naver.com>
Date: Fri, 4 Oct 2024 13:19:37 +0900
Subject: [PATCH 2/2] =?UTF-8?q?Refactor:=20=ED=97=A4=EB=8D=94=EC=97=90?=
 =?UTF-8?q?=EC=84=9C=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=9D=B4=EB=8F=99=20?=
 =?UTF-8?q?=EC=8B=9C=20=ED=98=84=EC=9E=AC=20=ED=94=84=EB=A1=9C=EC=A0=9D?=
 =?UTF-8?q?=ED=8A=B8=20=EC=9C=A0=EC=A7=80=ED=95=98=EB=A9=B4=EC=84=9C=20?=
 =?UTF-8?q?=EC=9D=B4=EB=8F=99=ED=95=98=EB=8F=84=EB=A1=9D=20=EC=B2=98?=
 =?UTF-8?q?=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/Header/WorkspaceNavigation.tsx | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/Header/WorkspaceNavigation.tsx b/frontend/src/components/Header/WorkspaceNavigation.tsx
index 21e4a1d..80df23e 100644
--- a/frontend/src/components/Header/WorkspaceNavigation.tsx
+++ b/frontend/src/components/Header/WorkspaceNavigation.tsx
@@ -19,6 +19,7 @@ export default function WorkspaceNavigation() {
   const workspaces = workspacesResponse?.workspaceResponses || [];
 
   const activeWorkspaceId = workspaceId ?? workspaces[0]?.id;
+  const activeProjectId: number = Number(location.pathname.split('/')[3] || '0');
 
   if (workspaces.length === 0) {
     return <div></div>;
@@ -35,25 +36,35 @@ export default function WorkspaceNavigation() {
       {activeWorkspaceId && (
         <>
           <Link
-            to={`/workspace/${activeWorkspaceId}`}
+            to={
+              activeProjectId === 0
+                ? `/workspace/${activeWorkspaceId}`
+                : `/workspace/${activeWorkspaceId}/${activeProjectId}`
+            }
             className={isWorkspacePage ? 'body-strong' : 'body'}
           >
             labeling
           </Link>
           <Link
-            to={`/review/${activeWorkspaceId}`}
+            to={
+              activeProjectId === 0 ? `/review/${activeWorkspaceId}` : `/review/${activeWorkspaceId}/${activeProjectId}`
+            }
             className={isReviewPage ? 'body-strong' : 'body'}
           >
             review
           </Link>
           <Link
-            to={`/model/${activeWorkspaceId}`}
+            to={
+              activeProjectId === 0 ? `/model/${activeWorkspaceId}` : `/model/${activeWorkspaceId}/${activeProjectId}`
+            }
             className={isModelPage ? 'body-strong' : 'body'}
           >
             model
           </Link>
           <Link
-            to={`/member/${activeWorkspaceId}`}
+            to={
+              activeProjectId === 0 ? `/member/${activeWorkspaceId}` : `/member/${activeWorkspaceId}/${activeProjectId}`
+            }
             className={isMemberPage ? 'body-strong' : 'body'}
           >
             member