@ihabdevteam/core 0.342.0 → 0.344.0

package/dist/ihabdevteam-core.d.ts

@@ -1754,7 +1754,7 @@ export declare function copyText(text: string): Promise<boolean>;
  *
  * 값은 손으로 적고 `test/coreVersion.test.ts` 가 package.json 과 어긋나면 운다.
  */
-export declare const CORE_VERSION = "0.342.0";
+export declare const CORE_VERSION = "0.344.0";
 
 /** @public */
 declare const coreDefault: Record<string, unknown>;
@@ -10357,7 +10357,7 @@ export declare function useVisitAllPanel(mergedVisits: MergedVisit[]): {
     vapSearch: string;
     setVapSearch: Dispatch<SetStateAction<string>>;
     vapPageSize: string;
-    setVapPageSize: Dispatch<SetStateAction<string>>;
+    setVapPageSize: (value: SetStateAction<string>) => void;
     /** 번역된 개수 보기 옵션 — `VAP_PAGE_SIZE_OPTIONS` 와 값은 같고 라벨만 지금 언어로 */
     vapPageSizeOptions: {
         label: string;

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

@@ -162,10 +162,11 @@ export default function WaveForm(props) {
     useEffect(() => {
         let cancelled = false;
         setNoiseFailed(false);
-        if (!noiseSrc || !barsTotal) {
-            setNoisePeaks(null);
+        // 파일·시간축이 바뀌면 앞 소음의 파형을 새 계산의 결과처럼 보여 주지 않는다.
+        // 문장 파형은 hasSyncedOnce 래치가 유지하므로 소음 재계산 중에도 계속 보인다.
+        setNoisePeaks(null);
+        if (!noiseSrc || !barsTotal)
             return;
-        }
         const windowSec = totalDuration > 0 ? totalDuration * (noiseSpeed || 1) : undefined;
         /* 소음은 루프되는 바탕이라 **앞머리 무음을 건너뛴다**((82)) — 그 무음은 맨 처음 한 번만
            지나가는 인코더 자국인데, 창이 짧으면 앞칸 예닐곱을 먹어 "앞쪽 소음이 약하다" 로 보였다. */

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

@@ -197,7 +197,20 @@ function TrainingPagePopupInner(props) {
                 reportAppliedNoiseSettings(applied);
             }
         };
-        void loadNoiseSettings().then(apply);
+        void loadNoiseSettings().then(saved => {
+            if (cancelled) {
+                // 초기 로드를 기다리던 사이 창이 닫혀도, 그 전에 사용자가 바꾼 값은
+                // 저장값 위에 병합해 남긴다. 로드 전 기본 enabled:false 를 그대로 저장하지 않는다.
+                const pending = pendingNoiseRef.current;
+                pendingNoiseRef.current = null;
+                if (pending && !noiseOverrideRef.current) {
+                    const loaded = saved ? mergeNoiseSettings({ ...DEFAULT_NOISE_SETTINGS, enabled: false }, saved) : { ...DEFAULT_NOISE_SETTINGS };
+                    saveNoiseSettings(mergeNoiseSettings(loaded, pending));
+                }
+                return;
+            }
+            apply(saved);
+        });
         return () => { cancelled = true; };
     }, []);
     // 오디오 레벨 미터용 analyser (오디오 플레이어가 재생 시 등록)

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

@@ -1,5 +1,5 @@
 'use client';
-import { useState, useCallback, useEffect } from 'react';
+import { useState, useCallback, useEffect, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { clearPairIndexCache } from '../utils/wordPairIndex';
 import { clearImageExistenceCache } from '../utils/imageConfig';
@@ -62,19 +62,29 @@ export function useCacheManagement(onToast) {
     const [clearingId, setClearingId] = useState(null);
     const [confirmCacheId, setConfirmCacheId] = useState(null);
     const [storageEstimate, setStorageEstimate] = useState(null);
+    const estimateVersion = useRef(0);
     const refreshCacheSizes = useCallback(() => {
+        const version = ++estimateVersion.current;
         const sizes = {};
         CACHE_GROUPS.forEach(g => { sizes[g.id] = lsBytes([...g.keys]); });
         setCacheSizes(sizes);
         if (typeof navigator !== 'undefined' && navigator.storage?.estimate) {
-            navigator.storage.estimate().then(e => {
-                setStorageEstimate({ usage: e.usage ?? 0, quota: e.quota ?? 0 });
-            }).catch(() => { });
+            try {
+                void navigator.storage.estimate().then(e => {
+                    if (estimateVersion.current === version) {
+                        setStorageEstimate({ usage: e.usage ?? 0, quota: e.quota ?? 0 });
+                    }
+                }).catch(() => { });
+            }
+            catch { /* 브라우저가 추정을 거부해도 로컬 캐시 용량은 표시한다 */ }
         }
     }, []);
     // refreshCacheSizes는 setSizes 등을 동기 호출하지만, 마운트 시 캐시 용량을 반영하는 의도된 fetch-kickoff이다
     // eslint-disable-next-line react-hooks/set-state-in-effect
-    useEffect(() => { refreshCacheSizes(); }, [refreshCacheSizes]);
+    useEffect(() => {
+        refreshCacheSizes();
+        return () => { estimateVersion.current += 1; };
+    }, [refreshCacheSizes]);
     const handleClearCache = useCallback(async (id) => {
         setClearingId(id);
         try {

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

@@ -35,6 +35,9 @@ export function useDailyTrainingSelection(userId) {
     /* 오늘(KST) — 자정을 넘기면 바뀌어 아래 선택을 **새 날짜 시드로** 다시 계산하게 한다. 전에는 userId 만 봐서 화면을 열어 둔 채
        자정을 넘기면 어제 시드의 세트가 '오늘' 로 보이는데 완료 기록에는 새 날짜가 찍혔다. */
     const [today, setToday] = useState(() => getTodayKst());
+    const ownerKey = JSON.stringify([userId ?? '', today]);
+    const selectionOwnerRef = useRef(null);
+    const statusOwnerRef = useRef(ownerKey);
     useEffect(() => {
         const msUntilMidnight = () => {
             const now = Date.now();
@@ -46,6 +49,11 @@ export function useDailyTrainingSelection(userId) {
         return () => clearTimeout(t);
     }, []);
     useEffect(() => {
+        // 사용자나 날짜가 바뀌면 이전 선택을 새 선택이 준비될 때까지 노출하지 않는다.
+        statusOwnerRef.current = ownerKey;
+        selectionOwnerRef.current = null;
+        setLoaded(false);
+        setHasData(false);
         let cancelled = false;
         let left = false;
         let applied = false;
@@ -69,6 +77,7 @@ export function useDailyTrainingSelection(userId) {
             if (left)
                 return;
             applied = true;
+            selectionOwnerRef.current = ownerKey;
             todayRef.current = sel.today;
             yesterdayRef.current = sel.yesterday;
             setLoaded(true);
@@ -133,8 +142,8 @@ export function useDailyTrainingSelection(userId) {
             window.addEventListener('speechear.data.updated', onData);
         }
         catch { }
-        tryFill();
         timer = setInterval(tryFill, 250);
+        tryFill();
         return () => {
             cancelled = true;
             left = true;
@@ -148,17 +157,20 @@ export function useDailyTrainingSelection(userId) {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [userId, today]);
     const getTrainingPerType = useCallback((typeKey) => {
+        if (selectionOwnerRef.current !== ownerKey)
+            return undefined;
         const src = showYesterday ? yesterdayRef.current : todayRef.current;
         const fallback = showYesterday ? todayRef.current : yesterdayRef.current;
         const pick = src?.[typeKey]?.length
             ? src[typeKey]
             : (fallback?.[typeKey]?.length ? fallback[typeKey] : undefined);
         return pick;
-    }, [showYesterday, revision]);
+    }, [showYesterday, revision, ownerKey]);
     return {
-        loaded,
+        // effect가 실행되기 전 첫 커밋에도 이전 사용자의 완료 상태를 보이지 않는다.
+        loaded: statusOwnerRef.current === ownerKey && loaded,
         /** 뽑을 것이 실제로 있었나. loaded 만으로는 "포기했다" 와 가를 수 없다. */
-        hasData,
+        hasData: statusOwnerRef.current === ownerKey && hasData,
         showYesterday, setShowYesterday, getTrainingPerType,
     };
 }

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

@@ -60,8 +60,17 @@ export function useEditableList(emptyItem, initialList = []) {
             return;
         prevInitialRef.current = initialList;
         setList(initialList);
-        // 고른 항목도 새 목록의 같은 항목(id)으로 옮긴다 — 옛 참조로 남으면 지우기·수정 대상 찾기가 헛돈다
-        setSelected(prev => (prev == null ? prev : initialList.find(v => isSameEditableItem(v, prev)) ?? prev));
+        // 서버 id가 있는 항목은 새 목록에서 사라졌다면 상세도 닫는다. id 없는 로컬 항목은
+        // 아직 서버 목록에 반영되지 않았을 수 있으므로 선택을 유지한다.
+        setSelected(prev => {
+            if (prev == null)
+                return prev;
+            const current = initialList.find(v => isSameEditableItem(v, prev));
+            if (current != null)
+                return current;
+            const id = prev.id;
+            return id != null && id !== '' ? null : prev;
+        });
     }, [initialList, isEditing]);
     /* 편집 중이 아닐 때는 편집 폼을 고른 항목에 맞춘다 — 취소하거나(서버 거절로) 되돌려도 폼이 저장 안 된 값을 들고 있어,
        상세 화면에 거절된 값이 보이고 다시 '수정하기' 를 누르면 그 값에서 시작했다. */

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

@@ -1,5 +1,15 @@
 'use client';
 import { useEffect } from 'react';
+function isTabbable(el) {
+    if (el.closest('[aria-hidden="true"], [hidden], [inert]'))
+        return false;
+    for (let node = el; node; node = node.parentElement) {
+        const style = window.getComputedStyle(node);
+        if (style.display === 'none' || style.visibility === 'hidden' || style.visibility === 'collapse')
+            return false;
+    }
+    return true;
+}
 /**
  * 다이얼로그 안에서 Tab 이 빠져나가지 못하게 가둔다 — WAI-ARIA 다이얼로그 패턴.
  *
@@ -29,7 +39,7 @@ export function useFocusTrap(panelRef, enabled = true) {
                 /* `aria-hidden` 아래는 뺀다 — 낭독기에게 없는 것으로 해 놓고 Tab 으로는
                    들르게 하면 두 길이 어긋난다. TrainingPagePopup 의 사본만 이 거르개를
                    갖고 있었고, 그쪽을 이 훅으로 옮기면서 여기로 가져왔다. */
-                .filter((el) => !el.closest('[aria-hidden="true"]'));
+                .filter(isTabbable);
             /* 안에 갈 곳이 없으면 Tab 자체를 막는다 — 안 막으면 배경으로 나간다 */
             if (!focusables.length) {
                 e.preventDefault();

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

@@ -37,6 +37,7 @@ function sanitizeSvg(raw) {
 }
 /** @public */
 export default function useIcon(icon) {
+    const [sourceIcon, setSourceIcon] = useState(null);
     const [iconToUse, setIconToUse] = useState(null);
     const [mode, setMode] = useState(null);
     const [svgText, setSvgText] = useState(null);
@@ -45,6 +46,7 @@ export default function useIcon(icon) {
     /* eslint-disable react-hooks/set-state-in-effect */
     useEffect(() => {
         if (!icon || typeof icon !== 'string' || !icon.endsWith('.svg')) {
+            setSourceIcon(null);
             setIconToUse(null);
             setMode(null);
             setSvgText(null);
@@ -69,6 +71,7 @@ export default function useIcon(icon) {
         // 다른 파일로 바뀌면 앞 아이콘의 판정·SVG 를 걷는다 — 안 걷으면 새 파일을 받는 동안 앞 아이콘이 그대로 그려졌다
         setMode(null);
         setSvgText(null);
+        setSourceIcon(icon);
         setIconToUse(normalized);
     }, [icon]);
     /* eslint-enable react-hooks/set-state-in-effect */
@@ -147,5 +150,8 @@ export default function useIcon(icon) {
             setBlobUrl(null);
         };
     }, [mode, iconToUse]);
-    return { iconToUse, mode, svgText, blobUrl };
+    // prop 변경 직후 첫 커밋은 위 effect보다 먼저 일어난다. 그 프레임에는 옛 파일의 상태를 숨긴다.
+    return sourceIcon === icon
+        ? { iconToUse, mode, svgText, blobUrl }
+        : { iconToUse: null, mode: null, svgText: null, blobUrl: null };
 }

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

@@ -1,5 +1,6 @@
 'use client';
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useSyncExternalStore } from 'react';
+import DOMPurify from 'dompurify';
 /**
  * **SVG 의 글자를 얻는다 — 속에 넣어 칠하려는 쪽이 쓴다.**
  *
@@ -24,13 +25,19 @@ import { useEffect, useState } from 'react';
 const cache = new Map();
 /** 받는 중인 약속 — 같은 주소를 동시에 둘이 부르면 하나만 간다 */
 const inFlight = new Map();
+const subscribeBrowser = () => () => { };
+const browserSnapshot = () => true;
+const serverSnapshot = () => false;
 /** `data:image/svg+xml,…` 에서 글자를 꺼낸다. 그 꼴이 아니면 `null`. */
 export function svgTextFromDataUrl(src) {
     const m = /^data:image\/svg\+xml(;base64)?,([\s\S]*)$/.exec(src);
     if (!m)
         return null;
     try {
-        return m[1] ? atob(m[2]) : decodeURIComponent(m[2]);
+        if (!m[1])
+            return decodeURIComponent(m[2]);
+        const bytes = Uint8Array.from(atob(m[2]), ch => ch.charCodeAt(0));
+        return new TextDecoder('utf-8').decode(bytes);
     }
     catch {
         return null;
@@ -44,13 +51,31 @@ export function svgTextFromDataUrl(src) {
  * 이미 막아 두었다(`wordTablePrint`).
  */
 export function stripActiveSvg(svg) {
-    return svg
-        .replace(/<script[\s\S]*?<\/script\s*>/gi, '')
-        .replace(/<script[^>]*\/>/gi, '')
-        /* `on*` 꼬리표 — 따옴표가 있든 없든 */
-        .replace(/\son[a-z]+\s*=\s*("[^"]*"|'[^']*'|[^\s>]+)/gi, '')
-        /* `href="javascript:…"` 도 걷는다 */
-        .replace(/\s(xlink:)?href\s*=\s*("\s*javascript:[^"]*"|'\s*javascript:[^']*')/gi, '');
+    if (typeof window === 'undefined')
+        return '';
+    // 로고 안의 그라데이션 참조(#id)는 두고 외부 자원과 실행 가능한 주소는 걷는다.
+    // 문자열 치환은 따옴표 없는 href, 엔티티, foreignObject 같은 HTML 삽입을 놓친다.
+    const onAttribute = (_node, data) => {
+        const name = data.attrName.toLowerCase();
+        const value = data.attrValue.trim();
+        if ((name === 'href' || name === 'xlink:href') && !value.startsWith('#'))
+            data.keepAttr = false;
+        if (name === 'style' || (value.includes('\\') && value.includes('(')))
+            data.keepAttr = false;
+        const withoutLocalFragments = value.replace(/url\s*\(\s*(['"]?)#[^)\s'"]+\1\s*\)/gi, '');
+        if (/url\s*\(/i.test(withoutLocalFragments))
+            data.keepAttr = false;
+    };
+    DOMPurify.addHook('uponSanitizeAttribute', onAttribute);
+    try {
+        return DOMPurify.sanitize(svg, {
+            USE_PROFILES: { svg: true, svgFilters: true },
+            FORBID_TAGS: ['script', 'style', 'foreignObject'],
+        });
+    }
+    finally {
+        DOMPurify.removeHook('uponSanitizeAttribute', onAttribute);
+    }
 }
 /**
  * **되부르는 id 에 제 이름표를 붙인다** — 속에 둘 이상 넣었을 때 엉키지 않게.
@@ -68,8 +93,8 @@ export function stripActiveSvg(svg) {
  */
 export function namespaceSvgIds(svg, prefix) {
     const referenced = new Set();
-    for (const m of svg.matchAll(/url\(#([^)\s"']+)\)/g))
-        referenced.add(m[1]);
+    for (const m of svg.matchAll(/url\(\s*(['"]?)#([^)\s"']+)\1\s*\)/g))
+        referenced.add(m[2]);
     for (const m of svg.matchAll(/(?:xlink:)?href="#([^"]+)"/g))
         referenced.add(m[1]);
     /* 이 파일이 **실제로 가진** id 만 — 모르는 이름은 건드리지 않는다 */
@@ -83,7 +108,7 @@ export function namespaceSvgIds(svg, prefix) {
         const to = `${prefix}-${id}`;
         out = out
             .replace(new RegExp(`id="${q}"`, 'g'), `id="${to}"`)
-            .replace(new RegExp(`url\\(#${q}\\)`, 'g'), `url(#${to})`)
+            .replace(new RegExp(`url\\(\\s*(['"]?)#${q}\\1\\s*\\)`, 'g'), (_match, quote) => `url(${quote}#${to}${quote})`)
             .replace(new RegExp(`((?:xlink:)?href)="#${q}"`, 'g'), `$1="#${to}"`);
     }
     return out;
@@ -111,23 +136,27 @@ function load(src) {
  * @public
  */
 export function useInlineSvg(src, enabled = true) {
-    const immediate = enabled && src ? (svgTextFromDataUrl(src) ?? cache.get(src) ?? null) : null;
-    const [svg, setSvg] = useState(immediate);
+    // 서버는 DOMPurify를 실행할 DOM이 없다. 수화 중 첫 그림도 서버와 같은 <img>로 두고
+    // 브라우저가 준비된 뒤에만 인라인 SVG로 바꿔 마크업 불일치를 막는다.
+    const browserReady = useSyncExternalStore(subscribeBrowser, browserSnapshot, serverSnapshot);
+    const immediate = browserReady && enabled && src ? (svgTextFromDataUrl(src) ?? cache.get(src) ?? null) : null;
+    const [loaded, setLoaded] = useState({ src, enabled, svg: immediate });
     useEffect(() => {
         if (!enabled || !src) {
-            setSvg(null);
+            setLoaded({ src, enabled, svg: null });
             return;
         }
         const now = svgTextFromDataUrl(src) ?? cache.get(src) ?? null;
         if (now !== null) {
-            setSvg(now);
+            setLoaded({ src, enabled, svg: now });
             return;
         }
         let alive = true;
         void load(src).then((t) => { if (alive)
-            setSvg(t); });
+            setLoaded({ src, enabled, svg: t }); });
         /* 늦게 온 답이 **다음 주소의 자리**를 덮지 않게 — 같은 자리에서 `src` 가 바뀔 수 있다 */
         return () => { alive = false; };
     }, [src, enabled]);
-    return svg;
+    // 주소나 사용 여부가 바뀐 첫 렌더에는 이전 SVG를 내보내지 않는다.
+    return loaded.src === src && loaded.enabled === enabled ? loaded.svg : immediate;
 }

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

@@ -40,13 +40,17 @@ export function useListControls(opts = {}) {
     const [query, setQuery] = useState('');
     const [pageSize, setPageSize] = useState(defaultPageSize);
     const [page, setPage] = useState(1);
-    /* 못 읽히는 쪽크기('' · 'all' · '0')는 기본값으로 — 그 셈이 화면마다 한 벌씩 있었다.
-       기본값 자체가 못 읽히면 25 다. 목록이 통째로 사라지는 값(0·NaN)을 여기서 닫는다. */
-    const defaultSize = Number(defaultPageSize) || 25;
-    const perPage = Number(pageSize) || defaultSize;
+    /* 못 읽히거나 유효하지 않은 쪽크기('' · 'all' · '0' · 음수 · Infinity)는 기본값으로.
+       기본값 자체가 잘못됐으면 25다. */
+    const validSize = (value) => {
+        const n = Number(value);
+        return Number.isFinite(n) && n >= 1 ? Math.floor(n) : null;
+    };
+    const defaultSize = validSize(defaultPageSize) ?? 25;
+    const perPage = validSize(pageSize) ?? defaultSize;
     /* **검색어와 쪽크기를 여기서 넣는다** — 부르는 쪽이 적으면 빠뜨릴 수 있고, 빠뜨려도 안 빨개진다.
-       이어 붙이는 것은 `usePageResetOnChange` 가 글 하나를 받기 때문이고, 값이 글·수·참거짓뿐이라
-       `[object Object]` 로 뭉개질 일이 없다(타입이 막는다). */
-    usePageResetOnChange([query, pageSize, ...(resetOn ?? [])].map(String).join('|'), setPage);
+       배열 직렬화로 각 값의 경계를 보존한다. `|`로 잇기만 하면 값 자체에 `|`가 있을 때
+       서로 다른 필터 조합이 같은 열쇠가 되어 페이지가 돌아가지 않는다. */
+    usePageResetOnChange(JSON.stringify([query, pageSize, ...(resetOn ?? [])]), setPage);
     return { query, setQuery, pageSize, setPageSize, perPage, page, setPage };
 }

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

@@ -18,6 +18,7 @@ export function usePasswordChange(onChangePassword) {
     /* 처리 중에는 다시 받지 않는다 — 두 번 누르면 변경이 두 번 나가, 먼저 온 성공 뒤에 늦게 온 "현재 비밀번호 틀림" 이
        남아 바뀌었는데 오류 문구가 떴다(말귀 계정 화면 단추는 로딩 중에도 눌린다) */
     const busyRef = useRef(false);
+    const generationRef = useRef(0);
     useEffect(() => {
         return () => {
             if (clearTimerRef.current !== null)
@@ -25,12 +26,22 @@ export function usePasswordChange(onChangePassword) {
         };
     }, []);
     const reset = useCallback(() => {
+        // 닫힌 폼에서 시작한 요청의 늦은 결과는 새로 연 폼에 반영하지 않는다.
+        generationRef.current++;
+        if (clearTimerRef.current !== null) {
+            clearTimeout(clearTimerRef.current);
+            clearTimerRef.current = null;
+        }
         setPw({ current: '', next: '', confirm: '' });
         setPwMsg(null);
     }, []);
     const handleChangePw = useCallback(async () => {
         if (busyRef.current)
             return;
+        if (clearTimerRef.current !== null) {
+            clearTimeout(clearTimerRef.current);
+            clearTimerRef.current = null;
+        }
         if (!pw.current) {
             setPwMsg({ type: 'error', text: t('account.security.password.currentRequired', '현재 비밀번호를 입력하세요.') });
             return;
@@ -47,6 +58,7 @@ export function usePasswordChange(onChangePassword) {
         }
         setPwLoading(true);
         busyRef.current = true;
+        const generation = generationRef.current;
         // 콜백이 문구 대신 **거절**하면(망 끊김 등) 로딩이 true 로 남아 단추가 영영 잠겼고,
         // reset() 도 로딩은 안 건드려 풀 길이 없었다. 거절도 오류 문구로 보이고 로딩은 늘 내린다.
         let err;
@@ -60,6 +72,8 @@ export function usePasswordChange(onChangePassword) {
             busyRef.current = false;
             setPwLoading(false);
         }
+        if (generation !== generationRef.current)
+            return;
         if (err) {
             setPwMsg({ type: 'error', text: err });
             return;
@@ -68,7 +82,7 @@ export function usePasswordChange(onChangePassword) {
         setPw({ current: '', next: '', confirm: '' });
         if (clearTimerRef.current !== null)
             clearTimeout(clearTimerRef.current);
-        clearTimerRef.current = setTimeout(() => setPwMsg(null), 1500);
+        clearTimerRef.current = setTimeout(() => { clearTimerRef.current = null; setPwMsg(null); }, 1500);
     }, [pw, onChangePassword, t]);
     return { pw, setPw, pwMsg, setPwMsg, pwLoading, handleChangePw, reset };
 }

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

@@ -85,9 +85,11 @@ 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 layoutKey = speakers.map((sp) => sp.id).join('|');
+    /* 스피커의 위치와 표시 정보까지 비교한다. id 가 같아도 배치가 움직이면 큐에 든 옛
+       SpeakerPos 로 재생되며, 구분자로 이어 붙인 id 는 서로 다른 목록이 충돌할 수 있다. */
+    const layoutKey = JSON.stringify(speakers.map(sp => [
+        sp.id, sp.label, sp.angleDeg, sp.deg, sp.row, sp.shortcut,
+    ]));
     useEffect(() => {
         if (autoStart)
             start();

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

@@ -43,14 +43,19 @@ export function useTablePaging(rows, resetOn, opts) {
     const pageSizeOptions = useMemo(() => VAP_PAGE_SIZE_OPTIONS.map(o => ({ ...o, label: t('visits.showN', { n: o.value }) })), [t]);
     /* 개수를 바꾸면 첫 쪽으로 — 25개씩 보다가 100개씩으로 바꿨는데 3쪽에 남아 있으면
        대부분의 경우 빈 표가 된다 */
-    const setPageSize = useCallback((v) => { setPageSizeRaw(v); setPage(1); }, []);
+    const setPageSize = useCallback((v) => {
+        if (!VAP_PAGE_SIZE_OPTIONS.some(o => o.value === v))
+            return;
+        setPageSizeRaw(v);
+        setPage(1);
+    }, []);
     const total = Math.max(1, Math.ceil(rows.length / Number(pageSize)));
     /* 행이 줄어 범위를 넘으면 **상태도** 끝 쪽으로 맞춘다 — 보이는 쪽만 조이고 상태를 두면, 필터로 줄었다가 다시 늘 때 예전
        5쪽으로 튀었다. 렌더 중에 맞춘다(위 resetOn 과 같은 꼴). */
-    // 1 보다 작은 쪽(setPage(0)·-1)도 막는다 — 0 은 빈 쪽, -1 은 음수 slice 로 엉뚱한 줄이 나왔다
-    if (page > total || page < 1 || !Number.isFinite(page))
-        setPage(Math.min(Math.max(1, Number.isFinite(page) ? page : 1), total));
-    const clampedPage = Math.min(Math.max(1, Number.isFinite(page) ? page : 1), total);
+    // 0·음수·소수·비유한 값은 유효한 정수 쪽으로 맞춘다. 소수는 slice 경계까지 어긋난다.
+    const clampedPage = Math.min(Math.max(1, Number.isFinite(page) ? Math.floor(page) : 1), total);
+    if (page !== clampedPage)
+        setPage(clampedPage);
     const pageRows = useMemo(() => rows.slice((clampedPage - 1) * Number(pageSize), clampedPage * Number(pageSize)), [rows, clampedPage, pageSize]);
     return {
         pageRows,

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

@@ -78,8 +78,11 @@ export default function useTrainingSessionLog(trainingType) {
         } };
         if (isVisible())
             openSpan();
-        /* 아직 안 보낸 만큼을 한 줄로. 끝 시각은 처음 보인 때 + 모은 시간, 시작 시각은 앞 줄이
-           끝난 자리 — 줄끼리 겹치지 않으니 합산해도 이중으로 세지 않는다.
+        /* 아직 안 보낸 만큼을 한 줄로. 종료 시각은 실제로 떠난 때이고, 시작 시각은 그때에서
+           아직 안 보낸 가시 시간만큼 거슬러 올라간다. 최초 시각에 누계를 더하면 오래 숨긴 뒤
+           돌아온 구간까지 숨기기 전(자정을 넘겼다면 전날) 시각으로 기록된다.
+           한 줄로 합쳐 보내는 동안 숨김이 끼었다면 그 줄 안의 정확한 구간 경계는 표현할 수 없지만,
+           길이와 종료 시각은 맞고 앞서 보낸 줄과도 겹치지 않는다.
            전달은 등록된 로거(logTrainingTime)로 간다. 코어는 보낼 주소를 모르므로
            navigator.sendBeacon 을 여기서 직접 쓸 수 없다 — 앱이 등록하는 로거의 몫이다. */
         const send = () => {
@@ -95,12 +98,13 @@ export default function useTrainingSessionLog(trainingType) {
             // 훈련이라, 돌아와 더 한 시간은 짧아도 버리지 않는다.
             if (sentMs === 0 && accumulatedMs < 5000)
                 return;
-            const startMs = firstVisibleAt + sentMs;
+            const endedAt = Date.now();
+            const startMs = endedAt - pendingMs;
             sentMs = accumulatedMs;
             logTrainingTime({
                 trainingType,
                 startedAt: new Date(startMs).toISOString(),
-                endedAt: new Date(firstVisibleAt + accumulatedMs).toISOString(),
+                endedAt: new Date(endedAt).toISOString(),
             });
         };
         // 숨으면 보낸다(앱이 그대로 죽을 수 있다). 다시 보이면 이어서 모은다.

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

@@ -1,3 +1,4 @@
+import { type SetStateAction } from 'react';
 import type { VisitItem } from './useVisitHistory';
 export type VisitAllStatus = 'scheduled' | 'visited' | 'noShow';
 export type MergedVisit = {
@@ -19,18 +20,18 @@ export declare const VAP_PAGE_SIZE_OPTIONS: {
  */
 export declare function useVisitAllPanel(mergedVisits: MergedVisit[]): {
     vapSearch: string;
-    setVapSearch: import("react").Dispatch<import("react").SetStateAction<string>>;
+    setVapSearch: import("react").Dispatch<SetStateAction<string>>;
     vapPageSize: string;
-    setVapPageSize: import("react").Dispatch<import("react").SetStateAction<string>>;
+    setVapPageSize: (value: SetStateAction<string>) => void;
     /** 번역된 개수 보기 옵션 — `VAP_PAGE_SIZE_OPTIONS` 와 값은 같고 라벨만 지금 언어로 */
     vapPageSizeOptions: {
         label: string;
         value: string;
     }[];
     vapStatus: string;
-    setVapStatus: import("react").Dispatch<import("react").SetStateAction<string>>;
+    setVapStatus: import("react").Dispatch<SetStateAction<string>>;
     vapPage: number;
-    setVapPage: import("react").Dispatch<import("react").SetStateAction<number>>;
+    setVapPage: import("react").Dispatch<SetStateAction<number>>;
     vapFiltered: MergedVisit[];
     vapTotal: number;
     vapPageItems: MergedVisit[];

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

@@ -1,5 +1,5 @@
 'use client';
-import { useMemo, useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 /**
  * 개수 보기 옵션의 값 목록. 라벨은 한국어 고정이다 — 화면에는 훅이 돌려주는
@@ -19,9 +19,15 @@ export const VAP_PAGE_SIZE_OPTIONS = [
 export function useVisitAllPanel(mergedVisits) {
     const { t } = useTranslation();
     const [vapSearch, setVapSearch] = useState('');
-    const [vapPageSize, setVapPageSize] = useState('25');
+    const [vapPageSize, setVapPageSizeRaw] = useState('25');
     const [vapStatus, setVapStatus] = useState('all');
     const [vapPage, setVapPage] = useState(1);
+    const setVapPageSize = useCallback((value) => {
+        setVapPageSizeRaw(prev => {
+            const next = typeof value === 'function' ? value(prev) : value;
+            return VAP_PAGE_SIZE_OPTIONS.some(option => option.value === next) ? next : prev;
+        });
+    }, []);
     const vapFiltered = useMemo(() => mergedVisits.filter(({ item: v, status }) => {
         if (vapSearch && !v.memo.includes(vapSearch))
             return false;
@@ -38,7 +44,9 @@ export function useVisitAllPanel(mergedVisits) {
     // 상태는 손대지 않고 돌려주는 값만 조인다. 상태는 "어디로 가려 했나"(의도)이고
     // 돌려주는 값은 "지금 어디인가"(사실)다. 그래서 setVapPage 의 뜻이 안 바뀌어
     // 소비자를 깨뜨리지 않고, 줄었다 늘어나면 원래 보던 쪽으로 돌아온다.
-    const vapPageClamped = Math.min(vapPage, vapTotal);
+    const vapPageClamped = Number.isFinite(vapPage)
+        ? Math.min(Math.max(1, Math.floor(vapPage)), vapTotal)
+        : 1;
     const vapPageItems = useMemo(() => {
         return vapFiltered.slice((vapPageClamped - 1) * Number(vapPageSize), vapPageClamped * Number(vapPageSize));
     }, [vapFiltered, vapPageClamped, vapPageSize]);

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

@@ -13,16 +13,24 @@ import { useCallback, useEffect, useRef, useState } from 'react';
  */
 export function useWordImage(imageUrl) {
     const imgRef = useRef(null);
-    const [loading, setLoading] = useState(!!imageUrl);
-    const [failed, setFailed] = useState(false);
+    const currentUrlRef = useRef(imageUrl);
+    currentUrlRef.current = imageUrl;
+    const [state, setState] = useState({ url: imageUrl, loading: !!imageUrl, failed: false });
+    // 주소가 바뀐 첫 렌더에서 이전 이미지의 실패·로딩 상태를 재사용하지 않는다.
+    const current = state.url === imageUrl ? state : { loading: !!imageUrl, failed: false };
     /* eslint-disable react-hooks/set-state-in-effect */
     useEffect(() => {
-        setFailed(false);
         const img = imgRef.current;
-        setLoading(!!imageUrl && !(img?.complete && img.naturalWidth > 0));
+        setState({ url: imageUrl, failed: false, loading: !!imageUrl && !(img?.complete && img.naturalWidth > 0) });
     }, [imageUrl]);
     /* eslint-enable react-hooks/set-state-in-effect */
-    const onLoad = useCallback(() => setLoading(false), []);
-    const onError = useCallback(() => { setLoading(false); setFailed(true); }, []);
-    return { imgRef, loading, failed, hasImage: !!imageUrl && !failed, onLoad, onError };
+    const onLoad = useCallback(() => {
+        if (currentUrlRef.current === imageUrl)
+            setState({ url: imageUrl, loading: false, failed: false });
+    }, [imageUrl]);
+    const onError = useCallback(() => {
+        if (currentUrlRef.current === imageUrl)
+            setState({ url: imageUrl, loading: false, failed: true });
+    }, [imageUrl]);
+    return { imgRef, loading: current.loading, failed: current.failed, hasImage: !!imageUrl && !current.failed, onLoad, onError };
 }