@ihabdevteam/core 0.187.0 → 0.188.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.187.0";
+export declare const CORE_VERSION = "0.188.0";
 
 /** @public */
 declare const coreDefault: Record<string, unknown>;
@@ -1690,11 +1690,11 @@ export declare type CoreScopeStorageConfig = {
  * 72×72 정사각 타일. 좌상단에 아이콘, 우하단에 숫자를 배치한다.
  * 훈련 카드의 타입별 문항 수 표시 등에 사용.
  *
- * 마우스를 얹으면 `title` 이 툴팁으로 뜬다 — 늦춤은 다른 자리와 같은 상수를 쓴다
- * (지나가다 스치는 것에 번쩍이지 않게). 키보드로 옮겨 와도(누를 수 있는 타일) 뜬다.
+ * `plan` 을 주면 마우스를 얹었을 때 **담긴 훈련**(`TrainingTooltip`)이 뜬다 — 늦춤은 다른
+ * 자리와 같은 상수를 쓴다(지나가다 스치는 것에 번쩍이지 않게).
  * @public
  */
-export declare function CountTile({ icon, count, title, tooltip, className, onClick, onMouseEnter, onMouseLeave }: CountTileProps): JSX.Element;
+export declare function CountTile({ icon, count, title, plan, tooltip, className, onClick, onMouseEnter, onMouseLeave }: CountTileProps): JSX.Element;
 
 /** @public */
 export declare interface CountTileProps {
@@ -1703,21 +1703,25 @@ export declare interface CountTileProps {
     /** 우측 하단 숫자 */
     count: number | string;
     /**
-     * 갈래 이름 — 낭독기가 읽는 이름이자 **눈으로 보는 사람에게 뜨는 툴팁의 글**이다.
+     * 갈래 이름 — 낭독기가 읽는 이름이다(`"이름 수"` 로 읽힌다).
      *
      * **필수다.** 72×72 안에는 아이콘과 수뿐이라, 이 값이 없으면 그 아이콘이 무슨 갈래인지
-     * 알 길이 화면에도 낭독기에도 없다(말귀 '나의 단어훈련' 카드에 타일이 열 개 선다).
-     * 예전에는 선택값이었고 `aria-label` 로만 나가, 마우스 쓰는 사람은 **아무것도 못 봤다**
-     * (사용자 지시 2026-09-23: "호버시 tooltip 은 무조건 나와야 해").
+     * 낭독기로는 알 길이 없다(말귀 '나의 단어훈련' 카드에 타일이 열 개 선다).
      */
     title: string;
     /**
-     * 호버 툴팁을 끈다(기본 켬).
+     * 호버하면 보여 줄 **담긴 훈련**.
      *
-     * 부르는 쪽이 **제 툴팁**을 띄우는 자리에서만 쓴다 — 말귀의 숙제 확인창 미리보기는
-     * `onMouseEnter` 로 무엇이 담겼는지 보여 주는 큰 툴팁(`TrainingTooltip`)을 띄우는데,
-     * 여기 기본 툴팁까지 뜨면 둘이 겹친다. 그 자리만 끈다.
+     * 주면 마우스를 얹었을 때 `TrainingTooltip` 이 뜬다 — 그 안에 훈련 블록이 서고, 블록의
+     * 갈래 아이콘(`CategoryIcon`)에 다시 마우스를 얹으면 제 이름이 작은 툴팁으로 뜬다
+     * (사용자 지시 2026-09-23). 안 주면 아무것도 안 뜬다 — 타일 이름만 띄우는 글자 툴팁은
+     * **두지 않는다**(0.187.0 에 잠깐 있었고, 그건 요청을 잘못 읽은 것이었다).
+     *
+     * 이 타일이 세는 그 갈래의 항목만 담은 `plan` 을 준다 — `TrainingTooltip` 은 받은 `plan.items`
+     * 를 갈래별로 묶어 그리므로, 카드 전체의 `plan` 을 그대로 주면 타일마다 같은 것이 뜬다.
      */
+    plan?: TrainingPlan;
+    /** 호버 툴팁을 끈다(기본 켬) — 부르는 쪽이 제 툴팁을 띄우는 자리용 */
     tooltip?: boolean;
     className?: string;
     /** 클릭 핸들러 — 설정 시 버튼처럼 동작 */

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

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

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

@@ -4,47 +4,79 @@ 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';
+import TrainingTooltip, { TRAINING_TOOLTIP_HOVER_DELAY_MS } from './Tooltip/TrainingTooltip';
+/** 타일과 툴팁 사이 틈(12px)을 건너는 동안 툴팁을 살려 두는 시간 */
+const 건너가는틈_MS = 200;
 /**
  * 72×72 정사각 타일. 좌상단에 아이콘, 우하단에 숫자를 배치한다.
  * 훈련 카드의 타입별 문항 수 표시 등에 사용.
  *
- * 마우스를 얹으면 `title` 이 툴팁으로 뜬다 — 늦춤은 다른 자리와 같은 상수를 쓴다
- * (지나가다 스치는 것에 번쩍이지 않게). 키보드로 옮겨 와도(누를 수 있는 타일) 뜬다.
+ * `plan` 을 주면 마우스를 얹었을 때 **담긴 훈련**(`TrainingTooltip`)이 뜬다 — 늦춤은 다른
+ * 자리와 같은 상수를 쓴다(지나가다 스치는 것에 번쩍이지 않게).
  * @public
  */
-export default function CountTile({ icon, count, title, tooltip = true, className = '', onClick, onMouseEnter, onMouseLeave }) {
+export default function CountTile({ icon, count, title, plan, tooltip = true, className = '', onClick, onMouseEnter, onMouseLeave }) {
     const cls = cx('count-tile', onClick && 'count-tile--clickable', className);
     const ref = useRef(null);
     const [anchorRect, setAnchorRect] = useState(null);
     const 늦춤 = useRef(null);
-    const 닫기 = useCallback(() => {
+    const 닫힘 = useRef(null);
+    const 켜짐 = Boolean(anchorRect && plan && tooltip);
+    const 시계끄기 = useCallback(() => {
         if (늦춤.current) {
             clearTimeout(늦춤.current);
             늦춤.current = null;
         }
-        setAnchorRect(null);
+        if (닫힘.current) {
+            clearTimeout(닫힘.current);
+            닫힘.current = null;
+        }
     }, []);
+    const 닫기 = useCallback(() => { 시계끄기(); setAnchorRect(null); }, [시계끄기]);
     /* 늦춰서 연다 — 타일이 열 개 붙어 서는 자리라, 지나가기만 해도 뜨면 줄줄이 번쩍인다. */
-    const 열기 = useCallback((바로) => {
-        if (!tooltip)
+    const 열기 = useCallback(() => {
+        if (!tooltip || !plan)
             return;
-        if (늦춤.current)
+        시계끄기();
+        늦춤.current = setTimeout(() => {
+            늦춤.current = null;
+            setAnchorRect(ref.current?.getBoundingClientRect() ?? null);
+        }, TRAINING_TOOLTIP_HOVER_DELAY_MS);
+    }, [tooltip, plan, 시계끄기]);
+    /**
+     * **바로 닫지 않는다.** 툴팁은 타일에서 12px 떨어져 뜨므로, 타일을 벗어나자마자 닫으면
+     * 그 틈을 건너는 동안 사라져 **툴팁 안의 갈래 아이콘에 마우스를 올릴 수가 없다** — 그
+     * 아이콘에 다시 뜨는 작은 이름표가 이 툴팁을 다는 까닭의 절반이다(사용자 지시 2026-09-23).
+     * 잠깐 두고, 그 사이 툴팁 안으로 들어오면 아래 지킴이가 예약을 무른다.
+     */
+    const 닫기예약 = useCallback(() => {
+        if (늦춤.current) {
             clearTimeout(늦춤.current);
-        const 띄우기 = () => setAnchorRect(ref.current?.getBoundingClientRect() ?? null);
-        if (바로) {
             늦춤.current = null;
-            띄우기();
-            return;
         }
-        늦춤.current = setTimeout(() => { 늦춤.current = null; 띄우기(); }, TRAINING_TOOLTIP_HOVER_DELAY_MS);
-    }, [tooltip]);
+        if (닫힘.current)
+            return;
+        닫힘.current = setTimeout(() => { 닫힘.current = null; setAnchorRect(null); }, 건너가는틈_MS);
+    }, []);
     /* 떠난 뒤에 타이머가 터지면 아무도 안 보는 자리에 툴팁이 남는다 */
-    useEffect(() => () => { if (늦춤.current)
-        clearTimeout(늦춤.current); }, []);
-    useEffect(() => { if (!tooltip)
-        닫기(); }, [tooltip, 닫기]);
+    useEffect(() => () => { 시계끄기(); }, [시계끄기]);
+    useEffect(() => { if (!tooltip || !plan)
+        닫기(); }, [tooltip, plan, 닫기]);
+    /* 툴팁이 떠 있는 동안 **포인터가 어디에 있는지** 본다 — 타일이나 툴팁 안이면 살려 두고,
+       둘 다 아니면 닫기를 예약한다. 툴팁은 포털로 body 끝에 나가 타일의 자식이 아니라서,
+       타일에 건 mouseleave 만으로는 "툴팁으로 건너갔다" 를 알 수 없다. */
+    useEffect(() => {
+        if (!켜짐)
+            return;
+        const 살릴자리 = (t) => t instanceof Element && (ref.current?.contains(t) || Boolean(t.closest('.tooltip-training')));
+        const 보기 = (e) => { if (살릴자리(e.target)) {
+            시계끄기();
+        }
+        else
+            닫기예약(); };
+        document.addEventListener('pointerover', 보기, true);
+        return () => document.removeEventListener('pointerover', 보기, true);
+    }, [켜짐, 시계끄기, 닫기예약]);
     return (_jsxs(_Fragment, { children: [_jsxs("div", { ref: ref, className: cls, onClick: onClick ? (e) => { 닫기(); onClick(e); } : undefined, 
                 /* role="button" + tabIndex 만 있고 키 처리가 없으면, 키보드 사용자는 여기 멈추고도
                    누를 수가 없다 — `<div>` 는 브라우저가 Enter·Space 를 대신 처리해 주지 않는다.
@@ -67,7 +99,5 @@ export default function CountTile({ icon, count, title, tooltip = true, classNam
                 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 })] }));
+                    열기(); }, onMouseEnter: onMouseEnter, onMouseLeave: (e) => { 닫기예약(); onMouseLeave?.(e); }, 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 && plan && _jsx(TrainingTooltip, { plan: plan, anchorRect: anchorRect, onClose: 닫기 })] }));
 }

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

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

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

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