Chart.js 설정 + chart_controller Stimulus 컨트롤러
ID: 4a6ffcc4-58da-4777-a992-3c031ef412e5
## 목표
Chart.js를 Importmap으로 설치하고, 범용 chart_controller Stimulus 컨트롤러를 생성
## 구현 내용
### 1. config/importmap.rb에 Chart.js 추가
```ruby
pin "chart.js", to: "https://cdn.jsdelivr.net/npm/chart.js@4.4.7/dist/chart.umd.min.js"
```
### 2. app/javascript/controllers/chart_controller.js 생성
- Stimulus 컨트롤러로 범용 차트 렌더링
- data-chart-type-value: "line" | "bar" | "pie" | "doughnut"
- data-chart-data-value: JSON 문자열 (labels + datasets)
- data-chart-options-value: JSON 문자열 (선택적 옵션 오버라이드)
- 다크모드 대응: prefers-color-scheme 감지하여 텍스트/그리드 색상 자동 전환
- 모바일 반응형: aspectRatio 조절, 범례 위치 조정
- canvas target으로 차트 렌더링
- disconnect() 시 차트 인스턴스 destroy()
### 3. 다크모드 색상 매핑
```javascript
// 라이트모드
gridColor: 'rgba(0, 0, 0, 0.1)'
textColor: '#374151'
// 다크모드
gridColor: 'rgba(255, 255, 255, 0.1)'
textColor: '#d1d5db'
```
### 4. 차트 색상 팔레트 (디자인 시스템 연동)
```javascript
const CHART_COLORS = {
primary: '#4f46e5', // brand-primary
secondary: '#f59e0b', // brand-secondary
success: '#10b981', // status-success
warning: '#f59e0b', // status-warning
error: '#ef4444', // status-error
info: '#3b82f6', // status-info
}
```
## 완료 기준
- [ ] importmap.rb에 Chart.js pin 추가
- [ ] chart_controller.js 생성 (line/bar/pie/doughnut 지원)
- [ ] 다크모드 자동 감지 + 색상 전환
- [ ] 모바일 반응형 (aspectRatio)
- [ ] disconnect 시 메모리 정리
- [ ] 기존 테스트 전체 통과 (bin/rails test)
## 담당 파일
- config/importmap.rb (수정)
- app/javascript/controllers/chart_controller.js (신규)
첨부 이미지
이미지 추가 (Ctrl+V로 붙여넣기 또는 클릭)
JPEG, PNG, GIF, WebP / 최대 10MB
활동 로그
-
팀팀리드 상태 변경: 리뷰 → 완료
2026년 03월 03일 02:31:47
-
Cchart-foundation 상태 변경: 진행 중 → 리뷰
2026년 03월 03일 02:28:20
-
Cchart-foundation Chart.js 설정 + chart_controller 생성 완료
2026년 03월 03일 02:28:20
상세 보기
## 변경 사항
### 수정 파일: config/importmap.rb
- Chart.js 4.4.7 CDN pin 추가 (jsdelivr)### 신규 파일: app/javascript/controllers/chart_controller.js
- Stimulus 컨트롤러로 범용 차트 렌더링
- static values: type(line/bar/pie/doughnut), data(Object), options(Object)
- static targets: canvas
- 다크모드 자동 감지 (prefers-color-scheme) + 실시간 전환
- 모바일 반응형 (aspectRatio: 640px 미만 1.5, 이상 2)
- Cartesian(line/bar) 차트에 scales 자동 설정
- deepMerge로 사용자 옵션 오버라이드 지원
- disconnect() 시 Chart 인스턴스 + observer 정리## 테스트 결과
- 492 runs, 1175 assertions, 0 failures, 0 errors -
Cchart-foundation Chart.js 설정 + chart_controller 구현 시작
2026년 03월 03일 02:27:35
상세 보기
## 작업 시작
- config/importmap.rb 읽기 완료
- 기존 Stimulus 컨트롤러 19개 확인
- chart_controller.js 신규 생성 예정 -
Cchart-foundation 티켓 클레임 완료
2026년 03월 03일 02:27:30