@ihabdevteam/core 0.135.0 → 0.137.0

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

@@ -34,6 +34,25 @@
 .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; }
+/* height prop — 변수로 받는다. 클래스 하나라 앱이 `.my-popup .popup-panel { height }` 로 (미디어별로) 이길 수 있다 */
+.popup-panel--has-height { height: var(--popup-height); }
+/* fillBody — 본문은 굴리지 않고 안쪽이 높이를 물려받는다(안의 한 칸만 굴린다) */
+.popup-panel--fill-body .popup-content { overflow: hidden; }
+.popup-panel--fill-body .popup-content__inner {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  height: 100%;
+}
+/* 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 길이 그대로). 미지정 시 내용만큼(기본).
      *
@@ -81,6 +89,11 @@ export interface PopupProps {
      * 그대로 걸리므로 창이 화면 밖으로 나가지 않는다. 넘치는 내용은 본문이 스스로 굴린다.
      */
     height?: number | string;
+    /**
+     * 본문이 패널 높이를 채운다 — 본문 자신은 굴리지 않고, 안쪽을 세로 flex(높이 100%)로 넘겨 **안의 한 칸만** 굴리게 한다.
+     * `height` 로 창 높이를 박고 가운데 목록(`Panel scrollable` 등)만 굴러가야 하는 창에 쓴다.
+     */
+    fillBody?: boolean;
     /**
      * 이 값이 바뀌면 본문(.popup-content) 스크롤을 맨 위로 되돌린다.
      * 탭/모드 전환처럼 내부 콘텐츠가 통째로 바뀌는 팝업에서, 스크롤을 내린 채

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, fillBody = false, resetScrollKey } = props || {};
     const [closing, setClosing] = useState(false);
     // 닫힘 애니메이션 중(260ms)엔 버튼이 시각적으로만 흐려질 뿐 클릭은 계속 가능해,
     // 그 사이 같은 버튼을 연타하면 cb(확인/완료 콜백)가 여러 번 예약되어 중복 실행된다.
@@ -154,14 +154,15 @@ 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 은 그대로 온다. */
         onMouseDown: inline ? undefined : (e) => { if (e.target === e.currentTarget)
-            e.preventDefault(); }, children: _jsxs("div", { ref: panelRef, className: `popup-panel${size ? ` popup-panel--${size}` : ''}`, 
-            /* max-height(CSS)가 height 보다 이기므로 화면보다 크게 줘도 화면에 맞춰진다 */
-            style: height != null ? { height } : undefined, tabIndex: -1, role: inline ? undefined : 'dialog', "aria-modal": inline ? undefined : true, "aria-labelledby": !inline && title ? titleId : undefined, "aria-label": !inline && !title && ariaLabel ? ariaLabel : undefined, children: [!useTitle && (headerActions || onClose) ? (_jsxs("div", { className: "popup-close-float", children: [headerActions, onClose && _jsx(Button, { htmlType: "button", size: 40, type: "dot", icon: "x", variant: "transparent-gray", useBorder: false, onClick: closeWithAnimation, disabled: closeDisabled, ariaLabel: t('common.close', '닫기') })] })) : (title || headerActions || onClose) ? (_jsxs("div", { className: `popup-header${subtitle ? ' popup-header--with-subtitle' : ''}`, children: [_jsxs("div", { className: "popup-header-main", children: [_jsx("span", { id: titleId, className: "popup-title popup-title--left h2", children: title }), subtitle && _jsx("span", { className: "popup-subtitle body-3", children: subtitle })] }), _jsxs("div", { className: "popup-header-actions", children: [headerActions, onClose && (_jsx(Button, { htmlType: "button", size: 40, type: "dot", icon: "x", variant: "transparent-gray", useBorder: false, onClick: closeWithAnimation, disabled: closeDisabled, ariaLabel: t('common.close', '닫기') }))] })] })) : null, _jsx("div", { className: "popup-content", ref: contentRef, tabIndex: contentScrollable ? 0 : undefined, children: _jsx("div", { className: "popup-content__inner", children: typeof children === 'function' ? children({ animateThen, closeWithAnimation }) : children }) }), buttons?.length ? (_jsx("div", { className: "popup-footer popup-footer--buttons", children: buttons.map((btn, i) => (_jsx(Button, { htmlType: "button", size: 48, variant: btn.variant ?? 'default', label: btn.label, disabled: btn.disabled, onClick: () => btn.onClick?.({ animateThen, closeWithAnimation }) }, i))) })) : footer ? (_jsx("div", { className: `popup-footer${footerClassName ? ` ${footerClassName}` : ''}`, children: typeof footer === 'function' ? footer({ animateThen, closeWithAnimation }) : footer })) : null] }) }));
+            e.preventDefault(); }, children: _jsxs("div", { ref: panelRef, className: `popup-panel${size ? ` popup-panel--${size}` : ''}${height != null ? ' popup-panel--has-height' : ''}${fillBody ? ' popup-panel--fill-body' : ''}`, 
+            /* 높이는 **CSS 변수로** 넘긴다 — 인라인 height 로 박으면 앱의 미디어 규칙(좁은 화면만 다른 높이)이 못 이겼다.
+               max-height(CSS)가 height 보다 이기므로 화면보다 크게 줘도 화면에 맞춰진다 */
+            style: height != null ? { '--popup-height': typeof height === 'number' ? `${height}px` : height } : undefined, tabIndex: -1, role: inline ? undefined : 'dialog', "aria-modal": inline ? undefined : true, "aria-labelledby": !inline && title ? titleId : undefined, "aria-label": !inline && !title && ariaLabel ? ariaLabel : undefined, children: [!useTitle && (headerActions || onClose) ? (_jsxs("div", { className: "popup-close-float", children: [headerActions, onClose && _jsx(Button, { htmlType: "button", size: 40, type: "dot", icon: "x", variant: "transparent-gray", useBorder: false, onClick: closeWithAnimation, disabled: closeDisabled, ariaLabel: t('common.close', '닫기') })] })) : (title || headerActions || onClose) ? (_jsxs("div", { className: `popup-header${subtitle ? ' popup-header--with-subtitle' : ''}`, children: [_jsxs("div", { className: "popup-header-main", children: [_jsx("span", { id: titleId, className: "popup-title popup-title--left h2", children: title }), subtitle && _jsx("span", { className: "popup-subtitle body-3", children: subtitle })] }), _jsxs("div", { className: "popup-header-actions", children: [headerActions, onClose && (_jsx(Button, { htmlType: "button", size: 40, type: "dot", icon: "x", variant: "transparent-gray", useBorder: false, onClick: closeWithAnimation, disabled: closeDisabled, ariaLabel: t('common.close', '닫기') }))] })] })) : null, _jsx("div", { className: "popup-content", ref: contentRef, tabIndex: contentScrollable ? 0 : undefined, children: _jsx("div", { className: "popup-content__inner", children: typeof children === 'function' ? children({ animateThen, closeWithAnimation }) : children }) }), buttons?.length ? (_jsx("div", { className: "popup-footer popup-footer--buttons", children: buttons.map((btn, i) => (_jsx(Button, { htmlType: "button", size: 48, variant: btn.variant ?? 'default', label: btn.label, disabled: btn.disabled, onClick: () => btn.onClick?.({ animateThen, closeWithAnimation }) }, i))) })) : footer ? (_jsx("div", { className: `popup-footer${footerClassName ? ` ${footerClassName}` : ''}`, children: typeof footer === 'function' ? footer({ animateThen, closeWithAnimation }) : footer })) : null] }) }));
     if (inline || typeof document === 'undefined')
         return el;
     return createPortal(el, document.body);

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

