@ihabdevteam/core 0.8.0

package/dist/packages/core/src/components/Word/WordSearchResultBlock.css

@@ -0,0 +1,130 @@
+.word-search-result-block {
+}
+
+.word-search-result-block__actions {
+    display: flex;
+    justify-content: center;
+    gap: var(--spacing-xs);
+}
+
+/* 헤더 우상단 정렬/페이지크기/페이지네이션 컨트롤 */
+.word-search-result-block__toolbar {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-xs);
+    flex-wrap: wrap;
+    justify-content: flex-end;
+}
+
+.word-search-result-block__inner {
+    border: 1px solid var(--color-darkWhite);
+    background: var(--color-white);
+    border-radius: var(--radius-m);
+    padding: var(--spacing-content);
+}
+
+/* 박스↔액션 간격은 '내용이 있는' 액션(더보기/선택초기화/인쇄)이 뒤에 올 때만 준다.
+   액션이 아예 없거나(비렌더) 조건 미충족으로 빈 div일 때는 트레일링 하단 여백이 생기지 않도록
+   — 단어 만들기 화면은 액션 버튼이 모두 없어 빈 __actions만 남아 20px 여백이 떠 보였다. */
+.word-search-result-block__inner:has(+ .word-search-result-block__actions:not(:empty)) {
+    margin-bottom: var(--spacing-content);
+}
+
+.word-search-result-block__items {
+    display: grid;
+    /* 고정 200px 열 — 1fr로 늘리면 버튼(내용 폭)이 열을 못 채워 남는 공간이 버튼 사이 넓은 간격처럼 보인다.
+       고정폭은 max-content와 달리 긴 묶음 폭이 전 열에 전파되지 않고, 남는 공간은 justify-content:center로 양옆에 둔다. */
+    grid-template-columns: repeat(auto-fill, 200px);
+    justify-content: center;
+    gap: var(--spacing-xs);
+}
+
+/* 묶음 버튼 라벨(단어·발음)은 단어 중간에서 개행되지 않게 — 각 단어는 한 줄 유지. */
+.word-search-result-block__items .button__label-text,
+.word-search-result-block__items .button__sub-label-text {
+    white-space: nowrap;
+    word-break: keep-all;
+}
+
+/* 라벨이 4개 이상일 때만 2열(2×2)로 배치 — 한 줄에 다 욱여넣으면 버튼이 컨테이너를 벗어난다.
+   3개 이하는 기본 align-grid(grid-auto-flow: column) 그대로 '한 줄'로 둔다. */
+.word-search-result-block__items .button__label:has(.button__label-text:nth-child(4)) {
+    grid-auto-flow: row;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    grid-auto-columns: unset;
+    gap: 4px 10px;
+}
+
+/* .button-word 공용 height:72px 고정이라 2행 라벨(2×2)이 밖으로 넘친다 — 4개 이상일 때만
+   높이를 내용에 맞추고 72px는 최소값으로(세로 패딩 유지). 3개 이하는 한 줄이라 72px 그대로. */
+.word-search-result-block__items .button-word:has(.button__label-text:nth-child(4)) {
+    height: auto;
+    min-height: 72px;
+    padding-top: 8px;
+    padding-bottom: 8px;
+}
+
+@media (max-width: 767px) {
+  .word-search-result-block__items {
+    grid-template-columns: repeat(2, 1fr);
+    justify-content: unset;
+  }
+  /* minWidth={200} 인라인 스타일을 그리드 셀 안에서 해제 — WordSearchResultBlock.tsx에서
+     Button에 minWidth={200} prop을 실제로 전달해 인라인 style로 렌더되므로(코드 확인됨)
+     !important 없이는 이길 수 없음(WordTableBlock.css의 유사 케이스와 달리 여긴 진짜 인라인). */
+  .word-search-result-block__items .button {
+    min-width: 0 !important;
+    width: 100%;
+  }
+}
+
+.word-search-result-block__empty {
+    text-align: center;
+    /* "검색 결과가 없습니다" — 빈 상태 안내문 (lightGray는 2.48:1) */
+    color: var(--color-gray);
+    padding: 24px 0;
+    margin: 0;
+}
+
+.word-search-result-block__group {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+.word-search-result-block__group + .word-search-result-block__group {
+    margin-top: var(--spacing-l);
+    padding-top: var(--spacing-l);
+    border-top: 1px solid var(--color-darkWhite);
+}
+
+/* 결과 하단 페이지네이션 — 상단 툴바와 별개로 목록 아래에도 노출(긴 목록 편의) */
+.word-search-result-block__pagination-bottom {
+  display: flex;
+  justify-content: center;
+  margin-top: 16px;
+}
+
+/* 결과 없음 아래 한 줄 — 왜 없는지 설명한다. 본문보다 옅게 두되, 읽히지 않을 만큼
+   옅으면 안 된다(--color-sub 는 tokens.css 에 정의돼 있다). */
+.word-search-result-block__empty-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--spacing-xs, 8px);
+}
+.word-search-result-block__empty-hint {
+  color: var(--color-sub);
+  text-align: center;
+  max-width: 34em;
+  line-height: 1.6;
+}
+
+/* 부제가 두 줄이 될 때 — 알림(걸러지고 있다) 위, 선택 안내 아래로 쌓는다.
+   Section 의 disc 는 한 줄을 전제하므로 여기서 블록으로 만든다. */
+.word-search-result-block__notice,
+.word-search-result-block__disc { display: block; }
+
+/* 알림은 왜 결과가 적은지 말하는 줄이라 먼저 읽히게 색을 준다.
+   --color-gray 는 부제 기본색이고, 알림만 본문색으로 올린다. */
+.word-search-result-block__notice { color: var(--color-text-primary); }

