---
title: "기능설명서_260523_1"
notion_id: "369229620868810b9054c65be30d6008"
notion_url: "https://app.notion.com/p/369229620868810b9054c65be30d6008"
category: "guide-version"
parent: "기능설명서"
updated: "2026-05-23"
priority: "Low"
purpose: "2026-05-23 교체 이전(최종 260520) 기능설명서 본문 보관본 (단일 사용자 PWA 기준 초기 기능 목록)"
---

> 이 페이지는 2026-05-23 교체 이전의 기능설명서 본문 보관본이다 (최종 버전: 260520). 최신판은 상위 "기능설명서" 페이지를 참조한다.
---
# 달록(PaceLog) 기능설명서
작성일: 260520 | 기준: 소스코드 직접 파악 (Claude Code)
달록(PaceLog)은 러닝·체성분·근력 통합 로그 + AI 코치 브리프를 제공하는 React + Supabase 단일 사용자 PWA이다. 라우터는 `react-router-dom`이며, 모든 페이지가 공통 `Layout`(데스크탑 좌측 사이드바 / 모바일 하단 탭바) 안에서 렌더링된다.
## 페이지별 기능 목록
### 대시보드 (`src/pages/Dashboard.tsx`, 경로: `/dashboard`)
- **3-섹션 통합 요약** — 체성분/러닝/근력 세 섹션을 하나의 화면에 노출
- **최근 데이터 로드** — 마운트 시 body_records 180건, running_logs 180건, strength_logs 60건 + 관련 테이블 일괄 로드
- **AI에게 보내기 버튼** — 데모 모드일 때만 노출(`AISendButton`)
- **빈 상태 안내** — 모든 기록이 0건이면 CTA로 `/log` 이동
- **관련 컴포넌트** — BodySection, RunningSection, StrengthSection, AISendButton, chart.js
- **Supabase 연결** — body_records, running_logs, strength_logs, strength_exercises, strength_sets, exercise_configs
### 기록·히스토리 (`src/pages/History.tsx`, 경로: `/history`)
- **3-탭 히스토리** — `?tab=body|running|strength` URL 동기화, 기본 탭은 러닝
- **3-뷰 모드** — 달력 / 큰 썸네일 / 한 줄 행, `localStorage("history_view_mode")` 영속
- **체성분·러닝·근력 상세** — 증감수치, 프로젝트 연동, 카테고리별 볼륨
- **편집·삭제** — 인라인 편집 + ConfirmDialog/NotifyDialog/TypedConfirmDialog
- **다중 선택 일괄 삭제** — 우클릭/롱탭 컨텍스트 메뉴
- **검색·정렬·기간** — 키워드 검색, 날짜/체중/거리 정렬, DateRangePicker
- **저장 액션** — 근력 운동 행을 저장된 운동/루틴(app_settings JSON)으로 등록
- **기록하기 버튼** — `/log?tab=...`로 신규 입력
- **요약 브리프 통합** — SummaryBrief 컴포넌트
### 코치노트 (`src/pages/CoachNotes.tsx`, 경로: `/coach`)
- **데이터 기반 AI 브리프** — 최근 2주 데이터 + 개인 메모 + 이전 브리프를 컨텍스트로 Claude API 호출
- **시각화 카드** — 내일 훈련/영양/메뉴/주간 평가/코치 한마디 카드
- **수동 노트** — brief/review/milestone 카테고리별 색상 라벨
- **AI 브리프 지침 연동** — 계정설정 지침 4항목 프롬프트 주입
- **3-column 레이아웃(데스크탑)** — 좌시각화 / 중텍스트 / 우지침+액션
- **한국시간 시각 표기** — `yy-m-d AM/PM h:mm:ss`
### 기록 입력 (`src/pages/LogEntry.tsx`, 경로: `/log`)
- **3-탭 입력 폼** — 체성분/러닝/근력, `?tab=...`로 초기 탭
- **체성분** — 체지방률·BMR 자동 계산, 활성 프로젝트 자동 연동, recorded_at upsert
- **러닝** — 페이스·속도 자동 계산, TimeInput, 신발/런타입 드롭다운
- **근력** — 카테고리 → 종목 2단계 드롭다운, 카테고리별 볼륨 계산
- **저장된 루틴/운동 불러오기** — app_settings JSON
- **데모 모드 차단** — useDemoBlock + DemoBlockModal
- **저장 후 이동** — `/history?tab={kind}`로 자동 이동
### 근력운동 (`src/pages/StrengthLog.tsx`)
- **현 라우터에 미연결** — App.tsx <Routes>에 등록되지 않은 구버전 화면
- **단일 페이지 폼** — 날짜/구분/운동 행 구조, 카테고리·중량 계산 없음
### 설정 (`src/pages/Settings.tsx`, 경로: `/settings`)
좌측 메뉴(데스크탑) / 풀스크린 메뉴(모바일)로 6개 섹션 분기:
1. 피트니스 목표
2. 개인 러닝 설정
3. 근력운동
4. 개인 메모
5. 계정 설정
6. 수정 로그 (ChangeLog)
### 로그인 (`src/pages/LoginPage.tsx`)
- **데스크탑 split / 모바일 stack 레이아웃**
- **마스터 ID/PW 로그인 폼** — MasterLoginForm
- **Gmail OAuth 버튼** — signInWithGoogle
- **OAuth 콜백** — `/auth/callback`은 AuthCallbackPage
## 공통 기능
### 마스터 계정 로그인 (`lib/auth.ts`)
- `mster` + 고정 비밀번호 → `localStorage("dallog.masterSession")` = "1"
- Supabase 비의존 로컬 세션
- `master@dallog.internal` 가상 사용자
### Google OAuth 방식
- `supabase.auth.signInWithOAuth({ provider: 'google' })` → `/auth/callback` 리다이렉트
### 데모 잠금 시스템 (`lib/demo.ts`, `hooks/useDemoBlock.ts`)
- `VITE_IS_DEMO === 'true'`에서 인증 가드 우회 + submit 차단(DemoBlockModal) + AISendButton 노출
### AI에게 보내기 / AI 브리프 흐름
- buildAIHandoffMarkdown() — 체성분/러닝/근력 30일 + 최근 브리프 + 개인 메모 + 지침 직렬화
- buildLatestBriefMarkdown() — 최근 코칭 브리프 1건
- callClaude() / fetchBrief() — CF Workers 프록시 경유 Anthropic Messages API
## 데이터 흐름
### Supabase 연결 구조 (`lib/supabase.ts`)
- `@supabase/supabase-js`의 `createClient(url, anonKey)`
- 주요 테이블:
	- body_records / running_logs / coach_notes
	- shoe_configs, run_type_configs, exercise_configs
	- strength_logs → strength_exercises → strength_sets
	- app_settings (key/value JSON)
### 인증 흐름
```javascript
SplashScreen (1.2s)
  ↓
/auth/callback 진입?
  → Yes: AuthCallbackPage 직행
  → No:
    IS_DEMO?
      → Yes: AppRouter 직행
      → No:
        loading → "로딩 중..."
        isLoggedIn?
          → Yes: AppRouter
          → No: LoginPage
```
### CF Workers 프록시 흐름
```javascript
브라우저 (lib/claude.ts | lib/briefApi.ts)
  ↓ POST { model, max_tokens, messages }
CF Workers (dallog-brief-proxy.ccy4848.workers.dev)
  ↓ Anthropic API Key + CORS
Anthropic Messages API
```
## 운영 규칙
기능설명서 최신화 흐름:
```javascript
Claude.ai 업데이트 필요 판단
  → 사용자 승인
  → Claude.ai 프롬프트 산출
  → 사용자가 Claude Code에 전달
  → Claude Code 수행
```
Claude Code는 임의로 자동 업데이트하지 않는다.
## 이전버전
(초기 생성 — 이전버전 없음)