@ihabdevteam/core 0.198.0 → 0.200.0

package/dist/ihabdevteam-core.d.ts

@@ -1626,7 +1626,7 @@ export declare function copyText(text: string): Promise<boolean>;
  *
  * 값은 손으로 적고 `test/coreVersion.test.ts` 가 package.json 과 어긋나면 운다.
  */
-export declare const CORE_VERSION = "0.198.0";
+export declare const CORE_VERSION = "0.200.0";
 
 /** @public */
 declare const coreDefault: Record<string, unknown>;
@@ -3047,6 +3047,90 @@ export declare function isValidPhone(phone: string): boolean;
 /** @public 단어가 해당 타입의 문제(정답) 단어로 구조적으로 유효한가. 제약 없는 타입은 항상 true. */
 export declare function isValidQuestionWord(typeKey: WordTrainingTypeKey, word: string): boolean;
 
+/** @public */
+export declare interface ItemAction {
+    /**
+     * 읽어 줄 이름. 아이콘뿐인 단추라 **이름과 말풍선에 같은 말**이 붙는다 —
+     * 한쪽만 달면 눈으로 본 말과 낭독기가 읽는 말이 갈린다.
+     */
+    label: string;
+    onClick: () => void;
+}
+
+/**
+ * **보고 있는 한 항목에 하는 일들** — 창 바닥 왼쪽에 서는 아이콘 단추 줄.
+ *
+ * 무언가를 **보여 주는 창**이 동시에 **그것을 손대는 자리**이기도 한 곳에 선다. 말귀에 그런
+ * 창이 셋 있었고(훈련 묶음 실행 · 단어훈련 카드 실행 · 단어표 미리보기), 세 곳이 같은 다섯
+ * 단추를 같은 차례로 세우면서 규칙을 한 벌씩 베껴 적고 있었다(2026-09-26).
+ *
+ * 벌리는 일은 이미 코어 몫이다(`Popup` 의 `footerStart`/`footerEnd`, 0.190.0). 남아 있던 것은
+ * **무엇을 어떤 차례로 세우고 무엇을 닫고 하는가**인데, 그것이 베껴져 있으면 한 곳만 고쳐도
+ * 아무 데서도 안 터진다 — 같은 모양의 창들이 조용히 서로 다르게 움직인다. 실제로 **링크 단추의
+ * 조건이 세 곳에서 달랐다**(둘은 길이 있을 때만, 하나는 늘 세움).
+ *
+ * 이 조각이 쥐는 것 —
+ *  · **차례와 꼴** — 고치기 · 복제 · 발행 · 링크 · 지우기, 모두 `size={40} type="dot"`.
+ *  · **닫고 할 것과 안 닫고 할 것** — 고치기 · 지우기는 `onClose` 를 먼저 부른다. 둘 다 **다른 창을
+ *    여는** 일이라 안 닫으면 창 위에 창이 겹치고, 지운 것을 계속 보고 있게 된다. 복제 · 발행 ·
+ *    링크는 안 닫는다 — 보던 것을 그대로 두고 곁에서 일어나는 일이다.
+ *  · **안 준 것은 안 세운다** — 부르는 쪽이 손으로 `&&` 하던 자리다. 갈라진 그 자리가 여기다.
+ *  · **뒤집히는 단추는 하나** — `publish.published` 가 어느 쪽인지 고른다.
+ *
+ * 새 갈래가 필요하면 **여기에 칸을 만든다.** 아무거나 끼울 구멍(`children` 같은 것)을 두지 않는
+ * 까닭은, 그 구멍으로 들어온 단추는 닫고 할지 말지를 또 부르는 쪽이 정하게 되어 이 조각이
+ * 막으려던 갈라짐이 그대로 돌아오기 때문이다.
+ *
+ * `Popup` 의 `footerStart` 안에서도, 손수 지은 바닥 줄 안에서도 같게 선다 — 제 간격을 스스로
+ * 든다(`--spacing-xs`).
+ *
+ * 이름표는 부르는 쪽의 말이다 — 아래 예의 글자 자리에 그쪽 사전에서 꺼낸 말을 넣는다.
+ * (여기에 `t('…')` 을 적지 않는 까닭은, 소스를 훑는 시험이 **주석 속 예시도 실제로 부르는
+ * 열쇠로 읽기** 때문이다. 글이 시험을 깨뜨릴 수 있으면 안 된다.)
+ *
+ * @example
+ * <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(표) }} />
+ *   )} />
+ * @public
+ */
+export declare function ItemActions(props: ItemActionsProps): JSX.Element;
+
+/** @public */
+export declare interface ItemActionsProps {
+    /**
+     * 이 창을 닫는 길. **닫고 하는 것**(고치기 · 지우기)이 제 일을 하기 전에 이것을 먼저 부른다.
+     *
+     * 줄 것이 없어 보여도 비우지 않는다 — 안 닫으면 고칠 창이 보던 창 **위에 겹쳐** 서고,
+     * 지운 것을 계속 보고 있는 창이 남는다. 그 사고를 막는 것이 이 줄의 규칙이라
+     * 타입으로 못박아 둔다.
+     */
+    onClose: () => void;
+    /** 고치기 — **닫고 한다**(다른 창을 연다) */
+    edit?: ItemAction;
+    /** 복제 — 안 닫는다(보던 것을 계속 본다) */
+    duplicate?: ItemAction;
+    /** 발행 ↔ 발행취소 — 안 닫는다. 올리고 내릴 길이 없으면 아예 주지 않는다 */
+    publish?: ItemPublishAction;
+    /** 링크 복사 — 안 닫는다. 손잡이를 안 준 화면에서는 주지 않는다 */
+    copyLink?: ItemAction;
+    /** 지우기 — **닫고 한다** */
+    remove?: ItemAction;
+    className?: string;
+}
+
 /**
  * 맞았는지 — 훈련 유형마다 칸 이름이 다르다.
  *
@@ -3056,6 +3140,20 @@ export declare function isValidQuestionWord(typeKey: WordTrainingTypeKey, word:
  */
 export declare function itemCorrectness(r: RawResult): boolean | null;
 
