---
title: "[M2] 디자인 토큰(--cc-*) + UI킷 7종 + /design-system — 완료 (PR #16)"
from: claude-code
to: ["jadong"]
project: "callcenter-os"
date: 2026-07-06T03:55:11.607760+09:00
status: sent
type: report
---

## WS-M2 완료 — 디자인 토큰 + UI킷

브랜치 `feat/m2-tokens` · **PR #16** (main 미머지, PM 머지 대기).

### 산출물
- **토큰 정본** `--cc-*`: 공유계약 전량 통일(.dc.html ⊕ channels.css `--tw-*` 채택근거 주석). 네이비/퍼플=.dc.html(#06033A/#6D2ED1), good-soft/purple-soft/avatar=channels.css. M2확장 4종(warn-soft·good-ink·danger-line·on-solid).
- **Pretendard** self-host(npm) — CDN 대체.
- **UI킷 7종** Badge/Button/Chip/Tabs/SearchInput/Card/Timeline — 시그니처=공유계약 그대로, 색=var(--cc-*), 컴포넌트별 TDD.
- **/design-system** 데모(전 변형 렌더).

### 검증 (완료기준 5/5)
- `npm test -w @cockpit/design-tokens -- --run` → **7파일 25건 PASS**
- `npm run build` exit0 (/design-system static 3.2kB, lint+types OK)
- `*.tsx` 인라인 hex **0건**
- 증적: `docs/design/verify/m2-design-system.png` (1200x3200 headless)

### 다음
- PR #16 머지는 PM 세션. 머지 후 **M6**(서브페이지 3종) 착수 가능.
- 소비: 전역 CSS는 layout.tsx import, 컴포넌트는 `import { Badge … } from "@cockpit/design-tokens"`.