@ihabdevteam/core 0.130.0 → 0.132.0

package/dist/packages/core/src/components/PassCard/PassCardBg.css

@@ -37,3 +37,36 @@
   -webkit-mask: var(--symbol-url) center / contain no-repeat;
   mask: var(--symbol-url) center / contain no-repeat;
 }
+
+/* ── PassCardBg 컴포넌트 자체의 변형(default · blue · dark) ─────────────────
+   9종 배경은 각자 파일에 모양을 두고, 이 기본 컴포넌트의 원 셋과 변형은 규칙이 없어
+   세 변형이 똑같이(빈 바탕으로) 그려졌다(2026-09-14, 사용자가 정하도록 맡김).
+   **새 색은 쓰지 않는다** — 원 구도는 PassCardBgTwoCircle 과 같게(큰 원 우상단 · 작은 원
+   우하단)에 좌하단 원 하나를 더하고, 색은 브랜드·중립 토큰만 쓴다. 만료 카드
+   (.pass-card--expired)가 --color-main/sub 를 회색으로 바꾸는 규칙도 그대로 따라온다. */
+.pass-card-bg__circle {
+  position: absolute;
+  border-radius: 50%;
+  opacity: var(--pass-card-symbol-opacity, 0.75);
+}
+.pass-card-bg__circle--1 { width: 340px; height: 340px; top: -140px; right: -150px; }
+.pass-card-bg__circle--2 { width: 220px; height: 220px; bottom: -90px; right: -50px; }
+.pass-card-bg__circle--3 { width: 140px; height: 140px; bottom: -70px; left: -40px; }
+
+/* default — 흰 바탕 + main · sub 원(TwoCircle 과 같은 결) */
+.pass-card-bg--default { background: var(--color-pureWhite); }
+.pass-card-bg--default .pass-card-bg__circle--1 { background: var(--color-main); }
+.pass-card-bg--default .pass-card-bg__circle--2 { background: var(--color-sub); }
+.pass-card-bg--default .pass-card-bg__circle--3 { background: var(--color-main-a20); }
+
+/* blue — 짙은 main 바탕 + 흰 반투명 원 */
+.pass-card-bg--blue { background: var(--color-deepMain); }
+.pass-card-bg--blue .pass-card-bg__circle--1 { background: var(--color-white-a30); }
+.pass-card-bg--blue .pass-card-bg__circle--2 { background: var(--color-white-a10); }
+.pass-card-bg--blue .pass-card-bg__circle--3 { background: var(--color-white-a10); }
+
+/* dark — 검은 바탕 + main · sub 원 */
+.pass-card-bg--dark { background: var(--color-softBlack); }
+.pass-card-bg--dark .pass-card-bg__circle--1 { background: var(--color-main); }
+.pass-card-bg--dark .pass-card-bg__circle--2 { background: var(--color-sub); }
+.pass-card-bg--dark .pass-card-bg__circle--3 { background: var(--color-white-a10); }

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

@@ -73,6 +73,14 @@ export interface PopupProps {
      * 더 넓거나 무제한이 필요하면 className으로 `.popup-panel` max-width를 직접 override.
      */
     size?: 'small' | 'medium' | 'large';
+    /**
+     * 패널 높이를 못 박는다(숫자는 px, 문자열은 CSS 길이 그대로). 미지정 시 내용만큼(기본).
+     *
+     * 탭을 옮길 때마다 내용 높이가 달라 창이 위아래로 뛰는 팝업에 쓴다. **화면보다 크면 화면에
+     * 맞춘다** — 패널의 `max-height`(데스크톱 `100% - 60px`, 좁은 화면은 하단 내비 몫까지 뺀 값)가
+     * 그대로 걸리므로 창이 화면 밖으로 나가지 않는다. 넘치는 내용은 본문이 스스로 굴린다.
+     */
+    height?: number | string;
     /**
      * 이 값이 바뀌면 본문(.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, resetScrollKey } = props || {};
+    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 [closing, setClosing] = useState(false);
     // 닫힘 애니메이션 중(260ms)엔 버튼이 시각적으로만 흐려질 뿐 클릭은 계속 가능해,
     // 그 사이 같은 버튼을 연타하면 cb(확인/완료 콜백)가 여러 번 예약되어 중복 실행된다.
@@ -147,7 +147,9 @@ 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, children: _jsxs("div", { ref: panelRef, className: `popup-panel${size ? ` popup-panel--${size}` : ''}`, 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, { 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, { 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, { 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] }) }));
+    const el = (_jsx("div", { className: `popup ${inline ? 'popup--inline' : ''} ${closing ? 'popup--closing' : ''} ${className}`, onPointerDown: backdropEnabled ? onBackdropPointerDown : undefined, onClick: backdropEnabled ? onBackdropClick : undefined, 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, { 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, { 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, { 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/RingChart.d.ts

@@ -58,6 +58,8 @@ export interface RingChartProps {
     loading?: boolean;
     /** 섹션 루트에 추가할 클래스 (titleKey 지정 시에만 사용) */
     className?: string;
+    /** CSS 격자 칸 안에 세운다 — 아래 여백·최소 폭을 풀고 링을 카드 바닥에 맞춘다. ChartSection `inGrid` 참고(titleKey 지정 시에만 사용) */
+    inGrid?: boolean;
 }
 /**
  * 도넛 링 차트 — 전체 대비 완료 비율을 원형 호로 표현.
@@ -65,4 +67,4 @@ export interface RingChartProps {
  * 미지정 시에는 헤더 없는 순수 링만 렌더된다(크기/색상 데모 등).
  * @public
  */
-export default function RingChart({ titleKey, headRight, icon, showTotal, totalLabelKey, legend, loading, className, ...ringProps }: RingChartProps): import("react").JSX.Element;
+export default function RingChart({ titleKey, headRight, icon, showTotal, totalLabelKey, legend, loading, className, inGrid, ...ringProps }: RingChartProps): import("react").JSX.Element;

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

