---
title: "UI시각화 내용 설명서"
notion_id: "36622962086881f4be33ea600a633bdc"
notion_url: "https://app.notion.com/p/36622962086881f4be33ea600a633bdc"
category: "guide"
parent: "달록 개발 현황"
updated: "2026-05-30"
priority: "High"
purpose: "달록 소스코드 기준 레이아웃·breakpoint·컬러토큰·컴포넌트 트리 + 셀모드/OCR/주간마일리지/SNS UI 부록"
read_when: ["UI작업","디자인시스템","기능파악"]
---

# 달록(PaceLog) UI시각화 내용 설명서
작성일: 260523 | 버전: v2 (v0.9-stab + OCR MVP UI 반영) | 기준: 소스코드 직접 파악 (Claude Code)
> 📌 (gray_bg 콜아웃)
> **검증 범위 안내** — 본 문서의 모든 수치·구조는 **소스코드(`src/`) 기준 확인값**이다. 추정값은 사용하지 않는다. 이번 갱신에서는 **MCP 브라우징 최신 검증은 미실시**(다음 업무일 예정). 따라서 v0.9-stab 이후 변경된 UI의 실제 시각 검증 결과는 다음 업무일에 MCP브라우징 보고서로 별도 발행한다. 본 문서는 **코드 기준 확인값만 갱신**한다.
> 🚧 (orange_bg 콜아웃)
> **v0.9 클로즈베타 목표 재정의 (2026-05-23)** — 프로필 / 타임라인 / SNS탭 / 공개범위 설정 UI는 **v0.9 필수 예정 기능**이지만 아직 현재 UI에는 본격 반영 전이다. 본 문서 §"다음 UI 작업 후보"에 별도 표기. 이 항목들은 v0.9 이후 로드맵이 아니라 v0.9 충족기준이다.
## 공통 레이아웃 (`components/Layout.tsx` + `index.css` 기준)
### 데스크탑/모바일 분기 breakpoint
- **Layout 자체**: `window.innerWidth >= 769` → 데스크탑 (좌측 사이드바), `<= 768` → 모바일 (하단 탭바) — 코드 기준 확인값
- **각 페이지 내부 분기**(`useMediaQuery`): `min-width: 1024px` → 데스크탑 (Dashboard 3-column, CoachNotes 3-column, History 2-column 등)
- **로그인 화면**(`index.css`): `max-width: 880px` → 모바일 (좌·우 split → stack)
### 데스크탑 레이아웃 구조 (≥ 769px)
- 사이드바: `position: sticky; top: 0; height: 100vh`, 펼침 240px / 접힘 64px (transition 0.22s, `localStorage("sb-collapsed")` 영속)
- 본문 main maxWidth: WIDE 라우트(`/history`, `/dashboard`, `/settings`, `/coach`)는 1600px, 그 외(`/log`)는 600px
- 본문 padding: WIDE는 `20px 40px 110px`, 그 외는 `20px 16px 110px`
- 데스크탑에서는 헤더 영역 숨김 (사이드바가 헤더 역할 흡수)
- **v0.9-stab UI polish (2026-05-23)** — Layout.tsx 안정화, dashboard 섹션 UI 안정화, F-7 최소 보완 동반
### 모바일 레이아웃 구조 (≤ 768px)
- 상단 sticky header (`14px 20px 10px` 패딩) — 로고 + AI 버튼(소유주) + 설정 버튼
- 본문: maxWidth 1920px / 600px, padding `20px 5% 110px` / `20px 16px 110px`
- 하단 fixed 탭바: 3개 항목(대시보드/기록/코치), I-0 이후 4탭(+ 프로필) 확장됨, `position: fixed; bottom: 0; z-index: 100`, `safe-area-inset-bottom` 대응
### 폰트 (소스코드 확인값)
- `--font-display: 'Bebas Neue', sans-serif` — 로고, 큰 숫자, 페이지 제목용
- `--font-body: 'Noto Sans KR', sans-serif` — 본문, 입력 필드용
- 기본 `font-size: 14px; line-height: 1.6`
### 컬러 토큰 (소스코드 확인값 — `index.css`)
- `--bg #0a0a0a` / `--bg2 #111111` / `--bg3 #1a1a1a` / `--border #2a2a2a` / `--border2 #333333`
- `--text #f0f0f0` / `--text2 #888888` / `--text3 #555555`
- `--accent #c8f135` / `--accent2 #a8d420`
- `--blue #378ADD` / `--coral #D85A30` / `--teal #1D9E75` / `--amber #EF9F27`
- 사이드바 전용(Layout.tsx 인라인): 배경 `#0d1018`, 활성 라임 `#c8f135`, 비활성 텍스트 `rgba(255,255,255,0.45)`, 계정 칩 `#d97757`
- AI 버튼(헤더용) 강조색 `#d97757`
- **F-7 라이트 모드**: `--bg #fafafa` / `--text #181818` — `data-theme="light"` 적용 시
### CSS 방식
- **Tailwind 미사용** (package.json 의존성 없음, tailwind.config.* 없음 — 코드 기준 확인값)
- 순수 CSS + CSS 변수 토큰화 + 컴포넌트 인라인 `style={{...}}` 위주
- 공용 클래스: `.card`, `.btn`, `.btn-primary`, `.btn-ghost`, `.label`, `.metric-card`, `.metric-value`, `.form-group`
- 로그인 화면만 별도 `.login-*` 클래스
## 사이드바 구조 (데스크탑, F-6c / F-9 갱신)
- 너비: 펼침 240px / 접힘 64px (transition `width 0.22s ease`)
- 로고 영역: 패딩 `14px 16px 12px`(펼침) / `14px 0 12px`(접힘), 러너 심볼 32×32px, 하단 1px 라임 dim 구분선
- nav 아이템 패딩: 펼침 `8px 10px` / 접힘 `10px 0`, gap `10px`, 아이콘 20px, 활성 시 배경 `rgba(200,241,53,0.1)` + 색 `#c8f135`
- **F-9 설정 아코디언**: '설정' 클릭 시 6 sub-items(피트니스 목표/개인 러닝/근력운동/개인 메모/계정 설정/수정 로그) 펼침, URL hash 라우팅(`#goals`/`#account`/`#changelog` 등). collapsed 모드는 단일 아이콘.
- 하단 AI 라임 버튼: `#c8f135` 배경 + `#141720` 텍스트, 접힘 시 ✦ 단일 글리프
- 계정 행: 26×26px 원형 칩(orange `#d97757`)
- 토글 버튼: 펼침 시 우측 정렬 ◀, 접힘 시 중앙 정렬 ▶
## 하단 탭바 구조 (모바일, I-0 확장 반영)
- 위치: `fixed; bottom: 0; left: 0; right: 0`, 배경 `var(--bg2)`, top 보더 1px
- **항목**: 대시보드 / 기록 / 코치 / **프로필**(I-0 추가, 2026-05-22) — 4탭
- 설정은 상단 헤더 우측 버튼으로 별도 진입
- 아이콘: 인라인 SVG (`DashboardIcon`, `HistoryIcon`, `CoachIcon`, 프로필 아이콘), `fill="currentColor"`
- 활성 색 `#d97757`, 비활성 색 `#c8f135`
- 활성/비활성 사이즈: 활성 32px / 비활성 28px, 텍스트 활성 13px·700 / 비활성 11px·400
- safe-area-inset-bottom 패딩 적용
## 페이지별 레이아웃 구조
### 대시보드 (`/dashboard`) — v0.9-stab UI polish
- 데스크탑(≥1024px): 3-column grid (체성분/러닝/근력), gap 16px
- 모바일(<1024px): 단일 컬럼 stack + 우측 fixed 세로 스크롤 점프 nav (`position: fixed; right: 10px; top: 50%`, `writing-mode: vertical-rl`)
- 우측 상단 [AI에게…] 버튼 (데모 한정)
- max-width 1000~1200 정렬 (F-6d 후속 polish 누적)
### 기록·히스토리 (`/history`)
- 상단: SummaryBrief (기간 토글 + 혼합 차트 + 키워드 분석)
- 중단: 탭(체성분/러닝/근력), 검색·정렬·기간 필터, 보기 모드 토글(달력/큰썸네일/**주간보기**(러닝 탭 전용)/한 줄 자세히) — 주간보기 2026-05-30 신설
- 본문: 선택된 보기 모드별 카드 그리드 또는 행 리스트
- 데스크탑 달력 컨테이너 폭 37.5%
- 상세박스: 카드 위 클릭/롱탭 시 인라인 디테일 영역 토글
### 코치노트 (`/coach`)
- 데스크탑(≥1024px) 3-column: 좌 시각화 카드 / 중 텍스트 브리프(스크롤) + 발행시각 / 우 지침 + 액션 + 신규 노트 입력
- 모바일: 1열 stack
- E-6 Markdown 렌더링: h2 헤더, paragraph, code 블록 분리
### 기록 입력 (`/log`) — 기록 UX 개선 후 흐름
- main maxWidth 600px (단일 컬럼)
- 상단: 페이지 제목 + 우측 닫기(×) 버튼
- 하단: 3-탭 가로 토글(체성분/러닝/근력, `flex: 1` 균등) — 활성 탭 라임 배경
- 본문: 선택된 탭의 `.card` 폼. `form-group` × N + 우측 자동 계산 readonly 카드(체지방률, BMR, 페이스, 속도, 볼륨)
- 근력 탭: 운동 행 카드(`var(--bg3)` 배경, 1px 보더), 카테고리/종목 드롭다운 2단계, 세트 리스트, `+ 세트 추가`, `+ 운동 추가`(점선 보더)
- **(v0.9 H-1/H-2) OCR 진입 버튼**: 본문 영역 상단에 `📷 OCR로 불러오기` 라임 버튼 (`src/pages/LogEntry.tsx:527`) → OcrImportModal 오픈
- **(v0.9-rec) 저장 후 흐름**: 저장 성공 시 PostSaveDialog 노출
	- primary: "({현재 유형}) 계속 기록" — 폼 reset 후 같은 유형 입력 (러닝/근력은 최근 shoe/run_type/label 디폴트 유지)
	- secondary: "기록 보기" → `/history?tab={kind}` 이동
	- tertiary: "기록 완료 (닫기)" — Dialog 닫기만
### OCR 자동기록 모달 (`src/components/ocr/OcrImportModal.tsx`) — v0.9 H-1/H-2 신규
**모달 컨테이너**
- Overlay: `position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 320; display: flex; align-items: flex-start; justify-content: center; padding: 16px; overflow-y: auto`
- Dialog: `background: var(--bg2); border: 1px solid var(--border); border-radius: 12px; max-width: 560px; width: 100%; padding: 20px; margin: 24px 0; display: flex; flex-direction: column; gap: 14px`
- **데스크탑 1440px 기준**: 모달 540px(560 max-width - margin 영향) 폭으로 화면 중앙 정렬 (overlay flex centering, overflow-auto)
- **모바일 390px 기준**: 모달이 viewport 폭에 맞춰 축소 (max-width 560보다 viewport가 작으므로 좌우 padding 16px 제외 폭). overlay `overflow-y: auto` + dialog `margin: 24px 0`으로 **세로 스크롤 대응**, 모달 내부 콘텐츠도 길어지면 페이지 스크롤 가능
**모달 내부 구조 (코드 기준)**
1. 상단 헤더: 좌측 "OCR로 불러오기" (Bebas Neue 18px, `color: var(--accent)`), 우측 × 버튼
2. 안내문(`fontSize 12px, color var(--text3)`): "스크린샷에서 기록 후보를 추출합니다. ... 적용 후 기존 저장 버튼으로 최종 저장하세요."
3. **단계 1. 이미지 업로드**:
	- `<input type="file" accept="image/*">` (padding 7px 8px)
	- 2-column grid: 좌 앱 힌트 드롭다운(`<select>` 8종 옵션), 우 [OCR 실행] 버튼 (라임 또는 비활성 회색)
4. 처리 중: 진행률 텍스트 (`{status} ({progress*100}%)`)
5. 에러: 빨강 메시지 + [다시 시도] 버튼
6. **OCR 원문 토글**: `▶/▼ OCR 원문 펼치기/접기 ({lines.length}줄)` → 펼치면 `<pre>`로 원문 렌더 (최대 220px 스크롤)
7. **단계 2. 기록 유형 선택**: 3-탭 (체성분/러닝/근력) — 추정 유형 자동 활성, 사용자가 수동 변경 가능. "추정 유형: {유형}" + ● 확인 필요 마크
8. **단계 3. 후보 보정**:
	- 체성분: 날짜 / 체중·골격근 / 체지방량(역산 가능)·체지방률(참고) / BMR(참고) / 프로젝트명 후보(수동 확정) / 메모
	- 러닝: 날짜 / 거리 / 소요시간(분·초) / 평균 페이스(참고·자동계산) / 평균·최대 심박·칼로리·런타입(수동 매칭) / 메모
	- 근력: 날짜 / 구분(루틴명 후보) — v0.9.1에서는 운동 구성 자동 적용 보류 안내
	- 각 필드 헤더에 ● 확인 필요(`color: #E2A14B`) 마크, hover 시 reason tooltip
9. 액션: [취소] (회색) / [{유형} 폼에 적용] (라임, 우측 flex 2)
10. 적용 후 모달 닫고 폼 상태 초기화 (200ms 후 reset)
### 설정 (`/settings`) — F-9 통합 반영
- 데스크탑(≥1024px): **좌측 aside 제거** (F-9), 사이드바 '설정' 아코디언으로 통합
- 메인 영역: 선택된 섹션 카드만 노출
- URL `/settings#goals|running|strength|memo|account|changelog`
- 모바일: 풀스크린 메뉴(햄버거) → 섹션 선택 후 단일 컬럼 카드 (햄버거는 유지)
### 프로필 (`/profile`, I-0 더미)
- 단순 안내 카드 — "프로필 기능은 준비 중입니다"
- PROFILE h1 font-weight 800 (현재 잔여 polish 후보)
- 본 개발은 v0.9 필수 충족기준 "작업 7. 프로필 폼 개발"
### 로그인 (`LoginPage.tsx`)
- 데스크탑(>880px): 좌 login-brand / 우 login-panel (max-width 380px, padding 32px 28px)
- 모바일(<880px): grid 1열 stack, 기능 리스트·푸터 `display: none`
- 배경: 좌상단 라임 radial + 우하단 블루 radial + `var(--bg)`
## 컴포넌트 구조 트리 (2026-05-23 갱신)
```javascript
App (Router)
├─ SplashScreen (1.2s + 0.5s fade)
├─ AuthCallbackPage (단독, /auth/callback)
├─ GuestRouter  ← 2026.05.23 신규
│  └─ LoginPage → MasterLoginForm
└─ AppRouter
   └─ Layout
      ├─ sidebar (데스크탑) [로고 + nav 3개 + 설정 아코디언(F-9 6 sub) + AI 버튼(소유주) + 계정 행 + 토글]
      ├─ header (모바일) [logo + AI(소유주) + 설정]
      ├─ main → <Outlet />
      │   ├─ Dashboard [Body/Running/Strength Section + AISendButton(데모)]
      │   ├─ LogEntry
      │   │  ├─ TimeInput / ConfirmDialog / NotifyDialog / DemoBlockModal
      │   │  ├─ PostSaveDialog ← 2026.05.23 신규
      │   │  └─ OcrImportModal ← 2026.05.23 신규
      │   ├─ History [SummaryBrief + ConfirmDialog/NotifyDialog/TypedConfirmDialog + DateRangePicker]
      │   ├─ CoachNotes [자체 시각화 + MarkdownBriefRenderer]
      │   ├─ Profile (I-0 더미)
      │   ├─ Settings [ColorPicker + Modal 3종 + ChangeLog]
      │   └─ Settings/ChangeLog
      ├─ bottomTabBar (모바일) [4탭: 대시보드/기록/코치/프로필]
      └─ NotifyDialog (AI 복사 결과)
```
## v0.9 필수 예정 기능 — 다음 UI 작업 후보
> 🎯 (yellow_bg 콜아웃)
> 아래 UI는 **v0.9 필수 충족기준**이며 현재 본격 반영 전이다. **v0.9 이후 로드맵이 아니다.** 작업 시점·우선순위는 [달록 v0.9(클로즈베타버전) 완성 충족기준 §5](#/doc/spec-01) 참조.

| 분류 | 신규 UI 작업 | 작업번호 |
|---|---|---|
| 프로필 | 프로필 사진 커스텀 / 자기소개 / 팔로우/친구추가 / 공개 프로필 페이지 / 공개 범위 설정 UI (체성분·러닝·근력 각각) / 모바일 드래그 정렬 / 데스크탑 2 × N 자유 배치 | 7 |
| 타임라인 | 한 줄 코멘트 입력 UI / 기록 첨부 모달(단일/범위/단위/키워드/프로젝트) / 내 프로필 타임라인 카드 | 8 |
| SNS | SNS탭 (모바일 하단 5탭 확장 또는 별도 진입점) / 타임라인·스레드 카드 / 최신순 피드 / 게시글 작성자 프로필 진입 | 9 |
| 로그인 | 이메일 컨펌 화면 / 카카오·네이버 OAuth 버튼 | 4 |
| CS·약관 | 개인정보처리동의 모달·페이지 / 이용약관 페이지 / 데이터 수정·삭제 요청 UI | 5 |
| 환경 | 운영/테스트 분리에 따른 빌드 표기 (이제 더미) | 3 |

## MCP 브라우징 검증 상태
> 📷 (gray_bg 콜아웃)
> **현재 시각 검증 상태** — 마지막 MCP 브라우징 검증은 [MCP브라우징 보고서 v3](#/doc/research-01)(2026-05-22 최종 polish 검수)이며, **2026-05-23 본 세션의 v0.9-stab UI polish · OCR MVP · PostSaveDialog 도입 이후 시각 검증은 미실시**다. 본 문서는 코드 기준 확인값만 갱신했으며, **MCP브라우징 보고서 최신화는 다음 업무일에 별도 작업**으로 진행한다.
## 운영 규칙
UI시각화 내용 설명서 최신화 흐름:
```javascript
Claude.ai 업데이트 필요 판단
  → 사용자 승인
  → Claude.ai 프롬프트 산출
  → 사용자가 Claude Code에 전달
  → Claude Code 수행
```
Claude Code는 임의로 자동 업데이트하지 않는다.
본문 교체 시 보관 규칙: 기존 본문은 하위 페이지 `UI시각화 내용 설명서_yymmdd_n` 형식으로 보관 후 교체.
## 이전버전 (보관)
- 📄 [UI시각화 내용 설명서_260523_1](#/doc/archive-guide-01) — versions/UI시각화-내용-설명서_v_260523_1.md
- 📄 [UI시각화 내용 설명서_260530_1](#/doc/archive-guide-02) — 2026-05-30 주간 마일리지 반영 직전 본문 스냅샷 — versions/UI시각화-내용-설명서_v_260530_1.md
---
## 갱신 부록 A — 셀 입력 모드 UI (2026-05-26)
본 부록은 2026-05-26 본 컨텍스트에서 추가·확정된 UI를 본문 §"페이지별 레이아웃 구조 / 기록·히스토리" / §"컴포넌트 구조 트리" 항목에 합쳐서 읽기 위한 보강 섹션. 본문 교체 없이 부록 형태 추가. 시각 검증은 사용자가 직접 수행(데스크탑·모바일 양쪽, 4단계 fix 반영).
### A-1. 한줄 자세히 → 셀 입력 모드 진화
**위치:** `/history` 보기 모드 토글 중 "한 줄 자세히" 선택 시 (체성분·러닝 탭만). 근력 탭은 기존 카드 유지 (Phase 5 세컨드 페이즈 보류).
**컨테이너:**
- 액션바 1행 (좌측 [수정/저장/취소/+새행/선택삭제 + 컬럼 popover 트리거] | 우측 [선택 N · 변경 M + 메시지])
- 페이지네이션 1행 ([10/30/50 행 버튼 + N-M / total건] | [‹ 페이지 윈도우 ›])
- 그리드 컨테이너 (`overflowX: 'auto'`, border 1px var(--border2), borderRadius 6px)
	- 헤더(grid display, sticky top, bg var(--bg2), 라벨 + 단위 + 필터 ▽ 트리거)
	- 데이터 행 N개
- 페이지네이션 1행 (하단 재노출)
**그리드 컬럼 너비 (체성분 8컬럼):**
```javascript
date(110px) · project(1.1fr) · weight_kg(0.95fr) · muscle_kg(0.95fr) ·
fat_kg(0.95fr) · fat_pct(0.85fr, computed) · bmr(0.95fr, computed) · note(1.5fr)
```
편집 모드 시 좌측 28px 체크박스 컬럼 추가. 최소 그리드 폭 720px (편집 모드 780px), 그 이하는 가로 스크롤.
**그리드 컬럼 너비 (러닝 14컬럼):**
```javascript
date(105px) · time(120px) · distance_km(75px) · run_type(85px) · routine(105px) ·
shoe(105px) · duration(85px) · pace(75px, computed) · speed(75px, computed) ·
avg_bpm(95px) · max_bpm(95px) · cadence_spm(85px) · calories(80px) · is_record(75px)
```
최소 그리드 폭 1180px (편집 모드 1200px).
**셀 스타일 (cellBase):**
- 체성분: padding `6px 6px`, minHeight 36px, fontSize 12px
- 러닝: padding `6px 5px`, minHeight 36px, fontSize 11.5px (컬럼 14개 폭 조정)
- alignItems: center, justifyContent: center (메모는 좌측), whiteSpace: nowrap + ellipsis
- borderRight 1px var(--border2), borderBottom 1px (마지막 컬럼은 borderRight none — `getCellStyle(col, isLast)` 헬퍼)
- 자동계산 셀 색상: `#d4e8a0` 연 라임 (이전 var(--text3) 회색 → 가독성 ↑)
**행 배경:**
- 일반: transparent
- 선택됨: `rgba(200, 241, 53, 0.03)`
- 신규(미저장): `rgba(200, 241, 53, 0.05)`
**액션바 버튼 스타일:**
- 기본: `padding 5px 10px`, bg var(--bg3), border 1px var(--border2), 라운드 6px, color var(--text2)
- 강조(수정/모두저장): color var(--accent), borderColor var(--accent)
- 위험(선택 삭제): color #E24B4A, disabled 시 opacity 0.4
### A-2. 컬럼 표시·순서 popover (ColumnConfigDropdown)
**위치:** 액션바의 트리거 버튼 "컬럼 (visible/total) ⌄" 클릭 시.
**스타일:** fixed center overlay (full screen 다크 backdrop + 가운데 모달).
- overlay: `position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 320`
- dialog: bg var(--bg2), border 1px, radius 10px, padding 14px, width `min(340px, calc(100vw - 32px))`, maxHeight `calc(100vh - 40px)`, overflowY auto
- 헤더: 좌측 "컬럼 표시·순서" + 우측 [초기화] [닫기 ×]
- 행: **grid 레이아웃 (3·4차 fix)** `gridTemplateColumns: 'auto 1fr auto auto'` — 체크박스 / 라벨(1fr) / ↑ / ↓
- 라벨 span: minWidth 0 + whiteSpace nowrap + overflow hidden + textOverflow ellipsis + textAlign left
- 화살표: width 26 height 26, opacity 0.3 (disabled)
**Esc 닫힘, overlay 외부 클릭 닫힘.**
### A-3. 컬럼 필터 popover (ColumnFilterPopover, MS 엑셀 패턴)
**위치:** 컬럼헤더 라벨 옆 ▽(비활성) / ▼(활성, 라임) 아이콘 클릭 시.
**스타일:** ColumnConfigDropdown과 동일한 fixed center overlay 패턴.
- width `min(360px, calc(100vw - 32px))`, padding 14px, gap 10px (column flex)
- 헤더: 좌측 "{컬럼명} 필터" (accent 색) + 우측 "선택수/총수"
- 검색 input (값 검색…)
- 전체선택 / 전체해제 링크 버튼
- 체크박스 list (grid `auto 1fr` 패턴) — overflow Y, maxHeight 40vh
- 하단: 좌측 [필터 해제] (활성 필터 시) + 우측 [취소] [적용]
**필터 가능 컬럼 (`filterable: true` ColumnDef):**
- 체성분: 프로젝트
- 러닝: 런타입 · 루틴 · 신발 · 거리반영
**활성 필터 AND 결합.** 적용 누르기 전까지 변경 미반영 (tmp state).
### A-4. 컬럼별 입력 UI (편집 모드)
- 날짜: `<input type="date">`
- 프로젝트 / 런타입 / 루틴 / 신발: `<select>` 드롭다운
- 숫자(체중·골격근·체지방·거리·심박·케이던스·칼로리): `<input type="number" step="0.1">` (정수 필드는 step 미지정)
- 시간(러닝 운동 시작 시각): 한 셀에 [AM/PM select 42px] [시 input 34px] [분 input 34px] 가로 배치, flex 0 0 auto 명시 (2차 fix로 wrap 방지)
- 소요시간(러닝): `<input type="text" placeholder="M:SS">` — "M:SS" 또는 "H:MM:SS" 파싱
- 거리반영(러닝 is_record): `<input type="checkbox">`
- 메모: `<input type="text">` (텍스트 좌측 정렬)
- 자동계산(체지방률·BMR·페이스·속도): `<div>` 읽기 전용, 연 라임 `#d4e8a0`
### A-5. 페이지네이션 UI (CellModePagination)
- 좌측: [10행] [30행] [50행] 토글 + "N–M / total건"
- 우측: [‹] + 페이지 윈도우 (현재 ±2, 처음·끝 단축, '…' 표시) + [›]
- 활성 페이지: bg var(--bg), color var(--accent), borderColor var(--accent), fontWeight 600
- 비활성: bg var(--bg3), color var(--text2)
### A-6. Settings 개인 러닝 신설 UI
- **루틴(프로젝트) 목록 카드** — 이름/목표/메모/기본 런타입/활성 토글
	- 활성 토글 비활성 시 카드 opacity 0.55
	- "+ 새 루틴" 버튼 (펼침 폼) — 이름·목표·기본 런타입·메모·활성 체크박스
- **신발 카드 갱신 — 누적 마일리지 병기**: 신발 이름 옆에 "· N.N km" 작은 회색 텍스트. 새 신발은 "0.0 km" 명시.
### A-7. 대시보드 RUNNING 신발 차트 신설
- 위치: 월별 마일리지 차트 다음
- 차트: 가로 막대 (indexAxis: 'y'), Chart.js Bar
- 라임 색 `#c8f135` + borderRadius 4 + barThickness 14
- 헤더: 좌 "신발별 누적 마일리지" + 우 "마일리지 포함 기록 기준 · N종"
- 동적 높이: `Math.max(80, 신발수 * 24 + 30)`px
### A-8. 컬럼명·단위 조정 (2026-05-26 a772bb5)
| 컬럼 ID | 이전 라벨 | 새 라벨 | 단위 |
|---|---|---|---|
| `avg_bpm` | 평심 (60px) | **평균심박** (95px) | **bpm** |
| `max_bpm` | 최심 (60px) | **최대심박** (95px) | **bpm** |
| `is_record` | 마일리지 (70px) | **거리반영** (75px) | — |

셀 값에 단위 표시: "138 bpm" / "158 bpm". 헤더 자동 표기: "평균심박 (bpm)".
### A-9. 컴포넌트 구조 트리 추가분
```javascript
History
├─ CellModeBody  ← 2026.05.26 신규 (체성분 셀 모드)
│  ├─ CellModePagination
│  ├─ ColumnConfigDropdown
│  ├─ ColumnFilterPopover
│  ├─ ConfirmDialog / NotifyDialog
│  └─ (자세히 모달은 부모 History의 setDetailBody/setDetailRun 재사용)
└─ CellModeRunning  ← 2026.05.26 신규 (러닝 셀 모드, 14컬럼)
   └─ (동일 + RunRoutine select 드롭다운)

Settings
└─ 개인 러닝 ─ 신발 목록(마일리지 병기) + 루틴(프로젝트) CRUD 카드 ← 2026.05.26 추가

Dashboard
└─ RunningSection ─ 신발별 누적 마일리지 가로 막대 차트 ← 2026.05.26 추가
```
### A-10. 4단계 fix 이력 (사용자 시각검증 대응)
| 차수 | 커밋 | 내용 |
|---|---|---|
| Phase 1~4 본구현 | `c6b6090` | 체성분·러닝 셀 모드 본체 |
| 1차 fix | `a453a0c` | 자세히 모달·삭제·UI 마감·정렬·컬럼 커스텀 9건 |
| 2차 fix | `78b027b` | popover 모바일 잘림·셀 시간 width·삭제 NotifyDialog + 컬럼 필터·신발 차트·신발 마일리지 |
| 3차 fix | `737c460` | popover 라벨 CJK 세로 wrap → span nowrap+ellipsis+minWidth:0 |
| 4차 fix | `9a14d3f` | popover row flex → grid 전환 (label 콘텐츠 압축 버그 해소) |
| 컬럼명 조정 | `a772bb5` | 평심/최심/마일리지 → 평균심박/최대심박/거리반영 + bpm 단위 |

### A-11. MCP 브라우징 검증 상태
- 본 셀 입력 모드 UI는 **MCP 브라우징 검증 미수행**. 사용자가 직접 모바일(390)·데스크탑(1440) 시각 검증 수행 (1·2·3·4차 fix 모두 사용자 검증 통과).
- 정식 MCP 브라우징 보고서 v4 발행은 v0.9 충족기준 작업 2 RLS 해소 + 근력 Phase 5 완료 후로 보류 권장.

- 📄 [UI시각화 내용 설명서_260530_1](#/doc/archive-guide-02) (이전버전 보관 — 본문 §"이전버전" 참조)
---
## 갱신 부록 B — 주간 마일리지 UI (2026-05-30)
본 부록은 2026-05-30 추가된 주간 마일리지 UI를 §"페이지별 레이아웃 구조" / §"컴포넌트 구조 트리"에 합쳐 읽기 위한 보강. (PR #17, main `d51d7f4`)

### B-1. 대시보드 RUNNING — 주간 마일리지 표 + 재배치
- 위치: RUNNING 섹션 최하단. 섹션 순서: 상단 통계표 → 추이(30회) → 신발별 누적 → 월별(3개월) → 주간 마일리지(신규)
- 표(`.wmt-*` 클래스, 토큰 기반·다크/라이트 자동): 가로 스크롤 wrap + sticky 헤더. 11컬럼 우측정렬(주간 컬럼만 좌측)
- 현재주 행: 좌측 3px accent 인디케이터 + 라임 배경 `rgba(200,241,53,0.06)` + '현재' 배지(accent 배경·`--bg` 글자)
- 행 수 5/10/30 토글 + 페이지네이션(`.cmpg-*` CellModePagination)
- 신규 CSS: `index.css` `.wmt`/`.wmt-scroll`/`.wmt-table`/`.wmt-th`/`.wmt-td`/`.wmt-row--current`/`.wmt-badge`

### B-2. 기록>러닝 — 주간보기 토글
- 보기 모드 토글: 달력 / 큰썸네일 / **주간보기**(러닝 탭만 노출) / 한 줄 자세히
- 주간보기 본문은 대시보드와 동일한 WeeklyMileageTable 렌더

### B-3. 컴포넌트 구조 트리 추가분
```javascript
Dashboard
└─ RunningSection ─ WeeklyMileageTable ← 2026.05.30 신규 (RUNNING 최하단)

History
└─ (viewMode='weekly', 러닝 탭) ─ WeeklyMileageTable ← 2026.05.30 신규 공용 재사용

WeeklyMileageTable
└─ CellModePagination (재사용, options=[5,10,30])
```

### B-4. 관련 작업보고
- 260530_주간 마일리지 집계표 + 기록 러닝 주간보기 신설
---
## 갱신 부록 C — SNS 첨부 UI + 엑셀 러닝·근력 UI (2026-05-30)
본 부록은 같은 날 후속 작업(PR #18)을 §"페이지별 레이아웃 구조"에 합쳐 읽기 위한 보강. (오늘 시작 전 원본은 `_260530_1` 보관본에 보존)

### C-1. SNS 게시 작성 모달 — 운동 기록 첨부 picker
- 공개범위 아래 "운동 기록 첨부 (선택)" 영역 신설
- 미선택: 3-토글(🏃 러닝 / 📊 체성분 / 💪 근력) → 클릭 시 최근 기록 목록
- 목록: `.social-cand-list`(최대 180px 스크롤), 각 항목 `.social-cand-item`(날짜 + 요약, hover accent 테두리)
- 선택됨: 기존 AttachmentPreview 미리보기 + [첨부 취소]
- 신규 CSS: `.social-attach-picker`/`.social-cand-list`/`.social-cand-item`/`.social-cand-date`/`.social-cand-sum`/`.social-attach-picked`

### C-2. 엑셀 편집기 — 러닝·근력 탭 (`/history/excel?tab=running|strength`)
- 공용 `.hist-ex__*` 그리드 스타일 재사용(ExcelGrid 엔진). 탭바 3탭(체성분·러닝·근력) 활성 전환
- **러닝**: 11개 입력 컬럼 + 페이스·속도 자동계산 컬럼(연 라임). 신발·런타입 select, 소요시간 M:SS 텍스트, 거리반영 포함/제외 select
- **근력**: 1행=1세트 평탄 그리드. 날짜·구분·운동·세트# 읽기전용(편집 진입 차단) + 반복·중량·추가중량·추가사용 편집 + 볼륨 자동계산. 행 추가 버튼 숨김(allowAdd=false)
- 키보드 UX(↑↓←→·Enter/F2·Space·Del·Ctrl+S)·모바일 가드·저장/이탈 컨펌 모달 모두 체성분과 동일 엔진 공유