# task-1652.1 대시보드 다크모드 개발 + 토글 완료 보고서 ## SCQA **S**: 대시보드(`/home/jay/workspace/dashboard/`)가 Tailwind CSS CDN + React 18 기반으로 운영 중이며, 29개 컴포넌트 파일에서 685회의 밝은 모드 Tailwind 유틸리티 클래스(bg-white, text-slate-*, border-slate-200 등)를 사용하고 있다. **C**: 다크모드가 미지원이어서, 어두운 환경에서의 눈 피로 및 사용성 저하 문제가 있었다. 685개 개별 클래스를 모두 `dark:` prefix로 수정하는 것은 비현실적(15,471줄 전체 수정 필요)이었다. **Q**: 기존 컴포넌트 코드를 최소한으로 변경하면서 전 탭에 적용되는 다크모드를 구현할 수 있는가? **A**: CSS override 전략(`html.dark` 선택자 + `!important`)으로 685개 Tailwind 클래스를 일괄 재정의하여, 컴포넌트 코드 수정을 4개 파일로 최소화했다. 인라인 스타일 13건과 Chart.js 5건은 `isDarkMode()` 헬퍼로 개별 처리. localStorage 영속성 + prefers-color-scheme 자동 감지 + FOUC 방지 초기화 스크립트 포함. --- ## 구현 내용 ### 1. CSS Override 인프라 (index.html) - `darkMode: 'class'` Tailwind 설정 - FOUC 방지 초기화 스크립트 (localStorage → prefers-color-scheme 순서) - 140줄 다크모드 CSS 오버라이드: 배경(16종), 텍스트(24종), 보더(10종), 그림자(3종), hover(9종), ring(4종), 마크다운(11종), 입력 필드, 스크롤바 ### 2. 토글 버튼 (App.js) - 🌙/☀️ SVG 아이콘 토글 (헤더 우측, LIVE 버튼 좌측) - localStorage 저장/읽기, meta theme-color 동적 변경 - prefers-color-scheme 변경 이벤트 리스너 ### 3. 인라인 스타일 대응 (4파일) - `isDarkMode()` / `darkColor()` 헬퍼 함수 (utils.js) - SkillView.js: cardStyle + select/option 13건 대응 - AbsorptionTrackerView.js: cardStyle + 카드 배경 5건 대응 - TokenView.js: Chart.js 바/도넛 차트 5건 대응 (grid, centerText, border, legend) ### 4. 다크모드 팔레트 - 배경: #0f172a (body), #1e293b (카드), #334155 (서브) - 텍스트: #e2e8f0 (주), #94a3b8 (보조), #64748b (약한) - 보더: #334155 (기본), #475569 (강조) - 팀 배지: 배경 rgba 30% 투명도, 텍스트 밝은 파스텔톤 --- ## 발견 이슈 및 해결 ### 자체 해결 (3건) 1. **인라인 style `#ffffff` CSS 불가** — CSS `!important`도 인라인 스타일을 덮을 수 없어, `isDarkMode()` 헬퍼 함수로 4개 컴포넌트 개별 수정 2. **Chart.js 다크배경 글자 불가시** — 도넛 차트 centerTextPlugin의 `fillStyle: '#1e293b'`가 다크배경에서 보이지 않음. `isDarkMode()` 분기 추가로 `#e2e8f0` 전환 3. **AbsorptionTrackerView 카드 아이템 미처리** — 팀원 작업에서 라인 471 `#ffffff` 1건 누락. 팀장이 직접 수정 (isDarkMode 삼항 + border 동적 색상 추가) --- ## 생성/수정 파일 - `/home/jay/workspace/dashboard/index.html` (수정: Tailwind config + 초기화 스크립트 + 140줄 다크모드 CSS) - `/home/jay/workspace/dashboard/components/App.js` (수정: darkMode state + toggleDarkMode + 시스템 감지 + 토글 버튼 UI) - `/home/jay/workspace/dashboard/components/utils.js` (수정: isDarkMode() + darkColor() 헬퍼 추가) - `/home/jay/workspace/dashboard/components/SkillView.js` (수정: cardStyle + select/option 다크 대응 13건) - `/home/jay/workspace/dashboard/components/AbsorptionTrackerView.js` (수정: cardStyle + 카드 배경 다크 대응 5건) - `/home/jay/workspace/dashboard/components/TokenView.js` (수정: Chart.js 바/도넛 차트 다크 대응 5건) ## 테스트 - 다크모드 CSS 오버라이드: 685개 Tailwind 클래스 커버 (29개 파일) - 인라인 `#ffffff` 미대응 잔존: **0건** (grep 검증 완료) - 서버 사이드 테스트: 프론트엔드 CSS/JS 전용 변경이므로 기존 pytest 영향 없음 - TypeScript 진단: 모든 경고가 Babel 글로벌 스코프 패턴에 의한 오탐 (JSX 내 참조를 TS가 인식하지 못함) ## 모델 사용 기록 - 이쉬타르(Phase 1-A): index.html 다크모드 CSS 인프라 / sonnet - 이쉬타르(Phase 1-B): App.js 토글 버튼 + state / sonnet - 이쉬타르(Phase 2-A): utils.js + SkillView.js + AbsorptionTrackerView.js 인라인 수정 / sonnet - 이쉬타르(Phase 2-B): TokenView.js Chart.js + index.html 추가 CSS / sonnet - 마르둑(팀장): AbsorptionTrackerView.js 라인 471 누락 수정 직접 개입 / opus ## QC 결과 - tdd_check FAIL 사유: 대시보드 프론트엔드는 Babel `