+/**
+ * **한 단추가 뒤집히는 자리**(올리기 ↔ 내리기).
+ *
+ * 둘을 나란히 세우지 않는 까닭은 자리가 아니라 읽힘이다 — 나란히 두면 **지금 어느 쪽인지**를
+ * 화면이 말해 주지 않는다. 아이콘은 그대로 두고 하는 일과 이름만 갈린다.
+ * @public
+ */
+export declare interface ItemPublishAction {
+    /** 지금 올라가 있나 — 참이면 `unpublish` 쪽이 선다 */
+    published: boolean;
+    publish: ItemAction;
+    unpublish: ItemAction;
+}
+
 /**
  * @public TTS 전용 변환 — 문장 속 따옴표로 감싼 낱개 자모("ㄱ")를 낱자 이름("기역")으로 치환하고 뒤 조사를 맞춘다.
  * 표시 텍스트는 자모 그대로 두고(교육용 표기), 합성·캐시 키에만 이 변환을 적용한다. 자음은 명칭(ㄱ→기역),
@@ -7816,6 +7914,18 @@ export declare function toUserErrorMessage(msg: string): string;
  */
 export declare function toWordAttributeFilterCodes(selected: Record<string, unknown> | null | undefined): WordAttributeFilterCodes;
 
+/**
+ * 표의 한 줄을 `WordEntry` 로 옮긴다.
+ *
+ * 두 가지를 지킨다(두 앱이 지키던 그대로):
+ * - **`CP` 가 없으면 `undefined`** 로 둔다. `null` 을 그대로 넘기면 "구어체 발음이 있는데 비었다"
+ *   와 "아예 없다" 가 구별되지 않는다.
+ * - **`Grade` 는 글로, `Homonum` 은 수로.** 표가 둘 다 수·글 어느 쪽으로도 줄 수 있어
+ *   받는 쪽에서 견줄 때 꼴이 갈린다.
+ * @public
+ */
+export declare const toWordEntry: (row: WordRow) => WordEntry;
+
 /** 타입 칩 호버 → TrainingTooltip 표시까지의 지연(ms). 말귀자료실 카드와
  *  훈련설정 페이지가 동일한 호버 프리뷰 동작을 각자 구현하고 있어 공유한다.
  *  @public */
@@ -9893,6 +10003,32 @@ export declare interface WordPoolEntry {
     grade?: string;
 }
 
