---
title: "📓 작업일지 — tsx 인라인 색상·studio.css 완전 토큰화 (색상 raw 홀 0) + 자기참조 회귀 발견·수정·가드 보강"
category: "worklog"
parent: "Claude Code 작업일지"
updated: "2026-07-03"
priority: "Medium"
purpose: "토큰맵 마무리 단계에서 tsx 인라인 색상과 studio.css의 raw 색상을 전부 토큰화해 색상 부채를 0으로 만들었으나, 그 변환 스크립트가 --studio-accent 정의 라인을 자기참조로 손상시키는 회귀를 만들었다. Codex가 이를 잡아 즉시 복구하고, 재발 방지를 위한 자기참조 가드를 신설·studio-overrides.css까지 확장 적용한 스레드."
read_when: ["colorTokenGuard", "studio-accent 자기참조", "studio.css 토큰화", "색상 raw 홀 0", "자기참조 가드"]
document_type: "개발일지"
source_status: "generated"
knowledge_group: "03_history"
work_timestamp: "20260703_170811"
source_of_truth: "https://dallog-tools.hansbridge.co.kr/knowledge/"
context: "달록 본레포(ccy-hansbridge/dallog), 커밋 9fca9e1(토큰화) → 6567db9(회귀수정+가드신설, Codex [반려] 반영) → 49019eb(가드 studio-overrides.css 편입, Codex 재검수 후속갭), 2026-07-03 16:55~17:08."
---

# 작업일지 — 색상 토큰화 완결 중 발생한 자기참조 회귀 발견·수정·가드 보강

> 토큰맵 마무리 단계에서 tsx 인라인 색상과 studio.css의 raw 색상을 전부 토큰화하는 작업을 진행했는데, 이 변환 과정에서 스튜디오 시그니처 색상(`--studio-accent`)이 자기 자신을 참조하는 회귀가 발생했다. Codex가 [반려] 판정으로 이를 잡아, 같은 날 안에 원인 수정과 재발 방지 가드까지 완료했다.

## 1. 무엇을 했나

### 색상 raw 홀 절대 제로화 (`9fca9e1`, 16:55)
- **tsx 인라인 색상 토큰화**: `CoachNotes`의 영양색을 `--nutri-carb/protein/fat`(fixed 값 보존)으로, `CellModeStrength`의 세션 톤을 `--session-tone-a/b/c`로, accent 틴트를 `color-mix`로 전환. `SummaryBrief`의 죽은 SVG 인라인 색상 6건 제거(Fix B의 CSS가 이미 `stroke`/`fill`/`stop-color`를 오버라이드하고 있어 인라인은 불필요했음).
- **studio.css 완전 토큰화**: 시그니처 핑크를 `--studio-accent`로, 앱 색상 raw 값을 `color-mix(var(--amber/blue/accent))`로, 그림자를 scrim으로 전환. `studio.css`를 `colorTokenGuard`에 편입해 재발 방지 대상에 포함.
- `studioStructure`의 드래그 아웃라인 raw 색상도 `color-mix(gray)`로 전환.
- 가드 조정: `RunningSection`/`settingsTools`의 폴백·예시텍스트를 allowlist 처리 + `*.generated.ts` 제외 + `DEBT_CEIL.tsx` 19 → 0으로 하향. 전체 123개 테스트 GREEN.
- 최종 전수검증: product 코드의 raw 색상 홀 0건, 스튜디오 TS는 토큰정의 데이터·var 폴백·예시텍스트만 남아있음을 확인(가드 제외 대상으로 정당).

### 자기참조 회귀 발견·수정 (`6567db9`, 17:02)
- **원인**: 위 `studio.css` 변환 스크립트가 `:root{--studio-accent:#ff2d9b}` 정의 라인을 `var(--studio-accent)`(자기 자신 참조)로 잘못 손상시킴 — 정의 라인은 `--`로 시작하지 않는 값 패턴이라 스킵 로직이 적용되지 않았던 것. 이로 인해 스튜디오 선택/스냅/리사이즈 하이라이트 색상이 깨졌었음.
- Codex [반려] 반영: `--studio-accent: #ff2d9b`로 원복.
- **재발 방지 가드 신설**: `colorTokenGuard.test.ts`에 "CSS 커스텀 프로퍼티 자기참조(`--x: var(--x)`) 금지" 테스트를 신설 — 기존 소비처 가드는 정의부(definition line)를 건너뛰기 때문에 이런 정의부 손상은 잡지 못한다는 공백(Codex 지적)을 보완. `index.css`·`admin.css`·`studio.css` 전 CSS에서 자기참조 0건 확인.
- 빌드·전체 테스트 GREEN.

### 가드 대상 확장 (`49019eb`, 17:08)
- Codex 재검수 후속 갭 지적: 스튜디오 발행 자동생성물인 `studio-overrides.css`가 자기참조 가드 대상에서 빠져 있었음.
- 위 자기참조 가드에 `studio-overrides.css`를 편입 — 현재 0건 확인.

## 2. 주요 변경 파일

| 파일 | 내용 |
|---|---|
| `src/pages/studio.css` | raw 색상 토큰화, `--studio-accent` 회귀 수정 |
| `src/components/dashboard/CellModeStrength.tsx` / `CoachNotes.tsx` / `SummaryBrief.tsx` | tsx 인라인 색상 토큰화 |
| `src/lib/studioStructure.ts` | 드래그 아웃라인 색상 토큰화 |
| `src/styles/colorTokenGuard.test.ts` | 자기참조 금지 테스트 신설 + studio-overrides.css 편입 |

## 3. 관련 커밋

- `9fca9e1` fix(tokens): tsx 인라인 색상 + studio.css 완전 토큰화 — 색상 raw 홀 절대 제로(css·tsx 상한 0, studio.css 가드 편입) (2026-07-03 16:55)
- `6567db9` fix(studio): --studio-accent 자기참조 회귀 수정 (Codex [반려] 반영) + 자기참조 가드 추가 (2026-07-03 17:02)
- `49019eb` test(guard): 자기참조 검사에 studio-overrides.css 편입 (Codex 재검수 후속 갭) (2026-07-03 17:08)

## 4. 남은 이슈

커밋 기준 별도로 언급된 남은 이슈는 없음. 이 스레드는 "자동 변환 스크립트가 도입한 회귀는 소비처 가드만으로는 잡히지 않을 수 있다"는 사례로, 정의부까지 검사하는 자기참조 가드 신설로 이어졌다.