# task-2890 보고서 — 생보 계단식 초록 총액 라벨 흰박스 세로 여백 대칭화

## 모델 사용 기록
- 프레이야(프론트엔드): **sonnet** — SVG rect/text 세로정렬 수정 + 단위테스트 (단순 surgical 변경이나 정확성 요구되어 sonnet 사용)
- 팀장(오딘, opus): 설계·검증·L1 스모크·통합 (직접 코딩 없음)

## Situation
InsuRo 생보 3대질병 계단식 우측 초록 "총액차이" 라벨(`20년 −1,920,000원`)의 흰 backplate 박스 안에서 텍스트가 **상단으로 치우쳐** 위/아래 흰 여백이 비대칭. 손보 섹션의 파란 라벨 박스처럼 상하 여백을 동일하게 요구.

## Complication
- 원인 코드(`LifeThreeCriticalDiff.tsx` 우측 ㄱ자 누적화살표 흰 backplate):
  - rect 세로 범위 = `midY - diffFont` ~ `midY + 6` (height=diffFont+6=21)
  - 텍스트 baseline = `midY - 3`
  - → 위 여백 ≈ 1.5px, 아래 여백 ≈ 6px. **비대칭.**

## Question
rect 크기·색·계단 구조·화살표 경로·담보표를 불변으로 두고, **세로 정렬만** 수정해 텍스트를 흰 박스 세로 중앙에 위치시킬 수 있는가?

## Answer (수정 내용)
`src/components/composite/LifeThreeCriticalDiff.tsx` line 236~247, 우측 yeartotal 그룹의 rect+text 세로정렬만 수정:

```diff
           <rect
             x={L.connX - estW / 2 - 4}
-            y={midY - L.diffFont}
+            y={midY - (L.diffFont + 6) / 2}
             width={estW + 8}
             height={L.diffFont + 6}
             fill="#ffffff"
             stroke="none"
             aria-hidden="true"
           />
-          <text x={L.connX} y={midY - 3} textAnchor="middle" fontSize={L.diffFont} fontWeight="bold" fill="#16a34a">
+          <text x={L.connX} y={midY} textAnchor="middle" dominantBaseline="central" fontSize={L.diffFont} fontWeight="bold" fill="#16a34a">
             {yearLabel}
           </text>
```

- rect `y`: `midY - diffFont` → `midY - (diffFont+6)/2` → 21px 박스의 세로 중심을 midY에 정렬
- text `y`: `midY - 3` → `midY` + `dominantBaseline="central"` 추가 → 텍스트 광학 중심을 midY에 정렬
- 결과: rect 세로중심 == text 중심 == midY → **상하 여백 완전 대칭**
- rect height(21, 손보와 동일)·width·fill·초록색(#16a34a)·textAnchor·fontSize·fontWeight 전부 유지. 수치·계단 구조·화살표·담보표 불변.
- ①암·②3대질병 계단 **양쪽 모두** 자동 적용(공유 `LifeStair` 코드 경로 1곳 수정).

## 수정 파일 (2개, allowed_resources 범위 내)
1. `src/components/composite/LifeThreeCriticalDiff.tsx` (rect/text 세로정렬 2줄)
2. `src/components/composite/__tests__/LifeThreeCriticalDiff.test.tsx` (세로중앙 검증 테스트 1개 추가, 기존 6개 불변)

추가 테스트: yeartotal backplate `rect` 세로중심(y+height/2) == `text` y, 그리고 text `dominant-baseline="central"` 검증.

## 테스트 결과 (팀장 독립 재실행)
- `npx tsc --noEmit`: **에러 0** (exit 0)
- `npx vitest run` (전체): **73 files / 1099 passed / 0 failed** (base 1098 + 신규 1, **회귀 0**)
- 대상 파일 테스트: 7/7 passed (신규 세로중앙 테스트 포함)

## 빌드
- `npm run build`: **성공** (11.78s, dist 생성, PWA 175 precache). 타임스탬프: dist/ 2026-08-04 10:48

## L1 스모크테스트 결과
- 서버 재시작: **해당없음** (순수 SVG 렌더 지오메트리 변경 — API/서버 무관)
- API 응답 확인: **해당없음**
- 스크린샷: **성공** — 실제 컴포넌트가 렌더한 SVG를 브라우저(Playwright)로 렌더 후 캡처.
  - 경로: `/home/jay/workspace/teams/dev2/task-2890-life-label-render.png`
  - 육안검증: ①암(`20년 −1,920,000원`)·②3대질병(`20년 −2,400,000원`) 초록 총액 라벨 **양쪽 모두** 흰 박스 세로 중앙에 위치, 상/하 흰 여백 대칭 확인. 실제 렌더 DOM: `<text x="560" y="78" ... dominant-baseline="central" ...>` (박스 중심에 정렬됨).
  - 콘솔 에러: favicon.ico 404 1건뿐(정적 HTML 서빙 부산물, 기능 무관). browser_close 완료.

## 발견 이슈 및 해결
- L1 검증용 임시 렌더 덤프 테스트 2건(`/tmp` 및 root 잔여 `__dump-life-svg.test.tsx`) 생성 → 검증 후 전부 삭제. 최종 `git status` = 허용된 2개 파일만.
- 손보(RpPresentation.tsx, forbidden) 파란 라벨은 참조(읽기)만 하여 박스 크기(diffFont+6=21) parity 확인. 수정 없음.

## 머지 판단 (★ 순서 B — merge_policy=none)
- **머지 필요**: Yes (단, ANU 소유)
- **브랜치**: `task/task-2890-dev2`
- **워크트리 경로**: `/home/jay/projects/InsuRo/.worktrees/task-2890-dev2`
- **base_sha**: 74566c4 (origin/main, task-2889 머지 상태)
- **커밋**: fcbfc07
- **머지 의견**: tsc 0·vitest 1099/0 회귀0·build 성공·L1 육안 대칭 확인. surgical 2줄 + 테스트 1개. task-2889(다른 파일)와 무충돌. **검증·머지·CF Pages 배포는 ANU 소유** (merge_policy=none, 순서 B).

## 비고
- dev6 미사용(dev2 수행). 디자인팀 호출 불필요(코드 지오메트리 수정).

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