+/**
+ * **낱말 표(`Word`)의 한 줄** — 서버가 주는 그대로의 꼴.
+ *
+ * 열 이름이 짧고 뜻이 안 드러난다(`SP`·`CP`·`Class`). 그래서 받는 쪽마다 "이게 뭐였지" 를
+ * 다시 풀어야 했고, 두 앱이 같은 풀이를 한 벌씩 들고 있었다(회원앱 `useWordData`,
+ * 어드민 `useAllWords` — 글자까지 같은 줄이 열여덟, 2026-09-25).
+ *
+ * **결과 꼴(`WordEntry`)은 이미 코어 것**이었다. 코어가 *무엇이 되는지*만 정하고
+ * *어떻게 그 꼴이 되는지*는 두 앱이 따로 정하고 있던 셈이다 — 열 이름이 바뀌거나 새 열이
+ * 붙었을 때 한쪽만 고치면 **같은 낱말이 회원앱과 어드민에서 다른 발음·다른 급수로 보인다.**
+ * 그런데 아무 시험도 안 넘어진다. 그래서 여기로 옮긴다.
+ *
+ * 받아 오는 길(쪽 나눔·캐시·진행률)은 앱마다 달라 **그대로 앱에 둔다** — 여기 있는 것은
+ * 한 줄을 옮기는 일뿐이다.
+ * @public
+ */
+export declare interface WordRow {
+    Grade: string | number;
+    Word: string;
+    POS: string;
+    Class: string;
+    SP: string;
+    CP?: string | null;
+    Homonum?: number | null;
+}
+
 /**
  * 단어를 어떤 조건으로 좁힐지 고르는 FilterPanel 셸(shell) — 등급/품사/어종/음절 수/선택 섹션 자체는
  * 호출부가 구성해 넘긴다. WordSearchPage의 [단어 검색 설정] 패널과 WordTrainingFilterPanels의

package/dist/packages/core/src/components/Header.css

@@ -166,6 +166,18 @@
     align-items: center;
   }
 
+  /* **짧은 구분선도 가운데로.** 그 선은 `margin: 4px var(--spacing-m)` 로 서는데, 명시 폭
+     (`--spacing-xl`, 24px)을 가진 플렉스 항목이라 `stretch` 가 안 먹고 **시작 모서리**로
+     떨어진다. 그래서 52px 목록 안에서 좌 16 자리에 서고 중심이 38 이 된다 — 레일 중심 36,
+     항목·아이콘 중심 36 인데 그 선만 **2px 오른쪽**이었다(실측 2026-09-26, 사장님이
+     "이 선이 태블릿일 때 가운데가 아니네" 로 짚으신 것이 이것이다). 가로도 넘친다 —
+     16 + 24 + 16 = 56 인데 목록은 52 라 오른쪽 여백 4px 이 잘린다.
+     `auto` 여백은 플렉스 항목을 남는 자리 가운데로 민다. 폭·높이·색은 그대로다. */
+  .header .side-nav__separator--short {
+    margin-left: auto;
+    margin-right: auto;
+  }
+
   .header:hover .side-nav__menu,
   .header:focus-within .side-nav__menu {
     padding: 0 var(--spacing-xs);
@@ -187,6 +199,15 @@
     align-items: stretch;
   }
 
+  /* **펼쳐지면 가운데 맞춤을 푼다** — 16px 은 눈대중이 아니라 **아이콘 왼쪽 모서리와 줄을
+     맞추는 값**이다(220px 레일 실측: 목록 x=482 · 아이콘 x=498 · 선 x=498). 접힌 꼴의
+     가운데 맞춤이 펼친 꼴까지 따라오면 그 선만 목록 한복판(＋72px)으로 튄다. */
+  .header:hover .side-nav__separator--short,
+  .header:focus-within .side-nav__separator--short {
+    margin-left: var(--spacing-m);
+    margin-right: var(--spacing-m);
+  }
+
   /* Hide label completely from layout when collapsed; fade in on hover */
   .header .side-nav__label {
     display: inline-block;
@@ -233,6 +254,12 @@
   .header.header--force-collapsed:hover {
     width: 72px;
   }
+  /* 레일이 안 펼쳐지니 구분선도 가운데에 그대로 있어야 한다 */
+  .header.header--force-collapsed:hover .side-nav__separator--short,
+  .header.header--force-collapsed:focus-within .side-nav__separator--short {
+    margin-left: auto;
+    margin-right: auto;
+  }
 }
 
 /* Mobile: top header + bottom bar */
@@ -279,12 +306,34 @@
   object-fit: contain;
 }
 
