@ihabdevteam/core 0.176.0 → 0.178.0

package/CHANGELOG.md

@@ -7,6 +7,58 @@ All notable changes to this project will be documented in this file.
 > 적은 글이라, 지금 이름으로 고쳐 놓으면 그 시절에 그 이름으로 받은 사람이
 > 제 이야기를 못 찾는다.
 
+## 0.178.0
+
+### 소비자에게 먼저 — 앱이 덮고 있던 자리 넷을 코어가 쥔다
+
+말귀가 문장훈련 분석 화면을 굳힌 뒤 **모아서 청한 묶음**이다(2026-09-17). 넷 다 앱 CSS 로 덮고 있던 자리이고,
+이 판을 받으면 그 덮개를 걷을 수 있다. 소비자가 손댈 것은 없다 — 새 prop 은 모두 **안 주면 예전 그대로** 다.
+
+- **`ChartSection subRowAlign`**(`'start'` 기본 · `'center'` · `'end'`): 서브로우에 선 것들의 세로 맞춤.
+  수(설명 한 줄 + 큰 수, 두 줄)와 **32px 고르개**가 함께 서면 고르개가 위에 붙어 아래가 29px 비었다
+  (말귀 실측: 서브로우 61.4px · 고르개 32px). `'center'` 면 수가 가장 높으므로 **수의 자리는 안 바뀌고** 낮은 것만 가운데로 온다.
+  기본을 안 바꾼 것은 이미 선 화면 셋의 **범례**가 함께 움직이기 때문이다(범례는 첫 줄부터 읽는 편이 낫다).
+- **`SegmentedControl` 32 짜리 칸의 기본 최소 폭 64 → 80px**, 그리고 **`minButtonWidth`**(px).
+  64 는 갑갑했다(사용자 지시). 80 은 같은 화면 기간 고르개(size 40)와 같은 눈금이다. **이 기본값은 이미 선 화면을 움직인다** —
+  32 짜리 고르개를 좁은 자리에 세운 카드는 한 번 본다. 이름이 긴 고르개('상세분석 · 로데이터')는 `minButtonWidth` 로 더 벌린다.
+  바닥을 깔면 짧은 이름이 헐렁해지니, **이름 길이가 크게 다른 고르개는 주지 않는 편이 낫다.**
+- **`BarChart`·`RingChart` 의 기다림이 그려질 것과 같은 키를 가진다** — "뼈대 먼저, 그 안에서 기다린다"(사용자 지시).
+  전에는 기다림 상자가 186px 로 박혀 있었고 막대가 들어서면 156px 이라, 자료가 오는 순간 카드마다 30px 씩 줄어
+  격자 넷이 한꺼번에 내려앉았다(말귀 실측: 섹션 372 → 342px). 이제 키는 차트가 쥔 값에서 온다 —
+  막대는 제 자리 높이(small 100 · medium 140 · large 180)와 **축 줄 수**(밑이름이 있으면 두 줄 — 한 줄로 박아 뒀더니 그 차트에서 18px 모자랐다),
+  링은 그려질 링과 **같은 지름**(medium 120 · small 96 · 숫자면 그 숫자). 놀이터에서 재서 맞췄다 — 기다림 181px = 그려진 것 181px, 링 카드 셋도 키가 같다.
+  `.manager-bar-chart-loading` 이름은 남겨 두었고(그 이름을 덮던 소비자가 있다) 기다림도 이제 `.manager-bar-chart-wrap` 안에 선다.
+- **`DeviceSideTable loading`**: `Table` 의 `loading` 을 그대로 내려보낸다. 안쪽 표에는 있는데 이 감싸개에 없어서,
+  기기 탭이 서버 줄을 기다리는 동안 **빈 표**를 그렸다가 줄이 오면 늘어났다.
+
+### 함께 나가는 것 — 그동안 미배포로 쌓인 것
+
+- **`ChartSection` 이 "칸이 좁은가" 를 그리기 **전** 에 잰다**(`useEffect` → layout effect).
+  전에는 좁은 카드도 **첫 프레임은 고르개를 편 채** 그려졌다가 다음 프레임에 '⋯' 로 접혔다. 그 한 프레임 동안
+  머리가 한 줄 늘어 카드가 부풀고 격자 전체가 따라 움직였다 — 말귀 실측 2026-09-17: 머리 32 → **70** → 32px,
+  섹션 342 → **380** → 342px, 페이지 바닥이 **38px** 출렁(`layout-shift` 로 잡힘).
+  뒤따르는 폭 변화는 `ResizeObserver` 가 그대로 따라간다. 소비자가 할 일은 없다.
+  서버 렌더에서는 여전히 effect 로 돈다(layout effect 는 서버에서 돌지 않고 React 가 경고를 찍는다) —
+  `TextField` 가 제 파일에 두고 쓰던 그 한 줄을 `hooks/useIsoLayoutEffect`(@internal) 한 곳으로 모아 둘이 함께 쓴다.
+
+## 0.177.0
+
+### 소비자에게 먼저 — `totalNum` 이 그리는 자리가 머리 오른쪽에서 **제목 아래 서브로우** 로 내려간다
+
+- **`totalLabel`·`totalNum`·`totalUnit` 은 이제 차트 카드의 `ChartTotal` 그 꼴로 선다**(사용자 지시 2026-09-17: "이런 형태가 되는거지? 이거에서 sub만 더 추가되는걸로").
+  0.175.0~0.176.0 은 이것을 머리 오른쪽에 **한 줄로** 세웠는데, 사용자가 정한 것은 '오늘의 듣기 현황' 카드가 이미 그리는 그 모양 —
+  설명(body-3) 윗줄, **큰 수(h0)와 단위(h5)** 아랫줄 — 에 분석 카드의 설명 한 줄(`disc`)만 더 붙는 꼴이었다.
+  ```
+  🎉 소음 하 문장 듣기                      [기본|길거리|와글와글|식당]
+  소음 환경에서의 조건별로 정답률을 …        ← disc
+  8월 대비 -2%p · 훈련 12회 시행 · 정답률    ← totalLabel
+  83 %                                     ← totalNum + totalUnit
+  ```
+  **prop 이름은 그대로다 — 넘기던 소비자는 한 줄도 안 고친다.** 수 크기는 차트 카드의 21% 와 같은 급(h0)이다(사용자 확인: "그대로 가").
+- **`subRow` 를 함께 주면 이 수가 그 앞에 선다** — 한 `.barchart-sub-row` 안에서 수는 왼쪽, 범례는 오른쪽(BarChart 와 같은 결). 줄이 둘로 갈라지지 않는다.
+- **머리 오른쪽에는 고르개와 `headRight` 만** 남는다 — 고르개가 먼저, 상세보기 단추가 오른쪽 끝(0.176.0 에서 수만 빠진 셈이다).
+  `.manager-section__head-total*` CSS 는 쓰는 곳이 없어져 지웠다 — 그 이름을 손으로 잡아 덮던 소비자는 `.barchart-total` 을 본다.
+
 ## 0.176.0
 
 ### 소비자에게 먼저 — 머리 오른쪽 차례가 한 번 더 바뀐다(0.175.0 을 되돌린 자리)