@ihabdevteam/core 0.321.0 → 0.323.0

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

@@ -31,7 +31,7 @@ function formatDisplay(iso) {
 }
 /* 연월 이름은 `연월이름` 으로 받는다 — 예전에는 `${y}년 ${m + 1}월` 로 박혀 있어 영어 화면에서도
    한국어 연월이 떴다. 부르는 쪽이 사전(`calendar.yearMonth`, Calendar 와 같은 열쇠)을 넘긴다. */
-function buildYMOptions(viewY, 연월이름, min, max) {
+function buildYMOptions(viewY, ymLabel, min, max) {
     const startY = min ? +min.split('-')[0] : viewY - 10;
     const endY = max ? +max.split('-')[0] : viewY + 10;
     const opts = [];
@@ -42,7 +42,7 @@ function buildYMOptions(viewY, 연월이름, min, max) {
                 continue;
             if (max && ym > max.slice(0, 7))
                 continue;
-            opts.push({ value: ym, label: 연월이름(y, m + 1) });
+            opts.push({ value: ym, label: ymLabel(y, m + 1) });
         }
     }
     return opts;
@@ -57,21 +57,21 @@ export default function DatePicker({ value, onChange, size = 48, min, max, disab
        진작 `calendar.dow` 를 쓰고 있었고, 사전에는 영어(`Sun`·`Mon`…)도 들어 있었다. */
     const DOW = useMemo(() => t('calendar.dow', { returnObjects: true }), [t]);
     // 오늘 표시·열 때 포커스는 KST 의 날 — 기기 달력이면 해외 기기에서 하루 어긋나 min=오늘 달력이 앞 달로 열렸다
-    const 오늘ISO = todayYmdOr(today);
+    const todayIso = todayYmdOr(today);
     const { viewY, viewM, prevMonth, nextMonth, setViewYM } = useCalendarMonth(value, today);
     const panelId = useId();
     const computeStyle = useCallback((rect, trigger) => {
         const vh = window.innerHeight;
         const vw = window.innerWidth;
         /* 판의 실제 크기 — 열린 뒤에 재므로 있다. 없으면(첫 계산 전) 어림값 */
-        const 판 = typeof document !== 'undefined' ? document.getElementById(panelId) : null;
+        const panel = typeof document !== 'undefined' ? document.getElementById(panelId) : null;
         /* **우리가 얹은 자리에 흔들리지 않는 높이를 쓴다.**
            `offsetHeight` 만 보면 우리가 방금 얹은 `top`/`bottom` 이 상자를 눌렀을 때 그
            눌린 값을 되읽는다 — 그 값으로 다시 자리를 잡고, 자리가 다시 높이를 바꾸어
            두 꼴을 오간다(실측: 306 ↔ 26). `scrollHeight` 는 눌려도 **안엣것의 높이**를
            그대로 내놓으므로 둘 중 큰 쪽을 쓴다. 판이 아직 없으면 어림값. */
-        const dropdownH = Math.max(판?.offsetHeight || 0, 판?.scrollHeight || 0) || 300;
-        const 판폭 = Math.max(rect.width, 판?.offsetWidth || 0, 260);
+        const dropdownH = Math.max(panel?.offsetHeight || 0, panel?.scrollHeight || 0) || 300;
+        const panelWidth = Math.max(rect.width, panel?.offsetWidth || 0, 260);
         const spaceBelow = vh - rect.bottom;
         const spaceAbove = rect.top;
         /* **아래가 모자라면 넓은 쪽으로 편다**(말귀 요청 ㊵, 2026-10-01).
@@ -82,11 +82,11 @@ export default function DatePicker({ value, onChange, size = 48, min, max, disab
         const above = spaceBelow < dropdownH && spaceAbove > spaceBelow;
         /* **창 안으로 조인다** — 스크롤을 따라 다시 잴 때 트리거가 화면 밖으로 나가면 달력이 창 위·아래 밖까지 따라가
            고를 수 없었다. 판이 창보다 크면 위 여백에 붙인다. */
-        const 여백 = 8;
-        const 조이기 = (v, 최대) => Math.min(Math.max(여백, v), Math.max(여백, 최대));
+        const margin = 8;
+        const clamp = (v, upper) => Math.min(Math.max(margin, v), Math.max(margin, upper));
         return {
             position: 'fixed',
-            left: 조이기(rect.left, vw - 판폭 - 여백),
+            left: clamp(rect.left, vw - panelWidth - margin),
             width: rect.width,
             minWidth: 260,
             /* **둘 다 적는다 — 쓰는 쪽만 적으면 안 된다.**
@@ -95,8 +95,8 @@ export default function DatePicker({ value, onChange, size = 48, min, max, disab
                `top` 이 이기고 높이는 그 둘 사이로 눌린다 — 판이 26px 으로 쪼그라들어
                화면 밖에 섰다(말귀 실측 2026-10-01). `auto` 로 **지운다.** */
             ...(above
-                ? { top: 'auto', bottom: 조이기(vh - rect.top + 6, vh - dropdownH - 여백) }
-                : { bottom: 'auto', top: 조이기(rect.bottom + 6, vh - dropdownH - 여백) }),
+                ? { top: 'auto', bottom: clamp(vh - rect.top + 6, vh - dropdownH - margin) }
+                : { bottom: 'auto', top: clamp(rect.bottom + 6, vh - dropdownH - margin) }),
             zIndex: anchoredMenuZIndex(trigger),
         };
     }, [panelId]);
@@ -122,17 +122,17 @@ export default function DatePicker({ value, onChange, size = 48, min, max, disab
     useEffect(() => {
         if (!open)
             return;
-        const 판 = menuRef.current;
-        const 갈곳 = 판?.querySelector('.date-picker__day--selected:not(:disabled)') ??
-            판?.querySelector('.date-picker__day--today:not(:disabled)') ??
+        const panel = menuRef.current;
+        const focusTo = panel?.querySelector('.date-picker__day--selected:not(:disabled)') ??
+            panel?.querySelector('.date-picker__day--today:not(:disabled)') ??
             /* 오늘이 min/max 밖이라 꺼져 있으면 focus() 가 실패해 트리거에 남았다 — 켜진 첫 날로 */
-            판?.querySelector('.date-picker__day:not(:disabled)') ??
-            판?.querySelector(FOCUSABLE_SELECTOR) ??
-            판;
-        갈곳?.focus?.();
+            panel?.querySelector('.date-picker__day:not(:disabled)') ??
+            panel?.querySelector(FOCUSABLE_SELECTOR) ??
+            panel;
+        focusTo?.focus?.();
         return () => {
-            const 지금 = document.activeElement;
-            if (!지금 || 지금 === document.body)
+            const active = document.activeElement;
+            if (!active || active === document.body)
                 triggerRef.current?.focus?.();
         };
     }, [open, menuRef, triggerRef]);
@@ -142,37 +142,37 @@ export default function DatePicker({ value, onChange, size = 48, min, max, disab
        Tab 은 격자를 **하나로** 세고, 그 안은 화살표로 다닌다.
        ←→ 하루 · ↑↓ 한 주 · Home/End 그 주의 처음과 끝 · PageUp/Down 한 달 ·
        Shift 를 얹으면 한 해. min/max 를 넘어가면 그 끝으로 잡아 둔다. */
-    const [활성일, 활성일설정] = useState(1);
-    const 격자Ref = useRef(null);
+    const [activeDay, setActiveDay] = useState(1);
+    const gridRef = useRef(null);
     /* 옮긴 뒤에 포커스를 준다 — 달을 넘는 이동은 다시 그려진 **뒤**라야 그 칸이
        생긴다. 효과에서 한 번만 집어 가게 쪽지를 남긴다(매 렌더 훔치지 않도록). */
-    const 옮길곳 = useRef(null);
+    const focusDay = useRef(null);
     useEffect(() => {
         if (!open)
             return;
-        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)
+        const firstIndex = value && value.slice(0, 7) === `${viewY}-${String(viewM + 1).padStart(2, '0')}` ? +value.slice(8)
+            : todayIso.slice(0, 7) === `${viewY}-${String(viewM + 1).padStart(2, '0')}` ? +todayIso.slice(8)
                 : 1;
-        활성일설정(첫자리);
+        setActiveDay(firstIndex);
         // 열 때 한 번만 잡는다 — 그 뒤의 달 이동은 아래 갈무리가 맡는다
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [open]);
     useEffect(() => {
-        if (옮길곳.current == null)
+        if (focusDay.current == null)
             return;
-        const d = 옮길곳.current;
-        옮길곳.current = null;
-        격자Ref.current?.querySelector(`[data-day="${d}"]`)?.focus();
+        const d = focusDay.current;
+        focusDay.current = null;
+        gridRef.current?.querySelector(`[data-day="${d}"]`)?.focus();
     });
     /* 달이 바뀌면(나침반 단추나 연월 고르개로) 활성일이 그 달 밖일 수 있다.
        여기서는 **포커스를 안 옮긴다** — 사람은 그 단추 위에 있다. */
     useEffect(() => {
-        활성일설정((d) => Math.min(d, daysInMonth(viewY, viewM)));
+        setActiveDay((d) => Math.min(d, daysInMonth(viewY, viewM)));
     }, [viewY, viewM]);
     /* 옮길 곳을 날짜로 셈한다 — 날 넘김은 Date 에 맡기고, 달 넘김은 아래에서 말일로 조인다.
        min/max 밖으로 나가면 그 끝으로 잡는다. */
-    const 옮기기 = useCallback((다음) => {
-        let iso = toISO(다음.getFullYear(), 다음.getMonth(), 다음.getDate());
+    const moveTo = useCallback((next) => {
+        let iso = toISO(next.getFullYear(), next.getMonth(), next.getDate());
         if (min && iso < min)
             iso = min;
         if (max && iso > max)
@@ -180,47 +180,47 @@ export default function DatePicker({ value, onChange, size = 48, min, max, disab
         const [y, m, d] = iso.split('-').map(Number);
         if (y !== viewY || m - 1 !== viewM)
             setViewYM(y, m - 1);
-        활성일설정(d);
-        옮길곳.current = d;
+        setActiveDay(d);
+        focusDay.current = d;
     }, [min, max, viewY, viewM, setViewYM]);
-    const 격자키 = useCallback((e) => {
-        const 기준 = new Date(viewY, viewM, 활성일);
-        const 하루 = (n) => { 기준.setDate(기준.getDate() + n); 옮기기(기준); };
+    const onGridKeyDown = useCallback((e) => {
+        const base = new Date(viewY, viewM, activeDay);
+        const byDay = (n) => { base.setDate(base.getDate() + n); moveTo(base); };
         // 달 넘김은 **목표 달의 말일로 조인다** — 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))));
+        const byMonth = (n) => {
+            const total = base.getFullYear() * 12 + base.getMonth() + n;
+            const y = Math.floor(total / 12), m = total - y * 12;
+            moveTo(new Date(y, m, Math.min(base.getDate(), daysInMonth(y, m))));
         };
         switch (e.key) {
             case 'ArrowLeft':
-                하루(-1);
+                byDay(-1);
                 break;
             case 'ArrowRight':
-                하루(1);
+                byDay(1);
                 break;
             case 'ArrowUp':
-                하루(-7);
+                byDay(-7);
                 break;
             case 'ArrowDown':
-                하루(7);
+                byDay(7);
                 break;
             case 'Home':
-                하루(-기준.getDay());
+                byDay(-base.getDay());
                 break;
             case 'End':
-                하루(6 - 기준.getDay());
+                byDay(6 - base.getDay());
                 break;
             case 'PageUp':
-                e.shiftKey ? 달(-12) : 달(-1);
+                e.shiftKey ? byMonth(-12) : byMonth(-1);
                 break;
             case 'PageDown':
-                e.shiftKey ? 달(12) : 달(1);
+                e.shiftKey ? byMonth(12) : byMonth(1);
                 break;
             default: return;
         }
         e.preventDefault();
-    }, [viewY, viewM, 활성일, 옮기기]);
+    }, [viewY, viewM, activeDay, moveTo]);
     const selectDay = useCallback((d) => {
         if (disabled)
             return; // 열린 채 disabled 가 되면 남은 달력에서 고른 날이 그대로 나갔다
@@ -239,11 +239,11 @@ export default function DatePicker({ value, onChange, size = 48, min, max, disab
     };
     /* Tab 을 받을 날 — 활성일이 min/max 밖이라 꺼져 있으면 켜진 첫 날로. 꺼진 단추는 Tab 을 못 받아
        격자에 Tab 자리가 **하나도 없어** 키보드로 달력에 들어갈 수 없었다(값 없음 + min=내일). */
-    const 탭자리 = (() => {
-        const 끝 = daysInMonth(viewY, viewM);
-        if (활성일 >= 1 && 활성일 <= 끝 && !isDisabledDay(활성일))
-            return 활성일;
-        for (let d = 1; d <= 끝; d++)
+    const tabIndexOf = (() => {
+        const lastDay = daysInMonth(viewY, viewM);
+        if (activeDay >= 1 && activeDay <= lastDay && !isDisabledDay(activeDay))
+            return activeDay;
+        for (let d = 1; d <= lastDay; d++)
             if (!isDisabledDay(d))
                 return d;
         return -1;
@@ -259,15 +259,15 @@ export default function DatePicker({ value, onChange, size = 48, min, max, disab
     const dropdown = open ? createPortal(_jsxs("div", { ref: menuRef, id: panelId, 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) => {
+                        }, 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: gridRef, onKeyDown: onGridKeyDown, children: [DOW.map(d => (_jsx("div", { className: "date-picker__dow caption-1", children: d }, d))), cells.map((d, i) => {
                         if (d === null)
                             return _jsx("div", {}, `e${i}`);
                         const iso = toISO(viewY, viewM, d);
                         const isSelected = iso === value;
-                        const isToday = iso === 오늘ISO;
+                        const isToday = iso === todayIso;
                         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));
+                        return (_jsx("button", { type: "button", disabled: dis, "data-day": d, tabIndex: d === tabIndexOf ? 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));
                     })] })] }), document.body) : null;
     return (_jsxs("div", { className: cx('date-picker', `date-picker--s${size}`, open && 'date-picker--open', className), children: [_jsxs("button", { ref: triggerRef, type: "button", className: "date-picker__trigger body-2", onClick: () => !disabled && toggle(), disabled: disabled, "aria-haspopup": "true", "aria-expanded": open, children: [_jsx("span", { className: value ? 'date-picker__value' : 'date-picker__placeholder', children: value ? formatDisplay(value) : placeholder }), _jsx(Calendar, { size: iconSize, className: "date-picker__icon", strokeWidth: 1.5 })] }), dropdown] }));
 }

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

@@ -40,20 +40,20 @@ export default function Dialog({ open, onClose, ariaLabel, title, children, size
     useEffect(() => {
         if (!open)
             return;
-        const 돌아갈곳 = document.activeElement;
+        const returnTo = document.activeElement;
         /* 스크롤 잠금은 **공유 카운터**(Popup·TrainingPagePopup 과 같은 것)로 — 전에는 body.style.overflow 를 제 손으로
            기억했다 되돌려, Dialog 위에 Popup 을 열고 Dialog 를 먼저 닫으면 Popup 이 떠 있는데 스크롤이 풀리고, 이어 Popup 을
            닫으면 overflow:hidden 으로 영영 굳었다. */
-        const 풀기 = lockBodyScroll();
-        const 판 = surfaceRef.current;
-        rememberFocusReturn(판, 돌아갈곳);
-        판?.focus();
+        const unlock = lockBodyScroll();
+        const surface = surfaceRef.current;
+        rememberFocusReturn(surface, returnTo);
+        surface?.focus();
         return () => {
-            풀기();
+            unlock();
             // 포커스가 이 창 안이거나 갈 곳을 잃었을 때만 되돌린다 — 이미 다른 창으로 옮겨 갔으면 빼앗지 않는다(Popup 과 같다)
-            const 지금 = document.activeElement;
-            if (!지금 || 지금 === document.body || (판 && 판.contains(지금)))
-                resolveFocusReturn(돌아갈곳)?.focus?.();
+            const active = document.activeElement;
+            if (!active || active === document.body || (surface && surface.contains(active)))
+                resolveFocusReturn(returnTo)?.focus?.();
         };
     }, [open]);
     /* ESC 는 **공유 스택**에 맡긴다 — 예전에는 window 에서 직접 들었다.
@@ -76,7 +76,7 @@ export default function Dialog({ open, onClose, ariaLabel, title, children, size
     }, [open]);
     /* 바탕 누르기 — 누른 곳과 뗀 곳이 **둘 다 바탕일 때만** 닫는다(Popup 0.128.0 과 같다). 판 안에서 글자를 긁어
        고르다 바깥에서 놓으면 click 이 공통 조상(바탕)에 떨어져 창이 닫혔다. */
-    const 바탕에서누름 = useRef(false);
+    const pressedOnBackdrop = useRef(false);
     /* Tab 을 이 판 안에 가둔다 — `aria-modal="true"` 는 **낭독기에게만** 통한다.
        눈으로 보며 Tab 을 누르는 사람은 그 표시를 못 보므로, 가둠이 없으면 마지막
        단추 다음에서 **뒤 화면**으로 빠져나간다. 실제로 그랬다: 놀이터
@@ -86,11 +86,11 @@ export default function Dialog({ open, onClose, ariaLabel, title, children, size
     useFocusTrap(surfaceRef, open);
     if (!open || typeof document === 'undefined')
         return null;
-    return createPortal(_jsx("div", { className: cx('dialog', className), onPointerDown: closeOnBackdrop ? (e) => { 바탕에서누름.current = e.target === e.currentTarget; } : undefined, onMouseDown: (e) => { if (e.target === e.currentTarget)
+    return createPortal(_jsx("div", { className: cx('dialog', className), onPointerDown: closeOnBackdrop ? (e) => { pressedOnBackdrop.current = e.target === e.currentTarget; } : undefined, onMouseDown: (e) => { if (e.target === e.currentTarget)
             e.preventDefault(); }, onClick: closeOnBackdrop ? (e) => {
-            const 눌렀나 = 바탕에서누름.current;
-            바탕에서누름.current = false;
-            if (눌렀나 && e.target === e.currentTarget)
+            const pressed = pressedOnBackdrop.current;
+            pressedOnBackdrop.current = false;
+            if (pressed && e.target === e.currentTarget)
                 handleClose();
         } : undefined, children: _jsxs("div", { ref: surfaceRef, role: "dialog", "aria-modal": "true", "aria-label": title ? undefined : ariaLabel, "aria-labelledby": title ? titleId : undefined, tabIndex: -1, className: cx('dialog__surface', `dialog__surface--${size}`, contentClassName), onClick: (e) => e.stopPropagation(), children: [title ? (_jsx("div", { className: "dialog__header", children: _jsx("h2", { id: titleId, className: "dialog__title h4b", children: title }) })) : null, showClose ? (_jsx("button", { type: "button", className: "dialog__close", "aria-label": t('common.close', '닫기'), onClick: handleClose, children: _jsx(CloseIcon, {}) })) : null, _jsx("div", { className: "dialog__body", children: children })] }) }), document.body);
 }

package/dist/packages/core/src/components/Effect/EffectPartyPopperHost.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useState } from "react";
 import EffectPartyPopper from "./EffectPartyPopper";
-const 수 = (v) => (typeof v === 'number' && Number.isFinite(v) && v > 0 ? v : undefined);
+const num = (v) => (typeof v === 'number' && Number.isFinite(v) && v > 0 ? v : undefined);
 /**
  * @public 앱에 한 번 붙여 두는 폭죽 자리.
  *
@@ -14,17 +14,17 @@ const 수 = (v) => (typeof v === 'number' && Number.isFinite(v) && v > 0 ? v : u
  * - 이 자리가 앱에 없으면 이벤트는 아무 일도 안 한다.
  */
 export default function EffectPartyPopperHost({ trigger = 0, active = false }) {
-    const [터짐, set터짐] = useState(null);
+    const [burst, setBurst] = useState(null);
     useEffect(() => {
         if (typeof window === 'undefined')
             return;
-        const 받기 = (e) => {
+        const onEvent = (e) => {
             const d = (e.detail ?? {});
-            set터짐((앞) => ({ n: (앞?.n ?? 0) + 1, count: 수(d.count), strength: 수(d.strength), duration: 수(d.duration) }));
+            setBurst((prev) => ({ n: (prev?.n ?? 0) + 1, count: num(d.count), strength: num(d.strength), duration: num(d.duration) }));
         };
-        window.addEventListener('party:trigger', 받기);
-        return () => window.removeEventListener('party:trigger', 받기);
+        window.addEventListener('party:trigger', onEvent);
+        return () => window.removeEventListener('party:trigger', onEvent);
     }, []);
-    const 걷기 = useCallback(() => set터짐(null), []);
-    return (_jsxs(_Fragment, { children: [_jsx(EffectPartyPopper, { active: active, trigger: trigger }), 터짐 && (_jsx(EffectPartyPopper, { active: true, trigger: 터짐.n, count: 터짐.count, strength: 터짐.strength, duration: 터짐.duration, onComplete: 걷기 }))] }));
+    const clear = useCallback(() => setBurst(null), []);
+    return (_jsxs(_Fragment, { children: [_jsx(EffectPartyPopper, { active: active, trigger: trigger }), burst && (_jsx(EffectPartyPopper, { active: true, trigger: burst.n, count: burst.count, strength: burst.strength, duration: burst.duration, onComplete: clear }))] }));
 }

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

@@ -28,7 +28,7 @@ export default function FilterPanel({ title, titleLevel = 2, headerAction, heade
     /* 머리 아무 데나 눌러도 접힌다. 다만 **그 안의 조작부를 누른 것은 아니다** —
        `headerAction` 의 단추(초기화 등)를 누르면 그 일만 하고 판은 그대로 둔다.
        chevron 단추는 제 `onClick` 으로 접으므로 여기서 한 번 더 접지 않는다(두 번 접히면 제자리다). */
-    const 머리누름 = (e) => {
+    const onHeadClick = (e) => {
         if (!collapsible)
             return;
         const el = e.target;
@@ -44,17 +44,17 @@ export default function FilterPanel({ title, titleLevel = 2, headerAction, heade
        표 설정 판처럼 값이 아예 `WordTableBlock` 안에 있는 자리는 지을 길조차 없다(말귀 요청 ㉗).
        `headerSummary` 를 주면 그것이 이긴다 — 글월을 부르는 쪽이 쥐던 길은 그대로 열려 있다.
        접혀 있을 때만 쓰이므로 펼친 동안은 셈하지 않는다. */
-    const 기본요약 = useMemo(() => (headerSummary !== undefined || !collapsed ? '' : buildFilterSummary(sections, selected, t('common.all', '전체'))), [headerSummary, collapsed, sections, selected, t]);
-    const summaryNode = headerSummary ?? (기본요약 ? _jsx("span", { className: "filter-panel__header-summary body-3", children: 기본요약 }) : null);
+    const defaultSummary = useMemo(() => (headerSummary !== undefined || !collapsed ? '' : buildFilterSummary(sections, selected, t('common.all', '전체'))), [headerSummary, collapsed, sections, selected, t]);
+    const summaryNode = headerSummary ?? (defaultSummary ? _jsx("span", { className: "filter-panel__header-summary body-3", children: defaultSummary }) : null);
     const showHeader = title || headerAction || headerSummary || collapsible;
-    const 제목id = useId();
-    const 제목태그 = titleLevel ? `h${titleLevel}` : 'span';
+    const titleId = useId();
+    const TitleTag = titleLevel ? `h${titleLevel}` : 'span';
     return (
     /* **제목이 이 판의 이름이 된다**(말귀 요청 (57), 2026-10-02). 이름 없는 판은 지역으로
        안 잡혀, 셋이 나란히 서도 "지금 어느 판 안인지" 를 알 길이 없었다 — (51)·(54) 에서
        `ChartSection`·`TrainingCardGroup` 에 한 것과 같은 자다.
        **글자 제목일 때만 건다** — 마디를 가리키므로 글이 아닌 제목이면 이름이 안 선다. */
-    _jsxs("div", { className: cx('filter-panel', collapsible ? 'filter-panel--collapsible' : '', collapsed ? 'filter-panel--collapsed' : '', className), role: typeof title === 'string' && title ? 'group' : undefined, "aria-labelledby": typeof title === 'string' && title ? 제목id : undefined, children: [showHeader && (_jsxs("div", { className: "filter-panel__header", onClick: collapsible ? 머리누름 : undefined, children: [_jsx("div", { className: "filter-panel__title-row", children: title && _jsx(제목태그, { id: 제목id, className: "filter-panel__title h4", children: title }) }), _jsxs("div", { className: "filter-panel__header-actions", children: [collapsed ? summaryNode : headerAction, collapsible && (_jsx(Button, { htmlType: "button", size: 40, type: "dot", variant: "transparent-gray", useBorder: false, icon: collapsed ? 'chevron-down' : 'chevron-up', 
+    _jsxs("div", { className: cx('filter-panel', collapsible ? 'filter-panel--collapsible' : '', collapsed ? 'filter-panel--collapsed' : '', className), role: typeof title === 'string' && title ? 'group' : undefined, "aria-labelledby": typeof title === 'string' && title ? titleId : undefined, children: [showHeader && (_jsxs("div", { className: "filter-panel__header", onClick: collapsible ? onHeadClick : undefined, children: [_jsx("div", { className: "filter-panel__title-row", children: title && _jsx(TitleTag, { id: titleId, className: "filter-panel__title h4", children: title }) }), _jsxs("div", { className: "filter-panel__header-actions", children: [collapsed ? summaryNode : headerAction, collapsible && (_jsx(Button, { htmlType: "button", size: 40, type: "dot", variant: "transparent-gray", useBorder: false, icon: collapsed ? 'chevron-down' : 'chevron-up', 
                                 /* Button은 aria-label을 자기 ariaLabel prop으로 덮어쓴다({...rest} 뒤에
                                    aria-label={ariaLabelString}을 다시 쓴다) — kebab으로 넘기면 undefined가
                                    되어 이름이 통째로 사라진다. 저장소의 다른 호출부는 모두 ariaLabel을 쓴다.

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

@@ -15,13 +15,13 @@ export default function FilterSectionInfo({ title, items }) {
     const { anchorRect, openAt, close: handleClose } = useHoverAnchor();
     /* 터치 — 톡하면 열렸다 떼자마자 닫혀 설명을 읽을 수 없었다. 톡으로 열고 닫는다(마우스는 그대로).
        트리거를 품는 자리 — 상자를 만들지 않는(display: contents) 껍데기라 배치는 그대로다. */
-    const 자리Ref = useRef(null);
-    const 톡토글 = useTouchToggle(!!anchorRect, (next, el) => { if (next && el)
-        openAt(자리Ref.current?.querySelector('button') ?? el);
+    const anchorRef = useRef(null);
+    const touchToggle = useTouchToggle(!!anchorRect, (next, el) => { if (next && el)
+        openAt(anchorRef.current?.querySelector('button') ?? el);
     else
-        handleClose(); }, 자리Ref);
-    return (_jsxs("span", { ref: 자리Ref, style: { display: 'contents' }, children: [_jsx(Button, { htmlType: "button", size: 24, type: "dot", icon: "info", variant: "transparent-gray", useBorder: false, selected: !!anchorRect, ariaLabel: t('common.info', '설명'), onPointerEnter: (e) => { if (!isTouchPointer(e))
+        handleClose(); }, anchorRef);
+    return (_jsxs("span", { ref: anchorRef, style: { display: 'contents' }, children: [_jsx(Button, { htmlType: "button", size: 24, type: "dot", icon: "info", variant: "transparent-gray", useBorder: false, selected: !!anchorRect, ariaLabel: t('common.info', '설명'), onPointerEnter: (e) => { if (!isTouchPointer(e))
                     openAt(e.currentTarget); }, onPointerLeave: (e) => { if (!isTouchPointer(e))
-                    handleClose(); }, onClick: (e) => { 톡토글.touchPress(e.currentTarget); }, onFocus: (e) => { if (!recentlyTouched())
+                    handleClose(); }, onClick: (e) => { touchToggle.touchPress(e.currentTarget); }, onFocus: (e) => { if (!recentlyTouched())
                     openAt(e.currentTarget); }, onBlur: handleClose }), anchorRect && (_jsx(DescriptionTooltip, { title: title, items: items, showIndex: items.length > 1, anchorRect: anchorRect, onClose: handleClose }))] }));
 }

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

@@ -25,5 +25,5 @@ import Button from './Button';
  * @public
  */
 export default function GameIntro({ icon, iconSize = 56, title, titleClass = 'h2', description, tipGroups, start, className, }) {
-    return (_jsxs("div", { className: cx('game-intro', className), children: [icon != null && (_jsx("span", { className: "game-intro__icon", "aria-hidden": "true", style: { '--game-intro-icon': `${iconSize}px` }, children: icon })), _jsx("h2", { className: cx('game-intro__title', titleClass), children: title }), description != null && _jsx("p", { className: "game-intro__description body-3", children: description }), tipGroups?.map((묶음, i) => (_jsxs("div", { className: "game-intro__tips", children: [묶음.title != null && _jsx("span", { className: "game-intro__tips-title body-3", children: 묶음.title }), 묶음.tips.map((팁, j) => (_jsxs("span", { className: "game-intro__tip body-3", children: [팁.icon != null && _jsx("span", { "aria-hidden": "true", children: 팁.icon }), _jsx("span", { children: 팁.text })] }, j)))] }, i))), start && (_jsx(Button, { htmlType: "button", className: start.className, variant: "main", color: start.color, size: 48, width: "100%", disabled: start.disabled, onClick: start.onClick, children: start.label }))] }));
+    return (_jsxs("div", { className: cx('game-intro', className), children: [icon != null && (_jsx("span", { className: "game-intro__icon", "aria-hidden": "true", style: { '--game-intro-icon': `${iconSize}px` }, children: icon })), _jsx("h2", { className: cx('game-intro__title', titleClass), children: title }), description != null && _jsx("p", { className: "game-intro__description body-3", children: description }), tipGroups?.map((group, i) => (_jsxs("div", { className: "game-intro__tips", children: [group.title != null && _jsx("span", { className: "game-intro__tips-title body-3", children: group.title }), group.tips.map((tip, j) => (_jsxs("span", { className: "game-intro__tip body-3", children: [tip.icon != null && _jsx("span", { "aria-hidden": "true", children: tip.icon }), _jsx("span", { children: tip.text })] }, j)))] }, i))), start && (_jsx(Button, { htmlType: "button", className: start.className, variant: "main", color: start.color, size: 48, width: "100%", disabled: start.disabled, onClick: start.onClick, children: start.label }))] }));
 }

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

@@ -1,5 +1,5 @@
 import './HearingDeviceInfo.css';
-export type DeviceSide = '좌' | '우';
+export type DeviceSide = 'left' | 'right';
 export interface DeviceEntry {
     brand: string;
     device: string;
@@ -10,10 +10,10 @@ export interface DeviceEntry {
     wornDay: string;
 }
 interface HearingDeviceInfoProps {
-    devices: {
-        좌: DeviceEntry | null;
-        우: DeviceEntry | null;
-    };
+    /** 쪽별로 지금 끼고 있는 기기 — 열쇠는 `DeviceSide` **값**(`'left'`·`'right'`)이다.
+     *  그 값은 서버의 `side` 열과 그대로 오가는 **자료**라 건드리지 않았고, 공개 자리에 보이는
+     *  **모양만** 영어 이름으로 돌렸다(`Record`). 값까지 바꾸는 것은 DB 결정이다(사용자 지시 2026-10-13). */
+    devices: Record<DeviceSide, DeviceEntry | null>;
     onAddDevice: (side: DeviceSide) => void;
     onOpenList: (side: DeviceSide) => void;
     onRemoveDevice: (side: DeviceSide) => void;

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

@@ -6,9 +6,9 @@ import { formatWornDate } from '../utils/wornDate';
 import './HearingDeviceInfo.css';
 export default function HearingDeviceInfo({ devices, onAddDevice, onOpenList, onRemoveDevice }) {
     const { t, i18n } = useTranslation(); /* i18n.language — 착용일이 보는 말을 따른다((118)) */
-    return (_jsxs("div", { className: "hearing-device-info", children: [_jsx("div", { className: "hearing-device-info__title body-3", children: t('customers.device.title', '청각재활기기') }), _jsx("div", { className: "hearing-device-info__row", children: ['좌', '우'].map(side => {
+    return (_jsxs("div", { className: "hearing-device-info", children: [_jsx("div", { className: "hearing-device-info__title body-3", children: t('customers.device.title', '청각재활기기') }), _jsx("div", { className: "hearing-device-info__row", children: ['left', 'right'].map(side => {
                     const d = devices[side];
-                    const sideLabel = side === '좌' ? t('device.direction.left', '좌') : t('device.direction.right', '우');
+                    const sideLabel = side === 'left' ? t('device.direction.left', '좌') : t('device.direction.right', '우');
                     return (_jsxs("div", { className: "hearing-device-info__side", children: [_jsx("span", { className: "hearing-device-info__side-label body-3", children: sideLabel }), d ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "hearing-device-info__device", children: [_jsx("span", { className: "hearing-device-info__device-name body-3", children: d.brand }), _jsxs("span", { className: "hearing-device-info__device-detail", children: [d.device, d.fitType ? ` · ${d.fitType}` : ''] }), d.productName && _jsx("span", { className: "hearing-device-info__device-product", children: d.productName }), formatWornDate(d.wornYear, d.wornMonth, d.wornDay, i18n.language) && _jsx("span", { className: "hearing-device-info__device-date", children: formatWornDate(d.wornYear, d.wornMonth, d.wornDay, i18n.language) })] }), _jsxs("div", { className: "hearing-device-info__actions", children: [_jsx(Button, { htmlType: "button", size: 40, type: "dot", icon: "plus", onClick: () => onAddDevice(side), showTooltipInfo: t('device.addNew', '새 기기 추가'), ariaLabel: t('device.addNew', '새 기기 추가') }), _jsx(Button, { htmlType: "button", size: 40, type: "dot", icon: "list", onClick: () => onOpenList(side), showTooltipInfo: t('device.selectFromList', '목록에서 선택'), ariaLabel: t('device.selectFromList', '목록에서 선택') }), _jsx(Button, { htmlType: "button", size: 40, type: "dot", icon: "x", variant: "danger", onClick: () => onRemoveDevice(side), showTooltipInfo: t('device.removeDevice', '착용 해제'), ariaLabel: t('device.removeDevice', '착용 해제') })] })] })) : (_jsxs("div", { className: "hearing-device-info__actions", children: [_jsx(Button, { htmlType: "button", size: 40, type: "dot", icon: "plus", onClick: () => onAddDevice(side), showTooltipInfo: t('device.addNew', '새 기기 추가'), ariaLabel: t('device.addNew', '새 기기 추가') }), _jsx(Button, { htmlType: "button", size: 40, type: "dot", icon: "list", onClick: () => onOpenList(side), showTooltipInfo: t('device.selectFromList', '목록에서 선택'), ariaLabel: t('device.selectFromList', '목록에서 선택') })] }))] }, side));
                 }) })] }));
 }

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

@@ -23,10 +23,10 @@ export default function Icon(props) {
     const createWrapper = (children, extraProps = {}) => (_jsx("span", { className: wrapperClass, style: wrapperStyle, ...extraProps, children: children }));
     /* 이미지(파일 경로)에도 size 를 한 변 픽셀로 준다 — 전에는 lucide·마스크만 size 를 읽어 PNG·<img> 로 그린 SVG 는
        원본 크기로 떴다. 줄 때만 박고(object-fit: contain 으로 비율 유지), 안 주면 지금처럼 클래스·원본 크기. */
-    const 이미지크기 = typeof size === 'number' ? { width: size, height: size, objectFit: 'contain' } : null;
+    const imageSize = typeof size === 'number' ? { width: size, height: size, objectFit: 'contain' } : null;
     const createImage = (src, extraProps = {}) => (
     // 글자가 아닌 label(요소)은 alt 로 못 쓴다 — String() 하면 "[object Object]" 가 읽혔다
-    _jsx("img", { src: src, alt: typeof label === 'string' ? label : (typeof label === 'number' ? String(label) : ''), className: defaultImgClass, ...extraProps, style: 이미지크기 ? { ...extraProps.style, ...이미지크기 } : extraProps.style }));
+    _jsx("img", { src: src, alt: typeof label === 'string' ? label : (typeof label === 'number' ? String(label) : ''), className: defaultImgClass, ...extraProps, style: imageSize ? { ...extraProps.style, ...imageSize } : extraProps.style }));
     if (!icon)
         return null;
     if (typeof icon !== 'string')

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

@@ -9,12 +9,12 @@ import './ItemActions.css';
  * 세 곳에 베껴져 있을 때 실제로 갈라진 것이 이 표의 값들이었다 — 링크 단추의 조건이
  * 둘은 `&&`, 하나는 늘 세움이었다. 한자리에 있으면 갈라질 자리가 없다.
  */
-const 차례 = [
-    { 열쇠: 'edit', icon: 'edit-2', 닫고할까: true },
-    { 열쇠: 'duplicate', icon: 'copy', 닫고할까: false },
-    { 열쇠: 'publish', icon: 'book-marked', 닫고할까: false },
-    { 열쇠: 'copyLink', icon: 'link', 닫고할까: false },
-    { 열쇠: 'remove', icon: 'trash-2', 닫고할까: true },
+const order = [
+    { key: 'edit', icon: 'edit-2', closeFirst: true },
+    { key: 'duplicate', icon: 'copy', closeFirst: false },
+    { key: 'publish', icon: 'book-marked', closeFirst: false },
+    { key: 'copyLink', icon: 'link', closeFirst: false },
+    { key: 'remove', icon: 'trash-2', closeFirst: true },
 ];
 /**
  * **보고 있는 한 항목에 하는 일들** — 창 바닥 왼쪽에 서는 아이콘 단추 줄.
@@ -67,16 +67,16 @@ const 차례 = [
  */
 export default function ItemActions(props) {
     const { onClose, className } = props;
-    return (_jsx("div", { className: cx('item-actions', className), children: 차례.map(({ 열쇠, icon, 닫고할까 }) => {
-            const 받은것 = props[열쇠];
-            if (!받은것)
+    return (_jsx("div", { className: cx('item-actions', className), children: order.map(({ key, icon, closeFirst }) => {
+            const given = props[key];
+            if (!given)
                 return null;
-            const 할일 = 열쇠 === 'publish'
-                ? (받은것.published
-                    ? 받은것.unpublish
-                    : 받은것.publish)
-                : 받은것;
-            return (_jsx(Button, { htmlType: "button", size: 40, type: "dot", icon: icon, ariaLabel: 할일.label, showTooltipInfo: 할일.label, onClick: () => { if (닫고할까)
-                    onClose(); 할일.onClick(); } }, 열쇠));
+            const action = key === 'publish'
+                ? (given.published
+                    ? given.unpublish
+                    : given.publish)
+                : given;
+            return (_jsx(Button, { htmlType: "button", size: 40, type: "dot", icon: icon, ariaLabel: action.label, showTooltipInfo: action.label, onClick: () => { if (closeFirst)
+                    onClose(); action.onClick(); } }, key));
         }) }));
 }

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

@@ -34,21 +34,21 @@ export default function LandingHeader({ logo, logoAlt = '', logoHref, links = []
         if (!open)
             return;
         // 서랍 안에 포커스가 있으면 햄버거로 돌려 준다 — 서랍이 hidden 이 되며 포커스가 숨은 링크에 남아 갈 곳을 잃었다
-        const 풀기 = pushEsc(() => {
-            const 서랍 = document.getElementById(drawerId);
-            if (서랍 && 서랍.contains(document.activeElement))
+        const popEsc = pushEsc(() => {
+            const drawer = document.getElementById(drawerId);
+            if (drawer && drawer.contains(document.activeElement))
                 toggleRef.current?.focus();
             setOpen(false);
         });
         const mq = typeof window !== 'undefined' && window.matchMedia ? window.matchMedia('(min-width: 961px)') : null;
-        const 넓어짐 = (e) => { if (e.matches)
+        const onWiden = (e) => { if (e.matches)
             setOpen(false); };
         if (mq) {
             if (mq.matches)
                 setOpen(false);
-            mq.addEventListener?.('change', 넓어짐);
+            mq.addEventListener?.('change', onWiden);
         }
-        return () => { 풀기(); mq?.removeEventListener?.('change', 넓어짐); };
+        return () => { popEsc(); mq?.removeEventListener?.('change', onWiden); };
     }, [open, drawerId]);
     const innerClass = containerClassName
         ? `${containerClassName} landing-header__inner`