@ihabdevteam/core 0.8.0

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

@@ -0,0 +1,135 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useState, useEffect, useRef, useId } from "react";
+import { createPortal } from "react-dom";
+import { useTranslation } from "react-i18next";
+import Button from "../Button";
+import { pushEsc } from "../../hooks/escStack";
+import { lockBodyScroll } from "../../hooks/bodyScrollLock";
+import "./Popup.css";
+import { useFocusTrap, FOCUSABLE_SELECTOR } from '../../hooks/useFocusTrap';
+const ANIM_MS = 260;
+// 패널 안에서 Tab 순환 대상으로 삼을 요소들 — disabled/tabindex="-1"은 제외.
+/** @public */
+export default function Popup(props) {
+    const { t } = useTranslation();
+    const { title, subtitle, headerActions, children, buttons, footer, footerClassName = "", onClose, closeDisabled = false, beforeClose, className = "", ariaLabel, useTitle = true, inline = false, size, resetScrollKey } = props || {};
+    const [closing, setClosing] = useState(false);
+    // 닫힘 애니메이션 중(260ms)엔 버튼이 시각적으로만 흐려질 뿐 클릭은 계속 가능해,
+    // 그 사이 같은 버튼을 연타하면 cb(확인/완료 콜백)가 여러 번 예약되어 중복 실행된다.
+    // ref로 "이미 닫는 중"을 막아 cb가 정확히 한 번만 호출되게 한다.
+    const closingRef = useRef(false);
+    const panelRef = useRef(null);
+    // 다이얼로그 접근명 — 제목이 있을 때 aria-labelledby로 연결(제목 없으면 미설정, 회귀 없음).
+    const titleId = useId();
+    const contentRef = useRef(null);
+    // 이름 없는 다이얼로그를 개발 중에 잡는다 — aria-modal 다이얼로그에 접근명이 없으면
+    // 스크린리더가 "대화상자"라고만 읽어 무슨 창인지 알 수 없다. 타입으로는 강제할 수
+    // 없는 조합(useTitle=false + ariaLabel 미지정)이라 실행 시점에 알린다.
+    //
+    // **어느 창인지 반드시 함께 말한다.** 전에는 문구만 남겨서, 운영 오류 기록에 아홉
+    // 번 쌓이는 동안 어느 팝업인지 아무도 몰라 손을 못 댔다(2026-08-17~30). Popup 은
+    // 수십 군데서 쓰이고 title 이 변수로 들어와 런타임에만 비므로, 정적으로도 못 찾는다.
+    // className 과 본문 첫머리면 호출부가 한 번에 짚인다.
+    useEffect(() => {
+        if (inline)
+            return;
+        if (!title && !ariaLabel && import.meta.env?.DEV) {
+            const 본문 = panelRef.current?.textContent?.replace(/\s+/g, ' ').trim().slice(0, 60) ?? '';
+            const 표시 = [
+                className ? `class="${className}"` : null,
+                본문 ? `본문 "${본문}${본문.length >= 60 ? '…' : ''}"` : null,
+            ].filter(Boolean).join(' · ');
+            console.warn(`[Popup] 제목도 ariaLabel도 없어 다이얼로그에 접근명이 없습니다 — ariaLabel을 주세요.` +
+                (표시 ? ` (${표시})` : ' (단서 없음 — 빈 팝업)'));
+        }
+    }, [inline, title, ariaLabel, className]);
+    // resetScrollKey가 바뀌면(탭/모드 전환 등) 본문 스크롤을 맨 위로 되돌린다 —
+    // 그러지 않으면 스크롤을 내린 상태에서 전환했을 때 새로 렌더된 짧은 콘텐츠가
+    // 화면 밖에 가려 빈 화면처럼 보인다.
+    useEffect(() => {
+        if (resetScrollKey === undefined)
+            return;
+        if (contentRef.current)
+            contentRef.current.scrollTop = 0;
+    }, [resetScrollKey]);
+    // 본문이 실제로 넘칠 때만 스크롤 컨테이너를 포커스 대상으로 만든다.
+    // 약관·개인정보처리방침처럼 본문만 1만 자가 넘는 팝업은 안에 포커스 가능한 요소가 없어,
+    // tabIndex가 없으면 키보드만 쓰는 사용자가 아예 스크롤할 수 없다(WCAG 2.1.1).
+    // 넘치지 않을 때는 부여하지 않는다 — 짧은 확인 팝업에 불필요한 Tab 정지점이 생긴다.
+    const [contentScrollable, setContentScrollable] = useState(false);
+    useEffect(() => {
+        const el = contentRef.current;
+        if (!el)
+            return;
+        const check = () => setContentScrollable(el.scrollHeight > el.clientHeight + 1);
+        check();
+        if (typeof ResizeObserver === 'undefined')
+            return;
+        const ro = new ResizeObserver(check);
+        ro.observe(el);
+        const inner = el.firstElementChild;
+        if (inner)
+            ro.observe(inner);
+        return () => ro.disconnect();
+    }, [children, resetScrollKey]);
+    useEffect(() => {
+        if (inline)
+            return;
+        return lockBodyScroll();
+    }, [inline]);
+    // 포커스 관리 — 이전까진 팝업이 열려도 포커스가 배경(주로 body)에 남아있어서,
+    // 키보드 사용자가 Tab을 눌러도 팝업 밖 배경 요소로 이동해버리고(포커스 트랩 없음),
+    // 스크린리더는 열린 다이얼로그를 아예 인지하지 못했다. 열릴 때 패널(또는 첫 포커스
+    // 가능 요소)로 포커스를 옮기고, 닫히면 원래 포커스였던 요소로 되돌린다.
+    // 단, 자식이 자체 autoFocus를 쓰는 경우(SaveTablePopup 등)는 이미 그쪽으로 포커스가
+    // 가 있을 것이므로(브라우저가 커밋 시점에 처리) 뺏지 않는다.
+    useEffect(() => {
+        if (inline)
+            return;
+        const previouslyFocused = document.activeElement;
+        const panel = panelRef.current;
+        if (panel && !panel.contains(document.activeElement)) {
+            const first = panel.querySelector(FOCUSABLE_SELECTOR);
+            (first ?? panel).focus();
+        }
+        return () => { previouslyFocused?.focus?.(); };
+    }, [inline]);
+    /* Tab 순환을 패널 안으로 가둔다 — 네 곳에 있던 같은 열두 줄을 훅 한 벌로 모았다.
+       inline 으로 쓸 때는 다이얼로그가 아니라 걸지 않는다(예전과 같다). */
+    useFocusTrap(panelRef, !inline);
+    const animateThen = useCallback((cb) => {
+        if (closingRef.current)
+            return;
+        closingRef.current = true;
+        setClosing(true);
+        setTimeout(() => {
+            try {
+                cb && cb();
+            }
+            catch (e) { }
+        }, ANIM_MS);
+    }, []);
+    const closeWithAnimation = useCallback(() => {
+        if (closeDisabled)
+            return;
+        // animateThen보다 먼저 물어본다 — 애니메이션이 시작된 뒤엔 되돌릴 수 없다(위 주석 참고)
+        if (beforeClose && beforeClose() === false)
+            return;
+        animateThen(onClose);
+    }, [animateThen, onClose, closeDisabled, beforeClose]);
+    // ESC 닫기 — 공유 스택에 등록(최상단 팝업만 닫힘). onClose가 있고 portal 모드일 때만.
+    // 핸들러는 ref로 최신화해 스택 재등록(churn) 없이 1회만 push 한다.
+    const closeRef = useRef(closeWithAnimation);
+    useEffect(() => { closeRef.current = closeWithAnimation; });
+    const escEnabled = !inline && !!onClose;
+    useEffect(() => {
+        if (!escEnabled)
+            return;
+        return pushEsc(() => closeRef.current());
+    }, [escEnabled]);
+    const el = (_jsx("div", { className: `popup ${inline ? 'popup--inline' : ''} ${closing ? 'popup--closing' : ''} ${className}`, children: _jsxs("div", { ref: panelRef, className: `popup-panel${size ? ` popup-panel--${size}` : ''}`, tabIndex: -1, role: inline ? undefined : 'dialog', "aria-modal": inline ? undefined : true, "aria-labelledby": !inline && title ? titleId : undefined, "aria-label": !inline && !title && ariaLabel ? ariaLabel : undefined, children: [!useTitle && (headerActions || onClose) ? (_jsxs("div", { className: "popup-close-float", children: [headerActions, onClose && _jsx(Button, { size: 40, type: "dot", icon: "x", variant: "transparent-gray", useBorder: false, onClick: closeWithAnimation, disabled: closeDisabled, ariaLabel: t('common.close', '닫기') })] })) : (title || headerActions || onClose) ? (_jsxs("div", { className: `popup-header${subtitle ? ' popup-header--with-subtitle' : ''}`, children: [_jsxs("div", { className: "popup-header-main", children: [_jsx("span", { id: titleId, className: "popup-title popup-title--left h2", children: title }), subtitle && _jsx("span", { className: "popup-subtitle body-3", children: subtitle })] }), _jsxs("div", { className: "popup-header-actions", children: [headerActions, onClose && (_jsx(Button, { size: 40, type: "dot", icon: "x", variant: "transparent-gray", useBorder: false, onClick: closeWithAnimation, disabled: closeDisabled, ariaLabel: t('common.close', '닫기') }))] })] })) : null, _jsx("div", { className: "popup-content", ref: contentRef, tabIndex: contentScrollable ? 0 : undefined, children: _jsx("div", { className: "popup-content__inner", children: typeof children === 'function' ? children({ animateThen, closeWithAnimation }) : children }) }), buttons?.length ? (_jsx("div", { className: "popup-footer popup-footer--buttons", children: buttons.map((btn, i) => (_jsx(Button, { size: 48, variant: btn.variant ?? 'default', label: btn.label, disabled: btn.disabled, onClick: () => btn.onClick?.({ animateThen, closeWithAnimation }) }, i))) })) : footer ? (_jsx("div", { className: `popup-footer${footerClassName ? ` ${footerClassName}` : ''}`, children: typeof footer === 'function' ? footer({ animateThen, closeWithAnimation }) : footer })) : null] }) }));
+    if (inline || typeof document === 'undefined')
+        return el;
+    return createPortal(el, document.body);
+}

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

