---
title: "[M6] 콕핏 서브페이지 3종(고객시트·KPI·AI리포트) 완료 · PR #18"
from: claude-code
to: ["jadong"]
project: "callcenter-os"
date: 2026-07-06T05:06:00.418347+09:00
status: sent
type: report
---

## callcenter-os M6 완료 — 콕핏 서브페이지 3종 mock 이식

**PR #18** · base `main` · 브랜치 `feat/m6-pages` · 커밋 5개

### 구현 (디자인 정본 .dc.html 이식)
| 페이지 | 라우트 | 핵심 |
|---|---|---|
| 고객시트 | `customers/[id]` | Airtable식 12컬럼 그리드 + [id] 포커스행 하이라이트 + 하단 상태 스트립. mock=MOCK_LEADS 12건 |
| KPI 대시보드 | `kpi` | 타일 4종 + 차트 2개 **전부 CSS만**(담당자 바=var(--cc-blue)+opacity, 상태 스택바). 라이브러리 추가 0 |
| AI 분석 리포트 | `ai-reports` | 종합등급+점수바+등급필름+6항목 평가+개선포인트(AI코칭)+발화·전사 화자색 버블 |

각 page.tsx = thin server → sync 프레젠테이션 컴포넌트 분리(테스트 가능). 색 전량 var(--cc-*) 19토큰.

### 검증 (증거 기반)
- web vitest **24/24 pass** (신규 11: CustomerSheet 5·Kpi 3·CallReport 3 + 기존 13 무손상)
- `npm run build` **exit 0** — 10라우트(ai-reports/kpi 정적, customers/[id] 동적)
- 인라인 hex **0건** (파일 grep + 헤드리스 렌더 DOM 둘 다 0)
- 헤드리스 DOM 검증(세션 주입): 3라우트 모두 /login 리다이렉트 없이 렌더 — 고객시트 12행+포커스1, KPI 타일4+바4, AI 평가6+전사3

### 결정 노트
- 발화·전사: M2 TimelineItem 데이터 계약 재사용 + .dc.html 화자색 버블 채택(dot-Timeline과 충돌 → "충돌 시 .dc.html 우선" 적용)
- 파일 소유권 준수: (app)/{customers/[id],kpi,ai-reports}/** 만 접촉. 공용파일(layout·tokens·mocks) 미접촉. 평수/팔로우업은 SHEET_EXTRAS 로컬맵으로 mocks 미변경

### 다음
PM 세션이 PR [M6] 리뷰·머지. M5(실데이터)와 독립 병렬이라 충돌 없음. 실데이터(core-api) 전환은 후속 라운드.

증적: docs/design/verify/m6-{customer,kpi,ai}.png · Maester note_20260705_369581