package/dist/packages/core/src/components/Word/WordSearchResultBlock.d.ts

@@ -0,0 +1,47 @@
+import { type ReactNode } from 'react';
+import './WordSearchResultBlock.css';
+export type { WordSearchResultWord, WordSearchResultItem } from '../../types/wordSearch';
+import type { WordSearchResultItem } from '../../types/wordSearch';
+/** @public */
+export interface WordSearchResultGroup {
+    label: string;
+    items: WordSearchResultItem[];
+}
+/** @public */
+export interface WordSearchResultBlockProps {
+    titleIcon?: string;
+    resultCount?: number;
+    resultUnit?: string;
+    searchQuery?: string;
+    items: WordSearchResultItem[];
+    groups?: WordSearchResultGroup[];
+    selected?: string[];
+    onSelect?: (id: string) => void;
+    maxSelect?: number;
+    onClearSelection?: () => void;
+    onPrint?: () => void;
+    onPrintEmpty?: () => void;
+    className?: string;
+    /** 섹션 타입: 기본 page, 팝업 페이지 pagePopup, 팝업 내 popup */
+    sectionType?: 'page' | 'pagePopup' | 'popup';
+    /** 제목 아래 부제(설명). 지정 시 기본 disc(선택 안내)를 대체한다. */
+    disc?: ReactNode;
+    /**
+     * 기본 선택 안내 **아래에 덧붙는** 한 줄 — 지금 결과가 걸러지고 있다는 알림 등.
+     *
+     * `disc` 와 달리 기본 안내를 밀어내지 않는다. 밀어내면 '12개까지 선택할 수 있습니다
+     * (n/12)' 가 사라지는데, 그것이 몇 칸을 썼는지 보이는 유일한 자리다 — 필터를 켠
+     * 사람에게서 하필 그 숫자를 뺏게 된다.
+     */
+    notice?: ReactNode;
+    /**
+     * 결과가 없을 때 "검색 결과가 없습니다." 아래에 덧붙일 한 줄.
+     *
+     * 조건이 **구조적으로 불가능**해서 0건인 경우가 있다(2음절에 어중은 없다).
+     * 그냥 "없습니다"만 보이면 그런 낱말이 없는 줄 알고 계속 찾게 된다 —
+     * 왜 없는지를 말해 주는 자리다.
+     */
+    emptyHint?: ReactNode;
+}
+/** @public */
+export default function WordSearchResultBlock({ titleIcon, resultCount, resultUnit, searchQuery, items, groups, selected, onSelect, maxSelect, onClearSelection, onPrint, onPrintEmpty, className, emptyHint, sectionType, disc, notice, }: WordSearchResultBlockProps): import("react").JSX.Element;

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