+/* **심볼과 로고 중 어느 쪽을 보일지는 여기서 고른다** — 까닭은 `Header.tsx` 의 `BrandIdentity` 에.
+   기본은 로고다(넓은 화면·폰). 심볼은 접힌 레일에서만 선다. */
+.brand-identity__image--symbol { display: none; }
+
 @media (min-width: 1024px) {
   .brand-identity__root { height: 100px; }
 }
 
 @media (min-width: 768px) and (max-width: 1023px) {
   .brand-identity__root { height: 100px; }
+
+  /* 접힌 72px 레일에는 로고가 설 자리가 없다 — 심볼로 선다. */
+  .brand-identity__image--symbol { display: block; }
+  .brand-identity__image--logo { display: none; }
+
+  /* **펼치면 넓은 화면과 같은 얼굴이 된다.** 220px 으로 펼친 레일은 넓은 화면과 같은 폭이라,
+     거기서 심볼로 남으면 같은 레일이 같은 폭에서 다른 얼굴을 한다. */
+  .header:hover .brand-identity__image--symbol,
+  .header:focus-within .brand-identity__image--symbol { display: none; }
+  .header:hover .brand-identity__image--logo,
+  .header:focus-within .brand-identity__image--logo { display: block; }
+
+  /* **못 박아 접어 둔 레일은 호버해도 안 펼쳐진다**(`:hover { width: 72px }`) — 그때는 심볼 그대로다.
+     이 갈래가 없으면 72px 자리에 로고가 들어가 잘린다. */
+  .header.header--force-collapsed:hover .brand-identity__image--symbol,
+  .header.header--force-collapsed:focus-within .brand-identity__image--symbol { display: block; }
+  .header.header--force-collapsed:hover .brand-identity__image--logo,
+  .header.header--force-collapsed:focus-within .brand-identity__image--logo { display: none; }
 }
 
 @media (max-width: 767px) {

package/dist/packages/core/src/components/Header.js

@@ -26,8 +26,14 @@ export function BrandIdentity({ appMode }) {
         ? (typeof LogoManagerSvg === 'string' && LogoManagerSvg) || resolveAssetUrl('logo/Logo_speechearManager_kr.svg')
         : (typeof LogoSvg === 'string' && LogoSvg) || resolveAssetUrl('logo/Logo_speechear_kr.svg');
     const symbol = (typeof SymbolSvg === 'string' && SymbolSvg) || resolveAssetUrl('logo/Symbol_speechear.svg');
-    const isTablet = useMediaQuery("(min-width: 768px) and (max-width: 1023px)");
-    return (_jsx("div", { className: "brand-identity__root", "aria-label": t('header.biArea', 'BI 영역'), children: isTablet ? (_jsx("img", { src: symbol, alt: t('header.biSymbol', 'BI 심볼'), className: "brand-identity__image" })) : (_jsx("img", { src: logo, alt: isManager ? t('header.logoManager', '말귀매니저 로고') : t('header.logoMalgwi', '말귀 로고'), className: "brand-identity__image" })) }));
+    /* **둘을 다 그려 두고 고르는 것은 CSS 가 한다.** 예전에는 여기서 화면 폭만 보고
+       (`(min-width: 768px) and (max-width: 1023px)`) 심볼이냐 로고냐를 갈랐는데, **그 폭에서
+       레일은 두 모양이다** — 접힌 72px 과, 호버·포커스로 펼친 220px. 펼친 220 은 넓은 화면과
+       같은 폭인데 BI 만 심볼로 남아, 같은 레일이 같은 폭에서 다른 얼굴을 했다(사장님 지시
+       2026-09-26 — "테블릿에서 호버했을 때 데스크탑과 동일하게"). 펼침은 `:hover`·`:focus-within`
+       이라 **CSS 만 아는 상태**이고, JS 분기로는 `img` 의 `src` 를 바꿀 길이 없다.
+       안 보이는 쪽은 `display: none` 이라 낭독기도 안 읽는다 — `alt` 를 둘 다 둬도 한 번만 읽힌다. */
+    return (_jsxs("div", { className: "brand-identity__root", "aria-label": t('header.biArea', 'BI 영역'), children: [_jsx("img", { src: symbol, alt: t('header.biSymbol', 'BI 심볼'), className: "brand-identity__image brand-identity__image--symbol" }), _jsx("img", { src: logo, alt: isManager ? t('header.logoManager', '말귀매니저 로고') : t('header.logoMalgwi', '말귀 로고'), className: "brand-identity__image brand-identity__image--logo" })] }));
 }
 /**
  * 앱 전체 레이아웃의 내비게이션 헤더(사이드바)입니다.

package/dist/packages/core/src/components/ItemActions.css

@@ -0,0 +1,12 @@
+/* 보고 있는 한 항목에 하는 일들 — 까닭과 쓰는 법은 `ItemActions.tsx` 의 글에.
+
+   제 간격을 스스로 든다. `Popup` 의 `footerStart` 는 이미 같은 간격을 주지만(`--spacing-xs`),
+   바닥 줄을 손수 지어 쓰는 창(`WordTablePopup` 의 `renderFooter`)도 있어서 거기서도 같게
+   서야 한다 — 말귀가 그 자리에 이 네 줄을 그대로 베껴 두고 있었다(2026-09-26). */
+.item-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  /* 좁아져도 잘리는 대신 줄을 바꾼다 — 바닥이 잘려 못 누르던 자리를 겪었다(0.185.0) */
+  flex-wrap: wrap;
+}

package/dist/packages/core/src/components/ItemActions.d.ts

