# 대시보드 다크모드 개발 + 토글 ## 한정승인 ## 작업 목표 대시보드에 다크모드를 추가하고, 밝은 모드 ↔ 다크모드 토글 기능을 구현한다. ## 핵심 요구사항 - **색상 가독성**: 다크 배경에서 텍스트/배지/차트/버튼이 잘 보여야 함 - **토글**: 헤더 또는 사이드바에 밝은/어두운 모드 전환 버튼 - **설정 유지**: localStorage에 선택 저장, 새로고침 후에도 유지 - **모든 탭 적용**: 네이버블로그, InsuWiki, 캠페인, 스킬뷰, 프로젝트, 시스템 등 전 탭 ## 현재 구조 파악 (필수) - 대시보드: `/home/jay/workspace/dashboard/` - 메인 HTML: `/home/jay/workspace/dashboard/index.html` - 스타일: Tailwind CSS CDN 사용 중인지, 커스텀 CSS인지 확인 - 컴포넌트: `/home/jay/workspace/dashboard/components/*.js` - 기존 색상 체계 파악 후 다크모드 팔레트 설계 ## 구현 방향 ### 1. 다크모드 색상 팔레트 설계 - 배경: #1a1a2e 또는 #0f172a 계열 (눈 피로 최소) - 카드/패널: #1e293b 또는 #16213e - 텍스트: #e2e8f0 (주), #94a3b8 (보조) - 보더: #334155 - 액센트: 기존 밝은 모드 색상 대비 조정 (채도 약간 낮추고 명도 올림) - **배지 색상**: TrustBadge, status 배지 등 기존 색상이 다크 배경에서 가독성 확보되도록 조정 - **차트/그래프**: 배경 대비 데이터 포인트 가시성 확인 - **입력 필드**: 다크 배경 + 밝은 보더 + 밝은 텍스트 ### 2. 토글 구현 - 헤더 우측에 🌙/☀️ 아이콘 토글 버튼 - `localStorage.setItem('theme', 'dark'|'light')` 저장 - 페이지 로드 시 저장된 테마 자동 적용 - `prefers-color-scheme: dark` 시스템 설정 자동 감지 (최초 방문 시) ### 3. 적용 범위 - `` 또는 ``에 `data-theme="dark"` 속성 토글 - CSS 변수 또는 Tailwind dark: prefix 활용 - **모든 컴포넌트** 적용: - App.js (메인 레이아웃, 사이드바, 헤더) - NaverBlogView.js - CampaignView.js + campaign/ 하위 컴포넌트 - SkillView.js + AbsorptionTrackerView.js - ProjectView.js - SystemView.js (있으면) - ArchiveView.js - 기타 모든 컴포넌트 ### 4. 주의사항 - 하드코딩된 색상값(`bg-white`, `text-gray-900`, `border-gray-200` 등)을 CSS 변수로 전환하거나 dark: prefix 추가 - 이미지/아이콘 반전 필요 여부 확인 - 그래프 라이브러리 사용 중이면 다크모드 테마 설정 - **대비율 WCAG AA 준수** (일반 텍스트 4.5:1, 큰 텍스트 3:1) ## 참조 파일 - index.html: `/home/jay/workspace/dashboard/index.html` - 메인 앱: `/home/jay/workspace/dashboard/components/App.js` - 전체 컴포넌트: `/home/jay/workspace/dashboard/components/` ## 테스트 1. 밝은 모드 → 다크모드 토글 → 전 탭 색상 정상 확인 2. 다크모드에서 새로고침 → 다크모드 유지 확인 3. 배지/버튼/입력필드/차트 가독성 확인 4. 시스템 다크모드 설정 시 자동 감지 확인 ## 보고서 `/home/jay/workspace/memory/reports/task-{TASK_ID}.md`