@ihabdevteam/core 0.329.0 → 0.331.0

package/CHANGELOG.md

@@ -7,6 +7,108 @@ All notable changes to this project will be documented in this file.
 > 적은 글이라, 지금 이름으로 고쳐 놓으면 그 시절에 그 이름으로 받은 사람이
 > 제 이야기를 못 찾는다.
 
+## 0.331.0 — (307) 다시 듣기 셋 — 사장님 지적 · 말귀_1 실측
+
+### ① 줄을 **가운데**로 맞춘다 — `baseline` 이 아니다
+
+`baseline` 이면 `display:flex` 인 단추의 **제 안 아이콘 바닥**이 기준선이 된다. 그래서 32px
+단추가 줄 높이를 정하고 26px 낱말이 위로 밀렸다. 브라우저 실측(놀이터 1280px, 한 줄짜리
+여섯 줄): `baseline` → **3.5px** 어긋남, `center` → **0**. 말귀_1 이 앱에서 3px 로 같은 것을 쟀다.
+
+> 0.328.0 에서 단추에만 `align-self: center` 를 건 것은 **아무 일도 안 했다** — 단추가 이미
+> 줄을 꽉 채우니 제 안에서 가운데로 가도 그대로다. 줄을 맞춰야 한다. 그 글이 남아 있으면
+> 다음 사람이 또 그 길로 가므로 함께 걷었다.
+
+### ② 단추가 **변형을 받지 않는다** — 기본이다
+
+사장님이 화면에서 두 번 짚으셨다. 앱은 이 자리를 못 바꾼다 — 코어가 넘기는 prop 이고,
+앱 CSS 로 코어를 겨누지 않는 것이 이 집 규약이다. 그래서 코어가 뗀다.
+
+### ③ **코어가 그 문항을 읽을 때 쓴 길을 그대로 탄다**
+
+0.328.0 은 부르는 쪽이 넘긴 주소 하나만 봤다. 그래서 **정식 음원이 없는 낱말에는 단추가
+아예 안 섰다** — 말귀_1 실측으로 다섯 줄 중 둘(다른 판에서는 다섯 중 셋)이 그랬다.
+그런데 **훈련 중에는 다 들렸다**: 코어가 리졸버와 합성으로 읽어 주고 있었다. 다시 듣기만
+반쪽을 보고 있었던 것이다.
+
+길은 넷이다 — ① 넘긴 날 주소 ② `urlResolver`(저장소의 정식 음원) ③ `fallbackUrlResolver`
+(그때 합성) ④ 브라우저 `speechSynthesis`. 이 차례가 `TrainingWordCard` 와
+`TrainingStepAudioPlayer` 에 **두 벌**로 적혀 있었고, 팝업에 세 벌째를 쓰지 않으려고
+`src/components/Training/questionSoundRoute.ts` 하나로 모았다. **재생과 임자(자물쇠)는 거기서
+안 다룬다** — 부르는 쪽마다 쥐는 법이 다르고 그 다름이 각자의 내력에 적혀 있다.
+
+이제 단추가 서는 조건은 "주소를 받았나" 가 아니라 **"코어가 이것을 읽을 길이 있나"** 다.
+앱이 주소를 지어 넘기지 않아도 된다.
+
+**날 주소는 누름 그 자리에서 튼다.** 차례를 다 모은 뒤에 틀도록 짰더니 `await` 가 하나
+끼었고, 그러면 자동재생 막음이 `play()` 를 거절할 수 있다 — 누름의 표가 `await` 를 못 넘는
+브라우저가 있다. 시험 셋이 그 바뀜을 잡았다.
+
+**임자 셈으로 "못 틀었다" 와 "사람이 멈췄다" 를 가른다.** `done` 은 둘 다 거짓이다. 그것만
+보고 다음 주소로 넘어가면 **멈추라고 누른 사람이 다음 소리를 듣는다.**
+
+브라우저 끝까지 실측(놀이터, 주소가 하나도 없는 여섯 줄): 단추 6/6 · 누르니
+`speechSynthesis.speaking === true` · 이름표가 `1번 듣기 멈춤` · 다시 누르니 멈춤 · 오류 0.
+
+### 옛 결정 하나를 **고쳐 적는다**
+
+(303) 때 *"못 찾으면 단추를 안 그린다 — 안 넘기는 쪽은 지금과 똑같아야 한다"* 로 적어 둔
+것이 반쪽이었다. 그 글을 시험 머리말에서 고치고, 길이 **하나도 없을 때만** 안 선다로 바꿨다.
+그 둘을 세던 못도 다시 적었다 — jsdom 에 말소리가 없어 **우연히** 초록이던 자리다.
+
+못 일곱을 더 세우고 **다섯 가지로 깨 봤다**(단추 조건을 옛 꼴로 · 폴백을 길에서 빼기 ·
+임자 셈 빼기 · `baseline` 되돌리기 · 변형 되살리기). 임자 셈 깨기는 **처음에 안 울렸다** —
+고리 머리의 검사가 남아 반만 뺀 것이었다. 제대로 빼니 울었다.
+
+## 0.330.0 — (304) 문턱이 **헛돌았다** — 말귀_1 실측 (0.328.0 회귀)
+
+말귀_1 이 앱에서 쟀다: 375×812 채점지에서 그려진 재생 단추가 **9.5px** 인데
+`--tap-too-small` 이 붙은 칸은 **0개**였다. 제 놀이터에서 다시 재니 **7.48px · 57칸 중 0칸**
+이었다. **24px 문턱이 통째로 아무 일도 안 하고 있었다.**
+
+### 까닭 — 단추에 **안 듣는** 배율로 쟀다
+
+0.328.0 은 `buttonSize * scale` 로 쟀다. 그 `scale` 은 칸이 **제 안에서** 글을 맞추는
+배율이고, 재생 단추는 `.word-table-cell__inner` **밖**에 있어 그 변형을 **안 받는다.**
+실제로 듣는 것은 `.word-table` 에 걸리는 `useFitScale` 배율 하나뿐인데, 칸은 그것을
+**제 힘으로 알 수 없다** — `ResizeObserver` 의 `contentRect` 는 변형 **전** 레이아웃 상자다.
+
+고침은 가진 쪽이 내려 주는 것이다. `WordCell` 이 `outerScale` 을 받고, `WordTable` 이
+`useFitScale` 의 배율을 그리는 자리 **둘 다**에 준다.
+
+브라우저 실측(놀이터, 고친 뒤):
+
+| 표 배율 | 그려진 단추 | `--tap-too-small` |
+|---|---|---|
+| 1 | 34px | 0칸 (16칸·4칸 표 모두) |
+| 0.5699 | 19.4px | 57칸 전부 |
+| 0.2199 | 7.5px | 57칸 전부 — **고치기 전에는 0칸** |
+
+### 이 자리의 못 **둘이 다 죽어 있었다**
+
+- 하나는 **이름이 거짓이었다.** *"문턱은 그려진 크기로 잰다"* 라면서 적은 것은
+  `buttonSize * scale` — 레이아웃 크기였다. 이름이 말하는 것과 다른 것을 재며 초록이었다.
+- 하나는 **태어날 때부터 아무것도 안 셌다.** `/tooSmall\s*&&/` 를 찾았는데 파일에 있는
+  이름은 `tapTooSmall` 이다(대문자 `T`). `git log -S"tooSmall &&"` 로 세어 보니 그 글자는
+  이 파일에 **한 번도 없었다.** 어제 세우면서 깨 보지 않았다.
+
+그래서 못을 셋으로 다시 세웠고 **세 가지로 깨 봤다** — ㉮ 그리는 자리 하나에서 배율을
+빼기(어제 결함 그대로) ㉯ 옛 셈으로 되돌리기 ㉰ 깃발로 마디를 가리기. 셋 다 울었다.
+깃발 이름은 **코드에서 뽑아** 쓴다(글자로 박으면 또 이름이 바뀌는 날 죽는다).
+
+### 가정을 글이 아니라 **DOM 으로** 센다
+
+`buttonSize * outerScale` 이 맞는 까닭은 단추가 `__inner` **밖**에 있기 때문이다. 누가
+안쪽으로 옮기면 두 배율을 곱해야 한다. 글로 적어 두면 옮기는 사람이 안 읽으므로,
+jsdom 에 **그려서** `inner.contains(play) === false` 를 센다.
+
+경계도 **양쪽을** 박았다 — 문턱 −1 은 걸리고, 문턱과 같으면 안 걸리고(WCAG 는 24 를
+포함한다), 문턱 ×2 도 안 걸린다. 24 를 글로 안 박고 코드에서 읽어 쓴다. **늘 걸리는 것도
+결함**이라서다 — 큰 표에서 재생을 못 쓴다.
+
+> 인쇄 쪽(종이에서 되살아나는가)은 **아직 못 쟀다.** 화면에서 감춰지는 일이 이제야
+> 일어나니, 말귀_1 이 숨은 iframe 문서로 재 준다.
+
 ## 0.329.0 — 못 일곱을 고쳐 **셈을 바로잡는다** (연장·관문)
 
 사장님이 꼽아 주신 일곱을 차례대로 고쳤다. 몸통은 하나다 — **못이 셈을 잘못 하거나,