Screen Catalog

화면 카탈로그

Figma 파일: FOWOCO — [PWF] High-WireFrame - 2nd dev 페이지 (node-id=935-2)

디자인 기준 변천사: [MFW] Mid-WireFrame(러프 와이어프레임) → [PWF] Prototype-WireFrame(정식 프로토타입, 컴포넌트 라이브러리 포함) → [PWF] High-WireFrame - 2nd dev(현재 기준, 화면 인벤토리는 동일하되 오버레이·2차 개발 상태가 추가된 버전). Figma 파일 구조가 바뀔 때마다 페이지명이 달라졌으니, 링크가 깨지면 파일의 최상위 페이지 목록에서 PWF로 시작하는 최신 페이지를 다시 찾을 것.

화면 목록 및 구현 상태

Figma(PWF)에 설계된 화면 — 11개, 전부 구현 완료

화면 코드	이름	라우트	상태	참고 PR
AUTH-001	로그인	/	✅	#21
(신규)	회원가입	/signup	✅	#42 — Figma엔 없는 화면, AUTH-001 톤으로 자체 설계
HOME-001	대시보드 + 공통 셸(AppLayout)	/dashboard	✅	#23
WORK-001	업무함	/tasks	✅	#26, 이후 #64/#75/#95에서 필터·페이지네이션 보강
CREATE-001	업무 생성	/tasks/new	✅	#29
REVIEW-001	업무 검토	/tasks/new/review	✅	#31, 드롭다운 정리 #82
CASE-001	업무 상세	/tasks/:caseId	✅	#33, 탭별 콘텐츠(체크리스트/문서/소통/활동이력) #80
PEOPLE-001	근로자 목록(마스터-디테일)	/workers, /workers/:workerId	✅	#35, 딥링크 연결 #65
SET-001	설정	/settings	✅	#37, 탭별 콘텐츠(보안 링크/완료 증빙/처리 절차/데이터 로그) #81
LINK-001	근로자 모바일 안내 요청	/worker-portal	✅	#39
LINK-002	근로자 모바일 파일 업로드	/worker-portal/upload	✅	〃 — 여기 "질문이 있습니다" 버튼이 티켓 화면의 데이터 출처
LINK-003	근로자 모바일 링크 만료	/worker-portal/expired	✅	〃

Figma에 없어서 기존 화면 톤으로 자체 설계한 화면 — 3개 (M5)

사이드바 완결성을 위해 필요했지만 PWF에 대응 화면이 없어, WORK-001/PEOPLE-001과 동일한 톤(헤드라인+설명, 탭/검색, useAsyncDemoData 기반 loading/empty/error)으로 새로 설계했다.

이름	라우트	상태	PR
서류관리	/documents	✅	#66
Agent 패널	/agent	✅	#67, 기간 필터 연결 #78
티켓 관리	/tickets	✅	#68

총 14개 화면(데스크톱 11 + 자체 설계 3) + 모바일 3 + 회원가입, 전부 구현 완료.

Figma에 설계돼 있지만 아직 구현 안 된 것 (알려진 갭)

Figma 05_States & Overlays, 04_Integrated 2nd Dev States 섹션 전체를 2026-07-24에 다시 훑어서 목록을 갱신했다. 이전 목록보다 실제 범위가 크다(약 20개 오버레이). 우선순위 높은 것부터 M10 마일스톤 이슈로 쪼개서 진행 중.

완료됨:

• ✅ 업무 Context 드로어 (#109) — CaseDetailPage "펼쳐 보기 →"에서 오른쪽 슬라이드 드로어로 연결됨
• ✅ 승인 요청/결정/반려사유/다른승인자처리/재승인diff 오버레이 5종 (#146) — CaseDetailPage에 "승인 요청" 버튼 + 데모 진입점으로 연결됨
• ✅ 완료 처리 오버레이 (#148) — 외부기관 완료(증빙 유형 선택 → Missing/Ready 전환), 내부업무 완료(데모 진입점). COMPLETION_GATES가 승인/완료 상태에 실제로 연동됨

아직 미구현:

• 보안 링크 재발급/재발급완료 오버레이
• 파일 일괄 가져오기(INTAKE-001) — 4단계 위저드(파일 확인 → 컬럼 매핑 → 오류·충돌 검토 → 등록 결과). CreateWorkPage의 "파일 가져오기" 모드는 지금 토글만 있고 이 플로우가 없음
• 여러 업무 묶어서 생성(Compound Request), Agent 분류 불확실 확인(Classification Uncertain), 파일 하나로 여러 업무 초안 생성(File Multi Draft)
• 신규 사용자 온보딩 투어 3단계
• PWF2 신규 오버레이 4종 (기존 목록에 없었음, 재조사로 발견) — Conflict Resolver(기존값·가져온값 충돌 해결), Failed Rows Retry(실패 행 재처리), Document Bundle Drawer(서류 묶음 드로어), Missing Document Request Preview(누락 서류 요청 미리보기 초안)
• 티켓 답변 오버레이(TicketDetailPage는 페이지형으로 이미 구현했지만 Figma는 모달형으로 설계됨 — 기능은 동등하므로 우선순위 낮음), 근로자 질문 접수 알림(Worker Question Received)

공통 컴포넌트 라이브러리

자세한 목록과 사용법은 Component-Library 참고. 요약:

• Button, StatusLabel, AgentSourceLabel, WorkflowStep, DecisionGate, EmptyState, AgentSummary, WorkItemRow, DetailRow — M0~M2 기본 라이브러리
• Dropdown — 네이티브 <select> 스타일링 한계 때문에 #62에서 도입, 이후 전 화면 필터에 적용
• Modal, ToastViewport — #93/#94에서 도입 (도움말 패널, 전역 알림)

남은 작업 후보

• 백엔드 연동 (// TODO(backend) 주석 전수 검색으로 위치 파악 가능)
• 위 "Figma에 설계돼 있지만 아직 구현 안 된 것" 목록 — 완료 오버레이, 링크 재발급, 파일 일괄 가져오기, PWF2 신규 오버레이 4종 등 (M10 마일스톤)
• #97 StatusLabel·기한 색상 토큰의 WCAG AA 대비 미달 — 디자이너 확인 필요
• #47 승인 CTA·승인 대기 강조 인터랙션 — 디자인 쪽 Figma 작업 대기 중 (blocked)