From a938b12448ee9f590fd6e4980d4ca8924d87805c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=ED=99=8D=EC=B0=BD=EA=B8=B0?= <hckhong@naver.com>
Date: Thu, 3 Oct 2024 20:37:48 +0900
Subject: [PATCH] =?UTF-8?q?Design:=20browse=20=ED=8E=98=EC=9D=B4=EC=A7=80,?=
 =?UTF-8?q?=20=EB=A6=AC=EB=B7=B0=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=A6=AC?=
 =?UTF-8?q?=ED=8C=A9=ED=86=A0=EB=A7=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/ManageLayout/index.tsx     | 32 ++++++++-------
 .../src/components/MemberAddModal/index.tsx   |  2 +-
 frontend/src/components/ProjectCard/index.tsx |  6 +--
 .../components/ProjectCreateModal/index.tsx   |  2 +-
 .../src/components/ReviewList/ReviewItem.tsx  |  4 +-
 frontend/src/components/ReviewList/index.tsx  |  4 +-
 .../WorkspaceBrowseLayout/index.tsx           | 41 +++++++++++--------
 frontend/src/pages/ProjectMemberManage.tsx    |  8 ++--
 frontend/src/pages/ProjectReviewList.tsx      |  4 +-
 frontend/src/pages/ReviewDetail.tsx           | 38 +++++++++--------
 frontend/src/pages/WorkspaceBrowseDetail.tsx  | 18 ++++----
 frontend/src/pages/WorkspaceMemberManage.tsx  |  8 ++--
 frontend/src/pages/WorkspaceReviewList.tsx    |  4 +-
 13 files changed, 91 insertions(+), 80 deletions(-)

diff --git a/frontend/src/components/ManageLayout/index.tsx b/frontend/src/components/ManageLayout/index.tsx
index d1488a1..ae5c5b0 100644
--- a/frontend/src/components/ManageLayout/index.tsx
+++ b/frontend/src/components/ManageLayout/index.tsx
@@ -22,27 +22,29 @@ export default function ManageLayout({ tabTitle }: { tabTitle: string }) {
 
       <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">
+          <div className="flex w-[280px] flex-col gap-1 border-r border-gray-200 bg-gray-100 p-2">
+            <div className="flex items-center justify-center gap-5">
               <Link
                 to={`/${tabTitle}/${workspaceId}`}
-                className="subheading w-full overflow-hidden text-ellipsis whitespace-nowrap"
+                className="subheading w-full overflow-hidden text-ellipsis whitespace-nowrap p-2"
               >
                 {workspaceTitle}
               </Link>
             </div>
-            {projects.map((project: ProjectResponse) => (
-              <Link
-                key={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'
-                )}
-              >
-                {project.title}
-              </Link>
-            ))}
+            <div className="flex flex-col">
+              {projects.map((project: ProjectResponse) => (
+                <Link
+                  key={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'
+                  )}
+                >
+                  {project.title}
+                </Link>
+              ))}
+            </div>
           </div>
 
           <div className="flex w-[calc(100%-280px)] flex-col gap-24">
