---
title: "🧮 260526-월요일_셀기능 추가 Phase 1~4 구현"
notion_id: "36c2296208688102936cfd4ed2b8542d"
notion_url: "https://app.notion.com/p/36c2296208688102936cfd4ed2b8542d"
category: "workreport"
parent: "Claude Code 작업보고"
updated: "2026-05-26"
priority: "High"
purpose: "한줄 자세히(row 뷰)를 구글시트 스타일 셀 입력 모드로 진화 — 체성분·러닝 Phase 1~4 구현 (근력 Phase 5 보류)"
read_when: ["엑셀·셀입력기능","기능파악"]
---

> ⚡ **작업 메타**
> - 일자: 2026-05-26 (월)
> - 범위: 달록 한줄 자세히 → 구글시트 스타일 셀 입력 모드 진화 (체성분·러닝)
> - 환경: 사무실 PC `D:\dallog\dallog_git`
> - 도구: Claude Code (Opus 4.7, 1M ctx)
> - 커밋: `c6b6090` (origin/main 반영)
> - 빌드: 성공 (415 modules, gzip 326KB)
> - 작업명: **셀기능 추가** (퍼스트 페이즈)

## 1. 작업 배경 + 사용자 의도

달록의 본래 개발 의도는 구글시트에 체성분·러닝 기록을 셀 단위로 입력·열람·관리하다가 앱화한 것. 기존 LogEntry 폼 입력 방식 외에 **셀 단위 다건 입력·수정** 방식이 본질에 더 가까움. 본 작업은 한줄 자세히 `viewMode='row'`를 셀 입력 모드로 진화시키는 작업.

사용자 명세 10개 항목 + 근력 별도 UI/UX 설계 요청. 본 작업에서는 **체성분·러닝까지(Phase 1~4) 완료**, 근력(Phase 5)은 세컨드 페이즈 보류.

## 2. 사용자 결정 사항

| 항목 | 결정 |
|---|---|
| 1. 작업명 | **셀기능 추가** (승인) |
| 2. Phase 5(근력) 처리 | 세컨드 페이즈로 보류. 추천안은 노션 핸드오프·개발노트 인계 |
| 3-① v0.9 데드라인 충돌 | v0.9 우선, 본 셀기능을 최우선 — 데드라인 딜레이 책임은 사용자 |
| 3-②~⑤ 기본 가정 | 모두 클로드 제시안 채택 후 사후 체크 |
| 4. 러닝 루틴 추천안 | 채택 (app_settings JSON, fitness_projects 패턴) |
| 6. 작업 진행 | 전 단계 컨펌없이 논스톱 (사용자 외출) |
| • 커밋·푸쉬 | 논스톱 + 사용자 명시 동의 → 자동 진행 |

## 3. 신규 파일 (4개)

| 파일 | 역할 |
|---|---|
| `src/components/cellmode/CellModePagination.tsx` | 공통 페이지네이션 — 10/30/50 + 페이지 윈도우. Settings 피트니스 프로젝트 펼침 패턴 차용 |
| `src/components/cellmode/CellModeBody.tsx` | 체성분 셀 모드 (8컬럼) — 보기·편집·자동계산·새행 |
| `src/components/cellmode/CellModeRunning.tsx` | 러닝 셀 모드 (14컬럼) — 보기·편집·자동계산·새행 |
| `migrations/2026-05-26_running_logs_routine_id.sql` | 러닝 루틴 연동 컬럼 마이그레이션 — 사용자 적용 필요 |

## 4. 수정 파일 (3개)

| 파일 | 변경 요약 |
|---|---|
| `src/lib/supabase.ts` | `RunRoutine` 타입 신설 (app_settings JSON, fitness_projects와 동일 패턴) |
| `src/pages/History.tsx` | `viewMode='row'` 분기를 셀 컴포넌트로 교체 (체성분·러닝). 근력은 기존 카드 유지(Phase 5). `run_routines` app_settings 로드 추가 |
| `src/pages/Settings.tsx` | 개인 러닝 섹션에 **루틴(프로젝트) CRUD UI** 신설. 변수 prefix `run` — 기존 SavedRoutine 용 routineForm 과 충돌 회피 |

## 5. 사용자 명세 10개 대응 표

