@ihabdevteam/core 0.322.0 → 0.323.0

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

@@ -38,13 +38,13 @@ export default function Popup(props) {
         if (inline)
             return;
         if (!title && !ariaLabel && import.meta.env?.DEV) {
-            const 본문 = panelRef.current?.textContent?.replace(/\s+/g, ' ').trim().slice(0, 60) ?? '';
-            const 표시 = [
+            const bodyText = panelRef.current?.textContent?.replace(/\s+/g, ' ').trim().slice(0, 60) ?? '';
+            const marks = [
                 className ? `class="${className}"` : null,
-                본문 ? `본문 "${본문}${본문.length >= 60 ? '…' : ''}"` : null,
+                bodyText ? `본문 "${bodyText}${bodyText.length >= 60 ? '…' : ''}"` : null,
             ].filter(Boolean).join(' · ');
             console.warn(`[Popup] 제목도 ariaLabel도 없어 다이얼로그에 접근명이 없습니다 — ariaLabel을 주세요.` +
-                (표시 ? ` (${표시})` : ' (단서 없음 — 빈 팝업)'));
+                (marks ? ` (${marks})` : ' (단서 없음 — 빈 팝업)'));
         }
     }, [inline, title, ariaLabel, className]);
     // resetScrollKey가 바뀌면(탭/모드 전환 등) 본문 스크롤을 맨 위로 되돌린다 —
