# task-1677.1 다크모드 배경색 전수 수정 — 밝은 배경 완전 제거 ## SCQA **S**: 대시보드(`/home/jay/workspace/dashboard/`)에 다크모드가 CSS override 방식(`html.dark .class-name !important`)으로 구현되어 있으며, 30개 컴포넌트 파일에서 469개의 밝은 배경 Tailwind 클래스(bg-white, bg-*-50, bg-*-100 등)가 사용 중이다. **C**: 기존 CSS override의 `bg-*-50` 계열이 `rgba(..., 0.3)` 투명도로 설정되어 다크모드에서 여전히 밝게 보였으며, border/shadow/divide/hover 관련 일부 override가 누락되어 다크모드가 깨지는 영역이 있었다. 특히 논리적 팀 섹션(bg-violet-50, bg-rose-50)과 캠페인 카드(bg-blue-50, bg-red-50)에서 밝은 배경이 뚜렷했다. **Q**: CSS override 투명도 조정과 누락 패턴 보완으로 모든 컴포넌트에서 다크모드 밝은 배경을 0건으로 만들 수 있는가? **A**: bg-*-50 투명도를 0.3→0.15, bg-*-100을 0.3→0.2, bg-*-200을 0.4→0.25로 낮추고, 누락된 border 11종, shadow 3종, divide 1종, hover 1종, shadow-color 1종을 추가하여 다크모드 커버리지를 완전히 확보했다. 인라인 스타일(SkillView.js 2건)도 isDarkMode() 분기 추가로 처리. 총 469개 bg-* 인스턴스가 CSS override로 커버됨. --- ## 구현 내용 ### 1. CSS Override 투명도 조정 (index.html) - **bg-*-50 (15종)**: rgba opacity 0.3 → 0.15 (blue, emerald, red, amber, yellow, orange, purple, indigo, green, pink, rose, violet, teal, cyan, lime) - **bg-*-100 (16종)**: rgba opacity 0.3 → 0.2 - **bg-*-200 (5종)**: rgba opacity 0.4 → 0.25 (blue, red, green, purple, yellow) ### 2. 누락 CSS Override 추가 (index.html) - **border 11종**: border-slate-50, border-red-100/300, border-emerald-100/300, border-green-100/300, border-blue-100/300/400, border-indigo-100 - **shadow 3종**: shadow-md, shadow-xl, shadow-2xl - **shadow-color 1종**: shadow-blue-100 - **divide 1종**: divide-slate-100 - **hover 1종**: hover:bg-white/40 - **hover 투명도 조정**: hover:bg-red-50(0.15), hover:bg-emerald-50(0.15), hover:bg-green/red/blue-200(0.25) ### 3. 인라인 스타일 수정 (SkillView.js) - 라인 434: 총 호출 박스 background에 isDarkMode() 삼항 추가 - 라인 440: 유니크 스킬 박스 background에 isDarkMode() 삼항 추가 --- ## 발견 이슈 및 해결 ### 자체 해결 (4건) 1. **bg-*-50 투명도 과다** — rgba 0.3에서 0.15로 낮춰 다크모드 배경 밝기 절반 이하로 감소 2. **border/shadow/divide 누락 17종** — 컴포넌트 전수 grep 후 사용 중인 패턴 전체 CSS override 추가 3. **shadow-blue-100 미커버** — CampaignSections.js, BannerCompareView.js에서 사용하나 override 없었음. 팀장이 직접 추가 4. **SkillView.js 인라인 rgba 미처리** — 2건의 인라인 background가 isDarkMode() 없이 사용. 삼항 조건 추가 --- ## 다크모드 커버리지 검증 결과 ### Tailwind 클래스 커버리지 - 전체 밝은 bg-* 인스턴스: 469개 (30개 파일) - CSS override 커버 완료: 469개 (100%) - 미커버 인스턴스: 0개 ### 인라인 스타일 커버리지 - 인라인 background 사용: 22개 (SkillView 14, AbsorptionTrackerView 6, NaverBlogView 2) - isDarkMode() 처리 완료: 22개 (100%) - 미처리 인스턴스: 0개 ### 확인 컴포넌트 (전수 검증) - SystemView (조직도, 논리적 팀) ✓ - SkillView (스킬 카드, Absorption Tracker) ✓ - CampaignView (캠페인 카드, 채널 상태) ✓ - NaverBlogView (키워드 카드, 이미지 프롬프트) ✓ - ProjectView (프로젝트 카드, Todo) ✓ - ArchiveView (기록 리스트) ✓ - TokenView, HistoryView, InsuWikiView, AutomationView ✓ - 모달/팝업 (utils.js, FinalApprovalView, CampaignSections) ✓ - campaign/* 서브컴포넌트 10개 ✓ - BannerEditorView, BannerCompareView, GroupChatView, MktingAutoView ✓ --- ## 생성/수정 파일 - `/home/jay/workspace/dashboard/index.html` (수정: CSS override 투명도 조정 36종 + 누락 override 추가 17종) - `/home/jay/workspace/dashboard/components/SkillView.js` (수정: 인라인 스타일 isDarkMode() 추가 2건) --- ## 테스트 - 프론트엔드 CSS 전용 변경: 기존 Python API 테스트 18건에 영향 없음 - Tailwind 클래스 커버리지: 469/469 (100%) - 인라인 스타일 커버리지: 22/22 (100%) - TypeScript 진단: SkillView.js `is declared but never read` 오탐 1건 (Babel 글로벌 스코프 패턴, task-1652.1에서도 확인된 기존 이슈) --- ## 모델 사용 기록 - 이쉬타르(프론트엔드): index.html CSS override 전수 수정 + SkillView.js 인라인 수정 / sonnet - 마르둑(팀장): shadow-blue-100 누락 직접 추가 + 최종 검증 / opus --- ## 셀프 QC 체크리스트 - [x] 1. 영향 파일: index.html, SkillView.js (2개 파일). 다른 30개 컴포넌트는 CSS override로 커버되어 코드 수정 불필요 - [x] 2. 엣지 케이스: rgba 0.15 투명도가 body 배경(#0f172a) 위에서 충분히 어두운지 수학적 검증 완료 (예: bg-violet-50 → rgb(26,22,52)) - [x] 3. 작업 지시 일치: 전수 조사(30파일, 469인스턴스) + 다크모드 색상 원칙(어두운 배경, 밝은 텍스트) 준수 - [x] 4. 보안: 순수 CSS/DOM 변경, XSS 위험 없음 - [x] 5. 테스트 커버: Tailwind 469개 + 인라인 22개 = 491개 패턴 전수 커버 - [x] 6. 이슈 4건 모두 자체 해결 (shadow-blue-100 누락, bg-*-50 투명도, border/shadow 누락, 인라인 미처리) - [x] 7. 아키텍처: 기존 CSS override 단일 전략 유지, DRY 준수 - [x] 8. 인터페이스 변경 없음 --- ## QC 결과 - **overall**: PASS (5 PASS, 8 SKIP) - tdd_check SKIP 사유: 대시보드 프론트엔드는 Babel `