---
title: "📋 26-05-22_1-달록_핸드오프 (v3 검수→UI수정 컨텍스트)"
notion_id: "368229620868814b8c51f0747d1a102e"
notion_url: "https://app.notion.com/p/368229620868814b8c51f0747d1a102e"
category: "handoff"
parent: "핸드오프 (Claude.ai 컨텍스트 공유용)"
updated: "2026-05-22"
priority: "Medium"
purpose: "v3 MCP 브라우징 비교검수 리포트 결과 패키지 — P0/P1/P2 이슈 Action List + 권장 작업순서 + 검증 체크리스트"
---

본 핸드오프는 **검수 컨텍스트(2026-05-22)의 결과를 다음 UI 수정 컨텍스트에 그대로 전달**하기 위한 패키지이다. 코드 수정·git 작업 일절 없으며, 모든 조치는 다음 컨텍스트가 수행한다.
## 관련 링크
- 노션 검수 리포트: [260522_S-달록v3비교검수리포트](#/doc/workreport-53)
- 로컬 리포트: `docs/260522_v3_browsing_review.md`
- 로컬 핸드오프: `docs/260522_v3_handoff_to_ui_fix_context.md`
- 스크린샷: `docs/260522_v3_review_screenshots/` (17 PNG, desk-01~10 / mob-01~07)
---
## 1. 이번 검수 컨텍스트가 최초로 받은 프롬프트 요약
작업명: "v3 MCP 브라우징 비교검수 리포트 작성 (읽기/검수 전용 컨텍스트)"
**역할**:
1. Playwright MCP 브라우징 검수 (데스크탑+모바일, screenshot/console/network/redirect/layout/spacing/density/mobile overflow)
2. 배포본 [https://dallog.pages.dev](https://dallog.pages.dev) vs 목업 `D:\dallog\dallog_git\docs\dallog_mockup_v3fix5_260520\` (4 HTML)
3. v3 Markdown 리포트 작성
4. 다음 UI 수정 컨텍스트용 핸드오프 작성
5. 노션 업로드
**절대 금지**: 코드/CSS/build/git add/commit/push
**중점 검수 5 항목**:
1. Dashboard UI — spacing rhythm, density, chart compression, period selector, dashboard aesthetic
2. History 달력형 UI — 모바일 근력 셀 폭, calendar aesthetic, mobile stability
3. Coach 페이지 — 브리프 리스트 density, AI 관리툴화, **E-6 이후 JSON 코드블록 노출 검수** (`tomorrow_workout`/`distance_km`/`run_type`/`intensity`)
4. Settings 페이지 — giant expand panel, density, sidebar polish, 관리툴화
5. Layout/BI/Navigation — 좌상단 BI/logo 클릭 시 메인 이동, branding hierarchy, sidebar identity
**추가 검수**: C-6 수정로그 400, C-7 login redirect, F-6d dashboard 탭, F-6e strength-log redirect, F-7 theme toggle, F-8 strength summary fetch, I-0 profile 진입점
---
## 2. 브라우징 과정 요약
환경:
- Playwright MCP: navigate / resize / snapshot / click / take_screenshot / console_messages / network_requests / evaluate 사용 가능
- 0520과 달리 **screenshot + DOM + console + network 모두 동작** (시각 검증 가능해짐)
- 인증: master 세션 활성 상태로 자동 로그인
진행 흐름:
1. git status / git fetch — working tree에 untracked·staged 변경 다수 확인
2. 목업 4종 + 직전 리포트 읽기 — v3fix5 톤앤매너 베이스라인 확보
3. 데스크탑 1440×900 검수 (10 screenshot) — /dashboard 3 탭, /history 2 탭, /coach, /settings (3 메뉴), /profile
4. DOM/console/network 측정 — sidebar/main 박스, 탭 구조, 차트 크기, period selector 종류, 로고 클릭 가능성, Markdown/JSON 검출
5. 모바일 390×844 전환 + 7 screenshot — /dashboard, /history (strength 캘린더 21~92 비대칭 확정), /coach, /settings, /history body 캘린더 (48 균등)
6. 추가 검수 — /login 재진입 빈 화면, /strength-log 빈 라우트, 로고 클릭 불가, 테마 토글 위치, C-6 400 supabase 쿼리 캐처
7. 리포트 작성 → `docs/260522_v3_browsing_review.md`
---
## 3. 발견 이슈 Action List
### P0 — 긴급
#### A. C-6 수정 로그 400 (Supabase)
콘솔 에러 2건:
```javascript
GET https://lzlhbgnnnkrahrmnvooe.supabase.co/rest/v1/body_records
  ?select=recorded_at,weight_kg,updated_at&order=updated_at.desc&limit=30 → 400
GET https://lzlhbgnnnkrahrmnvooe.supabase.co/rest/v1/running_logs
  ?select=recorded_at,distance_km,updated_at&order=updated_at.desc&limit=30 → 400
```
원인 가설: `updated_at` 컬럼이 production DB에 없음. local에 untracked `migrations/2026-05-22_records_updated_at.sql` 존재.
권장 처리:
1. 마이그레이션 production 적용 (Supabase 대시보드 또는 CLI)
2. 또는 fetch 코드를 `order=recorded_at.desc`로 임시 fallback
검증: 적용 후 settings → 수정 로그 클릭 → 콘솔 0 에러, 로그 항목 ≥1건 노출
#### B. Coach 브리프 Markdown 렌더링 + JSON 분리
현 상태: `<div style="white-space: pre-wrap;">{raw text}</div>`
사용자 화면에 노출되는 raw 흔적:
- `## 체중 증감의 의미 해석` (Markdown heading)
- `**...**` (bold)
- 코드펜스 + JSON: `{"tomorrow_workout":{"run_type":"조깅","distance_km":7.5,"intensity":"...","key_points":"..."}}`
처리:
1. `src/components/MarkdownBriefRenderer.tsx`를 `src/pages/CoachNotes.tsx`의 브리프 본문 컨테이너에 적용
2. JSON 코드블록 처리 전략 결정:
	- 옵션 1) JSON 블록 자동 숨김 (react-markdown override로 `code` 노드 중 `language-json`이면 null 반환)
	- 옵션 2) JSON 블록을 별도 "내일 추천 운동 카드"로 시각화 (mockup viz-card 패턴)
	- 옵션 3) E-6 의도 확인 후 결정
