# task-2891 보고서 — 생보 계단식: 손보 양식 정렬 + 뱃지 재라벨 + 총액 라벨 정리

## Situation
InsuRo 생보 3대질병 계단식(`LifeThreeCriticalDiff`)이 상단 손보 계단식(`RpPresentation.SectionStaircase`)과 열 정렬·뱃지 표현·총액 라벨에서 불일치. 회장 실사용 피드백 3건(확정).

## Complication
- 윗 뱃지 "최고 Max"는 **틀린 표현**(최댓값이 아니라 3사 복합설계 배정값).
- 손보↔생보 금액열이 다른 세로선에 있어 시각 비정합("노란 화살표 = align").
- 오른쪽 총액 라벨의 "20년" 접두 + ▼ 아래 "20년 납입 단순합…" 회색줄이 총액을 **중복 표기**.

## Question
`LifeThreeCriticalDiff.tsx`(+테스트/e2e)만 수정하여, (1)뱃지 재라벨·손보 양식 통일, (2)레이아웃 상수 손보 `L` 정합, (3)총액 라벨 정리를 exact 원·수치·색·계산 불변으로 달성.

## Answer (수행 내역)

### 1. 뱃지 재라벨 + 손보 양식 (①·② 둘 다)
- 윗 뱃지 `최고`/`Max` → `3개회사`/`복합설계` (2줄).
- 아랫 뱃지 `최저`/`min` → `생보`/`최저` (2줄).
- 뱃지 폰트 11→13, 2줄 y offset(-3/+11 → -3/+14)로 손보 뱃지와 내부 여백·글자크기 동일. rect 색(#3f6cb5)·rx(8) 불변.
- 프로세 서술문 3곳의 "최고 Max"/"최저 min" 표현도 "3개회사 복합설계"/"생보 최저"로 교정(grep 0건).

### 2. 레이아웃 상수 손보(RpPresentation `L`) 정합
| 상수 | before | after (=손보 L) |
|---|---|---|
| boxX | 4 | 6 |
| boxW | 68 | 116 |
| boxH | 34 | 40 |
| companyX | 82 | 132 |
| amountX | 300 | 400 |
| amountFont | 15 | 16 |
| diffFont | 15 | 18 |
| connTapX | 330 | 540 (=손보 amountTapX) |
| connX | 560 | 706 (=손보 orangeConnX, 연장선상) |
| viewW | 720 | 940 |

→ 손보·생보 SVG viewBox width(940) 및 뱃지/회사명/금액열 x좌표 동일 → 동일 세로선 정렬. 우측 직각화살표 세로선(706)을 손보 3사 커넥터 연장선상에 배치.

### 3. 총액 라벨 정리 (①·② 둘 다)
- yearLabel `${years}년 …` → `${±}${won}` ("20년" 접두 제거) → "−1,920,000원"류.
- ▼ 아래 회색 "20년 납입 단순합 …" 줄 삭제(`subtext` 변수 제거). 총액은 우측 화살표 한 곳에만. 납입연수 미선택 안내문은 `years == null`일 때만 유지.

## 수정 파일 (지정 3개만)
- `src/components/composite/LifeThreeCriticalDiff.tsx`
- `src/components/composite/__tests__/LifeThreeCriticalDiff.test.tsx` (기존 "20년" assert 2곳 부재로 갱신 + 신규 3 it: 뱃지 재라벨/총액 라벨 정리/레이아웃 손보 정합)
- `tests/e2e/composite-design-vpath.spec.ts` (케이스 C: "20년" 부재 2곳, 뱃지 "복합설계"/"생보" 검증 4곳, secText "최고 Max"·"20년 납입 단순합" 부재 2곳 추가)

RpPresentation.tsx = 읽기(상수 참조)만, 무수정. server/**·extension/**·.github/** 무접촉.

## 테스트 결과
- `npx tsc --noEmit`: 에러 **0**.
- `npx vitest run` (전체): **73 files / 1102 tests passed** (기존 1099 + 신규 3, 회귀 0).
- `npx playwright test -g "케이스 C"`: **1 passed** (5.6s).

## L1 스모크테스트 결과
- 서버 재시작: 성공 (Playwright webServer `npm run dev` @ localhost:8080 자동 기동, Vite ready).
- API 응답 확인: 해당없음(프론트 SVG 렌더 작업 — 브라우저 렌더 검증으로 대체).
- 스크린샷: `tests/e2e/screenshots/vpath/c-life-staircase.png`, `c-full.png` (경로 존재 확인). 육안 검증 결과 ①·② 모두 뱃지="3개회사 복합설계"/"생보 최저", 총액="−1,200,000원"/"−1,920,000원"(20년 없음), ▼ 아래 "월 −5,000원 ▼"만(중복줄 없음), 뱃지·회사명·금액열 정렬 확인. 콘솔 에러 = 무관(kakao SDK integrity, 사전 존재).

## 발견 이슈 및 해결
- 없음. 기존 테스트의 "20년" assert(unit 2곳·e2e 2곳)는 총액 라벨 변경에 따라 부재 검증으로 갱신(의도된 계약 변경).

## 모델 사용 기록
- 이리스(프론트엔드): **sonnet** — SVG/React edit 구현 + 단위테스트 (haiku 미사용).
- 헤르메스(팀장, opus): 설계·정확 edit 사양 작성·통합 검증·스크린샷 육안 검증.

## 머지 판단
- **머지 필요**: Yes (단, `merge_policy: none` — 봇 머지 금지, ANU가 머지)
- **브랜치**: `task/task-2891-dev1`
- **워크트리 경로**: `/home/jay/projects/InsuRo/.worktrees/task-2891-dev1`
- **머지 의견**: webapp-only additive/surgical(3파일). tsc0·vitest 1102/0(회귀0)·e2e 케이스 C PASS. RpPresentation 로직 불변. 충돌 위험 낮음. ANU 독립검증(스크린샷 손보↔생보 세로정렬 교차) 후 PR 생성·squash 머지·CF Pages 배포 권장.

## 비고
- 커밋: `71be1b2` (이리스, worktree 브랜치).
- 순서 B: 봇=push+.done까지. ANU=검증·머지·CF Pages 배포.

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