@@ -0,0 +1,32 @@
+.popup--save-table .popup-panel { max-width: 560px; }
+.popup--save-table .popup-footer { gap: var(--spacing-l); }
+
+.save-table-popup__body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-s);
+  padding: 4px 20px;
+}
+
+.save-table-popup__duplicate {
+  margin: 0;
+  color: var(--color-main);
+}
+
+.save-table-popup__duplicate strong {
+  font-weight: 600;
+}
+
+/* ── 미리보기 ── */
+.save-table-popup__preview-wrap {
+  position: relative;
+  overflow: hidden;
+  border: 1px solid var(--color-whiteLine);
+}
+
+.save-table-popup__preview {
+  position: absolute;
+  transform-origin: top left;
+  background: var(--color-white);
+  pointer-events: none;
+}

package/dist/packages/core/src/components/Popup/SaveTablePopup.d.ts

@@ -0,0 +1,25 @@
+import { type ReactNode } from 'react';
+import type { WordSearchResultItem } from '../Word/WordSearchResultBlock';
+import './SaveTablePopup.css';
+interface SaveTablePopupProps {
+    /** 팝업 제목. 없으면 '단어표 저장하기' 기본값 사용 (대립쌍표 저장 시 '대립쌍표 저장하기' 등으로 오버라이드) */
+    title?: string;
+    /** 확정 버튼 라벨. 없으면 '저장'(수정 모드에서 '수정 저장' 등으로 교체) */
+    saveLabel?: string;
+    defaultName?: string;
+    defaultDescription?: string;
+    preview?: ReactNode;
+    previewW?: number;
+    previewH?: number;
+    items?: WordSearchResultItem[];
+    existingNames?: string[];
+    /** 외부에서 기존 테이블 목록을 주입. 없으면 localStorage에서 로드해 중복 이름 감지. */
+    existingTables?: {
+        name: string;
+        items: WordSearchResultItem[];
+    }[];
+    onSave: (name: string, description?: string) => void;
+    onCancel: () => void;
+}
+export default function SaveTablePopup({ title, saveLabel, defaultName, defaultDescription, preview, previewW, previewH, existingNames, onSave, onCancel, }: SaveTablePopupProps): import("react").JSX.Element;
+export {};

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

