---
title: "📓 작업일지 — Chart.js tick/grid 라이트모드 테마토큰화 (U1)"
category: "worklog"
parent: "Claude Code 작업일지"
updated: "2026-07-03"
priority: "Low"
purpose: "토큰맵 v0 후속 라운드 U1 항목 — 차트 축 눈금(tick)·격자(grid) 색상이 다크모드 값으로 하드코딩되어 있어 라이트모드에서 눈금이 흐리고 흰 격자가 소실되던 문제를 --chart-tick/--chart-tick-muted/--chart-grid 토큰화로 해소한 기록."
read_when: ["Chart.js 라이트모드 축", "--chart-tick --chart-grid", "chartTheme axisTick axisGrid", "RunningSection mileageBarOpts getter전환"]
document_type: "개발일지"
source_status: "generated"
knowledge_group: "03_history"
work_timestamp: "20260703_133918"
source_of_truth: "https://dallog-tools.hansbridge.co.kr/knowledge/"
context: "달록 본레포(ccy-hansbridge/dallog), 커밋 ec7673f(2026-07-03). 토큰맵 v0 후속 라운드 U1."
---

# 작업일지 — Chart.js tick/grid 라이트모드 테마토큰화 (U1)

## 1. 무엇을 했나

- `index.css`에 `--chart-tick`/`--chart-tick-muted`/`--chart-grid` 3개 토큰 신설.
  - 다크(기본): `#555` / `#aaa` / `rgba(255,255,255,0.04)` — 기존 하드코딩 값 그대로 유지.
  - 라이트: `#8a909b` / `#a8aeb8` / `rgba(20,24,31,0.08)` — 라이트 배경에서 대비가 확보되도록 신규 값.
- `src/lib/chartTheme.ts`에 `axisTick()`/`axisTickMuted()`/`axisGrid()` 헬퍼 함수 추가(`cssVar` 기반, 위 3개 토큰 참조).
- `RunningSection`·`SummaryBrief`·`BodySection` 3개 컴포넌트, 총 8개소의 Chart.js 옵션에서 축·격자 색을 하드코딩하던 부분을 위 헬퍼 호출로 치환.
- `RunningSection`의 모듈 레벨 상수 2개(`shoeMileageBarOpts`·`mileageBarOpts`)를 getter 함수로 전환 — 모듈 로드 시 한 번만 평가되던 것을 렌더 시점마다 재평가하도록 바꿔 테마 전환에 반응하게 함.
- 라이트모드에서 축 눈금이 흐리게 보이고 흰 격자선이 사실상 안 보이던 문제를 실측으로 해소 확인. 다크모드는 값 자체가 동일해 무회귀. 차트 데이터·계산 로직은 변경 없음.
- Codex 구현 + 자가 검증(build·test 121건·mojibake 없음·getter 정합·시각 확인).

## 2. 주요 변경 파일

| 파일 | 내용 |
|---|---|
| `src/index.css` | `--chart-tick`/`--chart-tick-muted`/`--chart-grid` 다크·라이트 값 신설 |
| `src/lib/chartTheme.ts` | `axisTick`/`axisTickMuted`/`axisGrid` 헬퍼 3개 추가 |
| `src/components/dashboard/RunningSection.tsx` | 하드코딩 축/격자색 → 헬퍼 치환, `mileageBarOpts`·`shoeMileageBarOpts` 상수→getter 전환 |
| `src/components/SummaryBrief.tsx` | 하드코딩 축/격자색 → 헬퍼 치환 |
| `src/components/dashboard/BodySection.tsx` | 하드코딩 축/격자색 → 헬퍼 치환 |

### 핵심 발췌

```css
/* 다크(기본) */
--chart-tick: #555;
--chart-tick-muted: #aaa;
--chart-grid: rgba(255,255,255,0.04);

/* 라이트 */
--chart-tick: #8a909b;
--chart-tick-muted: #a8aeb8;
--chart-grid: rgba(20,24,31,0.08);
```
```ts
export const axisTick = () => cssVar('--chart-tick', '#555')
export const axisTickMuted = () => cssVar('--chart-tick-muted', '#aaa')
export const axisGrid = () => cssVar('--chart-grid', 'rgba(255,255,255,0.04)')
```

## 3. 관련 커밋

- `ec7673f` feat(chart): Chart.js tick/grid 라이트모드 테마토큰화 (U1) (2026-07-03)

## 4. 남은 이슈

커밋 기준 별도로 언급된 남은 이슈는 없음.