@ihabdevteam/core 0.135.0 → 0.137.0

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

@@ -17,6 +17,8 @@ function escapeHtml(s) {
 export function sanitizeFileName(name) {
     return name.replace(/[\\/:*?"<>|]/g, '_').trim();
 }
+/** 아직 되돌리지 못한 탭 제목 되돌리기(인쇄가 끝나기 전 다음 인쇄가 올 때) */
+let 제목되돌리기 = null;
 /**
  * 캡처한 콘텐츠 엘리먼트들을 화면 밖 숨김 iframe에서 인쇄한다. 전역 @media print(모든
  * .word-table 노출)나 팝업 차단의 간섭 없이 넘긴 엘리먼트만 격리 인쇄한다. WordTableBlock의
@@ -28,10 +30,21 @@ export function printWordTableElements(elements, paperW, paperH, fileName = '',
         return;
     const safeFileName = fileName ? sanitizeFileName(fileName) : '';
     // "PDF로 저장" 기본 파일명은 iframe이 아니라 최상위 탭(document)의 title에서 온다.
+    /* 탭 제목은 **어느 쪽 afterprint 가 와도** 되돌린다 — 브라우저에 따라 iframe 인쇄의 print 이벤트가 그 프레임에만 가서,
+       최상위에만 걸면 제목이 표 이름으로 남았고, 다음 인쇄가 그 표 이름을 '원래 제목' 으로 잡아 영영 안 돌아왔다.
+       되돌리지 못한 앞 인쇄가 있으면 먼저 되돌린 뒤 원래 제목을 잡는다. */
+    제목되돌리기?.();
+    let restore = null;
     if (safeFileName) {
         const prevTitle = document.title;
         document.title = safeFileName;
-        const restore = () => { document.title = prevTitle; window.removeEventListener('afterprint', restore); };
+        restore = () => {
+            document.title = prevTitle;
+            window.removeEventListener('afterprint', restore);
+            if (제목되돌리기 === restore)
+                제목되돌리기 = null;
+        };
+        제목되돌리기 = restore;
         window.addEventListener('afterprint', restore);
     }
     const iframe = document.createElement('iframe');
@@ -45,7 +58,7 @@ export function printWordTableElements(elements, paperW, paperH, fileName = '',
     doc.open();
     doc.write(captureHtml(elements, paperW, paperH, true, safeFileName, header));
     doc.close();
-    iframe.contentWindow?.addEventListener('afterprint', () => setTimeout(() => iframe.remove(), 0));
+    iframe.contentWindow?.addEventListener('afterprint', () => { restore?.(); setTimeout(() => iframe.remove(), 0); });
 }
 // 인쇄 시 PDF로 저장할 때 OS가 제안하는 기본 파일명은 문서 <title>에서 온다.
 export function captureHtml(els, paperW, paperH, autoPrint = false, fileName = '', header = '') {

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/components/buttonTypes.d.ts

@@ -87,6 +87,12 @@ export interface ButtonProps {
         title?: string;
         items: string[];
     } | null;
+    /**
+     * 누르는 단추가 아니라 **툴팁을 보여 주는 칩** 이다 — 커서를 손가락이 아닌 기본 화살표로 둔다.
+     * 모양(바탕·hover)과 포커스·툴팁은 그대로다. `onClick` 없이 `showTooltipInfo`·`tooltipDescription` 만 다는
+     * 자리(점수 칩 등)에 쓴다. 막힌 단추(`disabled`)와는 다르다 — 흐려지지 않는다.
+     */
+    tooltipOnly?: boolean;
     iconSize?: 'small' | 'medium' | 'large';
     iconColor?: string;
     /**

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

@@ -29,22 +29,20 @@ export function useCalendarMonth(value) {
         setViewM(next.m);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [value]);
-    const prevMonth = useCallback(() => {
-        if (viewM === 0) {
-            setViewY(y => y - 1);
-            setViewM(11);
-        }
-        else
-            setViewM(m => m - 1);
-    }, [viewM]);
-    const nextMonth = useCallback(() => {
-        if (viewM === 11) {
-            setViewY(y => y + 1);
-            setViewM(0);
-        }
-        else
-            setViewM(m => m + 1);
-    }, [viewM]);
-    const setViewYM = useCallback((y, m) => { setViewY(y); setViewM(m); }, []);
+    /* 달 넘김은 **지금 가리키는 연·월 하나** 에서 센다 — 갈래는 렌더 때의 viewM 으로, 갱신은 함수형으로 나눠 하던 때는
+       한 핸들러에서 두 번 부르면(2월에서 prevMonth 두 번) (2026, -1) 이 됐다. 부른 즉시 ref 도 옮겨 둔다. */
+    const ymRef = useRef({ y: viewY, m: viewM });
+    useEffect(() => { ymRef.current = { y: viewY, m: viewM }; }, [viewY, viewM]);
+    const moveMonth = useCallback((d) => {
+        const total = ymRef.current.y * 12 + ymRef.current.m + d;
+        const y = Math.floor(total / 12);
+        const m = total - y * 12;
+        ymRef.current = { y, m };
+        setViewY(y);
+        setViewM(m);
+    }, []);
+    const prevMonth = useCallback(() => moveMonth(-1), [moveMonth]);
+    const nextMonth = useCallback(() => moveMonth(1), [moveMonth]);
+    const setViewYM = useCallback((y, m) => { ymRef.current = { y, m }; setViewY(y); setViewM(m); }, []);
     return { viewY, viewM, prevMonth, nextMonth, setViewYM };
 }

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

@@ -83,8 +83,13 @@ export function useToastLifecycle({ message, position, duration, onClose }) {
             // 이미 보이는 중 → 텍스트만 업데이트, 애니메이션 재실행 없음
             if (showingRef.current) {
                 if (DURATION_MS > 0 && !hideTimerRef.current) {
-                    멈춤Ref.current = false;
-                    사라짐걸기.current(DURATION_MS);
+                    /* 멈춘 채(마우스·포커스가 올라가 있는 채) 문구가 바뀌면 시계를 새로 걸지 않는다 — 전에는 멈춤을 풀고 걸어
+                       읽고 있는 알림이 손 밑에서 사라졌고, 떠날 때의 resume 은 멈춤이 이미 풀려 아무것도 안 했다.
+                       새 문구의 시간은 **처음부터** 남겨 두고 resume 이 그만큼 돌린다. */
+                    if (멈춤Ref.current)
+                        남은Ref.current = DURATION_MS;
+                    else
+                        사라짐걸기.current(DURATION_MS);
                 }
                 lastMessageRef.current = message;
                 /* 여기서 건 사라짐 타이머도 떠날 때 걷는다 — 빈 정리 함수라 문구를 바꾼 뒤 언마운트하면 타이머가 살아

package/dist/packages/core/src/context/I18nProvider.js

@@ -3,13 +3,22 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect } from 'react';
 import i18n, { SUPPORTED_LOCALES, DEFAULT_LOCALE } from '../i18n';
 import { I18nContext } from './I18nContext';
+function 지원코드(locale) {
+    const 있나 = (c) => SUPPORTED_LOCALES.some(l => l.code === c);
+    if (있나(locale))
+        return locale;
+    const 기본 = locale.split(/[-_]/)[0]?.toLowerCase() ?? '';
+    return 있나(기본) ? 기본 : DEFAULT_LOCALE;
+}
 /** @public */
 export function I18nProvider({ locale = DEFAULT_LOCALE, children }) {
+    /* 지역이 붙은 코드('en-US'·'ko_KR')는 기본 언어로 읽는다 — 전에는 목록에 없다고 기본(ko)으로 떨어져 영어를 달라 했는데
+       한국어가 나오고, context 의 locale 은 'en-US' 로 남아 둘이 갈렸다. context 에도 실제로 건 코드를 넣는다. */
+    const code = 지원코드(locale);
     useEffect(() => {
-        const code = SUPPORTED_LOCALES.find(l => l.code === locale) ? locale : DEFAULT_LOCALE;
         if (i18n.language !== code) {
             i18n.changeLanguage(code);
         }
-    }, [locale]);
-    return (_jsx(I18nContext.Provider, { value: { locale, supportedLocales: SUPPORTED_LOCALES }, children: children }));
+    }, [code]);
+    return (_jsx(I18nContext.Provider, { value: { locale: code, supportedLocales: SUPPORTED_LOCALES }, children: children }));
 }

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/useSoundCompassExam.js

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

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 };
 }

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

@@ -83,7 +83,8 @@
                 "velar": "ɰ-glide"
             }
         },
