From 66dc6a42bb70ef9f7fd568e8c611b95a3503609e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=95=88=EC=84=B1=EC=A7=84?=
 <anseongjin@anseongjin-ui-MacBookPro.local>
Date: Tue, 21 Jul 2026 10:18:34 +0900
Subject: [PATCH 1/2] =?UTF-8?q?design:=EC=9B=8C=ED=81=AC=EC=8A=A4=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=8A=A4=20=EB=AA=A8=EB=93=88=20=EB=A1=9C=EB=94=A9=20?=
 =?UTF-8?q?=EC=8A=A4=EC=BC=88=EB=A0=88=ED=86=A4=20=EC=B6=94=EA=B0=80(#83)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../[workspaceId]/calendar/loading.tsx        |   5 +
 .../workspaces/[workspaceId]/chat/loading.tsx |   5 +
 .../[workspaceId]/dashboard/loading.tsx       |   5 +
 .../[workspaceId]/files/loading.tsx           |   5 +
 .../[workspaceId]/meeting-notes/loading.tsx   |   5 +
 .../[workspaceId]/notices/loading.tsx         |   5 +
 .../[workspaceId]/notifications/loading.tsx   |   5 +
 .../[workspaceId]/progress-chart/loading.tsx  |   5 +
 .../project-management/loading.tsx            |   5 +
 .../[workspaceId]/settings/loading.tsx        |   5 +
 .../[workspaceId]/sprint-board/loading.tsx    |   5 +
 .../[workspaceId]/work-schedule/loading.tsx   |   5 +
 src/shared/ui/skeleton.tsx                    |  11 +
 src/widgets/workspace-page-skeleton/index.ts  |   3 +
 .../ui/WorkspacePageSkeleton.tsx              | 205 ++++++++++++++++++
 15 files changed, 279 insertions(+)
 create mode 100644 src/app/workspaces/[workspaceId]/calendar/loading.tsx
 create mode 100644 src/app/workspaces/[workspaceId]/chat/loading.tsx
 create mode 100644 src/app/workspaces/[workspaceId]/dashboard/loading.tsx
 create mode 100644 src/app/workspaces/[workspaceId]/files/loading.tsx
 create mode 100644 src/app/workspaces/[workspaceId]/meeting-notes/loading.tsx
 create mode 100644 src/app/workspaces/[workspaceId]/notices/loading.tsx
 create mode 100644 src/app/workspaces/[workspaceId]/notifications/loading.tsx
 create mode 100644 src/app/workspaces/[workspaceId]/progress-chart/loading.tsx
 create mode 100644 src/app/workspaces/[workspaceId]/project-management/loading.tsx
 create mode 100644 src/app/workspaces/[workspaceId]/settings/loading.tsx
 create mode 100644 src/app/workspaces/[workspaceId]/sprint-board/loading.tsx
 create mode 100644 src/app/workspaces/[workspaceId]/work-schedule/loading.tsx
 create mode 100644 src/shared/ui/skeleton.tsx
 create mode 100644 src/widgets/workspace-page-skeleton/index.ts
 create mode 100644 src/widgets/workspace-page-skeleton/ui/WorkspacePageSkeleton.tsx

diff --git a/src/app/workspaces/[workspaceId]/calendar/loading.tsx b/src/app/workspaces/[workspaceId]/calendar/loading.tsx
new file mode 100644
index 0000000..82741ea
--- /dev/null
+++ b/src/app/workspaces/[workspaceId]/calendar/loading.tsx
@@ -0,0 +1,5 @@
+// 캘린더 데이터를 조회하는 동안 월간 그리드의 자리를 유지합니다.
+import { WorkspacePageSkeleton } from '@/widgets/workspace-page-skeleton';
+export default function Loading() {
+  return <WorkspacePageSkeleton variant="calendar" />;
+}
diff --git a/src/app/workspaces/[workspaceId]/chat/loading.tsx b/src/app/workspaces/[workspaceId]/chat/loading.tsx
new file mode 100644
index 0000000..85cbacb
--- /dev/null
+++ b/src/app/workspaces/[workspaceId]/chat/loading.tsx
@@ -0,0 +1,5 @@
+// 채팅 초기 메시지와 참여자 데이터를 조회하는 동안 대화 패널을 표시합니다.
+import { WorkspacePageSkeleton } from '@/widgets/workspace-page-skeleton';
+export default function Loading() {
+  return <WorkspacePageSkeleton variant="chat" />;
+}
diff --git a/src/app/workspaces/[workspaceId]/dashboard/loading.tsx b/src/app/workspaces/[workspaceId]/dashboard/loading.tsx
new file mode 100644
index 0000000..f3be766
--- /dev/null
+++ b/src/app/workspaces/[workspaceId]/dashboard/loading.tsx
@@ -0,0 +1,5 @@
+// 대시보드 레이아웃과 위젯을 조회하는 동안 카드 배치를 유지합니다.
+import { WorkspacePageSkeleton } from '@/widgets/workspace-page-skeleton';
+export default function Loading() {
+  return <WorkspacePageSkeleton variant="dashboard" />;
+}
diff --git a/src/app/workspaces/[workspaceId]/files/loading.tsx b/src/app/workspaces/[workspaceId]/files/loading.tsx
new file mode 100644
index 0000000..e093df5
--- /dev/null
+++ b/src/app/workspaces/[workspaceId]/files/loading.tsx
@@ -0,0 +1,5 @@
+// 자료실 목록을 조회하는 동안 자료 카드 목록의 자리를 유지합니다.
+import { WorkspacePageSkeleton } from '@/widgets/workspace-page-skeleton';
+export default function Loading() {
+  return <WorkspacePageSkeleton variant="list" />;
+}
diff --git a/src/app/workspaces/[workspaceId]/meeting-notes/loading.tsx b/src/app/workspaces/[workspaceId]/meeting-notes/loading.tsx
new file mode 100644
index 0000000..443a30d
--- /dev/null
+++ b/src/app/workspaces/[workspaceId]/meeting-notes/loading.tsx
@@ -0,0 +1,5 @@
+// 회의록 목록을 조회하는 동안 목록 카드의 자리를 유지합니다.
+import { WorkspacePageSkeleton } from '@/widgets/workspace-page-skeleton';
+export default function Loading() {
+  return <WorkspacePageSkeleton variant="list" />;
+}
diff --git a/src/app/workspaces/[workspaceId]/notices/loading.tsx b/src/app/workspaces/[workspaceId]/notices/loading.tsx
new file mode 100644
index 0000000..ce6f5c5
--- /dev/null
+++ b/src/app/workspaces/[workspaceId]/notices/loading.tsx
@@ -0,0 +1,5 @@
+// 공지 목록을 조회하는 동안 공지 카드와 상세 영역의 자리를 유지합니다.
+import { WorkspacePageSkeleton } from '@/widgets/workspace-page-skeleton';
+export default function Loading() {
+  return <WorkspacePageSkeleton variant="list" />;
+}
diff --git a/src/app/workspaces/[workspaceId]/notifications/loading.tsx b/src/app/workspaces/[workspaceId]/notifications/loading.tsx
new file mode 100644
index 0000000..a0f4de3
--- /dev/null
+++ b/src/app/workspaces/[workspaceId]/notifications/loading.tsx
@@ -0,0 +1,5 @@
+// 전체 알림 목록을 조회하는 동안 알림 카드 목록의 자리를 유지합니다.
+import { WorkspacePageSkeleton } from '@/widgets/workspace-page-skeleton';
+export default function Loading() {
+  return <WorkspacePageSkeleton variant="list" />;
+}
diff --git a/src/app/workspaces/[workspaceId]/progress-chart/loading.tsx b/src/app/workspaces/[workspaceId]/progress-chart/loading.tsx
new file mode 100644
index 0000000..da30ac5
--- /dev/null
+++ b/src/app/workspaces/[workspaceId]/progress-chart/loading.tsx
@@ -0,0 +1,5 @@
+// 진행률 데이터를 계산하는 동안 차트 카드의 자리를 유지합니다.
+import { WorkspacePageSkeleton } from '@/widgets/workspace-page-skeleton';
+export default function Loading() {
+  return <WorkspacePageSkeleton variant="dashboard" />;
+}
diff --git a/src/app/workspaces/[workspaceId]/project-management/loading.tsx b/src/app/workspaces/[workspaceId]/project-management/loading.tsx
new file mode 100644
index 0000000..659bd24
--- /dev/null
+++ b/src/app/workspaces/[workspaceId]/project-management/loading.tsx
@@ -0,0 +1,5 @@
+// 프로젝트 업무 보드를 조회하는 동안 칸반 열과 업무 카드의 자리를 유지합니다.
+import { WorkspacePageSkeleton } from '@/widgets/workspace-page-skeleton';
+export default function Loading() {
+  return <WorkspacePageSkeleton variant="kanban" />;
+}
diff --git a/src/app/workspaces/[workspaceId]/settings/loading.tsx b/src/app/workspaces/[workspaceId]/settings/loading.tsx
new file mode 100644
index 0000000..4722700
--- /dev/null
+++ b/src/app/workspaces/[workspaceId]/settings/loading.tsx
@@ -0,0 +1,5 @@
+// 워크스페이스 설정과 멤버 정보를 조회하는 동안 설정 폼의 자리를 유지합니다.
+import { WorkspacePageSkeleton } from '@/widgets/workspace-page-skeleton';
+export default function Loading() {
+  return <WorkspacePageSkeleton variant="settings" />;
+}
diff --git a/src/app/workspaces/[workspaceId]/sprint-board/loading.tsx b/src/app/workspaces/[workspaceId]/sprint-board/loading.tsx
new file mode 100644
index 0000000..055bc05
--- /dev/null
+++ b/src/app/workspaces/[workspaceId]/sprint-board/loading.tsx
@@ -0,0 +1,5 @@
+// 스프린트와 업무를 조회하는 동안 스프린트 보드의 자리를 유지합니다.
+import { WorkspacePageSkeleton } from '@/widgets/workspace-page-skeleton';
+export default function Loading() {
+  return <WorkspacePageSkeleton variant="sprint" />;
+}
diff --git a/src/app/workspaces/[workspaceId]/work-schedule/loading.tsx b/src/app/workspaces/[workspaceId]/work-schedule/loading.tsx
new file mode 100644
index 0000000..be36264
--- /dev/null
+++ b/src/app/workspaces/[workspaceId]/work-schedule/loading.tsx
@@ -0,0 +1,5 @@
+// 주간 근무유형과 스케줄을 조회하는 동안 근무표의 행과 셀 자리를 유지합니다.
+import { WorkspacePageSkeleton } from '@/widgets/workspace-page-skeleton';
+export default function Loading() {
+  return <WorkspacePageSkeleton variant="schedule" />;
+}
diff --git a/src/shared/ui/skeleton.tsx b/src/shared/ui/skeleton.tsx
new file mode 100644
index 0000000..c4951b7
--- /dev/null
+++ b/src/shared/ui/skeleton.tsx
@@ -0,0 +1,11 @@
+// 데이터 로딩 중 실제 콘텐츠의 자리와 크기를 유지하는 공통 스켈레톤 블록입니다.
+
+interface SkeletonProps {
+  className?: string;
+}
+
+export function Skeleton({ className = '' }: SkeletonProps) {
+  return (
+    <div aria-hidden="true" className={`animate-pulse rounded-lg bg-slate-200/80 ${className}`} />
+  );
+}
diff --git a/src/widgets/workspace-page-skeleton/index.ts b/src/widgets/workspace-page-skeleton/index.ts
new file mode 100644
index 0000000..187926b
--- /dev/null
+++ b/src/widgets/workspace-page-skeleton/index.ts
@@ -0,0 +1,3 @@
+// 워크스페이스 페이지 로딩 스켈레톤의 공개 진입점입니다.
+export { WorkspacePageSkeleton } from './ui/WorkspacePageSkeleton';
+export type { WorkspacePageSkeletonVariant } from './ui/WorkspacePageSkeleton';
diff --git a/src/widgets/workspace-page-skeleton/ui/WorkspacePageSkeleton.tsx b/src/widgets/workspace-page-skeleton/ui/WorkspacePageSkeleton.tsx
new file mode 100644
index 0000000..bc95b2c
--- /dev/null
+++ b/src/widgets/workspace-page-skeleton/ui/WorkspacePageSkeleton.tsx
@@ -0,0 +1,205 @@
+// 워크스페이스 모듈 전환 중 실제 화면 구조를 유지하는 페이지별 로딩 스켈레톤입니다.
+import { Skeleton } from '@/shared/ui/skeleton';
+
+export type WorkspacePageSkeletonVariant =
+  'calendar' | 'chat' | 'dashboard' | 'kanban' | 'list' | 'schedule' | 'settings' | 'sprint';
+
+interface WorkspacePageSkeletonProps {
+  /** 대상 모듈의 정보 밀도에 맞춰 선택하는 스켈레톤 형태입니다. */
+  variant: WorkspacePageSkeletonVariant;
+}
+
+const LIST_ROWS = Array.from({ length: 5 });
+const TABLE_ROWS = Array.from({ length: 5 });
+const TABLE_COLUMNS = Array.from({ length: 7 });
+
+function PageHeading({ withAction = true }: { withAction?: boolean }) {
+  return (
+    <div className="mb-6 flex items-center justify-between gap-4">
+      <div className="space-y-2">
+        <Skeleton className="h-8 w-28" />
+        <Skeleton className="h-4 w-56" />
+      </div>
+      {withAction ? <Skeleton className="h-11 w-28" /> : null}
+    </div>
+  );
+}
+
+function ListSkeleton() {
+  return (
+    <>
+      <PageHeading />
+      <div className="max-w-4xl space-y-4">
+        {LIST_ROWS.map((_, index) => (
+          <div
+            key={index}
+            className="rounded-2xl border border-slate-200 bg-white px-6 py-5 shadow-sm"
+          >
+            <Skeleton className="h-5 w-2/5" />
+            <Skeleton className="mt-3 h-4 w-4/5" />
+            <Skeleton className="mt-2 h-4 w-1/4" />
+          </div>
+        ))}
+      </div>
+    </>
+  );
+}
+
+function ScheduleSkeleton() {
+  return (
+    <>
+      <PageHeading />
+      <div className="mb-6 flex gap-3">
+        <Skeleton className="h-14 w-28" />
+        <Skeleton className="h-14 w-28" />
+        <Skeleton className="h-14 w-28" />
+      </div>
+      <div className="overflow-hidden rounded-2xl border border-slate-200 bg-white">
+        <div className="grid grid-cols-[160px_repeat(7,minmax(88px,1fr))] border-b border-slate-200 p-5">
+          {Array.from({ length: 8 }).map((_, index) => (
+            <Skeleton key={index} className="mx-auto h-5 w-10" />
+          ))}
+        </div>
+        {TABLE_ROWS.map((_, rowIndex) => (
+          <div
+            key={rowIndex}
+            className="grid grid-cols-[160px_repeat(7,minmax(88px,1fr))] items-center border-b border-slate-100 p-5 last:border-b-0"
+          >
+            <Skeleton className="h-9 w-32" />
+            {TABLE_COLUMNS.map((_, columnIndex) => (
+              <Skeleton key={columnIndex} className="mx-auto h-10 w-16 rounded-full" />
+            ))}
+          </div>
+        ))}
+      </div>
+    </>
+  );
+}
+
+function KanbanSkeleton() {
+  return (
+    <>
+      <PageHeading />
+      <div className="mb-5 flex flex-wrap gap-3">
+        <Skeleton className="h-11 w-48" />
+        <Skeleton className="h-11 w-28" />
+      </div>
+      <div className="grid min-w-[900px] grid-cols-3 gap-5">
+        {Array.from({ length: 3 }).map((_, columnIndex) => (
+          <div key={columnIndex} className="rounded-2xl bg-slate-100/80 p-4">
+            <Skeleton className="mb-4 h-5 w-24" />
+            <div className="space-y-3">
+              {Array.from({ length: 4 }).map((_, cardIndex) => (
+                <div key={cardIndex} className="rounded-xl border border-slate-200 bg-white p-4">
+                  <Skeleton className="h-4 w-4/5" />
+                  <Skeleton className="mt-4 h-3 w-2/5" />
+                </div>
+              ))}
+            </div>
+          </div>
+        ))}
+      </div>
+    </>
+  );
+}
+
+function DashboardSkeleton() {
+  return (
+    <div className="grid grid-cols-1 gap-5 xl:grid-cols-12">
+      <Skeleton className="h-52 xl:col-span-7" />
+      <Skeleton className="h-52 xl:col-span-5" />
+      <Skeleton className="h-64 xl:col-span-4" />
+      <Skeleton className="h-64 xl:col-span-8" />
+      <Skeleton className="h-56 xl:col-span-6" />
+      <Skeleton className="h-56 xl:col-span-6" />
+    </div>
+  );
+}
+
+function CalendarSkeleton() {
+  return (
+    <>
+      <PageHeading withAction={false} />
+      <div className="mb-5 flex items-center justify-between">
+        <Skeleton className="h-10 w-32" />
+        <Skeleton className="h-10 w-28" />
+      </div>
+      <div className="grid grid-cols-7 overflow-hidden rounded-2xl border border-slate-200 bg-white">
+        {Array.from({ length: 42 }).map((_, index) => (
+          <div
+            key={index}
+            className="min-h-28 border-r border-b border-slate-100 p-3 last:border-r-0"
+          >
+            <Skeleton className="h-4 w-6" />
+            {index % 3 === 0 ? <Skeleton className="mt-4 h-5 w-full" /> : null}
+          </div>
+        ))}
+      </div>
+    </>
+  );
+}
+
+function ChatSkeleton() {
+  return (
+    <>
+      <PageHeading withAction={false} />
+      <div className="grid min-h-[calc(100vh-230px)] gap-5 lg:grid-cols-[minmax(0,1fr)_minmax(220px,0.32fr)]">
+        <div className="flex h-[min(720px,calc(100dvh-230px))] min-h-[480px] flex-col overflow-hidden rounded-2xl border border-slate-200 bg-white">
+          <div className="flex items-center justify-between border-b border-slate-100 px-6 py-5">
+            <Skeleton className="h-10 w-36" />
+            <Skeleton className="h-7 w-20 rounded-full" />
+          </div>
+          <div className="flex-1 space-y-6 p-6">
+            {Array.from({ length: 5 }).map((_, index) => (
+              <div key={index} className={index % 2 ? 'ml-auto w-2/5' : 'w-3/5'}>
+                <Skeleton className="mb-2 h-3 w-20" />
+                <Skeleton className="h-12 w-full rounded-2xl" />
+              </div>
+            ))}
+          </div>
+          <div className="border-t border-slate-100 p-5">
+            <Skeleton className="h-12 w-full rounded-xl" />
+          </div>
+        </div>
+        <div className="rounded-2xl border border-slate-200 bg-white p-5">
+          <Skeleton className="h-6 w-28" />
+          <div className="mt-5 space-y-4">
+            {Array.from({ length: 5 }).map((_, index) => (
+              <Skeleton key={index} className="h-9 w-full" />
+            ))}
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
+
+function SettingsSkeleton() {
+  return (
+    <div className="mx-auto max-w-3xl">
+      <PageHeading withAction={false} />
+      <div className="flex gap-3 border-b border-slate-200 pb-3">
+        <Skeleton className="h-9 w-24" />
+        <Skeleton className="h-9 w-24" />
+        <Skeleton className="h-9 w-24" />
+      </div>
+      <div className="mt-6 rounded-2xl border border-slate-200 bg-white p-6">
+        <Skeleton className="h-5 w-28" />
+        <Skeleton className="mt-5 h-11 w-full" />
+        <Skeleton className="mt-5 h-5 w-28" />
+        <Skeleton className="mt-3 h-28 w-full" />
+        <Skeleton className="mt-6 h-11 w-28" />
+      </div>
+    </div>
+  );
+}
+
+export function WorkspacePageSkeleton({ variant }: WorkspacePageSkeletonProps) {
+  if (variant === 'dashboard') return <DashboardSkeleton />;
+  if (variant === 'calendar') return <CalendarSkeleton />;
+  if (variant === 'chat') return <ChatSkeleton />;
+  if (variant === 'schedule') return <ScheduleSkeleton />;
+  if (variant === 'kanban' || variant === 'sprint') return <KanbanSkeleton />;
+  if (variant === 'settings') return <SettingsSkeleton />;
+  return <ListSkeleton />;
+}

From 742b092546e4366014a1679ec091b1a4aa5ff79d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=95=88=EC=84=B1=EC=A7=84?=
 <anseongjin@anseongjin-ui-MacBookPro.local>
Date: Tue, 21 Jul 2026 10:50:44 +0900
Subject: [PATCH 2/2] =?UTF-8?q?fix:=EC=8A=A4=EC=BC=88=EB=A0=88=ED=86=A4=20?=
 =?UTF-8?q?UI=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=B6=A9=EB=8F=8C=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95(#83)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/shared/ui/skeleton.tsx                            |  3 ++-
 .../ui/WorkspacePageSkeleton.tsx                      | 11 ++++-------
 2 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/src/shared/ui/skeleton.tsx b/src/shared/ui/skeleton.tsx
index c4951b7..635daf2 100644
--- a/src/shared/ui/skeleton.tsx
+++ b/src/shared/ui/skeleton.tsx
@@ -1,4 +1,5 @@
 // 데이터 로딩 중 실제 콘텐츠의 자리와 크기를 유지하는 공통 스켈레톤 블록입니다.
+import { cn } from '@/shared/lib/utils';
 
 interface SkeletonProps {
   className?: string;
@@ -6,6 +7,6 @@ interface SkeletonProps {
 
 export function Skeleton({ className = '' }: SkeletonProps) {
   return (
-    <div aria-hidden="true" className={`animate-pulse rounded-lg bg-slate-200/80 ${className}`} />
+    <div aria-hidden="true" className={cn('animate-pulse rounded-lg bg-slate-200/80', className)} />
   );
 }
diff --git a/src/widgets/workspace-page-skeleton/ui/WorkspacePageSkeleton.tsx b/src/widgets/workspace-page-skeleton/ui/WorkspacePageSkeleton.tsx
index bc95b2c..165a27b 100644
--- a/src/widgets/workspace-page-skeleton/ui/WorkspacePageSkeleton.tsx
+++ b/src/widgets/workspace-page-skeleton/ui/WorkspacePageSkeleton.tsx
@@ -124,12 +124,9 @@ function CalendarSkeleton() {
         <Skeleton className="h-10 w-32" />
         <Skeleton className="h-10 w-28" />
       </div>
-      <div className="grid grid-cols-7 overflow-hidden rounded-2xl border border-slate-200 bg-white">
+      <div className="grid grid-cols-7 gap-px overflow-hidden rounded-2xl border border-slate-200 bg-slate-200">
         {Array.from({ length: 42 }).map((_, index) => (
-          <div
-            key={index}
-            className="min-h-28 border-r border-b border-slate-100 p-3 last:border-r-0"
-          >
+          <div key={index} className="min-h-28 bg-white p-3">
             <Skeleton className="h-4 w-6" />
             {index % 3 === 0 ? <Skeleton className="mt-4 h-5 w-full" /> : null}
           </div>
@@ -143,8 +140,8 @@ function ChatSkeleton() {
   return (
     <>
       <PageHeading withAction={false} />
-      <div className="grid min-h-[calc(100vh-230px)] gap-5 lg:grid-cols-[minmax(0,1fr)_minmax(220px,0.32fr)]">
-        <div className="flex h-[min(720px,calc(100dvh-230px))] min-h-[480px] flex-col overflow-hidden rounded-2xl border border-slate-200 bg-white">
+      <div className="grid min-h-[calc(100vh_-_230px)] gap-5 lg:grid-cols-[minmax(0,1fr)_minmax(220px,0.32fr)]">
+        <div className="flex h-[min(720px,calc(100dvh_-_230px))] min-h-[480px] flex-col overflow-hidden rounded-2xl border border-slate-200 bg-white">
           <div className="flex items-center justify-between border-b border-slate-100 px-6 py-5">
             <Skeleton className="h-10 w-36" />
             <Skeleton className="h-7 w-20 rounded-full" />