@ihabdevteam/core 0.139.0 → 0.141.0

package/dist/ihabdevteam-core.d.ts

@@ -1376,7 +1376,7 @@ export declare function copyText(text: string): Promise<boolean>;
  *
  * 값은 손으로 적고 `test/coreVersion.test.ts` 가 package.json 과 어긋나면 운다.
  */
-export declare const CORE_VERSION = "0.139.0";
+export declare const CORE_VERSION = "0.141.0";
 
 /** @public */
 declare const coreDefault: Record<string, unknown>;

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

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import './BarChart.css';
-import { useState, useMemo, useCallback } from 'react';
+import { useState, useMemo, useCallback, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import Dropdown from './Dropdown';
 import SegmentedControl from './SegmentedControl';
@@ -40,6 +40,26 @@ function BarChartCanvas({ data, colorA, colorB, labelA, labelB, barWidth = 10, h
     }, [padded]);
     const [tooltip, setTooltip] = useState(null);
     const handleBarLeave = useCallback(() => setTooltip(null), []);
+    /* 떠 있는 동안 **스크롤하거나 막대 밖을 누르면** 닫는다 — 터치에서는 톡이 호환 mouseenter 로 띄우고 mouseleave 는 다른 곳을
+       눌러야 와서, 스크롤해도 제자리에 떠 있었고 누를 수 없는 곳을 톡해도 안 닫혔다(말귀 훈련 현황·매니저 화면, 태블릿). */
+    const 떠있음 = tooltip != null;
+    useEffect(() => {
+        if (!떠있음)
+            return;
+        const 닫기 = () => setTooltip(null);
+        const 바깥누름 = (e) => {
+            const t = e.target;
+            if (t && typeof t.closest === 'function' && t.closest('.manager-bar-chart-col'))
+                return;
+            setTooltip(null);
+        };
+        window.addEventListener('scroll', 닫기, true);
+        document.addEventListener('pointerdown', 바깥누름, true);
+        return () => {
+            window.removeEventListener('scroll', 닫기, true);
+            document.removeEventListener('pointerdown', 바깥누름, true);
+        };
+    }, [떠있음]);
     return (_jsxs("div", { className: "manager-bar-chart-wrap", children: [_jsx("div", { className: "manager-bar-chart-inner", children: _jsx("div", { className: "manager-bar-chart-scroll", children: _jsxs("div", { className: "manager-bar-chart-area", children: [_jsxs("div", { className: "manager-bar-chart-plot", style: { height: h }, children: [ticks.slice(0, -1).map((t, i) => (
                                     /* 눈금선은 **적힌 값의 높이**에 둔다 — 가운데 값을 반올림(최대 3 → '2')하면서 자리는 절반(1.5)에 두어 선과 숫자가 어긋났다 */
                                     _jsx("div", { className: "manager-bar-chart-gridline", style: { top: (1 - t / padded) * h }, children: _jsx("span", { className: "manager-bar-chart-gridline__label caption-1", children: t }) }, i))), data.map((d, i) => {

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

@@ -97,8 +97,10 @@ export default function BottomNav({ items = [], activeKey, onChange, appMode, on
         }], [hiddenItems, moreItems, activeKey, onChange, handleCloseMore]);
     // "…" 단추 배지 — 메뉴 안에서만 보이는 개수(넘친 항목 + 유틸)를 닫힌 채로도 알린다.
     const moreBadge = [...hiddenItems, ...moreItems].reduce((sum, it) => sum + badgeOf(it.badgeCount), 0);
-    return (_jsxs("nav", { className: "bottom-nav", "aria-label": t('nav.bottomNav', '하단 네비게이션'), children: [onAppModeChange && (_jsxs(_Fragment, { children: [_jsx("div", { className: "bottom-nav__left", children: _jsx(Button, { htmlType: "button", size: 52, type: "dot", icon: modeIcon, ariaLabel: modeLabel, className: "bottom-nav-item", onClick: handleModeChange }) }), _jsx("div", { className: "bottom-nav__divider", "aria-hidden": "true" })] })), _jsx("div", { className: "bottom-nav__items", ref: itemsRef, children: visibleItems.map((it) => {
+    return (_jsxs("nav", { className: "bottom-nav", "aria-label": t('nav.bottomNav', '하단 네비게이션'), children: [onAppModeChange && (_jsxs(_Fragment, { children: [_jsx("div", { className: "bottom-nav__left", children: _jsx(Button, { htmlType: "button", size: 52, type: "dot", icon: modeIcon, ariaLabel: modeLabel, className: "bottom-nav-item", onClick: handleModeChange }) }), _jsx("div", { className: "bottom-nav__divider", "aria-hidden": "true" })] })), _jsx("div", { className: "bottom-nav__items", ref: itemsRef, children: visibleItems.map((it, i) => {
                     const count = badgeOf(it.badgeCount);
-                    return (_jsxs("span", { className: "bottom-nav__slot", children: [_jsx(Button, { htmlType: "button", size: 52, type: "dot", icon: it.icon, ariaLabel: nameWithCount(it.label, count), selected: it.key === activeKey, disabled: it.state === 'disabled', className: "bottom-nav-item", onClick: () => it.key && onChange?.(it.key) }), count > 0 && (_jsx("span", { "aria-hidden": "true", children: _jsx(Badge, { type: "dot", position: "top-right", number: Math.min(count, 99), size: 24 }) }))] }, it.key));
+                    return (
+                    // key 는 선택 prop 이다 — 없으면 자리 번호로(형제 key 가 모두 undefined 가 되던 것)
+                    _jsxs("span", { className: "bottom-nav__slot", children: [_jsx(Button, { htmlType: "button", size: 52, type: "dot", icon: it.icon, ariaLabel: nameWithCount(it.label, count), selected: it.key === activeKey, disabled: it.state === 'disabled', className: "bottom-nav-item", onClick: () => it.key && onChange?.(it.key) }), count > 0 && (_jsx("span", { "aria-hidden": "true", children: _jsx(Badge, { type: "dot", position: "top-right", number: Math.min(count, 99), size: 24 }) }))] }, it.key ?? `__slot-${i}`));
                 }) }), showMore && (_jsxs(_Fragment, { children: [_jsx("div", { className: "bottom-nav__divider", "aria-hidden": "true" }), _jsx("div", { className: "bottom-nav__right", children: _jsxs("div", { ref: moreRef, className: "bottom-nav__slot", children: [_jsx(Button, { htmlType: "button", size: 52, type: "dot", icon: activeMore?.icon ?? 'ellipsis', ariaLabel: nameWithCount(activeMore?.label ?? t('nav.more', '더보기'), moreBadge), selected: !!activeMore, className: "bottom-nav-item", onClick: handleToggleMore, "aria-expanded": moreOpen, "aria-controls": moreOpen ? moreMenuId : undefined }), moreBadge > 0 && (_jsx("span", { "aria-hidden": "true", children: _jsx(Badge, { type: "dot", position: "top-right", number: Math.min(moreBadge, 99), size: 24 }) })), moreOpen && createPortal(_jsx("div", { id: moreMenuId, role: "group", "aria-label": t('nav.moreMenu', '더보기 메뉴'), className: "tooltip-content", style: menuStyle, ref: menuRef, children: _jsx(MenuTooltip, { columns: moreColumns, onClose: handleCloseMore }) }), document.body)] }) })] }))] }));
 }

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

@@ -15,19 +15,39 @@ export default function BulkBar({ count, actions, onClear, clearLabel: clearLabe
        자식들이 실제로 같은 줄에 있는지(offsetTop)를 본다. */
     const contentRef = useRef(null);
     const [stacked, setStacked] = useState(false);
+    /* 세로로 쌓으면 단추 칸이 좁아져 내용 칸이 넓어지고, 넓어진 칸에서 한 줄에 들어가 다시 가로로 돌리면 칸이 좁아져 또 넘친다 —
+       문턱이 하나라 **매 프레임 오갔다**(말귀 단어 고름 막대, 칩 7~12개). 되돌릴 때는 "가로일 때의 칸 폭" 에 한 줄로 들어가는지로
+       본다(여유). 가로일 때 잰 칸 폭을 기억해 둔다. */
+    const stackedRef = useRef(false);
+    const 가로칸폭Ref = useRef(null);
     useEffect(() => {
         const el = contentRef.current;
         if (!el)
             return;
+        const 두기 = (v) => { stackedRef.current = v; setStacked(v); };
         const check = () => {
             const row = el.firstElementChild ?? el;
             const kids = Array.from(row.children);
             if (kids.length < 2) {
-                setStacked(false);
+                두기(false);
                 return;
             }
             const top = kids[0].offsetTop;
-            setStacked(kids.some(k => k.offsetTop !== top));
+            const 넘침 = kids.some(k => k.offsetTop !== top);
+            if (!stackedRef.current) {
+                가로칸폭Ref.current = el.clientWidth;
+                if (넘침)
+                    두기(true);
+                return;
+            }
+            if (넘침)
+                return;
+            // 쌓인 채 한 줄에 들어간다 — 가로로 돌렸을 때의 칸에도 들어갈 때만 되돌린다
+            const first = kids[0], last = kids[kids.length - 1];
+            const 한줄폭 = last.offsetLeft + last.offsetWidth - first.offsetLeft;
+            const 가로폭 = 가로칸폭Ref.current;
+            if (가로폭 == null || 한줄폭 <= 가로폭)
+                두기(false);
         };
         check();
         // ResizeObserver 가 없는 환경(구형 브라우저·SSR·테스트 러너)에서는 생성자 호출이
@@ -36,7 +56,10 @@ export default function BulkBar({ count, actions, onClear, clearLabel: clearLabe
             return;
         const obs = new ResizeObserver(check);
         obs.observe(el);
-        return () => obs.disconnect();
+        // 창 폭이 바뀌면 기억한 가로 칸 폭은 옛 것이다 — 버리고 다시 잰다
+        const 창바뀜 = () => { 가로칸폭Ref.current = null; check(); };
+        window.addEventListener('resize', 창바뀜);
+        return () => { obs.disconnect(); window.removeEventListener('resize', 창바뀜); };
     }, [content, count]);
     return (_jsxs("div", { className: `bulk-bar ${show ? 'bulk-bar--visible' : ''}`, 
         /* 숨은 막대는 CSS 로 투명(opacity 0)할 뿐 DOM 에 그대로 있다 — 예전에는 그 안의

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

@@ -142,7 +142,7 @@ export default function DatePicker({ value, onChange, size = 48, min, max, disab
     useEffect(() => {
         활성일설정((d) => Math.min(d, daysInMonth(viewY, viewM)));
     }, [viewY, viewM]);
-    /* 옮길 곳을 날짜로 셈한다 — 달·해 넘김을 Date 에 맡긴다(윤달·말일이 공짜다).
+    /* 옮길 곳을 날짜로 셈한다 — 날 넘김은 Date 에 맡기고, 달 넘김은 아래에서 말일로 조인다.
        min/max 밖으로 나가면 그 끝으로 잡는다. */
     const 옮기기 = useCallback((다음) => {
         let iso = toISO(다음.getFullYear(), 다음.getMonth(), 다음.getDate());
@@ -159,7 +159,12 @@ export default function DatePicker({ value, onChange, size = 48, min, max, disab
     const 격자키 = useCallback((e) => {
         const 기준 = new Date(viewY, viewM, 활성일);
         const 하루 = (n) => { 기준.setDate(기준.getDate() + n); 옮기기(기준); };
-        const 달 = (n) => { 기준.setMonth(기준.getMonth() + n); 옮기기(기준); };
+        // 달 넘김은 **목표 달의 말일로 조인다** — setMonth 는 말일에서 넘쳐 1/31 → 3/3, 3/31 에서 앞 달로 못 가고, 2028-02-29 → 2029-03-01 이 됐다
+        const 달 = (n) => {
+            const 총 = 기준.getFullYear() * 12 + 기준.getMonth() + n;
+            const y = Math.floor(총 / 12), m = 총 - y * 12;
+            옮기기(new Date(y, m, Math.min(기준.getDate(), daysInMonth(y, m))));
+        };
         switch (e.key) {
             case 'ArrowLeft':
                 하루(-1);
@@ -220,7 +225,7 @@ export default function DatePicker({ value, onChange, size = 48, min, max, disab
     const iconSize = size === 64 ? 20 : size === 40 ? 16 : 18;
     const ymOptions = buildYMOptions(viewY, (year, month) => t('calendar.yearMonth', { year, month, defaultValue: '{{year}}년 {{month}}월' }), min, max);
     const ymValue = `${viewY}-${String(viewM + 1).padStart(2, '0')}`;
-    const dropdown = open ? createPortal(_jsxs("div", { ref: menuRef, className: "date-picker__dropdown", style: dropdownStyle, role: "dialog", "aria-label": t('datePicker.chooseDate', '날짜 선택'), tabIndex: -1, children: [_jsxs("div", { className: "date-picker__nav", children: [_jsx("button", { type: "button", className: "date-picker__nav-btn", onClick: prevMonth, "aria-label": t('calendar.prevMonth', '이전 달'), children: _jsx(ChevronLeft, { size: 16, strokeWidth: 2 }) }), _jsx(Dropdown, { className: "date-picker__nav-dropdown", ariaLabel: t('datePicker.selectYearMonth', '연월 선택'), options: ymOptions, value: ymValue, onChange: (v) => {
+    const dropdown = open ? createPortal(_jsxs("div", { ref: menuRef, className: "date-picker__dropdown", style: dropdownStyle, "data-tooltip-ignore": true, role: "dialog", "aria-label": t('datePicker.chooseDate', '날짜 선택'), tabIndex: -1, children: [_jsxs("div", { className: "date-picker__nav", children: [_jsx("button", { type: "button", className: "date-picker__nav-btn", onClick: prevMonth, "aria-label": t('calendar.prevMonth', '이전 달'), children: _jsx(ChevronLeft, { size: 16, strokeWidth: 2 }) }), _jsx(Dropdown, { className: "date-picker__nav-dropdown", ariaLabel: t('datePicker.selectYearMonth', '연월 선택'), options: ymOptions, value: ymValue, onChange: (v) => {
                             const [y, m] = v.split('-');
                             setViewYM(+y, +m - 1);
                         }, block: true, size: 40 }), _jsx("button", { type: "button", className: "date-picker__nav-btn", onClick: nextMonth, "aria-label": t('calendar.nextMonth', '다음 달'), children: _jsx(ChevronRight, { size: 16, strokeWidth: 2 }) })] }), _jsxs("div", { className: "date-picker__grid", ref: 격자Ref, onKeyDown: 격자키, children: [DOW.map(d => (_jsx("div", { className: "date-picker__dow caption-1", children: d }, d))), cells.map((d, i) => {

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

@@ -105,7 +105,7 @@ export default function Dropdown({ options, value, onChange, placeholder, disabl
             select(options[activeIdx]);
         }
     }, [disabled, open, options, activeIdx, select, setOpen]);
-    const menu = open ? (_jsx("div", { ref: menuRef, id: listId, className: "dropdown__menu", role: "listbox", style: menuStyle, onMouseLeave: handleMenuLeave, 
+    const menu = open ? (_jsx("div", { ref: menuRef, id: listId, className: "dropdown__menu", "data-tooltip-ignore": true, role: "listbox", style: menuStyle, onMouseLeave: handleMenuLeave, 
         /* 메뉴 빈 곳·스크롤 막대를 눌러도 트리거에서 포커스가 안 떠나게 — 아래 트리거 onBlur 가 메뉴를 닫지 않도록 */
         onMouseDown: e => e.preventDefault(), children: options.map((opt, i) => (_jsxs("button", { id: `${listId}-option-${i}`, type: "button", role: "option", "aria-selected": opt.value === value, className: cx('dropdown__option body-2', opt.value === value ? 'dropdown__option--active' : '', i === activeIdx ? 'dropdown__option--active' : '', opt.disabled ? 'dropdown__option--disabled' : ''), 
             // 선택은 click 에서 한다. onMouseDown 만 두면 마우스로는 눌리지만 스크린리더가

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

@@ -4,6 +4,7 @@ import { useRef, useState, useCallback, useLayoutEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import i18n from '../../i18n';
 import { toWonSymbol } from '../../utils/format';
+import { getTodayKst } from '../../utils/date';
 import { derivePassCard, deriveDurationDays } from './passCardProduct';
 import './PassCard.css';
 import Tooltip from '../Tooltip/Tooltip';
@@ -131,14 +132,17 @@ export default function PassCard({ product, showPrice = false, plan, type, endDa
             // new Date(endDate)는 UTC 자정으로 파싱된다 — "지금"과 초 단위로 그냥 빼면
             // 시간대 차이(KST는 UTC+9)만큼 없는 시:분이 생겨난 것처럼 보인다. 실제로
             // 갖고 있는 정밀도(하루 단위)만큼만 계산해 자정 기준 날짜 차이로 스냅한다.
+            //
+            // 날짜 차이는 **KST 달력날** 로 센다 — 기기 시간대 자정끼리 빼면 한국 밖 기기(또는 KST 00:00~08:59 의 UTC 기기)에서
+            // 하루 틀렸고, 같은 이용권을 KST 로 세는 매니저 화면과 남은 날이 달랐다.
             const end = new Date(endDate).getTime();
             if (Number.isNaN(end))
                 return null;
-            const today = new Date();
-            today.setHours(0, 0, 0, 0);
-            const endDay = new Date(end);
-            endDay.setHours(0, 0, 0, 0);
-            const days = Math.round((endDay.getTime() - today.getTime()) / 86_400_000);
+            const 끝 = /^(\d{4})-(\d{2})-(\d{2})/.exec(String(endDate));
+            const 오늘 = /^(\d{4})-(\d{2})-(\d{2})/.exec(getTodayKst());
+            const days = 끝 && 오늘
+                ? Math.round((Date.UTC(+끝[1], +끝[2] - 1, +끝[3]) - Date.UTC(+오늘[1], +오늘[2] - 1, +오늘[3])) / 86_400_000)
+                : Math.round((end - Date.now()) / 86_400_000);
             remaining = Math.max(0, days) * 86400;
         }
         else if (state === 'expired') {

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

@@ -129,6 +129,7 @@ export default function Table({ fields = [], headerGroups, items = [], renderRow
         // addEventListener에 전달한 것과 동일한 함수 identity로 제거해야 하므로 자기 참조가 필요하다
         // eslint-disable-next-line react-hooks/immutability
         window.removeEventListener('pointerup', onResizeEnd);
+        window.removeEventListener('pointercancel', onResizeEnd);
         document.body.style.cursor = '';
         document.body.style.userSelect = '';
         // 조절 결과를 localStorage에 저장
@@ -159,6 +160,8 @@ export default function Table({ fields = [], headerGroups, items = [], renderRow
         setColWidths(measured);
         window.addEventListener('pointermove', onResizeMove);
         window.addEventListener('pointerup', onResizeEnd);
+        // 터치 조절이 시스템 제스처 등으로 취소되면(pointercancel) 끝낸다 — 안 들으면 리스너가 남아 다음 스크롤 손짓이 폭을 바꿨다
+        window.addEventListener('pointercancel', onResizeEnd);
         document.body.style.cursor = 'col-resize';
         document.body.style.userSelect = 'none';
     }, [onResizeMove, onResizeEnd, resizeMode, fields]);

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

@@ -1,5 +1,6 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef } from 'react';
 import { createPortal } from 'react-dom';
 import { useToastLifecycle } from './useToastLifecycle';
 import './Toast.css';
@@ -8,6 +9,9 @@ export default function Toast({ message = '', position = 'top', type = 'normal',
 onClose = () => { }, duration = 2000, // 0 = persistent until message cleared
  }) {
     const { mounted, showing, popupRef, pause, resume } = useToastLifecycle({ message, position, duration, onClose });
+    /* 톡(터치)은 멈추지 않는다 — 톡하면 호환 mouseenter 로 멈추고 mouseleave 는 다른 곳을 톡하기 전까지 안 와 알림이 사라지지 않았다.
+       마우스 머무름·키보드 포커스는 그대로 멈춘다. 마지막 포인터 종류를 pointerenter 로 기억해 가른다. */
+    const 마지막포인터 = useRef(null);
     if (!mounted)
         return null;
     const normalizedType = type === 'notice' || type === 'warning' ? type : 'normal';
@@ -17,7 +21,8 @@ onClose = () => { }, duration = 2000, // 0 = persistent until message cleared
        `duration={0}` 으로 아예 안 사라지게 하는 길은 전부터 있었지만 그건 부르는
        쪽이 미리 정하는 것이고, 읽는 사람이 **그 자리에서** 멈출 수는 없었다.
        다시 움직일 때는 **남은 시간부터** 돈다 — 처음부터가 아니다. */
-    _jsx("div", { ref: popupRef, className: `toast toast--${position} ${showing ? 'is-visible' : ''}`, role: "status", "aria-live": "polite", onMouseEnter: pause, onMouseLeave: resume, onFocusCapture: pause, onBlurCapture: resume, children: _jsx("div", { className: `toast__inner toast__inner--${normalizedType} body-2`, children: message }) }));
+    _jsx("div", { ref: popupRef, className: `toast toast--${position} ${showing ? 'is-visible' : ''}`, role: "status", "aria-live": "polite", onPointerEnter: (e) => { 마지막포인터.current = e.pointerType; }, onMouseEnter: () => { if (마지막포인터.current !== 'touch')
+            pause(); }, onMouseLeave: resume, onFocusCapture: pause, onBlurCapture: resume, children: _jsx("div", { className: `toast__inner toast__inner--${normalizedType} body-2`, children: message }) }));
     if (typeof document !== 'undefined') {
         return createPortal(el, document.body);
     }

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

@@ -139,13 +139,27 @@ export default function Tooltip(props) {
         if (isMobile && isMobilePopup)
             return;
         const onWindowChange = () => computePosition(true);
+        /* 고정 사각형(anchorRect)으로 띄운 툴팁은 스크롤해도 앵커를 따라갈 수 없다 — 같은 자리를 다시 계산해 **허공에** 남았다
+           (목록을 굴리면 카드 메뉴가 카드에서 떨어져 뜬 채). 닫을 곳(onClose)이 있으면 닫는다. 툴팁 안 스크롤은 제외. */
+        const onScroll = (e) => {
+            if (!anchorEl && onClose) {
+                const t = e.target;
+                if (t && ref.current && ref.current.contains(t))
+                    return;
+                startCloseRef.current(true);
+                return;
+            }
+            onWindowChange();
+        };
         window.addEventListener('resize', onWindowChange);
-        document.addEventListener('scroll', onWindowChange, { passive: true, capture: true });
+        document.addEventListener('scroll', onScroll, { passive: true, capture: true });
         return () => {
             window.removeEventListener('resize', onWindowChange);
-            document.removeEventListener('scroll', onWindowChange, { capture: true });
+            document.removeEventListener('scroll', onScroll, { capture: true });
         };
-    }, [anchorRect, offset, children, edgeMargin, isInline, isMobile, isMobilePopup, computePosition]);
+        // 닫기는 아래 startCloseRef(최신 startClose)로 부른다
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [anchorRect, anchorEl, onClose, offset, children, edgeMargin, isInline, isMobile, isMobilePopup, computePosition]);
     // detect mobile (small screens) and update behavior
     useEffect(() => {
         // window 는 있는데 matchMedia 가 없는 환경이 있다(테스트 러너·일부 임베디드 웹뷰).

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

@@ -28,7 +28,8 @@ export default function TrainingStepConfirmWithText({ index, stepIndex, isLast =
     }
     // 데모 선택이 바뀌면 따른다(useState 초기값만 쓰여 undefined → true 로 바꿔도 강조가 안 켜졌다)
     const [prevDemo, setPrevDemo] = useState(demoSelected);
-    if (prevDemo !== demoSelected) {
+    // Object.is — NaN 이 오면 `!==` 가 늘 참이라 렌더 중 갱신이 끝없이 돌았다
+    if (!Object.is(prevDemo, demoSelected)) {
         setPrevDemo(demoSelected);
         setSelectedAnswer(demoSelected ?? null);
     }

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

@@ -30,7 +30,7 @@ const TrainingWordCard = forwardRef(function TrainingWordCard({ item, disabled =
     // 플립 트리거(showBack)는 현재 값으로 두되, 앞면에 그릴 내용은 '마지막으로 채워졌던' 값을 유지한다.
     const [front, setFront] = useState({ label, subLabel, colloquialLabel, homonum: item.homonum });
     // 낱말이 있으면 넷을 **통째로** 견준다 — 낱말만 보면 같은 낱말에 발음이 새로 오거나 동음이의어 번호가 바뀌어도 앞 값이 남았다
-    if (label && (front.label !== label || front.subLabel !== subLabel || front.colloquialLabel !== colloquialLabel || front.homonum !== item.homonum)) {
+    if (label && (front.label !== label || front.subLabel !== subLabel || front.colloquialLabel !== colloquialLabel || !Object.is(front.homonum, item.homonum))) {
         setFront({ label, subLabel, colloquialLabel, homonum: item.homonum });
     }
     // ── 재생 상태 ──

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

@@ -93,7 +93,8 @@ export function useTTSPlayback({ ttsText, playbackRate, mainVolume, fillRef, wav
                     const elapsed = performance.now() - start;
                     const est = ttsEstimatedDurationRef.current || 1200;
                     const p = Math.min(1, elapsed / est);
-                    setProgress(p);
+                    // 매 프레임 상태로 올리지 않는다 — 진행 표시는 아래 DOM 에 바로 쓰고(오디오 경로 useProgressTicker 와 같게), 상태는 시작(0)·끝(1)만.
+                    // 전에는 재생 중 플레이어·파형 트리가 초당 60번 다시 그려졌다.
                     try {
                         if (fillRef.current)
                             fillRef.current.style.left = `${p * 100}%`;

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

@@ -73,7 +73,9 @@ export function captureHtml(els, paperW, paperH, autoPrint = false, fileName = '
     }).join('\n');
     // styles.css의 다크 테마는 <html data-theme="..."> 속성으로 켜진다. 새 문서는 이 속성이
     // 없어 "auto"로 취급되고, OS가 다크 모드면 프로그램상 라이트 테마여도 팝업만 다크로 보였다.
-    const theme = document.documentElement.getAttribute('data-theme') || 'light';
+    // 속성 값을 문서 글자에 그대로 끼우므로 **아는 세 값만** — 누가 data-theme 에 `"><script>` 를 넣어도 인쇄·새 창·내려받기 문서에 새지 않게
+    const 읽은테마 = document.documentElement.getAttribute('data-theme');
+    const theme = 읽은테마 === 'dark' || 읽은테마 === 'auto' ? 읽은테마 : 'light';
     /* 종이 맨 위에 찍는 한 줄(누구의·언제·무슨 표). **격자만 인쇄되므로** 이것이 없으면
        뽑아 둔 채점지가 며칠 뒤 누구 것인지 알 수 없는 종이가 된다. 쪽마다 찍는다 —
        여러 장이 섞이면 첫 장에만 있는 이름은 소용이 없다. */

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

@@ -6,7 +6,8 @@ export function getControlDateRange(control) {
         const now = new Date();
         const y = m ? Number(m[1]) : now.getFullYear();
         const mo = m ? Number(m[2]) : now.getMonth() + 1;
-        return { from: new Date(y, mo - 1, 1, 0, 0, 0), to: new Date(y, mo, 0, 23, 59, 59) };
+        // 끝은 그날의 **마지막 밀리초까지** — 23:59:59.000 이면 마지막 999ms 에 남은 기록이 목록에서 빠졌다
+        return { from: new Date(y, mo - 1, 1, 0, 0, 0), to: new Date(y, mo, 0, 23, 59, 59, 999) };
     }
     const opt = control.weekRanges.find(o => o.value === control.weekRange);
     if (!opt) {
@@ -17,6 +18,6 @@ export function getControlDateRange(control) {
     const monday = new Date(opt.year, opt.month - 1, firstMon + opt.week * 7, 0, 0, 0);
     const sunday = new Date(monday);
     sunday.setDate(monday.getDate() + 6);
-    sunday.setHours(23, 59, 59);
+    sunday.setHours(23, 59, 59, 999);
     return { from: monday, to: sunday };
 }

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

@@ -41,6 +41,10 @@ export function useComboboxSuggestions({ value, onChange, suggestions, openOnFoc
         blurTimerRef.current = setTimeout(() => setOpen(false), 120);
     }, []);
     const handleKeyDown = useCallback((e) => {
+        /* 한글 조합 중 키는 **조합 몫** 이다 — 조합을 끝내는 키는 조합 중(229) 한 번 + 끝난 뒤 한 번 온다. 조합 중 ↓ 까지 세면 첫 후보를
+           건너뛰었고, 조합 중 Esc 가 목록을 닫아 이어 오는 Esc 가 팝업까지 닫았다(입력하던 것도 잃음). Enter 는 전부터 막았다. */
+        if (e.nativeEvent.isComposing || e.keyCode === 229)
+            return;
         if (e.key === 'ArrowDown') {
             e.preventDefault();
             setOpen(true);
@@ -52,7 +56,7 @@ export function useComboboxSuggestions({ value, onChange, suggestions, openOnFoc
         }
         else if (e.key === 'Enter') {
             // 한글 조합을 끝내는 Enter는 선택이 아니다 — 조합 중엔 제안을 고르지 않는다
-            if (safeIdx >= 0 && !e.nativeEvent.isComposing)
+            if (safeIdx >= 0)
                 handleSelect(filtered[safeIdx]);
         }
         else if (e.key === 'Escape') {

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

@@ -13,6 +13,9 @@ function onKey(e) {
         return;
     if (e.defaultPrevented)
         return; // 내부 컨트롤이 이미 소비함
+    // 한글 조합(한자 후보창 등) 중 Esc 는 조합을 취소하는 키다 — 창을 닫지 않는다
+    if (e.isComposing || e.keyCode === 229)
+        return;
     const top = stack[stack.length - 1];
     if (!top)
         return;

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

@@ -32,6 +32,8 @@ export function useAnchoredMenu({ computeStyle, onScroll = 'close', onResize = '
             setOpen(false);
         };
         document.addEventListener('mousedown', handleOutsideClick);
+        // iOS 는 누를 수 없는 요소를 톡하면 mousedown 을 안 보낸다 — pointerdown 으로도 닫는다(Tooltip·CategoryIcon 과 같게)
+        document.addEventListener('pointerdown', handleOutsideClick);
         const handleScroll = (e) => {
             if (menuRef.current?.contains(e.target))
                 return;
@@ -52,6 +54,7 @@ export function useAnchoredMenu({ computeStyle, onScroll = 'close', onResize = '
             window.addEventListener('resize', handleResize);
         return () => {
             document.removeEventListener('mousedown', handleOutsideClick);
+            document.removeEventListener('pointerdown', handleOutsideClick);
             if (onScroll !== 'ignore')
                 window.removeEventListener('scroll', handleScroll, true);
             if (onResize !== 'ignore')

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

@@ -33,7 +33,8 @@ export function useTablePaging(rows, resetOn, opts) {
        못 본다. 렌더 중에 되돌린다(저장소의 다른 곳들과 같은 꼴: 값이 바뀐 그 렌더에서
        바로 맞춰야 한 박자 늦은 화면이 안 뜬다). */
     const [본것, set본것] = useState(resetOn);
-    if (본것 !== resetOn) {
+    // Object.is — NaN 이면 `!==` 가 늘 참이라 렌더가 끝나지 않았다. 객체는 렌더마다 새로 만들면 매번 바뀐 것이다(원시값을 넘길 것)
+    if (!Object.is(본것, resetOn)) {
         set본것(resetOn);
         if (page !== 1)
             setPage(1);

package/dist/packages/core/src/utils/theme.js

@@ -16,9 +16,12 @@ export function getSavedTheme() {
     return DEFAULT_THEME;
 }
 export function applyTheme(mode) {
+    /* 세 값만 받는다 — 설정은 서버(JSON)에서 오기도 해서 타입만 믿고 그대로 박으면, 이 속성을 글자로 옮겨 짓는 인쇄 문서에
+       `"><script>` 가 끼어들었다. 모르는 값은 기본(light)으로. */
+    const 값 = mode === 'light' || mode === 'dark' || mode === 'auto' ? mode : DEFAULT_THEME;
     try {
-        document.documentElement.setAttribute('data-theme', mode);
-        localStorage.setItem(STORAGE_KEY, mode);
+        document.documentElement.setAttribute('data-theme', 값);
+        localStorage.setItem(STORAGE_KEY, 값);
     }
     catch { }
 }

package/dist/packages/core/src/version.d.ts

@@ -46,4 +46,4 @@
  *
  * 값은 손으로 적고 `test/coreVersion.test.ts` 가 package.json 과 어긋나면 운다.
  */
-export declare const CORE_VERSION = "0.139.0";
+export declare const CORE_VERSION = "0.141.0";

package/dist/packages/core/src/version.js

@@ -46,4 +46,4 @@
  *
  * 값은 손으로 적고 `test/coreVersion.test.ts` 가 package.json 과 어긋나면 운다.
  */
-export const CORE_VERSION = '0.139.0';
+export const CORE_VERSION = '0.141.0';