@@ -40,7 +40,7 @@ function RingChartCanvas({ done, total, segments, color = 'var(--color-main)', s
  * 미지정 시에는 헤더 없는 순수 링만 렌더된다(크기/색상 데모 등).
  * @public
  */
-export default function RingChart({ titleKey, headRight, icon, showTotal, totalLabelKey, legend, loading, className, ...ringProps }) {
+export default function RingChart({ titleKey, headRight, icon, showTotal, totalLabelKey, legend, loading, className, inGrid = false, ...ringProps }) {
     const { t } = useTranslation();
     if (!titleKey)
         return _jsx(RingChartCanvas, { ...ringProps });
@@ -53,5 +53,5 @@ export default function RingChart({ titleKey, headRight, icon, showTotal, totalL
         .filter(Boolean).join(' ') || undefined;
     // StatChart(.manager-stat-card__icon)와 동일한 톤 — headRight 자리에 렌더(둘 중 하나만 사용)
     const iconNode = icon && (_jsx("span", { className: "chart-section-icon", children: _jsx(Icon, { icon: icon, className: "chart-section-icon-inner" }) }));
-    return (_jsx(ChartSection, { className: sectionClassName, title: t(titleKey), titleClassName: isSmall ? 'h5 chart-section-title--small' : undefined, headRight: iconNode || (isSmall ? undefined : headRight), subRow: (showTotal || legend) && _jsxs(_Fragment, { children: [showTotal ? (_jsxs(ChartTotal, { label: !isSmall && totalLabelKey ? t(totalLabelKey) : undefined, children: [_jsx("span", { className: "barchart-total__num h0", children: pct }), _jsx("span", { className: "barchart-total__unit h5", children: "%" })] })) : _jsx("span", {}), legend && _jsx(ChartLegend, { items: legend })] }), children: loading ? (_jsx("div", { className: "manager-bar-chart-loading", children: _jsx(Loader, { size: 32 }) })) : (_jsx("div", { className: "ring-chart-section-body ring-chart-section-body--offset", children: _jsx(RingChartCanvas, { ...ringProps, hideCenter: isSmall || ringProps.hideCenter }) })) }));
+    return (_jsx(ChartSection, { className: sectionClassName, inGrid: inGrid, title: t(titleKey), titleClassName: isSmall ? 'h5 chart-section-title--small' : undefined, headRight: iconNode || (isSmall ? undefined : headRight), subRow: (showTotal || legend) && _jsxs(_Fragment, { children: [showTotal ? (_jsxs(ChartTotal, { label: !isSmall && totalLabelKey ? t(totalLabelKey) : undefined, children: [_jsx("span", { className: "barchart-total__num h0", children: pct }), _jsx("span", { className: "barchart-total__unit h5", children: "%" })] })) : _jsx("span", {}), legend && _jsx(ChartLegend, { items: legend })] }), children: loading ? (_jsx("div", { className: "manager-bar-chart-loading", children: _jsx(Loader, { size: 32 }) })) : (_jsx("div", { className: "ring-chart-section-body ring-chart-section-body--offset", children: _jsx(RingChartCanvas, { ...ringProps, hideCenter: isSmall || ringProps.hideCenter }) })) }));
 }

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

@@ -6,6 +6,10 @@ import Button from './Button';
 import Badge from './Badge';
 import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
+/** 단추 이름에 개수를 붙인다 — 뱃지는 aria-hidden 이라 개수는 이름으로만 전해진다(BottomNav 와 같은 문구). */
+function nameWithCount(t, label, count) {
+    return count && count > 0 ? t('nav.badgeLabel', { label, count, defaultValue: '{{label}}, {{count}}개' }) : label;
+}
 function SideNavFooter(props) {
     const { t } = useTranslation();
     const { activeKey, unreadCount, onDebug, onNotification, onSetting, onHelp, onAccount } = props || {};
@@ -20,9 +24,10 @@ function SideNavFooter(props) {
     // 하나도 없으면 바닥 자체를 비운다 — 빈 채로 두면 여백(margin-top + padding)만 남는다.
     if (!그릴것)
         return null;
-    return (_jsxs("div", { className: "side-nav__footer", children: [onDebug && (_jsx(Button, { size: 48, showTooltipInfo: true, type: "dot", shape: "pill", variant: variant, icon: "terminal", ariaLabel: t('nav.debug', '디버그'), onClick: onDebug, selected: activeKey === 'debug' })), onNotification && (_jsxs("span", { className: "side-nav__notification-wrap", children: [_jsx(Button, { size: 48, showTooltipInfo: true, type: "dot", shape: "pill", variant: variant, icon: "bell", ariaLabel: t('nav.notifications', '알림'), onClick: onNotification, selected: activeKey === 'notifications' }), !!unreadCount && (_jsx(Badge, { type: "dot", number: Math.min(unreadCount, 99), size: 24 }))] })), onSetting && (_jsx(Button, { size: 48, showTooltipInfo: true, type: "dot", shape: "pill", variant: variant, icon: "settings", ariaLabel: t('nav.settings', '설정'), onClick: onSetting, selected: activeKey === 'settings' })), onHelp && (_jsx(Button, { size: 48, showTooltipInfo: true, type: "dot", shape: "pill", variant: variant, icon: "message-circle-question-mark", ariaLabel: t('nav.help', '도움말'), onClick: onHelp, selected: activeKey === 'help' })), onAccount && (_jsx(Button, { size: 48, showTooltipInfo: true, type: "dot", shape: "pill", variant: variant, icon: "user-round", ariaLabel: t('nav.account', '계정'), onClick: onAccount, selected: activeKey === 'account' }))] }));
+    return (_jsxs("div", { className: "side-nav__footer", children: [onDebug && (_jsx(Button, { size: 48, showTooltipInfo: true, type: "dot", shape: "pill", variant: variant, icon: "terminal", ariaLabel: t('nav.debug', '디버그'), onClick: onDebug, selected: activeKey === 'debug' })), onNotification && (_jsxs("span", { className: "side-nav__notification-wrap", children: [_jsx(Button, { size: 48, showTooltipInfo: true, type: "dot", shape: "pill", variant: variant, icon: "bell", ariaLabel: nameWithCount(t, t('nav.notifications', '알림'), unreadCount), onClick: onNotification, selected: activeKey === 'notifications' }), !!unreadCount && unreadCount > 0 && (_jsx(Badge, { type: "dot", number: Math.min(unreadCount, 99), size: 24, "aria-hidden": true }))] })), onSetting && (_jsx(Button, { size: 48, showTooltipInfo: true, type: "dot", shape: "pill", variant: variant, icon: "settings", ariaLabel: t('nav.settings', '설정'), onClick: onSetting, selected: activeKey === 'settings' })), onHelp && (_jsx(Button, { size: 48, showTooltipInfo: true, type: "dot", shape: "pill", variant: variant, icon: "message-circle-question-mark", ariaLabel: t('nav.help', '도움말'), onClick: onHelp, selected: activeKey === 'help' })), onAccount && (_jsx(Button, { size: 48, showTooltipInfo: true, type: "dot", shape: "pill", variant: variant, icon: "user-round", ariaLabel: t('nav.account', '계정'), onClick: onAccount, selected: activeKey === 'account' }))] }));
 }
 function SideNavButton(props) {
+    const { t } = useTranslation();
     const { item, itemKey, label, icon, active, onClick, style, state, labelStyle } = props || {};
     const key = item?.key ?? itemKey ?? '';
     const text = (item?.label ?? label ?? '');
@@ -34,13 +39,19 @@ function SideNavButton(props) {
     const handleClick = useCallback((e) => {
         if (isDisabled)
             return;
-        try {
-            e.currentTarget.blur();
+        /* 포커스는 **포인터로 눌렀을 때만** 걷는다. 걷는 까닭은 마우스로 누른 뒤 :focus 틴트가 남고 태블릿
+           레일이 :focus-within 으로 펼친 채 남기 때문인데, 키보드로 Enter 를 누른 사람까지 걷으면 포커스가
+           body 로 떨어져 메뉴 처음부터 Tab 을 다시 밟아야 했다. 키보드가 낸 click 은 detail 이 0 이다. */
+        const fromPointer = e.detail > 0;
+        if (fromPointer) {
+            try {
+                e.currentTarget.blur();
+            }
+            catch (err) { }
         }
-        catch (err) { }
-        onClick?.(key, e.currentTarget);
+        onClick?.(key, e.currentTarget, fromPointer);
     }, [isDisabled, key, onClick]);
-    return (_jsxs("button", { className: btnClass, onClick: handleClick, "aria-label": typeof text === 'string' ? text : undefined, style: style, "aria-disabled": isDisabled, children: [iconElement, _jsx("span", { className: `side-nav__label button-1 f`, style: labelStyle, children: text }), badgeCount > 0 && (_jsx(Badge, { type: "dot", position: "inline", number: Math.min(badgeCount, 99), size: 24, "aria-label": `${badgeCount}` })), state === 'loading' && (_jsx("span", { className: "side-nav__spinner", "aria-label": "loading" }))] }));
+    return (_jsxs("button", { type: "button", className: btnClass, onClick: handleClick, "aria-label": typeof text === 'string' ? nameWithCount(t, text, badgeCount) : undefined, style: style, "aria-disabled": isDisabled, children: [iconElement, _jsx("span", { className: `side-nav__label button-1 f`, style: labelStyle, children: text }), badgeCount > 0 && (_jsx(Badge, { type: "dot", position: "inline", number: Math.min(badgeCount, 99), size: 24, "aria-hidden": true })), state === 'loading' && (_jsx("span", { className: "side-nav__spinner", "aria-label": "loading" }))] }));
 }
 /** @public */
 export default function SideNav(props) {
@@ -49,15 +60,17 @@ export default function SideNav(props) {
     const handleModeSwitch = useCallback(() => onAppModeChange?.(appMode === 'malgwi' ? 'manager' : 'malgwi'), [onAppModeChange, appMode]);
     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) => {
+                        .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) => {
                                     if (it.disabled)
                                         return;
                                     if (it.href) {
                                         window.open(it.href, '_blank', 'noopener,noreferrer');
-                                        try {
-                                            btnEl?.blur();
+                                        if (fromPointer) {
+                                            try {
+                                                btnEl?.blur();
+                                            }
+                                            catch (err) { }
                                         }
-                                        catch (err) { }
                                         return;
                                     }
                                     onChange?.(it.key);
@@ -69,6 +82,10 @@ export default function SideNav(props) {
                                             window.scrollTo({ top: 0 });
                                     }
                                     catch (_) { }
+                                    /* 키보드로 고르면 포커스가 레일 안에 남으므로 태블릿 레일도 펼친 채 둔다(:focus-within) —
+                                       아래 강제 접힘은 마우스가 들어와야 풀리므로 키보드 사용자에게 걸면 레일이 닫힌 채 포커스만 남는다. */
+                                    if (!fromPointer)
+                                        return;
                                     try {
                                         btnEl?.blur();
                                     }

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

@@ -40,12 +40,28 @@ export type TableProps<T extends {
         style?: CSSProperties;
     }>;
     onRowClick?: (item: T) => void;
+    /**
+     * 줄마다 누를 수 있는지. false 인 줄은 `onRowClick` 이 안 불리고, 버튼으로 읽히지도(role·Tab 정지점) 않으며,
+     * 손가락 커서·hover 강조도 없다. `onRowClick` 이 있을 때만 뜻이 있다. 미지정이면 모든 줄이 눌린다(기본).
+     *
+     * 예: 방문 기록 표에서 '안 옴' 줄은 열 것이 없다 — CSS 로 커서만 되돌리면 눌리기는 그대로이고 낭독기는 여전히 버튼이라 한다.
+     */
+    isRowClickable?: (item: T) => boolean;
     onRowMouseEnter?: (item: T, event: MouseEvent<HTMLDivElement>) => void;
     onRowMouseLeave?: (item: T, event: MouseEvent<HTMLDivElement>) => void;
     onRowDragStart?: (item: T, event: DragEvent<HTMLDivElement>) => void;
     onRowDragEnd?: (item: T, event: DragEvent<HTMLDivElement>) => void;
     draggingId?: string | number | null;
     gridTemplateColumns?: string;
+    /**
+     * 좁은 화면(767px 이하)에서 쓸 열 틀. 주면 그 폭에서는 이 틀을 쓰고 **끌어 둔 폭(저장값)은 무시**한다 —
+     * 폭 조절 손잡이와 '칸 너비 초기화' 단추도 숨겨, 좁은 화면에서 끈 값이 넓은 화면의 저장값을 덮지 않게 한다.
+     * 넓은 화면으로 돌아오면 저장값이 그대로 돌아온다. 미지정이면 좁은 화면도 넓은 화면과 같다(기본).
+     *
+     * 열 틀은 인라인 CSS 변수로 들어가므로 앱 CSS 로는 `!important` 없이 못 이긴다 — 그래서 prop 이다.
+     * 숨길 칸은 `renderRow` 의 `className`·`fields[].className` 으로 앱이 가린다.
+     */
+    mobileGridTemplateColumns?: string;
     /** true면 헤더 경계선을 드래그해 컬럼 폭 조절 가능 */
     resizable?: boolean;
     /**
@@ -98,4 +114,4 @@ export type TableProps<T extends {
 /** @public */
 export default function Table<T extends {
     id?: string | number;
-}>({ fields, headerGroups, items, renderRow, onRowClick, onRowMouseEnter, onRowMouseLeave, onRowDragStart, onRowDragEnd, draggingId, gridTemplateColumns, resizable, resizeMode, resizeStorageKey, size, title, icon, count, collapsed, onToggleCollapse, headerActions, empty, loading, dragOver, onDragOver, onDragLeave, onDrop, renderExpandedRow, expandedId, }: TableProps<T>): import("react").JSX.Element;
+}>({ fields, headerGroups, items, renderRow, onRowClick, isRowClickable, onRowMouseEnter, onRowMouseLeave, onRowDragStart, onRowDragEnd, draggingId, gridTemplateColumns, mobileGridTemplateColumns, resizable, resizeMode, resizeStorageKey, size, title, icon, count, collapsed, onToggleCollapse, headerActions, empty, loading, dragOver, onDragOver, onDragLeave, onDrop, renderExpandedRow, expandedId, }: TableProps<T>): import("react").JSX.Element;

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

@@ -18,6 +18,7 @@ import ChevronDown from 'lucide-react/dist/esm/icons/chevron-down.mjs';
 import Button from './Button';
 import Icon from './Icon';
 import Loader from './Loader';
+import useMediaQuery from '../hooks/useMediaQuery';
 function TableCell({ children, className, style }) {
     return _jsx("div", { className: className ? `table-cell ${className}` : 'table-cell', style: style, children: children });
 }
@@ -62,8 +63,12 @@ function TableField({ children, onClick, className, sortDir, onResizeStart }) {
     return (_jsxs("div", { onClick: onClick, onKeyDown: onClick ? handleKeyDown : undefined, role: onClick ? 'button' : undefined, tabIndex: onClick ? 0 : undefined, "aria-sort": sortDir ? (sortDir === 'asc' ? 'ascending' : 'descending') : undefined, className: cx('table-field body-3', className, sortDir ? 'table-field--sorted' : '', onResizeStart ? 'table-field--resizable' : ''), children: [children, sortDir && _jsx(SortArrow, { dir: sortDir }), onResizeStart && (_jsx("span", { className: "table-field__resizer", onPointerDown: onResizeStart, onClick: e => e.stopPropagation(), "aria-hidden": "true" }))] }));
 }
 /** @public */
-export default function Table({ fields = [], headerGroups, items = [], renderRow, onRowClick, onRowMouseEnter, onRowMouseLeave, onRowDragStart, onRowDragEnd, draggingId, gridTemplateColumns, resizable = false, resizeMode = 'grow', resizeStorageKey, size = 'small', title, icon, count, collapsed = false, onToggleCollapse, headerActions, empty, loading, dragOver = false, onDragOver, onDragLeave, onDrop, renderExpandedRow, expandedId, }) {
+export default function Table({ fields = [], headerGroups, items = [], renderRow, onRowClick, isRowClickable, onRowMouseEnter, onRowMouseLeave, onRowDragStart, onRowDragEnd, draggingId, gridTemplateColumns, mobileGridTemplateColumns, resizable = false, resizeMode = 'grow', resizeStorageKey, size = 'small', title, icon, count, collapsed = false, onToggleCollapse, headerActions, empty, loading, dragOver = false, onDragOver, onDragLeave, onDrop, renderExpandedRow, expandedId, }) {
     const { t } = useTranslation();
+    /* 좁은 화면 틀이 걸리면 폭 조절을 통째로 끈다 — 손잡이·초기화 단추·저장. 훅은 늘 부른다(순서 고정). */
+    const 좁은화면 = useMediaQuery('(max-width: 767px)');
+    const 좁은틀 = mobileGridTemplateColumns && 좁은화면 ? mobileGridTemplateColumns : null;
+    const 폭조절 = resizable && !좁은틀;
     // ── 컬럼 폭 드래그 리사이즈 (resizable) ──
     const MIN_COL_W = 48;
     const storeKey = resizeStorageKey ? `table-cols:${resizeStorageKey}` : null;
@@ -277,28 +282,29 @@ export default function Table({ fields = [], headerGroups, items = [], renderRow
     const widthUnit = (i) => (resizeMode === 'fit' && !isFixedPx(i)) ? 'fr' : 'px';
     const canApplyWidths = colWidths && colWidths.length === fields.length
         && (resizeMode === 'fit' || items.length > 0);
-    const effectiveGrid = canApplyWidths
+    const effectiveGrid = 좁은틀 ?? (canApplyWidths
         ? fields.map((f, i) => (f.resizable === false && defaultCols[i]) ? defaultCols[i] : `${colWidths[i]}${widthUnit(i)}`).join(' ')
-        : gridTemplateColumns;
+        : gridTemplateColumns);
     const gridStyle = effectiveGrid
         ? { '--table-grid-cols': effectiveGrid }
         : undefined;
     const hasHeader = title !== undefined;
-    return (_jsx("div", { className: `table-wrap table-wrap--${size}${resizable ? ' table-wrap--resizable' : ''}${dragOver ? ' table-wrap--dragover' : ''}${collapsed ? ' table-wrap--collapsed' : ''}`, style: gridStyle, onDragOver: onDragOver, onDragLeave: onDragLeave, onDrop: onDrop, children: _jsxs("div", { className: "table body-2", children: [hasHeader && (_jsxs("div", { className: "table-header", onClick: onToggleCollapse, role: onToggleCollapse ? 'button' : undefined, tabIndex: onToggleCollapse ? 0 : undefined, "aria-expanded": onToggleCollapse ? !collapsed : undefined, onKeyDown: onToggleCollapse ? (e) => { if (e.key === 'Enter' || e.key === ' ') {
+    return (_jsx("div", { className: `table-wrap table-wrap--${size}${폭조절 ? ' table-wrap--resizable' : ''}${dragOver ? ' table-wrap--dragover' : ''}${collapsed ? ' table-wrap--collapsed' : ''}`, style: gridStyle, onDragOver: onDragOver, onDragLeave: onDragLeave, onDrop: onDrop, children: _jsxs("div", { className: "table body-2", children: [hasHeader && (_jsxs("div", { className: "table-header", onClick: onToggleCollapse, role: onToggleCollapse ? 'button' : undefined, tabIndex: onToggleCollapse ? 0 : undefined, "aria-expanded": onToggleCollapse ? !collapsed : undefined, onKeyDown: onToggleCollapse ? (e) => { if (e.key === 'Enter' || e.key === ' ') {
                         e.preventDefault();
                         onToggleCollapse();
-                    } } : undefined, children: [onToggleCollapse && (_jsx(Button, { size: 40, type: "dot", variant: "transparent-gray", useBorder: false, icon: collapsed ? 'chevron-right' : 'chevron-down', ariaLabel: collapsed ? t('common.expand', '펼치기') : t('common.collapse', '접기'), className: "table-header__chevron" })), icon && (_jsx(Icon, { icon: icon, label: typeof title === 'string' ? title : undefined, className: "table-header__icon" })), _jsx("span", { className: "table-header__title h5b", children: title }), count !== undefined && _jsx("span", { className: "table-header__count body-3b", children: count }), headerActions && (_jsx("span", { className: "table-header__actions", onClick: e => e.stopPropagation(), children: headerActions }))] })), !collapsed && (_jsxs(_Fragment, { children: [headerGroups && headerGroups.length > 0 && (_jsx("div", { className: "table-fields table-fields--groups", children: headerGroups.map((g, i) => (_jsx("div", { className: cx('table-field body-3', g.className), style: { gridColumn: `span ${g.span}` }, children: g.label }, i))) })), _jsxs("div", { className: cx('table-fields-strip', resizable && 'table-fields-strip--resizable'), children: [_jsx("div", { className: "table-fields", ref: fieldsRef, children: fields.map((f, i) => (_jsx(TableField, { onClick: f.onClick, className: f.className, sortDir: f.sortDir, 
+                    } } : undefined, children: [onToggleCollapse && (_jsx(Button, { size: 40, type: "dot", variant: "transparent-gray", useBorder: false, icon: collapsed ? 'chevron-right' : 'chevron-down', ariaLabel: collapsed ? t('common.expand', '펼치기') : t('common.collapse', '접기'), className: "table-header__chevron" })), icon && (_jsx(Icon, { icon: icon, label: typeof title === 'string' ? title : undefined, className: "table-header__icon" })), _jsx("span", { className: "table-header__title h5b", children: title }), count !== undefined && _jsx("span", { className: "table-header__count body-3b", children: count }), headerActions && (_jsx("span", { className: "table-header__actions", onClick: e => e.stopPropagation(), children: headerActions }))] })), !collapsed && (_jsxs(_Fragment, { children: [headerGroups && headerGroups.length > 0 && (_jsx("div", { className: "table-fields table-fields--groups", children: headerGroups.map((g, i) => (_jsx("div", { className: cx('table-field body-3', g.className), style: { gridColumn: `span ${g.span}` }, children: g.label }, i))) })), _jsxs("div", { className: cx('table-fields-strip', 폭조절 && 'table-fields-strip--resizable'), children: [_jsx("div", { className: "table-fields", ref: fieldsRef, children: fields.map((f, i) => (_jsx(TableField, { onClick: f.onClick, className: f.className, sortDir: f.sortDir, 
                                         /* fit 모드는 오른쪽 이웃에서 폭을 덜어 오므로, 덜어 올 컬럼이 없는 자리에는
                                            손잡이를 두지 않는다 — 두면 그 컬럼만 grow처럼 넓어져 표가 밀린다. */
-                                        onResizeStart: resizable && i < fields.length - 1 && f.resizable !== false
+                                        onResizeStart: 폭조절 && i < fields.length - 1 && f.resizable !== false
                                             && (resizeMode !== 'fit' || fields.some((g, j) => j > i && g.resizable !== false))
-                                            ? (e) => startResize(i, e) : undefined, children: f.label }, i))) }), resizable && (_jsx(Button, { size: 40, type: "dot", variant: "transparent-gray", useBorder: false, icon: "chevrons-left-right-ellipsis", ariaLabel: t('table.resetColumns', '칸 너비 초기화'), showTooltipInfo: t('table.resetColumns', '칸 너비 초기화'), className: "table-fields__reset", onClick: 자동맞춤 }))] }), _jsx("div", { className: "table-body", children: loading ? (_jsx(TableRow, { variant: "loading" })) : items.length === 0 && empty ? (_jsx(TableRow, { variant: "empty", children: empty })) : items.map((item, idx) => {
+                                            ? (e) => startResize(i, e) : undefined, children: f.label }, i))) }), 폭조절 && (_jsx(Button, { size: 40, type: "dot", variant: "transparent-gray", useBorder: false, icon: "chevrons-left-right-ellipsis", ariaLabel: t('table.resetColumns', '칸 너비 초기화'), showTooltipInfo: t('table.resetColumns', '칸 너비 초기화'), className: "table-fields__reset", onClick: 자동맞춤 }))] }), _jsx("div", { className: "table-body", children: loading ? (_jsx(TableRow, { variant: "loading" })) : items.length === 0 && empty ? (_jsx(TableRow, { variant: "empty", children: empty })) : items.map((item, idx) => {
                                 const isDragging = draggingId != null && item.id === draggingId;
+                                const 눌림 = !!onRowClick && (isRowClickable ? isRowClickable(item) : true);
                                 const isExpanded = expandedId != null && (expandedId instanceof Set ? expandedId.has(item.id) : item.id === expandedId);
-                                return (_jsx(TableRow, { className: `${onRowClick ? ' table-row--clickable' : ''}${onRowDragStart ? ' table-row--draggable' : ''}${isDragging ? ' table-row--dragging' : ''}`.trim(), draggable: !!onRowDragStart, 
+                                return (_jsx(TableRow, { className: `${눌림 ? ' table-row--clickable' : ''}${onRowDragStart ? ' table-row--draggable' : ''}${isDragging ? ' table-row--dragging' : ''}`.trim(), draggable: !!onRowDragStart, 
                                     // 옆의 핸들러들처럼 있을 때만 넘긴다. 항상 함수를 만들어 넘기면
                                     // TableRow 가 "클릭 가능"으로 보고 role="button" · tabIndex=0 을 붙여,
                                     // 클릭 동작이 없는 표의 모든 행이 버튼으로 읽히고 탭 정지점이 된다.
-                                    onClick: onRowClick ? () => onRowClick(item) : undefined, onMouseEnter: onRowMouseEnter ? (e) => onRowMouseEnter(item, e) : undefined, onMouseLeave: onRowMouseLeave ? (e) => onRowMouseLeave(item, e) : undefined, onDragStart: onRowDragStart ? (e) => onRowDragStart(item, e) : undefined, onDragEnd: onRowDragEnd ? (e) => onRowDragEnd(item, e) : undefined, expandedContent: isExpanded && renderExpandedRow ? renderExpandedRow(item) : undefined, children: renderRow(item).map((cell, i) => (_jsx(TableCell, { className: cell.className, style: cell.style, children: cell.content }, i))) }, String(item.id ?? idx)));
+                                    onClick: 눌림 ? () => onRowClick(item) : undefined, onMouseEnter: onRowMouseEnter ? (e) => onRowMouseEnter(item, e) : undefined, onMouseLeave: onRowMouseLeave ? (e) => onRowMouseLeave(item, e) : undefined, onDragStart: onRowDragStart ? (e) => onRowDragStart(item, e) : undefined, onDragEnd: onRowDragEnd ? (e) => onRowDragEnd(item, e) : undefined, expandedContent: isExpanded && renderExpandedRow ? renderExpandedRow(item) : undefined, children: renderRow(item).map((cell, i) => (_jsx(TableCell, { className: cell.className, style: cell.style, children: cell.content }, i))) }, String(item.id ?? idx)));
                             }) })] }))] }) }));
 }

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

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { cx } from '../utils/cx';
-import { useId, useEffect, useRef, useCallback } from 'react';
+import { useId, useEffect, useLayoutEffect, useRef, useCallback, useState } from 'react';
 import { devWarnOnce } from '../utils/devWarn';
 import { useTranslation } from 'react-i18next';
 import Icon from './Icon';
@@ -53,7 +53,15 @@ export default function TextField(props) {
     const isControlled = value !== undefined;
     /* 비밀번호는 value 를 React 에 넘기지 않는다 — 위 useEffect 주석 참고 */
     const isPasswordControlled = isControlled && type === 'password';
-    const len = (value ?? '').length;
+    /* 비제어 칸은 value 가 없으니 글자 수를 따로 센다 — 전에는 value 로만 세어 defaultValue 칸의 카운터는
+       0, 지우기 단추는 안 보이고, 자동 높이는 늘지 않았다. */
+    const [innerLen, setInnerLen] = useState((defaultValue ?? '').length);
+    const len = isControlled ? (value ?? '').length : innerLen;
+    /* 비밀번호 controlled 칸이 부모가 거절·정규화한 값을 따라가게 — 아래 useEffect 는 value 가 바뀔 때만
+       돌아, 부모가 같은 값을 다시 두면(공백을 걷는 등) 화면 칸에 친 글자가 남았다. React 가 일반 칸에
+       해 주는 되돌림(restoreControlledState)을 onChange 뒤 한 박자에 흉내 낸다. */
+    const valueRef = useRef(value);
+    useLayoutEffect(() => { valueRef.current = value; });
     /*
      * React 는 controlled input 의 값을 node.defaultValue(= HTML value 속성)에 동기화한다.
      * 일반 입력에서는 무해하지만 비밀번호에서는 그 속성이 outerHTML 직렬화 경로
@@ -80,7 +88,7 @@ export default function TextField(props) {
         if (el.scrollHeight > el.clientHeight) {
             el.style.height = `${el.scrollHeight}px`;
         }
-    }, [value, newline]);
+    }, [value, innerLen, newline]);
     const isOver = maxLength != null && len > maxLength;
     const iconSize = size === 32 ? 16 : 20;
     const cls = cx('text-field', `text-field--s${size}`, variant === 'display' ? 'text-field--display' : '', fullWidth ? 'text-field--full-width' : '', disabled ? 'text-field--disabled' : '', readOnly ? 'text-field--readonly' : '', error ? 'text-field--error' : '', leftIcon ? 'text-field--has-left-icon' : '', (rightIcon || clearable) ? 'text-field--has-right-icon' : '', className);
@@ -119,7 +127,21 @@ export default function TextField(props) {
            조용히 버린다. */
         'aria-controls': 목록떴나 ? combobox.listId : undefined,
         'aria-activedescendant': 목록떴나 && combobox.activeIdx >= 0 ? `${combobox.listId}-option-${combobox.activeIdx}` : undefined,
-        onChange: (e) => onChange?.(e.target.value),
+        onChange: (e) => {
+            const node = e.target;
+            if (!isControlled)
+                setInnerLen(node.value.length);
+            onChange?.(node.value);
+            if (suggestions)
+                combobox.handleInput();
+            if (isPasswordControlled) {
+                queueMicrotask(() => {
+                    const next = valueRef.current ?? '';
+                    if (node.value !== next)
+                        node.value = next;
+                });
+            }
+        },
         onFocus: ((e) => {
             onFocus?.(e);
             if (suggestions)
@@ -171,7 +193,14 @@ export default function TextField(props) {
                         // 지우는 일은 click 에서 한다 — mousedown 에서만 처리하면 물리적 마우스 누름
                         // 외에는 아무 반응이 없어, 이름표(aria-label)만 달린 못 누르는 버튼이 된다
                         // (스크린리더의 활성화는 click 을 보낸다).
-                        onClick: () => onChange?.(''), tabIndex: -1 })), rightIcon && !showClear && (_jsx("span", { className: "text-field__icon text-field__icon--right", children: _jsx(Icon, { icon: rightIcon, label: "", className: "", svgClassName: "text-field__icon-svg", size: iconSize }) }))] }), suggestions && combobox.open && combobox.filtered.length > 0 && (_jsx("ul", { id: combobox.listId, className: "text-field__suggestions", role: "listbox", children: combobox.filtered.map((s, i) => (_jsx("li", { id: `${combobox.listId}-option-${i}`, role: "option", "aria-selected": i === combobox.activeIdx, className: `text-field__suggestion body-2${i === combobox.activeIdx ? ' is-active' : ''}`, 
+                        onClick: () => {
+                            // 비제어 칸은 화면 값도 직접 비운다(onChange 만 부르면 글자가 그대로 남는다).
+                            if (!isControlled && autoRef.current) {
+                                autoRef.current.value = '';
+                                setInnerLen(0);
+                            }
+                            onChange?.('');
+                        }, tabIndex: -1 })), rightIcon && !showClear && (_jsx("span", { className: "text-field__icon text-field__icon--right", children: _jsx(Icon, { icon: rightIcon, label: "", className: "", svgClassName: "text-field__icon-svg", size: iconSize }) }))] }), suggestions && combobox.open && combobox.filtered.length > 0 && (_jsx("ul", { id: combobox.listId, className: "text-field__suggestions", role: "listbox", children: combobox.filtered.map((s, i) => (_jsx("li", { id: `${combobox.listId}-option-${i}`, role: "option", "aria-selected": i === combobox.activeIdx, className: `text-field__suggestion body-2${i === combobox.activeIdx ? ' is-active' : ''}`, 
                     // 선택은 click 에서 한다. onMouseDown 만 두면 마우스로는 눌리지만 스크린리더가
                     // 이 option 을 활성화할 때는 click 만 발생해 아무 일도 일어나지 않는다.
                     // mousedown 에서는 기본 동작(포커스 이동 → 입력 blur)을 막아, click 이 도달하기

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

@@ -85,6 +85,8 @@ export interface BarChartProps {
     loading?: boolean;
     /** 지정 시 헤더 우측에 '상세보기' 버튼 표시 → 클릭 콜백 */
     onDetail?: () => void;
+    /** CSS 격자 칸 안에 세운다 — 아래 여백·최소 폭을 풀고 막대를 카드 바닥에 맞춘다. ChartSection `inGrid` 참고. */
+    inGrid?: boolean;
 }
 /** 현재 컨트롤 선택(주/월)의 날짜 범위 — 상세보기(기간별 리스트)용 */
 export declare function getControlDateRange(control: BarChartControl): {

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

@@ -17,6 +17,7 @@ export declare function useComboboxSuggestions({ value, onChange, suggestions, o
     filtered: string[];
     handleFocus: () => void;
     handleBlur: () => void;
+    handleInput: () => void;
     handleKeyDown: (e: KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
     handleSelect: (item: string) => void;
 };

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

@@ -25,11 +25,17 @@ export function useComboboxSuggestions({ value, onChange, suggestions, openOnFoc
         setActiveIdx(-1); }, [open]);
     useEffect(() => () => { if (blurTimerRef.current)
         clearTimeout(blurTimerRef.current); }, []);
+    /* 입력으로 후보가 줄면 가리키던 번호가 목록 밖에 남는다 — 그 채로 Enter 를 누르면 filtered[3] 같은
+       없는 칸을 골라 onChange(undefined) 가 나갔다. 밖이면 '안 가리킴' 으로 본다. */
+    const safeIdx = activeIdx < filtered.length ? activeIdx : -1;
     const handleSelect = useCallback((item) => {
         onChange?.(item);
         setOpen(false);
     }, [onChange]);
     const handleFocus = useCallback(() => setOpen(true), []);
+    /* 글자를 치면 목록을 다시 연다 — 고르거나 Esc 로 닫은 뒤에는 포커스를 뺐다 넣어야만 열렸다.
+       새 글자에는 새 후보가 서므로 가리킴도 처음으로 돌린다. */
+    const handleInput = useCallback(() => { setOpen(true); setActiveIdx(-1); }, []);
     // blur가 리스트 항목의 onMouseDown보다 먼저 발생하는 걸 막기 위한 딜레이
     const handleBlur = useCallback(() => {
         blurTimerRef.current = setTimeout(() => setOpen(false), 120);
@@ -38,16 +44,16 @@ export function useComboboxSuggestions({ value, onChange, suggestions, openOnFoc
         if (e.key === 'ArrowDown') {
             e.preventDefault();
             setOpen(true);
-            setActiveIdx(i => Math.min(filtered.length - 1, i + 1));
+            setActiveIdx(i => Math.min(filtered.length - 1, (i < filtered.length ? i : -1) + 1));
         }
         else if (e.key === 'ArrowUp') {
             e.preventDefault();
-            setActiveIdx(i => Math.max(-1, i - 1));
+            setActiveIdx(i => Math.max(-1, (i < filtered.length ? i : filtered.length) - 1));
         }
         else if (e.key === 'Enter') {
             // 한글 조합을 끝내는 Enter는 선택이 아니다 — 조합 중엔 제안을 고르지 않는다
-            if (activeIdx >= 0 && !e.nativeEvent.isComposing)
-                handleSelect(filtered[activeIdx]);
+            if (safeIdx >= 0 && !e.nativeEvent.isComposing)
+                handleSelect(filtered[safeIdx]);
         }
         else if (e.key === 'Escape') {
             if (open) {
@@ -55,6 +61,6 @@ export function useComboboxSuggestions({ value, onChange, suggestions, openOnFoc
                 setOpen(false);
             } // 제안이 열렸을 때만 소비(상위 팝업 ESC보다 우선하지 않도록)
         }
-    }, [filtered, activeIdx, open, handleSelect]);
-    return { listId, open, activeIdx, filtered, handleFocus, handleBlur, handleKeyDown, handleSelect };
+    }, [filtered, safeIdx, open, handleSelect]);
+    return { listId, open, activeIdx: safeIdx, filtered, handleFocus, handleBlur, handleInput, handleKeyDown, handleSelect };
 }

package/dist/packages/core/src/i18n/locales/en.json

@@ -173,7 +173,8 @@
         "wordTable": "Word Table Creator",
         "company": "Company Info",
         "more": "More",
-        "moreMenu": "More menu"
+        "moreMenu": "More menu",
+        "badgeLabel": "{{label}}, {{count}}"
     },
     "settings": {
         "language": {

package/dist/packages/core/src/i18n/locales/ko.json

@@ -171,7 +171,8 @@
         "wordTable": "단어표 만들기",
         "company": "업체정보",
         "more": "더보기",
-        "moreMenu": "더보기 메뉴"
+        "moreMenu": "더보기 메뉴",
+        "badgeLabel": "{{label}}, {{count}}개"
     },
     "settings": {
         "language": {

package/dist/packages/core/src/utils/CategoryData.d.ts

@@ -6,28 +6,22 @@ export declare const TRAINING_TYPES: {
     icon: string;
     desc: string;
 }[];
-/** @public */
-export declare const TOPIC_TYPES: ({
-    key: string;
-    label: string;
-    icon: string;
-    color: string;
-    subs: {
-        key: string;
-        label: string;
-    }[];
-    desc?: undefined;
-} | {
+/**
+ * 주제·세부 주제 목록(열쇠·이름·아이콘·색). **설명(desc)은 두지 않는다** — 코어·앱 어디에서도 주제 설명을
+ * 그리지 않고, 한때 7개 주제에 붙어 있던 '소음 환경 속 문장 이해 훈련' 은 훈련 유형(소음 하 문장 듣기)의
+ * 설명을 옮겨 붙인 값이었다(2026-09-14 걷음). 화면에 보이는 설명은 훈련 유형(`TRAINING_TYPES`)의 것이다.
+ * @public
+ */
+export declare const TOPIC_TYPES: {
     key: string;
     label: string;
     icon: string;
-    desc: string;
     color: string;
     subs: {
         key: string;
         label: string;
     }[];
-})[];
+}[];
 /** 훈련 유형 i18n 키 매핑 */
 export declare const TRAINING_TYPE_I18N_KEY: Record<string, string>;
 /** 번역된 훈련 유형 레이블/설명 반환 */
@@ -38,7 +32,7 @@ export declare function translateTrainingTypes(t: TFunction): {
     desc: string;
 }[];
 /** 번역된 토픽/서브토픽 레이블 반환 — 컴포넌트에서 useMemo와 함께 사용 */
-export declare function translateTopicTypes(t: TFunction): ({
+export declare function translateTopicTypes(t: TFunction): {
     label: string;
     subs: {
         label: string;
@@ -47,18 +41,7 @@ export declare function translateTopicTypes(t: TFunction): ({
     key: string;
     icon: string;
     color: string;
-    desc?: undefined;
-} | {
-    label: string;
-    subs: {
-        label: string;
-        key: string;
-    }[];
-    key: string;
-    icon: string;
-    desc: string;
-    color: string;
-})[];
+}[];
 declare const _default: {
     TRAINING_TYPES: {
         key: string;
@@ -66,7 +49,7 @@ declare const _default: {
         icon: string;
         desc: string;
     }[];
-    TOPIC_TYPES: ({
+    TOPIC_TYPES: {
         key: string;
         label: string;
         icon: string;
@@ -75,17 +58,6 @@ declare const _default: {
             key: string;
             label: string;
         }[];
-        desc?: undefined;
-    } | {
-        key: string;
-        label: string;
-        icon: string;
-        desc: string;
-        color: string;
-        subs: {
-            key: string;
-            label: string;
-        }[];
-    })[];
+    }[];
 };
 export default _default;