@ihabdevteam/core 0.318.0 → 0.322.0

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

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { cx } from '../../utils/cx';
-import { 한글순 } from '../../utils/textSort';
+import { compareKorean } from '../../utils/textSort';
 import { useEscToClose } from '../../hooks/useEscToClose';
 import { useState, useCallback, useMemo, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -86,7 +86,7 @@ export default function WordSearchResultBlock({ titleIcon, resultCount, resultUn
         };
     }, [q]);
     /* 정렬 비교자 — flat/그룹 뷰가 공유한다.
-       **글자 견주기는 `한글순`(콜레이터 하나) 으로만 한다**(말귀 요청 (113), 2026-10-10). 전에는 '시작 우선'
+       **글자 견주기는 `compareKorean`(콜레이터 하나) 으로만 한다**(말귀 요청 (113), 2026-10-10). 전에는 '시작 우선'
        갈래만 콜레이터를 쓰고 **여섯 갈래는 `localeCompare(…, 'ko')`** 였다 — 그 부름은 비교마다 콜레이터를
        새로 만든다. 하필 기본 정렬이 `ganada` 라 **주된 길이 느린 쪽**이었다(말귀 실측 6,357개: 30.3ms → 8.1ms).
        이 파일에 콜레이터가 하나 더 있었던 것(`new Intl.Collator('ko')`)도 걷었다 — 같은 결정이 두 자리에
@@ -104,14 +104,14 @@ export default function WordSearchResultBlock({ titleIcon, resultCount, resultUn
             // 시작 우선 — 검색어로 시작하는 단어를 위로. 앞 q 글자만 잘라 매칭하면 "첫 음절부터 일치"만
             // 남는다(초성 검색도 동일: 'ㄴ' → '나무'가 위). 동순위는 가나다.
             case 'match': {
-                return 시작순위(a) - 시작순위(b) || 한글순(label(a), label(b));
+                return 시작순위(a) - 시작순위(b) || compareKorean(label(a), label(b));
             }
-            case 'ganada': return 한글순(label(a), label(b));
-            case 'ganada_desc': return 한글순(label(b), label(a));
-            case 'syllable': return syll(a) - syll(b) || 한글순(label(a), label(b));
-            case 'syllable_desc': return syll(b) - syll(a) || 한글순(label(a), label(b));
-            case 'grade': return grade(a) - grade(b) || 한글순(label(a), label(b));
-            case 'grade_desc': return grade(b) - grade(a) || 한글순(label(a), label(b));
+            case 'ganada': return compareKorean(label(a), label(b));
+            case 'ganada_desc': return compareKorean(label(b), label(a));
+            case 'syllable': return syll(a) - syll(b) || compareKorean(label(a), label(b));
+            case 'syllable_desc': return syll(b) - syll(a) || compareKorean(label(a), label(b));
+            case 'grade': return grade(a) - grade(b) || compareKorean(label(a), label(b));
+            case 'grade_desc': return grade(b) - grade(a) || compareKorean(label(a), label(b));
             // 받은 순서 — Array.prototype.sort 는 안정 정렬이라 0 이면 받은 차례가 남는다
             default: return 0;
         }

package/dist/packages/core/src/components/Word/WordTableBlock.css

@@ -7,6 +7,19 @@
     background: transparent;
 }
 
+/* ── 표를 손보는 단추들 (표 바로 아래) — (210) ───────────
+   간격은 Section 의 flex gap 이 맡는다(`__meta` 와 같은 규칙 — 제 margin 을 더하면 이중 여백).
+   아래 `__actions` 와 같은 꼴로 선다: 모자라면 아랫줄로, 폰에서는 두 칸 격자. */
+.word-table-block__table-actions {
+    display: flex;
+    gap: var(--spacing-xs);
+    flex-wrap: wrap;
+    /* **가운데**((211), 사장님 지시 *"가운데 배치"*). 종이(표)는 가운데 서는데 그 아래 줄만
+       왼쪽 끝에 붙어 한 덩이로 안 읽혔다(말귀 실측 1403 폭: 줄 폭 1272, 단추 둘이 왼끝).
+       아래 액션 줄은 `space-between` 이라 그대로 둔다 — 거기는 양끝에 갈라 세우는 줄이다. */
+    justify-content: center;
+}
+
 /* ── 액션 버튼 ─────────────────────────────────────────── */
 .word-table-block__actions {
     display: flex;
@@ -53,6 +66,18 @@
     min-width: 0;
     width: 100%;
   }
+  /* (210) 표 밑 줄도 같은 꼴 — **@media 를 따로 열지 않는다.** 처음 위에 따로 열었다가
+     `wordTableBlockActionsLeftExtra` 가 울었다: 그 못은 `css.slice(0, indexOf('@media'))` 로
+     넓은 쪽을 자르는데, 앞에 `@media` 가 하나 더 생기면 **자르는 자리가 앞당겨져** 넓은 쪽
+     규칙을 못 찾는다. 못이 글의 차례에 기대고 있었고, 내가 그 차례를 바꿨다. */
+  .word-table-block__table-actions {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+  }
+  .word-table-block__table-actions .button {
+    min-width: 0;
+    width: 100%;
+  }
 }
 
 /* ── 팝업 내 미리보기 ───────────────────────────────────── */

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

