# task-2875 보고서 — 복합설계 계산기 상단 신뢰 뱃지(개발자 크레딧 + 조직 전용)
## Situation
복합설계 계산기는 고객 대면 화면. 프로그램 신뢰도를 높이는 신뢰 뱃지를 최상단에 추가해 "서울대 공대 출신·대기업 경영전략 컨설팅 출신 현직 설계사가 개발한 실력있는 프로그램"을 고객이 인지 → 조직 신뢰도 향상(회장 결정, Agent 미팅 + 후속 피드백).
## Complication
- 2층 구조 필요: Layer A=개발자 크레딧(항상 고정·사실) / Layer B=조직 전용 문구(config ON/OFF, 유료화 시 외부조직 OFF로 거짓표시 방지).
- InsuRo 브랜드를 적절한 크기로 노출(초소형 powered-by 축소 금지).
- 기존 계산·표·계단식·단일담보·삭제버튼 등 절대 불변(webapp-only). 앱 헤더/사이드바 로고는 범위 밖.
- 컴플라이언스(로키 가드): Layer A는 사실이라 항상 OK, Layer B는 실제 전용일 때만 ON.
## Question
webapp-only 범위에서 기존 로직을 건드리지 않고 최상단에 2층 신뢰 뱃지 + InsuRo 노출 + config ON/OFF 구조를 추가하고, 165조합 인포그래픽으로 자연 연결할 수 있는가?
## Answer (수행 내용)
복합설계 계산기 최상단(페이지 타이틀 바로 아래, 기존 `CompositeGeneralIntro` 165조합 인포그래픽 **위**)에 신뢰 뱃지 컴포넌트를 신규 추가. config 상수/플래그로 2층 통제. 기존 파일은 렌더 배치(2줄)만 변경.
### 생성/수정 파일 (모두 worktree `task/task-2875-dev1`)
- **신규** `src/config/credibilityConfig.ts` — Layer A 문구 상수(`CREDIBILITY_DEVELOPER_CREDIT_TEXT`, 사실·고정), Layer B 플래그(`CREDIBILITY_ORG_EXCLUSIVE_ENABLED=true` 기본 ON) + 문구(`CREDIBILITY_ORG_EXCLUSIVE_TEXT`), 브랜드명(`CREDIBILITY_PROGRAM_NAME="InsuRo"`).
- **신규** `src/components/composite/CompositeCredibilityBadge.tsx` — 카드 스타일. ShieldCheck 아이콘 + InsuRo(text-xl/font-extrabold, 브랜드 강조) + "AI 복합설계 프로그램" / Layer A(GraduationCap 아이콘 + 개발자 크레딧, 항상 노출) / Layer B(Lock 아이콘 + 조직 전용 pill, `orgExclusiveEnabled` prop=config 기본값 true일 때만). testid: `composite-credibility-badge/-brand/-developer/-org-exclusive`.
- **신규** `src/components/composite/__tests__/CompositeCredibilityBadge.test.tsx` — 5 케이스.
- **수정** `src/pages/CompositeDesign.tsx` — import 1건 + `` 렌더 1건을 `` **바로 위**(최상단)에 배치. 그 외 로직/계산/표/버튼 불변.
### 문구(회장 지정, verbatim)
- Layer A: `🎓 서울대 공대 출신 · 대기업 경영전략 컨설팅 출신 현직 설계사가 직접 개발한 AI 복합설계 프로그램`
- Layer B: `🔒 서울대보험쌤 조직 전용 — 일반 설계사는 사용할 수 없는 프로그램입니다`
### 아이콘 보강(L1 발견 후)
헤드리스 리눅스 Chrome에 이모지 폰트가 없어 🎓/🔒가 tofu(□)로 표시됨을 L1에서 확인. 문구(config 텍스트)는 verbatim 유지하되, 폰트 없는 환경에서도 시각 아이콘이 보장되도록 lucide 아이콘(GraduationCap=Layer A, Lock=Layer B, ShieldCheck=브랜드)을 보강. 실제 사용자 환경(Windows/Mac/모바일)에서는 이모지도 정상 렌더됨(DOM textContent에 이모지 존재 — vitest 통과 확인).
## 테스트 결과
- `npx tsc --noEmit`: exit 0 (에러 0).
- `npx vitest run` (전체): **Test Files 68 passed / Tests 1017 passed** — 회귀 0. 신규 5 케이스 포함.
- 신규 테스트 5 케이스: Layer A 항상 노출 / Layer B config ON(prop true) 노출 / Layer B config OFF(prop false) 미노출(+Layer A 유지) / InsuRo text-xl+font-extrabold 노출 / config 기본값 Layer B ON.
## L1 스모크테스트 결과
- **서버 재시작**: 성공 — `npx vite --port 5173` dev 서버 기동(VITE v5.4.21 ready).
- **API 응답 확인**: 해당없음(프론트엔드 UI 컴포넌트). `/composite-design`는 미인증 시 `/login` 리다이렉트(인프라 인증 장벽, 코드 무관)이므로, 컴포넌트만 마운트하는 임시 데모 엔트리(`_badge_demo.html`, 검증 후 삭제)로 실제 브라우저 렌더를 검증.
- **스크린샷**: `task-2875-badge-v2.png` — Layer B ON/OFF 2케이스 캡처.
- Layer B ON: ShieldCheck+**InsuRo**(파란 볼드 강조)+"AI 복합설계 프로그램", GraduationCap+개발자 크레딧, Lock+조직 전용 pill 모두 노출.
- Layer B OFF: 조직 전용 pill만 사라지고 InsuRo·개발자 크레딧은 유지 → config ON/OFF 실동작 확증.
- **콘솔 에러**: 0건.
- Playwright `browser_close` 호출 + 임시 데모 파일/서버 정리 완료.
## 발견 이슈 및 해결
- **이슈**: 이모지 폰트 없는 환경에서 🎓/🔒 tofu 표시. **해결**: lucide 아이콘 보강(문구 verbatim 유지, 시각 아이콘 이중 보장). 재렌더 스크린샷으로 확인.
- **인증 리다이렉트**: `/composite-design` 직접 접근 불가는 인프라(인증) 이슈로 코드 무관 → 임시 데모 마운트로 실제 렌더 검증(회피가 아닌 실동작 관찰).
## 컴플라이언스(로키 가드)
- Layer A = 사실 기반(서울대 공대·경영전략 컨설팅 출신 실제) → 항상 노출 OK.
- Layer B = config로 통제, 실제 전용(현 파일럿=서울대보험쌤 조직 전용)일 때만 ON. 유료화 후 외부조직엔 `CREDIBILITY_ORG_EXCLUSIVE_ENABLED=false`로 거짓표시 방지. 과장/오인 표현 없음.
## 머지 판단
- **머지 필요**: Yes (webapp 반영 필요), 단 **merge_policy=none** — 검증·머지·CF Pages 배포는 ANU 소유(순서 B).
- **브랜치**: `task/task-2875-dev1`
- **워크트리 경로**: `/home/jay/projects/InsuRo/.worktrees/task-2875-dev1`
- **base**: `origin/main` @ c25391a
- **머지 의견**: tsc 클린 + 전체 1017 테스트 회귀 0 + L1 실브라우저 렌더/ON·OFF 실동작 확인. 신규 파일 3 + 배치 2줄 변경으로 기존 로직 무영향. 충돌 위험 낮음. Codex 반증리뷰 + ANU 독립검증 후 머지 권장.
## 모델 사용 기록
- 이리스(프론트, 구현+아이콘 보강): sonnet — UI 컴포넌트/설정/테스트 구현 및 로직 반영.
- 팀장(헤르메스, opus): 설계·분배·검증(tsc/vitest/L1 스크린샷)·통합. 직접 코딩 없음.
## 비고
- 커밋: `58064e3`(뱃지 본체), `b1da578`(아이콘 보강).
- Settings UI는 이번 범위 아님(Simplicity First — 상수/플래그로 충분). 앱 헤더/사이드바 로고 배치는 회장 결정 대기(범위 밖, 미변경).
## 세션 통계
- 총 도구 호출: 0회