@@ -64,8 +64,13 @@ export default function TrainingResultPopup(props) {
     useEffect(() => {
         const total = contextsLength ?? 0;
         if (score != null && total > 0 && score / total > 0.5) {
-            window.dispatchEvent(new CustomEvent('party:trigger', { detail: { count: 140, strength: 1.6, duration: 2200 } }));
+            // 한 틱 미뤄 보내고 떠나면 걷는다 — StrictMode 의 두 번 실행에서 폭죽 신호가 두 번 나갔다
+            const id = window.setTimeout(() => {
+                window.dispatchEvent(new CustomEvent('party:trigger', { detail: { count: 140, strength: 1.6, duration: 2200 } }));
+            }, 0);
+            return () => window.clearTimeout(id);
         }
+        return undefined;
     }, [score, contextsLength]);
     const getJudge = useCallback((it) => {
         const decision = resolveDecision(it);

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

@@ -1,7 +1,13 @@
+'use client';
 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 +48,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/PromoBannerBg/PromoBannerBgDark.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useParentBgTheme } from '../../hooks/useParentBgTheme';
 import './PromoBannerBg.css';

package/dist/packages/core/src/components/PromoBannerBg/PromoBannerBgDeep.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useParentBgTheme } from '../../hooks/useParentBgTheme';
 import './PromoBannerBg.css';

package/dist/packages/core/src/components/PromoBannerBg/PromoBannerBgDiagonal.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useParentBgTheme } from '../../hooks/useParentBgTheme';
 import './PromoBannerBg.css';

