@ihabdevteam/core 0.219.0 → 0.221.0

package/dist/ihabdevteam-core.d.ts

@@ -1626,7 +1626,7 @@ export declare function copyText(text: string): Promise<boolean>;
  *
  * 값은 손으로 적고 `test/coreVersion.test.ts` 가 package.json 과 어긋나면 운다.
  */
-export declare const CORE_VERSION = "0.219.0";
+export declare const CORE_VERSION = "0.220.0";
 
 /** @public */
 declare const coreDefault: Record<string, unknown>;
@@ -9796,6 +9796,13 @@ export declare interface UseWordTablePrintOptions {
     onPopupBlocked?: () => void;
     /** 종이 맨 위에 찍을 한 줄(누구의·언제·무슨 표). 인쇄되는 것은 격자뿐이라
      *  이것이 없으면 뽑아 둔 종이에 아무 단서도 안 남는다. */
+    /**
+     * 쪽마다 종이 **맨 위**에 찍는 한 줄(누구의 · 언제 · 무슨 표).
+     *
+     * **띠(`brand`)를 쓰면 대개 이것은 안 준다** — 띠 위 오른쪽이 표 이름·기관·번호를
+     * 이미 싣는다. 둘 다 주면 번호가 종이에 **두 번** 찍힌다(말귀가 그 잔재를 걷었다,
+     * 2026-09-30). 띠를 안 쓰는 종이(채점지 등)에는 이 줄이 유일한 식별자다.
+     */
     header?: string;
 }
 

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

@@ -11,6 +11,13 @@ export interface UseWordTablePrintOptions {
     onPopupBlocked?: () => void;
     /** 종이 맨 위에 찍을 한 줄(누구의·언제·무슨 표). 인쇄되는 것은 격자뿐이라
      *  이것이 없으면 뽑아 둔 종이에 아무 단서도 안 남는다. */
+    /**
+     * 쪽마다 종이 **맨 위**에 찍는 한 줄(누구의 · 언제 · 무슨 표).
+     *
+     * **띠(`brand`)를 쓰면 대개 이것은 안 준다** — 띠 위 오른쪽이 표 이름·기관·번호를
+     * 이미 싣는다. 둘 다 주면 번호가 종이에 **두 번** 찍힌다(말귀가 그 잔재를 걷었다,
+     * 2026-09-30). 띠를 안 쓰는 종이(채점지 등)에는 이 줄이 유일한 식별자다.
+     */
     header?: string;
 }
 /** @public */

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

