# task-2877 보고서 — 복합설계 계산기 상단: 서울대보험쌤 로고 배치 + ohmymanager 안내박스 높이 축소

- 작업 ID: task-2877 · 팀: dev1-team(헤르메스) · 레벨: Lv.2 · merge_policy: none(webapp-only)
- 프로젝트: InsuRo · worktree: `.worktrees/task-2877-dev1` · 브랜치: `task/task-2877-dev1`
- base: origin/main `0bda80f` · 작업 커밋: `b22e7b4`

## Situation
회장 배포 화면 피드백 2건. 복합설계 AI 계산기 상단 우측 빈 공간과, 제목–신뢰뱃지 사이 과도한 간격.

## Complication
- 상단 우측(ohmymanager 안내박스 영역)에 브랜드 노출 공간이 비어 있음 → 고객 대면 화면인데 서울대보험쌤 브랜드 부재.
- ohmymanager 안내박스가 높아 그 아래 신뢰뱃지가 밀려나 제목과의 세로 간격이 과도.

## Question
"지정 2건만"(로고 배치·안내박스 높이/간격) 최소 변경으로, 문구·기능·계산·표·뱃지·인포그래픽은 불변으로 유지하며 상단을 타이트하게 정리할 수 있는가?

## Answer (수행 내용)
헤더를 코드베이스 패턴(CompositeCredibilityBadge·CompositeGeneralIntro가 이미 별도 컴포넌트)과 정합하게 **`CompositeCalculatorHeader` 컴포넌트로 추출**하고, 그 안에 두 변경을 구현 + 렌더 테스트 추가. webapp-only(서버/확장/config 불변).

### ① 서울대보험쌤 로고 배치 (우측 상단)
- 로그인에서 쓰는 `src/assets/partner-logo.png` 재사용.
- 헤더 우측을 `flex items-center gap-3 md:justify-end` 그룹으로 구성 → ohmymanager 박스 오른쪽(최상단 우측 코너)에 로고 `<img>` 배치.
- `alt="서울대보험쌤 로고"`, `className="h-10 md:h-12 w-auto shrink-0 object-contain"`, `loading="lazy" decoding="async"`.

### ② ohmymanager 안내박스 높이 축소 + 제목–뱃지 간격 정리
- 박스 padding `p-3`→`p-2.5`, Info 아이콘 `size 16`→`14`, 문구 컨테이너 `text-xs`→`text-[11px] leading-snug` (문구 텍스트 원문 불변, `data-testid="ohmymanager-guide"` 보존).
- 헤더 컴포넌트 + `<CompositeCredibilityBadge/>`를 `space-y-3` 래퍼로 함께 감싸 제목–뱃지 간격을 1.5rem→0.75rem으로 축소. `<CompositeGeneralIntro/>`는 래퍼 밖에 두어 기존 space-y-6 유지.

## 수정 파일 목록 (3 files, +89 −29)
- 신규 `src/components/composite/CompositeCalculatorHeader.tsx` (53줄) — 헤더 컴포넌트(제목+ohmymanager 박스+로고, `today` prop).
- 신규 `src/components/composite/__tests__/CompositeCalculatorHeader.test.tsx` (29줄) — 렌더 스모크 3건(제목/기준일·로고 alt·박스 축소/문구).
- 수정 `src/pages/CompositeDesign.tsx` — 헤더 인라인 → `<CompositeCalculatorHeader today={TODAY} />` 교체, 미사용 `partnerLogo`/`GitMerge`/`Info` import 정리.
- 서버/확장/config/계산/표/뱃지/인포그래픽 불변.

## 검증 결과
- **npx tsc --noEmit**: 에러 0건 (클린)
- **npx vitest run**: 69 files / **1020 tests 전체 통과**(신규 3건 포함) — 회귀 0. TDD 게이트(테스트 동반) 충족.
- **npm run build**: 성공(11.75s). 로고 asset 프로덕션 번들 반영 확인 → `dist/assets/partner-logo-Do9CQhbu.png`, `dist/assets/CompositeDesign-*.js`에 alt "서울대보험쌤 로고" 포함.
- **e2e (composite-design-vpath.spec.ts, 실제 페이지 렌더)**: 2/2 통과 — 회귀 0.

## L1 스모크테스트 결과
- 서버 재시작: **성공** (Playwright webServer `npm run dev` :8080 자동 기동)
- API 응답 확인: 해당없음(UI 레이아웃 변경). e2e vpath가 실제 CompositeDesign 렌더 + API mock 왕복 검증 대체.
- 스크린샷: **성공** — `/home/jay/workspace/memory/reports/task-2877-header-screenshot.png` (원본: worktree `tests/e2e/screenshots/vpath/a-1-mounted.png`)
  - 육안 확인: ① 우측 상단 코너에 서울대보험쌤 로고 정상 렌더 ② ohmymanager 안내박스 축소 + 신뢰뱃지가 제목 바로 아래로 올라와 간격 타이트. 콘솔 에러는 무관한 kakao SDK integrity(기존 환경 이슈)뿐.

## 발견 이슈 및 해결
- 없음. 기존 헤더/ohmymanager 참조 테스트·e2e 셀렉터 사전 조사 결과 충돌 없음 확인(로고는 신규 img·alt만 추가, 문구 중복 미발생 → strict-mode 회귀 없음).

## 머지 판단
- **머지 필요**: Yes (단, merge_policy=none → 팀장 직접 머지 금지. ANU 검증·머지·CF Pages 배포 소유)
- **브랜치**: `task/task-2877-dev1`
- **워크트리 경로**: `/home/jay/workspace/projects/insuro/.worktrees/task-2877-dev1`
- **머지 의견**: 단일 파일·UI 전용·tsc/vitest/build/e2e 전부 그린·회귀 0·L1 시각 확인 완료. 저위험. PR open 상태로 ANU 독립검증 후 머지 권고.

## 모델 사용 기록
- 이리스(프론트엔드): sonnet — CompositeDesign.tsx 인라인 편집(일반 코딩). haiku 미사용.
- 팀장(헤르메스, Opus): 설계·검증·통합만. 직접 코딩 없음.

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