@@ -334,7 +334,7 @@ export default function WordTableBlock({ title, titleIcon, disc, filterTitle, fi
                                (위 `onReorder` 와 같은 셈이다. 쪽이 몇으로 나뉘었는지는 부르는 쪽 일이 아니다). */
                             renderCellAction: renderCellAction && ((n, item) => renderCellAction(n + i * itemsPerPage, item)), brand: 띠, code: code, contentRef: el => { pageRefs.current[i] = el; }, pageNumber: { current: i + 1, total: pages.length }, pageNumberPosition: pageNumberPosition }, i))) })) : (_jsx(WordTable, { orientation: orientation, contentTypes: contentTypes, cutLine: cutLine, showOutline: showOutline, showDivLine: showDivLine, count: count, items: isEditable ? undefined : (items ?? []), editCells: isEditable ? visibleCells : undefined, activeCell: activeCell, onActivateCell: (isEditable || onAddItem) ? setActiveCell : undefined, onRemoveCell: isEditable ? handleRemove : undefined, onRemoveItem: !isEditable ? onRemoveItem : undefined, onReorder: !isEditable ? onReorder : undefined, 
                         /* 편집 모드에는 얹을 항목이 없다 — 칸을 손으로 채우는 꼴이다 */
-                        renderCellAction: !isEditable ? renderCellAction : undefined, brand: 띠, code: code, showFillerAdd: !!onAddItem, contentRef: contentRef })), inlineNameFields && !hideControls && (_jsxs(Panel, { size: "medium", labelWidth: 64, useBorder: false, useRowBorder: false, className: "word-table-block__meta", children: [_jsx(PanelRow, { variant: "custom", label: t('wordTable.save.nameLabel', '이름'), required: true, align: "vertical", useFullWidth: true, children: _jsx(TextField, { required: true, value: nameValue ?? '', onChange: onNameChange, placeholder: namePlaceholder ? namePlaceholder + t('wordTable.save.autoFillHint', ' (Tab 또는 space 입력시 자동 입력)') : t('wordTable.save.placeholder', '이 단어표에 대한 제목을 입력하세요.'), 
+                        renderCellAction: !isEditable ? renderCellAction : undefined, brand: 띠, code: code, showFillerAdd: !!onAddItem, contentRef: contentRef })), !hideControls && !saveOnly && (onReset || actionsLeftExtra != null) && (_jsxs("div", { className: "word-table-block__table-actions", children: [onReset && (_jsx(Button, { htmlType: "button", size: 48, type: "bar", label: resolvedResetLabel, onClick: onReset })), actionsLeftExtra] })), inlineNameFields && !hideControls && (_jsxs(Panel, { size: "medium", labelWidth: 64, useBorder: false, useRowBorder: false, className: "word-table-block__meta", children: [_jsx(PanelRow, { variant: "custom", label: t('wordTable.save.nameLabel', '이름'), required: true, align: "vertical", useFullWidth: true, children: _jsx(TextField, { required: true, value: nameValue ?? '', onChange: onNameChange, placeholder: namePlaceholder ? namePlaceholder + t('wordTable.save.autoFillHint', ' (Tab 또는 space 입력시 자동 입력)') : t('wordTable.save.placeholder', '이 단어표에 대한 제목을 입력하세요.'), 
                                     /* PanelRow의 라벨은 시각적으로만 붙어 있고 입력과 연결돼 있지 않아, 낭독기에는
                                        이름 없는 입력으로 읽혔다. placeholder는 자동완성 안내문("Tab 또는 space…")이
                                        섞여 있어 이름으로 부적절하므로 같은 라벨 문구를 넘긴다. */
@@ -349,5 +349,5 @@ export default function WordTableBlock({ title, titleIcon, disc, filterTitle, fi
                                             e.preventDefault();
                                             onDescriptionChange?.(descriptionPlaceholder ?? '');
                                         }
-                                    } }) })] }))] }), !hideControls && (_jsxs("div", { className: "word-table-block__actions", children: [_jsxs("div", { className: "word-table-block__actions-left", children: [!saveOnly && onReset && (_jsx(Button, { htmlType: "button", size: 40, type: "bar", label: resolvedResetLabel, onClick: onReset })), !saveOnly && actionsLeftExtra, !saveOnly && onLoad && (_jsx(Button, { htmlType: "button", size: 40, type: "bar", label: t('wordTable.load', '불러오기'), onClick: onLoad })), !saveOnly && _jsx(Button, { htmlType: "button", size: 40, type: "bar", label: t('wordTable.openNewWindow', '새 창으로 보기'), onClick: handleOpenNewWindow })] }), _jsxs("div", { className: "word-table-block__actions-right", children: [onCancel && _jsx(Button, { htmlType: "button", size: "56", type: "bar", label: t('common.cancel', '취소'), onClick: onCancel }), !saveOnly && _jsx(Button, { htmlType: "button", size: "56", type: "bar", label: t('wordTable.print', '인쇄하기'), onClick: handlePrint }), secondarySaveButtonLabel && (_jsx(Button, { htmlType: "button", size: "56", type: "bar", label: secondarySaveButtonLabel, onClick: () => inlineNameFields ? openSaveAsPopup() : handleSave(true), disabled: noItems, onDisabledClick: () => { showWarning(t('wordTable.emptyItems', '단어를 1개 이상 추가해주세요.')); } })), _jsx(Button, { htmlType: "button", size: "56", type: "bar", variant: "main", label: saveButtonLabel ?? t('wordTable.saveButton', '저장하기'), onClick: () => handleSave(false), disabled: mainSaveDisabled, onDisabledClick: handleMainDisabledClick })] })] })), _jsx(Toast, { message: toastMessage, type: toastType, onClose: clearToast })] }));
+                                    } }) })] }))] }), !hideControls && (_jsxs("div", { className: "word-table-block__actions", children: [_jsxs("div", { className: "word-table-block__actions-left", children: [!saveOnly && onLoad && (_jsx(Button, { htmlType: "button", size: 40, type: "bar", label: t('wordTable.load', '불러오기'), onClick: onLoad })), !saveOnly && _jsx(Button, { htmlType: "button", size: 40, type: "bar", label: t('wordTable.openNewWindow', '새 창으로 보기'), onClick: handleOpenNewWindow })] }), _jsxs("div", { className: "word-table-block__actions-right", children: [onCancel && _jsx(Button, { htmlType: "button", size: "56", type: "bar", label: t('common.cancel', '취소'), onClick: onCancel }), !saveOnly && _jsx(Button, { htmlType: "button", size: "56", type: "bar", label: t('wordTable.print', '인쇄하기'), onClick: handlePrint }), secondarySaveButtonLabel && (_jsx(Button, { htmlType: "button", size: "56", type: "bar", label: secondarySaveButtonLabel, onClick: () => inlineNameFields ? openSaveAsPopup() : handleSave(true), disabled: noItems, onDisabledClick: () => { showWarning(t('wordTable.emptyItems', '단어를 1개 이상 추가해주세요.')); } })), _jsx(Button, { htmlType: "button", size: "56", type: "bar", variant: "main", label: saveButtonLabel ?? t('wordTable.saveButton', '저장하기'), onClick: () => handleSave(false), disabled: mainSaveDisabled, onDisabledClick: handleMainDisabledClick })] })] })), _jsx(Toast, { message: toastMessage, type: toastType, onClose: clearToast })] }));
 }

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