| # | 명세 | 구현 상태 |
|---|---|---|
| 1 | 한줄 자세히 페이지네이션 10/30/50 + 정렬 결합 | ✓ `CellModePagination` |
| 2 | 셀 환경 디자인 | ✓ 가로 스크롤, sticky 헤더, 컬럼 borders |
| 3-1 | 체성분 컬럼 (날짜·프로젝트·체중·골격근·체지방량·체지방률·BMR) | ✓ + 메모 1컬럼 추가 |
| 3-2 | 러닝 컬럼 14종 | ✓ 전부 구현. 루틴은 UI 표시만 (저장은 마이그레이션 후) |
| 3-3 | 근력 별도 설계 | **세컨드 페이즈 보류** — 추천안만 §8 기재 |
| 4 | 수정 버튼 | ✓ 비편집→편집 모드 전환 |
| 5 | 체크박스 (행 왼쪽 활성화) | ✓ 편집 모드 시 좌측 32px 체크박스 컬럼 추가 → 데이터 열 우측 밀림 |
| 6 | 다중선택 + 페이지 전체선택 | ✓ 헤더 체크박스로 페이지 전체선택 |
| 7 | 셀 입력-수정 활성화 | ✓ 편집 모드 시 input/select 노출 |
| 8 | 모두저장 / 취소 버튼 | ✓ 액션바 좌측 배치 |
| 9 | 새 행 추가 | ✓ `  • 새 행` 버튼, 1페이지 상단 임시 행 삽입 |
| 10 | 자동계산 유지 | ✓ 체지방률·BMR·페이스·속도 모두 input onChange 즉시 계산 표시 |

## 6. 자동계산 공식 (LogEntry와 일치)

```typescript
// 체성분
fat_pct = fat_kg / weight_kg * 100
bmr = 370 + 21.6 * (weight_kg - fat_kg)

// 러닝
pace_sec_per_km = duration_sec / distance_km
speed_kmh = (distance_km / duration_sec) * 3600
```

## 7. 저장 흐름

| 탭 | 저장 방식 | 근거 |
|---|---|---|
| 체성분 | `body_records.upsert(payload, { onConflict: 'recorded_at' })` | LogEntry 동일 — 같은 날짜 중복 시 update |
| 러닝 | 신규: `insert`, 기존: `update(...).eq('id', id)` | LogEntry/History 패턴 — 같은 날 여러 기록 가능 |

저장 대상: **신규 행은 항상** + **수정 행은 선택된 것만** (사용자 명세 6: "원하는 행만 선택해서 수정·기록")

## 8. 근력(Phase 5) 추천안 — 세컨드 페이즈 인계

근력은 1세션 → 여러 운동 → 각 운동 여러 세트의 중첩 구조라 셀 표현이 까다로움. 4가지 옵션 검토 결과:

| 옵션 | 1행 단위 | 판정 |
|---|---|---|
| A. 1행=1세션, 세트 펼침 | 마스터-디테일 | 세트값 한눈에 안 보임 |
| **B. 1행=1세트** (추천) | 가장 평탄 | **구글시트 원본 정신 일치. 정렬·필터·일괄 편집 자유** |
| C. 1행=1운동, 세트 인라인 | 운동 단위 | 한 셀 여러 값 — 편집 복잡 |
| D. 1세션=폴더 그룹 | 구글시트 가짜시트 흉내 | 구현 복잡 |

**옵션 B 상세 설계:**

- 컬럼: `날짜 · 시간 · 라벨(루틴) · 운동명 · 카테고리 · 세트# · 반복 · 중량(kg) · 추가중량(kg) · 볼륨(자동) · 비고`
- 세션 그룹 시각 구분: 같은 세션 같은 톤 배경 stripe + 첫 행 좌측에 세션 아이콘
- 두 가지 새 행 추가 버튼 분리:
	- `+ 새 세션` — 1세션 + 1운동 + 1세트 자동 추가
	- `+ 새 세트` (현 세션) — 선택 행과 같은 세션·운동에 세트만 추가
- 자동계산 볼륨:
	- 맨몸: `reps × (체중 × bodyweight_ratio + additional_weight_kg)`
	- 웨이트/머신: `reps × weight_kg`
- 1RM 추정 (Epley 공식): `weight_kg × (1 + reps/30)`
- 저장: `strength_logs` + `strength_exercises` + `strength_sets` 3-테이블 트랜잭션
	- 신규 행 → 같은 세션 그룹 식별 후 단일 트랜잭션
	- 수정 행 → strength_sets.update 단건
	- 세션 자체 삭제는 캐스케이드 수동 처리 유지

사용자가 옵션 A를 선호하실 경우는 별도 검토. 현재 카드 표시 방식과 가장 가까운 형태가 옵션 A.

## 9. 마이그레이션 안내 (사용자 적용 필요)

**파일**: `migrations/2026-05-26_running_logs_routine_id.sql`

```sql
ALTER TABLE running_logs ADD COLUMN IF NOT EXISTS routine_id text;
```

**적용 순서:**

