---
title: "📓 작업일지 — 태블릿(768~1023) CLAMP-FIRST 정리 + 브리프 기간 드롭다운 이동"
category: "worklog"
parent: "Claude Code 작업일지"
updated: "2026-07-04"
priority: "Medium"
purpose: "762~1024 태블릿폭 UI 점검 과정에서 나온 CLAMP-FIRST 두벌식 font-size 정리·기록 모바일탭 아이콘 크기 통일과, 브리프 기간 드롭다운 위치 이동(피트로그 높이 정렬) 3건을 기록. 같은 날 진행된 셸/콘텐츠 브레이크포인트 정합(6f93bcc)·설정 메뉴 레일(082118e)·토픽바 nav 아이콘화(38a615b) 3건은 KB에 이미 등재되어 있어 본 문서에서 제외(중복 방지)."
read_when: ["CLAMP-FIRST", "태블릿 768 1023", "브리프 기간 드롭다운", "기록 모바일탭 아이콘"]
document_type: "개발일지"
source_status: "generated"
knowledge_group: "03_history"
work_timestamp: "20260704_021135"
source_of_truth: "https://dallog-tools.hansbridge.co.kr/knowledge/"
context: "달록 본레포(ccy-hansbridge/dallog), 커밋 f4155c2, 356e384, f49612e. 같은 세션의 6f93bcc·082118e·38a615b는 knowledge/pacelog-archive/pages/01-devlog/37_2026-07-04_...·02-workreport/162_260704_...·163/164_260704_결정_... 문서에 이미 기록되어 있어 여기서는 제외."
---

# 작업일지 — 태블릿(768~1023) CLAMP-FIRST 정리 + 브리프 기간 드롭다운 이동

> 762~1024(태블릿) 구간 UI 점검을 진행하던 날, 그 흐름 속에서 나온 작은 수정 3건을 기록합니다. 같은 날 있었던 더 큰 구조적 수정(셸/콘텐츠 브레이크포인트 정합·설정 메뉴 레일·상단 nav 아이콘화)은 이미 KB에 별도 문서로 기록되어 있어 여기서는 다루지 않습니다.

## 1. 무엇을 했나

### 1-1. 브리프 기간 드롭다운 위치 이동 (f4155c2)
- 기존에는 '전체 기간' select가 브리프 제목 아래 전체폭 별도 행으로 있어서, 브리프의 첫 카드가 피트로그 첫 카드보다 아래로 밀려 높이가 안 맞았음.
- `BriefBody`에 `periodControl` prop을 신설해, 드롭다운을 체성분 스냅샷 헤더(`sec-h`) 우측(`margin-left: auto`)에 배치. 드롭다운 자체는 피트로그와 동일한 기존 `.b-domain-projsel` 클래스를 재사용해 신규 토큰/클래스 추가 없이 처리(`.brief-period-select`는 폐기).
- `PublicBriefCard`에는 `periodControl`을 전달하지 않으므로 공개 스냅샷 화면은 영향 없음.

### 1-2. 기록 모바일탭 아이콘 CLAMP-FIRST 준수 (356e384)
- `.hist-mobile-seg`(요약/기록보기 토글)는 `isDesktop`(1024px) 미만 전 구간에서 렌더되는데, 아이콘 크기 CSS가 `@media(max-width:767.98)`에만 정의되어 있어 768~1023(태블릿) 구간에서는 크기가 정의되지 않아 아이콘이 커져 보이는(뻥튀기) 문제.
- `.hist-mobile-seg` 레이아웃을 base(미디어쿼리 밖)로 옮겨 1024px 미만 전 구간을 커버하고, 아이콘 크기를 `clamp(15px, 2vw, 18px)`로 일원화. `.toggle-group--full` 특이도로 767.98px 이하에서는 `--sp-15`까지 오버라이드해 불연속을 제거.

### 1-3. CLAMP-FIRST 두벌식 font-size 4건 정리 (f49612e)
- CLAMP-FIRST 감사 결과, 아래 4곳이 데스크탑/모바일 두 값을 따로 지정하는 "두벌식"이라 768~1023 구간에서 값이 정의되지 않는 갭이 있었음. 모두 `clamp()`로 일원화하고 관련 `@media(max-width:767.98)` 오버라이드 3개를 제거:
  - `splash__name`: `fs-34`/`fs-28` → `clamp(28px, 7.5vw, 34px)`
  - `splash__sub`: `fs-md`/`fs-sm` → `clamp(12px, 2.5vw, 14px)`
  - `set-card-sub`: `fs-sm`/`fs-xs` → `clamp(11px, 2vw, 12px)`
  - `coach-hint .tx`: `fs-xs`/`fs-2xs` → `clamp(10px, 1.8vw, 11px)`

## 2. 주요 변경 파일

| 파일 | 내용 |
|---|---|
| `src/components/brief/BriefBody.tsx` | `periodControl` prop 신설 |
| `src/pages/Brief.tsx` | 기간 드롭다운을 `BriefBody` 헤더 우측으로 이동 |
| `src/index.css` | 태블릿 아이콘 clamp화, font-size clamp 통일 4건 |

## 3. 관련 커밋

- `f4155c2` fix(ui): 브리프 기간 드롭다운을 체성분 스냅샷 헤더 우측으로 이동 — 피트로그와 첫 카드 높이 정렬 (① 잔여) (2026-07-04)
- `356e384` fix(history): 기록 모바일탭 아이콘 CLAMP-FIRST 준수 — 768~1023 뻥튀기 해소 (2026-07-04)
- `f49612e` fix(ui): CLAMP-FIRST 두벌식 font-size 4건 → clamp 일원화 (768~1023 갭 제거) (2026-07-04)

## 4. 남은 이슈

각 커밋은 `npm run build`(tsc)·가드 GREEN으로 검증되었다고 커밋 메시지에 명시되어 있음. 커밋 기준 별도로 언급된 남은 이슈는 없음.

- 참고: 같은 2026-07-04 세션에서 이어진 `6f93bcc`(콘텐츠 브레이크포인트 767.98→1023.98 정렬)·`082118e`(설정 메뉴 레일 768 정렬)·`38a615b`(토픽바 nav 아이콘화)는 이미 KB에 등재되어 있음 — `01-devlog/37_2026-07-04_작업일지_페이즈1-762to1024-태블릿마무리-260704.md`, `02-workreport/162_260704_보고_762to1024-태블릿폭-UI정합-3건.md`, `02-workreport/163_260704_결정_C안-하이브리드태블릿-메인타이틀제거.md`, `02-workreport/164_260704_결정_토픽바-태블릿-nav아이콘화-768과밀.md` 참조.