@@ -0,0 +1,55 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useState, useRef, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import Popup from './Popup';
+import Button from '../Button';
+import Panel, { PanelRow } from '../Panel';
+import TextField from '../TextField';
+import './SaveTablePopup.css';
+const FIXED_RATIO = 794 / 1123; // 항상 가로 A4 비율로 고정
+export default function SaveTablePopup({ title, saveLabel, defaultName = '', defaultDescription = '', preview, previewW = 1123, previewH = 794, existingNames, onSave, onCancel, }) {
+    const { t } = useTranslation();
+    const [name, setName] = useState(defaultName);
+    const [description, setDescription] = useState(defaultDescription);
+    const containerRef = useRef(null);
+    const [previewState, setPreviewState] = useState({ scale: 1, fixedH: 0, offsetX: 0, offsetY: 0 });
+    useEffect(() => {
+        const el = containerRef.current;
+        if (!el || !preview)
+            return;
+        const update = () => {
+            const w = el.clientWidth;
+            const fixedH = w * FIXED_RATIO;
+            const s = Math.min(w / previewW, fixedH / previewH);
+            setPreviewState({
+                scale: s,
+                fixedH,
+                offsetX: (w - previewW * s) / 2,
+                offsetY: (fixedH - previewH * s) / 2,
+            });
+        };
+        update();
+        // ResizeObserver 가 없는 환경(구형 브라우저·SSR·테스트 러너)에서는 생성자 호출이
+        // 그대로 던져 렌더가 통째로 깨진다. 위에서 초기값은 이미 쟀으므로 추적만 포기한다
+        // (Popup·CrosswordGame·Tooltip 과 같은 처리).
+        if (typeof ResizeObserver === 'undefined')
+            return;
+        const observer = new ResizeObserver(update);
+        observer.observe(el);
+        return () => observer.disconnect();
+    }, [previewW, previewH, preview]);
+    const isDuplicateName = !!existingNames &&
+        existingNames.some(n => n.trim().toLowerCase() === name.trim().toLowerCase());
+    const handleSave = useCallback((animateThen) => animateThen(() => onSave(name.trim(), description.trim() || undefined)), [name, description, onSave]);
+    const handleEnter = useCallback(() => {
+        if (name.trim() && !isDuplicateName)
+            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, { size: 48, type: "bar", label: t('common.cancel', '취소'), onClick: closeWithAnimation }), _jsx(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: {
+                            width: previewW, height: previewH,
+                            transform: `scale(${previewState.scale})`,
+                            top: previewState.offsetY,
+                            left: previewState.offsetX,
+                        }, children: preview }) })), _jsxs(Panel, { size: "medium", labelWidth: 64, useBorder: false, useRowBorder: false, children: [_jsx(PanelRow, { variant: "custom", label: t('wordTable.save.nameLabel', '이름'), required: true, align: "vertical", useFullWidth: true, children: _jsx(TextField, { required: true, value: name, onChange: setName, ariaLabel: t('wordTable.save.nameLabel', '이름'), placeholder: t('wordTable.save.placeholder', '이 단어표에 대한 제목을 입력하세요.'), maxLength: 40, size: 48, fullWidth: true, autoFocus: true, onEnter: handleEnter, error: isDuplicateName ? t('wordTable.save.duplicateName', '이미 사용 중인 이름입니다.') : undefined }) }), _jsx(PanelRow, { variant: "custom", label: t('wordTable.save.descriptionLabel', '설명'), align: "vertical", useFullWidth: true, children: _jsx(TextField, { value: description, onChange: setDescription, ariaLabel: t('wordTable.save.descriptionLabel', '설명'), placeholder: t('wordTable.save.descriptionPlaceholder', '이 단어표에 대한 설명을 입력하세요.'), maxLength: 200, multiline: true, rows: 3, fullWidth: true }) })] })] }) }));
+}

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