@@ -1,4 +1,4 @@
-import { 한글순 } from '../../utils/textSort';
+import { compareKorean } from '../../utils/textSort';
 import { labelOfCellKey } from './wordTableReview';
 /** △ 를 반 점으로 치는 셈 — 저장할 때 서버가 쓰는 규칙과 같다. */
 function 점수(o, triangle, marked) {
@@ -46,7 +46,7 @@ export function weakItems(records) {
         const tried = v.o + v.triangle + v.x;
         out.push({ label: labelOfCellKey(key), key, tried, o: v.o, triangle: v.triangle, x: v.x, rate: 점수(v.o, v.triangle, tried), latest: v.latest, latestAt: v.latestAt });
     }
-    out.sort((a, b) => a.rate - b.rate || b.tried - a.tried || 한글순(a.label, b.label) || 한글순(a.key ?? a.label, b.key ?? b.label));
+    out.sort((a, b) => a.rate - b.rate || b.tried - a.tried || compareKorean(a.label, b.label) || compareKorean(a.key ?? a.label, b.key ?? b.label));
     return out;
 }
 /**

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

@@ -7,7 +7,7 @@
  *
  * 화면도 통신도 없다. 표 목록과 약한 낱말만 받아 순서를 매긴다.
  */
-import { 한글순 } from '../../utils/textSort';
+import { compareKorean } from '../../utils/textSort';
 /**
  * 약한 낱말을 많이 품은 표부터 내놓는다.
  *
@@ -44,7 +44,7 @@ export function recommendTables(tables, weakLabels, limit = 5) {
     }
     out.sort((a, b) => b.covered.length - a.covered.length
         || a.totalCells - b.totalCells
-        || 한글순(a.name, b.name));
+        || compareKorean(a.name, b.name));
     return out.slice(0, Math.max(0, limit));
 }
 /**

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

@@ -67,7 +67,9 @@ export declare const POS_LABEL: Record<string, string>;
 /** 어종(단어 유형) 약호 → 전체 표기. 데이터의 Class 컬럼은 축약형('고유'/'한자'/'외래'/'혼종')을 쓴다. */
 export declare const WORD_TYPE_LABEL: Record<string, string>;
 /** `t` 하나만 받는 작은 꼴 — `TFunction` 을 들여오지 않아 이 모듈이 i18n 에 안 매인다 */
