---
title: "🔩 260526-월요일_셀기능 시각검증 3·4차 fix + 컬럼명 조정"
notion_id: "36c229620868811a9fa8e3e709219cd9"
notion_url: "https://app.notion.com/p/36c229620868811a9fa8e3e709219cd9"
category: "workreport"
parent: "Claude Code 작업보고"
updated: "2026-05-26"
priority: "Low"
purpose: "셀기능 popover 레이아웃 잔존 버그(CJK wrap → grid 전환) 해소 + 러닝 컬럼명·단위 조정"
---

> ⚡ **작업 메타**
> - 일자: 2026-05-26 (월) 22시 전후
> - 범위: popover 레이아웃 잔존 버그 자연해소 + 컬럼명·단위 조정
> - 커밋 3건: `737c460` → `9a14d3f` → `a772bb5`
> - 빌드: 3회 모두 성공 (419 modules, gzip 331KB)
> - 이전: `78b027b` (2차 fix 완료 시점)

## 1. 작업 배경

2차 fix 후 사용자 재검증 시 두 단계의 잔존 popover 레이아웃 버그 연속 발견 + 구체 용어 조정 요청. 세 개 커밋으로 최종 마무리.

## 2. 3차 fix — popover CJK 세로 wrap (`737c460`)

**현상:** 컬럼 표시·순서 popover 안 라벨이 한 글자씩 세로로 펼쳐져 표시.

**원인:** 한국어(CJK) 텍스트는 글자 사이 줄바꿈 기본 허용. flex 자식 span(flex:1)이 좊은 폭으로 압축되면 글자 단위로 wrap.

**조치:** 라벨 span에 `minWidth: 0 + whiteSpace: nowrap + overflow: hidden + textOverflow: ellipsis`. 입력 요소·화살표 버튼에 `flex: '0 0 auto'` 명시로 shrink 차단.

## 3. 4차 fix — popover row flex → grid 전환 (`9a14d3f`)

**현상:** 3차 fix 후에도 라벨이 아예 보이지 않음 (사용자 스크린샷으로 확인). 체크박스만 표시 + 그게 row 가운데에 있는 것처럼 보임.

**원인:** `<label>` 요소가 default `display: inline`. `display: flex` 명시했으나 브라우저 렌더링에 따라 콘텐츠 크기로 압축 → 그 안의 span(flex:1)이 free space 0 → 0폭으로 텍스트 안 보임.

**조치:** flex 레이아웃 자체를 **grid**로 전환

```typescript
// ColumnConfigDropdown (4컬럼)
display: 'grid',
gridTemplateColumns: 'auto 1fr auto auto',  // 체크박스 | 라벨 | ↑ | ↓
width: '100%', boxSizing: 'border-box',

// ColumnFilterPopover (2컬럼)
gridTemplateColumns: 'auto 1fr',  // 체크박스 | 라벨
```

`1fr` 트랙이 남은 공간을 강제로 차지 — 부모가 inline으로 압축되어도 영향 X. 사용자 피드백과 일치.

**span:** `minWidth: 0 + nowrap + ellipsis + textAlign: left` 유지.

## 4. 컬럼명 · 단위 조정 (`a772bb5`)

사용자 요청 반영 — 러닝 셀 모드 커럼:

| 컬럼 ID | 이전 라벨 | 새 라벨 | 단위 | width |
|---|---|---|---|---|
| `avg_bpm` | 평심 | **평균심박** | **bpm** | 60→95px |
| `max_bpm` | 최심 | **최대심박** | **bpm** | 60→95px |
| `is_record` | 마일리지 | **거리반영** | — | 70→75px |

- 셀 값 표시: `138 bpm` / `158 bpm` (이전 숫자만)
- 헤더에 자동 단위 표시: `평균심박 (bpm)` / `최대심박 (bpm)`
- `is_record` 필터 옵션: `마일리지 포함`/`제외` → `포함`/`제외`

## 5. 변경 파일

| 파일 | 커밋 | 요약 |
|---|---|---|
| `src/components/cellmode/ColumnConfigDropdown.tsx` | 737c460 + 9a14d3f | 라벨 nowrap+ellipsis → grid 레이아웃 전환 |
| `src/components/cellmode/ColumnFilterPopover.tsx` | 737c460 + 9a14d3f | 동일 패턴 |
| `src/components/cellmode/CellModeRunning.tsx` | a772bb5 | 컴럼명·단위·width 조정 + 셀 값 bpm |

3 files / +27 / -20 lines (3 commits)

## 6. 검증

- `npm run build`: 3회 모두 성공 (419 modules, gzip 331KB)
- 시각 검증: 사용자 확인 완료 (4차 fix 후 popover 라벨 정상 표시, 컴럼명·단위 확인 완료)

## 7. 남은 트랙

- **잔여 2 (삭제)**: 사용자가 다음 작업 섹션에서 SQL 수정(RLS)으로 해결 예정
- **이슈 11 (OAuth 런타입 RLS)**: v0.9 작업 2 (멀티유저 보안)로 통합 — 체크리스트 4중 리마인드 등재 유지
- **근력 Phase 5**: 세컨드 페이즈 — 옵션B(1행=1세트) 추천안 핸드오프 인계 완료, useColumnConfig/useColumnFilters hook 재사용 가능

---

> ✅ **결론**
> 2차 fix 잔존 레이아웃 버그 완해소 + 컴럼명·단위 조정 완료. 셀기능 Phase 1~4 (체성분·러닝)의 사용자 사용 준비 완료 상태. `737c460 → 9a14d3f → a772bb5` 푸쉬. 오늘 컨텍스트 종결.