@ihabdevteam/core 0.8.0

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

@@ -0,0 +1,297 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from '../../utils/cx';
+import { useCallback, useState, useRef, useEffect, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import './WordTableBlock.css';
+import Button from '../Button';
+import Section from '../Section';
+import TextField from '../TextField';
+import Panel, { PanelRow } from '../Panel';
+import Popup from '../Popup/Popup';
+import WordTable, { WORD_TABLE_PAPER } from '../WordTable';
+import { chunkItems } from '../wordTableLayout';
+import TableFilterPanel from './TableFilterPanel';
+import { buildItemsPerPageSection, buildPageNumberSection, PAGE_NUM_POSITION_VALUE, parsePageNumberPosition } from './wordTableSettings';
+import Toast from '../Toast';
+import { useToastState } from '../../hooks/useToastState';
+import { getImageResolver, checkImageExists } from '../../utils/imageConfig';
+import { formatYmd, getTodayKst } from '../../utils/date';
+import { getSavedTables } from '../../utils/savedWordTables';
+import { useWordTablePrint } from './useWordTablePrint';
+import { CELL_COUNTS } 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 }) {
+    const { t } = useTranslation();
+    const resolvedResetLabel = resetLabel ?? t('wordPrint.clearAllSelection', '모두 선택 해제');
+    const isEditable = items === undefined;
+    // 인라인 이름·설명 모드 — onNameChange가 있으면 표 구성 화면에 입력란을 띄우고 저장 팝업 없이 즉시 저장한다.
+    const inlineNameFields = !!onNameChange;
+    // 이 블록에서 방금 저장한 이름들(소문자). 생성 모드에선 저장 직후 그 이름이 existingNames에
+    // 추가되는데, editingName 자기제외가 없어 자기 이름을 중복으로 오탐한다 — 이를 막기 위해 함께 제외한다.
+    const [savedNames, setSavedNames] = useState([]);
+    // 사용자가 실제로 입력한 값. 중복 검사·에러 표시는 이 값만 판단한다(자동 제안 placeholder는 제외).
+    const typedName = (nameValue ?? '').trim();
+    // 입력이 비어 있으면 자동 제안(placeholder)을 실효값으로 사용 — 저장 시에만 fallback.
+    const trimmedName = (typedName || (namePlaceholder ?? '').trim());
+    const trimmedDescription = ((descriptionValue ?? '').trim() || (descriptionPlaceholder ?? '').trim());
+    // 중복 검사: 소문자 비교. '저장하기'는 자기 이름(수정 대상 + 방금 저장한 이름) 제외(덮어쓰기 허용),
+    // '다른 이름으로 저장'은 전체와 비교. 자기 이름은 목록에서 각각 1건씩만 뺀다(같은 이름의 남의 표는 남긴다).
+    const namesLower = (existingNames ?? []).map(n => n.trim().toLowerCase());
+    const ownLower = [editingName?.trim().toLowerCase(), ...savedNames].filter((v) => !!v);
+    const othersLower = [...namesLower];
+    for (const own of ownLower) {
+        const idx = othersLower.indexOf(own);
+        if (idx !== -1)
+            othersLower.splice(idx, 1);
+    }
+    // 자동 제안이 우연히 기존 이름과 겹치더라도, 사용자가 그 이름을 직접 입력하지 않았다면 중복으로 보지 않는다.
+    const collidesOthers = typedName !== '' && othersLower.includes(typedName.toLowerCase());
+    // 편집 모드 전용 상태
+    const [cells, setCells] = useState(Array(4).fill(null));
+    const [cellCount, setCellCount] = useState(4);
+    const [activeCell, setActiveCell] = useState(null);
+    // 공통 단어 표 설정 상태
+    const [orientation, setOrientation] = useState('landscape');
+    const [contentTypes, setContentTypes] = useState(['이미지', '단어', '표준 발음']);
+    const [cutLine, setCutLine] = useState('표시');
+    const [showOutline, setShowOutline] = useState(true);
+    const [showDivLine, setShowDivLine] = useState(true);
+    // 인쇄 캡처용 그리드 콘텐츠 ref (단일 페이지)
+    const contentRef = useRef(null);
+    // 인쇄 캡처용 그리드 콘텐츠 ref 배열 (다중 페이지 — 페이지 분할 시)
+    const pageRefs = useRef([]);
+    // 페이지 분할(표시 모드 전용) — 페이지당 단어/대립쌍 개수. 기본값 8(=1페이지에 전부)
+    const [itemsPerPageSetting, setItemsPerPageSetting] = useState(8);
+    // 종이 안에 페이지 번호(1 / N)를 찍을 위치 — 미표시 포함
+    const [pageNumberPosition, setPageNumberPosition] = useState('right');
+    // 내부 저장 팝업
+    const [showSavePopup, setShowSavePopup] = useState(false);
+    // '다른 이름으로 저장'(새 표 생성)으로 저장 팝업을 열었는지 — 저장 시 onSaveComplete에 saveAsNew로 전달.
+    const [saveAsNew, setSaveAsNew] = useState(false);
+    // 토스트
+    const { toastMessage, toastType, showWarning, clearToast } = useToastState('warning');
+    const handleCloseWordSearch = useCallback(() => setActiveCell(null), [setActiveCell]);
+    // display 모드에서 칸 수 조절용 상태 (showCellCount일 때만 사용)
+    const [displayCellCount, setDisplayCellCount] = useState(() => Math.max(items?.length ?? 1, 1));
+    /* eslint-disable react-hooks/set-state-in-effect */
+    useEffect(() => {
+        if (!isEditable)
+            setDisplayCellCount(prev => Math.max(prev, items?.length ?? 1));
+    }, [items?.length, isEditable]);
+    /* eslint-enable react-hooks/set-state-in-effect */
+    // 레이아웃 칸 수
+    const count = isEditable
+        ? cellCount
+        : showCellCount
+            ? Math.max(displayCellCount, items?.length ?? 1)
+            : Math.max(items?.length ?? 0, 1);
+    const { width, height } = WORD_TABLE_PAPER[orientation];
+    // 페이지 분할 — 편집/칸수조절(showCellCount) 모드에서는 적용하지 않고, 완성된 표시 모드에서만 적용
+    const pagesEnabled = !isEditable && !showCellCount;
+    // '페이지당 개수' 첫 옵션은 항상 전체 개수(=한 페이지에 전부), 나머지는 그보다 작은 표준 분할값만.
+    const itemCount = items?.length ?? 0;
+    // 기본/저장된 설정(8)이 실제 개수보다 크면 전체로 클램프 — 5개뿐이면 "5개(전부)"가 기본 선택되게.
+    const effectiveItemsPerPage = Math.min(itemsPerPageSetting, Math.max(itemCount, 1));
+    const itemsPerPage = pagesEnabled ? effectiveItemsPerPage : count;
+    const pages = pagesEnabled ? chunkItems(items ?? [], itemsPerPage) : null;
+    const isPaginated = !!pages && pages.length > 1;
+    const hasPairs = isEditable
+        ? cells.some(c => c !== null && c.length > 1)
+        : (items ?? []).some(item => item.words.length > 1);
+    // PDF로 저장할 때 OS가 제안하는 기본 파일명. 저장된 표 이름이 있으면 그대로, 없으면 "오늘 날짜 + 단어표/대립쌍표"
+    const printFileName = tableName?.trim()
+        || `${formatYmd(getTodayKst())} ${hasPairs ? t('wordTable.printFileNamePair', '대립쌍표') : t('wordTable.printFileNameSingle', '단어표')}`;
+    // 인쇄/새창/다운로드는 공용 훅으로 위임 — 페이지 분할 시 페이지별 ref, 아니면 단일 콘텐츠 ref를 넘긴다.
+    const getElements = useCallback(() => isPaginated
+        ? pageRefs.current.filter((el) => el !== null)
+        : (contentRef.current ? [contentRef.current] : []), [isPaginated]);
+    const { print: handlePrint, openNewWindow: handleOpenNewWindow, downloadHtml } = useWordTablePrint({
+        getElements, paperW: width, paperH: height, fileName: printFileName,
+        onPopupBlocked: () => { showWarning(t('wordTable.popupBlocked', '팝업이 차단되었습니다. 브라우저 설정에서 팝업을 허용해 주세요.')); },
+    });
+    // 편집 모드 핸들러
+    const handleCellCountChange = (next) => {
+        setCellCount(next);
+        setCells(prev => {
+            const arr = Array(next).fill(null);
+            prev.slice(0, next).forEach((v, i) => { arr[i] = v; });
+            return arr;
+        });
+        setActiveCell(null);
+    };
+    const handleRemove = (idx) => {
+        setCells(prev => { const next = [...prev]; next[idx] = null; return next; });
+        if (activeCell === idx)
+            setActiveCell(null);
+    };
+    const handleWordConfirm = (entries) => {
+        if (activeCell === null)
+            return;
+        const idx = activeCell;
+        setCells(prev => { const next = [...prev]; next[idx] = entries; return next; });
+        const nextEmpty = cells.findIndex((c, i) => i > idx && c === null);
+        setActiveCell(nextEmpty !== -1 ? nextEmpty : null);
+    };
+    const hasColloquial = isEditable
+        ? cells.some(c => c?.some(e => !!e.colloquialPronunciation))
+        : (items ?? []).some(item => item.words.some(w => !!w.colloquialLabel));
+    // 표에 실제로 이미지가 있는지 — resolver(word)는 존재 여부와 무관하게 항상 URL을 만들어 반환하므로
+    // 그 truthiness만으로는 판정할 수 없다(항상 true가 되어 이미지 없는 표에서도 '이미지' 토글이
+    // 활성화되는 문제가 있었다). checkImageExists로 실제 HEAD 요청(+캐시) 확인을 거친다.
+    /* 물어볼 낱말이 있는지는 **렌더 중에 안다** — 굳이 상태로 들고 있을 것이 아니다.
+       이걸 상태로 두면 "없음"으로 되돌리는 일을 효과가 해야 하고, 그러면 낡은 값으로
+       한 번 그린 뒤에 고쳐진다. */
+    const imagePairs = useMemo(() => {
+        if (!getImageResolver())
+            return [];
+        return isEditable
+            ? cells.flatMap(c => (c ?? []).map(e => [e.word, e.homonum]))
+            : (items ?? []).flatMap(item => item.words.map(w => [w.label, w.homonum]));
+    }, [isEditable, cells, items]);
+    /* 실제로 파일이 있는지는 물어봐야 안다(HEAD 요청 + 캐시). 그 답만 상태로 든다.
+       `imagePairs` 가 비면 물어볼 것도 없으므로 아래 유도에서 곧바로 false 가 된다. */
+    const [imageFound, setImageFound] = useState(false);
+    useEffect(() => {
+        if (imagePairs.length === 0)
+            return;
+        let cancelled = false;
+        Promise.all(imagePairs.map(([w, h]) => checkImageExists(w, h))).then(results => {
+            if (!cancelled)
+                setImageFound(results.some(Boolean));
+        });
+        return () => { cancelled = true; };
+    }, [imagePairs]);
+    const hasImage = imagePairs.length > 0 && imageFound;
+    // TableFilterPanel에 끼워 넣을 편집/표시 전용 섹션(칸 수·페이지당 개수·페이지 번호) — 기본
+    // 5개(구성·용지방향·외곽선·절취선·구분선)는 그 컴포넌트가 wordTableSettings 공용 빌더로 직접 만든다.
+    const middleSections = useMemo(() => [
+        ...((isEditable || showCellCount) ? [{ label: t('wordTable.filter.columns', '칸 수'), items: CELL_COUNTS.map(n => ({ value: `${n}칸`, displayLabel: t('wordTable.filter.column', { count: n }) })), display: 'segmented' }] : []),
+        // 내용이 있는(1개 이상) 표면 '페이지당 대립쌍/단어 수'를 항상 노출한다(표시 모드 한정).
+        ...(pagesEnabled && (items?.length ?? 0) > 0 ? [buildItemsPerPageSection(t, { hasPairs, itemCount })] : []),
+        ...(isPaginated ? [buildPageNumberSection(t)] : []),
+    ], [t, isEditable, showCellCount, pagesEnabled, items?.length, hasPairs, itemCount, isPaginated]);
+    const middleSelected = {
+        ...((isEditable || showCellCount) ? { [t('wordTable.filter.columns', '칸 수')]: `${isEditable ? cellCount : displayCellCount}칸` } : {}),
+        ...(pagesEnabled && (items?.length ?? 0) > 0 ? { [t(hasPairs ? 'wordTable.filter.itemsPerPagePair' : 'wordTable.filter.itemsPerPageWord')]: `${effectiveItemsPerPage}개` } : {}),
+        ...(isPaginated ? { [t('wordTable.filter.pageNumber', '페이지 번호')]: PAGE_NUM_POSITION_VALUE[pageNumberPosition] } : {}),
+    };
+    const handleMiddleSelect = (value, sectionLabel) => {
+        if (sectionLabel === t('wordTable.filter.columns', '칸 수')) {
+            if (isEditable)
+                handleCellCountChange(parseInt(value));
+            else
+                setDisplayCellCount(parseInt(value));
+        }
+        else if (sectionLabel === t(hasPairs ? 'wordTable.filter.itemsPerPagePair' : 'wordTable.filter.itemsPerPageWord')) {
+            setItemsPerPageSetting(parseInt(value));
+        }
+        else if (sectionLabel === t('wordTable.filter.pageNumber', '페이지 번호')) {
+            setPageNumberPosition(parsePageNumberPosition(value));
+        }
+    };
+    // 저장 팝업용 현재 items / preview
+    const saveItems = isEditable
+        ? cells.filter((c) => c !== null).map(c => ({
+            id: c[0].word,
+            words: c.map(e => ({ label: e.word, subLabel: e.pronunciation, homonum: e.homonum })),
+        }))
+        : items ?? [];
+    const handleSave = (asNew = false) => {
+        setSaveAsNew(asNew);
+        // 인라인 이름·설명 모드: 팝업 없이 화면의 이름·설명으로 즉시 저장(덮어쓰기). 빈 값은 제안(placeholder)으로 대체.
+        if (inlineNameFields && onSaveComplete) {
+            // 저장한 이름을 기억해 둔다 — 저장 직후 existingNames에 이 이름이 추가돼도 자기 자신을
+            // 중복으로 오탐하지 않도록('저장하기'는 덮어쓰기 허용). '다른 이름으로 저장'은 여기 경로가 아니다.
+            const savedLower = trimmedName.trim().toLowerCase();
+            if (savedLower)
+                setSavedNames(prev => prev.includes(savedLower) ? prev : [...prev, savedLower]);
+            onSaveComplete(trimmedName, saveItems, trimmedDescription || undefined, asNew);
+            return;
+        }
+        // saveOnly: 이름 입력 팝업 없이 바로 저장(이름은 상위에서 처리)
+        if (saveOnly && onSaveComplete) {
+            onSaveComplete('', saveItems, undefined, asNew);
+            return;
+        }
+        if (onSaveComplete) {
+            setShowSavePopup(true);
+            return;
+        }
+        downloadHtml();
+    };
+    // '다른 이름으로 저장' — 이름만 새로 입력받아 새 표로 저장(saveAsNew=true). 설명은 현재 값 유지(복사본).
+    const [showSaveAsPopup, setShowSaveAsPopup] = useState(false);
+    const [saveAsName, setSaveAsName] = useState('');
+    const saveAsTrimmed = saveAsName.trim();
+    const saveAsCollides = saveAsTrimmed !== '' && namesLower.includes(saveAsTrimmed.toLowerCase());
+    const openSaveAsPopup = () => {
+        setSaveAsName(trimmedName ? `${trimmedName} (복사)` : '');
+        setShowSaveAsPopup(true);
+    };
+    const handleSaveAsConfirm = () => {
+        if (!saveAsTrimmed || saveAsCollides || !onSaveComplete)
+            return;
+        onSaveComplete(saveAsTrimmed, saveItems, trimmedDescription || undefined, true);
+        setShowSaveAsPopup(false);
+    };
+    // 저장 버튼 활성 조건 — 인라인 모드에선 이름 필수·중복(others) 불가. 항목이 비어도 불가.
+    const noItems = saveItems.length === 0;
+    const mainSaveDisabled = noItems || (inlineNameFields && (trimmedName === '' || collidesOthers));
+    const handleMainDisabledClick = () => {
+        if (noItems) {
+            showWarning(t('wordTable.emptyItems', '단어를 1개 이상 추가해주세요.'));
+            return;
+        }
+        if (inlineNameFields && trimmedName === '') {
+            showWarning(t('wordTable.save.nameRequired', '표 이름을 입력해 주세요.'));
+            return;
+        }
+        if (inlineNameFields && collidesOthers) {
+            showWarning(t('wordTable.save.duplicateName', '이미 사용 중인 이름입니다.'));
+        }
+    };
+    const savePreview = (_jsx(WordTable, { items: saveItems, orientation: orientation, contentTypes: contentTypes, cutLine: cutLine, showOutline: showOutline, showDivLine: showDivLine, count: count }));
+    return (_jsxs(_Fragment, { children: [_jsxs(Section, { type: "page", icon: titleIcon, title: title, disc: disc, className: cx('word-table-block', className), children: [showSaveAsPopup && (_jsx(Popup, { size: "small", title: secondarySaveButtonLabel ?? t('wordTable.saveAsNewButton', '다른 이름으로 저장'), onClose: () => setShowSaveAsPopup(false), footer: ({ closeWithAnimation }) => (_jsxs(_Fragment, { children: [_jsx(Button, { size: 48, type: "bar", label: t('common.cancel', '취소'), onClick: closeWithAnimation }), _jsx(Button, { size: 48, type: "bar", variant: "main", label: t('common.save', '저장'), disabled: !saveAsTrimmed || saveAsCollides, onClick: handleSaveAsConfirm })] })), children: _jsx(TextField, { label: t('wordTable.save.nameLabel', '이름'), value: saveAsName, onChange: setSaveAsName, placeholder: t('wordTable.save.placeholder', '이 단어표에 대한 제목을 입력하세요.'), maxLength: 40, size: 48, fullWidth: true, autoFocus: true, onEnter: handleSaveAsConfirm, error: saveAsCollides ? t('wordTable.save.duplicateName', '이미 사용 중인 이름입니다.') : undefined }) })), showSavePopup && onSaveComplete && renderSavePopup?.({
+                        defaultName: typeof title === 'string' ? title : t('wordTable.defaultName', '단어 표'),
+                        preview: savePreview,
+                        previewW: width,
+                        previewH: height,
+                        items: saveItems,
+                        existingNames: getSavedTables().map(tb => tb.name),
+                        saveAsNew,
+                        onSave: (name, description) => { onSaveComplete(name, saveItems, description, saveAsNew); setShowSavePopup(false); },
+                        onCancel: () => setShowSavePopup(false),
+                    }), (isEditable || onAddItem) && activeCell !== null && renderWordSearch?.({
+                        cellIndex: activeCell,
+                        onConfirm: isEditable ? handleWordConfirm : (entries) => {
+                            if (onAddItem) {
+                                const entry = entries[0];
+                                if (entry) {
+                                    onAddItem({
+                                        id: entry.word,
+                                        words: [{ label: entry.word, subLabel: entry.pronunciation, homonum: entry.homonum }],
+                                    });
+                                }
+                            }
+                            setActiveCell(null);
+                        },
+                        onClose: handleCloseWordSearch,
+                    }), !hideControls && (_jsx(TableFilterPanel, { hasImage: hasImage, hasColloquial: hasColloquial, contentTypes: contentTypes, orientation: orientation, showOutline: showOutline, cutLine: cutLine, showDivLine: showDivLine, setters: { setContentTypes, setOrientation, setShowOutline, setCutLine, setShowDivLine }, showCutLine: (pagesEnabled ? itemsPerPage : count) > 1, showDivLine2: hasPairs, middleSections: middleSections, extraSelected: middleSelected, onExtraSelect: handleMiddleSelect })), isPaginated && pages ? (_jsx("div", { className: "word-table-block__pages", children: pages.map((page, i) => (_jsx(WordTable, { orientation: orientation, contentTypes: contentTypes, cutLine: cutLine, showOutline: showOutline, showDivLine: showDivLine, count: itemsPerPage, items: page, onRemoveItem: onRemoveItem, contentRef: el => { pageRefs.current[i] = el; }, pageNumber: { current: i + 1, total: pages.length }, pageNumberPosition: pageNumberPosition }, i))) })) : (_jsx(WordTable, { orientation: orientation, contentTypes: contentTypes, cutLine: cutLine, showOutline: showOutline, showDivLine: showDivLine, count: count, items: isEditable ? undefined : (items ?? []), editCells: isEditable ? cells : undefined, activeCell: activeCell, onActivateCell: (isEditable || onAddItem) ? setActiveCell : undefined, onRemoveCell: isEditable ? handleRemove : undefined, onRemoveItem: !isEditable ? onRemoveItem : undefined, onReorder: !isEditable ? onReorder : undefined, showFillerAdd: !!onAddItem, contentRef: contentRef })), inlineNameFields && !hideControls && (_jsxs(Panel, { size: "medium", labelWidth: 64, useBorder: false, useRowBorder: false, className: "word-table-block__meta", children: [_jsx(PanelRow, { variant: "custom", label: t('wordTable.save.nameLabel', '이름'), required: true, align: "vertical", useFullWidth: true, children: _jsx(TextField, { required: true, value: nameValue ?? '', onChange: onNameChange, placeholder: namePlaceholder ? namePlaceholder + t('wordTable.save.autoFillHint', ' (Tab 또는 space 입력시 자동 입력)') : t('wordTable.save.placeholder', '이 단어표에 대한 제목을 입력하세요.'), 
+                                    /* PanelRow의 라벨은 시각적으로만 붙어 있고 입력과 연결돼 있지 않아, 낭독기에는
+                                       이름 없는 입력으로 읽혔다. placeholder는 자동완성 안내문("Tab 또는 space…")이
+                                       섞여 있어 이름으로 부적절하므로 같은 라벨 문구를 넘긴다. */
+                                    ariaLabel: t('wordTable.save.nameLabel', '이름'), maxLength: 40, size: 48, fullWidth: true, error: collidesOthers ? t('wordTable.save.duplicateName', '이미 사용 중인 이름입니다.') : undefined, onKeyDown: (e) => {
+                                        // Tab/Space: 입력이 비어 있고 제안(placeholder)이 있으면 그 값을 채운다(ghost-text 수락).
+                                        if (((e.key === 'Tab' && !e.shiftKey) || e.key === ' ') && !(nameValue ?? '').trim() && (namePlaceholder ?? '').trim()) {
+                                            e.preventDefault();
+                                            onNameChange?.(namePlaceholder ?? '');
+                                        }
+                                    } }) }), _jsx(PanelRow, { variant: "custom", label: t('wordTable.save.descriptionLabel', '설명'), align: "vertical", useFullWidth: true, children: _jsx(TextField, { value: descriptionValue ?? '', onChange: onDescriptionChange, placeholder: descriptionPlaceholder ? descriptionPlaceholder + t('wordTable.save.autoFillHint', ' (Tab 또는 space 입력시 자동 입력)') : t('wordTable.save.descriptionPlaceholder', '이 단어표에 대한 설명을 입력하세요.'), ariaLabel: t('wordTable.save.descriptionLabel', '설명'), maxLength: 200, multiline: true, rows: 2, fullWidth: true, onKeyDown: (e) => {
+                                        if (((e.key === 'Tab' && !e.shiftKey) || e.key === ' ') && !(descriptionValue ?? '').trim() && (descriptionPlaceholder ?? '').trim()) {
+                                            e.preventDefault();
+                                            onDescriptionChange?.(descriptionPlaceholder ?? '');
+                                        }
+                                    } }) })] }))] }), !hideControls && (_jsxs("div", { className: "word-table-block__actions", children: [_jsxs("div", { className: "word-table-block__actions-left", children: [!saveOnly && onReset && (_jsx(Button, { size: 40, type: "bar", label: resolvedResetLabel, onClick: onReset })), !saveOnly && onLoad && (_jsx(Button, { size: 40, type: "bar", label: t('wordTable.load', '불러오기'), onClick: onLoad })), !saveOnly && _jsx(Button, { size: 40, type: "bar", label: t('wordTable.openNewWindow', '새 창으로 보기'), onClick: handleOpenNewWindow })] }), _jsxs("div", { className: "word-table-block__actions-right", children: [onCancel && _jsx(Button, { size: "56", type: "bar", label: t('common.cancel', '취소'), onClick: onCancel }), !saveOnly && _jsx(Button, { size: "56", type: "bar", label: t('wordTable.print', '인쇄하기'), onClick: handlePrint }), secondarySaveButtonLabel && (_jsx(Button, { size: "56", type: "bar", label: secondarySaveButtonLabel, onClick: () => inlineNameFields ? openSaveAsPopup() : handleSave(true), disabled: noItems, onDisabledClick: () => { showWarning(t('wordTable.emptyItems', '단어를 1개 이상 추가해주세요.')); } })), _jsx(Button, { size: "56", type: "bar", variant: "main", label: saveButtonLabel ?? t('wordTable.saveButton', '저장하기'), onClick: () => handleSave(false), disabled: mainSaveDisabled, onDisabledClick: handleMainDisabledClick })] })] })), _jsx(Toast, { message: toastMessage, type: toastType, onClose: clearToast })] }));
+}

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

