@ihabdevteam/core 0.136.0 → 0.137.0

package/dist/ihabdevteam-core.d.ts

@@ -12,6 +12,7 @@ import { JSX } from 'react';
 import { KeyboardEvent as KeyboardEvent_2 } from 'react';
 import { MouseEvent as MouseEvent_2 } from 'react';
 import { default as React_2 } from 'react';
+import * as React_3 from 'react';
 import { ReactNode } from 'react';
 import { ReactPortal } from 'react';
 import { Ref } from 'react';
@@ -1375,7 +1376,7 @@ export declare function copyText(text: string): Promise<boolean>;
  *
  * 값은 손으로 적고 `test/coreVersion.test.ts` 가 package.json 과 어긋나면 운다.
  */
-export declare const CORE_VERSION = "0.136.0";
+export declare const CORE_VERSION = "0.137.0";
 
 /** @public */
 declare const coreDefault: Record<string, unknown>;
@@ -2699,7 +2700,7 @@ export declare interface LandingBottomStickyProps {
  *
  * @public
  */
-export declare function LandingHeader({ logo, logoAlt, logoHref, links, actions, className, containerClassName, renderLink, menuLabel, }: LandingHeaderProps): JSX.Element;
+export declare function LandingHeader({ logo, logoAlt, logoHref, links, actions, className, containerClassName, renderLink, menuLabel: menuLabelProp, }: LandingHeaderProps): JSX.Element;
 
 /**
  * 가운데 내비 링크 한 개.
@@ -2935,7 +2936,7 @@ export declare interface MediaQueryOverride {
 }
 
 /** @public */
-export declare const MediaQueryOverrideContext: Context<MediaQueryOverride | null>;
+export declare const MediaQueryOverrideContext: React_3.Context<MediaQueryOverride | null>;
 
 /** @public */
 export declare function MenuTooltip({ columns, onClose, className, size }: {
@@ -3350,7 +3351,7 @@ export declare interface PairStats {
     total: number;
 }
 
-export declare function Panel({ title, icon, disc, actions, size, minHeight, maxWidth, className, scrollable, useBorder, useBg, useRowBorder, labelWidth, form, loading, empty, children }: PanelProps): JSX.Element;
+export declare function Panel({ title, icon, disc, actions, size, minHeight, maxWidth, className, scrollable, scrollbarGutter, compactRows, useBorder, useBg, useRowBorder, labelWidth, form, loading, empty, children }: PanelProps): JSX.Element;
 
 /** @public */
 export declare type PanelElement = HTMLDivElement & {
@@ -3391,6 +3392,16 @@ declare interface PanelProps {
     maxWidth?: number | string;
     className?: string;
     scrollable?: boolean;
+    /**
+     * `scrollable` 본문의 스크롤바 자리. `'stable'` 이면 스크롤바가 없어도 자리를 비워 두어,
+     * 내용이 늘어 스크롤바가 생길 때 폭이 튀지 않는다. 기본 `'auto'`(생길 때만 자리를 차지).
+     */
+    scrollbarGutter?: 'auto' | 'stable';
+    /**
+     * 행을 조금 낮춘다 — 최소 높이 46px·위아래 여백 3px. `size="small"` 에 겹쳐 쓰면 행 하나짜리 머리 없는 패널의
+     * **테두리까지 바깥 높이가 48px** 이라 옆의 48px 단추와 줄이 맞는다(공유 링크 칸 등). 머리 높이·라벨 급은 그대로.
+     */
+    compactRows?: boolean;
     /** 외곽선 표시 여부. 기본 true */
     useBorder?: boolean;
     /** 배경(카드 흰 배경) 표시 여부. 기본 true. false면 투명 배경으로 페이지에 녹아든다 */
@@ -4175,6 +4186,11 @@ export declare interface PopupProps {
      * 그대로 걸리므로 창이 화면 밖으로 나가지 않는다. 넘치는 내용은 본문이 스스로 굴린다.
      */
     height?: number | string;
+    /**
+     * 본문이 패널 높이를 채운다 — 본문 자신은 굴리지 않고, 안쪽을 세로 flex(높이 100%)로 넘겨 **안의 한 칸만** 굴리게 한다.
+     * `height` 로 창 높이를 박고 가운데 목록(`Panel scrollable` 등)만 굴러가야 하는 창에 쓴다.
+     */
+    fillBody?: boolean;
     /**
      * 이 값이 바뀌면 본문(.popup-content) 스크롤을 맨 위로 되돌린다.
      * 탭/모드 전환처럼 내부 콘텐츠가 통째로 바뀌는 팝업에서, 스크롤을 내린 채
@@ -7534,7 +7550,6 @@ export declare type TrainingStepListenProps = {
     showNoiseWaveForm?: boolean;
 };
 
-/** @public */
 export declare function TrainingStepOrderList({ index, stepIndex, isLast, title, onDone, onChange, context, }: TrainingStepOrderListProps): JSX.Element;
 
 /** @public */

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

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

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

@@ -111,8 +111,9 @@ onComplete, trigger = 0, }) {
         // 움직임 최소화를 켠 사용자에게는 화면을 가로지르는 물리 애니메이션을 재생하지 않는다.
         // CSS의 전역 reduce 규칙(styles.css)은 requestAnimationFrame 기반인 이 효과를 막지 못한다.
         if (typeof window !== 'undefined' && window.matchMedia?.('(prefers-reduced-motion: reduce)').matches) {
-            onCompleteRef.current?.();
-            return;
+            // 곧바로 부르지 않고 한 틱 미룬다 — effect 안에서 바로 부르면 StrictMode 의 두 번 실행에서 onComplete 가 두 번
+            const id = setTimeout(() => onCompleteRef.current?.(), 0);
+            return () => clearTimeout(id);
         }
         // production: no debug logging
         const gravity = 1200; // px/s^2 (pulls downward) - reduced for longer arcs

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

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createElement } from 'react';
 import useLucideIcon from '../hooks/useLucideIcon';
@@ -20,7 +21,9 @@ export default function Icon(props) {
     const { iconToUse, mode, svgText, blobUrl } = useIcon(iconStr);
     // ────────────────────────────────────────────────────────────────────────────
     const createWrapper = (children, extraProps = {}) => (_jsx("span", { className: wrapperClass, style: wrapperStyle, ...extraProps, children: children }));
-    const createImage = (src, extraProps = {}) => (_jsx("img", { src: src, alt: typeof label === 'string' ? label : (label ? String(label) : ''), className: defaultImgClass, ...extraProps }));
+    const createImage = (src, extraProps = {}) => (
+    // 글자가 아닌 label(요소)은 alt 로 못 쓴다 — String() 하면 "[object Object]" 가 읽혔다
+    _jsx("img", { src: src, alt: typeof label === 'string' ? label : (typeof label === 'number' ? String(label) : ''), className: defaultImgClass, ...extraProps }));
     if (!icon)
         return null;
     if (typeof icon !== 'string')

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

@@ -64,4 +64,4 @@ export interface LandingHeaderProps {
  *
  * @public
  */
-export default function LandingHeader({ logo, logoAlt, logoHref, links, actions, className, containerClassName, renderLink, menuLabel, }: LandingHeaderProps): import("react").JSX.Element;
+export default function LandingHeader({ logo, logoAlt, logoHref, links, actions, className, containerClassName, renderLink, menuLabel: menuLabelProp, }: LandingHeaderProps): import("react").JSX.Element;

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

@@ -1,6 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useId, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { pushEsc } from '../hooks/escStack';
 import './LandingHeader.css';
 /**
@@ -18,7 +19,10 @@ import './LandingHeader.css';
  *
  * @public
  */
-export default function LandingHeader({ logo, logoAlt = '', logoHref, links = [], actions, className, containerClassName, renderLink, menuLabel = { open: '메뉴 열기', close: '메뉴 닫기' }, }) {
+export default function LandingHeader({ logo, logoAlt = '', logoHref, links = [], actions, className, containerClassName, renderLink, menuLabel: menuLabelProp, }) {
+    const { t } = useTranslation();
+    // 기본 이름표도 지금 언어로 — 박힌 '메뉴 열기' 가 영어 화면 햄버거 이름으로 읽혔다
+    const menuLabel = menuLabelProp ?? { open: t('header.menuOpen', '메뉴 열기'), close: t('header.menuClose', '메뉴 닫기') };
     const [open, setOpen] = useState(false);
     // 서랍 id 를 고정 문자열로 두면 한 화면에 헤더가 둘일 때(미리보기·놀이터 견본) id 가 겹쳐
     // 햄버거의 aria-controls 가 엉뚱한 서랍을 가리킨다 — 헤더마다 따로 짓는다.

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

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

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

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

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

@@ -104,6 +104,8 @@
 .panel--small  .panel-row { min-height: 48px; }
 .panel--medium .panel-row { min-height: 56px; }
 .panel--large  .panel-row { min-height: 64px; }
+/* compactRows — 크기 규칙 **뒤에** 둬야 같은 특이도로 이긴다 */
+.panel--compact-rows .panel-row { min-height: 46px; padding-top: 3px; padding-bottom: 3px; }
 /* 인접한 row 사이에만 구분선 (첫/끝 처리 불필요) */
 .panel-row + .panel-row {
   border-top: 1px solid var(--color-darkWhite);
@@ -156,6 +158,7 @@
   overflow-y: auto;
   overscroll-behavior-y: contain;
 }
+.panel__body--gutter-stable { scrollbar-gutter: stable; }
 
 /* ── SectionRow variants ──────────────────────────────────────────────── */
 /* content: 단순 패딩 콘텐츠 영역 (min-height·flex 오버라이드) */

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

@@ -28,6 +28,16 @@ interface PanelProps {
     maxWidth?: number | string;
     className?: string;
     scrollable?: boolean;
+    /**
+     * `scrollable` 본문의 스크롤바 자리. `'stable'` 이면 스크롤바가 없어도 자리를 비워 두어,
+     * 내용이 늘어 스크롤바가 생길 때 폭이 튀지 않는다. 기본 `'auto'`(생길 때만 자리를 차지).
+     */
+    scrollbarGutter?: 'auto' | 'stable';
+    /**
+     * 행을 조금 낮춘다 — 최소 높이 46px·위아래 여백 3px. `size="small"` 에 겹쳐 쓰면 행 하나짜리 머리 없는 패널의
+     * **테두리까지 바깥 높이가 48px** 이라 옆의 48px 단추와 줄이 맞는다(공유 링크 칸 등). 머리 높이·라벨 급은 그대로.
+     */
+    compactRows?: boolean;
     /** 외곽선 표시 여부. 기본 true */
     useBorder?: boolean;
     /** 배경(카드 흰 배경) 표시 여부. 기본 true. false면 투명 배경으로 페이지에 녹아든다 */
@@ -44,7 +54,7 @@ interface PanelProps {
     empty?: ReactNode;
     children?: ReactNode;
 }
-export default function Panel({ title, icon, disc, actions, size, minHeight, maxWidth, className, scrollable, useBorder, useBg, useRowBorder, labelWidth, form, loading, empty, children }: PanelProps): import("react").JSX.Element;
+export default function Panel({ title, icon, disc, actions, size, minHeight, maxWidth, className, scrollable, scrollbarGutter, compactRows, useBorder, useBg, useRowBorder, labelWidth, form, loading, empty, children }: PanelProps): import("react").JSX.Element;
 /** @public */
 export declare function PanelGrid({ cols, children }: {
     cols?: number;

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

@@ -5,10 +5,10 @@ import { PanelRow } from './PanelRow';
 import { Children } from 'react';
 import Icon from './Icon';
 import './Panel.css';
-export default function Panel({ title, icon, disc, actions, size = 'medium', minHeight, maxWidth, className, scrollable, useBorder = true, useBg = true, useRowBorder = true, labelWidth, form = false, loading, empty, children }) {
+export default function Panel({ title, icon, disc, actions, size = 'medium', minHeight, maxWidth, className, scrollable, scrollbarGutter = 'auto', compactRows = false, useBorder = true, useBg = true, useRowBorder = true, labelWidth, form = false, loading, empty, children }) {
     const cls = cx('panel', `panel--${size}`, form ? 'panel--form' : '', 
     /* minHeight 패널은 마지막 행 아래 빈 공간이 생길 수 있으므로 행 하단 구분선 사용 */
-    minHeight !== undefined ? 'panel--fill' : '', !useBorder ? 'panel--no-border' : '', !useBg ? 'panel--no-bg' : '', !useRowBorder ? 'panel--no-row-border' : '', className);
+    minHeight !== undefined ? 'panel--fill' : '', !useBorder ? 'panel--no-border' : '', !useBg ? 'panel--no-bg' : '', !useRowBorder ? 'panel--no-row-border' : '', compactRows ? 'panel--compact-rows' : '', className);
     const style = {};
     if (minHeight !== undefined)
         style.minHeight = minHeight;
@@ -18,7 +18,7 @@ export default function Panel({ title, icon, disc, actions, size = 'medium', min
         style['--panel-label-width'] = typeof labelWidth === 'number' ? `${labelWidth}px` : labelWidth;
     return (_jsxs("div", { className: cls, style: Object.keys(style).length ? style : undefined, children: [(title != null || disc != null) && (_jsxs("div", { className: cx('panel__header', disc != null ? 'panel__header--with-disc' : ''), children: [icon && (_jsx(Icon, { icon: icon, label: typeof title === 'string' ? title : undefined, className: "panel__icon" })), _jsxs("div", { className: "panel__title-group", children: [title != null && (_jsx("h2", { className: `panel__title ${disc != null ? 'body-3b' : 'h5b'}`, children: title })), disc != null && _jsx("p", { className: "panel__disc caption-1", children: disc })] }), actions && _jsx("div", { className: "panel__actions", children: actions })] })), loading ? (_jsx(PanelRow, { variant: "loading" })
             /* 비었는지는 React 가 그리는 것으로 센다 — `{조건 && 행들}` 이 false 면 children 이 false 라 빈 상태 문구가 안 떴다 */
-            ) : empty != null && Children.toArray(children).length === 0 ? (_jsx(PanelRow, { variant: "empty", children: empty })) : scrollable ? (_jsx("div", { className: "panel__body--scroll", children: children })) : children] }));
+            ) : empty != null && Children.toArray(children).length === 0 ? (_jsx(PanelRow, { variant: "empty", children: empty })) : scrollable ? (_jsx("div", { className: cx('panel__body--scroll', scrollbarGutter === 'stable' && 'panel__body--gutter-stable'), children: children })) : children] }));
 }
 // ── PanelGrid ──────────────────────────────────────────────────────────────
 /** @public */

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

@@ -9,6 +9,13 @@ import Dropdown from './Dropdown';
 import Button from './Button';
 import Badge from './Badge';
 import { deviceKindVariant } from '../utils/deviceKind';
+/* 기기 종류 배지 이름은 지금 언어로 — 값은 저장된 한국어(보청기·인공와우)라 그대로 보이면 영어 화면에도 한국어였다.
+   색(deviceKindVariant)은 저장값으로 가른다. 모르는 값은 그대로 */
+const 기기종류열쇠 = { '보청기': 'hearingAid', '인공와우': 'cochlearImplant' };
+function 기기종류이름(device, t) {
+    const k = 기기종류열쇠[device];
+    return k ? t(`device.type.${k}`, { defaultValue: device }) : device;
+}
 import TextField from './TextField';
 import Loader from './Loader';
 import './Panel.css';
@@ -143,6 +150,6 @@ export function PanelRowDevice({ devices, onRelease, emptyLabel }) {
                             /* 표의 줄 끝 단추와 같은 모양·같은 말 — 하는 일도 같다.
                                이력에서 지우는 것이 아니라 '지금 끼고 있음' 만 내린다
                                (잠시 안 씀·수리 보냄 같은 경우가 실제로 있다). */
-                            _jsx(Button, { htmlType: "button", size: 32, type: "dot", icon: "x", ariaLabel: t('customers.device.unwear', '착용 해제'), showTooltipInfo: t('customers.device.unwear', '착용 해제'), onClick: () => onRelease(side) }))] }), d ? (_jsxs("div", { className: "panel-row__device-info", children: [_jsxs("span", { className: "panel-row__device-kind", children: [d.device && _jsx(Badge, { size: "small", variant: deviceKindVariant(d.device), fill: "soft", label: d.device }), 메타(d) && _jsx("span", { className: "panel-row__device-detail body-3", children: 메타(d) })] }), _jsx("span", { className: "panel-row__device-name body-2b", children: d.productName || d.brand }), _jsx("span", { className: "panel-row__device-date caption-1", children: t('customers.device.wornSince', { date: `${d.wornYear}.${d.wornMonth}.${d.wornDay}` }) })] })) : (_jsx("span", { className: "panel-row__device-empty body-3", children: emptyLabel ?? t('customers.device.notRegistered', '미등록') }))] }, side));
+                            _jsx(Button, { htmlType: "button", size: 32, type: "dot", icon: "x", ariaLabel: t('customers.device.unwear', '착용 해제'), showTooltipInfo: t('customers.device.unwear', '착용 해제'), onClick: () => onRelease(side) }))] }), d ? (_jsxs("div", { className: "panel-row__device-info", children: [_jsxs("span", { className: "panel-row__device-kind", children: [d.device && _jsx(Badge, { size: "small", variant: deviceKindVariant(d.device), fill: "soft", label: 기기종류이름(d.device, t) }), 메타(d) && _jsx("span", { className: "panel-row__device-detail body-3", children: 메타(d) })] }), _jsx("span", { className: "panel-row__device-name body-2b", children: d.productName || d.brand }), _jsx("span", { className: "panel-row__device-date caption-1", children: t('customers.device.wornSince', { date: `${d.wornYear}.${d.wornMonth}.${d.wornDay}` }) })] })) : (_jsx("span", { className: "panel-row__device-empty body-3", children: emptyLabel ?? t('customers.device.notRegistered', '미등록') }))] }, side));
         }) }));
 }

