@ihabdevteam/core 0.322.0 → 0.323.0

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

@@ -26,13 +26,13 @@ export default function Tabs({ items = [], value, onChange, className = '', size
     const listRef = useRef(null);
     /* value 가 없거나 items 에 없으면 **켜진 첫 탭**을 고른 것으로 본다. 전에는 무조건 첫 탭이라, 첫 탭이 꺼져 있으면
        꺼진 탭의 판이 보이고 Tab 자리(tabIndex 0)가 꺼진 탭 하나뿐이어서 키보드로 탭 목록에 닿을 수 없었다. */
-    const 켜진첫키 = items.find(item => !item.disabled)?.key;
-    const activeKey = items.some(item => item.key === value) ? value : (켜진첫키 ?? items[0]?.key);
+    const firstEnabledKey = items.find(item => !item.disabled)?.key;
+    const activeKey = items.some(item => item.key === value) ? value : (firstEnabledKey ?? items[0]?.key);
     /* Tab 자리 — 고른 탭이 꺼져 있으면(부모가 꺼진 탭을 value 로 줌) 켜진 첫 탭이 받는다 */
-    const 탭자리키 = items.find(item => item.key === activeKey && !item.disabled)?.key ?? 켜진첫키;
+    const tabStopKey = items.find(item => item.key === activeKey && !item.disabled)?.key ?? firstEnabledKey;
     /** 지금 화면에 선 **켜진 탭들** — 옮기는 자리는 전부 이 목록 기준이다 */
-    const 켜진탭들 = () => Array.from(listRef.current?.querySelectorAll('[role="tab"]:not(:disabled)') ?? []);
-    const focusTabAt = (index, tabs = 켜진탭들()) => {
+    const enabledTabs = () => Array.from(listRef.current?.querySelectorAll('[role="tab"]:not(:disabled)') ?? []);
+    const focusTabAt = (index, tabs = enabledTabs()) => {
         if (tabs.length === 0)
             return;
         const clamped = ((index % tabs.length) + tabs.length) % tabs.length;
@@ -47,23 +47,23 @@ export default function Tabs({ items = [], value, onChange, className = '', size
      * 지금 눌린 탭이 **켜진 것들 안에서 몇 번째인지**를 세어 거기서 옮긴다.
      */
     const handleKeyDown = (e) => {
-        const 이동키 = ['ArrowRight', 'ArrowDown', 'ArrowLeft', 'ArrowUp', 'Home', 'End'];
-        if (!이동키.includes(e.key))
+        const MOVE_KEYS = ['ArrowRight', 'ArrowDown', 'ArrowLeft', 'ArrowUp', 'Home', 'End'];
+        if (!MOVE_KEYS.includes(e.key))
             return;
         e.preventDefault();
-        const tabs = 켜진탭들();
-        const 지금 = tabs.indexOf(e.currentTarget);
+        const tabs = enabledTabs();
+        const current = tabs.indexOf(e.currentTarget);
         if (e.key === 'ArrowRight' || e.key === 'ArrowDown')
-            focusTabAt(지금 + 1, tabs);
+            focusTabAt(current + 1, tabs);
         else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp')
-            focusTabAt(지금 - 1, tabs);
+            focusTabAt(current - 1, tabs);
         else if (e.key === 'Home')
             focusTabAt(0, tabs);
         else
             focusTabAt(tabs.length - 1, tabs);
     };
     const activeItem = items.find(item => item.key === activeKey);
-    return (_jsxs("div", { className: `tabs ${className}`.trim(), children: [_jsx("div", { ref: listRef, className: `tabs__list tabs__list--${size}`, role: "tablist", "aria-label": t('tabs.ariaLabel', '탭'), children: items.map(item => (_jsx("button", { id: `tabs__tab-${uid}-${item.key}`, type: "button", role: "tab", "aria-selected": item.key === activeKey, "aria-controls": `tabs__panel-${uid}-${item.key}`, disabled: item.disabled, tabIndex: item.key === 탭자리키 ? 0 : -1, className: `tabs__tab body-2${item.key === activeKey ? ' tabs__tab--active' : ''}`, 
+    return (_jsxs("div", { className: `tabs ${className}`.trim(), children: [_jsx("div", { ref: listRef, className: `tabs__list tabs__list--${size}`, role: "tablist", "aria-label": t('tabs.ariaLabel', '탭'), children: items.map(item => (_jsx("button", { id: `tabs__tab-${uid}-${item.key}`, type: "button", role: "tab", "aria-selected": item.key === activeKey, "aria-controls": `tabs__panel-${uid}-${item.key}`, disabled: item.disabled, tabIndex: item.key === tabStopKey ? 0 : -1, className: `tabs__tab body-2${item.key === activeKey ? ' tabs__tab--active' : ''}`, 
                     /* 값이 바뀔 때만 onChange(2026-09-15 결정) — 지금 탭을 다시 누르면 아무 일도 없다 */
                     onClick: () => { if (item.key !== value)
                         onChange?.(item.key); }, onKeyDown: handleKeyDown, children: item.label }, item.key))) }), activeItem && (_jsx("div", { id: `tabs__panel-${uid}-${activeItem.key}`, role: "tabpanel", "aria-labelledby": `tabs__tab-${uid}-${activeItem.key}`, tabIndex: 0, className: "tabs__panel", children: activeItem.panel }, activeItem.key))] }));

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

@@ -46,61 +46,61 @@ export default function TextField(props) {
         autoActiveFirst,
     });
     /* 후보 목록이 지금 DOM 에 있는가 — 아래 렌더 조건과 **같은 식**이어야 한다 */
-    const 목록떴나 = !!suggestions && combobox.open && combobox.filtered.length > 0;
+    const listOpen = !!suggestions && combobox.open && combobox.filtered.length > 0;
     /* 후보 목록은 **body 로 빼서** 칸 좌표에 fixed 로 띄운다 — 칸 아래 absolute 로 두었더니 팝업 본문(overflow: auto)에
        잘려 창 아래쪽 칸(훈련 묶음의 그룹 이름)에서 후보가 보이지 않았다. Dropdown 메뉴와 같은 방식(층·data-tooltip-ignore). */
     const rootRef = useRef(null);
     const [listStyle, setListStyle] = useState(null);
-    const 목록자리재기 = useCallback(() => {
+    const measureListRect = useCallback(() => {
         const root = rootRef.current;
         if (!root || typeof window === 'undefined')
             return;
         const r = root.getBoundingClientRect();
-        const 최대높이 = 220 + 8 + 2; // max-height + padding + 테두리
-        const 아래 = window.innerHeight - r.bottom;
-        const 위로 = 아래 < 최대높이 + 8 && r.top > 최대높이 + 8;
+        const maxHeight = 220 + 8 + 2; // max-height + padding + 테두리
+        const spaceBelow = window.innerHeight - r.bottom;
+        const openUpward = spaceBelow < maxHeight + 8 && r.top > maxHeight + 8;
         setListStyle({
             position: 'fixed',
             left: r.left,
             width: r.width,
-            ...(위로 ? { bottom: window.innerHeight - r.top + 8 } : { top: r.bottom + 8 }),
+            ...(openUpward ? { bottom: window.innerHeight - r.top + 8 } : { top: r.bottom + 8 }),
             zIndex: anchoredMenuZIndex(root),
         });
     }, []);
     useIsoLayoutEffect(() => {
-        if (!목록떴나)
+        if (!listOpen)
             return;
-        목록자리재기();
+        measureListRect();
         /* 굴리거나 창 크기가 바뀌면 칸을 따라간다 — 목록 안을 굴리는 것은 무시 */
         /* **틀에 한 번으로 모은다** — (115) 와 같은 꼴, 셋째 자리(2026-10-10, 코어 자체 조사). `목록자리재기` 는
            `getBoundingClientRect()` 로 레이아웃을 읽고 상태를 바꾸는데, 이 듣는 이는 **문서 전체의 굴림을
            capture 로** 받는다 — 목록이 뜬 동안 굴리면 틀마다 여러 번 돌았다. 여기는 **닫는 길이 없다**(자리만
            따라간다) — 미뤄도 되는 일뿐이다. */
-        let 예약 = null;
-        const 자리다시 = () => {
+        let rafId = null;
+        const reposition = () => {
             if (typeof requestAnimationFrame === 'undefined') {
-                목록자리재기();
+                measureListRect();
                 return;
             }
-            if (예약 !== null)
+            if (rafId !== null)
                 return;
-            예약 = requestAnimationFrame(() => { 예약 = null; 목록자리재기(); });
+            rafId = requestAnimationFrame(() => { rafId = null; measureListRect(); });
         };
-        const 굴림 = (e) => {
+        const onScroll = (e) => {
             const t = e.target;
             if (t && t.nodeType === 1 && t.closest?.('.text-field__suggestions'))
                 return;
-            자리다시();
+            reposition();
         };
-        window.addEventListener('scroll', 굴림, true);
-        window.addEventListener('resize', 자리다시);
+        window.addEventListener('scroll', onScroll, true);
+        window.addEventListener('resize', reposition);
         return () => {
-            if (예약 !== null)
-                cancelAnimationFrame(예약);
-            window.removeEventListener('scroll', 굴림, true);
-            window.removeEventListener('resize', 자리다시);
+            if (rafId !== null)
+                cancelAnimationFrame(rafId);
+            window.removeEventListener('scroll', onScroll, true);
+            window.removeEventListener('resize', reposition);
         };
-    }, [목록떴나, 목록자리재기]);
+    }, [listOpen, measureListRect]);
     // 외부 inputRef + 내부 autoRef 동시 연결 — 외부에서 전달받은 ref 객체(.current)에 노드를 채우는
     // React의 표준 ref 병합/전달(forwarding) 패턴이며, 이 외에 구현할 방법이 없다
     /* eslint-disable react-hooks/immutability */
@@ -114,7 +114,7 @@ export default function TextField(props) {
     /* eslint-enable react-hooks/immutability */
     /* 추천이 있으면 자리표시가 **추천 + 받는 법**이 된다. 추천이 없으면 그 칸의 평소 자리표시로 물러선다.
        (네이티브 자리표시는 칸이 비었을 때만 보이므로 "비었을 때만" 은 따로 가릴 것이 없다.) */
-    const 자리표시 = ghostText
+    const placeholderGhost = ghostText
         ? `${ghostText}${ghostHint ?? t('wordTable.save.autoFillHint', ' (Tab 또는 space 입력시 자동 입력)')}`
         : placeholder;
     const isControlled = value !== undefined;
@@ -165,7 +165,7 @@ export default function TextField(props) {
         // 단 비밀번호는 둘 다 넘기지 않는다 — 어느 쪽이든 HTML value 속성에 평문이 박힌다
         ...(isPasswordControlled ? {} : isControlled ? { value } : { defaultValue }),
         ref: setNodeRef,
-        placeholder: 자리표시,
+        placeholder: placeholderGhost,
         name,
         disabled,
         readOnly,
@@ -193,14 +193,14 @@ export default function TextField(props) {
            "맞는 항목이 없습니다" 를 **잇따라** 말한다(말귀 실측). 바로 아래
            `aria-controls` 에 이미 건 가드를 여기만 안 걸고 있었다: 한 결정이 세 속성으로
            갈라져 둘만 고쳐진 꼴이다. 셋이 같은 식을 본다. */
-        'aria-expanded': suggestions ? 목록떴나 : undefined,
+        'aria-expanded': suggestions ? listOpen : undefined,
         /* **목록이 실제로 그려졌을 때만** 가리킨다. 예전에는 `suggestions` 만 있으면 늘
            걸어 두었는데, 목록은 열려 있고 걸린 후보가 있을 때만 그려진다(아래 렌더 조건).
            그래서 닫힌 콤보박스가 **없는 id 를 가리키고** 있었다 — 놀이터에서 실측으로
            `aria-controls=_r_7l_` 이 어느 원소도 안 가리켰다. 낭독기는 그 관계를 못 풀고
            조용히 버린다. */
-        'aria-controls': 목록떴나 ? combobox.listId : undefined,
-        'aria-activedescendant': 목록떴나 && combobox.activeIdx >= 0 ? `${combobox.listId}-option-${combobox.activeIdx}` : undefined,
+        'aria-controls': listOpen ? combobox.listId : undefined,
+        'aria-activedescendant': listOpen && combobox.activeIdx >= 0 ? `${combobox.listId}-option-${combobox.activeIdx}` : undefined,
         onChange: (e) => {
             const node = e.target;
             if (!isControlled)
@@ -237,8 +237,8 @@ export default function TextField(props) {
                비출 추천이 있을 때만. 받은 키는 이 칸이 먹으므로 초점이 옮겨 가지 않고 `onKeyDown` 으로도
                안 간다 — 한 번 더 누르면 칸이 찼으니 평소대로 넘어간다. 조합 중(한글 중간 글자)에는 손대지
                않는다: 그때의 Space 는 글자를 맺는 키다. */
-            const 추천받는키 = ((e.key === 'Tab' && !e.shiftKey) || e.key === ' ') && !e.nativeEvent.isComposing;
-            if (ghostText && 추천받는키 && !readOnly && !disabled && !(e.currentTarget.value ?? '').trim()) {
+            const acceptsSuggestion = ((e.key === 'Tab' && !e.shiftKey) || e.key === ' ') && !e.nativeEvent.isComposing;
+            if (ghostText && acceptsSuggestion && !readOnly && !disabled && !(e.currentTarget.value ?? '').trim()) {
                 e.preventDefault();
                 const node = e.currentTarget;
                 if (!isControlled) {
@@ -248,8 +248,8 @@ export default function TextField(props) {
                 onChange?.(ghostText);
                 return;
             }
-            const 후보고르는엔터 = !!suggestions && e.key === 'Enter' && !e.nativeEvent.isComposing && combobox.activeIdx >= 0;
-            if (후보고르는엔터)
+            const entryPicksCandidate = !!suggestions && e.key === 'Enter' && !e.nativeEvent.isComposing && combobox.activeIdx >= 0;
+            if (entryPicksCandidate)
                 e.preventDefault();
             else if (onEnter && e.key === 'Enter' && !e.nativeEvent.isComposing) {
                 e.preventDefault();
@@ -275,8 +275,8 @@ export default function TextField(props) {
     // variant="display"는 값과 placeholder 글자 크기가 크게 달라 네이티브 ::placeholder로는
     // 세로 중앙을 못 맞춘다. 전용 오버레이 div를 flex로 정중앙 정렬하고,
     // 값이 있으면(:placeholder-shown 해제) CSS로 숨긴다.
-    const showPlaceholderOverlay = variant === 'display' && !newline && !multiline && !!자리표시;
-    const renderInputArea = () => (_jsxs(_Fragment, { children: [renderInput(), showPlaceholderOverlay && (_jsx("span", { className: "text-field__placeholder", "aria-hidden": "true", children: 자리표시 }))] }));
+    const showPlaceholderOverlay = variant === 'display' && !newline && !multiline && !!placeholderGhost;
+    const renderInputArea = () => (_jsxs(_Fragment, { children: [renderInput(), showPlaceholderOverlay && (_jsx("span", { className: "text-field__placeholder", "aria-hidden": "true", children: placeholderGhost }))] }));
     return (_jsxs("div", { ref: rootRef, className: cls, children: [label && (_jsxs("label", { htmlFor: inputId, className: "text-field__label caption-1", children: [label, required && _jsx("span", { className: "text-field__required", children: "*" })] })), _jsxs("div", { className: "text-field__wrap", children: [leftIcon && (_jsx("span", { className: "text-field__icon text-field__icon--left", children: _jsx(Icon, { icon: leftIcon, label: "", className: "", svgClassName: "text-field__icon-svg", size: iconSize }) })), renderInputArea(), maxLength != null && showCount && (_jsxs("span", { className: `text-field__count caption-2${isOver ? ' text-field__count--over' : ''}`, children: [len, "/", maxLength] })), showClear && (_jsx(Button, { size: 24, type: "dot", icon: "x", variant: "transparent-gray", useBorder: false, className: "text-field__clear", ariaLabel: t('textField.clearAriaLabel', '입력값 지우기'), 
                         // 폼 안에서 쓰일 때 기본값(submit)으로 눌려 폼이 제출되지 않도록.
                         htmlType: "button", 
@@ -294,7 +294,7 @@ export default function TextField(props) {
                             onChange?.('');
                         }, tabIndex: -1 })), rightIcon && !showClear && (_jsx("span", { className: "text-field__icon text-field__icon--right", children: _jsx(Icon, { icon: rightIcon, label: "", className: "", svgClassName: "text-field__icon-svg", size: iconSize }) }))] }), !!suggestions && (_jsx("span", { className: "text-field__status", role: "status", "aria-live": "polite", children: combobox.open && (value ?? '').length > 0 && combobox.filtered.length === 0
                     ? t('common.noMatches', '맞는 항목이 없습니다')
-                    : '' })), 목록떴나 && (typeof document === 'undefined' ? null : createPortal(_jsx("ul", { id: combobox.listId, className: "text-field__suggestions", role: "listbox", style: listStyle ?? { position: 'fixed', visibility: 'hidden' }, "data-tooltip-ignore": true, children: combobox.filtered.map((s, i) => (_jsx("li", { id: `${combobox.listId}-option-${i}`, role: "option", "aria-selected": i === combobox.activeIdx, className: `text-field__suggestion body-2${i === combobox.activeIdx ? ' is-active' : ''}`, 
+                    : '' })), listOpen && (typeof document === 'undefined' ? null : createPortal(_jsx("ul", { id: combobox.listId, className: "text-field__suggestions", role: "listbox", style: listStyle ?? { position: 'fixed', visibility: 'hidden' }, "data-tooltip-ignore": true, children: combobox.filtered.map((s, i) => (_jsx("li", { id: `${combobox.listId}-option-${i}`, role: "option", "aria-selected": i === combobox.activeIdx, className: `text-field__suggestion body-2${i === combobox.activeIdx ? ' is-active' : ''}`, 
                     // 선택은 click 에서 한다. onMouseDown 만 두면 마우스로는 눌리지만 스크린리더가
                     // 이 option 을 활성화할 때는 click 만 발생해 아무 일도 일어나지 않는다.
                     // mousedown 에서는 기본 동작(포커스 이동 → 입력 blur)을 막아, click 이 도달하기

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

@@ -11,20 +11,20 @@ onClose = () => { }, duration = 2000, // 0 = persistent until message cleared
     const { mounted, showing, popupRef, pause, resume } = useToastLifecycle({ message, position, duration, onClose });
     /* 톡(터치)은 멈추지 않는다 — 톡하면 호환 mouseenter 로 멈추고 mouseleave 는 다른 곳을 톡하기 전까지 안 와 알림이 사라지지 않았다.
        마우스 머무름·키보드 포커스는 그대로 멈춘다. 마지막 포인터 종류를 pointerenter 로 기억해 가른다. */
-    const 마지막포인터 = useRef(null);
+    const lastPointerType = useRef(null);
     /* **첫 문구가 안 읽혔다** — live 영역(role=status)이 문구와 한꺼번에 문서에 들어오면 낭독기는 "바뀐 것" 으로 보지 않는다.
        영역을 먼저 붙이고, 다음 틱(등장 애니메이션이 시작되는 두 프레임 뒤)에 문구를 접근 트리에 넣는다.
        문구 노드는 처음부터 두고 `aria-hidden` 만 푼다 — 글자를 늦게 넣으면 문구를 곧바로 찾는 시험(getByText·status 의
        textContent)이 깨지고, 늘 비어 있는 status 영역을 따로 두면 getByRole('status') 가 둘을 찾는다. 이미 떠 있는 동안 바뀐 문구는 곧바로 읽힌다. */
-    const [읽힘, set읽힘] = useState(false);
+    const [announced, setAnnounced] = useState(false);
     useEffect(() => {
         // 등장(showing)을 따라 한 번 켜고, 내려가면 끈다 — 외부(애니메이션 수명) 상태와의 의도된 동기화
         // eslint-disable-next-line react-hooks/set-state-in-effect
         if (showing)
-            set읽힘(true);
+            setAnnounced(true);
         // eslint-disable-next-line react-hooks/set-state-in-effect
         else if (!mounted)
-            set읽힘(false);
+            setAnnounced(false);
     }, [showing, mounted]);
     if (!mounted)
         return null;
@@ -35,8 +35,8 @@ onClose = () => { }, duration = 2000, // 0 = persistent until message cleared
        `duration={0}` 으로 아예 안 사라지게 하는 길은 전부터 있었지만 그건 부르는
        쪽이 미리 정하는 것이고, 읽는 사람이 **그 자리에서** 멈출 수는 없었다.
        다시 움직일 때는 **남은 시간부터** 돈다 — 처음부터가 아니다. */
-    _jsx("div", { ref: popupRef, className: `toast toast--${position} ${showing ? 'is-visible' : ''}`, role: "status", "aria-live": "polite", onPointerEnter: (e) => { 마지막포인터.current = e.pointerType; }, onMouseEnter: () => { if (마지막포인터.current !== 'touch')
-            pause(); }, onMouseLeave: resume, onFocusCapture: pause, onBlurCapture: resume, children: _jsx("div", { className: `toast__inner toast__inner--${normalizedType} body-2`, "aria-hidden": 읽힘 || showing ? undefined : true, children: _jsx("span", { className: "toast__text", children: message }) }) }));
+    _jsx("div", { ref: popupRef, className: `toast toast--${position} ${showing ? 'is-visible' : ''}`, role: "status", "aria-live": "polite", onPointerEnter: (e) => { lastPointerType.current = e.pointerType; }, onMouseEnter: () => { if (lastPointerType.current !== 'touch')
+            pause(); }, onMouseLeave: resume, onFocusCapture: pause, onBlurCapture: resume, children: _jsx("div", { className: `toast__inner toast__inner--${normalizedType} body-2`, "aria-hidden": announced || showing ? undefined : true, children: _jsx("span", { className: "toast__text", children: message }) }) }));
     if (typeof document !== 'undefined') {
         return createPortal(el, document.body);
     }

package/dist/packages/core/src/components/Tooltip/MenuTooltip.js

@@ -26,8 +26,8 @@ export default function MenuTooltip({ columns = [], onClose, className = '', siz
         return out;
     }, [columns, path]);
     const current = stack[stack.length - 1];
-    const 보이는깊이 = stack.length - 1;
-    const goBack = useCallback(() => setPath((p) => p.slice(0, Math.max(0, Math.min(p.length, 보이는깊이) - 1))), [보이는깊이]);
+    const visibleDepth = stack.length - 1;
+    const goBack = useCallback(() => setPath((p) => p.slice(0, Math.max(0, Math.min(p.length, visibleDepth) - 1))), [visibleDepth]);
     // 키보드 포커스 — Tooltip은 body로 포털되므로, 포커스를 옮겨주지 않으면 ⋯ 버튼을 누른
     // 키보드 사용자가 메뉴에 닿으려면 페이지 끝까지 Tab 해야 한다(사실상 도달 불가).
     // Tooltip에 이미 있는 ESC·Tab 트랩과 짝을 이루도록 첫 항목으로 포커스를 넣고,
@@ -65,7 +65,7 @@ export default function MenuTooltip({ columns = [], onClose, className = '', siz
         if (!item)
             return;
         if (Array.isArray(item.children) && item.children.length) {
-            setPath((p) => [...p.slice(0, 보이는깊이), { ci, ii }]);
+            setPath((p) => [...p.slice(0, visibleDepth), { ci, ii }]);
             return;
         }
         try {
@@ -80,7 +80,7 @@ export default function MenuTooltip({ columns = [], onClose, className = '', siz
                 onClose();
         }
         catch (err) { }
-    }, [onClose, 보이는깊이]);
+    }, [onClose, visibleDepth]);
     return (_jsxs("div", { className: `tooltip-menu tooltip-menu--${size} ${className}`, children: [(stack.length > 1 || current.title) && (_jsxs("div", { className: "tooltip-menu__header", children: [stack.length > 1 ? (_jsx(Button, { htmlType: "button", size: itemSize, type: "dot", icon: "chevron-left", ariaLabel: t('common.back', '뒤로'), onClick: goBack, variant: "transparent-gray", useBorder: false })) : null, _jsx("div", { className: "tooltip-menu__title button-1", children: current.title })] })), _jsx("div", { className: "tooltip-menu__columns", ref: itemsWrapRef, children: current.columns && current.columns.map((col, ci) => (_jsxs("div", { className: "tooltip-menu__column", children: [col.title ? _jsx("div", { className: "tooltip-menu__column-title body-3", children: col.title }) : null, _jsx("div", { className: "tooltip-menu__items", children: (col.items || []).map((item, idx) => (_jsxs(Fragment, { children: [item.separatorBefore && idx > 0 && _jsx("div", { className: "tooltip-menu__separator", role: "separator" }), _jsx(Button, { htmlType: "button", className: "tooltip-menu__item", size: itemSize, type: item.label ? 'bar' : 'dot', icon: item.selected ? 'check' : (item.icon || 'none'), rightIcon: Array.isArray(item.children) && item.children.length
                                             ? 'chevron-right'
                                             : item.badgeCount

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

@@ -144,15 +144,15 @@ export default function Tooltip(props) {
            굴림을 **capture** 로 받아, 굴리는 동안 틀마다 여러 번 `computePosition` 이 돌았다(거기서 레이아웃을
            읽는다). **닫는 길은 안 미룬다** — 아래 `onScroll` 의 닫기는 그대로 즉시다. 미루면 앵커에서 떨어진
            툴팁이 한 틀 더 허공에 남는다. 미루는 것은 *자리* 뿐이다. */
-        let 예약 = null;
+        let rafId = null;
         const onWindowChange = () => {
             if (typeof requestAnimationFrame === 'undefined') {
                 computePosition(true);
                 return;
             }
-            if (예약 !== null)
+            if (rafId !== null)
                 return;
-            예약 = requestAnimationFrame(() => { 예약 = null; computePosition(true); });
+            rafId = requestAnimationFrame(() => { rafId = null; computePosition(true); });
         };
         /* 고정 사각형(anchorRect)으로 띄운 툴팁은 스크롤해도 앵커를 따라갈 수 없다 — 같은 자리를 다시 계산해 **허공에** 남았다
            (목록을 굴리면 카드 메뉴가 카드에서 떨어져 뜬 채). 닫을 곳(onClose)이 있으면 닫는다. 툴팁 안 스크롤은 제외. */
@@ -175,8 +175,8 @@ export default function Tooltip(props) {
         window.addEventListener('resize', onWindowChange);
         document.addEventListener('scroll', onScroll, { passive: true, capture: true });
         return () => {
-            if (예약 !== null)
-                cancelAnimationFrame(예약);
+            if (rafId !== null)
+                cancelAnimationFrame(rafId);
             window.removeEventListener('resize', onWindowChange);
             document.removeEventListener('scroll', onScroll, { capture: true });
         };
@@ -218,9 +218,9 @@ export default function Tooltip(props) {
     // 배경 자신의 onClick 과 document 바깥클릭 감지가 함께 걸려 실제로 onClose 가 두 번
     // 불렸다. ref 로 "이미 닫는 중"을 즉시 표시해 한 번만 지나가게 한다(Popup 과 같은 방식).
     const closingRef = useRef(false);
-    const 닫기타이머Ref = useRef(null);
+    const closeTimerRef = useRef(null);
     /* '동작 줄이기' 면 닫기 대기를 0 으로(페이드가 없으니 기다릴 까닭도 없다) */
-    const 동작줄이기 = usePrefersReducedMotion();
+    const reducedMotion = usePrefersReducedMotion();
     const startClose = useCallback((immediate = false) => {
         /* 닫기를 넘길 곳(onClose)이 없으면 아무것도 하지 않는다. 예전에는 그래도 is-closing 을
            붙여, 부모가 치우지 않는 툴팁이 **흐려진 채 사라진 것처럼** 그 자리에 남았다
@@ -246,8 +246,8 @@ export default function Tooltip(props) {
         }
         setClosing(true);
         // 떠날 때 걷는다 — ESC 로 닫는 200ms 안에 부모가 치우면 떠난 뒤에 onClose 가 불렸다
-        닫기타이머Ref.current = setTimeout(() => {
-            닫기타이머Ref.current = null;
+        closeTimerRef.current = setTimeout(() => {
+            closeTimerRef.current = null;
             try {
                 if (onClose)
                     onClose();
@@ -256,10 +256,10 @@ export default function Tooltip(props) {
                 closingRef.current = false;
                 setClosing(false);
             }
-        }, 동작줄이기 ? 0 : 200);
-    }, [closing, onClose, setClosing, 동작줄이기]);
-    useEffect(() => () => { if (닫기타이머Ref.current)
-        clearTimeout(닫기타이머Ref.current); }, []);
+        }, reducedMotion ? 0 : 200);
+    }, [closing, onClose, setClosing, reducedMotion]);
+    useEffect(() => () => { if (closeTimerRef.current)
+        clearTimeout(closeTimerRef.current); }, []);
     useEffect(() => {
         /* 제자리(글 흐름 안)에 그린 툴팁은 떠 있는 층이 아니라 본문의 한 조각이다 — document 의
            바깥 누름·Esc·Tab 을 듣지 않는다. 들으면 화면 아무 데나 누르거나 Esc 를 칠 때마다
@@ -372,25 +372,25 @@ export default function Tooltip(props) {
        **조작이 있을 때만** 옮긴다 — 글만 있는 풍선(`InfoTooltip`·`DescriptionTooltip`)에서
        초점을 뺏으면 읽던 자리를 잃는다. **재고 난 뒤**에 옮긴다: 재기 전에는
        `visibility: hidden` 이라 초점이 안 선다. */
-    const 열기전초점 = useRef(null);
+    const focusBeforeOpenRef = useRef(null);
     useEffect(() => {
         if (isInline || focusOnOpen === false || !measured)
             return;
         const el = ref.current;
         if (!el)
             return;
-        const 첫조작 = el.querySelector(FOCUSABLE_SELECTOR);
-        if (!첫조작)
+        const firstFocusable = el.querySelector(FOCUSABLE_SELECTOR);
+        if (!firstFocusable)
             return;
-        열기전초점.current = document.activeElement;
-        첫조작.focus();
+        focusBeforeOpenRef.current = document.activeElement;
+        firstFocusable.focus();
         return () => {
-            const 돌아갈곳 = 열기전초점.current;
-            열기전초점.current = null;
+            const returnTo = focusBeforeOpenRef.current;
+            focusBeforeOpenRef.current = null;
             /* 닫을 때 **열었던 자리로 돌려준다** — 안 돌려주면 초점이 `body` 로 떨어져
                자판 쓰는 사람이 처음부터 다시 Tab 해야 한다. 그 사이 사라진 마디면 안 옮긴다. */
-            if (돌아갈곳 && document.contains(돌아갈곳))
-                돌아갈곳.focus();
+            if (returnTo && document.contains(returnTo))
+                returnTo.focus();
         };
     }, [isInline, focusOnOpen, measured]);
     /* 이름 없는 `role="dialog"` 는 낭독기가 "대화상자" 라고만 읽는다 — 무슨 창인지 알 수 없다.

package/dist/packages/core/src/components/Tooltip/TrainingTooltip.js

@@ -32,15 +32,15 @@ export default function TrainingTooltip({ plan, groups: givenGroups, anchorRect,
            (111) 을 넣으며 한 번 "찾은 자료가 있어야" 로 바꿨다가 옛 못 넷이 울었다 — 풀에 없는 항목만 든
            계획에도 상자는 떠야 한다(타일 호버가 그 상자를 기다린다). 두 길의 "빈 묶음" 기준이 다른 까닭이다. */
         return translateTrainingTypes(t).map(type => {
-            const 고른것 = (plan?.items ?? []).filter(i => i.trainingType === type.key);
+            const picked = (plan?.items ?? []).filter(i => i.trainingType === type.key);
             return {
                 key: type.key,
                 label: type.label,
                 type,
-                고른수: 고른것.length,
-                data: 고른것.map(findTrainingData).filter((td) => td != null),
+                pickedCount: picked.length,
+                data: picked.map(findTrainingData).filter((td) => td != null),
             };
-        }).filter(g => g.고른수 > 0);
+        }).filter(g => g.pickedCount > 0);
     }, [givenGroups, plan?.items, t]);
     if (groups.length === 0)
         return null;

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

@@ -27,71 +27,71 @@ export default function TopBanner({ children, interval = 5000, dotTone, classNam
     /* 터치 — 누르는 동안과 뗀 뒤 5초는 멈춘다(배너 밖을 톡하면 곧바로 다시 돈다). 전에는 톡의 호환 mouseenter 로 멈추고 mouseleave 가
        안 와 영영 멈추거나, 누르고 읽는 사이 장이 넘어갔다. 마지막 포인터가 터치면 mouseenter 는 멈춤으로 치지 않는다. */
     const [touched, setTouched] = useState(false);
-    const 마지막포인터 = useRef(null);
-    const 터치타이머 = useRef(null);
+    const lastPointerType = useRef(null);
+    const touchTimer = useRef(null);
     const sectionRef = useRef(null);
     /* '동작 줄이기' — 저절로 넘어가는 장은 움직임이고 읽는 사이 내용이 바뀐다(WCAG 2.2.2). 자동 롤링을 끈다 */
-    const 동작줄이기 = usePrefersReducedMotion();
+    const reducedMotion = usePrefersReducedMotion();
     const paused = hovered || focused || touched;
     /* 슬라이드 수가 줄면 **지금 장을 범위 안으로 조인다** — `index % count` 는 3장 중 셋째(2)를 보다 2장이 되면 첫째(0)로 튀었다 */
     const current = count > 0 ? Math.min(index, count - 1) : 0;
     useEffect(() => {
-        if (count < 2 || interval <= 0 || paused || 동작줄이기)
+        if (count < 2 || interval <= 0 || paused || reducedMotion)
             return;
         const id = window.setInterval(() => setIndex(i => (Math.min(i, count - 1) + 1) % count), interval);
         return () => window.clearInterval(id);
-    }, [count, interval, paused, 동작줄이기]);
-    const 터치재개예약 = (ms) => {
-        if (터치타이머.current != null)
-            window.clearTimeout(터치타이머.current);
-        터치타이머.current = window.setTimeout(() => { 터치타이머.current = null; setTouched(false); }, ms);
+    }, [count, interval, paused, reducedMotion]);
+    const scheduleTouchResume = (ms) => {
+        if (touchTimer.current != null)
+            window.clearTimeout(touchTimer.current);
+        touchTimer.current = window.setTimeout(() => { touchTimer.current = null; setTouched(false); }, ms);
     };
-    useEffect(() => () => { if (터치타이머.current != null)
-        window.clearTimeout(터치타이머.current); }, []);
+    useEffect(() => () => { if (touchTimer.current != null)
+        window.clearTimeout(touchTimer.current); }, []);
     /* 배너 밖을 톡하면 곧바로 다시 돈다 */
     useEffect(() => {
         if (!touched)
             return;
-        const 밖톡 = (e) => {
+        const onOutsidePress = (e) => {
             if (e.pointerType !== 'touch')
                 return;
             if (sectionRef.current && sectionRef.current.contains(e.target))
                 return;
-            if (터치타이머.current != null) {
-                window.clearTimeout(터치타이머.current);
-                터치타이머.current = null;
+            if (touchTimer.current != null) {
+                window.clearTimeout(touchTimer.current);
+                touchTimer.current = null;
             }
             setTouched(false);
         };
-        document.addEventListener('pointerdown', 밖톡, true);
-        return () => document.removeEventListener('pointerdown', 밖톡, true);
+        document.addEventListener('pointerdown', onOutsidePress, true);
+        return () => document.removeEventListener('pointerdown', onOutsidePress, true);
     }, [touched]);
     if (count === 0)
         return null;
-    return (_jsxs("section", { ref: sectionRef, className: cx('top-banner', className), "aria-label": ariaLabel, "aria-roledescription": "carousel", onPointerEnter: (e) => { 마지막포인터.current = e.pointerType; }, onPointerDown: (e) => {
-            마지막포인터.current = e.pointerType;
+    return (_jsxs("section", { ref: sectionRef, className: cx('top-banner', className), "aria-label": ariaLabel, "aria-roledescription": "carousel", onPointerEnter: (e) => { lastPointerType.current = e.pointerType; }, onPointerDown: (e) => {
+            lastPointerType.current = e.pointerType;
             if (e.pointerType !== 'touch')
                 return;
-            if (터치타이머.current != null) {
-                window.clearTimeout(터치타이머.current);
-                터치타이머.current = null;
+            if (touchTimer.current != null) {
+                window.clearTimeout(touchTimer.current);
+                touchTimer.current = null;
             }
             setTouched(true);
         }, onPointerUp: (e) => { if (e.pointerType === 'touch')
-            터치재개예약(5000); }, onPointerCancel: (e) => { if (e.pointerType === 'touch')
-            터치재개예약(5000); }, onMouseEnter: () => { if (마지막포인터.current !== 'touch')
+            scheduleTouchResume(5000); }, onPointerCancel: (e) => { if (e.pointerType === 'touch')
+            scheduleTouchResume(5000); }, onMouseEnter: () => { if (lastPointerType.current !== 'touch')
             setHovered(true); }, onMouseLeave: () => setHovered(false), 
         /* 포커스 멈춤은 **보이는 포커스(:focus-visible)** 일 때만 — 마우스로 누른 단추(점·배너 단추)에 남은 포커스로 멈추면
            마우스가 떠난 뒤에도 영영 멈춰 있었다. 키보드로 들어온 포커스는 그대로 멈춘다(0545ddf) */
         onFocus: (e) => {
-            let 보임 = true;
+            let alive = true;
             try {
-                보임 = e.target.matches(':focus-visible');
+                alive = e.target.matches(':focus-visible');
             }
             catch {
-                보임 = true;
+                alive = true;
             }
-            setFocused(보임);
+            setFocused(alive);
         }, onBlur: (e) => { if (!e.currentTarget.contains(e.relatedTarget))
             setFocused(false); }, children: [_jsx("div", { className: "top-banner__viewport", children: _jsx("div", { className: "top-banner__track", style: { transform: `translateX(-${current * 100}%)` }, children: slides.map((slide, i) => (_jsx("div", { className: "top-banner__slide", "aria-hidden": i !== current, ...(i !== current ? { inert: true } : {}), children: slide }, i))) }) }), count > 1 && (_jsx("div", { className: `top-banner__dots${(dotTone?.[current] ?? 'light') === 'dark' ? ' top-banner__dots--dark' : ''}`, children: slides.map((_, i) => (_jsx("button", { type: "button", className: `top-banner__dot${i === current ? ' top-banner__dot--active' : ''}`, "aria-label": t('topBanner.dotAriaLabel', {
                         count, index: i + 1, defaultValue: `${count}개 중 ${i + 1}번째 배너`,

package/dist/packages/core/src/components/Training/AudioPlayerWaveForm.js

@@ -197,16 +197,16 @@ export default function WaveForm(props) {
      * 소리는 가운데 절반만 차지한다. 뜸이 0 이면 `{ lead: 0, sound: 전부, tail: 0 }` 이라
      * 아래 셈이 **전과 똑같이** 돈다.
      */
-    const 구간 = useMemo(() => padBarSpans({ bars: barsCountForMix, trackDurationSec, leadInMs, tailMs }), [barsCountForMix, trackDurationSec, leadInMs, tailMs]);
+    const bandCounts = useMemo(() => padBarSpans({ bars: barsCountForMix, trackDurationSec, leadInMs, tailMs }), [barsCountForMix, trackDurationSec, leadInMs, tailMs]);
     const bars = useMemo(() => Array.from({ length: barsCountForMix }).map((_, i) => {
         /* 뜸 구간 막대는 소리가 없다 — 봉우리 0. 그 자리는 **소음 파형이 채운다**(아래 바닥값).
            소리 구간은 봉우리를 그 폭에 다시 고른다(전에는 막대 번호가 곧 봉우리 번호였다). */
-        const 소리안 = i >= 구간.lead && i < 구간.lead + 구간.sound;
-        const 봉우리번호 = 구간.sound > 0 && 소리안
-            ? Math.min(barsCountForMix - 1, Math.round(((i - 구간.lead) / 구간.sound) * barsCountForMix))
+        const inSound = i >= bandCounts.lead && i < bandCounts.lead + bandCounts.sound;
+        const peakIndex = bandCounts.sound > 0 && inSound
+            ? Math.min(barsCountForMix - 1, Math.round(((i - bandCounts.lead) / bandCounts.sound) * barsCountForMix))
             : -1;
-        const peak = 소리안
-            ? (wavePeaks && wavePeaks[봉우리번호] != null ? wavePeaks[봉우리번호] : null)
+        const peak = inSound
+            ? (wavePeaks && wavePeaks[peakIndex] != null ? wavePeaks[peakIndex] : null)
             : (wavePeaks ? 0 : null);
         const eff = peak == null ? null : Math.min(1, (peak / sentenceMaxPeak) * mainAmp);
         // 로딩 시 placeholder(0.15); 계산 후엔 렌더 높이(waveBarPx)가 MIN_BAR_PX 이하면 숨김(0).
@@ -233,14 +233,14 @@ export default function WaveForm(props) {
            거기는 정말로 아무 소리도 안 난다.
            작은 막대를 숨기는 옛 규칙 하나만 남는다(소음이 있든 없든 같다). */
         const val = eff == null ? 0.15 : (belowMin ? 0 : waveBarVal(eff));
-        const 숨긴다 = belowMin;
+        const hidden = belowMin;
         // 가로 위치 비율(0=왼쪽 lightMain ~ 1=오른쪽 lightSub) — 바 색을 위치에 따라 믹스
         const mix = barsCountForMix > 1 ? i / (barsCountForMix - 1) : 0;
         const style = { ['--val']: val, ['--i']: i, ['--mix']: mix };
         // MIN_BAR_PX 이하로 숨겨지는 바는 최초 등장 애니메이션에서도 잠깐 비쳐 보이지 않도록 애니메이션 자체를 건너뛴다
-        const className = 숨긴다 ? 'audio-player__bar audio-player__bar--hidden' : 'audio-player__bar';
+        const className = hidden ? 'audio-player__bar audio-player__bar--hidden' : 'audio-player__bar';
         return _jsx("div", { className: className, style: style }, i);
-    }), [barsCountForMix, wavePeaks, sentenceMaxPeak, mainAmp, waveHeightPx, 구간]);
+    }), [barsCountForMix, wavePeaks, sentenceMaxPeak, mainAmp, waveHeightPx, bandCounts]);
     // 초기 progress CSS 변수 값 (React 상태 기준 — RAF 루프가 이후 직접 갱신합니다)
     const progressStyle = { '--progress': String(Math.max(0, Math.min(1, progress))) };
     // 컨테이너 실제 폭에 맞춰 정밀 계산한 바 간격 — outer에 걸어 .audio-player__wave-inner 등
@@ -292,10 +292,10 @@ export default function WaveForm(props) {
      * **정말로** 문장보다 커질 때만 자라고, 그때는 그 큰 막대가 꼭대기에 닿는다.
      */
     /* 가장 큰 소음 막대가 `M × R` 이므로((89)) 그것이 곧 그릴 최대다 — 소음이 아직 안 왔으면 1 */
-    const 그릴최대 = (!noiseSrc || !noisePeaks || !noisePeaks.length) ? 1 : Math.max(1, noiseAmp);
+    const drawMax = (!noiseSrc || !noisePeaks || !noisePeaks.length) ? 1 : Math.max(1, noiseAmp);
     const outerStyle = {
         '--bar-gap': `${barGap}px`,
-        '--wave-h': `${waveBarPx(그릴최대)}px`,
+        '--wave-h': `${waveBarPx(drawMax)}px`,
         '--wave-h1': `${WAVE_H1_PX}px`,
     };
     const noiseReady = !!noisePeaks;

package/dist/packages/core/src/components/Training/CategoryIcon.js

@@ -32,7 +32,7 @@ export default function CategoryIcon({ icon, label, tooltip, wrapperStyle, color
      * 서면 (105) 의 반대 거짓이다. 그래서 **말풍선이 설 때만** 이 표를 붙이고, 호버 테두리는
      * `--interactive` 에만 산다. 보여 줄 글이 없으면(`tipText` 없음) 올려도 아무 일이 없으니 표도 없다.
      */
-    const 반응하나 = useHover && Boolean(tipText);
+    const interactive = useHover && Boolean(tipText);
     const [anchorRect, setAnchorRect] = useState(null);
     useLayoutEffect(() => {
         if (hover)
@@ -85,5 +85,5 @@ export default function CategoryIcon({ icon, label, tooltip, wrapperStyle, color
             setHover(v => !v);
         }
     }, []);
-    return (_jsxs("span", { ref: ref, className: cx('category-icon__wrap', 반응하나 && 'category-icon__wrap--interactive'), onPointerEnter: handleHoverOn, onPointerLeave: handleHoverOff, onFocus: handleHoverOn, onBlur: handleHoverOff, onKeyDown: handleKeyDown, role: "button", tabIndex: 0, "aria-label": typeof tipText === 'string' ? t('common.descriptionFor', { name: tipText, defaultValue: `${tipText} 설명` }) : undefined, "aria-haspopup": !!tipText, "aria-expanded": hover, "data-tooltip-ignore": true, children: [_jsx(Icon, { icon: icon, label: label, className: cls, imgClassName: "category-icon__image", maskClassName: "category-icon__mask", svgClassName: "category-icon__svg", wrapperStyle: resolvedWrapperStyle, size: svgSize }), hover && tipText && (_jsx(InfoTooltip, { anchorRect: anchorRect, text: typeof tipText === 'string' ? tipText : undefined, offset: 8, onClose: handleTooltipClose, className: "category-icon__tooltip", ariaLabel: typeof tipText === 'string' ? tipText : undefined }))] }));
+    return (_jsxs("span", { ref: ref, className: cx('category-icon__wrap', interactive && 'category-icon__wrap--interactive'), onPointerEnter: handleHoverOn, onPointerLeave: handleHoverOff, onFocus: handleHoverOn, onBlur: handleHoverOff, onKeyDown: handleKeyDown, role: "button", tabIndex: 0, "aria-label": typeof tipText === 'string' ? t('common.descriptionFor', { name: tipText, defaultValue: `${tipText} 설명` }) : undefined, "aria-haspopup": !!tipText, "aria-expanded": hover, "data-tooltip-ignore": true, children: [_jsx(Icon, { icon: icon, label: label, className: cls, imgClassName: "category-icon__image", maskClassName: "category-icon__mask", svgClassName: "category-icon__svg", wrapperStyle: resolvedWrapperStyle, size: svgSize }), hover && tipText && (_jsx(InfoTooltip, { anchorRect: anchorRect, text: typeof tipText === 'string' ? tipText : undefined, offset: 8, onClose: handleTooltipClose, className: "category-icon__tooltip", ariaLabel: typeof tipText === 'string' ? tipText : undefined }))] }));
 }