@@ -0,0 +1,185 @@
+/* 단어표 '문서형' 미리보기 카드 (내용 썸네일 + 이름 + 날짜·개수) */
+.word-table-button {
+  position: relative;
+  box-sizing: border-box;
+  width: 240px;
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--color-whiteLine);
+  border-radius: var(--radius-s, 8px);
+  background: var(--color-white);
+  overflow: hidden;
+  cursor: pointer;
+  transition: border-color 0.15s, box-shadow 0.15s;
+}
+.word-table-button:hover {
+  border-color: var(--color-main);
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
+}
+.word-table-button:focus-visible {
+  outline: 2px solid var(--color-main);
+  outline-offset: 1px;
+}
+.word-table-button--selected {
+  border-color: var(--color-main);
+  box-shadow: 0 0 0 1px var(--color-main) inset;
+}
+
+/* 단어(썸네일) 영역 고정 높이, 정보/푸터는 아래에 자동 높이.
+ *
+ * 240px 이었는데 **대립쌍표에서 칸이 잘렸다.** 한 표는 최대 12칸이고(MAX_SELECT),
+ * 대립쌍은 한 칸에 낱말이 둘이라 6행 × 47px + 간격 5px = 287px 가 필요하다.
+ * 240px 에서는 여섯 칸만 보이고 나머지는 잘렸다(2026-08-28 실측).
+ * 단어표(칸당 하나)는 예전에도 지금도 다 들어간다. */
+.word-table-button__thumb {
+  flex: 0 0 auto;
+  height: 290px;
+}
+
+.word-table-button__info {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  gap: 8px;
+  padding: 12px 14px 0;
+  min-width: 0;
+  /* '더보기'(⋯)를 띄우기 위한 기준점 — 아래 참고 */
+  position: relative;
+}
+
+/* '더보기'는 **흐름에서 뺀다.**
+ *
+ * 예전에는 제목·설명과 같은 줄에 놓인 형제라, 글 묶음이 그 단추 폭(약 40px)만큼
+ * 좁아졌다. 제목은 어차피 두 줄에서 잘리니 티가 안 났지만 **설명은 오른쪽이 늘 비었다**
+ * (사용자가 화면에서 그 빈 자리를 짚었다). 띄워 놓으면 설명이 카드 폭을 다 쓴다.
+ * 대신 **제목만** 오른쪽을 비켜 가게 한다 — 제목 첫 줄이 단추와 같은 높이다. */
+.word-table-button__more {
+  position: absolute;
+  top: 8px;
+  right: 10px;
+}
+.word-table-button__title {
+  padding-right: 34px;
+}
+/* 스토어 하단 영역(footer)이 없을 때 — footer의 padding-bottom(14px)이 없는 만큼
+   info 쪽에서 카드 하단 여백을 직접 채운다.
+
+   그리고 **카드의 남은 높이를 이 영역이 받는다.** 카드는 같은 줄에서 가장 큰 것에
+   맞춰 늘어나는데(`my-word-table-doc-wrap` 의 `align-self: stretch`), 늘어난 만큼이
+   `23시간 전` 아래에 빈칸으로 남았다. 여기서 받아 두면 아래 `__meta` 의
+   `margin-top: auto` 가 그 값을 바닥으로 민다.
+   푸터가 있는 스토어 카드는 푸터가 이미 `margin-top: auto` 로 바닥을 잡으므로
+   건드리지 않는다. */
+.word-table-button--no-footer .word-table-button__info {
+  flex: 1 1 auto;
+  min-height: 0;
+}
+/* 글 묶음이 세로로 꽉 차야 그 안에서 아래로 밀 수 있다. 옆의 '더보기' 단추까지
+   늘리지 않도록 부모의 align-items 를 바꾸지 않고 자기 자신만 늘린다. */
+.word-table-button--no-footer .word-table-button__info-text {
+  align-self: stretch;
+}
+.word-table-button__info-text {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 4px;
+  min-width: 0;
+  flex: 1 1 auto;
+  text-align: left;
+}
+.word-table-button__title {
+  color: var(--color-black);
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  overflow-wrap: anywhere;
+}
+/* 설명 — 제목 아래, 2줄까지 표시 후 말줄임 (폰트는 body-3 토큰 그대로) */
+.word-table-button__desc {
+  color: var(--color-gray);
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+.word-table-button__meta { color: var(--color-gray); }
+
+/* 등록일 + 상태 배지 한 줄 — 왼쪽 끝에 등록일, 오른쪽 끝에 배지. */
+.word-table-button__meta-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  min-width: 0;
+  /* 좌우는 `__info` 와 같게 — 등록일이 제목과 같은 세로선에서 시작한다.
+     위쪽 12px 은 **최소 간격**이다. 남는 높이는 `margin-top: auto` 가 전부 이 위로
+     몰아주는데(제목이 한 줄이면 26px, 두 줄이면 0px), 0px 일 때 설명이 등록일에
+     바짝 붙었다. 카드마다 달라도 최소한 이만큼은 띄운다. */
+  padding: 12px 14px 14px;
+}
+.word-table-button__badges {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex: 0 0 auto;
+}
+
+/* 등록일은 **카드 왼쪽 아래**에 붙인다 — 설명이 한 줄이든 두 줄이든, 카드가 얼마나
+   늘어나든 자리가 같아야 여러 카드를 훑을 때 눈이 한 줄을 따라간다.
+
+   푸터가 없는 카드에만 건다. 스토어 카드는 푸터가 이미 `margin-top: auto` 로 바닥을
+   잡고 있어서, 여기까지 밀면 설명과 등록일 사이가 벌어진다. 화면에서 확인할 수 없는
+   변경은 만들지 않는다 — 자료실 화면에 닿지 못해서, 아예 안 닿게 범위를 좁혔다. */
+.word-table-button--no-footer .word-table-button__meta-row { margin-top: auto; }
+
+/* 하단 부가 영역 — 세로 스택(스토어: 1행 게시자·시간 / 2행 우측 좋아요·다운로드)
+   margin-top:auto 로 카드가 늘어나도 항상 하단에 고정(그리드 stretch와 함께 동작) */
+.word-table-button__footer {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 12px 14px 14px;
+  margin-top: auto;
+  min-width: 0;
+}
+.word-table-button__store-by {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+  overflow: hidden;
+}
+.word-table-button__store-by .training-card__date { white-space: nowrap; }
+.word-table-button__store-stats {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  align-self: flex-end;
+}
+
+/* 더보기 버튼 — info 우측 인라인 */
+.word-table-button__more {
+  flex: 0 0 auto;
+}
+/* 스토어 발행 배지 — 썸네일 좌상단 오버레이 */
+/* 상태 배지 — 한때 썸네일 위에 `position: absolute` 로 얹혀 있었고, **낱말을 가렸다**
+   (실측: '공유 중'이 '가구'를 덮었다). 이제 등록일과 같은 줄, 카드 오른쪽 아래에 둔다.
+   겹칠 일이 없으니 띄우지 않는다. */
+.word-table-button__badge {
+  pointer-events: none;
+}
+/* 최근 생성·미열람 표 표시 — 우상단 원형 배지(circle badge) */
+.word-table-button__new-dot {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  z-index: 3;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: var(--color-main);
+  box-shadow: 0 0 0 2px var(--color-white);
+  pointer-events: none;
+}

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