@@ -0,0 +1,277 @@
+/* 스크롤은 Popup의 .popup-content가 단독으로 담당한다(이중 스크롤 금지 —
+   예전 .trp-result__scroll 래퍼가 휠을 가로채 레이어 위에서 스크롤이 안 되던 문제). */
+.trp-result {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  /* 여백은 전부 바깥(popup-content 20px, popup-content__inner 하단 20px, footer 20px)이
+     이미 대고 있다. 여기서 또 주면 결과 표만 안쪽으로 밀려 좁아 보이므로 0으로 둔다.
+     head는 자체 padding(12px 72px 20px)으로 중앙 정렬 폭을 따로 잡는다. */
+  padding: 0;
+}
+
+/* 이 팝업은 제목이 없어서 popup-header가 '닫기 버튼만 담은 60px 빈 띠'가 된다.
+   버튼을 패널 위로 띄워 그 띠를 없애고, 본문이 그만큼 위로 올라오게 한다.
+   (.popup-panel이 position:relative라 그대로 기준이 된다) */
+.popup--training-result .popup-header {
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 1;
+  padding: var(--spacing-l) var(--spacing-l) 0;
+}
+
+/* ── Header ── */
+.trp-result__head {
+  /* 상단 52px → 12px: popup-content 20px과 합쳐 32px이면 충분하다(기존 92px)
+     하단 40px → 20px: 아래 body의 padding-top 16px과 합쳐 점수와 표 사이를 약 40px로 (기존 84px) */
+  padding: 12px 72px 20px;
+  text-align: center;
+  position: relative;
+}
+.trp-result__eyebrow {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  letter-spacing: .22em;
+  text-transform: uppercase;
+  color: var(--color-main);
+  margin: 0 0 14px;
+}
+.trp-result__eyebrow::before, .trp-result__eyebrow::after {
+  content: "";
+  width: 24px;
+  height: 1px;
+  background: currentColor;
+  opacity: .35;
+}
+.trp-result__title {
+  font-size: 28px;
+  margin: 0;
+  color: var(--color-black);
+}
+.trp-result__subtitle {
+  margin: 10px 0 0;
+  color: var(--color-gray);
+}
+
+/* ── Score hero ── */
+.trp-score {
+  margin: 36px auto 8px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--spacing-m);
+}
+.trp-score__figure {
+  display: flex;
+  align-items: baseline;
+  gap: var(--spacing-s);
+  font-variant-numeric: tabular-nums;
+}
+.trp-score__sep, .trp-score__total {
+  font-size: 44px;
+  color: var(--color-lightGray);
+  align-self: flex-end;
+  padding-bottom: 18px;
+  letter-spacing: -1px;
+}
+.trp-score__big {
+  font-size: 112px;
+  line-height: .92;
+  letter-spacing: -5px;
+  background: var(--color-main);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+/* ── Accuracy bar ── */
+.trp-accuracy {
+  margin: 28px auto 0;
+  max-width: 620px;
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  justify-content: center;
+}
+.trp-accuracy__seg {
+  flex: 1;
+  height: 6px;
+  border-radius: 999px;
+  background: var(--color-darkWhite, var(--color-darkWhite));
+}
+.trp-accuracy__seg.is-on {
+  background: linear-gradient(90deg, var(--color-main), var(--color-sub));
+}
+.trp-accuracy__label {
+  color: var(--color-gray);
+  margin-left: var(--spacing-xs);
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+}
+
+/* ── Table ── */
+/* 결과 표는 좌우 72px 들여쓰기를 걷어내 넓게 쓴다 —
+   가장자리 여백은 popup-content의 좌우 20px로만 남긴다. */
+.trp-result__body { padding: 16px 0 0; }
+
+.result-table { width: 100%; }
+.result-table__head {
+  display: grid;
+  grid-template-columns: 1fr 100px;
+  gap: var(--spacing-m);
+  padding: 12px 4px 14px;
+  border-bottom: 1px solid var(--color-whiteLine);
+  color: var(--color-lightGray);
+  letter-spacing: .16em;
+  text-transform: uppercase;
+}
+.result-table--answer .result-table__head,
+.result-table--answer .result-table__row {
+  grid-template-columns: 1fr 200px 100px;
+}
+.result-table__head .col-right { text-align: center; }
+
+.result-table__row {
+  display: grid;
+  grid-template-columns: 1fr 100px;
+  gap: var(--spacing-m);
+  align-items: center;
+  padding: 22px 4px;
+  border-bottom: 1px solid var(--color-whiteLine);
+  transition: background .18s ease;
+}
+.result-table__row:hover { background: var(--color-deepWhite); }
+.result-table__row:last-child { border-bottom: 0; }
+
+.trp-row__problem {
+  display: flex;
+  align-items: baseline;
+  gap: 10px;
+}
+.trp-row__no {
+  flex-shrink: 0;
+  width: 32px;
+  color: var(--color-lightGray);
+  font-variant-numeric: tabular-nums;
+}
+.trp-row__q {
+  color: var(--color-black);
+  letter-spacing: -.1px;
+}
+.trp-row__judge {
+  display: flex;
+  justify-content: center;
+  align-self: center;
+}
+
+/* ── Answer column (긴 이야기 듣기) ── */
+.trp-row__answers {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+  align-self: center;
+}
+.trp-row__answer-line {
+  display: flex;
+  align-items: baseline;
+  gap: 10px;
+}
+.trp-row__answer-label {
+  flex-shrink: 0;
+  width: 32px;
+}
+.trp-row__answer-label.answer-correct { color: var(--color-lightGray); }
+.trp-row__answer-label.answer-selected.is-correct { color: var(--color-main); }
+.trp-row__answer-label.answer-selected.is-wrong   { color: var(--color-error); }
+.trp-row__answer-value { color: var(--color-black); }
+.trp-row__answer-value.is-correct { color: var(--color-main); }
+.trp-row__answer-value.is-wrong   { color: var(--color-error); }
+
+
+/* ── Footer ── (Popup의 .popup-footer 래퍼에 붙는다 — 스크롤과 무관하게 하단 고정) */
+.popup-footer.trp-result__foot {
+  padding: var(--spacing-l);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-s);
+  flex-shrink: 0;
+  background: var(--color-white);
+}
+.trp-foot__note {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  color: var(--color-gray);
+  font-size: 13px;
+}
+.trp-foot__note svg { color: var(--color-main); flex-shrink: 0; }
+.trp-actions { display: flex; gap: var(--spacing-s); }
+
+/* ── Animations ── */
+@keyframes result-rise {
+  from { opacity: 0; transform: translateY(10px); }
+  to { opacity: 1; transform: none; }
+}
+.trp-result.is-on { animation: result-rise .5s cubic-bezier(.22,.9,.3,1) both; }
+.trp-result.is-on .trp-score__big { animation: result-rise .7s cubic-bezier(.22,.9,.3,1) .1s both; }
+.trp-result.is-on .result-table__row { animation: result-rise .5s cubic-bezier(.22,.9,.3,1) both; }
+.trp-result.is-on .result-table__row:nth-child(2) { animation-delay: .18s; }
+.trp-result.is-on .result-table__row:nth-child(3) { animation-delay: .24s; }
+.trp-result.is-on .result-table__row:nth-child(4) { animation-delay: .30s; }
+.trp-result.is-on .result-table__row:nth-child(5) { animation-delay: .36s; }
+
+/* ── Mobile ── */
+@media (max-width: 767px) {
+  .trp-result { padding: 0; }
+  .trp-result__head { padding: 0px 20px 20px; }
+  .trp-result__body { padding: 0; }
+  .popup-footer.trp-result__foot {
+    padding: var(--spacing-l);
+    gap: var(--spacing-xs);
+
+    border-top: 1px solid var(--color-whiteLine);
+  }
+  .trp-actions {
+    width: 100%;
+    display: flex;
+    gap: var(--spacing-xs);
+  }
+  .trp-actions > * { flex: 1; min-width: 0; }
+
+  .trp-score { margin: 20px auto 4px; gap: 10px; }
+  .trp-score__big { font-size: 72px; letter-spacing: -3px; }
+  .trp-score__sep, .trp-score__total { font-size: 28px; padding-bottom: 10px; }
+
+
+  /* 일반 테이블 */
+  .result-table__head { display: none; }
+  .result-table__head,
+  .result-table__row { grid-template-columns: 1fr auto; gap: var(--spacing-xs); }
+  .result-table__row { padding: 14px 4px; }
+  .trp-row__judge { justify-content: flex-start; }
+
+  /* 정답·선택 테이블 */
+  .result-table--answer .result-table__row {
+    grid-template-columns: 1fr;
+    grid-template-rows: auto auto auto;
+    align-items: start;
+    gap: 6px;
+    padding: 14px 4px;
+  }
+  .result-table--answer .trp-row__judge   { grid-row: 1; justify-content: flex-start; }
+  .result-table--answer .trp-row__problem { grid-row: 2; }
+  .result-table--answer .trp-row__answers { grid-row: 3; }
+  /* !important 필요 — TrainingResultPopup.tsx가 Badge에 minWidth={80}을 인라인으로
+     전달하므로(코드 확인됨) 모바일에서 자연 폭으로 되돌리려면 특이도로는 부족. */
+  .trp-row__judge .badge {
+    min-width: unset !important;
+  }
+  .result-table--answer .trp-row__judge .badge {
+    padding: 0 12px;
+    height: 26px;
+  }
+}

