@ihabdevteam/core 0.198.0 → 0.200.0

package/CHANGELOG.md

@@ -7,6 +7,126 @@ All notable changes to this project will be documented in this file.
 > 적은 글이라, 지금 이름으로 고쳐 놓으면 그 시절에 그 이름으로 받은 사람이
 > 제 이야기를 못 찾는다.
 
+## 0.200.0
+
+### 더해짐 — `ItemActions`
+
+무언가를 **보여 주는 창**이 동시에 **그것을 손대는 자리**이기도 한 곳이 회원앱에 셋인데
+(훈련 묶음 실행 · 단어훈련 카드 실행 · 단어표 미리보기), 바닥 줄 왼쪽이 **같은 다섯 단추 ·
+같은 차례 · 같은 규칙**이었다. 벌리는 일은 이미 코어 몫이고(0.190.0 `footerStart`/`footerEnd`),
+남아 있던 **무엇을 어떤 차례로 세우고 무엇을 닫고 하는가**가 세 곳에 베껴져 있었다.
+
+```tsx
+import { ItemActions } from '@ihabdevteam/core/components'
+
+<Popup
+  title={표.name}
+  footerStart={({ closeWithAnimation }) => (
+    <ItemActions
+      onClose={closeWithAnimation}
+      edit={{ label: 이름표.수정, onClick: () => openEdit(표) }}
+      duplicate={{ label: 이름표.복제, onClick: () => duplicate(표) }}
+      publish={{ published: 표.isPublished,
+        publish:   { label: 이름표.올리기, onClick: () => publish(표) },
+        unpublish: { label: 이름표.내리기, onClick: () => unpublish(표) } }}
+      copyLink={링크길있나 ? { label: 이름표.링크, onClick: () => copyLink(표) } : undefined}
+      remove={{ label: 이름표.삭제, onClick: () => askDelete(표) }} />
+  )} />
+```
+
+코어가 쥐는 것 넷 —
+
+- **차례와 꼴**: 고치기 · 복제 · 발행 · 링크 · 지우기, 모두 `size={40} type="dot"`, 사이 8px.
+- **닫고 할 것과 안 닫고 할 것**: 고치기 · 지우기만 `onClose` 를 먼저 부른다. 둘 다 다른 창을
+  여는 일이라 안 닫으면 창 위에 창이 겹치고, 지운 것을 계속 보고 있게 된다.
+- **안 준 것은 안 세운다** — 부르는 쪽이 손으로 `&&` 하던 자리다.
+- **뒤집히는 단추는 하나** — `publish.published` 가 올리기/내리기를 고른다. 아이콘은 같다.
+
+**갈라진 자리가 실제로 있었다**: 링크 단추가 두 곳은 손잡이가 있을 때만 서는데 한 곳은 늘 섰다
+(말귀 실측 2026-09-26). 이런 어긋남은 아무도 안 넘어뜨리고 그 창의 짝 시험만 조용히 다르다.
+
+아무 단추나 끼울 구멍은 두지 않았다 — 그 구멍으로 들어온 단추는 닫고 할지를 또 부르는 쪽이
+정하게 되어, 이 조각이 걷어낸 갈라짐이 그대로 돌아온다. 새 갈래는 여기에 제 칸을 만든다.
+
+**코어가 가져가는 CSS 클래스 이름** — `item-actions`. 말귀 `.my-word-table-preview-actions`
+(`display:flex; align-items:center; gap:var(--spacing-xs); flex-wrap:wrap`)가 이 줄과 같은 값이라,
+갈아탄 뒤에는 그 규칙을 걷을 수 있다.
+
+### 고침 — 접힌 레일의 두 가지 (말귀 ⑮ · ⑯, 사장님 지시 2026-09-26)
+
+태블릿 폭(768–1023)에서 레일은 **두 모양**이다 — 접힌 72px 과, 호버·포커스로 펼친 220px.
+그 갈림을 안 보고 있던 자리 둘을 고친다.
+
+**짧은 구분선이 2px 오른쪽에 서 있었다.** `.side-nav__separator--short` 는 `margin: 4px 16px` 에
+명시 폭(24px)을 가진 플렉스 항목이라 `stretch` 가 안 먹고 **시작 모서리**로 떨어진다 —
+52px 목록 안에서 중심이 38 이고, 레일·항목·아이콘 중심은 모두 36 이었다(실측). 가로도
+`16 + 24 + 16 = 56` 이라 오른쪽 여백 4px 이 잘렸다. 접힌 레일에서만 좌우 여백을 `auto` 로
+바꿔 가운데로 민다. **펼치면 원래대로 돌아온다** — 16px 은 눈대중이 아니라 **아이콘 왼쪽
+모서리에 줄을 맞춘 값**이고(220px 레일 실측: 목록 x=482 · 아이콘 x=498 · 선 x=498),
+넓은 화면(≥1024)은 건드리지 않았다.
+
+**펼친 레일의 BI 가 심볼 그대로였다.** `BrandIdentity` 가 화면 폭만 보고 심볼이냐 로고냐를
+갈랐는데, 그 폭에서 펼친 220px 은 넓은 화면과 **같은 폭**이라 같은 레일이 같은 폭에서 다른
+얼굴을 했다. 펼침은 `:hover`·`:focus-within` 이라 **CSS 만 아는 상태**이고 JS 로는 `img` 의
+`src` 를 못 바꾼다 — 그래서 **둘을 다 그려 두고 고르는 것을 CSS 에 넘긴다.** 안 보이는 쪽은
+`display: none` 이라 낭독기도 안 읽어, `alt` 를 둘 다 둬도 한 번만 읽힌다.
+둘 다 **못 박아 접어 둔 레일**(`.header--force-collapsed`)에서는 호버해도 안 펼쳐지므로
+접힌 얼굴 그대로다.
+
+**코어가 가져가는 CSS 클래스 이름** — `brand-identity__image--symbol` · `brand-identity__image--logo`.
+`BrandIdentity` 의 마크업이 `img` 한 장에서 **두 장**으로 바뀌었다(`.brand-identity__image` 를
+선택자로 쓰는 자리가 있으면 이제 둘을 집는다 — 말귀 두 앱에는 그런 자리가 없다, 실측).
+
+> 브라우저로 이 폭을 잴 때는 `* { transition: none !important }` 를 먼저 얹는다. 레일 폭에
+> 180ms 전이가 걸려 있어, 안 얹으면 전이 중간 값이 잡혀 **멀쩡한 규칙을 어긋난 것으로 읽는다**
+> (여기서 한 번 그렇게 속았다 — `force-collapsed:hover` 가 안 먹는 줄 알았는데 먹고 있었다).
+
+### 고침 — 발치 줄의 알림 단추만 따로 놀았다 (말귀 ⑰)
+
+`.side-nav__notification-wrap` 은 **배지를 얹으려고 알림 단추에만 두른 한 겹**인데, 거기 붙어
+있던 `align-self: flex-start` 가 접힌 레일 발치 줄의 `align-items: center` 를 덮어 **혼자
+왼쪽에 붙었다**(말귀 실측: 넷은 가운데 36, 이것만 30). 단추가 동그라미라 다섯이 한 줄로 서면
+하나 틀어진 것이 바로 보인다. 어긋남은 `(줄 폭 − 단추 폭) / 2` 라 단추 크기에 따라 4~6px 이다.
+
+**`align-self` 만 걷으면 다른 데가 틀어진다** — 펼친 줄은 `align-items: stretch` 라 그 span 이
+1440px 에서 **194px** 까지 늘어난다(실측). 단추는 48 그대로라 눈에는 같지만 **줄 전체가 알림
+단추의 몸**이 되어 빈 자리에서도 호버·클릭이 걸린다. `width: fit-content` 를 함께 둔다 —
+definite width 가 stretch 를 막는다. 768·1440 둘 다 다섯이 한 줄로 선다.
+
+### 글 고침 — 놀이터가 안 적고 있던 공개 이름 일곱
+
+`audit:playground` 의 대응표가 **일곱 자리 비어 있었다**(`GameIntro` · `LineChart` ·
+`LINE_CHART_HOVER_DELAY_MS` · `SectionHeadFloat` · `prefetchChunk` · `toWordEntry` ·
+`usePageResetOnChange`). 0.186~0.199 에서 들인 것들이고, 그 문은 `npm test` 에 안 들어 있어
+조용했다. 일곱을 채우고, 글이 없던 셋(`SectionHeadFloat` · `toWordEntry` ·
+`LINE_CHART_HOVER_DELAY_MS`)에는 쓰는 법을 적었다.
+
+## 0.199.0
+
+### 더해짐 — `toWordEntry` · `WordRow`
+
+낱말 표(`Word`)의 한 줄을 `WordEntry` 로 옮기는 일이 두 앱에 한 벌씩 있었다(회원앱
+`useWordData`, 어드민 `useAllWords` — 글자까지 같은 줄이 열여덟). **결과 꼴은 이미 코어 것**인데
+*어떻게 그 꼴이 되는지* 만 두 앱이 따로 정하고 있던 셈이다.
+
+갈라져도 **아무 시험이 안 넘어진다** — 열 이름이 바뀌거나 새 열이 붙었을 때 한쪽만 고치면 같은
+낱말이 회원앱과 어드민에서 **다른 발음·다른 급수**로 보인다. 그 셈만 여기로 옮긴다.
+
+```ts
+import { toWordEntry, type WordRow } from '@ihabdevteam/core/utils'
+const words = (rows as WordRow[]).map(toWordEntry)
+```
+
+받아 오는 길(쪽 나눔·캐시·진행률 알림)은 앱마다 달라 **그대로 앱에 둔다** — 여기 있는 것은
+한 줄을 옮기는 일뿐이다. 지키는 것 둘: `CP` 가 없으면 `undefined`(`null` 을 흘리지 않는다),
+`Grade` 는 글·`Homonum` 은 수로. `0` 은 값으로 본다(첫 동음이의어가 사라지지 않게).
+
+### 글 고침 — 스크롤바 폭 이야기를 브라우저 하나로 좁힌다 (0.198.0 에 이어)
+
+"적어 둔 6px·4px 은 아무 일도 안 한다" 고 적었는데 그것은 **이 크롬에서만** 참이다 —
+**사파리는 `::-webkit-scrollbar` 를 존중한다.** 여기서 사파리를 잴 수단이 없으므로 그 규칙들을
+죽은 줄로 단정해 지우지 않는다. 폭이 왜 안 먹는지(까닭)도 확인하지 못했으므로 **잰 것만** 적는다.
+
 ## 0.198.0
 
 ### 고침 — **사이드바가 220px 이 아니라 222px 로 서 있었다** (`Header`)