@@ -0,0 +1,48 @@
+import type { ReactNode, MouseEvent } from 'react';
+import type { WordSearchResultItem } from '../../types/wordSearch';
+import './WordTableButton.css';
+/** @public */
+export interface WordTableButtonProps {
+    /** 단어표 내용(썸네일 미리보기 + 개수) */
+    items: WordSearchResultItem[];
+    /** 단어표 이름 */
+    name: string;
+    /** 설명 — 제목 아래 body-3로 표시(있을 때만) */
+    description?: string;
+    /** 생성일(ISO) — 메타(날짜)에 표시. 없으면 개수만. */
+    createdAt?: string;
+    /** 스토어 발행 배지 표시 */
+    published?: boolean;
+    /** 발행 배지 라벨(i18n 주입) */
+    publishedLabel?: string;
+    /** 활성 공유 링크 존재 배지 표시(썸네일 우상단) */
+    shared?: boolean;
+    /** 공유 배지 라벨(i18n 주입) */
+    sharedLabel?: string;
+    /** 최근 생성·미열람 표 표시 — 우상단 원형 배지(circle badge) */
+    isNew?: boolean;
+    /** 게시자명 — 지정 시 하단에 게시자·발행일·좋아요/다운로드 수(스토어 푸터)를 표시 */
+    publisherName?: string;
+    /** 발행일(ISO) — 게시자명 옆에 상대 시간으로 표시 */
+    publishedAt?: string;
+    /** 좋아요 수 — 지정 시(0 포함) 하트 배지로 표시 */
+    likeCount?: number;
+    /** 다운로드 수 — 지정 시(0 포함) 다운로드 배지로 표시 */
+    downloadCount?: number;
+    /** 게시자명 클릭(게시자 프로필/필터 이동 등) */
+    onPublisherClick?: () => void;
+    /** 선택 상태(불러오기 팝업 등 선택용) */
+    selected?: boolean;
+    /** 카드 클릭(미리보기/열기) */
+    onClick?: () => void;
+    /** 더보기 메뉴 */
+    onMore?: (e: MouseEvent<Element>) => void;
+    /** 제목 영역 오버라이드(인라인 이름 바꾸기 등). 지정 시 클릭·더보기 비활성. */
+    titleNode?: ReactNode;
+    className?: string;
+}
+/**
+ * @public 단어표를 '문서형' 미리보기 카드로 표현하는 컴포넌트.
+ * 내용 썸네일(WordTableThumbnail) + 이름 + 날짜·개수 + (발행 배지 / 더보기 / 스토어 푸터).
+ */
+export default function WordTableButton({ items, name, description, createdAt, published, publishedLabel, shared, sharedLabel, isNew, publisherName, publishedAt, likeCount, downloadCount, onPublisherClick, selected, onClick, onMore, titleNode, className, }: WordTableButtonProps): import("react").JSX.Element;

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

