# task-2893 — 생보 연속 사다리 SVG 배치 목업 정합 (누적화살표 재배치 + 하강화살표 금액아래 + 회사명 미잘림)

## Situation
task-2892로 구현된 생보 3대질병 진단비 "하나의 연속 사다리"(`LifeThreeCriticalDiff.tsx`)가 회장 승인 목업(`life_optionC2_mock.png`)과 시각적으로 3건 불일치. 계산·데이터·표·색·수치는 정상이고 **SVG 좌표/레이아웃만** 목업과 달랐음(ANU 실렌더 캡처로 확인).

## Complication (불일치 3건)
1. **우측 누적 직각화살표 4개**가 최고 Max 행 바로 아래에 대각선으로 뭉쳐 겹침(라벨 글박스가 원점 근처).
2. **하강(세로) 화살표**가 금액 오른쪽(`downArrowX:438` > `amountX:400`)에 위치 — 손보/목업은 금액 열 아래.
3. **3개회사 복합 조합명**이 잘림(truncate max=14).

## Question
계산/데이터/표/색/수치를 전혀 건드리지 않고 **SVG 좌표·라벨 위치·회사명 텍스트 처리만** 승인 목업 배치대로 맞출 수 있는가?

## Answer — 수정 내역 (LifeThreeCriticalDiff.tsx 단일 파일 + 테스트)

### Fix ① 우측 누적 화살표 재배치 (핵심)
- `cumulativeConnX` 세로선 간격 확대: `{dual:620, triple:674, cancer_life:728, three_life:782}` → `{dual:606, triple:674, cancer_life:740, three_life:808}` (외곽 세로선이 인접 라벨 박스를 관통하지 않도록 여유 확보).
- `cumulativeSrcOffset`(상단 가로선 stagger): `{26,58,90,122}` → `{-20,-10,0,10}` (원점 근처에서 4개 가로선을 소폭 상향 stagger·비겹침, 값이 작아짐).
- 라벨 흰 글박스/텍스트의 y를 **`labelY = (srcY + tgtY)/2`** (해당 화살표 세로선의 중간 높이)로 이동. 화살표 `<path>`의 상단 가로세그먼트는 `srcY` 그대로 유지.
- 결과: 4개 라벨이 오른쪽 전체에 계단식(파랑→빨강, 위→아래)으로 분산, 서로 비겹침.

### Fix ② 하강 화살표를 금액 아래로
- `downArrowX: 438 → 345` (`amountX(400)`보다 왼쪽 = 금액 열 아래). 단계 차액 라벨은 화살표 오른쪽(`x+14`) 유지.

### Fix ③ 회사명 잘림 방지
- 스텝 회사명 `truncateCompany(step.company)`(max 14) → `truncateCompany(step.company, 30)` + 적응형 폰트 `companyFont = len<=18?12 : len<=24?11 : 10`. 30자 초과 시 truncate+`<title>` 폴백 유지. `companyX(132)`~금액 좌측 폭 내 수용.

## 수정/생성 파일
- `src/components/composite/LifeThreeCriticalDiff.tsx` — SVG 좌표/라벨위치/회사명처리 (16 insert / 15 delete)
- `src/components/composite/__tests__/LifeThreeCriticalDiff.test.tsx` — 배치 검증 테스트 3건 추가 (+59줄)

## 검증 결과
- **tsc**: `npx tsc --noEmit` 에러 0.
- **vitest 전체**: `73 files / 1115 passed / 0 failed` (base task-2892 = 1112 + 신규 3 = 1115, **회귀 0**).
- **신규 테스트 3건 (전부 PASS)**:
  - fix②: 하강 화살표 path x좌표 < 400(amountX) 검증.
  - fix①: 누적 라벨 4개 `<rect>` y가 서로 다르며 dual<triple<cancer_life<three_life 순 증가(계단식 분산·비겹침).
  - fix③: triple 회사명 "A손보 + B손보 + C손보"(15자) 전체 노출·"…" 부재.
- **build**: `npm run build` 성공 (dist 생성, `✓ built in 11.79s`).

## L1 스모크테스트 결과
- **서버 재시작**: 해당없음 (웹앱 프론트 컴포넌트·SVG only, 백엔드 무변경).
- **API 응답 확인**: 해당없음.
- **실렌더 스크린샷**: 성공. 실 컴포넌트를 test fixture(20년)로 react/happy-dom 렌더 → 실제 SVG 추출 → Playwright 스크린샷.
  - 경로: `/home/jay/workspace/memory/reports/assets/task-2893_render.png`
  - 육안 확인: 3건 모두 승인 목업(`life_optionC2_mock.png`) 배치와 일치.
    - 누적 라벨 4개 계단식 우측 분산(파랑 상단→빨강 하단), 상단 뭉침 해소.
    - 하강 화살표 금액 열 아래 배치, 차액 라벨 우측.
    - "DB손해보험 + 현대해상 + 농협손해보험" 등 긴 조합명 미잘림 전체 노출.
  - (참고: 덤프 fixture가 가입한도를 원 단위로 넣어 표에 "30,000,000만"으로 보이나 이는 fixture 아티팩트이며 SVG 3픽스와 무관. 실데이터는 "5,000만" 형식.)

## 발견 이슈 및 해결
- 없음. 3건 모두 목업대로 반영, 기존 테스트/타입/빌드 회귀 0.

## 머지 판단
- **머지 필요**: Yes (webapp-only, 계산/서버/확장 무변경)
- **브랜치**: `task/task-2893-dev1`
- **워크트리 경로**: `/home/jay/projects/InsuRo/.worktrees/task-2893-dev1`
- **base**: `da93206` (origin/main, task-2892 반영)
- **커밋**: `8c88264`(이리스 컴포넌트), `1ce8808`(아르고스 테스트)
- **머지 의견**: 단일 파일 SVG 좌표 변경 + 검증 테스트. tsc 0 / vitest 1115 pass 회귀 0 / build 성공 / 실렌더 스크린샷 목업 정합 확인. 충돌 위험 낮음(webapp 단일 컴포넌트). merge_policy=none이므로 **머지·CF Pages 배포·최종 스크린샷 육안은 ANU 소관**.

## 모델 사용 기록
- 이리스(프론트, 컴포넌트 수정): **sonnet** — SVG 좌표 로직 변경.
- 아르고스(테스터, 검증 테스트): **sonnet** — 렌더 계약 테스트 작성.
- haiku 미사용(코드/테스트 로직 작업으로 sonnet 적정).

## 비고
- 계산 로직(`src/lib/lifeThreeCritical.ts`)·데이터·표 내용·색·수치·컴플라이언스 각주 **불변**. SVG 좌표/라벨위치/텍스트 처리만 수정. 곡선 미사용(직각 유지), viewBox 좌표계 유지.
- **ANU 재확인 필요**: 스크린샷 육안으로 승인 목업 최종 정합(SVG 겹침은 텍스트검사 미검출) → 머지 → CF Pages 프로덕션 배포.

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