@ihabdevteam/core 0.133.0 → 0.134.0

package/dist/ihabdevteam-core.d.ts

@@ -1308,7 +1308,7 @@ export declare interface ContrastFilterPanelProps {
 }
 
 /** 모드 전환 시 composition의 초성/모음/종성을 대상 모드 값으로 변환. 종성 '없음'(NO_CODA)은 유지. */
-export declare function convertComposition(c: WordComposition, to: 'char' | 'pron', preferredCharJung?: string | null): WordComposition;
+export declare function convertComposition(c: WordComposition, to: 'char' | 'pron', preferredCharJung?: string | null, preferredCharJong?: string | null): WordComposition;
 
 /**
  * 텍스트를 클립보드에 복사. 성공 여부를 boolean으로 반환.
@@ -1369,7 +1369,7 @@ export declare function copyText(text: string): Promise<boolean>;
  *
  * 값은 손으로 적고 `test/coreVersion.test.ts` 가 package.json 과 어긋나면 운다.
  */
-export declare const CORE_VERSION = "0.133.0";
+export declare const CORE_VERSION = "0.134.0";
 
 /** @public */
 declare const coreDefault: Record<string, unknown>;
@@ -3794,6 +3794,12 @@ export declare interface PaymentPlanTier {
      * 구매 횟수가 제한되지 않는다(같은 프로모션이되 1회 제한 대상은 아닌 tier용).
      */
     openPromo?: boolean;
+    /**
+     * **계정당 1회만 살 수 있는 tier**(오픈 특가 30일 등). 이미 산 것(`ownedCodes`)이면 숨기고 기본 tier 를 카드로 올린다.
+     * 안 주면 예전처럼 라벨에 '오픈 특가' 가 있는지로 판정한다 — 그런데 라벨은 번역되므로 영어 화면에서는 판정이 실패해
+     * 이미 산 특가 카드가 남고 정가 30일권을 살 길이 없어진다. 번역되는 라벨 대신 이 값을 넘긴다.
+     */
+    onceOnly?: boolean;
     [k: string]: unknown;
 }
 

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