@@ -0,0 +1,95 @@
+import './ItemActions.css';
+/** @public */
+export interface ItemAction {
+    /**
+     * 읽어 줄 이름. 아이콘뿐인 단추라 **이름과 말풍선에 같은 말**이 붙는다 —
+     * 한쪽만 달면 눈으로 본 말과 낭독기가 읽는 말이 갈린다.
+     */
+    label: string;
+    onClick: () => void;
+}
+/**
+ * **한 단추가 뒤집히는 자리**(올리기 ↔ 내리기).
+ *
+ * 둘을 나란히 세우지 않는 까닭은 자리가 아니라 읽힘이다 — 나란히 두면 **지금 어느 쪽인지**를
+ * 화면이 말해 주지 않는다. 아이콘은 그대로 두고 하는 일과 이름만 갈린다.
+ * @public
+ */
+export interface ItemPublishAction {
+    /** 지금 올라가 있나 — 참이면 `unpublish` 쪽이 선다 */
+    published: boolean;
+    publish: ItemAction;
+    unpublish: ItemAction;
+}
+/** @public */
+export interface ItemActionsProps {
+    /**
+     * 이 창을 닫는 길. **닫고 하는 것**(고치기 · 지우기)이 제 일을 하기 전에 이것을 먼저 부른다.
+     *
+     * 줄 것이 없어 보여도 비우지 않는다 — 안 닫으면 고칠 창이 보던 창 **위에 겹쳐** 서고,
+     * 지운 것을 계속 보고 있는 창이 남는다. 그 사고를 막는 것이 이 줄의 규칙이라
+     * 타입으로 못박아 둔다.
+     */
+    onClose: () => void;
+    /** 고치기 — **닫고 한다**(다른 창을 연다) */
+    edit?: ItemAction;
+    /** 복제 — 안 닫는다(보던 것을 계속 본다) */
+    duplicate?: ItemAction;
+    /** 발행 ↔ 발행취소 — 안 닫는다. 올리고 내릴 길이 없으면 아예 주지 않는다 */
+    publish?: ItemPublishAction;
+    /** 링크 복사 — 안 닫는다. 손잡이를 안 준 화면에서는 주지 않는다 */
+    copyLink?: ItemAction;
+    /** 지우기 — **닫고 한다** */
+    remove?: ItemAction;
+    className?: string;
+}
+/**
+ * **보고 있는 한 항목에 하는 일들** — 창 바닥 왼쪽에 서는 아이콘 단추 줄.
+ *
+ * 무언가를 **보여 주는 창**이 동시에 **그것을 손대는 자리**이기도 한 곳에 선다. 말귀에 그런
+ * 창이 셋 있었고(훈련 묶음 실행 · 단어훈련 카드 실행 · 단어표 미리보기), 세 곳이 같은 다섯
+ * 단추를 같은 차례로 세우면서 규칙을 한 벌씩 베껴 적고 있었다(2026-09-26).
+ *
+ * 벌리는 일은 이미 코어 몫이다(`Popup` 의 `footerStart`/`footerEnd`, 0.190.0). 남아 있던 것은
+ * **무엇을 어떤 차례로 세우고 무엇을 닫고 하는가**인데, 그것이 베껴져 있으면 한 곳만 고쳐도
+ * 아무 데서도 안 터진다 — 같은 모양의 창들이 조용히 서로 다르게 움직인다. 실제로 **링크 단추의
+ * 조건이 세 곳에서 달랐다**(둘은 길이 있을 때만, 하나는 늘 세움).
+ *
+ * 이 조각이 쥐는 것 —
+ *  · **차례와 꼴** — 고치기 · 복제 · 발행 · 링크 · 지우기, 모두 `size={40} type="dot"`.
+ *  · **닫고 할 것과 안 닫고 할 것** — 고치기 · 지우기는 `onClose` 를 먼저 부른다. 둘 다 **다른 창을
+ *    여는** 일이라 안 닫으면 창 위에 창이 겹치고, 지운 것을 계속 보고 있게 된다. 복제 · 발행 ·
+ *    링크는 안 닫는다 — 보던 것을 그대로 두고 곁에서 일어나는 일이다.
+ *  · **안 준 것은 안 세운다** — 부르는 쪽이 손으로 `&&` 하던 자리다. 갈라진 그 자리가 여기다.
+ *  · **뒤집히는 단추는 하나** — `publish.published` 가 어느 쪽인지 고른다.
+ *
+ * 새 갈래가 필요하면 **여기에 칸을 만든다.** 아무거나 끼울 구멍(`children` 같은 것)을 두지 않는
+ * 까닭은, 그 구멍으로 들어온 단추는 닫고 할지 말지를 또 부르는 쪽이 정하게 되어 이 조각이
+ * 막으려던 갈라짐이 그대로 돌아오기 때문이다.
+ *
+ * `Popup` 의 `footerStart` 안에서도, 손수 지은 바닥 줄 안에서도 같게 선다 — 제 간격을 스스로
+ * 든다(`--spacing-xs`).
+ *
+ * 이름표는 부르는 쪽의 말이다 — 아래 예의 글자 자리에 그쪽 사전에서 꺼낸 말을 넣는다.
+ * (여기에 `t('…')` 을 적지 않는 까닭은, 소스를 훑는 시험이 **주석 속 예시도 실제로 부르는
+ * 열쇠로 읽기** 때문이다. 글이 시험을 깨뜨릴 수 있으면 안 된다.)
+ *
+ * @example
+ * <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(표) }} />
+ *   )} />
+ * @public
+ */
+export default function ItemActions(props: ItemActionsProps): import("react").JSX.Element;

package/dist/packages/core/src/components/ItemActions.js