package/dist/packages/core/src/components/PassCard/PassCardBgIHAB.js

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

package/dist/packages/core/src/components/PassCard/PassCardBgLeftColorGrid.js

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

package/dist/packages/core/src/components/PassCard/PassCardBgSoundMove.js

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

package/dist/packages/core/src/components/PassCard/PassCardBgSoundMoveV1.js

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

package/dist/packages/core/src/components/PassCard/PassCardBgTalk.js

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

package/dist/packages/core/src/components/PassCard/PassCardBgTalkV1.js

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

package/dist/packages/core/src/components/PassCard/PassCardBgTwoCircle.js

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

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

@@ -8,6 +8,13 @@ import Button from '../Button';
 import Checkbox from '../Checkbox';
 import Badge from '../Badge';
 import { deviceKindVariant } from '../../utils/deviceKind';
+/* 기기 종류 배지 이름은 지금 언어로 — 값은 저장된 한국어(보청기·인공와우)라 그대로 보이면 영어 화면에도 한국어였다.
+   색(deviceKindVariant)은 저장값으로 가른다. 모르는 값은 그대로 */
+const 기기종류열쇠 = { '보청기': 'hearingAid', '인공와우': 'cochlearImplant' };
+function 기기종류이름(device, t) {
+    const k = 기기종류열쇠[device];
+    return k ? t(`device.type.${k}`, { defaultValue: device }) : device;
+}
 import { useTablePaging, useTableSort } from '../../hooks/useTablePaging';
 import './DeviceListPopup.css';
 /**
@@ -72,7 +79,7 @@ export default function DeviceSideTable({ rows, onSelect, onDelete, onWear, onRe
                     /* 종류는 위 패널의 종류 배지와 같은 모양으로 — 같은 값을 두 곳에서 다르게
                        그리면 같은 것인 줄 모른다. 값이 비면 배지도 세우지 않는다(빈 배지는
                        '무언가 있다'는 거짓 신호다). */
-                    { content: row.device ? _jsx(Badge, { size: "small", variant: deviceKindVariant(row.device), fill: "soft", label: row.device }) : _jsx("span", {}) },
+                    { content: row.device ? _jsx(Badge, { size: "small", variant: deviceKindVariant(row.device), fill: "soft", label: 기기종류이름(row.device, t) }) : _jsx("span", {}) },
                     { content: _jsx("span", { children: row.brand }) },
                     { content: _jsx("span", { children: row.fitType || '-' }) },
                     { content: _jsx("span", { children: row.productName || '-' }) },

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

@@ -35,6 +35,16 @@
 .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;

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

@@ -89,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, layer = 'modal', 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(확인/완료 콜백)가 여러 번 예약되어 중복 실행된다.
@@ -159,9 +159,10 @@ export default function Popup(props) {
            거절)을 누르면 포커스가 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/ProgressIndicator.js

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

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/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/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 (_) { }
     }
@@ -172,8 +175,11 @@ export default function TrainingBlockButton(props) {
     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)) ||

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';