@ihabdevteam/core 0.135.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';
@@ -773,6 +774,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 +1376,7 @@ export declare function copyText(text: string): Promise<boolean>;
  *
  * 값은 손으로 적고 `test/coreVersion.test.ts` 가 package.json 과 어긋나면 운다.
  */
-export declare const CORE_VERSION = "0.135.0";
+export declare const CORE_VERSION = "0.137.0";
 
 /** @public */
 declare const coreDefault: Record<string, unknown>;
@@ -2693,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;
 
 /**
  * 가운데 내비 링크 한 개.
@@ -2929,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 }: {
@@ -3344,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 & {
@@ -3385,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면 투명 배경으로 페이지에 녹아든다 */
@@ -4150,9 +4167,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 길이 그대로). 미지정 시 내용만큼(기본).
      *
@@ -4161,6 +4186,11 @@ export declare interface PopupProps {
      * 그대로 걸리므로 창이 화면 밖으로 나가지 않는다. 넘치는 내용은 본문이 스스로 굴린다.
      */
     height?: number | string;
+    /**
+     * 본문이 패널 높이를 채운다 — 본문 자신은 굴리지 않고, 안쪽을 세로 flex(높이 100%)로 넘겨 **안의 한 칸만** 굴리게 한다.
+     * `height` 로 창 높이를 박고 가운데 목록(`Panel scrollable` 등)만 굴러가야 하는 창에 쓴다.
+     */
+    fillBody?: boolean;
     /**
      * 이 값이 바뀌면 본문(.popup-content) 스크롤을 맨 위로 되돌린다.
      * 탭/모드 전환처럼 내부 콘텐츠가 통째로 바뀌는 팝업에서, 스크롤을 내린 채
@@ -6863,8 +6893,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` 면 숨는다. */
@@ -7518,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/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/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/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

@@ -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
@@ -176,6 +177,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/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/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/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/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;
@@ -104,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))) }))] })) }) }));
 }