@@ -0,0 +1,82 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import Button from './Button';
+import { cx } from '../utils/cx';
+import './ItemActions.css';
+/**
+ * **차례 · 아이콘 · 무엇을 닫고 하는가**를 한 표로 둔다.
+ *
+ * 세 곳에 베껴져 있을 때 실제로 갈라진 것이 이 표의 값들이었다 — 링크 단추의 조건이
+ * 둘은 `&&`, 하나는 늘 세움이었다. 한자리에 있으면 갈라질 자리가 없다.
+ */
+const 차례 = [
+    { 열쇠: 'edit', icon: 'edit-2', 닫고할까: true },
+    { 열쇠: 'duplicate', icon: 'copy', 닫고할까: false },
+    { 열쇠: 'publish', icon: 'book-marked', 닫고할까: false },
+    { 열쇠: 'copyLink', icon: 'link', 닫고할까: false },
+    { 열쇠: 'remove', icon: 'trash-2', 닫고할까: true },
+];
+/**
+ * **보고 있는 한 항목에 하는 일들** — 창 바닥 왼쪽에 서는 아이콘 단추 줄.
+ *
+ * 무언가를 **보여 주는 창**이 동시에 **그것을 손대는 자리**이기도 한 곳에 선다. 말귀에 그런
+ * 창이 셋 있었고(훈련 묶음 실행 · 단어훈련 카드 실행 · 단어표 미리보기), 세 곳이 같은 다섯
+ * 단추를 같은 차례로 세우면서 규칙을 한 벌씩 베껴 적고 있었다(2026-09-26).
+ *
+ * 벌리는 일은 이미 코어 몫이다(`Popup` 의 `footerStart`/`footerEnd`, 0.190.0). 남아 있던 것은
+ * **무엇을 어떤 차례로 세우고 무엇을 닫고 하는가**인데, 그것이 베껴져 있으면 한 곳만 고쳐도
+ * 아무 데서도 안 터진다 — 같은 모양의 창들이 조용히 서로 다르게 움직인다. 실제로 **링크 단추의
+ * 조건이 세 곳에서 달랐다**(둘은 길이 있을 때만, 하나는 늘 세움).
+ *
+ * 이 조각이 쥐는 것 —
+ *  · **차례와 꼴** — 고치기 · 복제 · 발행 · 링크 · 지우기, 모두 `size={40} type="dot"`.
+ *  · **닫고 할 것과 안 닫고 할 것** — 고치기 · 지우기는 `onClose` 를 먼저 부른다. 둘 다 **다른 창을
+ *    여는** 일이라 안 닫으면 창 위에 창이 겹치고, 지운 것을 계속 보고 있게 된다. 복제 · 발행 ·
+ *    링크는 안 닫는다 — 보던 것을 그대로 두고 곁에서 일어나는 일이다.
+ *  · **안 준 것은 안 세운다** — 부르는 쪽이 손으로 `&&` 하던 자리다. 갈라진 그 자리가 여기다.
+ *  · **뒤집히는 단추는 하나** — `publish.published` 가 어느 쪽인지 고른다.
+ *
+ * 새 갈래가 필요하면 **여기에 칸을 만든다.** 아무거나 끼울 구멍(`children` 같은 것)을 두지 않는
+ * 까닭은, 그 구멍으로 들어온 단추는 닫고 할지 말지를 또 부르는 쪽이 정하게 되어 이 조각이
+ * 막으려던 갈라짐이 그대로 돌아오기 때문이다.
+ *
+ * `Popup` 의 `footerStart` 안에서도, 손수 지은 바닥 줄 안에서도 같게 선다 — 제 간격을 스스로
+ * 든다(`--spacing-xs`).
+ *
+ * 이름표는 부르는 쪽의 말이다 — 아래 예의 글자 자리에 그쪽 사전에서 꺼낸 말을 넣는다.
+ * (여기에 `t('…')` 을 적지 않는 까닭은, 소스를 훑는 시험이 **주석 속 예시도 실제로 부르는
+ * 열쇠로 읽기** 때문이다. 글이 시험을 깨뜨릴 수 있으면 안 된다.)
+ *
+ * @example
+ * <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(표) }} />
+ *   )} />
+ * @public
+ */
+export default function ItemActions(props) {
+    const { onClose, className } = props;
+    return (_jsx("div", { className: cx('item-actions', className), children: 차례.map(({ 열쇠, icon, 닫고할까 }) => {
+            const 받은것 = props[열쇠];
+            if (!받은것)
+                return null;
+            const 할일 = 열쇠 === 'publish'
+                ? (받은것.published
+                    ? 받은것.unpublish
+                    : 받은것.publish)
+                : 받은것;
+            return (_jsx(Button, { htmlType: "button", size: 40, type: "dot", icon: icon, ariaLabel: 할일.label, showTooltipInfo: 할일.label, onClick: () => { if (닫고할까)
+                    onClose(); 할일.onClick(); } }, 열쇠));
+        }) }));
+}

package/dist/packages/core/src/components/SideNav.css

@@ -16,10 +16,17 @@
      `패딩 1 + 막대 11` 로 채운다(사장님 지시 2026-09-25). 그래서 좌우 패딩이 다르다 — 숫자가
      달라 보여도 **눈에 보이는 틈은 같다.**
 
