# task-2894 보고서 — AI 복합설계 인포그래픽 생보 확장(1,650가지 + 곱셈 설명)

- 작업 ID: task-2894
- 팀: dev2-team (오딘/개발2팀)
- 레벨: Lv.2
- 프로젝트: InsuRo 웹앱 (`/home/jay/projects/InsuRo`)
- merge_policy: **none** (순서 B — 봇=push+.done까지, 검증·육안·머지·CF Pages 배포는 ANU)
- base: origin/main = `ac3a453` (task-2893/PR#173 머지 상태)

## Situation (상황)
복합설계 페이지 최상단 정적 일반론 인포그래픽 "AI 복합설계 계산이란?"은 현재 **손해보험 10곳 = 165가지**(C(10,2)=45 + C(10,3)=120) 섹션만 존재.

## Complication (문제)
회장 승인 목업(`combo_infographic_mock.png`) 기준, 생보 10곳을 더하면 경우의 수가 **10배(1,650가지)로 폭발**함과 **왜 곱하는지**를 시각적으로 보여주는 "생보 확장" 블록이 필요. 기존 손보 165 섹션은 반드시 불변 유지.

## Question (질문)
기존 손보 섹션을 건드리지 않고, 목업 6요소를 반응형으로 정확히(165·10·1650) 구현할 수 있는가?

## Answer (해결)
`CompositeGeneralIntro.tsx` 기존 손보 165 섹션(헤더·문구·도트 격자) **완전 불변** 유지, 그 아래에 `data-testid="composite-life-expansion"` 블록을 추가. 정적 상수만 사용(props 없음, 캡처 데이터 참조 0).

### 목업 6요소 구현
1. **헤딩** — "여기에 생명보험 10곳을 더하면? → **1,650가지**"(빨강 강조) + 서브텍스트
2. **부챗살(fan-out) SVG** — 손보 chip(파랑, 예: DB+현대+농협) → Quadratic Bezier `<path>` **10개**(emerald) → 생보사 10곳 chip(초록, 데스크톱 2열/모바일 1열)
3. **수식** — `165(파랑) × 10(초록) = 1,650(빨강, text-4xl~5xl)` 각 숫자 아래 라벨
4. **막대 비교** — 손보만 165(w-10%, sky-400) vs 손보+생보 1,650(w-full, sky-700) — 10배 폭 대비
5. **"왜 곱할까요?" 박스** — 노랑 배경 + 왼쪽 노랑 보더
6. **AI 메시지 박스** — 네이비(bg-blue-950) + 흰 글씨, "AI만 순식간에" 강조

생보사 10곳(목업 순서 고정): 삼성생명·한화생명·교보생명·미래에셋생명·신한라이프·KB라이프·NH농협생명·동양생명·흥국생명·라이나생명

### 수치 정확성
165 / 10 / 1,650만 사용(하드코딩 — 정적 일반론·조합수학 사실). "완전커버" 등 동적 프레이밍 없음.

## 생성/수정 파일 (허용 범위 내 정확히 2개)
- `src/components/composite/CompositeGeneralIntro.tsx` (수정, +생보 확장 블록)
- `src/components/composite/__tests__/CompositeGeneralIntro.test.tsx` (수정, 기존 3 테스트 유지 + 신규 9)

origin/main 대비 `git diff --name-only` = 위 2개 파일만. forbidden_paths(server/extension/.github/src/lib/LifeThreeCriticalDiff.tsx) 무변경.

## 테스트 결과 (팀장 독립 검증 — 원문 근거)
- `npx tsc --noEmit`: **에러 0** (EXIT 0)
- 타겟 스위트(`CompositeGeneralIntro.test.tsx`): **12 passed (12)** — 기존 3 + 신규 9
- **전체 스위트** `npx vitest run`: **Test Files 73 passed (73), Tests 1124 passed (1124)** — **회귀 0**
- `npm run build`: **성공** (✓ built in 11.84s, dist 생성)

## L1 스모크테스트 결과 (필수)
임시 프리뷰 하네스(`l1-preview.html` + scratch tsx, **미커밋·작업 후 삭제**)로 컴포넌트를 실제 vite dev(:5219)에서 렌더 → Playwright 실브라우저 스크린샷 → 목업 육안 대조.
- **서버 재시작**: 해당없음(정적 프론트 컴포넌트) → vite dev 신규 기동(HTTP 200 확인)
- **API 응답 확인**: 해당없음(정적 컴포넌트, 백엔드 무관)
- **스크린샷**:
  - 데스크톱: `/home/jay/workspace/memory/screenshots/insuro-e2e/task-2894-desktop.png` — 6요소 전부 목업 정합, 손보 165 도트(45+120) 유지
  - 모바일(380px): `/home/jay/workspace/memory/screenshots/insuro-e2e/task-2894-mobile.png` — chip 세로 스택, 부챗살·수식·막대 안 깨짐(반응형 정상)
- **콘솔 에러**: 0건
- **브라우저 정리**: browser_close + vite 프로세스 kill 완료(잔존 0), scratch 파일 삭제 후 `git status` 클린 확인

## 발견 이슈 및 해결
- 없음. tsc/vitest/build/L1 전부 1회 통과.

## 머지 판단
- **머지 필요**: Yes — 단, merge_policy=none(순서 B)이므로 **ANU가 검증·육안·머지·CF Pages 배포 수행**. 봇은 push + .done까지.
- **브랜치**: `task/task-2894-dev2`
- **워크트리 경로**: `/home/jay/projects/InsuRo/.worktrees/task-2894-dev2`
- **커밋**: `cb2508f` (base ac3a453 위, 2 files, +244 insertions)
- **머지 의견**: additive·webapp-only·정확히 허용 2파일·tsc0·vitest 1124/0 회귀0·build 성공·L1 목업 정합(데스크톱+모바일)·CLEAN·충돌 위험 낮음. 육안 최종은 회장/ANU.

## 모델 사용 기록
- 프레이야(프론트엔드, 구현+테스트): **sonnet** — 일반 코딩/로직 구현(기본값). haiku 미사용.
- 팀장(오딘, Opus): 설계/분배/독립 검증(tsc·vitest·build·L1 스크린샷 육안)/보고. 직접 코딩 없음.

## 다음 단계 (ANU)
1. 원격 독립 검증(clean worktree tsc/vitest)
2. 스크린샷 육안 목업 정합 재확인
3. PR 생성/머지(원격)
4. `npm run build` → CF Pages 배포(insuro.biz) — outward 배포는 회장 지시/ANU 권한

## 세션 통계
- 총 도구 호출: 0회


## 세션 통계
- 총 도구 호출: 0회


## 세션 통계
- 총 도구 호출: 0회