@ihabdevteam/core 0.184.0 → 0.186.0

package/CHANGELOG.md

@@ -7,6 +7,208 @@ All notable changes to this project will be documented in this file.
 > 적은 글이라, 지금 이름으로 고쳐 놓으면 그 시절에 그 이름으로 받은 사람이
 > 제 이야기를 못 찾는다.
 
+## 0.186.0
+
+### 고침 — 폰에서 **표의 칸이 48px 로 눌렸다** (`Table`)
+
+말귀 '오늘의 듣기 현황' 은 `minmax(130px,0.9fr) minmax(140px,1.1fr) 150px 110px 160px` 을 주는데
+375px 폰에서 `48px 48px 150 110 160` 으로 서고, 글자가 세로로 쌓여 줄 높이가 161px 이 됐다.
+같은 화면의 '로데이터' 표는 멀쩡했다 — 다른 점은 **끌어 둔 폭이 저장돼 있었는가** 였다
+(2026-09-22 실측). 두 갈래로 샜다.
+
+**하나. 좁은 화면(767px 이하)에서는 폭 조절을 통째로 끈다.** 예전엔 `mobileGridTemplateColumns`
+를 준 표에서만 껐다. 그런데 손잡이는 열마다 오른쪽 끝 10px 을 `touch-action: none` 으로 먹는
+띠다 — 표를 옆으로 밀려던 손가락이 거기 닿으면 스크롤이 아니라 폭 조절이 되고, 손을 떼는
+순간 그 값이 저장소에 박힌다. 그 뒤로는 열어도 열어도 눌린 표가 나왔다. 이제 그 폭에서는
+손잡이·초기화 단추가 없고 **저장값도 안 쓴다** — 넓은 화면에서 끈 px 폭이 폰에 씌워지던 것도
+함께 막힌다(저장값은 화면 폭마다 따로 두지 않는다). 넓은 화면으로 돌아오면 그대로 돌아온다.
+
+**둘. 밑값은 만든 사람이 적어 둔 값이다.** 한 값(`MIN_COL_W` 48px)으로 깎던 것을 그 칸의
+`minmax(130px, …)` 앞칸(없으면 48px)으로 바꿨다. 고정 칸 합이 자리보다 넓을 때 유동 칸을
+눌러 버리던 쪽인데, **밑값이 있으면 지키고 넘치는 만큼 굴리는 것**(표의 가로 스크롤)이 맞다.
+끌 때와 '칸 너비 초기화' 둘 다 같은 밑값을 쓴다 — `test/tableColumnMinWidth.test.ts` 가 요구하는
+`minmax(120px, 1fr)` 도 그래야 뜻이 있다.
+
+앱이 고칠 것은 없다. `mobileGridTemplateColumns` 를 안 준 표는 폰에서 적어 둔
+`gridTemplateColumns` 가 그대로 서고, 담을 수 없을 만큼 좁으면 표가 제 가로 스크롤로 보여 준다.
+
+### 글 고침 — 숫자 size 는 **좁은 화면에서 한 급 줄어든다** (`Button`·`SegmentedControl`)
+
+`SegmentedControl` 의 size 설명이 "겉높이가 곧 size 다" 라고만 적혀 있어, `size={32}` 를 준
+고르개가 폰에서 28px 로 서는 것을 코어 버그로 의심하게 했다(말귀 '표 설정' 패널: 고르개 28 ·
+옆 항목 단추 32 — 2026-09-22 실측). 실제로는 `.button32` 가 768px 이하에서 28px 로 줄고
+`'Keyboard'`(32px)·`'Word'`(72px) 는 반응형 규칙이 없어 안 줄어드는 것이다 — **규칙은 옳고
+적어 둔 글이 사실을 빠뜨렸다.**
+
+사다리를 두 곳에 적고(1024px 이하 56→50 · 48→44 · 40→36 · 32→30, 768px 이하 56→46 · 48→40 ·
+40→34 · 32→28) `test/buttonSizeLadder0922.test.ts` 로 못 박았다 — 글이 다시 사실과 갈라지면 운다.
+나란히 세워야 하는 두 조각은 **양쪽 다 숫자 size** 를 쓰거나 **양쪽 다 Keyboard** 를 쓴다.
+
+## 0.185.0
+
+### 더해짐 — 냅 바닥에 **버그신고** 자리 (`onFeedback`)
+
+`SideNav`·`Header` 에 `onFeedback?: () => void` 를 더했다. 주면 **도움말과 계정 사이**에
+벌레(`bug`) 아이콘 단추가 서고, 안 주면 그 자리가 아예 없다(`onDebug` 와 같은 결).
+모바일에서는 머리 햄버거의 유틸 메뉴에도 같은 차례로 든다. 이름은 `nav.feedback`
+(ko "버그신고" · en "Report a bug").
+
+소비자가 떠 있는 단추(FAB)로 받던 것을 이 줄로 옮기기 위한 자리다 — 떠 있는 단추는 본문을
+가렸다(말귀 375px 대시보드: 첫 화면에서 주 단추를 20×24 덮음).
+
+### 고침 — 폰에서 **'다음 문제' 가 화면 밖으로 밀렸다** (`TrainingPagePopupBottom`)
+
+오디오 미터를 켜면 미터 두 줄(222px)이 바닥 줄에 나란히 서서 '다음 문제'(150px)를 밀어냈다 —
+375px 에서 보이는 폭이 **5px** 뿐이었고, 바닥이 `overflow: visible` 이라 굴려 꺼낼 수도 없었다.
+훈련을 이어갈 수 없는 자리다(말귀 실측 2026-09-22).
+
+폰에서는 미터를 바닥 줄에서 빼고 **토글 단추 위에 떠서** 보인다(사용자 지시). 바닥에는
+설정 · 토글 · 다음 문제만 남는다. 데스크톱은 그대로 나란히 — 거기서는 자리가 넉넉하다.
+같은 두 줄을 쓰므로 꼴이 갈라지지 않고, 토글에는 `data-tooltip-ignore` 를 둬 눌러 닫는 길이
+"바깥 누름" 과 겹치지 않게 했다(없으면 툴팁이 먼저 닫고 단추가 다시 열어 안 닫혔다).
+
+**결과 창이 뜨면 미터를 끈다**(같은 요청의 뒷부분). 결과를 보는 동안 미터가 떠 있을 까닭이
+없고, 창을 닫고 다음 판을 시작할 때도 깨끗한 자리에서 시작하는 편이 낫다. `TrainingPagePopup`
+이 결과 창의 열림을 `resultOpen` 으로 내려 준다.
+
+### 고침 — 폰의 훈련 **설정 단추가 둥근 네모였다**
+
+`type="dot"` 에 `minWidth: 52` 가 함께 붙어 폭만 늘고 높이(46)는 그대로라 52×46 이 됐다 —
+바로 옆 오디오 미터 단추(34×34 원)와 한 줄에서 어긋나 보였다. 밑폭을 걷고 `shape="pill"` 로
+원을 못 박는다. 크기는 56 그대로 — 과녁이 46px 라 손가락 권장값(44px)을 넘긴다.
+데스크톱 쪽은 글자가 함께 서는 꼴이라 손대지 않았다.
+
+### 고침 — 재생 중인 **'재생 / 멈춤' 단추가 호버처럼 보였다** (`TrainingStepAudioPlayer`)
+
+`aria-pressed="true"` 에 `transparent-white` 변형이 흰 배경을 칠한다 — 파란 판 위에서 그 하나만
+흰 알약이 되어, 옆의 이전·정지·다시듣기·다음·완료(모두 투명)와 달라 **마우스를 얹은 것처럼**
+읽혔다(말귀 실측 2026-09-22: 재생 중 `rgb(251,253,255)` vs 나머지 `rgba(0,0,0,0)`).
+
+`aria-pressed` 는 그대로 둔다 — 상태를 오가는 단추라 낭독기에 필요하다. 이 줄에서 **색만**
+제자리로 돌린다. 상태는 아이콘(▶ ↔ ⏸)이 이미 말한다. `:hover`·`:focus-visible` 은 건드리지
+않는다 — 그건 진짜 손이 닿은 표시다. 실측: 재생 중이든 멈춤이든 옆 단추들과 같은 투명.
+
+### 바뀜 — 머리 햄버거 단추의 **테두리를 걷는다**
+
+옅은 지면 위에 1px 테두리가 한 겹 더 얹혀 테두리 있는 동그라미로 보였다(사용자 지시).
+`useBorder={false}` 는 테두리를 없애는 대신 **투명**으로 두므로 자리는 흔들리지 않는다
+(실측 40×40 그대로, 테두리 `rgba(0,0,0,0)`). 호버·포커스 표시는 그대로다.
+
+### 바뀜 — `PageTitle` 의 오른쪽 자리가 아랫줄로 내려오면 **가운데**에 선다
+
+한때는 `flex-start` 였다 — 오른쪽에 붙이면 제목과 어긋나 화면 오른쪽에 홀로 떠 있는 것처럼
+보였기 때문이다. 그 진단은 맞았지만 답이 한 칸 모자랐다: 여기 서는 것(세그먼트 고르개·단추
+하나)은 제목처럼 줄글이 아니라 **덩어리**라 왼쪽에 붙여도 한쪽에 몰린 것으로 읽힌다. 가운데가
+그 둘 사이다(사용자 지시). 실측(375px): 아랫줄 자리의 좌우 여백이 36px 로 같다.
+
+### 고침 — `Toolbar` 가 줄을 바꾸면 우측 묶음의 **안쪽이 왼쪽부터 깔렸다**
+
+`.toolbar__row-end` 에는 이미 `justify-content: flex-end` 가 있었다. 그런데 그 한 자식(기간
+조작 `.manager-section-controls`)이 제 안에서 줄을 바꾸며 **줄 전체로 늘어나면** 정렬할 여지가
+없어진다 — 우측 묶음은 오른쪽에 붙었는데 그 안은 왼쪽에 붙는 꼴이었다(말귀 375px 실측).
+늘어나는 것 자체는 막지 않는다(막으면 좁은 화면에서 그 묶음이 제 줄을 못 쓴다). 대신
+**늘어나도 안쪽이 오른쪽에 서게** 한다. 실측(335px): 오른쪽 여백 55px → **0**.
+
+### 고침 — 폰에서 음절 칸이 **세로 알약으로 찌그러졌다** (`PhonemeSelectBlock`)
+
+폭이 33px 까지 눌려 높이(64)만 남고, 그 안의 자모 셋이 10px 짜리 막대로 섰다(말귀 375px 실측).
+까닭은 **퍼센트의 순환**이었다 — 알약에 `width: min(240px, 100%)` 을 줬는데 그 100% 는 감싸개
+폭을 되참조하고, 감싸개 폭은 다시 알약의 **속 내용**으로 정해진다. 빈 칸에서는 속이 거의 없어
+둘이 함께 쪼그라들었다. 폭을 바깥(`__cells`)에서 받는 감싸개가 정하게 해 순환을 끊었다.
+대립쌍 묶음(`__cell-group`)도 같은 자리라 함께 고쳤다. 실측: 네 칸 모두 **240×64**, 자모 셋이
+각각 79px, 넘침 0. 넓은 화면(240×80)은 그대로다.
+
+### 고침 — `Toolbar` 의 **'N개씩 보기' 와 쪽수가 따로 접혔다**
+
+둘은 같은 것(목록의 쪽)을 다루는 짝인데 낱낱의 flex 항목이라, 줄이 바뀔 때 페이지 크기만
+남고 쪽수가 다음 줄로 떨어졌다(사용자 지시). 한 덩어리(`.toolbar__pager`)로 묶고 그 안에서는
+줄을 바꾸지 않는다 — 좁으면 통째로 내려간다.
+
+### 고침 — 좁은 화면에서 **누를 수 없거나 읽을 수 없던** 자리들 (말귀 2026-09-22 실측)
+
+**`BottomNav` — 양끝 단추가 반쯤 잘려 못 눌렀다.** 폭을 `.bottom-nav__items` 에서 쟀는데
+그 상자는 `flex:1` 이라 "…"(구분선 1px + 52px 칸)가 서면 53px 줄어든다 — **판정 결과가
+다시 잰 값을 바꾸는 순환**이었다. 지난 렌더에 "…" 가 섰는지 기억해 되돌리는 보정을 뒀지만,
+그 기억이 맞지 않는 길(유틸이 뒤늦게 붙는 화면)에서는 어긋나 다섯 칸을 249px 상자에 그려
+양끝 25·26px 이 잘렸다(375px /word-training). 화면마다 결과가 달랐다.
+이제 **바 전체에서 왼쪽 묶음만 뺀 폭**으로 잰다 — 몇 칸을 그리든, "…" 가 섰든 아니든 같은
+값이라 기억도 보정도 없앴다. 어긋나면 잘리는 대신 항목 수가 준다.
+
+**`Calendar` — 폰에서 방문 이름표가 못 읽혔고, 태블릿에서는 칸이 잘려 나갔다.**
+칸에 박혀 있던 `min-width: 118px` 은 767px 이하에서만 풀렸는데, 칸이 좁아지는 것은 창이
+아니라 **담긴 자리**가 정한다 — 768px 태블릿에서 카드 안쪽이 555px 이라 일곱 칸이 850px 를
+우겨 목·금·토가 조상의 `overflow: hidden` 에 잘렸다(1108px 창에서도 같다). 상한을 걷었다.
+그리고 칸을 컨테이너로 삼아, **칸 안쪽이 96px 밑이면** 이름표 대신 `● 2`(몇 건)를 보인다 —
+자세한 것은 날을 눌러 본다. 실측: 격자 850px(칸 118) 이름표, 700·555·247px 은 몇 건, 어느
+폭에서도 넘치지 않는다.
+
+**`Popup` 머리 — 오른쪽 묶음이 줄지도 접히지도 않아 제목을 0 으로 눌렀다.** 묶음이
+`flex-shrink: 0` 이라 제 속 너비를 끝까지 우기고 제목만 눌려, 좁은 화면에서 제목이 한 글자씩
+세로로 쏟아졌다. 머리가 줄을 바꾸게 하고 제목에 밑바닥(220px)을 줬다 — 그 아래로는 오른쪽
+묶음이 아랫줄로 내려간다(실측 360px 패널: 제목 320px 한 줄, 묶음은 다음 줄).
+
+**`ChartSection` 머리 — 좁은 화면에서 설명이 카드 밖으로 나갔다.** 767px 이하에서 머리를
+세로로 세우면서 기본 규칙의 `flex-wrap: wrap` 을 그대로 뒀는데, 세로에서 그 줄바꿈은 아랫줄이
+아니라 **오른쪽 새 칸**을 만든다 — 머리 높이가 정해지는 자리(격자 칸)에서 셋째인 설명이 옆
+칸으로 빠져 카드 밖 141px 까지 나갔다(말귀 375px 문장훈련 분석 갈래 카드). 세로에서는 줄을
+바꿀 일이 없으므로 `nowrap` 으로 덮는다. 실측(255px 카드): 카드 밖 57px → 카드 안 18px.
+
+**`Section` 머리 — 설명이 길면 카드를 밀어낼 수 있었다.** `.section__title-row`·
+`__title-group` 에 `min-width: 0` 이 없어, flex 기본값(auto)이 자연 폭만큼 버틴다. 바닥을
+내렸다. (말귀가 보고한 `.manager-section__disc` 넘침은 이 판에서 재현되지 않았다 —
+`ChartSection` 의 그 자리는 0.166.0 부터 `flex: 0 0 100%` 로 한 줄을 차지한다.)
+
+### 고침 — 폰에서 **채점을 할 수 없던** 자리들 (말귀 2026-09-22 실측)
+
+**표가 통째로 사라졌다.** `useFitScale` 이 높이까지 맞출 때는 부모를 재는데, 그 부모가 제
+높이를 안 가진 자리에서는 0 이 나온다 — 그대로 나누어 **배율이 0** 이 됐다(375px 채점 창:
+`scale(0)`). 칸이 없으니 채점을 할 수가 없었다. 잰 값이 0 이면 그 잣대를 안 쓴다 — 폭만으로
+줄이고 세로로는 굴려 본다. 실측: 부모 높이를 0 으로 만들어도 배율이 0.22 로 남는다.
+
+**한 번 0 이 되면 돌아오지 못하던 것도 같은 자리다.** 축소된 내용의 높이가 0 이면 부모도
+계속 0 이라, 창을 열어 둔 채 기기를 돌리면(812×375 ↔ 1024×768) 표가 사라진 채 어느 크기로
+돌려도 안 돌아왔다. 0 을 "못 잼" 으로 읽어 그 고리를 끊었고, **폭을 못 재는 순간에는 아예
+값을 바꾸지 않는다**(숨겨졌거나 아직 자리를 못 잡은 때 — 지난 값을 지킨다).
+실측: 부모를 높이 0 → 400 → 숨김 → 다시 보임으로 돌려도 배율이 0.7676 로 그대로다.
+
+**그리고 폰에서 0 이 나온 진짜 까닭은 "잘못 잰 0" 이 아니라 배치가 실제로 0 을 준 것이었다.**
+좁은 화면에서는 '표 설정' 패널이 세로로 쌓여 본문보다 커지는데(말귀 실측: 설정 566px ·
+본문 480px), 그 패널은 제 속 높이 아래로 안 줄어든다 — 남는 높이가 0 이라 `flex: 1` 인 표
+칸이 0 을 받았다. 767px 이하에서는 **높이에 맞춰 줄이는 셈을 포기하고** 설정과 표를 세로로
+잇는다(굴림은 이미 한 층 위 `.popup-content` 가 쥐고 있다). 표 칸에는 밑높이 320px 을 준다.
+실측(343px 창): 표 칸 0 → 320px, 바깥이 520/942 로 굴러간다. 768px 이상은 전과 같다.
+
+**○ · △ · ✕ 가 hover 에서만 나타났다.** 안 매긴 칸의 단추 셋은 `:hover`·`:focus-within`
+으로만 보였는데 폰·태블릿에는 hover 가 없다 — 영영 0×0 이라 **채점을 시작할 수가 없었다**.
+`@media (hover: none)` 에서는 셋을 늘 보인다.
+
+**채점 단추가 표와 함께 줄어들었다.** ○ · △ · ✕ 는 표 안에 있어 배율을 그대로 받는다 —
+폰에서 배율이 0.28 이면 40px 단추가 **11px** 이 되어 손가락으로는 못 누른다. 빈칸이 쓰던 것과
+같은 되돌림을 씌우되, 끝까지 되돌리면 단추 셋(128px)이 칸보다 넓어져 옆 칸을 침범하므로
+**칸 폭을 천장**으로 둔다. 셈: 11px → **33px**(행 폭은 칸 폭과 같아진다). 넓은 화면(배율 1)
+에서는 1 이라 아무것도 달라지지 않는다.
+**아직 손가락 권장값(44px)에는 못 미친다** — 거기까지 가려면 단추를 두 줄로 접거나 칸 밖
+띠로 빼야 하는데, 그건 채점 화면의 꼴을 바꾸는 일이라 이 판에 넣지 않았다.
+
+**안내문이 안 되는 길을 가리켰다.** "칸을 눌러 ○ · △ · ✕ 를 매기세요" 였는데 칸을 눌러도
+아무 일이 없다 — 매기는 것은 슬롯 단추뿐이다. 칸을 눌러 ○→△→✕ 로 도는 길은 **넣지 않았다**:
+같은 자리에서 칸을 끌어 옮기는 동작과 부딪힌다. 대신 말을 동작에 맞췄다 — "칸 아래
+○ · △ · ✕ 를 눌러 매기세요. 마우스로는 칸에 손을 얹으면 나타납니다."
+
+**창 바닥 단추가 잘렸다.** 120px 짜리 셋(408px)이 353px 바닥에 그대로 서서 마지막 단추의
+오른쪽 55px 이 잘렸고, 잘린 쪽은 눌리지도 않았다. 바닥이 줄을 바꾸고, 그 전에 단추가 먼저
+줄어든다(`min-width: 0`). 실측: 393px 바닥에서 글자 폭대로면 한 줄에 들어가고, 120px 로
+묶어 두면 두 줄로 내려가며 어느 쪽도 잘리지 않는다.
+
+**이미지 칸에서 채점 표시가 발음 글자를 덮었다**(세로 23px · 가로 40px). 이미지가 있는 칸만
+바닥에 채점 줄 자리(48px)를 비운다 — 글자만 있는 칸은 56px 떨어져 멀쩡하므로 그대로 둔다.
+
+### 바뀜 — `FilterPanel` 의 세그먼트를 **32** 로
+
+같은 패널의 항목 단추(`size: "keyboard"` = 32)와 한 줄에 서는데 혼자 40 이라 커 보였다
+(사용자 지시). 40 이던 까닭으로 적혀 있던 "옆 Dropdown·TextField(40)와 맞춘다" 는 실제와
+달랐다 — 세그먼트를 쓰는 패널(단어표 '표 설정')에는 Dropdown 도 TextField 도 없다.
+
 ## 0.184.0
 
 ### 고침 — 빈 화면 아이콘의 **상자와 그림이 따로 놀았다** (`EmptyState` · `ErrorState`)