@@ -1,9 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation } from 'react-i18next';
 import './Breadcrumb.css';
 import Icon from './Icon';
 /** @public */
 export default function Breadcrumb({ items, className = '' }) {
-    return (_jsx("nav", { className: `breadcrumb ${className}`.trim(), "aria-label": "breadcrumb", children: _jsx("ol", { className: "breadcrumb__list", children: items.map((item, index) => {
+    const { t } = useTranslation();
+    return (
+    /* 영어로 박혀 있어 한국어 화면에서도 낭독기가 "breadcrumb" 이라고 읽었다 — 사전을 탄다 */
+    _jsx("nav", { className: `breadcrumb ${className}`.trim(), "aria-label": t('breadcrumb.ariaLabel', '이동 경로'), children: _jsx("ol", { className: "breadcrumb__list", children: items.map((item, index) => {
                 const isLast = index === items.length - 1;
                 return (_jsxs("li", { className: "breadcrumb__item", children: [isLast ? (_jsx("span", { className: "breadcrumb__current body-3", "aria-current": "page", children: item.label })) : (_jsx("button", { type: "button", className: "breadcrumb__link body-3", onClick: item.onClick, children: item.label })), !isLast && (_jsx(Icon, { icon: "chevron-right", size: 14, className: "breadcrumb__separator" }))] }, index));
             }) }) }));

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

@@ -4,6 +4,7 @@ import { useCallback, useEffect, useId, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { createPortal } from 'react-dom';
 import { cx } from '../utils/cx';
+import { lockBodyScroll } from '../hooks/bodyScrollLock';
 import { pushEsc } from '../hooks/escStack';
 import { useFocusTrap } from '../hooks/useFocusTrap';
 import './Dialog.css';
@@ -39,12 +40,18 @@ export default function Dialog({ open, onClose, ariaLabel, title, children, size
         if (!open)
             return;
         const 돌아갈곳 = document.activeElement;
-        const { overflow } = document.body.style;
-        document.body.style.overflow = 'hidden';
-        surfaceRef.current?.focus();
+        /* 스크롤 잠금은 **공유 카운터**(Popup·TrainingPagePopup 과 같은 것)로 — 전에는 body.style.overflow 를 제 손으로
+           기억했다 되돌려, Dialog 위에 Popup 을 열고 Dialog 를 먼저 닫으면 Popup 이 떠 있는데 스크롤이 풀리고, 이어 Popup 을
+           닫으면 overflow:hidden 으로 영영 굳었다. */
+        const 풀기 = lockBodyScroll();
+        const 판 = surfaceRef.current;
+        판?.focus();
         return () => {
-            document.body.style.overflow = overflow;
-            돌아갈곳?.focus?.();
+            풀기();
+            // 포커스가 이 창 안이거나 갈 곳을 잃었을 때만 되돌린다 — 이미 다른 창으로 옮겨 갔으면 빼앗지 않는다(Popup 과 같다)
+            const 지금 = document.activeElement;
+            if (!지금 || 지금 === document.body || (판 && 판.contains(지금)))
+                돌아갈곳?.focus?.();
         };
     }, [open]);
     /* ESC 는 **공유 스택**에 맡긴다 — 예전에는 window 에서 직접 들었다.
@@ -53,11 +60,21 @@ export default function Dialog({ open, onClose, ariaLabel, title, children, size
        **아래 팝업이 닫히고 이 확인창만 남는** 꼴이다 — 닫으려던 것은 그대로 있고
        뒤에 있던 화면이 사라진다.
        스택에 올리면 맨 위 하나만 닫힌다(그것이 이 창이다). */
+    /* 스택에는 **열릴 때 한 번** 올린다 — handleClose 가 바뀔 때마다(인라인 onClose) 다시 올리면 맨 위로 끼어들어, 위에
+       팝업이 떠 있어도 Esc 가 이 창을 닫았다. closeOnEscape={false} 라도 올려서 Esc 를 **삼킨다** — 안 올리면 이 창
+       아래에 가려진 팝업이 닫혔다(모달은 제 아래를 지킨다). */
+    const closeRef = useRef(handleClose);
+    const escRef = useRef(closeOnEscape);
+    useEffect(() => { closeRef.current = handleClose; escRef.current = closeOnEscape; });
     useEffect(() => {
-        if (!open || !closeOnEscape)
+        if (!open)
             return;
-        return pushEsc(handleClose);
-    }, [open, closeOnEscape, handleClose]);
+        return pushEsc(() => { if (escRef.current)
+            closeRef.current(); });
+    }, [open]);
+    /* 바탕 누르기 — 누른 곳과 뗀 곳이 **둘 다 바탕일 때만** 닫는다(Popup 0.128.0 과 같다). 판 안에서 글자를 긁어
+       고르다 바깥에서 놓으면 click 이 공통 조상(바탕)에 떨어져 창이 닫혔다. */
+    const 바탕에서누름 = useRef(false);
     /* Tab 을 이 판 안에 가둔다 — `aria-modal="true"` 는 **낭독기에게만** 통한다.
        눈으로 보며 Tab 을 누르는 사람은 그 표시를 못 보므로, 가둠이 없으면 마지막
        단추 다음에서 **뒤 화면**으로 빠져나간다. 실제로 그랬다: 놀이터
@@ -67,5 +84,11 @@ export default function Dialog({ open, onClose, ariaLabel, title, children, size
     useFocusTrap(surfaceRef, open);
     if (!open || typeof document === 'undefined')
         return null;
-    return createPortal(_jsx("div", { className: cx('dialog', className), onClick: closeOnBackdrop ? handleClose : undefined, children: _jsxs("div", { ref: surfaceRef, role: "dialog", "aria-modal": "true", "aria-label": title ? undefined : ariaLabel, "aria-labelledby": title ? titleId : undefined, tabIndex: -1, className: cx('dialog__surface', `dialog__surface--${size}`, contentClassName), onClick: (e) => e.stopPropagation(), children: [title ? (_jsx("div", { className: "dialog__header", children: _jsx("h2", { id: titleId, className: "dialog__title h4b", children: title }) })) : null, showClose ? (_jsx("button", { type: "button", className: "dialog__close", "aria-label": t('common.close', '닫기'), onClick: handleClose, children: _jsx(CloseIcon, {}) })) : null, _jsx("div", { className: "dialog__body", children: children })] }) }), document.body);
+    return createPortal(_jsx("div", { className: cx('dialog', className), onPointerDown: closeOnBackdrop ? (e) => { 바탕에서누름.current = e.target === e.currentTarget; } : undefined, onMouseDown: (e) => { if (e.target === e.currentTarget)
+            e.preventDefault(); }, onClick: closeOnBackdrop ? (e) => {
+            const 눌렀나 = 바탕에서누름.current;
+            바탕에서누름.current = false;
+            if (눌렀나 && e.target === e.currentTarget)
+                handleClose();
+        } : undefined, children: _jsxs("div", { ref: surfaceRef, role: "dialog", "aria-modal": "true", "aria-label": title ? undefined : ariaLabel, "aria-labelledby": title ? titleId : undefined, tabIndex: -1, className: cx('dialog__surface', `dialog__surface--${size}`, contentClassName), onClick: (e) => e.stopPropagation(), children: [title ? (_jsx("div", { className: "dialog__header", children: _jsx("h2", { id: titleId, className: "dialog__title h4b", children: title }) })) : null, showClose ? (_jsx("button", { type: "button", className: "dialog__close", "aria-label": t('common.close', '닫기'), onClick: handleClose, children: _jsx(CloseIcon, {}) })) : null, _jsx("div", { className: "dialog__body", children: children })] }) }), document.body);
 }

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

@@ -21,6 +21,8 @@
   display: none;
   background: transparent;
   border: none;
+  /* 읽지 않은 알림 배지(top-right)의 기준 — SideNav 알림 단추(.side-nav__notification-wrap)와 같다 */
+  position: relative;
 }
 
 .header__bottom {

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

@@ -5,6 +5,7 @@ import { useTranslation } from 'react-i18next';
 import { useMediaQuery } from '../hooks';
 import BottomNav from './BottomNav';
 import Button from './Button';
+import Badge from './Badge';
 import MenuTooltip from './Tooltip/MenuTooltip';
 import { useAnchoredMenu } from '../hooks/useAnchoredMenu';
 import { createPortal } from 'react-dom';
@@ -112,7 +113,9 @@ export default function Header({ activeKey, onChange, items, malgwiItems: _malgw
                 onClick: () => { it.onClick?.(); closeUtilMenu(); },
             })),
         }], [bottomMoreItems, activeKey, closeUtilMenu]);
-    return (_jsxs("aside", { className: `header${appMode === 'manager' ? ' header--manager' : ''}`, children: [_jsxs("div", { className: "header__bi", children: [_jsx(BrandIdentity, { appMode: appMode }), _jsxs("div", { className: "header__menu-button", ref: utilTriggerRef, children: [_jsx(Button, { htmlType: "button", size: 48, type: "dot", shape: "pill", variant: "default", icon: 'menu', ariaLabel: t('header.menuOpen', '메뉴 열기'), onClick: toggleUtilMenu, "aria-expanded": utilOpen, "aria-controls": utilOpen ? utilMenuId : undefined }), utilOpen && createPortal(_jsx("div", { id: utilMenuId, role: "group", "aria-label": t('header.utilMenu', '유틸리티 메뉴'), className: "tooltip-content", style: utilMenuStyle, ref: utilMenuRef, children: _jsx(MenuTooltip, { columns: utilColumns, onClose: closeUtilMenu }) }), document.body)] })] }), _jsx(SideNav, { items: items, activeKey: activeKey ?? undefined, onChange: onChange, unreadCount: unreadCount, onDebug: onDebug, onNotification: onNotification, onAccount: onAccount, onSetting: onSetting, onHelp: onHelp, appMode: appMode, onAppModeChange: onAppModeChange }), isMobile && _jsx(BottomNav, { items: bottomItems, activeKey: activeKey ?? undefined, onChange: handleBottomChange, appMode: appMode, onAppModeChange: onAppModeChange })] }));
+    return (_jsxs("aside", { className: `header${appMode === 'manager' ? ' header--manager' : ''}`, children: [_jsxs("div", { className: "header__bi", children: [_jsx(BrandIdentity, { appMode: appMode }), _jsxs("div", { className: "header__menu-button", ref: utilTriggerRef, children: [_jsx(Button, { htmlType: "button", size: 48, type: "dot", shape: "pill", variant: "default", icon: 'menu', ariaLabel: onNotification && unreadCount && unreadCount > 0
+                                    ? t('nav.badgeLabel', { label: t('header.menuOpen', '메뉴 열기'), count: unreadCount, defaultValue: '{{label}}, {{count}}개' })
+                                    : t('header.menuOpen', '메뉴 열기'), onClick: toggleUtilMenu, "aria-expanded": utilOpen, "aria-controls": utilOpen ? utilMenuId : undefined }), !!onNotification && !!unreadCount && unreadCount > 0 && (_jsx(Badge, { type: "dot", number: Math.min(unreadCount, 99), size: 24, "aria-hidden": true })), utilOpen && createPortal(_jsx("div", { id: utilMenuId, role: "group", "aria-label": t('header.utilMenu', '유틸리티 메뉴'), className: "tooltip-content", style: utilMenuStyle, ref: utilMenuRef, children: _jsx(MenuTooltip, { columns: utilColumns, onClose: closeUtilMenu }) }), document.body)] })] }), _jsx(SideNav, { items: items, activeKey: activeKey ?? undefined, onChange: onChange, unreadCount: unreadCount, onDebug: onDebug, onNotification: onNotification, onAccount: onAccount, onSetting: onSetting, onHelp: onHelp, appMode: appMode, onAppModeChange: onAppModeChange }), isMobile && _jsx(BottomNav, { items: bottomItems, activeKey: activeKey ?? undefined, onChange: handleBottomChange, appMode: appMode, onAppModeChange: onAppModeChange })] }));
 }
 /**
  * `Header`의 alias입니다. 프로젝트 내 `Header`라는 이름이 이미 사용 중일 때 충돌 없이 임포트할 수 있습니다.

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

@@ -1,6 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useId, useState } from 'react';
+import { useEffect, useId, useState } from 'react';
+import { pushEsc } from '../hooks/escStack';
 import './LandingHeader.css';
 /**
  * 랜딩/마케팅 페이지용 상단 고정 헤더.
@@ -22,6 +23,22 @@ export default function LandingHeader({ logo, logoAlt = '', logoHref, links = []
     // 서랍 id 를 고정 문자열로 두면 한 화면에 헤더가 둘일 때(미리보기·놀이터 견본) id 가 겹쳐
     // 햄버거의 aria-controls 가 엉뚱한 서랍을 가리킨다 — 헤더마다 따로 짓는다.
     const drawerId = useId();
+    /* 서랍이 열려 있으면 Esc 로 닫는다(공유 ESC 스택 — 맨 위 하나만). 넓은 화면(961px~, 서랍이 CSS 로 숨는 폭)으로 가면
+       닫는다 — 안 닫으면 open 이 남아 좁은 폭으로 돌아오는 순간 서랍이 다시 펼쳐졌다. */
+    useEffect(() => {
+        if (!open)
+            return;
+        const 풀기 = pushEsc(() => setOpen(false));
+        const mq = typeof window !== 'undefined' && window.matchMedia ? window.matchMedia('(min-width: 961px)') : null;
+        const 넓어짐 = (e) => { if (e.matches)
+            setOpen(false); };
+        if (mq) {
+            if (mq.matches)
+                setOpen(false);
+            mq.addEventListener?.('change', 넓어짐);
+        }
+        return () => { 풀기(); mq?.removeEventListener?.('change', 넓어짐); };
+    }, [open]);
     const innerClass = containerClassName
         ? `${containerClassName} landing-header__inner`
         : 'landing-header__inner';

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

@@ -14,7 +14,10 @@ export default function Pagination({ page, totalPages, onChange, prevLabel, next
     const { t } = useTranslation();
     const resolvedPrev = prevLabel ?? t('common.prevPage', '이전 페이지');
     const resolvedNext = nextLabel ?? t('common.nextPage', '다음 페이지');
-    const handlePrev = () => onChange(Math.max(1, page - 1));
-    const handleNext = () => onChange(Math.min(totalPages, page + 1));
+    /* 범위 밖 쪽(page > totalPages — 결과가 줄어든 직후)에서도 '이전' 이 범위 안으로 돌아오게 먼저 조인다.
+       전에는 page-1 이 여전히 totalPages 보다 커 눌러도 범위 밖에 머물렀다. */
+    const 마지막 = Math.max(1, totalPages);
+    const handlePrev = () => onChange(Math.max(1, Math.min(마지막, page - 1)));
+    const handleNext = () => onChange(Math.min(마지막, page + 1));
     return (_jsxs("div", { className: cx('pagination', className), children: [_jsx(Button, { htmlType: "button", size: 32, type: "dot", shape: "rounded", icon: "chevron-left", ariaLabel: resolvedPrev, disabled: page <= 1, onClick: handlePrev }), _jsxs("span", { className: "pagination__info body-3", children: [page, " / ", totalPages] }), _jsx(Button, { htmlType: "button", size: 32, type: "dot", shape: "rounded", icon: "chevron-right", ariaLabel: resolvedNext, disabled: page >= totalPages, onClick: handleNext })] }));
 }

package/dist/packages/core/src/components/Panel.d.ts

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import { type ReactNode } from 'react';
 import './Panel.css';
 type PanelSize = 'small' | 'medium' | 'large';
 interface PanelProps {

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

@@ -2,6 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cx } from '../utils/cx';
 import { PanelRow } from './PanelRow';
+import { Children } from 'react';
 import Icon from './Icon';
 import './Panel.css';
 export default function Panel({ title, icon, disc, actions, size = 'medium', minHeight, maxWidth, className, scrollable, useBorder = true, useBg = true, useRowBorder = true, labelWidth, form = false, loading, empty, children }) {
@@ -15,7 +16,9 @@ export default function Panel({ title, icon, disc, actions, size = 'medium', min
         style.maxWidth = typeof maxWidth === 'number' ? `${maxWidth}px` : maxWidth;
     if (labelWidth !== undefined)
         style['--panel-label-width'] = typeof labelWidth === 'number' ? `${labelWidth}px` : labelWidth;
-    return (_jsxs("div", { className: cls, style: Object.keys(style).length ? style : undefined, children: [(title != null || disc != null) && (_jsxs("div", { className: cx('panel__header', disc != null ? 'panel__header--with-disc' : ''), children: [icon && (_jsx(Icon, { icon: icon, label: typeof title === 'string' ? title : undefined, className: "panel__icon" })), _jsxs("div", { className: "panel__title-group", children: [title != null && (_jsx("h2", { className: `panel__title ${disc != null ? 'body-3b' : 'h5b'}`, children: title })), disc != null && _jsx("p", { className: "panel__disc caption-1", children: disc })] }), actions && _jsx("div", { className: "panel__actions", children: actions })] })), loading ? (_jsx(PanelRow, { variant: "loading" })) : empty != null && (children == null || (Array.isArray(children) && children.length === 0)) ? (_jsx(PanelRow, { variant: "empty", children: empty })) : scrollable ? (_jsx("div", { className: "panel__body--scroll", children: children })) : children] }));
+    return (_jsxs("div", { className: cls, style: Object.keys(style).length ? style : undefined, children: [(title != null || disc != null) && (_jsxs("div", { className: cx('panel__header', disc != null ? 'panel__header--with-disc' : ''), children: [icon && (_jsx(Icon, { icon: icon, label: typeof title === 'string' ? title : undefined, className: "panel__icon" })), _jsxs("div", { className: "panel__title-group", children: [title != null && (_jsx("h2", { className: `panel__title ${disc != null ? 'body-3b' : 'h5b'}`, children: title })), disc != null && _jsx("p", { className: "panel__disc caption-1", children: disc })] }), actions && _jsx("div", { className: "panel__actions", children: actions })] })), loading ? (_jsx(PanelRow, { variant: "loading" })
+            /* 비었는지는 React 가 그리는 것으로 센다 — `{조건 && 행들}` 이 false 면 children 이 false 라 빈 상태 문구가 안 떴다 */
+            ) : empty != null && Children.toArray(children).length === 0 ? (_jsx(PanelRow, { variant: "empty", children: empty })) : scrollable ? (_jsx("div", { className: "panel__body--scroll", children: children })) : children] }));
 }
 // ── PanelGrid ──────────────────────────────────────────────────────────────
 /** @public */

package/dist/packages/core/src/components/PassCard/passCardProduct.js

@@ -24,6 +24,12 @@ function derivePlan(p) {
     const nm = name.match(/(\d+\s*(?:년|개월|주|일))\s*(?:이용권)?\s*$/);
     if (nm)
         return nm[1].replace(/\s+/g, '');
+    /* 영어 이름('Open Special 30-Day Plan'·'1-Year Plan')에서도 일·년 기간을 뽑는다 — 한국어 꼴만 봐서 영어 화면(말귀 랜딩
+       요금 카드는 code 를 안 넘긴다)에서는 이름 전체가 큰 글씨로 찍히고 뒤에 등급 이름이 또 붙었다. 돌려주는 토큰은 위와 같은
+       '30일'·'1년' 꼴이다 — PassCard 가 숫자와 단위로 쪼개 단위를 passCard.unitDay·unitYear 로 번역한다. */
+    const en = name.match(/(\d+)\s*-?\s*(day|year)s?\b/i);
+    if (en)
+        return en[2].toLowerCase() === 'year' ? `${en[1]}년` : `${en[1]}일`;
     return name || '이용권';
 }
 /**

package/dist/packages/core/src/components/PaymentPlan.d.ts

@@ -20,6 +20,12 @@ export interface PaymentPlanTier {
      * 구매 횟수가 제한되지 않는다(같은 프로모션이되 1회 제한 대상은 아닌 tier용).
      */
     openPromo?: boolean;
+    /**
+     * **계정당 1회만 살 수 있는 tier**(오픈 특가 30일 등). 이미 산 것(`ownedCodes`)이면 숨기고 기본 tier 를 카드로 올린다.
+     * 안 주면 예전처럼 라벨에 '오픈 특가' 가 있는지로 판정한다 — 그런데 라벨은 번역되므로 영어 화면에서는 판정이 실패해
+     * 이미 산 특가 카드가 남고 정가 30일권을 살 길이 없어진다. 번역되는 라벨 대신 이 값을 넘긴다.
+     */
+    onceOnly?: boolean;
     [k: string]: unknown;
 }
 /** @public */

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

@@ -43,7 +43,8 @@ export default function PaymentPlan(props) {
     const { plan, onSelect, period = "monthly", ownedCodes } = props || {};
     const owned = (code) => !!code && !!ownedCodes?.includes(code);
     // 이 플랜의 오픈특가 tier를 이미 보유(구매)했는지 — 그러면 기본 tier를 카드로 승격
-    const openSoldOut = (plan.tiers || []).some(tr => /오픈\s*특가/.test(tr.label ?? '') && owned(tr.code));
+    const isOnceOnlyTier = (tr) => tr.onceOnly ?? /오픈\s*특가/.test(tr.label ?? '');
+    const openSoldOut = (plan.tiers || []).some(tr => isOnceOnlyTier(tr) && owned(tr.code));
     // 할인 tier 가 정가를 취소선으로 이미 보여 주면, 같은 값을 가진 정가 행은 같은 상품을 두 번
     // 늘어놓는 셈이 된다(30일 이용권 ₩10,000 행 + 30일 ₩10,000→₩5,000 카드). 그 행은 숨긴다.
     const coveredByDiscount = (tier) => {
@@ -61,7 +62,8 @@ export default function PaymentPlan(props) {
     const tierPriceOf = (tier) => (tier.prices ? tier.prices[period] : tier.price);
     const isFree = (plan.tiers || []).length > 0 && (plan.tiers || []).every(tier => {
         const price = tierPriceOf(tier);
-        return price === "무료" || price === freePrice || price === "0원";
+        // 숫자가 모두 0 인 가격도 무료다 — '₩0'·'$0.00' 처럼 로케일마다 표기가 달라 '무료'·'0원' 글자만 보면 영어 화면에서 놓쳤다
+        return price === "무료" || price === freePrice || price === "0원" || (typeof price === 'string' && /\d/.test(price) && !/[1-9]/.test(price));
     });
     // 맞춤 견적(문의) 플랜 — 가격이 '문의'(ko) 또는 로케일 견적 문구
     const isInquiry = (plan.tiers || []).length > 0 && (plan.tiers || []).every(tier => {
@@ -85,7 +87,7 @@ export default function PaymentPlan(props) {
                                읽는** 것이라 한국어 그대로여야 한다. */
                             const rawLabel = tier.label || 기본이용권;
                             // 라벨의 '오픈 특가'는 계정당 1회 제한의 표시다 — 숨김·소진 판정에만 쓴다.
-                            const isOnceOnly = /오픈\s*특가/.test(rawLabel);
+                            const isOnceOnly = isOnceOnlyTier(tier);
                             // 배지 문구는 별도 — 같은 프로모션이되 1회 제한은 없는 tier(1년권)도 함께 얹는다.
                             const showOpenPromo = isOnceOnly || tier.openPromo === true;
                             const planText = rawLabel.replace(/^오픈\s*특가\s*/, '') || 기본이용권;

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

@@ -65,7 +65,7 @@ export default function PromoBanner({ title, description, actionLabel, onAction,
      */
     const cls = cx('promo-banner', `promo-banner--${size}`, className);
     const Bg = PROMO_BANNER_BG_COMPONENTS[resolvedBg];
-    return (_jsxs("div", { ref: rootRef, className: cls, role: "note", children: [_jsx(Bg, {}), _jsxs("div", { className: "promo-banner__text", children: [_jsx("span", { className: `promo-banner__title ${size === 'small' ? 'body-2' : 'h2'}`, children: title }), description && _jsx("span", { className: "promo-banner__description body-3", children: description })] }), actionLabel && onAction && (_jsx(Button, { size: 40, variant: actionVariant ?? resolvedActionVariant, shape: "pill", useBorder: true, onClick: onAction, ariaLabel: actionLabel, ...(isMobile
+    return (_jsxs("div", { ref: rootRef, className: cls, role: "note", children: [_jsx(Bg, {}), _jsxs("div", { className: "promo-banner__text", children: [_jsx("span", { className: `promo-banner__title ${size === 'small' ? 'body-2' : 'h2'}`, children: title }), description && _jsx("span", { className: "promo-banner__description body-3", children: description })] }), actionLabel && onAction && (_jsx(Button, { htmlType: "button", size: 40, variant: actionVariant ?? resolvedActionVariant, shape: "pill", useBorder: true, onClick: onAction, ariaLabel: actionLabel, ...(isMobile
                     ? { type: 'dot', icon: 'arrow-right' }
                     : { rightIcon: 'arrow-right', label: actionLabel, minWidth: 140 }) }))] }));
 }

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

@@ -51,7 +51,7 @@ function SideNavButton(props) {
         }
         onClick?.(key, e.currentTarget, fromPointer);
     }, [isDisabled, key, onClick]);
-    return (_jsxs("button", { type: "button", className: btnClass, onClick: handleClick, "aria-label": typeof text === 'string' ? nameWithCount(t, text, badgeCount) : undefined, style: style, "aria-disabled": isDisabled, children: [iconElement, _jsx("span", { className: `side-nav__label button-1 f`, style: labelStyle, children: text }), badgeCount > 0 && (_jsx(Badge, { type: "dot", position: "inline", number: Math.min(badgeCount, 99), size: 24, "aria-hidden": true })), state === 'loading' && (_jsx("span", { className: "side-nav__spinner", "aria-label": "loading" }))] }));
+    return (_jsxs("button", { type: "button", className: btnClass, onClick: handleClick, "aria-label": typeof text === 'string' ? nameWithCount(t, text, badgeCount) : undefined, style: style, "aria-disabled": isDisabled, children: [iconElement, _jsx("span", { className: `side-nav__label button-1 f`, style: labelStyle, children: text }), badgeCount > 0 && (_jsx(Badge, { type: "dot", position: "inline", number: Math.min(badgeCount, 99), size: 24, "aria-hidden": true })), state === 'loading' && (_jsx("span", { className: "side-nav__spinner", role: "img", "aria-label": t('loader.loading', '불러오는 중…') }))] }));
 }
 /** @public */
 export default function SideNav(props) {

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

@@ -6,6 +6,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
 import Check from 'lucide-react/dist/esm/icons/check.mjs';
 import Volume2 from 'lucide-react/dist/esm/icons/volume-2.mjs';
 import User from 'lucide-react/dist/esm/icons/user.mjs';
@@ -15,6 +16,7 @@ import './SoundCompass.css';
 const lerp = (a, b, t) => a + (b - a) * t;
 /** @public */
 export default function SoundCompass({ speakers, size = 300, viewT = 0, activeSpeakerId = null, playedIds, selectedId = null, answerId = null, showFeedback = false, pulseSelected = false, pulseSelectedDuration, pulseScale, clickable = false, onSelectSpeaker, buttonSize = 40, showIcon = true, onCenterClick, centerLabel, centerDisabled = false, centerAttention = false, shortcutAnchor = 'top-right', shortcutScale, scaleShortcut = false, }) {
+    const { t: 번역 } = useTranslation();
     const t = Math.max(0, Math.min(1, viewT));
     const CENTER = size / 2;
     // ── 탑뷰 좌표 ──────────────────────────────────────────────────────────
@@ -119,6 +121,13 @@ export default function SoundCompass({ speakers, size = 300, viewT = 0, activeSp
     }
     // ── 스피커 시각 상태를 props에서 파생 ──────────────────────────────────
     const played = useMemo(() => new Set(playedIds ?? []), [playedIds]);
+    const stateLabel = (state) => ({
+        idle: '',
+        active: 번역('soundCompass.state.active', '소리 나는 중'),
+        played: 번역('soundCompass.state.played', '들음'),
+        correct: 번역('soundCompass.state.correct', '정답'),
+        wrong: 번역('soundCompass.state.wrong', '오답'),
+    })[state];
     const getSpeakerState = (sp) => {
         if (activeSpeakerId === sp.id)
             return 'active';
@@ -209,6 +218,6 @@ export default function SoundCompass({ speakers, size = 300, viewT = 0, activeSp
                                     ...(pulseScale !== undefined
                                         ? { ['--sc-pulse-scale']: String(pulseScale) }
                                         : null),
-                                } })), _jsxs("button", { type: "button", tabIndex: clickable ? 0 : -1, "aria-disabled": clickable ? undefined : true, onClick: clickable ? () => onSelectSpeaker?.(sp.id) : undefined, className: `sound-compass__speaker-btn sound-compass__speaker-btn--${state}`, style: { width: BTN, height: BTN }, "aria-label": sp.label, children: [withIcon && getStateIcon(state, iconSize), withNumber && (_jsx("span", { className: "sound-compass__speaker-number", style: { fontSize: showIcon === true ? numberSize : numberOnlySize }, children: idx + 1 }))] }), sp.shortcut && (_jsx(ShortcutBadge, { keys: sp.shortcut, anchor: shortcutAnchor, className: "sound-compass__speaker-shortcut" }))] }, sp.id));
+                                } })), _jsxs("button", { type: "button", tabIndex: clickable ? 0 : -1, "aria-disabled": clickable ? undefined : true, onClick: clickable ? () => onSelectSpeaker?.(sp.id) : undefined, className: `sound-compass__speaker-btn sound-compass__speaker-btn--${state}`, style: { width: BTN, height: BTN }, "aria-label": stateLabel(state) ? `${sp.label}, ${stateLabel(state)}` : sp.label, "aria-pressed": selectedId != null ? sp.id === selectedId : undefined, children: [withIcon && getStateIcon(state, iconSize), withNumber && (_jsx("span", { className: "sound-compass__speaker-number", style: { fontSize: showIcon === true ? numberSize : numberOnlySize }, children: idx + 1 }))] }), sp.shortcut && (_jsx(ShortcutBadge, { keys: sp.shortcut, anchor: shortcutAnchor, className: "sound-compass__speaker-shortcut" }))] }, sp.id));
                 })] }) }));
 }

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

