@ihabdevteam/core 0.326.0 → 0.328.0

package/dist/ihabdevteam-core.d.ts

@@ -1678,7 +1678,7 @@ export declare function copyText(text: string): Promise<boolean>;
  *
  * 값은 손으로 적고 `test/coreVersion.test.ts` 가 package.json 과 어긋나면 운다.
  */
-export declare const CORE_VERSION = "0.326.0";
+export declare const CORE_VERSION = "0.328.0";
 
 /** @public */
 declare const coreDefault: Record<string, unknown>;
@@ -5071,6 +5071,19 @@ export declare interface PopupListProps<T extends {
     /** 좁은 화면(767px 이하)에서 쓸 칸 폭 — 창 안의 표도 같은 `Table` 이라 그대로 전한다.
      *  문턱을 달리 하려면 CSS 에서 `--table-grid-cols-override` 를 준다(창은 body 로 나가므로 창의 `className` 으로 좁힌다). */
     mobileGridTemplateColumns?: string;
+    /**
+     * **칸 폭 저장 열쇠** — 주면 `Table` 로 그대로 간다((306), 말귀 청 2026-10-14).
+     *
+     * 한때 **일부러 안 줬다**: *"창은 열 때마다 새로 짓는 것이라 폭이 따라다니면 엉뚱하다."*
+     * 그런데 `Table` 은 **자동맞춤을 저장 열쇠에 묶어** 두었다(`autoSignature` 가
+     * `storeKey !== null` 을 본다) — 그래서 이 창으로 선 표는 **자동맞춤이 하나도 안 걸린다.**
+     * 긴 글자가 든 칸이 눌려도 스스로 안 펴진다.
+     *
+     * 묶음을 통째로 푸는 길도 있었지만 그러면 **열쇠 없는 표 전부**가 따라 움직인다. 그래서
+     * 칸 하나로 연다 — **안 주면 지금과 똑같다.** 줄지 말지는 부르는 쪽이 창마다 고른다
+     * (폭이 따라다니길 바라지 않는 창에는 안 주면 된다).
+     */
+    resizeStorageKey?: string;
     /** 검색 placeholder */
     searchPlaceholder?: string;
     /**

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

@@ -28,6 +28,19 @@ export interface PopupListProps<T extends {
     /** 좁은 화면(767px 이하)에서 쓸 칸 폭 — 창 안의 표도 같은 `Table` 이라 그대로 전한다.
      *  문턱을 달리 하려면 CSS 에서 `--table-grid-cols-override` 를 준다(창은 body 로 나가므로 창의 `className` 으로 좁힌다). */
     mobileGridTemplateColumns?: string;
+    /**
+     * **칸 폭 저장 열쇠** — 주면 `Table` 로 그대로 간다((306), 말귀 청 2026-10-14).
+     *
+     * 한때 **일부러 안 줬다**: *"창은 열 때마다 새로 짓는 것이라 폭이 따라다니면 엉뚱하다."*
+     * 그런데 `Table` 은 **자동맞춤을 저장 열쇠에 묶어** 두었다(`autoSignature` 가
+     * `storeKey !== null` 을 본다) — 그래서 이 창으로 선 표는 **자동맞춤이 하나도 안 걸린다.**
+     * 긴 글자가 든 칸이 눌려도 스스로 안 펴진다.
+     *
+     * 묶음을 통째로 푸는 길도 있었지만 그러면 **열쇠 없는 표 전부**가 따라 움직인다. 그래서
+     * 칸 하나로 연다 — **안 주면 지금과 똑같다.** 줄지 말지는 부르는 쪽이 창마다 고른다
+     * (폭이 따라다니길 바라지 않는 창에는 안 주면 된다).
+     */
+    resizeStorageKey?: string;
     /** 검색 placeholder */
     searchPlaceholder?: string;
     /**

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

@@ -10,7 +10,7 @@ import { compareCellBlankLast } from '../../utils/textSort';
 import { cx } from '../../utils/cx';
 /** @public */
 export default function ListPopup(props) {
-    const { title, items, columns, gridTemplateColumns, mobileGridTemplateColumns, searchPlaceholder, searchFn, defaultSortKey, defaultSortAsc = true, selectedId, selectedIds, onSelect, onClose, pageSizeOptions = [10, 25, 50, 100], initialPageSize, emptyText, noMatchText, countLabel, topContent, className = '', } = props;
+    const { title, items, columns, resizeStorageKey, gridTemplateColumns, mobileGridTemplateColumns, searchPlaceholder, searchFn, defaultSortKey, defaultSortAsc = true, selectedId, selectedIds, onSelect, onClose, pageSizeOptions = [10, 25, 50, 100], initialPageSize, emptyText, noMatchText, countLabel, topContent, className = '', } = props;
     const { t } = useTranslation();
     const resolvedSearchPlaceholder = searchPlaceholder ?? t('common.search', '검색');
     const resolvedEmptyText = emptyText ?? t('common.emptyList', '항목이 없습니다.');
@@ -100,12 +100,17 @@ export default function ListPopup(props) {
     })), [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: clampedPage, 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) => {
+                /* 폭 조절은 켜고, 저장 열쇠는 **부르는 쪽이 고른다**((306), 2026-10-14).
+        
+                   한때 여기서 **일부러 안 줬다** — *"창은 열 때마다 새로 짓는 것이라 폭이 따라다니면
+                   엉뚱하다."* 그 뜻은 지금도 맞다. 다만 `Table` 이 **자동맞춤까지 저장 열쇠에 묶어**
+                   두어(`autoSignature`), 안 주면 **자동맞춤도 같이 꺼진다** — 긴 글자가 든 칸이 눌려도
+                   스스로 안 펴진다. 그 둘은 다른 일인데 한 손잡이에 달려 있다.
+        
+                   폰에서 '오늘의 듣기 현황 상세보기' 가 `48px 48px …` 로 눌렸던 자리는 저장소가 비어
+                   있어 한동안 원인을 못 찾았다(2026-09-22) — 손잡이 띠에 스친 손짓이 메모리에만 폭을
+                   박은 것이었다. 0.186.0 부터 좁은 화면에서는 손잡이도 없고 끈 폭도 안 쓴다. */
+                resizable: true, resizeStorageKey: resizeStorageKey, 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/Popup/TrainingResultPopup.css

@@ -127,6 +127,12 @@
   align-items: baseline;
   gap: 10px;
 }