-        "unknownError": "Unknown error"
+        "unknownError": "Unknown error",
+        "networkError": "The network connection is unstable. Check your connection and try again."
     },
     "calendar": {
         "rangeSelect": "Select period",
@@ -150,7 +151,8 @@
         "logoMalgwi": "Malgwi logo",
         "logoManager": "Malgwi Manager logo",
         "menuOpen": "Open menu",
-        "utilMenu": "Utility menu"
+        "utilMenu": "Utility menu",
+        "menuClose": "Close menu"
     },
     "nav": {
         "mainMenu": "Main menu",
@@ -376,6 +378,7 @@
         "listenButton": "Listen",
         "playSound": "Play Sound",
         "playAll": "Play All",
+        "selectInOrder": "Select the cards in the order you heard.",
         "stop": "Stop",
         "preview": "Preview",
         "next": "Next",
@@ -416,7 +419,17 @@
         "prev": "Previous",
         "listenLabel": "Listen",
         "sourcePlay": "Play source {{n}}",
-        "listen": "Listen"
+        "listen": "Listen",
+        "audioStatus": {
+            "idle": "Idle",
+            "resolving": "Resolving…",
+            "checking_exists": "Checking file…",
+            "getting_signed_url": "Getting URL…",
+            "downloading": "Downloading…",
+            "measuring_duration": "Measuring length…",
+            "ready": "Ready",
+            "error": "Error"
+        }
     },
     "trainingSettings": {
         "totalCount": " training bundles",
@@ -802,6 +815,27 @@
             "discardTitle": "Discard this scoring?",
             "discardMessage": "You marked {{count}} cells but have not saved. Leaving discards them.",
             "discardConfirm": "Discard and leave"
+        },
+        "info": {
+            "grade": "Grade: {{n}}",
+            "syllables": "Syllables: {{n}}",
+            "pos": "Part of speech: {{v}}",
+            "wordType": "Type: {{v}}"
+        },
+        "pos": {
+            "noun": "Noun",
+            "verb": "Verb",
+            "adjective": "Adjective",
+            "adverb": "Adverb",
+            "numeral": "Numeral",
+            "determiner": "Determiner",
+            "interjection": "Interjection",
+            "particle": "Particle",
+            "affix": "Affix",
+            "dependentNoun": "Dependent noun",
+            "pronoun": "Pronoun",
+            "auxVerb": "Auxiliary verb",
+            "auxAdjective": "Auxiliary adjective"
         }
     },
     "wordSearch": {
@@ -968,7 +1002,11 @@
         },
         "addNew": "Add New Device",
         "selectFromList": "Select from List",