@@ -87,6 +87,11 @@ export default function MenuTooltip({ columns = [], onClose, className = '', siz
     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) => (_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
-                                        ? _jsx(Badge, { type: "dot", position: "inline", number: Math.min(item.badgeCount, 99), size: 24, "aria-label": `${item.badgeCount}` })
-                                        : undefined, label: item.label, ariaLabel: item.label, onClick: () => handleClick(item), selected: item.selected, disabled: item.disabled, showTooltipInfo: item.tooltip || false, useBorder: false, align: "left" }, idx))) })] }, ci))) })] }));
+                                        ? _jsx(Badge, { type: "dot", position: "inline", number: Math.min(item.badgeCount, 99), size: 24, "aria-hidden": true })
+                                        : undefined, label: item.label, 
+                                /* 개수는 이름에 붙인다 — ariaLabel 이 글자뿐이라 배지 수가 이름에서 빠져 "알림" 으로만 읽혔다
+                                   (SideNav·BottomNav 와 같은 nav.badgeLabel "알림, 5개"). */
+                                ariaLabel: item.label && item.badgeCount && item.badgeCount > 0
+                                    ? t('nav.badgeLabel', { label: item.label, count: item.badgeCount, defaultValue: '{{label}}, {{count}}개' })
+                                    : item.label, onClick: () => handleClick(item), selected: item.selected, disabled: item.disabled, showTooltipInfo: item.tooltip || false, useBorder: false, align: "left" }, idx))) })] }, ci))) })] }));
 }

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