@@ -34,9 +154,15 @@ All notable changes to this project will be documented in this file.
   겨누는 자리는 보이지 않는 여백으로 좌우 4px 씩 넓혔다 — 보이는 굵기는 6px 그대로.
   `sticky` 한 겹(높이 0)이 구르는 통 안에서 제자리를 지키므로 막대가 보이는 자리에 뜬다.
 
-**네이티브 막대의 폭은 정할 수 없다.** 전역 `* { scrollbar-width: thin }` 이 걸려 있어 Chrome 은
-`::-webkit-scrollbar` 의 폭을 안 본다 — 이 저장소가 적어 둔 6px·4px 들은 **아무 일도 안 하고 있었다**
-(실측: thin 11 · auto 15 · none 0). 직접 그려서야 6px 이 실제로 6px 이 됐다.
+**네이티브 막대의 폭은 Chrome 에서 정할 수 없다.** 실측(Chrome 152): `scrollbar-width` 가 thin 이면
+11 · auto 15 · none 0 이고, `::-webkit-scrollbar { width }` 는 있든 없든 같다. 직접 그려서야 6px 이
+실제로 6px 이 됐다.
+
+*(0.198.0 을 내보낸 뒤 두 번 고친 글. ① 처음에는 "전역 `* { scrollbar-width: thin }` 때문에 Chrome 이
+webkit 쪽을 안 본다" 고 **까닭까지** 적었는데, 그 규칙을 못 찾은 페이지에서 재도 11 이 나왔다는
+실측이 있어 까닭은 열어 둔다. ② "적어 둔 6px·4px 은 아무 일도 안 한다" 고 적었는데 그것도 **이
+브라우저에서만** 참이다 — **사파리는 `::-webkit-scrollbar` 를 존중한다.** 여기서 사파리를 잴 수단이
+없으므로 그 규칙들을 죽은 줄로 단정해 지우지 않는다. 못 재는 것을 근거로 지우지 않는다.)*
 
 ### 놀이터 — SideNav 페이지