@ihabdevteam/core 0.256.0 → 0.257.0

package/CHANGELOG.md

@@ -7,6 +7,115 @@ All notable changes to this project will be documented in this file.
 > 적은 글이라, 지금 이름으로 고쳐 놓으면 그 시절에 그 이름으로 받은 사람이
 > 제 이야기를 못 찾는다.
 
+## 0.257.0
+
+> **이 판은 그 사이 main 에 쌓인 "미배포" 와 PR #10 도 함께 싣는다** — 아래 ★ 두 꼭지와
+> `Panel`·`Button` 쪽 고침(PanelGrid 배치 · Dropdown 첫 열림 자리)이 그것이다.
+
+### 줄 안에 **이름 있는 진짜 단추**를 세운다 — `Table` `rowLabel` (말귀 요청 (56)(나))
+
+(가)(0.253.0)에서 줄이 `role="button"` 을 잃으면서 **"눌릴 수 있다" 는 말**이 사라졌고,
+`aria-describedby` 로 메워 뒀다. 그 자리를 제대로 메우는 둘째 걸음이다.
+
+```tsx
+renderRow={(item) => [
+  { content: item.name, rowLabel: `${item.name} 자세히 보기` },   // 이 칸 안이 진짜 <button> 이 된다
+  { content: item.email },
+]}
+```
+
+**왜 부르는 쪽이 짚나** — **단어 관리의 첫 칸은 체크박스**다. 첫 칸을 단추로 감싸면 단추 안에
+조작이 또 든다(오늘 (65)·0.254.0 에서 걷은 그 꼴). 그리고 코어는 `content` 가 사람 이름인지
+날짜인지 모른다. 그래서 **어느 칸이 줄을 가리키는 이름인지**를 적게 했다.
+
+`rowLabel` 이 선 줄은 **줄 자신이 탭 차례에서 물러난다** — 한 가지 일에 정지점이 둘이면 자판으로
+도는 사람이 같은 줄을 두 번 잡는다(0.254.0 에서 접기 머리에 걷은 그 꼴). 마우스로 줄 아무 데나
+누르는 길은 그대로다. **안 주면 (가) 그대로** — 열어 두되 강요하지 않는다.
+
+> **실측**(놀이터 `#table`, 2026-10-02): 단추 `181 x 48px`(줄 키를 그대로 받는다) ·
+> 칸 안에 `BUTTON` · 줄은 `tabindex` 와 설명을 내려놓음 · **표 안 정지점이 줄마다 하나(4개)** ·
+> 초점 가서 누르면 펼침 0 → 1. 표 꼴(줄 5 · 칸 3)은 그대로다.
+
+### 블록 단추 이름이 **보이는 줄 그대로** 된다 — `TrainingBlockButton` (말귀 요청 (65) 뒷자락)
+
+이름이 `itemTitle` 하나여서, 한 세트 안에 **같은 낱말이 여러 갈래에 쓰이면 소리로 안 갈렸다** —
+말귀 실측(말귀자료실 미리보기, 375px): `소음 하 문장 듣기 · 김밥` 과 `문장 순서화 · 김밥` 이
+**둘 다 `김밥`**(이런 쌍이 셋). 눈으로는 갈래가 왼쪽에 또렷한데 귀로는 길이 없었다.
+
+**`TrainingCard` 와 고칠 수 있는 폭이 달랐다** — 거기는 갈래·수가 전부 `children` 안이라 코어가
+뜻을 모르고, 여기는 **코어가 `type`·`trainingData` 를 쥐고 있다.** 가름은 *누가 재료를 들고
+있나* 였다. 그래서 여기는 코어가 짓는다: `소음 하 문장 듣기 갈비찜 4문장`.
+
+**보이는 것만 담는다** — 갈래글도 수도 **실제로 그려질 때만** 넣는다(WCAG 2.5.3: 보이는 이름이
+읽히는 이름 안에 들어 있어야 한다). 놀이터 실측으로 여섯 자리 전부 **보이는 글 == 읽히는 이름**.
+
+### `Section` 의 머리글 기본값을 **`h2` 로** 돌린다 — 아무도 안 따르는 권고는 설계가 아니다
+
+`headingLevel` 머리말에 *"주는 것을 권한다"* 고 적어 두었다. **그 권고를 아무도 안 따랐다** —
+말귀 앱 쉰일곱 자리 중 주는 자리가 **0**, 그리고 **코어 제 안의 열네 자리도 0**. 그래서 칸
+다섯이 선 화면에 머리글이 `h1` 하나뿐인 꼴이 났다.
+
+형제 다섯은 전부 **안 줘도 머리글이 선다**(`ChartSection` 3 · `Panel` 2 · `FilterPanel` 2 ·
+`TrainingCard` 3 · `TrainingCardGroup` 3). **같은 물음에 한 집안이 두 가지로 답하고 있었다.**
+
+> **값을 치른다**: 급을 안 주던 자리가 한꺼번에 `h2` 가 된다. 깊이 든 구획이면 층이 한 급
+> 건너뛴 것처럼 읽힐 수 있고, 그 자리는 숫자를 적어 고친다. **급이 틀린 것은 머리글이 아예
+> 없는 것보다 가볍다** — 틀려도 건너뛸 자리는 생기고, 없으면 길이 없다.
+> `0` 을 주면 전과 같이 `div` 다(`ChartSection.titleLevel` 과 같은 탈출구).
+
+> 옛 시험이 그 기본(`div`)을 박아 두고 있었다 — **오늘 여섯 번째**다.
+
+### 그 밖
+
+- 놀이터 `Table` 설명이 아직 `role="button"` 이라고 적고 있었다(0.253.0 에서 바뀐 것) — 고쳤다.
+  `rowLabel` 본보기도 함께 세웠다.
+- 새 문이 제 집에서 하나 잡았다: `.table-cell__row-button` 이 키의 바닥을 안 적어
+  `rawButtonHitArea` 가 울었다. `align-self: stretch` 로 줄 키를 그대로 받게 했다.
+
+### ★ 함께 나가는 미배포 꼭지
+
+### ★ 스코프 프리픽스가 `body`·`html` 로 **시작하는** 선택자를 죽이고 있었다
+
+소비자가 쓰는 배포 CSS 는 모든 선택자 앞에 `.ihabdevteam-core-scope` 를 붙인다. 그런데 **정확히 `body` 일 때만**
+스코프 원소로 갈아 끼우고, `body *` 같은 것은 그냥 앞에 붙여 `.ihabdevteam-core-scope body *` 로 내보냈다 —
+스코프 이름은 **`<body>` 자신에** 다는 것이라 그 선택자는 "body 안의 body" 를 찾는 꼴이고 **한 번도 안 맞았다**
+(말귀 실측 2026-10-02: `document.querySelectorAll('.ihabdevteam-core-scope body *').length === 0`).
+
+**딸린 뜻**: 단어표 인쇄의 "표만 남기고 나머지를 감춘다" 가 **배포본에서 한 번도 안 걸렸다.** 소비자 앱에서
+단어표를 뽑으면 옆줄·머리·단추가 함께 찍히거나 뒤에 빈 종이가 붙었을 것이다 — **이 판부터 실제로 감춘다.**
+단어표를 뽑는 화면이 있으면 한 번 뽑아 보기 바란다.
+
+빌드 쪽을 고쳤다(`postcss.config.cjs`): 머리만 스코프로 갈아 끼운다 —
+`body *` → `.ihabdevteam-core-scope *`, `body:has(.word-table) *` → `.ihabdevteam-core-scope:has(.word-table) *`.
+소스에 그런 선택자가 생기면 `test/scopePrefixBody1002.test.ts` 가 **배포 꼴까지 재서** 운다.
+
+이 자리를 찾은 길도 적어 둔다 — 나는 **원본 CSS 만 읽고** 범위를 좁혔고(`body *` → `body:has(.word-table) *`),
+그 고침도 같은 벽에 막혀 있었다. 말귀가 **배포본의 선택자가 실제로 무엇을 잡는지** 를 세어서 잡았다.
+선택자는 글자가 아니라 **무엇을 잡는지**로 재야 한다.
+
+
+> main 에는 들어갔지만 npm 에 아직 안 올린 것이다(사용자 지시 2026-10-02: "배포는 하지말고 푸시만").
+> 판을 낼 때 이 절에 번호를 붙인다 — 맨 위 *판 번호* 절은 실제 배포된 판이라야 `test/changelogShips.test.ts` 가 초록이다.
+
+### 소비자에게 먼저 — 뽑은 종이가 달라진다
+
+- **단어표·대립쌍표의 면이 순백이다**(`#fbfdff` → `--color-pureWhite`). 사장님 규칙(2026-10-02):
+  *"단어표, 대립쌍표의 표 배경은 색이 없거나 있더라도 `#fff`, `--color-pureWhite` 이어야 해."*
+  `#fbfdff`(= `--color-white`)는 화면에서는 거의 안 보이지만 **뽑으면 종이 전체가 옅은 푸른빛으로 찼다** —
+  `print-color-adjust: exact` 가 걸려 있어 브라우저가 빼 주지도 않았다. 바꾼 면은 셋이다:
+  표 한 장(`.word-table`, 인쇄 규칙 포함) · 칸 카드(`.word-table-block__card`) · 편집 칸(`.word-table-block__edit-cell`),
+  그리고 꺾쇠 변종의 **마지막 겹**(앞의 여덟 겹은 선이라 그대로다).
+  **선은 그대로다** — 절취선(`--cut-show` 의 `--color-whiteLine` 바탕 + `gap: 1px`)·외곽선·꺾쇠는 안 건드렸다.
+  칸(`.word-table-cell`)은 투명이고 **카드가 면을 쥐므로**, 카드를 순백으로 바꾸면 틈으로 선만 남는다.
+- **인쇄 때 나머지를 감추는 규칙이 단어표가 있는 문서에만 걸린다**(`body *` → `body:has(.word-table) *`).
+  전에는 코어 CSS 를 실은 **아무 문서에나** 걸려, 말귀가 고객 경과 보고서를 뽑았더니 그 장이 `.word-table` 이 아니라서
+  통째로 안 보인 채 **빈 종이**가 나왔다. `:has()` 를 못 읽는 옛 브라우저에서는 아무것도 안 감춰진다 —
+  쪽 전체가 뽑히므로 표가 빠지지는 않는다(지금의 '빈 종이' 보다 낫다).
+- **`footerStart`·`footerEnd` 가 단추의 제 밑폭을 안 지운다.** `.popup-footer__{start,end} > * { min-width: 0 }` 이
+  `.button48--bar` 의 `min-width: 160px` 까지 눌러 글자 폭이 쪼그라들었다(말귀 실측: '저장' 95px).
+  이제 `*:not(.button)` 에만 건다 — 좁을 때 줄어드는 몫은 `flex-shrink` 가 이미 한다.
+  `buttons` 배열로 주는 바닥(`.popup-footer--buttons > *`)은 전과 같다.
+
 ## 0.256.0
 
 ### 훈련 카드가 **단추 안 단추**였다 — `TrainingCard` (말귀 요청 (65))