@ihabdevteam/core 0.322.0 → 0.324.0

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

@@ -23,13 +23,13 @@ export default function BulkBar({ count, actions, onClear, clearLabel: clearLabe
     const prevShowRef = useRef(show);
     useLayoutEffect(() => {
         const bar = barRef.current;
-        const 전 = prevShowRef.current;
+        const before = prevShowRef.current;
         prevShowRef.current = show;
-        if (show && !전) {
+        if (show && !before) {
             const a = typeof document !== 'undefined' ? document.activeElement : null;
             openerRef.current = a && a !== document.body && !bar?.contains(a) ? a : null;
         }
-        else if (!show && 전 && bar && bar.contains(document.activeElement)) {
+        else if (!show && before && bar && bar.contains(document.activeElement)) {
             moveFocusOutside(bar, openerRef.current);
         }
     }, [show]);
@@ -38,35 +38,35 @@ export default function BulkBar({ count, actions, onClear, clearLabel: clearLabe
        문턱이 하나라 **매 프레임 오갔다**(말귀 단어 고름 막대, 칩 7~12개). 되돌릴 때는 "가로일 때의 칸 폭" 에 한 줄로 들어가는지로
        본다(여유). 가로일 때 잰 칸 폭을 기억해 둔다. */
     const stackedRef = useRef(false);
-    const 가로칸폭Ref = useRef(null);
+    const rowWidthRef = useRef(null);
     useEffect(() => {
         const el = contentRef.current;
         if (!el)
             return;
-        const 두기 = (v) => { stackedRef.current = v; setStacked(v); };
+        const setStackedBoth = (v) => { stackedRef.current = v; setStacked(v); };
         const check = () => {
             const row = el.firstElementChild ?? el;
             const kids = Array.from(row.children);
             if (kids.length < 2) {
-                두기(false);
+                setStackedBoth(false);
                 return;
             }
             const top = kids[0].offsetTop;
-            const 넘침 = kids.some(k => k.offsetTop !== top);
+            const wrapped = kids.some(k => k.offsetTop !== top);
             if (!stackedRef.current) {
-                가로칸폭Ref.current = el.clientWidth;
-                if (넘침)
-                    두기(true);
+                rowWidthRef.current = el.clientWidth;
+                if (wrapped)
+                    setStackedBoth(true);
                 return;
             }
-            if (넘침)
+            if (wrapped)
                 return;
             // 쌓인 채 한 줄에 들어간다 — 가로로 돌렸을 때의 칸에도 들어갈 때만 되돌린다
             const first = kids[0], last = kids[kids.length - 1];
-            const 한줄폭 = last.offsetLeft + last.offsetWidth - first.offsetLeft;
-            const 가로폭 = 가로칸폭Ref.current;
-            if (가로폭 == null || 한줄폭 <= 가로폭)
-                두기(false);
+            const rowWidth = last.offsetLeft + last.offsetWidth - first.offsetLeft;
+            const storedRowWidth = rowWidthRef.current;
+            if (storedRowWidth == null || rowWidth <= storedRowWidth)
+                setStackedBoth(false);
         };
         check();
         // ResizeObserver 가 없는 환경(구형 브라우저·SSR·테스트 러너)에서는 생성자 호출이
@@ -77,19 +77,19 @@ export default function BulkBar({ count, actions, onClear, clearLabel: clearLabe
         obs.observe(el);
         /* 막대 자체의 폭이 바뀌면(창 크기뿐 아니라 옆 메뉴 접기로 본문 열이 넓어질 때도) 기억한 가로 칸 폭은 옛 것이다 — 버리고 다시
            잰다. 안 그러면 넘친 순간의 좁은 폭을 들고 있어 넓어져도 쌓임이 영영 안 풀렸다. 단추 배치로는 막대 폭이 안 바뀐다. */
-        const 막대 = el.parentElement;
-        let 막대폭 = 막대?.clientWidth ?? 0;
-        const 막대obs = new ResizeObserver(() => {
-            const w = 막대?.clientWidth ?? 0;
-            if (w === 막대폭)
+        const bar = el.parentElement;
+        let barWidth = bar?.clientWidth ?? 0;
+        const barObserver = new ResizeObserver(() => {
+            const w = bar?.clientWidth ?? 0;
+            if (w === barWidth)
                 return;
-            막대폭 = w;
-            가로칸폭Ref.current = null;
+            barWidth = w;
+            rowWidthRef.current = null;
             check();
         });
-        if (막대)
-            막대obs.observe(막대);
-        return () => { obs.disconnect(); 막대obs.disconnect(); };
+        if (bar)
+            barObserver.observe(bar);
+        return () => { obs.disconnect(); barObserver.disconnect(); };
     }, [content, count]);
     return (_jsxs("div", { ref: barRef, className: `bulk-bar ${show ? 'bulk-bar--visible' : ''}`, 
         /* 숨은 막대는 CSS 로 투명(opacity 0)할 뿐 DOM 에 그대로 있다 — 예전에는 그 안의

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

@@ -74,11 +74,11 @@ function ButtonInner(props, forwardedRef) {
         }
     }, [htmlType, label]);
     /* 안쪽 ref 와 부르는 쪽 ref(객체·함수)를 한 요소에 함께 건다 */
-    const 바깥ref = useRef(forwardedRef);
-    바깥ref.current = forwardedRef;
-    const 요소잇기 = useCallback((el) => {
+    const outerRef = useRef(forwardedRef);
+    outerRef.current = forwardedRef;
+    const attachEl = useCallback((el) => {
         btnRef.current = el;
-        const r = 바깥ref.current;
+        const r = outerRef.current;
         if (typeof r === 'function')
             r(el);
         else if (r)
@@ -114,14 +114,14 @@ function ButtonInner(props, forwardedRef) {
         if (prevDisabledRef.current && !disabledProp && btnRef.current) {
             const btn = btnRef.current;
             /* 마우스로 잡힌 초점만 푼다 — 키보드로 누른 단추(모두 듣기 등)가 막혔다 풀리는 순간 무조건 blur 해 초점이 body 로 빠졌다 */
-            let 마우스초점 = false;
+            let focusByMouse = false;
             try {
-                마우스초점 = btn.matches(':focus:not(:focus-visible)');
+                focusByMouse = btn.matches(':focus:not(:focus-visible)');
             }
             catch {
-                마우스초점 = false;
+                focusByMouse = false;
             }
-            if (마우스초점)
+            if (focusByMouse)
                 btn.blur();
             btn.style.pointerEvents = 'none';
             const id = requestAnimationFrame(() => {
@@ -157,7 +157,7 @@ function ButtonInner(props, forwardedRef) {
     };
     /* 떠날 때 비제어 선택 표시를 푼다 — **toggleable 은 제외**(눌러 켠 것이 포인터가 떠나면 꺼졌다).
        blur 도 이 정리를 쓰지만 소비자의 onMouseLeave 는 부르지 않는다(포커스를 잃은 것은 마우스가 떠난 것이 아니다). */
-    const 떠남정리 = (e) => {
+    const onLeaveCleanup = (e) => {
         if (typeof selected !== 'boolean' && !toggleable)
             setInternalSelected(false);
         e.currentTarget.blur();
@@ -167,14 +167,14 @@ function ButtonInner(props, forwardedRef) {
             return;
         if (typeof rest.onMouseLeave === 'function')
             rest.onMouseLeave(e);
-        떠남정리(e);
+        onLeaveCleanup(e);
     };
     const handleClickInternal = (e) => {
         if (tooltipOnly && hasTooltip)
-            톡토글.touchPress(e.currentTarget);
+            touchToggle.touchPress(e.currentTarget);
         if (disabledProp) {
             if (hasTooltip)
-                톡토글.touchPress(e.currentTarget);
+                touchToggle.touchPress(e.currentTarget);
             /* native disabled 가 아닌 막힌 단추(초점 유지·onDisabledClick)는 click 이 온다 — 폼 안이면 제출되지 않게 기본 동작을 막는다 */
             e.preventDefault();
             onDisabledClick?.(e);
@@ -205,7 +205,7 @@ function ButtonInner(props, forwardedRef) {
        **막힌 단추·tooltipOnly 칩**은 톡으로 열고 닫는다(막힌 단추는 click 이 안 와 pointerup, 포인터조차 안 오면 감싼 요소의 touchend).
        누르는 단추(삭제·재생 등)는 터치에서 툴팁을 띄우지 않는다 — 누르면 할 일을 하고 끝난다. 마우스 동작은 그대로. */
     const hasTooltip = Boolean(showTooltipInfo || tooltipDescription);
-    const 톡토글 = useTouchToggle(tooltipVisible, (next) => { if (next)
+    const touchToggle = useTouchToggle(tooltipVisible, (next) => { if (next)
         showTooltipFn();
     else
         hideTooltipFn(); }, btnRef, { enabled: hasTooltip && (disabledProp || tooltipOnly), fallbackOnParent: hasTooltip && disabledProp });
@@ -262,7 +262,7 @@ function ButtonInner(props, forwardedRef) {
     /* href 가 있고 비활성이 아니면 링크로 렌더한다. */
     const isLink = !!href && !disabledProp;
     const Root = (isLink ? 'a' : 'button');
-    return (_jsxs(_Fragment, { children: [_jsxs(Root, { ...restProps, ref: 요소잇기, ...(isLink
+    return (_jsxs(_Fragment, { children: [_jsxs(Root, { ...restProps, ref: attachEl, ...(isLink
                     ? { href, target, rel: rel ?? (target === '_blank' ? 'noreferrer' : undefined) }
                     : { type: htmlType ?? 'button', disabled: disabledProp && !onDisabledClick && !hasFocus }), className: classes, "aria-pressed": ariaPressed, "aria-expanded": typeof ariaExpanded === 'boolean' ? ariaExpanded : rest['aria-expanded'], "aria-controls": ariaControls ?? rest['aria-controls'], "aria-label": ariaLabelString, "aria-disabled": disabledProp && (isLink || !!onDisabledClick || hasFocus) ? true : undefined, "aria-describedby": ariaDescribedBy, style: style, onClick: handleClickInternal, onMouseLeave: handleMouseLeave, onPointerEnter: (e) => {
                     if (!isTouchPointer(e))
@@ -277,7 +277,7 @@ function ButtonInner(props, forwardedRef) {
                 }, onPointerUp: (e) => {
                     // 막힌 단추는 click 이 오지 않는다 — 톡을 뗄 때 뒤집는다
                     if (disabledProp && hasTooltip)
-                        톡토글.touchPress(e.currentTarget);
+                        touchToggle.touchPress(e.currentTarget);
                     if (!disabledProp && typeof rest.onPointerUp === 'function')
                         rest.onPointerUp(e);
                 }, onFocus: (e) => {
@@ -290,7 +290,7 @@ function ButtonInner(props, forwardedRef) {
                 }, onBlur: (e) => {
                     setHasFocus(false);
                     if (!disabledProp)
-                        떠남정리(e);
+                        onLeaveCleanup(e);
                     hideTooltipFn();
                     if (!disabledProp && typeof rest.onBlur === 'function')
                         rest.onBlur(e);

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

@@ -15,9 +15,9 @@ export default function Calendar({ visits = [], onVisitClick, onVisitMove, onDay
     const DOW = useMemo(() => t('calendar.dow', { returnObjects: true }), [t]);
     /* '오늘' 은 KST 의 날 — 방문 날짜가 KST 달력(toKstYmd)이라, 기기 달력으로 열면 해외 기기에서 오늘 방문이 안 보이는 달에 있고
        오늘 표시가 다른 날에 붙었다(해외 기기 공식 지원) */
-    const 오늘Ymd = todayYmdOr(today);
-    const [year, setYear] = useState(() => Number(오늘Ymd.slice(0, 4)));
-    const [month, setMonth] = useState(() => Number(오늘Ymd.slice(5, 7)) - 1);
+    const todayYmd = todayYmdOr(today);
+    const [year, setYear] = useState(() => Number(todayYmd.slice(0, 4)));
+    const [month, setMonth] = useState(() => Number(todayYmd.slice(5, 7)) - 1);
     const [dragOverDate, setDragOverDate] = useState(null);
     const dragVisitId = useRef(null);
     const visitsByDate = useMemo(() => {
@@ -54,7 +54,7 @@ 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) => fmtDate(d) === 오늘Ymd;
+    const isToday = (d) => fmtDate(d) === todayYmd;
     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}`);
@@ -62,7 +62,7 @@ export default function Calendar({ visits = [], onVisitClick, onVisitMove, onDay
                         const dateKey = fmtDate(day);
                         const dayVisits = visitsByDate[dateKey] ?? [];
                         /* 낭독기에 나가는 '며칠' — 보는 locale 을 따라 글자꼴만 바뀌고 가리키는 날은 KST 하나다(utils/date 머리글) */
-                        const 날짜말 = formatDateLocale(dateKey, i18n.language);
+                        const dateLabel = formatDateLocale(dateKey, i18n.language);
                         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, "aria-current": isToday(day) ? 'date' : undefined, onClick: onDayClick ? () => onDayClick(dateKey) : undefined, 
                             /* `<div role="button">` 은 브라우저가 Enter·Space 를 눌림으로 바꿔 주지 않는다 */
@@ -93,20 +93,20 @@ export default function Calendar({ visits = [], onVisitClick, onVisitMove, onDay
                                        드문 자리가 아니다: 375 에서 칸이 37px, **1189 에서도 111px** 이라 둘 다
                                        이 꼴이 선다. 넓은 칸의 이름표는 멀쩡해서 그쪽만 보면 안 보인다.
                                        갈래가 하나면 그 갈래 말로, 섞였으면 갈라 센다. */
-                                    const 갈래 = [
-                                        { key: 'visited', 말: t('calendar.legend.visited', '방문'),
-                                            수: dayVisits.filter(v => (v.status ?? 'visited') === 'visited').length },
-                                        { key: 'scheduled', 말: t('calendar.legend.scheduled', '예약'),
-                                            수: dayVisits.filter(v => v.status === 'scheduled').length },
-                                        { key: 'noVisit', 말: t('calendar.legend.noVisit', '미방문'),
-                                            수: dayVisits.filter(v => v.status === 'noVisit').length },
-                                    ].filter(g => g.수 > 0);
+                                    const kinds = [
+                                        { key: 'visited', label: t('calendar.legend.visited', '방문'),
+                                            count: dayVisits.filter(v => (v.status ?? 'visited') === 'visited').length },
+                                        { key: 'scheduled', label: t('calendar.legend.scheduled', '예약'),
+                                            count: dayVisits.filter(v => v.status === 'scheduled').length },
+                                        { key: 'noVisit', label: t('calendar.legend.noVisit', '미방문'),
+                                            count: dayVisits.filter(v => v.status === 'noVisit').length },
+                                    ].filter(g => g.count > 0);
                                     /* 방문뿐인 날은 전 글귀 그대로 간다 — 그 열쇠의 뜻("방문 N건")이 실제로 맞는
                                        자리이고, 부르는 쪽이 덮어 둔 글도 그대로 산다. */
-                                    const 센말 = 갈래.length === 1 && 갈래[0].key === 'visited'
+                                    const singleKind = kinds.length === 1 && kinds[0].key === 'visited'
                                         ? t('calendar.visitCount', { count: dayVisits.length, defaultValue: '방문 {{count}}건' })
-                                        : 갈래.map(g => t('calendar.statusCount', { label: g.말, count: g.수, defaultValue: '{{label}} {{count}}건' })).join(' · ');
-                                    return (_jsxs("span", { className: "calendar-cell__visit-count caption-1", "aria-label": `${날짜말} ${센말}`, children: [갈래.map(g => (_jsx("span", { className: `calendar-cell__visit-dot calendar-cell__visit-dot--${g.key}`, "aria-hidden": "true" }, g.key))), dayVisits.length] }));
+                                        : kinds.map(g => t('calendar.statusCount', { label: g.label, count: g.count, defaultValue: '{{label}} {{count}}건' })).join(' · ');
+                                    return (_jsxs("span", { className: "calendar-cell__visit-count caption-1", "aria-label": `${dateLabel} ${singleKind}`, children: [kinds.map(g => (_jsx("span", { className: `calendar-cell__visit-dot calendar-cell__visit-dot--${g.key}`, "aria-hidden": "true" }, g.key))), dayVisits.length] }));
                                 })(), _jsx("div", { className: "calendar-cell__badges", children: dayVisits.map((v, vi) => (_jsxs("div", { draggable: !!onVisitMove, className: `calendar-visit-badge${v.status === 'noVisit' ? ' calendar-visit-badge--no-visit' : v.status === 'scheduled' ? ' calendar-visit-badge--scheduled' : ''}${onVisitClick ? ' calendar-visit-badge--clickable' : ''}${onVisitMove ? ' calendar-visit-badge--draggable' : ''}`, onDragStart: onVisitMove ? (e) => {
                                             dragVisitId.current = v.id;
                                             e.dataTransfer.effectAllowed = 'move';
@@ -118,7 +118,7 @@ export default function Calendar({ visits = [], onVisitClick, onVisitMove, onDay
                                             // 이름을 대체하므로 낭독기에는 "12시 55분 지한 예약" 만 가고, 어느 날 것인지는
                                             // 안 간다. 격자 꼴(`gridcell`)로 날을 함께 읽히는 길도 있지만 그건 화살표
                                             // 이동까지 약속하는 것이라, 지금은 이름 안에 날을 적는다(말귀 요청 (60)②).
-                                            날짜말,
+                                            dateLabel,
                                             v.time ? formatTimeHM(v.time, t) : null,
                                             v.customer,
                                             t(v.status === 'noVisit' ? 'calendar.legend.noVisit'

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

@@ -34,9 +34,9 @@ export default function ChartSection({ title, titleClassName = 'h3', titleLevel
     const secRef = useRef(null);
     /* 설명 툴팁 — StatChart 와 같은 결(카드 사각형 기준, 포인터가 나가거나 초점이 빠지면 닫힘).
        hover 전용이면 키보드로는 볼 수 없어 초점에도 연다. */
-    const { anchorRect: 설명자리, openAt: 설명열기, close: 설명닫기 } = useHoverAnchor();
-    const 설명보이기 = useCallback(() => { if (tooltip && secRef.current)
-        설명열기(secRef.current); }, [tooltip, 설명열기]);
+    const { anchorRect: tipRect, openAt: openTip, close: closeTip } = useHoverAnchor();
+    const showTip = useCallback(() => { if (tooltip && secRef.current)
+        openTip(secRef.current); }, [tooltip, openTip]);
     /* 좁은지는 **카드 제 폭** 으로 잰다 — 부르는 쪽이 격자 칸 폭으로 대신 재면 두 칸을 차지하는 카드에서 틀린다.
        ResizeObserver 가 없는 환경(구형·SSR)에서는 접지 않는다(넓은 쪽이 기본).
   
@@ -45,29 +45,29 @@ export default function ChartSection({ title, titleClassName = 'h3', titleLevel
        프레임 동안 머리가 한 줄 늘어 카드가 부풀었다 — 말귀 실측 2026-09-17: 머리 32 → 70 → 32px,
        섹션 342 → 380 → 342px, 페이지 바닥이 38px 출렁(layout-shift 로 잡힘).
        뒤따르는 폭 변화는 ResizeObserver 가 그대로 따라간다. */
-    const [좁음, set좁음] = useState(false);
+    const [isNarrow, setIsNarrow] = useState(false);
     useIsoLayoutEffect(() => {
         const el = secRef.current;
         if (!el || !headSegment)
             return;
-        const 재기 = (w) => set좁음(w > 0 && w < collapseBelow);
-        재기(el.clientWidth);
+        const measure = (w) => setIsNarrow(w > 0 && w < collapseBelow);
+        measure(el.clientWidth);
         if (typeof ResizeObserver === 'undefined')
             return;
-        const ro = new ResizeObserver(entries => 재기(entries[0].contentRect.width));
+        const ro = new ResizeObserver(entries => measure(entries[0].contentRect.width));
         ro.observe(el);
         return () => ro.disconnect();
     }, [headSegment, collapseBelow]);
-    const [메뉴자리, set메뉴자리] = useState(null);
-    const 메뉴닫기 = useCallback(() => set메뉴자리(null), []);
-    const 메뉴열기 = useCallback((e) => {
+    const [menuRect, setMenuRect] = useState(null);
+    const closeMenu = useCallback(() => setMenuRect(null), []);
+    const openMenu = useCallback((e) => {
         const r = e.currentTarget.getBoundingClientRect();
-        set메뉴자리(prev => (prev ? null : { left: r.left, right: r.right, top: r.top, bottom: r.bottom, width: r.width, height: r.height, x: r.x, y: r.y }));
+        setMenuRect(prev => (prev ? null : { left: r.left, right: r.right, top: r.top, bottom: r.bottom, width: r.width, height: r.height, x: r.x, y: r.y }));
     }, []);
-    const 접힘 = !!headSegment && 좁음;
-    useEffect(() => { if (!접힘)
-        set메뉴자리(null); }, [접힘]);
-    const 메뉴항목 = headSegment
+    const collapsed = !!headSegment && isNarrow;
+    useEffect(() => { if (!collapsed)
+        setMenuRect(null); }, [collapsed]);
+    const menuItems = headSegment
         ? [
             ...headSegment.options.map(o => ({
                 label: o.label,
@@ -82,7 +82,7 @@ export default function ChartSection({ title, titleClassName = 'h3', titleLevel
         ]
         : [];
     /* 누르는 카드 — 머리의 단추·고르개를 눌렀을 때까지 카드가 열리면 안 된다(그 누름은 제 일을 한다) */
-    const 카드누름 = useCallback((e) => {
+    const onCardClick = useCallback((e) => {
         if (!onClick)
             return;
         const t = e.target;
@@ -90,7 +90,7 @@ export default function ChartSection({ title, titleClassName = 'h3', titleLevel
             return;
         onClick();
     }, [onClick]);
-    const 카드키 = useCallback((e) => {
+    const onCardKeyDown = useCallback((e) => {
         if (!onClick)
             return;
         if (e.target !== e.currentTarget)
@@ -100,21 +100,21 @@ export default function ChartSection({ title, titleClassName = 'h3', titleLevel
             onClick();
         }
     }, [onClick]);
-    const 오른쪽 = typeof headRight === 'function' ? headRight({ collapsed: 접힘 }) : headRight;
+    const rightNode = typeof headRight === 'function' ? headRight({ collapsed: collapsed }) : headRight;
     /* 제목(과 `disc`) 아래 수 — 차트 카드(BarChart·RingChart)가 쓰는 `ChartTotal` 그 꼴을 그대로 쓴다.
        같은 자리에 두 모양이 생기면 카드마다 눈금이 달라진다(설명 `disc` 를 머리 아래 한 줄로 모은 것과 같은 까닭).
        0.176.0 까지는 머리 오른쪽에 한 줄로 섰다 — 사용자가 차트 카드의 그 꼴로 정했다(2026-09-17). */
-    const 수줄 = (totalNum != null || totalLabel) ? (_jsxs(ChartTotal, { label: totalLabel, children: [totalNum != null && _jsx("span", { className: "barchart-total__num h0", children: totalNum }), totalUnit && _jsx("span", { className: "barchart-total__unit h5", children: totalUnit })] })) : null;
+    const totalRow = (totalNum != null || totalLabel) ? (_jsxs(ChartTotal, { label: totalLabel, children: [totalNum != null && _jsx("span", { className: "barchart-total__num h0", children: totalNum }), totalUnit && _jsx("span", { className: "barchart-total__unit h5", children: totalUnit })] })) : null;
     /* 머리 오른쪽에는 **고르개와 `headRight` 만** 남는다 — 고르개가 먼저, 상세보기 단추가 오른쪽 끝(사용자 지시 2026-09-17) */
-    const 머리오른쪽 = (오른쪽 || headSegment) ? (_jsxs("div", { className: "manager-section__head-right", children: [headSegment && (접힘 ? (_jsx(Button, { htmlType: "button", size: 32, type: "dot", icon: "ellipsis", ariaLabel: headSegment.ariaLabel ?? t('common.more', '더보기'), showTooltipInfo: headSegment.ariaLabel ?? t('common.more', '더보기'), "aria-haspopup": "menu", "aria-expanded": !!메뉴자리, onClick: 메뉴열기 })) : (_jsx(SegmentedControl, { size: 32, ariaLabel: headSegment.ariaLabel, options: headSegment.options.map(o => ({ key: o.key, label: o.label, disabled: o.disabled })), value: headSegment.value, onChange: headSegment.onChange }))), 오른쪽] })) : null;
-    const 제목id = useId();
-    const 제목태그 = titleLevel ? `h${titleLevel}` : 'div';
-    return (_jsxs("section", { ref: secRef, className: ['manager-section', inGrid && 'manager-section--grid', onClick && 'manager-section--clickable', className].filter(Boolean).join(' '), onClick: onClick ? 카드누름 : undefined, onKeyDown: onClick ? 카드키 : undefined, onPointerEnter: tooltip ? 설명보이기 : undefined, onPointerLeave: tooltip ? 설명닫기 : undefined, onFocus: tooltip ? 설명보이기 : undefined, onBlur: tooltip ? 설명닫기 : undefined, role: onClick ? 'button' : undefined, tabIndex: onClick ? 0 : undefined, "aria-label": onClick ? (ariaLabel ?? (typeof title === 'string' ? title : undefined)) : undefined, "aria-labelledby": !onClick && title != null ? 제목id : undefined, children: [tooltip && 설명자리 && (_jsx(TooltipInfo, { anchorRect: {
-                    left: 설명자리.left,
-                    top: 설명자리.top + 21,
-                    right: 설명자리.right,
-                    bottom: 설명자리.bottom,
-                    width: 설명자리.width,
-                    height: 설명자리.height,
-                }, text: tooltip })), headFloat && _jsx(SectionHeadFloat, { children: headFloat }), _jsxs("div", { className: "manager-section__head", children: [_jsxs("div", { className: "manager-section__title-row", children: [icon && _jsx(Icon, { icon: icon, label: typeof title === 'string' ? title : undefined, className: "manager-section__icon" }), _jsx(제목태그, { id: 제목id, className: ['manager-section__title', titleClassName].filter(Boolean).join(' '), children: title })] }), 머리오른쪽, disc && _jsx("div", { className: "manager-section__disc body-3", children: disc })] }), (수줄 || subRow) && (_jsxs("div", { className: ['barchart-sub-row', subRowAlign !== 'start' && `barchart-sub-row--${subRowAlign}`].filter(Boolean).join(' '), children: [수줄, subRow] })), children, 메뉴자리 && (_jsx(Tooltip, { anchorRect: 메뉴자리, onClose: 메뉴닫기, ariaLabel: headSegment?.ariaLabel ?? t('tooltip.menu', '메뉴'), children: _jsx(MenuTooltip, { columns: [{ items: 메뉴항목 }], onClose: 메뉴닫기, size: "small" }) }))] }));
+    const headRightNode = (rightNode || headSegment) ? (_jsxs("div", { className: "manager-section__head-right", children: [headSegment && (collapsed ? (_jsx(Button, { htmlType: "button", size: 32, type: "dot", icon: "ellipsis", ariaLabel: headSegment.ariaLabel ?? t('common.more', '더보기'), showTooltipInfo: headSegment.ariaLabel ?? t('common.more', '더보기'), "aria-haspopup": "menu", "aria-expanded": !!menuRect, onClick: openMenu })) : (_jsx(SegmentedControl, { size: 32, ariaLabel: headSegment.ariaLabel, options: headSegment.options.map(o => ({ key: o.key, label: o.label, disabled: o.disabled })), value: headSegment.value, onChange: headSegment.onChange }))), rightNode] })) : null;
+    const titleId = useId();
+    const TitleTag = titleLevel ? `h${titleLevel}` : 'div';
+    return (_jsxs("section", { ref: secRef, className: ['manager-section', inGrid && 'manager-section--grid', onClick && 'manager-section--clickable', className].filter(Boolean).join(' '), onClick: onClick ? onCardClick : undefined, onKeyDown: onClick ? onCardKeyDown : undefined, onPointerEnter: tooltip ? showTip : undefined, onPointerLeave: tooltip ? closeTip : undefined, onFocus: tooltip ? showTip : undefined, onBlur: tooltip ? closeTip : undefined, role: onClick ? 'button' : undefined, tabIndex: onClick ? 0 : undefined, "aria-label": onClick ? (ariaLabel ?? (typeof title === 'string' ? title : undefined)) : undefined, "aria-labelledby": !onClick && title != null ? titleId : undefined, children: [tooltip && tipRect && (_jsx(TooltipInfo, { anchorRect: {
+                    left: tipRect.left,
+                    top: tipRect.top + 21,
+                    right: tipRect.right,
+                    bottom: tipRect.bottom,
+                    width: tipRect.width,
+                    height: tipRect.height,
+                }, text: tooltip })), headFloat && _jsx(SectionHeadFloat, { children: headFloat }), _jsxs("div", { className: "manager-section__head", children: [_jsxs("div", { className: "manager-section__title-row", children: [icon && _jsx(Icon, { icon: icon, label: typeof title === 'string' ? title : undefined, className: "manager-section__icon" }), _jsx(TitleTag, { id: titleId, className: ['manager-section__title', titleClassName].filter(Boolean).join(' '), children: title })] }), headRightNode, disc && _jsx("div", { className: "manager-section__disc body-3", children: disc })] }), (totalRow || subRow) && (_jsxs("div", { className: ['barchart-sub-row', subRowAlign !== 'start' && `barchart-sub-row--${subRowAlign}`].filter(Boolean).join(' '), children: [totalRow, subRow] })), children, menuRect && (_jsx(Tooltip, { anchorRect: menuRect, onClose: closeMenu, ariaLabel: headSegment?.ariaLabel ?? t('tooltip.menu', '메뉴'), children: _jsx(MenuTooltip, { columns: [{ items: menuItems }], onClose: closeMenu, size: "small" }) }))] }));
 }

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

@@ -6,7 +6,7 @@ import './CountTile.css';
 import Icon from './Icon';
 import TrainingTooltip, { TRAINING_TOOLTIP_HOVER_DELAY_MS } from './Tooltip/TrainingTooltip';
 /** 타일과 툴팁 사이 틈(12px)을 건너는 동안 툴팁을 살려 두는 시간 */
-const 건너가는틈_MS = 200;
+const CROSS_GAP_MS = 200;
 /**
  * 72×72 정사각 타일. 좌상단에 아이콘, 우하단에 숫자를 배치한다.
  * 훈련 카드의 타입별 문항 수 표시 등에 사용.
@@ -25,69 +25,69 @@ export default function CountTile({ icon, count, title, plan, tooltip = true, ho
      * 반응하는 것처럼 안 보였다.** 호버 모양은 `--interactive` 가 맡고 `--clickable` 은 커서만
      * 지킨다 — 누르는 타일과 얹는 타일이 **같은 호버**를 쓰고 커서만 갈린다.
      */
-    const 반응하나 = Boolean(onClick) || Boolean(onMouseEnter) || (tooltip && Boolean(plan));
-    const cls = cx('count-tile', 반응하나 && 'count-tile--interactive', 반응하나 && hoverAccent && 'count-tile--accent', onClick && 'count-tile--clickable', className);
+    const interactive = Boolean(onClick) || Boolean(onMouseEnter) || (tooltip && Boolean(plan));
+    const cls = cx('count-tile', interactive && 'count-tile--interactive', interactive && hoverAccent && 'count-tile--accent', onClick && 'count-tile--clickable', className);
     const ref = useRef(null);
     const [anchorRect, setAnchorRect] = useState(null);
-    const 늦춤 = useRef(null);
-    const 닫힘 = useRef(null);
-    const 켜짐 = Boolean(anchorRect && plan && tooltip);
-    const 시계끄기 = useCallback(() => {
-        if (늦춤.current) {
-            clearTimeout(늦춤.current);
-            늦춤.current = null;
+    const openTimer = useRef(null);
+    const closeTimer = useRef(null);
+    const isOpen = Boolean(anchorRect && plan && tooltip);
+    const clearTimers = useCallback(() => {
+        if (openTimer.current) {
+            clearTimeout(openTimer.current);
+            openTimer.current = null;
         }
-        if (닫힘.current) {
-            clearTimeout(닫힘.current);
-            닫힘.current = null;
+        if (closeTimer.current) {
+            clearTimeout(closeTimer.current);
+            closeTimer.current = null;
         }
     }, []);
-    const 닫기 = useCallback(() => { 시계끄기(); setAnchorRect(null); }, [시계끄기]);
+    const close = useCallback(() => { clearTimers(); setAnchorRect(null); }, [clearTimers]);
     /* 늦춰서 연다 — 타일이 열 개 붙어 서는 자리라, 지나가기만 해도 뜨면 줄줄이 번쩍인다. */
-    const 열기 = useCallback(() => {
+    const open = useCallback(() => {
         if (!tooltip || !plan)
             return;
-        시계끄기();
-        늦춤.current = setTimeout(() => {
-            늦춤.current = null;
+        clearTimers();
+        openTimer.current = setTimeout(() => {
+            openTimer.current = null;
             setAnchorRect(ref.current?.getBoundingClientRect() ?? null);
         }, TRAINING_TOOLTIP_HOVER_DELAY_MS);
-    }, [tooltip, plan, 시계끄기]);
+    }, [tooltip, plan, clearTimers]);
     /**
      * **바로 닫지 않는다.** 툴팁은 타일에서 12px 떨어져 뜨므로, 타일을 벗어나자마자 닫으면
      * 그 틈을 건너는 동안 사라져 **툴팁 안의 갈래 아이콘에 마우스를 올릴 수가 없다** — 그
      * 아이콘에 다시 뜨는 작은 이름표가 이 툴팁을 다는 까닭의 절반이다(사용자 지시 2026-09-23).
      * 잠깐 두고, 그 사이 툴팁 안으로 들어오면 아래 지킴이가 예약을 무른다.
      */
-    const 닫기예약 = useCallback(() => {
-        if (늦춤.current) {
-            clearTimeout(늦춤.current);
-            늦춤.current = null;
+    const scheduleClose = useCallback(() => {
+        if (openTimer.current) {
+            clearTimeout(openTimer.current);
+            openTimer.current = null;
         }
-        if (닫힘.current)
+        if (closeTimer.current)
             return;
-        닫힘.current = setTimeout(() => { 닫힘.current = null; setAnchorRect(null); }, 건너가는틈_MS);
+        closeTimer.current = setTimeout(() => { closeTimer.current = null; setAnchorRect(null); }, CROSS_GAP_MS);
     }, []);
     /* 떠난 뒤에 타이머가 터지면 아무도 안 보는 자리에 툴팁이 남는다 */
-    useEffect(() => () => { 시계끄기(); }, [시계끄기]);
+    useEffect(() => () => { clearTimers(); }, [clearTimers]);
     useEffect(() => { if (!tooltip || !plan)
-        닫기(); }, [tooltip, plan, 닫기]);
+        close(); }, [tooltip, plan, close]);
     /* 툴팁이 떠 있는 동안 **포인터가 어디에 있는지** 본다 — 타일이나 툴팁 안이면 살려 두고,
        둘 다 아니면 닫기를 예약한다. 툴팁은 포털로 body 끝에 나가 타일의 자식이 아니라서,
        타일에 건 mouseleave 만으로는 "툴팁으로 건너갔다" 를 알 수 없다. */
     useEffect(() => {
-        if (!켜짐)
+        if (!isOpen)
             return;
-        const 살릴자리 = (t) => t instanceof Element && (ref.current?.contains(t) || Boolean(t.closest('.tooltip-training')));
-        const 보기 = (e) => { if (살릴자리(e.target)) {
-            시계끄기();
+        const isKeepAlive = (t) => t instanceof Element && (ref.current?.contains(t) || Boolean(t.closest('.tooltip-training')));
+        const onPointerOut = (e) => { if (isKeepAlive(e.target)) {
+            clearTimers();
         }
         else
-            닫기예약(); };
-        document.addEventListener('pointerover', 보기, true);
-        return () => document.removeEventListener('pointerover', 보기, true);
-    }, [켜짐, 시계끄기, 닫기예약]);
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { ref: ref, className: cls, onClick: onClick ? (e) => { 닫기(); onClick(e); } : undefined, 
+            scheduleClose(); };
+        document.addEventListener('pointerover', onPointerOut, true);
+        return () => document.removeEventListener('pointerover', onPointerOut, true);
+    }, [isOpen, clearTimers, scheduleClose]);
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { ref: ref, className: cls, onClick: onClick ? (e) => { close(); onClick(e); } : undefined, 
                 /* role="button" + tabIndex 만 있고 키 처리가 없으면, 키보드 사용자는 여기 멈추고도
                    누를 수가 없다 — `<div>` 는 브라우저가 Enter·Space 를 대신 처리해 주지 않는다.
                    Space 의 기본 스크롤도 막는다(2026-08-28, Badge·Accordion 과 같은 처리). */
@@ -107,7 +107,7 @@ export default function CountTile({ icon, count, title, plan, tooltip = true, ho
                    (pointerdown 에서 닫는 것으로는 못 막는다 — 그 이벤트가 mouseenter 보다 **먼저** 와서,
                    닫은 뒤에 다시 열린다.) */
                 onPointerEnter: (e) => { if (e.pointerType === 'touch' || e.pointerType === 'pen')
-                    닫기();
+                    close();
                 else
-                    열기(); }, onMouseEnter: onMouseEnter, onMouseLeave: (e) => { 닫기예약(); onMouseLeave?.(e); }, role: onClick ? 'button' : 'img', tabIndex: onClick ? 0 : undefined, "aria-label": `${title} ${count}`, children: [_jsx(Icon, { icon: icon, size: 20, className: "count-tile__icon" }), _jsx("span", { className: "count-tile__count h5", "aria-hidden": "true", children: count })] }), anchorRect && plan && _jsx(TrainingTooltip, { plan: plan, anchorRect: anchorRect, onClose: 닫기 })] }));
+                    open(); }, onMouseEnter: onMouseEnter, onMouseLeave: (e) => { scheduleClose(); onMouseLeave?.(e); }, role: onClick ? 'button' : 'img', tabIndex: onClick ? 0 : undefined, "aria-label": `${title} ${count}`, children: [_jsx(Icon, { icon: icon, size: 20, className: "count-tile__icon" }), _jsx("span", { className: "count-tile__count h5", "aria-hidden": "true", children: count })] }), anchorRect && plan && _jsx(TrainingTooltip, { plan: plan, anchorRect: anchorRect, onClose: close })] }));
 }