# B07 CAD 테마 통합 완료 아카이브

- 완료일: 2026-08-29
- 상태: 사용자 검증 완료
- 검증: `docs/raw/verification/2026-08-29_verify_B07_CAD_theme.md`
- 검증 방식: 사용자 실무 검증 채택, Codex 2차 교차검증 생략

## 완료 범위

### B07 CAD 화면 테마 통합 — 앱 디자인 토큰·화이트/블랙 모드 (2026-08-29 구현 완료, 검증 대기)

**배경**(사용자 지시 2026-08-29): B07은 CAD 프로그램 영역인데 UI가 본 프로그램과
따로 논다. 앱 상단 ☀/☾ 토글로 바꾸는 화이트/블랙 모드가 iframe 안 CAD에는
전혀 반영되지 않는다(App.css에 하드코딩 다크 색 88개).

**현황 조사**:

- 앱 테마 = `document.documentElement[data-theme]`("light"/"dark", 미지정 시
  `prefers-color-scheme`) + `localStorage["frd_theme"]`
  (`A00_Common/app_shell.ts:26-40`). 토큰 정의처 `ui_template/ui_template_theme.css`
  (`:root` / `:root[data-theme="dark"]` / media 폴백, 외부 @import·url 없음).
- CAD는 별도 vite 빌드(iframe, **동일 오리진**) — `openwebcad/src/App.css` 577줄에
  `#19222d`·`#202b37` 등 다크 전용 색이 박혀 있고, `index.html`은
  `bg-white`·`bg-slate-950`·`bg-black` 유틸로 배경을 고정한다.
- 캔버스 색은 `App.consts.ts`의 `CANVAS_BACKGROUND_COLOR='#111'` 1곳
  (`screenCanvas.drawController.ts:333`)과 그리드 `#242b35`(336).
- 도면 엔티티 색은 백엔드 생성값(GROUND `#f5f7fa`, TABLE_LABEL `#e8edf4` 등
  **밝은 색 다수**) — 라이트 모드 흰 배경에서 안 보인다. 저장 데이터라 값 자체는
  못 바꾼다(수정하면 저장본 오염).
- `Button.tsx`·`DropdownButton.tsx`·`LayerManager.tsx`는 tailwind 색 유틸
  (`bg-gray-950`·`text-blue-500`·`text-white`)로 다크 고정.

**설계 방향**(라이트/다크 단일 소스):

1. CAD 빌드가 앱 토큰 파일을 **직접 import** — 색 정의를 두 벌로 만들지 않는다.
2. 테마 전달은 **동일 오리진 localStorage + `storage` 이벤트** — 부모가 토글하며
   쓰는 `frd_theme`를 iframe이 그대로 받는다(부모 코드 수정 0, postMessage 불필요).
3. 도면 엔티티 색은 **그릴 때만** 보정 — 라이트 모드에서 휘도가 높은 색만
   어둡게 환산(`drawController` 한 곳). 저장 데이터는 불변.

**체크리스트** (2026-08-29 구현·자체검증 완료 — 검증 대기):

- [x] `openwebcad/src/theme.ts` 신설 — `frd_theme` 동기화(boot + `storage` 이벤트 +
  시스템 폴백), `themeColor()` 토큰 조회 캐시, `paintColor()` 휘도 보정.
  테마가 바뀌면 캐시를 비우고 `bumpSceneVersion()`으로 정적 장면 비트맵도 다시 굽는다
  (계획 대비 추가 — 캐시 비트맵에 배경·선 색이 구워져 있어 전환이 안 먹던 것을
  실측에서 잡음: 다크 전환 후 캔버스 픽셀이 255,255,255로 남아 있었다).
- [x] `App.css` — `ui_template_theme.css` import + 하드코딩 색 **전량** 치환
  (스크립트 검증: 남은 hex 0개). CAD 골격용 별칭 토큰(`--cad-chrome` 등) 11종은
  앱 토큰을 가리키기만 하며 색을 새로 정하지 않는다.
- [x] `index.html` — `bg-white`/`bg-slate-950`/`bg-black` 제거
- [x] `screenCanvas.drawController.ts` — 배경·그리드·선/면/글자 색을 테마 경유
- [x] `Button.tsx`·`LayerManager.tsx` — tailwind 색 유틸 제거, 색은 App.css 토큰이
  `data-type`/`data-active`로 준다. ⚠ 계획 대비 차이 — `DropdownButton.tsx`는
  **어디서도 import되지 않는 죽은 컴포넌트**라 손대지 않았다(화면에 안 나오는 색).
- [x] 재빌드 후 공용 브라우저 실측 (`tmp/browser/shots/427_light_full.png`,
  `423_cad_dark.png`):
  - 라이트: 타이틀바 `rgb(246,247,250)`=`--color-paper`, 캔버스 픽셀 `255,255,255`,
    상태바 동일 토큰, 도면 선은 휘도 보정으로 흰 배경에서 판독 가능.
  - 다크: 타이틀바 `rgb(30,25,48)`, 캔버스 픽셀 `22,18,31`=`--color-canvas`(dark).
  - **리로드 없이** 부모 테마 토글 → iframe 즉시 추종 확인
    (다크 `rgb(30,25,48)` → 라이트 `rgb(246,247,250)`, 캔버스도 함께 전환).
  - `tsc --noEmit`(메인) 통과, CAD 빌드 `tsc -b` 통과.
  - 화면·테마는 사용자가 쓰던 상태(라이트, `#/b05-profile`)로 되돌려 놓음.
- [ ] 남은 것(별건) — 도면층 패널 행이 폭 248px을 넘어 버튼이 잘린다. 이번 변경
  이전(다크 하드코딩 시절)에도 같던 기존 레이아웃 문제라 손대지 않았다.