diff --git a/frontend/src/components/MemberAddModal/index.tsx b/frontend/src/components/MemberAddModal/index.tsx
index 31a2724..34d25b6 100644
--- a/frontend/src/components/MemberAddModal/index.tsx
+++ b/frontend/src/components/MemberAddModal/index.tsx
@@ -38,7 +38,7 @@ export default function MemberAddModal({ projectId, buttonClass = '' }: MemberAd
       <DialogTrigger asChild>
         <Button
           variant="blue"
-          className={`${buttonClass}`}
+          className={buttonClass}
           onClick={handleOpen}
         >
           <span>프로젝트에 새 멤버 초대</span>
diff --git a/frontend/src/components/ProjectCard/index.tsx b/frontend/src/components/ProjectCard/index.tsx
index da2ef77..bfe93cb 100644
--- a/frontend/src/components/ProjectCard/index.tsx
+++ b/frontend/src/components/ProjectCard/index.tsx
@@ -12,7 +12,7 @@ export default function ProjectCard({ title, description, imageUrl = '', to = ''
   return (
     <Link
       to={to}
-      className="relative flex w-[327px] cursor-pointer items-start gap-4 rounded-lg border border-gray-200 bg-white p-4 transition-colors hover:bg-gray-100 hover:text-gray-900 dark:border-gray-800 dark:bg-gray-950 dark:hover:bg-gray-800 dark:hover:text-gray-50"
+      className="flex w-[327px] cursor-pointer items-start gap-4 rounded-lg border border-gray-200 bg-white p-4 transition-colors hover:bg-gray-100 hover:text-gray-900 dark:border-gray-800 dark:bg-gray-950 dark:hover:bg-gray-800 dark:hover:text-gray-50"
     >
       <div className="flex h-24 w-24 shrink-0 items-center justify-center rounded-lg bg-gray-100">
         {imageUrl ? (
@@ -26,8 +26,8 @@ export default function ProjectCard({ title, description, imageUrl = '', to = ''
         )}
       </div>
       <div className="flex flex-col items-start gap-1 overflow-hidden">
-        <div className="font-sans text-lg leading-tight text-black dark:text-white">{title}</div>
-        <div className="text-sm leading-tight text-gray-500 dark:text-gray-400">{description}</div>
+        <div className="body leading-tight text-black dark:text-white">{title}</div>
+        <div className="caption leading-tight text-gray-500 dark:text-gray-400">{description}</div>
       </div>
     </Link>
   );
diff --git a/frontend/src/components/ProjectCreateModal/index.tsx b/frontend/src/components/ProjectCreateModal/index.tsx
index 58f912a..8408f1c 100644
--- a/frontend/src/components/ProjectCreateModal/index.tsx
+++ b/frontend/src/components/ProjectCreateModal/index.tsx
@@ -24,7 +24,7 @@ export default function ProjectCreateModal({ onSubmit, buttonClass = '' }: Proje
         <Button
           variant="blue"
           className={buttonClass}
-          size={'xs'}
+          size="xs"
           onClick={handleOpen}
         >
           <span>새 프로젝트</span>
diff --git a/frontend/src/components/ReviewList/ReviewItem.tsx b/frontend/src/components/ReviewList/ReviewItem.tsx
index 39bddad..36173a0 100644
--- a/frontend/src/components/ReviewList/ReviewItem.tsx
+++ b/frontend/src/components/ReviewList/ReviewItem.tsx
@@ -45,7 +45,7 @@ export default function ReviewItem({
       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">
+      <div className="flex h-[100px] w-full items-center justify-between border-b border-gray-200 bg-white p-4 hover:bg-gray-100">
         <div className="flex flex-col">
           <p className="body-small-strong text-black">{title}</p>
           <p className="caption mt-1 text-gray-500">
@@ -68,7 +68,7 @@ export default function ReviewItem({
         <div className="flex flex-col items-end gap-1">
           <div
             className={cn(
-              'caption flex items-center gap-1 rounded-full px-3 py-0.5',
+              'caption flex items-center gap-1 rounded-md px-2 py-0.5',
               status === 'APPROVED'
                 ? 'bg-green-100 text-green-600'
                 : status === 'REJECTED'
diff --git a/frontend/src/components/ReviewList/index.tsx b/frontend/src/components/ReviewList/index.tsx
index c7ac13d..4449a03 100644
--- a/frontend/src/components/ReviewList/index.tsx
+++ b/frontend/src/components/ReviewList/index.tsx
@@ -28,12 +28,12 @@ export default function ReviewList({
           {['REQUESTED', 'APPROVED', 'REJECTED', 'ALL'].map((tab) => (
             <button
               key={tab}
-              className={`flex h-12 w-[100px] items-center justify-center px-3 ${
+              className={`mt-[3px] flex h-12 w-[100px] items-center justify-center px-3 ${
                 activeTab === tab ? 'border-b-[3px] border-blue-500' : 'border-b-[3px] border-transparent'
               }`}
               onClick={() => setActiveTab(tab as typeof activeTab)}
             >
-              <span className={`text-sm ${activeTab === tab ? 'font-semibold' : 'font-normal'} text-black`}>
+              <span className={`${activeTab === tab ? 'body-small-strong' : 'body-small'} text-black`}>
                 {tab === 'REQUESTED' ? '요청' : tab === 'APPROVED' ? '승인' : tab === 'REJECTED' ? '거부' : '전체'}
               </span>
             </button>
diff --git a/frontend/src/components/WorkspaceBrowseLayout/index.tsx b/frontend/src/components/WorkspaceBrowseLayout/index.tsx
index c5e19cb..9a35aee 100644
--- a/frontend/src/components/WorkspaceBrowseLayout/index.tsx
+++ b/frontend/src/components/WorkspaceBrowseLayout/index.tsx
@@ -38,28 +38,33 @@ export default function WorkspaceBrowseLayout() {
 
       <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">
-              <h1 className="subheading mr-2.5 w-full overflow-hidden text-ellipsis whitespace-nowrap">
+          <div className="flex w-[280px] flex-col gap-1 border-r border-gray-200 bg-gray-100 p-2">
+            <div className="flex items-center justify-center gap-5">
+              <h1 className="subheading mr-2.5 w-full overflow-hidden text-ellipsis whitespace-nowrap p-2">
                 내 워크스페이스
               </h1>
               <WorkSpaceCreateModal onSubmit={handleCreateWorkspace} />
             </div>
-            {workspaces.length > 0 ? (
-              workspaces.map((workspace: WorkspaceResponse) => (
-                <NavLink
-                  key={workspace.id}
-                  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>
-              ))
-            ) : (
-              <p className="text-gray-500">워크스페이스가 없습니다.</p>
-            )}
+            <div className="flex flex-col">
+              {workspaces.length > 0 ? (
+                workspaces.map((workspace: WorkspaceResponse) => (
+                  <NavLink
+                    key={workspace.id}
+                    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>
+                ))
+              ) : (
+                <p className="text-gray-500">워크스페이스가 없습니다.</p>
+              )}
+            </div>
           </div>
           <div className="flex w-[calc(100%-280px)] flex-col gap-24">
             <main className="grow">
diff --git a/frontend/src/pages/ProjectMemberManage.tsx b/frontend/src/pages/ProjectMemberManage.tsx
index cf6ca05..bb471fd 100644
--- a/frontend/src/pages/ProjectMemberManage.tsx
+++ b/frontend/src/pages/ProjectMemberManage.tsx
@@ -88,14 +88,14 @@ export default function ProjectMemberManage() {
   };
 
   return (
-    <div className="grid h-screen w-full">
+    <div className="grid w-full">
       <div className="flex flex-col">
-        <header className="bg-background sticky top-0 z-10 flex h-[57px] items-center gap-4 border-b px-4">
-          <h1 className="flex-1 text-xl font-semibold">프로젝트 멤버 관리</h1>
+        <header className="bg-background flex h-16 items-center gap-4 px-4">
+          <h1 className="heading flex-1">프로젝트 멤버 관리</h1>
           {isAdminOrManager && <MemberAddModal projectId={projectId ? Number(projectId) : 0} />}
         </header>
 
-        <main className="grid flex-1 gap-4 overflow-auto p-4">
+        <main className="grid flex-1 gap-4 overflow-auto px-4 pb-4">
           {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 cdf87cc..b0e8d2c 100644
--- a/frontend/src/pages/ProjectReviewList.tsx
+++ b/frontend/src/pages/ProjectReviewList.tsx
@@ -60,8 +60,8 @@ export default function ProjectReviewList() {
   return (
     <Suspense fallback={<div></div>}>
       <div>
-        <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>
+        <header className="sticky top-0 z-10 flex h-16 items-center gap-1 border-b border-gray-200 bg-white px-4">
+          <h1 className="heading">프로젝트 리뷰</h1>
           <Link
             to={`/review/${workspaceId}/request`}
             className="ml-auto"
diff --git a/frontend/src/pages/ReviewDetail.tsx b/frontend/src/pages/ReviewDetail.tsx
index 5efb541..d73f669 100644
--- a/frontend/src/pages/ReviewDetail.tsx
+++ b/frontend/src/pages/ReviewDetail.tsx
@@ -68,7 +68,7 @@ export default function ReviewDetail(): JSX.Element {
         <div className="mb-1 flex gap-1">
           <div
             className={cn(
-              'caption mr-1 flex items-center gap-1 rounded-full px-3 py-0.5',
+              'caption mr-1 flex items-center gap-1 rounded-md px-2 py-0.5',
               reviewDetail.reviewStatus === 'APPROVED'
                 ? 'bg-green-100 text-green-600'
                 : reviewDetail.reviewStatus === 'REJECTED'
@@ -88,25 +88,31 @@ export default function ReviewDetail(): JSX.Element {
           {reviewDetail.reviewStatus === 'APPROVED' || reviewDetail.reviewStatus === 'REJECTED' ? (
             <>
               <p className="body-small text-gray-500">by</p>
-              <p className="body-small-strong text-gray-500">
-                {reviewDetail.reviewer.nickname} ({reviewDetail.reviewer.email})
-              </p>
+              <p className="body-small-strong text-gray-500">{reviewDetail.reviewer.nickname}</p>
+              <p className="body-small text-gray-500">({reviewDetail.reviewer.email})</p>
+              <p className="body-small-strong text-gray-500">{timeAgo(reviewDetail.updatedAt)}</p>
+              <p className="body-small text-gray-500">({formatDateTime(reviewDetail.updatedAt)})</p>
             </>
           ) : (
-            <p className="body-small text-gray-500">updated</p>
+            <>
+              <p className="body-small text-gray-500">by</p>
+              <p className="body-small-strong text-gray-500">{reviewDetail.author.nickname}</p>
+              <p className="body-small text-gray-500">({reviewDetail.author.email})</p>
+              <p className="body-small-strong text-gray-500">{timeAgo(reviewDetail.createdAt)}</p>
+              <p className="body-small text-gray-500">({formatDateTime(reviewDetail.createdAt)})</p>
+            </>
           )}
-
-          <p className="body-small-strong text-gray-500">{timeAgo(reviewDetail.updatedAt)}</p>
-          <p className="body-small text-gray-500">({formatDateTime(reviewDetail.updatedAt)})</p>
-        </div>
-        <div className="flex gap-1">
-          <p className="body-small-strong text-gray-500">
-            {reviewDetail.author.nickname} ({reviewDetail.author.email})
-          </p>
-          <p className="body-small text-gray-500">requested a review</p>
-          <p className="body-small-strong text-gray-500">{timeAgo(reviewDetail.createdAt)}</p>
-          <p className="body-small text-gray-500">({formatDateTime(reviewDetail.createdAt)})</p>
         </div>
+        {reviewDetail.reviewStatus === 'APPROVED' || reviewDetail.reviewStatus === 'REJECTED' ? (
+          <div className="flex gap-1">
+            <p className="body-small-strong text-gray-500">{reviewDetail.author.nickname}</p>
+            <p className="body-small text-gray-500">({reviewDetail.author.email}) requested a review</p>
+            <p className="body-small-strong text-gray-500">{timeAgo(reviewDetail.createdAt)}</p>
+            <p className="body-small text-gray-500">({formatDateTime(reviewDetail.createdAt)})</p>
+          </div>
+        ) : (
+          <></>
+        )}
       </div>
 
       <div className="relative w-full">
diff --git a/frontend/src/pages/WorkspaceBrowseDetail.tsx b/frontend/src/pages/WorkspaceBrowseDetail.tsx
index 41fec6c..0ef2ecc 100644
--- a/frontend/src/pages/WorkspaceBrowseDetail.tsx
+++ b/frontend/src/pages/WorkspaceBrowseDetail.tsx
@@ -29,7 +29,7 @@ export default function WorkspaceBrowseDetail() {
   };
 
   return (
-    <div className="flex h-full w-full flex-col gap-8 px-6 py-4">
+    <div className="flex h-full w-full flex-col">
       <HeaderSection
         workspaceName={workspaceData?.title ?? `Workspace-${workspaceId}`}
         onCreateProject={handleCreateProject}
@@ -54,15 +54,13 @@ function HeaderSection({
   onCreateProject: (data: ProjectRequest) => void;
 }) {
   return (
-    <div className="flex items-center justify-center">
-      <h1 className="small-title flex grow">{workspaceName}</h1>
+    <div className="flex h-16 items-center justify-center px-4">
+      <h1 className="heading flex grow">{workspaceName}</h1>
       <div className="flex flex-col">
-        <div className="flex gap-3">
-          <ProjectCreateModal
-            buttonClass="flex items-center gap-2 body-small-strong h-10 px-4 py-2"
-            onSubmit={onCreateProject}
-          />
-        </div>
+        <ProjectCreateModal
+          buttonClass="flex items-center gap-2 h-10 px-4 py-2"
+          onSubmit={onCreateProject}
+        />
       </div>
     </div>
   );
@@ -96,7 +94,7 @@ function ProjectList({ projects, workspaceId }: { projects: ProjectResponse[]; w
   }
 
   return (
-    <div className="flex flex-wrap gap-6">
+    <div className="flex flex-wrap gap-6 px-4 pb-4">
       {projects.map((project: ProjectResponse) => (
         <ProjectCard
           key={project.id}
diff --git a/frontend/src/pages/WorkspaceMemberManage.tsx b/frontend/src/pages/WorkspaceMemberManage.tsx
index 7345130..467b31c 100644
--- a/frontend/src/pages/WorkspaceMemberManage.tsx
+++ b/frontend/src/pages/WorkspaceMemberManage.tsx
@@ -11,10 +11,10 @@ export default function WorkspaceMemberManage() {
   const { data: members = [] } = useWorkspaceMembersQuery(Number(workspaceId));
 
   return (
-    <div className="grid h-screen w-full">
+    <div className="grid w-full">
       <div className="flex flex-col">
-        <header className="bg-background sticky top-0 z-10 flex h-[57px] items-center gap-4 border-b px-4">
-          <h1 className="flex-1 text-xl font-semibold">워크스페이스 멤버 관리</h1>
+        <header className="bg-background flex h-16 items-center gap-4 px-4">
+          <h1 className="heading flex-1">워크스페이스 멤버 관리</h1>
 
           <WorkspaceMemberAddModal
             workspaceId={Number(workspaceId)}
@@ -22,7 +22,7 @@ export default function WorkspaceMemberManage() {
           />
         </header>
 
-        <main className="flex-1 overflow-auto p-4">
+        <main className="flex-1 overflow-auto px-4 pb-4">
           {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 11e62a5..bc14e38 100644
--- a/frontend/src/pages/WorkspaceReviewList.tsx
+++ b/frontend/src/pages/WorkspaceReviewList.tsx
@@ -60,8 +60,8 @@ export default function WorkspaceReviewList() {
   return (
     <Suspense fallback={<div></div>}>
       <div>
-        <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>
+        <header className="sticky top-0 z-10 flex h-16 items-center gap-1 border-b border-gray-200 bg-white px-4">
+          <h1 className="heading">워크스페이스 리뷰</h1>
           <Link
             to={`/review/${workspaceId}/request`}
             className="ml-auto"