@ihabdevteam/core 0.133.0 → 0.135.0

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

@@ -11,6 +11,15 @@ const RING_SIZE_PRESET = {
     large: { diameter: 160, strokeWidth: 22 },
 };
 /** 원시 링 렌더링 — 도넛 링 하나만 그린다(헤더/legend 없음) */
+/** 비율 → 퍼센트 정수. **다 채우기 전에는 100 을 내지 않는다** — 반올림하면 199/200 이 '100%' 인데 링 끝은 비고 범례는
+ *  '미완료 1건' 이었다(말귀 숙제 완료율). 같은 까닭으로 0 초과면 0 을 내지 않는다. */
+function 퍼센트(ratio) {
+    if (!Number.isFinite(ratio) || ratio <= 0)
+        return 0;
+    if (ratio >= 1)
+        return 100;
+    return Math.min(99, Math.max(1, Math.round(ratio * 100)));
+}
 function RingChartCanvas({ done, total, segments, color = 'var(--color-main)', size = 'medium', strokeWidth, label = '%', hideCenter = false, hideLabel = false }) {
     const dim = typeof size === 'number' ? size : RING_SIZE_PRESET[size].diameter;
     const stroke = strokeWidth ?? (typeof size === 'number' ? 12 : RING_SIZE_PRESET[size].strokeWidth);
@@ -23,7 +32,9 @@ function RingChartCanvas({ done, total, segments, color = 'var(--color-main)', s
             const acc = out.length > 0 ? out[out.length - 1].acc : 0;
             // 누적 비율이 1을 넘지 않도록 clamp — 호출자가 넘긴 ratio 합이 100%를 넘으면 이후
             // 구간이 원을 한 바퀴 넘어 겹쳐 그려지는 대신 조용히 잘리도록(오류 대신 방어적 저하)
-            const ratio = Math.max(0, Math.min(s.ratio, 1 - acc));
+            // NaN(잘못된 날짜로 남은 날 수 등)은 0 으로 — 그대로 두면 누적값이 NaN 으로 번져 뒤 구간이 전부 사라졌다
+            const r = Number.isFinite(s.ratio) ? s.ratio : 0;
+            const ratio = Math.max(0, Math.min(r, 1 - acc));
             out.push({ color: s.color, rotate: -90 + acc * 360, dash: circumference * ratio, acc: acc + ratio });
             return out;
         }, []);
@@ -32,7 +43,7 @@ function RingChartCanvas({ done, total, segments, color = 'var(--color-main)', s
     const pct = (total ?? 0) > 0 ? Math.min((done ?? 0) / total, 1) : 0;
     const filled = circumference * pct;
     const gap = circumference - filled;
-    return (_jsxs("div", { className: "ring-chart", style: { width: dim, height: dim }, children: [_jsxs("svg", { width: dim, height: dim, viewBox: `0 0 ${dim} ${dim}`, "aria-hidden": "true", children: [_jsx("circle", { cx: center, cy: center, r: radius, fill: "none", stroke: "var(--color-whiteLine)", strokeWidth: stroke }), pct > 0 && (_jsx("circle", { cx: center, cy: center, r: radius, fill: "none", stroke: color, strokeWidth: stroke, strokeDasharray: `${filled} ${gap}`, strokeLinecap: pct < 0.02 || pct > 0.98 ? 'butt' : 'round', transform: `rotate(-90 ${center} ${center})` }))] }), !hideCenter && (_jsxs("div", { className: `ring-chart__center${hideLabel ? '' : ` ${dim <= 96 ? 'ring-chart__center--small' : size === 'medium' ? 'ring-chart__center--medium' : 'ring-chart__center--large'}`}`, children: [_jsx("span", { className: `ring-chart__pct ${dim <= 96 ? 'h2' : 'h1'}`, children: Math.round(pct * 100) }), !hideLabel && (_jsx("span", { className: `ring-chart__label ${dim <= 96 ? 'caption-2' : 'caption-1'}${dim <= 96 || size === 'medium' ? ' ring-chart__label--tight' : ''}`, children: label }))] }))] }));
+    return (_jsxs("div", { className: "ring-chart", style: { width: dim, height: dim }, children: [_jsxs("svg", { width: dim, height: dim, viewBox: `0 0 ${dim} ${dim}`, "aria-hidden": "true", children: [_jsx("circle", { cx: center, cy: center, r: radius, fill: "none", stroke: "var(--color-whiteLine)", strokeWidth: stroke }), pct > 0 && (_jsx("circle", { cx: center, cy: center, r: radius, fill: "none", stroke: color, strokeWidth: stroke, strokeDasharray: `${filled} ${gap}`, strokeLinecap: pct < 0.02 || pct > 0.98 ? 'butt' : 'round', transform: `rotate(-90 ${center} ${center})` }))] }), !hideCenter && (_jsxs("div", { className: `ring-chart__center${hideLabel ? '' : ` ${dim <= 96 ? 'ring-chart__center--small' : size === 'medium' ? 'ring-chart__center--medium' : 'ring-chart__center--large'}`}`, children: [_jsx("span", { className: `ring-chart__pct ${dim <= 96 ? 'h2' : 'h1'}`, children: 퍼센트(pct) }), !hideLabel && (_jsx("span", { className: `ring-chart__label ${dim <= 96 ? 'caption-2' : 'caption-1'}${dim <= 96 || size === 'medium' ? ' ring-chart__label--tight' : ''}`, children: label }))] }))] }));
 }
 /**
  * 도넛 링 차트 — 전체 대비 완료 비율을 원형 호로 표현.
@@ -44,7 +55,7 @@ export default function RingChart({ titleKey, headRight, icon, showTotal, totalL
     const { t } = useTranslation();
     if (!titleKey)
         return _jsx(RingChartCanvas, { ...ringProps });
-    const pct = (ringProps.total ?? 0) > 0 ? Math.round(Math.min((ringProps.done ?? 0) / ringProps.total, 1) * 100) : 0;
+    const pct = (ringProps.total ?? 0) > 0 ? 퍼센트(Math.min((ringProps.done ?? 0) / ringProps.total, 1)) : 0;
     // size='small' — 대시보드 작은 그리드용 블럭. 컨트롤(headRight)만 생략하고 total/legend는 medium과 동일하게 유지
     const isSmall = ringProps.size === 'small';
     // size='large' — 카드가 가로 폭을 거의 100% 차지(1열)

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

@@ -51,7 +51,7 @@ function SideNavButton(props) {
         }
         onClick?.(key, e.currentTarget, fromPointer);
     }, [isDisabled, key, onClick]);
-    return (_jsxs("button", { type: "button", className: btnClass, onClick: handleClick, "aria-label": typeof text === 'string' ? nameWithCount(t, text, badgeCount) : undefined, style: style, "aria-disabled": isDisabled, children: [iconElement, _jsx("span", { className: `side-nav__label button-1 f`, style: labelStyle, children: text }), badgeCount > 0 && (_jsx(Badge, { type: "dot", position: "inline", number: Math.min(badgeCount, 99), size: 24, "aria-hidden": true })), state === 'loading' && (_jsx("span", { className: "side-nav__spinner", "aria-label": "loading" }))] }));
+    return (_jsxs("button", { type: "button", className: btnClass, onClick: handleClick, "aria-label": typeof text === 'string' ? nameWithCount(t, text, badgeCount) : undefined, style: style, "aria-disabled": isDisabled, children: [iconElement, _jsx("span", { className: `side-nav__label button-1 f`, style: labelStyle, children: text }), badgeCount > 0 && (_jsx(Badge, { type: "dot", position: "inline", number: Math.min(badgeCount, 99), size: 24, "aria-hidden": true })), state === 'loading' && (_jsx("span", { className: "side-nav__spinner", role: "img", "aria-label": t('loader.loading', '불러오는 중…') }))] }));
 }
 /** @public */
 export default function SideNav(props) {

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

@@ -6,6 +6,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
 import Check from 'lucide-react/dist/esm/icons/check.mjs';
 import Volume2 from 'lucide-react/dist/esm/icons/volume-2.mjs';
 import User from 'lucide-react/dist/esm/icons/user.mjs';
@@ -15,6 +16,7 @@ import './SoundCompass.css';
 const lerp = (a, b, t) => a + (b - a) * t;
 /** @public */
 export default function SoundCompass({ speakers, size = 300, viewT = 0, activeSpeakerId = null, playedIds, selectedId = null, answerId = null, showFeedback = false, pulseSelected = false, pulseSelectedDuration, pulseScale, clickable = false, onSelectSpeaker, buttonSize = 40, showIcon = true, onCenterClick, centerLabel, centerDisabled = false, centerAttention = false, shortcutAnchor = 'top-right', shortcutScale, scaleShortcut = false, }) {
+    const { t: 번역 } = useTranslation();
     const t = Math.max(0, Math.min(1, viewT));
     const CENTER = size / 2;
     // ── 탑뷰 좌표 ──────────────────────────────────────────────────────────
@@ -119,6 +121,13 @@ export default function SoundCompass({ speakers, size = 300, viewT = 0, activeSp
     }
     // ── 스피커 시각 상태를 props에서 파생 ──────────────────────────────────
     const played = useMemo(() => new Set(playedIds ?? []), [playedIds]);
+    const stateLabel = (state) => ({
+        idle: '',
+        active: 번역('soundCompass.state.active', '소리 나는 중'),
+        played: 번역('soundCompass.state.played', '들음'),
+        correct: 번역('soundCompass.state.correct', '정답'),
+        wrong: 번역('soundCompass.state.wrong', '오답'),
+    })[state];
     const getSpeakerState = (sp) => {
         if (activeSpeakerId === sp.id)
             return 'active';
@@ -209,6 +218,6 @@ export default function SoundCompass({ speakers, size = 300, viewT = 0, activeSp
                                     ...(pulseScale !== undefined
                                         ? { ['--sc-pulse-scale']: String(pulseScale) }
                                         : null),
-                                } })), _jsxs("button", { type: "button", tabIndex: clickable ? 0 : -1, "aria-disabled": clickable ? undefined : true, onClick: clickable ? () => onSelectSpeaker?.(sp.id) : undefined, className: `sound-compass__speaker-btn sound-compass__speaker-btn--${state}`, style: { width: BTN, height: BTN }, "aria-label": sp.label, children: [withIcon && getStateIcon(state, iconSize), withNumber && (_jsx("span", { className: "sound-compass__speaker-number", style: { fontSize: showIcon === true ? numberSize : numberOnlySize }, children: idx + 1 }))] }), sp.shortcut && (_jsx(ShortcutBadge, { keys: sp.shortcut, anchor: shortcutAnchor, className: "sound-compass__speaker-shortcut" }))] }, sp.id));
+                                } })), _jsxs("button", { type: "button", tabIndex: clickable ? 0 : -1, "aria-disabled": clickable ? undefined : true, onClick: clickable ? () => onSelectSpeaker?.(sp.id) : undefined, className: `sound-compass__speaker-btn sound-compass__speaker-btn--${state}`, style: { width: BTN, height: BTN }, "aria-label": stateLabel(state) ? `${sp.label}, ${stateLabel(state)}` : sp.label, "aria-pressed": selectedId != null ? sp.id === selectedId : undefined, children: [withIcon && getStateIcon(state, iconSize), withNumber && (_jsx("span", { className: "sound-compass__speaker-number", style: { fontSize: showIcon === true ? numberSize : numberOnlySize }, children: idx + 1 }))] }), sp.shortcut && (_jsx(ShortcutBadge, { keys: sp.shortcut, anchor: shortcutAnchor, className: "sound-compass__speaker-shortcut" }))] }, sp.id));
                 })] }) }));
 }

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

