---
title: "UI시각화 내용 설명서_260523_1"
notion_id: "36922962086881878d98d4fe0b472428"
notion_url: "https://app.notion.com/p/36922962086881878d98d4fe0b472428"
category: "guide-version"
parent: "UI시각화 내용 설명서"
updated: "2026-05-23"
priority: "Low"
purpose: "2026-05-23 교체 이전(최종 260520) UI시각화 내용 설명서 본문 보관본 (초기 레이아웃·토큰 요약)"
---

> 이 페이지는 2026-05-23 교체 이전의 UI시각화 내용 설명서 본문 보관본이다 (최종 버전: 260520). 최신판은 상위 "UI시각화 내용 설명서" 페이지를 참조한다.
---
# 달록(PaceLog) UI시각화 내용 설명서
작성일: 260520 | 기준: 소스코드 직접 파악 (Claude Code)
본 문서의 수치·구조는 모두 해당 시점의 소스코드(`src/`)에서 확인된 값이다. 추정값은 사용하지 않으며, 소스코드 기준 확인값으로 명시.
## 공통 레이아웃 (Layout.tsx + index.css)
### 데스크탑/모바일 분기 breakpoint
- **Layout 자체**: `window.innerWidth >= 769` → 데스크탑, `<= 768` → 모바일
- **페이지 내부 분기(useMediaQuery)**: `min-width: 1024px` → 데스크탑 (Dashboard 3-column, CoachNotes 3-column 등)
- **로그인 화면(index.css)**: `max-width: 880px` → 모바일 (split → stack)
### 데스크탑 레이아웃 구조 (≥ 769px)
- 사이드바 `position: sticky; top: 0; height: 100vh`
- 사이드바 너비: 펼침 240px / 접힘 64px (`localStorage("sb-collapsed")` 영속)
- 본문 main maxWidth: WIDE 라우트 1600px, 그 외(/log) 600px
- 데스크탑에서는 헤더 영역 숨김 (사이드바가 헤더 역할 흡수)
### 모바일 레이아웃 구조 (≤ 768px)
- 상단 sticky header + 본문 + fixed 하단 탭바
- 탭바: 3개(대시보드/기록/코치) — 설정은 상단 banner link
### 컬러 토큰 (index.css :root)
- --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
- 사이드바 전용: 배경 #0d1018, 활성 #c8f135, 비활성 rgba(255,255,255,0.45), 계정 칩 #d97757
- AI 버튼(헤더용) 강조색 #d97757
### 폰트
- --font-display: 'Bebas Neue' — 로고/숫자/제목
- --font-body: 'Noto Sans KR' — 본문/입력
- 본문 기본 14px / line-height 1.6
### CSS 방식
- Tailwind 미사용 — package.json에 의존 없음
- 순수 CSS + CSS 변수 토큰화
- 공용 클래스: .card / .btn / .btn-primary / .btn-ghost / .label / .metric-card / .metric-value / .form-group
## 사이드바 구조 (데스크탑, F-6c)
- 너비: 펼침 240px / 접힘 64px (transition width 0.22s ease)
- 로고 영역: 패딩 14px 16px 12px, 러너 심볼 32×32px, 하단 1px 라임 dim 구분선
- nav 아이템 패딩: 펼침 8px 10px / 접힘 10px 0, gap 10px, 아이콘 20px, 활성시 배경 rgba(200,241,53,0.1) + 색 #c8f135
- 하단 버튼: AI 라임 버튼 #c8f135 배경 + #141720 텍스트
- 계정 행: 26×26px 원형 칩(orange #d97757)
- 토글 버튼: 펼침 ◀ 우측정렬 / 접힘 ▶ 중앙정렬
## 하단 탭바 (모바일)
- fixed bottom 0, 배경 var(--bg2), top border 1px
- 3개 항목 (대시보드/기록/코치)
- 아이콘 방식: 인라인 SVG, fill="currentColor"
- 활성 색 #d97757, 비활성 #c8f135
- 활성/비활성 사이즈분기: 활성 32px / 비활성 28px, 텍스트 활성 13px/700 / 비활성 11px/400
- safe-area-inset-bottom 패딩 적용
## 페이지별 레이아웃 구조
- 대시보드(/dashboard) — 데스크탑 3-column / 모바일 stack + 우측 fixed 세로 nav
- 기록·히스토리(/history) — 상단 SummaryBrief + 탭/필터/뷰 모드 토글, 데스크탑 달력 컨테이너 폭 37.5%
- 코치노트(/coach) — 데스크탑 3-column (좌시각화 / 중텍스트 / 우지침+액션)
- 기록 입력(/log) — main maxWidth 600px, 상단 제목 + 닫기(×), 하단 3-탭 가로 토글
- 설정(/settings) — 데스크탑 좌측 메뉴(그룹 A 4 + 구분선 + 그룹 B 2) + 우측 DP
- 로그인(LoginPage) — 데스크탑 split, 모바일 stack (max-width 880px 이하)
## 운영 규칙
UI시각화 설명서 최신화 흐름:
```javascript
Claude.ai 업데이트 필요 판단 → 사용자 승인 → Claude.ai 프롬프트 산출 → 사용자가 Claude Code에 전달 → Claude Code 수행
```
Claude Code는 임의로 자동 업데이트하지 않는다.
## 이전버전
(초기 생성 — 이전버전 없음)
---
> 상세 ASCII 레이아웃 다이어그램·컬러토큰 표·컴포넌트 의존 트리 원본은 2026-05-20 작성 시점 `D:\dallog\dallog_git` 소스코드 기준이며, 필요 시 그 시점의 git 커밋을 참조한다. 본 보관 페이지는 임의 수정하지 않는다.