# task-1017.1 완료 보고서: 대시보드 토큰 바차트 task 클릭 → 보고서 모달 이동

## SCQA

**S**: 대시보드 토큰 탭의 바차트에 task ID가 텍스트로만 표시되어 있어, 해당 작업의 완료보고서를 보려면 기록 탭으로 수동 이동 후 검색이 필요하다.

**C**: task ID가 단순 라벨이라 클릭 불가. 토큰 이상치를 발견해도 즉시 보고서를 확인할 수 없어 워크플로우 효율이 떨어진다.

**Q**: 바차트 task ID 클릭만으로 해당 작업의 보고서를 즉시 확인할 수 있는가?

**A**: Chart.js onClick/onHover 핸들러를 추가하여 바 또는 y축 라벨 클릭 시 `window._showReportModal(taskId)`로 보고서 모달을 즉시 표시. 기존 ReportModal 인프라를 재활용하여 최소 변경으로 구현. 보고서 없는 task는 "보고서를 찾을 수 없습니다" 표시.

## 구현 상세

### 설계 결정
- **방식 (B) 선택**: 상위 컴포넌트의 `window._showReportModal` 전역 함수 활용
- 탭 전환 방식 대신 모달 오버레이 방식 채택 — 이유: App.js에 이미 ReportModal + `/api/report/{taskId}` API가 구현되어 있어 새 코드 최소화
- 작업 지시 "심플하게 구현 — task ID 클릭 → 해당 보고서 보기, 이것만 되면 됨"에 부합

### 변경 내용

#### TokenView.js (수정)
1. **바차트 onClick 핸들러** (라인 173-192): 바 클릭 또는 y축 라벨 클릭 시 `window._showReportModal(taskId)` 호출
2. **onHover 핸들러** (라인 194-203): 바/라벨 위 마우스 오버 시 `cursor: pointer` 변경
3. **y축 틱 색상** (라인 234-235): `#3b82f6` (파란색) — 클릭 가능함 시각 표시
4. **헤더 안내 텍스트** (라인 437-440): "클릭하여 보고서 보기" 힌트
5. **이상치 영역 task ID 클릭** (라인 498): 이상치 목록의 task ID도 클릭 가능(파란색 + 밑줄)

## 생성/수정 파일 목록
- `/home/jay/workspace/dashboard/components/TokenView.js` — 수정 (5개 변경 블록)

## 발견 이슈 및 해결

### 자체 해결 (1건)
1. **헤더 레이아웃 깨짐** — `flex justify-between`에 3개 자식 요소 추가 시 중앙 배치되는 문제
   - h3와 안내 텍스트를 `<div className="flex items-center gap-1.5">`로 그룹핑하여 해결

### 범위 외 미해결 (0건)

## 테스트
- JS 프론트엔드 파일: 별도 테스트 프레임워크 없음 (브라우저 수동 테스트 대상)
- 코드 리뷰: JSX 구문 오류 없음, Chart.js API 호환성 확인 (Chart.js v4 onClick/onHover 지원)
- `window._showReportModal` null 가드: 모달 미등록 시 안전하게 무시

## 변경 영향 범위
- 기존 바차트 기능(기간 필터, 툴팁, 평균선, 파이차트): 영향 없음
- task-1012.1 자동화 탭 로직: 충돌 없음 (TokenView는 독립 컴포넌트)