package/dist/packages/core/src/components/PromoBannerBg/PromoBannerBgDots.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useParentBgTheme } from '../../hooks/useParentBgTheme';
 import './PromoBannerBg.css';

package/dist/packages/core/src/components/PromoBannerBg/PromoBannerBgInstagram.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useParentBgTheme } from '../../hooks/useParentBgTheme';
 import './PromoBannerBg.css';

package/dist/packages/core/src/components/PromoBannerBg/PromoBannerBgMain.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useParentBgTheme } from '../../hooks/useParentBgTheme';
 import './PromoBannerBg.css';

package/dist/packages/core/src/components/PromoBannerBg/PromoBannerBgNaver.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useParentBgTheme } from '../../hooks/useParentBgTheme';
 import './PromoBannerBg.css';

package/dist/packages/core/src/components/PromoBannerBg/PromoBannerBgOutline.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useParentBgTheme } from '../../hooks/useParentBgTheme';
 import './PromoBannerBg.css';

package/dist/packages/core/src/components/PromoBannerBg/PromoBannerBgRadial.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useParentBgTheme } from '../../hooks/useParentBgTheme';
 import './PromoBannerBg.css';

package/dist/packages/core/src/components/PromoBannerBg/PromoBannerBgSoft.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useParentBgTheme } from '../../hooks/useParentBgTheme';
 import './PromoBannerBg.css';

package/dist/packages/core/src/components/PromoBannerBg/PromoBannerBgSoftSub.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useParentBgTheme } from '../../hooks/useParentBgTheme';
 import './PromoBannerBg.css';

package/dist/packages/core/src/components/PromoBannerBg/PromoBannerBgSub.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useParentBgTheme } from '../../hooks/useParentBgTheme';
 import './PromoBannerBg.css';

package/dist/packages/core/src/components/PromoBannerBg/PromoBannerBgSuccess.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useParentBgTheme } from '../../hooks/useParentBgTheme';
 import './PromoBannerBg.css';

package/dist/packages/core/src/components/PromoBannerBg/PromoBannerBgWarm.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useParentBgTheme } from '../../hooks/useParentBgTheme';
 import './PromoBannerBg.css';

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));
             }

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