+/* **다시 듣기** — 문제 글 옆((303), 2026-10-14). 글이 길면 줄바꿈으로 밀리므로 안 줄인다.
+   `align-self` 로 올려 붙인다 — 줄이 `baseline` 이라 그대로 두면 단추가 글자 밑줄에 걸린다. */
+.trp-row__replay {
+  flex-shrink: 0;
+  align-self: center;
+}
 .trp-row__no {
   flex-shrink: 0;
   width: 32px;

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

@@ -1,9 +1,10 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useCallback, useEffect, useId, useMemo } from "react";
+import { useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
 import { useTranslation } from 'react-i18next';
 import Button from '../Button';
 import Badge from '../Badge';
+import { playOneShot } from '../Training/oneShotSound';
 import Popup from './Popup';
 import "./TrainingResultPopup.css";
 function pickFirstString(...vals) {
@@ -35,6 +36,21 @@ function pickFirstString(...vals) {
 function resolveProblem(it) {
     return pickFirstString(it?.question, it?.q, it?.sentence, it?.text, it?.prompt, it?.wording);
 }
+/**
+ * **문제로 나왔던 그 소리** — 줄마다 '다시 듣기' 가 트는 것((303), 말귀 청 2026-10-14).
+ *
+ * 들려줄 것은 **정답 낱말이 아니라 들었어야 했던 것**이다. 위 `resolveProblem` 과 같은 결로
+ * 여러 이름을 더듬는다 — 부르는 쪽이 저마다 다른 이름으로 담아 넘겨 온 자리라
+ * (`question`·`q`·`sentence`…), 소리만 이름 하나를 못 박으면 그 쪽이 또 맞춰야 한다.
+ *
+ * **못 찾으면 `null` 이고, 그러면 단추를 안 그린다** — 안 넘기는 쪽은 지금과 똑같다.
+ */
+function resolveSound(it) {
+    const v = pickFirstString(it?.questionSound, it?.soundSrc, it?.audioSrc, it?.sound, it?.audio, it?.src);
+    /* 글자이기만 하면 되는 게 아니다 — `pickFirstString` 은 아무 글이나 돌려준다.
+       소리 자리에 제목이 들어 있는 꼴을 틀려고 하면 조용히 아무 일도 안 난다. */
+    return v && /^(https?:|blob:|data:audio|\/|\.\/)/.test(v) ? v : null;
+}
 function resolveDecision(it) {
     if (!it)
         return undefined;
@@ -86,6 +102,22 @@ export default function TrainingResultPopup(props) {
     const total = contextsLength ?? 0;
     const correct = score ?? 0;
     const list = useMemo(() => Array.isArray(results) ? results : [], [results]);
+    /* **울리는 것은 하나다** — 다른 줄을 누르면 앞 소리가 멈춘다(`claimSound` 가 그 약속을 쥔다).
+       창이 닫힐 때도 멈춘다 — `new Audio()` 로 만든 것은 DOM 에 없어 화면이 사라져도 혼자 운다. */
+    const playingRef = useRef(null);
+    const [playingRow, setPlayingRow] = useState(null);
+    const stopPlaying = useCallback(() => {
+        playingRef.current?.();
+        playingRef.current = null;
+        setPlayingRow(null);
+    }, []);
+    useEffect(() => stopPlaying, [stopPlaying]);
+    const replay = useCallback((i, url) => {
+        stopPlaying();
+        const s = playOneShot(url, () => { playingRef.current = null; setPlayingRow(null); });
+        playingRef.current = s.stop;
+        setPlayingRow(i);
+    }, [stopPlaying]);
     const rows = useMemo(() => list.map((it) => {
         const itr = it ?? {};
         // 문제 글이 비었을 때의 자리표시도 번역을 거친다 — 영어 화면에 한국어가 박혀 나왔다
@@ -95,7 +127,8 @@ export default function TrainingResultPopup(props) {
         const answer = corrects.length ? corrects.join(', ') : (itr.answer != null && itr.answer !== '' ? String(itr.answer) : null);
         const selectedText = typeof itr.selectedText === 'string' ? itr.selectedText : null;
         const isCorrect = resolveDecision(itr) === true;
-        return { problem, variant, label, answer, selectedText, isCorrect };
+        const sound = resolveSound(itr);
+        return { problem, variant, label, answer, selectedText, isCorrect, sound };
     }), [list, getJudge, t]);
     const hasAnswerCols = useMemo(() => rows.some(r => r.answer !== null || r.selectedText !== null), [rows]);
     // 스크롤은 Popup의 .popup-content 하나만 담당한다 — 예전엔 결과 카드가 자체 스크롤
@@ -116,5 +149,11 @@ export default function TrainingResultPopup(props) {
         // 결과 계산 중에는 Esc 로도 완료(닫기)하지 않는다 — '완료' 단추와 같은 까닭
         beforeClose: blockWhilePending, footerClassName: "trp-result__foot", footer: ({ animateThen, closeWithAnimation }) => (_jsxs(_Fragment, { children: [pending && _jsx("p", { id: reasonId, className: "trp-actions__reason caption-1", role: "status", children: t('training.result.pendingDone', '결과를 계산하는 중이라 아직 완료할 수 없습니다.') }), _jsxs("div", { className: "trp-actions", children: [_jsx(Button, { htmlType: "button", size: 56, type: "bar", label: t('training.result.replay', '다시하기'), onClick: () => animateThen(onReplay) }), _jsx(Button, { htmlType: "button", size: 56, type: "bar", label: t('training.result.done', '완료'), variant: "main", onClick: closeWithAnimation, 
                             /* 막되 초점은 남긴다(onDisabledClick 이 있으면 native disabled 대신 aria-disabled) — 키보드·낭독기가 까닭을 들을 수 있게 */
-                            disabled: pending, onDisabledClick: pending ? () => { } : undefined, "aria-describedby": pending ? reasonId : undefined })] })] })), children: () => (_jsxs("div", { className: "trp-result is-on", children: [_jsxs("header", { className: "trp-result__head", children: [_jsx("p", { className: "trp-result__eyebrow caption-1", children: t('training.result.eyebrow', '훈련 완료') }), _jsx("h1", { className: "trp-result__title h2", children: t('training.result.title', '훈련을 모두 마쳤습니다.') }), subtitle && _jsx("p", { className: "trp-result__subtitle body-3", children: subtitle }), _jsx("div", { className: "trp-score", children: _jsxs("div", { className: "trp-score__figure", "aria-label": t('training.result.scoreAria', { correct, total }), children: [_jsx("span", { className: "trp-score__big", children: correct }), _jsx("span", { className: "trp-score__sep", children: "/" }), _jsx("span", { className: "trp-score__total", children: total })] }) })] }), rows.length > 0 && (_jsx("section", { className: "trp-result__body", children: _jsxs("div", { className: `result-table${hasAnswerCols ? ' result-table--answer' : ''}`, role: "table", "aria-label": t('training.result.tableAriaLabel', '문항별 판정'), children: [_jsxs("div", { className: "result-table__head caption-1", role: "row", children: [_jsx("span", { role: "columnheader", children: t('common.col.problem', '문제') }), hasAnswerCols && _jsx("span", { role: "columnheader", children: t('training.result.colAnswerSelected', '정답 · 선택') }), _jsx("span", { className: "col-right", role: "columnheader", children: t('training.result.colJudge', '판정') })] }), rows.map((r, i) => (_jsxs("div", { className: "result-table__row", role: "row", children: [_jsxs("div", { className: "trp-row__problem", children: [_jsx("span", { className: "trp-row__no caption-1", children: String(i + 1).padStart(2, '0') }), _jsx("div", { className: "trp-row__q body-2", children: r.problem })] }), hasAnswerCols && (_jsxs("div", { className: "trp-row__answers", children: [r.answer !== null && (_jsxs("div", { className: "trp-row__answer-line", children: [_jsx("span", { className: "trp-row__answer-label answer-correct caption-1", children: t('training.result.colAnswer', '정답') }), _jsx("span", { className: "trp-row__answer-value body-2", children: r.answer })] })), _jsxs("div", { className: "trp-row__answer-line", children: [_jsx("span", { className: `trp-row__answer-label answer-selected caption-1 ${r.isCorrect ? 'is-correct' : 'is-wrong'}`, children: t('training.result.colSelected', '선택') }), _jsx("span", { className: `trp-row__answer-value body-2 ${r.isCorrect ? 'is-correct' : 'is-wrong'}`, children: r.selectedText ?? '—' })] })] })), _jsx("div", { className: "trp-row__judge", children: _jsx(Badge, { variant: r.variant, label: r.label, fill: "soft", minWidth: 80 }) })] }, i)))] }) }))] })) }));
+                            disabled: pending, onDisabledClick: pending ? () => { } : undefined, "aria-describedby": pending ? reasonId : undefined })] })] })), children: () => (_jsxs("div", { className: "trp-result is-on", children: [_jsxs("header", { className: "trp-result__head", children: [_jsx("p", { className: "trp-result__eyebrow caption-1", children: t('training.result.eyebrow', '훈련 완료') }), _jsx("h1", { className: "trp-result__title h2", children: t('training.result.title', '훈련을 모두 마쳤습니다.') }), subtitle && _jsx("p", { className: "trp-result__subtitle body-3", children: subtitle }), _jsx("div", { className: "trp-score", children: _jsxs("div", { className: "trp-score__figure", "aria-label": t('training.result.scoreAria', { correct, total }), children: [_jsx("span", { className: "trp-score__big", children: correct }), _jsx("span", { className: "trp-score__sep", children: "/" }), _jsx("span", { className: "trp-score__total", children: total })] }) })] }), rows.length > 0 && (_jsx("section", { className: "trp-result__body", children: _jsxs("div", { className: `result-table${hasAnswerCols ? ' result-table--answer' : ''}`, role: "table", "aria-label": t('training.result.tableAriaLabel', '문항별 판정'), children: [_jsxs("div", { className: "result-table__head caption-1", role: "row", children: [_jsx("span", { role: "columnheader", children: t('common.col.problem', '문제') }), hasAnswerCols && _jsx("span", { role: "columnheader", children: t('training.result.colAnswerSelected', '정답 · 선택') }), _jsx("span", { className: "col-right", role: "columnheader", children: t('training.result.colJudge', '판정') })] }), rows.map((r, i) => (_jsxs("div", { className: "result-table__row", role: "row", children: [_jsxs("div", { className: "trp-row__problem", children: [_jsx("span", { className: "trp-row__no caption-1", children: String(i + 1).padStart(2, '0') }), _jsx("div", { className: "trp-row__q body-2", children: r.problem }), r.sound && (_jsx(Button, { htmlType: "button", size: 32, type: "dot", variant: "transparent-gray", useBorder: false, icon: playingRow === i ? 'square' : 'volume-2', className: "trp-row__replay", 
+                                                /* **줄 번호를 이름에 넣는다** — 줄마다 같은 단추가 서므로, 낭독기로
+                                                   단추 목록을 훑으면 `다시 듣기` 가 문항 수만큼 서서 못 가린다
+                                                   (`TrainingCardGroup` 의 `접기` 와 같은 꼴). */
+                                                ariaLabel: playingRow === i
+                                                    ? t('training.result.replaySoundStop', { no: i + 1, defaultValue: '{{no}}번 듣기 멈춤' })
+                                                    : t('training.result.replaySound', { no: i + 1, defaultValue: '{{no}}번 다시 듣기' }), onClick: () => (playingRow === i ? stopPlaying() : replay(i, r.sound)) }))] }), hasAnswerCols && (_jsxs("div", { className: "trp-row__answers", children: [r.answer !== null && (_jsxs("div", { className: "trp-row__answer-line", children: [_jsx("span", { className: "trp-row__answer-label answer-correct caption-1", children: t('training.result.colAnswer', '정답') }), _jsx("span", { className: "trp-row__answer-value body-2", children: r.answer })] })), _jsxs("div", { className: "trp-row__answer-line", children: [_jsx("span", { className: `trp-row__answer-label answer-selected caption-1 ${r.isCorrect ? 'is-correct' : 'is-wrong'}`, children: t('training.result.colSelected', '선택') }), _jsx("span", { className: `trp-row__answer-value body-2 ${r.isCorrect ? 'is-correct' : 'is-wrong'}`, children: r.selectedText ?? '—' })] })] })), _jsx("div", { className: "trp-row__judge", children: _jsx(Badge, { variant: r.variant, label: r.label, fill: "soft", minWidth: 80 }) })] }, i)))] }) }))] })) }));
 }