-        "removeDevice": "Remove"
+        "removeDevice": "Remove",
+        "type": {
+            "hearingAid": "Hearing Aid",
+            "cochlearImplant": "Cochlear Implant"
+        }
     },
     "manager": {
         "stat": {

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

@@ -81,7 +81,8 @@
                 "velar": "ɰ활음"
             }
         },
-        "unknownError": "알 수 없는 오류"
+        "unknownError": "알 수 없는 오류",
+        "networkError": "네트워크 연결이 불안정합니다. 연결 상태를 확인한 뒤 다시 시도해 주세요."
     },
     "calendar": {
         "rangeSelect": "기간 선택",
@@ -148,7 +149,8 @@
         "logoMalgwi": "말귀 로고",
         "logoManager": "말귀매니저 로고",
         "menuOpen": "메뉴 열기",
-        "utilMenu": "유틸리티 메뉴"
+        "utilMenu": "유틸리티 메뉴",
+        "menuClose": "메뉴 닫기"
     },
     "nav": {
         "mainMenu": "메인 메뉴",
@@ -374,6 +376,7 @@
         "listenButton": "문장 듣기",
         "playSound": "소리 듣기",
         "playAll": "모두 듣기",
+        "selectInOrder": "들은 순서대로 카드를 선택하세요.",
         "stop": "정지",
         "preview": "미리 듣기",
         "next": "다음",
@@ -414,7 +417,17 @@
         "prev": "이전",
         "listenLabel": "문장 듣기",
         "sourcePlay": "소스 {{n}} 재생",
-        "listen": "듣기"
+        "listen": "듣기",
+        "audioStatus": {
+            "idle": "대기",
+            "resolving": "리소스 매핑 중…",
+            "checking_exists": "파일 존재 확인…",
+            "getting_signed_url": "서명 URL 조회…",
+            "downloading": "다운로드 중…",
+            "measuring_duration": "오디오 길이 측정…",
+            "ready": "준비 완료",
+            "error": "오류 발생"
+        }
     },
     "trainingSettings": {
         "totalCount": "개의 훈련 묶음",
@@ -800,6 +813,27 @@
             "discardTitle": "매긴 채점을 버릴까요?",
             "discardMessage": "{{count}}칸을 매겼지만 아직 저장하지 않았습니다. 나가면 사라집니다.",
             "discardConfirm": "버리고 나가기"
+        },
+        "info": {
+            "grade": "난이도: {{n}}등급",
+            "syllables": "음절 수: {{n}}음절",
+            "pos": "품사: {{v}}",
+            "wordType": "유형: {{v}}"
+        },
+        "pos": {
+            "noun": "명사",
+            "verb": "동사",
+            "adjective": "형용사",
+            "adverb": "부사",
+            "numeral": "수사",
+            "determiner": "관형사",
+            "interjection": "감탄사",
+            "particle": "조사",
+            "affix": "접사",
+            "dependentNoun": "의존명사",
+            "pronoun": "대명사",
+            "auxVerb": "보조동사",
+            "auxAdjective": "보조형용사"
         }
     },
     "wordSearch": {
@@ -969,7 +1003,11 @@
         },
         "addNew": "새 기기 추가",
         "selectFromList": "목록에서 선택",
-        "removeDevice": "착용 해제"
+        "removeDevice": "착용 해제",
+        "type": {
+            "hearingAid": "보청기",
+            "cochlearImplant": "인공와우"
+        }
     },
     "manager": {
         "stat": {