Design: browse 페이지, 리뷰 페이지 리팩토링

2024-10-03 20:37:48 +09:00 · 2024-10-03 20:37:48 +09:00 · a938b12448
commit a938b12448
parent 84e89f51d1
13 changed files with 91 additions and 80 deletions
--- 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">
--- 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>
--- 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>
  );
--- 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>
--- 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'
--- 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>
--- 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">
--- 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>
          ) : (
--- 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"
--- 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">
--- 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}
--- 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>
          ) : (
--- 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"