package/dist/packages/core/src/components/Word/wordTablePrint.js

@@ -161,6 +161,12 @@ export function captureHtml(els, paperW, paperH, autoPrint = false, fileName = '
     ${fileName ? `<title>${escapeHtml(fileName)}</title>` : ''}
     <style>${styles}</style>
     <style>
+      /* **화면에서 감춘 속 단추를 종이에서는 되살린다**((304), 2026-10-14).
+         화면이 작아 감춘 표(word-table-cell--tap-too-small)가 복제본에 그대로 따라오는데, 종이는 A4 라
+         작지 않다. 이 한 줄이 없으면 **작은 화면에서 뽑은 종이에만 재생 단추가 없다** — 그
+         차이는 종이를 받아 든 사람에게만 보인다. */
+      .word-table-cell--tap-too-small .word-table-cell__play-button,
+      .word-table-cell--tap-too-small .word-table-cell__info-button { display: revert; }
       * { box-sizing: border-box; }
       html, body { margin: 0; padding: 24px 0; width: 100%; min-height: 100%; background: #f0f0f0; overflow: auto; }
       body { display: flex; flex-direction: column; align-items: center; gap: 24px; }

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

@@ -816,8 +816,17 @@
    (`○ 2 · △ 1 · ✕ 1`)은 배율을 안 타 또렷하므로, 폰에서 잃는 것은 *어느 칸이 △ 였나* 를
    모양으로 짚는 것 하나다.
 
-   **안 고치는 것이 아니라 미루는 것이다.** 폰이 주 자리인 화면이 생기면 다시 재지 말고
-   (라) 를 그대로 쓰면 된다. 말귀 쪽 `docs/DECISIONS_PENDING.md` 에 같은 기록이 있다.
+   **미룸을 거뒀다 — (라) 를 건다**(사장님 지시 (302), 2026-10-14). 2026-10-01 에는 *"매니저는
+   핸드폰으로 볼 일이 매우 적다"* 로 미뤘는데, UI·UX 를 한 줄씩 정하시면서 이 자리를 다시
+   고르셨다. **다시 재지 않는다** — 위 표와 넷 가운데 고르는 셈이 그대로 답이다.
+
+   거는 자리는 `--on` 만이 아니라 **이 칸의 그림 전부**다(말귀 청). 고른 것만 굵히면 얹었을 때
+   함께 서는 셋 중 하나만 두꺼워 **어느 것이 매긴 것인지를 굵기가 말해 버린다** — 그 일은 색과
+   `--on` 이 한다. */
+.word-table-cell__score-slot svg {
+    stroke-width: 3.5;
+}
+/*
    ───────────────────────────────────────────────────────────────────────────── */
 
 /* **읽기만 하는 채점 표에서는 안 매긴 것을 안 드러낸다**(말귀 요청 ㊷, 2026-10-01).
@@ -837,6 +846,16 @@
     cursor: default;
 }
 
+/* **겨눌 수 없을 만큼 작아지면 속 단추를 감춘다**((304), 2026-10-14).
+   까닭과 문턱(WCAG 2.5.8, 24px)은 `WordTable.tsx` 의 `MIN_TAP_PX` 주석에 있다.
+   **속성이 아니라 클래스로 단다** — 속성으로 시작하는 고르개는 스코프 프리픽스가
+   `조상 꼴` 로 읽어 `scopePrefixNoDeadRules` 가 운다(처음 그렇게 짰다).
+   **지우지 않고 감춘다** — 인쇄 문서가 이 마디를 복제해 종이의 재생 단추를 짓는다. */
+.word-table-cell--tap-too-small .word-table-cell__play-button,
+.word-table-cell--tap-too-small .word-table-cell__info-button {
+    display: none;
+}
+
 /* 단추 모양은 `Button` 컴포넌트가 낸다 — 여기서 다시 그리지 않는다.
    한때 이 자리에 직접 만든 원형 단추 CSS 가 있었는데, 그러면 앱의 단추와 크기·
    포커스 링·hover 규칙이 따로 놀았다. */

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

@@ -25,6 +25,8 @@ import { WORD_TABLE_PAPER, gridFor, CUT_CLASS, posLabels, wordTypeLabels, expand
 import { useFitScale } from './useFitScale';
 import { claimSound } from './Training/currentSound';
 import { playOneShot } from './Training/oneShotSound';
+/** 누르는 자리의 바닥 — WCAG 2.5.8 Target Size (Minimum), AA. 손잡이 쓸이와 같은 자다. */
+const MIN_TAP_PX = 24;
 // 외부(배럴·TodayPage·WordTableBlock 등) import 호환을 위해 재export
 /* 순수 함수(printWordTable·chunkItems)는 여기서 재수출하지 않는다 — 컴포넌트 파일이
    컴포넌트 아닌 것을 내보내면 Fast Refresh 가 깨져, 이 파일을 고칠 때마다 화면 상태가
@@ -155,7 +157,7 @@ function WordCell({ label, subLabel, colloquialLabel, homonum, showWord = true,
         obs.observe(el);
         return () => obs.disconnect();
     }, [refW, refH]);
-    return (_jsxs("div", { ref: outerRef, className: cx('word-table-cell', hasImage ? 'word-table-cell--with-image' : ''), "data-ref-w": refW, "data-ref-h": refH, children: [_jsxs("div", { className: "word-table-cell__inner", style: { transform: `scale(${scale})` }, children: [hasImage && (_jsxs("div", { className: "word-table-cell__image-wrap", children: [imgLoading && _jsx("div", { className: "word-table-cell__spinner" }), _jsx("img", { ref: imgRef, className: "word-table-cell__image", src: imageUrl, alt: label, draggable: false, style: { opacity: imgLoading ? 0 : 1 }, onLoad: handleImgLoad, onError: handleImgError })] })), showWord && _jsx("span", { className: "word-table-cell__word h0", children: label }), showPronunciation && pron && _jsxs("span", { className: "word-table-cell__sub h3", children: ["[", pron, "]"] }), showColloquial && colloquialLabel && _jsxs("span", { className: "word-table-cell__colloquial h5", children: ["[", colloquialLabel, "]"] })] }), _jsxs("div", { className: "word-table-cell__play-button", "data-audio-src": audioUrl, children: [_jsx("span", { "data-play-state": "play", style: { display: playing ? 'none' : undefined }, children: _jsx(Button, { htmlType: "button", size: buttonSize, type: "dot", icon: "play", variant: "transparent-lightGray", useBorder: false, showTooltipInfo: t('common.play', '재생'), ariaLabel: label ? t('common.playFor', { name: label, defaultValue: `${label} 재생` }) : t('common.play', '재생'), onClick: handlePlay }) }), _jsx("span", { "data-play-state": "pause", style: { display: playing ? undefined : 'none' }, children: _jsx(Button, { htmlType: "button", size: buttonSize, type: "dot", icon: "pause", useBorder: false, selected: true, showTooltipInfo: t('common.pause', '멈춤'), ariaLabel: label ? t('common.pauseFor', { name: label, defaultValue: `${label} 멈춤` }) : t('common.pause', '멈춤'), onClick: handlePlay }) })] }), wordInfo && (_jsxs("div", { ref: infoRef, className: "word-table-cell__info-button", onPointerEnter: (e) => { if (!isTouchPointer(e))
+    return (_jsxs("div", { ref: outerRef, className: cx('word-table-cell', buttonSize * scale < MIN_TAP_PX && 'word-table-cell--tap-too-small', hasImage ? 'word-table-cell--with-image' : ''), "data-ref-w": refW, "data-ref-h": refH, children: [_jsxs("div", { className: "word-table-cell__inner", style: { transform: `scale(${scale})` }, children: [hasImage && (_jsxs("div", { className: "word-table-cell__image-wrap", children: [imgLoading && _jsx("div", { className: "word-table-cell__spinner" }), _jsx("img", { ref: imgRef, className: "word-table-cell__image", src: imageUrl, alt: label, draggable: false, style: { opacity: imgLoading ? 0 : 1 }, onLoad: handleImgLoad, onError: handleImgError })] })), showWord && _jsx("span", { className: "word-table-cell__word h0", children: label }), showPronunciation && pron && _jsxs("span", { className: "word-table-cell__sub h3", children: ["[", pron, "]"] }), showColloquial && colloquialLabel && _jsxs("span", { className: "word-table-cell__colloquial h5", children: ["[", colloquialLabel, "]"] })] }), _jsxs("div", { className: "word-table-cell__play-button", "data-audio-src": audioUrl, children: [_jsx("span", { "data-play-state": "play", style: { display: playing ? 'none' : undefined }, children: _jsx(Button, { htmlType: "button", size: buttonSize, type: "dot", icon: "play", variant: "transparent-lightGray", useBorder: false, showTooltipInfo: t('common.play', '재생'), ariaLabel: label ? t('common.playFor', { name: label, defaultValue: `${label} 재생` }) : t('common.play', '재생'), onClick: handlePlay }) }), _jsx("span", { "data-play-state": "pause", style: { display: playing ? undefined : 'none' }, children: _jsx(Button, { htmlType: "button", size: buttonSize, type: "dot", icon: "pause", useBorder: false, selected: true, showTooltipInfo: t('common.pause', '멈춤'), ariaLabel: label ? t('common.pauseFor', { name: label, defaultValue: `${label} 멈춤` }) : t('common.pause', '멈춤'), onClick: handlePlay }) })] }), wordInfo && (_jsxs("div", { ref: infoRef, className: "word-table-cell__info-button", onPointerEnter: (e) => { if (!isTouchPointer(e))
                     handleInfoEnter(); }, onPointerLeave: (e) => { if (!isTouchPointer(e))
                     handleInfoLeave(); }, 
                 // 이 div 자체는 포커스 대상이 아니지만 안의 Button이 포커스를 받으면

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

@@ -30,8 +30,8 @@ export function useBarChartControl(data) {
         return `${m} ${weekLabel(t, o.week)}`;
     }, [t]);
     const monthOptions = useMemo(() => DATA_MONTH_OPTIONS.map(o => ({
-        value: o.value, label: t('calendar.yearMonth', { year: o.year, month: o.month }),
-    })), [t, DATA_MONTH_OPTIONS]);
+        value: o.value, label: yearMonthLabel(t, i18n.language, o.year, o.month),
+    })), [t, i18n.language, DATA_MONTH_OPTIONS]);
     const weekOptions = useMemo(() => WEEK_OPTIONS.map(o => ({ value: o.value, label: weekOptionLabel(o) })), [WEEK_OPTIONS, weekOptionLabel]);
     // 진입 시 기본 선택을 오늘 기준으로 — 오늘이 속한 월/주(데이터에 있으면), 없으면 최신
     // eslint-disable-next-line react-hooks/exhaustive-deps

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

@@ -449,6 +449,8 @@
             "notHeard": "Didn't hear",
             "notJudged": "Not judged",
             "replay": "Replay",
+            "replaySound": "Replay item {{no}}",
+            "replaySoundStop": "Stop item {{no}}",
             "done": "Done",
             "viewResult": "View Results",
             "noContent": "(No content)"

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

@@ -441,6 +441,8 @@
             "notHeard": "못 들었어요",
             "notJudged": "미판정",
             "replay": "다시하기",
+            "replaySound": "{{no}}번 다시 듣기",
+            "replaySoundStop": "{{no}}번 듣기 멈춤",
             "done": "완료",
             "viewResult": "결과 확인",
             "noContent": "(내용없음)"

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

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

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

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