@@ -77,17 +77,27 @@ export default function Table({ fields = [], headerGroups, items = [], renderRow
     const defaultColsRef = useRef([]);
     // fit 모드에서는 이웃(next)에서 같은 만큼 덜어 오므로 그 컬럼의 시작 폭도 들고 있어야 한다
     const dragRef = useRef(null);
-    const [colWidths, setColWidths] = useState(() => {
-        if (!storeKey || typeof window === 'undefined')
+    /* 저장한 폭 읽기 — 숫자이기만 하면 받던 것을 **유한하고 최소 폭 이상인 수**만 받는다(0·음수·NaN 이 들어오면 격자 틀이
+       무효가 됐다). */
+    const 저장폭읽기 = (key) => {
+        if (!key || typeof window === 'undefined')
             return null;
         try {
-            const arr = JSON.parse(window.localStorage.getItem(storeKey) ?? 'null');
-            return Array.isArray(arr) && arr.every((n) => typeof n === 'number') ? arr : null;
+            const arr = JSON.parse(window.localStorage.getItem(key) ?? 'null');
+            return Array.isArray(arr) && arr.length > 0 && arr.every((n) => typeof n === 'number' && Number.isFinite(n) && n > 0) ? arr : null;
         }
         catch {
             return null;
         }
-    });
+    };
+    const [colWidths, setColWidths] = useState(() => 저장폭읽기(storeKey));
+    /* 마운트된 채 resizeStorageKey 가 바뀌면 **새 열쇠의 폭**을 읽는다 — 마운트 때 한 번만 읽어, 열 수가 같으면 앞 열쇠의 폭이
+       다른 열에 그대로 씌워졌다. 렌더 중에 맞춘다(바뀐 그 렌더에서 옛 폭이 한 번이라도 그려지지 않게). */
+    const [읽은열쇠, set읽은열쇠] = useState(storeKey);
+    if (읽은열쇠 !== storeKey) {
+        set읽은열쇠(storeKey);
+        setColWidths(저장폭읽기(storeKey));
+    }
     // 최신 colWidths를 참조로 유지 (드래그 종료 시 저장용)
     const colWidthsRef = useRef(colWidths);
     useEffect(() => { colWidthsRef.current = colWidths; }, [colWidths]);

package/dist/packages/core/src/components/Tooltip/MenuTooltip.js

@@ -87,6 +87,11 @@ export default function MenuTooltip({ columns = [], onClose, className = '', siz
     return (_jsxs("div", { className: `tooltip-menu tooltip-menu--${size} ${className}`, children: [(stack.length > 1 || current.title) && (_jsxs("div", { className: "tooltip-menu__header", children: [stack.length > 1 ? (_jsx(Button, { htmlType: "button", size: itemSize, type: "dot", icon: "chevron-left", ariaLabel: t('common.back', '뒤로'), onClick: goBack, variant: "transparent-gray", useBorder: false })) : null, _jsx("div", { className: "tooltip-menu__title button-1", children: current.title })] })), _jsx("div", { className: "tooltip-menu__columns", ref: itemsWrapRef, children: current.columns && current.columns.map((col, ci) => (_jsxs("div", { className: "tooltip-menu__column", children: [col.title ? _jsx("div", { className: "tooltip-menu__column-title body-3", children: col.title }) : null, _jsx("div", { className: "tooltip-menu__items", children: (col.items || []).map((item, idx) => (_jsx(Button, { htmlType: "button", className: "tooltip-menu__item", size: itemSize, type: item.label ? 'bar' : 'dot', icon: item.selected ? 'check' : (item.icon || 'none'), rightIcon: Array.isArray(item.children) && item.children.length
                                     ? 'chevron-right'
                                     : item.badgeCount
-                                        ? _jsx(Badge, { type: "dot", position: "inline", number: Math.min(item.badgeCount, 99), size: 24, "aria-label": `${item.badgeCount}` })
-                                        : undefined, label: item.label, ariaLabel: item.label, onClick: () => handleClick(item), selected: item.selected, disabled: item.disabled, showTooltipInfo: item.tooltip || false, useBorder: false, align: "left" }, idx))) })] }, ci))) })] }));
+                                        ? _jsx(Badge, { type: "dot", position: "inline", number: Math.min(item.badgeCount, 99), size: 24, "aria-hidden": true })
+                                        : undefined, label: item.label, 
+                                /* 개수는 이름에 붙인다 — ariaLabel 이 글자뿐이라 배지 수가 이름에서 빠져 "알림" 으로만 읽혔다
+                                   (SideNav·BottomNav 와 같은 nav.badgeLabel "알림, 5개"). */
+                                ariaLabel: item.label && item.badgeCount && item.badgeCount > 0
+                                    ? t('nav.badgeLabel', { label: item.label, count: item.badgeCount, defaultValue: '{{label}}, {{count}}개' })
+                                    : item.label, onClick: () => handleClick(item), selected: item.selected, disabled: item.disabled, showTooltipInfo: item.tooltip || false, useBorder: false, align: "left" }, idx))) })] }, ci))) })] }));
 }

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

