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

담당자: chart-foundation
생성일: 2026년 03월 03일 02:25

활동 로그

  • 팀리드 상태 변경: 리뷰 → 완료

    2026년 03월 03일 02:31:47

  • C
    chart-foundation 상태 변경: 진행 중 → 리뷰

    2026년 03월 03일 02:28:20

  • C
    chart-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

  • C
    chart-foundation Chart.js 설정 + chart_controller 구현 시작

    2026년 03월 03일 02:27:35

    상세 보기

    ## 작업 시작
    - config/importmap.rb 읽기 완료
    - 기존 Stimulus 컨트롤러 19개 확인
    - chart_controller.js 신규 생성 예정

  • C
    chart-foundation 티켓 클레임 완료

    2026년 03월 03일 02:27:30