frontend/1. 미션
목업 8장을 실제 React 제품으로 만든다. 이 프로젝트의 진행 원칙이 "UI가 정적 화면이 곧 스펙이다"인데, 그 UI를 최종 제품까지 끌고 가는 역할이다.
칸반 드래그와 낙관적 업데이트가 이 프로젝트의 얼굴이다 — 시연에서 가장 먼저 보이고, 가장 자주 만지는 부분이다.
2. 범위
포함
- React 앱 뼈대 — Vite · TypeScript · 라우팅 · 토큰 CSS 변수 이식 · 공통 컴포넌트(사이드바 · 테이블 · 뱃지 · 버튼 · 인풋 · 토스트)
- 목업 잔여 1장 — 공고 목록 화면
- 전 화면의 페이지 컴포넌트화 + API 연동
- 칸반 뷰 · 드래그 단계 이동 · 낙관적 업데이트와 롤백
- 일괄 단계 변경 · 업로드 진행률 · 반응형(768px 모바일 웹)
- 에이전트 UI 구현 협업
- Vercel 빌드 설정 (프로젝트 연결은 인프라)
제외
- 목업 색 리터럴 정리 — 총괄 담당. 그 전까지 토큰 블록 복사 규칙 유지
- 대시보드 화면 — 보류. 3주차 이후 여유가 있으면
- 모바일 네이티브 앱 — 앱 도메인. 여기서는 반응형 웹까지만
3. 인터페이스 계약
의존 — 백엔드 API. 다만 M1과 M2는 목데이터로 진행하므로 백엔드를 기다리지 않는다. 대신 목데이터 필드명을 ERD와 동일하게 맞춰, 실제 연동이 필드 교체만으로 끝나도록 설계했다.
제공 — 공통 컴포넌트와 디자인 토큰. 에이전트 UI가 프론트 화면 안에 들어오므로, 에이전트 담당자가 올리는 프론트 파일 PR은 이 도메인 오너의 승인을 거친다.
4. 주간 계획
| 주차 | 마일스톤 | 내용 | 완료 기준 |
|---|---|---|---|
| W108. 24. ~ 28. | M1 뼈대 | 공고 목록 목업 인수 완성 · React 뼈대(라우팅 · 토큰 이식 · 공통 컴포넌트) · 로그인과 공고 목록 페이지(목데이터) | 목업 8장 전부 존재. 개발 서버에서 로그인 → 공고 목록 이동. 토큰이 CSS 변수 파일 하나로 모인다 |
| W208. 31. ~ 09. 04. | M2 전 화면 정적 초기 버전 | 지원자 통합검색 · 공고의 지원자(테이블 + 상세 패널) · 평가 현황 · 설정 · 지원 폼(공개 라우트) · Vercel 프리뷰 배포 · 지원 폼만 실 API 연동 | 전 화면이 목데이터로 동작하고 Vercel URL로 접근 가능. 목업과 나란히 놓고 구분 안 됨. 각 화면 로딩 · 빈 상태 · 오류 3종 |
| W309. 07. ~ 11. | M3 API 연동 | JWT 로그인 플로우 · 목록 · 상세 · 평가 · 검색 · 단계 필터 · 지원 제출과 업로드 진행률 | 목데이터 import 0개. 검색과 필터가 실제 10만 건을 친다. 업로드 진행률이 S3 직행 전송을 표시한다 |
| W409. 14. ~ 18. | M4 칸반 | 칸반 뷰 토글 · 드래그 단계 이동(낙관적 업데이트, 실패 롤백 + 토스트) · 일괄 변경 · 에이전트 UI 구현 협업 | 드래그 실패 시 카드가 원위치로 롤백되고 토스트가 뜬다 — 네트워크 차단으로 시연 가능 |
| W509. 21. ~ 25. | 배포 · 마감 | Vercel 배포 · 극단값 · 반응형 · 접근성 마감 | 프로덕션 URL에서 전 시나리오 동작 |
| 버퍼09. 28. ~ 30. | 동결 | 폴리시 · 잔여 버그 | 09. 30. 1차 완성 |
5. 작업 원칙
화면 하나 = PR 하나
React로 이식할 때도 목업을 만들 때의 조각 루프를 유지한다. 화면 단위로 쪼개 올리고, 목업에 없는 요소나 토큰에 없는 값이 필요하면 멈추고 총괄에게 묻는다. 임의로 만들어 넣지 않는 것이 규칙이다.
지시서 없는 항목은 오너가 직접 쪼갠다
작업 큐 9건 중 지시서가 있는 것은 목업 1건뿐이고 나머지는 오너가 직접 설계한다. 도메인 오너제에서 지시서 작성 여부는 오너 판단이다.
에이전트 UI 위치는 이미 확정됐다
시안 3안을 만들 계획이었으나 결정이 먼저 나면서 시안 작업이 통째로 불필요해졌다. 확정안은 단축키 콘솔 + 콘솔 내 확인 카드이고, 남은 것은 W4의 구현 협업뿐이다.
6. 리스크 및 대응
| 리스크 | 대응 |
|---|---|
| 목업 → React 이식에서 룩이 미묘하게 틀어짐 | 완료 기준을 "나란히 놓고 구분 안 됨"으로 고정하고, PR마다 스크린샷 비교를 붙인다. |
| 칸반 낙관적 업데이트가 마지막 주에 몰림 | M4를 W3 후반에 시작할 수 있도록 M3에서 상세 패널까지 끝내둔다. |
| 두 번 일하게 되는 순서 | 색 리터럴 정리(총괄) 전에 공통 CSS 파일을 만들면 정리 후 다시 손대야 한다. 정리 머지 후에 토큰을 파일화한다. |
7. 발표 포인트
- 드래그 실패 시 낙관적 업데이트를 어떻게 롤백했는가 — 먼저 그려놓고 서버가 거절하면 되돌리는 구조를, 실패를 일부러 주입해 시연까지 한다.
- 정적 목업 8장을 컴포넌트로 이식한 전략 — 공통 조각을 어떻게 추출했고, 토큰이 왜 전부 CSS 변수여야 했는가.