From 82e52470adb079925b7324a0e1f29a0cfadf1f85 Mon Sep 17 00:00:00 2001
From: Kwon812 <tre723@naver.com>
Date: Thu, 9 Jul 2026 12:39:54 +0900
Subject: [PATCH 1/8] =?UTF-8?q?=20feat:=20=EA=B8=B0=EC=A1=B4=20=EC=9C=A0?=
 =?UTF-8?q?=EC=A0=80/=EC=9B=8C=ED=81=AC=EC=8A=A4=ED=8E=98=EC=9D=B4?=
 =?UTF-8?q?=EC=A6=88=20=ED=83=80=EC=9E=85,=20=EB=AA=A9=EB=8D=B0=EC=9D=B4?=
 =?UTF-8?q?=ED=84=B0=20=EC=B6=94=EA=B0=80=20,=EC=84=A4=EC=A0=95=20?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=9D=BC=EC=9A=B0=ED=8A=B8?=
 =?UTF-8?q?=EC=99=80=20URL=20=EA=B8=B0=EB=B0=98=20=ED=83=AD=20=EC=85=B8=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../[workspaceId]/settings/page.tsx           | 34 +++++++++++
 .../workspace-member/config/labels.ts         | 21 +++++++
 src/entities/workspace-member/index.ts        | 11 +++-
 .../model/mock-current-workspace-member.ts    |  2 +
 .../model/mock-workspace-members.ts           | 20 ++++++
 .../model/workspace-member.types.ts           |  9 ++-
 .../workspace/model/mock-workspace.ts         |  3 +
 .../workspace/model/workspace.types.ts        |  2 +
 src/shared/ui/badge.tsx                       | 29 +++++++++
 src/views/settings/index.ts                   |  8 +++
 src/views/settings/model/settings-tab.ts      | 22 +++++++
 src/views/settings/ui/SettingsView.tsx        | 61 +++++++++++++++++++
 12 files changed, 220 insertions(+), 2 deletions(-)
 create mode 100644 src/app/workspaces/[workspaceId]/settings/page.tsx
 create mode 100644 src/entities/workspace-member/config/labels.ts
 create mode 100644 src/shared/ui/badge.tsx
 create mode 100644 src/views/settings/index.ts
 create mode 100644 src/views/settings/model/settings-tab.ts
 create mode 100644 src/views/settings/ui/SettingsView.tsx

diff --git a/src/app/workspaces/[workspaceId]/settings/page.tsx b/src/app/workspaces/[workspaceId]/settings/page.tsx
new file mode 100644
index 0000000..56416a2
--- /dev/null
+++ b/src/app/workspaces/[workspaceId]/settings/page.tsx
@@ -0,0 +1,34 @@
+import { notFound } from 'next/navigation';
+import { getMockWorkspaceById } from '@/entities/workspace';
+import { SettingsView } from '@/views/settings';
+import { parseSettingsTab } from '@/views/settings';
+
+interface WorkspaceSettingsPageProps {
+  params: Promise<{
+    workspaceId: string;
+  }>;
+  searchParams: Promise<{
+    tab?: string;
+  }>;
+}
+
+export default async function WorkspaceSettingsPage({
+  params,
+  searchParams,
+}: WorkspaceSettingsPageProps) {
+  const { workspaceId } = await params;
+  const { tab } = await searchParams;
+  const workspace = getMockWorkspaceById(workspaceId);
+
+  if (!workspace) {
+    notFound();
+  }
+
+  return (
+    <SettingsView
+      workspace={workspace}
+      workspaceId={workspaceId}
+      activeTab={parseSettingsTab(tab)}
+    />
+  );
+}
diff --git a/src/entities/workspace-member/config/labels.ts b/src/entities/workspace-member/config/labels.ts
new file mode 100644
index 0000000..d9a6dd8
--- /dev/null
+++ b/src/entities/workspace-member/config/labels.ts
@@ -0,0 +1,21 @@
+// 멤버의 역할/참여 상태를 UI에 표시하기 위한 한글 라벨과 뱃지 톤 매핑입니다.
+import type { WorkspaceMemberRole, WorkspaceMemberStatus } from '../model/workspace-member.types';
+
+// Badge 컴포넌트의 tone 값과 일치시킵니다.
+export type BadgeTone = 'brand' | 'neutral' | 'success' | 'warning';
+
+export const WORKSPACE_MEMBER_ROLE_META: Record<
+  WorkspaceMemberRole,
+  { label: string; tone: BadgeTone }
+> = {
+  owner: { label: '팀장', tone: 'brand' },
+  member: { label: '팀원', tone: 'neutral' },
+};
+
+export const WORKSPACE_MEMBER_STATUS_META: Record<
+  WorkspaceMemberStatus,
+  { label: string; tone: BadgeTone }
+> = {
+  joined: { label: '참여 중', tone: 'success' },
+  invited: { label: '초대됨', tone: 'warning' },
+};
diff --git a/src/entities/workspace-member/index.ts b/src/entities/workspace-member/index.ts
index 185bed6..a4e1128 100644
--- a/src/entities/workspace-member/index.ts
+++ b/src/entities/workspace-member/index.ts
@@ -1,7 +1,16 @@
 // 목업 워크스페이스 멤버 데이터와 타입의 공개 API입니다.
-export type { WorkspaceMember } from './model/workspace-member.types';
+export type {
+  WorkspaceMember,
+  WorkspaceMemberRole,
+  WorkspaceMemberStatus,
+} from './model/workspace-member.types';
 export { mockCurrentWorkspaceMember } from './model/mock-current-workspace-member';
 export {
   getMockWorkspaceMembersByWorkspaceId,
   mockWorkspaceMembers,
 } from './model/mock-workspace-members';
+export {
+  WORKSPACE_MEMBER_ROLE_META,
+  WORKSPACE_MEMBER_STATUS_META,
+  type BadgeTone,
+} from './config/labels';
diff --git a/src/entities/workspace-member/model/mock-current-workspace-member.ts b/src/entities/workspace-member/model/mock-current-workspace-member.ts
index 1908b7b..691a45e 100644
--- a/src/entities/workspace-member/model/mock-current-workspace-member.ts
+++ b/src/entities/workspace-member/model/mock-current-workspace-member.ts
@@ -6,5 +6,7 @@ export const mockCurrentWorkspaceMember: WorkspaceMember = {
   userId: 'user-1',
   workspaceNickname: '김민서',
   avatarLabel: '김',
+  email: 'minseo@example.com',
   role: 'owner',
+  status: 'joined',
 };
diff --git a/src/entities/workspace-member/model/mock-workspace-members.ts b/src/entities/workspace-member/model/mock-workspace-members.ts
index fd0de3e..23c31b5 100644
--- a/src/entities/workspace-member/model/mock-workspace-members.ts
+++ b/src/entities/workspace-member/model/mock-workspace-members.ts
@@ -7,70 +7,90 @@ export const mockWorkspaceMembers: WorkspaceMember[] = [
     userId: 'user-1',
     workspaceNickname: '김지은',
     avatarLabel: '김',
+    email: 'jieun@example.com',
     role: 'owner',
+    status: 'joined',
   },
   {
     workspaceId: 'test',
     userId: 'user-2',
     workspaceNickname: '박서준',
     avatarLabel: '박',
+    email: 'seojun@example.com',
     role: 'member',
+    status: 'joined',
   },
   {
     workspaceId: 'test',
     userId: 'user-3',
     workspaceNickname: '이하은',
     avatarLabel: '이',
+    email: 'haeun@example.com',
     role: 'member',
+    status: 'joined',
   },
   {
     workspaceId: 'test',
     userId: 'user-4',
     workspaceNickname: '최민준',
     avatarLabel: '최',
+    email: 'minjun@example.com',
     role: 'member',
+    status: 'invited',
   },
   {
     workspaceId: 'store-workspace',
     userId: 'user-1',
     workspaceNickname: '김민서',
     avatarLabel: '김',
+    email: 'minseo@example.com',
     role: 'owner',
+    status: 'joined',
   },
   {
     workspaceId: 'store-workspace',
     userId: 'user-2',
     workspaceNickname: '이준혁',
     avatarLabel: '이',
+    email: 'junhyeok@example.com',
     role: 'member',
+    status: 'joined',
   },
   {
     workspaceId: 'store-workspace',
     userId: 'user-3',
     workspaceNickname: '박소연',
     avatarLabel: '박',
+    email: 'soyeon@example.com',
     role: 'member',
+    status: 'invited',
   },
   {
     workspaceId: 'store-workspace',
     userId: 'user-4',
     workspaceNickname: '최다은',
     avatarLabel: '최',
+    email: 'daeun@example.com',
     role: 'member',
+    status: 'joined',
   },
   {
     workspaceId: 'store-workspace',
     userId: 'user-5',
     workspaceNickname: '정우진',
     avatarLabel: '정',
+    email: 'woojin@example.com',
     role: 'member',
+    status: 'joined',
   },
   {
     workspaceId: 'store-workspace',
     userId: 'user-6',
     workspaceNickname: '이서영',
     avatarLabel: '이',
+    email: 'seoyeong@example.com',
     role: 'member',
+    status: 'invited',
   },
 ];
 
diff --git a/src/entities/workspace-member/model/workspace-member.types.ts b/src/entities/workspace-member/model/workspace-member.types.ts
index cff1994..484afac 100644
--- a/src/entities/workspace-member/model/workspace-member.types.ts
+++ b/src/entities/workspace-member/model/workspace-member.types.ts
@@ -1,8 +1,15 @@
 // Supabase 데이터가 연결되기 전까지 사용하는 목업 일정용 워크스페이스 멤버 형태입니다.
+export type WorkspaceMemberRole = 'owner' | 'member';
+
+// 워크스페이스 참여 상태: 초대를 수락해 참여 중이거나(joined), 초대만 발송된 상태(invited)입니다.
+export type WorkspaceMemberStatus = 'joined' | 'invited';
+
 export interface WorkspaceMember {
   workspaceId: string;
   userId: string;
   workspaceNickname: string;
   avatarLabel: string;
-  role: 'owner' | 'member';
+  email: string;
+  role: WorkspaceMemberRole;
+  status: WorkspaceMemberStatus;
 }
diff --git a/src/entities/workspace/model/mock-workspace.ts b/src/entities/workspace/model/mock-workspace.ts
index 73d66c8..ae70db6 100644
--- a/src/entities/workspace/model/mock-workspace.ts
+++ b/src/entities/workspace/model/mock-workspace.ts
@@ -7,16 +7,19 @@ const mockWorkspacesById: Record<string, Workspace> = {
     id: 'store-workspace',
     name: '카페 그레이 운영',
     purpose: 'store-operation',
+    description: '카페 그레이 매장 운영을 위한 워크스페이스입니다.',
   },
   'team-workspace': {
     id: 'team-workspace',
     name: '캡스톤 디자인 팀',
     purpose: 'team-project',
+    description: '캡스톤 디자인 프로젝트 협업 공간입니다.',
   },
   'side-workspace': {
     id: 'side-workspace',
     name: 'Fitto 앱 개발팀',
     purpose: 'side-project',
+    description: 'Fitto 앱 사이드 프로젝트 개발팀 워크스페이스입니다.',
   },
 };
 
