--- title: "260522_F6d-대시보드탭UI목업v3fix5반영" notion_id: "36822962086881ef8ffec18b4d737d85" notion_url: "https://app.notion.com/p/36822962086881ef8ffec18b4d737d85" category: "workreport" parent: "Claude Code 작업보고" updated: "2026-05-22" priority: "Medium" purpose: "F-6d 마감 — 대시보드 탭 활성 컬러 토큰화 + 모바일 하단 탭바 라임 통일 (목업 v3fix5 기준)" --- 작업자: Claude Code (Opus 4.7, 1M context) 작업일: 2026-05-22 범위: F-6d 마감 (대시보드 탭 UI / max-width 1000px / 컬러 토큰 정리 / 모바일 하단 탭바 마감) --- ## 사용자 작업 지시 (요지) - F-6d 작업. - `docs/dallog_mockup_v3fix5_260520.zip` 내 목업 v3fix5를 실제 기준으로 확인. - 대시보드 max-width 1000px 중앙정렬. - BODY/RUNNING/STRENGTH 탭 전환 구조 보강. - 목업 v3fix5 톤앤매너 중 F-6d 범위만 반영. - 컬러 토큰 정리. - 모바일 하단 탭바 마감 보강 (active 색 라임 통일, safe-area 점검). - 목업 zip 및 임시 폴더는 커밋 전 삭제. - 수정 파일만 개별 `git add`. - `git add .` 또는 `git add -A` 금지. - C-7 로그인 가드, E-6 마크다운 렌더, C-6 마이그레이션, F-6e 라우팅, F-8 쿼리 최적화는 손대지 않음. --- ## 사전 점검 ### git status (작업 시작 시점) 기존 staged/uncommitted 파일: - `A .playwright-mcp/page-2026-05-20T08-23-18-022Z.yml` - `A docs/260520_playwright_browsing_report.md` - `A migrations/2026-05-22_records_updated_at.sql` (C-6 영역) - `M package-lock.json`, `M package.json` - `M src/App.tsx` (C-7 로그인 가드 staged) - `A src/components/MarkdownBriefRenderer.tsx` (E-6 영역) - `M src/lib/supabase.ts`, `M src/pages/CoachNotes.tsx` → F-6d 작업 대상 파일(Dashboard.tsx, Layout.tsx)과 **겹치지 않음**. 기존 staged 잔여물은 건드리지 않고 진행. ### git fetch 원격 최신 여부 확인. `origin/main`과 sync 상태, pull 미실행. ### 목업 zip 압축 해제 결과 ```javascript d:/dallog/dallog_git/docs/_mockup_v3fix5_tmp/ ├─ _shared.js (1.7KB) ├─ coach.html ├─ common.css (18.5KB) ← F-6d 핵심 참고 ├─ dashboard.html (25.5KB) ├─ history.html └─ settings.html ``` ### 목업 v3fix5 핵심 토큰 (common.css) ```css :root { --lime: #c8f135; --mw-dash: 1000px; } .tab.active{color:var(--lime);border-bottom-color:var(--lime);} .center-inner.dash{max-width:var(--mw-dash);} .mobile-bottom-nav{ position:fixed;bottom:0;left:0;right:0; background:var(--bg3);border-top:1px solid rgba(255,255,255,0.06); z-index:50;height:62px; } .mobile-nav-item{color:#c8f135;opacity:0.45;} .mobile-nav-item.active{color:#d97757;opacity:1;font-weight:700;} ``` **중요 결정**: 목업은 mobile-nav active를 오렌지(#d97757)로 처리했으나, 사용자 지시 "active 색상 라임 통일"에 따라 라임(`var(--accent)`)으로 통일. 활성/비활성 차이는 opacity로 표현. --- ## 현재 코드 상태 점검 ### src/index.css — 기존 토큰 (F-7에서 도입) ```css :root, [data-theme="dark"] { --accent: #c8f135; --accent2: #a8d420; ... } ``` `--accent` 토큰이 이미 존재. 새 토큰 추가 불필요. ### src/pages/Dashboard.tsx — F-6d 기 적용 상태 - BODY/RUNNING/STRENGTH 탭 구조 이미 존재 (commit 53095f3에서 적용). - max-width 1000px 중앙정렬 이미 적용. - **남은 문제**: 탭 활성 컬러가 `'#c8f135'` 하드코드 (line 155-156). ### src/components/Layout.tsx — 모바일 하단 탭바 - safe-area-inset-bottom 이미 적용. - 3-탭 구조(대시보드/기록/코치) 이미 존재. - **남은 문제**: active=`'#d97757'`(오렌지), inactive=`'#c8f135'`(라임) → 라임 통일 필요. ### #c8f135 grep 결과 (작업 범위 판단) ```javascript src/pages/Dashboard.tsx:155-156 ← F-6d 범위 (수정) src/components/Layout.tsx:281 ← F-7 사이드바 AI 버튼 (건드리지 않음) src/components/Layout.tsx:368 ← F-6d 범위 (수정) src/components/dashboard/BodySection.tsx:168 ← 차트 영역 (out of scope) src/components/dashboard/RunningSection.tsx:207 ← 차트 영역 (out of scope) src/components/SummaryBrief.tsx:* ← 차트 영역 (out of scope) src/pages/History.tsx:373 ← /history 멀티뷰 (out of scope) src/components/SplashScreen.tsx:40 ← 스플래시 (out of scope) ``` → Dashboard.tsx 탭과 Layout.tsx 모바일 하단 탭바 두 곳만 정리. --- ## 수정 내용 ### 1) src/pages/Dashboard.tsx — 탭 활성 컬러 토큰화 ```diff // 대시보드 — BODY/RUNNING/STRENGTH 탭 전환 단일컬럼(max-width 1000px) — 2026.05.20 F-6d +// F-6d 마감(2026.05.22): 탭 활성 컬러 하드코드 #c8f135 → var(--accent) 토큰화 // 작업7: 근력 평균 스트렝스/총볼륨 — 카테고리·체중 연동 데이터 로드 — 2026.05.16 padding: '12px 16px', background: 'transparent', border: 'none', - borderBottom: active ? '2px solid #c8f135' : '2px solid transparent', - color: active ? '#c8f135' : 'var(--text2)', + borderBottom: active ? '2px solid var(--accent)' : '2px solid transparent', + color: active ? 'var(--accent)' : 'var(--text2)', fontFamily: 'var(--font-display)', fontSize: '14px', ``` ### 2) src/components/Layout.tsx — 모바일 하단 탭바 라임 통일 ```diff // F-7: 사이드바 240→272px, 콘텐츠 padding-top 32px, 하드코딩 컬러→CSS 변수, Bebas Neue 로고 적용 — 2026.05.20 +// F-6d 마감(2026.05.22): 모바일 하단 탭바 active 컬러 #d97757 → 라임(var(--accent)) 통일 + 비활성 라임 opacity 처리(목업 v3fix5 mobile-nav-item 기준) // 모바일 하단 탭바 (데스크탑에선 숨김) + // F-6d: active/inactive 모두 라임(var(--accent))으로 통일, opacity로 활성도 표현 — 목업 v3fix5 mobile-nav-item 기준 const bottomTabBar = !isDesktop && (