# task-436.2 보고서: ThreadAuto Remotion Phase 2 — 카드뉴스 전체 전환

**팀**: dev1 (헤르메스 팀장, 이리스/불칸/아르고스)
**일시**: 2026-03-10
**레벨**: Lv.2

---

## 작업 내용

### 2-1. 기존 슬라이드 타입 전수 분석

`renderer/cardnews.py` (82KB, 2200줄+)를 분석하여 5종 슬라이드 타입 확인:

- **cover**: 표지 (PillBadge + 제목 + 부제 + 키워드) — Phase 1 구현 완료
- **card_list**: 카드 리스트 (제목 + items 배열 + CTA 배너) — Phase 1 구현 완료
- **detail**: 상세 인포박스 (제목 + items + TIP 박스 + accent bar)
- **summary_cta** (=cta): 요약 + CTA (중앙 제목 + accent outline 요약 + CTA 텍스트)
- **body**: 단순 본문 (제목 + 단일 GlassCard + CircleBadge)

### 2-2. 나머지 슬라이드 Remotion 컴포넌트 구현

**신규 슬라이드 3종:**

- `src/slides/DetailSlide.tsx`: CircleBadge(content_index) + 제목 + 부제 + 구분선 + GlassCard 인포박스(accent bar) + TIP 박스
- `src/slides/SummaryCtaSlide.tsx`: 대형 제목(중앙) + accent outline 요약영역(CircleBadge 번호) + CTA 텍스트(accent)
- `src/slides/BodySlide.tsx`: 제목 + 수직 중앙 GlassCard(CircleBadge + "요점 N" 레이블 + description)

**신규 공통 컴포넌트:**

- `src/components/CircleBadge.tsx`: 원형 숫자 배지 (size/bgColor/textColor props)

**타입 확장:**

- `src/types/props.ts`: SlideData type union에 "cta" 추가, description/tip_text/index/category/keywords 필드, items에 label/value 추가

### 2-3. 테마 시스템 확장

Python `renderer/themes.py`의 5종 테마를 1:1 이식:

- `src/themes/navy-gold.ts` (기존)
- `src/themes/black-red.ts` — 딥 블랙-레드, 화이트 텍스트
- `src/themes/green-white.ts` — 라이트 민트-화이트, 다크 그린 텍스트
- `src/themes/purple-pink.ts` — 다크 퍼플-마젠타, 라벤더 텍스트
- `src/themes/orange-cream.ts` — 크림-피치, 다크 브라운 텍스트
- `src/themes/index.ts` — THEMES 배열, THEME_MAP, getTheme() 함수 (대소문자 무관 검색)

### 2-4. SLIDE_MAP 업데이트

`src/compositions/CardNews/index.tsx`에 5종 슬라이드 등록:
- cover → CoverSlide
- card_list → CardListSlide
- detail → DetailSlide
- summary_cta → SummaryCtaSlide
- cta → SummaryCtaSlide (별칭)
- body → BodySlide

### 2-5. render_bridge.py 호환성 확보

기존 파이프라인과 호환되는 래퍼 함수 3종 추가:
- `theme_to_dict()`: Python Theme dataclass → dict 변환
- `enrich_slides()`: page_num/total_pages/content_index 자동 보강 (cardnews.py render_from_slides 로직 이식)
- `render_from_slides()`: 기존 CardNewsRenderer.render_from_slides()와 동일 시그니처 래퍼

### 2-6. 테스트 결과

- **TypeScript tsc --noEmit**: 에러 0건
- **Python pytest**: 13/13 PASSED (Phase 1 6건 + Phase 2 7건)
- **렌더링 테스트**: 25/25 성공 (5 slides × 5 themes)
  - cover: 98~116KB
  - card_list: 101~120KB
  - detail: 113~130KB
  - body: 108~129KB
  - cta: 127~152KB

---

## 생성/수정 파일 목록

### 신규 생성 (10개)
- `remotion/src/components/CircleBadge.tsx`
- `remotion/src/slides/DetailSlide.tsx`
- `remotion/src/slides/SummaryCtaSlide.tsx`
- `remotion/src/slides/BodySlide.tsx`
- `remotion/src/themes/black-red.ts`
- `remotion/src/themes/green-white.ts`
- `remotion/src/themes/purple-pink.ts`
- `remotion/src/themes/orange-cream.ts`
- `remotion/src/themes/index.ts`
- `remotion/test_render_all.py` (렌더링 검증 스크립트)

### 수정 (5개)
- `remotion/src/types/props.ts` — SlideData 타입 확장
- `remotion/src/compositions/CardNews/index.tsx` — SLIDE_MAP에 5종 등록
- `remotion/src/__tests__/CardNews.test.tsx` — 5종 테마 + 6종 슬라이드 타입 테스트
- `remotion/render_bridge.py` — 호환성 래퍼 함수 3종
- `remotion/tests/test_render_bridge.py` — Phase 2 래퍼 테스트 7건

### 렌더링 샘플 (25개)
- `remotion/output/samples/` — {slide_type}_{theme_name}.png 25개

---

## 머지 판단
- **머지 필요**: Yes
- **브랜치**: task/task-436.2-dev1
- **워크트리 경로**: /home/jay/projects/ThreadAuto/.worktrees/task-436.2-dev1
- **머지 의견**: remotion/ 디렉토리 내 신규 파일 추가 + 기존 5개 파일 수정. 기존 card_news/ 코드 변경 없음. tsc 에러 0건, pytest 13/13 통과, 25/25 렌더링 성공. 충돌 가능성 없음.

---

## 셀프 QC

- [x] 1. 이 변경이 다른 파일에 영향을 미치는가? → remotion/ 디렉토리 내부만 변경. 기존 renderer/ 코드 미수정.
- [x] 2. 이 로직의 엣지 케이스는 무엇인가? → items 빈 배열, tip_text 빈 문자열, content_index 미설정 — 모두 처리됨
- [x] 3. 이 구현이 작업 지시와 정확히 일치하는가? → 5종 슬라이드, 5종 테마, SLIDE_MAP 업데이트, render_bridge 호환성 — 전부 완료
- [x] 4. 에러 처리와 보안은 확인했는가? → 알 수 없는 slide.type은 "Unknown slide type" 표시, getTheme은 에러 throw
- [x] 5. 테스트가 모든 경로를 커버하는가? → 25개 렌더링 + 13개 단위 테스트

---

## 버그/이슈

- 없음

## 비고

- Phase 1 대비 추가 npm 패키지 설치 없음
- 기존 Pillow 파이프라인 병행 운영 가능 (render_bridge.render_from_slides가 기존 시그니처 호환)
- 다크 테마(NavyGold, BlackRed, PurplePink)와 라이트 테마(GreenWhite, OrangeCream) 모두 정상 렌더링 확인