@@ -114,59 +114,59 @@ export default function Popup(props) {
     /* 닫힘 애니메이션 뒤 콜백을 부른다. **콜백이 던지거나 거절되면, 또는 약속을 돌려준 콜백이 끝난 뒤에도 이 창이 그대로 있으면 되살린다** —
        전에는 닫는 중 표시만 남아 투명한 막이 화면을 덮고(클릭을 가로챔) ESC·X·바탕·다시 저장이 모두 무시돼 페이지를 쓸 수
        없었다(말귀 업체 정보·훈련 묶음 수정 저장이 실패해 부모가 창을 열어 둘 때). 성공하면 부모가 곧 치우므로 되살릴 일이 없다. */
-    const 살아있음Ref = useRef(true);
+    const aliveRef = useRef(true);
     /* '동작 줄이기' 면 닫기 대기를 0 으로 — CSS 는 움직임을 없애지만 이 타이머는 못 줄여, 움직임 없이 260ms 늦게 사라지며 투명한 막이 누름을 가로챘다 */
-    const 동작줄이기 = usePrefersReducedMotion();
+    const reducedMotion = usePrefersReducedMotion();
     /* 닫기(X·ESC·바탕)가 걸어 둔 타이머 — 닫는 애니메이션(260ms) 안에 부모가 창을 치우면 **떠난 뒤에 onClose** 가 불렸다(닫으며
        다음 창을 여는 흐름에서 늦은 setX(null) 이 새 창을 닫을 수 있다). 떠날 때 걷는다. 소비자가 넘긴 animateThen(cb) 은
        "삭제·저장 확정" 일 수 있어 걷지 않는다(결정 2026-09-15: 떠난 뒤에도 부른다 — PopupOptions JSDoc). */
-    const 닫기타이머Ref = useRef(null);
+    const closeTimerRef = useRef(null);
     useEffect(() => {
-        살아있음Ref.current = true;
+        aliveRef.current = true;
         return () => {
-            살아있음Ref.current = false;
-            if (닫기타이머Ref.current) {
-                clearTimeout(닫기타이머Ref.current);
-                닫기타이머Ref.current = null;
+            aliveRef.current = false;
+            if (closeTimerRef.current) {
+                clearTimeout(closeTimerRef.current);
+                closeTimerRef.current = null;
             }
         };
     }, []);
-    const 되살리기 = useCallback(() => {
-        if (!살아있음Ref.current || !closingRef.current)
+    const restore = useCallback(() => {
+        if (!aliveRef.current || !closingRef.current)
             return;
         closingRef.current = false;
         setClosing(false);
     }, []);
-    const animateThen = useCallback((cb, 닫기뿐 = false) => {
+    const animateThen = useCallback((cb, closeOnly = false) => {
         /* 이미 떠난 창을 닫으려는 부름(ConfirmPopup 의 onConfirm 안에서 부모가 창을 치운 뒤 closeWithAnimation)은 받지 않는다 —
            정리가 끝난 뒤 걸린 타이머라 걷히지 않고 260ms 뒤 **취소 경로의 onClose** 가 불렸다(kscan 이 closeOnConfirm=false 로 우회). */
-        if (닫기뿐 && !살아있음Ref.current)
+        if (closeOnly && !aliveRef.current)
             return;
         if (closingRef.current)
             return;
         closingRef.current = true;
         setClosing(true);
         const id = setTimeout(() => {
-            if (닫기타이머Ref.current === id)
-                닫기타이머Ref.current = null;
-            let 결과;
+            if (closeTimerRef.current === id)
+                closeTimerRef.current = null;
+            let result;
             try {
-                결과 = cb ? cb() : undefined;
+                result = cb ? cb() : undefined;
             }
             catch (e) {
-                되살리기();
+                restore();
                 return;
             }
             /* 약속을 돌려준 콜백만 **끝난 뒤에도 남아 있으면** 되살린다. 동기 콜백(undefined)은 되살리지 않는다 — 부모가 저장을
                따로 기다렸다 닫는 흔한 꼴(onSave 를 부르고 약속은 안 돌려줌)에서 기다리는 사이 창이 다시 보이고 저장 단추가 다시
                눌려 두 번 저장됐다. 저장 실패에 창을 되살리고 싶으면 콜백이 그 약속을 돌려주면 된다. */
-            if (결과 && typeof 결과.then === 'function') {
-                결과.then(() => { setTimeout(되살리기, 120); }, 되살리기);
+            if (result && typeof result.then === 'function') {
+                result.then(() => { setTimeout(restore, 120); }, restore);
             }
-        }, 동작줄이기 ? 0 : ANIM_MS);
-        if (닫기뿐)
-            닫기타이머Ref.current = id;
-    }, [되살리기, 동작줄이기]);
+        }, reducedMotion ? 0 : ANIM_MS);
+        if (closeOnly)
+            closeTimerRef.current = id;
+    }, [restore, reducedMotion]);
     const closeWithAnimation = useCallback(() => {
         if (closeDisabled)
             return;

package/dist/packages/core/src/components/Popup/SaveTablePopup.js

@@ -43,17 +43,17 @@ export default function SaveTablePopup({ title, saveLabel, defaultName = '', def
         existingNames.some(n => n.trim().toLowerCase() === name.trim().toLowerCase());
     /* 저장은 **한 번만** — 저장 단추의 닫힘 애니메이션(260ms) 동안 이름칸에서 Enter 를 치면 onSave 가 또 불렸다(Safari 는 단추를
        눌러도 포커스가 칸에 남아 쉽게 난다). */
-    const 저장함 = useRef(false);
+    const savedRef = useRef(false);
     const handleSave = useCallback((animateThen) => {
-        if (저장함.current)
+        if (savedRef.current)
             return;
-        저장함.current = true;
+        savedRef.current = true;
         animateThen(() => onSave(name.trim(), description.trim() || undefined));
     }, [name, description, onSave]);
     const handleEnter = useCallback(() => {
-        if (저장함.current || !name.trim() || isDuplicateName)
+        if (savedRef.current || !name.trim() || isDuplicateName)
             return;
-        저장함.current = true;
+        savedRef.current = true;
         onSave(name.trim(), description.trim() || undefined);
     }, [name, description, isDuplicateName, onSave]);
     return (_jsx(Popup, { className: "popup--save-table", title: title ?? t('wordTable.save.title', '단어표 저장하기'), onClose: onCancel, footer: ({ animateThen, closeWithAnimation }) => (_jsxs(_Fragment, { children: [_jsx(Button, { htmlType: "button", size: 48, type: "bar", label: t('common.cancel', '취소'), onClick: closeWithAnimation }), _jsx(Button, { htmlType: "button", size: 48, type: "bar", variant: "main", label: saveLabel ?? t('common.save', '저장'), disabled: !name.trim() || isDuplicateName, onClick: () => handleSave(animateThen) })] })), children: _jsxs("div", { className: "save-table-popup__body", children: [preview && (_jsx("div", { ref: containerRef, className: "save-table-popup__preview-wrap", style: { height: previewState.fixedH }, children: _jsx("div", { className: "save-table-popup__preview", style: {

package/dist/packages/core/src/components/Popup/TrainingResultPopup.js

@@ -60,8 +60,8 @@ function resolveDecision(it) {
 export default function TrainingResultPopup(props) {
     const { score, contextsLength, results = [], subtitle, onReplay, onClose, inline = false, pending = false } = props || {};
     const { t } = useTranslation();
-    const 까닭Id = useId();
-    const 계산중이면막기 = useCallback(() => !pending, [pending]);
+    const reasonId = useId();
+    const blockWhilePending = useCallback(() => !pending, [pending]);
     // 축하 컨페티는 정답률 50% 초과일 때만 — 낮은 점수(≤50%)에 축하가 나가지 않게 한다(언어치료 맥락).
     useEffect(() => {
         const total = contextsLength ?? 0;
@@ -114,7 +114,7 @@ export default function TrainingResultPopup(props) {
            주는 이름이 갈라진다. */
         ariaLabel: t('training.result.title', '훈련을 모두 마쳤습니다.'), className: "popup--training-result", 
         // 결과 계산 중에는 Esc 로도 완료(닫기)하지 않는다 — '완료' 단추와 같은 까닭
-        beforeClose: 계산중이면막기, footerClassName: "trp-result__foot", footer: ({ animateThen, closeWithAnimation }) => (_jsxs(_Fragment, { children: [pending && _jsx("p", { id: 까닭Id, className: "trp-actions__reason caption-1", role: "status", children: t('training.result.pendingDone', '결과를 계산하는 중이라 아직 완료할 수 없습니다.') }), _jsxs("div", { className: "trp-actions", children: [_jsx(Button, { htmlType: "button", size: 56, type: "bar", label: t('training.result.replay', '다시하기'), onClick: () => animateThen(onReplay) }), _jsx(Button, { htmlType: "button", size: 56, type: "bar", label: t('training.result.done', '완료'), variant: "main", onClick: closeWithAnimation, 
+        beforeClose: blockWhilePending, footerClassName: "trp-result__foot", footer: ({ animateThen, closeWithAnimation }) => (_jsxs(_Fragment, { children: [pending && _jsx("p", { id: reasonId, className: "trp-actions__reason caption-1", role: "status", children: t('training.result.pendingDone', '결과를 계산하는 중이라 아직 완료할 수 없습니다.') }), _jsxs("div", { className: "trp-actions", children: [_jsx(Button, { htmlType: "button", size: 56, type: "bar", label: t('training.result.replay', '다시하기'), onClick: () => animateThen(onReplay) }), _jsx(Button, { htmlType: "button", size: 56, type: "bar", label: t('training.result.done', '완료'), variant: "main", onClick: closeWithAnimation, 
                             /* 막되 초점은 남긴다(onDisabledClick 이 있으면 native disabled 대신 aria-disabled) — 키보드·낭독기가 까닭을 들을 수 있게 */
-                            disabled: pending, onDisabledClick: pending ? () => { } : undefined, "aria-describedby": pending ? 까닭Id : undefined })] })] })), children: () => (_jsxs("div", { className: "trp-result is-on", children: [_jsxs("header", { className: "trp-result__head", children: [_jsx("p", { className: "trp-result__eyebrow caption-1", children: t('training.result.eyebrow', '훈련 완료') }), _jsx("h1", { className: "trp-result__title h2", children: t('training.result.title', '훈련을 모두 마쳤습니다.') }), subtitle && _jsx("p", { className: "trp-result__subtitle body-3", children: subtitle }), _jsx("div", { className: "trp-score", children: _jsxs("div", { className: "trp-score__figure", "aria-label": t('training.result.scoreAria', { correct, total }), children: [_jsx("span", { className: "trp-score__big", children: correct }), _jsx("span", { className: "trp-score__sep", children: "/" }), _jsx("span", { className: "trp-score__total", children: total })] }) })] }), rows.length > 0 && (_jsx("section", { className: "trp-result__body", children: _jsxs("div", { className: `result-table${hasAnswerCols ? ' result-table--answer' : ''}`, role: "table", "aria-label": t('training.result.tableAriaLabel', '문항별 판정'), children: [_jsxs("div", { className: "result-table__head caption-1", role: "row", children: [_jsx("span", { role: "columnheader", children: t('common.col.problem', '문제') }), hasAnswerCols && _jsx("span", { role: "columnheader", children: t('training.result.colAnswerSelected', '정답 · 선택') }), _jsx("span", { className: "col-right", role: "columnheader", children: t('training.result.colJudge', '판정') })] }), rows.map((r, i) => (_jsxs("div", { className: "result-table__row", role: "row", children: [_jsxs("div", { className: "trp-row__problem", children: [_jsx("span", { className: "trp-row__no caption-1", children: String(i + 1).padStart(2, '0') }), _jsx("div", { className: "trp-row__q body-2", children: r.problem })] }), hasAnswerCols && (_jsxs("div", { className: "trp-row__answers", children: [r.answer !== null && (_jsxs("div", { className: "trp-row__answer-line", children: [_jsx("span", { className: "trp-row__answer-label answer-correct caption-1", children: t('training.result.colAnswer', '정답') }), _jsx("span", { className: "trp-row__answer-value body-2", children: r.answer })] })), _jsxs("div", { className: "trp-row__answer-line", children: [_jsx("span", { className: `trp-row__answer-label answer-selected caption-1 ${r.isCorrect ? 'is-correct' : 'is-wrong'}`, children: t('training.result.colSelected', '선택') }), _jsx("span", { className: `trp-row__answer-value body-2 ${r.isCorrect ? 'is-correct' : 'is-wrong'}`, children: r.selectedText ?? '—' })] })] })), _jsx("div", { className: "trp-row__judge", children: _jsx(Badge, { variant: r.variant, label: r.label, fill: "soft", minWidth: 80 }) })] }, i)))] }) }))] })) }));
+                            disabled: pending, onDisabledClick: pending ? () => { } : undefined, "aria-describedby": pending ? reasonId : undefined })] })] })), children: () => (_jsxs("div", { className: "trp-result is-on", children: [_jsxs("header", { className: "trp-result__head", children: [_jsx("p", { className: "trp-result__eyebrow caption-1", children: t('training.result.eyebrow', '훈련 완료') }), _jsx("h1", { className: "trp-result__title h2", children: t('training.result.title', '훈련을 모두 마쳤습니다.') }), subtitle && _jsx("p", { className: "trp-result__subtitle body-3", children: subtitle }), _jsx("div", { className: "trp-score", children: _jsxs("div", { className: "trp-score__figure", "aria-label": t('training.result.scoreAria', { correct, total }), children: [_jsx("span", { className: "trp-score__big", children: correct }), _jsx("span", { className: "trp-score__sep", children: "/" }), _jsx("span", { className: "trp-score__total", children: total })] }) })] }), rows.length > 0 && (_jsx("section", { className: "trp-result__body", children: _jsxs("div", { className: `result-table${hasAnswerCols ? ' result-table--answer' : ''}`, role: "table", "aria-label": t('training.result.tableAriaLabel', '문항별 판정'), children: [_jsxs("div", { className: "result-table__head caption-1", role: "row", children: [_jsx("span", { role: "columnheader", children: t('common.col.problem', '문제') }), hasAnswerCols && _jsx("span", { role: "columnheader", children: t('training.result.colAnswerSelected', '정답 · 선택') }), _jsx("span", { className: "col-right", role: "columnheader", children: t('training.result.colJudge', '판정') })] }), rows.map((r, i) => (_jsxs("div", { className: "result-table__row", role: "row", children: [_jsxs("div", { className: "trp-row__problem", children: [_jsx("span", { className: "trp-row__no caption-1", children: String(i + 1).padStart(2, '0') }), _jsx("div", { className: "trp-row__q body-2", children: r.problem })] }), hasAnswerCols && (_jsxs("div", { className: "trp-row__answers", children: [r.answer !== null && (_jsxs("div", { className: "trp-row__answer-line", children: [_jsx("span", { className: "trp-row__answer-label answer-correct caption-1", children: t('training.result.colAnswer', '정답') }), _jsx("span", { className: "trp-row__answer-value body-2", children: r.answer })] })), _jsxs("div", { className: "trp-row__answer-line", children: [_jsx("span", { className: `trp-row__answer-label answer-selected caption-1 ${r.isCorrect ? 'is-correct' : 'is-wrong'}`, children: t('training.result.colSelected', '선택') }), _jsx("span", { className: `trp-row__answer-value body-2 ${r.isCorrect ? 'is-correct' : 'is-wrong'}`, children: r.selectedText ?? '—' })] })] })), _jsx("div", { className: "trp-row__judge", children: _jsx(Badge, { variant: r.variant, label: r.label, fill: "soft", minWidth: 80 }) })] }, i)))] }) }))] })) }));
 }

package/dist/packages/core/src/components/Popup/customerDetailUtils.js

@@ -5,8 +5,8 @@
 import i18n from 'i18next';
 import { getTodayKst } from '../../utils/date';
 /** i18n 이 아직 안 섰으면(초기화 전 `i18n.t` 는 undefined) 한국어 기본값을 직접 채운다. */
-function 번역됐거나(s, 기본, vars) {
-    return typeof s === 'string' && s ? s : 기본.replace(/\{\{(\w+)\}\}/g, (_, k) => String(vars[k]));
+function translatedOr(s, fallback, vars) {
+    return typeof s === 'string' && s ? s : fallback.replace(/\{\{(\w+)\}\}/g, (_, k) => String(vars[k]));
 }
 export function getDayOptions(year, month, daySuffix) {
     const days = new Date(Number(year), Number(month), 0).getDate();
@@ -16,16 +16,16 @@ export function getDayOptions(year, month, daySuffix) {
     });
 }
 /** 'YYYY.MM.DD' · 'YYYY-MM-DD' · 'YYYYMMDD' 를 숫자 셋으로. 없는 날(2/30 등)이면 null. */
-function 날짜쪼개기(s) {
-    const 숫자 = s.trim().replace(/[.-]/g, '');
-    if (!/^\d{8}$/.test(숫자))
+function splitDate(s) {
+    const digits = s.trim().replace(/[.-]/g, '');
+    if (!/^\d{8}$/.test(digits))
         return null;
-    const y = Number(숫자.slice(0, 4)), m = Number(숫자.slice(4, 6)), d = Number(숫자.slice(6, 8));
-    if (m < 1 || m > 12 || d < 1 || d > 말일(y, m))
+    const y = Number(digits.slice(0, 4)), m = Number(digits.slice(4, 6)), d = Number(digits.slice(6, 8));
+    if (m < 1 || m > 12 || d < 1 || d > lastDayOf(y, m))
         return null;
     return { y, m, d };
 }
-const 말일 = (y, m) => new Date(y, m, 0).getDate();
+const lastDayOf = (y, m) => new Date(y, m, 0).getDate();
 /**
  * 만 나이 — "N세 M개월" 을 `ageStr` 로 적는다. 못 읽으면 '-'.
  *
@@ -44,15 +44,15 @@ const 말일 = (y, m) => new Date(y, m, 0).getDate();
 export function calcAge(birthDate, ageStr) {
     if (!birthDate)
         return '-';
-    const b = 날짜쪼개기(birthDate);
-    const t = 날짜쪼개기(getTodayKst());
+    const b = splitDate(birthDate);
+    const t = splitDate(getTodayKst());
     if (!b || !t)
         return '-';
     let years = t.y - b.y;
     let months = t.m - b.m;
     // 일(day)까지 비교해야 함 — 월만 비교하면 생일이 아직 안 지난 달엔 나이가 1살 많게 나온다.
     // 이번 달에 그 날이 없으면 말일이 그날이다.
-    if (t.d < Math.min(b.d, 말일(t.y, t.m)))
+    if (t.d < Math.min(b.d, lastDayOf(t.y, t.m)))
         months--;
     if (months < 0) {
         years--;
@@ -78,17 +78,17 @@ export function visitItemKey(v) {
  */
 export function formatDuration(sec, durationStr) {
     // 초 단위로 반올림한 뒤 나눈다 — 90.5 가 "1분 30.5초", 59.999 가 "59.999초" 로 찍혔다
-    const 초 = Number.isFinite(sec) ? Math.round(sec) : 0;
-    if (!초 || 초 <= 0)
+    const seconds = Number.isFinite(sec) ? Math.round(sec) : 0;
+    if (!seconds || seconds <= 0)
         return '-';
-    const m = Math.floor(초 / 60);
-    const s = 초 % 60;
+    const m = Math.floor(seconds / 60);
+    const s = seconds % 60;
     if (durationStr)
         return durationStr(m, s);
     // 열쇠를 글자로 적어 둔다 — test/i18nKeysExist 가 사전에 있는지 훑는다
     if (m > 0 && s > 0)
-        return 번역됐거나(i18n.t('customers.duration.minSec', { m, s, defaultValue: '{{m}}분 {{s}}초' }), '{{m}}분 {{s}}초', { m, s });
+        return translatedOr(i18n.t('customers.duration.minSec', { m, s, defaultValue: '{{m}}분 {{s}}초' }), '{{m}}분 {{s}}초', { m, s });
     if (m > 0)
-        return 번역됐거나(i18n.t('customers.duration.min', { m, defaultValue: '{{m}}분' }), '{{m}}분', { m });
-    return 번역됐거나(i18n.t('customers.duration.sec', { s, defaultValue: '{{s}}초' }), '{{s}}초', { s });
+        return translatedOr(i18n.t('customers.duration.min', { m, defaultValue: '{{m}}분' }), '{{m}}분', { m });
+    return translatedOr(i18n.t('customers.duration.sec', { s, defaultValue: '{{s}}초' }), '{{s}}초', { s });
 }

package/dist/packages/core/src/components/Popup/useDiscardGuard.js

@@ -37,12 +37,12 @@ import ConfirmPopup from './ConfirmPopup';
 export function useDiscardGuard(isDirty, onClose, labels = {}) {
     const { t } = useTranslation();
     const [confirming, setConfirming] = useState(false);
-    const 통과 = useRef(false);
-    const allowClose = useCallback(() => { 통과.current = true; }, []);
+    const bypassRef = useRef(false);
+    const allowClose = useCallback(() => { bypassRef.current = true; }, []);
     const beforeClose = useCallback(() => {
         /* 한 번 쓰고 되돌린다 — 안 되돌리면 그 뒤로 영영 안 묻는다 */
-        if (통과.current) {
-            통과.current = false;
+        if (bypassRef.current) {
+            bypassRef.current = false;
             return true;
         }
         if (isDirty) {

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

@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
 import useMediaQuery from '../hooks/useMediaQuery';
 import './ProgressIndicator.css';
 /** 눈에는 안 보이고 낭독기에는 읽히는 글자 */
-const 보이지않게 = {
+const srOnly = {
     position: 'absolute', width: 1, height: 1, margin: -1, padding: 0, overflow: 'hidden',
     clipPath: 'inset(50%)', whiteSpace: 'nowrap', border: 0,
 };
@@ -48,13 +48,13 @@ export default function ProgressIndicator({ max, index, inactiveBg, inactiveColo
        묶고 이름표에 자리를 적는다. 화면이 스스로 넘어가는 자리에서는
        announce 로 role="status" 를 켠다. */
     if (variant === 'dot') {
-        return (_jsxs("div", { className: "progress-indicator progress-indicator--dot", style: rootStyle, role: announce ? 'status' : 'img', "aria-label": announce ? undefined : groupLabel, children: [announce && _jsx("span", { style: 보이지않게, children: groupLabel }), Array.from({ length: max }).map((_, i) => (_jsx("span", { "aria-hidden": "true", className: `progress-indicator-dot--dot${i < idx ? ' done' : i === idx ? ' active' : ''}` }, i)))] }));
+        return (_jsxs("div", { className: "progress-indicator progress-indicator--dot", style: rootStyle, role: announce ? 'status' : 'img', "aria-label": announce ? undefined : groupLabel, children: [announce && _jsx("span", { style: srOnly, children: groupLabel }), Array.from({ length: max }).map((_, i) => (_jsx("span", { "aria-hidden": "true", className: `progress-indicator-dot--dot${i < idx ? ' done' : i === idx ? ' active' : ''}` }, i)))] }));
     }
     /* 번호·모바일 모드의 알리는 자리 — 전에는 announce 가 점 모드에서만 먹었다. 목록 곁 형제로 두고 absolute 라 배치에 안 끼어든다. */
-    const 알림 = announce ? _jsx("span", { role: "status", style: 보이지않게, children: groupLabel }) : null;
+    const liveRegion = announce ? _jsx("span", { role: "status", style: srOnly, children: groupLabel }) : null;
     // 모바일: 현재 단계만 표시 (n / max 형태)
     if (isMobile) {
-        return (_jsxs(_Fragment, { children: [_jsx("div", { className: "progress-indicator progress-indicator--mobile", style: rootStyle, role: "list", "aria-label": groupLabel, children: _jsxs("span", { role: "listitem", className: "progress-indicator-dot active body-3", children: [idx + 1, " / ", max] }) }), 알림] }));
+        return (_jsxs(_Fragment, { children: [_jsx("div", { className: "progress-indicator progress-indicator--mobile", style: rootStyle, role: "list", "aria-label": groupLabel, children: _jsxs("span", { role: "listitem", className: "progress-indicator-dot active body-3", children: [idx + 1, " / ", max] }) }), liveRegion] }));
     }
-    return (_jsxs(_Fragment, { children: [알림, _jsx("div", { className: "progress-indicator", style: rootStyle, role: "list", "aria-label": groupLabel, children: Array.from({ length: max }).map((_, i) => (_jsx("span", { role: "listitem", "aria-current": i === idx ? 'step' : undefined, className: `progress-indicator-dot ${i < idx ? ' done' : i === idx ? ' active' : ''} body-3`, children: i + 1 }, i))) })] }));
+    return (_jsxs(_Fragment, { children: [liveRegion, _jsx("div", { className: "progress-indicator", style: rootStyle, role: "list", "aria-label": groupLabel, children: Array.from({ length: max }).map((_, i) => (_jsx("span", { role: "listitem", "aria-current": i === idx ? 'step' : undefined, className: `progress-indicator-dot ${i < idx ? ' done' : i === idx ? ' active' : ''} body-3`, children: i + 1 }, i))) })] }));
 }

package/dist/packages/core/src/components/PromoBannerBg/promoBannerBg.js

@@ -2,9 +2,9 @@ import i18n from '../../i18n';
 /* 라벨은 **읽는 때의 언어**로 — 전에는 한국어가 박혀 영어 화면의 배경 고르개(어드민 공지 폼·놀이터)도 한국어였다.
    배열·항목 모양(key·label·textTone)은 그대로 두고 label 만 읽을 때 사전(`promoBannerBg.<key>`)에서 꺼내는 getter 로 둔다
    — 모듈을 읽은 순간의 언어로 굳지 않고, `{ ...o }` 로 펼치면 그때의 글자가 담긴다. ko 글자는 전과 같다. */
-const 배경 = (key, 한국어, textTone) => ({
+const bg = (key, ko, textTone) => ({
     key,
-    get label() { return i18n.t(`promoBannerBg.${key}`, 한국어); },
+    get label() { return i18n.t(`promoBannerBg.${key}`, ko); },
     textTone,
 });
 /**
@@ -12,20 +12,20 @@ const 배경 = (key, 한국어, textTone) => ({
  * @public
  */
 export const PROMO_BANNER_BG_OPTIONS = [
-    배경('main', '메인 그라디언트', 'light'),
-    배경('soft', '소프트', 'dark'),
-    배경('sub', '서브 컬러', 'light'),
-    배경('deep', '딥 그라디언트', 'light'),
-    배경('softSub', '소프트 서브', 'dark'),
-    배경('warm', '웜(강조)', 'dark'),
-    배경('dark', '다크', 'light'),
-    배경('radial', '방사형 그라디언트', 'light'),
-    배경('diagonal', '대각선 패턴', 'dark'),
-    배경('dots', '도트 패턴', 'dark'),
-    배경('outline', '아웃라인', 'dark'),
-    배경('success', '성공/완료', 'light'),
-    배경('naver', '네이버 블로그 안내', 'light'),
-    배경('instagram', '인스타그램 안내', 'light'),
+    bg('main', '메인 그라디언트', 'light'),
+    bg('soft', '소프트', 'dark'),
+    bg('sub', '서브 컬러', 'light'),
+    bg('deep', '딥 그라디언트', 'light'),
+    bg('softSub', '소프트 서브', 'dark'),
+    bg('warm', '웜(강조)', 'dark'),
+    bg('dark', '다크', 'light'),
+    bg('radial', '방사형 그라디언트', 'light'),
+    bg('diagonal', '대각선 패턴', 'dark'),
+    bg('dots', '도트 패턴', 'dark'),
+    bg('outline', '아웃라인', 'dark'),
+    bg('success', '성공/완료', 'light'),
+    bg('naver', '네이버 블로그 안내', 'light'),
+    bg('instagram', '인스타그램 안내', 'light'),
 ];
 import PromoBannerBgMain from './PromoBannerBgMain';
 import PromoBannerBgSoft from './PromoBannerBgSoft';

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

@@ -17,16 +17,16 @@ export default function Rating({ value, onChange, max = 5, readOnly = false, siz
     const [hoverValue, setHoverValue] = useState(null);
     /* 고르는 모드는 별 하나 단위라 **반올림한 값**으로 그리고 옮긴다 — 소수 value(3.4)를 그대로 두면 별 셋 반쯤이 칠해지는데
        어느 라디오도 골라지지 않았고(aria-checked 없음), 화살표는 4.4·2.4 로 옮겨 가 정수 별과 어긋났다. 읽기 전용은 소수 그대로. */
-    const 값 = isReadOnly ? value : (Number.isFinite(value) ? Math.round(value) : 0);
-    const displayValue = hoverValue ?? 값;
+    const current = isReadOnly ? value : (Number.isFinite(value) ? Math.round(value) : 0);
+    const displayValue = hoverValue ?? current;
     const iconSize = ICON_SIZE[size];
     /* 값이 바뀔 때만 onChange(2026-09-15 결정) — 소수 value 3.4 에서 별 3 을 누르면 3 으로 바뀌는 것이라 부른다 */
-    const 알림 = (다음) => { if (다음 !== value)
-        onChange?.(다음); };
+    const notify = (next) => { if (next !== value)
+        onChange?.(next); };
     const handleClick = (star) => {
         if (isReadOnly)
             return;
-        알림(star);
+        notify(star);
     };
     const handleMouseEnter = (star) => {
         if (isReadOnly)
@@ -41,38 +41,38 @@ export default function Rating({ value, onChange, max = 5, readOnly = false, siz
        이라 읽어 주는데 화살표가 죽어 있다. 실측으로 별 다섯이 전부 Tab 자리였다.
        별점은 순서가 뜻을 지니므로 **돌지 않는다** — 1에서 왼쪽, 5에서 오른쪽은 그 자리에
        머문다. 아직 안 골랐으면 첫 화살표가 1을 고른다. */
-    const 그룹 = useRef(null);
-    const 옮기기 = (다음) => {
-        const 잡은값 = Math.min(max, Math.max(1, 다음));
-        알림(잡은값);
-        const 칸 = Array.from(그룹.current?.querySelectorAll('[data-star]') ?? [])
-            .find((el) => el.dataset.star === String(잡은값));
-        칸?.focus();
+    const groupRef = useRef(null);
+    const moveTo = (next) => {
+        const clamped = Math.min(max, Math.max(1, next));
+        notify(clamped);
+        const stars = Array.from(groupRef.current?.querySelectorAll('[data-star]') ?? [])
+            .find((el) => el.dataset.star === String(clamped));
+        stars?.focus();
     };
-    const 키 = (e) => {
+    const onKeyDown = (e) => {
         if (isReadOnly)
             return;
         switch (e.key) {
             case 'ArrowRight':
             case 'ArrowUp':
-                옮기기((값 || 0) + 1);
+                moveTo((current || 0) + 1);
                 break;
             case 'ArrowLeft':
             case 'ArrowDown':
-                옮기기((값 || 1) - 1);
+                moveTo((current || 1) - 1);
                 break;
             case 'Home':
-                옮기기(1);
+                moveTo(1);
                 break;
             case 'End':
-                옮기기(max);
+                moveTo(max);
                 break;
             default: return;
         }
         e.preventDefault();
     };
     /* Tab 자리를 받을 한 칸 — 고른 별, 없으면 첫 별 */
-    const 탭자리 = 값 >= 1 && 값 <= max ? Math.round(값) : 1;
+    const tabValue = current >= 1 && current <= max ? Math.round(current) : 1;
     const handleMouseLeave = () => {
         if (isReadOnly)
             return;
@@ -83,7 +83,7 @@ export default function Rating({ value, onChange, max = 5, readOnly = false, siz
        대체 글자가 없으면 낭독기에는 빈 자리다 — 눈에는 별 넷 반이 보이는데 아무것도
        안 읽힌다. 별점을 보여 주는 것이 이 모드의 유일한 일인데 그것이 사라진다.
        (별을 하나씩 읽히게 하면 "별·별·별…" 이 다섯 번 나올 뿐이라 묶음에 준다.) */
-    _jsx("div", { className: `rating rating--${size}${isReadOnly ? ' rating--readOnly' : ''} ${className}`.trim(), ref: 그룹, onKeyDown: 키, role: isReadOnly ? 'img' : 'radiogroup', "aria-label": isReadOnly
+    _jsx("div", { className: `rating rating--${size}${isReadOnly ? ' rating--readOnly' : ''} ${className}`.trim(), ref: groupRef, onKeyDown: onKeyDown, role: isReadOnly ? 'img' : 'radiogroup', "aria-label": isReadOnly
             ? t('rating.valueLabel', { value, max })
             : (ariaLabel ?? t('rating.groupLabel', '별점')), onMouseLeave: handleMouseLeave, 
         /* 터치를 떼거나 취소되면 미리보기를 푼다 */
@@ -99,6 +99,6 @@ export default function Rating({ value, onChange, max = 5, readOnly = false, siz
             if (isReadOnly) {
                 return (_jsx("span", { className: "rating__item", "aria-hidden": "true", children: starNode }, star));
             }
-            return (_jsx("button", { type: "button", className: "rating__item rating__item--interactive", role: "radio", "aria-checked": 값 === star, "aria-label": t('rating.starLabel', { n: star }), "data-star": star, tabIndex: star === 탭자리 ? 0 : -1, onClick: () => handleClick(star), onMouseEnter: () => handleMouseEnter(star), children: starNode }, star));
+            return (_jsx("button", { type: "button", className: "rating__item rating__item--interactive", role: "radio", "aria-checked": current === star, "aria-label": t('rating.starLabel', { n: star }), "data-star": star, tabIndex: star === tabValue ? 0 : -1, onClick: () => handleClick(star), onMouseEnter: () => handleMouseEnter(star), children: starNode }, star));
         }) }));
 }

package/dist/packages/core/src/components/Report/ReportDocument.js

@@ -55,19 +55,19 @@ export default function ReportDocument({ blocks, sectionTitles, logo, footer, pa
        넘치는데, 이 상자 안에는 포커스 갈 곳이 하나도 없다 — 그러면 키보드만 쓰는
        사람은 오른쪽 절반을 **영영 못 본다**(WCAG 2.1.1). 실측: 겉 560px 에 안 794px.
        늘 `tabIndex=0` 을 걸면 안 넘칠 때도 빈 탭 자리가 하나 생기므로 재서 건다. */
-    const [넘침, set넘침] = useState(false);
+    const [overflowing, setOverflowing] = useState(false);
     useEffect(() => {
         const el = rootRef.current;
         if (!el)
             return;
-        const 재자 = () => set넘침(el.scrollWidth > el.clientWidth + 1);
-        재자();
+        const measure = () => setOverflowing(el.scrollWidth > el.clientWidth + 1);
+        measure();
         // ResizeObserver 가 없는 환경(구형 브라우저·SSR·테스트 러너)에서는 생성자 호출이
         // 그대로 던져 렌더가 통째로 깨진다. 위에서 한 번은 이미 쟀으므로 추적만 포기한다
         // (BottomNav·WordTable 과 같은 처리).
         if (typeof ResizeObserver === 'undefined')
             return;
-        const ro = new ResizeObserver(재자);
+        const ro = new ResizeObserver(measure);
         ro.observe(el);
         return () => ro.disconnect();
     }, [measured]);
@@ -81,36 +81,36 @@ export default function ReportDocument({ blocks, sectionTitles, logo, footer, pa
     const shape = blocks.map((b) => `${b.id}\u0000${b.section ?? ''}\u0000${b.group ?? ''}`).join('\u0001');
     const pages = measured && measured.shape === shape ? measured.pages : null;
     /* 자(ruler)의 높이 — 0 에서 크기가 생기면(숨겨져 있다 보이게 됨) 다시 잰다 */
-    const [자크기, set자크기] = useState(0);
+    const [rulerSize, setRulerSize] = useState(0);
     useEffect(() => {
         const ruler = rulerRef.current;
         if (!ruler || typeof ResizeObserver === 'undefined')
             return;
-        const ro = new ResizeObserver(() => set자크기(ruler.offsetHeight));
+        const ro = new ResizeObserver(() => setRulerSize(ruler.offsetHeight));
         ro.observe(ruler);
         return () => ro.disconnect();
     }, []);
     /* **내용 높이가 바뀌면 다시 잰다** — 짜임(id·section·group)이 같아도 메모가 길어지거나 글꼴·이미지가 늦게 와 블록 높이가 달라지면
        예전 나눔 그대로 장이 넘쳤다(소리방향성은 id 에 메모 길이를 넣어 짜임을 바꾸는 우회를 썼다 — 그 길도 그대로 된다).
        재기 사본 블록마다 ResizeObserver 를 걸고, 여러 번 울려도 다시 나눔은 rAF 한 번으로 모은다. 없는 환경에서는 지금처럼. */
-    const [다시재기, set다시재기] = useState(0);
+    const [remeasureTick, setRemeasureTick] = useState(0);
     useEffect(() => {
         const el = measureRef.current;
         if (!el || typeof ResizeObserver === 'undefined')
             return;
-        let 틀 = null;
-        const 미루기 = typeof requestAnimationFrame === 'function'
+        let frameId = null;
+        const defer = typeof requestAnimationFrame === 'function'
             ? (f) => requestAnimationFrame(f)
             : (f) => setTimeout(f, 16);
-        const 거두기 = typeof cancelAnimationFrame === 'function' ? cancelAnimationFrame : (id) => clearTimeout(id);
+        const undefer = typeof cancelAnimationFrame === 'function' ? cancelAnimationFrame : (id) => clearTimeout(id);
         const ro = new ResizeObserver(() => {
-            if (틀 != null)
+            if (frameId != null)
                 return;
-            틀 = 미루기(() => { 틀 = null; set다시재기((n) => n + 1); });
+            frameId = defer(() => { frameId = null; setRemeasureTick((n) => n + 1); });
         });
         Array.from(el.children).forEach((c) => ro.observe(c));
-        return () => { ro.disconnect(); if (틀 != null)
-            거두기(틀); };
+        return () => { ro.disconnect(); if (frameId != null)
+            undefer(frameId); };
     }, [shape]);
     useLayoutEffect(() => {
         const el = measureRef.current;
@@ -124,13 +124,13 @@ export default function ReportDocument({ blocks, sectionTitles, logo, footer, pa
         /* 높이는 **소수 그대로** 잰다 — offsetHeight 는 정수로 반올림해, 소수 높이 블록이 모이면 반올림 합은 예산과 같은데 실제 장은
            종이보다 3px 넘쳤고(mm 규격의 자 1016.69px 는 1017 로 올림) 인쇄에서는 그 1px 로 쪽이 하나 더 생겼다(Chromium PDF 확인).
            rect 가 0 인 환경(레이아웃 없는 시험)에서는 offsetHeight 로 물러선다. */
-        const 높이 = (node) => node.getBoundingClientRect().height || node.offsetHeight;
+        const heightOf = (node) => node.getBoundingClientRect().height || node.offsetHeight;
         const chromeOf = new Map();
         chromeRef.current?.querySelectorAll('[data-chrome-section]').forEach((node) => {
-            chromeOf.set(node.dataset.chromeSection ?? '', 높이(node));
+            chromeOf.set(node.dataset.chromeSection ?? '', heightOf(node));
         });
-        const budgetFor = (section) => 높이(ruler) - (chromeOf.get(section ?? '') ?? 0);
-        const heights = Array.from(el.children).map((c) => 높이(c));
+        const budgetFor = (section) => heightOf(ruler) - (chromeOf.get(section ?? '') ?? 0);
+        const heights = Array.from(el.children).map((c) => heightOf(c));
         // 이웃한 같은 group 을 한 덩어리로 묶는다.
         const groups = [];
         blocks.forEach((b, i) => {
@@ -179,11 +179,11 @@ export default function ReportDocument({ blocks, sectionTitles, logo, footer, pa
         });
         flush();
         /* 같은 나눔이면 상태를 그대로 둔다 — 다시 재기(ResizeObserver 첫 울림 등)마다 새 객체로 렌더가 한 번 더 도는 것을 막는다 */
-        setMeasured((앞) => (앞 && 앞.shape === shape && JSON.stringify(앞.pages) === JSON.stringify(packed) ? 앞 : { shape, pages: packed }));
+        setMeasured((prev) => (prev && prev.shape === shape && JSON.stringify(prev.pages) === JSON.stringify(packed) ? prev : { shape, pages: packed }));
         // blocks 는 위 shape 로 대신 본다.
         // eslint-disable-next-line react-hooks/exhaustive-deps
         // 장 규격이 바뀌면 글이 다시 흘러 블록 높이가 달라진다 — 자(세로) 높이는 그대로라 자크기만으로는 다시 재지 않아 장이 넘쳤다
-    }, [shape, 자크기, pageWidth, pageHeight, margin, 다시재기]);
+    }, [shape, rulerSize, pageWidth, pageHeight, margin, remeasureTick]);
     /* 번들러마다 SVG import 결과가 다르다 — Vite 는 문자열, Next 는 `{ src }` 객체다.
        문자열만 보면 Next 앱에서 fallback 경로(`/logo/...`)로 떨어져 404 가 난다
        (kscan 결과지의 바닥 로고가 실제로 깨졌다). 둘 다 받는다. */
@@ -208,7 +208,7 @@ export default function ReportDocument({ blocks, sectionTitles, logo, footer, pa
     return (_jsxs("div", { ref: rootRef, className: cx('report-doc', className), style: vars, 
         /* 굴릴 것이 있을 때만 포커스를 받는다. 이름 없이 포커스만 주면 낭독기가
            문서 전체를 읽어 버리므로 역할과 이름을 함께 준다. */
-        tabIndex: 넘침 ? 0 : undefined, role: 넘침 ? 'group' : undefined, "aria-label": 넘침 ? t('report.previewRegion', '보고서 미리보기') : undefined, children: [_jsxs("div", { className: "report-doc__measure", "aria-hidden": true, children: [_jsx("div", { ref: rulerRef, className: "report-doc__ruler" }), _jsx("div", { ref: chromeRef, children: chromeSections.map((sec) => {
+        tabIndex: overflowing ? 0 : undefined, role: overflowing ? 'group' : undefined, "aria-label": overflowing ? t('report.previewRegion', '보고서 미리보기') : undefined, children: [_jsxs("div", { className: "report-doc__measure", "aria-hidden": true, children: [_jsx("div", { ref: rulerRef, className: "report-doc__ruler" }), _jsx("div", { ref: chromeRef, children: chromeSections.map((sec) => {
                             const c = chrome(1, 1, sec || undefined);
                             return _jsxs("div", { "data-chrome-section": sec, children: [c.header, c.footer] }, sec);
                         }) }), _jsx("div", { ref: measureRef, className: "report-doc__measure-blocks", children: blocks.map((b) => (_jsx("div", { children: b.content }, b.id))) })] }), pages && (_jsx("div", { className: "report-doc__pages", children: pages.map((idxs, p) => {

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

@@ -13,7 +13,7 @@ const RING_SIZE_PRESET = {
 /** 원시 링 렌더링 — 도넛 링 하나만 그린다(헤더/legend 없음) */
 /** 비율 → 퍼센트 정수. **다 채우기 전에는 100 을 내지 않는다** — 반올림하면 199/200 이 '100%' 인데 링 끝은 비고 범례는
  *  '미완료 1건' 이었다(말귀 숙제 완료율). 같은 까닭으로 0 초과면 0 을 내지 않는다. */
-function 퍼센트(ratio) {
+function toPercent(ratio) {
     if (!Number.isFinite(ratio) || ratio <= 0)
         return 0;
     if (ratio >= 1)
@@ -43,7 +43,7 @@ function RingChartCanvas({ done, total, segments, color = 'var(--color-main)', s
     const pct = (total ?? 0) > 0 ? Math.min((done ?? 0) / total, 1) : 0;
     const filled = circumference * pct;
     const gap = circumference - filled;
-    return (_jsxs("div", { className: "ring-chart", style: { width: dim, height: dim }, children: [_jsxs("svg", { width: dim, height: dim, viewBox: `0 0 ${dim} ${dim}`, "aria-hidden": "true", children: [_jsx("circle", { cx: center, cy: center, r: radius, fill: "none", stroke: "var(--color-whiteLine)", strokeWidth: stroke }), pct > 0 && (_jsx("circle", { cx: center, cy: center, r: radius, fill: "none", stroke: color, strokeWidth: stroke, strokeDasharray: `${filled} ${gap}`, strokeLinecap: pct < 0.02 || pct > 0.98 ? 'butt' : 'round', transform: `rotate(-90 ${center} ${center})` }))] }), !hideCenter && (_jsxs("div", { className: `ring-chart__center${hideLabel ? '' : ` ${dim <= 96 ? 'ring-chart__center--small' : size === 'medium' ? 'ring-chart__center--medium' : 'ring-chart__center--large'}`}`, children: [_jsx("span", { className: `ring-chart__pct ${dim <= 96 ? 'h2' : 'h1'}`, children: 퍼센트(pct) }), !hideLabel && (_jsx("span", { className: `ring-chart__label ${dim <= 96 ? 'caption-2' : 'caption-1'}${dim <= 96 || size === 'medium' ? ' ring-chart__label--tight' : ''}`, children: label }))] }))] }));
+    return (_jsxs("div", { className: "ring-chart", style: { width: dim, height: dim }, children: [_jsxs("svg", { width: dim, height: dim, viewBox: `0 0 ${dim} ${dim}`, "aria-hidden": "true", children: [_jsx("circle", { cx: center, cy: center, r: radius, fill: "none", stroke: "var(--color-whiteLine)", strokeWidth: stroke }), pct > 0 && (_jsx("circle", { cx: center, cy: center, r: radius, fill: "none", stroke: color, strokeWidth: stroke, strokeDasharray: `${filled} ${gap}`, strokeLinecap: pct < 0.02 || pct > 0.98 ? 'butt' : 'round', transform: `rotate(-90 ${center} ${center})` }))] }), !hideCenter && (_jsxs("div", { className: `ring-chart__center${hideLabel ? '' : ` ${dim <= 96 ? 'ring-chart__center--small' : size === 'medium' ? 'ring-chart__center--medium' : 'ring-chart__center--large'}`}`, children: [_jsx("span", { className: `ring-chart__pct ${dim <= 96 ? 'h2' : 'h1'}`, children: toPercent(pct) }), !hideLabel && (_jsx("span", { className: `ring-chart__label ${dim <= 96 ? 'caption-2' : 'caption-1'}${dim <= 96 || size === 'medium' ? ' ring-chart__label--tight' : ''}`, children: label }))] }))] }));
 }
 /**
  * 도넛 링 차트 — 전체 대비 완료 비율을 원형 호로 표현.
@@ -55,11 +55,11 @@ export default function RingChart({ titleKey, titleLevel, headRight, icon, showT
     const { t } = useTranslation();
     if (!titleKey)
         return _jsx(RingChartCanvas, { ...ringProps });
-    const pct = (ringProps.total ?? 0) > 0 ? 퍼센트(Math.min((ringProps.done ?? 0) / ringProps.total, 1)) : 0;
+    const pct = (ringProps.total ?? 0) > 0 ? toPercent(Math.min((ringProps.done ?? 0) / ringProps.total, 1)) : 0;
     // size='small' — 대시보드 작은 그리드용 블럭. 컨트롤(headRight)만 생략하고 total/legend는 medium과 동일하게 유지
     const isSmall = ringProps.size === 'small';
     /* 기다림 뼈대의 지름 — 그려질 링과 **같은 셈** 을 쓴다(RingChartCanvas 의 dim) */
-    const 기다림지름 = typeof ringProps.size === 'number' ? ringProps.size : RING_SIZE_PRESET[ringProps.size ?? 'medium'].diameter;
+    const loaderSize = typeof ringProps.size === 'number' ? ringProps.size : RING_SIZE_PRESET[ringProps.size ?? 'medium'].diameter;
     // size='large' — 카드가 가로 폭을 거의 100% 차지(1열)
     const isLarge = ringProps.size === 'large';
     const sectionClassName = [className, isSmall ? 'manager-section--compact' : isLarge ? 'manager-section--full' : '']
@@ -70,5 +70,5 @@ export default function RingChart({ titleKey, titleLevel, headRight, icon, showT
         /* 링도 같은 병이 있었다 — 기다림 상자 186px, 그려진 링은 지름(medium 120px)이다.
            **그려질 링과 같은 자리·같은 지름**의 뼈대를 세우고 그 안에서 기다린다
            (BarChart 와 같은 결, 사용자 지시 2026-09-17 "뼈대 먼저, 그 안에서 로딩"). */
-        _jsx("div", { className: "ring-chart-section-body ring-chart-section-body--offset", children: _jsx("div", { className: "ring-chart ring-chart--loading", style: { width: 기다림지름, height: 기다림지름 }, "aria-busy": "true", children: _jsx(Loader, { size: 32 }) }) })) : (_jsx("div", { className: "ring-chart-section-body ring-chart-section-body--offset", children: _jsx(RingChartCanvas, { ...ringProps, hideCenter: ringProps.hideCenter ?? isSmall }) })) }));
+        _jsx("div", { className: "ring-chart-section-body ring-chart-section-body--offset", children: _jsx("div", { className: "ring-chart ring-chart--loading", style: { width: loaderSize, height: loaderSize }, "aria-busy": "true", children: _jsx(Loader, { size: 32 }) }) })) : (_jsx("div", { className: "ring-chart-section-body ring-chart-section-body--offset", children: _jsx(RingChartCanvas, { ...ringProps, hideCenter: ringProps.hideCenter ?? isSmall }) })) }));
 }