@@ -0,0 +1,28 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from '../../utils/cx';
+import { useTranslation } from 'react-i18next';
+import WordTableThumbnail from './WordTableThumbnail';
+import Badge from '../Badge';
+import Button from '../Button';
+import { formatRelativeTime } from '../../utils/date';
+import './WordTableButton.css';
+/**
+ * @public 단어표를 '문서형' 미리보기 카드로 표현하는 컴포넌트.
+ * 내용 썸네일(WordTableThumbnail) + 이름 + 날짜·개수 + (발행 배지 / 더보기 / 스토어 푸터).
+ */
+export default function WordTableButton({ items, name, description, createdAt, published, publishedLabel, shared, sharedLabel, isNew, publisherName, publishedAt, likeCount, downloadCount, onPublisherClick, selected, onClick, onMore, titleNode, className, }) {
+    const { t } = useTranslation();
+    const renaming = titleNode != null;
+    const hasStoreFooter = publisherName != null || publishedAt != null || likeCount != null || downloadCount != null;
+    const handleKey = (e) => {
+        if (!renaming && (e.key === 'Enter' || e.key === ' ')) {
+            e.preventDefault();
+            onClick?.();
+        }
+    };
+    return (_jsxs("div", { className: cx('word-table-button', selected ? 'word-table-button--selected' : '', !hasStoreFooter ? 'word-table-button--no-footer' : '', className), role: "button", tabIndex: 0, "aria-label": name, onClick: renaming ? undefined : onClick, onKeyDown: handleKey, children: [isNew && _jsx("span", { className: "word-table-button__new-dot", "aria-label": t('myWordTable.newBadge', '새로 만든 표') }), _jsx(WordTableThumbnail, { items: items, className: "word-table-button__thumb" }), _jsxs("div", { className: "word-table-button__info", children: [_jsxs("div", { className: "word-table-button__info-text", children: [titleNode ?? _jsx("div", { className: "word-table-button__title h4", children: name }), description && _jsx("div", { className: "word-table-button__desc body-3", children: description })] }), onMore && !renaming && (_jsx(Button, { className: "word-table-button__more", size: 32, type: "dot", variant: "transparent-gray", useBorder: false, icon: "ellipsis", 
+                        /* 하드코딩 '더보기'였다(영어 화면에서도 한국어로 남았다). 목록에 표가
+                           여러 개면 이름이 같은 버튼이 여러 개이기도 해서 이름을 함께 넣는다. */
+                        ariaLabel: t('common.moreFor', { name }), onClick: (e) => { e.stopPropagation(); onMore(e); } }))] }), (createdAt || published || shared) && (_jsxs("div", { className: "word-table-button__meta-row", children: [_jsx("span", { className: "word-table-button__meta caption-1", children: createdAt ? formatRelativeTime(createdAt, t) : '' }), _jsxs("span", { className: "word-table-button__badges", children: [published && (_jsx(Badge, { className: "word-table-button__badge", size: "small", variant: "main", fill: "soft", iconLeft: "book-marked", label: publishedLabel ?? '발행됨' })), shared && (_jsx(Badge, { className: "word-table-button__badge", size: "small", fill: "soft", iconLeft: "link", label: sharedLabel ?? '공유 중' }))] })] })), hasStoreFooter && (_jsxs("div", { className: "word-table-button__footer", children: [_jsxs("span", { className: "word-table-button__store-by", children: [publisherName && (_jsx("button", { className: "training-card__publisher body-4", type: "button", onClick: (e) => { e.stopPropagation(); onPublisherClick?.(); }, children: publisherName })), publishedAt && _jsx("span", { className: "training-card__date body-4", children: formatRelativeTime(publishedAt, t) })] }), _jsxs("span", { className: "word-table-button__store-stats", children: [likeCount != null && _jsx(Badge, { size: "small", fill: "soft", variant: "like", iconLeft: "heart", label: String(likeCount) }), downloadCount != null && _jsx(Badge, { size: "small", fill: "soft", variant: "main", iconLeft: "download", label: String(downloadCount) })] })] }))] }));
+}

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

