@ihabdevteam/core 0.247.0 → 0.249.0

package/CHANGELOG.md

@@ -7,6 +7,100 @@ All notable changes to this project will be documented in this file.
 > 적은 글이라, 지금 이름으로 고쳐 놓으면 그 시절에 그 이름으로 받은 사람이
 > 제 이야기를 못 찾는다.
 
+## 0.249.0
+
+### 누름감이 글자 높이였다 — `.training-card__publisher` 외 세 자리 (말귀 요청 (61))
+
+말귀 실측(320x720): 게시자 이름 단추가 **29 x 13px**. `padding: 0; font-size: 11px` 이라 글자
+높이가 곧 누름감 높이였다. WCAG 2.5.8(AA) 의 24x24 에 못 미치는데, **"사이가 떨어져 있으면
+봐준다" 예외를 여기서는 못 쓴다** — 빗나간 손가락이 빈 데가 아니라 260px 짜리 카드에 닿아
+**게시자를 보려다 훈련 세트 상세가 열린다.**
+
+안쪽 여백으로 넓히고 같은 값의 음수 바깥여백으로 되돌렸다 — 보이는 자리와 자리차지는
+그대로이고 누름감만 24px 이 된다. **가로는 안 넓혔다**: 옆에 선 것은 누를 것이 아니라 그냥
+글자라 가로 방향은 2.5.8 의 간격 예외가 실제로 덮고, 넓히면 날짜 글자를 눌러도 게시자가
+열려 더 어긋난다. 막힌 쪽은 세로였다.
+
+> `.top-banner__dot` 이 쓰는 투명 `::after` 는 여기서 못 쓴다 — 이 단추는 말줄임을 위해
+> `overflow: hidden` 이라 상자 밖으로 뻗은 의사요소가 **잘린다.**
+
+**셈이 같은 집안 세 자리를 더 찾았다.** 말귀가 짚은 것은 하나였다.
+
+| 자리 | 전 | 후 |
+|---|---|---|
+| `.training-card__publisher` | 29 x 13 | 누름감 24 |
+| `.alert__dismiss` | 20 x 20 | 24 x 24 |
+| `.notice-box__dismiss` | ~23 x 22 | 24 x 24 |
+| `.file-upload__remove-button` | 14 x 14 | 24 x 24 |
+
+넷 다 **보이는 모양은 안 바뀐다** — 배경 없는 투명한 상자만 커진다.
+
+> 새 문(`test/rawButtonHitArea.test.ts`)이 **맨 `<button>` 을 그리는 자리 스물여섯을 센다.**
+> `Button` 조각을 거친 것은 `size` 가 키를 주니 애초에 안 센다 — 새는 자리는 맨 단추를
+> 직접 그리고 CSS 로만 꾸민 쪽이다. 묻는 것은 "몇 px 인가" 가 아니라 **"키의 바닥을
+> 적어 두었나"** 다. CSS 글만 보고 실제 높이를 셀 수는 없다(글꼴·줄높이·부모가 섞인다).
+
+### 단추 이름에 붙은 수가 **남의 것**이었다 — `Header` · `BottomNav` (말귀 요청 (62))
+
+머리의 메뉴 단추가 `메뉴 열기, 3개` 였다. 3 은 안 읽은 알림 수인데 이름은 "메뉴에 3개가
+들어 있다" 로 읽힌다 — 열어 보면 다섯이다.
+
+`nav.badgeLabel`("{{label}}, {{count}}개") 자체는 멀쩡하다. 그 뜻은 **"칸 이름 + 그 칸의 수"**
+이고 `SideNav`·`BottomNav` 의 낱낱 칸, `MenuTooltip` 의 항목은 그 뜻에 맞다. 어긋난 것은
+**닫힌 것**의 이름에 그 열쇠를 쓴 자리다. 그래서 열쇠를 하나 더 뒀다 —
+`nav.badgeInsideLabel`("{{label}}, 안에 알림 {{count}}개"). **`badgeLabel` 에 다른 뜻을 겹치지
+않았다**: 그러면 맞는 세 쓰임이 서로를 막는다.
+
+**여기도 자리가 둘이었다.** `BottomNav` 의 `…` 단추도 넘친 항목·유틸의 배지를 **합한** 수를
+제 이름에 붙이고 있었다(`더보기, 3개`). `activeMore` 가 있을 때는 더 어긋났다 — `설정, 3개`
+의 3 은 알림의 것이었다.
+
+> 새 문이 **두 열쇠가 쓰이는 파일을 센다**(`badgeLabel` 셋 · `badgeInsideLabel` 둘).
+> 다음에 하나가 더 붙으면 "그 수가 정말 그 칸의 것인가" 를 먼저 묻게 된다.
+>
+> 옛 시험 둘이 `메뉴 열기, 3개` 를 글자 그대로 박고 있었다 — **시험이 결함을 붙들고 있던
+> 꼴**이다. 값이 아니라 뜻을 묻게 고쳤다.
+
+## 0.248.0
+
+### 안내 한 줄이 칸과 **이어진다** — `PanelRow` `helperText` (말귀 요청 (60)①)
+
+`PanelRow variant="input"` 은 `error` 와 `helperText` 를 다 받는데, **같은 가림막이 내는 두
+말이 전혀 다르게 갔다.** `error` 는 `TextField` 로 내려가 `role="alert"` 과
+`aria-describedby` 를 얻고, `helperText` 는 `PanelRow` 가 제 자리에 `<div>` 로 그리고 **아무
+데도 안 걸었다** — "이 낱말을 내면 제안이 아니라 투표가 된다" 는 안내가 눈에만 보였다.
+
+이제 안내에 id 가 붙고 칸의 `aria-describedby` 에 걸린다. 꼴도 `string` → `ReactNode` 로
+넓혔다 — 값에 따라 바뀌는 안내는 앱이 `<span role="status">` 로 감싸 그 자리에서 알릴 수 있다
+(`aria-describedby` 는 **초점이 올 때만** 읽힌다).
+
+> **`error` 로 보내면 될 일이 아니었다.** `error` 는 `aria-invalid` 까지 세워 "틀린 값" 이라고
+> 말한다. 안내는 틀렸다는 말이 아니다 — 그래서 안내인 채로 이었다.
+
+함께 `TextField` 에 `ariaDescribedBy` 가 생겼다. 안의 것(`helperText`·`error`)을 **덮지 않고
+잇는다** — 덮으면 오류가 뜬 순간 바깥 안내가 사라지거나, 반대로 오류가 안 읽힌다.
+
+### 방문 이름표가 **어느 날**인지 말한다 — `Calendar` (말귀 요청 (60)②)
+
+이름표 `aria-label` 이 "12시 55분 지한 예약" 이었다. 그 글은 안의 글자를 **대신하므로** 칸
+왼쪽 위의 날 번호는 낭독기에 같이 가지 않는다 — 한 달에 스무 건이 서면 스무 번 똑같이
+들렸다. 날을 이름 맨 앞에 적는다. 좁은 칸에서 이름표 대신 서는 **건수 표시("방문 2건")도
+같은 자리**라 함께 고쳤다.
+
+> 달 칸을 `role="gridcell"` 로 세워 날을 함께 읽히는 길도 있다. 그러나 `grid` 는 화살표로
+> 칸을 옮기는 것까지 약속하는 역할이라(ARIA APG), 그 약속 없이 이름만 바꾸면 더 어긋난다.
+> 말귀도 그쪽은 요청하지 않았다.
+
+### 막대·링이 제목 급을 넘긴다 — `BarChart` · `RingChart` `titleLevel` (말귀 요청 (60)③)
+
+(51) 에서 `ChartSection` 에 급을 뚫었는데, 앱이 실제로 부르는 것은 **`BarChart`·`RingChart`**
+다. 둘이 `titleLevel` 을 안 받으니 부르는 쪽은 급을 정할 길이 없고 늘 기본 3 이 나갔다 —
+대시보드 제목이 `h1` 이면 층이 h1 → h3 로 한 급 비어 읽힌다. **문은 열렸는데 손잡이가 안
+달려 있던 꼴**이다.
+
+> 새 시험이 `<ChartSection` 을 그리는 **파일 수를 센다.** 감싸는 것이 하나 더 생기면 그쪽에도
+> 급을 달아야 하는데, 안 달면 또 조용히 기본 3 이 나간다 — `headingFamily` 와 같은 셈이다.
+
 ## 0.247.0
 
 ### 단추 안의 단추가 **다른 이름**을 갖는다 — `CategoryIcon` (말귀 요청 (58))