@@ -57,7 +57,10 @@ function SideNavButton(props) {
 export default function SideNav(props) {
     const { t } = useTranslation();
     const { items = [], activeKey, onChange, unreadCount, onDebug, onNotification, onAccount, onSetting, onHelp, appMode, onAppModeChange } = props || {};
-    const handleModeSwitch = useCallback(() => onAppModeChange?.(appMode === 'malgwi' ? 'manager' : 'malgwi'), [onAppModeChange, appMode]);
+    /* 모드를 안 주면 말귀로 본다 — Header(브랜드)·BottomNav 와 같게. 전에는 여기만 매니저로 봐 같은 화면에서
+       데스크톱은 '말귀로 이동', 모바일은 '말귀 매니저' 로 서로 반대를 가리켰다. */
+    const isManager = appMode === 'manager';
+    const handleModeSwitch = useCallback(() => onAppModeChange?.(isManager ? 'malgwi' : 'manager'), [onAppModeChange, isManager]);
     return (_jsxs("nav", { "aria-label": t('nav.mainMenu', '메인 메뉴'), className: "side-nav__menu", children: [_jsxs("div", { className: "side-nav__menu-list", children: [(items || [])
                         .filter((it) => !it.section && (it.key || it.label))
                         .map((it, idx) => (_jsxs(React.Fragment, { children: [it.divider && _jsx("div", { className: "side-nav__separator" }), _jsx(SideNavButton, { item: it, active: it.key === activeKey, state: it.disabled ? 'disabled' : undefined, onClick: (_key, btnEl, fromPointer) => {
@@ -113,7 +116,7 @@ export default function SideNav(props) {
                                     }
                                 } })] }, it.key ?? `side-nav__item-${idx}`))), onAppModeChange && _jsx("div", { className: "side-nav__separator side-nav__separator--short" }), onAppModeChange && (_jsx(SideNavButton, { item: {
                             key: '__mode-switch__',
-                            label: appMode === 'malgwi' ? t('nav.goToManager', '말귀매니저로 이동') : t('nav.goToMalgwi', '말귀로 이동'),
-                            icon: appMode === 'malgwi' ? 'arrow-right' : 'arrow-left',
+                            label: isManager ? t('nav.goToMalgwi', '말귀로 이동') : t('nav.goToManager', '말귀매니저로 이동'),
+                            icon: isManager ? 'arrow-left' : 'arrow-right',
                         }, onClick: handleModeSwitch }))] }), _jsx(SideNavFooter, { activeKey: activeKey, unreadCount: unreadCount, onDebug: onDebug, onNotification: onNotification, onAccount: onAccount, onSetting: onSetting, onHelp: onHelp })] }));
 }

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

@@ -33,8 +33,7 @@ export default function SplashLogo({ logo, alt, onDone, durationMs = 3000, }) {
     // 담는다. 타이머는 한 번만 걸고, 울릴 때 **그때의 최신 콜백**을 부른다.
     const onDoneRef = useLatestRef(onDone);
     useEffect(() => {
-        if (!onDoneRef.current)
-            return;
+        // onDone 이 없어도 타이머는 건다 — 처음에 없다가 나중에 들어오면(인증 확인 뒤 콜백을 넘기는 등) 전에는 끝내 안 걸려 스플래시가 남았다
         const timer = setTimeout(() => onDoneRef.current?.(), durationMs);
         return () => clearTimeout(timer);
     }, [durationMs, onDoneRef]);

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

@@ -30,7 +30,7 @@ export default function StatChart({ label, value, change, changeType, icon, tool
     }, [onClick]);
     return (_jsxs("div", { ref: cardRef, className: `manager-stat-card${onClick ? ' manager-stat-card--clickable' : ''}`, onClick: onClick, onKeyDown: onClick ? handleKeyDown : undefined, onPointerEnter: handleAnchorEnter, onPointerLeave: handleAnchorLeave, 
         // hover 전용이면 키보드로는 툴팁 내용을 볼 수 없다(ManagerPage와 동일 처리)
-        onFocus: handleAnchorEnter, onBlur: handleAnchorLeave, role: onClick ? 'button' : undefined, tabIndex: onClick ? 0 : undefined, "aria-label": onClick ? `${label} ${value}` : undefined, children: [tooltip && anchorRect && (_jsx(TooltipInfo, { anchorRect: {
+        onFocus: handleAnchorEnter, onBlur: handleAnchorLeave, role: onClick ? 'button' : undefined, tabIndex: onClick ? 0 : undefined, "aria-label": onClick ? [label, value, changeText].filter((v) => v !== undefined && v !== '').join(' ') : undefined, children: [tooltip && anchorRect && (_jsx(TooltipInfo, { anchorRect: {
                     left: anchorRect.left,
                     top: anchorRect.top + 21,
                     right: anchorRect.right,

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

@@ -8,6 +8,8 @@ import Icon from './Icon';
 import Button from './Button';
 import { useComboboxSuggestions } from './useComboboxSuggestions';
 import './TextField.css';
+/* 서버 렌더에서는 layout effect 가 돌지 않고 React 18 은 경고를 찍는다 — 브라우저에서만 layout, 서버에서는 effect */
+const useIsoLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
 /** @public */
 export default function TextField(props) {
     const { value, defaultValue, name, inputRef, onChange, label, ariaLabel, required, placeholder, type = 'text', disabled = false, readOnly = false, error, helperText, maxLength, size = 48, variant = 'input', fullWidth = false, newline = false, multiline = false, rows = 3, leftIcon, rightIcon, clearable = false, list, showCount = true, className = '', onFocus, onBlur, onKeyDown, onEnter, inputMode, autoComplete, autoFocus, suggestions, openOnFocus = false, } = props;
@@ -61,7 +63,7 @@ export default function TextField(props) {
        돌아, 부모가 같은 값을 다시 두면(공백을 걷는 등) 화면 칸에 친 글자가 남았다. React 가 일반 칸에
        해 주는 되돌림(restoreControlledState)을 onChange 뒤 한 박자에 흉내 낸다. */
     const valueRef = useRef(value);
-    useLayoutEffect(() => { valueRef.current = value; });
+    useIsoLayoutEffect(() => { valueRef.current = value; });
     /*
      * React 는 controlled input 의 값을 node.defaultValue(= HTML value 속성)에 동기화한다.
      * 일반 입력에서는 무해하지만 비밀번호에서는 그 속성이 outerHTML 직렬화 경로

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

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Tooltip from './Tooltip';
 import { useTranslation } from 'react-i18next';

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

@@ -4,7 +4,7 @@ import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import Tooltip from './Tooltip';
 import './TrainingTooltip.css';
-import { TRAINING_TYPES } from '../../utils/CategoryData';
+import { translateTrainingTypes } from '../../utils/CategoryData';
 import { getTrainingPools } from '../../utils/getTrainingData';
 import TrainingBlockButton from '../Training/TrainingBlockButton';
 /** 타입 칩 호버 → TrainingTooltip 표시까지의 지연(ms). 말귀자료실 카드와
@@ -20,10 +20,11 @@ function findTrainingData(sel) {
 /** @public */
 export default function TrainingTooltip({ plan, anchorRect, offset = 12, onClose }) {
     const { t } = useTranslation();
-    const groups = useMemo(() => TRAINING_TYPES.map(t => ({
-        type: t,
-        items: (plan.items ?? []).filter(i => i.trainingType === t.key),
-    })).filter(g => g.items.length > 0), [plan.items]);
+    // 머리글은 지금 언어로 — 원본 목록의 한국어 라벨을 써 영어 화면에도 '짧은 이야기 듣기' 가 떴다
+    const groups = useMemo(() => translateTrainingTypes(t).map(type => ({
+        type,
+        items: (plan.items ?? []).filter(i => i.trainingType === type.key),
+    })).filter(g => g.items.length > 0), [plan.items, t]);
     if (groups.length === 0)
         return null;
     const box = (_jsx("div", { className: "tooltip-training__box", children: _jsx("div", { className: "tooltip-training__groups", children: groups.flatMap(({ type, items }, idx) => [

package/dist/packages/core/src/components/Training/TrainingBlockButton.css

@@ -278,6 +278,63 @@
   justify-content: center;
 }
 
+/* ── row 변형 — 전체 너비 가로 행 ─────────────────────────────────────────────────
+   정사각형 카드는 폭이 줄면 내용이 눌린다. 좁은 화면 목록에서 한 줄에 한 장씩
+   [아이콘][유형/제목][문항수] 를 모두 보이게 grid 로 다시 놓는다. 미리 듣기 단추는 그리지 않는다. */
+.training-block-button--row {
+  width: 100%;
+  height: auto;
+  min-height: 68px;
+  display: flex;
+  align-items: center;
+}
+.training-block-button--row .training-block-button__left {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  grid-template-areas:
+    "icon type  count"
+    "icon title count";
+  align-items: center;
+  align-content: center;
+  height: auto;
+  column-gap: var(--spacing-s);
+  row-gap: 4px;
+  padding: 8px 0;
+}
+.training-block-button--row .category-icon__wrap {
+  grid-area: icon;
+  align-self: center;
+}
+.training-block-button--row .training-block-button__type-label {
+  grid-area: type;
+  align-self: end;
+  position: static;
+  inset: auto;
+}
+.training-block-button--row .training-block-button__title {
+  grid-area: title;
+  align-self: start;
+  position: static;
+  inset: auto;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.training-block-button--row .training-block-button__description {
+  grid-area: count;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  position: static;
+  inset: auto;
+  height: auto;
+}
+/* 유형 줄이 없으면 제목이 두 줄 자리 가운데에 선다 */
+.training-block-button--row:not(.training-block-button--withType) .training-block-button__title {
+  grid-row: 1 / span 2;
+  align-self: center;
+}
+
 /* preview play button: small 카드 우측 상단 — 좌측 아이콘(top:12)과 수평 정렬 */
 .training-block-button--small .training-block-button__preview {
   position: absolute;

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

@@ -3,6 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { getTopicTypes, getTrainingTypes } from '../../utils/categories';
+import { TRAINING_TYPE_I18N_KEY } from '../../utils/CategoryData';
 import Icon from '../Icon';
 import Button from '../Button';
 import CategoryIcon from './CategoryIcon';
@@ -93,9 +94,11 @@ export default function TrainingBlockButton(props) {
             const c = topic.iconColor;
             wrapperStyle = { ['--t-item-fg']: c };
         }
-        mainName = parent?.label || '';
+        // 카테고리 이름도 지금 언어로(topic.* · topic.sub.*, 사전에 없으면 등록된 이름)
+        mainName = parent ? t(`topic.${parent.key}`, { defaultValue: parent.label || '' }) : '';
         try {
-            subName = parent?.subs?.find((s) => s.key === subKey)?.label || '';
+            const sub = parent?.subs?.find((s) => s.key === subKey);
+            subName = sub ? t(`topic.sub.${sub.key}`, { defaultValue: sub.label || '' }) : '';
         }
         catch (_) { }
     }
@@ -167,20 +170,25 @@ export default function TrainingBlockButton(props) {
         }
     }
     catch (_) { }
-    const isList = size === 'list';
+    const isRow = size === 'row';
+    // row 는 list 의 바탕 위에 배치만 바꾼다
+    const isList = size === 'list' || isRow;
     const isCompact = size === 'compact';
     const isSmall = size === 'small';
-    const trainingTypeName = isSmall && type?.key
-        ? (getTrainingTypes().find(t => t.key === type.key)?.label ?? '')
+    // 유형 이름은 지금 언어로 — 등록된 원본의 한국어 라벨을 써 영어 화면 계획 바구니에 '소음 하 문장 듣기' 가 떴다
+    const 유형원본 = isSmall && type?.key ? getTrainingTypes().find(x => x.key === type.key) : undefined;
+    const 유형열쇠 = 유형원본 ? TRAINING_TYPE_I18N_KEY[유형원본.key] : undefined;
+    const trainingTypeName = 유형원본
+        ? (유형열쇠 ? t(`trainingType.${유형열쇠}.title`, { defaultValue: 유형원본.label }) : (유형원본.label ?? ''))
         : '';
     // 타입 라벨이 실제로 렌더되는지(타이틀과 같으면 숨김) — 레이아웃 여백 정리에 사용.
     const typeLabelRendered = (!!showTypeLabel && !!type?.label && type.label !== String(itemTitle)) ||
         (isSmall && !!trainingTypeName && trainingTypeName !== String(itemTitle));
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { ref: btnRef, className: `training-block-button${isList ? ' training-block-button--list' : ''}${isCompact ? ' training-block-button--compact' : ''}${isSmall ? ' training-block-button--small' : ''}${isCompleted ? ' training-block-button--completed' : ''}${isSelected ? ' training-block-button--selected' : ''}${typeLabelRendered && !isSmall ? ' training-block-button--withType' : ''}${isSmall && !typeLabelRendered ? ' training-block-button--no-type-label' : ''}`, onClick: handleActivate, onPointerEnter: handleBtnHoverOn, onPointerLeave: handleBtnHoverClose, role: "button", tabIndex: 0, onKeyDown: handleKeyDown, "aria-label": typeof ariaLabel === 'string' ? ariaLabel : (typeof itemTitle === 'string' ? itemTitle : undefined), children: [_jsxs("div", { className: "training-block-button__left", children: [showTypeLabel && type?.label && type.label !== String(itemTitle) && (_jsx("span", { className: "training-block-button__type-label caption-1", children: type.label })), isSmall && trainingTypeName && trainingTypeName !== String(itemTitle) && (_jsx("span", { className: "training-block-button__type-label caption-2", children: trainingTypeName })), _jsx(CategoryIcon, { icon: iconForBtn, label: itemTitle, tooltip: popupIconTooltip, wrapperStyle: wrapperStyle, iconSize: (isSmall || isCompact) ? 'small' : 'medium' }), !hideCheckBadge && (isCompleted || isSelected) && !(onRemove && btnHover) && (_jsx(Badge, { type: "dot", icon: "check", position: "top-left", size: "medium", "aria-label": isCompleted ? t('training.completed', '훈련 완료') : t('training.selected', '선택됨') })), onRemove && btnHover && (_jsx(Badge, { type: "dot", icon: "remove", position: "top-left", size: "medium", "aria-label": t('common.remove', '제거'), onClick: handleRemoveClick })), _jsx("div", { className: `training-block-button__title ${isCompact ? 'body-3' : isSmall ? 'body-3b' : 'h3'}`, children: String(itemTitle) }), _jsxs("div", { className: "training-block-button__description", children: [(() => {
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { ref: btnRef, className: `training-block-button${isList ? ' training-block-button--list' : ''}${isRow ? ' training-block-button--row' : ''}${isCompact ? ' training-block-button--compact' : ''}${isSmall ? ' training-block-button--small' : ''}${isCompleted ? ' training-block-button--completed' : ''}${isSelected ? ' training-block-button--selected' : ''}${typeLabelRendered && !isSmall ? ' training-block-button--withType' : ''}${isSmall && !typeLabelRendered ? ' training-block-button--no-type-label' : ''}`, onClick: handleActivate, onPointerEnter: handleBtnHoverOn, onPointerLeave: handleBtnHoverClose, role: "button", tabIndex: 0, onKeyDown: handleKeyDown, "aria-label": typeof ariaLabel === 'string' ? ariaLabel : (typeof itemTitle === 'string' ? itemTitle : undefined), children: [_jsxs("div", { className: "training-block-button__left", children: [showTypeLabel && type?.label && type.label !== String(itemTitle) && (_jsx("span", { className: "training-block-button__type-label caption-1", children: type.label })), isSmall && trainingTypeName && trainingTypeName !== String(itemTitle) && (_jsx("span", { className: "training-block-button__type-label caption-2", children: trainingTypeName })), _jsx(CategoryIcon, { icon: iconForBtn, label: itemTitle, tooltip: popupIconTooltip, wrapperStyle: wrapperStyle, iconSize: (isSmall || isCompact) ? 'small' : 'medium' }), !hideCheckBadge && (isCompleted || isSelected) && !(onRemove && btnHover) && (_jsx(Badge, { type: "dot", icon: "check", position: "top-left", size: "medium", "aria-label": isCompleted ? t('training.completed', '훈련 완료') : t('training.selected', '선택됨') })), onRemove && btnHover && (_jsx(Badge, { type: "dot", icon: "remove", position: "top-left", size: "medium", "aria-label": t('common.remove', '제거'), onClick: handleRemoveClick })), _jsx("div", { className: `training-block-button__title ${isCompact ? 'body-3' : isSmall ? 'body-3b' : 'h3'}`, children: String(itemTitle) }), _jsxs("div", { className: "training-block-button__description", children: [(() => {
                                         const countText = countLabelOverride !== undefined ? countLabelOverride : countLabel;
                                         // 정해진 문항수가 없으면(빈 값) 카운트 요소 자체를 그리지 않는다.
                                         return countText ? (_jsx("div", { className: `training-block-button__count ${isSmall ? 'caption-2' : 'caption-1'}`, children: countText })) : null;
-                                    })(), _jsx("div", { className: "training-block-button__chevron", children: _jsx(Icon, { icon: "chevron-right", label: t('training.next', '다음'), className: "training-block-button__chevron-icon", imgClassName: "training-block-button__chevron-icon-image", maskClassName: "training-block-button__chevron-icon-mask", svgClassName: "training-block-button__chevron-icon-svg", size: isSmall ? 12 : 20 }) })] }), (isList || isSmall) && previewUrls.length > 0 && (_jsx("div", { ref: previewBtnRef, className: "training-block-button__preview", "data-tooltip-ignore": true, onClick: handlePreviewAreaClick, onPointerEnter: handlePreviewHoverOn, onPointerLeave: handlePreviewHoverClose, children: _jsx(Button, { htmlType: "button", size: isSmall ? 28 : 32, type: "dot", icon: playing ? 'pause' : 'play', variant: isSmall ? 'transparent-lightGray' : 'default', useBorder: false, selected: playing, ariaLabel: playing ? t('training.stop', '정지') : t('training.preview', '미리 듣기'), onClick: handlePreview }) }))] }), onMore && (_jsx("div", { className: "training-block-button__more", "data-tooltip-ignore": true, onClick: e => { e.stopPropagation(); onMore(e); }, children: _jsx(Button, { htmlType: "button", size: 40, type: "dot", icon: "more-horizontal", variant: "transparent-lightGray", useBorder: false, ariaLabel: t('common.more', '더보기') }) }))] }), previewHover && (_jsx(InfoTooltip, { anchorRect: previewAnchorRect, text: playing ? t('training.stop', '정지') : t('training.preview', '미리 듣기'), offset: 8, onClose: handlePreviewHoverClose })), btnHover && !open && useDescriptionTooltip && (tooltipItems ? (_jsx(DescriptionTooltip, { anchorRect: btnAnchorRect, items: tooltipItems, activeIndex: playingIndex, onClose: handleBtnHoverClose })) : topic?.subTitle ? (_jsx(InfoTooltip, { anchorRect: btnAnchorRect, text: topic.subTitle, offset: 8, onClose: handleBtnHoverClose })) : null), open && renderPopup && renderPopup({
+                                    })(), _jsx("div", { className: "training-block-button__chevron", children: _jsx(Icon, { icon: "chevron-right", label: t('training.next', '다음'), className: "training-block-button__chevron-icon", imgClassName: "training-block-button__chevron-icon-image", maskClassName: "training-block-button__chevron-icon-mask", svgClassName: "training-block-button__chevron-icon-svg", size: isSmall ? 12 : 20 }) })] }), ((isList && !isRow) || isSmall) && previewUrls.length > 0 && (_jsx("div", { ref: previewBtnRef, className: "training-block-button__preview", "data-tooltip-ignore": true, onClick: handlePreviewAreaClick, onPointerEnter: handlePreviewHoverOn, onPointerLeave: handlePreviewHoverClose, children: _jsx(Button, { htmlType: "button", size: isSmall ? 28 : 32, type: "dot", icon: playing ? 'pause' : 'play', variant: isSmall ? 'transparent-lightGray' : 'default', useBorder: false, selected: playing, ariaLabel: playing ? t('training.stop', '정지') : t('training.preview', '미리 듣기'), onClick: handlePreview }) }))] }), onMore && (_jsx("div", { className: "training-block-button__more", "data-tooltip-ignore": true, onClick: e => { e.stopPropagation(); onMore(e); }, children: _jsx(Button, { htmlType: "button", size: 40, type: "dot", icon: "more-horizontal", variant: "transparent-lightGray", useBorder: false, ariaLabel: t('common.more', '더보기') }) }))] }), previewHover && (_jsx(InfoTooltip, { anchorRect: previewAnchorRect, text: playing ? t('training.stop', '정지') : t('training.preview', '미리 듣기'), offset: 8, onClose: handlePreviewHoverClose })), btnHover && !open && useDescriptionTooltip && (tooltipItems ? (_jsx(DescriptionTooltip, { anchorRect: btnAnchorRect, items: tooltipItems, activeIndex: playingIndex, onClose: handleBtnHoverClose })) : topic?.subTitle ? (_jsx(InfoTooltip, { anchorRect: btnAnchorRect, text: topic.subTitle, offset: 8, onClose: handleBtnHoverClose })) : null), open && renderPopup && renderPopup({
                 trainingData: topic,
                 typeKey: type?.key ?? '',
                 onClose: handleClose,

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

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cx } from '../../utils/cx';
 import { useTranslation } from 'react-i18next';

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

@@ -24,7 +24,8 @@ export default function TrainingPagePopupTitle({ title, subtitle, desc, depth, i
     const subtitleText = typeof subtitle === 'string' ? subtitle.trim() : subtitle;
     const hasName = !!(titleText || subtitleText);
     const resolvedTitle = hasName ? (titleText || subtitleText) : t('common.emptyTrainingName', '훈련 이름이 비어 있습니다.');
-    const rawDepth = depthText || subtitle;
+    // subtitle 을 이미 제목으로 썼으면(title 이 빔) depth 폴백에 다시 쓰지 않는다 — 같은 글이 두 줄로 찍혔다
+    const rawDepth = depthText || (titleText ? subtitle : undefined);
     // 모바일: " · " 또는 " / " 구분자가 있으면 마지막 세그먼트만 사용
     const resolvedDepth = (isMobile && typeof rawDepth === 'string' && (rawDepth.includes(' · ') || rawDepth.includes(' / ')))
         ? rawDepth.split(/\s[·/]\s/).pop()