From bfdf3a9026e2efa38ffe690ca38d00c019c30cf6 Mon Sep 17 00:00:00 2001 From: mini Date: Fri, 31 Jul 2026 11:33:07 +0900 Subject: [PATCH] =?UTF-8?q?refactor(empty-state):=20=EB=A1=9C=EB=94=A9=20?= =?UTF-8?q?=EC=83=81=ED=83=9C=EC=97=90=20"=EC=B2=98=EB=A6=AC=20=EC=A4=91?= =?UTF-8?q?=20=C2=B7=20=EC=A4=91=EB=B3=B5=20=EC=8B=A4=ED=96=89=20=EC=B0=A8?= =?UTF-8?q?=EB=8B=A8"=20=EC=BA=A1=EC=85=98=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Figma 07_States & Overlays의 System · Empty/Loading/Error 템플릿(node 1296:1585) 기준. EmptyState에 note prop을 추가하고 로딩 상태를 쓰는 9개 화면 전체에 적용. --- src/components/ui/EmptyState/EmptyState.module.css | 8 ++++++++ src/components/ui/EmptyState/EmptyState.test.tsx | 9 +++++++++ src/components/ui/EmptyState/EmptyState.tsx | 5 ++++- src/pages/AgentLogPage/AgentLogPage.tsx | 7 ++++++- src/pages/CaseDetailPage/CaseDetailPage.tsx | 7 ++++++- src/pages/DashboardPage/DashboardPage.tsx | 1 + src/pages/DocumentDetailPage/DocumentDetailPage.tsx | 7 ++++++- src/pages/DocumentListPage/DocumentListPage.tsx | 7 ++++++- src/pages/TicketListPage/TicketListPage.tsx | 7 ++++++- src/pages/WorkListPage/WorkListPage.tsx | 7 ++++++- src/pages/WorkerDetailPage/WorkerDetailPage.tsx | 7 ++++++- src/pages/WorkerListPage/WorkerListPage.tsx | 7 ++++++- 12 files changed, 70 insertions(+), 9 deletions(-) diff --git a/src/components/ui/EmptyState/EmptyState.module.css b/src/components/ui/EmptyState/EmptyState.module.css index ecb1179..8662437 100644 --- a/src/components/ui/EmptyState/EmptyState.module.css +++ b/src/components/ui/EmptyState/EmptyState.module.css @@ -28,6 +28,14 @@ color: var(--text-secondary); } +.note { + margin: 0; + font-size: 13px; + font-weight: 500; + line-height: 21px; + color: var(--brand-primary); +} + .action { font-size: 13px; font-weight: 500; diff --git a/src/components/ui/EmptyState/EmptyState.test.tsx b/src/components/ui/EmptyState/EmptyState.test.tsx index aecac2b..9383e6f 100644 --- a/src/components/ui/EmptyState/EmptyState.test.tsx +++ b/src/components/ui/EmptyState/EmptyState.test.tsx @@ -29,4 +29,13 @@ describe('EmptyState', () => { await user.click(screen.getByRole('button', { name: '업무 만들기' })) expect(onAction).toHaveBeenCalledOnce() }) + + it('renders the note caption without making it a clickable action', () => { + render( + , + ) + + expect(screen.getByText('처리 중 · 중복 실행 차단')).toBeInTheDocument() + expect(screen.queryByRole('button')).not.toBeInTheDocument() + }) }) diff --git a/src/components/ui/EmptyState/EmptyState.tsx b/src/components/ui/EmptyState/EmptyState.tsx index ba20fc1..84205fb 100644 --- a/src/components/ui/EmptyState/EmptyState.tsx +++ b/src/components/ui/EmptyState/EmptyState.tsx @@ -6,17 +6,20 @@ export interface EmptyStateProps { kind?: EmptyStateKind title: string body: string + /** 클릭 동작이 없는 보조 캡션 — 로딩 상태의 "처리 중 · 중복 실행 차단" 같은 상태 표시용. */ + note?: string actionLabel?: string onAction?: () => void } -export function EmptyState({ kind = 'empty', title, body, actionLabel, onAction }: EmptyStateProps) { +export function EmptyState({ kind = 'empty', title, body, note, actionLabel, onAction }: EmptyStateProps) { const isError = kind === 'error' const isLoading = kind === 'loading' return (

{title}

{body}

+ {note &&

{note}

} {actionLabel && (
)} diff --git a/src/pages/CaseDetailPage/CaseDetailPage.tsx b/src/pages/CaseDetailPage/CaseDetailPage.tsx index 00b2a68..5d14687 100644 --- a/src/pages/CaseDetailPage/CaseDetailPage.tsx +++ b/src/pages/CaseDetailPage/CaseDetailPage.tsx @@ -234,7 +234,12 @@ export function CaseDetailPage() { if (taskStatus === 'loading') { return (
- +
) } diff --git a/src/pages/DashboardPage/DashboardPage.tsx b/src/pages/DashboardPage/DashboardPage.tsx index d42cac3..f6258b7 100644 --- a/src/pages/DashboardPage/DashboardPage.tsx +++ b/src/pages/DashboardPage/DashboardPage.tsx @@ -64,6 +64,7 @@ export function DashboardPage() { kind="loading" title="업무 현황을 불러오는 중입니다" body="기한·필수정보·응답 상태를 확인하고 있습니다." + note="처리 중 · 중복 실행 차단" /> )} diff --git a/src/pages/DocumentDetailPage/DocumentDetailPage.tsx b/src/pages/DocumentDetailPage/DocumentDetailPage.tsx index 1b273e6..6b62ce9 100644 --- a/src/pages/DocumentDetailPage/DocumentDetailPage.tsx +++ b/src/pages/DocumentDetailPage/DocumentDetailPage.tsx @@ -25,7 +25,12 @@ export function DocumentDetailPage() { if (fetchStatus === 'loading') { return (
- +
) } diff --git a/src/pages/DocumentListPage/DocumentListPage.tsx b/src/pages/DocumentListPage/DocumentListPage.tsx index 1f4b33b..4cf8ae2 100644 --- a/src/pages/DocumentListPage/DocumentListPage.tsx +++ b/src/pages/DocumentListPage/DocumentListPage.tsx @@ -129,7 +129,12 @@ export function DocumentListPage() { {status === 'loading' && (
- +
)} diff --git a/src/pages/TicketListPage/TicketListPage.tsx b/src/pages/TicketListPage/TicketListPage.tsx index a50183e..e2ec4a7 100644 --- a/src/pages/TicketListPage/TicketListPage.tsx +++ b/src/pages/TicketListPage/TicketListPage.tsx @@ -39,7 +39,12 @@ export function TicketListPage() { {status === 'loading' && (
- +
)} diff --git a/src/pages/WorkListPage/WorkListPage.tsx b/src/pages/WorkListPage/WorkListPage.tsx index 437b7ff..ce3ca06 100644 --- a/src/pages/WorkListPage/WorkListPage.tsx +++ b/src/pages/WorkListPage/WorkListPage.tsx @@ -187,7 +187,12 @@ export function WorkListPage() { {status === 'loading' && (
- +
)} diff --git a/src/pages/WorkerDetailPage/WorkerDetailPage.tsx b/src/pages/WorkerDetailPage/WorkerDetailPage.tsx index 3a1725d..b07424a 100644 --- a/src/pages/WorkerDetailPage/WorkerDetailPage.tsx +++ b/src/pages/WorkerDetailPage/WorkerDetailPage.tsx @@ -28,7 +28,12 @@ export function WorkerDetailPage() { if (status === 'loading') { return (
- +
) } diff --git a/src/pages/WorkerListPage/WorkerListPage.tsx b/src/pages/WorkerListPage/WorkerListPage.tsx index a40c02f..a4d3446 100644 --- a/src/pages/WorkerListPage/WorkerListPage.tsx +++ b/src/pages/WorkerListPage/WorkerListPage.tsx @@ -189,7 +189,12 @@ export function WorkerListPage() { {status === 'loading' && (
- +
)}