@ihabdevteam/core 0.321.0 → 0.323.0

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

@@ -43,13 +43,13 @@ export function useEditableList(emptyItem, initialList = []) {
     /* 편집이 **취소로** 끝나면 그 사이 건너뛴 목록을 받는다 — 전에는 initialList 가 바뀔 때만 돌아, 편집 중 들어온 서버 목록이
        취소한 뒤에도 끝내 안 보였다(방문 예정을 고치다 취소하면 그 사이 다른 방문이 빠진 채). commitEdit 으로 끝난 때는
        방금 커밋한 편집을 옛 목록으로 덮지 않도록 한 번 넘긴다(다음 목록이 오면 그때 받는다). */
-    const 커밋으로끝남Ref = useRef(false);
+    const endedByCommitRef = useRef(false);
     const prevInitialRef = useRef(null);
     useEffect(() => {
         if (isEditing)
             return;
-        if (커밋으로끝남Ref.current) {
-            커밋으로끝남Ref.current = false;
+        if (endedByCommitRef.current) {
+            endedByCommitRef.current = false;
             return;
         }
         const prev = prevInitialRef.current;
@@ -80,7 +80,7 @@ export function useEditableList(emptyItem, initialList = []) {
         setSelected(updated);
         // 편집 중이었을 때만 표시한다(편집이 아닌데 표시하면 다음 목록 한 번을 헛되이 건너뛴다). 같은 값을 넣는 표시라 두 번 불려도 같다
         setIsEditing(prev => { if (prev)
-            커밋으로끝남Ref.current = true; return false; });
+            endedByCommitRef.current = true; return false; });
     }, []);
     const remove = useCallback((item) => {
         setList(prev => prev.filter(v => !isSameEditableItem(v, item)));

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

@@ -40,8 +40,8 @@ export function useFocusTrap(panelRef, enabled = true) {
             const active = document.activeElement;
             /* 포커스가 **판 자체**(tabIndex=-1 — 본문 글자를 누르면 판이 받는다)에 있으면 첫 칸·끝 칸 어느 쪽도 아니라
                되감지 않아, Shift+Tab 한 번에 뒤 화면으로 나갔다. 판 자체면 Shift+Tab 은 끝 칸으로 보낸다. */
-            const 판자체 = active === panel;
-            if (e.shiftKey && (active === first || 판자체)) {
+            const onPanelItself = active === panel;
+            if (e.shiftKey && (active === first || onPanelItself)) {
                 e.preventDefault();
                 last.focus();
             }

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

@@ -5,7 +5,7 @@ export default function useFontScale({ storageKey = 'fontScale',
 // 기본값을 중앙화: Training/Tooltip 텍스트 박스 공통값
 baseFont = 20, minScale = 0.8, maxScale = 1.4, step = 0.1, lineHeightRatio = 1.4, } = {}) {
     const clamp = (v) => Math.max(minScale, Math.min(maxScale, Number(v)));
-    const 읽기 = (key) => {
+    const read = (key) => {
         try {
             const raw = localStorage.getItem(key);
             const parsed = raw ? Number(raw) : 1;
@@ -21,13 +21,13 @@ baseFont = 20, minScale = 0.8, maxScale = 1.4, step = 0.1, lineHeightRatio = 1.4
             return clamp(1);
         }
     };
-    const [scale, setScaleRaw] = useState(() => 읽기(storageKey));
+    const [scale, setScaleRaw] = useState(() => read(storageKey));
     /* 열쇠가 바뀌면 **그 열쇠의 저장값** 으로 — 전에는 앞 열쇠의 값을 들고 있다가 아래 쓰기가 새 열쇠의 저장값을 덮었다.
        렌더 중에 맞추므로 쓰기 effect 는 새 값으로만 돈다. */
-    const [읽은열쇠, set읽은열쇠] = useState(storageKey);
-    if (읽은열쇠 !== storageKey) {
-        set읽은열쇠(storageKey);
-        setScaleRaw(읽기(storageKey));
+    const [loadedKey, setLoadedKey] = useState(storageKey);
+    if (loadedKey !== storageKey) {
+        setLoadedKey(storageKey);
+        setScaleRaw(read(storageKey));
     }
     useEffect(() => {
         try {

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

@@ -5,13 +5,13 @@ import { resolveAssetUrl } from '../utils';
 /* 속성 값이 **문서 밖을 가리키는** url( 을 품었나. `url(#그라데이션)`·`url(#clip)` 처럼 같은 SVG 안의 조각만 가리키는 것은 둔다 —
    코어 로고 서른여섯 장이 clip-path·fill 로 그것을 쓴다(걷으면 인라인으로 그린 로고가 깨진다).
    CSS 이스케이프로 url 을 숨긴 꼴(역슬래시 + 괄호)도 걷는다 — 아이콘 속성에 그런 값을 쓸 까닭이 없다. */
-function 바깥url있나(value) {
+function hasExternalUrl(value) {
     if (value.includes('\\') && value.includes('('))
         return true;
     if (!/url\s*\(/i.test(value))
         return false;
-    const 조각만뺀 = value.replace(/url\(\s*(['"]?)#[^)'"]*\1\s*\)/gi, '');
-    return /url\s*\(/i.test(조각만뺀);
+    const withoutFragments = value.replace(/url\(\s*(['"]?)#[^)'"]*\1\s*\)/gi, '');
+    return /url\s*\(/i.test(withoutFragments);
 }
 function sanitizeSvg(raw) {
     if (typeof window === 'undefined')
@@ -19,11 +19,11 @@ function sanitizeSvg(raw) {
     /* 인라인 SVG 에서 **바깥 자원을 부르는 길** 을 걷는다 — `<style>`(@import·background:url) 과 바깥 url( 이 든 속성(style·fill·filter…).
        그대로 두면 아이콘 한 장이 제3자 주소로 요청을 보내거나(추적) CSS 로 화면을 덮을 수 있었다.
        훅은 DOMPurify 전역에 붙으므로 이 한 번의 sanitize 동안만 걸고 곧바로 뗀다(앱의 다른 DOMPurify 쓰임에 새지 않게). */
-    const 훅 = (_node, data) => {
-        if (typeof data.attrValue === 'string' && 바깥url있나(data.attrValue))
+    const hook = (_node, data) => {
+        if (typeof data.attrValue === 'string' && hasExternalUrl(data.attrValue))
             data.keepAttr = false;
     };
-    DOMPurify.addHook('uponSanitizeAttribute', 훅);
+    DOMPurify.addHook('uponSanitizeAttribute', hook);
     try {
         return DOMPurify.sanitize(raw, {
             USE_PROFILES: { svg: true, svgFilters: true },
@@ -32,7 +32,7 @@ function sanitizeSvg(raw) {
         });
     }
     finally {
-        DOMPurify.removeHook('uponSanitizeAttribute', 훅);
+        DOMPurify.removeHook('uponSanitizeAttribute', hook);
     }
 }
 /** @public */

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

@@ -42,8 +42,8 @@ export function useListControls(opts = {}) {
     const [page, setPage] = useState(1);
     /* 못 읽히는 쪽크기('' · 'all' · '0')는 기본값으로 — 그 셈이 화면마다 한 벌씩 있었다.
        기본값 자체가 못 읽히면 25 다. 목록이 통째로 사라지는 값(0·NaN)을 여기서 닫는다. */
-    const 기본수 = Number(defaultPageSize) || 25;
-    const perPage = Number(pageSize) || 기본수;
+    const defaultSize = Number(defaultPageSize) || 25;
+    const perPage = Number(pageSize) || defaultSize;
     /* **검색어와 쪽크기를 여기서 넣는다** — 부르는 쪽이 적으면 빠뜨릴 수 있고, 빠뜨려도 안 빨개진다.
        이어 붙이는 것은 `usePageResetOnChange` 가 글 하나를 받기 때문이고, 값이 글·수·참거짓뿐이라
        `[object Object]` 로 뭉개질 일이 없다(타입이 막는다). */

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 [seenKey, setSeenKey] = useState(key);
+    if (seenKey !== key) {
+        setSeenKey(key);
         setPage(1);
     }
 }

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

@@ -17,7 +17,7 @@ export function usePasswordChange(onChangePassword) {
     const clearTimerRef = useRef(null);
     /* 처리 중에는 다시 받지 않는다 — 두 번 누르면 변경이 두 번 나가, 먼저 온 성공 뒤에 늦게 온 "현재 비밀번호 틀림" 이
        남아 바뀌었는데 오류 문구가 떴다(말귀 계정 화면 단추는 로딩 중에도 눌린다) */
-    const 처리중Ref = useRef(false);
+    const busyRef = useRef(false);
     useEffect(() => {
         return () => {
             if (clearTimerRef.current !== null)
@@ -29,7 +29,7 @@ export function usePasswordChange(onChangePassword) {
         setPwMsg(null);
     }, []);
     const handleChangePw = useCallback(async () => {
-        if (처리중Ref.current)
+        if (busyRef.current)
             return;
         if (!pw.current) {
             setPwMsg({ type: 'error', text: t('account.security.password.currentRequired', '현재 비밀번호를 입력하세요.') });
@@ -46,7 +46,7 @@ export function usePasswordChange(onChangePassword) {
             return;
         }
         setPwLoading(true);
-        처리중Ref.current = true;
+        busyRef.current = true;
         // 콜백이 문구 대신 **거절**하면(망 끊김 등) 로딩이 true 로 남아 단추가 영영 잠겼고,
         // reset() 도 로딩은 안 건드려 풀 길이 없었다. 거절도 오류 문구로 보이고 로딩은 늘 내린다.
         let err;
@@ -57,7 +57,7 @@ export function usePasswordChange(onChangePassword) {
             err = getErrorMessage(e);
         }
         finally {
-            처리중Ref.current = false;
+            busyRef.current = false;
             setPwLoading(false);
         }
         if (err) {

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

@@ -7,19 +7,19 @@ import { useCallback, useEffect, useRef, useState } from 'react';
  */
 export function usePendingPress(fn) {
     const [pending, setPending] = useState(false);
-    const 진행중 = useRef(false);
-    const 붙어있음 = useRef(true);
-    useEffect(() => { 붙어있음.current = true; return () => { 붙어있음.current = false; }; }, []);
+    const running = useRef(false);
+    const mounted = useRef(true);
+    useEffect(() => { mounted.current = true; return () => { mounted.current = false; }; }, []);
     const press = useCallback(() => {
-        if (!fn || 진행중.current)
+        if (!fn || running.current)
             return;
         const r = fn();
         if (r && typeof r.then === 'function') {
-            진행중.current = true;
+            running.current = true;
             setPending(true);
-            const 풀기 = () => { 진행중.current = false; if (붙어있음.current)
+            const settle = () => { running.current = false; if (mounted.current)
                 setPending(false); };
-            r.then(풀기, 풀기);
+            r.then(settle, settle);
         }
     }, [fn]);
     return { pending, press };

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

@@ -3,7 +3,7 @@ import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { getTodayKst, toKstYmd } from '../utils/date';
 /** 'YYYY-MM-DD' 두 날짜 사이의 달력날 수 */
-function 날수(from, to) {
+function dayDiff(from, to) {
     const [fy, fm, fd] = from.split('-').map(Number);
     const [ty, tm, td] = to.split('-').map(Number);
     return Math.round((Date.UTC(ty, tm - 1, td) - Date.UTC(fy, fm - 1, fd)) / 86400000);
@@ -23,10 +23,10 @@ export function useRelativeDay() {
     return useCallback((iso) => {
         if (!iso)
             return '';
-        const 그날 = toKstYmd(iso);
-        if (!그날)
+        const ymd = toKstYmd(iso);
+        if (!ymd)
             return '';
-        const days = 날수(그날, getTodayKst());
+        const days = dayDiff(ymd, getTodayKst());
         if (days <= 0)
             return t('myHomework.relativeDay.today', '오늘');
         if (days === 1)

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

@@ -26,7 +26,7 @@ export function useSoundCompassExam(speakers, { mode = 'playback', autoStart = f
     useEffect(() => () => clearTimers(), []);
     const answerId = queue[index]?.id ?? null;
     /** 이미 고른 문항 번호 — 새 문항이 대기에 들어가면 풀린다(playQuestion) */
-    const 고름잠금 = useRef(null);
+    const pickLockRef = useRef(null);
     // ── playback: 모든 스피커를 순서대로 ──────────────────────────────────
     const runPlayback = useCallback(() => {
         clearTimers();
@@ -49,7 +49,7 @@ export function useSoundCompassExam(speakers, { mode = 'playback', autoStart = f
             onDoneRef.current?.({ score: scoreRef.current, total: q.length });
             return;
         }
-        고름잠금.current = null;
+        pickLockRef.current = null;
         setIndex(i);
         setSelectedId(null);
         setPhase('playing');
@@ -87,7 +87,7 @@ export function useSoundCompassExam(speakers, { mode = 'playback', autoStart = f
     /* eslint-disable react-hooks/set-state-in-effect */
     /* 배치가 바뀌었는지는 **스피커 id 들**로 본다 — 개수만 보면 수가 같은 다른 배치(HORIZON_7 ↔ PRESET_27 가로)로 바꿔도
        초기화되지 않아 옛 문제 줄이 남고 정답 id 가 새 배치에 없어 무엇을 골라도 오답이었다. */
-    const 배치열쇠 = speakers.map((sp) => sp.id).join('|');
+    const layoutKey = speakers.map((sp) => sp.id).join('|');
     useEffect(() => {
         if (autoStart)
             start();
@@ -96,14 +96,14 @@ export function useSoundCompassExam(speakers, { mode = 'playback', autoStart = f
         // 배치·모드가 바뀌거나 떠날 때 앞 판의 예약을 걷는다
         return () => clearTimers();
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [mode, 배치열쇠, autoStart]);
+    }, [mode, layoutKey, autoStart]);
     /* eslint-enable react-hooks/set-state-in-effect */
     const onSelectSpeaker = useCallback((id) => {
         /* 같은 대기에서 **한 번만** 받는다 — 다시 그려지기 전에 같은 핸들러가 두 번 불리면(렌더 시점의 phase 만 보면) 점수가 +2,
            다음 문제가 두 번 예약됐다. 고르는 순간 ref 로 닫는다. */
-        if (phase !== 'waiting' || mode === 'playback' || 고름잠금.current === index)
+        if (phase !== 'waiting' || mode === 'playback' || pickLockRef.current === index)
             return;
-        고름잠금.current = index;
+        pickLockRef.current = index;
         setSelectedId(id);
         const correct = id === queue[index]?.id;
         if (correct)

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

@@ -56,26 +56,26 @@ 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;
-    칸: (label: string, key: K) => {
+    field: (label: string, key: K) => {
         label: string;
         sortDir: "desc" | "asc" | null;
         onClick: () => void;
     };
-    sortRows: <R>(rows: readonly R[], 값: (row: R, key: K) => unknown) => readonly R[];
+    sortRows: <R>(rows: readonly R[], getValue: (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';
 /**
  * 표의 쪽넘김 — 개수 보기 · 쪽 · 이번 쪽 줄.
  *
@@ -26,17 +26,17 @@ import { 칸순빈값뒤 } from '../utils/textSort';
 export function useTablePaging(rows, resetOn, opts) {
     const { t } = useTranslation();
     const [pageSize, setPageSizeRaw] = useState(() => {
-        const 처음 = opts?.initialPageSize;
-        return 처음 && VAP_PAGE_SIZE_OPTIONS.some(o => o.value === 처음) ? 처음 : '25';
+        const initial = opts?.initialPageSize;
+        return initial && VAP_PAGE_SIZE_OPTIONS.some(o => o.value === initial) ? initial : '25';
     });
     const [page, setPage] = useState(1);
     /* 늘어놓는 차례가 바뀌면 첫 쪽으로 — 3쪽을 보던 중에 정렬하면 무엇이 위로 왔는지
        못 본다. 렌더 중에 되돌린다(저장소의 다른 곳들과 같은 꼴: 값이 바뀐 그 렌더에서
        바로 맞춰야 한 박자 늦은 화면이 안 뜬다). */
-    const [본것, set본것] = useState(resetOn);
+    const [seen, setSeen] = useState(resetOn);
     // Object.is — NaN 이면 `!==` 가 늘 참이라 렌더가 끝나지 않았다. 객체는 렌더마다 새로 만들면 매번 바뀐 것이다(원시값을 넘길 것)
-    if (!Object.is(본것, resetOn)) {
-        set본것(resetOn);
+    if (!Object.is(seen, resetOn)) {
+        setSeen(resetOn);
         if (page !== 1)
             setPage(1);
     }
@@ -50,14 +50,14 @@ export function useTablePaging(rows, resetOn, opts) {
     // 1 보다 작은 쪽(setPage(0)·-1)도 막는다 — 0 은 빈 쪽, -1 은 음수 slice 로 엉뚱한 줄이 나왔다
     if (page > total || page < 1 || !Number.isFinite(page))
         setPage(Math.min(Math.max(1, Number.isFinite(page) ? page : 1), total));
-    const 이쪽 = Math.min(Math.max(1, Number.isFinite(page) ? page : 1), total);
-    const pageRows = useMemo(() => rows.slice((이쪽 - 1) * Number(pageSize), 이쪽 * Number(pageSize)), [rows, 이쪽, pageSize]);
+    const clampedPage = Math.min(Math.max(1, Number.isFinite(page) ? page : 1), total);
+    const pageRows = useMemo(() => rows.slice((clampedPage - 1) * Number(pageSize), clampedPage * Number(pageSize)), [rows, clampedPage, pageSize]);
     return {
         pageRows,
         /** Toolbar 의 pageSize 자리에 그대로 넣는다 */
         pageSizeProps: { options: pageSizeOptions, value: pageSize, onChange: setPageSize },
         /** Toolbar 의 pagination 자리에 그대로 넣는다 */
-        paginationProps: { page: 이쪽, total, onChange: setPage },
+        paginationProps: { page: clampedPage, total, onChange: setPage },
         setPage,
     };
 }
@@ -67,43 +67,49 @@ 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
  */
 export function useTableSort(opts) {
-    const [정렬, 정렬바꾸기] = useState(null);
+    const [sortState, setSortState] = useState(null);
     /* 다음 정렬은 **ref 에서** 계산해 알린다 — 갱신 함수 안에서 부르면 StrictMode 가 두 번 부른다 */
-    const 지금정렬 = useRef(정렬);
-    const 알림 = useRef(opts?.onSortChange);
-    알림.current = opts?.onSortChange;
-    const 누름 = useCallback((key) => {
-        const 앞 = 지금정렬.current;
-        const 다음 = 앞?.key === key ? { key, asc: !앞.asc } : { key, asc: true };
-        지금정렬.current = 다음;
-        정렬바꾸기(다음);
-        알림.current?.(다음);
+    const sortRef = useRef(sortState);
+    const onChangeRef = useRef(opts?.onSortChange);
+    onChangeRef.current = opts?.onSortChange;
+    const onHeadClick = useCallback((key) => {
+        const prev = sortRef.current;
+        const next = prev?.key === key ? { key, asc: !prev.asc } : { key, asc: true };
+        sortRef.current = next;
+        setSortState(next);
+        onChangeRef.current?.(next);
     }, []);
     /** Table 의 field 하나에 붙일 것 — 라벨과 함께 쓴다 */
-    const 칸 = useCallback((label, key) => ({
+    const fieldHead = useCallback((label, key) => ({
         label,
-        sortDir: 정렬?.key === key ? (정렬.asc ? 'asc' : 'desc') : null,
-        onClick: () => 누름(key),
-    }), [정렬, 누름]);
+        sortDir: sortState?.key === key ? (sortState.asc ? 'asc' : 'desc') : null,
+        onClick: () => onHeadClick(key),
+    }), [sortState, onHeadClick]);
     /** 지금 정렬로 세운 새 배열(정렬 없으면 받은 배열 그대로). 빈 값은 오름·내림 모두 맨 뒤. */
-    const sortRows = useCallback((rows, 값) => {
-        if (!정렬)
+    const sortRows = useCallback((rows, getValue) => {
+        if (!sortState)
             return rows;
-        const { key, asc } = 정렬;
-        return [...rows].sort((a, b) => 칸순빈값뒤(값(a, key), 값(b, key), asc));
-    }, [정렬]);
-    /* 쪽넘김에 그대로 건넨다 — 차례가 바뀌면 첫 쪽으로 돌아가게 */
-    return { 정렬, 칸, sortRows };
+        const { key, asc } = sortState;
+        return [...rows].sort((a, b) => compareCellBlankLast(getValue(a, key), getValue(b, key), asc));
+    }, [sortState]);
+    /* 쪽넘김에 그대로 건넨다 — 차례가 바뀌면 첫 쪽으로 돌아가게.
+       **옛 한글 이름(`정렬`·`칸`)은 2026-10-13 걷었다** — 소비자가 다 옮긴 것을 세어 보고 걷었다
+       (말귀의 코어 `useTableSort` 자리 열, 전부 `{ sort, field }`. kscan·소리방향성·fe 는 0). */
+    return {
+        sort: sortState,
+        field: fieldHead,
+        sortRows,
+    };
 }

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

@@ -54,72 +54,72 @@ import { logTrainingTime } from '../utils/trainingLogger';
  * @public
  */
 /** 지금 그 갈래의 시간을 적고 있는 주인 — 갈래마다 하나(위 머리말 참고) */
-const 적는주인 = new Set();
+const writers = new Set();
 export default function useTrainingSessionLog(trainingType) {
     useEffect(() => {
         if (!trainingType)
             return; // 타입 미상이면 기록하지 않음
         /* **갈래마다 주인은 하나다.** 이미 누가 적고 있으면 조용히 물러난다 — 안 그러면
            두 창이 제 시간을 따로 적어 겹친 만큼이 두 번 세어진다. */
-        if (적는주인.has(trainingType))
+        if (writers.has(trainingType))
             return;
-        적는주인.add(trainingType);
-        const 보임 = () => typeof document === 'undefined' || document.visibilityState !== 'hidden';
-        let 처음보임 = null;
-        let 구간시작 = null;
-        let 모은ms = 0;
-        let 보낸ms = 0; // 지금까지 줄로 내보낸 누계 — 다음 줄은 여기서부터 이어 붙인다
-        const 구간열기 = () => { const t = Date.now(); if (처음보임 == null)
-            처음보임 = t; if (구간시작 == null)
-            구간시작 = t; };
-        const 구간닫기 = () => { if (구간시작 != null) {
-            모은ms += Date.now() - 구간시작;
-            구간시작 = null;
+        writers.add(trainingType);
+        const isVisible = () => typeof document === 'undefined' || document.visibilityState !== 'hidden';
+        let firstVisibleAt = null;
+        let spanStartedAt = null;
+        let accumulatedMs = 0;
+        let sentMs = 0; // 지금까지 줄로 내보낸 누계 — 다음 줄은 여기서부터 이어 붙인다
+        const openSpan = () => { const t = Date.now(); if (firstVisibleAt == null)
+            firstVisibleAt = t; if (spanStartedAt == null)
+            spanStartedAt = t; };
+        const closeSpan = () => { if (spanStartedAt != null) {
+            accumulatedMs += Date.now() - spanStartedAt;
+            spanStartedAt = null;
         } };
-        if (보임())
-            구간열기();
+        if (isVisible())
+            openSpan();
         /* 아직 안 보낸 만큼을 한 줄로. 끝 시각은 처음 보인 때 + 모은 시간, 시작 시각은 앞 줄이
            끝난 자리 — 줄끼리 겹치지 않으니 합산해도 이중으로 세지 않는다.
            전달은 등록된 로거(logTrainingTime)로 간다. 코어는 보낼 주소를 모르므로
            navigator.sendBeacon 을 여기서 직접 쓸 수 없다 — 앱이 등록하는 로거의 몫이다. */
-        const 보내기 = () => {
-            구간닫기();
-            if (처음보임 == null)
+        const send = () => {
+            closeSpan();
+            if (firstVisibleAt == null)
                 return;
-            const 남은ms = 모은ms - 보낸ms;
+            const pendingMs = accumulatedMs - sentMs;
             /* 1초가 안 되는 조각은 보내지 않는다 — 서버(log_training_category_time)가 1초 미만 줄을 버리므로
                부르기 제한(10분 60번)만 축낸다(말귀 확인 2026-09-16). */
-            if (남은ms < 1000)
+            if (pendingMs < 1000)
                 return;
             // 첫 줄에만 5초 문턱을 건다(잘못 열었다 닫은 판). 한 번 보낸 판은 이미 실재하는
             // 훈련이라, 돌아와 더 한 시간은 짧아도 버리지 않는다.
-            if (보낸ms === 0 && 모은ms < 5000)
+            if (sentMs === 0 && accumulatedMs < 5000)
                 return;
-            const 시작ms = 처음보임 + 보낸ms;
-            보낸ms = 모은ms;
+            const startMs = firstVisibleAt + sentMs;
+            sentMs = accumulatedMs;
             logTrainingTime({
                 trainingType,
-                startedAt: new Date(시작ms).toISOString(),
-                endedAt: new Date(처음보임 + 모은ms).toISOString(),
+                startedAt: new Date(startMs).toISOString(),
+                endedAt: new Date(firstVisibleAt + accumulatedMs).toISOString(),
             });
         };
         // 숨으면 보낸다(앱이 그대로 죽을 수 있다). 다시 보이면 이어서 모은다.
-        const 보임바뀜 = () => { if (보임())
-            구간열기();
+        const onVisibilityChange = () => { if (isVisible())
+            openSpan();
         else
-            보내기(); };
+            send(); };
         if (typeof document !== 'undefined')
-            document.addEventListener('visibilitychange', 보임바뀜);
+            document.addEventListener('visibilitychange', onVisibilityChange);
         // 페이지가 내려가면(탭·앱 닫기) React 정리가 안 돈다 — 그때 보낸다
         if (typeof window !== 'undefined')
-            window.addEventListener('pagehide', 보내기);
+            window.addEventListener('pagehide', send);
         return () => {
             if (typeof document !== 'undefined')
-                document.removeEventListener('visibilitychange', 보임바뀜);
+                document.removeEventListener('visibilitychange', onVisibilityChange);
             if (typeof window !== 'undefined')
-                window.removeEventListener('pagehide', 보내기);
-            보내기();
-            적는주인.delete(trainingType);
+                window.removeEventListener('pagehide', send);
+            send();
+            writers.delete(trainingType);
         };
     }, [trainingType]);
 }

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

@@ -13,10 +13,10 @@ import { useEditableList, isSameEditableItem } from './useEditableList';
  * 없었다** — V8 의 TimSort 는 같은 값 구간에서 비교를 아예 안 불러, 뒤섞인 자료로
  * 재 봐도 결과가 같았다(실측). 그래서 이 한 가지는 시험으로 못 박는다.
  */
-const 정렬키 = (v) => `${v.year.padStart(4, '0')}-${v.month.padStart(2, '0')}-${v.day.padStart(2, '0')}` +
+const sortKeyOf = (v) => `${v.year.padStart(4, '0')}-${v.month.padStart(2, '0')}-${v.day.padStart(2, '0')}` +
     ` ${v.hour.padStart(2, '0')}:${v.minute.padStart(2, '0')}`;
 const sortByDate = (list) => [...list].sort((a, b) => {
-    const x = 정렬키(a), y = 정렬키(b);
+    const x = sortKeyOf(a), y = sortKeyOf(b);
     return x < y ? -1 : x > y ? 1 : 0;
 });
 const emptyScheduleItem = { year: '', month: '', day: '', hour: '09', minute: '00', memo: '' };
@@ -34,8 +34,8 @@ initialSchedule = []) {
        useMemo 로 묶는 것은 성능 때문이 아니라 **되돌이를 막기 위해서다** —
        useEditableList 는 초기 목록을 원소 참조로 견주는데, 렌더마다 새 배열을 만들면
        원소는 같아도 매번 setList 가 돌아 무한 렌더가 된다. */
-    const 정렬된초기목록 = useMemo(() => sortByDate(initialSchedule), [initialSchedule]);
-    const { list: scheduleList, setList: setScheduleList, selected: selectedSchedule, setSelected: setSelectedSchedule, isEditing: isEditingSchedule, setIsEditing: setIsEditingSchedule, editForm: editScheduleForm, setEditForm: setEditScheduleForm, openDetail: openScheduleDetail, commitEdit, remove, } = useEditableList(emptyScheduleItem, 정렬된초기목록);
+    const sortedInitial = useMemo(() => sortByDate(initialSchedule), [initialSchedule]);
+    const { list: scheduleList, setList: setScheduleList, selected: selectedSchedule, setSelected: setSelectedSchedule, isEditing: isEditingSchedule, setIsEditing: setIsEditingSchedule, editForm: editScheduleForm, setEditForm: setEditScheduleForm, openDetail: openScheduleDetail, commitEdit, remove, } = useEditableList(emptyScheduleItem, sortedInitial);
     /** 미방문 처리된 예약 — 삭제하지 않고 보존해 통합 방문 목록에서 뱃지로 표시 */
     const [noShowList, setNoShowList] = useState([]);
     const { year: ty, month: tm, day: td } = today();