@ihabdevteam/core 0.322.0 → 0.324.0

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

@@ -96,21 +96,21 @@ function SortArrow({ dir }) {
  * 그대로 산다. 칸에는 `role`·`tabIndex` 를 주지 않으므로 탭 정지점은 단추 하나뿐이다.
  */
 function TableField({ children, onClick, className, sortDir, ariaSort, onResizeStart }) {
-    const 속 = _jsxs(_Fragment, { children: [children, sortDir && _jsx(SortArrow, { dir: sortDir })] });
+    const inner = _jsxs(_Fragment, { children: [children, sortDir && _jsx(SortArrow, { dir: sortDir })] });
     return (_jsxs("div", { onClick: onClick, role: "columnheader", "aria-sort": ariaSort, className: cx('table-field body-3', className, sortDir ? 'table-field--sorted' : '', onResizeStart ? 'table-field--resizable' : ''), children: [onClick
                 /* 단추 안에 **또 다른 조작**을 넣지 않는다 — `label` 에 `role="button"` 인 조각이나
                    Checkbox 를 넣어 두면 그것이 이 단추 안으로 들어와 겹친 조작이 된다(HTML 위반).
                    그런 머리는 `onClick` 없이 두고, 정렬은 그 조각이 알아서 맡는다. */
-                ? _jsx("button", { type: "button", className: "table-field__button", children: 속 })
-                : 속, onResizeStart && (_jsx("span", { className: "table-field__resizer", onPointerDown: onResizeStart, onClick: e => e.stopPropagation(), "aria-hidden": "true" }))] }));
+                ? _jsx("button", { type: "button", className: "table-field__button", children: inner })
+                : inner, onResizeStart && (_jsx("span", { className: "table-field__resizer", onPointerDown: onResizeStart, onClick: e => e.stopPropagation(), "aria-hidden": "true" }))] }));
 }
 /** @public */
 export default function Table({ fields = [], headerGroups, items = [], renderRow, onRowClick, isRowClickable, onRowMouseEnter, onRowMouseLeave, onRowDragStart, onRowDragEnd, draggingId, gridTemplateColumns, mobileGridTemplateColumns, resizable = false, resizeMode = 'grow', resizeStorageKey, size = 'small', title, icon, count, collapsed = false, onToggleCollapse, headerActions, empty, loading, dragOver = false, onDragOver, onDragLeave, onDrop, renderExpandedRow, expandedId, }) {
     const { t } = useTranslation();
     const uid = useId();
-    const 제목id = `table-title-${uid}`;
+    const titleId = `table-title-${uid}`;
     /** 줄을 눌러 들어가는 표에서만 쓰는 설명 id — `role="button"` 을 잃은 자리를 메운다 */
-    const 줄설명id = `table-row-hint-${uid}`;
+    const rowHintId = `table-row-hint-${uid}`;
     /**
      * **좁은 화면에서는 폭 조절을 통째로 끈다** — 손잡이·초기화 단추·저장값.
      *
@@ -132,9 +132,9 @@ export default function Table({ fields = [], headerGroups, items = [], renderRow
      * 옆으로 미는 쪽을 골랐다. 그러니 담을 수 없을 만큼 좁을 때 칸을 눌러 담으려 드는 코드를
      * 다시 넣지 말 것 — 그게 위에 적은 48px 사건이었다.
      */
-    const 좁은화면 = useMediaQuery('(max-width: 767px)');
-    const 좁은틀 = mobileGridTemplateColumns && 좁은화면 ? mobileGridTemplateColumns : null;
-    const 폭조절 = resizable && !좁은화면;
+    const isNarrow = useMediaQuery('(max-width: 767px)');
+    const narrowTemplate = mobileGridTemplateColumns && isNarrow ? mobileGridTemplateColumns : null;
+    const canResize = resizable && !isNarrow;
     // ── 컬럼 폭 드래그 리사이즈 (resizable) ──
     /** 만든 사람이 밑값을 안 적은 칸에 쓰는 바닥 — 이보다 좁으면 손잡이를 다시 잡을 수도 없다 */
     const MIN_COL_W = 48;
@@ -148,7 +148,7 @@ export default function Table({ fields = [], headerGroups, items = [], renderRow
      *
      * 자동맞춤은 이 값보다 위에서 정의되므로 ref 로 건넨다(isFixedPxRef 와 같은 이유).
      */
-    const 밑값Ref = useRef(() => MIN_COL_W);
+    const minWidthRef = useRef(() => MIN_COL_W);
     const storeKey = resizeStorageKey ? `table-cols:${resizeStorageKey}` : null;
     const fieldsRef = useRef(null);
     /* **가로로 넘치나** — 창 크기·칸 폭·내용에 따라 바뀌므로 지켜본다(말귀 요청 ㊿).
@@ -162,14 +162,23 @@ export default function Table({ fields = [], headerGroups, items = [], renderRow
        958/333 인데 셋 다 안 붙은 채 굳었다) 다시 내지는 못했다 — **재현은 못 했지만 구멍은
        실재한다.** 그래서 `ref` 를 **함수로** 받는다: 마디가 바뀔 때마다 React 가 불러 주므로
        보개가 늘 지금 마디를 본다. */
-    const 굴림보개 = useRef(null);
-    const 굴림통 = useRef(null);
-    const 굴림안 = useRef(null);
-    const [넘치나, set넘치나] = useState(false);
-    const 넘침재기 = useCallback(() => {
-        const el = 굴림통.current;
-        if (el)
-            set넘치나(el.scrollWidth > el.clientWidth + 1); // 1px 은 반올림 몫
+    const resizeObserverRef = useRef(null);
+    const scrollOuterRef = useRef(null);
+    const scrollInnerRef = useRef(null);
+    const [overflowing, setOverflowing] = useState(false);
+    /* 자동맞춤이 통 폭을 따라가려면 신호가 필요하다 — 아래에서 적는다 */
+    const [boxWidth, setBoxWidth] = useState(0);
+    const measureOverflow = useCallback(() => {
+        const el = scrollOuterRef.current;
+        if (!el)
+            return;
+        setOverflowing(el.scrollWidth > el.clientWidth + 1); // 1px 은 반올림 몫
+        /* **통 폭도 여기서 적어 둔다.** 자동맞춤은 통이 넓어지면 따라가야 하는데, 통을 보는
+           보개(`ResizeObserver`)가 이미 이 함수를 부른다 — 보개를 하나 더 세우거나 `observe`
+           의 꼴을 건드리면 바로 위 머리말의 그 경합(0.237.0)을 다시 들인다. **같은 자리에
+           얹는다.** 이 함수는 그려질 때마다 불리지만 같은 수면 React 가 다시 안 그리므로
+           도는 일은 없다. */
+        setBoxWidth(el.clientWidth);
     }, []);
     /* **보개의 목숨을 `ref` 콜백 하나가 쥔다 — effect 와 나눠 갖지 않는다.**
   
@@ -182,34 +191,34 @@ export default function Table({ fields = [], headerGroups, items = [], renderRow
   
        그래서 세우는 것도 거두는 것도 `ref` 콜백이 한다. 마디가 다 떨어졌을 때 거둔다 —
        React 는 떼어낼 때 `ref` 를 `null` 로 불러 주므로 그것이 곧 뒷정리다. */
-    const 지켜보기 = useCallback((칸, el) => {
-        const 옛 = 칸.current;
-        if (옛 && 굴림보개.current)
-            굴림보개.current.unobserve(옛);
-        칸.current = el;
+    const observe = useCallback((slot, el) => {
+        const prev = slot.current;
+        if (prev && resizeObserverRef.current)
+            resizeObserverRef.current.unobserve(prev);
+        slot.current = el;
         if (el) {
             /* 없는 환경(구형 브라우저·SSR·시험 러너)에서는 생성자 호출이 그대로 던져 렌더가
                깨진다 — 보개 없이 아래 `넘침재기()` 로 한 번 잰 값만 둔다.
                **살아 있나를 여기서 본다** — 거둬진 뒤에도 다시 세운다. */
-            if (!굴림보개.current && typeof ResizeObserver !== 'undefined') {
-                굴림보개.current = new ResizeObserver(() => 넘침재기());
+            if (!resizeObserverRef.current && typeof ResizeObserver !== 'undefined') {
+                resizeObserverRef.current = new ResizeObserver(() => measureOverflow());
             }
-            굴림보개.current?.observe(el);
+            resizeObserverRef.current?.observe(el);
         }
-        else if (!굴림통.current && !굴림안.current) {
-            굴림보개.current?.disconnect();
-            굴림보개.current = null;
+        else if (!scrollOuterRef.current && !scrollInnerRef.current) {
+            resizeObserverRef.current?.disconnect();
+            resizeObserverRef.current = null;
         }
-        넘침재기();
-    }, [넘침재기]);
-    const 통달기 = useCallback((el) => 지켜보기(굴림통, el), [지켜보기]);
+        measureOverflow();
+    }, [measureOverflow]);
+    const attachOuter = useCallback((el) => observe(scrollOuterRef, el), [observe]);
     /* **통만 보면 안엣것이 넓어질 때를 놓친다** — 칸 폭을 끌어 넓히거나 줄이 늘 때다.
        그때 통의 바깥 상자는 그대로이고 `scrollWidth` 만 바뀐다. */
-    const 안달기 = useCallback((el) => 지켜보기(굴림안, el), [지켜보기]);
+    const attachInner = useCallback((el) => observe(scrollInnerRef, el), [observe]);
     /* **안전줄 — 그려질 때마다 한 번 더 잰다.**
        보개가 어떤 까닭으로든 못 울린 자리를 덮는다. 같은 값이면 React 가 다시 안 그리므로
        도는 일은 없고, 읽는 것은 마디 하나의 `scrollWidth`·`clientWidth` 둘뿐이다. */
-    useEffect(() => { 넘침재기(); });
+    useEffect(() => { measureOverflow(); });
     /* **창 크기는 따로 듣는다 — 상자 보개에만 기대지 않는다.**
   
        넘치나는 `scrollWidth > clientWidth` 인데, `ResizeObserver` 는 **상자가 바뀔 때**만
@@ -224,8 +233,8 @@ export default function Table({ fields = [], headerGroups, items = [], renderRow
     useEffect(() => {
         if (typeof window === 'undefined')
             return;
-        const 다음틀 = typeof requestAnimationFrame === 'function'
-            ? requestAnimationFrame(() => 넘침재기())
+        const nextFrame = typeof requestAnimationFrame === 'function'
+            ? requestAnimationFrame(() => measureOverflow())
             : null;
         /* **안-모음: 모을 값이 없다**(2026-10-10 조사에서 한 번 모아 봤다가 되돌림). `넘침재기` 는
            `scrollWidth > clientWidth` 하나를 **불리언**으로 넣는데, 같은 값이면 React 가 그 자리에서
@@ -234,20 +243,20 @@ export default function Table({ fields = [], headerGroups, items = [], renderRow
            (처음엔 *"못이 이 배선을 글자로 박아 두었다"* 도 까닭으로 적었는데, 그 못을 **꼴을 재는 쪽으로
            고쳤으니** 이제 그 까닭은 없다 — 지운다. 남는 까닭은 위의 하나뿐이고, 그것만으로 충분하다.
            **까닭이 틀린 주석은 다음 사람에게 잘못된 값을 준다.**) */
-        window.addEventListener('resize', 넘침재기);
+        window.addEventListener('resize', measureOverflow);
         return () => {
-            if (다음틀 != null)
-                cancelAnimationFrame(다음틀);
-            window.removeEventListener('resize', 넘침재기);
+            if (nextFrame != null)
+                cancelAnimationFrame(nextFrame);
+            window.removeEventListener('resize', measureOverflow);
         };
-    }, [넘침재기]);
+    }, [measureOverflow]);
     const isFixedPxRef = useRef(() => false);
     const defaultColsRef = useRef([]);
     // fit 모드에서는 이웃(next)에서 같은 만큼 덜어 오므로 그 컬럼의 시작 폭도 들고 있어야 한다
     const dragRef = useRef(null);
     /* 저장한 폭 읽기 — 숫자이기만 하면 받던 것을 **유한하고 최소 폭 이상인 수**만 받는다(0·음수·NaN 이 들어오면 격자 틀이
        무효가 됐다). */
-    const 저장폭읽기 = (key) => {
+    const readStoredWidths = (key) => {
         if (!key || typeof window === 'undefined')
             return null;
         try {
@@ -258,13 +267,29 @@ export default function Table({ fields = [], headerGroups, items = [], renderRow
             return null;
         }
     };
-    const [colWidths, setColWidths] = useState(() => 저장폭읽기(storeKey));
+    const [colWidths, setColWidths] = useState(() => readStoredWidths(storeKey));
     /* 마운트된 채 resizeStorageKey 가 바뀌면 **새 열쇠의 폭**을 읽는다 — 마운트 때 한 번만 읽어, 열 수가 같으면 앞 열쇠의 폭이
        다른 열에 그대로 씌워졌다. 렌더 중에 맞춘다(바뀐 그 렌더에서 옛 폭이 한 번이라도 그려지지 않게). */
-    const [읽은열쇠, set읽은열쇠] = useState(storeKey);
-    if (읽은열쇠 !== storeKey) {
-        set읽은열쇠(storeKey);
-        setColWidths(저장폭읽기(storeKey));
+    const [loadedKey, setLoadedKey] = useState(storeKey);
+    /**
+     * **자동 ↔ 손, 두 모드다. 저장소에 값이 있으면 손이다.**
+     *
+     * 손으로 조절한 적이 없는 표는 늘 자동맞춤으로 서고, 조절하면 그 값을 쓰고, '칸 너비
+     * 초기화' 를 누르면 다시 자동으로 돌아간다(사장님 지시 2026-10-13).
+     *
+     * 전에는 초기화가 **재서 그 숫자를 저장**했다. 그러면 손으로 끈 것과 구별이 없어지고,
+     * 무엇보다 **그때 화면에 있던 줄로 잰 '한 순간의 사진'** 으로 굳었다 — 그 뒤 창을
+     * 넓히거나 긴 글자가 든 줄이 들어와도 안 따라왔다. 그것이 "상시로 활용" 이 아니었다.
+     *
+     * 새 칸을 두지 않고 **저장소의 없음 = 자동** 으로 갈래를 둘로 줄인다. 그래서 이미 끌어 둔
+     * 사람의 폭은 판이 올라도 그대로 손 모드로 읽힌다 — **옛 값을 밀지 않는다.**
+     */
+    const [manual, setManual] = useState(() => readStoredWidths(storeKey) !== null);
+    if (loadedKey !== storeKey) {
+        setLoadedKey(storeKey);
+        const stored = readStoredWidths(storeKey);
+        setColWidths(stored);
+        setManual(stored !== null);
     }
     // 최신 colWidths를 참조로 유지 (드래그 종료 시 저장용)
     const colWidthsRef = useRef(colWidths);
@@ -284,12 +309,12 @@ export default function Table({ fields = [], headerGroups, items = [], renderRow
                 // fit — 이동량을 두 컬럼이 나눠 갖는다. 둘 다 최소폭 밑으로 내려가지 않도록
                 // 이동량 자체를 먼저 자른다(한쪽만 자르면 합이 달라져 표 폭이 흔들린다).
                 const raw = e.clientX - d.startX;
-                const delta = Math.max(밑값Ref.current(d.index) - d.startW, Math.min(d.startWNext - 밑값Ref.current(d.next), raw));
+                const delta = Math.max(minWidthRef.current(d.index) - d.startW, Math.min(d.startWNext - minWidthRef.current(d.next), raw));
                 copy[d.index] = d.startW + delta;
                 copy[d.next] = d.startWNext - delta;
             }
             else {
-                copy[d.index] = Math.max(밑값Ref.current(d.index), d.startW + (e.clientX - d.startX));
+                copy[d.index] = Math.max(minWidthRef.current(d.index), d.startW + (e.clientX - d.startX));
             }
             colWidthsRef.current = copy;
             setColWidths(copy);
@@ -331,6 +356,9 @@ export default function Table({ fields = [], headerGroups, items = [], renderRow
             : { index, startX: e.clientX, startW: measured[index] };
         colWidthsRef.current = measured;
         setColWidths(measured);
+        /* **끌기 시작한 그 순간부터 손이다.** 끝날 때 저장하는 것으로 미루면, 끄는 동안
+           자동 효과가 살아 있어 끌던 폭을 덮는다(지문의 통 폭이 바뀌면 바로 그렇다). */
+        setManual(true);
         /* **안-모음: 곧바로 써야 한다** — `onResizeMove` 가 `colWidthsRef` 를 그 자리에서 맞춘다.
            한 틀 미루면 마지막 이동 직후 손을 떼었을 때 **화면은 새 폭인데 저장소에는 한 박자 전 폭**이
            남는다(그 함수 머리말에 적힌 까닭). 자리 재기와 달리 이것은 *값을 쓰는* 일이다. */
@@ -342,7 +370,10 @@ export default function Table({ fields = [], headerGroups, items = [], renderRow
         document.body.style.userSelect = 'none';
     }, [onResizeMove, onResizeEnd, resizeMode, fields]);
     /**
-     * **칸 너비를 내용에 맞춰 다시 잡는다.**
+     * **칸 너비를 내용에 맞춰 잰다 — 재기만 한다.**
+     *
+     * 쓰는 것도 저장하는 것도 부르는 쪽이 한다(꼬리의 까닭을 볼 것). 전에는 이 함수가
+     * 재서 쓰고 **저장까지** 했고, 그것이 '칸 너비 초기화' 를 한 순간의 사진으로 굳혔다.
      *
      * 손으로 끌어 놓은 폭을 그냥 지우면(=기본 격자로 되돌리면) 만든 사람이 적어 둔
      * 틀로 갈 뿐, 지금 화면에 든 글자에는 안 맞는다. 그래서 **재서** 맞춘다 —
@@ -352,35 +383,35 @@ export default function Table({ fields = [], headerGroups, items = [], renderRow
      * 고정 px 로 못 박은 열(아이콘·숫자 칸)은 그대로 둔다 — 내용에 맞추면 정해 둔
      * 크기를 잃는다.
      */
-    const 자동맞춤 = useCallback(() => {
+    const measureAutoWidths = useCallback(() => {
         const el = fieldsRef.current;
         const wrap = el?.closest('.table-wrap');
         if (!el || !wrap)
-            return;
-        const 이전 = wrap.style.getPropertyValue('--table-grid-cols');
+            return null;
+        const before = wrap.style.getPropertyValue('--table-grid-cols');
         wrap.style.setProperty('--table-grid-cols', fields.map((_, i) => (isFixedPxRef.current(i) ? defaultColsRef.current[i] : 'max-content')).join(' '));
         /* 재는 동안만 max-content 다. `.table-fields` 와 각 줄은 서로 다른 격자라
            이때는 열이 어긋나 보이지만, 같은 함수 안에서 되돌리므로 화면에는 안 나온다. */
-        const 줄들 = Array.from(wrap.querySelectorAll('.table-row'))
+        const rows = Array.from(wrap.querySelectorAll('.table-row'))
             .filter(r => !r.classList.contains('table-row--loading') && !r.classList.contains('table-row--empty'));
-        const 잰것 = fields.map((_, i) => {
+        const measured = fields.map((_, i) => {
             let w = el.children[i]?.getBoundingClientRect().width ?? 0;
-            for (const 줄 of 줄들) {
-                const c = 줄.children[i];
+            for (const row of rows) {
+                const c = row.children[i];
                 if (c)
                     w = Math.max(w, c.getBoundingClientRect().width);
             }
             /* 고정 px 열은 정해 둔 값 그대로 — 최소 폭(MIN_COL_W)으로 올린 값을 고정 합에 넣으면 격자에는 원래 값(40px)으로 나가
                그만큼(8px) 표 오른쪽이 비었다(말귀 어드민 버그 탭·쿠폰) */
-            const 고정값 = isFixedPxRef.current(i) ? parseFloat(defaultColsRef.current[i]) : NaN;
-            return Number.isFinite(고정값) ? 고정값 : Math.max(밑값Ref.current(i), Math.ceil(w));
+            const fixedWidth = isFixedPxRef.current(i) ? parseFloat(defaultColsRef.current[i]) : NaN;
+            return Number.isFinite(fixedWidth) ? fixedWidth : Math.max(minWidthRef.current(i), Math.ceil(w));
         });
         /* 격자가 실제로 채우는 폭 — `clientWidth` 는 안쪽 여백을 포함하므로 뺀다
            (되돌리기 단추 자리로 40px 을 비워 두었다). */
         const cs = window.getComputedStyle(el);
-        const 그릇 = el.clientWidth - (parseFloat(cs.paddingLeft) || 0) - (parseFloat(cs.paddingRight) || 0);
-        if (이전)
-            wrap.style.setProperty('--table-grid-cols', 이전);
+        const containerWidth = el.clientWidth - (parseFloat(cs.paddingLeft) || 0) - (parseFloat(cs.paddingRight) || 0);
+        if (before)
+            wrap.style.setProperty('--table-grid-cols', before);
         else
             wrap.style.removeProperty('--table-grid-cols');
         /* **남는 자리를 비율대로 나눈다.** 잰 값을 그대로 쓰면 칸이 제 글자만큼만
@@ -391,33 +422,139 @@ export default function Table({ fields = [], headerGroups, items = [], renderRow
     
            `fit` 은 이 값이 fr 가중치가 되어 어차피 비율로 채우지만, 저장되는 숫자도
            같은 뜻이 되게 함께 맞춘다. */
-        let 최종 = 잰것;
-        const 고정 = 잰것.reduce((a, w, i) => a + (isFixedPxRef.current(i) ? w : 0), 0);
-        const 유동 = 잰것.reduce((a, w, i) => a + (isFixedPxRef.current(i) ? 0 : w), 0);
-        const 남은 = 그릇 - 고정;
-        if (그릇 > 0 && 유동 > 0 && 남은 > 0) {
-            const 비 = 남은 / 유동;
-            최종 = 잰것.map((w, i) => (isFixedPxRef.current(i) ? w : Math.max(밑값Ref.current(i), Math.round(w * 비))));
+        let finalWidths = measured;
+        const fixedTotal = measured.reduce((a, w, i) => a + (isFixedPxRef.current(i) ? w : 0), 0);
+        const fluidTotal = measured.reduce((a, w, i) => a + (isFixedPxRef.current(i) ? 0 : w), 0);
+        const available = containerWidth - fixedTotal;
+        if (containerWidth > 0 && fluidTotal > 0 && available > 0) {
+            const ratio = available / fluidTotal;
+            finalWidths = measured.map((w, i) => (isFixedPxRef.current(i) ? w : Math.max(minWidthRef.current(i), Math.round(w * ratio))));
             /* 반올림으로 남은 몇 px 은 가장 넓은 유동 열에 얹는다 — 안 그러면 늘 몇 px 이
                비거나 넘친다. 최소 폭에 걸린 열이 있으면 넘칠 수 있는데, 그건 담을 수
                없을 만큼 좁다는 뜻이라 가로 스크롤로 두는 편이 맞다. */
-            const 차 = Math.round(남은 - 최종.reduce((a, w, i) => a + (isFixedPxRef.current(i) ? 0 : w), 0));
-            if (차 !== 0) {
-                let 넓은 = -1;
-                최종.forEach((w, i) => { if (!isFixedPxRef.current(i) && (넓은 < 0 || w > 최종[넓은]))
-                    넓은 = i; });
-                if (넓은 >= 0)
-                    최종[넓은] = Math.max(밑값Ref.current(넓은), 최종[넓은] + 차);
+            const diff = Math.round(available - finalWidths.reduce((a, w, i) => a + (isFixedPxRef.current(i) ? 0 : w), 0));
+            if (diff !== 0) {
+                let widestIndex = -1;
+                finalWidths.forEach((w, i) => { if (!isFixedPxRef.current(i) && (widestIndex < 0 || w > finalWidths[widestIndex]))
+                    widestIndex = i; });
+                if (widestIndex >= 0)
+                    finalWidths[widestIndex] = Math.max(minWidthRef.current(widestIndex), finalWidths[widestIndex] + diff);
             }
         }
-        setColWidths(최종);
+        /* **쓰지도 저장하지도 않는다 — 잰 값을 돌려줄 뿐이다.** 자동 모드에서는 저장하면
+           안 된다(저장소에 값이 있으면 손 모드이므로, 저장하는 순간 자동으로 돌아갈 길이
+           사라진다). 쓰는 것은 부르는 쪽이 한다. */
+        return finalWidths;
+    }, [fields, resizeMode]);
+    /* 잰 값이 지금 것과 같은가 — 아래 효과가 **돌지 않게** 하는 못이다.
+       같으면 `setColWidths` 가 옛 배열을 그대로 돌려주어 React 가 다시 안 그린다. */
+    const sameWidths = (a, b) => a !== null && a.length === b.length && a.every((n, i) => n === b[i]);
+    /* 재는 함수를 참조로 쥔다 — `fields` 가 소비처에서 매 렌더 새 배열인 자리가 많아
+       그 identity 를 효과의 걸이에 넣으면 **그려질 때마다** 표 전체를 다시 잰다
+       (`max-content` 로 바꿔 모든 칸의 상자를 읽는 일이다. 싸지 않다). */
+    const measureRef = useRef(measureAutoWidths);
+    useEffect(() => { measureRef.current = measureAutoWidths; });
+    /**
+     * **자동 모드일 때 다시 잰다 — 줄이 들어온 뒤에, 그리고 바뀔 때마다.**
+     *
+     * 첫 렌더에는 받는 중이라 **잴 줄이 없다**(`measureAutoWidths` 는 `--loading`·`--empty` 줄을
+     * 일부러 뺀다). 그때 한 번 재고 끝내면 빈 표 기준으로 굳으므로, 줄이 들어온 뒤에 잰다.
+     *
+     * 줄이 없을 때는 `null` 로 두어 **만든 사람이 적은 격자**로 선다 — 머리만 재어 굳히는
+     * 것보다 낫다.
+     *
+     * 좁은 화면에서는 아무것도 안 한다. `canResize` 가 이미 `!isNarrow` 이고, 좁은 화면에서는
+     * 폭 조절을 통째로 끄는 것이 이 컴포넌트의 규칙이다(손잡이·초기화 단추·저장값). 자동으로
+     * 재면 모바일 격자와 싸운다.
+     */
+    /* **다시 재라는 신호.** 초기화 단추가 이것을 올린다 — 없으면 *이미 자동인* 표에서
+       단추가 아무 일도 안 한다(저장값을 지워도 모드가 안 바뀌어 아래 지문이 그대로다).
+       실제로 그랬다: 눌렀더니 잰 폭이 **지워지고 만든 사람의 틀로 돌아갔다**(`40px 1fr 1fr`).
+       손→자동으로 갈 때는 `manual` 이 바뀌어 지문이 달라지므로 그 길만 멀쩡했고, 더 흔한
+       자동→자동 길이 조용히 죽어 있었다. 시험 둘이 이것을 잡았다. */
+    const [refitNonce, setRefitNonce] = useState(0);
+    /* **저장 열쇠가 있는 표만 자동으로 선다.** 열쇠가 없으면 '손으로 조절했다' 를 기억할
+       자리가 없어 영영 자동이 되는데, 이 저장소에서 열쇠 없는 `resizable` 표는 전부
+       **치면서 걸러 보는 창**이다(`ListPopup` 을 거치는 일곱 자리 + 둘). 거기서는 글자를 칠
+       때마다 결과 줄이 갈리고, "줄이 바뀌면 다시 잰다" 가 **보는 사람 눈앞에서 칸을 움직인다**
+       — 폭을 기억하지 않는 것과 폭이 매 글자마다 바뀌는 것은 다른 일이고 뒤쪽이 더 거슬린다
+       (말귀가 그 창들을 열어 재어 짚었다, 2026-10-13).
+       그 창들이 적어 둔 칸 틀에는 까닭이 있다 — `minmax` 바닥은 좁은 창에서 유동 칸이 0px 로
+       눌려 글자가 포개지는 것을 막고, 백분율은 걸러도 비율이 안 흔들리게 한다. 자동맞춤은
+       유동 칸을 내용 크기로 바꾸므로 그 결을 매번 덮는다.
+       나중에 그 창들도 자동으로 서는 게 낫다면 **그 표에 저장 열쇠를 주면** 된다 — 그러면
+       처음엔 자동, 끌면 기억, 초기화하면 다시 자동으로 지시가 통째로 들어맞는다. */
+    /**
+     * **다시 재는 계기에 '줄 바뀜' 은 없다.** 줄이 *처음* 들어온 것만 계기다.
+     *
+     * 처음에는 "줄이 바뀔 때마다" 재게 두었다(말귀 청의 ①이 그렇게 적혀 있었다). **말귀가
+     * 제 앱을 재어 그 청을 스스로 물렸다**(2026-10-13): 저장열쇠가 있는 표 스물여덟 중
+     * **열아홉**이 찾는 칸이나 쪽 나누기를 갖고 있다. 거기서는 걸러도, 쪽을 넘겨도 줄이
+     * 갈리고 그때마다 칸이 다시 선다 — 예외가 아니라 **대다수**다.
+     *
+     * 쪽 넘기기가 더 눈에 띈다. 치는 것은 내가 하는 일이라 움직임이 내 탓으로 읽히지만, 쪽
+     * 넘기기는 "같은 표의 다음 장" 이라 **같은 표가 다른 모습**으로 보인다.
+     *
+     * 첫 줄 묶음으로 잰 폭이 뒤 쪽의 긴 글자에 안 맞을 수 있다. 그런데 그것은 **사람이 손으로
+     * 끌어 둔 표와 똑같은 흠**이다 — 끌어 둔 폭도 다음 쪽 글자에 안 맞는다. 안 맞으면 초기화를
+     * 누르면 되고 그 단추가 바로 그 자리에 있다. **들쭉날쭉한 맞음보다 가만한 안 맞음이 낫다.**
+     *
+     * ('늦추기' 는 안 쓴다 — 움직임을 늦출 뿐 없애지 못하고, 치다 멈춘 뒤 한 박자 있다 칸이
+     * 움직이면 내가 한 일과 끊겨 보여 더 뜻 모를 움직임이 된다.)
+     *
+     * 지문에 드는 것: 다시 재라는 신호 · 칸 수 · 통 폭 · **줄이 있나 없나**(수가 아니다).
+     */
+    const hasRows = items.length > 0;
+    /* **재야 하는 조건** — 이것이 같으면 한 번만 잰다. 줄이 있나 없나는 여기 **안 든다**:
+       들면 걸러서 0건이 되었다 돌아올 때 지문이 두 번 바뀌어 **다시 재고 칸이 튄다**(실측:
+       `200px 400px` → `120px 480px`). 저장 열쇠가 드는 까닭은 열쇠가 갈리면 다른 표의
+       조건이기 때문이다 — 안 넣으면 새 열쇠의 표가 옛 표의 잼을 물려받고 안 잰다. */
+    const refitBasis = `${storeKey ?? ''}|${refitNonce}|${fields.length}|${boxWidth}`;
+    /* 걸이에는 `hasRows` 도 든다 — 줄이 **처음** 들어온 그때 효과가 돌아야 하므로. 두 번째
+       부터는 아래 걸쇠가 막는다. */
+    const autoSignature = !manual && canResize && storeKey !== null && !loading
+        ? `${refitBasis}|${hasRows ? 1 : 0}`
+        : null;
+    const measuredForRef = useRef(null);
+    useEffect(() => {
+        if (autoSignature === null)
+            return;
+        /* 아직 잴 줄이 없다 — 먼저 선 격자를 **그대로 둔다.** `null` 로 되돌리지 않는다:
+           걸러서 0건이 되었을 때 만든 사람의 틀로 튀고, 줄이 돌아오면 또 튄다. */
+        if (!hasRows)
+            return;
+        /* **이 조건에서 이미 쟀다.** 줄만 갈린 것으로는 다시 재지 않는다(위 머리말). */
+        if (measuredForRef.current === refitBasis)
+            return;
+        const measured = measureRef.current();
+        if (!measured)
+            return;
+        measuredForRef.current = refitBasis;
+        setColWidths(prev => (sameWidths(prev, measured) ? prev : measured));
+    }, [autoSignature]);
+    /**
+     * **'칸 너비 초기화' — 자동 모드로 되돌아간다.**
+     *
+     * 저장값을 **지운다**. 재서 그 숫자를 저장하던 전 꼴은 손으로 끈 것과 구별이 없어졌고
+     * 한 순간의 사진으로 굳었다(위 `manual` 머리말).
+     */
+    const resetColumns = useCallback(() => {
         if (storeKey) {
             try {
-                window.localStorage.setItem(storeKey, JSON.stringify(최종));
+                window.localStorage.removeItem(storeKey);
             }
-            catch { /* 저장 실패 무시 */ }
+            catch { /* 지우기 실패 무시 */ }
         }
-    }, [fields, resizeMode, storeKey]);
+        setManual(false);
+        /* **지금 자리에서 곧 재어 쓴다.** 신호(아래)만 올리면 저장 열쇠가 없는 표에서는 아무
+           일도 안 일어난다 — 그 표에는 자동 모드가 없으므로 위 지문이 `null` 이고, 눌러도
+           만든 사람의 틀로 돌아가 끝난다. 열쇠가 있는 표에서는 아래 신호가 그 뒤로도 계속
+           맞춰 주고, 같은 수가 나오면 React 가 다시 안 그린다. */
+        const measured = measureRef.current();
+        setColWidths(measured);
+        colWidthsRef.current = measured;
+        setRefitNonce(n => n + 1);
+    }, [storeKey]);
     // 컬럼 리사이즈 드래그 도중(pointerup 발생 전) Table이 언마운트되면(예: 필터링/페이지 전환으로
     // 목록이 통째로 바뀜) startResize에서 window에 등록한 pointermove/pointerup 리스너가 정리되지
     // 않고 남아 언마운트된 컴포넌트의 setColWidths를 계속 호출하고, body 커서/userSelect도 고정된
@@ -463,9 +600,9 @@ export default function Table({ fields = [], headerGroups, items = [], renderRow
     /* `minmax(auto, 1fr)` 처럼 **안에 든** 것도 잡는다 — 최솟값이 내용 기반이면
        머리와 몸통에서 다르게 풀리는 것은 마찬가지다. 처음에 트랙의 **맨 앞**만 보다가
        심어서 그 구멍을 찾았다(2026-09-09). */
-    const 내용트랙 = defaultCols.filter((t) => /\b(auto|min-content|max-content)\b|fit-content\(/.test(t));
-    if (내용트랙.length > 0) {
-        devWarnOnce(`table-content-track:${gridTemplateColumns}`, `[ihabdevteam-core] Table 의 gridTemplateColumns 에 내용으로 크기가 정해지는 트랙(${내용트랙.join(', ')})이 있습니다. ` +
+    const contentTracks = defaultCols.filter((t) => /\b(auto|min-content|max-content)\b|fit-content\(/.test(t));
+    if (contentTracks.length > 0) {
+        devWarnOnce(`table-content-track:${gridTemplateColumns}`, `[ihabdevteam-core] Table 의 gridTemplateColumns 에 내용으로 크기가 정해지는 트랙(${contentTracks.join(', ')})이 있습니다. ` +
             '머리와 몸통은 서로 다른 격자라 그 트랙이 각자 다르게 풀려 열이 어긋납니다. px 이나 fr 을 쓰세요. ' +
             `(받은 값: ${gridTemplateColumns})`);
     }
@@ -473,41 +610,63 @@ export default function Table({ fields = [], headerGroups, items = [], renderRow
        둘에 붙으면 낭독기가 어느 쪽이 지금 정렬인지 못 고른다. 여럿이 오면 **첫 칸만** 방향을 갖고
        나머지는 누를 수 있는 칸의 기본값(none)으로 떨어뜨린 뒤 개발 모드에서 알린다.
        (실제 부르는 쪽 — `useTablePaging`·`ListPopup` — 은 이미 하나만 준다.) */
-    const 정렬칸 = fields.findIndex(f => !!f.sortDir);
+    const sortedColumn = fields.findIndex(f => !!f.sortDir);
     if (fields.filter(f => !!f.sortDir).length > 1) {
         devWarnOnce('table-multi-sort', '[ihabdevteam-core] Table 의 fields 에 sortDir 이 둘 이상 있습니다. ' +
             'aria-sort 는 표 하나에 한 칸만 가질 수 있어 첫 칸만 방향으로 알리고 나머지는 none 으로 둡니다.');
     }
     /** 머리 칸의 `aria-sort` — 정렬 중인 한 칸만 방향, 누를 수 있는 나머지는 none, 정렬과 무관한 칸에는 안 붙인다 */
     const ariaSortOf = (i) => {
-        if (i === 정렬칸)
+        if (i === sortedColumn)
             return fields[i].sortDir === 'asc' ? 'ascending' : 'descending';
         return fields[i].onClick ? 'none' : undefined;
     };
     const isFixedPx = (i) => /^\d+(\.\d+)?px$/.test(defaultCols[i] ?? '');
     /** 그 칸에 적힌 밑값 — `minmax(130px, …)` 의 130, 못 박은 `150px` 의 150, 없으면 MIN_COL_W */
-    const 선언밑값 = (i) => {
+    const declaredMinWidth = (i) => {
         const t = defaultCols[i] ?? '';
         const m = /^minmax\(\s*(\d+(?:\.\d+)?)px\s*,/.exec(t) ?? /^(\d+(?:\.\d+)?)px$/.exec(t);
         return m ? parseFloat(m[1]) : MIN_COL_W;
     };
     /* `자동맞춤` 은 이 셋보다 위에서 정의되므로(콜백이라 부를 때 읽힌다) ref 로 건넨다 */
     isFixedPxRef.current = isFixedPx;
-    밑값Ref.current = 선언밑값;
+    minWidthRef.current = declaredMinWidth;
     defaultColsRef.current = defaultCols;
     const widthUnit = (i) => (resizeMode === 'fit' && !isFixedPx(i)) ? 'fr' : 'px';
     /* 좁은 화면에서는 저장값을 아예 안 쓴다 — 위 `폭조절` 의 글을 보라(넓은 화면에서 끈 폭이 폰에 씌워진다) */
+    /**
+     * **줄이 0개일 때도 쥔 폭을 쓴다.** 한때 `(resizeMode === 'fit' || items.length > 0)` 이
+     * 붙어 있었다 — `grow` 에서 줄이 없으면 쥔 폭을 버리고 만든 사람의 틀로 되돌렸다.
+     * 그 까닭이 지워진 주석에 남아 있다:
+     *
+     * > 항목이 0개일 때(로딩/빈 상태)는 저장된 절대 px 폭 합이 현재 컨테이너 폭보다 커서
+     * > 불필요한 가로 스크롤이 생길 수 있어, 이때는 기본(fr 단위) grid로 되돌린다.
+     *
+     * **그 막음은 뜻을 잃었다.** `grow` 는 끈 만큼 넓어져 **줄이 있을 때 이미** 그 가로
+     * 스크롤이 서는 모드다(그것이 `fit` 과 갈리는 점이다). 저장된 px 합이 통보다 크다는 것은
+     * 그 사람이 그만큼 넓혀 두었다는 뜻이다. 그러니 이 조건이 없앤 것은 가로 스크롤이 아니라
+     * **빈 상태만 다르게 보이는 것**이었고, 막는 것보다 어긋나게 만드는 쪽이 컸다.
+     *
+     * 어긋남은 두 자리에서 보인다 — ① 화면에 들어갈 때(`loading` 이면 `items` 가 비어 있다)
+     * 만든 사람의 틀로 섰다가 자료가 오면 쥔 폭으로 **튄다**, ② 걸러서 0건이 되면 또 튄다.
+     * 말귀가 제 앱을 재어 `grow` 표 스물하나(그중 0건이 날 수 있는 것 열일곱)를 세어 왔다.
+     *
+     * **그리고 자동맞춤이 이것을 모두의 일로 바꿨다.** 전에는 `colWidths` 가 끌어 본 사람에게만
+     * 있어 이 튐도 그 사람에게만 났다. 이제는 아무도 안 끌어도 찬다.
+     *
+     * 빈 줄(`.table-row--empty`)은 격자 줄이 아니라 `display: flex` 라 칸 폭을 안 쓴다 —
+     * 걷어도 움직이는 것은 **머리뿐**이다.
+     */
     const canApplyWidths = colWidths && colWidths.length === fields.length
-        && !좁은화면
-        && (resizeMode === 'fit' || items.length > 0);
-    const effectiveGrid = 좁은틀 ?? (canApplyWidths
+        && !isNarrow;
+    const effectiveGrid = narrowTemplate ?? (canApplyWidths
         ? fields.map((f, i) => (f.resizable === false && defaultCols[i]) ? defaultCols[i] : `${colWidths[i]}${widthUnit(i)}`).join(' ')
         : gridTemplateColumns);
     const gridStyle = effectiveGrid
         ? { '--table-grid-cols': effectiveGrid }
         : undefined;
     const hasHeader = title !== undefined;
-    return (_jsxs("div", { ref: 통달기, className: `table-wrap table-wrap--${size}${폭조절 ? ' table-wrap--resizable' : ''}${dragOver ? ' table-wrap--dragover' : ''}${collapsed ? ' table-wrap--collapsed' : ''}`, style: gridStyle, onDragOver: onDragOver, onDragLeave: onDragLeave, onDrop: onDrop, 
+    return (_jsxs("div", { ref: attachOuter, className: `table-wrap table-wrap--${size}${canResize ? ' table-wrap--resizable' : ''}${dragOver ? ' table-wrap--dragover' : ''}${collapsed ? ' table-wrap--collapsed' : ''}`, style: gridStyle, onDragOver: onDragOver, onDragLeave: onDragLeave, onDrop: onDrop, 
         /* **넘칠 때만 초점을 받는다**(말귀 요청 ㊿, 2026-10-01).
            이 통은 `overflow-x: auto` 인데 초점을 못 받았다. 안에 초점 받을 것이 없으면
            자판만 쓰는 사람은 **오른쪽 칸을 영영 못 본다** — Tab 이 왼쪽 칸을 벗어나지
@@ -518,7 +677,7 @@ export default function Table({ fields = [], headerGroups, items = [], renderRow
            한 칸씩 는다. 그래서 `scrollWidth > clientWidth` 를 재서 켠다.
            **이름 있는 `region`** 으로 둔다: 이름 없는 `region` 은 낭독기가 건너뛰고,
            초점만 받는 `div` 는 "여기서 뭘 하라는 건지" 를 말해 주지 못한다. */
-        tabIndex: 넘치나 ? 0 : undefined, role: 넘치나 ? 'region' : undefined, "aria-label": 넘치나 ? (typeof title === 'string' ? title : t('table.scrollRegion', '가로로 굴릴 수 있는 표')) : undefined, children: [!!onRowClick && _jsx("span", { id: 줄설명id, className: "table-row-hint", children: t('table.rowActionHint', '줄을 누르면 자세히 봅니다') }), _jsxs("div", { ref: 안달기, role: "table", "aria-labelledby": hasHeader && typeof title === 'string' ? 제목id : undefined, className: "table body-2", children: [hasHeader && (_jsxs("div", { className: cx('table-header', onToggleCollapse && 'table-header--clickable'), onClick: onToggleCollapse, 
+        tabIndex: overflowing ? 0 : undefined, role: overflowing ? 'region' : undefined, "aria-label": overflowing ? (typeof title === 'string' ? title : t('table.scrollRegion', '가로로 굴릴 수 있는 표')) : undefined, children: [!!onRowClick && _jsx("span", { id: rowHintId, className: "table-row-hint", children: t('table.rowActionHint', '줄을 누르면 자세히 봅니다') }), _jsxs("div", { ref: attachInner, role: "table", "aria-labelledby": hasHeader && typeof title === 'string' ? titleId : undefined, className: "table body-2", children: [hasHeader && (_jsxs("div", { className: cx('table-header', onToggleCollapse && 'table-header--clickable'), onClick: onToggleCollapse, 
                         /**
                          * **머리는 늘 `caption` 이다 — 단추가 아니다**(사장님 지시 2026-10-02).
                          *
@@ -540,28 +699,28 @@ export default function Table({ fields = [], headerGroups, items = [], renderRow
                          */
                         role: "caption", children: [onToggleCollapse && (_jsx(Button, { htmlType: "button", size: 40, type: "dot", variant: "transparent-gray", useBorder: false, icon: collapsed ? 'chevron-right' : 'chevron-down', ariaLabel: collapsed ? t('common.expand', '펼치기') : t('common.collapse', '접기'), 
                                 /* 여닫힘은 **여는 것**이 말한다 — 전에는 겉의 `div` 에 달려 있었다(위 머리글) */
-                                ariaExpanded: !collapsed, className: "table-header__chevron" })), icon && (_jsx(Icon, { icon: icon, label: typeof title === 'string' ? title : undefined, className: "table-header__icon" })), _jsx("span", { id: 제목id, className: "table-header__title h5b", children: title }), count !== undefined && _jsx("span", { className: "table-header__count body-3b", children: count }), headerActions && (_jsx("span", { className: "table-header__actions", onClick: e => e.stopPropagation(), children: headerActions }))] })), !collapsed && (_jsxs(_Fragment, { children: [headerGroups && headerGroups.length > 0 && (_jsx("div", { role: "row", className: "table-fields table-fields--groups", children: headerGroups.map((g, i) => (_jsx("div", { role: "columnheader", "aria-colspan": g.span, className: cx('table-field body-3', g.className), style: { gridColumn: `span ${g.span}` }, children: g.label }, i))) })), _jsxs("div", { role: "presentation", className: cx('table-fields-strip', 폭조절 && 'table-fields-strip--resizable'), children: [_jsx("div", { role: "row", className: "table-fields", ref: fieldsRef, children: fields.map((f, i) => (_jsx(TableField, { onClick: f.onClick, className: f.className, sortDir: f.sortDir, ariaSort: ariaSortOf(i), 
+                                ariaExpanded: !collapsed, className: "table-header__chevron" })), icon && (_jsx(Icon, { icon: icon, label: typeof title === 'string' ? title : undefined, className: "table-header__icon" })), _jsx("span", { id: titleId, className: "table-header__title h5b", children: title }), count !== undefined && _jsx("span", { className: "table-header__count body-3b", children: count }), headerActions && (_jsx("span", { className: "table-header__actions", onClick: e => e.stopPropagation(), children: headerActions }))] })), !collapsed && (_jsxs(_Fragment, { children: [headerGroups && headerGroups.length > 0 && (_jsx("div", { role: "row", className: "table-fields table-fields--groups", children: headerGroups.map((g, i) => (_jsx("div", { role: "columnheader", "aria-colspan": g.span, className: cx('table-field body-3', g.className), style: { gridColumn: `span ${g.span}` }, children: g.label }, i))) })), _jsxs("div", { role: "presentation", className: cx('table-fields-strip', canResize && 'table-fields-strip--resizable'), children: [_jsx("div", { role: "row", className: "table-fields", ref: fieldsRef, children: fields.map((f, i) => (_jsx(TableField, { onClick: f.onClick, className: f.className, sortDir: f.sortDir, ariaSort: ariaSortOf(i), 
                                             /* fit 모드는 오른쪽 이웃에서 폭을 덜어 오므로, 덜어 올 컬럼이 없는 자리에는
                                                손잡이를 두지 않는다 — 두면 그 컬럼만 grow처럼 넓어져 표가 밀린다. */
-                                            onResizeStart: 폭조절 && i < fields.length - 1 && f.resizable !== false
+                                            onResizeStart: canResize && i < fields.length - 1 && f.resizable !== false
                                                 && (resizeMode !== 'fit' || fields.some((g, j) => j > i && g.resizable !== false))
-                                                ? (e) => startResize(i, e) : undefined, children: f.label }, i))) }), 폭조절 && (_jsx(Button, { htmlType: "button", size: 40, type: "dot", variant: "transparent-gray", useBorder: false, icon: "chevrons-left-right-ellipsis", ariaLabel: t('table.resetColumns', '칸 너비 초기화'), showTooltipInfo: t('table.resetColumns', '칸 너비 초기화'), className: "table-fields__reset", onClick: 자동맞춤 }))] }), _jsx("div", { role: "rowgroup", className: "table-body", children: loading ? (_jsx(TableRow, { variant: "loading", colSpan: fields.length || undefined })) : items.length === 0 && empty ? (_jsx(TableRow, { variant: "empty", colSpan: fields.length || undefined, children: empty })) : items.map((item, idx) => {
+                                                ? (e) => startResize(i, e) : undefined, children: f.label }, i))) }), canResize && (_jsx(Button, { htmlType: "button", size: 40, type: "dot", variant: "transparent-gray", useBorder: false, icon: "chevrons-left-right-ellipsis", ariaLabel: t('table.resetColumns', '칸 너비 초기화'), showTooltipInfo: t('table.resetColumns', '칸 너비 초기화'), className: "table-fields__reset", onClick: resetColumns }))] }), _jsx("div", { role: "rowgroup", className: "table-body", children: loading ? (_jsx(TableRow, { variant: "loading", colSpan: fields.length || undefined })) : items.length === 0 && empty ? (_jsx(TableRow, { variant: "empty", colSpan: fields.length || undefined, children: empty })) : items.map((item, idx) => {
                                     const isDragging = draggingId != null && item.id === draggingId;
-                                    const 눌림 = !!onRowClick && (isRowClickable ? isRowClickable(item) : true);
+                                    const clickable = !!onRowClick && (isRowClickable ? isRowClickable(item) : true);
                                     /* 글자로 견준다 — URL·폼에서 온 '5' 와 자료의 5 가 같은 줄인데 `===` 로는 안 펴졌다 */
                                     const isExpanded = expandedId != null && item.id != null && (expandedId instanceof Set
                                         ? expandedId.has(item.id) || [...expandedId].some(x => String(x) === String(item.id))
                                         : String(item.id) === String(expandedId));
                                     return (_jsx(TableRow
                                     // 타입까지 열쇠에 — id 없는 줄(idx 0)과 id:0, 1 과 '1' 이 같은 열쇠가 되어 목록을 바꾼 뒤 옛 줄이 남았다
-                                    , { className: `${눌림 ? ' table-row--clickable' : ''}${onRowDragStart ? ' table-row--draggable' : ''}${isDragging ? ' table-row--dragging' : ''}`.trim(), draggable: !!onRowDragStart, 
+                                    , { className: `${clickable ? ' table-row--clickable' : ''}${onRowDragStart ? ' table-row--draggable' : ''}${isDragging ? ' table-row--dragging' : ''}`.trim(), draggable: !!onRowDragStart, 
                                         // 옆의 핸들러들처럼 있을 때만 넘긴다. 항상 함수를 만들어 넘기면
                                         // TableRow 가 "클릭 가능"으로 보고 role="button" · tabIndex=0 을 붙여,
                                         // 클릭 동작이 없는 표의 모든 행이 버튼으로 읽히고 탭 정지점이 된다.
-                                        onClick: 눌림 ? () => onRowClick(item) : undefined, colSpan: fields.length || undefined, 
+                                        onClick: clickable ? () => onRowClick(item) : undefined, colSpan: fields.length || undefined, 
                                         /* **줄 안에 진짜 단추가 서면 줄은 정지점에서 내린다** — 한 가지 일에
                                            정지점이 둘이면 자판으로 도는 사람이 같은 줄을 두 번 잡는다(0.254.0 에서
                                            접기 머리에 걷은 그 꼴). 설명도 그때는 필요 없다 — 단추가 제 이름으로 말한다. */
-                                        rowHasButton: renderRow(item).some(c => !!c.rowLabel), describedBy: 줄설명id, onMouseEnter: onRowMouseEnter ? (e) => onRowMouseEnter(item, e) : undefined, onMouseLeave: onRowMouseLeave ? (e) => onRowMouseLeave(item, e) : undefined, onDragStart: onRowDragStart ? (e) => onRowDragStart(item, e) : undefined, onDragEnd: onRowDragEnd ? (e) => onRowDragEnd(item, e) : undefined, expandedContent: isExpanded && renderExpandedRow ? renderExpandedRow(item) : undefined, children: renderRow(item).map((cell, i) => (_jsx(TableCell, { className: cell.className, style: cell.style, rowLabel: 눌림 ? cell.rowLabel : undefined, onRowClick: 눌림 ? () => onRowClick(item) : undefined, children: cell.content }, i))) }, item.id != null ? `${typeof item.id}:${item.id}` : `__idx:${idx}`));
+                                        rowHasButton: renderRow(item).some(c => !!c.rowLabel), describedBy: rowHintId, onMouseEnter: onRowMouseEnter ? (e) => onRowMouseEnter(item, e) : undefined, onMouseLeave: onRowMouseLeave ? (e) => onRowMouseLeave(item, e) : undefined, onDragStart: onRowDragStart ? (e) => onRowDragStart(item, e) : undefined, onDragEnd: onRowDragEnd ? (e) => onRowDragEnd(item, e) : undefined, expandedContent: isExpanded && renderExpandedRow ? renderExpandedRow(item) : undefined, children: renderRow(item).map((cell, i) => (_jsx(TableCell, { className: cell.className, style: cell.style, rowLabel: clickable ? cell.rowLabel : undefined, onRowClick: clickable ? () => onRowClick(item) : undefined, children: cell.content }, i))) }, item.id != null ? `${typeof item.id}:${item.id}` : `__idx:${idx}`));
                                 }) })] }))] })] }));
 }