# Task-519: Remotion Phase 0 + Phase 1 (환경 셋업 + POC)

## 목표
ThreadAuto 카드뉴스 렌더링을 Pillow → Remotion(React)으로 전환하기 위한 환경 셋업 + CoverSlide 1종 POC 검증.

## 선행 리서치 (반드시 읽을 것)
- 마이그레이션 계획: `/home/jay/workspace/memory/plans/threadauto-remotion/migration-draft.md`
- Remotion 딥다이브: `/home/jay/workspace/memory/research/remotion-deep-dive.md`
- 1팀이 기존 리서치 수행했으므로 맥락 있음 (task-434.1)

## Phase 0: 환경 셋업

### 0-1. 시스템 패키지 설치
```bash
sudo apt-get install -y \
  libnss3 libdbus-1-3 libatk1.0-0 libasound2t64 \
  libxrandr2 libxkbcommon-dev libxfixes3 libxcomposite1 libxdamage1 \
  libgbm-dev libcups2 libcairo2 libpango-1.0-0 libatk-bridge2.0-0 \
  fonts-noto-cjk fonts-noto-color-emoji
```

### 0-2. Remotion 프로젝트 초기화
```bash
cd /home/jay/projects/ThreadAuto
mkdir -p remotion && cd remotion
npm init -y
npm install remotion @remotion/cli @remotion/bundler @remotion/renderer
npm install react react-dom express uuid
npm install -D typescript @types/react @types/react-dom @types/express
npx remotion browser ensure
```

### 0-3. tsconfig.json + remotion.config.ts 생성
- migration-draft.md 섹션 2.2~2.3 참고

## Phase 1: POC (CoverSlide 1종)

### 1-1. 디렉토리 구조 생성
```
remotion/
├── src/
│   ├── index.ts
│   ├── Root.tsx
│   ├── compositions/CardNews.tsx
│   ├── slides/CoverSlide.tsx
│   ├── components/BrandBar.tsx, BrandFooter.tsx
│   ├── themes/types.ts, navy-gold.ts
│   └── utils/props.ts
└── render-server/
    └── server.ts
```

### 1-2. NavyGold 테마 TypeScript 구현
- migration-draft.md 섹션 3.2 참고
- 기존 Python themes.py의 NavyGold 테마를 1:1 매핑

### 1-3. CoverSlide 컴포넌트 구현
- 그라데이션 배경 + Pill badge + 제목/부제목 + 서울대보험쌤 브랜딩
- 1080x1350 카드뉴스 규격
- 한글 폰트: Noto Sans CJK KR (서버에 설치됨)

### 1-4. render-server Express 세팅
- PORT 3001 (3000은 다른 서비스 가능성)
- POST /render/still — inputProps 받아 renderStill() 호출 → PNG 반환
- 헬스체크: GET /health

### 1-5. Python 연결 파일
- `renderer/remotion_adapter.py` — content_generator_v2 출력 → Remotion inputProps 변환
- `renderer/remotion_client.py` — HTTP API 클라이언트 (render-server 호출)

### 1-6. Pillow vs Remotion 비교 테스트
- 동일한 daily_queue JSON 1건으로 양쪽 렌더링
- 비교 이미지를 `/home/jay/projects/ThreadAuto/output/comparison/` 에 저장
- 비교 보고서 작성

## 프로젝트 경로
`/home/jay/projects/ThreadAuto/`

## 주의사항
- Pillow 기존 렌더러는 절대 삭제하지 않는다 (병행 운영)
- `REMOTION_RENDER` 환경변수로 feature flag 제어
- render-server는 systemd 데몬화하지 않는다 (Phase 4에서 처리)
- 비교 이미지는 제이회장님이 확인할 수 있도록 보존

## 테스트
1. `npx remotion still CardNews ./output/test_cover.png` — CLI 렌더 성공
2. render-server 기동 → POST /render/still 호출 → PNG 반환
3. remotion_client.py → render-server → PNG 저장 end-to-end
4. Pillow vs Remotion 시각적 비교 보고서

## 작업 레벨: Lv.2 (기능 구현)