diff --git a/src/entities/workspace/model/workspace.types.ts b/src/entities/workspace/model/workspace.types.ts
index 0e2b61a..d3a11a1 100644
--- a/src/entities/workspace/model/workspace.types.ts
+++ b/src/entities/workspace/model/workspace.types.ts
@@ -5,6 +5,8 @@ export interface Workspace {
   id: string;
   name: string;
   purpose: WorkspacePurpose;
+  // 설정 페이지에서 편집하는 워크스페이스 소개 문구입니다. (선택 값)
+  description?: string;
 }
 
 // get_my_workspaces RPC 반환 형태 (내 워크스페이스 목록)
diff --git a/src/shared/ui/badge.tsx b/src/shared/ui/badge.tsx
new file mode 100644
index 0000000..8bae473
--- /dev/null
+++ b/src/shared/ui/badge.tsx
@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '@/shared/lib/utils';
+
+const badgeVariants = cva(
+  'inline-flex items-center justify-center rounded-full px-2 py-0.5 text-xs font-medium whitespace-nowrap',
+  {
+    variants: {
+      tone: {
+        brand: 'bg-[var(--color-brand-soft)] text-[var(--color-brand)]',
+        neutral: 'bg-slate-100 text-slate-600',
+        success: 'bg-emerald-50 text-emerald-600',
+        warning: 'bg-amber-50 text-amber-600',
+      },
+    },
+    defaultVariants: {
+      tone: 'neutral',
+    },
+  },
+);
+
+type BadgeProps = React.ComponentProps<'span'> & VariantProps<typeof badgeVariants>;
+
+function Badge({ className, tone, ...props }: BadgeProps) {
+  return <span data-slot="badge" className={cn(badgeVariants({ tone }), className)} {...props} />;
+}
+
+export { Badge, badgeVariants };
diff --git a/src/views/settings/index.ts b/src/views/settings/index.ts
new file mode 100644
index 0000000..3400305
--- /dev/null
+++ b/src/views/settings/index.ts
@@ -0,0 +1,8 @@
+export { SettingsView } from './ui/SettingsView';
+export {
+  SETTINGS_TABS,
+  DEFAULT_SETTINGS_TAB,
+  parseSettingsTab,
+  type SettingsTab,
+  type SettingsTabKey,
+} from './model/settings-tab';
diff --git a/src/views/settings/model/settings-tab.ts b/src/views/settings/model/settings-tab.ts
new file mode 100644
index 0000000..3c9d394
--- /dev/null
+++ b/src/views/settings/model/settings-tab.ts
@@ -0,0 +1,22 @@
+// 설정 페이지의 탭 정의와 URL 쿼리(?tab=) 파싱 헬퍼입니다.
+export type SettingsTabKey = 'workspace' | 'members' | 'profile';
+
+export interface SettingsTab {
+  key: SettingsTabKey;
+  label: string;
+}
+
+export const SETTINGS_TABS: SettingsTab[] = [
+  { key: 'workspace', label: '워크스페이스 정보' },
+  { key: 'members', label: '팀원 관리' },
+  { key: 'profile', label: '프로필' },
+];
+
+export const DEFAULT_SETTINGS_TAB: SettingsTabKey = 'workspace';
+
+// URL 쿼리 값이 유효한 탭 키가 아니면 기본 탭으로 보정합니다.
+export function parseSettingsTab(value: string | null | undefined): SettingsTabKey {
+  return SETTINGS_TABS.some((tab) => tab.key === value)
+    ? (value as SettingsTabKey)
+    : DEFAULT_SETTINGS_TAB;
+}
diff --git a/src/views/settings/ui/SettingsView.tsx b/src/views/settings/ui/SettingsView.tsx
new file mode 100644
index 0000000..c84e68f
--- /dev/null
+++ b/src/views/settings/ui/SettingsView.tsx
@@ -0,0 +1,61 @@
+'use client';
+
+// 설정 페이지 셸 — 폰트/레이아웃을 잡고 URL 쿼리(?tab=) 기준으로 탭을 전환한다.
+// 활성 탭은 서버에서 파싱해 prop으로 받는다(스프린트 보드와 동일한 URL 기반 패턴).
+// 각 탭의 실제 내용은 이후 feature 컴포넌트로 채운다.
+import Link from 'next/link';
+import type { Workspace } from '@/entities/workspace';
+import { plusJakartaSans } from '@/shared/lib/fonts';
+import { cn } from '@/shared/lib/utils';
+import { SETTINGS_TABS, type SettingsTabKey } from '../model/settings-tab';
+
+interface SettingsViewProps {
+  workspace: Workspace;
+  workspaceId: string;
+  activeTab: SettingsTabKey;
+}
+
+export function SettingsView({ workspace, workspaceId, activeTab }: SettingsViewProps) {
+  return (
+    <div className={`${plusJakartaSans.className} mx-auto max-w-3xl`}>
+      <h1 className="text-2xl font-bold text-slate-950">설정</h1>
+
+      <nav className="mt-6 flex gap-6 border-b border-slate-200" aria-label="설정 탭">
+        {SETTINGS_TABS.map((tab) => {
+          const isActive = tab.key === activeTab;
+
+          return (
+            <Link
+              key={tab.key}
+              href={`?tab=${tab.key}`}
+              aria-current={isActive ? 'page' : undefined}
+              className={cn(
+                '-mb-px border-b-2 pb-3 text-sm font-medium transition-colors',
+                isActive
+                  ? 'border-[var(--color-brand)] text-[var(--color-brand)]'
+                  : 'border-transparent text-slate-500 hover:text-slate-800',
+              )}
+            >
+              {tab.label}
+            </Link>
+          );
+        })}
+      </nav>
+
+      <div className="mt-6">
+        {activeTab === 'workspace' && <SettingsTabPlaceholder label="워크스페이스 정보" />}
+        {activeTab === 'members' && <SettingsTabPlaceholder label="팀원 관리" />}
+        {activeTab === 'profile' && <SettingsTabPlaceholder label="프로필" />}
+      </div>
+    </div>
+  );
+}
+
+// TODO(T4~T6): 각 탭을 feature 컴포넌트로 교체한다.
+function SettingsTabPlaceholder({ label }: { label: string }) {
+  return (
+    <section className="rounded-2xl border border-slate-200 bg-white p-6 text-sm text-slate-500">
+      {label} 탭 (구현 예정)
+    </section>
+  );
+}

From b4681ddfe4aaa3045da9ff32b1a4fe7d39a2c3fb Mon Sep 17 00:00:00 2001
From: Kwon812 <tre723@naver.com>
Date: Thu, 9 Jul 2026 12:45:50 +0900
Subject: [PATCH 2/8] =?UTF-8?q?feat:=20=EC=9B=8C=ED=81=AC=EC=8A=A4?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=8A=A4=20=EC=A0=95=EB=B3=B4=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95=20=ED=8F=BC=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/features/manage-workspace-info/index.ts   |  1 +
 .../ui/WorkspaceInfoForm.tsx                  | 86 +++++++++++++++++++
 src/views/settings/ui/SettingsView.tsx        |  3 +-
 3 files changed, 89 insertions(+), 1 deletion(-)
 create mode 100644 src/features/manage-workspace-info/index.ts
 create mode 100644 src/features/manage-workspace-info/ui/WorkspaceInfoForm.tsx

diff --git a/src/features/manage-workspace-info/index.ts b/src/features/manage-workspace-info/index.ts
new file mode 100644
index 0000000..cbf1045
--- /dev/null
+++ b/src/features/manage-workspace-info/index.ts
@@ -0,0 +1 @@
+export { WorkspaceInfoForm } from './ui/WorkspaceInfoForm';
diff --git a/src/features/manage-workspace-info/ui/WorkspaceInfoForm.tsx b/src/features/manage-workspace-info/ui/WorkspaceInfoForm.tsx
new file mode 100644
index 0000000..10d1d7e
--- /dev/null
+++ b/src/features/manage-workspace-info/ui/WorkspaceInfoForm.tsx
@@ -0,0 +1,86 @@
+'use client';
+
+// 워크스페이스 정보(이름·설명) 수정 폼입니다.
+// 백엔드 연동 전이므로 저장은 로컬 상태를 확정(commit)하는 목업으로 동작합니다.
+import { useState } from 'react';
+import type { Workspace } from '@/entities/workspace';
+
+interface WorkspaceInfoFormProps {
+  workspace: Workspace;
+}
+
+export function WorkspaceInfoForm({ workspace }: WorkspaceInfoFormProps) {
+  // committed: 마지막으로 저장된 값. 입력값과 비교해 변경 여부(dirty)를 판단한다.
+  const [committedName, setCommittedName] = useState(workspace.name);
+  const [committedDescription, setCommittedDescription] = useState(workspace.description ?? '');
+
+  const [name, setName] = useState(workspace.name);
+  const [description, setDescription] = useState(workspace.description ?? '');
+  const [isSaved, setIsSaved] = useState(false);
+
+  const isDirty = name !== committedName || description !== committedDescription;
+  const canSubmit = name.trim().length > 0 && isDirty;
+
+  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    if (!canSubmit) {
+      return;
+    }
+
+    // TODO: 백엔드 연동 시 워크스페이스 정보 저장 API 호출로 교체한다.
+    const nextName = name.trim();
+    setName(nextName);
+    setCommittedName(nextName);
+    setCommittedDescription(description);
+    setIsSaved(true);
+  };
+
+  return (
+    <section className="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm">
+      <h2 className="text-base font-bold text-slate-950">워크스페이스 정보</h2>
+      <p className="mt-1 text-sm text-slate-500">워크스페이스 이름과 설명을 수정할 수 있어요.</p>
+
+      <form className="mt-6 space-y-5" onSubmit={handleSubmit}>
+        <label className="block">
+          <span className="text-sm font-bold text-slate-900">이름</span>
+          <input
+            value={name}
+            onChange={(event) => {
+              setName(event.target.value);
+              setIsSaved(false);
+            }}
+            placeholder="워크스페이스 이름을 입력하세요."
+            className="mt-2 h-11 w-full rounded-2xl bg-slate-100 px-4 text-sm font-medium text-slate-900 outline-none placeholder:text-slate-400 focus:ring-2 focus:ring-indigo-300"
+          />
+        </label>
+
+        <label className="block">
+          <span className="text-sm font-bold text-slate-900">설명</span>
+          <textarea
+            value={description}
+            onChange={(event) => {
+              setDescription(event.target.value);
+              setIsSaved(false);
+            }}
+            placeholder="워크스페이스를 소개하는 문구를 입력하세요."
+            rows={3}
+            className="mt-2 min-h-24 w-full resize-none rounded-2xl bg-slate-100 px-4 py-3 text-sm font-medium text-slate-900 outline-none placeholder:text-slate-400 focus:ring-2 focus:ring-indigo-300"
+          />
+        </label>
+
+        <div className="flex items-center gap-3">
+          <button
+            type="submit"
+            disabled={!canSubmit}
+            className="h-10 rounded-2xl bg-[var(--color-brand)] px-5 text-sm font-bold text-white hover:bg-indigo-500 disabled:cursor-not-allowed disabled:opacity-50"
+          >
+            저장
+          </button>
+          {isSaved && !isDirty ? (
+            <span className="text-sm font-medium text-emerald-600">저장되었습니다.</span>
+          ) : null}
+        </div>
+      </form>
+    </section>
+  );
+}
diff --git a/src/views/settings/ui/SettingsView.tsx b/src/views/settings/ui/SettingsView.tsx
index c84e68f..cbd188d 100644
--- a/src/views/settings/ui/SettingsView.tsx
+++ b/src/views/settings/ui/SettingsView.tsx
@@ -5,6 +5,7 @@
 // 각 탭의 실제 내용은 이후 feature 컴포넌트로 채운다.
 import Link from 'next/link';
 import type { Workspace } from '@/entities/workspace';
