개발 로그 · 프론트엔드
오너 cloverky · 폴더 frontend/ · 상태 확정 v1.0 (2026-08-24, #16·#18 머지)
작업 로그
2026-08-27 · front-applicants
- 대시보드 — 면접 일정 슬롯 그룹핑, 전형 현황 펀넬 추가
- 면접 일정 페이지 신규 (mockup + React, 슬롯 필터링)
- 목업 12개 화면 번들 → localhost:5500 단일 접근
- React 앱 셸 목업 규격 맞춤 (사이드바 아이콘·아르DA·제목 띠)
- 빈 화면 3개 구현: 지원자 / 평가 현황 / 설정
- 아르DA 패널 부제·Ctrl K 라벨 제거
- 아르DA 패널 상태 페이지 이동 간 유지 (localStorage)
일정 · 운영 (전 도메인 공통)
- 초기 버전: 09/04(금) · 1차 완성: 09/30(수). 주차 기준: W1 08/24~28 · W2 08/31~09/04 · W3 09/07~11 · W4 09/14~18 · W5 09/21~25 · 09/28~30 통합 버퍼.
- 주 단위로 스스로 계획하고 진행한다. 조정 시 이 문서를 갱신하고, 타 도메인에 걸리는 변경은 06-weekly.md에 기록해 팀장과 맞춘다.
- 팀장 머지·검수는 매주 금요일 최소 1회. 팀장 승인이 필요한 PR은 목요일까지 올린다. 도메인 내부 PR은 수시 셀프 머지.
1. 미션
목업 8장을 실제 React 제품으로. "UI가 스펙이다"의 그 UI를 최종 제품까지 끌고 간다. 칸반 드래그·낙관적 업데이트가 이 프로젝트의 얼굴이다.
2. 범위
포함
- React 앱 뼈대: Vite·TS·라우팅·토큰 CSS 변수 이식·공통 컴포넌트(사이드바·테이블·뱃지·버튼·인풋·토스트) — 팀장 전담에서 이관
- 목업 잔여 1장: B1 공고 목록 — minahdev로부터 인수
- 전 화면의 페이지 컴포넌트화 + API 연동
- 칸반 뷰 D2 · 드래그 단계 이동 D3 · 낙관적 업데이트·롤백 — 팀장 전담에서 이관
- 일괄 단계 변경 D9 · 업로드 진행률 F4 · 반응형(768px 모바일 웹)
- 에이전트 UI 시안 협업 (suvisdev 주도, agent.md M1)
- Vercel 배포 설정 (프로젝트 연결은 인프라, 빌드 설정은 프론트)
제외
- mockup.html 색 리터럴 정리 — 팀장 (W1-2 별건). 그 전까지 토큰 :root 블록 복사 규칙 유지
- 대시보드 화면 — 보류 유지 (W1-2 결정, 3주차 이후 여유 시)
- 모바일 네이티브 앱 — 앱 도메인. 여기서는 반응형 웹까지만
3. 인터페이스 계약
의존 — 백엔드 API(02-api.md). M1·M2는 목데이터로 진행하므로 백엔드를 기다리지 않는다. 목데이터 필드명은 01-erd.md와 동일하게.
제공 — 공통 컴포넌트·토큰. 에이전트 UI가 프론트 화면 안에 들어오므로, suvisdev의 UI 코드 PR은 프론트 오너 승인을 거친다.
4. 주간 계획
| 주차 | 단계 | 내용 | 완료 기준 |
|---|---|---|---|
| W1 ~08/28 |
M1 뼈대 | B1 목업 인수 완성 · React 뼈대(라우팅·토큰 이식·공통 컴포넌트) · 로그인+공고 목록 페이지(목데이터) | 목업 8장 전부 존재. npm run dev로 로그인→공고 목록 이동. 토큰이 CSS 변수 파일 하나로 모임 |
| W2 ~09/04 |
M2 전 화면 정적 🚩초기 버전 |
지원자 통합검색 · 공고의 지원자(테이블+상세 패널+"다음 지원자") · 평가 현황 · 설정 · 지원 폼(공개 라우트) · Vercel 프리뷰 배포 · 지원 폼만 실 API 제출 연동 | 전 화면이 목데이터로 동작하고 Vercel URL로 접근 가능. 목업과 나란히 놓고 구분 안 됨. 각 화면 loading/empty/error 3종 |
| W3 ~09/11 |
M3 API 연동 | JWT 로그인 플로우 · 목록·상세·평가·검색·단계 필터 · 지원 제출+업로드 진행률 F4 | 목데이터 import 0개. 검색·필터가 실제 10만 건을 친다. 업로드 진행률이 S3 직행 전송을 표시 |
| W4 ~09/18 |
M4 칸반 | 칸반 뷰 토글 D2 · 드래그 D3(낙관적 업데이트, 실패 롤백 + 토스트) · 일괄 변경 D9 · 에이전트 UI 구현 협업 | 드래그 실패 시 카드가 원위치로 롤백되고 토스트가 뜬다(네트워크 차단으로 시연 가능) |
| W5 ~09/25 |
배포·마감 | Vercel 배포 · 극단값·반응형·접근성 마감 | 프로덕션 URL에서 전 시나리오 동작 |
| 09/28~30 | 버퍼 | 폴리시 · 잔여 버그 | 09/30 1차 완성 |
5. 작업 큐 — 위에서부터 순서대로
| # | 작업 | 기능 | 지시서 | 선행 |
|---|---|---|---|---|
| 1 | B1 공고 목록 화면 목업 (인수) | B1 | 있음 | 없음 |
| 2 | React 뼈대 — 라우팅·토큰·공통 컴포넌트 | — | 없음 — 오너 작성 | 없음 |
| 3 | 로그인·공고 목록 페이지화 | A1·B1 | 없음 — 오너 작성 | 2번 |
| 4 | 공고의 지원자 화면 (테이블+상세 패널) | D1·D4 | 없음 — 오너 작성 | 2번 |
| 5 | 통합검색·평가·설정·지원 폼 페이지화 | H1·E1·A2·C1 | 없음 — 오너 작성 | 2번 |
| 6 | 에이전트 UI — ⌘K 콘솔 + 콘솔 내 확인 카드 (ADR-0009, 08/25 확정). 시안 불필요, 구현 협업만 남음(W4) | — | agent.md M1 | 4번 |
| 7 | API 연동 (M3 전체) | — | 없음 — 오너 작성 | 백엔드 M1 |
| 8 | 칸반 + 드래그 + 낙관적 업데이트 | D2·D3·D9 | 없음 — 오너 작성 | 7번 |
| 9 | Vercel 배포 | — | 인프라와 협업 | 7번 |
지시서 없는 항목은 오너가 직접 쪼개 진행한다. React 이식 시에도 화면 하나 = PR 하나, 목업에 없는 요소·토큰에 없는 값이 필요하면 멈추고 팀장에게.
6. 리스크
- 목업→React 이식에서 룩이 미묘하게 틀어지는 것. 완료 기준을 "나란히 놓고 구분 안 됨"으로 고정하고, PR마다 스크린샷 비교를 붙인다.
- 칸반 낙관적 업데이트가 마지막 주에 몰림. M4를 W3 후반에 시작하도록 M3에서 상세 패널까지 끝내둔다.
- 색 리터럴 정리(팀장) 전에 공통 CSS 파일을 만들면 두 번 일한다 — 정리 머지 후에 토큰 파일화한다.
7. 면접 스토리
- 드래그 실패 시 낙관적 업데이트를 어떻게 롤백했는가 (D3 — 실패 주입 시연 포함)
- 정적 목업 8장을 컴포넌트로 이식한 전략 — 공통 조각을 어떻게 추출했고 토큰이 왜 전부 CSS 변수인가