# task-2895 보고서 — AI 복합설계 인포그래픽 v3b 전면 재구현

## Situation (상황)
복합설계 페이지 최상단 정적 인포그래픽 "AI 복합설계 계산이란?"을 회장 최종 승인 목업(v3b)에 맞춰 손보/생보 **대칭 2블록 + 생보 확장(1,650가지)** 디자인으로 교체 요청. 이전 task-2894 구현본은 디자인 전면 변경으로 폐기·대체(main에서 새로 시작).

## Complication (문제)
- 기존 `CompositeGeneralIntro.tsx`는 구버전(손보 165만, 부챗살 없는 단순 도트 격자) → 전면 재작성 필요.
- 용어 4개만 허용(손해보험사·생명보험사·손보·생보), 금지어(단독 "손해보험"·"생명보험"·"손보사"·"생보사") 회피.
- SVG/레이아웃 겹침은 e2e 텍스트 검사로 미검출 → 실렌더 육안 필수.

## Question (질문)
v3b 목업 구조/색/수치/문구를 정확히 재현하면서 반응형·용어제약·회귀0을 만족하는가?

## Answer (해결)
프레이야(프론트엔드, sonnet)에게 위임하여 `CompositeGeneralIntro.tsx` + 테스트를 v3b 목업 그대로 전면 재구현. 오딘 독립 검증(tsc/vitest/실렌더 스크린샷) GREEN.

### 수정 파일 (정확히 2파일, webapp-only, additive/대체)
- `src/components/composite/CompositeGeneralIntro.tsx` (전면 재작성)
- `src/components/composite/__tests__/CompositeGeneralIntro.test.tsx` (전면 재작성)

### 구현 내용 (v3b 목업 정합)
- **헤더**: ✦ AI 복합설계 계산이란? (Sparkles 아이콘 유지)
- **리드**: "손해보험사만 비교해도 165가지(파랑). 생명보험사 10개까지 추가로 고려하면 10배(1,650가지)(빨강)"
- **"왜 10개" 안내 박스**(점선): 30여 곳 중 주요 손해보험사 10개·생명보험사 10개 예시, 플랜 목적별 경우의 수 변동
- **대칭 2블록**(1:1) + 가운데 큰 ×:
  - 왼쪽(파랑 상단선) 손해보험사 10개 → "2개 조합 45 + 3개 조합 120 = 165가지" + 도트 45(파랑)+120(초록)
  - 오른쪽(초록 상단선) 생명보험사 10개 → **"165가지(파랑) × 10배(초록)"** 색 구분 + 생보사 10개 chip 2열
- **결론 블록**: 수식 165(파랑)×10(초록)=1,650(빨강) + 막대 비교(손보만 짧은 파랑 / 손보+생보 긴 파랑·10배) + "왜 곱할까요?" 박스 + AI 메시지(네이비)
- 상수(45/120/165/10/1650)만 사용, props 없음(캡처 데이터 무관). 사용처 `CompositeDesign.tsx` import 불변.

### 검증 결과 (오딘 독립 재검증)
- `npx tsc --noEmit` → **에러 0**
- `npx vitest run` (전체) → **73 files / 1127 tests passed, 0 failed — 회귀 0**
- 신규 테스트 15종: 대칭 2블록·× 기호·"165가지 × 10배" 색 구분(life-165-blue/life-10x-green)·"왜 10개" 안내·수식 165×10=1,650·막대·왜곱하나·AI 메시지·용어 금지어 정규식(`/손해보험(?!사)/` 등)·"10개"(곳 아님)·도트 165개
- `npx vite build` → **성공(11.78s, exit 0)**, dist 생성(PWA precache 175 entries)

## L1 스모크테스트 결과
- **서버 재시작**: 성공 — 격리 렌더 하네스(임시 `l1render.html`+`__l1render.tsx`, 검증 후 삭제) + `vite --port 5199` 기동, `curl` HTTP 200 확인
- **API 응답 확인**: 해당없음(정적 프론트 컴포넌트)
- **스크린샷**: 실제 브라우저(Playwright) 렌더 육안 검증 — v3b 목업(`combo_infographic_v3b.png`)과 정합 확인
  - 데스크톱(1120px): `/home/jay/workspace/memory/reports/l1-2895-desktop.png` — 대칭 2블록·중앙 ×·색 구분·막대·왜곱하나·AI박스 전부 목업 일치
  - 모바일(390px): `/home/jay/workspace/memory/reports/l1-2895-mobile.png` — 2블록 세로 스택(손보→×→생보), 소제목 크게 유지, 깨짐 없음
- 검증 후 임시 파일 삭제·vite kill·browser_close 완료. `git status --short` clean(커밋 2파일만).

## 발견 이슈 및 해결
- 용어 금지어 테스트: "손해보험사"가 "손해보험"을 substring으로 포함 → 단순 `not.toContain` 대신 부정 전방탐색 정규식(`/손해보험(?!사)/`)으로 정밀 검증하여 오탐 방지.
- 구버전 부챗살/SVG 방식은 v3b 목업에 없어 제거, 2열 chip 그리드로 대체.

## 머지 판단 (순서 B — merge_policy=none)
- **머지 필요**: Yes (단, 머지는 ANU 권한)
- **브랜치**: `task/task-2895-dev2`
- **워크트리 경로**: `/home/jay/projects/InsuRo/.worktrees/task-2895-dev2`
- **커밋**: 9161402 ([task-2895] 프레이야: v3b 전면 재구현)
- **base**: 1050e00 (origin/main HEAD)
- **머지 의견**: tsc 0·vitest 1127/0 회귀 0·build 성공·실렌더 스크린샷 v3b 정합. webapp-only 2파일 대체. ANU 독립 검증·회장 육안·squash 머지·CF Pages 배포 대기.

## 모델 사용 기록
- 프레이야(프론트엔드): **sonnet** — React/Tailwind 컴포넌트 재구현
- 오딘(팀장, opus): 설계/위임/독립검증/스크린샷 육안(직접 코딩 없음)

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