---
title: "📊 260530-5_러닝 시간 단일필드 + 엑셀 모바일 레이아웃 보정"
notion_id: "3702296208688111b662f8f1b7f74445"
notion_url: "https://app.notion.com/p/3702296208688111b662f8f1b7f74445"
category: "workreport"
parent: "Claude Code 작업보고"
updated: "2026-05-30"
priority: "Low"
purpose: "LogEntry 러닝 시간 단일 M:SS 필드 전환 + 엑셀 편집기 모바일 레이아웃 보정(헤더/탭바 높이 변수)"
---

## 개요

사장님 요청 2건. PR #21 → main `fb52256`. 기존 기능(폭확장·독립스크롤·클릭편집·자동저장·시간포맷·컬럼포맷·3탭) 유지.

## 1. LogEntry 러닝 시간 단일 M:SS 필드 (승인 후 전환)

- 기록>기록하기>러닝 생성 폼: 소요시간 분/초 2칸 → **단일 M:SS 필드**. `maskDuration`(3123→31:23, 923→9:23) + inputMode=numeric
- `timeMask`에 `durationToSec`·`secToDuration` 공용 추가 — 엑셀·셀모드와 동일 로직 재사용
- totalSec=durationToSec(duration), OCR 적용은 분/초→M:SS 합성. **저장값(duration_sec)·데이터 구조 불변**
- 수정 파일: `src/lib/timeMask.ts` · `src/pages/LogEntry.tsx`

## 2. 엑셀 편집기 모바일 레이아웃 보정

- **원인**: 모바일에서 `.hist-ex`가 `min-height:100dvh` → sticky 헤더 아래로 100dvh 강제 → 페이지 늘어남 + 하단이 fixed 탭바에 가림 + is-excel padding-top 32px 여백
- **해결**: 상단 여백 제거(모바일 is-excel padding 0) + `.hist-ex height = calc(100dvh - 헤더 - 탭바 - safe-area)` + `.hist-ex__grid max-height:none`(고정 컨테이너 안 flex)
- 헤더~하단탭 가용높이에 편집기 정확히 고정, 내부 가로·세로 스크롤. 페이지 세로스크롤·하단 잘림·탭바 겹침 해소
- 변수 신설: `--lay-header-h: 52px` · `--lay-tabbar-h: 60px` (실기기 미세조정 여지)
- 수정 파일: `src/index.css`

## 검증

- npm run build ✅ tsc 통과
- git diff --name-only: src/index.css · src/lib/timeMask.ts · src/pages/LogEntry.tsx
- ⚠️ 브라우저 시각검증 세션 충돌로 미실행 → 사장님 배포본에서 iPhone XR·Galaxy Z Fold 5·360/390/412/430폭 확인 권장. 헤더/탭바 높이(52/60)가 실제와 어긋나면 변수만 조정하면 전 해상도 일괄 반영

## 커밋

- `2814ff9`(러닝 시간) · `f56ecdb`(모바일) · PR #21 → main `fb52256`