fb9c84aa62
ADO2 로고 옆에 워드마크를 붙이던 인라인 배치를 Playreel 셸(.pr-wordmark)과 같은 문법으로 바꾼다 — ADO2 로고가 위, 제품 워드마크가 아래, 아래 줄을 로고 폭에 맞춰 락업이 사각형으로 앉는다. MOVING POSTER 는 PLAYREEL 보다 글자가 길어 같은 18px 를 쓰면 로고 폭을 넘는다. 브라우저에서 재서 16.4px + 자간 0.14em 으로 잡았다. 자간은 마지막 글자 뒤에도 붙으므로 음수 마진으로 걷어내야 오른쪽 끝이 맞는다. 실측(로고 h24 = 162.54px): 락업 컨테이너 폭 162.54px — 로고와 정확히 일치 워드마크 잉크 폭 162.34px — 오른쪽 끝 오차 0.2px (참고: Playreel 자체 워드마크는 같은 기준에서 2.75px 어긋나 있다) 390px 모바일 행: 헤더 71.4px, 메뉴 가로 스크롤 유지, 잘림 없음 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).