package/dist/packages/core/src/components/Popup/TrainingResultPopup.d.ts

@@ -0,0 +1,14 @@
+import "./TrainingResultPopup.css";
+interface TrainingResultPopupProps {
+    score?: number | null;
+    contextsLength?: number | null;
+    results?: unknown[];
+    subtitle?: string;
+    onReplay?: () => void;
+    onClose?: () => void;
+    /** true면 portal 없이 부모 컨테이너 안에 제자리 렌더 (목업/데모용) */
+    inline?: boolean;
+}
+/** @public */
+export default function TrainingResultPopup(props: TrainingResultPopupProps): import("react").JSX.Element;
+export {};

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

@@ -0,0 +1,104 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo } from "react";
+import { useTranslation } from 'react-i18next';
+import Button from '../Button';
+import Badge from '../Badge';
+import Popup from './Popup';
+import "./TrainingResultPopup.css";
+function pickFirstString(...vals) {
+    for (const v of vals) {
+        if (typeof v === 'string') {
+            const t = v.trim();
+            if (t.length)
+                return t;
+        }
+        else if (typeof v === 'number' || typeof v === 'boolean') {
+            return String(v);
+        }
+        else if (Array.isArray(v) && v.length) {
+            return v.join(', ');
+        }
+        else if (v && typeof v === 'object') {
+            const vr = v;
+            const cands = [vr.text, vr.label, vr.value];
+            for (const c of cands) {
+                if (typeof c === 'string' && c.trim().length)
+                    return c.trim();
+                if (typeof c === 'number' || typeof c === 'boolean')
+                    return String(c);
+            }
+        }
+    }
+    return null;
+}
+function resolveProblem(it) {
+    return pickFirstString(it?.question, it?.q, it?.sentence, it?.text, it?.prompt, it?.wording);
+}
+function resolveDecision(it) {
+    if (!it)
+        return undefined;
+    if (typeof it.decision === 'boolean')
+        return it.decision;
+    if (typeof it.correct === 'boolean')
+        return it.correct;
+    if (typeof it.heard === 'boolean')
+        return it.heard;
+    if (typeof it.judgement === 'boolean')
+        return it.judgement;
+    const v = pickFirstString(it?.status, it?.result, it?.judge, it?.note);
+    if (v) {
+        const lv = v.toLowerCase();
+        if (['ok', 'true', '맞음', '정답'].some(x => lv.includes(x)))
+            return true;
+        if (['ng', 'false', '틀림', '오답'].some(x => lv.includes(x)))
+            return false;
+    }
+    return undefined;
+}
+/** @public */
+export default function TrainingResultPopup(props) {
+    const { score, contextsLength, results = [], subtitle, onReplay, onClose, inline = false } = props || {};
+    const { t } = useTranslation();
+    // 축하 컨페티는 정답률 50% 초과일 때만 — 낮은 점수(≤50%)에 축하가 나가지 않게 한다(언어치료 맥락).
+    useEffect(() => {
+        const total = contextsLength ?? 0;
+        if (score != null && total > 0 && score / total > 0.5) {
+            window.dispatchEvent(new CustomEvent('party:trigger', { detail: { count: 140, strength: 1.6, duration: 2200 } }));
+        }
+    }, [score, contextsLength]);
+    const getJudge = useCallback((it) => {
+        const decision = resolveDecision(it);
+        const wording = pickFirstString(it?.wording, it?.label);
+        if (decision === true)
+            return { variant: 'main', label: wording ?? t('training.result.heardWell', '잘 들었어요') };
+        if (decision === false)
+            return { variant: 'danger', label: wording ?? t('training.result.notHeard', '못 들었어요') };
+        return { variant: 'disabled', label: wording ?? t('training.result.notJudged', '미판정') };
+    }, [t]);
+    const total = contextsLength ?? 0;
+    const correct = score ?? 0;
+    const list = useMemo(() => Array.isArray(results) ? results : [], [results]);
+    const rows = useMemo(() => list.map((it) => {
+        const itr = it ?? {};
+        const problem = resolveProblem(itr) || '(내용없음)';
+        const { variant, label } = getJudge(itr);
+        const corrects = Array.isArray(itr.corrects) ? itr.corrects : [];
+        const answer = corrects.length ? corrects.join(', ') : (itr.answer != null && itr.answer !== '' ? String(itr.answer) : null);
+        const selectedText = typeof itr.selectedText === 'string' ? itr.selectedText : null;
+        const isCorrect = resolveDecision(itr) === true;
+        return { problem, variant, label, answer, selectedText, isCorrect };
+    }), [list, getJudge]);
+    const hasAnswerCols = useMemo(() => rows.some(r => r.answer !== null || r.selectedText !== null), [rows]);
+    // 스크롤은 Popup의 .popup-content 하나만 담당한다 — 예전엔 결과 카드가 자체 스크롤
+    // 래퍼(.trp-result__scroll)를 하나 더 두어 이중 스크롤이 됐고, 안쪽이 overscroll:contain으로
+    // 휠을 삼키면서 "커서가 바깥 스크롤바 위에 있을 때만 스크롤되는" 문제가 있었다.
+    // 하단 버튼은 Popup의 footer 슬롯으로 넘겨 스크롤과 무관하게 고정된다.
+    return (_jsx(Popup, { onClose: onClose, inline: inline, 
+        /* 이 팝업은 Popup 의 title 슬롯을 안 쓰고 본문 안에 제 제목(h1)을 그린다 —
+           그래서 다이얼로그 자체에 접근명이 없었다(운영 경고 9건, 08-17 ~ 08-30,
+           /today · /training · /my-word-training · /my-homework). 화면에 보이는 그
+           제목을 그대로 접근명으로 쓴다. 새 문구를 만들면 눈으로 보는 이름과 읽어
+           주는 이름이 갈라진다. */
+        ariaLabel: t('training.result.title', '훈련을 모두 마쳤습니다.'), className: "popup--training-result", footerClassName: "trp-result__foot", footer: ({ animateThen, closeWithAnimation }) => (_jsxs("div", { className: "trp-actions", children: [_jsx(Button, { size: 56, type: "bar", label: t('training.result.replay', '다시하기'), onClick: () => animateThen(onReplay) }), _jsx(Button, { size: 56, type: "bar", label: t('training.result.done', '완료'), variant: "main", onClick: closeWithAnimation })] })), 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('training.result.colProblem', '문제') }), 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)))] }) }))] })) }));
+}