@ihabdevteam/core 0.321.0 → 0.323.0

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

@@ -36,9 +36,9 @@ function audioDurationOf(a) {
     try {
         const s = a.seekable;
         if (s && s.length > 0) {
-            const 끝 = s.end(s.length - 1);
-            if (Number.isFinite(끝) && 끝 > 0)
-                return 끝;
+            const end = s.end(s.length - 1);
+            if (Number.isFinite(end) && end > 0)
+                return end;
         }
     }
     catch { /* seekable 을 못 읽는 환경 */ }
@@ -60,11 +60,11 @@ function audioDurationOf(a) {
  * 틀 사이가 400ms 를 넘으면 **칸이 보이는지와 함께** 한 번 찍는다. 운영 빌드에서는
  * 아무 일도 안 한다.
  */
-const 느린틀 = 400;
+const SLOW_FRAME_MS = 400;
 /** 이만큼 멀쩡했다가 다시 느려지면 **새 고비**로 센다(ms) */
-const 고비사이 = 2000;
+const SPIKE_GAP_MS = 2000;
 /** 고비를 이만큼까지만 알린다 — 그 뒤로는 조용히 둔다(콘솔이 넘치면 진짜 봐야 할 것이 묻힌다) */
-const 고비한도 = 5;
+const SPIKE_LIMIT = 5;
 export function useProgressTicker({ audioRef, fillRef, waveProgressRef, sourcesRef, currentIndexRef, sequencer, leadInMs = 0, tailMs = 0, }) {
     const rafRef = useRef(null);
     /**
@@ -78,11 +78,11 @@ export function useProgressTicker({ audioRef, fillRef, waveProgressRef, sourcesR
      * 그래서 **고비마다** 다시 말한다: 틀이 2초 넘게 멀쩡하다가 다시 느려지면 새 고비로 센다.
      * 매 틀 찍지는 않는다(한 고비에 한 번) — 콘솔이 넘치면 진짜 봐야 할 것이 묻힌다.
      */
-    const 느린고비Ref = useRef(0);
+    const slowSpikesRef = useRef(0);
     /** 마지막으로 느렸던 때. **아직 없으면 `null`** — 0 을 쓰면 안 된다:
         `performance.now()` 는 쪽이 열린 뒤부터 세므로 첫 1~2초 안에 느려지면
         `지금 - 0` 이 고비사이를 못 넘어 **첫 고비를 통째로 놓친다**(시험이 잡았다). */
-    const 마지막느린때Ref = useRef(null);
+    const lastSlowAtRef = useRef(null);
     const stop = useCallback(() => {
         if (rafRef.current === null)
             return;
@@ -93,46 +93,46 @@ export function useProgressTicker({ audioRef, fillRef, waveProgressRef, sourcesR
         // 이미 돌고 있으면 겹쳐 걸지 않는다 — 두 사슬이 같은 값을 다투면 마커가 떤다
         if (rafRef.current !== null)
             return;
-        let 앞틀 = 0;
+        let prevFrame = 0;
         const step = () => {
             /* 틀 사이가 벌어졌나 — 값을 그리기 전에 본다(그리는 일과 무관하다) */
             if (isDev) {
-                const 지금 = typeof performance !== 'undefined' && performance.now ? performance.now() : Date.now();
-                if (앞틀 > 0 && 지금 - 앞틀 > 느린틀) {
+                const now = typeof performance !== 'undefined' && performance.now ? performance.now() : Date.now();
+                if (prevFrame > 0 && now - prevFrame > SLOW_FRAME_MS) {
                     /** 멀쩡하다가 다시 느려졌으면 **새 고비**다 — 그때 다시 말한다 */
-                    const 새고비 = 마지막느린때Ref.current === null || 지금 - 마지막느린때Ref.current > 고비사이;
-                    마지막느린때Ref.current = 지금;
-                    if (새고비 && 느린고비Ref.current < 고비한도) {
-                        느린고비Ref.current += 1;
-                        const 고비 = 느린고비Ref.current;
-                        let 숨었나 = null;
+                    const newSpike = lastSlowAtRef.current === null || now - lastSlowAtRef.current > SPIKE_GAP_MS;
+                    lastSlowAtRef.current = now;
+                    if (newSpike && slowSpikesRef.current < SPIKE_LIMIT) {
+                        slowSpikesRef.current += 1;
+                        const spikes = slowSpikesRef.current;
+                        let hiddenReason = null;
                         try {
-                            숨었나 = typeof document !== 'undefined' ? document.visibilityState : null;
+                            hiddenReason = typeof document !== 'undefined' ? document.visibilityState : null;
                         }
                         catch { /* 문서 없는 데 */ }
-                        devWarnOnce(`progress-ticker-slow-frames#${고비}`, `[ihab-core] 진행 사슬의 틀 사이가 ${Math.round(지금 - 앞틀)}ms 입니다(보통 16ms).`, 숨었나 === 'hidden'
+                        devWarnOnce(`progress-ticker-slow-frames#${spikes}`, `[ihab-core] 진행 사슬의 틀 사이가 ${Math.round(now - prevFrame)}ms 입니다(보통 16ms).`, hiddenReason === 'hidden'
                             ? '이 칸이 **숨어 있어** 브라우저가 틀을 줄였습니다 — 재생바·파형은 틀마다 그려지므로, 지금 재는 값은 **사람이 보는 화면과 다릅니다.** 칸을 앞으로 꺼내고 다시 재십시오.'
-                            : '칸은 보이는데 틀이 느립니다 — 같은 화면에서 무거운 일이 도는지 보십시오. 재생바·파형이 끊겨 보이는 것은 이 탓일 수 있습니다.', 고비 >= 고비한도 ? `(${고비}번째 — 더는 안 알립니다)` : `(${고비}번째)`);
+                            : '칸은 보이는데 틀이 느립니다 — 같은 화면에서 무거운 일이 도는지 보십시오. 재생바·파형이 끊겨 보이는 것은 이 탓일 수 있습니다.', spikes >= SPIKE_LIMIT ? `(${spikes}번째 — 더는 안 알립니다)` : `(${spikes}번째)`);
                     }
                 }
-                else if (앞틀 > 0) {
+                else if (prevFrame > 0) {
                     /* 멀쩡한 틀이 이어지는 동안에는 고비가 안 자란다 — 위 `새고비` 가 시계로만 가름하므로
                        여기서 할 일은 없다. 이 가지는 읽는 사람을 위한 자리다. */
                 }
-                앞틀 = 지금;
+                prevFrame = now;
             }
             try {
                 const a = audioRef.current;
-                const 트랙 = Array.isArray(sourcesRef.current) ? sourcesRef.current[currentIndexRef.current || 0] : undefined;
-                const 트랙길이알아 = !!트랙 && Number.isFinite(트랙.duration) && (트랙.duration ?? 0) > 0;
+                const track = Array.isArray(sourcesRef.current) ? sourcesRef.current[currentIndexRef.current || 0] : undefined;
+                const trackDurationKnown = !!track && Number.isFinite(track.duration) && (track.duration ?? 0) > 0;
                 // 트랙 길이를 알면 progressOf 가 그것을 쓴다 — <audio> 길이는 모를 때만 본다
-                const 총길이 = 트랙길이알아 ? 0 : audioDurationOf(a);
+                const totalDuration = trackDurationKnown ? 0 : audioDurationOf(a);
                 const fill = fillRef.current;
                 /* 뜸이 있으면 **뜸을 포함한 시간선**으로 잰다. 없으면(기본 0) 전과 같은 길이다. */
-                const 뜸있다 = (leadInMs || 0) > 0 || (tailMs || 0) > 0;
+                const hasPad = (leadInMs || 0) > 0 || (tailMs || 0) > 0;
                 /* **지금 뜸이 도는가** — 길이를 몰라도 뜸은 제 길이를 안다(아래 참고) */
-                const 뜸중 = 뜸있다 && (sequencer?.positionRef.current?.phase ?? 'sound') !== 'sound';
-                if (총길이 === null && !뜸중) {
+                const inPad = hasPad && (sequencer?.positionRef.current?.phase ?? 'sound') !== 'sound';
+                if (totalDuration === null && !inPad) {
                     /* 길이를 모른다(스트리밍 등으로 duration 이 Infinity·NaN 이고 되감을 수 있는 끝도 없다) —
                        마커를 0 에 붙여 두면 "안 움직이는 재생"으로 읽힌다. 진행을 모르니 마커를 숨긴다. */
                     try {
@@ -148,22 +148,22 @@ export function useProgressTicker({ audioRef, fillRef, waveProgressRef, sourcesR
                        **아무것도 안 그렸다.** 뜸은 제 길이를 아는 구간이다(`leadInMs`·`tailMs` 를
                        여기서 받고 있다). 그래서 길이를 모르면 **소리를 0 으로 둔 시간표**로 잰다 —
                        `timelineProgress` 에 그 사정을 적어 뒀다. 사용자가 (86) 에서 직접 짚은 자리다. */
-                    const 잴길이 = 트랙길이알아 ? 트랙.duration : (총길이 || 0);
+                    const durationToUse = trackDurationKnown ? track.duration : (totalDuration || 0);
                     /* **어림으로 그리는 자리를 스스로 말하게 한다**(2026-10-06).
                        위 한 줄(`총길이 === null`)만 보던 것을 **길이가 0 인 것 전부**로 넓혔다 —
                        `<audio>` 가 `duration === 0` 을 주는 동안에도 같은 어림을 그리는데 그때는
                        말이 없었다. 말귀가 앱에서 두 번 다 길이를 알고 있었다고 재 왔으므로(0.744 ·
                        0.72, `readyState=4`) **이 가지는 지금 길에서는 안 타야 한다.** 타면 그 자리를
                        알아야 한다 — 안 타는 것을 **재서** 알 수 있게 띄운다. */
-                    if (isDev && 뜸중 && !(잴길이 > 0)) {
+                    if (isDev && inPad && !(durationToUse > 0)) {
                         devWarnOnce('progress-ticker-pad-without-duration', '[ihab-core] 뜸이 도는데 **소리 길이를 모릅니다** — 재생바가 뜸만으로 어림잡아 움직입니다.', '소리 길이 재기(measureAudioDuration)가 0 을 줬거나 `<audio>` 가 아직 안 실렸습니다. 길이를 알게 되면 마커가 그 순간 **뒤로 물러납니다**(어림은 늘 참보다 큽니다). 이 줄이 보이면 그 자리를 알려 주십시오 — 평소 길에서는 안 나와야 합니다.');
                     }
-                    const pos = 뜸있다
+                    const pos = hasPad
                         ? progressWithPad({
                             phase: sequencer?.positionRef.current?.phase ?? 'sound',
                             phaseElapsedMs: sequencer?.positionRef.current ? Math.max(0, Date.now() - sequencer.positionRef.current.at) : 0,
                             currentTime: a && typeof a.currentTime === 'number' ? a.currentTime : 0,
-                            trackDurationSec: 잴길이,
+                            trackDurationSec: durationToUse,
                             leadInMs: leadInMs || 0,
                             tailMs: tailMs || 0,
                         })
@@ -173,7 +173,7 @@ export function useProgressTicker({ audioRef, fillRef, waveProgressRef, sourcesR
                             index: currentIndexRef.current,
                             /* 여기 올 때 `총길이` 는 널이 아니다 — 널이면 위에서 숨기고 왔다(뜸이 없으면 뜸중도 거짓이다).
                                타입만 좁혀 준다. */
-                            audioDuration: 총길이 ?? 0,
+                            audioDuration: totalDuration ?? 0,
                         });
                     try {
                         if (fill) {

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

@@ -18,7 +18,7 @@ export function useTTSPlayback({ ttsText, playbackRate, mainVolume, fillRef, wav
        언마운트 뒤에 온 end 가 떠난 화면에 완료를 알렸다. 번호가 다른 end 는 넘긴다. */
     const ttsTokenRef = useRef(0);
     /** 이 훅이 말을 건 적이 있나 — 떠날 때 **제 말만** 끊는다(마운트만 한 단계가 다른 곳의 말을 끊던 것) */
-    const 말했나Ref = useRef(false);
+    const spokeRef = useRef(false);
     useEffect(() => {
         // cleanup TTS resources on unmount
         return () => {
@@ -28,12 +28,12 @@ export function useTTSPlayback({ ttsText, playbackRate, mainVolume, fillRef, wav
                     cancelAnimationFrame(ttsRafRef.current);
                     ttsRafRef.current = null;
                 }
-                if (말했나Ref.current && window.speechSynthesis) {
+                if (spokeRef.current && window.speechSynthesis) {
                     try {
                         window.speechSynthesis.cancel();
                     }
                     catch (e) { }
-                    말했나Ref.current = false;
+                    spokeRef.current = false;
                 }
             }
             catch (e) { }
@@ -75,11 +75,11 @@ export function useTTSPlayback({ ttsText, playbackRate, mainVolume, fillRef, wav
             }
             catch (e) { }
             const rawTts = text ?? ttsText;
-            const 문장들 = (Array.isArray(rawTts) ? rawTts.filter((s) => !!s) : [rawTts || '']);
-            if (문장들.length === 0)
-                문장들.push('');
+            const sentences = (Array.isArray(rawTts) ? rawTts.filter((s) => !!s) : [rawTts || '']);
+            if (sentences.length === 0)
+                sentences.push('');
             const rate = Math.max(0.3, Math.min(3, playbackRate));
-            ttsEstimatedDurationRef.current = 문장들.reduce((합, s) => 합 + estimateTTSDuration(s, rate || 1), 0);
+            ttsEstimatedDurationRef.current = sentences.reduce((sum, s) => sum + estimateTTSDuration(s, rate || 1), 0);
             ttsStartRef.current = performance.now();
             setProgress(0);
             setPlaybackState('playing');
@@ -110,7 +110,7 @@ export function useTTSPlayback({ ttsText, playbackRate, mainVolume, fillRef, wav
                 }
                 catch (e) { }
             };
-            const 끝처리 = () => {
+            const onDone = () => {
                 if (myToken !== ttsTokenRef.current)
                     return;
                 try {
@@ -133,8 +133,8 @@ export function useTTSPlayback({ ttsText, playbackRate, mainVolume, fillRef, wav
                 }
                 catch (e) { }
             };
-            const 말하기 = (i) => {
-                const utt = new SpeechSynthesisUtterance(문장들[i]);
+            const speakAt = (i) => {
+                const utt = new SpeechSynthesisUtterance(sentences[i]);
                 try {
                     utt.rate = rate;
                 }
@@ -147,21 +147,21 @@ export function useTTSPlayback({ ttsText, playbackRate, mainVolume, fillRef, wav
                     if (myToken !== ttsTokenRef.current)
                         return;
                     // 남은 문장이 있으면 이어 말한다 — 진행 표시는 전체 추정 길이로 계속 흐른다
-                    if (i < 문장들.length - 1) {
+                    if (i < sentences.length - 1) {
                         try {
-                            말하기(i + 1);
+                            speakAt(i + 1);
                         }
                         catch (e) {
-                            끝처리();
+                            onDone();
                         }
                         return;
                     }
-                    끝처리();
+                    onDone();
                 };
                 /* 합성이 실패하면(synthesis-failed·not-allowed·language-unavailable) end 없이 error 만 온다 — 끝난 것과 같이 정리한다.
                    전에는 재생 상태·소음이 그대로 남고 handleEnd·onDone 이 안 불려 문항이 넘어가지 않았다. 정지·다시 시작이 올린 번호의
                    error(취소)는 onend 와 같이 넘긴다. 중간 문장이 실패하면 남은 문장도 같은 까닭으로 실패하기 쉬워 거기서 끝낸다. */
-                utt.onerror = () => { 끝처리(); };
+                utt.onerror = () => { onDone(); };
                 utt.onstart = () => {
                     if (i > 0)
                         return; // 진행 사슬은 첫 문장에서 한 번만 건다
@@ -174,11 +174,11 @@ export function useTTSPlayback({ ttsText, playbackRate, mainVolume, fillRef, wav
                     }
                     catch (e) { }
                 };
-                말했나Ref.current = true;
+                spokeRef.current = true;
                 synth.speak(utt);
             };
             try {
-                말하기(0);
+                speakAt(0);
             }
             catch (e) {
                 try {

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

@@ -38,10 +38,10 @@ timeoutMs = 2500, }) {
         readyRef.current = ready;
         if (!ready || !resolversRef.current.length)
             return;
-        const 기다리던것 = resolversRef.current;
+        const waiting = resolversRef.current;
         resolversRef.current = [];
-        for (const 깨우기 of 기다리던것)
-            깨우기(true);
+        for (const wake of waiting)
+            wake(true);
     }, []);
     /** 새 트랙을 물렸다 — 이전 트랙의 '준비됨'을 물려받지 않는다 */
     const markNotReady = useCallback(() => { readyRef.current = false; }, []);
@@ -53,22 +53,22 @@ timeoutMs = 2500, }) {
         if (readyRef.current)
             return Promise.resolve(true);
         return new Promise((resolve) => {
-            const 풀기 = (계속) => {
+            const settle = (go) => {
                 clearTimeout(timer);
-                resolversRef.current = resolversRef.current.filter((r) => r !== 풀기);
-                resolve(계속);
+                resolversRef.current = resolversRef.current.filter((r) => r !== settle);
+                resolve(go);
             };
-            const timer = setTimeout(() => 풀기(true), timeoutMs);
-            resolversRef.current.push(풀기);
+            const timer = setTimeout(() => settle(true), timeoutMs);
+            resolversRef.current.push(settle);
         });
     }, [showSoundWaveForm, showNoiseWaveForm, timeoutMs]);
     /* 화면을 떠날 때 기다리던 것들을 `false`(취소)로 놓아 준다. 매달린 약속·상한 타이머를 남기지 않되,
        `true` 로 풀면 부르는 쪽이 사라진 화면의 재생을 이어 갔다(떼어진 <audio> 에 play). 부르는 쪽은 false 면 멈춘다. */
     useEffect(() => () => {
-        const 남은것 = resolversRef.current;
+        const left = resolversRef.current;
         resolversRef.current = [];
-        for (const 깨우기 of 남은것)
-            깨우기(false);
+        for (const wake of left)
+            wake(false);
     }, []);
     return { onReadyChange, waitForReady, markNotReady };
 }

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

@@ -29,17 +29,17 @@ export default function UpdateAlert({ title, message, actionLabel, onAction, ico
     /* 닫기(×)를 눌러 부모가 알림을 치우면 그 단추에 있던 포커스가 body 로 떨어졌다. 닫기로 떠날 때만(화면 전체가 내려갈 때는 아님)
        떼기 직전(레이아웃 효과 정리 — 아직 문서에 붙어 있다) 알림 앞의 포커스 받을 곳으로 옮긴다. */
     const rootRef = useRef(null);
-    const 닫기눌림Ref = useRef(false);
+    const closePressedRef = useRef(false);
     useLayoutEffect(() => {
         const root = rootRef.current;
         /* 낱장과 스택이 함께 뜨면 둘 다 우상단 16px 에 붙어 겹쳤다 — 자리(낱장 자신 또는 감싼 스택)를 올려 문서 순서대로 아래로 쌓는다 */
-        const 자리 = root?.parentElement?.closest('.update-alert-stack') ?? root;
-        const 내리기 = 자리 ? registerUpdateAlertSlot(자리) : null;
+        const slotEl = root?.parentElement?.closest('.update-alert-stack') ?? root;
+        const unregister = slotEl ? registerUpdateAlertSlot(slotEl) : null;
         return () => {
-            내리기?.();
-            if (닫기눌림Ref.current && root && root.contains(document.activeElement))
+            unregister?.();
+            if (closePressedRef.current && root && root.contains(document.activeElement))
                 moveFocusOutside(root);
         };
     }, []);
-    return (_jsxs("div", { ref: rootRef, className: cx('update-alert', className), role: "alert", children: [onClose && (_jsx("button", { type: "button", className: "update-alert__close", onClick: () => { 닫기눌림Ref.current = true; onClose(); }, "aria-label": t('common.close', '닫기'), children: "\u00D7" })), _jsxs("div", { className: "update-alert__top", children: [_jsx("div", { className: "update-alert__icon", children: icon ?? _jsx(Download, { size: 20, strokeWidth: 2 }) }), _jsxs("div", { className: "update-alert__body", children: [_jsx("div", { className: "update-alert__title h4", children: title }), _jsx("div", { className: "update-alert__message body-3", children: message })] })] }), onAction && (_jsx(Button, { htmlType: "button", size: 32, variant: "main", shape: "pill", className: "update-alert__action", onClick: onAction, children: resolvedActionLabel }))] }));
+    return (_jsxs("div", { ref: rootRef, className: cx('update-alert', className), role: "alert", children: [onClose && (_jsx("button", { type: "button", className: "update-alert__close", onClick: () => { closePressedRef.current = true; onClose(); }, "aria-label": t('common.close', '닫기'), children: "\u00D7" })), _jsxs("div", { className: "update-alert__top", children: [_jsx("div", { className: "update-alert__icon", children: icon ?? _jsx(Download, { size: 20, strokeWidth: 2 }) }), _jsxs("div", { className: "update-alert__body", children: [_jsx("div", { className: "update-alert__title h4", children: title }), _jsx("div", { className: "update-alert__message body-3", children: message })] })] }), onAction && (_jsx(Button, { htmlType: "button", size: 32, variant: "main", shape: "pill", className: "update-alert__action", onClick: onAction, children: resolvedActionLabel }))] }));
 }

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

@@ -1,6 +1,7 @@
 'use client';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { cx } from '../../utils/cx';
+import { toPhonemeCodes, PHONEME_NONE } from '../../utils/phonemeSectionCodes';
 import { useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import useMediaQuery from '../../hooks/useMediaQuery';
@@ -72,7 +73,12 @@ export default function PhonemeSelectBlock({ sections, selectedList, count, onCo
                         : selectedList.map((selected, i) => (_jsx(FilterPanel, { title: panelTitle(phonemeLabel(i + 1), i === 0), sections: combinationSectionsForSlot ? combinationSectionsForSlot(selected, i) : combinationSections, selected: selected, onSelect: onSelect?.(i), align: "newline" }, i))) }) })), beforeSearchContent && (_jsx("div", { className: "phoneme-select-block__before-search", children: beforeSearchContent })), (onClearPhoneme || onSearch || searchChecking) && (() => {
                 // 종성 '제외'(없음)만 선택된 슬롯은 실제 음소를 고른 것으로 치지 않는다 —
                 // "받침 없음"은 단독으로는 검색 조건이 되기엔 너무 느슨한 보조 조건이라서다.
-                const isEmpty = selectedList.every(sel => Object.entries(sel).every(([k, v]) => !v || (k === '종성' && v === '없음')));
+                /* 열쇠를 **코드로 가려** 본다 — 고른값은 FilterPanel 의 절 이름(지금 언어)으로 들어오고
+                   저장된 표는 옛 한글 열쇠다. `toPhonemeCodes` 가 둘 다 받아 코드로 돌린다. */
+                const isEmpty = selectedList.every(sel => {
+                    const coded = toPhonemeCodes(sel);
+                    return Object.entries(coded).every(([k, v]) => !v || (k === 'coda' && v === PHONEME_NONE));
+                });
                 return (_jsxs("div", { className: "phoneme-select-block__search-row", onClick: isEmpty ? onSearchEmpty : undefined, children: [onClearPhoneme && (_jsx(Button, { htmlType: "button", size: "56", type: "bar", label: t('wordPairs.resetOptions', '검색 옵션 초기화'), selected: false, disabled: isEmpty, onClick: isEmpty ? undefined : onClearPhoneme })), onSearch ? (
                         /* 확인 중에도 단추를 **바꿔 끼우지 않는다** — 전에는 스피너 칸으로 갈아 끼워, 키보드로 누른 단추가 사라지며 초점이
                            body 로 빠졌다. 막힘은 aria-disabled(onDisabledClick)로만 걸어 초점을 남기고, aria-busy·스피너로 알린다. */

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

@@ -18,9 +18,9 @@ export default function TableFilterPanel(props) {
     const { t } = useTranslation();
     const { title, className, collapsible, defaultCollapsed, collapsed, onCollapsedChange, headerSummary } = props;
     /* 두 갈래(껍데기 모드·표 설정 모드)가 같은 접기 값을 쓴다 — 한쪽만 넘기면 화면마다 다르게 접힌다 */
-    const 접기 = { collapsible, defaultCollapsed, collapsed, onCollapsedChange, headerSummary };
+    const collapseProps = { collapsible, defaultCollapsed, collapsed, onCollapsedChange, headerSummary };
     if (isShellProps(props)) {
-        return (_jsx(FilterPanel, { className: className, title: title ?? t('wordTable.filterTitle', '표 설정'), sections: props.sections, selected: props.selected, onSelect: props.onSelect, ...접기, align: "inline" }));
+        return (_jsx(FilterPanel, { className: className, title: title ?? t('wordTable.filterTitle', '표 설정'), sections: props.sections, selected: props.selected, onSelect: props.onSelect, ...collapseProps, align: "inline" }));
     }
     const { hasImage, hasColloquial, contentTypes, orientation, showOutline, cutLine, showDivLine, setters, showCutLine = false, showDivLine2 = false, middleSections = [], extraSelected = {}, onExtraSelect, showPaperBands = false, showTopInfo = true, showBottomInfo = true, } = props;
     const sections = [
@@ -42,5 +42,5 @@ export default function TableFilterPanel(props) {
             return;
         onExtraSelect?.(value, sectionLabel);
     };
-    return (_jsx(FilterPanel, { className: className, title: title ?? t('wordTable.filterTitle', '표 설정'), sections: sections, selected: selected, onSelect: onSelect, ...접기, sectionAlign: "horizontal" }));
+    return (_jsx(FilterPanel, { className: className, title: title ?? t('wordTable.filterTitle', '표 설정'), sections: sections, selected: selected, onSelect: onSelect, ...collapseProps, sectionAlign: "horizontal" }));
 }

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';
@@ -41,30 +41,30 @@ export default function WordSearchResultBlock({ titleIcon, resultCount, resultUn
     /* **검색어도 결과 수도 없이 items 만 받으면 검색 결과가 아니라 저장된 목록을 보여 주는 것**(말귀 공유 링크 열람 —
        치료사가 표에서 끌어 옮긴 순서가 저장돼 있다). 그때는 받은 순서를 기본으로 둔다 — 가나다로 다시 늘어서
        표의 칸 순서가 사라졌다. 검색 화면들은 결과 수(resultCount)를 늘 주므로 지금처럼 가나다 · 시작 우선이다. */
-    const 열람 = searchQuery === undefined && resultCount === undefined;
-    const 기본정렬 = hasQuery ? 'match' : 열람 ? 'original' : 'ganada';
+    const browsing = searchQuery === undefined && resultCount === undefined;
+    const defaultSort = hasQuery ? 'match' : browsing ? 'original' : 'ganada';
     // 첫 렌더에 이미 검색어가 있어도 '시작 우선'으로 시작한다 — 아래 조정은 검색어 유무가 **바뀔 때**만 돌아서,
     // 초깃값을 'ganada' 로 고정하면 검색어를 들고 마운트한 화면은 가나다순에 머물렀다.
-    const [sortKey, setSortKey] = useState(() => 기본정렬);
+    const [sortKey, setSortKey] = useState(() => defaultSort);
     const [pageSizeStr, setPageSizeStr] = useState('50');
     const [page, setPage] = useState(1);
     // 검색어 유무가 바뀌면 그에 맞는 기본 정렬로 되돌린다(렌더 중 상태 조정).
     const [prevHasQuery, setPrevHasQuery] = useState(hasQuery);
     if (prevHasQuery !== hasQuery) {
         setPrevHasQuery(hasQuery);
-        setSortKey(기본정렬);
+        setSortKey(defaultSort);
     }
-    const effectiveSortKey = (sortKey === 'match' && !hasQuery) || (sortKey === 'original' && !열람) ? 기본정렬 : sortKey;
+    const effectiveSortKey = (sortKey === 'match' && !hasQuery) || (sortKey === 'original' && !browsing) ? defaultSort : sortKey;
     const sortOptions = useMemo(() => [
         ...(hasQuery ? [{ value: 'match', label: t('wordSearch.sort.match', { defaultValue: '시작 우선' }) }] : []),
-        ...(열람 ? [{ value: 'original', label: t('wordSearch.sort.original', { defaultValue: '받은 순서' }) }] : []),
+        ...(browsing ? [{ value: 'original', label: t('wordSearch.sort.original', { defaultValue: '받은 순서' }) }] : []),
         { value: 'ganada', label: t('wordSearch.sort.ganada', { defaultValue: '가나다순 ↑' }) },
         { value: 'ganada_desc', label: t('wordSearch.sort.ganadaDesc', { defaultValue: '가나다순 ↓' }) },
         { value: 'syllable', label: t('wordSearch.sort.syllable', { defaultValue: '음절 수 ↑' }) },
         { value: 'syllable_desc', label: t('wordSearch.sort.syllableDesc', { defaultValue: '음절 수 ↓' }) },
         { value: 'grade', label: t('wordSearch.sort.grade', { defaultValue: '등급순 ↑' }) },
         { value: 'grade_desc', label: t('wordSearch.sort.gradeDesc', { defaultValue: '등급순 ↓' }) },
-    ], [t, hasQuery, 열람]);
+    ], [t, hasQuery, browsing]);
     const pageSizeOptions = useMemo(() => ['10', '25', '50', '100'].map(v => ({
         value: v, label: t('wordSearch.pageSize', { count: Number(v), defaultValue: `${v}개씩 보기` }),
     })), [t]);
@@ -72,7 +72,7 @@ export default function WordSearchResultBlock({ titleIcon, resultCount, resultUn
     const firstWord = (it) => it.words?.[0];
     /* '시작 우선' 순위는 검색어가 바뀔 때 판별기를 한 번 만들고 항목마다 한 번만 센다 — 비교할 때마다 검색어를 다시 펼치고
        localeCompare 를 불러 결과가 바뀔 때 23k 개에 38ms 걸렸다. */
-    const 시작순위 = useMemo(() => {
+    const initialRanks = useMemo(() => {
         const qLen = [...q].length;
         const m = makeWordQueryMatcher(q);
         const memo = new Map();
@@ -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,18 +104,18 @@ export default function WordSearchResultBlock({ titleIcon, resultCount, resultUn
             // 시작 우선 — 검색어로 시작하는 단어를 위로. 앞 q 글자만 잘라 매칭하면 "첫 음절부터 일치"만
             // 남는다(초성 검색도 동일: 'ㄴ' → '나무'가 위). 동순위는 가나다.
             case 'match': {
-                return 시작순위(a) - 시작순위(b) || 한글순(label(a), label(b));
+                return initialRanks(a) - initialRanks(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;
         }
-    }, [effectiveSortKey, 시작순위]);
+    }, [effectiveSortKey, initialRanks]);
     const sortedItems = useMemo(() => items.slice().sort(sortCompare), [items, sortCompare]);
     const pageSize = Number(pageSizeStr) || 10;
     // 그룹 뷰(대립쌍표 음소대립)도 flat과 동일하게 정렬·페이지네이션한다 — 그룹 순서를 유지하고 그룹 내부를