@@ -47,7 +47,9 @@ export default function TrainingBlockButton(props) {
         if (btnHover && !open && useDescriptionTooltip)
             setBtnAnchorRect(btnRef.current?.getBoundingClientRect() ?? null);
     }, [btnHover, open, useDescriptionTooltip]);
-    const handleKeyDown = useCallback((e) => { if (e.key === 'Enter' || e.key === ' ') {
+    /* 블록 자신에서 난 키만 — 안의 '더보기'·'미리 듣기' 단추에서 누른 Enter 를 가로채 훈련 팝업을 열었다(메뉴를 키보드로 못 엶) */
+    const handleKeyDown = useCallback((e) => { if (e.target !== e.currentTarget)
+        return; if (e.key === 'Enter' || e.key === ' ') {
         e.preventDefault();
         handleActivate();
     } }, [handleActivate]);

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

@@ -203,6 +203,9 @@ function TrainingPagePopupInner(props) {
         setMainVolume,
     }), [noiseSettings, mergeAndSaveSettings, registerAnalyser, mainAnalyser, noiseAnalyser, playbackRate, setPlaybackRate, mainVolume, setMainVolume]);
     const panelRef = useRef(null);
+    /* '다시하기' 횟수 — 단계들의 key 에 넣어 **처음부터 다시 그린다.** 단계 컴포넌트는 내용(문장·보기)이 바뀔 때만 제 상태를
+       비워, 같은 문항을 다시 풀면 옛 선택 강조·옛 배치(순서화는 정답 배치일 수도)가 그대로 남았다. */
+    const [replayCount, setReplayCount] = useState(0);
     const [mode, setMode] = useState('center');
     const [closing, setClosing] = useState(false);
     // 닫힘 애니메이션(PAGE_POPUP_CLOSE_MS) 동안 다른 닫기 경로(ESC/닫기 버튼/완료)가 또 실행되면
@@ -728,16 +731,38 @@ function TrainingPagePopupInner(props) {
                 return null;
         }
     };
+    /* 다음 문제로 넘어가면 포커스를 새 문제의 첫 칸으로. '다음 문제' 는 누르는 즉시 비활성이 되어 포커스가 body 로 빠졌다 —
+       키보드 사용자는 매 문제 판 처음부터 Tab 을 다시 밟았다. 포커스가 판 안 다른 곳에 있으면 건드리지 않는다. */
+    const 앞쪽Ref = useRef(undefined);
+    useEffect(() => {
+        const 앞 = 앞쪽Ref.current;
+        앞쪽Ref.current = effectivePageIndex;
+        if (앞 === undefined || 앞 === effectivePageIndex)
+            return;
+        const panel = panelRef.current;
+        if (!panel)
+            return;
+        const active = document.activeElement;
+        const 잃음 = !active || active === document.body || !panel.contains(active) || active.disabled === true;
+        if (!잃음)
+            return;
+        const 첫칸 = panel.querySelector(`.training-steps ${FOCUSABLE_SELECTOR.split(', ').join(', .training-steps ')}`)
+            ?? Array.from(panel.querySelectorAll(FOCUSABLE_SELECTOR)).find((el) => !el.closest('[aria-hidden="true"]'));
+        try {
+            첫칸?.focus();
+        }
+        catch (e) { }
+    }, [effectivePageIndex]);
     const scenarioContent = hasScenario
         ? scenarioPages.length > 0
