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 섹션에 아래 오버레이/플로우가 설계돼 있으나 fowoco-client엔 아직 없다. 지금은 해당 액션 버튼을 누르면 토스트만 뜨거나 TODO(backend) 주석만 있는 상태.

• 승인 요청/결정 오버레이 — 승인 대상·승인자·ANY_ONE 규칙·메모를 입력하는 모달, 승인/반려 결정, 반려 사유 입력, 재승인 스냅샷 diff, "다른 승인자가 처리함" 알림
• 업무 Context 드로어 — CaseDetailPage "펼쳐 보기 →"가 지금은 스텁, Figma엔 오른쪽 슬라이드 드로어 전체가 설계돼 있음
• 완료 처리 오버레이 — 내부 업무 완료(메모), 외부기관 완료(접수번호·파일·화면캡처 증빙)
• 보안 링크 재발급 오버레이
• 파일 일괄 가져오기(INTAKE-001) — 4단계 위저드(파일 확인 → 컬럼 매핑 → 오류·충돌 검토 → 등록 결과). CreateWorkPage의 "파일 가져오기" 모드는 지금 토글만 있고 이 플로우가 없음
• 여러 업무 묶어서 생성(Compound Request), Agent 분류 불확실 확인(Classification Uncertain), 파일 하나로 여러 업무 초안 생성(File Multi Draft)
• 신규 사용자 온보딩 투어 3단계

이 중 우선순위가 높은 것부터 이슈로 쪼개서 진행할 것 — 아직 이슈화되지 않았다.

공통 컴포넌트 라이브러리

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

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

남은 작업 후보

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