[Refactor/#127] 워크스페이스 목록/수정 페이지 UI 및 UX 개선 리팩토링

src/components/common/PageHeader.tsx

@@ -16,7 +16,12 @@ const PageHeader = memo(function PageHeader({
   className,
 }: IPageHeaderProps) {
   return (
-    <header className={twMerge("flex items-center justify-between", className)}>
+    <header
+      className={twMerge(
+        "flex items-center justify-between tablet:items-start tablet:gap-3",
+        className,
+      )}
+    >
       <div className="flex flex-col gap-1">
         <h1 className="font-heading2 text-text-main">{title}</h1>
         {description && (

src/components/common/controlbox/ControlBox.tsx

@@ -42,8 +42,8 @@ export default function ControlBox({
   return (
     <div
       className={twMerge(
-        "flex w-full min-w-0 items-center justify-between gap-6 px-7 py-6  border-[0.5px]  rounded-component-lg",
-        "border-chart-3 bg-chart-3/7",
+        "flex w-full min-w-0 items-center justify-between gap-6 px-7 py-6  border-[0.5px] border-chart-3/7 rounded-component-lg",
+        "tablet:flex-col tablet:items-start tablet:px-5 tablet:py-5",
         containerClassName,
         className,
       )}
@@ -78,7 +78,7 @@ export default function ControlBox({
           onClick={onButtonClick}
           disabled={buttonDisabled}
           className={twMerge(
-            "shrink-0 px-8 rounded-component-md!",
+            "shrink-0 px-8 rounded-component-md! tablet:w-full tablet:justify-center",
             buttonClassName,
           )}
         >

src/components/common/dropdownmenu/DropdownMenu.tsx

@@ -73,7 +73,7 @@ export function DropdownMenu({
                     "group flex w-full items-center gap-3 rounded-component-md px-5 py-4 text-left font-body2 transition-fast",
                     it.active
                       ? "bg-brand-300 text-status-blue"
-                      : "text-text-auth-sub hover:bg-brand-300 hover:text-status-blue",
+                      : "text-text-main hover:bg-brand-300 hover:text-status-blue",
                   )}
                 >
                   {it.icon ? (

src/components/common/input/Input.tsx

@@ -66,7 +66,7 @@ const Input = forwardRef<HTMLInputElement, IInputProps>(
           <input
             ref={ref}
             className={twMerge(
-              "flex-1 h-full w-full bg-transparent border-none outline-none text-body1 text-text-main placeholder:text-text-placeholder px-5",
+              "flex-1 h-full w-full bg-transparent border-none outline-none font-body1 text-text-main placeholder:text-text-placeholder px-5",
               "disabled:cursor-not-allowed disabled:text-text-disabled",
               rightElement ? "pr-2" : "",
               inputClassName,

src/components/common/textarea/TextareaField.tsx

@@ -47,7 +47,10 @@ export default function TextareaField({
         rows={minRows}
         value={value}
         className={twMerge(
-          "w-full resize-none overflow-hidden rounded-component-md bg-gray-50 px-5 py-4 outline-none transition-smooth hover:bg-gray-100 focus:bg-white focus:ring-2 focus:ring-logo-1/30 text-body1 text-text-main placeholder:text-text-placeholder",
+          "w-full rounded-component-md px-5 py-4 ring-1 ring-logo-1/30 outline-none transition-colors duration-200 ease-out overflow-hidden placeholder:text-text-placeholder text-text-main font-body1",
+          disabled
+            ? "bg-gray-100 cursor-not-allowed"
+            : "hover:bg-gray-100 hover:ring-logo-1/40 focus-within:bg-white focus-within:ring-2 focus-within:ring-logo-1/50",
           className,
         )}
         placeholder={placeholder}

src/components/workspace/MemberItem.tsx

@@ -21,8 +21,8 @@ export default function MemberItem({
   onDeleteClick,
 }: TProps) {
   return (
-    <li className="flex items-center justify-between py-5 gap-4">
-      <div className="flex items-center gap-4">
+    <li className="flex items-center justify-between py-5 gap-4 tablet:items-start">
+      <div className="flex items-center gap-4 w-full min-w-0">
         <div className="flex bg-text-placeholder/30 h-12 w-12 items-center justify-center shrink-0 rounded-component-lg overflow-hidden">
           {member.profileImageUrl ? (
             <img
@@ -34,9 +34,9 @@ export default function MemberItem({
             <UserIcon className="text-text-auth-sub h-6 w-6" />
           )}
         </div>
-        <div className="min-w-0">
+        <div className="min-w-0 flex-1">
           <p className="truncate text-text-main font-body1">{member.name}</p>
-          <div className=" flex text-text-auth-sub items-center gap-2">
+          <div className="flex text-text-auth-sub items-center gap-2 min-w-0">
             <MailIcon className="w-4 h-4" />
             <p className="truncate">{member.email}</p>
           </div>
@@ -45,7 +45,7 @@ export default function MemberItem({
       <div className="flex items-center gap-4">
         {member.isMe ? (
           <span
-            className={`inline-flex h-10 min-w-24.5 items-center justify-center rounded-[22px] px-4 font-body2 ${
+            className={`inline-flex h-10 min-w-24.5 items-center justify-center rounded-component-lg px-4 font-body2 ${
               member.role === "ADMIN"
                 ? "bg-status-blue/80 text-white shadow-sm"
                 : "bg-chart-3/15 text-text-auth-sub"

src/components/workspace/MemberList.tsx

@@ -75,7 +75,7 @@ export default function MemberList({
 
   return (
     <div className="bg-white border border-gray-100 rounded-component-lg p-8 shadow-Soft">
-      <header className="mb-7 flex justify-between">
+      <header className="mb-7 flex items-start justify-between gap-4">
         <div>
           <h2 className="font-heading4 text-text-main font-semibold!">
             팀 구성원

src/components/workspace/MemberRoleSelect.tsx

@@ -1,4 +1,5 @@
 import type { TMemberRole } from "@/types/workspace/workspace";
+import { ROLE_LABEL_MAP } from "@/constants/workspaceRole";
 
 import {
   DropdownMenu,
@@ -13,11 +14,6 @@ type TProps = {
   disabled?: boolean;
 };
 
-const roleLabelMap: Record<TMemberRole, string> = {
-  ADMIN: "관리자",
-  MEMBER: "멤버",
-};
-
 const triggerStyleMap: Record<TMemberRole, string> = {
   ADMIN: "bg-status-blue/80 text-white shadow-sm",
   MEMBER: "bg-chart-3/15 text-text-auth-sub",
@@ -32,12 +28,12 @@ export default function MemberRoleSelect({
     ? []
     : [
         {
-          label: "관리자",
+          label: ROLE_LABEL_MAP.ADMIN,
           onClick: () => onChange("ADMIN"),
           active: role === "ADMIN",
         },
         {
-          label: "멤버",
+          label: ROLE_LABEL_MAP.MEMBER,
           onClick: () => onChange("MEMBER"),
           active: role === "MEMBER",
         },
@@ -51,7 +47,7 @@ export default function MemberRoleSelect({
         <div
           className={`flex h-10 min-w-25 items-center justify-between gap-3 rounded-component-lg px-4 font-body2 ${triggerStyleMap[role]} cursor-pointer`}
         >
-          <span>{roleLabelMap[role]}</span>
+          <span>{ROLE_LABEL_MAP[role]}</span>
           <ChevonIcon
             className={`h-4 w-4 shrink-0 transition-transform ${open ? "rotate-0" : "-rotate-180"}`}
           />

src/components/workspace/PermissionTable.tsx

@@ -120,8 +120,8 @@ export default function PermissionTable() {
         </p>
       </header>
 
-      <div className="overflow-hidden">
-        <table className="w-full border-collapse table-fixed">
+      <div className="w-full overflow-hidden">
+        <table className="w-full table-fixed">
           <thead>
             <tr className="border-b border-gray-100">
               <th className="text-text-auth-sub py-2 text-left">

src/components/workspace/WorkspaceCard.tsx

@@ -1,6 +1,8 @@
-import { useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
+import { twMerge } from "tailwind-merge";
 
 import type { TWorkspace } from "@/types/workspace/workspace";
+import { ROLE_LABEL_MAP } from "@/constants/workspaceRole";
 
 import {
   DropdownMenu,
@@ -14,9 +16,16 @@ import { getImageUrl } from "@/lib/getImageUrl";
 type TProps = {
   workspace: TWorkspace;
   menuItems: TMenuItem[];
+  isSelected?: boolean;
+  onClick?: () => void;
 };
 
-export default function WorkspaceCard({ workspace: w, menuItems }: TProps) {
+function WorkspaceCard({
+  workspace: w,
+  menuItems,
+  isSelected = false,
+  onClick,
+}: TProps) {
   const [imageError, setImageError] = useState(false);
 
   useEffect(() => {
@@ -25,10 +34,19 @@ export default function WorkspaceCard({ workspace: w, menuItems }: TProps) {
 
   const imageSrc = w.logoUrl ? getImageUrl(w.logoUrl) : null;
   const showPlaceholder = !imageSrc || imageError;
+
   return (
-    <li className="flex items-center justify-between rounded-component-md bg-white px-6 py-5 shadow-Soft border border-gray-100">
-      <div className="flex items-center gap-5 min-w-0">
-        <div className="w-20 h-20 bg-gray-100 shrink-0 rounded-component-sm">
+    <li
+      className={twMerge(
+        "flex items-center justify-between rounded-component-md bg-white px-6 py-5 shadow-Soft border tablet:px-4 tablet:py-4",
+        onClick &&
+          "cursor-pointer hover:bg-gray-50 active:scale-93 duration-50 transition-transform",
+        isSelected ? "border-chart-3/80 bg-chart-3/2" : "border-gray-100",
+      )}
+      onClick={onClick}
+    >
+      <div className="flex items-center gap-5 min-w-0 tablet:gap-3">
+        <div className="w-24 h-24 bg-gray-100 shrink-0 rounded-component-sm tablet:h-16 tablet:w-16">
           {showPlaceholder ? (
             <div className="w-full h-full flex items-center justify-center">
               <BuildingIcon className="w-8 h-8 text-text-placeholder" />
@@ -46,19 +64,33 @@ export default function WorkspaceCard({ workspace: w, menuItems }: TProps) {
         </div>
 
         <div className="min-w-0">
-          <div className="font-heading4 font-semibold! text-text-main truncate">
-            {w.name}
+          <div className="flex items-center gap-2">
+            <div className="font-heading4 font-semibold! text-text-main truncate">
+              {w.name}
+            </div>
+            {isSelected && (
+              <span
+                role="status"
+                className="shrink-0 rounded-full bg-chart-3/12 px-2 py-1 font-caption text-chart-3"
+              >
+                현재 대시보드 기준
+              </span>
+            )}
           </div>
+
           <div className="font-body2 text-text-main mt-1 truncate">
             {w.description ?? ""}
           </div>
           <div className="font-body1 text-text-sub mt-2">
-            {w.myRole ?? "내 직책 및 역할"}
+            {ROLE_LABEL_MAP[w.myRole]}
           </div>
         </div>
       </div>
 
-      <div className="flex items-center gap-4 shrink-0">
+      <div
+        className="flex items-center gap-4 shrink-0"
+        onClick={(e) => e.stopPropagation()}
+      >
         <DropdownMenu
           trigger={<VectorIcon aria-hidden="true" />}
           aria-label={`${w.name} 워크스페이스 메뉴`}
@@ -69,3 +101,5 @@ export default function WorkspaceCard({ workspace: w, menuItems }: TProps) {
     </li>
   );
 }
+
+export default React.memo(WorkspaceCard);

src/constants/workspaceRole.ts

@@ -0,0 +1,6 @@
+import type { TMemberRole } from "@/types/workspace/workspace";
+
+export const ROLE_LABEL_MAP: Record<TMemberRole, string> = {
+  ADMIN: "관리자",
+  MEMBER: "멤버",
+};

src/pages/workspace/MemberManagement.tsx

@@ -15,6 +15,7 @@ import {
 } from "@/types/workspace/workspace";
 
 import ControlBox from "@/components/common/controlbox/ControlBox";
+import PageHeader from "@/components/common/PageHeader";
 import DeleteMemberModal from "@/components/workspace/DeleteMemberModal";
 import MemberList from "@/components/workspace/MemberList";
 import PermissionTable from "@/components/workspace/PermissionTable";
@@ -258,6 +259,7 @@ export default function MemberManagement() {
       </section>
     );
   }
+
   if (memberCountQuery.isLoading || membersQuery.isLoading) {
     return (
       <section className="w-full min-w-0">
@@ -270,6 +272,7 @@ export default function MemberManagement() {
       </section>
     );
   }
+
   if (memberCountQuery.isError || membersQuery.isError) {
     return (
       <section className="w-full min-w-0">
@@ -282,14 +285,25 @@ export default function MemberManagement() {
       </section>
     );
   }
+
   return (
-    <section className="w-full min-w-0">
-      <header className="mb-7">
-        <h1 className="font-heading2">멤버 관리</h1>
-        <p className="font-body1 text-text-sub">
-          팀 구성원을 효율적으로 관리하세요
-        </p>
-      </header>
+    <section className="w-full min-w-0 flex flex-col gap-8">
+      <div className="flex flex-col gap-3">
+        <button
+          type="button"
+          onClick={() => {
+            void navigate(-1);
+          }}
+          className="inline-flex w-fit items-center gap-1 text-text-sub transition-colors hover:text-text-main"
+        >
+          <span aria-hidden="true">←</span>
+          <span className="font-body2">뒤로 이동</span>
+        </button>
+        <PageHeader
+          title="멤버 관리"
+          description="팀 멤버를 효율적으로 관리하세요"
+        />
+      </div>
 
       <div className="flex w-full min-w-0 flex-col gap-10">
         <MemberList