-     막대가 11px 인 것은 고른 값이 아니라 **브라우저가 정하는 값**이다. `styles.css` 가 `*` 에
-     `scrollbar-width: thin` 을 걸어 두었고, Chrome 은 표준 속성이 있으면 `::-webkit-scrollbar` 의
-     폭을 안 본다 — 이 저장소가 스크롤바 폭을 적어 둔 자리들(6px·4px)은 **아무 일도 안 하고
-     있었다**(2026-09-25 실측: thin 11 · auto 15 · none 0, webkit 규칙이 있든 없든 같다).
+     막대가 11px 인 것은 고른 값이 아니라 **브라우저가 정하는 값**이다. 실측(Chrome 152,
+     2026-09-25): `scrollbar-width` 가 thin 이면 11 · auto 15 · none 0 이고,
+     `::-webkit-scrollbar { width }` 는 **있든 없든 값이 같다** — 이 저장소가 스크롤바 폭을 적어 둔
+     자리들(`styles.css` 6px, 훈련 팝업 4px 등)은 **이 브라우저에서는** 아무 일도 안 한다.
+
+     **두 가지를 확인하지 못했다.** ① 왜 안 먹는지 — 처음에는 "표준 속성이 걸려 있어 Chrome 이
+     webkit 쪽을 안 본다" 고 적었는데, 그 규칙을 못 찾은 페이지에서 재도 11 이었다는 실측이 있다.
+     ② **사파리는 `::-webkit-scrollbar` 를 존중한다** — 여기서 잴 수단이 없어 못 봤다. 그러니
+     그 규칙들을 "죽은 줄" 로 단정해 지우면 안 된다(말귀가 같은 까닭으로 제 쪽 4px 을 안 걷었다).
+     아래에서 막대를 직접 그리는 쪽으로 간 것은 그래서 더 낫다 — 브라우저마다 다른 이 자리를
+     아예 안 밟는다.
      그러니 이 11 은 기계·설정에 따라 달라질 수 있는 수다. macOS 오버레이 스크롤바에서는 0 이라
      오른쪽이 1px 만 남는다 — 그 환경에서 좌우가 어긋나 보이면 그때 다시 정하면 된다.
 
@@ -133,10 +140,22 @@
 }
 
 /* ── footer: 항상 list 아래에 위치, 줄어들지 않음 ─────────────────────────── */