@@ -70,5 +70,5 @@ export default function TrainingStepTextBox({ context, state = "disabled", theme
         fontSize: `${fontSize}px`,
         lineHeight: `${lineHeight}px`,
     }), [fontSize, lineHeight]);
-    return (_jsxs("div", { className: `training-text-box ${stateClass} ${displayStatus !== 'disabled' && theme === 'dark' ? 'is-dark' : ''}`, children: [displayStatus === "disabled" && (_jsx("div", { className: "training-text-box__preview", children: _jsx(Button, { htmlType: "button", size: 48, type: "bar", onClick: handleActivate, icon: 'eye', ariaLabel: t('training.sentencePreview', '문장 미리보기'), label: t('training.sentencePreview', '문장 미리보기'), useBorder: false }) })), _jsx("div", { className: "training-text-box__area", "aria-hidden": displayStatus === "disabled", children: _jsx("span", { className: "training-text-box__inner h3", style: textStyle, children: content }) }), displayStatus !== "disabled" && (_jsxs("div", { className: "training-text-box__buttons", "aria-hidden": displayStatus === "disabled", children: [_jsx(Button, { size: 32, type: "dot", onClick: decrease, onDisabledClick: () => showNotice(t('training.fontSizeMin', '글씨 크기가 최소입니다.')), ariaLabel: t('training.fontSizeDecrease', '글자 크기 감소'), icon: 'minus', variant: theme === 'dark' ? 'transparent-white' : 'transparent-gray', disabled: !canDecrease, useBorder: false, showTooltipInfo: true, ...(!isMobile && { width: '60px' }) }), _jsx(Button, { size: 32, type: "dot", onClick: increase, onDisabledClick: () => showNotice(t('training.fontSizeMax', '글씨 크기가 최대입니다.')), ariaLabel: t('training.fontSizeIncrease', '글자 크기 증가'), icon: 'plus', variant: theme === 'dark' ? 'transparent-white' : 'transparent-gray', disabled: !canIncrease, useBorder: false, showTooltipInfo: true, ...(!isMobile && { width: '60px' }) }), _jsx(Button, { htmlType: "button", size: 32, showTooltipInfo: true, type: "dot", useBorder: false, width: 48, icon: theme === 'dark' ? 'moon' : 'sun-medium', onClick: toggleTheme, ariaLabel: t('training.toggleBackground', '배경 전환'), variant: theme === 'dark' ? 'transparent-white' : 'transparent-gray' })] })), _jsx(Toast, { message: noticeMessage, position: "top", onClose: handleNoticeClose })] }));
+    return (_jsxs("div", { className: `training-text-box ${stateClass} ${displayStatus !== 'disabled' && theme === 'dark' ? 'is-dark' : ''}`, children: [displayStatus === "disabled" && (_jsx("div", { className: "training-text-box__preview", children: _jsx(Button, { htmlType: "button", size: 48, type: "bar", onClick: handleActivate, icon: 'eye', ariaLabel: t('training.sentencePreview', '문장 미리보기'), label: t('training.sentencePreview', '문장 미리보기'), useBorder: false }) })), _jsx("div", { className: "training-text-box__area", "aria-hidden": displayStatus === "disabled", children: _jsx("span", { className: "training-text-box__inner h3", style: textStyle, children: content }) }), displayStatus !== "disabled" && (_jsxs("div", { className: "training-text-box__buttons", "aria-hidden": displayStatus === "disabled", children: [_jsx(Button, { htmlType: "button", size: 32, type: "dot", onClick: decrease, onDisabledClick: () => showNotice(t('training.fontSizeMin', '글씨 크기가 최소입니다.')), ariaLabel: t('training.fontSizeDecrease', '글자 크기 감소'), icon: 'minus', variant: theme === 'dark' ? 'transparent-white' : 'transparent-gray', disabled: !canDecrease, useBorder: false, showTooltipInfo: true, ...(!isMobile && { width: '60px' }) }), _jsx(Button, { htmlType: "button", size: 32, type: "dot", onClick: increase, onDisabledClick: () => showNotice(t('training.fontSizeMax', '글씨 크기가 최대입니다.')), ariaLabel: t('training.fontSizeIncrease', '글자 크기 증가'), icon: 'plus', variant: theme === 'dark' ? 'transparent-white' : 'transparent-gray', disabled: !canIncrease, useBorder: false, showTooltipInfo: true, ...(!isMobile && { width: '60px' }) }), _jsx(Button, { htmlType: "button", size: 32, showTooltipInfo: true, type: "dot", useBorder: false, width: 48, icon: theme === 'dark' ? 'moon' : 'sun-medium', onClick: toggleTheme, ariaLabel: t('training.toggleBackground', '배경 전환'), variant: theme === 'dark' ? 'transparent-white' : 'transparent-gray' })] })), _jsx(Toast, { message: noticeMessage, position: "top", onClose: handleNoticeClose })] }));
 }

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

