[Refactor] 공용 EmptyState 로딩 상태에 "처리 중 · 중복 실행 차단" 캡션 추가

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;

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(
+      <EmptyState kind="loading" title="불러오는 중" body="잠시만 기다려 주세요." note="처리 중 · 중복 실행 차단" />,
+    )
+
+    expect(screen.getByText('처리 중 · 중복 실행 차단')).toBeInTheDocument()
+    expect(screen.queryByRole('button')).not.toBeInTheDocument()
+  })
 })

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 (
     <div className={`${styles.state} ${isLoading ? styles.loading : ''}`}>
       <p className={`${styles.title} ${isError ? styles.titleError : ''}`}>{title}</p>
       <p className={styles.body}>{body}</p>
+      {note && <p className={styles.note}>{note}</p>}
       {actionLabel && (
         <button
           type="button"

src/pages/AgentLogPage/AgentLogPage.tsx

@@ -85,7 +85,12 @@ export function AgentLogPage() {
 
       {status === 'loading' && (
         <div className={styles.stateWrap}>
-          <EmptyState kind="loading" title="Agent 이력을 불러오는 중입니다" body="잠시만 기다려 주세요." />
+          <EmptyState
+            kind="loading"
+            title="Agent 이력을 불러오는 중입니다"
+            body="잠시만 기다려 주세요."
+            note="처리 중 · 중복 실행 차단"
+          />
         </div>
       )}
 

src/pages/CaseDetailPage/CaseDetailPage.tsx

@@ -234,7 +234,12 @@ export function CaseDetailPage() {
   if (taskStatus === 'loading') {
     return (
       <div className={styles.stateWrap}>
-        <EmptyState kind="loading" title="업무 정보를 불러오는 중입니다" body="잠시만 기다려 주세요." />
+        <EmptyState
+          kind="loading"
+          title="업무 정보를 불러오는 중입니다"
+          body="잠시만 기다려 주세요."
+          note="처리 중 · 중복 실행 차단"
+        />
       </div>
     )
   }

src/pages/DashboardPage/DashboardPage.tsx

@@ -64,6 +64,7 @@ export function DashboardPage() {
             kind="loading"
             title="업무 현황을 불러오는 중입니다"
             body="기한·필수정보·응답 상태를 확인하고 있습니다."
+            note="처리 중 · 중복 실행 차단"
           />
         </div>
       )}

src/pages/DocumentDetailPage/DocumentDetailPage.tsx

@@ -25,7 +25,12 @@ export function DocumentDetailPage() {
   if (fetchStatus === 'loading') {
     return (
       <div className={styles.stateWrap}>
-        <EmptyState kind="loading" title="서류 정보를 불러오는 중입니다" body="잠시만 기다려 주세요." />
+        <EmptyState
+          kind="loading"
+          title="서류 정보를 불러오는 중입니다"
+          body="잠시만 기다려 주세요."
+          note="처리 중 · 중복 실행 차단"
+        />
       </div>
     )
   }

src/pages/DocumentListPage/DocumentListPage.tsx

@@ -129,7 +129,12 @@ export function DocumentListPage() {
 
       {status === 'loading' && (
         <div className={styles.stateWrap}>
-          <EmptyState kind="loading" title="서류 목록을 불러오는 중입니다" body="잠시만 기다려 주세요." />
+          <EmptyState
+            kind="loading"
+            title="서류 목록을 불러오는 중입니다"
+            body="잠시만 기다려 주세요."
+            note="처리 중 · 중복 실행 차단"
+          />
         </div>
       )}
 

src/pages/TicketListPage/TicketListPage.tsx

@@ -39,7 +39,12 @@ export function TicketListPage() {
 
       {status === 'loading' && (
         <div className={styles.stateWrap}>
-          <EmptyState kind="loading" title="티켓 목록을 불러오는 중입니다" body="잠시만 기다려 주세요." />
+          <EmptyState
+            kind="loading"
+            title="티켓 목록을 불러오는 중입니다"
+            body="잠시만 기다려 주세요."
+            note="처리 중 · 중복 실행 차단"
+          />
         </div>
       )}
 

src/pages/WorkListPage/WorkListPage.tsx

@@ -187,7 +187,12 @@ export function WorkListPage() {
 
       {status === 'loading' && (
         <div className={styles.stateWrap}>
-          <EmptyState kind="loading" title="업무 목록을 불러오는 중입니다" body="잠시만 기다려 주세요." />
+          <EmptyState
+            kind="loading"
+            title="업무 목록을 불러오는 중입니다"
+            body="잠시만 기다려 주세요."
+            note="처리 중 · 중복 실행 차단"
+          />
         </div>
       )}
 

src/pages/WorkerDetailPage/WorkerDetailPage.tsx

@@ -28,7 +28,12 @@ export function WorkerDetailPage() {
   if (status === 'loading') {
     return (
       <div className={styles.stateWrap}>
-        <EmptyState kind="loading" title="근로자 정보를 불러오는 중입니다" body="잠시만 기다려 주세요." />
+        <EmptyState
+          kind="loading"
+          title="근로자 정보를 불러오는 중입니다"
+          body="잠시만 기다려 주세요."
+          note="처리 중 · 중복 실행 차단"
+        />
       </div>
     )
   }

src/pages/WorkerListPage/WorkerListPage.tsx

@@ -189,7 +189,12 @@ export function WorkerListPage() {
 
       {status === 'loading' && (
         <div className={styles.stateWrap}>
-          <EmptyState kind="loading" title="근로자 목록을 불러오는 중입니다" body="잠시만 기다려 주세요." />
+          <EmptyState
+            kind="loading"
+            title="근로자 목록을 불러오는 중입니다"
+            body="잠시만 기다려 주세요."
+            note="처리 중 · 중복 실행 차단"
+          />
         </div>
       )}