-            ? _jsx("div", { className: "training-steps", children: currentScenarioSteps.map((step, index) => renderScenarioStep(step, index)) })
+            ? _jsx("div", { className: "training-steps", children: currentScenarioSteps.map((step, index) => renderScenarioStep(step, index)) }, `replay-${replayCount}`)
             : (_jsx("div", { className: "page-popup__content page-popup__content--center", children: _jsx("div", { className: "pp-empty", children: scenario?.emptyMessage || t('training.noQuestions', '문제가 없습니다.') }) }))
         : null;
     const childrenContent = isChildrenMode
         ? (_jsxs(TrainingPagePopupContext.Provider, { value: childrenContextValue, children: [currentChildrenPage?.pageTop ? (_jsx("div", { className: "training-page-top", children: currentChildrenPage.pageTop })) : null, _jsx("div", { className: "training-steps", children: compoundChildrenSteps.map((child, index) => {
                         const el = child;
                         return cloneElement(el, { ...el.props, _stepIndex: index, _totalSteps: compoundChildrenSteps.length, _stepKey: `step-${index}`, _pageIndex: effectivePageIndex });
-                    }) }), currentChildrenPage?.pageBottom ? (_jsx("div", { className: "training-page-bottom", children: currentChildrenPage.pageBottom })) : null] }))
+                    }) }, `replay-${replayCount}`), currentChildrenPage?.pageBottom ? (_jsx("div", { className: "training-page-bottom", children: currentChildrenPage.pageBottom })) : null] }))
         : null;
     const handleResultDone = useCallback(() => {
         // 완료 정본 기록 (문장/단어/오늘의 듣기 공통) — 결과를 닫기 전에 캡처
@@ -796,6 +821,7 @@ function TrainingPagePopupInner(props) {
                 contextsLength: resultOverlay.results ? resultOverlay.results.length : (resultOverlay.answers ? resultOverlay.answers.length : 0),
                 onReplay: () => {
                     setResultOverlay(null);
+                    setReplayCount((n) => n + 1);
                     if (hasScenario) {
                         setFlowState(createScenarioFlowState());
                         if (typeof scenario?.onReplay === 'function') {

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

@@ -28,6 +28,8 @@ export default function TrainingStepOrderList({ index, stepIndex, isLast = false
             return "active";
         return "disabled";
     }, [stepIndex, index]);
+    /** 옮기기 단추·끌어놓기를 여는가 — 진행 중이거나 끝낸 단계(아래 move 머리말) */
+    const 조작가능 = currentState !== 'disabled';
     // context 변경 시 items/shuffled를 다시 초기화하는 의도된 동기화다
     /* eslint-disable react-hooks/set-state-in-effect */
     useEffect(() => {
@@ -75,11 +77,13 @@ export default function TrainingStepOrderList({ index, stepIndex, isLast = false
     /**
      * 카드 한 칸 옮기기.
      *
-     * **조작은 진행 중(active)일 때만 열려 있다.** 예전에는 끝낸 단계(done)에서도 단추와
-     * 끌어놓기가 살아 있었는데, 여기와 handleDrop 은 `currentState === 'active'` 일 때만
-     * onDone 을 부른다 — 그래서 화면 배치는 바뀌는데 **기록된 점수는 그대로**였다.
-     * 되돌아본 사람은 옮겨 놓은 배치를 보면서 옛 점수를 읽게 된다. 끝난 단계는 결과를
-     * 그대로 보여 주기만 한다.
+     * **조작은 진행 중(active)과 끝낸(done) 단계에서 열려 있다.** onDone 은 진행 중일 때만 부른다(단계를 넘기는 신호).
+     * 옮길 때마다 flipSetShuffled 가 onChange 로 새 배치·점수를 내보내고, OrderListStep 은 그것을 **이 단계 번호로**
+     * 기록하므로 끝낸 단계에서 옮겨도 점수가 따라간다.
+     *
+     * 한때(92b71ac) done 에서 조작을 닫았다 — "끝낸 단계에서 옮기면 점수가 안 나간다" 고 봤는데 위 onChange 기록을
+     * 놓친 판단이었고, 그 결과 **카드를 한 번 옮기는 순간**(첫 이동의 onDone 이 단계를 넘긴다) 단추·끌어놓기가 모두
+     * 사라져 문장 순서화를 끝까지 맞출 수 없었다(2026-09-14 훈련 검수 — 말귀 OrderTrainingPagePopup).
      */
     const move = (idx, dir) => {
         const arr = [...shuffled];
@@ -423,7 +427,7 @@ export default function TrainingStepOrderList({ index, stepIndex, isLast = false
                                         map.set(it.id, el);
                                     else
                                         map.delete(it.id);
-                                }, className: `order-list__draggable ${draggedIndex === idx ? "dragging" : ""}`, "data-disabled": currentState === 'disabled', "aria-disabled": currentState === 'disabled', tabIndex: currentState === 'disabled' ? -1 : 0, draggable: currentState === 'active', onDragStart: currentState === 'active' ? (e) => handleDragStart(idx, e) : undefined, onDragEnter: currentState === 'active' ? (e) => handleDragOverWithClass(idx, e) : undefined, onDragOver: currentState === 'active' ? (e) => handleDragOverWithClass(idx, e) : undefined, onDragLeave: currentState === 'active' ? () => {
+                                }, className: `order-list__draggable ${draggedIndex === idx ? "dragging" : ""}`, "data-disabled": currentState === 'disabled', "aria-disabled": currentState === 'disabled', tabIndex: currentState === 'disabled' ? -1 : 0, draggable: 조작가능, onDragStart: 조작가능 ? (e) => handleDragStart(idx, e) : undefined, onDragEnter: 조작가능 ? (e) => handleDragOverWithClass(idx, e) : undefined, onDragOver: 조작가능 ? (e) => handleDragOverWithClass(idx, e) : undefined, onDragLeave: 조작가능 ? () => {
                                     try {
                                         if (dragLeaveTimeoutRef.current !== null)
                                             clearTimeout(dragLeaveTimeoutRef.current);
@@ -440,6 +444,6 @@ export default function TrainingStepOrderList({ index, stepIndex, isLast = false
                                         }, 80);
                                     }
                                     catch (err) { }
-                                } : undefined, onDrop: currentState === 'active' ? (e) => handleDrop(idx, e) : undefined, onDragEnd: currentState === 'active' ? handleDragEnd : undefined, children: [_jsx("span", { className: "order-list__item-text body-2", children: it.text }), currentState === 'active' ? (_jsxs("span", { className: "order-list__item-buttons", children: [_jsx(Button, { htmlType: "button", size: 32, type: "dot", onClick: () => move(idx, -1), ariaLabel: t("training.up"), icon: 'chevron-up', variant: 'transparent-gray', width: 48, useFaded: "true", disabled: idx === 0, useBorder: false, useDisabledInvisible: true }), _jsx(Button, { htmlType: "button", size: 32, type: "dot", onClick: () => move(idx, 1), ariaLabel: t("training.down"), icon: 'chevron-down', variant: 'transparent-gray', width: 48, useFaded: "true", disabled: idx === shuffled.length - 1, useBorder: false, useDisabledInvisible: true })] })) : null] })] }) }, it.id));
+                                } : undefined, onDrop: 조작가능 ? (e) => handleDrop(idx, e) : undefined, onDragEnd: 조작가능 ? handleDragEnd : undefined, children: [_jsx("span", { className: "order-list__item-text body-2", children: it.text }), 조작가능 ? (_jsxs("span", { className: "order-list__item-buttons", children: [_jsx(Button, { htmlType: "button", size: 32, type: "dot", onClick: () => move(idx, -1), ariaLabel: t("training.up"), icon: 'chevron-up', variant: 'transparent-gray', width: 48, useFaded: "true", disabled: idx === 0, useBorder: false, useDisabledInvisible: true }), _jsx(Button, { htmlType: "button", size: 32, type: "dot", onClick: () => move(idx, 1), ariaLabel: t("training.down"), icon: 'chevron-down', variant: 'transparent-gray', width: 48, useFaded: "true", disabled: idx === shuffled.length - 1, useBorder: false, useDisabledInvisible: true })] })) : null] })] }) }, it.id));
             }) }) }));
 }

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

