Skip to content

Screen Catalog

mini edited this page Aug 10, 2026 · 12 revisions

화면 카탈로그

Figma 파일: FOWOCO[PWF] Prototype-WireFrame-3rd(PWF v3) 페이지, node-id=1246-751

디자인 기준 변천사: [MFW] Mid-WireFrame(러프 와이어프레임, 참고용으로만 남아 있음 — 이슈 #161) → [PWF] High-WireFrame - 2nd dev(예전 기준) → [PWF] Prototype-WireFrame-3rd(현재 기준). PWF v3는 섹션 00~11 + 별도 Exploration 영역으로 구성된다:

섹션 내용
00 Read Me & Scenario Launcher
01 Product Blueprint & Evolution — 화면 인벤토리 원본
02 Foundations & Tokens — 색상·타이포·간격
03 Component Library
04 Authentication & Onboarding
05 Desktop Core Product — 실제 화면 스펙 대부분이 여기 있음
06 Worker Mobile — LINK-001/002/003
07 States & Overlays
08 Prototype Flow — Flow 00·A~G 시나리오 정의
09 Developer Handoff — Screen Inventory, Validation·Recovery Matrix 등
10 QA & Governance
11 Future Extension Zone (아직 채택 안 된 후보, 지금 구현 대상 아님)
(별도) PWF3 Exploration — 상태가 "Proposed / In Review"인 후보 화면. 지금 구현 대상 아님

Figma 파일 구조가 또 바뀔 수 있으니, 링크가 깨지면 파일 최상위 페이지 목록에서 PWF로 시작하는 최신 페이지를 다시 찾을 것.

사이드바 메뉴 (공통, AppLayout)

Figma PWF v3 사이드바는 5개만 정의한다: Today · 업무함 · 근로자 · 문서함 · 설정. 예전에 있던 Agent·티켓 메뉴는 Figma에 대응 화면이 없어 #206에서 사이드바 링크만 제거했다 (라우트·페이지는 남아 있어 URL로는 접근 가능 — 처리 방향은 #206에서 결정 대기).

"설정" 메뉴는 /profile(내 프로필)로 연결된다. SettingsPage는 사용자 요청으로 전체 삭제되었다 (PR #210) — 자세한 내용은 Auth-and-Demo-Account 참고.

화면 목록 및 구현 상태

인증 (Figma 04_Authentication & Onboarding)

화면 라우트 상태 비고
인트로/랜딩 / Figma엔 없는 자체 마케팅 랜딩 페이지. FOWOCO_6대 Workflow 실행설계서 내용을 반영해 "6대 Workflow" 섹션 보유
로그인 /login 실 Auth API 연동
회원가입 /signup 실 Auth API 연동
비밀번호 재설정 4종 /forgot-password/email-sent/reset-password/reset-complete ✅ (정적 UI만) 서버 API 대기 (server#55)
온보딩 데이터 가져오기 /onboarding/import ONB-IMPORT-01~05, 5단계 위저드. PR #296에서 근로자 명단 파일 import가 실 서버 API에 연동됨(이전 데모 상태에서 전환)

데스크톱 핵심 화면 (Figma 05_Desktop Core Product)

화면 코드 이름 라우트 상태 비고
HOME-001 대시보드 (Today) /dashboard Metric Strip 4카드, AI 요청 프롬프트 칩, AI Prepared 패널 포함
CREATE-001 업무 생성 /tasks/new 자연어 입력 + 파일 가져오기(Excel/CSV) 모드. PR #296에서 AI Run 연동(POST /ai-runsNEEDS_INFO 추가 질문 응답, SSE 진행 상태 구독, 브라우저 탭 단위 요청 초안 보존) 완료 — 이슈 #229
REVIEW-001 업무 검토 /tasks/new/review AiRunReview.tsx에서 AI Run 후보(REVIEW_REQUIRED) 검토 → Case/Task 확정까지 실 API 연동
INTAKE-001-MAPPING/CONFLICT/PARTIAL 파일 가져오기 위저드 (컬럼 매핑·충돌·부분성공) CreateWorkPage 내부 오버레이 서버에 일괄 등록 API가 없어 데모
WORK-001 업무함 /tasks 근로자 중심 마스터-디테일 구조 유지(#214/#215). #268/PR #269에서 데이터 소스를 workers+tasks+workflow-catalogs 클라이언트 결합 방식에서 서버 GET /cases, /cases/{id}/projection으로 교체 — N+1 조합 로직 제거, 서버가 Case 단위로 직접 내려줌
CASE-001 업무 상세 /tasks/:taskId 라우트 파라미터명을 :caseId:taskId로 정정(PR #215) — 실제로 Task ID를 받는 라우트였음
CASE-001-DOCUMENTS 업무 상세 "문서" 탭 CaseDetailPage 내부
PEOPLE-001 근로자 목록(마스터-디테일) /workers, /workers/:workerId AI 추천 카드 2종(AI 준비 완료/근로자 응답 대기), 의사결정 요약, 상태 필터 포함
근로자 상세(딥링크) /workers/:workerId/detail Figma에 없는 자체 설계
DOC-001 문서함 /documents, /documents/:documentId 탭 6개(전체/검토 필요/만료 예정/누락 문서/요청 중/최근 업로드) + 메트릭 카드 4개. PR #296에서 문서 요청 초안 복구·원본 다운로드·HWP/HWPX 업로드·OCR 검토 이력을 실 서버 API에 연동. "요청 중"·"최근 업로드" 탭이 여전히 근사치인지는 서버 SubmissionStatus 스펙 재확인 필요(미검증)
PROFILE-001 내 프로필 /profile 이슈 #191. 필드 검증, 미저장 변경사항 이탈 방지(useBlocker), 알림 설정 포함. 완료 조건: #212 필수 보안 알림 토글 아직 미구현. PR #296에서 CompanySettingsPanel(회사 설정 조회/수정)이 이 페이지 내부 패널로 추가됨 — 별도 라우트 아님
SET-001 설정 /settings ❌ 삭제됨 사용자 요청으로 PR #210에서 전체 제거, "설정" 메뉴는 /profile로 리다이렉트. 구성원 초대·보안 링크 재발급 기능 유실 (#211)

근로자 모바일 (Figma 06_Worker Mobile)

화면 코드 이름 라우트 상태
LINK-001 근로자 모바일 안내 요청 /worker-portal
LINK-002 근로자 모바일 파일 업로드 /worker-portal/upload
LINK-003 근로자 모바일 링크 만료 /worker-portal/expired ✅ (재발급 요청 UI만 — 실제 HR 재발급 화면은 #211에서 유실)

Figma에 없어서 기존 화면 톤으로 자체 설계한 화면

사이드바 완결성을 위해 만들었으나, 현재 Figma PWF v3 사이드바(5개 메뉴)에는 대응이 없어 #206에서 사이드바 링크는 제거하고 라우트만 유지 중.

이름 라우트 상태
Agent 패널 /agent ✅ (사이드바 진입점 없음)
티켓 관리 /tickets, /tickets/:ticketId ✅ (사이드바 진입점 없음)

알려진 갭 (열린 이슈)

  • #211 (P1) — 보안 링크 재발급(Figma Flow E) 기능이 SettingsPage 삭제로 유실. HR이 만료된 근로자 링크를 재발급할 화면이 없음
  • #212 (P2) — 내 프로필 알림 설정에 필수(비활성화) 보안 알림 토글 추가 필요
  • #206 (P2) — Agent 패널·티켓 화면의 최종 처리 방향(삭제/재설계/다른 화면에 흡수) 결정 필요
  • DOC-001 탭 근사치 — "요청 중"·"최근 업로드" 탭은 서버 API 제약으로 정확한 데이터가 아님 (위 표 참고)

백엔드 연동 현황

v3.0.0(PR #296) 기준으로 Auth·Worker·Task·Case·Audit·Document·Worker Import·Worker Link·Company Settings· Notification·AI Run까지 주요 도메인이 실 서버에 연동되어 있다. 승인·완료처리(/tasks/{id}/approval-requests /approve//reject//evidence//complete)도 approvals.tsCaseDetailPage로 연결된 것이 확인됨(2026-08-10 감사) — 다만 #154/#155가 원래 지적한 multi-approver 등 서버에 없는 개념이 남아있는지는 재확인 필요. 최신 스냅샷은 Project-Status 참고.

// TODO(backend) 주석으로 남은 연동 지점을 검색할 수 있다.

공통 컴포넌트 라이브러리

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