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

Refactor: 페이지 헤더 여백 수정 및 리팩토링, 헤더에서 페이지 이동 시 현재 프로젝트 유지하면서 이동하도록 처리

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

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

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>
           ) : (

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`}

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>
-  );
-}

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>
           ) : (

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`}