@@ -0,0 +1,141 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { cx } from '../../utils/cx';
+import { useState, useCallback, useMemo, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import './WordSearchResultBlock.css';
+import Button from '../Button';
+import Section from '../Section';
+import Dropdown from '../Dropdown';
+import Pagination from '../Pagination';
+import WordImageTooltip from '../Tooltip/WordImageTooltip';
+import { useHoverAnchor } from '../../hooks/useHoverAnchor';
+import { matchesWordQuery } from '../../utils/koreanSyllable';
+import { withIga, withEulReul } from '../../utils/josa';
+/** @public */
+export default function WordSearchResultBlock({ titleIcon, resultCount, resultUnit, searchQuery, items, groups, selected = [], onSelect, maxSelect, onClearSelection, onPrint, onPrintEmpty, className, emptyHint, sectionType = 'page', disc, notice, }) {
+    const { t, i18n } = useTranslation();
+    // 한국어에서만 조사(이/가·을/를)를 unit 말미에 붙인다 — 문구에는 조사를 고정하지 않는다.
+    const ko = i18n.language?.startsWith('ko') ?? false;
+    const { anchorRect: hoverAnchorRect, openAt: openHover, close: closeHover } = useHoverAnchor();
+    const [hoverWords, setHoverWords] = useState(null);
+    const handleHoverLeave = useCallback(() => { closeHover(); setHoverWords(null); }, [closeHover]);
+    // ── 정렬·페이지크기·페이지네이션(그룹 아닌 flat items에만 적용) ──────────────
+    // 검색어가 있으면 '시작 우선'(검색어로 시작하는 단어를 위로)을 기본 정렬로 쓴다 —
+    // '나'로 '나무'를 찾을 때 '가시나무'가 먼저 나와 원하는 단어가 묻히지 않도록.
+    // 단, 대립쌍표의 searchQuery는 '[가, 나]'·'가, 나' 같은 표시용 요약이라 정렬 기준이 될 수 없다
+    // (그대로 쓰면 아무것도 매칭되지 않아 '시작 우선'이 이름만 붙은 가나다순이 된다).
+    // 쉼표·대괄호·공백이 없는 단일 검색어일 때만 정렬 기준으로 인정한다.
+    const rawQuery = (searchQuery ?? '').trim();
+    const q = /^[^,[\]\s]+$/.test(rawQuery) ? rawQuery : '';
+    const hasQuery = q.length > 0;
+    const [sortKey, setSortKey] = useState('ganada');
+    const [pageSizeStr, setPageSizeStr] = useState('50');
+    const [page, setPage] = useState(1);
+    // 검색어 유무가 바뀌면 그에 맞는 기본 정렬로 되돌린다(렌더 중 상태 조정).
+    const [prevHasQuery, setPrevHasQuery] = useState(hasQuery);
+    if (prevHasQuery !== hasQuery) {
+        setPrevHasQuery(hasQuery);
+        setSortKey(hasQuery ? 'match' : 'ganada');
+    }
+    const effectiveSortKey = (sortKey === 'match' && !hasQuery) ? 'ganada' : sortKey;
+    const sortOptions = useMemo(() => [
+        ...(hasQuery ? [{ value: 'match', label: t('wordSearch.sort.match', { defaultValue: '시작 우선' }) }] : []),
+        { value: 'ganada', label: t('wordSearch.sort.ganada', { defaultValue: '가나다순 ↑' }) },
+        { value: 'ganada_desc', label: t('wordSearch.sort.ganadaDesc', { defaultValue: '가나다순 ↓' }) },
+        { value: 'syllable', label: t('wordSearch.sort.syllable', { defaultValue: '음절 수 ↑' }) },
+        { value: 'syllable_desc', label: t('wordSearch.sort.syllableDesc', { defaultValue: '음절 수 ↓' }) },
+        { value: 'grade', label: t('wordSearch.sort.grade', { defaultValue: '등급순 ↑' }) },
+        { value: 'grade_desc', label: t('wordSearch.sort.gradeDesc', { defaultValue: '등급순 ↓' }) },
+    ], [t, hasQuery]);
+    const pageSizeOptions = useMemo(() => ['10', '25', '50', '100'].map(v => ({
+        value: v, label: t('wordSearch.pageSize', { count: Number(v), defaultValue: `${v}개씩 보기` }),
+    })), [t]);
+    const firstWord = (it) => it.words[0];
+    // 정렬 비교자 — flat/그룹 뷰가 공유한다.
+    const sortCompare = useCallback((a, b) => {
+        const label = (it) => firstWord(it)?.label ?? '';
+        const syll = (it) => firstWord(it)?.syllables ?? [...label(it)].length;
+        const grade = (it) => { const n = parseInt(firstWord(it)?.grade ?? '', 10); return Number.isFinite(n) ? n : 999; };
+        switch (effectiveSortKey) {
+            // 시작 우선 — 검색어로 시작하는 단어를 위로. 앞 q 글자만 잘라 매칭하면 "첫 음절부터 일치"만
+            // 남는다(초성 검색도 동일: 'ㄴ' → '나무'가 위). 동순위는 가나다.
+            case 'match': {
+                const qLen = [...q].length;
+                const rank = (it) => matchesWordQuery(label(it).slice(0, qLen), q) ? 0 : 1;
+                return rank(a) - rank(b) || label(a).localeCompare(label(b), 'ko');
+            }
+            case 'ganada': return label(a).localeCompare(label(b), 'ko');
+            case 'ganada_desc': return label(b).localeCompare(label(a), 'ko');
+            case 'syllable': return syll(a) - syll(b) || label(a).localeCompare(label(b), 'ko');
+            case 'syllable_desc': return syll(b) - syll(a) || label(a).localeCompare(label(b), 'ko');
+            case 'grade': return grade(a) - grade(b) || label(a).localeCompare(label(b), 'ko');
+            case 'grade_desc': return grade(b) - grade(a) || label(a).localeCompare(label(b), 'ko');
+            default: return 0;
+        }
+    }, [effectiveSortKey, q]);
+    const sortedItems = useMemo(() => items.slice().sort(sortCompare), [items, sortCompare]);
+    const pageSize = Number(pageSizeStr) || 10;
+    // 그룹 뷰(대립쌍표 음소대립)도 flat과 동일하게 정렬·페이지네이션한다 — 그룹 순서를 유지하고 그룹 내부를
+    // 정렬한 전체 목록을 페이지 단위로 자른다(더보기/페이지 UI 일관성; 이전엔 그룹 뷰만 전부 노출됐음).
+    const orderedGroupItems = useMemo(() => (groups ?? []).flatMap(g => g.items.slice().sort(sortCompare).map(item => ({ item, label: g.label }))), [groups, sortCompare]);
+    const totalCount = groups ? orderedGroupItems.length : sortedItems.length;
+    const totalPages = Math.max(1, Math.ceil(totalCount / pageSize));
+    const pageClamped = Math.min(page, totalPages);
+    const pagedItems = useMemo(() => sortedItems.slice((pageClamped - 1) * pageSize, pageClamped * pageSize), [sortedItems, pageClamped, pageSize]);
+    // 현재 페이지의 그룹 항목을 그룹 순서대로 재그룹핑한다(그룹 헤더 유지; 페이지 경계에서 한 그룹이 나뉠 수 있음).
+    const pagedGroups = useMemo(() => {
+        if (!groups)
+            return null;
+        const slice = orderedGroupItems.slice((pageClamped - 1) * pageSize, pageClamped * pageSize);
+        const byLabel = new Map();
+        for (const { item, label } of slice) {
+            if (!byLabel.has(label))
+                byLabel.set(label, []);
+            byLabel.get(label).push(item);
+        }
+        return [...byLabel.entries()].map(([label, its]) => ({ label, items: its }));
+    }, [groups, orderedGroupItems, pageClamped, pageSize]);
+    // 정렬/페이지크기 변경·결과 개수 변동 시 1페이지로.
+    /* eslint-disable react-hooks/set-state-in-effect */
+    useEffect(() => { setPage(1); }, [sortKey, pageSizeStr, totalCount]);
+    /* eslint-enable react-hooks/set-state-in-effect */
+    // 결과가 있으면(flat/그룹 모두) 툴바(정렬·페이지크기·페이지네이션) 노출.
+    // (그룹 뷰도 flat과 동일하게 페이지네이션 — 카드 4 결정 1안. 그룹은 페이지 단위로 재그룹핑되어 표시.)
+    const showToolbar = totalCount > 0;
+    const toolbar = showToolbar ? (_jsxs("div", { className: "word-search-result-block__toolbar", children: [_jsx(Dropdown, { size: 40, options: sortOptions, value: effectiveSortKey, onChange: setSortKey, ariaLabel: t('wordSearch.sort.aria', { defaultValue: '정렬' }) }), _jsx(Dropdown, { size: 40, options: pageSizeOptions, value: pageSizeStr, onChange: setPageSizeStr, ariaLabel: t('wordSearch.pageSizeAria', { defaultValue: '페이지 크기' }) }), _jsx(Pagination, { page: pageClamped, totalPages: totalPages, onChange: setPage })] })) : undefined;
+    const handleClick = (id) => {
+        if (!onSelect)
+            return;
+        onSelect(id);
+    };
+    // count를 색상으로 강조하기 위해 ReactNode로 직접 구성 (Trans 없이)
+    const titleLabel = resultCount !== undefined && resultUnit
+        ? _jsxs(_Fragment, { children: [t('wordSearch.resultTitlePrefix', '총 '), _jsx("span", { style: { color: 'var(--color-main)' }, children: resultCount }), t('wordSearch.resultTitleSuffix', { unit: ko ? withIga(resultUnit) : resultUnit })] })
+        : undefined;
+    const discLabel = resultCount !== undefined && resultCount > 0 && maxSelect !== undefined && resultUnit
+        ? t('wordSearch.resultDisc', { unit: ko ? withEulReul(resultUnit) : resultUnit, max: maxSelect, selected: selected.length })
+        : undefined;
+    /* 기본 안내(있으면) 위에 알림 줄을 얹는다 — 알림이 먼저 눈에 들어오고, 선택 안내는
+       제자리에 남는다. 둘 다 없으면 undefined 라 부제 자체가 안 그려진다. */
+    const discNode = disc ?? (notice
+        ? _jsxs(_Fragment, { children: [_jsx("span", { className: "word-search-result-block__notice", children: notice }), discLabel ? _jsx("span", { className: "word-search-result-block__disc", children: discLabel }) : null] })
+        : discLabel);
+    return (_jsxs(Section, { type: sectionType, icon: titleIcon, title: titleLabel, action: toolbar, disc: discNode, className: cx('word-search-result-block', className), children: [_jsxs("div", { className: "word-search-result-block__inner", children: [(groups ? groups.length === 0 : items.length === 0) && (_jsxs("div", { className: "word-search-result-block__empty-wrap", children: [_jsx("p", { className: "word-search-result-block__empty body-3", children: t('wordSearch.emptyResult', '검색 결과가 없습니다.') }), emptyHint && _jsx("p", { className: "word-search-result-block__empty-hint body-3", children: emptyHint })] })), groups ? ((pagedGroups ?? []).map((group) => (_jsx("div", { className: "word-search-result-block__group", children: _jsx("div", { className: "word-search-result-block__items", children: group.items.map((item) => {
+                                const isSelected = selected.includes(item.id);
+                                return (_jsx("div", { onMouseEnter: e => {
+                                        openHover(e.currentTarget);
+                                        setHoverWords(item.words);
+                                    }, onMouseLeave: handleHoverLeave, children: _jsx(Button, { size: "word", align: "grid", label: item.words.map(w => w.label), subLabel: item.words.map(w => w.subLabel).filter(Boolean).length > 0
+                                            ? item.words.map(w => w.subLabel)
+                                            : undefined, selected: isSelected, onClick: () => handleClick(item.id), minWidth: 200 }) }, item.id));
+                            }) }) }, group.label)))) : (_jsx("div", { className: "word-search-result-block__items", children: pagedItems.map((item) => {
+                            const isSelected = selected.includes(item.id);
+                            return (_jsx("div", { onMouseEnter: e => {
+                                    openHover(e.currentTarget);
+                                    setHoverWords(item.words);
+                                }, onMouseLeave: handleHoverLeave, children: _jsx(Button, { size: "word", align: "grid", label: item.words.map(w => w.label), subLabel: item.words.map(w => w.subLabel).filter(Boolean).length > 0
+                                        ? item.words.map(w => w.subLabel)
+                                        : undefined, selected: isSelected, onClick: () => handleClick(item.id), minWidth: 200 }) }, item.id));
+                        }) })), hoverWords && hoverAnchorRect && (_jsx(WordImageTooltip, { words: hoverWords, anchorRect: hoverAnchorRect }))] }), totalPages > 1 && (_jsx("div", { className: "word-search-result-block__pagination-bottom", children: _jsx(Pagination, { page: pageClamped, totalPages: totalPages, onChange: setPage }) })), (onClearSelection || onPrint) && (_jsxs("div", { className: "word-search-result-block__actions", children: [onClearSelection && (_jsx(Button, { size: "56", type: "bar", label: t('common.resetSelection', '선택 초기화'), selected: false, disabled: selected.length === 0, onClick: selected.length === 0 ? undefined : onClearSelection })), onPrint && (_jsx("div", { onClick: selected.length === 0 ? onPrintEmpty : undefined, children: _jsx(Button, { size: "56", type: "bar", variant: "main", label: t('wordTable.title', '단어 표 만들기'), disabled: selected.length === 0, onClick: selected.length === 0 ? undefined : onPrint }) }))] }))] }));
+}

package/dist/packages/core/src/components/Word/WordTableBlock.css

@@ -0,0 +1,85 @@
+.word-table-block {
+}
+
+/* ── 인라인 이름·설명 입력란 (표 아래) — 테두리·배경 없이 ─
+   간격은 Section의 flex gap이 담당한다(자체 margin-top을 더하면 이중 여백이 된다). */
+.word-table-block__meta {
+    background: transparent;
+}
+
+/* ── 액션 버튼 ─────────────────────────────────────────── */
+.word-table-block__actions {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: var(--spacing-xs);
+}
+
+.word-table-block__actions-left,
+.word-table-block__actions-right {
+    display: flex;
+    gap: var(--spacing-xs);
+}
+
+@media (max-width: 767px) {
+  .word-table-block__actions {
+    flex-direction: column;
+    align-items: stretch;
+  }
+  .word-table-block__actions-left,
+  .word-table-block__actions-right {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+  }
+  /* min-width 해제 — !important 불필요: 이 결합 선택자(2클래스)가 버튼 사이즈 클래스
+     (.button40--bar 등, 1클래스)보다 특이도가 이미 높아 소스 순서와 무관하게 우선 적용됨.
+     (minWidth prop을 인라인으로 넘기는 경우는 여기 해당 없음) */
+  .word-table-block__actions .button {
+    min-width: 0;
+    width: 100%;
+  }
+}
+
+/* ── 팝업 내 미리보기 ───────────────────────────────────── */
+/* 버그 수정: 이 클래스는 Popup의 바깥 오버레이(.popup, position:fixed; inset:0)에 그대로
+   붙는데, 거기에 width를 직접 지정하면 inset의 left/right와 충돌해 오버레이가 뷰포트
+   왼쪽 정렬 1200px로만 렌더되어 넓은 화면에서 배경 딤이 우측을 덮지 못했다.
+   Popup.tsx 주석이 안내하는 대로 실제 크기를 갖는 .popup-panel을 타깃으로 수정.
+   .popup-panel(1클래스)보다 특이도가 높아(2클래스) !important 불필요. */
+.my-word-table-preview-popup .popup-panel { width: min(1400px, 94vw); max-width: none; }
+.my-word-table-preview-popup .popup-body { overflow: auto; overscroll-behavior-y: contain; }
+
+/* ── 페이지 분할(다중 페이지) ──────────────────────────── */
+.word-table-block__pages {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-content, 24px);
+}
+
+/* ── 실제 인쇄: 컨트롤 숨김 ──────────────────────────────
+   한때 `.blockTitle` 과 `.filterPanel` 을 숨기려 했는데, DOM 에 그런 이름이 없다
+   (실제로는 Section 의 `.section__header` 와 `.filter-panel` 이다). 두 규칙이
+   아무 데도 안 걸려, 브라우저로 직접(Ctrl+P) 인쇄하면 제목과 필터판이 표와 함께
+   찍혔다. 실측으로 확인했다 — `.filterPanel` 0개, `.filter-panel` 3개.
+
+   범위를 이 블록 안으로 좁힌다. 전역으로 `.filter-panel` 을 숨기면 단어표와
+   무관한 화면을 인쇄할 때까지 필터가 사라진다. */
+@media print {
+    .word-table-block > .section__header,
+    .word-table-block > .filter-panel,
+    .word-table-block__actions {
+        display: none;
+    }
+
+    /* 페이지 분할 시 각 단어표를 개별 인쇄 페이지로 강제 개행
+       (인쇄 버튼은 새 창을 통해 처리되지만, 브라우저 자체 인쇄에도 대비) */
+    .word-table-block__pages .word-table {
+        position: static;
+        page-break-after: always;
+        break-after: page;
+    }
+    .word-table-block__pages .word-table:last-child {
+        page-break-after: auto;
+        break-after: auto;
+    }
+}

package/dist/packages/core/src/components/Word/WordTableBlock.d.ts

@@ -0,0 +1,5 @@
+import './WordTableBlock.css';
+import type { WordTableBlockProps } from './wordTableBlockTypes';
+export type { WordEntry, WordTableBlockProps } from './wordTableBlockTypes';
+/** @public */
+export default function WordTableBlock({ title, titleIcon, disc, items, onSaveComplete, onLoad, onRemoveItem, onReset, resetLabel, saveButtonLabel, secondarySaveButtonLabel, onReorder, showCellCount, onAddItem, className, renderSavePopup, renderWordSearch, hideControls, saveOnly, tableName, nameValue, onNameChange, descriptionValue, onDescriptionChange, namePlaceholder, descriptionPlaceholder, existingNames, editingName, onCancel }: WordTableBlockProps): import("react").JSX.Element;