@@ -105,13 +105,6 @@ export function captureHtml(els, paperW, paperH, autoPrint = false, fileName = '
            아무도 opacity 를 되돌리지 않아 **빈칸으로 인쇄**되고, 새 창·내려받은 HTML 에서는 스피너가 영영 돈다(말귀 내 단어표
            '인쇄' 는 열자마자 100ms 뒤 인쇄해 처음 보는 표는 거의 늘 이랬다). */
         clone.querySelectorAll('.word-table-cell__spinner').forEach(s => s.remove());
-        /* **머리·바닥 띠의 배율 되돌림을 걷는다.**
-           화면의 표는 미리보기 상자에 맞춰 줄어 있고, 띠가 그만큼 줄지 않도록 격자에
-           `--wt-unscale`(1/배율)이 **인라인으로** 박혀 있다. 이 문서는 그 격자를 인라인 스타일째
-           복사해 오는데 여기서는 종이가 제 크기다 — 그대로 두면 미리보기가 좁았을수록 로고와
-           글씨가 그 배수만큼 커진다(0.5 로 보고 있었으면 두 배). CSS 로 덮으려면 인라인을
-           이겨야 해 `!important` 가 필요하니, 아예 지운다. */
-        clone.style.removeProperty('--wt-unscale');
         /* 불러오는 중이던 그림은 opacity 를 **그대로 두고** 받아지면 보이고 실패하면 숨게 한다 — 지우기만 하면 없는 그림(404, 화면에서는
            onError 로 칸이 사라짐)이 인쇄 문서에서 깨진 그림 아이콘과 alt 글자로 찍혔다. autoPrint 는 그림 로드를 기다린 뒤 인쇄한다. */
         clone.querySelectorAll('img').forEach(i => {
@@ -206,6 +199,43 @@ export function captureHtml(els, paperW, paperH, autoPrint = false, fileName = '
     scale();
     window.addEventListener('resize', scale);
 
+    /* **칸 글씨를 이 종이 칸에 맞춰 다시 센다.**
+       화면의 칸은 'ResizeObserver' 로 재서 'transform: scale(n)' 을 칸 안쪽에 직접 써
+       둔다. 그 값이 클론을 타고 여기까지 따라오는데, 여기 칸은 화면 칸이 아니다 —
+       종이(paper-wrap)는 제 치수를 갖고, 인쇄가 걸리면 다시 100% x 100vh 로 바뀐다.
+       사람이 인쇄 대화상자에서 A4 아닌 종이를 고르면 그 100vh 가 또 달라진다. 굳은
+       배율을 그대로 쓰면 화면에서 칸을 꽉 채우던 글씨가 종이에서 작아진다(Letter 가로
+       실측 -3.4%, 사용자 신고 2026-09-30).
+       그래서 칸마다 새겨 둔 기준값(data-ref-w/h)으로 **화면과 똑같은 셈**을 여기서 다시
+       한다 — 'Math.min(w/refW, h/refH)', 1 을 넘겨도 천장을 안 씌운다(2026-09-22 결정).
+       'clientWidth' 는 배치 좌표라 종이에 걸린 'transform: scale()' 에 안 흔들린다. */
+    function refit() {
+      var cells = document.querySelectorAll('.word-table-cell[data-ref-w]');
+      Array.prototype.forEach.call(cells, function (cell) {
+        var inner = cell.querySelector('.word-table-cell__inner');
+        if (!inner) return;
+        var rw = parseFloat(cell.getAttribute('data-ref-w'));
+        var rh = parseFloat(cell.getAttribute('data-ref-h'));
+        if (!(rw > 0) || !(rh > 0)) return;
+        var cs = getComputedStyle(cell);
+        var w = cell.clientWidth  - parseFloat(cs.paddingLeft || 0) - parseFloat(cs.paddingRight  || 0);
+        var h = cell.clientHeight - parseFloat(cs.paddingTop  || 0) - parseFloat(cs.paddingBottom || 0);
+        /* 아직 자리를 못 잡은 칸(0)은 건드리지 않는다 — 화면이 준 배율이 0 보다는 낫다 */
+        if (!(w > 0) || !(h > 0)) return;
+        inner.style.transform = 'scale(' + Math.min(w / rw, h / rh) + ')';
+      });
+    }
+    refit();
+    window.addEventListener('resize', refit);
+    /* 인쇄 배치로 바뀌는 순간을 브라우저마다 다른 신호로 알린다 — 크롬은 beforeprint,
+       파이어폭스는 print 매체 질의가 먼저 켜진다. 둘 다 걸어 두고 두 번 세도 값이 같다. */
+    window.addEventListener('beforeprint', refit);
+    try {
+      var mq = window.matchMedia('print');
+      if (mq.addEventListener) mq.addEventListener('change', refit);
+      else if (mq.addListener) mq.addListener(refit);
+    } catch (e) { /* matchMedia 가 없는 환경 — 위 둘로 충분하다 */ }
+
     function resetWrap(w) {
       var pp = w.querySelector('[data-play-state="play"]');
       var pa = w.querySelector('[data-play-state="pause"]');
@@ -253,6 +283,8 @@ export function captureHtml(els, paperW, paperH, autoPrint = false, fileName = '
         if (printed) return;
         printed = true;
         requestAnimationFrame(function () {
+          /* 그림·글꼴이 다 온 뒤 한 번 더 — 그림이 늦게 오면 칸 높이가 달라진다 */
+          refit();
           requestAnimationFrame(function () { window.print(); });
         });
       }

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

@@ -72,6 +72,11 @@
    선언도 따라간다. 여기서는 기본값을 **선언하지 않고** `var(…, 기본)` 의 뒷값으로만
    둔다: 선언해 버리면 이 마디가 `:root` 보다 가까워 부르는 쪽 값이 진다.
 
+   **값은 종이 좌표다 — 띠도 표와 함께 줄어든다.** 한때 띠만 배율을 되돌려(`--wt-unscale`)
+   화면에서 크기를 고정했는데, 그러면 미리보기 폭마다 **표와 띠의 견줌이 달라져** 화면이
+   종이를 못 닮았다(실측 2026-09-30: 미리보기 60%에서 낱말÷띠가 0.64 → 0.33). 종이에서는
+   띠도 같은 비율로 찍히므로, 미리보기가 할 일은 그 비율을 그대로 보여 주는 것이다.
+
    | 변수 | 기본 |
    |---|---|
    | `--wt-band-top-height` · `--wt-band-top-size` · `--wt-band-top-align` | 28px · 11px · center |
@@ -82,10 +87,10 @@
    키웠을 때 띠가 표를 파고들고(위 −4px · 아래 −6px), 테두리가 칸 없는 빈 자리에 그려졌다.
    한 값에서 나오게 두면 그 둘이 다시 안 어긋난다. */
 .word-table-block__content--brand-top {
-    padding-top: calc((var(--wt-band-top-height, 28px) + 4px) * var(--wt-unscale, 1));
+    padding-top: calc(var(--wt-band-top-height, 28px) + 4px);
 }
 .word-table-block__content--brand-bottom {
-    padding-bottom: calc((var(--wt-band-bottom-height, 22px) + 4px) * var(--wt-unscale, 1));
+    padding-bottom: calc(var(--wt-band-bottom-height, 22px) + 4px);
 }
 /* 절취선 바탕·외곽선은 칸이 있는 데까지만 — 띠까지 두르면 로고가 표 안에 든 것처럼 보인다 */
 .word-table-block__content--brand-top.word-table-block__content--cut-show,
@@ -94,10 +99,10 @@
 }
 /* 위 여백과 **같은 셈**이다 — 따로 적지 않는다(그래서 어긋날 수가 없다) */
 .word-table-block__content--brand-top.word-table-block__content--outline::after {
-    top: calc((var(--wt-band-top-height, 28px) + 4px) * var(--wt-unscale, 1));
+    top: calc(var(--wt-band-top-height, 28px) + 4px);
 }
 .word-table-block__content--brand-bottom.word-table-block__content--outline::after {
-    bottom: calc((var(--wt-band-bottom-height, 22px) + 4px) * var(--wt-unscale, 1));
+    bottom: calc(var(--wt-band-bottom-height, 22px) + 4px);
 }
 
 .word-table__band {
@@ -106,7 +111,7 @@
     right: 0;
     display: flex;
     justify-content: space-between;
-    gap: calc(12px * var(--wt-unscale, 1));
+    gap: 12px;
     z-index: 2;
     pointer-events: none;
     color: var(--color-gray);
@@ -118,8 +123,8 @@
    배율 되돌림은 그대로 받는다. */
 .word-table__band--top {
     top: 0;
-    height: calc(var(--wt-band-top-height, 28px) * var(--wt-unscale, 1));
-    font-size: calc(var(--wt-band-top-size, 13px) * var(--wt-unscale, 1));
+    height: var(--wt-band-top-height, 28px);
+    font-size: var(--wt-band-top-size, 13px);
     line-height: 1.35;
     align-items: var(--wt-band-top-align, center);
 }
@@ -127,14 +132,14 @@
     /* 로고까지 이 색을 받는다 — 마스크를 `currentColor` 로 칠하므로 글씨와 늘 같은 색이다 */
     color: var(--color-gray);
     bottom: 0;
-    height: calc(var(--wt-band-bottom-height, 22px) * var(--wt-unscale, 1));
-    font-size: calc(var(--wt-band-bottom-size, 11px) * var(--wt-unscale, 1));
+    height: var(--wt-band-bottom-height, 22px);
+    font-size: var(--wt-band-bottom-size, 11px);
     line-height: 1.35;
     align-items: var(--wt-band-bottom-align, center);
 }
 
 .word-table__brand-logo {
-    height: calc(var(--wt-brand-logo-height, 28px) * var(--wt-unscale, 1));
+    height: var(--wt-brand-logo-height, 28px);
     width: auto;
     display: block;
     flex-shrink: 0;
@@ -153,7 +158,7 @@
    (마스크가 `contain` 이라 좁은 쪽에 맞는다). 말귀 로고(`<img>`)와 같은 규약이 된다. */
 .word-table__brand-logo--ihab {
     display: block;
-    height: calc(var(--wt-brand-ihab-height, 17px) * var(--wt-unscale, 1));
+    height: var(--wt-brand-ihab-height, 17px);
     width: auto;
     aspect-ratio: 264 / 100;
     flex-shrink: 0;
@@ -188,7 +193,7 @@
 .word-table__brand-by {
     display: flex;
     align-items: center;
-    gap: calc(var(--wt-brand-gap, 8px) * var(--wt-unscale, 1));
+    gap: var(--wt-brand-gap, 8px);
     min-width: 0;
 }
 .word-table__copyright {
@@ -201,7 +206,7 @@
 .word-table__band-end {
     display: flex;
     align-items: center;
-    gap: calc(12px * var(--wt-unscale, 1));
+    gap: 12px;
     min-width: 0;
 }
 
@@ -209,7 +214,7 @@
 .word-table__ident {
     display: flex;
     align-items: center;
-    gap: calc(6px * var(--wt-unscale, 1));
+    gap: 6px;
     min-width: 0;
 }
 /* 이름이 길면 이름만 줄어든다 — 번호는 잘리면 확인 글자가 사라져 뜻이 없다 */
@@ -636,13 +641,6 @@
         transform: none !important;
     }
 
-    /* 표가 제 크기로 돌아오니 띠의 배율 되돌림도 끈다 — 안 끄면 화면에서 좁게 보던 만큼
-       로고와 글씨가 커져 찍힌다. 인라인으로 박힌 값이라 `!important` 라야 이긴다
-       (위 `transform` 과 같은 까닭). */
-    .word-table-block__content {
-        --wt-unscale: 1 !important;
-    }
-
     .word-table-block__card-close,
     .word-table-block__card-actions,
     .word-table-block__card-handle { display: none; }

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

@@ -160,7 +160,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' : ''), 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', '재생'), 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', '멈춤'), 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', 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', '재생'), 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', '멈춤'), 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이 포커스를 받으면
@@ -375,7 +375,6 @@ export default function WordTable({ title, titleIcon, disc, className, orientati
     /* 띠를 쓰기로 한 종이인가 — 한쪽을 꺼도 이 종이는 '띠를 쓰는 꼴'이다.
        쪽 번호가 어디에 서는지를 이 값이 가른다(아래를 보라). */
     const 브랜드쓰나 = Boolean(brand?.show);
-    const 띠쓰나 = 브랜드쓰나 && (brand?.top !== false || brand?.bottom !== false);
     const 위띠쓰나 = Boolean(brand?.show) && brand?.top !== false;
     const 아래띠쓰나 = Boolean(brand?.show) && brand?.bottom !== false;
     const 저작권 = brand?.copyright ?? '© IHAB, Inc. All rights reserved.';
@@ -400,12 +399,6 @@ export default function WordTable({ title, titleIcon, disc, className, orientati
                 className: cx('word-table', !wrapped && className), style: { width, height, transform: `scale(${scale})`, transformOrigin: 'top left', marginLeft: offset }, children: _jsxs("div", { ref: 내용ref, className: contentClass, style: {
                         gridTemplateColumns: `repeat(${cols}, 1fr)`,
                         gridTemplateRows: `repeat(${rows}, 1fr)`,
-                        /* **띠는 표와 함께 줄지 않는다**(사용자 지시 2026-09-30). 종이는 미리보기 상자에
-                           맞춰 통째로 줄어드는데(`scale`), 그러면 로고와 글씨가 상자 폭마다 달라 보인다.
-                           띠 안의 치수를 배율로 나눠 두면 줄어든 만큼 되돌아와 **화면 크기가 한결같다.**
-                           자리를 비우는 여백도 같이 나눠야 띠가 칸을 안 침범한다.
-                           배율이 1인 종이(인쇄)에서는 1 이라 아무것도 안 달라진다. */
-                        ...(띠쓰나 ? { ['--wt-unscale']: String(1 / (scale || 1)) } : {}),
                     }, children: [isEdit ? (_jsx(_Fragment, { children: (editCells ?? []).map((cell, i) => (_jsx("div", { className: cx('word-table-block__edit-cell', cell ? 'word-table-block__edit-cell--filled' : 'word-table-block__edit-cell--empty', activeCell === i ? 'word-table-block__edit-cell--active' : ''), style: dotDashStyle(i, cols, rows, cutLine), children: cell ? (_jsxs(_Fragment, { children: [cell.map((e, wi) => (_jsxs(Fragment, { children: [wi > 0 && _jsx("div", { className: "word-table-block__pair-divider" }), _jsx(WordCell, { label: e.word, subLabel: e.pronunciation, 
                                                     // 편집 칸도 구어체 발음을 넘긴다 — 빠져 있어 '구어체 발음'을 켜도 편집 모드에서만 비었다.
                                                     colloquialLabel: e.colloquialPronunciation, homonum: e.homonum, showWord: show.word, showImage: show.image, showPronunciation: show.pron, showColloquial: show.colloq, buttonSize: buttonSize })] }, wi))), scoring && renderScore(i, cell.map(e => e.word).join(' / ')), onRemoveCell && (_jsx("div", { className: "word-table-block__card-close", children: _jsx(Button, { htmlType: "button", size: buttonSize, type: "dot", icon: "x", variant: "transparent-lightGray", useBorder: false, showTooltipInfo: cell.length > 1 ? t('wordPrint.removePair', '대립쌍 빼기') : t('wordPrint.removeWord', '단어 빼기'), ariaLabel: cell.length > 1 ? t('wordPrint.removePair', '대립쌍 빼기') : t('wordPrint.removeWord', '단어 빼기'), onClick: () => onRemoveCell(i) }) }))] })) : (onActivateCell && (_jsx("div", { style: counterScale, children: _jsx(Button, { htmlType: "button", size: "48", type: "bar", icon: "plus", label: t('wordTable.addWord', '추가하기'), onClick: () => onActivateCell(i) }) }))) }, i))) })) : (_jsxs(_Fragment, { children: [(items ?? []).map((item, index) => (_jsxs("div", { "data-wordtable-cell": onReorder ? index : undefined, className: `word-table-block__card${onReorder ? ' word-table-block__card--draggable' : ''}${dragOver === index ? ' word-table-block__card--drag-over' : ''}${끌기 === index ? ' word-table-block__card--dragging' : ''}`, style: dotDashStyle(index, cols, rows, cutLine), draggable: !!onReorder, onPointerDown: onReorder ? (e) => 길게눌러끌기(e, index) : undefined, onKeyDown: onReorder ? (e) => 키로옮기기(e, index) : undefined, onDragStart: onReorder ? () => { dragIndex.current = index; } : undefined, onDragOver: onReorder ? (e) => { e.preventDefault(); setDragOver(index); } : undefined, onDragLeave: onReorder ? () => setDragOver(null) : undefined, onDrop: onReorder ? (e) => { e.preventDefault(); if (dragIndex.current !== null && dragIndex.current !== index) {

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

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

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

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