@@ -70,5 +70,5 @@ export default function TrainingStepTextBox({ context, state = "disabled", theme
         fontSize: `${fontSize}px`,
         lineHeight: `${lineHeight}px`,
     }), [fontSize, lineHeight]);
-    return (_jsxs("div", { className: `training-text-box ${stateClass} ${displayStatus !== 'disabled' && theme === 'dark' ? 'is-dark' : ''}`, children: [displayStatus === "disabled" && (_jsx("div", { className: "training-text-box__preview", children: _jsx(Button, { htmlType: "button", size: 48, type: "bar", onClick: handleActivate, icon: 'eye', ariaLabel: t('training.sentencePreview', '문장 미리보기'), label: t('training.sentencePreview', '문장 미리보기'), useBorder: false }) })), _jsx("div", { className: "training-text-box__area", "aria-hidden": displayStatus === "disabled", children: _jsx("span", { className: "training-text-box__inner h3", style: textStyle, children: content }) }), displayStatus !== "disabled" && (_jsxs("div", { className: "training-text-box__buttons", "aria-hidden": displayStatus === "disabled", children: [_jsx(Button, { size: 32, type: "dot", onClick: decrease, onDisabledClick: () => showNotice(t('training.fontSizeMin', '글씨 크기가 최소입니다.')), ariaLabel: t('training.fontSizeDecrease', '글자 크기 감소'), icon: 'minus', variant: theme === 'dark' ? 'transparent-white' : 'transparent-gray', disabled: !canDecrease, useBorder: false, showTooltipInfo: true, ...(!isMobile && { width: '60px' }) }), _jsx(Button, { size: 32, type: "dot", onClick: increase, onDisabledClick: () => showNotice(t('training.fontSizeMax', '글씨 크기가 최대입니다.')), ariaLabel: t('training.fontSizeIncrease', '글자 크기 증가'), icon: 'plus', variant: theme === 'dark' ? 'transparent-white' : 'transparent-gray', disabled: !canIncrease, useBorder: false, showTooltipInfo: true, ...(!isMobile && { width: '60px' }) }), _jsx(Button, { htmlType: "button", size: 32, showTooltipInfo: true, type: "dot", useBorder: false, width: 48, icon: theme === 'dark' ? 'moon' : 'sun-medium', onClick: toggleTheme, ariaLabel: t('training.toggleBackground', '배경 전환'), variant: theme === 'dark' ? 'transparent-white' : 'transparent-gray' })] })), _jsx(Toast, { message: noticeMessage, position: "top", onClose: handleNoticeClose })] }));
+    return (_jsxs("div", { className: `training-text-box ${stateClass} ${displayStatus !== 'disabled' && theme === 'dark' ? 'is-dark' : ''}`, children: [displayStatus === "disabled" && (_jsx("div", { className: "training-text-box__preview", children: _jsx(Button, { htmlType: "button", size: 48, type: "bar", onClick: handleActivate, icon: 'eye', ariaLabel: t('training.sentencePreview', '문장 미리보기'), label: t('training.sentencePreview', '문장 미리보기'), useBorder: false }) })), _jsx("div", { className: "training-text-box__area", "aria-hidden": displayStatus === "disabled", children: _jsx("span", { className: "training-text-box__inner h3", style: textStyle, children: content }) }), displayStatus !== "disabled" && (_jsxs("div", { className: "training-text-box__buttons", "aria-hidden": displayStatus === "disabled", children: [_jsx(Button, { htmlType: "button", size: 32, type: "dot", onClick: decrease, onDisabledClick: () => showNotice(t('training.fontSizeMin', '글씨 크기가 최소입니다.')), ariaLabel: t('training.fontSizeDecrease', '글자 크기 감소'), icon: 'minus', variant: theme === 'dark' ? 'transparent-white' : 'transparent-gray', disabled: !canDecrease, useBorder: false, showTooltipInfo: true, ...(!isMobile && { width: '60px' }) }), _jsx(Button, { htmlType: "button", size: 32, type: "dot", onClick: increase, onDisabledClick: () => showNotice(t('training.fontSizeMax', '글씨 크기가 최대입니다.')), ariaLabel: t('training.fontSizeIncrease', '글자 크기 증가'), icon: 'plus', variant: theme === 'dark' ? 'transparent-white' : 'transparent-gray', disabled: !canIncrease, useBorder: false, showTooltipInfo: true, ...(!isMobile && { width: '60px' }) }), _jsx(Button, { htmlType: "button", size: 32, showTooltipInfo: true, type: "dot", useBorder: false, width: 48, icon: theme === 'dark' ? 'moon' : 'sun-medium', onClick: toggleTheme, ariaLabel: t('training.toggleBackground', '배경 전환'), variant: theme === 'dark' ? 'transparent-white' : 'transparent-gray' })] })), _jsx(Toast, { message: noticeMessage, position: "top", onClose: handleNoticeClose })] }));
 }

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

