---
title: "📄 작업보고 — 762~1024 태블릿폭 UI 정합 3건 (콘텐츠 정렬·설정 레일·토픽바 아이콘)"
category: "report"
parent: "Claude Code 작업보고"
updated: "2026-07-04"
priority: "High"
purpose: "페이즈1 마지막 잔여였던 762~1024(태블릿) 구간 UI 붕괴를 3건으로 정합한 작업보고. ①콘텐츠 모바일렌더 @media 경계 정렬(C안) ②설정 우측 메뉴 레일 삽입 ③토픽바 nav 아이콘화. 근본 원인=셸768/콘텐츠1024 이중 브레이크포인트 불일치. Playwright 로컬 실측 검증. 결과=762~1024 구멍 0."
read_when: ["762 1024 태블릿 UI","태블릿 반응형 붕괴","대시보드 태블릿 2단","설정 우측 메뉴 레일","토픽바 nav 아이콘","페이즈1 UI 닫기"]
document_type: "작업보고"
source_status: "generated"
knowledge_group: "03_history"
work_timestamp: "20260704_113802"
source_of_truth: "https://dallog-tools.hansbridge.co.kr/knowledge/"
context: "달록본레포CC (D:\\dallog\\dallog_git)."
---

> 관련: **의사결정**(C안 하이브리드 태블릿 / 토픽바 nav 아이콘화)·**특이이슈**(셸768·콘텐츠1024 이중 브레이크포인트 / Playwright 로컬 시각검증). 본레포 커밋 `6f93bcc`·`082118e`·`38a615b`(phase1-release→main).

## 배경 — 근본 원인
달록은 폭에 따라 **두 개의 다른 전환점**을 가진다.
- **셸(사이드바/하단탭바)** = `Layout.tsx isDesktop = innerWidth >= 768` → **768 전환**.
- **콘텐츠(대시보드/기록/코치 2단·단일)** = `useMediaQuery('(min-width:1024px)')` → **1024 전환**.

즉 **768~1023 = 데스크탑 셸 + 모바일 콘텐츠**(설계상 하이브리드). 그런데 모바일 콘텐츠 스타일이 `@media(max-width:767.98)`까지만 걸려 있어, 이 구간에서 콘텐츠가 base(데스크탑) 스타일로 새어 "예전 엉망 UI"로 보였다. (상세=특이이슈 문서)

## 건①: 콘텐츠 모바일렌더 정렬 (C안) — `6f93bcc`
콘텐츠 성격 **7개 `@media` 블록만** `max-width:767.98→1023.98`로 콘텐츠 JS 분기(1024)와 정렬:
`.dash-page` 풀폭 / 메인타이틀(`.page-head`·`.main-head`·`.hist-pagehead`·`.coach-page-title`) 제거 / 탭(`.seg`·`.hist-mobile-seg`·`.brief-tabs`·`.summary-headrow`) 모바일 풀폭·밑줄 / 코치 aside·owner 그리드 / 코치 잔액 / 근력 2단.
- **셸·토스트·모달·스플래시·높이계산(탭바 의존)은 767.98 유지** — 768+엔 탭바가 없어 확장 시 오히려 깨짐(스카우트 초안 거부).
- 타이틀 결정: 메인타이틀 제거, 서브(브리프/피트로그)는 ≥1024 2단에만 존재해 무영향.

![태블릿 900px 브리프 — 브리프/피트로그 풀폭 밑줄 탭, 메인타이틀 제거, 카드 풀폭](pacelog-archive/pages/02-workreport/assets-20260704_113802/20260704_tablet_brief_900.png)

![태블릿 900px 기록 — 요약/기록보기 밑줄 탭 + 체성분/러닝/근력 세그](pacelog-archive/pages/02-workreport/assets-20260704_113802/20260704_tablet_history_900.png)

**Playwright 실측**: 900px 세그 816px 풀폭·메인타이틀 `display:none`·상단 padding 8px(Codex: 확장규칙(0,3,0)이 데스크탑 패딩(0,2,0) 승 → 갭 없음). 1440px `dash-2col` 662×662 2단 보존·서브 존치. 360px 모바일 값 불변(부분집합·동일규칙).
**Codex 검수 반영**: 코치 owner 채팅 짝 불일치 1건 즉시반영(`.coach-chat-grid--owner` display:block도 1023.98로 정합). 나머지 누출 없음 확인.

## 건②: 설정 우측 메뉴 레일 — `082118e`
`@media(min-width:768px) .lay-main.is-settings { width: calc(100% - 300px) }`가 768부터 우측 300px를 메뉴바 자리로 예약하는데, 레일 렌더는 `Settings.tsx isDesktop=1024`라 768~1023에서 **자리만 비고 메뉴 접근불가**(우측 여백 허전 + '설정☰' 드로어도 셸 데스크탑이라 없음). 사장님 지적.
- 수정: 설정 레이아웃 분기를 셸과 동일 **1024→768**. CSS 300px 예약(min-768)과 정렬.
- **Playwright 실측**: 768 레일 right:0·300px·콘텐츠 468 / 900 콘텐츠 600·메뉴 8개 접근가능 / 500(<768) 레일 없음·드로어 보존.

![태블릿 900px 설정 — 우측 고정 메뉴 레일(계정/운영/로그) 삽입, 여백 해소](pacelog-archive/pages/02-workreport/assets-20260704_113802/20260704_tablet_settings_rail_900.png)

## 건③: 토픽바 nav 아이콘화 — `38a615b`
763~815에서 상단 nav 라벨이 글자단위(대/시/보/드)로 쪼개짐. 실측으로 **토픽바 과밀**(브랜드115+nav280+액션403+간격60 ≈ 850 > 768) 규명 → 부드러운 clamp만으론 한 줄 불가(억지 시 브랜드 압축·로고 겹침). 사장님 컨펌 후 **nav 아이콘화** 선택.
- 768~1023 밴드만 `nav-item span { display:none }` + gap/padding 조여 여유 확보. a11y=`NavLink aria-label` 보존. **≥1024 라벨·gap 26px 원값 무접촉**.
- **Playwright 실측**: 768 라벨 숨김·아이콘 3개·여유 58px·오버플로 0 / 1024 라벨 복귀·gap 26 원값 / aria-label 유지.

![태블릿 768px 토픽바 — nav 아이콘만, 액션 라벨 유지, 한 줄](pacelog-archive/pages/02-workreport/assets-20260704_113802/20260704_tablet_topbar_iconnav_768.png)

![1024px 토픽바 — nav 라벨(대시보드/기록/코치노트) 복귀 = ≥1024 보존](pacelog-archive/pages/02-workreport/assets-20260704_113802/20260704_tablet_topbar_labels_1024.png)

## 검증·배포
- 3건 모두 `npm run build`(tsc) 통과 · 토큰 가드(색/간격/주석) 통과 · 한글 mojibake 없음.
- phase1-release → main(fast-forward) → §5 게이트(index.html/manifest 운영값·데모누출 없음) → push.
- dallog.kr은 Cloudflare 봇차단(403)이라 최종 육안은 사장님 재검수(태블릿 폭). **결과: 762~1024 구간 구멍 0.**