3. dashboard STRENGTH 탭 AI 브리프도 동일 wire-up (현재 `#` 헤딩이 raw로 출력)
검증: coach reload 후 innerHTML에 json`/`tomorrow_workout`/`distance_km`/`run_type\` 미검출, h2/h3 ≥1개
#### C. F-2 모바일 근력 캘린더 셀 폭 균등화
측정값 (모바일 /history?tab=strength 캘린더 7컬럼 grid):
- 일=21px / 월=74 / 화=92 / 수=74 / 목=92 / 금=74 / 토=92
- 체성분 탭은 48px 균등 (동일 grid인데 결과가 다름)
권장 CSS:
```css
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
.cal-cell {
  min-width: 0;
  overflow: hidden;
}
.cal-event {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
```
또는 운동명 약어 (예: "턱걸이 4w" / "다이브 3w")
검증: 모바일에서 일요일 셀 폭 ≥ 토요일 셀 폭의 80%
#### D. C-7 /login 가드
```typescript
function LoginPage() {
  const { user } = useAuth();
  if (user) return <Navigate to="/dashboard" replace />;
  return <LoginForm />;
}
```
검증: 로그인 상태로 /login 진입 → /dashboard 자동 이동
#### E. F-6e /strength-log 라우트 정리
라우트 제거 또는 `<Navigate to="/history?tab=strength" replace />` 또는 `/log?domain=strength`
### P1 — Aesthetic 회복 (mockup 톤앤매너)
#### F. Dashboard period selector → pill 칩
현 상태: native `<select>` 1개.
권장 (목업 dashboard.html 119~125 라인 참고):
```typescript
<div className="period-bar">
  {['전체기간','최근 1개월','최근 1주일','사용자 설정'].map(p => (
    <button key={p} className={`period-badge ${active===p?'on':''}`} onClick={()=>setActive(p)}>
      {p}
    </button>
  ))}
</div>
```
권장 CSS:
```css
.period-badge {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 11.5px;
  color: var(--text3);
  cursor: pointer;
}
.period-badge.on {
  background: var(--lime2);
  border-color: rgba(200,241,53,0.28);
  color: var(--lime);
}
```
#### G. Dashboard 탭 폭 압축
현 측정: 각 330px (풀폭 균등).
권장: 좌측 정렬 + 각 100~140px.
#### H. Dashboard 차트 세로 축소
현 측정: 140 + 160 = 300px.
권장: 90~100px (목업 monthly-bars 90 / vol-bars 90 참고).
모바일도 동일 적용 (현재 데스크탑과 동일 크기).
#### I. Coach 레이아웃 재구성
현 측정: 3-column 335/419/293.
권장: 목업 coach.html 8라인 `grid-template-columns: 300px 1fr` 2-column
- 좌측: 미니 캘린더 + wm-chart + guide-textarea + send-area
- 우측: brief-tabs(러닝/체성분/근력 3 탭) + brief-periods + viz-grid 4 카드 + ai-brief
#### J. 로고 클릭 → /dashboard redirect (I-1)
sidebar `.sb-logo` 와 mobile header `.mobile-logo`를 `<a href="/dashboard">` 또는 React Router Link로 wrap.
### P2 — 보강
#### K. I-0 프로필 진입점
권장 위치:
1. Sidebar 계정 카드(M / master / 사용자) wrap — `<a href="/profile">` (가장 자연스러움)
2. 또는 모바일 헤더에 프로필 아이콘
3. 또는 모바일 하단 탭바 4번째 탭
/profile 실제 동작: 현재 빈 라우트 (Profile.tsx untracked). App.tsx의 /profile 라우트 정의 + import + 실배포 필요.
#### L. "3일 전26년 5월 19일" 공백
Dashboard 섹션 헤더 `<span className="section-date">`에 "3일 전" + 공백 + 날짜.
#### M. Settings sidebar 아코디언 sub-menu 복원
목업 nav-settings-group + settings-submenu 구조 채택. 본문 좌측 메뉴 컬럼은 모바일 fallback으로만 유지하거나 제거.
#### N. 모바일 ✦ AI 단축 버튼
모바일 헤더 우측 "설정" 옆에 mockup mobile-ai-btn 추가.
---
## 4. 권장 작업 순서
```javascript
Step 1 (긴급 30분 이내)
  D. /login 가드
  E. /strength-log 라우트 정리
  A. C-6 마이그레이션 production 적용 또는 fallback

Step 2 (1~2시간)
  B. MarkdownBriefRenderer를 coach + dashboard STRENGTH 브리프에 wire-up + JSON 처리
  C. 모바일 근력 캘린더 grid minmax(0,1fr) + cell overflow

Step 3 (2~3시간 aesthetic)
  F. Dashboard period selector pill 교체
  G. Dashboard 탭 폭 압축
  H. Dashboard 차트 세로 축소

Step 4 (선택 2~3시간)
  I. Coach 레이아웃 2-column 재구성
  J. 로고 클릭 redirect
  K. 프로필 진입점

Step 5 (보강)
  L / M / N
```
각 단계 끝에 Playwright MCP로 회귀 검수 (본 핸드오프의 screenshot과 비교).
---
## 5. 검증 체크리스트 (다음 컨텍스트 마무리용)
- [ ] 데스크탑 /dashboard reload → period 셀렉터가 native select가 아닌 pill 칩 4개
- [ ] 데스크탑 /dashboard reload → BODY/RUNNING/STRENGTH 탭 폭 합계 < 500px
- [ ] 데스크탑 /dashboard reload → canvas height ≤ 100px
- [ ] 데스크탑 /coach reload → DOM에 `tomorrow_workout`/`distance_km`/`run_type`/`intensity` 미검출
- [ ] 데스크탑 /coach reload → h2/h3 태그 ≥ 1개
- [ ] 데스크탑 /settings → 수정 로그 클릭 → 콘솔 0 에러
- [ ] 데스크탑 /login → 로그인 상태 진입 시 /dashboard 자동 redirect
- [ ] 데스크탑 /strength-log → 적절히 redirect 또는 404
- [ ] 데스크탑 /profile → root children > 0
- [ ] 데스크탑 sidebar 로고 click → /dashboard
- [ ] 모바일 /history?tab=strength → 일요일 셀 폭 ≥ 토요일 셀 폭 × 0.8
- [ ] 모바일 모든 페이지 가로 스크롤 0
- [ ] 모바일 하단 탭바 또는 sidebar에 프로필 진입점 ≥ 1
- [ ] 모바일 /coach scrollHeight < viewport × 4
---
## 6. 본 컨텍스트가 변경하지 않은 working tree 상태
공유 자료 — 다음 컨텍스트가 commit 단위 조정·staging을 수행.
**Staged**: `.playwright-mcp/page-2026-05-20T08-23-18-022Z.yml`, `docs/260520_playwright_browsing_report.md`, `migrations/2026-05-22_records_updated_at.sql`, `package-lock.json`, `package.json`, `src/App.tsx`, `src/components/Layout.tsx`, `src/components/dashboard/StrengthSection.tsx`, `src/lib/supabase.ts`, `src/pages/CoachNotes.tsx`, `src/pages/Dashboard.tsx`, `src/components/MarkdownBriefRenderer.tsx` (신규), `src/pages/Profile.tsx` (신규)
**Unstaged**: `src/pages/Settings.tsx`
**Untracked**: `.playwright-mcp/` 캐시 다수, `docs/dallog_mockup_v3fix5_260520/`, `env-check-*.png`
**본 산출물 (검수 결과)**:
- `docs/260522_v3_browsing_review.md` (메인)
- `docs/260522_v3_handoff_to_ui_fix_context.md` (본 핸드오프의 로컬 본)
- `docs/260522_v3_review_screenshots/` (17 png)
---
## 7. 빠른 참조
- 배포본: [https://dallog.pages.dev](https://dallog.pages.dev)
- Supabase project: lzlhbgnnnkrahrmnvooe
- 로그인: `mster` / `qwer1234` (master 권한)
- 워크디렉토리: `D:\dallog\dallog_git`
- 브랜치: `main` (origin/main 동기)
- 목업: `docs/dallog_mockup_v3fix5_260520/`
- Playwright 표준 viewport: 1440×900 / 390×844 (권장: 769~1023도 추가 검수)
---
*검수 컨텍스트(2026-05-22)에서 생성 / 다음 UI 수정 컨텍스트가 출발점으로 활용 / 코드 수정 일절 없음*