@@ -0,0 +1,56 @@
+.word-table-thumb {
+  display: grid;
+  gap: 1px;
+  background: var(--color-darkWhite);
+  border-bottom: 1px solid var(--color-darkWhite);
+  height: 140px;
+  /* **행은 내용보다 작아지지 않는다.**
+   *
+   * 예전에는 `1fr` 이었다. 썸네일은 항목 수만큼 행을 만드는데(12개 → 6행), 높이는
+   * 고정이라 항목이 늘수록 행이 짜부라진다. 대립쌍표는 한 칸에 낱말이 **둘**이라
+   * 먼저 무너졌다 — 12개짜리 표에서 행이 39px 인데 내용은 54px 이라, 글자가 칸을
+   * 넘어 아랫줄과 겹쳐 보였다(2026-08-28 실측, 겹친 쌍 8개).
+   *
+   * `minmax(min-content, 1fr)` 는 두 가지를 함께 지킨다 —
+   * 항목이 적으면 예전처럼 늘어나 상자를 채우고, 많으면 글자 크기를 지킨 채 멈춘다.
+   * 넘치는 행은 아래 `overflow: hidden` 이 자른다. **미리보기는 잘려도 읽혀야 한다.** */
+  grid-auto-rows: minmax(min-content, 1fr);
+  overflow: hidden;
+}
+
+.word-table-thumb__cell {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 4px;
+  background: var(--color-white);
+  gap: 1px;
+  overflow: hidden;
+  min-height: 0;
+}
+
+.word-table-thumb__word {
+  color: var(--color-black);
+}
+
+/* 줄간격을 좁힌다. **선택자를 한 단계 겹쳐 쓴 이유가 있다** — 쓰는 쪽이 `body-3` 을
+   함께 붙이는데 그쪽도 클래스 하나라, 단순 `.word-table-thumb__word` 로는 나중에 오는
+   `body-3`(22px)에 진다. 한때 여기 `line-height: 1` 이 적혀 있었지만 **한 번도 적용된
+   적이 없었다**(실측: 계산값 22px).
+
+   미리보기는 읽히기만 하면 되고, 22px → 17px 로 줄이면 한 칸에 두 낱말이 들어가는
+   대립쌍표에서 행 하나가 63px → 47px 이 된다. 그래야 최대 12칸이 다 보인다. */
+.word-table-thumb .word-table-thumb__word {
+  line-height: 1.2;
+}
+
+.word-table-thumb__divider {
+  display: block;
+  width: 30%;
+  height: 1px;
+  background: var(--color-darkWhite);
+  /* 위아래 4px 씩이면 대립쌍 한 칸이 8px 더 두꺼워지고, 그것이 여섯 행이면 48px 다.
+     미리보기에서는 1px 로도 두 낱말이 충분히 갈린다. */
+  margin: 1px 0;
+}

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

@@ -0,0 +1,10 @@
+import type { WordSearchResultItem } from '../../types/wordSearch';
+import './WordTableThumbnail.css';
+/**
+ * @public 단어표 내용 미니 미리보기(그리드 썸네일).
+ * 단어표 불러오기 팝업·나의 단어표 카드 등에서 공유하는 '문서형' 미리보기.
+ */
+export default function WordTableThumbnail({ items, className }: {
+    items: WordSearchResultItem[];
+    className?: string;
+}): import("react").JSX.Element;