---
title: "📊 260530-3_엑셀 편집기 UX 개선 (구현 4종 + 설계안)"
notion_id: "37022962086881bba17fed993745047a"
notion_url: "https://app.notion.com/p/37022962086881bba17fed993745047a"
category: "workreport"
parent: "Claude Code 작업보고"
updated: "2026-05-30"
priority: "Medium"
purpose: "엑셀 편집기 UX 개선 6항목 검토 → 구현 4건(독립스크롤·클릭즉시편집·섹션이동완화·시간자동포맷) + 스프레드시트 기능 설계안"
---

## 개요

사장님 엑셀 편집기 UX 개선 6항목 검토 → 바로 구현 4건 + 설계안. PR #19 → main `3f63096`.

## 구현 완료 (4건)

| # | 항목 | 처리 |
|---|---|---|
| 1 | 독립 스크롤 영역 | `.hist-ex__grid` min-height:0 + max-height calc(100dvh-232px) + 모바일 미디어쿼리. 페이지 전체 대신 그리드 내부 가로·세로 스크롤 |
| 2 | 클릭 즉시 편집 | 셀 클릭 1단계로 편집 진입(읽기전용 제외). 기존 클릭→선택→Enter 2단계 해소 |
| 3 | 섹션 이동 제약 완화 | 탭 이동 시 dirty면 자동 저장 후 이동(검증 실패 시만 차단) |
| 5 | 러닝 시간 자동포맷 | `lib/timeMask` — 3123→31:23 마스킹. 엑셀 러닝 duration(type:'duration') + 셀모드 한줄자세히. inputMode=numeric |

## 설계안 (4번 스프레드시트 기능 — 중간 규모)

목표: Excel 수준 복잡식 아닌 일반 사용자 수준(사칙연산·콤마·소수점·단위).

- **표시 포맷 (컬럼 단위)**: `ExColDef.format?: { comma?, decimals?, unit? }`. 보기 모드 셀에 1000단위 콤마·소수점 고정·단위 접미사. 편집 중엔 원시값. → 중간, 다음 구현 가능
- **산술식 입력**: 셀에 `=1+2*3` 입력 시 안전 파서(eval 금지, +-\*/·괄호만) 평가 → 결과 저장. 셀 참조(A1)는 데이터그리드 성ꈁ행=1레코드)상 불필. → 중간, 다음 구현 가능
- **셀 단위 포맷은 과잉** — 달록 그리드는 컬럼=필드 고정이라 컬럼 단위 포맷이 적절

## 추가 검토

- **LogEntry 러닝 시간**: 현재 분/초 2칸 분리(콜론 불필). 단일 M:SS 자동마스킹 필드로 통일 원하면 별도 작업(중간). 사장님 결정 필요

## 검증

- npm run build ✅ tsc 통과
- 브라우저 시각검증은 세션 충돌로 미실행 → 사장님 배포본 직접 확인 권장(특히 레이아웃 max-height 값은 실기기 미세조정 여지)

## 커밋

- `49bda2e` · PR #19 → main `3f63096`