@designbasekorea/ui-wc 0.13.0 → 0.15.0

package/docs/quality/ENUM-MIGRATION-WORKSHEET.md

@@ -0,0 +1,288 @@
+# enum 계약 이관 검토 워크시트
+
+> ⚠️ **자동 생성 파일** — `node scripts/audit-wc-quality.mjs` 로 갱신되지 않는 일회성 산출물이다.
+> 값 확정 후 `packages/ui-contracts/src/components.ts` 로 옮기고 이 파일은 지운다.
+
+## 왜 이 문서가 필요한가
+
+아래 컴포넌트들은 `variant` · `size` 같은 enum 성격의 속성을 갖지만,
+**허용 값 집합이 코드 어디에도 선언돼 있지 않다.** 값은 SCSS 수식어 클래스에만 암묵적으로 존재한다.
+
+자동 도출을 시도했으나 신뢰할 수 없었다 — SCSS 수식어에는 enum 값과 상태 클래스
+(`--dragging`, `--first`), 다른 축의 값(`--padding-l`, `--theme-dark`)이 뒤섞여 있다.
+잘못 도출한 집합으로 `coerceToContract()` 를 적용하면 **유효한 값이 조용히 기본값으로 바뀌는 회귀**가 된다.
+그래서 자동 적용하지 않고, 사람이 확정할 수 있도록 후보만 정리했다.
+
+## 사용법
+
+1. 각 컴포넌트의 후보에서 실제 enum 값만 골라낸다 (상태 클래스·다른 축은 제외)
+2. `packages/ui-contracts/src/components.ts` 에 `<COMPONENT>_<ATTR>S` 로 추가
+3. 컴포넌트에서 import 하고 getter 를 `coerceToContract()` 로 감싼다
+4. `npm run audit:quality` 로 `STD-CONTRACT` · `STD-COERCE` 해소 확인
+
+레퍼런스 구현: `db-button` · `db-select` · `db-tabs`
+
+## 대상 45개
+
+### `db-accordion`
+
+- enum 속성: `variant` (기본값 `default`), `size` (기본값 `m`)
+- 후보 값: `bordered`, `contained`, `default`, `l`, `m`, `s`, `separated`
+- 제외된 상태 클래스: `disabled`, `expanded`
+
+### `db-ad-banner`
+
+- enum 속성: `variant` (기본값 `primary`), `size` (기본값 `m`)
+- 후보 값: `bg-animation`, `bg-gradient`, `bg-grid`, `size-l`, `size-m`, `size-s`, `type-card`, `type-floating`, `type-hero`, `type-topbar`, `variant-error`, `variant-primary`, `variant-secondary`, `variant-success`, `variant-warning`
+- 제외된 상태 클래스: `with-gradient`
+
+### `db-alert`
+
+- enum 속성: `variant` (기본값 `default`), `size` (기본값 `m`)
+- 후보 값: `danger`, `default`, `info`, `inverse`, `l`, `m`, `s`, `success`, `warning`
+- 제외된 상태 클래스: `closable`, `with-icon`
+
+### `db-animation-text`
+
+- enum 속성: `size` (기본값 `m`), `align` (기본값 `left`)
+- 후보 값: `2xl`, `3xl`, `bold`, `bounce`, `center`, `custom`, `decode`, `down`, `error`, `extrabold`, `fade`, `flip`, `glow`, `gradient`, `info`, `justify`, `l`, `left`, `light`, `m`, `medium`, `normal`, `primary`, `reveal`, `right`, `roll`, `s`, `scale`, `scroll-fill`, `secondary`, `semibold`, `shake`, `slide`, `success`, `text-rotate`, `up`, `warning`, `wave`, `xl`, `xs`
+- 제외된 상태 클래스: `clickable`, `disabled`, `typing`
+
+### `db-app-badge`
+
+- enum 속성: `size` (기본값 `m`)
+- 후보 값: `dark`, `l`, `light`, `s`
+
+### `db-audio-player`
+
+- enum 속성: `variant` (기본값 `default`), `size` (기본값 `m`)
+- 후보 값: `repeat-all`, `repeat-none`, `repeat-one`, `size-l`, `size-m`, `size-s`, `size-xl`
+- 제외된 상태 클래스: `active`, `error`, `loading`, `muted`, `paused`, `playing`, `shuffle`
+
+### `db-banner`
+
+- enum 속성: `variant` (기본값 `primary`), `size` (기본값 `m`)
+- 후보 값: `image`, `l`, `m`, `outline`, `primary`, `s`, `secondary`, `tertiary`
+- 제외된 상태 클래스: `clickable`
+
+### `db-breadcrumbs`
+
+- enum 속성: `variant`, `size` (기본값 `m`)
+- 후보 값: `contained`, `default`, `l`, `m`, `s`, `underlined`
+- 제외된 상태 클래스: `active`, `collapsed`, `disabled`
+
+### `db-carousel`
+
+- enum 속성: `variant` (기본값 `default`), `size` (기본값 `m`)
+- 후보 값: `dragging`, `first`, `fullscreen`, `indicator-dots`, `indicator-lines`, `indicator-numbers`, `indicator-thumbnails`, `last`, `like`, `size-l`, `size-m`, `size-s`, `size-xl`, `theme-dark`, `theme-light`, `transition-cube`, `transition-fade`, `transition-flip`, `transition-slide`, `transition-zoom`, `transitioning`, `variant-cards`, `variant-default`, `variant-gallery`, `variant-hero`, `variant-testimonial`
+- 제외된 상태 클래스: `active`, `disabled`, `next`, `prev`, `readonly`
+
+### `db-color-picker`
+
+- enum 속성: `size`, `position`
+- 후보 값: `bottom-end`, `bottom-start`, `l`, `m`, `s`, `top-end`, `top-start`, `trigger-swatch`
+- 제외된 상태 클래스: `alpha`, `disabled`, `full-width`, `hue`, `no-input`, `readonly`
+
+### `db-color-swatch`
+
+- enum 속성: `size`
+- 후보 값: `circle`, `l`, `m`, `s`
+- 제외된 상태 클래스: `disabled`
+
+### `db-confirm`
+
+- enum 속성: `variant` (기본값 `info`), `size` (기본값 `s`)
+- 후보 값: `l`, `m`, `s`
+- 제외된 상태 클래스: `no-icon`
+
+### `db-countdown`
+
+- enum 속성: `variant`, `size`
+- 후보 값: `compact`, `default`, `l`, `minimal`, `s`
+- 제외된 상태 클래스: `expired`, `with-labels`
+
+### `db-empty-state`
+
+- enum 속성: `variant` (기본값 `no-data`), `size` (기본값 `m`)
+- 후보 값: `error`, `l`, `m`, `no-access`, `no-data`, `no-results`, `onboarding`, `s`
+
+### `db-gradient`
+
+- enum 속성: `variant` (기본값 `default`), `size` (기본값 `m`)
+- 후보 값: `direction-radial`, `direction-to-bottom`, `direction-to-bottom-left`, `direction-to-bottom-right`, `direction-to-left`, `direction-to-right`, `direction-to-top`, `direction-to-top-left`, `direction-to-top-right`, `size-full`, `size-l`, `size-m`, `size-s`, `size-xl`, `variant-animated`, `variant-default`, `variant-mesh`
+- 제외된 상태 클래스: `full-height`, `full-width`
+
+### `db-grid-background`
+
+- enum 속성: `size`
+- 후보 값: —
+
+### `db-kanban`
+
+- enum 속성: `size`
+- 후보 값: `danger`, `high`, `info`, `l`, `low`, `m`, `medium`, `neutral`, `primary`, `success`, `urgent`, `warning`
+- 제외된 상태 클래스: `disabled`, `drag-over`, `dragged`, `dragging`, `full-width`, `over-limit`
+
+### `db-label`
+
+- enum 속성: `size` (기본값 `s`)
+- 후보 값: `l`, `m`, `s`
+- 제외된 상태 클래스: `disabled`, `error`
+
+### `db-list`
+
+- enum 속성: `variant` (기본값 `navigation`), `size` (기본값 `m`)
+- 후보 값: `alignment-center`, `alignment-end`, `alignment-start`, `alignment-stretch`, `draggable`, `dragging`, `layout-horizontal`, `size-l`, `size-m`, `size-s`, `spacing-l`, `spacing-m`, `spacing-none`, `spacing-s`, `variant-bordered`, `variant-card`, `variant-default`, `variant-minimal`, `variant-navigation`
+- 제외된 상태 클래스: `clickable`, `disabled`, `loading`, `selectable`, `selected`
+
+### `db-logo`
+
+- enum 속성: `variant` (기본값 `default`), `size` (기본값 `m`)
+- 후보 값: `dark`, `default`, `l`, `light`, `m`, `original`, `primary`, `s`, `secondary`, `white`, `xl`, `xs`
+- 제외된 상태 클래스: `clickable`, `full-width`, `svg`
+
+### `db-markdown-editor`
+
+- enum 속성: `variant` (기본값 `default`), `size` (기본값 `m`)
+- 후보 값: `mode-code`, `mode-edit`, `mode-preview`, `mode-split`, `size-l`, `size-m`, `size-s`, `theme-dark`, `theme-light`, `variant-default`, `variant-filled`, `variant-outlined`
+- 제외된 상태 클래스: `active`, `disabled`, `focused`, `readonly`
+
+### `db-marquee`
+
+- enum 속성: `variant` (기본값 `default`), `size` (기본값 `m`)
+- 후보 값: `size-l`, `size-m`, `size-s`, `variant-default`, `variant-filled`, `variant-outlined`
+- 제외된 상태 클래스: `bordered`, `fade-edges`
+
+### `db-menu-item`
+
+- enum 속성: `variant` (기본값 `default`), `size` (기본값 `m`)
+- 후보 값: `block`, `danger`, `default`, `depth-1`, `depth-2`, `depth-3`, `dropdown`, `info`, `inline`, `l`, `m`, `primary`, `s`, `success`, `warning`
+- 제외된 상태 클래스: `accordion`, `active`, `clickable`, `disabled`, `expanded`
+
+### `db-pagination`
+
+- enum 속성: `variant` (기본값 `default`), `size` (기본값 `m`)
+- 후보 값: `center`, `l`, `left`, `m`, `minimal`, `next`, `outlined`, `right`, `s`
+- 제외된 상태 클래스: `active`, `disabled`, `full-width`
+
+### `db-progress-step`
+
+- enum 속성: `size` (기본값 `m`)
+- 후보 값: `active`, `completed`, `error`, `horizontal`, `l`, `m`, `pending`, `s`, `vertical`
+- 제외된 상태 클래스: `clickable`, `disabled`, `full-width`
+
+### `db-random-gradient`
+
+- enum 속성: `tone` (기본값 `vivid`)
+- 후보 값: —
+- 제외된 상태 클래스: `animated`
+
+### `db-rating`
+
+- enum 속성: `variant`, `size`
+- 후보 값: `color-error`, `color-primary`, `color-secondary`, `color-success`, `color-warning`, `display-detailed`, `size-l`, `size-m`, `size-s`, `variant-card`, `variant-inline`, `variant-large`, `variant-minimal`
+- 제외된 상태 클래스: `clickable`, `disabled`, `empty`, `hover-preview`
+
+### `db-reorder`
+
+- enum 속성: `variant`, `size`
+- 후보 값: `bordered`, `default`, `filled`, `horizontal`, `l`, `m`, `minimal`, `s`
+- 제외된 상태 클래스: `disabled`, `drag-over`, `dragged`, `dragging`, `full-width`, `selectable`, `selected`
+
+### `db-section-app-download`
+
+- enum 속성: `size`, `align` (기본값 `center`)
+- 후보 값: —
+
+### `db-section-contact`
+
+- enum 속성: `size`, `align` (기본값 `center`)
+- 후보 값: `padding-l`, `padding-m`, `padding-s`
+- 제외된 상태 클래스: `accent`
+
+### `db-section-cta`
+
+- enum 속성: `variant` (기본값 `default`), `size`, `align` (기본값 `center`)
+- 후보 값: `dark`, `gradient`, `light`, `padding-l`, `padding-m`, `padding-s`, `tinted`
+
+### `db-section-faq`
+
+- enum 속성: `size`, `align` (기본값 `center`)
+- 후보 값: `padding-l`, `padding-m`, `padding-s`
+
+### `db-section-feature`
+
+- enum 속성: `size`
+- 후보 값: `padding-l`, `padding-m`, `padding-s`
+- 제외된 상태 클래스: `tinted`
+
+### `db-section-feature-grid`
+
+- enum 속성: `size`, `align` (기본값 `center`)
+- 후보 값: `full-height`, `overflow-visible`, `padding-l`, `padding-m`, `padding-s`
+- 제외된 상태 클래스: `tinted`
+
+### `db-section-hero`
+
+- enum 속성: `variant` (기본값 `default`)
+- 후보 값: `alignment-center`, `alignment-left`, `alignment-right`, `theme-dark`, `theme-gradient`, `theme-image`, `theme-light`, `variant-centered`, `variant-overlay`
+- 제외된 상태 클래스: `animated`, `full-height`, `on-media`
+
+### `db-section-logo-cloud`
+
+- enum 속성: `variant` (기본값 `grid`), `size`, `align` (기본값 `center`)
+- 후보 값: `padding-l`, `padding-m`, `padding-s`
+
+### `db-section-pricing`
+
+- enum 속성: `size`, `align` (기본값 `center`)
+- 후보 값: `full-height`, `overflow-visible`, `padding-l`, `padding-m`, `padding-s`
+- 제외된 상태 클래스: `highlighted`
+
+### `db-section-stats`
+
+- enum 속성: `size`, `align` (기본값 `center`)
+- 후보 값: `padding-l`, `padding-m`, `padding-s`
+- 제외된 상태 클래스: `tinted`
+
+### `db-section-testimonials`
+
+- enum 속성: `variant` (기본값 `grid`), `size`, `align` (기본값 `center`)
+- 후보 값: `full-height`, `overflow-visible`, `padding-l`, `padding-m`, `padding-s`
+- 제외된 상태 클래스: `next`, `prev`
+
+### `db-share`
+
+- enum 속성: `variant` (기본값 `button`), `size` (기본값 `m`), `position` (기본값 `bottom`)
+- 후보 값: `dropdown`, `email`, `facebook`, `inline`, `instagram`, `l`, `link`, `linkedin`, `modal`, `pinterest`, `qr`, `s`, `telegram`, `twitter`, `whatsapp`
+
+### `db-signature`
+
+- enum 속성: `variant`
+- 후보 값: `dashed`, `outlined`
+- 제외된 상태 클래스: `disabled`
+
+### `db-timeline`
+
+- enum 속성: `variant` (기본값 `default`), `size` (기본값 `m`)
+- 후보 값: `active`, `alternate`, `completed`, `default`, `error`, `filled`, `info`, `l`, `left`, `m`, `outlined`, `pending`, `primary`, `right`, `s`, `secondary`, `success`, `warning`
+- 제외된 상태 클래스: `clickable`, `disabled`, `full-width`, `with-icon`, `with-number`
+
+### `db-toolbar`
+
+- enum 속성: `variant` (기본값 `default`), `size` (기본값 `m`), `position` (기본값 `top`)
+- 후보 값: `custom`, `dropdown`, `open`, `position-bottom`, `position-floating`, `position-left`, `position-right`, `position-top`, `selected`, `size-l`, `size-m`, `size-s`, `variant-default`, `variant-filled`, `variant-ghost`, `variant-outlined`
+- 제외된 상태 클래스: `active`, `button`, `disabled`, `fixed`, `full-width`, `rounded`, `separator`, `shadow`
+
+### `db-video-player`
+
+- enum 속성: `variant` (기본값 `default`), `size` (기본값 `m`)
+- 후보 값: `size-l`, `size-m`, `size-s`, `size-xl`, `theme-auto`, `theme-dark`, `theme-light`
+- 제외된 상태 클래스: `error`, `fullscreen`, `loading`, `muted`, `paused`, `playing`, `show-controls`
+
+### `db-youtube-player`
+
+- enum 속성: `variant` (기본값 `default`), `size` (기본값 `m`)
+- 후보 값: `auto`, `dark`, `default`, `error`, `full`, `l`, `light`, `m`, `minimal`, `muted`, `picture-in-picture`, `s`, `theater`, `xl`
+- 제외된 상태 클래스: `fullscreen`
+

