d50dc52c39
thumb_url을 백엔드가 내려보내는데 화면은 라벨 칩만 그렸다.
실물은 19조각에 라벨이 겹쳐서("유의사항" 일곱 개) 무엇을 고르는지
알 수 없는 상태였다.
- SectionPicker: 썸네일 그리드(auto-fill 84px, 390px에서 4열).
번호 배지 · 선택 표시 · 잠금(캐스팅 스케줄) · 높이 툴팁
- 문구를 새 동작에 맞춘다 — 조각을 잘라 붙이는 것이 아니라
고른 지점부터 상세페이지를 이어서 훑는다
- 목 데이터를 실측 19조각으로 교체. 6개짜리 깔끔한 목을 두었던 탓에
라벨이 겹치는 실물 모양을 개발 중에 못 봤다
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
|
||
|---|---|---|
| .. | ||
| app | ||
| components | ||
| lib | ||
| public | ||
| .gitignore | ||
| AGENTS.md | ||
| CLAUDE.md | ||
| Dockerfile | ||
| eslint.config.mjs | ||
| next.config.ts | ||
| package-lock.json | ||
| package.json | ||
| postcss.config.mjs | ||
| proxy.ts | ||
| README.md | ||
| tsconfig.json | ||
frontend
Next.js 16 · React 19 · TypeScript. ~/workspace/o2o-ado2-poster-to-video/product/web 를 옮겨온 것이다.
실행
npm ci
npm run dev # http://localhost:30100
백엔드는 API_ORIGIN 으로 지정한다. 기본값은 http://localhost:30101 이고,
next.config.ts 의 리라이트가 /api/* 를 그리로 넘긴다. CORS는 쓰지 않는다.
docker compose 로 띄우면 API_ORIGIN=http://backend:30101 이 들어간다.
화면
| 경로 | 하는 일 |
|---|---|
/playreel |
공연 상품페이지 주소 → 30초 롱컷. 게이트 5회 |
/playreel/[id] |
진행 상황과 게이트 검수 카드 |
/ /poster /poster/[id] |
포스터 업로드 → 8초 숏폼 |
/studio |
포스터 스타일 변환 — 백엔드에 /api/f2 가 없다 |
/archive /playreel/archive |
아카이브 — 백엔드에 /api/archive 가 없다 |
?mock=<gate> 를 붙이면 서버 없이 게이트 화면만 볼 수 있다
(fetch_confirm analysis_confirm narration_confirm clip_confirm final_confirm).