@ihabdevteam/core 0.143.0 → 0.144.0

package/dist/ihabdevteam-core.d.ts

@@ -1386,7 +1386,7 @@ export declare function copyText(text: string): Promise<boolean>;
  *
  * 값은 손으로 적고 `test/coreVersion.test.ts` 가 package.json 과 어긋나면 운다.
  */
-export declare const CORE_VERSION = "0.143.0";
+export declare const CORE_VERSION = "0.144.0";
 
 /** @public */
 declare const coreDefault: Record<string, unknown>;
@@ -1830,7 +1830,7 @@ export declare interface DraftItem<T> {
 export declare function draftValues<T>(draft: readonly DraftItem<T>[]): T[];
 
 /** @public */
-export declare function Dropdown({ options, value, onChange, placeholder, disabled, block, size, error, className, ariaLabel }: DropdownProps): JSX.Element;
+export declare function Dropdown({ options, value, onChange, placeholder, disabled, block, size, error, className, ariaLabel, ariaDescribedBy }: DropdownProps): JSX.Element;
 
 export declare type DropdownItem = {
     options: {
@@ -1867,6 +1867,8 @@ export declare interface DropdownProps {
     className?: string;
     /** 화면에 보이는 라벨 없이 스크린리더용 이름을 지정할 때 사용 */
     ariaLabel?: string;
+    /** 트리거를 설명할 요소 id(들) — 오류 문구 등. 고른 값은 이것과 함께 설명으로 따로 읽힌다. */
+    ariaDescribedBy?: string;
 }
 
 /**
@@ -6524,6 +6526,8 @@ export declare const toBase64UrlSafe: typeof toStorageName;
 export declare function toChoseong(text: string): string;
 
 /**
+ * 오늘의 **KST** 연·월·일(두 자리 월·일). 방문 폼의 기본 날짜 — 소비자가 이 칸을 KST 벽시계로 읽어 저장하므로, 기기 달력이면
+ * 해외 기기에서 손대지 않고 등록한 방문이 하루 전으로 저장됐다(해외 기기 공식 지원).
  * @public
  */
 export declare const today: () => {

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

@@ -49,7 +49,9 @@ export default function Badge(props) {
                    내게** 한다 — 그래야 이벤트의 target·currentTarget 도 실제와 같다. */
                 e.preventDefault();
                 e.currentTarget.click();
-            } : undefined, "aria-label": ariaHidden ? undefined : ariaLabel ?? defaultLabel, "aria-hidden": ariaHidden || undefined, role: onClick ? 'button' : undefined, tabIndex: onClick ? 0 : undefined, children: [number !== undefined && number, number === undefined && dotIcon === 'check' && _jsx(CheckIcon, {}), number === undefined && dotIcon === 'remove' && _jsx(RemoveIcon, {}), number === undefined && dotIcon === 'minus' && _jsx(MinusIcon, {})] }));
+            } : undefined, "aria-label": ariaHidden ? undefined : ariaLabel ?? defaultLabel, "aria-hidden": ariaHidden || undefined, 
+            // 누를 수 없는 점도 이름이 있으면 그림(img)으로 — 역할 없는 span 의 aria-label 은 낭독기가 버려 "선택됨" 이 안 들렸다(bar 와 같게)
+            role: onClick ? 'button' : (ariaHidden ? undefined : 'img'), tabIndex: onClick ? 0 : undefined, children: [number !== undefined && number, number === undefined && dotIcon === 'check' && _jsx(CheckIcon, {}), number === undefined && dotIcon === 'remove' && _jsx(RemoveIcon, {}), number === undefined && dotIcon === 'minus' && _jsx(MinusIcon, {})] }));
     }
     // ── bar (텍스트) ────────────────────────────────────────────────────────
     const { label, children, variant = 'default', fill = 'filled', minWidth, iconLeft, iconRight, color } = props;

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

@@ -77,5 +77,5 @@ export default function BulkBar({ count, actions, onClear, clearLabel: clearLabe
            단추가 Tab 순서와 낭독기에 남아, 보이지 않는 '선택 해제'·'삭제' 에 포커스가 갔다.
            inert 로 포커스·낭독기에서 함께 뺀다(보이는 모양은 CSS 그대로). aria-hidden 은
            inert 를 모르는 오래된 브라우저를 위한 덧댐이다. */
-        inert: !show || undefined, "aria-hidden": show ? undefined : true, children: [_jsx("span", { ref: contentRef, className: "bulk-bar__count body-2", children: content ?? _jsx("b", { children: t('common.selectedCount', { count }) }) }), max !== undefined && (_jsx(Badge, { size: "small", fill: "soft", variant: "main", label: `${count} / ${max}` })), _jsxs("div", { className: `bulk-bar__actions${stacked ? ' bulk-bar__actions--stacked' : ''}`, children: [_jsx(Button, { htmlType: "button", size: 40, label: clearLabel, onClick: onClear }), actions.map((a, i) => (_jsx(Button, { htmlType: "button", size: 40, variant: a.variant ?? 'default', icon: a.icon, label: a.label, onClick: a.onClick }, i)))] })] }));
+        inert: !show || undefined, "aria-hidden": show ? undefined : true, children: [_jsx("span", { ref: contentRef, className: "bulk-bar__count body-2", role: "status", children: content ?? _jsx("b", { children: t('common.selectedCount', { count }) }) }), max !== undefined && (_jsx(Badge, { size: "small", fill: "soft", variant: "main", label: `${count} / ${max}` })), _jsxs("div", { className: `bulk-bar__actions${stacked ? ' bulk-bar__actions--stacked' : ''}`, children: [_jsx(Button, { htmlType: "button", size: 40, label: clearLabel, onClick: onClear }), actions.map((a, i) => (_jsx(Button, { htmlType: "button", size: 40, variant: a.variant ?? 'default', icon: a.icon, label: a.label, onClick: a.onClick }, i)))] })] }));
 }

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

@@ -91,9 +91,10 @@ export default function Button(props) {
     }, [disabledProp]);
     const isSelected = typeof selected === 'boolean' ? Boolean(selected) : internalSelected;
     // toggleable 또는 controlled selected가 있을 때만 aria-pressed 설정
+    // 그 밖에는 소비자가 넘긴 aria-pressed 를 그대로 둔다(아이콘이 바뀌는 재생/멈춤 단추 등) — 전에는 undefined 로 덮었다
     const ariaPressed = (toggleable || typeof selected === 'boolean')
         ? (isSelected ? 'true' : 'false')
-        : undefined;
+        : rest['aria-pressed'];
     const classes = cx('button', sizeBase, sizeTypeClass, variantClass, alignClass, shapeClass, isSelected ? 'is-selected' : null, !useBG ? 'button--no-bg' : null, tooltipOnly ? 'button--tooltip-only' : null, className);
     const iconClassName = `button__icon button__icon--${iconSize}`;
     const subLabels = Array.isArray(subLabel) ? subLabel : (subLabel !== undefined ? [subLabel] : []);

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

