@ihabdevteam/core 0.253.0 → 0.255.0

package/CHANGELOG.md

@@ -7,6 +7,72 @@ All notable changes to this project will be documented in this file.
 > 적은 글이라, 지금 이름으로 고쳐 놓으면 그 시절에 그 이름으로 받은 사람이
 > 제 이야기를 못 찾는다.
 
+## 0.255.0
+
+### 토스트가 긴 말을 잘랐다 — **잘리는 쪽이 늘 "할 일"** (말귀 요청 (64))
+
+`.toast__inner` 가 `white-space: nowrap` + `text-overflow: ellipsis` 였다. 그런데 이 앱의
+오류 문구는 거의 다 **"무엇이 잘못됐나 + 무엇을 하라"** 두 문장이고(코어 `toUserErrorMessage`
+가 내주는 말도 그 꼴이다), 한 줄에 안 들어가면 **뒷문장 — 할 일 —** 이 사라졌다:
+`네트워크 연결이 불안정합니다. 연결 상태를 확…` 까지만 읽혔다.
+
+말귀 실측(`scrollWidth - clientWidth`, 2026-10-02): 320 에서 98~125px, 375 에서 70~98px,
+**1440 에서도** 가장 긴 말이 `max-width: 520px` 에 닿아 19px 잘렸다 — 좁은 화면만의 일이
+아니었다. 가운데 맞춤이라 **말줄임표가 눈에 안 띄어** 오래 안 드러난 자리이기도 하다.
+
+이제 줄을 넘긴다. 칸이 이미 `min-height: 60px` 에 가운데 맞춤이라 두 줄이 자연스럽게 들어간다.
+줄 수는 **셋**에서 멎는다 — 알림이 화면을 덮으면 그것대로 곤란하다. 두 문장짜리는 두 줄에 다
+들어가므로 실제로 잘릴 말은 아주 긴 것뿐이다. `pre-line` 이라 부르는 쪽이 넣은 줄바꿈 문자도 산다.
+
+| 글 | 320 | 375 | 넓은 화면 |
+|---|---|---|---|
+| 네트워크 연결이 불안정합니다. 연결 상태를 확인한 뒤 … | **0** (2줄) | **0** (2줄) | 0 (1줄) |
+| 이용권 정보를 불러오지 못했습니다. 네트워크 상태를 … | **0** (2줄) | **0** (2줄) | **0** (2줄, 520x92) |
+| 단어 자료를 불러오지 못했습니다. | 0 (1줄) | 0 (1줄) | 0 (1줄) |
+
+> **꼴이 한 겹 늘었다** — 글이 `<span class="toast__text">` 안에 든다. 줄 수 상한
+> (`-webkit-line-clamp`)은 `display: -webkit-box` 를 요구하는데 겉칸은 가운데 맞춤 때문에
+> `display: flex` 여야 한다. **둘을 한 상자에 못 담는다.** 읽히는 글자는 그대로라
+> `textContent` · `getByText` · `role="status"` 로 찾는 길은 안 바뀐다.
+>
+> 앱이 `.toast__inner` 에 글자 꼴을 걸어 뒀다면 그대로 물려받는다(상속되는 속성).
+> 다만 **글자 상자 자체**를 겨눈 규칙(`overflow` · `white-space` 같은 것)이 있으면
+> `.toast__text` 로 옮겨야 한다.
+>
+> **jsdom 은 자리를 못 잰다** — 위 표는 브라우저 실측이다(놀이터 `#toast`, 진짜 토스트
+> 하나와 같은 클래스로 세운 측정용 몇). 시험은 규칙과 꼴을 지킨다.
+
+## 0.254.0
+
+### 접히는 머리의 **단추 안 단추**를 걷는다 — `Table` (사장님 지시)
+
+0.253.0 에서 남겨 둔 자리다. `.table-header` 가 접을 수 있을 때 `role="button"` ·
+`tabIndex=0` 이었는데, **그 안에 이미 진짜 `<button>`("접기"/"펼치기")이 있었다.**
+
+- **단추 안 단추** — `role="button"` 안에 초점 받는 단추가 또 있다(HTML·ARIA 위반).
+- **한 가지 일에 탭 정지점이 둘** — 자판으로 도는 사람은 같은 '접기' 를 두 번 잡는다.
+- `.table` 이 `role="table"` 이 된 뒤로는 그 단추가 나무에서 **표의 바로 아래 아이**로 서서
+  표의 꼴까지 흐렸다. (56) 전에는 "표 안" 이라는 것 자체가 없었으니 **이 어긋남은 0.253.0 이
+  만든 것**이다.
+
+이제 머리는 **늘 `caption`** 이다. 역할·정지점·여닫힘(`aria-expanded`)을 **안쪽 진짜 단추**로
+옮겼다 — 여는 것이 그것이니 상태도 그것이 말해야 한다. 손으로 붙이던 `onKeyDown` 은 지웠다:
+진짜 단추라 Enter·Space 는 브라우저가 처리하고, "머리 안 단추에서 누른 키는 그 단추 몫"
+이라는 가드도 저절로 선다.
+
+**머리 아무 데나 눌러 접는 손맛은 그대로다** — `onClick` 이 그대로 있고, 안쪽 단추가 낸
+클릭도 머리로 올라와 **한 번만** 불린다.
+
+> **markup 이 바뀌었다** — 손 모양·hover 를 `.table-header[role="button"]` 로 잡던 것을
+> `.table-header--clickable` 클래스로 옮겼다(`.table-row--clickable` 과 같은 결). 앱이
+> `.table-header[role="button"]` 을 제 CSS 로 겨누고 있으면 그 줄을 클래스로 바꿔야 한다.
+
+> **실측** (놀이터 `#table`, 2026-10-02): 표의 바로 아래 아이가
+> `caption · presentation · rowgroup` 셋뿐이고 그중 `button` 은 없다.
+> `caption > button "접기"` 가 `aria-expanded="true"` 를 들고, 접으면 `펼치기` ·
+> `aria-expanded="false"` 로 뒤집힌다. 머리를 눌러 접고 안쪽 단추로 펴는 길이
+> **각각 한 번씩** 불린다(두 번 불리면 접자마자 다시 펴진다).
+
 ## 0.253.0
 
 ### `Table` 이 **진짜 표**가 된다 — 말귀 요청 (56), 사장님 결정 **(가)**