Skip to content

자유 기록 — 빠른 세트 추가 버튼 오노출 수리 · 통계 반영 종목 추가를 종목 완료 도크로 이동 (2026-09-03)

  • 기간: 2026-09-03 (세션 1개, 오너 보고 2건 "빠른 세트추가 버튼이 보였다가 누르면 사라짐" / "통계에 계산될 항목 추가는 자유기록 종목 완료 버튼 누른 검정 화면에서")
  • 랜딩: PR #1203 (Phase 1~2, 5109326b) — 마이그레이션 없음, 서버 변경 없음
  • 설계서: 없음 — 분석·Phase 계획 = 이슈 #1198 본문, 오너 결정 D1-a
  • 정본: src/react/ui/mobile/screens/WorkoutRecord.tsx(WfStatLines·리뷰 도크) · src/react/ui/mobile/screens/WorkoutFlow.tsx(attemptFinish 빈 줄 복귀) · src/react/ui/mobile/styles/screens/workout.css(.wf2-act.review .wfx-statlines 패널) · tokens.css --note-stat-panel-h
  • 도구: 로그인 없는 브라우저 하네스(워크트리 루트 일회용 scratch-1198.html/.tsx, WfRecord만 실제 CSS로 마운트, 커밋 제외)
  • 게이트: tests/react/noteStatLines.test.mjs(배선 앵커 개정) · dockGeometryContract.test.mjs · e2e dock-geometry.spec.mjs(CI) · npm run check
  • 버그리포트: BUG-070
  • 계약: 도크 기하 계약 C2′ 불변(패널은 도크 루트 기준 absolute — 난이도 카드와 같은 부류). 완료 쓰기 DTO statLines 계약(#1003) 그대로

Phase 현황

Phase내용상태
Phase 1자유 기록에서 "드래그해서 빠른 세트 추가" 버튼 비노출✅ PR #1203
Phase 2통계 반영 종목 추가를 종목 완료 도크 위 패널로 이동(편집기 배치 폐지) + 빈 줄 처리✅ PR #1203
Phase 3로컬 게이트 → PR 1개 → CI 1회 → 머지 → [스테이징] + 이 기록

1. 배경

자유 기록(#1003, 2026-08-31)에 "종목 + 무게 × 총횟수" 통계 줄이 붙었다. 위치는 편집기(제목·본문) 안 본문 칸 아래였다. 오너가 2026-09-03 실사용에서 두 가지를 보고했다: ① 자유 기록 본문 보기 화면에 일반 종목용 "드래그해서 빠른 세트 추가" 버튼이 뜨고 누르면 사라진다, ② 통계 반영 종목 추가는 자유 기록을 완료한 뒤 뜨는 검은 도크에서 하고 싶다.

2. 문제 제기

  • 유저 A가 자유 기록으로 "와드"를 적고 "세트 설정 완료"를 누르면, 본문 아래에 "드래그해서 빠른 세트 추가" 버튼이 보인다. 누르면 버튼만 사라지고 아무것도 뜨지 않는다. 자유 기록에는 세트 개념이 없으므로 이 버튼은 나오면 안 된다(BUG-070).
  • 통계 줄은 7줄짜리 본문 칸 아래에 있어 화면 밖으로 밀리기 쉽고, 편집을 마친 뒤엔 편집기를 다시 열어야 추가할 수 있다. 오너는 완료 직후 그 자리(리뷰 도크)에서 추가하길 원했다.
  • 도크에는 높이 고정 계약(스테이지 136px, 4상태 항등, 기하 게이트)이 있어 도크 안에 줄을 늘어놓을 수 없다.

3. 해결 방안

원칙(오너 결정): D1-a — 편집기 배치는 없애고 완료 도크 한 곳에서만 입력한다.

접근:

  • 빠른 세트 추가 버튼 조건에 자유 기록 제외 1줄.
  • 통계 줄 부품(WfStatLines)을 리뷰 도크 안에 넣되 도크 루트 기준 absolute로 도크 위에 붙인다(난이도 카드와 같은 방식). 도크 본체·스테이지 높이는 그대로라 기하 계약·게이트를 건드리지 않는다. 줄이 늘면 패널 최대 높이(--note-stat-panel-h 190px)에서 내부 스크롤, 화면 하단 여백은 그만큼 유도식으로 더 확보.
  • 편집기의 저장 게이트가 사라지면서 생기는 구멍(빈 줄이 저장 검증에서 거부돼 완료 화면에 갇힘)은 세 겹으로 막는다: 패널 안내 문구 → "다음 종목"·"운동 종료하기" 잠금 → 다른 종목에서 종료를 눌러도 attemptFinish가 그 자유 기록으로 돌려보냄.

기각한 안: 도크 스테이지 안에 줄을 넣기(스테이지 넘침 = 기하 게이트 실패) · 자유 기록에 세트 입력 창을 그리기(세트 없는 계약과 충돌).

4. 적용한 내용

Phase 1

  • WorkoutRecord.tsx 빠른 세트 추가 버튼 조건: live && active.kind !== "note" && ….

Phase 2

  • 편집기(wfx-note-edit)에서 WfStatLines 제거, 저장 버튼의 통계 줄 조건·안내 문구 제거.
  • 리뷰 도크(wf2-act review) 첫 자식으로 active.kind === "note"일 때 WfStatLines. CSS .app .wf2-act.review .wfx-statlines { position: absolute; bottom: 100%; max-height: var(--note-stat-panel-h); overflow-y: auto; … } + 어두운 배경용 색 8규칙. .app .screen:has(.wf2-act.review .wfx-statlines) 여백 = 기존 식 + --note-stat-panel-h.
  • 빈 줄: WfStatLines에 .hint 문구("통계 줄의 무게·총횟수를 채우거나 줄을 삭제해 주세요"), 도크 nx-go 버튼 disabled, WorkoutFlow.attemptFinish에서 빈 줄 있는 자유 기록으로 setActiveId 복귀. 완료 카드 본문(wfx-statline-view)은 값이 찬 줄만.
  • 배선 앵커 테스트 개정: 도크 안·자유 기록만 / 편집기 배치 없음 / 버튼 조건.

주요 결정과 근거: 패널을 도크 밖(absolute)에 둔 것은 기하 계약 C2′("상태별 고정 height·보정 마진 금지, 콘텐츠 합 > 스테이지 = 위반")를 지키면서 오너가 말한 "검은 화면"에 붙이는 유일한 자리였기 때문. 빈 줄을 조용히 버리지 않고 잠금+안내로 처리한 것은 #975 "잠긴 버튼은 이유를 말한다" 원칙.

작업 중 드러난 것: 리뷰 도크는 운동 진행(live)과 지난 기록 작성·수정(backfill) 양쪽에서 같은 부품이라, 옮긴 뒤에도 두 경로 모두에서 추가할 수 있다. 계획·그룹 보드 작성(planMode)은 도크 자체가 없어 자연 제외.

5. 적용 결과

항목
자유 기록 본문 보기 화면의 "빠른 세트 추가" 버튼1개(눌러도 무반응)0개
통계 반영 종목 추가 위치편집기 본문 아래(재진입+스크롤)완료 도크 위 패널, 버튼 1번
완료 도크 높이(safe 0)164px164px(스테이지 넘침 0)
빈 통계 줄이 남은 채 운동 종료저장 검증에서 거부(완료 화면에 갇힘 가능)도크에서 잠금+안내, 종료 시 해당 종목으로 복귀

자동 검증: 단위 10/10, npm run check 2,457/2,458(실패 1 = main에서도 실패하는 Windows CRLF 전용 perf_tab_switch), 로컬 하네스 실측(버튼 없음·패널·팝업 z 70>46·카드 표시·잠금). 사람 눈으로만 판단할 것: 패널·도크 경계 헤어라인의 느낌, 어두운 입력칸 대비.

6. 이번 개선으로 향상된 것

  • 자유 기록 화면에서 눌러도 아무 일 없는 버튼이 사라졌다.
  • 와드·클래스형 기록을 완료한 직후 같은 자리에서 통계 반영 종목을 넣을 수 있다.
  • 구조적으로 남는 것: "자유 기록 완료 도크 = 리뷰 + 통계 반영 입력 자리" 규칙, 도크 위 패널 부류(난이도 카드·통계 줄 패널)는 도크 기하를 건드리지 않는다는 선례.

남은 것

  • 없음(Production 반영은 다음 릴리스 PR).