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 buildexit 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