@@ -223,6 +223,10 @@ const TrainingWordCard = forwardRef(function TrainingWordCard({ item, disabled =
         // 읽히는데 정작 고를 수가 없어, 훈련 문항을 키보드만으로 풀 수 없었다.
         tabIndex: selectable && !disabled ? 0 : undefined, "aria-disabled": selectable && disabled ? true : undefined, onKeyDown: selectable && !disabled
             ? (e) => {
+                /* 카드 자신에서 난 키만 — 안의 '소리 듣기' 에서 누른 Enter 가 올라오면 전에는 소리 대신 **그 카드를 답으로
+                   골라** 되돌릴 수 없었다. */
+                if (e.target !== e.currentTarget)
+                    return;
                 // Space 는 기본 동작이 스크롤이라 막고, 둘 다 클릭과 같은 선택으로 잇는다.
                 if (e.key === 'Enter' || e.key === ' ' || e.key === 'Spacebar') {
                     e.preventDefault();

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

@@ -24,6 +24,10 @@ export function useNoiseFade({ noisePlayer, audioRef, playbackStateRef, }) {
     // 실제 로드된(재생되는) 소음 파일 URL — waveform이 화면=청취 일치하도록 이 src를 그린다.
     const [activeNoiseUrl, setActiveNoiseUrl] = useState(null);
     const noiseTypeLoadedRef = useRef(null);
+    /* 바꿔 끼울 소음 파일 — 종류를 바꾸면 여기에 두고, 페이드아웃이 끝나거나 **다음 페이드인이 시작될 때** 끼운다.
+       전에는 페이드아웃의 완료 콜백에만 걸어 두어, 150ms 안에 다른 페이드(다음 트랙의 fadeInNoise·문장 종료의
+       fadeOutNoise·탭 숨김)가 끼면 콜백이 사라졌다 — 종류 표시·파형은 새 것인데 **소리는 이전 파일**이었다. */
+    const pendingNoiseUrlRef = useRef(null);
     // volume = 소음 <audio> 볼륨(noiseElementVolume — 전체 소리 × 소음 비율 ÷ 파일 gain, 상한 1)
     const noiseSettingsRef = useRef(null);
     const noiseFadeRafRef = useRef(null);
@@ -43,7 +47,19 @@ export function useNoiseFade({ noisePlayer, audioRef, playbackStateRef, }) {
     }, []);
     const fadeInNoise = useCallback((targetVolume, durationMs = 250) => {
         const noiseEl = noiseAudioRef.current;
-        if (!noiseEl || !noiseEl.src)
+        if (!noiseEl)
+            return;
+        const pending = pendingNoiseUrlRef.current;
+        if (pending) {
+            pendingNoiseUrlRef.current = null;
+            try {
+                noiseEl.pause();
+            }
+            catch (e) { }
+            noiseEl.src = pending;
+            noiseEl.load();
+        }
+        if (!noiseEl.src)
             return;
         noiseFadeTokenRef.current += 1;
         cancelNoiseFade();
@@ -235,7 +251,12 @@ export function useNoiseFade({ noisePlayer, audioRef, playbackStateRef, }) {
             if (url) {
                 noiseTypeLoadedRef.current = ns.type;
                 setActiveNoiseUrl(url); // waveform이 실제 재생 파일을 그리도록
+                pendingNoiseUrlRef.current = url;
                 fadeOutNoise(150, () => {
+                    // 그 사이 다음 페이드인이 이미 끼워 넣었으면(pending 이 비었으면) 다시 끼우지 않는다
+                    if (pendingNoiseUrlRef.current !== url)
+                        return;
+                    pendingNoiseUrlRef.current = null;
                     noiseEl.src = url;
                     noiseEl.load();
                     const mainAudio = audioRef.current;

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

@@ -13,9 +13,14 @@ export function useTTSPlayback({ ttsText, playbackRate, mainVolume, fillRef, wav
     const ttsStartRef = useRef(null);
     const ttsEstimatedDurationRef = useRef(0);
     const ttsRafRef = useRef(null);
+    /* 지금 말하는 발화의 번호. 정지(cancel)·다시 시작·언마운트에서 올린다 — Chrome·Safari 는 cancel() 한 발화에도
+       end 이벤트를 내서, **정지를 누르면 끝까지 들은 것으로** handleEnd → onDone(true) 가 불렸고(문항 완료로 셈),
+       언마운트 뒤에 온 end 가 떠난 화면에 완료를 알렸다. 번호가 다른 end 는 넘긴다. */
+    const ttsTokenRef = useRef(0);
     useEffect(() => {
         // cleanup TTS resources on unmount
         return () => {
+            ttsTokenRef.current++;
             try {
                 if (ttsRafRef.current) {
                     cancelAnimationFrame(ttsRafRef.current);
@@ -52,6 +57,7 @@ export function useTTSPlayback({ ttsText, playbackRate, mainVolume, fillRef, wav
             return;
         }
         const synth = window.speechSynthesis;
+        const myToken = ++ttsTokenRef.current;
         try {
             try {
                 synth.cancel();
@@ -99,6 +105,8 @@ export function useTTSPlayback({ ttsText, playbackRate, mainVolume, fillRef, wav
                 catch (e) { }
             };
             utt.onend = () => {
+                if (myToken !== ttsTokenRef.current)
+                    return;
                 try {
                     if (ttsRafRef.current) {
                         cancelAnimationFrame(ttsRafRef.current);
@@ -149,6 +157,7 @@ export function useTTSPlayback({ ttsText, playbackRate, mainVolume, fillRef, wav
         }
     }, [ttsText, playbackRate, mainVolume, fadeInNoise, fillRef, waveProgressRef, setProgress, setPlaybackState, setStateLocal, noiseSettingsRef, onDoneRef, handleEndRef]);
     const stopTTS = useCallback(() => {
+        ttsTokenRef.current++;
         try {
             if (window.speechSynthesis) {
                 try {

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

@@ -105,9 +105,10 @@ export default function WordSearchResultBlock({ titleIcon, resultCount, resultUn
         }
         return [...byLabel.entries()].map(([label, its]) => ({ label, items: its }));
     }, [groups, orderedGroupItems, pageClamped, pageSize]);
-    // 정렬/페이지크기 변경·결과 개수 변동 시 1페이지로.
+    // 정렬/페이지크기 변경·결과 개수 변동·**검색어 변경** 시 1페이지로. 검색어를 안 보면 결과 수가 같은 다른 검색에서
+    // 보던 쪽 번호(3쪽)가 남아 새 결과의 3쪽이 떴다.
     /* eslint-disable react-hooks/set-state-in-effect */
-    useEffect(() => { setPage(1); }, [sortKey, pageSizeStr, totalCount]);
+    useEffect(() => { setPage(1); }, [sortKey, pageSizeStr, totalCount, searchQuery]);
     /* eslint-enable react-hooks/set-state-in-effect */
     // 결과가 있으면(flat/그룹 모두) 툴바(정렬·페이지크기·페이지네이션) 노출.
     // (그룹 뷰도 flat과 동일하게 페이지네이션 — 카드 4 결정 1안. 그룹은 페이지 단위로 재그룹핑되어 표시.)

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

@@ -233,7 +233,8 @@ export default function WordTableBlock({ title, titleIcon, disc, items, onSaveCo
     const saveAsTrimmed = saveAsName.trim();
     const saveAsCollides = saveAsTrimmed !== '' && namesLower.includes(saveAsTrimmed.toLowerCase());
     const openSaveAsPopup = () => {
-        setSaveAsName(trimmedName ? `${trimmedName} (복사)` : '');
+        // 복사본 이름도 사전을 탄다 — 박혀 있어 영어 화면에 'My table (복사)' 가 채워졌다
+        setSaveAsName(trimmedName ? t('wordTable.save.copyName', { name: trimmedName, defaultValue: '{{name}} (복사)' }) : '');
         setShowSaveAsPopup(true);
     };
     const handleSaveAsConfirm = () => {

package/dist/packages/core/src/components/barChartData.d.ts

@@ -53,4 +53,12 @@ export declare const MONTH_OPTIONS: {
     year: number;
     month: number;
 }[];
+/** 지금 시각 기준 월 옵션 — 모듈 상수(MONTH_OPTIONS)는 불러온 순간의 달에 굳어, 탭을 열어 둔 채 달이 넘어가면 이번 달이
+ *  옵션에서 빠졌다. 컨트롤 훅은 자료가 바뀔 때마다 이것으로 다시 만든다. */
+export declare function monthOptionsNow(): {
+    value: string;
+    label: string;
+    year: number;
+    month: number;
+}[];
 export declare const KO_ORD: string[];

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

@@ -48,6 +48,24 @@ export function buildMonthChartData(points) {
             byMonth.set(key, []);
         byMonth.get(key).push(p);
     }
+    /* **앞 달 칸도 만든다.** 첫 월요일 이전 날(9/1~9/6)은 앞 달의 마지막 주에 속하는데, 앞 달에 자료가 없으면 그 달 칸이
+       안 생겨 그 날들이 **어느 막대에도 안 들어갔다**(신규 회원·한 달 쉰 회원의 달 초 훈련이 사라짐). 오늘이 든 주도 앞 달
+       마지막 주면 주 보기 기본 선택이 미래 주로 갔다. 그 날에 자료가 있거나 오늘이 그 날이면 앞 달을 빈 칸으로라도 둔다. */
+    for (const [key, pts] of [...byMonth.entries()]) {
+        const m = key.match(/^(\d+)년 (\d+)월$/);
+        if (!m)
+            continue;
+        const year = Number(m[1]);
+        const month0 = Number(m[2]) - 1;
+        const 첫월 = firstMondayOfMonth(year, month0);
+        const 오늘이앞 = key === curKey && now.getDate() < 첫월;
+        if (!오늘이앞 && !pts.some(p => p.date.getDate() < 첫월))
+            continue;
+        const prev = new Date(year, month0, 0);
+        const prevKey = 달키(prev.getFullYear(), prev.getMonth());
+        if (!byMonth.has(prevKey))
+            byMonth.set(prevKey, []);
+    }
     const 칸들 = new Map();
     for (const [key, pts] of byMonth) {
         const m = key.match(/^(\d+)년 (\d+)월$/);
@@ -138,5 +156,8 @@ function genMonthOptions() {
     return opts.reverse();
 }
 export const MONTH_OPTIONS = genMonthOptions();
+/** 지금 시각 기준 월 옵션 — 모듈 상수(MONTH_OPTIONS)는 불러온 순간의 달에 굳어, 탭을 열어 둔 채 달이 넘어가면 이번 달이
+ *  옵션에서 빠졌다. 컨트롤 훅은 자료가 바뀔 때마다 이것으로 다시 만든다. */
+export function monthOptionsNow() { return genMonthOptions(); }
 // 한글 서수(주차) — '첫째주', '둘째주' …
 export const KO_ORD = ['첫째', '둘째', '셋째', '넷째', '다섯째', '여섯째', '일곱째'];

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

@@ -1,7 +1,7 @@
 'use client';
 import { useState, useEffect, useMemo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import { firstMondayOfMonth, todayWeekValue, MONTH_OPTIONS, KO_ORD } from './barChartData';
+import { firstMondayOfMonth, todayWeekValue, monthOptionsNow, KO_ORD } from './barChartData';
 /**
  * BarChart 기간 상태/옵션/네비게이션을 캡슐화한 훅.
  * 여러 BarChart가 하나의 컨트롤을 공유하려면 이 훅을 상위에서 호출해 control을 내려준다.
@@ -10,7 +10,8 @@ import { firstMondayOfMonth, todayWeekValue, MONTH_OPTIONS, KO_ORD } from './bar
 export function useBarChartControl(data) {
     const { t, i18n } = useTranslation();
     const [period, setPeriod] = useState('week');
-    const DATA_MONTH_OPTIONS = useMemo(() => MONTH_OPTIONS.filter(o => o.value in data), [data]);
+    // 달 옵션·오늘은 자료가 바뀔 때 다시 센다 — 모듈 로드 때 한 번 세면 자정을 넘긴 탭에서 이번 달·오늘 주가 옛날에 굳었다
+    const DATA_MONTH_OPTIONS = useMemo(() => monthOptionsNow().filter(o => o.value in data), [data]);
     const WEEK_OPTIONS = useMemo(() => {
         const opts = [];
         for (const o of DATA_MONTH_OPTIONS) {
@@ -34,7 +35,8 @@ export function useBarChartControl(data) {
     })), [t, DATA_MONTH_OPTIONS]);
     const weekOptions = useMemo(() => WEEK_OPTIONS.map(o => ({ value: o.value, label: weekOptionLabel(o) })), [WEEK_OPTIONS, weekOptionLabel]);
     // 진입 시 기본 선택을 오늘 기준으로 — 오늘이 속한 월/주(데이터에 있으면), 없으면 최신
-    const today = useMemo(() => todayWeekValue(), []);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const today = useMemo(() => todayWeekValue(), [data]);
     const defaultMonth = useMemo(() => DATA_MONTH_OPTIONS.find(o => o.value === today.monthKey)?.value ?? DATA_MONTH_OPTIONS[0]?.value ?? '', [DATA_MONTH_OPTIONS, today]);
     const defaultWeek = useMemo(() => WEEK_OPTIONS.find(o => o.value === today.value)?.value ?? WEEK_OPTIONS[0]?.value ?? '', [WEEK_OPTIONS, today]);
     const [monthRange, setMonthRange] = useState('');

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

@@ -1,6 +1,7 @@
 'use client';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { ensureTrainingDataLoaded } from '../utils/getTrainingData';
+import { getTodayKst } from '../utils/date';
 import { hasItems, resolveSelection, } from '../utils/dailySelectionUtils';
 // ─── 훅 ──────────────────────────────────────────────────────────────────────
 /**
@@ -29,6 +30,19 @@ export function useDailyTrainingSelection(userId) {
     // 가를 수가 없어** 설명 없는 빈 화면을 그리게 된다(실제로 그런 화면이 있다).
     // loaded 의 뜻을 바꾸면 지금 쓰는 곳이 깨지므로, 가를 수 있는 값을 따로 낸다.
     const [hasData, setHasData] = useState(false);
+    /* 오늘(KST) — 자정을 넘기면 바뀌어 아래 선택을 **새 날짜 시드로** 다시 계산하게 한다. 전에는 userId 만 봐서 화면을 열어 둔 채
+       자정을 넘기면 어제 시드의 세트가 '오늘' 로 보이는데 완료 기록에는 새 날짜가 찍혔다. */
+    const [오늘, set오늘] = useState(() => getTodayKst());
+    useEffect(() => {
+        const 다음자정까지 = () => {
+            const 지금 = Date.now();
+            const kst = new Date(지금 + 9 * 3600_000);
+            const 자정 = Date.UTC(kst.getUTCFullYear(), kst.getUTCMonth(), kst.getUTCDate() + 1) - 9 * 3600_000;
+            return Math.max(1000, 자정 - 지금 + 1000);
+        };
+        let t = setTimeout(function 넘김() { set오늘(getTodayKst()); t = setTimeout(넘김, 다음자정까지()); }, 다음자정까지());
+        return () => clearTimeout(t);
+    }, []);
     useEffect(() => {
         let cancelled = false;
         let timer;
@@ -90,7 +104,9 @@ export function useDailyTrainingSelection(userId) {
         tryFill();
         timer = setInterval(tryFill, 250);
         return () => { cancelled = true; stop(); };
-    }, [userId]);
+        // 오늘 은 날짜가 바뀌었다는 신호 — resolveSelection 이 안에서 오늘 날짜를 읽는다
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [userId, 오늘]);
     const getTrainingPerType = useCallback((typeKey) => {
         const src = showYesterday ? yesterdayRef.current : todayRef.current;
         const fallback = showYesterday ? todayRef.current : yesterdayRef.current;

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

@@ -3,6 +3,12 @@
  *
  * @public
  */
+/**
+ * 같은 항목인가 — 같은 참조이거나, **둘 다 비지 않은 같은 id 를 가지면** 같다(빈 id 는 새로 만든 로컬 항목이라 견주지 않는다).
+ * 서버에서 목록을 다시 받으면 항목이 모두 새 객체가 되는데, 고른 항목·지울 항목을 참조로만 견주면 옛 참조가 아무것도
+ * 못 찾았다(수정 저장 → 재조회 → 같은 상세에서 '방문' 을 누르면 예정이 안 지워져 방문예정·방문완료 양쪽에 떴다).
+ */
+export declare function isSameEditableItem<T>(a: T, b: T): boolean;
 export declare function useEditableList<T>(emptyItem: T, initialList?: T[]): {
     list: T[];
     setList: import("react").Dispatch<import("react").SetStateAction<T[]>>;

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

@@ -5,6 +5,18 @@ import { useCallback, useEffect, useRef, useState } from 'react';
  *
  * @public
  */
+/**
+ * 같은 항목인가 — 같은 참조이거나, **둘 다 비지 않은 같은 id 를 가지면** 같다(빈 id 는 새로 만든 로컬 항목이라 견주지 않는다).
+ * 서버에서 목록을 다시 받으면 항목이 모두 새 객체가 되는데, 고른 항목·지울 항목을 참조로만 견주면 옛 참조가 아무것도
+ * 못 찾았다(수정 저장 → 재조회 → 같은 상세에서 '방문' 을 누르면 예정이 안 지워져 방문예정·방문완료 양쪽에 떴다).
+ */
+export function isSameEditableItem(a, b) {
+    if (a === b)
+        return true;
+    const ia = a?.id;
+    const ib = b?.id;
+    return ia != null && ia !== '' && ia === ib;
+}
 export function useEditableList(emptyItem, initialList = []) {
     const [list, setList] = useState(initialList);
     const [selected, setSelected] = useState(null);
@@ -42,7 +54,14 @@ export function useEditableList(emptyItem, initialList = []) {
             return;
         prevInitialRef.current = initialList;
         setList(initialList);
+        // 고른 항목도 새 목록의 같은 항목(id)으로 옮긴다 — 옛 참조로 남으면 지우기·수정 대상 찾기가 헛돈다
+        setSelected(prev => (prev == null ? prev : initialList.find(v => isSameEditableItem(v, prev)) ?? prev));
     }, [initialList]);
+    /* 편집 중이 아닐 때는 편집 폼을 고른 항목에 맞춘다 — 취소하거나(서버 거절로) 되돌려도 폼이 저장 안 된 값을 들고 있어,
+       상세 화면에 거절된 값이 보이고 다시 '수정하기' 를 누르면 그 값에서 시작했다. */
+    // eslint-disable-next-line react-hooks/set-state-in-effect
+    useEffect(() => { if (!isEditing && selected != null)
+        setEditForm({ ...selected }); }, [isEditing, selected]);
     const openDetail = useCallback((item) => {
         setSelected(item);
         setIsEditing(false);
@@ -56,7 +75,7 @@ export function useEditableList(emptyItem, initialList = []) {
         setIsEditing(false);
     }, []);
     const remove = useCallback((item) => {
-        setList(prev => prev.filter(v => v !== item));
+        setList(prev => prev.filter(v => !isSameEditableItem(v, item)));
         setSelected(null);
     }, []);
     return {

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

@@ -43,6 +43,10 @@ export function useTablePaging(rows, resetOn, opts) {
        대부분의 경우 빈 표가 된다 */
     const setPageSize = useCallback((v) => { setPageSizeRaw(v); setPage(1); }, []);
     const total = Math.max(1, Math.ceil(rows.length / Number(pageSize)));
+    /* 행이 줄어 범위를 넘으면 **상태도** 끝 쪽으로 맞춘다 — 보이는 쪽만 조이고 상태를 두면, 필터로 줄었다가 다시 늘 때 예전
+       5쪽으로 튀었다. 렌더 중에 맞춘다(위 resetOn 과 같은 꼴). */
+    if (page > total)
+        setPage(total);
     const 이쪽 = Math.min(page, total);
     const pageRows = useMemo(() => rows.slice((이쪽 - 1) * Number(pageSize), 이쪽 * Number(pageSize)), [rows, 이쪽, pageSize]);
     return {