+/* **배지를 얹으려고 알림 단추에만 한 겹 두른 것**(`position: relative` 가 배지의 기준이다).
+   그 한 겹 때문에 이 하나만 발치 줄에서 다르게 놓였다.
+
+   `align-self: flex-start` 였다 — 접힌 레일에서 발치 줄은 `align-items: center` 인데 이 선언이
+   그것을 덮어 **혼자 왼쪽에 붙었다**. 단추가 동그라미라 다섯이 한 줄로 서면 하나 틀어진 것이
+   바로 보인다(말귀 실측 2026-09-26: 넷은 가운데 36, 이것만 30 — 6px. 놀이터는 단추가 한 급
+   작아져 4px 이지만 같은 일이다. 어긋남은 `(줄 폭 − 단추 폭) / 2` 다).
+
+   **`align-self` 만 걷으면 안 된다.** 펼친 줄은 `align-items: stretch` 라 이 span 이 늘어난다 —
+   1440px 에서 **194px** 이 됐다(실측). 단추는 48 그대로라 눈에는 같지만, 줄 전체가 알림 단추의
+   몸이 되어 빈 자리에서도 호버·클릭이 걸린다. `width: fit-content` 는 definite width 라
+   stretch 를 막는다. 둘을 함께 둬야 두 폭 모두 제자리다(768·1440 재확인). */
 .side-nav__notification-wrap {
   position: relative;
   display: inline-flex;
-  align-self: flex-start;
+  width: fit-content;
 }
 
 .side-nav__footer {

package/dist/packages/core/src/components.d.ts

@@ -134,6 +134,8 @@ export { default as Checkbox } from './components/Checkbox';
 export type { CheckboxProps } from './components/Checkbox';
 export { default as BulkBar } from './components/BulkBar';
 export type { BulkBarProps, BulkAction } from './components/BulkBar';
+export { default as ItemActions } from './components/ItemActions';
+export type { ItemActionsProps, ItemAction, ItemPublishAction } from './components/ItemActions';
 export { default as DatePicker } from './components/DatePicker';
 export type { DatePickerProps } from './components/DatePicker';
 export { useCalendarMonth } from './components/useCalendarMonth';

package/dist/packages/core/src/components.js

@@ -87,6 +87,7 @@ export { useAnchoredMenu } from './hooks/useAnchoredMenu';
 export { default as Toggle } from './components/Toggle';
 export { default as Checkbox } from './components/Checkbox';
 export { default as BulkBar } from './components/BulkBar';
+export { default as ItemActions } from './components/ItemActions';
 export { default as DatePicker } from './components/DatePicker';
 export { useCalendarMonth } from './components/useCalendarMonth';
 export { default as BarChart, BarChartControls } from './components/BarChart';

package/dist/packages/core/src/utils/wordRow.d.ts

@@ -0,0 +1,37 @@
+import type { WordEntry } from './phonemePairSearchTypes';
+/**
+ * **낱말 표(`Word`)의 한 줄** — 서버가 주는 그대로의 꼴.
+ *
+ * 열 이름이 짧고 뜻이 안 드러난다(`SP`·`CP`·`Class`). 그래서 받는 쪽마다 "이게 뭐였지" 를
+ * 다시 풀어야 했고, 두 앱이 같은 풀이를 한 벌씩 들고 있었다(회원앱 `useWordData`,
+ * 어드민 `useAllWords` — 글자까지 같은 줄이 열여덟, 2026-09-25).
+ *
+ * **결과 꼴(`WordEntry`)은 이미 코어 것**이었다. 코어가 *무엇이 되는지*만 정하고
+ * *어떻게 그 꼴이 되는지*는 두 앱이 따로 정하고 있던 셈이다 — 열 이름이 바뀌거나 새 열이
+ * 붙었을 때 한쪽만 고치면 **같은 낱말이 회원앱과 어드민에서 다른 발음·다른 급수로 보인다.**
+ * 그런데 아무 시험도 안 넘어진다. 그래서 여기로 옮긴다.
+ *
+ * 받아 오는 길(쪽 나눔·캐시·진행률)은 앱마다 달라 **그대로 앱에 둔다** — 여기 있는 것은
+ * 한 줄을 옮기는 일뿐이다.
+ * @public
+ */
+export interface WordRow {
+    Grade: string | number;
+    Word: string;
+    POS: string;
+    Class: string;
+    SP: string;
+    CP?: string | null;
+    Homonum?: number | null;
+}
+/**
+ * 표의 한 줄을 `WordEntry` 로 옮긴다.
+ *
+ * 두 가지를 지킨다(두 앱이 지키던 그대로):
+ * - **`CP` 가 없으면 `undefined`** 로 둔다. `null` 을 그대로 넘기면 "구어체 발음이 있는데 비었다"
+ *   와 "아예 없다" 가 구별되지 않는다.
+ * - **`Grade` 는 글로, `Homonum` 은 수로.** 표가 둘 다 수·글 어느 쪽으로도 줄 수 있어
+ *   받는 쪽에서 견줄 때 꼴이 갈린다.
+ * @public
+ */
+export declare const toWordEntry: (row: WordRow) => WordEntry;

package/dist/packages/core/src/utils/wordRow.js

@@ -0,0 +1,19 @@
+/**
+ * 표의 한 줄을 `WordEntry` 로 옮긴다.
+ *
+ * 두 가지를 지킨다(두 앱이 지키던 그대로):
+ * - **`CP` 가 없으면 `undefined`** 로 둔다. `null` 을 그대로 넘기면 "구어체 발음이 있는데 비었다"
+ *   와 "아예 없다" 가 구별되지 않는다.
+ * - **`Grade` 는 글로, `Homonum` 은 수로.** 표가 둘 다 수·글 어느 쪽으로도 줄 수 있어
+ *   받는 쪽에서 견줄 때 꼴이 갈린다.
+ * @public
+ */
+export const toWordEntry = (row) => ({
+    word: row.Word,
+    pronunciation: row.SP,
+    colloquialPronunciation: row.CP ?? undefined,
+    grade: String(row.Grade),
+    pos: row.POS,
+    wordType: row.Class,
+    homonum: row.Homonum != null ? Number(row.Homonum) : undefined,
+});

package/dist/packages/core/src/utils.d.ts

@@ -58,4 +58,6 @@ export { WORD_SUGGESTION_WEEKLY_QUOTA, WORD_SUGGESTION_ACCOUNT_LIMIT, WORD_SUGGE
 export { recoverFromSkew, skewReloadPending } from './utils/chunkSkew';
 export { lazyPage } from './utils/lazyPage';
 export { prefetchChunk } from './utils/prefetchChunk';
+export { toWordEntry } from './utils/wordRow';
+export type { WordRow } from './utils/wordRow';
 export { CORE_VERSION } from './version';

package/dist/packages/core/src/utils.js

@@ -47,4 +47,5 @@ export { WORD_SUGGESTION_WEEKLY_QUOTA, WORD_SUGGESTION_ACCOUNT_LIMIT, WORD_SUGGE
 export { recoverFromSkew, skewReloadPending } from './utils/chunkSkew';
 export { lazyPage } from './utils/lazyPage';
 export { prefetchChunk } from './utils/prefetchChunk';
+export { toWordEntry } from './utils/wordRow';
 export { CORE_VERSION } from './version';

package/dist/packages/core/src/version.d.ts

@@ -46,4 +46,4 @@
  *
  * 값은 손으로 적고 `test/coreVersion.test.ts` 가 package.json 과 어긋나면 운다.
  */
-export declare const CORE_VERSION = "0.198.0";
+export declare const CORE_VERSION = "0.200.0";

package/dist/packages/core/src/version.js

@@ -46,4 +46,4 @@
  *
  * 값은 손으로 적고 `test/coreVersion.test.ts` 가 package.json 과 어긋나면 운다.
  */
-export const CORE_VERSION = '0.198.0';
+export const CORE_VERSION = '0.200.0';