# task-1379.1 완료 보고서: 채널별 배너 사이즈 규격 + 관리 체계 + 대시보드 (Phase 2)

## SCQA

**S**: TOP사업단 리쿠르팅 캠페인의 3x3 매트릭스(9개 셀)와 카피(v3)가 확정되었고, 15선 디자인 컨셉이 선정 완료되어 Phase 3(배너 제작) 진입을 앞두고 있다.

**C**: 배너 제작에 필요한 채널별 이미지 사이즈 규격이 정리되지 않아, 어떤 사이즈를 몇 장 제작해야 하는지 파악 불가. 8개 채널 × 20개 사이즈 = 셀당 최대 20종, 총 180종(필수 기준 99종)의 배너가 필요하지만 관리 체계가 없어 누락/중복 위험이 높다.

**Q**: 채널별 공식 규격 기반의 배너 사이즈 규격표와 3x3 매트릭스 연동 관리 체계를 수립하여, Phase 3 배너 대량 제작을 체계적으로 진행할 수 있는가?

**A**: 8개 채널의 공식 가이드라인 기반 20개 사이즈 규격을 조사/정리하고, campaign.json에 banner_matrix 데이터 구조를 추가하고, CampaignView.js에 배너 매트릭스 뷰 섹션을 구현하여 대시보드에서 제작 현황을 시각적으로 추적 가능하게 했다. 9셀 × 11필수사이즈 = 총 99장의 필수 배너 목표가 설정되었다.

## 작업 내용

### 1. 채널별 배너 사이즈 규격 조사
공식 가이드라인 기반으로 8개 채널 20개 사이즈를 조사:

- **Meta**: 4사이즈 (1080x1080, 1080x1350, 1080x1920, 캐러셀) — Meta Business Help Center
- **Google Ads**: 3사이즈 (1200x628, 1200x1200, 1200x1500) — Google Ads Help Center
- **네이버 GFA**: 4사이즈 (1250x560, 1200x628, 1200x1200, 750x200) — 네이버 성과형 광고 가이드
- **카카오 비즈보드**: 2사이즈 (1029x222, 315x222) — 카카오 비즈니스 가이드
- **당근마켓**: 2사이즈 (1080x1080, 1200x628) — 당근비즈니스 고객센터
- **채용사이트**: 2사이즈 (1042x580, 1200x630) — 각 사이트 가이드
- **스레드/인스타**: 2사이즈 (1080x1080, 1080x1350) — Instagram 공식 가이드
- **블로그**: 1사이즈 (1200x630) — 네이버 블로그 가이드

### 2. campaign.json 배너 매트릭스 데이터 추가
`banner_matrix` 키에 channel_specs(8채널), banner_sets(9셀), status_summary 구조 추가.

### 3. CampaignView.js 배너 매트릭스 뷰 추가
섹션 D로 "배너 매트릭스" 뷰를 추가:
- 전체 진행 통계 헤더 (완료 0/99, 0%)
- 채널별 사이즈 규격표 (접이식)
- 3x3 배너 제작 현황 그리드 (셀 클릭 상세)
- 상태 요약 바 (미제작/제작중/완료/승인 색상 바)

### 4. 파일 구조 생성
output/banners/ 하위 9개 셀 디렉토리 + .gitkeep 생성.

## 발견 이슈 및 해결

### 자체 해결 (3건)
1. **total_banners_needed 초기값 0** — 필수 배너 수 99로 수정 (campaign.json:500)
2. **max_size_kb 채널 표시 오류** — 네이버 GFA/카카오의 max_size_kb가 "최대 undefinedMB"로 표시 → 조건부 렌더링으로 수정 (CampaignView.js:636)
3. **bannerStatusStyle 미사용 경고** — TypeScript 진단 false positive. IIFE 내부에서 실제 사용 중 (670, 691, 728, 738줄). 기존 CampaignView 미참조 진단도 동일하게 기존 이슈.

### 범위 외 미해결 (0건)
없음.

## 셀프 QC 체크리스트

- [x] 1. 영향 파일: campaign.json, CampaignView.js, output/banners/ 디렉토리 — 다른 파일 영향 없음
- [x] 2. 엣지 케이스: banner_matrix null → 섹션 미렌더링, channel_specs 빈 배열 → 규격표 미표시, max_size_kb/mb 혼재 → 조건부 처리
- [x] 3. 작업 지시와 정확히 일치: 6개 산출물 모두 완료
- [x] 4. 에러 처리: optional chaining 사용, null 체크 완료
- [x] 5. 테스트: JSON 유효성 검증 통과, 디렉토리 9개 확인, 규격표 71줄 생성
- [x] 6. 발견 이슈 3건 모두 해결 완료
- [x] 7. 코드 아키텍처: 기존 패턴(IIFE, statusBadge, openPhases) 재사용, 새 state 0개 추가
- [x] 8. 인터페이스 변경: campaign.json에 새 키 추가 (기존 키 변경 없음)

## 산출물 파일

- `/home/jay/workspace/output/banners/BANNER-SIZE-SPEC.md`
- `/home/jay/workspace/output/banners/cell-1-incar-fair/.gitkeep`
- `/home/jay/workspace/output/banners/cell-2-incar-leader/.gitkeep`
- `/home/jay/workspace/output/banners/cell-3-incar-support/.gitkeep`
- `/home/jay/workspace/output/banners/cell-4-ga-fair/.gitkeep`
- `/home/jay/workspace/output/banners/cell-5-ga-leader/.gitkeep`
- `/home/jay/workspace/output/banners/cell-6-ga-support/.gitkeep`
- `/home/jay/workspace/output/banners/cell-7-snu-fair/.gitkeep`
- `/home/jay/workspace/output/banners/cell-8-snu-leader/.gitkeep`
- `/home/jay/workspace/output/banners/cell-9-snu-support/.gitkeep`
- `/home/jay/workspace/dashboard/data/campaign.json` (수정)
- `/home/jay/workspace/dashboard/components/CampaignView.js` (수정)

## 모델 사용 기록

- 팀원: 루(Lugh) / 작업: campaign.json + 디렉토리 구조 + 규격표 / 모델: sonnet
- 팀원: 브리짓(Brigid) / 작업: CampaignView.js 배너 매트릭스 뷰 / 모델: sonnet
- 팀장: 다그다(Dagda) / 작업: 규격 리서치, 통합 검증, 이슈 수정, 보고서 / 모델: opus

## 머지 판단
- **머지 필요**: No (프로젝트 git repo가 아닌 시스템 작업)
- **브랜치**: N/A
- **워크트리 경로**: N/A
- **머지 의견**: N/A