+import { WorkspaceInfoForm } from '@/features/manage-workspace-info';
 import { plusJakartaSans } from '@/shared/lib/fonts';
 import { cn } from '@/shared/lib/utils';
 import { SETTINGS_TABS, type SettingsTabKey } from '../model/settings-tab';
@@ -43,7 +44,7 @@ export function SettingsView({ workspace, workspaceId, activeTab }: SettingsView
       </nav>
 
       <div className="mt-6">
-        {activeTab === 'workspace' && <SettingsTabPlaceholder label="워크스페이스 정보" />}
+        {activeTab === 'workspace' && <WorkspaceInfoForm workspace={workspace} />}
         {activeTab === 'members' && <SettingsTabPlaceholder label="팀원 관리" />}
         {activeTab === 'profile' && <SettingsTabPlaceholder label="프로필" />}
       </div>

From 1e6ef140fc178a7fe868a0c33711ea20e5ef4b84 Mon Sep 17 00:00:00 2001
From: Kwon812 <tre723@naver.com>
Date: Thu, 9 Jul 2026 12:59:03 +0900
Subject: [PATCH 3/8] =?UTF-8?q?feat:=20=ED=8C=80=EC=9B=90=EA=B4=80?=
 =?UTF-8?q?=EB=A6=AC/=EC=B4=88=EB=8C=80=20=ED=83=AD=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../model/mock-workspace-members.ts           |  54 ++++++++
 .../manage-workspace-members/index.ts         |   4 +
 .../model/use-member-management.ts            |  83 +++++++++++
 .../ui/MemberInviteSection.tsx                | 131 ++++++++++++++++++
 .../ui/MemberList.tsx                         |  77 ++++++++++
 .../ui/MemberManagementPanel.tsx              |  41 ++++++
 src/views/settings/ui/SettingsView.tsx        |   3 +-
 7 files changed, 392 insertions(+), 1 deletion(-)
 create mode 100644 src/features/manage-workspace-members/index.ts
 create mode 100644 src/features/manage-workspace-members/model/use-member-management.ts
 create mode 100644 src/features/manage-workspace-members/ui/MemberInviteSection.tsx
 create mode 100644 src/features/manage-workspace-members/ui/MemberList.tsx
 create mode 100644 src/features/manage-workspace-members/ui/MemberManagementPanel.tsx

diff --git a/src/entities/workspace-member/model/mock-workspace-members.ts b/src/entities/workspace-member/model/mock-workspace-members.ts
index 23c31b5..35ebf39 100644
--- a/src/entities/workspace-member/model/mock-workspace-members.ts
+++ b/src/entities/workspace-member/model/mock-workspace-members.ts
@@ -92,6 +92,60 @@ export const mockWorkspaceMembers: WorkspaceMember[] = [
     role: 'member',
     status: 'invited',
   },
+  {
+    workspaceId: 'team-workspace',
+    userId: 'user-1',
+    workspaceNickname: '김민서',
+    avatarLabel: '김',
+    email: 'minseo@example.com',
+    role: 'owner',
+    status: 'joined',
+  },
+  {
+    workspaceId: 'team-workspace',
+    userId: 'user-2',
+    workspaceNickname: '이준혁',
+    avatarLabel: '이',
+    email: 'junhyeok@example.com',
+    role: 'member',
+    status: 'joined',
+  },
+  {
+    workspaceId: 'team-workspace',
+    userId: 'user-3',
+    workspaceNickname: '박소연',
+    avatarLabel: '박',
+    email: 'soyeon@example.com',
+    role: 'member',
+    status: 'invited',
+  },
+  {
+    workspaceId: 'side-workspace',
+    userId: 'user-1',
+    workspaceNickname: '김민서',
+    avatarLabel: '김',
+    email: 'minseo@example.com',
+    role: 'owner',
+    status: 'joined',
+  },
+  {
+    workspaceId: 'side-workspace',
+    userId: 'user-2',
+    workspaceNickname: '정우진',
+    avatarLabel: '정',
+    email: 'woojin@example.com',
+    role: 'member',
+    status: 'joined',
+  },
+  {
+    workspaceId: 'side-workspace',
+    userId: 'user-3',
+    workspaceNickname: '이서영',
+    avatarLabel: '이',
+    email: 'seoyeong@example.com',
+    role: 'member',
+    status: 'invited',
+  },
 ];
 
 export function getMockWorkspaceMembersByWorkspaceId(workspaceId: string): WorkspaceMember[] {
diff --git a/src/features/manage-workspace-members/index.ts b/src/features/manage-workspace-members/index.ts
new file mode 100644
index 0000000..b1780a0
--- /dev/null
+++ b/src/features/manage-workspace-members/index.ts
@@ -0,0 +1,4 @@
+export { MemberManagementPanel } from './ui/MemberManagementPanel';
+export { MemberInviteSection } from './ui/MemberInviteSection';
+export { MemberList } from './ui/MemberList';
+export { useMemberManagement, type InviteMode } from './model/use-member-management';
diff --git a/src/features/manage-workspace-members/model/use-member-management.ts b/src/features/manage-workspace-members/model/use-member-management.ts
new file mode 100644
index 0000000..d1909d1
--- /dev/null
+++ b/src/features/manage-workspace-members/model/use-member-management.ts
@@ -0,0 +1,83 @@
+'use client';
+
+// 팀원 초대(이메일/링크)와 멤버 목록 상태를 관리합니다.
+// 백엔드 연동 전이므로 초대는 목록에 '초대됨' 상태의 멤버를 추가하는 목업으로 동작합니다.
+import { useMemo, useState } from 'react';
+import {
+  getMockWorkspaceMembersByWorkspaceId,
+  type WorkspaceMember,
+} from '@/entities/workspace-member';
+
+export type InviteMode = 'email' | 'link';
+
+interface UseMemberManagementParams {
+  workspaceId: string;
+}
+
+const EMAIL_PATTERN = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+function createMemberId() {
+  if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function') {
+    return `member-${crypto.randomUUID()}`;
+  }
+
+  return `member-${Date.now()}-${Math.random().toString(36).slice(2, 10)}`;
+}
+
+function toNickname(email: string) {
+  return email.split('@')[0];
+}
+
+function toAvatarLabel(email: string) {
+  return email.charAt(0).toUpperCase();
+}
+
+export function useMemberManagement({ workspaceId }: UseMemberManagementParams) {
+  const [members, setMembers] = useState<WorkspaceMember[]>(() =>
+    getMockWorkspaceMembersByWorkspaceId(workspaceId),
+  );
+  const [inviteMode, setInviteMode] = useState<InviteMode>('email');
+  const [email, setEmail] = useState('');
+
+  // 백엔드 연동 시 서버에서 발급한 초대 링크로 교체한다.
+  const inviteLink = `https://syncly.app/invite/${workspaceId}`;
+
+  const trimmedEmail = email.trim();
+  const isDuplicate = useMemo(
+    () => members.some((member) => member.email.toLowerCase() === trimmedEmail.toLowerCase()),
+    [members, trimmedEmail],
+  );
+  const canInvite = EMAIL_PATTERN.test(trimmedEmail) && !isDuplicate;
+
+  const inviteByEmail = () => {
+    if (!canInvite) {
+      return;
+    }
+
+    setMembers((previous) => [
+      ...previous,
+      {
+        workspaceId,
+        userId: createMemberId(),
+        workspaceNickname: toNickname(trimmedEmail),
+        avatarLabel: toAvatarLabel(trimmedEmail),
+        email: trimmedEmail,
+        role: 'member',
+        status: 'invited',
+      },
+    ]);
+    setEmail('');
+  };
+
+  return {
+    members,
+    inviteMode,
+    setInviteMode,
+    email,
+    setEmail,
+    inviteLink,
+    canInvite,
+    isDuplicate,
+    inviteByEmail,
+  };
+}
diff --git a/src/features/manage-workspace-members/ui/MemberInviteSection.tsx b/src/features/manage-workspace-members/ui/MemberInviteSection.tsx
new file mode 100644
index 0000000..a4d952f
--- /dev/null
+++ b/src/features/manage-workspace-members/ui/MemberInviteSection.tsx
@@ -0,0 +1,131 @@
+'use client';
+
+// 팀원 초대 섹션 — 이메일/초대 링크 모드를 토글로 전환한다.
+import { useState } from 'react';
+import { Check, Copy, Link2, UserRoundPlus } from 'lucide-react';
+import { cn } from '@/shared/lib/utils';
+import type { InviteMode } from '../model/use-member-management';
+
+interface MemberInviteSectionProps {
+  inviteMode: InviteMode;
+  onChangeInviteMode: (mode: InviteMode) => void;
+  email: string;
+  onChangeEmail: (email: string) => void;
+  canInvite: boolean;
+  isDuplicate: boolean;
+  onInviteByEmail: () => void;
+  inviteLink: string;
+}
+
+const INVITE_MODES: { key: InviteMode; label: string }[] = [
+  { key: 'email', label: '이메일' },
+  { key: 'link', label: '초대 링크' },
+];
+
+export function MemberInviteSection({
+  inviteMode,
+  onChangeInviteMode,
+  email,
+  onChangeEmail,
+  canInvite,
+  isDuplicate,
+  onInviteByEmail,
+  inviteLink,
+}: MemberInviteSectionProps) {
+  const [isCopied, setIsCopied] = useState(false);
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(inviteLink);
+      setIsCopied(true);
+      window.setTimeout(() => setIsCopied(false), 2000);
+    } catch {
+      // 클립보드 접근이 차단된 환경에서는 조용히 무시한다.
+    }
+  };
+
+  return (
+    <section className="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm">
+      <h2 className="text-base font-bold text-slate-950">팀원 초대</h2>
+
+      <div className="mt-4 inline-flex rounded-full bg-slate-100 p-1">
+        {INVITE_MODES.map((mode) => {
+          const isActive = mode.key === inviteMode;
+
+          return (
+            <button
+              key={mode.key}
+              type="button"
+              onClick={() => onChangeInviteMode(mode.key)}
+              aria-pressed={isActive}
+              className={cn(
+                'rounded-full px-4 py-1.5 text-sm font-medium transition-colors',
+                isActive ? 'bg-white text-slate-900 shadow-sm' : 'text-slate-500 hover:text-slate-800',
+              )}
+            >
+              {mode.label}
+            </button>
+          );
+        })}
+      </div>
+
+      {inviteMode === 'email' ? (
+        <form
+          className="mt-4 flex items-center gap-3"
+          onSubmit={(event) => {
+            event.preventDefault();
+            onInviteByEmail();
+          }}
+        >
+          <label className="flex-1">
+            <span className="sr-only">초대할 이메일</span>
+            <input
+              type="email"
+              value={email}
+              onChange={(event) => onChangeEmail(event.target.value)}
+              placeholder="초대할 이메일"
+              aria-invalid={isDuplicate || undefined}
+              className="h-11 w-full rounded-2xl bg-slate-100 px-4 text-sm font-medium text-slate-900 outline-none placeholder:text-slate-400 focus:ring-2 focus:ring-indigo-300"
+            />
+          </label>
+          <button
+            type="submit"
+            disabled={!canInvite}
+            className="flex h-11 shrink-0 items-center gap-2 rounded-2xl bg-[var(--color-brand)] px-5 text-sm font-bold text-white hover:bg-indigo-500 disabled:cursor-not-allowed disabled:opacity-50"
+          >
+            <UserRoundPlus className="h-4 w-4" aria-hidden="true" />
+            초대
+          </button>
+        </form>
+      ) : (
+        <div className="mt-4 flex items-center gap-3">
+          <div className="flex h-11 flex-1 items-center gap-2 rounded-2xl border border-slate-200 px-4 text-sm text-slate-600">
+            <Link2 className="h-4 w-4 shrink-0 text-slate-400" aria-hidden="true" />
+            <span className="truncate">{inviteLink}</span>
+          </div>
+          <button
+            type="button"
+            onClick={handleCopy}
+            className="flex h-11 shrink-0 items-center gap-2 rounded-2xl bg-[var(--color-brand)] px-5 text-sm font-bold text-white hover:bg-indigo-500"
+          >
+            {isCopied ? (
+              <Check className="h-4 w-4" aria-hidden="true" />
+            ) : (
+              <Copy className="h-4 w-4" aria-hidden="true" />
+            )}
+            {isCopied ? '복사됨' : '복사'}
+          </button>
+        </div>
+      )}
+
+      <p className="mt-3 text-sm text-slate-500">
+        {inviteMode === 'email'
+          ? '아직 가입하지 않은 사용자는 가입 시 자동으로 연결됩니다.'
+          : '링크를 아는 사람은 누구나 이 워크스페이스에 참여할 수 있어요.'}
+      </p>
+      {inviteMode === 'email' && isDuplicate ? (
+        <p className="mt-1 text-sm font-medium text-rose-500">이미 초대된 이메일이에요.</p>
+      ) : null}
+    </section>
+  );
+}
diff --git a/src/features/manage-workspace-members/ui/MemberList.tsx b/src/features/manage-workspace-members/ui/MemberList.tsx
new file mode 100644
index 0000000..9fb47a5
--- /dev/null
+++ b/src/features/manage-workspace-members/ui/MemberList.tsx
@@ -0,0 +1,77 @@
+'use client';
+
+// 멤버 목록 — 아바타, 이름/이메일, 역할·상태 뱃지를 표시한다.
+import {
+  WORKSPACE_MEMBER_ROLE_META,
+  WORKSPACE_MEMBER_STATUS_META,
+  type WorkspaceMember,
+} from '@/entities/workspace-member';
+import { Badge } from '@/shared/ui/badge';
+import { cn } from '@/shared/lib/utils';
+
+interface MemberListProps {
+  members: WorkspaceMember[];
+  currentUserId: string;
+}
+
+// 아바타 배경 색상 팔레트 — 멤버 순서에 따라 순환 배정한다.
+const AVATAR_COLORS = [
+  'bg-orange-400',
+  'bg-indigo-400',
+  'bg-emerald-400',
+  'bg-rose-400',
+  'bg-sky-400',
+  'bg-amber-400',
+];
+
+export function MemberList({ members, currentUserId }: MemberListProps) {
+  return (
+    <section className="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm">
+      <h2 className="text-base font-bold text-slate-950">멤버 ({members.length})</h2>
+
+      {members.length === 0 ? (
+        <p className="mt-4 text-sm text-slate-500">아직 참여한 멤버가 없어요. 팀원을 초대해 보세요.</p>
+      ) : (
+        <ul className="mt-4 space-y-3">
+          {members.map((member, index) => {
+            const roleMeta = WORKSPACE_MEMBER_ROLE_META[member.role];
+            const statusMeta = WORKSPACE_MEMBER_STATUS_META[member.status];
+            const isCurrentUser = member.userId === currentUserId;
+
+            return (
+              <li
+                key={member.userId}
+                className={cn(
+                  'flex items-center gap-4 rounded-2xl border p-4',
+                  isCurrentUser ? 'border-indigo-200 bg-indigo-50/40' : 'border-slate-200',
+                )}
+              >
+                <span
+                  className={cn(
+                    'flex h-10 w-10 shrink-0 items-center justify-center rounded-full text-sm font-bold text-white',
+                    AVATAR_COLORS[index % AVATAR_COLORS.length],
+                  )}
+                  aria-hidden="true"
+                >
+                  {member.avatarLabel}
+                </span>
+
+                <div className="min-w-0 flex-1">
+                  <p className="truncate text-sm font-bold text-slate-900">
+                    {member.workspaceNickname}
+                  </p>
+                  <p className="truncate text-sm text-slate-500">{member.email}</p>
+                </div>
+
+                <div className="flex shrink-0 items-center gap-2">
+                  <Badge tone={roleMeta.tone}>{roleMeta.label}</Badge>
+                  <Badge tone={statusMeta.tone}>{statusMeta.label}</Badge>
+                </div>
+              </li>
+            );
+          })}
+        </ul>
+      )}
+    </section>
+  );
+}
diff --git a/src/features/manage-workspace-members/ui/MemberManagementPanel.tsx b/src/features/manage-workspace-members/ui/MemberManagementPanel.tsx
new file mode 100644
index 0000000..59d514f
--- /dev/null
+++ b/src/features/manage-workspace-members/ui/MemberManagementPanel.tsx
@@ -0,0 +1,41 @@
+'use client';
+
+// 팀원 관리 탭 패널 — 초대 섹션과 멤버 목록을 상태 훅으로 묶는다.
+import { mockCurrentWorkspaceMember } from '@/entities/workspace-member';
+import { useMemberManagement } from '../model/use-member-management';
+import { MemberInviteSection } from './MemberInviteSection';
+import { MemberList } from './MemberList';
+
+interface MemberManagementPanelProps {
+  workspaceId: string;
+}
+
+export function MemberManagementPanel({ workspaceId }: MemberManagementPanelProps) {
+  const {
+    members,
+    inviteMode,
+    setInviteMode,
+    email,
+    setEmail,
+    inviteLink,
+    canInvite,
+    isDuplicate,
+    inviteByEmail,
+  } = useMemberManagement({ workspaceId });
+
+  return (
+    <div className="space-y-6">
+      <MemberInviteSection
+        inviteMode={inviteMode}
+        onChangeInviteMode={setInviteMode}
+        email={email}
+        onChangeEmail={setEmail}
+        canInvite={canInvite}
+        isDuplicate={isDuplicate}
+        onInviteByEmail={inviteByEmail}
+        inviteLink={inviteLink}
+      />
+      <MemberList members={members} currentUserId={mockCurrentWorkspaceMember.userId} />
+    </div>
+  );
+}
diff --git a/src/views/settings/ui/SettingsView.tsx b/src/views/settings/ui/SettingsView.tsx
index cbd188d..3d22f6a 100644
--- a/src/views/settings/ui/SettingsView.tsx
+++ b/src/views/settings/ui/SettingsView.tsx
@@ -6,6 +6,7 @@
 import Link from 'next/link';
 import type { Workspace } from '@/entities/workspace';
 import { WorkspaceInfoForm } from '@/features/manage-workspace-info';
