@ihabdevteam/core 0.322.0 → 0.324.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

@@ -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();
@@ -104,7 +104,7 @@ export default function WordSearchResultBlock({ titleIcon, resultCount, resultUn
             // 시작 우선 — 검색어로 시작하는 단어를 위로. 앞 q 글자만 잘라 매칭하면 "첫 음절부터 일치"만
             // 남는다(초성 검색도 동일: 'ㄴ' → '나무'가 위). 동순위는 가나다.
             case 'match': {
-                return 시작순위(a) - 시작순위(b) || compareKorean(label(a), label(b));
+                return initialRanks(a) - initialRanks(b) || compareKorean(label(a), label(b));
             }
             case 'ganada': return compareKorean(label(a), label(b));
             case 'ganada_desc': return compareKorean(label(b), label(a));
@@ -115,7 +115,7 @@ export default function WordSearchResultBlock({ titleIcon, resultCount, resultUn
             // 받은 순서 — 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과 동일하게 정렬·페이지네이션한다 — 그룹 순서를 유지하고 그룹 내부를

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

@@ -12,7 +12,7 @@ import Popup from '../Popup/Popup';
 import WordTable, { WORD_TABLE_PAPER } from '../WordTable';
 import { chunkItems } from '../wordTableLayout';
 import TableFilterPanel from './TableFilterPanel';
-import { buildItemsPerPageSection, buildPageNumberSection, PAGE_NUM_POSITION_VALUE, parsePageNumberPosition, itemsPerPageFromChoice } from './wordTableSettings';
+import { buildItemsPerPageSection, buildPageNumberSection, parsePageNumberPosition, itemsPerPageFromChoice } from './wordTableSettings';
 import Toast from '../Toast';
 import { useToastState } from '../../hooks/useToastState';
 import { getImageResolver, checkImageExists } from '../../utils/imageConfig';
@@ -24,24 +24,24 @@ import { CELL_COUNTS } from './wordTableBlockTypes';
 // ── 컴포넌트 ───────────────────────────────────────────────
 /** @public */
 /** 편집 칸의 낱말 → 저장 항목의 낱말. 편집 칸에서 보이던 구어체 발음·등급·품사·유형을 그대로 옮긴다. */
-function 항목낱말(e) {
+function toResultWord(e) {
     return {
         label: e.word, subLabel: e.pronunciation, colloquialLabel: e.colloquialPronunciation, homonum: e.homonum,
         grade: e.grade, syllables: [...e.word].length, pos: e.pos, wordType: e.wordType,
     };
 }
 /** 동음이의어 번호까지 넣은 낱말들로 만든 id — 첫 낱말만 쓰면 '배'(1)·'배'(2), '가다|나다'·'가다|다다' 가 같은 id 였다 */
-function 항목id(entries) {
+function itemId(entries) {
     return entries.map(e => (e.homonum != null ? `${e.word}#${e.homonum}` : e.word)).join('|');
 }
 /** 표 안에서 같은 낱말을 두 칸에 넣었을 때도 id 가 겹치지 않게 뒤에 ~2, ~3 을 붙인다 */
-function 겹치지않는id(list) {
-    const 쓴 = new Set();
+function withUniqueIds(list) {
+    const used = new Set();
     return list.map(it => {
         let id = it.id;
-        for (let n = 2; 쓴.has(id); n++)
+        for (let n = 2; used.has(id); n++)
             id = `${it.id}~${n}`;
-        쓴.add(id);
+        used.add(id);
         return id === it.id ? it : { ...it, id };
     });
 }
@@ -78,14 +78,14 @@ export default function WordTableBlock({ title, titleIcon, disc, filterTitle, fi
     const visibleCells = cells.slice(0, cellCount);
     /* 띠를 켠 표면 설정 판에 '상단 정보'·'하단 정보' 고르개가 선다 — 스위치를 따로 두지
        않는다(부르는 쪽이 둘을 어긋나게 줄 일이 없게). 고른 값은 `brand.top`·`bottom` 을 덮는다. */
-    const 띠쓰나 = Boolean(brand?.show);
+    const showBand = Boolean(brand?.show);
     const [showTopInfo, setShowTopInfo] = useState(true);
     const [showBottomInfo, setShowBottomInfo] = useState(true);
-    const 띠 = brand && { ...brand, top: showTopInfo, bottom: showBottomInfo };
+    const band = brand && { ...brand, top: showTopInfo, bottom: showBottomInfo };
     // 공통 단어 표 설정 상태
     const [orientation, setOrientation] = useState('landscape');
-    const [contentTypes, setContentTypes] = useState(['이미지', '단어', '표준 발음']);
-    const [cutLine, setCutLine] = useState('표시');
+    const [contentTypes, setContentTypes] = useState(['image', 'word', 'standardPron']);
+    const [cutLine, setCutLine] = useState('show');
     const [showOutline, setShowOutline] = useState(true);
     const [showDivLine, setShowDivLine] = useState(true);
     // 인쇄 캡처용 그리드 콘텐츠 ref (단일 페이지)
@@ -209,7 +209,7 @@ export default function WordTableBlock({ title, titleIcon, disc, filterTitle, fi
     const middleSelected = {
         ...((isEditable || showCellCount) ? { [t('wordTable.filter.columns', '칸 수')]: `${count}칸` } : {}),
         ...(pagesEnabled && (items?.length ?? 0) > 0 ? { [t(hasPairs ? 'wordTable.filter.itemsPerPagePair' : 'wordTable.filter.itemsPerPageWord')]: `${effectiveItemsPerPage}개` } : {}),
-        ...(isPaginated ? { [t('wordTable.filter.pageNumber', '페이지 번호')]: PAGE_NUM_POSITION_VALUE[pageNumberPosition] } : {}),
+        ...(isPaginated ? { [t('wordTable.filter.pageNumber', '페이지 번호')]: pageNumberPosition } : {}),
     };
     const handleMiddleSelect = (value, sectionLabel) => {
         if (sectionLabel === t('wordTable.filter.columns', '칸 수')) {
@@ -229,14 +229,14 @@ export default function WordTableBlock({ title, titleIcon, disc, filterTitle, fi
     };
     // 저장 팝업용 현재 items / preview
     const saveItems = isEditable
-        ? 겹치지않는id(visibleCells.filter((c) => c !== null && c.length > 0).map(c => ({
-            id: 항목id(c),
-            words: c.map(항목낱말),
+        ? withUniqueIds(visibleCells.filter((c) => c !== null && c.length > 0).map(c => ({
+            id: itemId(c),
+            words: c.map(toResultWord),
         })))
         : items ?? [];
     /* 저장한 뒤에는 **숨은 칸(cellCount 뒤)을 비운다** — 2칸으로 줄여 저장한 표를 4칸으로 늘리면 저장본에 없던
        셋째·넷째 낱말이 다시 떠, 저장한 것과 화면이 달랐다. 저장하지 않고 줄였다 늘리는 동안에는 그대로 들고 있는다. */
-    const 숨은칸비우기 = () => {
+    const clearHiddenCells = () => {
         if (isEditable)
             setCells(prev => (prev.length > cellCount ? prev.slice(0, cellCount) : prev));
     };
@@ -250,13 +250,13 @@ export default function WordTableBlock({ title, titleIcon, disc, filterTitle, fi
             if (savedLower)
                 setSavedNames(prev => prev.includes(savedLower) ? prev : [...prev, savedLower]);
             onSaveComplete(trimmedName, saveItems, trimmedDescription || undefined, asNew);
-            숨은칸비우기();
+            clearHiddenCells();
             return;
         }
         // saveOnly: 이름 입력 팝업 없이 바로 저장(이름은 상위에서 처리)
         if (saveOnly && onSaveComplete) {
             onSaveComplete('', saveItems, undefined, asNew);
-            숨은칸비우기();
+            clearHiddenCells();
             return;
         }
         if (onSaveComplete) {
@@ -279,7 +279,7 @@ export default function WordTableBlock({ title, titleIcon, disc, filterTitle, fi
         if (!saveAsTrimmed || saveAsCollides || !onSaveComplete)
             return;
         onSaveComplete(saveAsTrimmed, saveItems, trimmedDescription || undefined, true);
-        숨은칸비우기();
+        clearHiddenCells();
         setShowSaveAsPopup(false);
     };
     // 저장 버튼 활성 조건 — 인라인 모드에선 이름 필수·중복(others) 불가. 항목이 비어도 불가.
@@ -307,7 +307,7 @@ export default function WordTableBlock({ title, titleIcon, disc, filterTitle, fi
                         items: saveItems,
                         existingNames: getSavedTables().map(tb => tb.name),
                         saveAsNew,
-                        onSave: (name, description) => { onSaveComplete(name, saveItems, description, saveAsNew); 숨은칸비우기(); setShowSavePopup(false); },
+                        onSave: (name, description) => { onSaveComplete(name, saveItems, description, saveAsNew); clearHiddenCells(); setShowSavePopup(false); },
                         onCancel: () => setShowSavePopup(false),
                     }), (isEditable || onAddItem) && activeCell !== null && renderWordSearch?.({
                         cellIndex: activeCell,
@@ -316,25 +316,25 @@ export default function WordTableBlock({ title, titleIcon, disc, filterTitle, fi
                                 const entry = entries[0];
                                 if (entry) {
                                     // 이미 있는 항목과 id 가 겹치면(같은 낱말의 다른 동음이의어·같은 낱말) onRemoveItem(id) 가 둘을 함께 지운다
-                                    const 쓴id = new Set((items ?? []).map(it => it.id));
-                                    let id = 항목id([entry]);
-                                    for (let n = 2; 쓴id.has(id); n++)
-                                        id = `${항목id([entry])}~${n}`;
-                                    onAddItem({ id, words: [항목낱말(entry)] });
+                                    const usedIds = new Set((items ?? []).map(it => it.id));
+                                    let id = itemId([entry]);
+                                    for (let n = 2; usedIds.has(id); n++)
+                                        id = `${itemId([entry])}~${n}`;
+                                    onAddItem({ id, words: [toResultWord(entry)] });
                                 }
                             }
                             setActiveCell(null);
                         },
                         onClose: handleCloseWordSearch,
-                    }), !hideControls && (_jsx(TableFilterPanel, { title: filterTitle, collapsible: filterCollapsible, defaultCollapsed: filterDefaultCollapsed, collapsed: filterCollapsed, onCollapsedChange: onFilterCollapsedChange, headerSummary: filterHeaderSummary, hasImage: hasImage, hasColloquial: hasColloquial, contentTypes: contentTypes, orientation: orientation, showOutline: showOutline, cutLine: cutLine, showDivLine: showDivLine, setters: { setContentTypes, setOrientation, setShowOutline, setCutLine, setShowDivLine, setShowTopInfo, setShowBottomInfo }, showCutLine: (pagesEnabled ? itemsPerPage : count) > 1, showDivLine2: hasPairs, middleSections: middleSections, extraSelected: middleSelected, onExtraSelect: handleMiddleSelect, showPaperBands: 띠쓰나, showTopInfo: showTopInfo, showBottomInfo: showBottomInfo })), isPaginated && pages ? (_jsx("div", { className: "word-table-block__pages", children: pages.map((page, i) => (_jsx(WordTable, { orientation: orientation, contentTypes: contentTypes, cutLine: cutLine, showOutline: showOutline, showDivLine: showDivLine, count: itemsPerPage, items: page, onRemoveItem: onRemoveItem, 
+                    }), !hideControls && (_jsx(TableFilterPanel, { title: filterTitle, collapsible: filterCollapsible, defaultCollapsed: filterDefaultCollapsed, collapsed: filterCollapsed, onCollapsedChange: onFilterCollapsedChange, headerSummary: filterHeaderSummary, hasImage: hasImage, hasColloquial: hasColloquial, contentTypes: contentTypes, orientation: orientation, showOutline: showOutline, cutLine: cutLine, showDivLine: showDivLine, setters: { setContentTypes, setOrientation, setShowOutline, setCutLine, setShowDivLine, setShowTopInfo, setShowBottomInfo }, showCutLine: (pagesEnabled ? itemsPerPage : count) > 1, showDivLine2: hasPairs, middleSections: middleSections, extraSelected: middleSelected, onExtraSelect: handleMiddleSelect, showPaperBands: showBand, showTopInfo: showTopInfo, showBottomInfo: showBottomInfo })), isPaginated && pages ? (_jsx("div", { className: "word-table-block__pages", children: pages.map((page, i) => (_jsx(WordTable, { orientation: orientation, contentTypes: contentTypes, cutLine: cutLine, showOutline: showOutline, showDivLine: showDivLine, count: itemsPerPage, items: page, onRemoveItem: onRemoveItem, 
                             /* 쪽이 나뉘면 끌어 옮기기가 통째로 꺼졌다(말귀 단어 찾기: 9개부터). 쪽 안의 자리를 전체 자리로 옮겨 넘긴다 —
                                쪽을 넘는 이동은 하지 않는다. */
                             onReorder: onReorder && ((from, to) => onReorder(from + i * itemsPerPage, to + i * itemsPerPage)), 
                             /* 안쪽 표는 제 쪽 안의 번호를 준다 — 부르는 쪽에는 **표 전체 기준**으로 넘긴다
                                (위 `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: renderCellAction && ((n, item) => renderCellAction(n + i * itemsPerPage, item)), brand: band, 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 })), !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', '이 단어표에 대한 제목을 입력하세요.'), 
+                        renderCellAction: !isEditable ? renderCellAction : undefined, brand: band, 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…")이
                                        섞여 있어 이름으로 부적절하므로 같은 라벨 문구를 넘긴다. */