@@ -4,6 +4,7 @@ import { useCallback, useMemo, useState, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import Icon from './Icon';
 import { formatTimeHM } from '../utils/format';
+import { getTodayKst } from '../utils/date';
 import './Calendar.css';
 import { pressable } from '../utils/pressable';
 function daysInMonth(year, month) { return new Date(year, month + 1, 0).getDate(); }
@@ -12,11 +13,13 @@ function firstDayOfMonth(year, month) { return new Date(year, month, 1).getDay()
 export default function Calendar({ visits = [], onVisitClick, onVisitMove, onDayClick, }) {
     const { t } = useTranslation();
     const DOW = useMemo(() => t('calendar.dow', { returnObjects: true }), [t]);
-    const [year, setYear] = useState(new Date().getFullYear());
-    const [month, setMonth] = useState(new Date().getMonth());
+    /* '오늘' 은 KST 의 날 — 방문 날짜가 KST 달력(toKstYmd)이라, 기기 달력으로 열면 해외 기기에서 오늘 방문이 안 보이는 달에 있고
+       오늘 표시가 다른 날에 붙었다(해외 기기 공식 지원) */
+    const 오늘Ymd = getTodayKst();
+    const [year, setYear] = useState(() => Number(오늘Ymd.slice(0, 4)));
+    const [month, setMonth] = useState(() => Number(오늘Ymd.slice(5, 7)) - 1);
     const [dragOverDate, setDragOverDate] = useState(null);
     const dragVisitId = useRef(null);
-    const today = new Date();
     const visitsByDate = useMemo(() => {
         const map = {};
         visits.forEach((v) => {
@@ -51,15 +54,15 @@ export default function Calendar({ visits = [], onVisitClick, onVisitMove, onDay
     else
         setMonth(m => m + 1); }, [month]);
     const fmtDate = (d) => `${year}-${String(month + 1).padStart(2, '0')}-${String(d).padStart(2, '0')}`;
-    const isToday = (d) => today.getFullYear() === year && today.getMonth() === month && today.getDate() === d;
-    return (_jsxs("div", { children: [_jsxs("div", { className: "calendar-nav", children: [_jsx("button", { type: "button", className: "calendar-nav__button", onClick: prev, "aria-label": t('calendar.prevMonth', '이전 달'), children: _jsx(Icon, { icon: "chevron-left", label: "", className: "", svgClassName: "calendar-nav__button-icon", size: 18 }) }), _jsx("span", { className: "calendar-nav__title h5", children: t('calendar.yearMonth', { year, month: month + 1 }) }), _jsx("button", { type: "button", className: "calendar-nav__button", onClick: next, "aria-label": t('calendar.nextMonth', '다음 달'), children: _jsx(Icon, { icon: "chevron-right", label: "", className: "", svgClassName: "calendar-nav__button-icon", size: 18 }) }), _jsxs("div", { className: "calendar-nav__legend", children: [_jsx("span", { className: "calendar-nav__legend-dot calendar-nav__legend-dot--main" }), _jsx("span", { className: "caption-1", children: t('calendar.legend.visited', '방문') }), _jsx("span", { className: "calendar-nav__legend-dot calendar-nav__legend-dot--sub" }), _jsx("span", { className: "caption-1", children: t('calendar.legend.scheduled', '예약') }), _jsx("span", { className: "calendar-nav__legend-dot calendar-nav__legend-dot--disabled" }), _jsx("span", { className: "caption-1", children: t('calendar.legend.noVisit', '미방문') })] })] }), _jsxs("div", { className: "calendar-grid", children: [DOW.map(d => _jsx("div", { className: "calendar-day-header body-3", children: d }, d)), cells.map((d, i) => {
+    const isToday = (d) => fmtDate(d) === 오늘Ymd;
+    return (_jsxs("div", { children: [_jsxs("div", { className: "calendar-nav", children: [_jsx("button", { type: "button", className: "calendar-nav__button", onClick: prev, "aria-label": t('calendar.prevMonth', '이전 달'), children: _jsx(Icon, { icon: "chevron-left", label: "", className: "", svgClassName: "calendar-nav__button-icon", size: 18 }) }), _jsx("span", { className: "calendar-nav__title h5", "aria-live": "polite", children: t('calendar.yearMonth', { year, month: month + 1 }) }), _jsx("button", { type: "button", className: "calendar-nav__button", onClick: next, "aria-label": t('calendar.nextMonth', '다음 달'), children: _jsx(Icon, { icon: "chevron-right", label: "", className: "", svgClassName: "calendar-nav__button-icon", size: 18 }) }), _jsxs("div", { className: "calendar-nav__legend", children: [_jsx("span", { className: "calendar-nav__legend-dot calendar-nav__legend-dot--main" }), _jsx("span", { className: "caption-1", children: t('calendar.legend.visited', '방문') }), _jsx("span", { className: "calendar-nav__legend-dot calendar-nav__legend-dot--sub" }), _jsx("span", { className: "caption-1", children: t('calendar.legend.scheduled', '예약') }), _jsx("span", { className: "calendar-nav__legend-dot calendar-nav__legend-dot--disabled" }), _jsx("span", { className: "caption-1", children: t('calendar.legend.noVisit', '미방문') })] })] }), _jsxs("div", { className: "calendar-grid", children: [DOW.map(d => _jsx("div", { className: "calendar-day-header body-3", children: d }, d)), cells.map((d, i) => {
                         if (d === null)
                             return _jsx("div", { className: "calendar-cell empty" }, `empty-${i}`);
                         const day = d;
                         const dateKey = fmtDate(day);
                         const dayVisits = visitsByDate[dateKey] ?? [];
                         const isDragOver = dragOverDate === dateKey;
-                        return (_jsxs("div", { className: `calendar-cell${isToday(day) ? ' today' : ''}${isDragOver ? ' drag-over' : ''}${onDayClick ? ' calendar-cell--clickable' : ''}`, role: onDayClick ? 'button' : undefined, tabIndex: onDayClick ? 0 : undefined, "aria-label": onDayClick ? t('calendar.addOnDate', { date: dateKey }) : undefined, onClick: onDayClick ? () => onDayClick(dateKey) : undefined, 
+                        return (_jsxs("div", { className: `calendar-cell${isToday(day) ? ' today' : ''}${isDragOver ? ' drag-over' : ''}${onDayClick ? ' calendar-cell--clickable' : ''}`, role: onDayClick ? 'button' : undefined, tabIndex: onDayClick ? 0 : undefined, "aria-label": onDayClick ? t('calendar.addOnDate', { date: dateKey }) : undefined, "aria-current": isToday(day) ? 'date' : undefined, onClick: onDayClick ? () => onDayClick(dateKey) : undefined, 
                             /* `<div role="button">` 은 브라우저가 Enter·Space 를 눌림으로 바꿔 주지 않는다 */
                             onKeyDown: onDayClick ? (e) => {
                                 /* 칸 안의 방문 표시에서 누른 Enter 가 올라온 것이면 넘긴다 — 마우스 click 은 표시가

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

@@ -9,6 +9,7 @@ import { cx } from '../utils/cx';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { createPortal } from 'react-dom';
+import { getTodayKst } from '../utils/date';
 import Calendar from 'lucide-react/dist/esm/icons/calendar.mjs';
 import ChevronLeft from 'lucide-react/dist/esm/icons/chevron-left.mjs';
 import ChevronRight from 'lucide-react/dist/esm/icons/chevron-right.mjs';
@@ -55,7 +56,8 @@ export default function DatePicker({ value, onChange, size = 48, min, max, disab
        영어 화면의 날짜 고르개만 한국어 요일이 떴다 — 같은 저장소의 `Calendar` 는
        진작 `calendar.dow` 를 쓰고 있었고, 사전에는 영어(`Sun`·`Mon`…)도 들어 있었다. */
     const DOW = useMemo(() => t('calendar.dow', { returnObjects: true }), [t]);
-    const today = new Date();
+    // 오늘 표시·열 때 포커스는 KST 의 날 — 기기 달력이면 해외 기기에서 하루 어긋나 min=오늘 달력이 앞 달로 열렸다
+    const 오늘ISO = getTodayKst();
     const { viewY, viewM, prevMonth, nextMonth, setViewYM } = useCalendarMonth(value);
     const computeStyle = useCallback((rect) => {
         const spaceBelow = window.innerHeight - rect.bottom;
@@ -122,7 +124,6 @@ export default function DatePicker({ value, onChange, size = 48, min, max, disab
     useEffect(() => {
         if (!open)
             return;
-        const 오늘ISO = toISO(today.getFullYear(), today.getMonth(), today.getDate());
         const 첫자리 = value && value.slice(0, 7) === `${viewY}-${String(viewM + 1).padStart(2, '0')}` ? +value.slice(8)
             : 오늘ISO.slice(0, 7) === `${viewY}-${String(viewM + 1).padStart(2, '0')}` ? +오늘ISO.slice(8)
                 : 1;
@@ -237,7 +238,7 @@ export default function DatePicker({ value, onChange, size = 48, min, max, disab
                             return _jsx("div", {}, `e${i}`);
                         const iso = toISO(viewY, viewM, d);
                         const isSelected = iso === value;
-                        const isToday = iso === toISO(today.getFullYear(), today.getMonth(), today.getDate());
+                        const isToday = iso === 오늘ISO;
                         const dis = isDisabledDay(d);
                         const col = (i % 7);
                         return (_jsx("button", { type: "button", disabled: dis, "data-day": d, tabIndex: d === 탭자리 ? 0 : -1, "aria-current": isToday ? 'date' : undefined, onClick: () => !dis && selectDay(d), className: cx('date-picker__day caption-1', isSelected && 'date-picker__day--selected', isToday && !isSelected && 'date-picker__day--today', dis && 'date-picker__day--disabled', col === 0 && 'date-picker__day--sun', col === 6 && 'date-picker__day--sat'), children: d }, d));

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

@@ -18,6 +18,8 @@ export interface DropdownProps {
     className?: string;
     /** 화면에 보이는 라벨 없이 스크린리더용 이름을 지정할 때 사용 */
     ariaLabel?: string;
+    /** 트리거를 설명할 요소 id(들) — 오류 문구 등. 고른 값은 이것과 함께 설명으로 따로 읽힌다. */
+    ariaDescribedBy?: string;
 }
 /** @public */
-export default function Dropdown({ options, value, onChange, placeholder, disabled, block, size, error, className, ariaLabel }: DropdownProps): import("react").JSX.Element;
+export default function Dropdown({ options, value, onChange, placeholder, disabled, block, size, error, className, ariaLabel, ariaDescribedBy }: DropdownProps): import("react").JSX.Element;

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

@@ -7,10 +7,11 @@ import { useTranslation } from 'react-i18next';
 import { useAnchoredMenu } from '../hooks/useAnchoredMenu';
 import './Dropdown.css';
 /** @public */
-export default function Dropdown({ options, value, onChange, placeholder, disabled = false, block = false, size = 48, error = false, className = '', ariaLabel }) {
+export default function Dropdown({ options, value, onChange, placeholder, disabled = false, block = false, size = 48, error = false, className = '', ariaLabel, ariaDescribedBy }) {
     const { t } = useTranslation();
     const resolvedPlaceholder = placeholder ?? t('dropdown.placeholder', '선택');
     const listId = useId();
+    const valueId = useId();
     const containerRef = useRef(null);
     const computeStyle = useCallback((rect) => {
         // 아래쪽 공간이 메뉴 최대 높이(260px, Dropdown.css)보다 부족하고 위쪽에 공간이
@@ -117,12 +118,12 @@ export default function Dropdown({ options, value, onChange, placeholder, disabl
             // mousedown 에서는 기본 동작(포커스 이동 → 트리거 blur → 메뉴 닫힘)만 막아,
             // click 이 도달하기 전에 메뉴가 사라지지 않게 한다.
             onMouseDown: e => e.preventDefault(), onClick: () => select(opt), onMouseEnter: () => setActiveIdx(i), disabled: opt.disabled, children: [_jsx("span", { className: "dropdown__option-check", children: opt.value === value && (_jsx("svg", { viewBox: "0 0 14 14", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("polyline", { points: "2 7 5.5 10.5 12 3.5" }) })) }), opt.label] }, opt.value))) })) : null;
-    return (_jsxs("div", { ref: containerRef, className: cx('dropdown', `dropdown--s${size}`, open ? 'dropdown--open' : '', block ? 'dropdown--block' : '', error ? 'dropdown--error' : '', className), onKeyDown: handleKeyDown, children: [_jsxs("button", { ref: triggerRef, type: "button", className: "dropdown__trigger", "aria-haspopup": "listbox", "aria-expanded": open, "aria-controls": open ? listId : undefined, "aria-activedescendant": open && activeIdx >= 0 ? `${listId}-option-${activeIdx}` : undefined, "aria-label": ariaLabel, "aria-invalid": error || undefined, disabled: disabled, onClick: toggle, 
+    return (_jsxs("div", { ref: containerRef, className: cx('dropdown', `dropdown--s${size}`, open ? 'dropdown--open' : '', block ? 'dropdown--block' : '', error ? 'dropdown--error' : '', className), onKeyDown: handleKeyDown, children: [_jsxs("button", { ref: triggerRef, type: "button", className: "dropdown__trigger", "aria-haspopup": "listbox", "aria-expanded": open, "aria-controls": open ? listId : undefined, "aria-activedescendant": open && activeIdx >= 0 ? `${listId}-option-${activeIdx}` : undefined, "aria-label": ariaLabel, "aria-describedby": [ariaLabel && selected ? valueId : '', ariaDescribedBy ?? ''].filter(Boolean).join(' ') || undefined, "aria-invalid": error || undefined, disabled: disabled, onClick: toggle, 
                 /* Tab 으로 포커스가 떠나면 닫는다 — 포커스는 트리거에 두고 aria-activedescendant 로 가리키는 목록이라, 떠난 뒤
                    열린 채 남으면 화살표·Enter 가 더는 메뉴로 가지 않는 죽은 메뉴가 된다. 항목·메뉴를 누르는 것은 위에서
                    mousedown 기본 동작을 막아 blur 가 나지 않는다. */
                 onBlur: e => { if (open && !menuRef.current?.contains(e.relatedTarget))
-                    setOpen(false); }, children: [_jsx("span", { className: `dropdown__trigger-label body-2${!selected ? ' dropdown__trigger-label--placeholder' : ''}`, children: selected ? selected.label : resolvedPlaceholder }), _jsx("svg", { className: "dropdown__chevron", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("polyline", { points: "4 6 8 10 12 6" }) })] }), typeof document !== 'undefined' && createPortal(menu, 
+                    setOpen(false); }, children: [_jsx("span", { id: valueId, className: `dropdown__trigger-label body-2${!selected ? ' dropdown__trigger-label--placeholder' : ''}`, children: selected ? selected.label : resolvedPlaceholder }), _jsx("svg", { className: "dropdown__chevron", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("polyline", { points: "4 6 8 10 12 6" }) })] }), typeof document !== 'undefined' && createPortal(menu, 
             // 코어 CSS를 .ihabdevteam-core-scope 로 스코프한 소비자(플레이그라운드 등)에서도
             // body로 portal된 메뉴가 스타일을 잃지 않도록, 가까운 scope 안으로 portal
             // createPortal의 target은 렌더링 시점에 동기적으로 결정되어야 하므로 ref 읽기를 effect로 옮길 수 없다

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

@@ -2,6 +2,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useTranslation } from 'react-i18next';
 import './Loader.css';
+/** 눈에는 안 보이고 낭독기에는 읽히는 글자 */
+const 보이지않게 = {
+    position: 'absolute', width: 1, height: 1, margin: -1, padding: 0, overflow: 'hidden',
+    clipPath: 'inset(50%)', whiteSpace: 'nowrap', border: 0,
+};
 /** @public */
 export default function Loader(props) {
     const { t } = useTranslation();
@@ -13,5 +18,5 @@ export default function Loader(props) {
         return (_jsx("div", { className: "loader-bar", role: "progressbar", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": pct, "aria-label": name, children: _jsx("div", { className: "loader-bar__inner", style: { width: `${pct}%` } }) }));
     }
     const dim = typeof size === 'number' ? `${size}px` : size;
-    return (_jsx("div", { className: "loader-spinner", style: { width: dim, height: dim }, role: "status", "aria-label": name, children: _jsxs("svg", { className: "loader-spinner__svg", viewBox: "0 0 50 50", width: size, height: size, children: [_jsx("circle", { className: "loader-spinner__bg", cx: "25", cy: "25", r: "20", fill: "none", strokeWidth: "4" }), _jsx("circle", { className: "loader-spinner__fg", cx: "25", cy: "25", r: "20", fill: "none", strokeWidth: "4", strokeLinecap: "round" })] }) }));
+    return (_jsxs("div", { className: "loader-spinner", style: { width: dim, height: dim }, role: "status", "aria-label": name, children: [_jsx("span", { style: 보이지않게, children: name }), _jsxs("svg", { className: "loader-spinner__svg", viewBox: "0 0 50 50", width: size, height: size, children: [_jsx("circle", { className: "loader-spinner__bg", cx: "25", cy: "25", r: "20", fill: "none", strokeWidth: "4" }), _jsx("circle", { className: "loader-spinner__fg", cx: "25", cy: "25", r: "20", fill: "none", strokeWidth: "4", strokeLinecap: "round" })] })] }));
 }

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

@@ -19,5 +19,5 @@ export default function Pagination({ page, totalPages, onChange, prevLabel, next
     const 마지막 = Math.max(1, totalPages);
     const handlePrev = () => onChange(Math.max(1, Math.min(마지막, page - 1)));
     const handleNext = () => onChange(Math.min(마지막, page + 1));
-    return (_jsxs("div", { className: cx('pagination', className), children: [_jsx(Button, { htmlType: "button", size: 32, type: "dot", shape: "rounded", icon: "chevron-left", ariaLabel: resolvedPrev, disabled: page <= 1, onClick: handlePrev }), _jsxs("span", { className: "pagination__info body-3", children: [Math.min(Math.max(1, page), 마지막), " / ", 마지막] }), _jsx(Button, { htmlType: "button", size: 32, type: "dot", shape: "rounded", icon: "chevron-right", ariaLabel: resolvedNext, disabled: page >= totalPages, onClick: handleNext })] }));
+    return (_jsxs("div", { className: cx('pagination', className), children: [_jsx(Button, { htmlType: "button", size: 32, type: "dot", shape: "rounded", icon: "chevron-left", ariaLabel: resolvedPrev, disabled: page <= 1, onClick: handlePrev }), _jsxs("span", { className: "pagination__info body-3", "aria-live": "polite", "aria-atomic": "true", children: [Math.min(Math.max(1, page), 마지막), " / ", 마지막] }), _jsx(Button, { htmlType: "button", size: 32, type: "dot", shape: "rounded", icon: "chevron-right", ariaLabel: resolvedNext, disabled: page >= totalPages, onClick: handleNext })] }));
 }

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

@@ -71,6 +71,8 @@ export function PanelRow(props) {
     // 연결한다 — 그 전엔 시각적으로만 옆에 붙어있어 라벨 텍스트를 클릭해도 토글이 안 되고
     // 스크린리더도 이 스위치가 뭘 위한 건지 안내하지 못했다.
     const toggleId = variant === 'toggle' ? `panel-toggle-${uid}` : undefined;
+    // 오류 문구 id — 드롭다운 행은 트리거가 이 문구를 설명으로 잇는다(aria-invalid 만으로는 무엇이 틀렸는지 안 들린다)
+    const errorId = error ? `panel-error-${uid}` : undefined;
     if (variant === 'toggle') {
         const p = props;
         right = _jsx(Toggle, { checked: p.checked, onChange: p.onChange, id: toggleId });
@@ -83,15 +85,15 @@ export function PanelRow(props) {
     }
     else if (variant === 'dropdown') {
         const p = props;
-        const dropdowns = p.dropdowns?.length ? (_jsx("div", { className: `panel-row__dropdown-group${useFullWidth ? ' panel-row__dropdown-group--full' : ''}`, children: p.dropdowns.map((d, i) => (_jsx("div", { className: useFullWidth ? 'panel-row__dropdown-item--full' : undefined, children: _jsx(Dropdown, { options: d.options, value: d.value, onChange: d.onChange, placeholder: d.placeholder, block: useFullWidth, error: !!error, 
+        const dropdowns = p.dropdowns?.length ? (_jsx("div", { className: `panel-row__dropdown-group${useFullWidth ? ' panel-row__dropdown-group--full' : ''}`, children: p.dropdowns.map((d, i) => (_jsx("div", { className: useFullWidth ? 'panel-row__dropdown-item--full' : undefined, children: _jsx(Dropdown, { options: d.options, value: d.value, onChange: d.onChange, placeholder: d.placeholder, block: useFullWidth, error: !!error, ariaDescribedBy: errorId, 
                     // 한 행에 여러 개가 놓이므로 행 라벨만 넘기면 셋 다 "생년월일" 이라는 같은 이름이 된다.
                     // aria-label 이 있으면 스크린리더는 트리거의 화면 텍스트(년/월/일)를 읽지 않으므로
                     // 사용자는 어느 것이 무엇인지 구별할 수 없다 — placeholder 를 붙여 구별되게 한다.
                     ariaLabel: d.ariaLabel ?? ([label, d.placeholder].filter(Boolean).join(' ') || undefined) }) }, i))) })) : (
         // PanelRow 왼쪽 라벨(panel-row__label)은 <label htmlFor>가 아니라 그냥 div라서 트리거 버튼과
         // 프로그래밍적으로 연결되지 않는다 — ariaLabel로 직접 이름을 넘긴다 (TextField의 ariaLabel과 동일 패턴)
-        _jsx(Dropdown, { options: p.options ?? [], value: p.value ?? '', onChange: p.onChange ?? noop, block: useFullWidth, error: !!error, ariaLabel: label }));
-        right = error ? (_jsxs("div", { className: `panel-row__dropdown-error-wrap${useFullWidth ? ' panel-row__dropdown-error-wrap--full' : ''}`, children: [dropdowns, _jsx("span", { className: "caption-1 panel-row__error", role: "alert", children: error })] })) : dropdowns;
+        _jsx(Dropdown, { options: p.options ?? [], value: p.value ?? '', onChange: p.onChange ?? noop, block: useFullWidth, error: !!error, ariaLabel: label, ariaDescribedBy: errorId }));
+        right = error ? (_jsxs("div", { className: `panel-row__dropdown-error-wrap${useFullWidth ? ' panel-row__dropdown-error-wrap--full' : ''}`, children: [dropdowns, _jsx("span", { id: errorId, className: "caption-1 panel-row__error", role: "alert", children: error })] })) : dropdowns;
     }
     else if (variant === 'button') {
         const p = props;
@@ -117,7 +119,7 @@ export function PanelRow(props) {
     /* error 는 Base 에 있어 **모든 variant** 가 받는다 — 그런데 input(TextField)·dropdown 만 문구를 그리고 나머지는 받아
        버렸다(소리방향성 결과 저장 폴더: custom 행에 error 를 줬는데 빨간 상자만 뜨고 까닭이 안 보였다). dropdown 과 같은 모양으로 붙인다. */
     if (error && variant !== 'input' && variant !== 'dropdown') {
-        right = (_jsxs("div", { className: `panel-row__dropdown-error-wrap${useFullWidth ? ' panel-row__dropdown-error-wrap--full' : ''}`, children: [right, _jsx("span", { className: "caption-1 panel-row__error", role: "alert", children: error })] }));
+        right = (_jsxs("div", { className: `panel-row__dropdown-error-wrap${useFullWidth ? ' panel-row__dropdown-error-wrap--full' : ''}`, children: [right, _jsx("span", { id: errorId, className: "caption-1 panel-row__error", role: "alert", children: error })] }));
     }
     const isLabelFixed = variant === 'input' || variant === 'dropdown' || ((variant === 'text' || variant === 'custom') && useFullWidth);
     // 위 children 모드와 동일한 키보드 처리 — 이쪽 경로에만 빠져 있어서,
@@ -155,6 +157,8 @@ export function PanelRowDevice({ devices, onRelease, emptyLabel }) {
                             /* 표의 줄 끝 단추와 같은 모양·같은 말 — 하는 일도 같다.
                                이력에서 지우는 것이 아니라 '지금 끼고 있음' 만 내린다
                                (잠시 안 씀·수리 보냄 같은 경우가 실제로 있다). */
-                            _jsx(Button, { htmlType: "button", size: 32, type: "dot", icon: "x", ariaLabel: t('customers.device.unwear', '착용 해제'), showTooltipInfo: t('customers.device.unwear', '착용 해제'), onClick: () => onRelease(side) }))] }), d ? (_jsxs("div", { className: "panel-row__device-info", children: [_jsxs("span", { className: "panel-row__device-kind", children: [d.device && _jsx(Badge, { size: "small", variant: deviceKindVariant(d.device), fill: "soft", label: 기기종류이름(d.device, t) }), 메타(d) && _jsx("span", { className: "panel-row__device-detail body-3", children: 메타(d) })] }), _jsx("span", { className: "panel-row__device-name body-2b", children: d.productName || d.brand }), _jsx("span", { className: "panel-row__device-date caption-1", children: t('customers.device.wornSince', { date: `${d.wornYear}.${d.wornMonth}.${d.wornDay}` }) })] })) : (_jsx("span", { className: "panel-row__device-empty body-3", children: emptyLabel ?? t('customers.device.notRegistered', '미등록') }))] }, side));
+                            _jsx(Button, { htmlType: "button", size: 32, type: "dot", icon: "x", 
+                                // 좌·우 두 단추가 같은 이름이라 어느 쪽 기기를 내리는지 안 들렸다 — 이름에만 쪽을 붙인다(툴팁은 그대로)
+                                ariaLabel: `${sideLabel} ${t('customers.device.unwear', '착용 해제')}`, showTooltipInfo: t('customers.device.unwear', '착용 해제'), onClick: () => onRelease(side) }))] }), d ? (_jsxs("div", { className: "panel-row__device-info", children: [_jsxs("span", { className: "panel-row__device-kind", children: [d.device && _jsx(Badge, { size: "small", variant: deviceKindVariant(d.device), fill: "soft", label: 기기종류이름(d.device, t) }), 메타(d) && _jsx("span", { className: "panel-row__device-detail body-3", children: 메타(d) })] }), _jsx("span", { className: "panel-row__device-name body-2b", children: d.productName || d.brand }), _jsx("span", { className: "panel-row__device-date caption-1", children: t('customers.device.wornSince', { date: `${d.wornYear}.${d.wornMonth}.${d.wornDay}` }) })] })) : (_jsx("span", { className: "panel-row__device-empty body-3", children: emptyLabel ?? t('customers.device.notRegistered', '미등록') }))] }, side));
         }) }));
 }

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

@@ -113,19 +113,34 @@ export default function Popup(props) {
        전에는 닫는 중 표시만 남아 투명한 막이 화면을 덮고(클릭을 가로챔) ESC·X·바탕·다시 저장이 모두 무시돼 페이지를 쓸 수
        없었다(말귀 업체 정보·훈련 묶음 수정 저장이 실패해 부모가 창을 열어 둘 때). 성공하면 부모가 곧 치우므로 되살릴 일이 없다. */
     const 살아있음Ref = useRef(true);
-    useEffect(() => { 살아있음Ref.current = true; return () => { 살아있음Ref.current = false; }; }, []);
+    /* 닫기(X·ESC·바탕)가 걸어 둔 타이머 — 닫는 애니메이션(260ms) 안에 부모가 창을 치우면 **떠난 뒤에 onClose** 가 불렸다(닫으며
+       다음 창을 여는 흐름에서 늦은 setX(null) 이 새 창을 닫을 수 있다). 떠날 때 걷는다. 소비자가 넘긴 animateThen(cb) 은
+       "삭제·저장 확정" 일 수 있어 걷지 않는다(결정 전). */
+    const 닫기타이머Ref = useRef(null);
+    useEffect(() => {
+        살아있음Ref.current = true;
+        return () => {
+            살아있음Ref.current = false;
+            if (닫기타이머Ref.current) {
+                clearTimeout(닫기타이머Ref.current);
+                닫기타이머Ref.current = null;
+            }
+        };
+    }, []);
     const 되살리기 = useCallback(() => {
         if (!살아있음Ref.current || !closingRef.current)
             return;
         closingRef.current = false;
         setClosing(false);
     }, []);
-    const animateThen = useCallback((cb) => {
+    const animateThen = useCallback((cb, 닫기뿐 = false) => {
         if (closingRef.current)
             return;
         closingRef.current = true;
         setClosing(true);
-        setTimeout(() => {
+        const id = setTimeout(() => {
+            if (닫기타이머Ref.current === id)
+                닫기타이머Ref.current = null;
             let 결과;
             try {
                 결과 = cb ? cb() : undefined;
@@ -141,6 +156,8 @@ export default function Popup(props) {
                 결과.then(() => { setTimeout(되살리기, 120); }, 되살리기);
             }
         }, ANIM_MS);
+        if (닫기뿐)
+            닫기타이머Ref.current = id;
     }, [되살리기]);
     const closeWithAnimation = useCallback(() => {
         if (closeDisabled)
@@ -148,7 +165,7 @@ export default function Popup(props) {
         // animateThen보다 먼저 물어본다 — 애니메이션이 시작된 뒤엔 되돌릴 수 없다(위 주석 참고)
         if (beforeClose && beforeClose() === false)
             return;
-        animateThen(onClose);
+        animateThen(onClose, true);
     }, [animateThen, onClose, closeDisabled, beforeClose]);
     // ESC 닫기 — 공유 스택에 등록(최상단 팝업만 닫힘). onClose가 있고 portal 모드일 때만.
     // 핸들러는 ref로 최신화해 스택 재등록(churn) 없이 1회만 push 한다.

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

@@ -46,7 +46,7 @@ export default function ProgressBar({ value, max = 100, size = 8, color, trackCo
         rootStyle['--progress-bar-fill'] = color;
     if (trackColor)
         rootStyle['--progress-bar-track'] = trackColor;
-    return (_jsxs("div", { className: cx('progress-bar', `progress-bar--${size}`, `progress-bar--label-${pos}`, label && `progress-bar--align-${labelAlign}`, label && labelOnFill && 'progress-bar--label-on-fill', className), style: rootStyle, children: [_jsx("div", { className: "progress-bar__track", role: "progressbar", "aria-valuenow": clamped, "aria-valuemin": 0, "aria-valuemax": shownMax, "aria-label": ariaLabel, children: _jsx("div", { className: "progress-bar__fill", style: { width: `${pct}%` } }) }), label && (_jsx("span", { className: "progress-bar__label caption-1b", children: formatValue
+    return (_jsxs("div", { className: cx('progress-bar', `progress-bar--${size}`, `progress-bar--label-${pos}`, label && `progress-bar--align-${labelAlign}`, label && labelOnFill && 'progress-bar--label-on-fill', className), style: rootStyle, children: [_jsx("div", { className: "progress-bar__track", role: "progressbar", "aria-valuenow": clamped, "aria-valuemin": 0, "aria-valuemax": shownMax, "aria-valuetext": !label ? undefined : formatValue ? formatValue(clamped) : label === 'percent' ? undefined : label === 'raw' ? String(clamped) : `${clamped} / ${shownMax}`, "aria-label": ariaLabel, children: _jsx("div", { className: "progress-bar__fill", style: { width: `${pct}%` } }) }), label && (_jsx("span", { className: "progress-bar__label caption-1b", children: formatValue
                     ? formatValue(clamped)
                     : label === 'percent' ? `${Math.round(pct)}%`
                         : label === 'raw' ? String(clamped)

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", role: "img", "aria-label": t('loader.loading', '불러오는 중…') }))] }));
+    return (_jsxs("button", { type: "button", className: btnClass, onClick: handleClick, "aria-label": typeof text === 'string' ? nameWithCount(t, text, badgeCount) : undefined, "aria-current": active ? 'page' : 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/Slider.js

@@ -85,8 +85,17 @@ export default function Slider({ value, onChange, min = 0, max = 100, step = 1,
         style.backgroundPosition = positions.join(', ');
         style.backgroundRepeat = 'no-repeat';
     }
+    /* 낭독기가 들을 값 글자 — 숫자만 넘기면 "1.25x"·"위"·"3 / 7" 이 "1.25"·"0"·"3" 으로 들렸다. 보이는 라벨과 같은 글자,
+       라벨이 없으면 끝값의 minLabel·maxLabel. 둘 다 아니면 숫자 그대로(undefined). */
+    const 값글자 = formatValue
+        ? formatValue(clamped)
+        : label === 'percent' ? `${Math.round(max > min ? ((clamped - min) / (max - min)) * 100 : 0)}%`
+            : label === 'count' ? `${clamped} / ${max}`
+                : clamped === min && minLabel ? minLabel
+                    : clamped === max && maxLabel ? maxLabel
+                        : undefined;
     // 루트가 아닐 때(label/showMinMax로 감싸질 때)는 className을 바깥 wrapper가 대신 가져간다
-    const input = (_jsx("input", { type: "range", className: cx('slider', `slider--${orientation}`, isStatic && 'slider--static', !label && !showMinMax && className), min: min, max: max, step: step, value: clamped, disabled: disabled, readOnly: isStatic, tabIndex: isStatic ? -1 : undefined, "aria-label": ariaLabel, "aria-orientation": orientation, onChange: handleChange, style: style }));
+    const input = (_jsx("input", { type: "range", className: cx('slider', `slider--${orientation}`, isStatic && 'slider--static', !label && !showMinMax && className), min: min, max: max, step: step, value: clamped, disabled: disabled, readOnly: isStatic, tabIndex: isStatic ? -1 : undefined, "aria-label": ariaLabel, "aria-valuetext": 값글자, "aria-orientation": orientation, onChange: handleChange, style: style }));
     if (!label && !showMinMax)
         return input;
     // 트랙 양 끝 최소·최대값 텍스트 — 세로는 채움 방향(아래→위)에 맞춰 위=max/아래=min 순서로 배치

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

@@ -248,6 +248,8 @@ export default function Table({ fields = [], headerGroups, items = [], renderRow
             if (dragRef.current) {
                 window.removeEventListener('pointermove', onResizeMove);
                 window.removeEventListener('pointerup', onResizeEnd);
+                // 나중에 더한 pointercancel 도 뗀다 — 남으면 태블릿 스크롤 손짓(pointercancel)에 떠난 표의 옛 폭이 저장소를 덮었다
+                window.removeEventListener('pointercancel', onResizeEnd);
                 document.body.style.cursor = '';
                 document.body.style.userSelect = '';
             }

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

@@ -9,7 +9,9 @@ import SegmentedControl from './SegmentedControl';
 import './Toolbar.css';
 export default function Toolbar({ count, search, segment, filters, pageSize, pagination, actions, className, }) {
     const { t } = useTranslation();
-    const countNode = count != null && (_jsxs("p", { className: "toolbar__count body-1", children: [count.prefix ?? t('common.totalPrefix', '총 '), _jsx("span", { className: "toolbar__count-highlight", children: count.value }), count.unit, count.suffix] }));
+    const countNode = count != null && (
+    // 검색어를 칠 때 바뀌는 결과 수를 낭독기에 알린다(전에는 조용했다)
+    _jsxs("p", { className: "toolbar__count body-1", role: "status", "aria-atomic": "true", children: [count.prefix ?? t('common.totalPrefix', '총 '), _jsx("span", { className: "toolbar__count-highlight", children: count.value }), count.unit, count.suffix] }));
     // 좌측 그룹: count → segment. 우측 그룹: search → filters(정렬 등) → pageSize → pagination → actions
     const hasRight = !!(search || filters?.length || pageSize || pagination || actions);
     return (_jsxs("div", { className: cx('toolbar', className), children: [_jsxs("div", { className: "toolbar__row", children: [countNode, segment && (Array.isArray(segment) ? segment : [segment]).map((seg, i) => (_jsx(SegmentedControl, { size: 40, ...seg }, seg.ariaLabel ?? i)))] }), hasRight && (_jsx("div", { className: "toolbar__row", children: _jsxs("div", { className: "toolbar__row-end", children: [search && (_jsx(TextField, { className: "toolbar__search", size: 40, value: search.value, onChange: search.onChange, placeholder: search.placeholder ?? t('common.search', '검색'), 

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

@@ -201,6 +201,7 @@ export default function Tooltip(props) {
     // 배경 자신의 onClick 과 document 바깥클릭 감지가 함께 걸려 실제로 onClose 가 두 번
     // 불렸다. ref 로 "이미 닫는 중"을 즉시 표시해 한 번만 지나가게 한다(Popup 과 같은 방식).
     const closingRef = useRef(false);
+    const 닫기타이머Ref = useRef(null);
     const startClose = useCallback((immediate = false) => {
         /* 닫기를 넘길 곳(onClose)이 없으면 아무것도 하지 않는다. 예전에는 그래도 is-closing 을
            붙여, 부모가 치우지 않는 툴팁이 **흐려진 채 사라진 것처럼** 그 자리에 남았다
@@ -225,7 +226,9 @@ export default function Tooltip(props) {
             return;
         }
         setClosing(true);
-        setTimeout(() => {
+        // 떠날 때 걷는다 — ESC 로 닫는 200ms 안에 부모가 치우면 떠난 뒤에 onClose 가 불렸다
+        닫기타이머Ref.current = setTimeout(() => {
+            닫기타이머Ref.current = null;
             try {
                 if (onClose)
                     onClose();
@@ -236,6 +239,8 @@ export default function Tooltip(props) {
             }
         }, 200);
     }, [closing, onClose, setClosing]);
+    useEffect(() => () => { if (닫기타이머Ref.current)
+        clearTimeout(닫기타이머Ref.current); }, []);
     useEffect(() => {
         /* 제자리(글 흐름 안)에 그린 툴팁은 떠 있는 층이 아니라 본문의 한 조각이다 — document 의
            바깥 누름·Esc·Tab 을 듣지 않는다. 들으면 화면 아무 데나 누르거나 Esc 를 칠 때마다

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

@@ -1144,7 +1144,7 @@ export default function TrainingStepAudioPlayer({ btnLabel, soundSrc, bucketPath
                         // 키보드로 눌렀을 때만 초점을 옮긴다 — 마우스로 누른 사람에게 '재생 / 멈춤' 초점 툴팁이 뜨지 않게
                         onClick: () => { 듣기초점옮기기Ref.current = 키보드로눌렀나(); hideListenTip(); handleToggle(); }, "aria-label": typeof label === 'string' ? label : t('training.listen', '듣기'), onMouseEnter: showListenTip, onMouseLeave: hideListenTip, 
                         // 키보드로 이 버튼에 오면 마우스와 동일하게 안내를 띄운다
-                        onFocus: showListenTip, onBlur: hideListenTip, children: _jsx("span", { ref: listenBtnRef, className: "audio-player__button-triangle-wrap", children: _jsx("svg", { className: "audio-player__button-triangle", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { ref: triPathRef, d: "M13.2 7.7 L16.5 9.85 Q20.2 12 16.5 14.15 L10 18.3 Q7 19.7 7 16.3 L7 7.7 Q7 4.3 10 5.7 L13.2 7.7" }) }) }) })) : null, listenBtnRect && (_jsx(InfoTooltip, { anchorRect: listenBtnRect, text: typeof label === 'string' && label ? label : t('training.listenLabel', '문장 듣기'), offset: 8 })), _jsxs("div", { className: `audio-player__play ${stateLocal === "playMode" || displayedPlaying ? "is-visible" : ""}`, children: [_jsxs("div", { ref: btnsRef, className: "audio-player__buttons", children: [_jsx(Button, { htmlType: "button", size: 32, showTooltipInfo: true, type: "dot", shape: "pill", useBorder: false, icon: "skip-back", onClick: handlePrev, ariaLabel: t('training.prev', '이전'), width: "60px", variant: "transparent-white", "aria-hidden": "true", tabIndex: -1, disabled: stateLocal !== 'playMode' }), _jsx(Button, { htmlType: "button", size: 32, showTooltipInfo: true, type: "dot", shape: "pill", useBorder: false, icon: displayedPlaying ? "pause" : "play", onClick: handleToggle, ariaLabel: t('common.playPause', '재생 / 멈춤'), width: "60px", variant: "transparent-white", disabled: stateLocal !== 'playMode' }), _jsx(Button, { htmlType: "button", size: 32, showTooltipInfo: true, type: "dot", shape: "pill", useBorder: false, icon: "square", onClick: handleStop, ariaLabel: t('training.stop', '정지'), width: "60px", variant: "transparent-white", "aria-hidden": "true", tabIndex: -1, disabled: stateLocal !== 'playMode' }), sourceButtonCount > 1 ? (_jsx("div", { ref: sourceButtonsRef, className: "audio-player__source-buttons", children: Array.from({ length: sourceButtonCount }).map((_, idx) => (_jsx(Button, { htmlType: "button", size: 32, type: "dot", shape: "pill", useBorder: false, label: String(idx + 1), onClick: () => { try {
+                        onFocus: showListenTip, onBlur: hideListenTip, children: _jsx("span", { ref: listenBtnRef, className: "audio-player__button-triangle-wrap", children: _jsx("svg", { className: "audio-player__button-triangle", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { ref: triPathRef, d: "M13.2 7.7 L16.5 9.85 Q20.2 12 16.5 14.15 L10 18.3 Q7 19.7 7 16.3 L7 7.7 Q7 4.3 10 5.7 L13.2 7.7" }) }) }) })) : null, listenBtnRect && (_jsx(InfoTooltip, { anchorRect: listenBtnRect, text: typeof label === 'string' && label ? label : t('training.listenLabel', '문장 듣기'), offset: 8 })), _jsxs("div", { className: `audio-player__play ${stateLocal === "playMode" || displayedPlaying ? "is-visible" : ""}`, inert: !(stateLocal === "playMode" || displayedPlaying) || undefined, children: [_jsxs("div", { ref: btnsRef, className: "audio-player__buttons", children: [_jsx(Button, { htmlType: "button", size: 32, showTooltipInfo: true, type: "dot", shape: "pill", useBorder: false, icon: "skip-back", onClick: handlePrev, ariaLabel: t('training.prev', '이전'), width: "60px", variant: "transparent-white", "aria-hidden": "true", tabIndex: -1, disabled: stateLocal !== 'playMode' }), _jsx(Button, { htmlType: "button", size: 32, showTooltipInfo: true, type: "dot", shape: "pill", useBorder: false, icon: displayedPlaying ? "pause" : "play", onClick: handleToggle, ariaLabel: t('common.playPause', '재생 / 멈춤'), "aria-pressed": displayedPlaying, width: "60px", variant: "transparent-white", disabled: stateLocal !== 'playMode' }), _jsx(Button, { htmlType: "button", size: 32, showTooltipInfo: true, type: "dot", shape: "pill", useBorder: false, icon: "square", onClick: handleStop, ariaLabel: t('training.stop', '정지'), width: "60px", variant: "transparent-white", "aria-hidden": "true", tabIndex: -1, disabled: stateLocal !== 'playMode' }), sourceButtonCount > 1 ? (_jsx("div", { ref: sourceButtonsRef, className: "audio-player__source-buttons", children: Array.from({ length: sourceButtonCount }).map((_, idx) => (_jsx(Button, { htmlType: "button", size: 32, type: "dot", shape: "pill", useBorder: false, label: String(idx + 1), onClick: () => { try {
                                                 handleJumpTo(idx);
                                             }
                                             catch (e) { } }, ariaLabel: t('training.sourcePlay', { n: idx + 1 }), variant: "transparent-white", selected: 구간표시 && currentIndex === idx, disabled: stateLocal !== 'playMode' || !(Array.isArray(sources) && sources[idx]), showTooltipInfo: true }, idx))) })) : null, (!Array.isArray(sources) || sources.length <= 1) ? (_jsx(Button, { htmlType: "button", size: 32, showTooltipInfo: true, type: "dot", shape: "pill", useBorder: false, icon: "repeat", onClick: handleReplay, ariaLabel: t('common.replay', '다시듣기'), width: "60px", variant: "transparent-white", disabled: stateLocal !== 'playMode' })) : null, _jsx(Button, { htmlType: "button", size: 32, showTooltipInfo: true, type: "dot", shape: "pill", useBorder: false, icon: "skip-forward", onClick: handleNext, ariaLabel: t('training.next', '다음'), width: "60px", variant: "transparent-white", "aria-hidden": true, tabIndex: -1, disabled: stateLocal !== 'playMode' }), _jsx(Button, { htmlType: "button", size: 32, showTooltipInfo: true, type: "dot", shape: "pill", useBorder: false, icon: "check", onClick: handleEnd, ariaLabel: t('common.done', '완료'), width: "60px", variant: "transparent-white", disabled: stateLocal !== 'playMode' })] }), _jsxs("div", { className: "audio-player__slider", children: [_jsx("div", { className: fillClass, ref: fillRef, style: { left: `${fillLeftPercent}%` }, "aria-hidden": "true" }), (showSoundWaveForm || showNoiseWaveForm) && (_jsx(WaveForm, { segments: currentSegments, progress: progress, totalDuration: totalDuration, onSegmentClick: handleJumpTo, waveProgressRef: waveProgressRef, showSoundWaveForm: showSoundWaveForm, noiseSrc: (showNoiseWaveForm && noisePlayer?.settings.enabled && noiseVolume > 0) ? activeNoiseUrl : null, noiseRatio: noisePlayer ? noiseRatioOf(noisePlayer.settings) : 0, noiseSpeed: noisePlayer?.settings.speed ?? 1, 

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

@@ -19,6 +19,9 @@ export function sanitizeFileName(name) {
 }
 /** 아직 되돌리지 못한 탭 제목 되돌리기(인쇄가 끝나기 전 다음 인쇄가 올 때) */
 let 제목되돌리기 = null;
+/* 진행 중인 인쇄 — 그림을 기다리는(최대 3초) 사이 다시 누르면 숨김 iframe 이 둘 생겨 인쇄 대화상자가 두 번 떴다(autoPrint 대기 중 '인쇄').
+   afterprint 가 안 오는 브라우저에서 영영 막히지 않게 10초가 지나면 새 인쇄를 받는다. */
+let 인쇄중 = null;
 /**
  * 캡처한 콘텐츠 엘리먼트들을 화면 밖 숨김 iframe에서 인쇄한다. 전역 @media print(모든
  * .word-table 노출)나 팝업 차단의 간섭 없이 넘긴 엘리먼트만 격리 인쇄한다. WordTableBlock의
@@ -28,6 +31,8 @@ let 제목되돌리기 = null;
 export function printWordTableElements(elements, paperW, paperH, fileName = '', header = '') {
     if (elements.length === 0)
         return;
+    if (인쇄중 && 인쇄중.iframe.isConnected && Date.now() - 인쇄중.at < 10_000)
+        return;
     const safeFileName = fileName ? sanitizeFileName(fileName) : '';
     // "PDF로 저장" 기본 파일명은 iframe이 아니라 최상위 탭(document)의 title에서 온다.
     /* 탭 제목은 **어느 쪽 afterprint 가 와도** 되돌린다 — 브라우저에 따라 iframe 인쇄의 print 이벤트가 그 프레임에만 가서,
@@ -55,10 +60,15 @@ export function printWordTableElements(elements, paperW, paperH, fileName = '',
         iframe.remove();
         return;
     }
+    인쇄중 = { iframe, at: Date.now() };
     doc.open();
     doc.write(captureHtml(elements, paperW, paperH, true, safeFileName, header));
     doc.close();
-    iframe.contentWindow?.addEventListener('afterprint', () => { restore?.(); setTimeout(() => iframe.remove(), 0); });
+    iframe.contentWindow?.addEventListener('afterprint', () => {
+        restore?.();
+        setTimeout(() => { iframe.remove(); if (인쇄중?.iframe === iframe)
+            인쇄중 = null; }, 0);
+    });
 }
 // 인쇄 시 PDF로 저장할 때 OS가 제안하는 기본 파일명은 문서 <title>에서 온다.
 export function captureHtml(els, paperW, paperH, autoPrint = false, fileName = '', header = '') {
@@ -71,11 +81,10 @@ export function captureHtml(els, paperW, paperH, autoPrint = false, fileName = '
             return [];
         }
     }).join('\n');
-    // styles.css의 다크 테마는 <html data-theme="..."> 속성으로 켜진다. 새 문서는 이 속성이
-    // 없어 "auto"로 취급되고, OS가 다크 모드면 프로그램상 라이트 테마여도 팝업만 다크로 보였다.
-    // 속성 값을 문서 글자에 그대로 끼우므로 **아는 세 값만** — 누가 data-theme 에 `"><script>` 를 넣어도 인쇄·새 창·내려받기 문서에 새지 않게
-    const 읽은테마 = document.documentElement.getAttribute('data-theme');
-    const theme = 읽은테마 === 'dark' || 읽은테마 === 'auto' ? 읽은테마 : 'light';
+    /* 종이는 늘 흰색(#fff)이라 문서 테마는 **light 로 고정**한다. 화면의 dark 를 옮기면 낱말 색(--color-black)이 밝은 색이 되어
+       흰 종이에 흰 글자로 인쇄·새 창·내려받기가 나갔다. 속성이 없으면 "auto" 로 취급돼 OS 다크 모드에서 팝업만 어두워지던 것도
+       이것으로 막힌다. 화면 테마 값은 문서 글자에 끼우지 않는다(주입 걱정도 없다). */
+    const theme = 'light';
     /* 종이 맨 위에 찍는 한 줄(누구의·언제·무슨 표). **격자만 인쇄되므로** 이것이 없으면
        뽑아 둔 채점지가 며칠 뒤 누구 것인지 알 수 없는 종이가 된다. 쪽마다 찍는다 —
        여러 장이 섞이면 첫 장에만 있는 이름은 소용이 없다. */
@@ -92,6 +101,11 @@ export function captureHtml(els, paperW, paperH, autoPrint = false, fileName = '
            복사할 때 지우면 인쇄·새 창·내려받기가 한꺼번에 맞는다. */
         clone.querySelectorAll('.word-table-cell__score-slot:not(.word-table-cell__score-slot--on)')
             .forEach(s => s.remove());
+        /* 화면에서 아직 불러오는 중인 그림은 스피너 + 인라인 opacity:0 이다 — 그대로 옮기면 인쇄 문서에서 그림이 다 받아져도
+           아무도 opacity 를 되돌리지 않아 **빈칸으로 인쇄**되고, 새 창·내려받은 HTML 에서는 스피너가 영영 돈다(말귀 내 단어표
+           '인쇄' 는 열자마자 100ms 뒤 인쇄해 처음 보는 표는 거의 늘 이랬다). */
+        clone.querySelectorAll('.word-table-cell__spinner').forEach(s => s.remove());
+        clone.querySelectorAll('img').forEach(i => i.style.removeProperty('opacity'));
         return `<div class="paper-wrap">${headHtml}${clone.outerHTML}</div>`;
     }).join('\n');
     /* 이 꾸러미의 CSS 는 전부 `.ihabdevteam-core-scope` **아래**에 산다(styles.css 스코핑).
@@ -144,11 +158,16 @@ export function captureHtml(els, paperW, paperH, autoPrint = false, fileName = '
            .word-table-block__content 클론) 전부 숨겨진 채 인쇄된다. 여기서 복원한다. */
         body * { visibility: visible; }
         html, body { background: #fff; overflow: visible; padding: 0; gap: 0; }
+        /* 종이 한 장 = 한 쪽. height:100% 는 앱에 html·body 높이가 없으면 auto 로 풀려 종이가 내용만큼 커지고(2장 → 4쪽),
+           세로·머리글이면 넘친 만큼 끝에 빈 쪽이 붙었다. 뷰포트 높이로 자르고 격자는 남은 칸만 쓴다. 마지막 종이는
+           body 의 마지막 자식이 아니라(닫기 단추·script) :last-child 가 안 맞았다 — :last-of-type. (Chromium PDF 로 7가지 확인) */
         .paper-wrap {
-          box-shadow: none; border: none; transform: none !important; width: 100% !important; height: 100% !important;
+          box-shadow: none; border: none; transform: none !important; width: 100% !important; height: 100vh !important;
+          display: flex; flex-direction: column; overflow: hidden;
           page-break-after: always; break-after: page;
         }
-        .paper-wrap:last-child { page-break-after: auto; break-after: auto; }
+        .paper-wrap > .word-table-block__content { flex: 1 1 0; min-height: 0; height: auto; }
+        .paper-wrap:last-of-type { page-break-after: auto; break-after: auto; }
         .word-table-cell__play-button { display: none; }
         .new-window-close { display: none; }
       }

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

@@ -1,5 +1,6 @@
 'use client';
 import { useCallback, useEffect, useRef, useState } from 'react';
+import { getTodayKst } from '../utils/date';
 /**
  * "현재 보고 있는 연/월" 상태 + 이전/다음 달 이동. DatePicker의 달력 네비게이션에서 쓴다.
  * @public
@@ -10,8 +11,8 @@ export function useCalendarMonth(value) {
             const [y, m] = value.split('-');
             return { y: +y, m: +m - 1 };
         }
-        const today = new Date();
-        return { y: today.getFullYear(), m: today.getMonth() };
+        const [y, m] = getTodayKst().split('-'); // 값이 없으면 KST 오늘의 달(해외 기기 공식 지원)
+        return { y: +y, m: +m - 1 };
     };
     const [viewY, setViewY] = useState(() => initYM().y);
     const [viewM, setViewM] = useState(() => initYM().m);

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

@@ -99,6 +99,11 @@ export function useToastLifecycle({ message, position, duration, onClose }) {
                         clearTimeout(hideTimerRef.current);
                         hideTimerRef.current = null;
                     }
+                    // 사라지는 중(hide 가 울리며 건 exit)도 — 남으면 떠난 뒤에 onClose 가 불렸다(아래 첫 등장 갈래의 정리와 같게)
+                    if (exitTimerRef.current) {
+                        clearTimeout(exitTimerRef.current);
+                        exitTimerRef.current = null;
+                    }
                 };
             }
             // 처음 등장할 때만 슬라이드인 애니메이션 실행