@ihabdevteam/core 0.136.0 → 0.137.0

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

@@ -484,6 +484,9 @@ export default function TrainingStepAudioPlayer({ btnLabel, soundSrc, bucketPath
         try {
             // 각 URL의 duration을 병렬로 측정 (실패한 URL은 0초로 계속)
             const durations = await Promise.all(ttsUrls.map(url => measureAudioDuration(url, { timeoutMs: 10000 })));
+            // 재는 동안 떠났으면 여기서 끝 — 떼어진 <audio> 에 주소를 물리고 불러오기를 시작하던 것
+            if (!mountedRef.current)
+                return;
             const finalSources = ttsUrls.map((src, i) => ({ src, objectUrl: null, duration: durations[i] || 0 }));
             applySources(finalSources, totalDurationOf(finalSources));
             setFetchDebugStatus('ready');
@@ -525,11 +528,17 @@ export default function TrainingStepAudioPlayer({ btnLabel, soundSrc, bucketPath
                     catch (e) {
                         srcUrl = null;
                     }
+                    if (!mountedRef.current)
+                        return false;
                     // resolveUrl 실패 시 blob 다운로드로 폴백
                     if (!srcUrl) {
                         try {
                             setFetchDebugStatus('downloading');
                             const blob = await downloadSound(b.resolvedPath);
+                            /* 내려받는 동안 떠났으면 주소를 만들지 않고 끝낸다 — useObjectUrls 정리가 이미 끝난 뒤라 track 해도 회수되지
+                               않고 남았고, 이어서 떼어진 <audio> 에 물려 내려받기까지 시작했다. */
+                            if (!mountedRef.current)
+                                return false;
                             if (blob) {
                                 const blobObj = blob instanceof Blob ? blob : new Blob([blob]);
                                 objUrl = objectUrls.track(URL.createObjectURL(blobObj));
@@ -557,6 +566,24 @@ export default function TrainingStepAudioPlayer({ btnLabel, soundSrc, bucketPath
                 catch (_) {
                     dur = 0;
                 }
+                if (!mountedRef.current) {
+                    // 떠났으면 방금 만든 blob 주소만 회수하고 끝(앞서 만든 것은 정리가 이미 회수했다)
+                    if (objUrl) {
+                        try {
+                            URL.revokeObjectURL(objUrl);
+                        }
+                        catch (_) { }
+                    }
+                    for (const f of finalSources) {
+                        if (f.objectUrl) {
+                            try {
+                                URL.revokeObjectURL(f.objectUrl);
+                            }
+                            catch (_) { }
+                        }
+                    }
+                    return false;
+                }
                 total += dur || 0;
                 finalSources.push({ ...b, src: srcUrl, objectUrl: objUrl, duration: dur });
             }
@@ -1028,7 +1055,7 @@ export default function TrainingStepAudioPlayer({ btnLabel, soundSrc, bucketPath
     const fillPausedFlag = playbackState === "paused";
     const fillLeftPercent = Math.max(0, Math.min(100, (progress || 0) * 100));
     const fillClass = cx('audio-player__fill', fillVisibleFlag ? 'is-visible' : '', fillExpandedFlag ? 'is-expanded' : '', fillPausedFlag ? 'is-paused' : '', isFillOutAnimating ? 'is-out' : '');
-    return (_jsxs("div", { className: `audio-player ${isDisabled ? 'is-disabled' : ''}${className ? ` ${className}` : ''}`, role: "group", "aria-label": typeof label === 'string' ? label : undefined, children: [_jsxs("div", { className: `audio-player__panel ${displayedPlaying ? "is-playing" : ""} ${isFetchingUrl ? "is-loading" : ""} ${stateLocal !== "default" ? "is-revealed" : ""}`, children: [isFetchingUrl ? (_jsxs("div", { className: "audio-player__loading", role: "status", "aria-live": "polite", children: [_jsx("span", { className: "audio-player__loading-spinner", "aria-hidden": "true" }), _jsx("span", { className: "audio-player__loading-text", children: STATUS_MESSAGES[fetchDebugStatus] })] })) : null, stateLocal === "active" ? (_jsx("button", { className: "audio-player__button", type: "button", onClick: () => { hideListenTip(); handleToggle(); }, "aria-label": typeof label === 'string' ? label : t('training.listen', '듣기'), onMouseEnter: showListenTip, onMouseLeave: hideListenTip, 
+    return (_jsxs("div", { className: `audio-player ${isDisabled ? 'is-disabled' : ''}${className ? ` ${className}` : ''}`, role: "group", "aria-label": typeof label === 'string' ? label : undefined, children: [_jsxs("div", { className: `audio-player__panel ${displayedPlaying ? "is-playing" : ""} ${isFetchingUrl ? "is-loading" : ""} ${stateLocal !== "default" ? "is-revealed" : ""}`, children: [isFetchingUrl ? (_jsxs("div", { className: "audio-player__loading", role: "status", "aria-live": "polite", children: [_jsx("span", { className: "audio-player__loading-spinner", "aria-hidden": "true" }), _jsx("span", { className: "audio-player__loading-text", children: t(`training.audioStatus.${fetchDebugStatus}`, { defaultValue: STATUS_MESSAGES[fetchDebugStatus] }) })] })) : null, stateLocal === "active" ? (_jsx("button", { className: "audio-player__button", type: "button", onClick: () => { hideListenTip(); handleToggle(); }, "aria-label": typeof label === 'string' ? label : t('training.listen', '듣기'), onMouseEnter: showListenTip, onMouseLeave: hideListenTip, 
                         // 키보드로 이 버튼에 오면 마우스와 동일하게 안내를 띄운다
                         onFocus: showListenTip, onBlur: hideListenTip, children: _jsx("span", { ref: listenBtnRef, className: "audio-player__button-triangle-wrap", children: _jsx("svg", { className: "audio-player__button-triangle", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { ref: triPathRef, d: "M13.2 7.7 L16.5 9.85 Q20.2 12 16.5 14.15 L10 18.3 Q7 19.7 7 16.3 L7 7.7 Q7 4.3 10 5.7 L13.2 7.7" }) }) }) })) : null, listenBtnRect && (_jsx(InfoTooltip, { anchorRect: listenBtnRect, text: typeof label === 'string' && label ? label : t('training.listenLabel', '문장 듣기'), offset: 8 })), _jsxs("div", { className: `audio-player__play ${stateLocal === "playMode" || displayedPlaying ? "is-visible" : ""}`, children: [_jsxs("div", { ref: btnsRef, className: "audio-player__buttons", children: [_jsx(Button, { htmlType: "button", size: 32, showTooltipInfo: true, type: "dot", shape: "pill", useBorder: false, icon: "skip-back", onClick: handlePrev, ariaLabel: t('training.prev', '이전'), width: "60px", variant: "transparent-white", "aria-hidden": "true", tabIndex: -1, disabled: stateLocal !== 'playMode' }), _jsx(Button, { htmlType: "button", size: 32, showTooltipInfo: true, type: "dot", shape: "pill", useBorder: false, icon: displayedPlaying ? "pause" : "play", onClick: handleToggle, ariaLabel: t('common.playPause', '재생 / 멈춤'), width: "60px", variant: "transparent-white", disabled: stateLocal !== 'playMode' }), _jsx(Button, { htmlType: "button", size: 32, showTooltipInfo: true, type: "dot", shape: "pill", useBorder: false, icon: "square", onClick: handleStop, ariaLabel: t('training.stop', '정지'), width: "60px", variant: "transparent-white", "aria-hidden": "true", tabIndex: -1, disabled: stateLocal !== 'playMode' }), sourceButtonCount > 1 ? (_jsx("div", { ref: sourceButtonsRef, className: "audio-player__source-buttons", children: Array.from({ length: sourceButtonCount }).map((_, idx) => (_jsx(Button, { htmlType: "button", size: 32, type: "dot", shape: "pill", useBorder: false, label: String(idx + 1), onClick: () => { try {
                                                 handleJumpTo(idx);

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

@@ -36,6 +36,8 @@ export default function TrainingStepCard({ index, stepIndex, isLast = false, tit
     // ── 모두 듣기 — 카드별 소리 듣기 버튼을 순서대로 재생 ──
     const cardRefs = useRef([]);
     const [playingAll, setPlayingAll] = useState(false);
+    const 단계살아있음 = useRef(true);
+    useEffect(() => { 단계살아있음.current = true; return () => { 단계살아있음.current = false; }; }, []);
     // 페이지 전환 시 (items 변경) 이전 선택 상태 및 카드 ref 초기화
     const itemsKey = useMemo(() => items.map((it) => it?.id ?? it?.word ?? '').join('|'), [items]);
     /* eslint-disable react-hooks/set-state-in-effect */
@@ -67,7 +69,11 @@ export default function TrainingStepCard({ index, stepIndex, isLast = false, tit
             return;
         setPlayingAll(true);
         try {
-            for (const cardRef of cardRefs.current.slice(0, shown.length)) {
+            /* 매 차례 **지금의** 카드를 읽고, 떠났으면 멈춘다 — 시작할 때 잡아 둔 핸들로 돌면 떠난 화면의 다음 카드가 이어서 울렸다 */
+            for (let i = 0; i < shown.length; i++) {
+                if (!단계살아있음.current)
+                    break;
+                const cardRef = cardRefs.current[i];
                 if (!cardRef)
                     continue;
                 await withTimeout(cardRef.play(), PLAY_ALL_CARD_TIMEOUT_MS);

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

@@ -3,5 +3,4 @@ import "./TrainingStep.css";
 import "./TrainingStepOrderList.css";
 import type { TrainingStepOrderListProps } from './trainingStepOrderListTypes';
 export type { TrainingContextItem, ShuffledItem, ChangeResult, TrainingStepOrderListProps } from './trainingStepOrderListTypes';
-/** @public */
 export default function TrainingStepOrderList({ index, stepIndex, isLast, title, onDone, onChange, context, }: TrainingStepOrderListProps): import("react").JSX.Element;

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

@@ -9,7 +9,10 @@ import "./TrainingStep.css";
 import TrainingStep from "./TrainingStep";
 import "./TrainingStepOrderList.css";
 /** @public */
-export default function TrainingStepOrderList({ index, stepIndex, isLast = false, title, onDone, onChange, context = [], }) {
+/* 기본 context 는 **모듈에 하나** — 매 렌더 새 `[]` 면 [context] effect 가 매번 다시 돌아 setState·onChange 로 렌더가 끝없이
+   반복됐다(자료를 불러오기 전 context 없이 그린 단계에서 CPU 100%). */
+const 빈문맥 = [];
+export default function TrainingStepOrderList({ index, stepIndex, isLast = false, title, onDone, onChange, context = 빈문맥, }) {
     const { t } = useTranslation();
     const resolvedTitle = title ?? t('training.orderListDefault', '문장을 들은 순서대로 배치하세요.');
     const toText = (v) => typeof v === "string"
@@ -32,7 +35,13 @@ export default function TrainingStepOrderList({ index, stepIndex, isLast = false
     const 조작가능 = currentState !== 'disabled';
     // context 변경 시 items/shuffled를 다시 초기화하는 의도된 동기화다
     /* eslint-disable react-hooks/set-state-in-effect */
+    /* 같은 context 로 다시 도는 effect(StrictMode 의 두 번 실행, 숨김→보임)는 넘긴다 — 다시 섞고 다시 알리면 처음 알림의
+       배치가 화면에 한 번도 안 뜬 배치였고 onChange·onDone 이 두 번씩 나갔다. 새 context 일 때만 섞는다. */
+    const 섞은문맥 = useRef(undefined);
     useEffect(() => {
+        if (섞은문맥.current === context)
+            return;
+        섞은문맥.current = context;
         const it = Array.isArray(context) ? context : [];
         setItems(it);
         const makeInitial = (src) => {
@@ -119,6 +128,12 @@ export default function TrainingStepOrderList({ index, stepIndex, isLast = false
         if (rafRef.current !== null)
             return;
         const loop = () => {
+            /* 끄는 것이 없으면 멈춘다 — dragstart 가 건 첫 프레임이 돌기 전에 dragend·언마운트가 오면 비어 있는 rafRef 만
+               취소돼, 뒤늦게 켜진 루프가 60fps 로 영영 돌았다. */
+            if (!draggingObjRef.current) {
+                rafRef.current = null;
+                return;
+            }
             rafRef.current = requestAnimationFrame(loop);
             const p = lastPosRef.current;
             const off = dragOffsetRef.current || { dx: 0, dy: 0 };

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

@@ -9,7 +9,7 @@ import useMediaQuery from '../../hooks/useMediaQuery';
 import { getImageResolver } from '../../utils/imageConfig';
 import { useWordImage } from '../../hooks/useWordImage';
 import { getTTSUrlResolver, getTTSFallbackUrlResolver } from '../../utils/ttsConfig';
-import { claimSound } from './currentSound';
+import { claimSound, stopSoundIfOwner } from './currentSound';
 import SymbolSvg from '../../logo/Symbol_speechear_black.svg';
 import { resolveAssetUrl } from '../../utils/assets';
 import './TrainingWordCard.css';
@@ -80,8 +80,17 @@ const TrainingWordCard = forwardRef(function TrainingWordCard({ item, disabled =
         return () => { cancelled = true; };
     }, [rawAudioSrc, label, audioFor]);
     // ── 언마운트 시 오디오 정리 ──
+    /* 떠날 때 **이 카드가 쥔 소리** 도 끊는다 — audio 만 멈춰, 음원 없는 낱말(speechSynthesis)을 듣는 중에 떠나면 말이
+       계속 나왔다. 남이 이미 가져간 소리는 건드리지 않는다(stopSoundIfOwner). 떠난 뒤에는 기다리던 합성 주소가 와도 울리지 않는다. */
+    const mountedRef = useRef(true);
+    const 쥔소리Ref = useRef(null);
     useEffect(() => {
+        mountedRef.current = true;
         return () => {
+            mountedRef.current = false;
+            if (쥔소리Ref.current)
+                stopSoundIfOwner(쥔소리Ref.current);
+            쥔소리Ref.current = null;
             try {
                 audioRef.current?.pause();
             }
@@ -143,7 +152,7 @@ const TrainingWordCard = forwardRef(function TrainingWordCard({ item, disabled =
     // 재생 우선순위: ① 정식 음원 URL → ② 앱이 등록한 런타임 합성 폴백(예: Gemini-TTS) →
     // ③ 브라우저 speechSynthesis. ②가 있으면 아직 음원이 없는 단어도 표준발음으로 들린다.
     const playAudio = useCallback(async () => {
-        if (disabled)
+        if (disabled || !mountedRef.current)
             return;
         /* 이전 재생을 확실히 끊고 시작한다(겹침 방지).
     
@@ -151,7 +160,7 @@ const TrainingWordCard = forwardRef(function TrainingWordCard({ item, disabled =
            것**이라, 옆 카드가 울리는 것은 못 멈췄다 — 변별 훈련에서 1번·2번을 잇달아 누르면
            둘이 함께 울렸다. speechSynthesis 만 전역이라 음원 없는 낱말에서는 멀쩡해 보였고,
            그래서 증상이 반만 나타났다. 스피커가 하나이므로 자물쇠도 전역에 둔다. */
-        const release = claimSound(() => {
+        const 멈춤 = () => {
             try {
                 audioRef.current?.pause();
             }
@@ -161,7 +170,9 @@ const TrainingWordCard = forwardRef(function TrainingWordCard({ item, disabled =
             }
             catch { /* 미지원 환경 */ }
             setPlaying(false);
-        });
+        };
+        const release = claimSound(멈춤);
+        쥔소리Ref.current = 멈춤;
         try {
             window.speechSynthesis?.cancel();
         }
@@ -178,6 +189,8 @@ const TrainingWordCard = forwardRef(function TrainingWordCard({ item, disabled =
             if (fallbackResolver && label) {
                 try {
                     const url = await Promise.resolve(fallbackResolver(label));
+                    if (!mountedRef.current)
+                        return;
                     if (url) {
                         setPlaying(true);
                         if (await playUrl(url))
@@ -186,10 +199,14 @@ const TrainingWordCard = forwardRef(function TrainingWordCard({ item, disabled =
                 }
                 catch { }
             }
+            if (!mountedRef.current)
+                return;
             await playSpeechSynthesis();
         }
         finally {
             release(); // 다음 사람이 이미 가져갔으면 아무 일도 안 한다
+            if (쥔소리Ref.current === 멈춤)
+                쥔소리Ref.current = null;
         }
     }, [disabled, audioUrl, label, playUrl, playSpeechSynthesis]);
     useImperativeHandle(ref, () => ({

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

@@ -22,5 +22,10 @@
  *          이미 다음 사람이 가져갔으면 그 사람 것을 지우면 안 된다.
  */
 export declare function claimSound(stop: () => void): () => void;
+/**
+ * **내 소리가 아직 울리고 있을 때만** 멈추고 자리를 비운다 — 소리를 낸 화면이 떠날 때 쓴다.
+ * 이미 다음 사람이 가져갔으면 아무것도 안 한다(남의 소리를 끊지 않는다).
+ */
+export declare function stopSoundIfOwner(stop: () => void): void;
 /** 지금 울리는 것을 멈춘다 — 화면을 떠날 때처럼, 새로 울릴 것이 없을 때 쓴다 */
 export declare function stopCurrentSound(): void;

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

@@ -34,6 +34,19 @@ export function claimSound(stop) {
     return () => { if (stopCurrent === stop)
         stopCurrent = null; };
 }
+/**
+ * **내 소리가 아직 울리고 있을 때만** 멈추고 자리를 비운다 — 소리를 낸 화면이 떠날 때 쓴다.
+ * 이미 다음 사람이 가져갔으면 아무것도 안 한다(남의 소리를 끊지 않는다).
+ */
+export function stopSoundIfOwner(stop) {
+    if (stopCurrent !== stop)
+        return;
+    stopCurrent = null;
+    try {
+        stop();
+    }
+    catch { /* 무시 */ }
+}
 /** 지금 울리는 것을 멈춘다 — 화면을 떠날 때처럼, 새로 울릴 것이 없을 때 쓴다 */
 export function stopCurrentSound() {
     if (!stopCurrent)

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

@@ -1,4 +1,5 @@
 'use client';
+import i18n from "i18next";
 import { getTopicTypes } from "../../utils/categories";
 /** @public */
 export function normalizeCats(item) {
@@ -43,6 +44,12 @@ export function splitTrainingVariants(value) {
     }
     return [String(value)];
 }
+const 이름 = (key, 기본) => {
+    if (!기본)
+        return 기본;
+    const s = typeof i18n?.t === "function" ? i18n.t(key, { defaultValue: 기본 }) : undefined;
+    return typeof s === "string" && s ? s : 기본;
+};
 /** @public */
 export function resolveTrainingPopupMeta(trainingData, depth, fallbackTitle) {
     const td = trainingData;
@@ -62,7 +69,11 @@ export function resolveTrainingPopupMeta(trainingData, depth, fallbackTitle) {
         wrapperStyle: category?.color
             ? { "--t-item-fg": category.color }
             : undefined,
-        iconTooltip: [category?.label, subCategory?.label].filter(Boolean).join(" / ") || undefined,
+        // 카테고리 이름은 지금 언어로(topic.* · topic.sub.*, 사전에 없으면 등록된 이름)
+        iconTooltip: [
+            category ? 이름(`topic.${category.key}`, category.label) : undefined,
+            subCategory ? 이름(`topic.sub.${subCategory.key}`, subCategory.label) : undefined,
+        ].filter(Boolean).join(" / ") || undefined,
     };
 }
 /** @public */

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

@@ -168,6 +168,10 @@ export function useNoiseFade({ noisePlayer, audioRef, playbackStateRef, }) {
             }
             catch (e) { }
             noiseAudioRef.current = null;
+            /* 이 요소에 물린 파일 기록도 함께 걷는다 — 남겨 두면 다시 만든 요소(StrictMode 의 두 번 실행, <Activity> 숨김→보임)에
+               설정 효과가 "이미 불러옴" 으로 보고 주소를 안 물려, 파형은 그려지는데 소음은 끝까지 안 났다. */
+            noiseTypeLoadedRef.current = null;
+            pendingNoiseUrlRef.current = null;
         };
     }, [cancelNoiseFade]);
     // 소음 감시(watchdog) — 메인이 재생 중이 아닌데 소음만 재생 중이면 강제로 정지한다.

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

@@ -17,6 +17,8 @@ export function useTTSPlayback({ ttsText, playbackRate, mainVolume, fillRef, wav
        end 이벤트를 내서, **정지를 누르면 끝까지 들은 것으로** handleEnd → onDone(true) 가 불렸고(문항 완료로 셈),
        언마운트 뒤에 온 end 가 떠난 화면에 완료를 알렸다. 번호가 다른 end 는 넘긴다. */
     const ttsTokenRef = useRef(0);
+    /** 이 훅이 말을 건 적이 있나 — 떠날 때 **제 말만** 끊는다(마운트만 한 단계가 다른 곳의 말을 끊던 것) */
+    const 말했나Ref = useRef(false);
     useEffect(() => {
         // cleanup TTS resources on unmount
         return () => {
@@ -26,11 +28,12 @@ export function useTTSPlayback({ ttsText, playbackRate, mainVolume, fillRef, wav
                     cancelAnimationFrame(ttsRafRef.current);
                     ttsRafRef.current = null;
                 }
-                if (window.speechSynthesis) {
+                if (말했나Ref.current && window.speechSynthesis) {
                     try {
                         window.speechSynthesis.cancel();
                     }
                     catch (e) { }
+                    말했나Ref.current = false;
                 }
             }
             catch (e) { }
@@ -138,6 +141,7 @@ export function useTTSPlayback({ ttsText, playbackRate, mainVolume, fillRef, wav
                 catch (e) { }
             };
             try {
+                말했나Ref.current = true;
                 synth.speak(utt);
             }
             catch (e) {

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

@@ -43,17 +43,18 @@ function WordCell({ label, subLabel, colloquialLabel, homonum, showWord = true,
         if (!wordInfo)
             return null;
         const arr = [];
+        // 지금 언어로 — 템플릿 글자·약호 이름표가 한국어로 박혀 영어 화면에도 "난이도: 2등급 / 품사: 명사" 가 떴다
         if (wordInfo.grade)
-            arr.push(`난이도: ${wordInfo.grade}등급`);
+            arr.push(t('wordTable.info.grade', { n: wordInfo.grade, defaultValue: '난이도: {{n}}등급' }));
         if (wordInfo.syllables)
-            arr.push(`음절 수: ${wordInfo.syllables}음절`);
+            arr.push(t('wordTable.info.syllables', { n: wordInfo.syllables, defaultValue: '음절 수: {{n}}음절' }));
         // 축약 코드를 전체 표기로 — 복합값('명/관' → '명사/관형사')도 각각 펼친다(단어 관리 표와 동일 규칙).
         if (wordInfo.pos)
-            arr.push(`품사: ${expandSlashLabel(wordInfo.pos, POS_LABEL)}`);
+            arr.push(t('wordTable.info.pos', { v: expandSlashLabel(wordInfo.pos, 품사이름(t)), defaultValue: '품사: {{v}}' }));
         if (wordInfo.wordType)
-            arr.push(`유형: ${expandSlashLabel(wordInfo.wordType, WORD_TYPE_LABEL)}`);
+            arr.push(t('wordTable.info.wordType', { v: expandSlashLabel(wordInfo.wordType, 어종이름(t)), defaultValue: '유형: {{v}}' }));
         return arr.length ? arr : null;
-    }, [wordInfo]);
+    }, [wordInfo, t]);
     useEffect(() => {
         const resolver = getTTSUrlResolver();
         const ttsText = pron || label;
@@ -128,6 +129,19 @@ function WordCell({ label, subLabel, colloquialLabel, homonum, showWord = true,
                            것인지 알 길이 없으므로 낱말을 이름에 넣는다. */
                         ariaLabel: t('wordTable.wordInfo', '{{word}} 낱말 정보', { word: label }), onClick: (e) => e.stopPropagation() }), infoAnchor && infoTooltipItems && (_jsx(DescriptionTooltip, { anchorRect: infoAnchor, items: infoTooltipItems, showIndex: false }))] }))] }));
 }
+// ── WordTable (표 디자인) ──────────────────────────────────────
+/* 품사·어종 약호 → 지금 언어의 이름. 사전에 없으면 원본 한국어 이름표(POS_LABEL·WORD_TYPE_LABEL) */
+const 품사열쇠 = {
+    '명': 'noun', '동': 'verb', '형': 'adjective', '부': 'adverb', '수': 'numeral', '관': 'determiner', '감': 'interjection',
+    '조': 'particle', '접': 'affix', '의': 'dependentNoun', '대': 'pronoun', '보동': 'auxVerb', '보형': 'auxAdjective',
+};
+const 어종열쇠 = { '고유': 'native', '한자': 'sino', '외래': 'foreign', '혼종': 'mixed' };
+function 품사이름(t) {
+    return Object.fromEntries(Object.entries(POS_LABEL).map(([k, v]) => [k, 품사열쇠[k] ? t(`wordTable.pos.${품사열쇠[k]}`, { defaultValue: v }) : v]));
+}
+function 어종이름(t) {
+    return Object.fromEntries(Object.entries(WORD_TYPE_LABEL).map(([k, v]) => [k, 어종열쇠[k] ? t(`wordSearch.filter.type.${어종열쇠[k]}`, { defaultValue: v }) : v]));
+}
 /**
  * 단어표(표 디자인) — A4 종이를 컨테이너에 맞춰 축소(scale)하고,
  * 칸 그리드와 단어 셀을 그린다. 컨트롤(필터·저장·인쇄)은 포함하지 않는다.

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

@@ -5,9 +5,9 @@ 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 [scale, setScaleRaw] = useState(() => {
+    const 읽기 = (key) => {
         try {
-            const raw = localStorage.getItem(storageKey);
+            const raw = localStorage.getItem(key);
             const parsed = raw ? Number(raw) : 1;
             // 손상된/비숫자 저장값(Number(raw) === NaN)이 그대로 초기값이 되면 scale이 NaN으로
             // 고정되어 canIncrease/canDecrease 비교가 항상 false가 되고 fontSize/lineHeight도
@@ -17,9 +17,18 @@ baseFont = 20, minScale = 0.8, maxScale = 1.4, step = 0.1, lineHeightRatio = 1.4
             return Number.isFinite(parsed) ? clamp(parsed) : clamp(1);
         }
         catch (e) {
-            return 1;
+            // 저장소를 못 읽어도 범위는 지킨다(minScale 이 1 보다 크면 1 은 범위 밖이다)
+            return clamp(1);
         }
-    });
+    };
+    const [scale, setScaleRaw] = useState(() => 읽기(storageKey));
+    /* 열쇠가 바뀌면 **그 열쇠의 저장값** 으로 — 전에는 앞 열쇠의 값을 들고 있다가 아래 쓰기가 새 열쇠의 저장값을 덮었다.
+       렌더 중에 맞추므로 쓰기 effect 는 새 값으로만 돈다. */
+    const [읽은열쇠, set읽은열쇠] = useState(storageKey);
+    if (읽은열쇠 !== storageKey) {
+        set읽은열쇠(storageKey);
+        setScaleRaw(읽기(storageKey));
+    }
     useEffect(() => {
         try {
             localStorage.setItem(storageKey, String(scale));

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

@@ -42,6 +42,9 @@ export default function useIcon(icon) {
                 normalized = icon;
             }
         }
+        // 다른 파일로 바뀌면 앞 아이콘의 판정·SVG 를 걷는다 — 안 걷으면 새 파일을 받는 동안 앞 아이콘이 그대로 그려졌다
+        setMode(null);
+        setSvgText(null);
         setIconToUse(normalized);
     }, [icon]);
     /* eslint-enable react-hooks/set-state-in-effect */

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

@@ -20,6 +20,9 @@ function toRawKey(icon) {
         return null;
     if (icon.includes('/assets/'))
         return null;
+    // 그림 파일(.png·.jpg 등)은 아이콘 이름이 아니다 — 이름으로 찾아 개발 모드에 헛 경고를 냈다
+    if (/\.(png|jpe?g|gif|webp|avif|bmp|ico)$/i.test(lower))
+        return null;
     const baseFile = icon.split('/').pop() || '';
     // 주의: lucide 아이콘명 규약("trash-2", "edit-2", "link-2" 등)은 끝의 숫자가
     // "-2/-3" 변형 아이콘을 가리키는 유의미한 부분이라 잘라내면 안 됨(예: trash-2 ≠ trash).

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

@@ -1,3 +1,4 @@
+import * as React from 'react';
 /**
  * 미디어쿼리 결과를 강제로 덮어쓰기 위한 컨텍스트.
  * 랜딩페이지 폰 목업처럼 데스크탑 뷰포트에서 모바일 화면을 재현해야 할 때,
@@ -12,6 +13,6 @@ export interface MediaQueryOverride {
     mobile?: boolean;
 }
 /** @public */
-export declare const MediaQueryOverrideContext: import("react").Context<MediaQueryOverride | null>;
+export declare const MediaQueryOverrideContext: React.Context<MediaQueryOverride | null>;
 /** @public */
 export default function useMediaQuery(query: string): boolean;

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

@@ -1,19 +1,40 @@
 'use client';
-import { useEffect, useState, useContext, createContext } from 'react';
+import * as React from 'react';
+import { useCallback, useEffect, useState, useContext, createContext } from 'react';
 /** @public */
 export const MediaQueryOverrideContext = createContext(null);
 // '(max-width: 767px)' / '(max-width: 768px)' 같은 모바일 판정 쿼리인지 추정
 function isMobileQuery(query) {
     return /max-width:\s*7[0-9][0-9]px/.test(query);
 }
-/** @public */
-export default function useMediaQuery(query) {
-    const override = useContext(MediaQueryOverrideContext);
-    const getMatches = (q) => {
+const getMatches = (q) => {
+    if (typeof window === 'undefined' || !window.matchMedia)
+        return false;
+    return window.matchMedia(q).matches;
+};
+/* React 18+ — 외부 저장소 구독으로 읽는다. **서버 스냅숏은 false** 라, 서버에서 그린 HTML 을 붙일 때(kscan·Next) 첫 렌더가
+   서버와 같고 붙인 뒤 곧바로 실제 값으로 다시 그린다. 전에는 첫 렌더에서 matchMedia 를 읽어 모바일 기기에서 hydration
+   불일치로 트리를 통째로 다시 만들었다. 서버 렌더가 아닌 첫 렌더는 그대로 실제 값이다. */
+function useMatchesStore(query) {
+    const subscribe = useCallback((onChange) => {
         if (typeof window === 'undefined' || !window.matchMedia)
-            return false;
-        return window.matchMedia(q).matches;
-    };
+            return () => { };
+        const mql = window.matchMedia(query);
+        if (mql.addEventListener)
+            mql.addEventListener('change', onChange);
+        else if (mql.addListener)
+            mql.addListener(onChange);
+        return () => {
+            if (mql.removeEventListener)
+                mql.removeEventListener('change', onChange);
+            else if (mql.removeListener)
+                mql.removeListener(onChange);
+        };
+    }, [query]);
+    return React.useSyncExternalStore(subscribe, () => getMatches(query), () => false);
+}
+/* React 16.8·17 — useSyncExternalStore 가 없다. 예전 방식 그대로. */
+function useMatchesState(query) {
     const [matches, setMatches] = useState(getMatches(query));
     // query가 바뀌면 새 matchMedia 결과로 즉시 동기화(구독 시작 전 값이 stale할 수 있음) —
     // window.matchMedia(외부 시스템) 구독의 표준 패턴이다
@@ -37,6 +58,14 @@ export default function useMediaQuery(query) {
         };
     }, [query]);
     /* eslint-enable react-hooks/set-state-in-effect */
+    return matches;
+}
+// 모듈을 불러올 때 한 번 정한다 — 렌더마다 같은 훅을 부르므로 훅 순서 규칙을 어기지 않는다
+const useMatches = typeof React.useSyncExternalStore === 'function' ? useMatchesStore : useMatchesState;
+/** @public */
+export default function useMediaQuery(query) {
+    const override = useContext(MediaQueryOverrideContext);
+    const matches = useMatches(query);
     // 오버라이드가 있고 모바일 판정 쿼리이면 강제값 사용
     if (override && typeof override.mobile === 'boolean' && isMobileQuery(query)) {
         return override.mobile;

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

@@ -1,3 +1,4 @@
+'use client';
 import { useMemo } from 'react';
 /**
  * 클라이언트 페이지네이션 — 목록·페이지크기·현재 페이지로 현재 쪽 항목·총 쪽수·보정된

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

@@ -1,3 +1,4 @@
+'use client';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { translateTrainingTypes } from '../utils/CategoryData';

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

@@ -1,3 +1,4 @@
+'use client';
 import { useState } from 'react';
 import { useEditableList, isSameEditableItem } from './useEditableList';
 /**

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

@@ -1,5 +1,5 @@
 'use client';
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { CAPABILITY, generateRuntimeItems, precomputeCommonCombinations, } from '../utils/wordTrainingRuntime';
 import { valueToJamos, syllableToFilter, NO_CODA } from './useWordTrainingFilter';
 /** 선택된 단어 구성을 실제 매칭용 CompositionFilter로 변환. 선택 없으면 null.
@@ -36,6 +36,9 @@ export function useWordTrainingDataGeneration(types, difficulty, contrastCount,
     // 배열인 이쪽만 빠져 있었다. effect 안에서 어차피 정렬해 문자열로 쓰고 있으니
     // 그 문자열을 의존성으로 삼는다. 내용이 같으면 다시 만들지 않는다.
     const gradeKey = gradeFilter.length > 0 ? gradeFilter.slice().sort().join(',') : '';
+    /* types 도 **내용** 으로 — 만드는 일은 어떤 유형이 있느냐(key)에만 달려 있다. 빠져 있어 늦게 채워진 목록([] → [A,B])으로는
+       끝까지 아무것도 안 만들었다. 이름·색·부제는 아래에서 최신 types 로 덧입혀, 언어를 바꿔도 다시 뽑지 않고 이름만 따라간다. */
+    const typesKey = types.map(t => t.key).join('|');
     // 단어풀 갱신 시 사전 계산 (백그라운드 fire-and-forget)
     useEffect(() => {
         if (poolVersion > 0) {
@@ -100,7 +103,19 @@ export function useWordTrainingDataGeneration(types, difficulty, contrastCount,
             }
         })();
         return () => { cancelled = true; };
-    }, [difficulty, contrastCount, cho, jung, jong, syllable, excludeNoImage, sameStructureOnly, phonemeView, poolVersion, gradeKey]); // eslint-disable-line react-hooks/exhaustive-deps
+    }, [difficulty, contrastCount, cho, jung, jong, syllable, excludeNoImage, sameStructureOnly, phonemeView, poolVersion, gradeKey, typesKey]); // eslint-disable-line react-hooks/exhaustive-deps
     /* eslint-enable react-hooks/set-state-in-effect */
-    return { perTypeData, generating };
+    // 이름·색·부제는 지금 types 로 — 만든 때의 label 을 들고 있어 언어를 바꿔도 단추 제목이 옛 언어로 남았다
+    // 부르는 쪽이 types 를 매번 새 배열로 줘도 결과 객체가 그대로이도록 **내용** 으로 기억한다
+    const typesLabelKey = JSON.stringify(types.map(t => [t.key, t.label, t.color, t.subTitle]));
+    const labeled = useMemo(() => {
+        const out = {};
+        for (const [key, v] of Object.entries(perTypeData)) {
+            const t = types.find(x => x.key === key);
+            out[key] = v && t ? { ...v, name: t.label, iconColor: t.color, subTitle: t.subTitle } : v;
+        }
+        return out;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [perTypeData, typesLabelKey]);
+    return { perTypeData: labeled, generating };
 }