package/docs/quality/SCORECARD.md

@@ -0,0 +1,389 @@
+# ui-wc 품질 스코어카드
+
+> ⚠️ **자동 생성 파일 — 직접 수정하지 마세요.**
+> `npm run audit:quality` 로 재생성됩니다. 규칙 정의는 [QUALITY-GUIDELINES.md](../QUALITY-GUIDELINES.md).
+
+생성일: 2026-10-29 · 대상 컴포넌트: **185개** · 평균 점수: **98점 (A)** · P0 무결점: **185/185**
+
+## 축별 요약
+
+| 축 | 평균 | P0 위반 건수 | P1 위반 건수 |
+|---|---|---|---|
+| 접근성 (A11Y) | 100점 | 0 | 3 |
+| 웹표준 (STD) | 100점 | 0 | 3 |
+| 성능 (PERF) | 100점 | 0 | 6 |
+| DX (DX) | 88점 | 0 | 112 |
+
+## 규칙별 위반 현황
+
+| 규칙 | 등급 | 위반 | 해당 | 위반율 |
+|---|---|---|---|---|
+| `DX-I18N` | P1 | 86 | 185 | 46% |
+| `PERF-RAF` | P1 | 6 | 26 | 23% |
+| `DX-STORY` | P1 | 26 | 185 | 14% |
+| `A11Y-ESCAPE` | P1 | 3 | 22 | 14% |
+| `STD-LIGHT-DOM` | P1 | 3 | 158 | 2% |
+| `A11Y-FOCUS-RING` | P0 | 0 | 156 | 0% |
+| `A11Y-NAME` | P0 | 0 | 55 | 0% |
+| `A11Y-TRAP` | P0 | 0 | 7 | 0% |
+| `A11Y-DIALOG` | P0 | 0 | 18 | 0% |
+| `A11Y-DECORATIVE` | P0 | 0 | 4 | 0% |
+| `A11Y-STATE` | P0 | 0 | 107 | 0% |
+| `A11Y-KEYBOARD` | P0 | 0 | 17 | 0% |
+| `A11Y-REDUCED-MOTION` | P1 | 0 | 42 | 0% |
+| `STD-DEFINE` | P0 | 0 | 185 | 0% |
+| `STD-EVENT` | P0 | 0 | 98 | 0% |
+| `STD-CONTRACT` | P0 | 0 | 120 | 0% |
+| `STD-COERCE` | P0 | 0 | 120 | 0% |
+| `STD-FORM` | P0 | 0 | 8 | 0% |
+| `STD-NO-INNERHTML` | P0 | 0 | 185 | 0% |
+| `STD-SSR` | P1 | 0 | 185 | 0% |
+| `PERF-CLEANUP` | P0 | 0 | 185 | 0% |
+| `PERF-GLOBAL-STATE` | P0 | 0 | 185 | 0% |
+| `PERF-RECONCILE` | P1 | 0 | 185 | 0% |
+| `PERF-LAZY` | P1 | 0 | 0 | 0% |
+| `DX-UID` | P0 | 0 | 185 | 0% |
+
+## 위반 상세
+
+### `DX-I18N` (P1) — 86/185
+
+> 사용자에게 노출되는 모든 문자열(aria-label 포함)은 오버라이드 가능해야 한다. 소스에 한국어 리터럴을 박지 말고 `core/i18n.ts` 의 `t()` 경유
+
+- `db-accordion` — 하드코딩 한국어 1건 (예: "아코디언")
+- `db-achievement-list` — 하드코딩 한국어 12건 (예: "뱃지 목록")
+- `db-achievement-modal` — 하드코딩 한국어 10건 (예: "모달 닫기")
+- `db-activity-heatmap` — 하드코딩 한국어 4건 (예: "적음")
+- `db-ad-banner` — 하드코딩 한국어 15건 (예: "지금 바로 시작하세요")
+- `db-ai-chat` — 하드코딩 한국어 5건 (예: "아티팩트 닫기")
+- `db-ai-chat-list` — 하드코딩 한국어 2건 (예: "새 대화")
+- `db-alert` — 하드코딩 한국어 1건 (예: "알림 닫기")
+- `db-animation-background` — 하드코딩 한국어 4건 (예: "컨트롤 열기")
+- `db-app-badge` — 하드코딩 한국어 2건 (예: "다운로드")
+- `db-audio-player` — 하드코딩 한국어 9건 (예: "오디오를 재생할 수 없습니")
+- `db-avatar` — 하드코딩 한국어 1건 (예: "아바타 이미지")
+- `db-boarding-pass` — 하드코딩 한국어 12건 (예: "출발")
+- `db-bottom-navigation` — 하드코딩 한국어 1건 (예: "하단 네비게이션")
+- `db-bottom-sheet` — 하드코딩 한국어 1건 (예: "닫기")
+- `db-breadcrumbs` — 하드코딩 한국어 1건 (예: "브레드크럼 네비게이션")
+- `db-calendar` — 하드코딩 한국어 38건 (예: "회의")
+- `db-card` — 하드코딩 한국어 1건 (예: "카드 선택")
+- `db-chat-composer` — 하드코딩 한국어 3건 (예: "사진·이미지")
+- `db-chat-message` — 하드코딩 한국어 5건 (예: "복사")
+- `db-chat-room` — 하드코딩 한국어 8건 (예: "파일을 놓으면 첨부됩니다")
+- `db-chat-typing` — 하드코딩 한국어 1건 (예: "AI가 응답을 생성하고 있")
+- `db-chat-widget` — 하드코딩 한국어 75건 (예: "제품·정책 알아보기")
+- `db-chip` — 하드코딩 한국어 1건 (예: "{0} 삭제")
+- `db-code-block` — 하드코딩 한국어 3건 (예: "복사됨")
+- `db-color-picker` — 하드코딩 한국어 3건 (예: "색상 선택")
+- `db-context-bar` — 하드코딩 한국어 1건 (예: "선택 요소 작업")
+- `db-cookie-banner` — 하드코딩 한국어 6건 (예: "쿠키 사용 안내")
+- `db-countdown` — 하드코딩 한국어 4건 (예: "일")
+- `db-date-picker` — 하드코딩 한국어 17건 (예: "날짜 선택 열기")
+- `db-design-canvas` — 하드코딩 한국어 67건 (예: "요소")
+- `db-design-toolbar` — 하드코딩 한국어 3건 (예: "디자인 도구")
+- `db-download-progress` — 하드코딩 한국어 22건 (예: "다운로드 중")
+- `db-drawer` — 하드코딩 한국어 1건 (예: "닫기")
+- `db-dropdown` — 하드코딩 한국어 1건 (예: "메뉴")
+- `db-email-verify` — 하드코딩 한국어 23건 (예: "남은 시간 {0}분 {1}")
+- `db-flight-status` — 하드코딩 한국어 6건 (예: "출발 예정")
+- `db-footer` — 하드코딩 한국어 3건 (예: "법적 고지")
+- `db-form` — 하드코딩 한국어 3건 (예: "제출")
+- `db-gantt` — 하드코딩 한국어 12건 (예: "일")
+- `db-image` — 하드코딩 한국어 1건 (예: "이미지를 불러올 수 없습니")
+- `db-image-list` — 하드코딩 한국어 1건 (예: "이미지 목록")
+- `db-indicator` — 하드코딩 한국어 1건 (예: "{0}단계")
+- `db-input` — 하드코딩 한국어 1건 (예: "비밀번호 강도")
+- `db-kanban` — 하드코딩 한국어 8건 (예: "낮음")
+- `db-lightbox` — 하드코딩 한국어 7건 (예: "이미지 갤러리")
+- `db-list` — 하드코딩 한국어 1건 (예: "항목이 없습니다.")
+- `db-markdown-editor` — 하드코딩 한국어 25건 (예: "마크다운을 입력하세요...")
+- `db-navbar` — 하드코딩 한국어 8건 (예: "메인 네비게이션")
+- `db-node` — 하드코딩 한국어 21건 (예: "일반")
+- `db-onboarding-modal` — 하드코딩 한국어 8건 (예: "닫기")
+- `db-otp-input` — 하드코딩 한국어 4건 (예: "인증 코드")
+- `db-page-header` — 하드코딩 한국어 2건 (예: "뒤로가기")
+- `db-pagination` — 하드코딩 한국어 8건 (예: "페이지 네비게이션")
+- `db-phone-verify` — 하드코딩 한국어 21건 (예: "알뜰폰")
+- `db-popover` — 하드코딩 한국어 1건 (예: "팝오버 닫기")
+- `db-progress-step` — 하드코딩 한국어 1건 (예: "{0} 단계로 이동")
+- `db-rating` — 하드코딩 한국어 3건 (예: "매우 좋음")
+- `db-receipt` — 하드코딩 한국어 8건 (예: "수량")
+- `db-resizable-panels` — 하드코딩 한국어 5건 (예: "크기 조절")
+- `db-search-bar` — 하드코딩 한국어 9건 (예: "검색...")
+- `db-section-app-download` — 하드코딩 한국어 2건 (예: "지금 바로 시작하세요")
+- `db-section-contact` — 하드코딩 한국어 2건 (예: "문의하기")
+- `db-section-faq` — 하드코딩 한국어 1건 (예: "자주 묻는 질문")
+- `db-section-feature-grid` — 하드코딩 한국어 1건 (예: "주요 기능")
+- `db-section-logo-cloud` — 하드코딩 한국어 1건 (예: "함께하는 파트너")
+- `db-section-pricing` — 하드코딩 한국어 1건 (예: "요금제")
+- `db-section-testimonials` — 하드코딩 한국어 4건 (예: "고객 후기")
+- `db-segment-control` — 하드코딩 한국어 1건 (예: "세그먼트 컨트롤")
+- `db-select` — 하드코딩 한국어 1건 (예: "{0} 제거")
+- `db-share` — 하드코딩 한국어 14건 (예: "Instagram에 직접 ")
+- `db-sidebar` — 하드코딩 한국어 14건 (예: "프로젝트 관리")
+- `db-signature` — 하드코딩 한국어 2건 (예: "서명 입력 영역")
+- `db-spinner` — 하드코딩 한국어 1건 (예: "로딩 중...")
+- `db-split-view` — 하드코딩 한국어 1건 (예: "패널 너비 조정")
+- `db-stepper` — 하드코딩 한국어 7건 (예: "감소")
+- `db-table` — 하드코딩 한국어 3건 (예: "데이터가 없습니다.")
+- `db-testimonial` — 하드코딩 한국어 1건 (예: "{0} 프로필 이미지")
+- `db-ticket` — 하드코딩 한국어 1건 (예: "티켓")
+- `db-time-picker` — 하드코딩 한국어 17건 (예: "시간 선택 열기")
+- `db-tool-button` — 하드코딩 한국어 3건 (예: "도구")
+- `db-top-banner` — 하드코딩 한국어 1건 (예: "닫기")
+- `db-tutorial` — 하드코딩 한국어 4건 (예: "튜토리얼 종료")
+- `db-two-factor` — 하드코딩 한국어 27건 (예: "인증 앱")
+- `db-video-player` — 하드코딩 한국어 5건 (예: "10초 되감기")
+- `db-youtube-player` — 하드코딩 한국어 1건 (예: "동영상을 불러올 수 없습니")
+
+### `PERF-RAF` (P1) — 6/26
+
+> `scroll` / `resize` / `pointermove` 핸들러는 `requestAnimationFrame` 으로 병합하고, 스크롤 리스너는 `{ passive: true }`
+
+- `db-design-canvas` — rAF 병합 없음
+- `db-design-toolbar` — rAF 병합 없음
+- `db-floating-action-button` — rAF 병합 없음
+- `db-node` — rAF 병합 없음
+- `db-page-header` — scroll 리스너에 passive 명시 없음
+- `db-signature` — rAF 병합 없음
+
+### `DX-STORY` (P1) — 26/185
+
+> 컴포넌트당 Storybook 스토리 1개 이상
+
+- `db-ai-chain-of-thought` — Storybook 스토리 없음
+- `db-ai-checkpoint` — Storybook 스토리 없음
+- `db-ai-confirmation` — Storybook 스토리 없음
+- `db-ai-context` — Storybook 스토리 없음
+- `db-ai-conversation` — Storybook 스토리 없음
+- `db-ai-file-tree` — Storybook 스토리 없음
+- `db-ai-inline-citation` — Storybook 스토리 없음
+- `db-ai-message` — Storybook 스토리 없음
+- `db-ai-plan` — Storybook 스토리 없음
+- `db-ai-queue` — Storybook 스토리 없음
+- `db-ai-reasoning` — Storybook 스토리 없음
+- `db-ai-sources` — Storybook 스토리 없음
+- `db-ai-stack-trace` — Storybook 스토리 없음
+- `db-ai-subagent` — Storybook 스토리 없음
+- `db-ai-task` — Storybook 스토리 없음
+- `db-ai-terminal` — Storybook 스토리 없음
+- `db-ai-test-results` — Storybook 스토리 없음
+- `db-ai-tool` — Storybook 스토리 없음
+- `db-browser-mockup` — Storybook 스토리 없음
+- `db-context-bar` — Storybook 스토리 없음
+- `db-design-canvas` — Storybook 스토리 없음
+- `db-design-toolbar` — Storybook 스토리 없음
+- `db-filter-bar` — Storybook 스토리 없음
+- `db-node` — Storybook 스토리 없음
+- `db-tool-button` — Storybook 스토리 없음
+- `db-voice-control` — Storybook 스토리 없음
+
+### `A11Y-ESCAPE` (P1) — 3/22
+
+> 닫을 수 있는 오버레이/팝업은 Escape 로 닫힌다
+
+- `db-achievement-modal` — Escape 로 닫을 수 없음
+- `db-credit-dropdown` — Escape 로 닫을 수 없음
+- `db-notification-dropdown` — Escape 로 닫을 수 없음
+
+### `STD-LIGHT-DOM` (P1) — 3/158
+
+> Light DOM 을 유지한다(→ STYLING.md). 따라서 모든 클래스는 `designbase-wc-` 접두사 필수 — 전역 CSS 충돌 방어의 유일한 수단
+
+- `db-browser-mockup` — attachShadow 사용 (Light DOM 규약 위반)
+- `db-credit-card` — 비접두사 전역 클래스: db-credit-card
+- `db-node` — attachShadow 사용 (Light DOM 규약 위반)
+
+## 컴포넌트별 점수
+
+낮은 점수부터. 개선 우선순위로 사용합니다.
+
+| 컴포넌트 | 아키타입 | 점수 | 등급 | P0 위반 | P1 위반 |
+|---|---|---|---|---|---|
+| `db-node` | display | 87 | B | — | `STD-LIGHT-DOM` `PERF-RAF` `DX-I18N` `DX-STORY` |
+| `db-context-bar` | display | 89 | B | — | `DX-I18N` `DX-STORY` |
+| `db-design-canvas` | composite | 90 | B | — | `PERF-RAF` `DX-I18N` `DX-STORY` |
+| `db-achievement-modal` | overlay | 91 | B | — | `A11Y-ESCAPE` `DX-I18N` |
+| `db-browser-mockup` | display | 92 | B | — | `STD-LIGHT-DOM` `DX-STORY` |
+| `db-design-toolbar` | composite | 92 | B | — | `PERF-RAF` `DX-I18N` `DX-STORY` |
+| `db-page-header` | display | 94 | B | — | `PERF-RAF` `DX-I18N` |
+| `db-tool-button` | overlay, composite | 94 | B | — | `DX-I18N` `DX-STORY` |
+| `db-ai-checkpoint` | display | 95 | A | — | `DX-STORY` |
+| `db-ai-confirmation` | display | 95 | A | — | `DX-STORY` |
+| `db-ai-context` | display | 95 | A | — | `DX-STORY` |
+| `db-ai-conversation` | display | 95 | A | — | `DX-STORY` |
+| `db-ai-file-tree` | display | 95 | A | — | `DX-STORY` |
+| `db-ai-inline-citation` | display | 95 | A | — | `DX-STORY` |
+| `db-ai-message` | display | 95 | A | — | `DX-STORY` |
+| `db-ai-queue` | display | 95 | A | — | `DX-STORY` |
+| `db-ai-sources` | display | 95 | A | — | `DX-STORY` |
+| `db-ai-stack-trace` | display | 95 | A | — | `DX-STORY` |
+| `db-boarding-pass` | display | 95 | A | — | `DX-I18N` |
+| `db-signature` | display | 95 | A | — | `PERF-RAF` `DX-I18N` |
+| `db-ticket` | display | 95 | A | — | `DX-I18N` |
+| `db-achievement-list` | display | 96 | A | — | `DX-I18N` |
+| `db-ai-chain-of-thought` | display | 96 | A | — | `DX-STORY` |
+| `db-ai-plan` | display | 96 | A | — | `DX-STORY` |
+| `db-ai-reasoning` | display | 96 | A | — | `DX-STORY` |
+| `db-ai-subagent` | display | 96 | A | — | `DX-STORY` |
+| `db-ai-task` | display | 96 | A | — | `DX-STORY` |
+| `db-ai-terminal` | display | 96 | A | — | `DX-STORY` |
+| `db-ai-test-results` | display | 96 | A | — | `DX-STORY` |
+| `db-ai-tool` | display | 96 | A | — | `DX-STORY` |
+| `db-chat-typing` | display | 96 | A | — | `DX-I18N` |
+| `db-credit-dropdown` | overlay, composite | 96 | A | — | `A11Y-ESCAPE` |
+| `db-flight-status` | display | 96 | A | — | `DX-I18N` |
+| `db-floating-action-button` | display | 96 | A | — | `PERF-RAF` |
+| `db-notification-dropdown` | overlay, composite | 96 | A | — | `A11Y-ESCAPE` |
+| `db-receipt` | display | 96 | A | — | `DX-I18N` |
+| `db-resizable-panels` | display | 96 | A | — | `DX-I18N` |
+| `db-voice-control` | display | 96 | A | — | `DX-STORY` |
+| `db-accordion` | composite | 97 | A | — | `DX-I18N` |
+| `db-activity-heatmap` | display | 97 | A | — | `DX-I18N` |
+| `db-ad-banner` | display | 97 | A | — | `DX-I18N` |
+| `db-ai-chat` | display | 97 | A | — | `DX-I18N` |
+| `db-ai-chat-list` | display | 97 | A | — | `DX-I18N` |
+| `db-alert` | display | 97 | A | — | `DX-I18N` |
+| `db-animation-background` | overlay | 97 | A | — | `DX-I18N` |
+| `db-app-badge` | display | 97 | A | — | `DX-I18N` |
+| `db-audio-player` | composite | 97 | A | — | `DX-I18N` |
+| `db-avatar` | display | 97 | A | — | `DX-I18N` |
+| `db-bottom-navigation` | display | 97 | A | — | `DX-I18N` |
+| `db-breadcrumbs` | display | 97 | A | — | `DX-I18N` |
+| `db-calendar` | display | 97 | A | — | `DX-I18N` |
+| `db-card` | display | 97 | A | — | `DX-I18N` |
+| `db-chat-composer` | display | 97 | A | — | `DX-I18N` |
+| `db-chat-message` | display | 97 | A | — | `DX-I18N` |
+| `db-chat-room` | display | 97 | A | — | `DX-I18N` |
+| `db-chat-widget` | overlay | 97 | A | — | `DX-I18N` |
+| `db-chip` | display | 97 | A | — | `DX-I18N` |
+| `db-code-block` | display | 97 | A | — | `DX-I18N` |
+| `db-color-picker` | display | 97 | A | — | `DX-I18N` |
+| `db-cookie-banner` | overlay | 97 | A | — | `DX-I18N` |
+| `db-countdown` | display | 97 | A | — | `DX-I18N` |
+| `db-credit-card` | display | 97 | A | — | `STD-LIGHT-DOM` |
+| `db-download-progress` | display | 97 | A | — | `DX-I18N` |
+| `db-email-verify` | display | 97 | A | — | `DX-I18N` |
+| `db-filter-bar` | display | 97 | A | — | `DX-STORY` |
+| `db-footer` | display | 97 | A | — | `DX-I18N` |
+| `db-form` | display | 97 | A | — | `DX-I18N` |
+| `db-gantt` | display | 97 | A | — | `DX-I18N` |
+| `db-image` | display | 97 | A | — | `DX-I18N` |
+| `db-image-list` | display | 97 | A | — | `DX-I18N` |
+| `db-indicator` | display | 97 | A | — | `DX-I18N` |
+| `db-kanban` | display | 97 | A | — | `DX-I18N` |
+| `db-list` | display | 97 | A | — | `DX-I18N` |
+| `db-markdown-editor` | display | 97 | A | — | `DX-I18N` |
+| `db-navbar` | display | 97 | A | — | `DX-I18N` |
+| `db-otp-input` | form, composite | 97 | A | — | `DX-I18N` |
+| `db-pagination` | display | 97 | A | — | `DX-I18N` |
+| `db-phone-verify` | display | 97 | A | — | `DX-I18N` |
+| `db-progress-step` | display | 97 | A | — | `DX-I18N` |
+| `db-rating` | display | 97 | A | — | `DX-I18N` |
+| `db-search-bar` | display | 97 | A | — | `DX-I18N` |
+| `db-section-app-download` | section | 97 | A | — | `DX-I18N` |
+| `db-section-contact` | section | 97 | A | — | `DX-I18N` |
+| `db-section-faq` | section | 97 | A | — | `DX-I18N` |
+| `db-section-feature-grid` | section | 97 | A | — | `DX-I18N` |
+| `db-section-logo-cloud` | section | 97 | A | — | `DX-I18N` |
+| `db-section-pricing` | section | 97 | A | — | `DX-I18N` |
+| `db-section-testimonials` | section | 97 | A | — | `DX-I18N` |
+| `db-segment-control` | composite | 97 | A | — | `DX-I18N` |
+| `db-share` | display | 97 | A | — | `DX-I18N` |
+| `db-spinner` | display | 97 | A | — | `DX-I18N` |
+| `db-split-view` | composite | 97 | A | — | `DX-I18N` |
+| `db-stepper` | composite | 97 | A | — | `DX-I18N` |
+| `db-table` | display | 97 | A | — | `DX-I18N` |
+| `db-testimonial` | display | 97 | A | — | `DX-I18N` |
+| `db-top-banner` | display | 97 | A | — | `DX-I18N` |
+| `db-two-factor` | display | 97 | A | — | `DX-I18N` |
+| `db-video-player` | display | 97 | A | — | `DX-I18N` |
+| `db-youtube-player` | display | 97 | A | — | `DX-I18N` |
+| `db-bottom-sheet` | overlay | 98 | A | — | `DX-I18N` |
+| `db-date-picker` | overlay | 98 | A | — | `DX-I18N` |
+| `db-drawer` | overlay | 98 | A | — | `DX-I18N` |
+| `db-dropdown` | overlay, composite | 98 | A | — | `DX-I18N` |
+| `db-input` | form | 98 | A | — | `DX-I18N` |
+| `db-lightbox` | overlay, composite | 98 | A | — | `DX-I18N` |
+| `db-onboarding-modal` | overlay, composite | 98 | A | — | `DX-I18N` |
+| `db-popover` | overlay | 98 | A | — | `DX-I18N` |
+| `db-select` | form, composite | 98 | A | — | `DX-I18N` |
+| `db-sidebar` | display | 98 | A | — | `DX-I18N` |
+| `db-time-picker` | overlay | 98 | A | — | `DX-I18N` |
+| `db-tutorial` | overlay, composite | 98 | A | — | `DX-I18N` |
+| `db-ai-execution-quote` | display | 100 | A | — | — |
+| `db-ai-glow` | display | 100 | A | — | — |
+| `db-ai-model-select` | display | 100 | A | — | — |
+| `db-ai-task-status` | display | 100 | A | — | — |
+| `db-animation-text` | display | 100 | A | — | — |
+| `db-attachment-list` | display | 100 | A | — | — |
+| `db-backdrop` | overlay | 100 | A | — | — |
+| `db-badge` | display | 100 | A | — | — |
+| `db-banner` | display | 100 | A | — | — |
+| `db-bento-card` | display | 100 | A | — | — |
+| `db-bento-grid` | display | 100 | A | — | — |
+| `db-boarding-pass-stack` | composite | 100 | A | — | — |
+| `db-border-beam` | display | 100 | A | — | — |
+| `db-button` | form | 100 | A | — | — |
+| `db-carousel` | display | 100 | A | — | — |
+| `db-chat-list` | display | 100 | A | — | — |
+| `db-chat-orb` | display | 100 | A | — | — |
+| `db-chat-suggestions` | display | 100 | A | — | — |
+| `db-chat-welcome` | display | 100 | A | — | — |
+| `db-checkbox` | form | 100 | A | — | — |
+| `db-color-swatch` | display | 100 | A | — | — |
+| `db-confetti` | display | 100 | A | — | — |
+| `db-confirm` | overlay | 100 | A | — | — |
+| `db-container` | display | 100 | A | — | — |
+| `db-context-menu` | overlay | 100 | A | — | — |
+| `db-credit-balance` | display | 100 | A | — | — |
+| `db-credit-history` | display | 100 | A | — | — |
+| `db-credit-recharge` | display | 100 | A | — | — |
+| `db-credit-recharge-modal` | display | 100 | A | — | — |
+| `db-cursor-follower` | display | 100 | A | — | — |
+| `db-divider` | display | 100 | A | — | — |
+| `db-dropzone` | display | 100 | A | — | — |
+| `db-empty-state` | display | 100 | A | — | — |
+| `db-file-uploader` | display | 100 | A | — | — |
+| `db-glyph-matrix` | display | 100 | A | — | — |
+| `db-gradient` | display | 100 | A | — | — |
+| `db-grid` | display | 100 | A | — | — |
+| `db-grid-background` | display | 100 | A | — | — |
+| `db-image-placeholder` | display | 100 | A | — | — |
+| `db-label` | display | 100 | A | — | — |
+| `db-logo` | display | 100 | A | — | — |
+| `db-marquee` | display | 100 | A | — | — |
+| `db-masonry` | display | 100 | A | — | — |
+| `db-menu-item` | composite | 100 | A | — | — |
+| `db-modal` | overlay | 100 | A | — | — |
+| `db-navigation-rail` | display | 100 | A | — | — |
+| `db-notification-inbox` | display | 100 | A | — | — |
+| `db-plan-overview` | display | 100 | A | — | — |
+| `db-progress` | display | 100 | A | — | — |
+| `db-progressbar` | display | 100 | A | — | — |
+| `db-progressive-blur` | display | 100 | A | — | — |
+| `db-radio` | form, composite | 100 | A | — | — |
+| `db-random-gradient` | display | 100 | A | — | — |
+| `db-range-slider` | composite | 100 | A | — | — |
+| `db-reorder` | display | 100 | A | — | — |
+| `db-scroll-area` | display | 100 | A | — | — |
+| `db-section` | display | 100 | A | — | — |
+| `db-section-cta` | section | 100 | A | — | — |
+| `db-section-feature` | section | 100 | A | — | — |
+| `db-section-hero` | section | 100 | A | — | — |
+| `db-section-stats` | section | 100 | A | — | — |
+| `db-skeleton` | display | 100 | A | — | — |
+| `db-stack` | display | 100 | A | — | — |
+| `db-stat` | display | 100 | A | — | — |
+| `db-tabs` | composite | 100 | A | — | — |
+| `db-textarea` | form | 100 | A | — | — |
+| `db-timeline` | display | 100 | A | — | — |
+| `db-toast` | display | 100 | A | — | — |
+| `db-toggle` | form | 100 | A | — | — |
+| `db-toolbar` | display | 100 | A | — | — |
+| `db-tooltip` | display | 100 | A | — | — |
+| `db-tweet-card` | display | 100 | A | — | — |
+| `db-workspace-invite-modal` | display | 100 | A | — | — |
+| `db-workspace-members` | display | 100 | A | — | — |
+