Component Library

공통 컴포넌트 라이브러리

src/components/ui/ 아래에 있는 재사용 컴포넌트 전체 목록. 새 화면을 만들 때 여기부터 확인할 것 — 대부분의 UI 패턴(뱃지, 필터, 빈 상태, 모달, 알림)이 이미 만들어져 있다.

컴포넌트	용도	주요 props
`StatusLabel`	상태 뱃지 (승인 대기, 완료 등)	`tone: 'neutral'\|'info'\|'success'\|'warning'\|'critical'\|'agent'`, `children`으로 라벨 텍스트 오버라이드 가능
`AgentSourceLabel`	Agent 판단 근거 출처 뱃지	`source: 'rule'\|'data'\|'draft'\|'review'`
`DetailRow`	라벨-값 한 줄 표시 (설정/업무 상세 등에서 반복 사용)	`label`, `value`, `tone?: 'default'\|'warning'\|'critical'\|'success'`
`WorkflowStep`	처리 단계 표시	`state: 'pending'\|'active'\|'done'\|'blocked'`
`DecisionGate`	승인 게이트 표시	`state: 'locked'\|'ready'\|'approved'`
`EmptyState`	loading/empty/error 공통 상태 화면	`kind: 'loading'\|'empty'\|'error'`, `title`, `body`, `actionLabel?`, `onAction?` — Project-Status의 `useAsyncDemoData` 패턴과 함께 사용

컴포넌트	용도
`WorkItemRow`	업무 목록 행 (대시보드/업무함/업무상세 공용). `urgency: 'warning'\|'critical'\|'neutral'`로 왼쪽 rail 색상 결정 — 기한 3단계 색상 유틸(`src/utils/urgency.ts`)의 `getUrgencyTier` 결과를 매핑해서 사용
`AgentSummary`	Agent가 준비한 다음 행동 요약 카드

컴포넌트	용도	도입 이유
`Button`	공통 버튼 (Primary/Secondary × Default/Disabled)	최초 라이브러리
`Dropdown`	커스텀 콤보박스	네이티브 `\<select\>`는 옵션 팝업을 CSS로 스타일링할 수 없어서 화면마다 드롭다운 모양이 제각각이었다 (#58). 트리거 버튼(48px 고정 높이) + 옵션 리스트, 키보드(화살표/Enter/Escape) 지원, `aria-activedescendant`로 스크린리더에 활성 옵션 전달, 닫힐 때 트리거로 포커스 복원. 현재 업무함/근로자/Agent 패널의 상태·마감·기한·기간 필터가 전부 이걸 사용
`Modal`	공통 모달/다이얼로그	#93에서 도움말 패널 만들며 도입. `role="dialog"` + `aria-modal`, ESC/바깥 클릭 닫기, Tab 포커스 트랩, 열릴 때 첫 포커스 가능 요소로 자동 포커스, 닫힐 때 트리거 요소로 포커스 복원, body 스크롤 잠금
`ToastViewport`	전역 토스트 알림	#94에서 도입. `src/store/toastStore.ts`(Zustand)의 `showToast(message)`로 어디서든 호출, `AppLayout`에 한 번만 마운트됨. `role="status" aria-live="polite"`, 3초 후 자동 소멸. 초안 저장·구성원 초대·승인 권한 토글·승인 요청 등 주요 액션에 연결돼 있음

목록형 화면이면 EmptyState + useAsyncDemoData로 loading/empty/error부터 처리
검색 인풋이 있으면 useDebouncedValue로 감싸기
필터 드롭다운은 네이티브 <select> 대신 Dropdown 사용
주요 액션(저장/초대/승인 등)에는 useToastStore().showToast(...)로 피드백 연결
날짜/기한을 보여준다면 getUrgencyTier로 색상 통일 검토
데모 데이터 필드에는 실제 백엔드 연동 지점을 // TODO(backend): <method> <path> 주석으로 표시 (CONTRIBUTING.md 컨벤션)

이름	위치	용도
`useAsyncDemoData`	`src/hooks/useAsyncDemoData.ts`	loading→success/empty 전이를 흉내내는 훅. `?demoState=loading\|empty\|error` URL 쿼리로 강제 전환 가능. 백엔드 연동 시 React Query `useQuery`로 교체 예정
`useDebouncedValue`	`src/hooks/useDebouncedValue.ts`	검색 인풋 등에 쓰는 범용 디바운스 훅 (기본 200ms). #96
`getUrgencyTier` / `URGENCY_TONE` / `URGENCY_LABEL`	`src/utils/urgency.ts`	기한(D-day)을 긴급(7일 이내)/중간(8~30일)/여유(31일 이상 또는 기한 없음) 3단계로 분류. #87 — 근로자 목록 기한 뱃지, 업무함 rail 색상에 적용