@ihabdevteam/core 0.134.0 → 0.136.0

package/dist/ihabdevteam-core.d.ts

@@ -773,6 +773,12 @@ export declare interface ButtonProps {
         title?: string;
         items: string[];
     } | null;
+    /**
+     * 누르는 단추가 아니라 **툴팁을 보여 주는 칩** 이다 — 커서를 손가락이 아닌 기본 화살표로 둔다.
+     * 모양(바탕·hover)과 포커스·툴팁은 그대로다. `onClick` 없이 `showTooltipInfo`·`tooltipDescription` 만 다는
+     * 자리(점수 칩 등)에 쓴다. 막힌 단추(`disabled`)와는 다르다 — 흐려지지 않는다.
+     */
+    tooltipOnly?: boolean;
     iconSize?: 'small' | 'medium' | 'large';
     iconColor?: string;
     /**
@@ -1369,7 +1375,7 @@ export declare function copyText(text: string): Promise<boolean>;
  *
  * 값은 손으로 적고 `test/coreVersion.test.ts` 가 package.json 과 어긋나면 운다.
  */
-export declare const CORE_VERSION = "0.134.0";
+export declare const CORE_VERSION = "0.136.0";
 
 /** @public */
 declare const coreDefault: Record<string, unknown>;
@@ -4150,9 +4156,17 @@ export declare interface PopupProps {
      * - `small`  480px (확인/알림류)
      * - `medium` 680px (입력 폼)
      * - `large`  1080px (리스트/다중 콘텐츠)
+     * - `xlarge` 1320px, 폭은 화면 - 80px(좌우 40px) — 훈련 카드 만들기처럼 화면을 넓게 쓰는 창
+     * - `fit`    내용 폭에 맞춘다 — 최소 480px·최대 1140px(둘 다 화면 폭 - 40px 을 넘지 않는다).
+     *   한 줄에 카드가 몇 장 들어가느냐로 폭이 정해지는 목록 창에 쓴다.
      * 더 넓거나 무제한이 필요하면 className으로 `.popup-panel` max-width를 직접 override.
      */
-    size?: 'small' | 'medium' | 'large';
+    size?: 'small' | 'medium' | 'large' | 'xlarge' | 'fit';
+    /**
+     * 쌓이는 층. 기본 `modal`(`--z-modal`) 은 훈련 페이지 팝업(`--z-page-popup`) 위에 뜬다.
+     * `belowPagePopup` 은 그 **바로 아래** 에 깐다 — 이 창에서 연 훈련 팝업이 이 창을 덮어야 할 때(실행 창 등).
+     */
+    layer?: 'modal' | 'belowPagePopup';
     /**
      * 패널 높이를 못 박는다(숫자는 px, 문자열은 CSS 길이 그대로). 미지정 시 내용만큼(기본).
      *
@@ -6863,8 +6877,10 @@ export declare interface TrainingBlockButtonProps {
      * - `small`: 120×120px 축소 카드 (행 펼치기 영역 등 좁은 공간용)
      * - `list`: 너비 200px · 최소 높이 68px 가로형 항목
      * - `compact`: 툴팁 등 좁은 공간용 소형 리스트 항목 (전체 너비 × 높이 40px, 작은 아이콘)
+     * - `row`: 전체 너비 가로 행 — [아이콘][유형·제목][문항수]. 미리 듣기 단추는 없다.
+     *   좁은 화면에서 정사각형 카드 대신 쓴다(카드는 폭이 줄면 내용이 눌린다). 유형 줄은 `showTypeLabel` 일 때.
      */
-    size?: 'square' | 'small' | 'list' | 'compact';
+    size?: 'square' | 'small' | 'list' | 'compact' | 'row';
     renderPopup?: (props: TrainingBlockButtonPopupProps) => ReactNode;
     completedIds?: Set<string>;
     /** 선택 상태 ID Set. 포함된 항목(완료가 아닌 것)에 체크 배지를 표시 — 완료와 같은 배지이고, `hideCheckBadge` 면 숨는다. */

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

@@ -24,5 +24,5 @@ export default function Alert({ tone = 'info', title, message, children, dismiss
     const cls = cx('alert', `alert--${tone}`, className);
     const hasTitle = Boolean(title);
     const hasMessage = Boolean(message || children);
-    return (_jsxs("div", { className: cls, role: "alert", children: [_jsxs("div", { className: "alert__body", children: [_jsxs("div", { className: "alert__header", children: [_jsx(Icon, { icon: TONE_ICON[tone], size: 20, className: "alert__icon" }), hasTitle && _jsx("span", { className: "alert__title body-2", children: title }), !hasTitle && hasMessage && _jsx("div", { className: "alert__message body-3", children: message ?? children })] }), hasTitle && hasMessage && (_jsx("div", { className: "alert__message alert__message--indented body-3", children: message ?? children }))] }), dismissible && (_jsx("button", { type: "button", className: "alert__dismiss", onClick: handleDismiss, "aria-label": t('common.close', '닫기'), children: "\u00D7" }))] }));
+    return (_jsxs("div", { className: cls, role: "alert", children: [_jsxs("div", { className: "alert__body", children: [_jsxs("div", { className: "alert__header", children: [_jsx(Icon, { icon: TONE_ICON[tone], size: 20, className: "alert__icon" }), hasTitle && _jsx("span", { className: "alert__title body-2", children: title }), !hasTitle && hasMessage && _jsx("div", { className: "alert__message body-3", children: message || children })] }), hasTitle && hasMessage && (_jsx("div", { className: "alert__message alert__message--indented body-3", children: message || children }))] }), dismissible && (_jsx("button", { type: "button", className: "alert__dismiss", onClick: handleDismiss, "aria-label": t('common.close', '닫기'), children: "\u00D7" }))] }));
 }

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

@@ -40,7 +40,9 @@ function BarChartCanvas({ data, colorA, colorB, labelA, labelB, barWidth = 10, h
     }, [padded]);
     const [tooltip, setTooltip] = useState(null);
     const handleBarLeave = useCallback(() => setTooltip(null), []);
-    return (_jsxs("div", { className: "manager-bar-chart-wrap", children: [_jsx("div", { className: "manager-bar-chart-inner", children: _jsx("div", { className: "manager-bar-chart-scroll", children: _jsxs("div", { className: "manager-bar-chart-area", children: [_jsxs("div", { className: "manager-bar-chart-plot", style: { height: h }, children: [ticks.slice(0, -1).map((t, i) => (_jsx("div", { className: "manager-bar-chart-gridline", style: { top: i * (h / (ticks.length - 1)) }, children: _jsx("span", { className: "manager-bar-chart-gridline__label caption-1", children: t }) }, i))), data.map((d, i) => {
+    return (_jsxs("div", { className: "manager-bar-chart-wrap", children: [_jsx("div", { className: "manager-bar-chart-inner", children: _jsx("div", { className: "manager-bar-chart-scroll", children: _jsxs("div", { className: "manager-bar-chart-area", children: [_jsxs("div", { className: "manager-bar-chart-plot", style: { height: h }, children: [ticks.slice(0, -1).map((t, i) => (
+                                    /* 눈금선은 **적힌 값의 높이**에 둔다 — 가운데 값을 반올림(최대 3 → '2')하면서 자리는 절반(1.5)에 두어 선과 숫자가 어긋났다 */
+                                    _jsx("div", { className: "manager-bar-chart-gridline", style: { top: (1 - t / padded) * h }, children: _jsx("span", { className: "manager-bar-chart-gridline__label caption-1", children: t }) }, i))), data.map((d, i) => {
                                         const isFuture = d.a === -1;
                                         /* 판 높이를 넘지 않는다 — maxOverride(진행률 100)보다 큰 값이 와도 막대가 눈금 위로 삐져나가지 않게 */
                                         const 높이 = (v) => Math.min(h, Math.max(0, (수(v) / padded) * h));

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

@@ -432,6 +432,11 @@
     cursor: default;
 }
 
+/* 툴팁만 보여 주는 칩 — 누를 수 있다고 말하지 않는다 */
+.button.button--tooltip-only {
+    cursor: default;
+}
+
 
 
 

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

@@ -8,7 +8,7 @@ import InfoTooltip from "./Tooltip/InfoTooltip";
 import DescriptionTooltip from "./Tooltip/DescriptionTooltip";
 /** @public */
 export default function Button(props) {
-    const { size = 48, type: explicitType, htmlType, href, target, rel, icon, rightIcon, label: labelProp, count, subLabel, children, ariaLabel, variant = 'default', align = 'center', selected, toggleable = false, disabled = false, useLabel = true, useBorder = true, useBG = true, useDisabledCovered = false, useDisabledInvisible = false, width, minWidth, onClick, onDisabledClick, showTooltipInfo = false, tooltipInfoText = null, tooltipDescription = null, iconSize = 'medium', iconColor, shape = 'rounded', color, className, ...rest } = props;
+    const { size = 48, type: explicitType, htmlType, href, target, rel, icon, rightIcon, label: labelProp, count, subLabel, children, ariaLabel, variant = 'default', align = 'center', selected, toggleable = false, disabled = false, useLabel = true, useBorder = true, useBG = true, useDisabledCovered = false, useDisabledInvisible = false, width, minWidth, onClick, onDisabledClick, showTooltipInfo = false, tooltipInfoText = null, tooltipDescription = null, tooltipOnly = false, iconSize = 'medium', iconColor, shape = 'rounded', color, className, ...rest } = props;
     const sizeKey = typeof size === 'string' && isNaN(Number(size))
         ? size.toLowerCase()
         : String(Number(size) || 48);
@@ -85,7 +85,7 @@ export default function Button(props) {
     const ariaPressed = (toggleable || typeof selected === 'boolean')
         ? (isSelected ? 'true' : 'false')
         : undefined;
-    const classes = cx('button', sizeBase, sizeTypeClass, variantClass, alignClass, shapeClass, isSelected ? 'is-selected' : null, !useBG ? 'button--no-bg' : null, className);
+    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] : []);
     const renderLabelContent = () => {
@@ -180,7 +180,7 @@ export default function Button(props) {
     const Root = (isLink ? 'a' : 'button');
     return (_jsxs(_Fragment, { children: [_jsx(Root, { ...restProps, ref: btnRef, ...(isLink
                     ? { href, target, rel: rel ?? (target === '_blank' ? 'noreferrer' : undefined) }
-                    : { type: htmlType, disabled: disabledProp && !onDisabledClick }), className: classes, "aria-pressed": ariaPressed, "aria-label": ariaLabelString, "aria-disabled": isLink && disabledProp ? true : undefined, style: style, onClick: handleClickInternal, onMouseLeave: handleMouseLeave, onPointerEnter: (e) => {
+                    : { type: htmlType, disabled: disabledProp && !onDisabledClick }), className: classes, "aria-pressed": ariaPressed, "aria-label": ariaLabelString, "aria-disabled": disabledProp && (isLink || !!onDisabledClick) ? true : undefined, style: style, onClick: handleClickInternal, onMouseLeave: handleMouseLeave, onPointerEnter: (e) => {
                     showTooltipFn();
                     if (!disabledProp && typeof rest.onPointerEnter === 'function')
                         rest.onPointerEnter(e);

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

@@ -7,9 +7,17 @@ import { useEffect, useId, useRef } from 'react';
 export default function Checkbox({ checked = false, onChange, disabled, indeterminate, label, size = 'medium', className, title, ariaLabel, }) {
     const ref = useRef(null);
     const id = useId();
+    /* 중간 상태는 DOM 속성이라 누르는 순간 브라우저가 false 로 바꾼다. React 는 checked 만 되돌리므로 prop 이 그대로
+       true 여도(비활성 행이 있어 전체 선택이 안 되는 등) 빈 칸으로 남았다 — 누른 뒤와 다시 그릴 때마다 다시 넣는다. */
+    const indeterminateRef = useRef(!!indeterminate);
+    indeterminateRef.current = !!indeterminate;
     useEffect(() => {
         if (ref.current)
             ref.current.indeterminate = !!indeterminate;
-    }, [indeterminate]);
-    return (_jsxs("label", { className: cx('checkbox', size === 'small' && 'checkbox--small', size === 'large' && 'checkbox--large', disabled && 'checkbox--disabled', className), htmlFor: id, title: title, children: [_jsx("input", { ref: ref, id: id, type: "checkbox", className: "checkbox__input", checked: checked, onChange: e => onChange?.(e.target.checked), disabled: disabled, "aria-label": !label && ariaLabel ? ariaLabel : undefined }), _jsx("span", { className: "checkbox__box" }), label && _jsx("span", { className: "checkbox__label body-3", children: label })] }));
+    });
+    return (_jsxs("label", { className: cx('checkbox', size === 'small' && 'checkbox--small', size === 'large' && 'checkbox--large', disabled && 'checkbox--disabled', className), htmlFor: id, title: title, children: [_jsx("input", { ref: ref, id: id, type: "checkbox", className: "checkbox__input", checked: checked, onChange: e => {
+                    onChange?.(e.target.checked);
+                    if (ref.current)
+                        ref.current.indeterminate = indeterminateRef.current;
+                }, disabled: disabled, "aria-label": !label && ariaLabel ? ariaLabel : undefined }), _jsx("span", { className: "checkbox__box" }), label && _jsx("span", { className: "checkbox__label body-3", children: label })] }));
 }

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

@@ -32,7 +32,8 @@ const KEYWORDS = /^(?:const|let|var|function|return|if|else|for|while|switch|cas
 function tokenize(code, lang) {
     let s = code;
     const tokens = [];
-    const isBash = /sh|bash/.test(lang.toLowerCase());
+    // 이름이 **정확히** 셸일 때만 — 부분 일치라 csharp 도 셸로 읽혀 `//` 주석은 놓치고 `#region` 이 주석이 됐다
+    const isBash = /^(?:sh|bash|zsh|shell|console)$/.test(lang.toLowerCase());
     const push = (type, content) => tokens.push({ type, content });
     while (s.length > 0) {
         const ws = s.match(/^\s+/);

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

@@ -176,6 +176,8 @@ onComplete, trigger = 0, }) {
                 if (now < p.startTime) {
                     // waiting to start: keep hidden
                     node.style.display = "none";
+                    // 출발 전 조각도 살아 있다 — 안 세면 첫 틀이 모든 지연보다 이를 때 곧바로 끝나 한 조각도 안 났다
+                    alive = true;
                     continue;
                 }
                 // initialize origin positioning once when particle starts

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

@@ -16,33 +16,36 @@ function IconGridMenuButton(props) {
 /** @public */
 export default function IconGridMenu(props) {
     const { categories = [], selected, onSelect, size = 'medium' } = props || {};
-    /* `null` 은 "고르지 않음" 이라는 제어 값이다 — 첫 카테고리로 갈음하지 않는다 */
-    const initial = selected !== undefined ? selected : ((categories && categories[0]?.key) ?? null);
-    const [selectedKey, setSelectedKey] = useState(initial ?? null);
-    // 외부 selected prop이 controlled로 전달되면 내부 상태 동기화하는 의도된 동기화다
+    /* 제어 모드면 **prop 을 그대로** 그린다. `null` 은 "고르지 않음" 이라는 제어 값이다 — 첫 카테고리로 갈음하지 않는다.
+       전에는 누르는 순간 안쪽 상태를 바꿔, 부모가 값을 안 바꾸면(같은 selected 를 다시 넘기면) 화면만 다른 단추로 남았다. */
+    const isControlled = selected !== undefined;
+    const [innerKey, setInnerKey] = useState(() => (isControlled ? null : ((categories && categories[0]?.key) ?? null)));
+    const selectedKey = isControlled ? selected : innerKey;
+    /* 비제어 모드의 첫 선택 — 목록이 **처음 생겼을 때** 한 번 고르고 부모에 알린다. 마운트 때만 보면 카테고리가 늦게
+       오는 경우(`[]` 뒤 목록) 아무것도 안 골라졌고, StrictMode 의 두 번 실행에서는 알림이 두 번 갔다.
+       제어 모드에서는 부모가 이미 값을 가지므로 에코하지 않는다(부모 상태를 덮어쓸 수 있다). */
+    const onSelectRef = useRef(onSelect);
+    useEffect(() => { onSelectRef.current = onSelect; });
+    const firstPickDoneRef = useRef(false);
+    const firstKey = (categories && categories[0]?.key) ?? null;
     /* eslint-disable react-hooks/set-state-in-effect */
     useEffect(() => {
-        /* null 도 따른다 — 예전에는 null 을 걸러 버려, 부모가 selected={null} 로 선택을 풀어도
-           단추는 골라진 채로 남았다. */
-        if (selected !== undefined) {
-            setSelectedKey(selected);
-        }
-    }, [selected]);
+        if (isControlled || firstPickDoneRef.current || !firstKey)
+            return;
+        firstPickDoneRef.current = true;
+        const key = innerKey ?? firstKey;
+        if (innerKey == null)
+            setInnerKey(key);
+        onSelectRef.current?.(key);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isControlled, firstKey]);
     /* eslint-enable react-hooks/set-state-in-effect */
-    const initialOnSelectRef = useRef(onSelect);
-    const initialKeyRef = useRef(selectedKey);
-    const isControlledRef = useRef(selected !== undefined);
-    useEffect(() => {
-        // 비제어(uncontrolled) 모드에서만 초기 선택을 부모에 알림.
-        // 제어 모드(selected 전달)에서는 부모가 이미 값을 가지므로 에코하면 의도치 않게 부모 상태를 덮어쓸 수 있음.
-        if (!isControlledRef.current && initialKeyRef.current && typeof initialOnSelectRef.current === 'function') {
-            initialOnSelectRef.current(initialKeyRef.current);
-        }
-    }, []);
     const handleClick = useCallback((key) => {
         const next = selectedKey === key ? null : key;
-        setSelectedKey(next);
+        firstPickDoneRef.current = true;
+        if (!isControlled)
+            setInnerKey(next);
         onSelect?.(next);
-    }, [selectedKey, onSelect]);
+    }, [selectedKey, isControlled, onSelect]);
     return (_jsx("div", { className: `icon-grid-menu icon-grid-menu--${size}`, children: (categories || []).map((t) => (_jsx(IconGridMenuButton, { category: t, isSelected: selectedKey === t.key, onClick: () => handleClick(t.key) }, t.key))) }));
 }

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

@@ -18,6 +18,32 @@ export default function ConfirmPopup(props) {
     // 흐름(결제/환불)에서 더블클릭 시 RPC가 2회 발화될 수 있어, 여기서 in-flight를 직접 막는다.
     const busyRef = useRef(false);
     const [busy, setBusy] = useState(false);
+    /* 확인·추가 행동을 **한 번만** 돌린다. 전에는 잠금을 onConfirm 이 끝나자마자 finally 에서 풀어, 닫힘 애니메이션(260ms)
+       동안 한 번 더 누르면 onConfirm 이 또 불렸다(말귀 단어표 삭제·이용권 삭제가 두 번 나가 성공 뒤 실패 토스트).
+       닫기로 끝나면 잠금을 풀지 않는다 — 창이 사라지는 중이다. 닫지 않고 끝나면(closeOnConfirm=false·실패) 풀고, 처리 중에
+       단추가 꺼지며 body 로 떨어진 포커스를 누른 단추로 되돌린다. */
+    const 한번만 = async (일) => {
+        if (busyRef.current)
+            return;
+        busyRef.current = true;
+        const 누른곳 = typeof document !== 'undefined' ? document.activeElement : null;
+        setBusy(true);
+        let 닫는중 = false;
+        try {
+            닫는중 = await 일();
+        }
+        finally {
+            if (!닫는중) {
+                busyRef.current = false;
+                setBusy(false);
+                requestAnimationFrame(() => {
+                    const 지금 = document.activeElement;
+                    if ((!지금 || 지금 === document.body) && 누른곳?.isConnected)
+                        누른곳.focus();
+                });
+            }
+        }
+    };
     return (_jsxs(Popup, { title: title, onClose: onClose, 
         // onConfirm(서버 요청 등)이 진행 중일 때 X/ESC로 닫으면, 팝업은 즉시 사라지는데
         // 이미 시작된 요청은 계속 진행돼 완료 후 부모 state/토스트가 뒤늦게 갱신된다 —
@@ -31,19 +57,13 @@ export default function ConfirmPopup(props) {
                     // 없는 일(삭제·연결 해제)이라, 두 번 눌려 두 번 나가면 첫 번째만 뜻이 있고
                     // 두 번째는 엉뚱한 실패로 돌아온다.
                     onClick: async ({ closeWithAnimation }) => {
-                        if (busyRef.current)
-                            return;
-                        busyRef.current = true;
-                        setBusy(true);
-                        try {
+                        await 한번만(async () => {
                             await extraAction.onClick(closeWithAnimation);
-                            if (extraAction.closeOnClick ?? true)
+                            const 닫음 = extraAction.closeOnClick ?? true;
+                            if (닫음)
                                 closeWithAnimation();
-                        }
-                        finally {
-                            busyRef.current = false;
-                            setBusy(false);
-                        }
+                            return 닫음;
+                        });
                     },
                 }] : []),
             ...(hideCancel ? [] : [{
@@ -57,19 +77,12 @@ export default function ConfirmPopup(props) {
                 variant: confirmVariant,
                 disabled: confirmDisabled || busy,
                 onClick: async ({ closeWithAnimation }) => {
-                    if (busyRef.current)
-                        return;
-                    busyRef.current = true;
-                    setBusy(true);
-                    try {
+                    await 한번만(async () => {
                         await onConfirm(closeWithAnimation);
                         if (closeOnConfirm)
                             closeWithAnimation();
-                    }
-                    finally {
-                        busyRef.current = false;
-                        setBusy(false);
-                    }
+                        return closeOnConfirm;
+                    });
                 },
             },
         ], children: [topContent != null && _jsx("div", { className: "confirm-popup__top", children: topContent }), details && details.length > 0 && (_jsx(Panel, { children: details.map((d, i) => (_jsx(PanelRow, { label: d.label, children: _jsx("span", { className: "panel-row__text body-2", children: d.value }) }, i))) })), _jsx("p", { className: "body-2 confirm-popup__message", children: message }), children] }));

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

@@ -28,10 +28,13 @@ export default function CouponInputPopup({ onApply, onCancel }) {
         catch (e) {
             setError(getErrorMessage(e));
             setLoading(false);
+            /* 처리 중 입력칸이 꺼지며 포커스가 body 로 떨어졌다 — 오류를 본 사람이 곧바로 고쳐 칠 수 있게 칸으로 되돌린다 */
+            requestAnimationFrame(() => inputRef.current?.focus());
         }
     }, [code, onApply]);
     const handleKey = useCallback((e, closeWithAnimation) => {
-        if (e.key === 'Enter')
+        // 한글 조합을 끝내는 Enter 는 적용이 아니다(TextField 와 같다)
+        if (e.key === 'Enter' && !e.nativeEvent.isComposing)
             void handleApply(closeWithAnimation);
     }, [handleApply]);
     const handleChange = (e) => {

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

@@ -7,6 +7,7 @@ import Table from '../Table';
 import Toolbar from '../Toolbar';
 import './ListPopup.css';
 import { 칸순 } from '../../utils/textSort';
+import { cx } from '../../utils/cx';
 /** @public */
 export default function ListPopup(props) {
     const { title, items, columns, gridTemplateColumns, searchPlaceholder, searchFn, defaultSortKey, defaultSortAsc = true, selectedId, selectedIds, onSelect, onClose, pageSizeOptions = [10, 25, 50, 100], initialPageSize, emptyText, countLabel, topContent, className = '', } = props;
@@ -52,7 +53,12 @@ export default function ListPopup(props) {
         });
     }, [items, search, sortKey, sortAsc, searchEnabled, effectiveSearchFn]);
     const totalPages = Math.max(1, Math.ceil(filtered.length / Number(pageSize)));
-    const paged = filtered.slice((page - 1) * Number(pageSize), page * Number(pageSize));
+    /* 목록이 줄어 보던 쪽이 범위를 넘으면 끝 쪽으로 — 전에는 3쪽을 보다 항목이 5개로 줄면 '항목이 없습니다' 와 '총 5개' 가 함께
+       떴다. 렌더 중에 상태도 맞춘다. */
+    if (page > totalPages)
+        setPage(totalPages);
+    const 이쪽 = Math.min(page, totalPages);
+    const paged = filtered.slice((이쪽 - 1) * Number(pageSize), 이쪽 * Number(pageSize));
     const handleSort = useCallback((key) => {
         if (sortKey === key)
             setSortAsc(a => !a);
@@ -91,7 +97,7 @@ export default function ListPopup(props) {
         sortDir: col.sortable !== false && sortKey === col.key ? (sortAsc ? 'asc' : 'desc') : null,
     })), [columns, sortKey, sortAsc, handleSort]);
     const pageSizeOpts = useMemo(() => pageSizeOptions.map(n => ({ value: String(n), label: t('common.pageSizeLabel', { n }) })), [pageSizeOptions, t]);
-    return (_jsxs(Popup, { className: `popup-list ${className}`, title: title, onClose: onClose, children: [topContent, 'label' in countParts && _jsx("p", { className: "toolbar__count body-1", children: countParts.label }), _jsx(Toolbar, { count: 'label' in countParts ? undefined : { value: filtered.length, prefix: countParts.prefix, suffix: countParts.suffix }, search: searchEnabled ? { value: search, onChange: setSearch, placeholder: resolvedSearchPlaceholder } : undefined, pageSize: { options: pageSizeOpts, value: pageSize, onChange: setPageSize }, pagination: { page, total: totalPages, onChange: setPage } }), _jsx(Table, { size: "medium", gridTemplateColumns: gridTemplateColumns, resizable: true, fields: tableFields, items: paged, onRowClick: onSelect, renderRow: (it) => {
+    return (_jsxs(Popup, { className: `popup-list ${className}`, title: title, onClose: onClose, children: [topContent, 'label' in countParts && _jsx("p", { className: "toolbar__count body-1", children: countParts.label }), _jsx(Toolbar, { count: 'label' in countParts ? undefined : { value: filtered.length, prefix: countParts.prefix, suffix: countParts.suffix }, search: searchEnabled ? { value: search, onChange: setSearch, placeholder: resolvedSearchPlaceholder } : undefined, pageSize: { options: pageSizeOpts, value: pageSize, onChange: setPageSize }, pagination: { page: 이쪽, total: totalPages, onChange: setPage } }), _jsx(Table, { size: "medium", gridTemplateColumns: gridTemplateColumns, resizable: true, fields: tableFields, items: paged, onRowClick: onSelect, renderRow: (it) => {
                     const isSelected = selectedIds != null
                         ? (it.id != null && selectedIds.has(it.id))
                         : (selectedId != null && it.id === selectedId);
@@ -99,7 +105,8 @@ export default function ListPopup(props) {
                         content: (col.render
                             ? col.render(it)
                             : (it[col.key] ?? '')),
-                        className: isSelected ? 'popup-list__row--selected' : col.className,
+                        // 고른 행에서도 열 className(정렬·폭 등)을 지킨다 — 전에는 고른 표시가 그 자리를 덮어 고른 행만 칸 모양이 달라졌다
+                        className: cx(col.className, isSelected && 'popup-list__row--selected'),
                     }));
                 }, empty: resolvedEmptyText })] }));
 }

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

@@ -31,7 +31,7 @@ function TableThumbnail({ table }) {
             const item = table.items[i];
             if (!item)
                 return _jsx("div", { className: "load-table-popup__thumb-cell load-table-popup__thumb-cell--empty" }, i);
-            return (_jsx("div", { className: "load-table-popup__thumb-cell", children: item.words.length >= 2 ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "load-table-popup__thumb-word body-3", children: item.words[0].label }), _jsx("span", { className: "load-table-popup__thumb-divider" }), _jsx("span", { className: "load-table-popup__thumb-word body-3", children: item.words[1].label })] })) : (_jsxs(_Fragment, { children: [_jsx("span", { className: "load-table-popup__thumb-word body-3", children: item.words[0]?.label ?? item.id }), item.words[0]?.subLabel && (_jsx("span", { className: "load-table-popup__thumb-sub", children: item.words[0].subLabel }))] })) }, i));
+            return (_jsx("div", { className: "load-table-popup__thumb-cell", children: (item.words ?? []).length >= 2 ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "load-table-popup__thumb-word body-3", children: item.words[0].label }), _jsx("span", { className: "load-table-popup__thumb-divider" }), _jsx("span", { className: "load-table-popup__thumb-word body-3", children: item.words[1].label })] })) : (_jsxs(_Fragment, { children: [_jsx("span", { className: "load-table-popup__thumb-word body-3", children: item.words?.[0]?.label ?? item.id }), item.words?.[0]?.subLabel && (_jsx("span", { className: "load-table-popup__thumb-sub", children: item.words[0].subLabel }))] })) }, i));
         }) }));
 }
 const DeleteButton = ({ onClick, ariaLabel }) => {
@@ -51,10 +51,11 @@ export default function LoadTablePopup({ onLoad, onCancel, tables: tablesProp, o
     const [viewMode, setViewMode] = useState('grid');
     const sorted = useMemo(() => {
         const copy = [...tables];
+        // 저장소에서 온 표는 어긋나 있을 수 있다(savedAt 없음) — 한 표 때문에 팝업 전체가 렌더 중에 터지던 것
         if (sortKey === 'newest')
-            return copy.sort((a, b) => b.savedAt.localeCompare(a.savedAt));
+            return copy.sort((a, b) => String(b.savedAt ?? '').localeCompare(String(a.savedAt ?? '')));
         if (sortKey === 'oldest')
-            return copy.sort((a, b) => a.savedAt.localeCompare(b.savedAt));
+            return copy.sort((a, b) => String(a.savedAt ?? '').localeCompare(String(b.savedAt ?? '')));
         if (sortKey === 'name')
             return copy.sort((a, b) => a.name.localeCompare(b.name, 'ko'));
         if (sortKey === 'count')
@@ -81,7 +82,7 @@ export default function LoadTablePopup({ onLoad, onCancel, tables: tablesProp, o
             animateThen(() => onLoad(table));
     }, [tables, selected, onLoad]);
     const headerActions = useMemo(() => tables.length > 0 ? (_jsxs(_Fragment, { children: [_jsx(Dropdown, { options: VIEW_OPTIONS, value: viewMode, onChange: handleSetViewMode }), _jsx(Dropdown, { options: SORT_OPTIONS, value: sortKey, onChange: handleSetSortKey })] })) : undefined, [tables.length, viewMode, sortKey, handleSetViewMode, handleSetSortKey, VIEW_OPTIONS, SORT_OPTIONS]);
-    return (_jsx(Popup, { className: "popup--load-table", title: t('wordTable.loadTable.title', '저장된 단어 표 불러오기'), headerActions: headerActions, onClose: onCancel, footer: ({ animateThen, closeWithAnimation }) => (_jsxs("div", { className: "load-table-popup__footer-actions", children: [_jsx(Button, { htmlType: "button", size: 48, type: "bar", label: t('common.cancel', '취소'), onClick: closeWithAnimation, width: "fit-content" }), _jsx(Button, { htmlType: "button", size: 48, type: "bar", variant: "main", label: t('wordTable.loadTable.loadButton', '불러오기'), width: "fit-content", disabled: !selected, onClick: () => handleLoadSelected(animateThen) })] })), children: _jsx("div", { className: "load-table-popup__body", children: tables.length === 0 ? (_jsx("p", { className: "load-table-popup__empty body-2", children: t('wordTable.loadTable.empty', '저장된 단어 표가 없습니다.') })) : (_jsxs(_Fragment, { children: [viewMode === 'grid' && (_jsx("ul", { className: "load-table-popup__grid", children: sorted.map(table => (_jsxs("li", { className: `load-table-popup__card${selected === table.id ? ' load-table-popup__card--selected' : ''}`, onClick: () => setSelected(table.id), ...pressable(() => setSelected(table.id)), children: [_jsx(DeleteButton, { onClick: e => handleDelete(table.id, e), ariaLabel: t('wordTable.loadTable.deleteAriaLabel', '삭제') }), _jsx(TableThumbnail, { table: table }), _jsxs("div", { className: "load-table-popup__card-info", children: [_jsx("span", { className: "load-table-popup__card-name body-2", children: table.name }), _jsxs("span", { className: "load-table-popup__card-meta caption-1", children: [formatDate(table.savedAt), " \u00B7 ", table.items.length, "\uAC1C"] })] })] }, table.id))) })), viewMode === 'list' && (_jsx("ul", { className: "load-table-popup__list", children: sorted.map(table => (_jsxs("li", { className: `load-table-popup__row${selected === table.id ? ' load-table-popup__row--selected' : ''}`, onClick: () => setSelected(table.id), ...pressable(() => setSelected(table.id)), children: [_jsx("span", { className: "load-table-popup__row-check", children: selected === table.id && (_jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", children: _jsx("polyline", { points: "4 13 9 18 20 6", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }) })) }), _jsxs("div", { className: "load-table-popup__row-main", children: [_jsx("span", { className: "load-table-popup__row-name body-2", children: table.name }), _jsx("div", { className: "load-table-popup__row-words", children: table.items.map((item, i) => (_jsx("span", { className: "load-table-popup__row-word caption-1", children: item.words.length >= 2
+    return (_jsx(Popup, { className: "popup--load-table", title: t('wordTable.loadTable.title', '저장된 단어 표 불러오기'), headerActions: headerActions, onClose: onCancel, footer: ({ animateThen, closeWithAnimation }) => (_jsxs("div", { className: "load-table-popup__footer-actions", children: [_jsx(Button, { htmlType: "button", size: 48, type: "bar", label: t('common.cancel', '취소'), onClick: closeWithAnimation, width: "fit-content" }), _jsx(Button, { htmlType: "button", size: 48, type: "bar", variant: "main", label: t('wordTable.loadTable.loadButton', '불러오기'), width: "fit-content", disabled: !selected, onClick: () => handleLoadSelected(animateThen) })] })), children: _jsx("div", { className: "load-table-popup__body", children: tables.length === 0 ? (_jsx("p", { className: "load-table-popup__empty body-2", children: t('wordTable.loadTable.empty', '저장된 단어 표가 없습니다.') })) : (_jsxs(_Fragment, { children: [viewMode === 'grid' && (_jsx("ul", { className: "load-table-popup__grid", children: sorted.map(table => (_jsxs("li", { className: `load-table-popup__card${selected === table.id ? ' load-table-popup__card--selected' : ''}`, onClick: () => setSelected(table.id), ...pressable(() => setSelected(table.id)), children: [_jsx(DeleteButton, { onClick: e => handleDelete(table.id, e), ariaLabel: t('wordTable.loadTable.deleteAriaLabel', '삭제') }), _jsx(TableThumbnail, { table: table }), _jsxs("div", { className: "load-table-popup__card-info", children: [_jsx("span", { className: "load-table-popup__card-name body-2", children: table.name }), _jsxs("span", { className: "load-table-popup__card-meta caption-1", children: [formatDate(table.savedAt), " \u00B7 ", t('wordTable.loadTable.itemCount', { count: table.items.length, defaultValue: '{{count}}개' })] })] })] }, table.id))) })), viewMode === 'list' && (_jsx("ul", { className: "load-table-popup__list", children: sorted.map(table => (_jsxs("li", { className: `load-table-popup__row${selected === table.id ? ' load-table-popup__row--selected' : ''}`, onClick: () => setSelected(table.id), ...pressable(() => setSelected(table.id)), children: [_jsx("span", { className: "load-table-popup__row-check", children: selected === table.id && (_jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", children: _jsx("polyline", { points: "4 13 9 18 20 6", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }) })) }), _jsxs("div", { className: "load-table-popup__row-main", children: [_jsx("span", { className: "load-table-popup__row-name body-2", children: table.name }), _jsx("div", { className: "load-table-popup__row-words", children: table.items.map((item, i) => (_jsx("span", { className: "load-table-popup__row-word caption-1", children: (item.words ?? []).length >= 2
                                                     ? `${item.words[0].label} · ${item.words[1].label}`
-                                                    : item.words[0]?.label ?? item.id }, i))) })] }), _jsxs("span", { className: "load-table-popup__row-count caption-1", children: [table.items.length, "\uAC1C"] }), _jsx("span", { className: "load-table-popup__row-date caption-1", children: formatDate(table.savedAt) }), _jsx(DeleteButton, { onClick: e => handleDelete(table.id, e), ariaLabel: t('wordTable.loadTable.deleteAriaLabel', '삭제') })] }, table.id))) }))] })) }) }));
+                                                    : item.words?.[0]?.label ?? item.id }, i))) })] }), _jsx("span", { className: "load-table-popup__row-count caption-1", children: t('wordTable.loadTable.itemCount', { count: table.items.length, defaultValue: '{{count}}개' }) }), _jsx("span", { className: "load-table-popup__row-date caption-1", children: formatDate(table.savedAt) }), _jsx(DeleteButton, { onClick: e => handleDelete(table.id, e), ariaLabel: t('wordTable.loadTable.deleteAriaLabel', '삭제') })] }, table.id))) }))] })) }) }));
 }

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

@@ -34,6 +34,15 @@
 .popup-panel--small  { max-width: 480px; }
 .popup-panel--medium { max-width: 680px; }
 .popup-panel--large  { max-width: 1080px; }
+.popup-panel--xlarge { width: calc(100% - 80px); max-width: 1320px; }
+/* fit — 내용 폭. 최소·최대 모두 화면 폭 - 40px 을 넘지 않는다(좁은 화면에서 480px 로 잘리지 않게) */
+.popup-panel--fit {
+  width: fit-content;
+  min-width: min(480px, calc(100% - 40px));
+  max-width: min(1140px, calc(100% - 40px));
+}
+/* 층 — 훈련 페이지 팝업 바로 아래(그 창이 이 창을 덮는다). inline 은 제 자리 규칙을 따른다 */
+.popup.popup--below-page-popup:not(.popup--inline) { z-index: calc(var(--z-page-popup) - 1); }
 .popup-close-float {
   position: absolute;
   top: 8px;

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

@@ -70,9 +70,17 @@ export interface PopupProps {
      * - `small`  480px (확인/알림류)
      * - `medium` 680px (입력 폼)
      * - `large`  1080px (리스트/다중 콘텐츠)
+     * - `xlarge` 1320px, 폭은 화면 - 80px(좌우 40px) — 훈련 카드 만들기처럼 화면을 넓게 쓰는 창
+     * - `fit`    내용 폭에 맞춘다 — 최소 480px·최대 1140px(둘 다 화면 폭 - 40px 을 넘지 않는다).
+     *   한 줄에 카드가 몇 장 들어가느냐로 폭이 정해지는 목록 창에 쓴다.
      * 더 넓거나 무제한이 필요하면 className으로 `.popup-panel` max-width를 직접 override.
      */
-    size?: 'small' | 'medium' | 'large';
+    size?: 'small' | 'medium' | 'large' | 'xlarge' | 'fit';
+    /**
+     * 쌓이는 층. 기본 `modal`(`--z-modal`) 은 훈련 페이지 팝업(`--z-page-popup`) 위에 뜬다.
+     * `belowPagePopup` 은 그 **바로 아래** 에 깐다 — 이 창에서 연 훈련 팝업이 이 창을 덮어야 할 때(실행 창 등).
+     */
+    layer?: 'modal' | 'belowPagePopup';
     /**
      * 패널 높이를 못 박는다(숫자는 px, 문자열은 CSS 길이 그대로). 미지정 시 내용만큼(기본).
      *

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

@@ -13,7 +13,7 @@ const ANIM_MS = 260;
 /** @public */
 export default function Popup(props) {
     const { t } = useTranslation();
-    const { title, subtitle, headerActions, children, buttons, footer, footerClassName = "", onClose, closeDisabled = false, beforeClose, closeOnBackdrop = true, className = "", ariaLabel, useTitle = true, inline = false, size, height, resetScrollKey } = props || {};
+    const { title, subtitle, headerActions, children, buttons, footer, footerClassName = "", onClose, closeDisabled = false, beforeClose, closeOnBackdrop = true, className = "", ariaLabel, useTitle = true, inline = false, size, layer = 'modal', height, resetScrollKey } = props || {};
     const [closing, setClosing] = useState(false);
     // 닫힘 애니메이션 중(260ms)엔 버튼이 시각적으로만 흐려질 뿐 클릭은 계속 가능해,
     // 그 사이 같은 버튼을 연타하면 cb(확인/완료 콜백)가 여러 번 예약되어 중복 실행된다.
@@ -154,7 +154,7 @@ export default function Popup(props) {
         if (pressed && e.target === e.currentTarget)
             closeWithAnimation();
     };
-    const el = (_jsx("div", { className: `popup ${inline ? 'popup--inline' : ''} ${closing ? 'popup--closing' : ''} ${className}`, onPointerDown: backdropEnabled ? onBackdropPointerDown : undefined, onClick: backdropEnabled ? onBackdropClick : undefined, 
+    const el = (_jsx("div", { className: `popup ${inline ? 'popup--inline' : ''} ${layer === 'belowPagePopup' ? 'popup--below-page-popup' : ''} ${closing ? 'popup--closing' : ''} ${className}`, onPointerDown: backdropEnabled ? onBackdropPointerDown : undefined, onClick: backdropEnabled ? onBackdropClick : undefined, 
         /* 바탕을 눌러도 포커스는 판 안에 둔다 — 닫히지 않는 바탕(closeOnBackdrop={false}·closeDisabled·beforeClose 가
            거절)을 누르면 포커스가 body 로 떨어져, 이어서 누른 Tab 이 뒤 화면으로 나갔다(가둠은 판 안의 키만 듣는다).
            mousedown 의 기본 동작(포커스 옮김)만 막고 click 은 그대로 온다. */

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

@@ -41,10 +41,20 @@ export default function SaveTablePopup({ title, saveLabel, defaultName = '', def
     }, [previewW, previewH, preview]);
     const isDuplicateName = !!existingNames &&
         existingNames.some(n => n.trim().toLowerCase() === name.trim().toLowerCase());
-    const handleSave = useCallback((animateThen) => animateThen(() => onSave(name.trim(), description.trim() || undefined)), [name, description, onSave]);
+    /* 저장은 **한 번만** — 저장 단추의 닫힘 애니메이션(260ms) 동안 이름칸에서 Enter 를 치면 onSave 가 또 불렸다(Safari 는 단추를
+       눌러도 포커스가 칸에 남아 쉽게 난다). */
+    const 저장함 = useRef(false);
+    const handleSave = useCallback((animateThen) => {
+        if (저장함.current)
+            return;
+        저장함.current = true;
+        animateThen(() => onSave(name.trim(), description.trim() || undefined));
+    }, [name, description, onSave]);
     const handleEnter = useCallback(() => {
-        if (name.trim() && !isDuplicateName)
-            onSave(name.trim(), description.trim() || undefined);
+        if (저장함.current || !name.trim() || isDuplicateName)
+            return;
+        저장함.current = true;
+        onSave(name.trim(), description.trim() || undefined);
     }, [name, description, isDuplicateName, onSave]);
     return (_jsx(Popup, { className: "popup--save-table", title: title ?? t('wordTable.save.title', '단어표 저장하기'), onClose: onCancel, footer: ({ animateThen, closeWithAnimation }) => (_jsxs(_Fragment, { children: [_jsx(Button, { htmlType: "button", size: 48, type: "bar", label: t('common.cancel', '취소'), onClick: closeWithAnimation }), _jsx(Button, { htmlType: "button", size: 48, type: "bar", variant: "main", label: saveLabel ?? t('common.save', '저장'), disabled: !name.trim() || isDuplicateName, onClick: () => handleSave(animateThen) })] })), children: _jsxs("div", { className: "save-table-popup__body", children: [preview && (_jsx("div", { ref: containerRef, className: "save-table-popup__preview-wrap", style: { height: previewState.fixedH }, children: _jsx("div", { className: "save-table-popup__preview", style: {
                             width: previewW, height: previewH,

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

@@ -95,7 +95,11 @@ export default function TrainingResultPopup(props) {
     // 래퍼(.trp-result__scroll)를 하나 더 두어 이중 스크롤이 됐고, 안쪽이 overscroll:contain으로
     // 휠을 삼키면서 "커서가 바깥 스크롤바 위에 있을 때만 스크롤되는" 문제가 있었다.
     // 하단 버튼은 Popup의 footer 슬롯으로 넘겨 스크롤과 무관하게 고정된다.
-    return (_jsx(Popup, { onClose: onClose, inline: inline, 
+    return (_jsx(Popup, { onClose: onClose, 
+        /* 바탕 누르기로는 닫지 않는다 — 이 창의 닫기(onClose)는 '완료'(기록 확정 + 훈련 닫기)라, 결과를 보다 어두운 바탕을
+           잘못 누르면 기록이 확정되고 '다시하기' 를 쓸 수 없었다(0.128.0 에서 Popup 바탕 닫기가 기본이 되며 생김).
+           완료·다시하기 단추(와 Esc)로만 닫는다. */
+        closeOnBackdrop: false, inline: inline, 
         /* 이 팝업은 Popup 의 title 슬롯을 안 쓰고 본문 안에 제 제목(h1)을 그린다 —
            그래서 다이얼로그 자체에 접근명이 없었다(운영 경고 9건, 08-17 ~ 08-30,
            /today · /training · /my-word-training · /my-homework). 화면에 보이는 그

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

@@ -77,10 +77,12 @@ export function visitItemKey(v) {
  * 그 함수가 만든 글을 그대로 쓴다 — `calcAge` 의 `ageStr` 와 같은 결.
  */
 export function formatDuration(sec, durationStr) {
-    if (!sec || sec <= 0)
+    // 초 단위로 반올림한 뒤 나눈다 — 90.5 가 "1분 30.5초", 59.999 가 "59.999초" 로 찍혔다
+    const 초 = Number.isFinite(sec) ? Math.round(sec) : 0;
+    if (!초 || 초 <= 0)
         return '-';
-    const m = Math.floor(sec / 60);
-    const s = sec % 60;
+    const m = Math.floor(초 / 60);
+    const s = 초 % 60;
     if (durationStr)
         return durationStr(m, s);
     // 열쇠를 글자로 적어 둔다 — test/i18nKeysExist 가 사전에 있는지 훑는다

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

@@ -24,6 +24,9 @@ export default function ProgressBar({ value, max = 100, size = 8, color, trackCo
     const safeMax = Number.isFinite(max) && max > 0 ? max : 1;
     const clamped = Math.max(0, Math.min(Number.isFinite(value) ? value : 0, safeMax));
     const pct = (clamped / safeMax) * 100;
+    /* 글자·aria 의 최댓값은 **받은 값** 이다(0 이하·못 읽는 값은 0) — safeMax 는 나눗셈을 지키려는 것뿐인데 라벨에도 써서
+       항목이 아직 없을 때(max=0) "0 / 1" 로 읽혔다 */
+    const shownMax = Number.isFinite(max) && max > 0 ? max : 0;
     // 자리를 지정하지 않으면 굵기가 정한다 — 얇은 막대 안에는 글자가 들어가지 않는다.
     // center 는 inside 의 다른 이름이라 여기서 하나로 모은다(클래스가 갈리지 않게).
     const rawPos = labelPos ?? (size >= INSIDE_LABEL_MIN_SIZE ? 'inside' : 'bottom');
@@ -43,9 +46,9 @@ 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": safeMax, "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-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)
-                            : `${clamped} / ${safeMax}` }))] }));
+                            : `${clamped} / ${shownMax}` }))] }));
 }

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

@@ -2,6 +2,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useTranslation } from 'react-i18next';
 import useMediaQuery from '../hooks/useMediaQuery';
 import './ProgressIndicator.css';
+/** 눈에는 안 보이고 낭독기에는 읽히는 글자 */
+const 보이지않게 = {
+    position: 'absolute', width: 1, height: 1, margin: -1, padding: 0, overflow: 'hidden',
+    clipPath: 'inset(50%)', whiteSpace: 'nowrap', border: 0,
+};
 /**
  * transparent 일 때 남은 단계의 배경.
  *
@@ -42,7 +47,7 @@ export default function ProgressIndicator({ max, index, inactiveBg, inactiveColo
        묶고 이름표에 자리를 적는다. 화면이 스스로 넘어가는 자리에서는
        announce 로 role="status" 를 켠다. */
     if (variant === 'dot') {
-        return (_jsx("div", { className: "progress-indicator progress-indicator--dot", style: rootStyle, role: announce ? 'status' : 'img', "aria-label": groupLabel, children: Array.from({ length: max }).map((_, i) => (_jsx("span", { "aria-hidden": "true", className: `progress-indicator-dot--dot${i < idx ? ' done' : i === idx ? ' active' : ''}` }, i))) }));
+        return (_jsxs("div", { className: "progress-indicator progress-indicator--dot", style: rootStyle, role: announce ? 'status' : 'img', "aria-label": announce ? undefined : groupLabel, children: [announce && _jsx("span", { style: 보이지않게, children: groupLabel }), Array.from({ length: max }).map((_, i) => (_jsx("span", { "aria-hidden": "true", className: `progress-indicator-dot--dot${i < idx ? ' done' : i === idx ? ' active' : ''}` }, i)))] }));
     }
     // 모바일: 현재 단계만 표시 (n / max 형태)
     if (isMobile) {

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

@@ -79,7 +79,9 @@ export default function Rating({ value, onChange, max = 5, readOnly = false, siz
             const star = i + 1;
             const fillRatio = Math.max(0, Math.min(1, displayValue - i));
             const isHalf = fillRatio > 0 && fillRatio < 1;
-            const starNode = (_jsxs("span", { className: "rating__star-wrap", children: [_jsx(Icon, { icon: "star", size: iconSize, className: "rating__star rating__star--empty" }), fillRatio > 0 && (_jsx("span", { className: `rating__star-fill${isHalf ? ' rating__star-fill--half' : ''}`, children: _jsx(Icon, { icon: "star", size: iconSize, className: "rating__star rating__star--filled" }) }))] }));
+            const starNode = (_jsxs("span", { className: "rating__star-wrap", children: [_jsx(Icon, { icon: "star", size: iconSize, className: "rating__star rating__star--empty" }), fillRatio > 0 && (_jsx("span", { className: `rating__star-fill${isHalf ? ' rating__star-fill--half' : ''}`, 
+                        // 조각 별은 **값만큼** 채운다 — 반 별 클래스(50%)만 두어 4.1 과 4.9 가 같은 반 별로 그려졌다(이름은 "4.1")
+                        style: isHalf ? { width: `${fillRatio * 100}%` } : undefined, children: _jsx(Icon, { icon: "star", size: iconSize, className: "rating__star rating__star--filled" }) }))] }));
             if (isReadOnly) {
                 return (_jsx("span", { className: "rating__item", "aria-hidden": "true", children: starNode }, star));
             }