+import { MemberManagementPanel } from '@/features/manage-workspace-members';
 import { plusJakartaSans } from '@/shared/lib/fonts';
 import { cn } from '@/shared/lib/utils';
 import { SETTINGS_TABS, type SettingsTabKey } from '../model/settings-tab';
@@ -45,7 +46,7 @@ export function SettingsView({ workspace, workspaceId, activeTab }: SettingsView
 
       <div className="mt-6">
         {activeTab === 'workspace' && <WorkspaceInfoForm workspace={workspace} />}
-        {activeTab === 'members' && <SettingsTabPlaceholder label="팀원 관리" />}
+        {activeTab === 'members' && <MemberManagementPanel workspaceId={workspaceId} />}
         {activeTab === 'profile' && <SettingsTabPlaceholder label="프로필" />}
       </div>
     </div>

From fa7a1b86dc1c5622fa01da0fb81e89865c7a59cf Mon Sep 17 00:00:00 2001
From: Kwon812 <tre723@naver.com>
Date: Thu, 9 Jul 2026 13:28:42 +0900
Subject: [PATCH 4/8] =?UTF-8?q?feat:=20=ED=94=84=EB=A1=9C=ED=95=84=20?=
 =?UTF-8?q?=EC=84=A4=EC=A0=95=20=ED=83=AD=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../[workspaceId]/settings/page.tsx           | 14 +++-
 src/features/manage-member-profile/index.ts   |  1 +
 .../ui/MemberProfileForm.tsx                  | 68 +++++++++++++++++++
 .../model/use-member-management.ts            | 13 ++--
 .../ui/MemberManagementPanel.tsx              | 15 ++--
 src/views/settings/ui/SettingsView.tsx        | 35 ++++++----
 6 files changed, 119 insertions(+), 27 deletions(-)
 create mode 100644 src/features/manage-member-profile/index.ts
 create mode 100644 src/features/manage-member-profile/ui/MemberProfileForm.tsx

diff --git a/src/app/workspaces/[workspaceId]/settings/page.tsx b/src/app/workspaces/[workspaceId]/settings/page.tsx
index 56416a2..99658a4 100644
--- a/src/app/workspaces/[workspaceId]/settings/page.tsx
+++ b/src/app/workspaces/[workspaceId]/settings/page.tsx
@@ -1,7 +1,12 @@
+// 설정 페이지 라우트 — 활성 탭을 searchParam(?tab=)으로 읽고, 표시에 필요한 데이터를 RSC에서 조회해 주입한다.
+// 실 API 전환 시 아래 조회부만 async(Supabase)로 교체하면 되고, 하위 뷰/훅은 그대로 둔다.
 import { notFound } from 'next/navigation';
 import { getMockWorkspaceById } from '@/entities/workspace';
-import { SettingsView } from '@/views/settings';
-import { parseSettingsTab } from '@/views/settings';
+import {
+  getMockWorkspaceMembersByWorkspaceId,
+  mockCurrentWorkspaceMember,
+} from '@/entities/workspace-member';
+import { SettingsView, parseSettingsTab } from '@/views/settings';
 
 interface WorkspaceSettingsPageProps {
   params: Promise<{
@@ -24,11 +29,16 @@ export default async function WorkspaceSettingsPage({
     notFound();
   }
 
+  const members = getMockWorkspaceMembersByWorkspaceId(workspaceId);
+
   return (
     <SettingsView
       workspace={workspace}
       workspaceId={workspaceId}
       activeTab={parseSettingsTab(tab)}
+      members={members}
+      currentUserId={mockCurrentWorkspaceMember.userId}
+      currentNickname={mockCurrentWorkspaceMember.workspaceNickname}
     />
   );
 }
diff --git a/src/features/manage-member-profile/index.ts b/src/features/manage-member-profile/index.ts
new file mode 100644
index 0000000..29c1fad
--- /dev/null
+++ b/src/features/manage-member-profile/index.ts
@@ -0,0 +1 @@
+export { MemberProfileForm } from './ui/MemberProfileForm';
diff --git a/src/features/manage-member-profile/ui/MemberProfileForm.tsx b/src/features/manage-member-profile/ui/MemberProfileForm.tsx
new file mode 100644
index 0000000..7c7bb45
--- /dev/null
+++ b/src/features/manage-member-profile/ui/MemberProfileForm.tsx
@@ -0,0 +1,68 @@
+'use client';
+
+// 프로필 탭 — 현재 사용자의 워크스페이스 닉네임을 수정한다.
+// 초기 닉네임은 서버(RSC)에서 주입받고, 저장은 백엔드 연동 전까지 로컬 상태를 확정하는 목업으로 동작한다.
+import { useState } from 'react';
+
+interface MemberProfileFormProps {
+  initialNickname: string;
+}
+
+export function MemberProfileForm({ initialNickname }: MemberProfileFormProps) {
+  const [committedNickname, setCommittedNickname] = useState(initialNickname);
+  const [nickname, setNickname] = useState(initialNickname);
+  const [isSaved, setIsSaved] = useState(false);
+
+  const isDirty = nickname !== committedNickname;
+  const canSubmit = nickname.trim().length > 0 && isDirty;
+
+  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    if (!canSubmit) {
+      return;
+    }
+
+    // TODO: 백엔드 연동 시 닉네임 저장 API 호출로 교체한다.
+    const nextNickname = nickname.trim();
+    setNickname(nextNickname);
+    setCommittedNickname(nextNickname);
+    setIsSaved(true);
+  };
+
+  return (
+    <section className="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm">
+      <h2 className="text-base font-bold text-slate-950">프로필</h2>
+      <p className="mt-1 text-sm text-slate-500">
+        이 워크스페이스에서 표시되는 닉네임을 수정할 수 있어요.
+      </p>
+
+      <form className="mt-6 space-y-5" onSubmit={handleSubmit}>
+        <label className="block">
+          <span className="text-sm font-bold text-slate-900">닉네임</span>
+          <input
+            value={nickname}
+            onChange={(event) => {
+              setNickname(event.target.value);
+              setIsSaved(false);
+            }}
+            placeholder="닉네임을 입력하세요."
+            className="mt-2 h-11 w-full rounded-2xl bg-slate-100 px-4 text-sm font-medium text-slate-900 outline-none placeholder:text-slate-400 focus:ring-2 focus:ring-indigo-300"
+          />
+        </label>
+
+        <div className="flex items-center gap-3">
+          <button
+            type="submit"
+            disabled={!canSubmit}
+            className="h-10 rounded-2xl bg-[var(--color-brand)] px-5 text-sm font-bold text-white hover:bg-indigo-500 disabled:cursor-not-allowed disabled:opacity-50"
+          >
+            저장
+          </button>
+          {isSaved && !isDirty ? (
+            <span className="text-sm font-medium text-emerald-600">저장되었습니다.</span>
+          ) : null}
+        </div>
+      </form>
+    </section>
+  );
+}
diff --git a/src/features/manage-workspace-members/model/use-member-management.ts b/src/features/manage-workspace-members/model/use-member-management.ts
index d1909d1..88e8ed1 100644
--- a/src/features/manage-workspace-members/model/use-member-management.ts
+++ b/src/features/manage-workspace-members/model/use-member-management.ts
@@ -1,17 +1,16 @@
 'use client';
 
 // 팀원 초대(이메일/링크)와 멤버 목록 상태를 관리합니다.
+// 멤버 목록은 서버(RSC)에서 조회해 initialMembers로 주입받고, 훅은 로컬 상태로 seed만 한다.
 // 백엔드 연동 전이므로 초대는 목록에 '초대됨' 상태의 멤버를 추가하는 목업으로 동작합니다.
 import { useMemo, useState } from 'react';
-import {
-  getMockWorkspaceMembersByWorkspaceId,
-  type WorkspaceMember,
-} from '@/entities/workspace-member';
+import type { WorkspaceMember } from '@/entities/workspace-member';
 
 export type InviteMode = 'email' | 'link';
 
 interface UseMemberManagementParams {
   workspaceId: string;
+  initialMembers: WorkspaceMember[];
 }
 
 const EMAIL_PATTERN = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
@@ -32,10 +31,8 @@ function toAvatarLabel(email: string) {
   return email.charAt(0).toUpperCase();
 }
 
-export function useMemberManagement({ workspaceId }: UseMemberManagementParams) {
-  const [members, setMembers] = useState<WorkspaceMember[]>(() =>
-    getMockWorkspaceMembersByWorkspaceId(workspaceId),
-  );
+export function useMemberManagement({ workspaceId, initialMembers }: UseMemberManagementParams) {
+  const [members, setMembers] = useState<WorkspaceMember[]>(initialMembers);
   const [inviteMode, setInviteMode] = useState<InviteMode>('email');
   const [email, setEmail] = useState('');
 
diff --git a/src/features/manage-workspace-members/ui/MemberManagementPanel.tsx b/src/features/manage-workspace-members/ui/MemberManagementPanel.tsx
index 59d514f..9af4c43 100644
--- a/src/features/manage-workspace-members/ui/MemberManagementPanel.tsx
+++ b/src/features/manage-workspace-members/ui/MemberManagementPanel.tsx
@@ -1,16 +1,23 @@
 'use client';
 
 // 팀원 관리 탭 패널 — 초대 섹션과 멤버 목록을 상태 훅으로 묶는다.
-import { mockCurrentWorkspaceMember } from '@/entities/workspace-member';
+// 멤버 목록/현재 사용자 식별자는 서버(RSC)에서 조회해 prop으로 주입받는다.
+import type { WorkspaceMember } from '@/entities/workspace-member';
 import { useMemberManagement } from '../model/use-member-management';
 import { MemberInviteSection } from './MemberInviteSection';
 import { MemberList } from './MemberList';
 
 interface MemberManagementPanelProps {
   workspaceId: string;
+  initialMembers: WorkspaceMember[];
+  currentUserId: string;
 }
 
-export function MemberManagementPanel({ workspaceId }: MemberManagementPanelProps) {
+export function MemberManagementPanel({
+  workspaceId,
+  initialMembers,
+  currentUserId,
+}: MemberManagementPanelProps) {
   const {
     members,
     inviteMode,
@@ -21,7 +28,7 @@ export function MemberManagementPanel({ workspaceId }: MemberManagementPanelProp
     canInvite,
     isDuplicate,
     inviteByEmail,
-  } = useMemberManagement({ workspaceId });
+  } = useMemberManagement({ workspaceId, initialMembers });
 
   return (
     <div className="space-y-6">
@@ -35,7 +42,7 @@ export function MemberManagementPanel({ workspaceId }: MemberManagementPanelProp
         onInviteByEmail={inviteByEmail}
         inviteLink={inviteLink}
       />
-      <MemberList members={members} currentUserId={mockCurrentWorkspaceMember.userId} />
+      <MemberList members={members} currentUserId={currentUserId} />
     </div>
   );
 }
diff --git a/src/views/settings/ui/SettingsView.tsx b/src/views/settings/ui/SettingsView.tsx
index 3d22f6a..85c8452 100644
--- a/src/views/settings/ui/SettingsView.tsx
+++ b/src/views/settings/ui/SettingsView.tsx
@@ -2,11 +2,13 @@
 
 // 설정 페이지 셸 — 폰트/레이아웃을 잡고 URL 쿼리(?tab=) 기준으로 탭을 전환한다.
 // 활성 탭은 서버에서 파싱해 prop으로 받는다(스프린트 보드와 동일한 URL 기반 패턴).
-// 각 탭의 실제 내용은 이후 feature 컴포넌트로 채운다.
+// 각 탭 내용은 feature 컴포넌트에 위임하고, 표시 데이터는 서버에서 주입받는다.
 import Link from 'next/link';
 import type { Workspace } from '@/entities/workspace';
+import type { WorkspaceMember } from '@/entities/workspace-member';
 import { WorkspaceInfoForm } from '@/features/manage-workspace-info';
 import { MemberManagementPanel } from '@/features/manage-workspace-members';
+import { MemberProfileForm } from '@/features/manage-member-profile';
 import { plusJakartaSans } from '@/shared/lib/fonts';
 import { cn } from '@/shared/lib/utils';
 import { SETTINGS_TABS, type SettingsTabKey } from '../model/settings-tab';
@@ -15,9 +17,19 @@ interface SettingsViewProps {
   workspace: Workspace;
   workspaceId: string;
   activeTab: SettingsTabKey;
+  members: WorkspaceMember[];
+  currentUserId: string;
+  currentNickname: string;
 }
 
-export function SettingsView({ workspace, workspaceId, activeTab }: SettingsViewProps) {
+export function SettingsView({
+  workspace,
+  workspaceId,
+  activeTab,
+  members,
+  currentUserId,
+  currentNickname,
+}: SettingsViewProps) {
   return (
     <div className={`${plusJakartaSans.className} mx-auto max-w-3xl`}>
       <h1 className="text-2xl font-bold text-slate-950">설정</h1>
@@ -46,18 +58,15 @@ export function SettingsView({ workspace, workspaceId, activeTab }: SettingsView
 
       <div className="mt-6">
         {activeTab === 'workspace' && <WorkspaceInfoForm workspace={workspace} />}
-        {activeTab === 'members' && <MemberManagementPanel workspaceId={workspaceId} />}
-        {activeTab === 'profile' && <SettingsTabPlaceholder label="프로필" />}
+        {activeTab === 'members' && (
+          <MemberManagementPanel
+            workspaceId={workspaceId}
+            initialMembers={members}
+            currentUserId={currentUserId}
+          />
+        )}
+        {activeTab === 'profile' && <MemberProfileForm initialNickname={currentNickname} />}
       </div>
     </div>
   );
 }
-
-// TODO(T4~T6): 각 탭을 feature 컴포넌트로 교체한다.
-function SettingsTabPlaceholder({ label }: { label: string }) {
-  return (
-    <section className="rounded-2xl border border-slate-200 bg-white p-6 text-sm text-slate-500">
-      {label} 탭 (구현 예정)
-    </section>
-  );
-}

From ff78109af8dd08a456df8dda047390a4b1fc9858 Mon Sep 17 00:00:00 2001
From: Kwon812 <tre723@naver.com>
Date: Thu, 9 Jul 2026 13:35:10 +0900
Subject: [PATCH 5/8] =?UTF-8?q?=20refactor:=20=ED=83=AD=20=EB=84=A4?=
 =?UTF-8?q?=EB=B9=84=EA=B2=8C=EC=9D=B4=EC=85=98=EC=9D=84=20SettingsTabs=20?=
 =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=EB=A1=9C=20=EB=B6=84?=
 =?UTF-8?q?=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/settings/ui/SettingsTabs.tsx | 34 ++++++++++++++++++++++++++
 src/views/settings/ui/SettingsView.tsx | 27 +++-----------------
 2 files changed, 37 insertions(+), 24 deletions(-)
 create mode 100644 src/views/settings/ui/SettingsTabs.tsx

diff --git a/src/views/settings/ui/SettingsTabs.tsx b/src/views/settings/ui/SettingsTabs.tsx
new file mode 100644
index 0000000..6f68c9f
--- /dev/null
+++ b/src/views/settings/ui/SettingsTabs.tsx
@@ -0,0 +1,34 @@
+// 설정 페이지 탭 네비게이션 — URL 쿼리(?tab=) 기반으로 활성 탭을 표시한다.
+import Link from 'next/link';
+import { cn } from '@/shared/lib/utils';
+import { SETTINGS_TABS, type SettingsTabKey } from '../model/settings-tab';
+
+interface SettingsTabsProps {
+  activeTab: SettingsTabKey;
+}
+
+export function SettingsTabs({ activeTab }: SettingsTabsProps) {
+  return (
+    <nav className="mt-6 flex gap-6 border-b border-slate-200" aria-label="설정 탭">
+      {SETTINGS_TABS.map((tab) => {
+        const isActive = tab.key === activeTab;
+
+        return (
+          <Link
+            key={tab.key}
+            href={`?tab=${tab.key}`}
+            aria-current={isActive ? 'page' : undefined}
+            className={cn(
+              '-mb-px border-b-2 pb-3 text-sm font-medium transition-colors',
+              isActive
+                ? 'border-[var(--color-brand)] text-[var(--color-brand)]'
+                : 'border-transparent text-slate-500 hover:text-slate-800',
+            )}
+          >
+            {tab.label}
+          </Link>
+        );
+      })}
+    </nav>
+  );
+}
diff --git a/src/views/settings/ui/SettingsView.tsx b/src/views/settings/ui/SettingsView.tsx
index 85c8452..0dddc57 100644
--- a/src/views/settings/ui/SettingsView.tsx
+++ b/src/views/settings/ui/SettingsView.tsx
@@ -3,15 +3,14 @@
 // 설정 페이지 셸 — 폰트/레이아웃을 잡고 URL 쿼리(?tab=) 기준으로 탭을 전환한다.
 // 활성 탭은 서버에서 파싱해 prop으로 받는다(스프린트 보드와 동일한 URL 기반 패턴).
 // 각 탭 내용은 feature 컴포넌트에 위임하고, 표시 데이터는 서버에서 주입받는다.
-import Link from 'next/link';
 import type { Workspace } from '@/entities/workspace';
 import type { WorkspaceMember } from '@/entities/workspace-member';
 import { WorkspaceInfoForm } from '@/features/manage-workspace-info';
 import { MemberManagementPanel } from '@/features/manage-workspace-members';
 import { MemberProfileForm } from '@/features/manage-member-profile';
 import { plusJakartaSans } from '@/shared/lib/fonts';
-import { cn } from '@/shared/lib/utils';
-import { SETTINGS_TABS, type SettingsTabKey } from '../model/settings-tab';
+import type { SettingsTabKey } from '../model/settings-tab';
+import { SettingsTabs } from './SettingsTabs';
 
 interface SettingsViewProps {
   workspace: Workspace;
@@ -34,27 +33,7 @@ export function SettingsView({
     <div className={`${plusJakartaSans.className} mx-auto max-w-3xl`}>
       <h1 className="text-2xl font-bold text-slate-950">설정</h1>
 
-      <nav className="mt-6 flex gap-6 border-b border-slate-200" aria-label="설정 탭">
-        {SETTINGS_TABS.map((tab) => {
-          const isActive = tab.key === activeTab;
-
-          return (
-            <Link
-              key={tab.key}
-              href={`?tab=${tab.key}`}
-              aria-current={isActive ? 'page' : undefined}
-              className={cn(
-                '-mb-px border-b-2 pb-3 text-sm font-medium transition-colors',
-                isActive
-                  ? 'border-[var(--color-brand)] text-[var(--color-brand)]'
-                  : 'border-transparent text-slate-500 hover:text-slate-800',
-              )}
-            >
-              {tab.label}
-            </Link>
-          );
-        })}
-      </nav>
+      <SettingsTabs activeTab={activeTab} />
 
       <div className="mt-6">
         {activeTab === 'workspace' && <WorkspaceInfoForm workspace={workspace} />}

From e8740ef0fb4b7a425fe6c45283a34da82c332545 Mon Sep 17 00:00:00 2001
From: Kwon812 <tre723@naver.com>
Date: Thu, 9 Jul 2026 13:46:58 +0900
Subject: [PATCH 6/8] =?UTF-8?q?fix:=20=EB=8C=80=EC=8B=9C=EB=B3=B4=EB=93=9C?=
 =?UTF-8?q?=20=EC=B5=9C=EA=B7=BC=20=ED=9A=8C=EC=9D=98=EB=A1=9D=20=EC=9C=84?=
 =?UTF-8?q?=EC=A0=AF=20=EC=97=94=ED=8B=B0=ED=8B=B0=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../side-project/meeting-note/index.ts        |  3 --
 .../meeting-note/model/meeting-note.mock.ts   | 29 -------------------
 .../meeting-note/model/meeting-note.types.ts  |  8 -----
 .../dashboard-recent-notes/ui/RecentNotes.tsx | 23 +++++++++------
 4 files changed, 14 insertions(+), 49 deletions(-)
 delete mode 100644 src/entities/side-project/meeting-note/index.ts
 delete mode 100644 src/entities/side-project/meeting-note/model/meeting-note.mock.ts
 delete mode 100644 src/entities/side-project/meeting-note/model/meeting-note.types.ts

diff --git a/src/entities/side-project/meeting-note/index.ts b/src/entities/side-project/meeting-note/index.ts
deleted file mode 100644
index 85fa5ae..0000000
--- a/src/entities/side-project/meeting-note/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-// meeting-note 엔티티의 Public API (모델)
-export { type MeetingNote } from './model/meeting-note.types';
-export { mockMeetingNotes } from './model/meeting-note.mock';
diff --git a/src/entities/side-project/meeting-note/model/meeting-note.mock.ts b/src/entities/side-project/meeting-note/model/meeting-note.mock.ts
deleted file mode 100644
index 93b0f37..0000000
--- a/src/entities/side-project/meeting-note/model/meeting-note.mock.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-// 회의록 목데이터
-import type { MeetingNote } from './meeting-note.types';
-
-export const mockMeetingNotes: MeetingNote[] = [
-  {
-    id: 'note-1',
-    title: 'Sprint 2 플래닝',
-    date: '2025-07-01',
-    summary: '스프린트 목표와 백로그 우선순위를 확정했습니다.',
-  },
-  {
-    id: 'note-2',
-    title: 'Sprint 1 회고',
-    date: '2025-06-28',
-    summary: '지난 스프린트의 성과와 개선점을 논의했습니다.',
-  },
-  {
-    id: 'note-3',
-    title: '디자인 시스템 논의',
-    date: '2025-06-24',
-    summary: '공통 컴포넌트와 디자인 토큰 구조를 정리했습니다.',
-  },
-  {
-    id: 'note-4',
-    title: 'API 명세 리뷰',
-    date: '2025-06-20',
-    summary: '엔드포인트 규격과 에러 응답 형식을 검토했습니다.',
-  },
-];
diff --git a/src/entities/side-project/meeting-note/model/meeting-note.types.ts b/src/entities/side-project/meeting-note/model/meeting-note.types.ts
deleted file mode 100644
index 0f30439..0000000
--- a/src/entities/side-project/meeting-note/model/meeting-note.types.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-// 회의록(MeetingNote) 도메인 모델
-export interface MeetingNote {
-  id: string;
-  title: string;
-  date: string;
-  /** 본문 요약(미리보기) */
-  summary: string;
-}
diff --git a/src/widgets/side-project/dashboard-recent-notes/ui/RecentNotes.tsx b/src/widgets/side-project/dashboard-recent-notes/ui/RecentNotes.tsx
index 696e233..523af92 100644
--- a/src/widgets/side-project/dashboard-recent-notes/ui/RecentNotes.tsx
+++ b/src/widgets/side-project/dashboard-recent-notes/ui/RecentNotes.tsx
@@ -4,17 +4,22 @@
 //  · lg: 총 개수 + 리스트(제목 + 본문 미리보기 + 작성일)
 import { FileText } from 'lucide-react';
 
-import { mockMeetingNotes } from '@/entities/side-project/meeting-note';
 import type { WidgetSize } from '@/shared/dashboard/lib/widget-size';
 import { WidgetCard, WidgetCardAction, WidgetCardHeader } from '@/shared/dashboard/ui/widget-card';
+import { getMockMeetingNotesByWorkspaceId } from '@/entities/meeting-note';
 
 const header = (
   <WidgetCardHeader title="최근 회의록" action={<WidgetCardAction>전체 보기</WidgetCardAction>} />
 );
+interface RecentNotesProps {
+  workspaceId?: string;
+  size?: WidgetSize;
+}
 
-export default function RecentNotes({ size = 'md' }: { size?: WidgetSize }) {
+export default function RecentNotes({ workspaceId = 'test', size = 'md' }: RecentNotesProps) {
+  const meetingNotes = getMockMeetingNotesByWorkspaceId(workspaceId);
   if (size === 'sm') {
-    const latest = mockMeetingNotes[0];
+    const latest = meetingNotes[0];
     return (
       <WidgetCard>
         {header}
@@ -30,15 +35,15 @@ export default function RecentNotes({ size = 'md' }: { size?: WidgetSize }) {
     return (
       <WidgetCard>
         {header}
-        <p className="text-brand-muted mb-2 text-xs">총 {mockMeetingNotes.length}개의 회의록</p>
+        <p className="text-brand-muted mb-2 text-xs">총 {meetingNotes.length}개의 회의록</p>
         <ul className="flex min-h-0 flex-1 flex-col gap-2 overflow-y-auto">
-          {mockMeetingNotes.map((note) => (
+          {meetingNotes.map((note) => (
             <li key={note.id} className="bg-brand-surface flex items-start gap-2 rounded-xl p-3">
               <FileText className="text-brand-muted mt-0.5 size-4 shrink-0" />
               <div className="min-w-0">
                 <p className="text-brand-ink truncate text-sm font-semibold">{note.title}</p>
-                <p className="text-brand-muted truncate text-xs">{note.summary}</p>
-                <p className="text-brand-muted mt-0.5 text-[11px]">{note.date}</p>
+                <p className="text-brand-muted truncate text-xs">{note.decisions[0]}</p>
+                <p className="text-brand-muted mt-0.5 text-[11px]">{note.meetingDate}</p>
               </div>
             </li>
           ))}
@@ -52,12 +57,12 @@ export default function RecentNotes({ size = 'md' }: { size?: WidgetSize }) {
     <WidgetCard>
       {header}
       <ul className="flex min-h-0 flex-1 flex-col gap-3 overflow-y-auto">
-        {mockMeetingNotes.map((note) => (
+        {meetingNotes.map((note) => (
           <li key={note.id} className="flex items-start gap-2">
             <FileText className="text-brand-muted mt-0.5 size-4 shrink-0" />
             <div className="min-w-0">
               <p className="text-brand-ink truncate text-sm font-semibold">{note.title}</p>
-              <p className="text-brand-muted text-[11px]">{note.date}</p>
+              <p className="text-brand-muted text-[11px]">{note.meetingDate}</p>
             </div>
           </li>
         ))}

From d2f2d4b2a3ae19b11294c2ba2baa364d1ad4fb5e Mon Sep 17 00:00:00 2001
From: Kwon812 <tre723@naver.com>
Date: Thu, 9 Jul 2026 14:03:49 +0900
Subject: [PATCH 7/8] style: prettier

---
 src/entities/meeting-note/index.ts            |  6 ++-
 .../meeting-note/ui/MeetingNoteCard.tsx       | 22 +++++++----
 .../edit-layout/model/useDashboardLayout.ts   | 11 ++----
 .../ui/MeetingNoteForm.tsx                    | 38 ++++++++++---------
 .../ui/MeetingNotesList.tsx                   |  4 +-
 .../ui/MemberInviteSection.tsx                |  4 +-
 .../ui/MemberList.tsx                         |  4 +-
 .../ui/WorkScheduleSummary.tsx                |  5 ++-
 8 files changed, 56 insertions(+), 38 deletions(-)

diff --git a/src/entities/meeting-note/index.ts b/src/entities/meeting-note/index.ts
index e77fbd2..6d29886 100644
--- a/src/entities/meeting-note/index.ts
+++ b/src/entities/meeting-note/index.ts
@@ -1,3 +1,7 @@
 export { getMockMeetingNotesByWorkspaceId } from './model/mock-meeting-notes-by-workspace';
-export type { MeetingNote, MeetingNoteFormValues, MeetingNoteParticipant } from './model/meeting-note.types';
+export type {
+  MeetingNote,
+  MeetingNoteFormValues,
+  MeetingNoteParticipant,
+} from './model/meeting-note.types';
 export { MeetingNoteCard } from './ui/MeetingNoteCard';
diff --git a/src/entities/meeting-note/ui/MeetingNoteCard.tsx b/src/entities/meeting-note/ui/MeetingNoteCard.tsx
index b5e970e..039a90a 100644
--- a/src/entities/meeting-note/ui/MeetingNoteCard.tsx
+++ b/src/entities/meeting-note/ui/MeetingNoteCard.tsx
@@ -37,10 +37,12 @@ export function MeetingNoteCard({
       <article className="rounded-[24px] border border-[#ebeef7] bg-white px-[22px] py-[21px] shadow-[0_10px_30px_rgba(91,78,232,0.06)] transition hover:border-[rgba(91,78,232,0.16)]">
         <div className="flex items-start justify-between gap-6">
           <div className="min-w-0">
-            <h3 className="truncate text-[18px] font-bold tracking-[-0.03em] text-brand-ink">
+            <h3 className="text-brand-ink truncate text-[18px] font-bold tracking-[-0.03em]">
               {meetingNote.title}
             </h3>
-            <p className="mt-[6px] text-[12px] font-medium text-brand-muted">{meetingNote.meetingDate}</p>
+            <p className="text-brand-muted mt-[6px] text-[12px] font-medium">
+              {meetingNote.meetingDate}
+            </p>
           </div>
 
           <div className="flex shrink-0 items-center gap-1">
@@ -61,12 +63,15 @@ export function MeetingNoteCard({
         {isExpanded ? (
           <div className="mt-3 border-t border-[rgba(91,78,232,0.06)] pt-[17px]">
             <div>
-              <p className="text-[12px] font-bold tracking-[0.3px] text-brand-muted uppercase">
+              <p className="text-brand-muted text-[12px] font-bold tracking-[0.3px] uppercase">
                 결정사항
               </p>
               <ul className="mt-2 space-y-1.5">
                 {meetingNote.decisions.map((decision) => (
-                  <li key={decision} className="flex items-start gap-2 text-[14px] leading-5 text-brand-ink">
+                  <li
+                    key={decision}
+                    className="text-brand-ink flex items-start gap-2 text-[14px] leading-5"
+                  >
                     <Check className="mt-[3px] size-[14px] shrink-0 text-[#00c950]" />
                     <span>{decision}</span>
                   </li>
@@ -75,13 +80,16 @@ export function MeetingNoteCard({
             </div>
 
             <div className="mt-4">
-              <p className="text-[12px] font-bold tracking-[0.3px] text-brand-muted uppercase">
+              <p className="text-brand-muted text-[12px] font-bold tracking-[0.3px] uppercase">
                 후속 업무
               </p>
               <ul className="mt-2 space-y-1.5">
                 {meetingNote.followUpActions.map((actionItem) => (
-                  <li key={actionItem} className="flex items-start gap-2 text-[14px] leading-5 text-brand-ink">
-                    <ArrowRight className="mt-[3px] size-[14px] shrink-0 text-brand-start" />
+                  <li
+                    key={actionItem}
+                    className="text-brand-ink flex items-start gap-2 text-[14px] leading-5"
+                  >
+                    <ArrowRight className="text-brand-start mt-[3px] size-[14px] shrink-0" />
                     <span>{actionItem}</span>
                   </li>
                 ))}
diff --git a/src/features/dashboard/edit-layout/model/useDashboardLayout.ts b/src/features/dashboard/edit-layout/model/useDashboardLayout.ts
index a124a3d..40d65dd 100644
--- a/src/features/dashboard/edit-layout/model/useDashboardLayout.ts
+++ b/src/features/dashboard/edit-layout/model/useDashboardLayout.ts
@@ -38,13 +38,10 @@ export function useDashboardLayout({
     void saveDashboardLayout(workspaceId, pageType, { layout });
   }, [layout, workspaceId, pageType]);
 
-  const handleLayoutChange = useCallback(
-    (next: Layout) => {
-      const positions = next.map(toPosition);
-      setLayout(positions);
-    },
-    [],
-  );
+  const handleLayoutChange = useCallback((next: Layout) => {
+    const positions = next.map(toPosition);
+    setLayout(positions);
+  }, []);
 
   const addWidget = useCallback(
     (item: LayoutItem) =>
diff --git a/src/features/manage-meeting-notes/ui/MeetingNoteForm.tsx b/src/features/manage-meeting-notes/ui/MeetingNoteForm.tsx
index bb74ee5..35844ab 100644
--- a/src/features/manage-meeting-notes/ui/MeetingNoteForm.tsx
+++ b/src/features/manage-meeting-notes/ui/MeetingNoteForm.tsx
@@ -272,7 +272,7 @@ export function MeetingNoteForm({ workspaceId }: MeetingNoteFormProps) {
     <section className="max-w-[714px]">
       <Link
         href={`/workspaces/${workspaceId}/meeting-notes`}
-        className="inline-flex items-center gap-2 text-[16px] font-semibold text-brand-muted transition hover:text-brand-ink"
+        className="text-brand-muted hover:text-brand-ink inline-flex items-center gap-2 text-[16px] font-semibold transition"
       >
         <span aria-hidden="true">←</span>
         목록으로
@@ -282,11 +282,11 @@ export function MeetingNoteForm({ workspaceId }: MeetingNoteFormProps) {
         onSubmit={handleSubmit}
         className="mt-[21px] rounded-[32px] border border-[#eceffa] bg-white px-[26.5px] pt-[26.5px] pb-[28px] shadow-[0_20px_48px_rgba(91,78,232,0.08)]"
       >
-        <h1 className="text-[34px] font-extrabold tracking-[-0.04em] text-brand-ink">새 회의록</h1>
+        <h1 className="text-brand-ink text-[34px] font-extrabold tracking-[-0.04em]">새 회의록</h1>
 
         <div className="mt-8 space-y-[22px]">
           <label className="block">
-            <span className="mb-2.5 block text-[17px] font-semibold text-brand-ink">회의 제목</span>
+            <span className="text-brand-ink mb-2.5 block text-[17px] font-semibold">회의 제목</span>
             <input
               type="text"
               value={formValues.title}
@@ -295,13 +295,15 @@ export function MeetingNoteForm({ workspaceId }: MeetingNoteFormProps) {
               className={`${fieldClassName} ${hasSubmitted && !isTitleValid ? 'border-[#ff6b6b] bg-[#fff6f6] focus:border-[#ff6b6b]' : ''}`}
             />
             {hasSubmitted && !isTitleValid ? (
-              <p className="mt-2 text-[14px] font-medium text-[#ff6b6b]">회의 제목을 입력해주세요.</p>
+              <p className="mt-2 text-[14px] font-medium text-[#ff6b6b]">
+                회의 제목을 입력해주세요.
+              </p>
             ) : null}
           </label>
 
           <div className="grid gap-5 md:grid-cols-2">
             <label className="block">
-              <span className="mb-2.5 block text-[17px] font-semibold text-brand-ink">날짜</span>
+              <span className="text-brand-ink mb-2.5 block text-[17px] font-semibold">날짜</span>
               <div className="relative">
                 <input
                   ref={dateInputRef}
@@ -317,7 +319,7 @@ export function MeetingNoteForm({ workspaceId }: MeetingNoteFormProps) {
                   tabIndex={-1}
                 />
                 <div
-                  className={`${dateFieldClassName} gap-2 pr-[14px] text-[18px] font-medium tracking-[-0.03em] text-brand-ink`}
+                  className={`${dateFieldClassName} text-brand-ink gap-2 pr-[14px] text-[18px] font-medium tracking-[-0.03em]`}
                 >
                   <input
                     ref={yearInputRef}
@@ -328,7 +330,7 @@ export function MeetingNoteForm({ workspaceId }: MeetingNoteFormProps) {
                     onKeyDown={(event) => handleDatePartKeyDown(event, 'year')}
                     onBlur={handleDatePartBlur}
                     placeholder="2025"
-                    className="w-[4ch] bg-transparent text-center text-brand-ink outline-none placeholder:text-[#a0a6bf]"
+                    className="text-brand-ink w-[4ch] bg-transparent text-center outline-none placeholder:text-[#a0a6bf]"
                   />
                   <span className="text-brand-muted">.</span>
                   <input
@@ -340,7 +342,7 @@ export function MeetingNoteForm({ workspaceId }: MeetingNoteFormProps) {
                     onKeyDown={(event) => handleDatePartKeyDown(event, 'month')}
                     onBlur={handleDatePartBlur}
                     placeholder="06"
-                    className="w-[2ch] bg-transparent text-center text-brand-ink outline-none placeholder:text-[#a0a6bf]"
+                    className="text-brand-ink w-[2ch] bg-transparent text-center outline-none placeholder:text-[#a0a6bf]"
                   />
                   <span className="text-brand-muted">.</span>
                   <input
@@ -352,14 +354,14 @@ export function MeetingNoteForm({ workspaceId }: MeetingNoteFormProps) {
                     onKeyDown={(event) => handleDatePartKeyDown(event, 'day')}
                     onBlur={handleDatePartBlur}
                     placeholder="30"
-                    className="w-[2ch] bg-transparent text-center text-brand-ink outline-none placeholder:text-[#a0a6bf]"
+                    className="text-brand-ink w-[2ch] bg-transparent text-center outline-none placeholder:text-[#a0a6bf]"
                   />
                   <span className="text-brand-muted">.</span>
                   <div className="ml-auto">
                     <button
                       type="button"
                       onClick={handleOpenDatePicker}
-                      className="flex size-6 items-center justify-center rounded-md bg-white/70 text-[#d5d9e8] transition hover:text-brand-muted"
+                      className="hover:text-brand-muted flex size-6 items-center justify-center rounded-md bg-white/70 text-[#d5d9e8] transition"
                       aria-label="달력 열기"
                     >
                       <CalendarDays className="size-4" aria-hidden="true" />
@@ -370,7 +372,7 @@ export function MeetingNoteForm({ workspaceId }: MeetingNoteFormProps) {
             </label>
 
             <label className="block">
-              <span className="mb-2.5 block text-[17px] font-semibold text-brand-ink">참석자</span>
+              <span className="text-brand-ink mb-2.5 block text-[17px] font-semibold">참석자</span>
               <div ref={participantFieldRef} className="relative">
                 <button
                   type="button"
@@ -382,7 +384,7 @@ export function MeetingNoteForm({ workspaceId }: MeetingNoteFormProps) {
                       selectedParticipants.map((member) => (
                         <span
                           key={member.userId}
-                          className="inline-flex items-center rounded-full bg-white px-3 py-1 text-[14px] font-medium text-brand-ink shadow-[0_1px_4px_rgba(91,78,232,0.08)]"
+                          className="text-brand-ink inline-flex items-center rounded-full bg-white px-3 py-1 text-[14px] font-medium shadow-[0_1px_4px_rgba(91,78,232,0.08)]"
                         >
                           {member.workspaceNickname}
                         </span>
@@ -408,17 +410,17 @@ export function MeetingNoteForm({ workspaceId }: MeetingNoteFormProps) {
                             key={member.userId}
                             type="button"
                             onClick={() => toggleParticipant(member.userId)}
-                            className="flex w-full items-center justify-between rounded-[14px] px-3 py-3 text-left transition hover:bg-brand-soft"
+                            className="hover:bg-brand-soft flex w-full items-center justify-between rounded-[14px] px-3 py-3 text-left transition"
                           >
                             <div className="flex items-center gap-3">
-                              <div className="flex size-9 items-center justify-center rounded-full bg-brand text-[15px] font-semibold text-white">
+                              <div className="bg-brand flex size-9 items-center justify-center rounded-full text-[15px] font-semibold text-white">
                                 {member.avatarLabel}
                               </div>
                               <div>
-                                <p className="text-[15px] font-semibold text-brand-ink">
+                                <p className="text-brand-ink text-[15px] font-semibold">
                                   {member.workspaceNickname}
                                 </p>
-                                <p className="text-[13px] text-brand-muted">
+                                <p className="text-brand-muted text-[13px]">
                                   {member.role === 'owner' ? '팀장' : '팀원'}
                                 </p>
                               </div>
@@ -439,7 +441,7 @@ export function MeetingNoteForm({ workspaceId }: MeetingNoteFormProps) {
           </div>
 
           <label className="block">
-            <span className="mb-2.5 block text-[17px] font-semibold text-brand-ink">결정사항</span>
+            <span className="text-brand-ink mb-2.5 block text-[17px] font-semibold">결정사항</span>
             <textarea
               value={formValues.decisions}
               onChange={(event) => handleChange('decisions', event.target.value)}
@@ -450,7 +452,7 @@ export function MeetingNoteForm({ workspaceId }: MeetingNoteFormProps) {
           </label>
 
           <label className="block">
-            <span className="mb-2.5 block text-[17px] font-semibold text-brand-ink">후속 업무</span>
+            <span className="text-brand-ink mb-2.5 block text-[17px] font-semibold">후속 업무</span>
             <textarea
               value={formValues.followUpActions}
               onChange={(event) => handleChange('followUpActions', event.target.value)}
diff --git a/src/features/manage-meeting-notes/ui/MeetingNotesList.tsx b/src/features/manage-meeting-notes/ui/MeetingNotesList.tsx
index 72ca20f..65f8c2e 100644
--- a/src/features/manage-meeting-notes/ui/MeetingNotesList.tsx
+++ b/src/features/manage-meeting-notes/ui/MeetingNotesList.tsx
@@ -29,10 +29,10 @@ export function MeetingNotesList({ workspaceId, meetingNotes }: MeetingNotesList
   return (
     <section className="max-w-[714px]">
       <div className="mb-[26px] flex items-center justify-between gap-4">
-        <h1 className="text-[36px] font-extrabold tracking-[-0.04em] text-brand-ink">회의록</h1>
+        <h1 className="text-brand-ink text-[36px] font-extrabold tracking-[-0.04em]">회의록</h1>
         <Link
           href={`/workspaces/${workspaceId}/meeting-notes/new`}
-          className="inline-flex h-12 items-center gap-2 rounded-full bg-brand px-5 text-[16px] font-bold text-white shadow-[0_10px_24px_rgba(91,78,232,0.24)] transition hover:brightness-105"
+          className="bg-brand inline-flex h-12 items-center gap-2 rounded-full px-5 text-[16px] font-bold text-white shadow-[0_10px_24px_rgba(91,78,232,0.24)] transition hover:brightness-105"
         >
           <Plus className="size-4" />
           회의록 작성
diff --git a/src/features/manage-workspace-members/ui/MemberInviteSection.tsx b/src/features/manage-workspace-members/ui/MemberInviteSection.tsx
index a4d952f..068110a 100644
--- a/src/features/manage-workspace-members/ui/MemberInviteSection.tsx
+++ b/src/features/manage-workspace-members/ui/MemberInviteSection.tsx
@@ -60,7 +60,9 @@ export function MemberInviteSection({
               aria-pressed={isActive}
               className={cn(
                 'rounded-full px-4 py-1.5 text-sm font-medium transition-colors',
-                isActive ? 'bg-white text-slate-900 shadow-sm' : 'text-slate-500 hover:text-slate-800',
+                isActive
+                  ? 'bg-white text-slate-900 shadow-sm'
+                  : 'text-slate-500 hover:text-slate-800',
               )}
             >
               {mode.label}
diff --git a/src/features/manage-workspace-members/ui/MemberList.tsx b/src/features/manage-workspace-members/ui/MemberList.tsx
index 9fb47a5..de581f3 100644
--- a/src/features/manage-workspace-members/ui/MemberList.tsx
+++ b/src/features/manage-workspace-members/ui/MemberList.tsx
@@ -30,7 +30,9 @@ export function MemberList({ members, currentUserId }: MemberListProps) {
       <h2 className="text-base font-bold text-slate-950">멤버 ({members.length})</h2>
 
       {members.length === 0 ? (
-        <p className="mt-4 text-sm text-slate-500">아직 참여한 멤버가 없어요. 팀원을 초대해 보세요.</p>
+        <p className="mt-4 text-sm text-slate-500">
+          아직 참여한 멤버가 없어요. 팀원을 초대해 보세요.
+        </p>
       ) : (
         <ul className="mt-4 space-y-3">
           {members.map((member, index) => {
diff --git a/src/widgets/store-operation/dashboard-work-schedule/ui/WorkScheduleSummary.tsx b/src/widgets/store-operation/dashboard-work-schedule/ui/WorkScheduleSummary.tsx
index a184f49..4847ce2 100644
--- a/src/widgets/store-operation/dashboard-work-schedule/ui/WorkScheduleSummary.tsx
+++ b/src/widgets/store-operation/dashboard-work-schedule/ui/WorkScheduleSummary.tsx
@@ -171,7 +171,10 @@ export default function WorkScheduleSummary({
               );
 
               return (
-                <div key={weekday.key} className="bg-brand-surface rounded-xl px-2 py-2 text-center">
+                <div
+                  key={weekday.key}
+                  className="bg-brand-surface rounded-xl px-2 py-2 text-center"
+                >
                   <p className="text-brand-muted text-[11px]">{weekday.label}</p>
                   <p className="text-brand-ink mt-0.5 text-sm font-bold">{workingCount}명</p>
                 </div>

From 0f2da5b65c7678d6cbd745e54d3c0ee1a7ab2795 Mon Sep 17 00:00:00 2001
From: Kwon812 <tre723@naver.com>
Date: Fri, 10 Jul 2026 09:23:04 +0900
Subject: [PATCH 8/8] fix:FormEvent type import

---
 src/features/manage-workspace-info/ui/WorkspaceInfoForm.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/features/manage-workspace-info/ui/WorkspaceInfoForm.tsx b/src/features/manage-workspace-info/ui/WorkspaceInfoForm.tsx
index 10d1d7e..fc4229a 100644
--- a/src/features/manage-workspace-info/ui/WorkspaceInfoForm.tsx
+++ b/src/features/manage-workspace-info/ui/WorkspaceInfoForm.tsx
@@ -2,7 +2,7 @@
 
 // 워크스페이스 정보(이름·설명) 수정 폼입니다.
 // 백엔드 연동 전이므로 저장은 로컬 상태를 확정(commit)하는 목업으로 동작합니다.
-import { useState } from 'react';
+import { useState, type FormEvent } from 'react';
 import type { Workspace } from '@/entities/workspace';
 
 interface WorkspaceInfoFormProps {
@@ -21,7 +21,7 @@ export function WorkspaceInfoForm({ workspace }: WorkspaceInfoFormProps) {
   const isDirty = name !== committedName || description !== committedDescription;
   const canSubmit = name.trim().length > 0 && isDirty;
 
-  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
     event.preventDefault();
     if (!canSubmit) {
       return;