1. Supabase Dashboard > SQL Editor 접속
2. 위 SQL 실행 (`IF NOT EXISTS` 가드라 재실행 안전)
3. `src/components/cellmode/CellModeRunning.tsx` 의 `saveAll()` 안 주석된 라인 활성화:

```typescript
// routine_id: r.routine_id || null,  ← 이 주석 해제
```

4. 빌드 → 푸쉬 → 셀 모드에서 루틴 컬럼 저장 활성화 확인

적용 전까지: 루틴 컬럼 드롭다운은 표시되지만 저장은 무시됨. 컬럼헤드에 `*` 표시 + tooltip 안내.

## 10. 기본 가정 (사용자 ②~⑤ 승인 채택)

| 항목 | 가정 | 후속 검토 트리거 |
|---|---|---|
| 모바일 폭 | 가로 스크롤 | 사용자 시각 검증 후 sticky 첫 컬럼 도입 여부 결정 |
| 새 행 추가 vs LogEntry | 둘 다 유지 | 사용성 비교 후 일원화 여부 |
| 자동계산 시점 | 입력 즉시 (onChange 표시) | 대량 입력 시 성능 체크 |
| 상태 보존 | 컴포넌트 내부 state | URL params로 페이지·정렬 복원 필요시 후속 |

## 11. Settings 러닝 루틴 UI (MVP)

**현재 구현 필드:**

- 루틴명 (필수)
- 목표 (한 줄)
- 기본 런타입 (드롭다운)
- 메모 (textarea)
- 활성 토글 (러닝 기록 입력 시 드롭다운 노출 여부)

**저장**: `app_settings.run_routines` JSON (fitness_projects 동일 패턴)

**세컨드 페이즈로 보류된 필드** (RunRoutine 타입에는 정의됨, UI 미노출):

- `mileage_plan` (week/month + target_km)
- `default_shoes` (로테이션 신발 목록)
- `period_start` / `period_end`

대시보드에 "루틴별 마일리지 진척률" 표시는 후속 작업 후보.

## 12. git 상태

```bash
[main c6b6090] feat(cellmode): 셀기능 추가 Phase 1~4 — 한줄 자세히를 셀 입력 모드로 진화
 7 files changed, 1127 insertions(+), 4 deletions(-)
 create mode 100644 migrations/2026-05-26_running_logs_routine_id.sql
 create mode 100644 src/components/cellmode/CellModeBody.tsx
 create mode 100644 src/components/cellmode/CellModePagination.tsx
 create mode 100644 src/components/cellmode/CellModeRunning.tsx

To https://github.com/ccy-hansbridge/dallog.git
   423e6be..c6b6090  main -> main
```

Cloudflare Pages 자동 배포 트리거됨.

## 13. 후속 작업 (사용자 확인 필요)

| 순위 | 작업 | 예상 |
|---|---|---|
| P0 | Supabase SQL 적용 + CellModeRunning 주석 해제 → 루틴 저장 활성화 | 10분 |
| P1 | 실제 사용자 시각 검증 (모바일 390 / 데스크탑 1440) — 사용자 사후 체크 | 30분~1h |
| P2 | 근력 Phase 5 (세컨드 페이즈, 추천안 §8 옵션 B) | 6~8h |
| P3 | RunRoutine UI 확장 (마일리지 plan, default_shoes, period) | 3~4h |
| P4 | URL params 상태 보존 (페이지·정렬 복원) | 1~2h |
| P5 | 모바일 첫 컬럼 sticky (날짜) | 1h |

## 14. v0.9 충족기준 컨텍스트

본 작업은 [달록 v0.9 완성 충족기준](#/doc/spec-01)의 9개 필수 작업에 포함되지 않음. 사용자 결정으로 **v0.9에 셀기능 추가 작업을 포함**하며 데드라인 (2026-06-01 D-9) 영향은 사용자 책임으로 진행. v0.9 충족기준 §5 작업 10 또는 부록 항목으로 정식 등재 권장.

---

> ✅ **결론**
> 셀기능 추가 Phase 1~4 (체성분·러닝) 구현 완료. 빌드 성공, origin/main 푸쉬 완료(`c6b6090`), Cloudflare 자동 배포 트리거. 근력 Phase 5는 세컨드 페이즈로 옵션 B(1행=1세트) 추천안 인계. 사용자 사후 체크 필요 항목: ① 마이그레이션 SQL 적용 + 주석 해제 ② 모바일·데스크탑 시각 검증.

**리드타임:** 시작 17:20 ~ 완료 18:30 (약 70분) — 코드 작성 50분 + 빌드/커밋/푸쉬 5분 + 노션 작성 15분 (진행 중)