@@ -24,6 +24,10 @@ export function useNoiseFade({ noisePlayer, audioRef, playbackStateRef, }) {
     // 실제 로드된(재생되는) 소음 파일 URL — waveform이 화면=청취 일치하도록 이 src를 그린다.
     const [activeNoiseUrl, setActiveNoiseUrl] = useState(null);
     const noiseTypeLoadedRef = useRef(null);
+    /* 바꿔 끼울 소음 파일 — 종류를 바꾸면 여기에 두고, 페이드아웃이 끝나거나 **다음 페이드인이 시작될 때** 끼운다.
+       전에는 페이드아웃의 완료 콜백에만 걸어 두어, 150ms 안에 다른 페이드(다음 트랙의 fadeInNoise·문장 종료의
+       fadeOutNoise·탭 숨김)가 끼면 콜백이 사라졌다 — 종류 표시·파형은 새 것인데 **소리는 이전 파일**이었다. */
+    const pendingNoiseUrlRef = useRef(null);
     // volume = 소음 <audio> 볼륨(noiseElementVolume — 전체 소리 × 소음 비율 ÷ 파일 gain, 상한 1)
     const noiseSettingsRef = useRef(null);
     const noiseFadeRafRef = useRef(null);
@@ -43,7 +47,19 @@ export function useNoiseFade({ noisePlayer, audioRef, playbackStateRef, }) {
     }, []);
     const fadeInNoise = useCallback((targetVolume, durationMs = 250) => {
         const noiseEl = noiseAudioRef.current;
-        if (!noiseEl || !noiseEl.src)
+        if (!noiseEl)
+            return;
+        const pending = pendingNoiseUrlRef.current;
+        if (pending) {
+            pendingNoiseUrlRef.current = null;
+            try {
+                noiseEl.pause();
+            }
+            catch (e) { }
+            noiseEl.src = pending;
+            noiseEl.load();
+        }
+        if (!noiseEl.src)
             return;
         noiseFadeTokenRef.current += 1;
         cancelNoiseFade();
@@ -235,7 +251,12 @@ export function useNoiseFade({ noisePlayer, audioRef, playbackStateRef, }) {
             if (url) {
                 noiseTypeLoadedRef.current = ns.type;
                 setActiveNoiseUrl(url); // waveform이 실제 재생 파일을 그리도록
+                pendingNoiseUrlRef.current = url;
                 fadeOutNoise(150, () => {
+                    // 그 사이 다음 페이드인이 이미 끼워 넣었으면(pending 이 비었으면) 다시 끼우지 않는다
+                    if (pendingNoiseUrlRef.current !== url)
+                        return;
+                    pendingNoiseUrlRef.current = null;
                     noiseEl.src = url;
                     noiseEl.load();
                     const mainAudio = audioRef.current;

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

@@ -13,9 +13,14 @@ export function useTTSPlayback({ ttsText, playbackRate, mainVolume, fillRef, wav
     const ttsStartRef = useRef(null);
     const ttsEstimatedDurationRef = useRef(0);
     const ttsRafRef = useRef(null);
+    /* 지금 말하는 발화의 번호. 정지(cancel)·다시 시작·언마운트에서 올린다 — Chrome·Safari 는 cancel() 한 발화에도
+       end 이벤트를 내서, **정지를 누르면 끝까지 들은 것으로** handleEnd → onDone(true) 가 불렸고(문항 완료로 셈),
+       언마운트 뒤에 온 end 가 떠난 화면에 완료를 알렸다. 번호가 다른 end 는 넘긴다. */
+    const ttsTokenRef = useRef(0);
     useEffect(() => {
         // cleanup TTS resources on unmount
         return () => {
+            ttsTokenRef.current++;
             try {
                 if (ttsRafRef.current) {
                     cancelAnimationFrame(ttsRafRef.current);
@@ -52,6 +57,7 @@ export function useTTSPlayback({ ttsText, playbackRate, mainVolume, fillRef, wav
             return;
         }
         const synth = window.speechSynthesis;
+        const myToken = ++ttsTokenRef.current;
         try {
             try {
                 synth.cancel();
@@ -99,6 +105,8 @@ export function useTTSPlayback({ ttsText, playbackRate, mainVolume, fillRef, wav
                 catch (e) { }
             };
             utt.onend = () => {
+                if (myToken !== ttsTokenRef.current)
+                    return;
                 try {
                     if (ttsRafRef.current) {
                         cancelAnimationFrame(ttsRafRef.current);
@@ -149,6 +157,7 @@ export function useTTSPlayback({ ttsText, playbackRate, mainVolume, fillRef, wav
         }
     }, [ttsText, playbackRate, mainVolume, fadeInNoise, fillRef, waveProgressRef, setProgress, setPlaybackState, setStateLocal, noiseSettingsRef, onDoneRef, handleEndRef]);
     const stopTTS = useCallback(() => {
+        ttsTokenRef.current++;
         try {
             if (window.speechSynthesis) {
                 try {

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

@@ -105,9 +105,10 @@ export default function WordSearchResultBlock({ titleIcon, resultCount, resultUn
         }
         return [...byLabel.entries()].map(([label, its]) => ({ label, items: its }));
     }, [groups, orderedGroupItems, pageClamped, pageSize]);
-    // 정렬/페이지크기 변경·결과 개수 변동 시 1페이지로.
+    // 정렬/페이지크기 변경·결과 개수 변동·**검색어 변경** 시 1페이지로. 검색어를 안 보면 결과 수가 같은 다른 검색에서
+    // 보던 쪽 번호(3쪽)가 남아 새 결과의 3쪽이 떴다.
     /* eslint-disable react-hooks/set-state-in-effect */
-    useEffect(() => { setPage(1); }, [sortKey, pageSizeStr, totalCount]);
+    useEffect(() => { setPage(1); }, [sortKey, pageSizeStr, totalCount, searchQuery]);
     /* eslint-enable react-hooks/set-state-in-effect */
     // 결과가 있으면(flat/그룹 모두) 툴바(정렬·페이지크기·페이지네이션) 노출.
     // (그룹 뷰도 flat과 동일하게 페이지네이션 — 카드 4 결정 1안. 그룹은 페이지 단위로 재그룹핑되어 표시.)

package/dist/packages/core/src/hooks/useWordTrainingFilter.js

@@ -85,10 +85,14 @@ export function useWordTrainingFilter(groupKey, caps, opts) {
     // 글자 모드에서 마지막으로 선택돼 있던 모음 자모 — 발음↔글자 왕복 시 병합 버튼(ㅔㅐ 등)의
     // 대표 자모로 뭉개지지 않고 원래 자모를 정확히 복원하기 위해 별도로 기억해 둔다.
     const lastCharJungRef = useRef(phonemeView === 'char' ? composition.jung : null);
+    // 종성도 — 발음은 대표음(ㅅ→ㄷ)으로 모으므로 되돌릴 원래 자모를 기억한다
+    const lastCharJongRef = useRef(phonemeView === 'char' ? composition.jong : null);
     useEffect(() => {
-        if (phonemeView === 'char')
+        if (phonemeView === 'char') {
             lastCharJungRef.current = composition.jung;
-    }, [phonemeView, composition.jung]);
+            lastCharJongRef.current = composition.jong;
+        }
+    }, [phonemeView, composition.jung, composition.jong]);
     // resetOnMount(단어훈련 만들기): '초기화'는 필터를 모두 비운 중립 상태여야 하므로 선택 토글도 OFF로 시작한다.
     // (기본 ON이면 단음절 음소 합치기 등에서 '이미지 있는 단어만'에 걸려 첫 진입 결과가 0이 된다.)
     // 단, 카드에 이미지가 필요한 타입(듣고 순서대로 기억하기 등)은 defaultImageOnly로 ON을 요청할 수 있다.
@@ -109,7 +113,8 @@ export function useWordTrainingFilter(groupKey, caps, opts) {
             return;
         resetKeyRef.current = opts?.resetKey;
         setComposition(seedComposition());
-        setExcludeNoImage(false);
+        // 이미지 토글도 그 타입의 기본값으로 — 무조건 false 로 두어 defaultImageOnly 를 요청한 타입(듣고 순서대로 기억하기)이 꺼졌다
+        setExcludeNoImage(!!opts?.defaultImageOnly);
         setSameStructureOnly(false);
         setGradeFilter([]);
         setPosFilter([]);
@@ -520,7 +525,7 @@ export function useWordTrainingFilter(groupKey, caps, opts) {
         if (next === phonemeView)
             return;
         if (next !== 'direct' && phonemeView !== 'direct') {
-            setComposition(c => convertComposition(c, next, lastCharJungRef.current));
+            setComposition(c => convertComposition(c, next, lastCharJungRef.current, lastCharJongRef.current));
         }
         setPhonemeView(next);
     }, [phonemeView]);

package/dist/packages/core/src/hooks/wordTrainingFilterModel.d.ts

@@ -51,7 +51,7 @@ export declare function charToPronValue(part: CompositionPart, jamo: string): st
  */
 export declare function pronToCharValue(part: CompositionPart, value: string, preferredJamo?: string | null): string;
 /** 모드 전환 시 composition의 초성/모음/종성을 대상 모드 값으로 변환. 종성 '없음'(NO_CODA)은 유지. */
-export declare function convertComposition(c: WordComposition, to: 'char' | 'pron', preferredCharJung?: string | null): WordComposition;
+export declare function convertComposition(c: WordComposition, to: 'char' | 'pron', preferredCharJung?: string | null, preferredCharJong?: string | null): WordComposition;
 /** 정답 단어 구성 선택 상태 (정답 단어에만 적용 — 오답은 대립 관계로 결정) */
 export interface WordComposition {
     cho: string | null;

package/dist/packages/core/src/hooks/wordTrainingFilterModel.js

@@ -83,10 +83,15 @@ export function pronToCharValue(part, value, preferredJamo) {
             return preferredJamo;
         return jamos[0] ?? value;
     }
+    /* 종성도 같다 — 글자→발음은 대표음(ㅅ·ㅈ·ㅊ·ㅌ·ㅎ → ㄷ, ㄳ → ㄱ)으로 모으므로, 되돌릴 때 전환 직전 글자 모드의 종성이
+       그 대표음에 속하면 그것을 복원한다. 전에는 대표음 그대로 돌아와 보기만 바꿔도 훈련 대상이 옷·낫에서 곧·받으로
+       바뀌어 저장됐다. */
+    if (part === 'jong' && preferredJamo && finalToPhoneme(preferredJamo) === value)
+        return preferredJamo;
     return value;
 }
 /** 모드 전환 시 composition의 초성/모음/종성을 대상 모드 값으로 변환. 종성 '없음'(NO_CODA)은 유지. */
-export function convertComposition(c, to, preferredCharJung) {
+export function convertComposition(c, to, preferredCharJung, preferredCharJong) {
     const conv = (part, v) => {
         if (!v)
             return null;
@@ -94,7 +99,7 @@ export function convertComposition(c, to, preferredCharJung) {
             return NO_CODA;
         if (to === 'pron')
             return charToPronValue(part, v);
-        return pronToCharValue(part, v, part === 'jung' ? preferredCharJung : null);
+        return pronToCharValue(part, v, part === 'jung' ? preferredCharJung : part === 'jong' ? preferredCharJong : null);
     };
     return { ...c, cho: conv('cho', c.cho), jung: conv('jung', c.jung), jong: conv('jong', c.jong) };
 }

package/dist/packages/core/src/i18n/locales/en.json

@@ -1390,5 +1390,16 @@
     },
     "loader": {
         "loading": "Loading"
+    },
+    "soundCompass": {
+        "state": {
+            "active": "playing",
+            "played": "heard",
+            "correct": "correct",
+            "wrong": "wrong"
+        }
+    },
+    "breadcrumb": {
+        "ariaLabel": "Breadcrumb"
     }
 }

package/dist/packages/core/src/i18n/locales/ko.json

@@ -1388,5 +1388,16 @@
     },
     "loader": {
         "loading": "불러오는 중…"
+    },
+    "soundCompass": {
+        "state": {
+            "active": "소리 나는 중",
+            "played": "들음",
+            "correct": "정답",
+            "wrong": "오답"
+        }
+    },
+    "breadcrumb": {
+        "ariaLabel": "이동 경로"
     }
 }