-type 번역 = (k: string, o: {
+/** i18next `t` 와 같은 꼴 — **공개 서명(`posLabels`·`wordTypeLabels`)이 받는 자리**라 이름을 영어로 둔다
+ *  (사용자 지시 2026-10-13). 안쪽 이름은 한글이어도 소비자가 보는 이름은 영어라야 한다. */
+type Translate = (k: string, o: {
     defaultValue: string;
 }) => string;
 /**
@@ -76,12 +78,12 @@ type 번역 = (k: string, o: {
  * 사전에 없는 약호는 한국어 전체 표기(`POS_LABEL`)로 둔다 — 자료에 새 약호가 와도 빈칸이 안 된다.
  * @public
  */
-export declare function posLabels(t: 번역): Record<string, string>;
+export declare function posLabels(t: Translate): Record<string, string>;
 /**
  * **어종 약호 → 지금 언어의 이름**(`{ '한자': 'Sino-Korean', … }`). 쓰는 법은 `posLabels` 와 같다.
  * @public
  */
-export declare function wordTypeLabels(t: 번역): Record<string, string>;
+export declare function wordTypeLabels(t: Translate): Record<string, string>;
 /**
  * 약호 → i18n 열쇠 조각 표(품사·어종).
  *

package/dist/packages/core/src/hooks/inputModality.d.ts

@@ -1,2 +1,2 @@
 /** 마지막 입력이 키보드였으면 true(모르면 false) */
-export declare function 키보드로눌렀나(): boolean;
+export declare function wasKeyboardPress(): boolean;

package/dist/packages/core/src/hooks/inputModality.js

@@ -25,7 +25,7 @@ function 붙이기() {
 // 불러오는 즉시 듣는다 — 첫 누름부터 알아야 한다
 붙이기();
 /** 마지막 입력이 키보드였으면 true(모르면 false) */
-export function 키보드로눌렀나() {
+export function wasKeyboardPress() {
     붙이기();
     return 마지막 === 'keyboard';
 }

package/dist/packages/core/src/hooks/useDeviceManagement.d.ts

@@ -1,5 +1,5 @@
 import type { DeviceForm } from '../types/device';
-type Side = '좌' | '우';
+type Side = 'left' | 'right';
 /**
  * 보청기 기기 등록 / 이력 관리 상태를 캡슐화한 훅.
  */
@@ -11,22 +11,10 @@ export declare function useDeviceManagement(): {
     setShowDevice: import("react").Dispatch<import("react").SetStateAction<boolean>>;
     deviceDirection: Side;
     setDeviceDirection: import("react").Dispatch<import("react").SetStateAction<Side>>;
-    devices: {
-        좌: DeviceForm | null;
-        우: DeviceForm | null;
-    };
-    setDevices: import("react").Dispatch<import("react").SetStateAction<{
-        좌: DeviceForm | null;
-        우: DeviceForm | null;
-    }>>;
-    deviceHistory: {
-        좌: DeviceForm[];
-        우: DeviceForm[];
-    };
-    setDeviceHistory: import("react").Dispatch<import("react").SetStateAction<{
-        좌: DeviceForm[];
-        우: DeviceForm[];
-    }>>;
+    devices: Record<Side, DeviceForm | null>;
+    setDevices: import("react").Dispatch<import("react").SetStateAction<Record<Side, DeviceForm | null>>>;
+    deviceHistory: Record<Side, DeviceForm[]>;
+    setDeviceHistory: import("react").Dispatch<import("react").SetStateAction<Record<Side, DeviceForm[]>>>;
     showDeviceList: boolean;
     setShowDeviceList: import("react").Dispatch<import("react").SetStateAction<boolean>>;
     listForSide: Side;

package/dist/packages/core/src/hooks/useDeviceManagement.js

@@ -1,7 +1,17 @@
 'use client';
 import { useCallback, useState } from 'react';
-/** form.direction 이 '좌'·'우' 가 아니면 null — 캐스팅만 하면 devices['엉뚱한값'] 같은 열쇠가 생긴다 */
-const toSide = (d) => (d === '좌' || d === '우' ? d : null);
+/**
+ * `form.direction` 이 `'left'`·`'right'` 가 아니면 null — 캐스팅만 하면 `devices['엉뚱한값']` 같은 열쇠가 생긴다.
+ *
+ * **옛 값(`'좌'`·`'우'`)은 받지 않는다.** 2026-10-13 사장님 결정으로 값을 영어로 옮겼고,
+ * 너그럽게 받는 몫은 **소비자가 진다** — 말귀가 DB 와 오가는 길목 한 자리에 세워 두었다
+ * (`toDbDirection`/`fromDbDirection`). 여기서 함께 받으면 **두 자리가 같은 일을 하고**,
+ * DB 가 다 옮겨진 뒤에도 어느 쪽이 걷혔는지 아무도 모르게 된다.
+ *
+ * 걸리면 **조용히 `null`** 이다 — 터지지도 찍지도 않는다. 옛 값이 그대로 들어오면
+ * 기기가 안 골라지는 꼴로 보이니, 소비자는 **코어에 넘기기 전에** 옮겨 둔다.
+ */
+const toSide = (d) => (d === 'left' || d === 'right' ? d : null);
 /**
  * 보청기 기기 등록 / 이력 관리 상태를 캡슐화한 훅.
  */
@@ -10,15 +20,17 @@ const toSide = (d) => (d === '좌' || d === '우' ? d : null);
  */
 export function useDeviceManagement() {
     const [showDevice, setShowDevice] = useState(false);
-    const [deviceDirection, setDeviceDirection] = useState('좌');
-    const [devices, setDevices] = useState({ 좌: null, 우: null });
-    const [deviceHistory, setDeviceHistory] = useState({ 좌: [], 우: [] });
+    const [deviceDirection, setDeviceDirection] = useState('left');
+    /* 열쇠는 `Side`(= `DeviceSide`) **값**(`'left'`·`'right'`) — 서버의 `side` 열에 오가는 자료다.
+       이름도 값도 영어다 — 값은 2026-10-13 사장님 결정으로 옮겼다(`'좌'`·`'우'` → `'left'`·`'right'`). */
+    const [devices, setDevices] = useState({ left: null, right: null });
+    const [deviceHistory, setDeviceHistory] = useState({ left: [], right: [] });
     const [showDeviceList, setShowDeviceList] = useState(false);
-    const [listForSide, setListForSide] = useState('좌');
+    const [listForSide, setListForSide] = useState('left');
     // form.direction은 각 팝업(DeviceRegistrationPopup의 방향 드롭다운, DeviceListPopup의
-    // 좌/우 탭)에서 사용자가 실제로 고른 값이다 — deviceDirection/listForSide는 팝업을 열 때의
+    // left/right 탭)에서 사용자가 실제로 고른 값이다 — deviceDirection/listForSide는 팝업을 열 때의
     // 초기값일 뿐이라 팝업 내부에서 방향을 바꾸면 더 이상 실제 선택과 일치하지 않는다.
-    // 방향이 비었거나 '좌'·'우' 밖이면 **아무것도 바꾸지 않는다** — 예전에는 검사 없이 캐스팅해
+    // 방향이 비었거나 'left'·'right' 밖이면 **아무것도 바꾸지 않는다** — 예전에는 검사 없이 캐스팅해
     // devices·deviceHistory 에 없는 열쇠가 생겼고 prev[side] 가 undefined 라 이력 펼치기에서 터졌다.
     // 팝업은 닫지 않는다(사용자가 방향을 고르고 다시 제출할 수 있게).
     const handleDeviceSubmit = useCallback((form) => {

package/dist/packages/core/src/hooks/usePageResetOnChange.d.ts

@@ -11,12 +11,12 @@
  * React 가 이 꼴을 위해 내준 길이다(같은 컴포넌트를 바로 다시 그린다).
  *
  * ```ts
- * usePageResetOnChange(`${검색어}|${갈래}|${정렬}`, setPage)
+ * usePageResetOnChange(`${검색어}|${갈래}|${sort}`, setPage)
  * const { pageItems, totalPages } = usePagedList(걸러낸것, 쪽크기, page)
  * ```
  *
- * @param 열쇠 조건을 하나로 이어 붙인 글 — 이것이 달라지면 첫 쪽이다
+ * @param key 조건을 하나로 이어 붙인 글 — 이것이 달라지면 첫 쪽이다
  * @param setPage 쪽 번호를 쥔 쪽에서 준다
  * @public
  */
-export declare function usePageResetOnChange(열쇠: string, setPage: (n: number) => void): void;
+export declare function usePageResetOnChange(key: string, setPage: (n: number) => void): void;

package/dist/packages/core/src/hooks/usePageResetOnChange.js

@@ -13,18 +13,18 @@ import { useState } from 'react';
  * React 가 이 꼴을 위해 내준 길이다(같은 컴포넌트를 바로 다시 그린다).
  *
  * ```ts
- * usePageResetOnChange(`${검색어}|${갈래}|${정렬}`, setPage)
+ * usePageResetOnChange(`${검색어}|${갈래}|${sort}`, setPage)
  * const { pageItems, totalPages } = usePagedList(걸러낸것, 쪽크기, page)
  * ```
  *
- * @param 열쇠 조건을 하나로 이어 붙인 글 — 이것이 달라지면 첫 쪽이다
+ * @param key 조건을 하나로 이어 붙인 글 — 이것이 달라지면 첫 쪽이다
  * @param setPage 쪽 번호를 쥔 쪽에서 준다
  * @public
  */
-export function usePageResetOnChange(열쇠, setPage) {
-    const [본열쇠, set본열쇠] = useState(열쇠);
-    if (본열쇠 !== 열쇠) {
-        set본열쇠(열쇠);
+export function usePageResetOnChange(key, setPage) {
+    const [본열쇠, set본열쇠] = useState(key);
+    if (본열쇠 !== key) {
+        set본열쇠(key);
         setPage(1);
     }
 }

package/dist/packages/core/src/hooks/useTablePaging.d.ts

@@ -56,26 +56,37 @@ export interface TableSortOptions<K extends string> {
  * **정렬이 바뀌면 첫 쪽으로** — `useTablePaging` 의 `resetOn` 에 돌려받은 `정렬` 을 그대로 넣는다.
  * `정렬` 은 누를 때만 새 객체가 되므로(렌더마다 새로 만들지 않는다) 그 자체가 열쇠다. 쪽을 따로 들고 있으면 `onSortChange` 에서 되돌린다.
  *
- * `sortRows(rows, 값)` 은 지금 정렬로 줄을 세운 **새 배열**을 준다(정렬이 없으면 받은 배열 그대로) — `칸순`(숫자는 수로,
+ * `sortRows(rows, getValue)` 은 지금 정렬로 줄을 세운 **새 배열**을 준다(정렬이 없으면 받은 배열 그대로) — `compareCell`(숫자는 수로,
  * 한글·영문은 사람 차례) 으로 견주고 **빈 값(null·undefined·'')은 오름·내림 모두 맨 뒤**(ListPopup 과 같은 규칙).
  *
  * @example
- * const { 정렬, 칸, sortRows } = useTableSort<'name' | 'joined'>()
+ * const { sort, field, sortRows } = useTableSort<'name' | 'joined'>()
  * const 세운줄 = useMemo(() => sortRows(rows, (r, key) => r[key]), [rows, sortRows])
- * const { pageRows, pageSizeProps, paginationProps } = useTablePaging(세운줄, 정렬)   // 정렬이 바뀌면 첫 쪽
- * <Table fields={[칸('이름', 'name'), 칸('가입일', 'joined')]} … />
+ * const { pageRows, pageSizeProps, paginationProps } = useTablePaging(세운줄, sort)   // 정렬이 바뀌면 첫 쪽
+ * <Table fields={[field('이름', 'name'), field('가입일', 'joined')]} … />
  *
  * @public
  */
 export declare function useTableSort<K extends string>(opts?: TableSortOptions<K>): {
+    sort: {
+        key: K;
+        asc: boolean;
+    } | null;
+    field: (label: string, key: K) => {
+        label: string;
+        sortDir: "desc" | "asc" | null;
+        onClick: () => void;
+    };
+    sortRows: <R>(rows: readonly R[], getValue: (row: R, key: K) => unknown) => readonly R[];
+    /** @deprecated `sort` 를 쓴다 — 같은 값이다(2026-10-13) */
     정렬: {
         key: K;
         asc: boolean;
     } | null;
+    /** @deprecated `field` 를 쓴다 — 같은 함수다(2026-10-13) */
     칸: (label: string, key: K) => {
         label: string;
         sortDir: "desc" | "asc" | null;
         onClick: () => void;
     };
-    sortRows: <R>(rows: readonly R[], 값: (row: R, key: K) => unknown) => readonly R[];
 };

package/dist/packages/core/src/hooks/useTablePaging.js

@@ -2,7 +2,7 @@
 import { useCallback, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { VAP_PAGE_SIZE_OPTIONS } from './useVisitAllPanel';
-import { 칸순빈값뒤 } from '../utils/textSort';
+import { compareCellBlankLast } from '../utils/textSort';
 /**
  * 표의 쪽넘김 — 개수 보기 · 쪽 · 이번 쪽 줄.
  *
@@ -67,14 +67,14 @@ export function useTablePaging(rows, resetOn, opts) {
  * **정렬이 바뀌면 첫 쪽으로** — `useTablePaging` 의 `resetOn` 에 돌려받은 `정렬` 을 그대로 넣는다.
  * `정렬` 은 누를 때만 새 객체가 되므로(렌더마다 새로 만들지 않는다) 그 자체가 열쇠다. 쪽을 따로 들고 있으면 `onSortChange` 에서 되돌린다.
  *
- * `sortRows(rows, 값)` 은 지금 정렬로 줄을 세운 **새 배열**을 준다(정렬이 없으면 받은 배열 그대로) — `칸순`(숫자는 수로,
+ * `sortRows(rows, getValue)` 은 지금 정렬로 줄을 세운 **새 배열**을 준다(정렬이 없으면 받은 배열 그대로) — `compareCell`(숫자는 수로,
  * 한글·영문은 사람 차례) 으로 견주고 **빈 값(null·undefined·'')은 오름·내림 모두 맨 뒤**(ListPopup 과 같은 규칙).
  *
  * @example
- * const { 정렬, 칸, sortRows } = useTableSort<'name' | 'joined'>()
+ * const { sort, field, sortRows } = useTableSort<'name' | 'joined'>()
  * const 세운줄 = useMemo(() => sortRows(rows, (r, key) => r[key]), [rows, sortRows])
- * const { pageRows, pageSizeProps, paginationProps } = useTablePaging(세운줄, 정렬)   // 정렬이 바뀌면 첫 쪽
- * <Table fields={[칸('이름', 'name'), 칸('가입일', 'joined')]} … />
+ * const { pageRows, pageSizeProps, paginationProps } = useTablePaging(세운줄, sort)   // 정렬이 바뀌면 첫 쪽
+ * <Table fields={[field('이름', 'name'), field('가입일', 'joined')]} … />
  *
  * @public
  */
@@ -98,12 +98,23 @@ export function useTableSort(opts) {
         onClick: () => 누름(key),
     }), [정렬, 누름]);
     /** 지금 정렬로 세운 새 배열(정렬 없으면 받은 배열 그대로). 빈 값은 오름·내림 모두 맨 뒤. */
-    const sortRows = useCallback((rows, 값) => {
+    const sortRows = useCallback((rows, getValue) => {
         if (!정렬)
             return rows;
         const { key, asc } = 정렬;
-        return [...rows].sort((a, b) => 칸순빈값뒤(값(a, key), 값(b, key), asc));
+        return [...rows].sort((a, b) => compareCellBlankLast(getValue(a, key), getValue(b, key), asc));
     }, [정렬]);
-    /* 쪽넘김에 그대로 건넨다 — 차례가 바뀌면 첫 쪽으로 돌아가게 */
-    return { 정렬, 칸, sortRows };
+    /* 쪽넘김에 그대로 건넨다 — 차례가 바뀌면 첫 쪽으로 돌아가게.
+       **영어 이름이 정본이다**(`sort`·`field`) — 공개 API 는 영어라야 한다(사용자 지시 2026-10-13).
+       한글 이름(`정렬`·`칸`)은 **같은 것을 가리키는 옛 이름**으로 남긴다: 말귀가 77 줄에서 그 이름으로
+       풀어 쓰고 있어, 한 번에 걷으면 그 저장소가 통째로 빨개진다. 그쪽이 옮긴 뒤 걷는다. */
+    return {
+        sort: 정렬,
+        field: 칸,
+        sortRows,
+        /** @deprecated `sort` 를 쓴다 — 같은 값이다(2026-10-13) */
+        정렬,
+        /** @deprecated `field` 를 쓴다 — 같은 함수다(2026-10-13) */
+        칸,
+    };
 }

package/dist/packages/core/src/hooks/useWordAttributeFilter.d.ts

@@ -24,7 +24,16 @@ export interface WordAttributeFilterKeys {
  * 이 훅을 함께 호출해 라벨 문구와 posMap/typeMap(품사·어종 판정 규칙)을 어긋나지 않게 공유한다.
  */
 export declare function useWordAttributeFilterKeys(): WordAttributeFilterKeys;
-/** @public 등급(1~4등급) FilterPanelSection — 세 화면 공용. labelAction/allLabel은 호출부가 자신의 i18n으로 구성해 넘긴다. */
+/**
+ * @public 등급 FilterPanelSection — 세 화면 공용. labelAction/allLabel은 호출부가 자신의 i18n으로 구성해 넘긴다.
+ *
+ * **맨 끝에 `없음` 이 선다**((205), 2026-10-12) — 등급이 비어 있는 단어도 고를 수 있어야 한다.
+ * 맨 끝인 까닭은 **1~4 가 센 순서**이고 `없음` 은 그 줄 밖이기 때문이다(앞에 두면 `1등급` 앞에
+ * 숫자 아닌 것이 끼어 읽는 차례가 흔들린다).
+ *
+ * 이 줄의 글자는 `wordAttributeFilterCodes` 의 사전과 **같아야** 한다 — 거기서 코드로 못 읽으면
+ * 필터는 켜져 보이는데 한 단어도 안 걸린다. `test/gradeNoneOption.test.ts` 가 둘을 맞춰 센다.
+ */
 export declare function buildGradeSection(t: TFunction, keys: WordAttributeFilterKeys, opts?: {
     allLabel?: string;
     labelAction?: ReactNode;

package/dist/packages/core/src/hooks/useWordAttributeFilter.js

@@ -31,11 +31,20 @@ export function useWordAttributeFilterKeys() {
         },
     }), [t]);
 }
-/** @public 등급(1~4등급) FilterPanelSection — 세 화면 공용. labelAction/allLabel은 호출부가 자신의 i18n으로 구성해 넘긴다. */
+/**
+ * @public 등급 FilterPanelSection — 세 화면 공용. labelAction/allLabel은 호출부가 자신의 i18n으로 구성해 넘긴다.
+ *
+ * **맨 끝에 `없음` 이 선다**((205), 2026-10-12) — 등급이 비어 있는 단어도 고를 수 있어야 한다.
+ * 맨 끝인 까닭은 **1~4 가 센 순서**이고 `없음` 은 그 줄 밖이기 때문이다(앞에 두면 `1등급` 앞에
+ * 숫자 아닌 것이 끼어 읽는 차례가 흔들린다).
+ *
+ * 이 줄의 글자는 `wordAttributeFilterCodes` 의 사전과 **같아야** 한다 — 거기서 코드로 못 읽으면
+ * 필터는 켜져 보이는데 한 단어도 안 걸린다. `test/gradeNoneOption.test.ts` 가 둘을 맞춰 센다.
+ */
 export function buildGradeSection(t, keys, opts) {
     return {
         label: keys.difficulty,
-        items: [1, 2, 3, 4].map(n => t('wordSearch.filter.grade', { n })),
+        items: [...[1, 2, 3, 4].map(n => t('wordSearch.filter.grade', { n })), t('wordSearch.filter.gradeNone', '없음')],
         multiple: true,
         allOption: true,
         allLabel: opts?.allLabel,

package/dist/packages/core/src/hooks/useWordTrainingFilter.d.ts

@@ -1,3 +1,4 @@
+import type { TFunction } from 'i18next';
 import { type FilterPanelSection } from '../types/filterPanel';
 import { type WordComposition } from './wordTrainingFilterModel';
 export { valueToJamos, NO_CODA, SYLLABLE_MIN, syllableToFilter, charToPronValue, pronToCharValue, convertComposition, EMPTY_COMPOSITION, } from './wordTrainingFilterModel';
@@ -52,11 +53,14 @@ export interface WordTrainingFilterCaps {
     requireCoda?: boolean;
 }
 /**
- * 단어 훈련 그룹별 필터 상태.
- * @param groupKey  그룹 식별자 (localStorage 키 및 상태 격리에 사용)
- * @param caps      그룹이 노출할 설정 (난이도/단어구성). 제외 필터는 항상 노출.
- * @public
+ * 등급 고르개의 설명 줄들 — 지금 언어로. 사전에 배열이 없으면 한국어 원문.
+ *
+ * **공개 API 가 아니다**(대응표에 `internal`) — 코어 안에서만 쓰고, 내보내는 것은 못이 읽기 때문이다.
+ * 그래도 **이름은 영어다** — `internal` 이라도 배포 `d.ts` 에는 그대로 나가 소비자 편집기에 보인다
+ * (사용자 지시 2026-10-13. 소비자 사용처 0 이라 옛 이름을 남기지 않았다 — 말귀의 같은 이름 함수는 제 지역 것이다).
+ * 앱은 제 열쇠(`wordSearch.filter.gradeInfo`)와 제 받는 함수를 따로 갖는다.
  */
+export declare function gradeDescriptions(t: TFunction): string[];
 export declare function useWordTrainingFilter(groupKey: string, caps: WordTrainingFilterCaps, opts?: {
     resetOnMount?: boolean;
     resetKey?: string;

package/dist/packages/core/src/hooks/useWordTrainingFilter.js

@@ -6,6 +6,9 @@ import { FILTER_ALL_VALUE } from '../types/filterPanel';
 import { useWindowEvent } from './useWindowEvent';
 import { useWordAttributeFilterKeys, buildGradeSection, buildPartOfSpeechSection, buildWordTypeSection } from './useWordAttributeFilter';
 import { matchesFilters } from '../utils/phonemePairSearch';
+import { wordAttributeValueCodeOf, wordAttributeValueLabelOf, isGradeCode } from '../utils/wordAttributeFilterCodes';
+/** 저장된 등급을 되읽을 때 코드 아닌 것은 버린다 — 0.320.0 작업본이 잠깐 `['']` 를 저장했다 */
+const 등급코드만 = (v) => (Array.isArray(v) ? v.filter(isGradeCode) : []);
 import { hasSel } from '../utils/wordContrast';
 import { phoneticLabel } from '../utils/phonemeGroups';
 /* 글자↔발음 변환과 음절 상수는 wordTrainingFilterModel.ts 로 옮겼다(React 없는 순수 계층).
@@ -74,6 +77,26 @@ function readComposition(saved) {
  * @param caps      그룹이 노출할 설정 (난이도/단어구성). 제외 필터는 항상 노출.
  * @public
  */
+/** 사전이 배열을 안 주면 한국어 원문으로 물러선다 — 빈 줄을 띄우지 않는다((205)) */
+const GRADE_DESCRIPTIONS_KO = [
+    '1등급 : 학령전기에 습득하여 평생에 걸쳐 일상 언어생활을 하는 데 사용되는 어휘',
+    '2등급 : 초등학교 1-2학년 난이도 어휘',
+    '3등급 : 초등학교 3-4학년 난이도 어휘',
+    '4등급 : 초등학교 5-6학년 난이도 어휘',
+    '등급없음 : 국립국어원 표준 어휘 외 고빈도 생활 어휘, 신조어 및 외래어',
+];
+/**
+ * 등급 고르개의 설명 줄들 — 지금 언어로. 사전에 배열이 없으면 한국어 원문.
+ *
+ * **공개 API 가 아니다**(대응표에 `internal`) — 코어 안에서만 쓰고, 내보내는 것은 못이 읽기 때문이다.
+ * 그래도 **이름은 영어다** — `internal` 이라도 배포 `d.ts` 에는 그대로 나가 소비자 편집기에 보인다
+ * (사용자 지시 2026-10-13. 소비자 사용처 0 이라 옛 이름을 남기지 않았다 — 말귀의 같은 이름 함수는 제 지역 것이다).
+ * 앱은 제 열쇠(`wordSearch.filter.gradeInfo`)와 제 받는 함수를 따로 갖는다.
+ */
+export function gradeDescriptions(t) {
+    const v = t('wordPairs.filter.difficultyInfo', { returnObjects: true, defaultValue: GRADE_DESCRIPTIONS_KO });
+    return Array.isArray(v) && v.length > 0 && v.every(x => typeof x === 'string') ? v : GRADE_DESCRIPTIONS_KO;
+}
 export function useWordTrainingFilter(groupKey, caps, opts) {
     const { t, i18n } = useTranslation();
     // resetOnMount(단어훈련 만들기 등): 진입 시 항상 기본값에서 시작하도록 저장값을 불러오지 않는다.
@@ -122,7 +145,7 @@ export function useWordTrainingFilter(groupKey, caps, opts) {
     // 음소 구조 같은 단어만(초성 ㅇ 유무·받침 유무 대립 제외) — 기본 true (reset 시 OFF)
     const [sameStructureOnly, setSameStructureOnly] = useState(opts?.resetOnMount ? false : (saved?.sameStructureOnly ?? true));
     // 난이도 등급('1'~'4') 필터 — 배열(다중 선택), 빈 배열은 전체(무제약)
-    const [gradeFilter, setGradeFilter] = useState(Array.isArray(saved?.gradeFilter) ? saved.gradeFilter : []);
+    const [gradeFilter, setGradeFilter] = useState(등급코드만(saved?.gradeFilter));
     // 품사/어종 필터 — 단어표·대립쌍표와 동일 라벨 배열(다중 선택). caps로 노출 여부 결정(기본 미노출).
     const 라벨언어들 = Array.from(new Set([i18n.language, 'ko', 'en'].filter(Boolean)));
     const labelOf = (lng, key) => i18n.getFixedT(lng)(key);
@@ -190,7 +213,7 @@ export function useWordTrainingFilter(groupKey, caps, opts) {
             setSameStructureOnly(s?.sameStructureOnly ?? true);
             // 마운트 때와 같은 규칙 — 여기서만 'direct' 를 'char' 로 떨구고 있었다
             setPhonemeView(readPhonemeView(s));
-            setGradeFilter(Array.isArray(s?.gradeFilter) ? s.gradeFilter : []);
+            setGradeFilter(등급코드만(s?.gradeFilter));
             setPosCodes(posCodesOf(s?.posFilter));
             setTypeCodes(typeCodesOf(s?.wordTypeFilter));
         }
@@ -418,8 +441,18 @@ export function useWordTrainingFilter(groupKey, caps, opts) {
                    *"국립국어원의 기초 어휘 등급이 결과에 반영됩니다"* 한 줄이라, 1등급이 쉬운 쪽인지
                    어려운 쪽인지도 알 수 없었다. 앱 두 화면에는 이미 이 다섯 줄이 들어가 있어
                    (앱 열쇠 `wordSearch.filter.gradeInfo`), 이 자리만 한 줄로 남아 **세 화면이 다른 말**을
-                   하고 있었다 — 글자까지 같은 것을 쓴다. */
-                labelInfo: infoAction([1, 2, 3, 4, 5].map(n => t(`wordPairs.filter.difficultyInfo${n}`))),
+                   하고 있었다 — 글자까지 같은 것을 쓴다.
+        
+                   **한 열쇠에 배열로 둔다**(말귀 요청, 2026-10-12). 처음엔 `difficultyInfo1`~`5` 로 나눴는데
+                   그러면 ① 말귀 못(`deadI18nKeys`)이 **산 열쇠를 죽은 것으로** 센다 — 그 못은 `a.b.${x}` 처럼
+                   **점 자리에서 잘린 앞머리**를 쓰는 것으로 세는데, 이것은 *마지막 마디 뒤에 숫자를 붙여*
+                   안 걸린다. ② **줄 수가 다섯에 못 박힌다** — 배열이면 언어마다 줄 수가 달라도 된다.
+                   ③ 앱이 같은 꼴(`returnObjects`)을 이미 쓴다.
+        
+                   사전이 배열을 안 주면(옛 사전을 덮어쓴 소비자 등) **한국어 원문으로 물러선다** — 빈 줄을
+                   띄우지 않는다. 재 보고 적는다: `returnObjects` 는 배열을 그대로 주고 `defaultValue` 도
+                   배열로 물러선다(i18next 26.4.1). */
+                labelInfo: infoAction(gradeDescriptions(t)),
             }),
             label: LABELS.gradeLabel,
         });
@@ -479,7 +512,7 @@ export function useWordTrainingFilter(groupKey, caps, opts) {
             ...(sameStructureOnly ? [LABELS.sameStructure] : []),
         ],
         // 난이도 등급 — 선택된 등급들의 라벨 배열('1등급' 등)
-        [LABELS.gradeLabel]: gradeFilter.map(g => t('wordSearch.filter.grade', { n: Number(g), defaultValue: '{{n}}등급' })),
+        [LABELS.gradeLabel]: gradeFilter.map(g => wordAttributeValueLabelOf('grade', g)),
         // 품사/어종 — 단어표·대립쌍표와 동일하게 선택된 라벨 배열 그대로 노출
         ...(caps.partOfSpeech ? { [attrKeys.partOfSpeech]: posFilter } : {}),
         ...(caps.wordType ? { [attrKeys.wordType]: wordTypeFilter } : {}),
@@ -509,7 +542,11 @@ export function useWordTrainingFilter(groupKey, caps, opts) {
                 setGradeFilter([]);
                 return;
             }
-            const n = value.replace(/\D/g, '');
+            /* 라벨 → 코드는 사전으로 — 숫자만 남기면 `없음` 이 `''` 가 되어 저장되고 칩은 영영 안 켜졌다
+               (말귀_1 실측 2026-10-12). 못 읽는 라벨은 무시한다. */
+            const n = wordAttributeValueCodeOf('grade', value);
+            if (n == null)
+                return;
             setGradeFilter(prev => prev.includes(n) ? prev.filter(g => g !== n) : [...prev, n]);
         }
         else if (sectionLabel === attrKeys.partOfSpeech) {
@@ -584,7 +621,7 @@ export function useWordTrainingFilter(groupKey, caps, opts) {
         setExcludeNoImage(s.excludeNoImage);
         setSameStructureOnly(s.sameStructureOnly ?? true);
         setPhonemeView(s.phonemeView);
-        setGradeFilter(Array.isArray(s.gradeFilter) ? s.gradeFilter : []);
+        setGradeFilter(등급코드만(s.gradeFilter));
         if (Array.isArray(s.posFilter))
             setPosCodes(posCodesOf(s.posFilter));
         if (Array.isArray(s.wordTypeFilter))

package/dist/packages/core/src/i18n/locales/en.json

@@ -901,6 +901,7 @@
             "positionTail": "End",
             "difficulty": "Grade",
             "grade": "Grade {{n}}",
+            "gradeNone": "None",
             "syllables": "Syllables",
             "syllable": "{{n}} Syll.",
             "syllable5plus": "5+ Syllables",
@@ -1145,11 +1146,13 @@
             ],
             "orderAny": "Any",
             "orderMatch": "Match",
-            "difficultyInfo1": "Level 1 — everyday vocabulary acquired before school age and used for life",
-            "difficultyInfo2": "Level 2 — difficulty of grades 1–2",
-            "difficultyInfo3": "Level 3 — difficulty of grades 3–4",
-            "difficultyInfo4": "Level 4 — difficulty of grades 5–6",
-            "difficultyInfo5": "No level — frequent everyday words outside the national standard list, plus coinages and loanwords",
+            "difficultyInfo": [
+                "Level 1 — everyday vocabulary acquired before school age and used for life",
+                "Level 2 — difficulty of grades 1–2",
+                "Level 3 — difficulty of grades 3–4",
+                "Level 4 — difficulty of grades 5–6",
+                "No level — frequent everyday words outside the national standard list, plus coinages and loanwords"
+            ],
             "selectLabel": "Select",
             "onlyHasImage": "Only words with images",
             "onlySameStructure": "Only same phoneme structure"