@ihabdevteam/core 0.186.0 → 0.187.0

package/dist/ihabdevteam-core.d.ts

@@ -1606,7 +1606,7 @@ export declare function copyText(text: string): Promise<boolean>;
  *
  * 값은 손으로 적고 `test/coreVersion.test.ts` 가 package.json 과 어긋나면 운다.
  */
-export declare const CORE_VERSION = "0.186.0";
+export declare const CORE_VERSION = "0.187.0";
 
 /** @public */
 declare const coreDefault: Record<string, unknown>;
@@ -1689,9 +1689,12 @@ export declare type CoreScopeStorageConfig = {
 /**
  * 72×72 정사각 타일. 좌상단에 아이콘, 우하단에 숫자를 배치한다.
  * 훈련 카드의 타입별 문항 수 표시 등에 사용.
+ *
+ * 마우스를 얹으면 `title` 이 툴팁으로 뜬다 — 늦춤은 다른 자리와 같은 상수를 쓴다
+ * (지나가다 스치는 것에 번쩍이지 않게). 키보드로 옮겨 와도(누를 수 있는 타일) 뜬다.
  * @public
  */
-export declare function CountTile({ icon, count, title, className, onClick, onMouseEnter, onMouseLeave }: CountTileProps): JSX.Element;
+export declare function CountTile({ icon, count, title, tooltip, className, onClick, onMouseEnter, onMouseLeave }: CountTileProps): JSX.Element;
 
 /** @public */
 export declare interface CountTileProps {
@@ -1699,8 +1702,23 @@ export declare interface CountTileProps {
     icon: string | ReactNode;
     /** 우측 하단 숫자 */
     count: number | string;
-    /** 접근성 라벨 (예: 훈련 타입 이름) */
-    title?: string;
+    /**
+     * 갈래 이름 — 낭독기가 읽는 이름이자 **눈으로 보는 사람에게 뜨는 툴팁의 글**이다.
+     *
+     * **필수다.** 72×72 안에는 아이콘과 수뿐이라, 이 값이 없으면 그 아이콘이 무슨 갈래인지
+     * 알 길이 화면에도 낭독기에도 없다(말귀 '나의 단어훈련' 카드에 타일이 열 개 선다).
+     * 예전에는 선택값이었고 `aria-label` 로만 나가, 마우스 쓰는 사람은 **아무것도 못 봤다**
+     * (사용자 지시 2026-09-23: "호버시 tooltip 은 무조건 나와야 해").
+     */
+    title: string;
+    /**
+     * 호버 툴팁을 끈다(기본 켬).
+     *
+     * 부르는 쪽이 **제 툴팁**을 띄우는 자리에서만 쓴다 — 말귀의 숙제 확인창 미리보기는
+     * `onMouseEnter` 로 무엇이 담겼는지 보여 주는 큰 툴팁(`TrainingTooltip`)을 띄우는데,
+     * 여기 기본 툴팁까지 뜨면 둘이 겹친다. 그 자리만 끈다.
+     */
+    tooltip?: boolean;
     className?: string;
     /** 클릭 핸들러 — 설정 시 버튼처럼 동작 */
     onClick?: (e: MouseEvent_2) => void;

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

@@ -6,8 +6,23 @@ export interface CountTileProps {
     icon: string | ReactNode;
     /** 우측 하단 숫자 */
     count: number | string;
-    /** 접근성 라벨 (예: 훈련 타입 이름) */
-    title?: string;
+    /**
+     * 갈래 이름 — 낭독기가 읽는 이름이자 **눈으로 보는 사람에게 뜨는 툴팁의 글**이다.
+     *
+     * **필수다.** 72×72 안에는 아이콘과 수뿐이라, 이 값이 없으면 그 아이콘이 무슨 갈래인지
+     * 알 길이 화면에도 낭독기에도 없다(말귀 '나의 단어훈련' 카드에 타일이 열 개 선다).
+     * 예전에는 선택값이었고 `aria-label` 로만 나가, 마우스 쓰는 사람은 **아무것도 못 봤다**
+     * (사용자 지시 2026-09-23: "호버시 tooltip 은 무조건 나와야 해").
+     */
+    title: string;
+    /**
+     * 호버 툴팁을 끈다(기본 켬).
+     *
+     * 부르는 쪽이 **제 툴팁**을 띄우는 자리에서만 쓴다 — 말귀의 숙제 확인창 미리보기는
+     * `onMouseEnter` 로 무엇이 담겼는지 보여 주는 큰 툴팁(`TrainingTooltip`)을 띄우는데,
+     * 여기 기본 툴팁까지 뜨면 둘이 겹친다. 그 자리만 끈다.
+     */
+    tooltip?: boolean;
     className?: string;
     /** 클릭 핸들러 — 설정 시 버튼처럼 동작 */
     onClick?: (e: MouseEvent) => void;
@@ -17,6 +32,9 @@ export interface CountTileProps {
 /**
  * 72×72 정사각 타일. 좌상단에 아이콘, 우하단에 숫자를 배치한다.
  * 훈련 카드의 타입별 문항 수 표시 등에 사용.
+ *
+ * 마우스를 얹으면 `title` 이 툴팁으로 뜬다 — 늦춤은 다른 자리와 같은 상수를 쓴다
+ * (지나가다 스치는 것에 번쩍이지 않게). 키보드로 옮겨 와도(누를 수 있는 타일) 뜬다.
  * @public
  */
-export default function CountTile({ icon, count, title, className, onClick, onMouseEnter, onMouseLeave }: CountTileProps): import("react").JSX.Element;
+export default function CountTile({ icon, count, title, tooltip, className, onClick, onMouseEnter, onMouseLeave }: CountTileProps): import("react").JSX.Element;

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

@@ -1,24 +1,73 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { cx } from '../utils/cx';
 import './CountTile.css';
 import Icon from './Icon';
+import InfoTooltip from './Tooltip/InfoTooltip';
+import { TRAINING_TOOLTIP_HOVER_DELAY_MS } from './Tooltip/TrainingTooltip';
 /**
  * 72×72 정사각 타일. 좌상단에 아이콘, 우하단에 숫자를 배치한다.
  * 훈련 카드의 타입별 문항 수 표시 등에 사용.
+ *
+ * 마우스를 얹으면 `title` 이 툴팁으로 뜬다 — 늦춤은 다른 자리와 같은 상수를 쓴다
+ * (지나가다 스치는 것에 번쩍이지 않게). 키보드로 옮겨 와도(누를 수 있는 타일) 뜬다.
  * @public
  */
-export default function CountTile({ icon, count, title, className = '', onClick, onMouseEnter, onMouseLeave }) {
+export default function CountTile({ icon, count, title, tooltip = true, className = '', onClick, onMouseEnter, onMouseLeave }) {
     const cls = cx('count-tile', onClick && 'count-tile--clickable', className);
-    return (_jsxs("div", { className: cls, onClick: onClick, 
-        /* role="button" + tabIndex 만 있고 키 처리가 없으면, 키보드 사용자는 여기 멈추고도
-           누를 수가 없다 — `<div>` 는 브라우저가 Enter·Space 를 대신 처리해 주지 않는다.
-           Space 의 기본 스크롤도 막는다(2026-08-28, Badge·Accordion 과 같은 처리). */
-        onKeyDown: onClick ? (e) => {
-            if (e.key !== 'Enter' && e.key !== ' ')
-                return;
-            /* onClick 이 MouseEvent 를 받으므로 가짜로 만들지 않고 **DOM 이 진짜 클릭을
-               내게** 한다 — 그래야 이벤트의 target·currentTarget 도 실제와 같다. */
-            e.preventDefault();
-            e.currentTarget.click();
-        } : undefined, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, role: onClick ? 'button' : 'img', tabIndex: onClick ? 0 : undefined, "aria-label": title ? `${title} ${count}` : String(count), children: [_jsx(Icon, { icon: icon, size: 20, className: "count-tile__icon" }), _jsx("span", { className: "count-tile__count h5", "aria-hidden": "true", children: count })] }));
+    const ref = useRef(null);
+    const [anchorRect, setAnchorRect] = useState(null);
+    const 늦춤 = useRef(null);
+    const 닫기 = useCallback(() => {
+        if (늦춤.current) {
+            clearTimeout(늦춤.current);
+            늦춤.current = null;
+        }
+        setAnchorRect(null);
+    }, []);
+    /* 늦춰서 연다 — 타일이 열 개 붙어 서는 자리라, 지나가기만 해도 뜨면 줄줄이 번쩍인다. */
+    const 열기 = useCallback((바로) => {
+        if (!tooltip)
+            return;
+        if (늦춤.current)
+            clearTimeout(늦춤.current);
+        const 띄우기 = () => setAnchorRect(ref.current?.getBoundingClientRect() ?? null);
+        if (바로) {
+            늦춤.current = null;
+            띄우기();
+            return;
+        }
+        늦춤.current = setTimeout(() => { 늦춤.current = null; 띄우기(); }, TRAINING_TOOLTIP_HOVER_DELAY_MS);
+    }, [tooltip]);
+    /* 떠난 뒤에 타이머가 터지면 아무도 안 보는 자리에 툴팁이 남는다 */
+    useEffect(() => () => { if (늦춤.current)
+        clearTimeout(늦춤.current); }, []);
+    useEffect(() => { if (!tooltip)
+        닫기(); }, [tooltip, 닫기]);
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { ref: ref, className: cls, onClick: onClick ? (e) => { 닫기(); onClick(e); } : undefined, 
+                /* role="button" + tabIndex 만 있고 키 처리가 없으면, 키보드 사용자는 여기 멈추고도
+                   누를 수가 없다 — `<div>` 는 브라우저가 Enter·Space 를 대신 처리해 주지 않는다.
+                   Space 의 기본 스크롤도 막는다(2026-08-28, Badge·Accordion 과 같은 처리). */
+                onKeyDown: onClick ? (e) => {
+                    if (e.key !== 'Enter' && e.key !== ' ')
+                        return;
+                    /* onClick 이 MouseEvent 를 받으므로 가짜로 만들지 않고 **DOM 이 진짜 클릭을
+                       내게** 한다 — 그래야 이벤트의 target·currentTarget 도 실제와 같다. */
+                    e.preventDefault();
+                    e.currentTarget.click();
+                } : undefined, 
+                /* **여는 것은 포인터 쪽에서 가른다.** 손가락으로 톡 해도 브라우저는 mouseenter 를 함께
+                   내는데, 그렇게 뜬 툴팁은 mouseleave 가 안 와서 안 닫힌다. pointerenter 는 mouseenter
+                   보다 먼저 오고 무엇으로 왔는지(`pointerType`)를 들고 오므로, **손가락·펜일 때만 안 연다.**
+                   "마우스일 때만 연다" 로 뒤집어 쓰지 말 것 — 포인터 이벤트가 없는 환경에서는 그 값이
+                   빈 값으로 와서(jsdom 은 `null`) 툴팁이 영영 안 뜬다.
+                   (pointerdown 에서 닫는 것으로는 못 막는다 — 그 이벤트가 mouseenter 보다 **먼저** 와서,
+                   닫은 뒤에 다시 열린다.) */
+                onPointerEnter: (e) => { if (e.pointerType === 'touch' || e.pointerType === 'pen')
+                    닫기();
+                else
+                    열기(false); }, onMouseEnter: onMouseEnter, onMouseLeave: (e) => { 닫기(); onMouseLeave?.(e); }, 
+                /* 키보드로 옮겨 온 사람에게도 보여야 한다 — 멈춘 자리라 늦출 까닭이 없어 바로 연다. */
+                onFocus: onClick ? () => 열기(true) : undefined, onBlur: onClick ? 닫기 : undefined, role: onClick ? 'button' : 'img', tabIndex: onClick ? 0 : undefined, "aria-label": `${title} ${count}`, children: [_jsx(Icon, { icon: icon, size: 20, className: "count-tile__icon" }), _jsx("span", { className: "count-tile__count h5", "aria-hidden": "true", children: count })] }), anchorRect && _jsx(InfoTooltip, { anchorRect: anchorRect, text: title })] }));
 }

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

@@ -81,7 +81,13 @@ export default function FilterPanel({ title, headerAction, collapsible = false,
                                                 /* 같은 패널의 항목 단추(size "keyboard" = 32)와 같은 높이다(사용자 지시 2026-09-22).
                                                    전에는 40 이었는데, 그 까닭으로 적힌 "옆 Dropdown·TextField(40)와 맞춘다" 는
                                                    실제와 달랐다 — 세그먼트를 쓰는 패널(단어표 '표 설정')에는 Dropdown 도 TextField 도
-                                                   없고 32 짜리 항목 단추만 있어, 한 줄에 32 와 40 이 섞여 세그먼트만 커 보였다. */
+                                                   없고 32 짜리 항목 단추만 있어, 한 줄에 32 와 40 이 섞여 세그먼트만 커 보였다.
+                                
+                                                   **폰에서는 28 로 선다 — 그대로 두기로 했다(사용자 판단 2026-09-22).** 숫자 size 는
+                                                   768px 이하에서 한 급 줄고(32→28) `size="Keyboard"`(32)는 안 줄어, 폰에서만 4px 이
+                                                   어긋난다. 맞추려면 항목 단추를 숫자 32 로 내려야 하는데 그러면 손가락 자리가 28 이
+                                                   된다 — 같은 날 채점 단추를 33 까지 끌어올린 것과 반대 방향이라 어긋남 쪽을 택했다.
+                                                   사다리는 `test/buttonSizeLadder0922.test.ts` 에 못 박혀 있다. */
                                                 size: 32 })) : (!section.multiple && section.display === 'dropdown') ? (_jsx(Dropdown, { className: "filter-panel__dropdown", size: 40, options: [
                                                     ...(section.allOption ? [{ value: FILTER_ALL_VALUE, label: section.allLabel ?? t('common.all', '전체'), disabled: section.allOptionDisabled }] : []),
                                                     ...items.map(item => {

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

@@ -98,7 +98,13 @@ export default function ListPopup(props) {
         sortDir: col.sortable !== false && sortKey === col.key ? (sortAsc ? 'asc' : 'desc') : null,
     })), [columns, sortKey, sortAsc, handleSort]);
     const pageSizeOpts = useMemo(() => pageSizeOptions.map(n => ({ value: String(n), label: t('common.pageSizeLabel', { n }) })), [pageSizeOptions, t]);
-    return (_jsxs(Popup, { className: `popup-list ${className}`, title: title, onClose: onClose, children: [topContent, 'label' in countParts && _jsx("p", { className: "toolbar__count body-1", children: countParts.label }), _jsx(Toolbar, { count: 'label' in countParts ? undefined : { value: filtered.length, prefix: countParts.prefix, suffix: countParts.suffix }, search: searchEnabled ? { value: search, onChange: setSearch, placeholder: resolvedSearchPlaceholder } : undefined, pageSize: { options: pageSizeOpts, value: pageSize, onChange: setPageSize }, pagination: { page: 이쪽, total: totalPages, onChange: setPage } }), _jsx(Table, { size: "medium", gridTemplateColumns: gridTemplateColumns, mobileGridTemplateColumns: mobileGridTemplateColumns, resizable: true, fields: tableFields, items: paged, onRowClick: onSelect, renderRow: (it) => {
+    return (_jsxs(Popup, { className: `popup-list ${className}`, title: title, onClose: onClose, children: [topContent, 'label' in countParts && _jsx("p", { className: "toolbar__count body-1", children: countParts.label }), _jsx(Toolbar, { count: 'label' in countParts ? undefined : { value: filtered.length, prefix: countParts.prefix, suffix: countParts.suffix }, search: searchEnabled ? { value: search, onChange: setSearch, placeholder: resolvedSearchPlaceholder } : undefined, pageSize: { options: pageSizeOpts, value: pageSize, onChange: setPageSize }, pagination: { page: 이쪽, total: totalPages, onChange: setPage } }), _jsx(Table, { size: "medium", gridTemplateColumns: gridTemplateColumns, mobileGridTemplateColumns: mobileGridTemplateColumns, 
+                /* 폭 조절은 켜되 **저장 열쇠는 안 준다** — 창은 열 때마다 새로 짓는 것이라 폭이 따라다니면
+                   엉뚱하다. 그래서 이 창의 표는 끌어도 localStorage 에 아무 자국이 없고, 끈 폭은 창이 닫히면
+                   사라진다. 폰에서 '오늘의 듣기 현황 상세보기' 가 `48px 48px …` 로 눌렸는데 저장소가
+                   비어 있어 한동안 원인을 못 찾았던 자리다(2026-09-22) — 손잡이 띠에 스친 손짓이 메모리에만
+                   폭을 박은 것이었다. 0.186.0 부터 좁은 화면에서는 손잡이도 없고 끈 폭도 안 쓴다. */
+                resizable: true, fields: tableFields, items: paged, onRowClick: onSelect, renderRow: (it) => {
                     const isSelected = selectedIds != null
                         ? (it.id != null && selectedIds.has(it.id))
                         : (selectedId != null && it.id === selectedId);

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

@@ -91,6 +91,11 @@ export default function Table({ fields = [], headerGroups, items = [], renderRow
      * 그대로 씌워지므로, 좁은 화면에서는 **만든 사람이 적어 둔 틀**로 돌아가는 편이 맞다 —
      * 그 틀의 `minmax(…px, …fr)` 밑값이 살아나 칸이 제 폭을 갖고, 넘치는 만큼은 표가
      * 제 가로 스크롤로 보여 준다. 넓은 화면으로 돌아오면 저장값이 그대로 돌아온다.
+     *
+     * **좁은 화면의 답은 그 가로 스크롤이다 — 접는 꼴(카드형)은 넣지 않는다(사용자 판단 2026-09-22).**
+     * 한 줄을 두 줄 카드로 접는 안과 중요한 칸만 두고 펼치는 안을 함께 올렸으나, 표는 표로 두고
+     * 옆으로 미는 쪽을 골랐다. 그러니 담을 수 없을 만큼 좁을 때 칸을 눌러 담으려 드는 코드를
+     * 다시 넣지 말 것 — 그게 위에 적은 48px 사건이었다.
      */
     const 좁은화면 = useMediaQuery('(max-width: 767px)');
     const 좁은틀 = mobileGridTemplateColumns && 좁은화면 ? mobileGridTemplateColumns : null;

package/dist/packages/core/src/version.d.ts

@@ -46,4 +46,4 @@
  *
  * 값은 손으로 적고 `test/coreVersion.test.ts` 가 package.json 과 어긋나면 운다.
  */
-export declare const CORE_VERSION = "0.186.0";
+export declare const CORE_VERSION = "0.187.0";

package/dist/packages/core/src/version.js

@@ -46,4 +46,4 @@
  *
  * 값은 손으로 적고 `test/coreVersion.test.ts` 가 package.json 과 어긋나면 운다.
  */
-export const CORE_VERSION = '0.186.0';
+export const CORE_VERSION = '0.187.0';