@ihabdevteam/core 0.8.0

package/dist/packages/core/src/components/Training/TrainingStepBullet.css

@@ -0,0 +1,148 @@
+.ts-bullet {
+  --dot-size: 28px;
+  --dot-gap: 10px;
+  width: var(--dot-size);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  align-self: stretch;
+  position: relative;
+}
+
+.bullet__dot {
+  width: var(--dot-size);
+  height: var(--dot-size);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 2px solid rgba(43,138,125,0.12);
+  z-index: 2;
+}
+
+.bullet__icon {
+  width: 20px;
+  height: 20px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-darkGray);
+  position: relative;
+  z-index: 1;
+}
+
+.bullet__icon-img {
+  width: 100%;
+  height: 100%;
+  display: block;
+  object-fit: contain;
+}
+
+.bullet__icon-mask {
+  width: 100%;
+  height: 100%;
+  background-color: currentColor;
+  -webkit-mask-image: var(--icon-url);
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-position: center;
+  -webkit-mask-size: contain;
+  mask-image: var(--icon-url);
+  mask-repeat: no-repeat;
+  mask-position: center;
+  mask-size: contain;
+}
+
+.bullet__icon-svg svg {
+  width: 100%;
+  height: 100%;
+  fill: currentColor;
+}
+
+.ts-bullet__line {
+  position: absolute;
+  top: calc(calc(var(--dot-size) ) + var(--dot-gap));
+  bottom: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 2px;
+  background: var(--color-whiteLine);
+  border-radius: var(--radius-xs);
+  z-index: 1;
+}
+
+
+/* color rules per state */
+
+
+.ts-bullet--done .bullet__icon {
+  color: transparent;
+}
+.ts-bullet--active .bullet__icon {
+  color: #ffffff;
+}
+.ts-bullet--disabled .bullet__icon{
+  color: transparent;
+}
+
+
+.ts-bullet--done .bullet__dot {
+  border: 2px solid var(--color-main);
+}
+.ts-bullet--active .bullet__dot {
+  background-color: var(--color-main);
+  position: relative;
+}
+.ts-bullet--active .bullet__dot::before,
+.ts-bullet--active .bullet__dot::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  background: var(--color-main);
+  opacity: 0.5;
+  animation: bullet-ripple 3s cubic-bezier(.2,.6,.2,1) infinite;
+  pointer-events: none;
+}
+.ts-bullet--active .bullet__dot::after {
+  opacity: 0.3;
+  animation-delay: 1.5s;
+}
+@keyframes bullet-ripple {
+  0%   { transform: scale(1);   opacity: 0.5; }
+  100% { transform: scale(2.2); opacity: 0; }
+}
+.ts-bullet--disabled .bullet__dot {
+  border: 2px solid var(--color-whiteLine);
+}
+
+
+.ts-bullet--done .bullet__line {
+  background-color: var(--color-main);
+}
+.ts-bullet--active .bullet__line {
+  background-color: var(--color-whiteLine);
+}
+.ts-bullet--disabled .bullet__line{
+  background-color: var(--color-whiteLine);
+}
+
+/* Hide connector line for the last step container */
+.training-step.training-step--last .ts-bullet__line,
+.training-step--last .ts-bullet__line {
+  display: none;
+}
+
+/* tablet */
+@media (max-width: 1024px) {
+  .ts-bullet {
+  --dot-size: 26px;
+  }
+}
+
+/* mobile */
+@media (max-width: 768px) {
+  .ts-bullet {
+  --dot-size: 24px
+}
+}

package/dist/packages/core/src/components/Training/TrainingStepBullet.d.ts

@@ -0,0 +1,6 @@
+import "./TrainingStep.css";
+import "./TrainingStepBullet.css";
+/** @public */
+export default function TrainingStepBullet({ state }: {
+    state?: string | undefined;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,11 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation } from 'react-i18next';
+import Icon from '../Icon';
+import "./TrainingStep.css";
+import "./TrainingStepBullet.css";
+/** @public */
+export default function TrainingStepBullet({ state = "disabled" }) {
+    const { t } = useTranslation();
+    return (_jsxs("div", { className: `ts-bullet ts-bullet--${state}`, "aria-hidden": true, children: [_jsx("div", { className: "bullet__dot", children: _jsx(Icon, { icon: 'chevron-right', label: t('training.next', '다음'), className: "bullet__icon", imgClassName: "bullet__icon-img", maskClassName: "bullet__icon-mask", svgClassName: "bullet__icon-svg", wrapperStyle: {}, size: 20 }) }), _jsx("div", { className: "ts-bullet__line" })] }));
+}

package/dist/packages/core/src/components/Training/TrainingStepCard.d.ts

@@ -0,0 +1,36 @@
+import './TrainingStep.css';
+import './TrainingStepCard.css';
+/** @public */
+export type TrainingCardItem = {
+    id?: string;
+    word?: string;
+    title?: string;
+    image?: string;
+    audio?: string | string[] | {
+        src?: string;
+    };
+    pronunciation?: string;
+    [k: string]: unknown;
+};
+/** @public */
+export type TrainingStepCardProps = {
+    index?: number;
+    stepIndex?: number;
+    isLast?: boolean;
+    title?: string;
+    onDone?: (payload?: unknown) => void;
+    onChange?: (payload?: unknown) => void;
+    context?: TrainingCardItem[] | {
+        items?: TrainingCardItem[];
+    };
+    /** 카드를 클릭해서 선택할 수 있는 모드. 선택 시 onDone/onChange 호출. */
+    selectable?: boolean;
+    /** 카드의 단어 텍스트(라벨)를 숨깁니다. */
+    hideLabel?: boolean;
+    /** 소리 듣기 버튼을 숨깁니다. */
+    hideAudio?: boolean;
+    /** 최대 표시 카드 수 (기본값 3). */
+    maxCards?: number;
+};
+/** @public */
+export default function TrainingStepCard({ index, stepIndex, isLast, title, onDone, onChange, context, selectable, hideLabel, hideAudio, maxCards }: TrainingStepCardProps): import("react").JSX.Element;

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

@@ -0,0 +1,110 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import TrainingStep from './TrainingStep';
+import TrainingWordCard from './TrainingWordCard';
+import './TrainingStep.css';
+import './TrainingStepCard.css';
+// 카드 하나의 재생이 끝나거나 오류가 나지 않고 멈춰버리는 경우(네트워크 등)에도
+// '모두 듣기' 순차 재생 전체가 멈추지 않도록 카드당 최대 대기 시간을 둔다.
+const PLAY_ALL_CARD_TIMEOUT_MS = 8000;
+function withTimeout(promise, ms) {
+    return new Promise((resolve) => {
+        let settled = false;
+        const finish = () => { if (!settled) {
+            settled = true;
+            resolve();
+        } };
+        promise.then(finish, finish);
+        setTimeout(finish, ms);
+    });
+}
+/** @public */
+export default function TrainingStepCard({ index, stepIndex, isLast = false, title, onDone, onChange, context = [], selectable = false, hideLabel = false, hideAudio = false, maxCards }) {
+    const { t } = useTranslation();
+    const resolvedTitle = title ?? t('training.cardInstructions', '낱말 카드를 보고 소리를 듣고 확인하세요.');
+    const items = useMemo(() => Array.isArray(context) ? context : (context && context.items) || [], [context]);
+    const _maxCards = maxCards ?? 3;
+    const shown = (items || []).slice(0, _maxCards);
+    if (!import.meta.env?.PROD && (items || []).length > _maxCards) {
+        console.warn(`TrainingStepCard: ${items.length} items passed but only ${_maxCards} shown`);
+    }
+    const idx = typeof index === 'number' ? index : -1;
+    const currentState = (typeof stepIndex !== 'number') ? 'disabled' : (idx < stepIndex ? 'done' : idx === stepIndex ? 'active' : 'disabled');
+    const [selectedIndex, setSelectedIndex] = useState(null);
+    // ── 모두 듣기 — 카드별 소리 듣기 버튼을 순서대로 재생 ──
+    const cardRefs = useRef([]);
+    const [playingAll, setPlayingAll] = useState(false);
+    // 페이지 전환 시 (items 변경) 이전 선택 상태 및 카드 ref 초기화
+    const itemsKey = useMemo(() => items.map((it) => it?.id ?? it?.word ?? '').join('|'), [items]);
+    /* eslint-disable react-hooks/set-state-in-effect */
+    useEffect(() => {
+        setSelectedIndex(null);
+        cardRefs.current = [];
+    }, [itemsKey]);
+    /* eslint-enable react-hooks/set-state-in-effect */
+    const handlePlayDone = useCallback((item, i) => {
+        // selectable 모드에서는 오디오 재생이 step을 advance하지 않음
+        if (selectable)
+            return;
+        const payload = { item, index: i, __ts: Date.now() };
+        try {
+            if (typeof onChange === 'function')
+                onChange(payload);
+        }
+        catch (e) { }
+        if (currentState === 'active' && typeof onDone === 'function') {
+            try {
+                onDone(payload);
+            }
+            catch (e) { }
+        }
+    }, [selectable, onChange, currentState, onDone]);
+    const handlePlayAll = useCallback(async () => {
+        if (playingAll || currentState === 'disabled')
+            return;
+        setPlayingAll(true);
+        try {
+            for (const cardRef of cardRefs.current) {
+                if (!cardRef)
+                    continue;
+                await withTimeout(cardRef.play(), PLAY_ALL_CARD_TIMEOUT_MS);
+            }
+        }
+        finally {
+            setPlayingAll(false);
+        }
+    }, [playingAll, currentState]);
+    const handleSelect = useCallback((item, i) => {
+        /* 끝낸 단계(done)에서는 고를 수 없다 — 단추는 `!== 'disabled'` 로 열려 있었는데
+           기록은 `=== 'active'` 일 때만 나가서, **화면 선택은 바뀌는데 점수는 그대로**였다.
+           되돌아본 사람이 옮겨 놓은 선택을 보며 옛 점수를 읽게 된다. 같은 자리를
+           TrainingStepCardOrder 는 이미 이렇게 막고 있다(그 꼴을 맞춘다). */
+        if (currentState !== 'active')
+            return;
+        setSelectedIndex(i);
+        const payload = {
+            selectedValue: item.word || item.title || '',
+            selectedIndex: i,
+            item,
+            __ts: Date.now(),
+        };
+        try {
+            if (typeof onChange === 'function')
+                onChange(payload);
+        }
+        catch (e) { }
+        if (currentState === 'active' && typeof onDone === 'function') {
+            try {
+                onDone(payload);
+            }
+            catch (e) { }
+        }
+    }, [onChange, currentState, onDone]);
+    return (_jsx(TrainingStep, { index: index, stepIndex: stepIndex, isLast: isLast, title: resolvedTitle, onDone: onDone, titleProps: {
+            usePlayAllBtn: !hideAudio && shown.length > 0,
+            onPlayAll: handlePlayAll,
+            playAllActive: playingAll,
+        }, children: _jsx("div", { className: "training-step__cards", children: shown.length === 0 ? (_jsx("div", { className: "training-step__empty", children: t('training.noCards', '카드가 없습니다.') })) : (shown.map((it, i) => (_jsx(TrainingWordCard, { ref: (el) => { cardRefs.current[i] = el; }, item: it, disabled: currentState === 'disabled', onPlayDone: () => handlePlayDone(it, i), selectable: selectable, selected: selectable && selectedIndex === i, onSelect: selectable ? () => handleSelect(it, i) : undefined, flipDelay: i * 120, hideLabel: hideLabel, hideAudio: hideAudio }, (it && it.id) || i)))) }) }));
+}

package/dist/packages/core/src/components/Training/TrainingStepCardOrder.d.ts

@@ -0,0 +1,15 @@
+import './TrainingStep.css';
+import './TrainingStepCard.css';
+/** @public */
+export interface TrainingStepCardOrderProps {
+    index?: number;
+    stepIndex?: number;
+    isLast?: boolean;
+    title?: string;
+    /** 카드에 표시할 단어 목록 (섞인 순서) */
+    choices?: string[];
+    onDone?: (payload?: unknown) => void;
+    onChange?: (payload?: unknown) => void;
+}
+/** @public */
+export default function TrainingStepCardOrder({ index, stepIndex, isLast, title, choices, onDone, onChange, }: TrainingStepCardOrderProps): import("react").JSX.Element;

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

@@ -0,0 +1,58 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useMemo, useState, useEffect } from 'react';
+import TrainingStep from './TrainingStep';
+import TrainingWordCard from './TrainingWordCard';
+import './TrainingStep.css';
+import './TrainingStepCard.css';
+/** @public */
+export default function TrainingStepCardOrder({ index, stepIndex, isLast = false, title = '들은 순서대로 카드를 선택하세요.', choices = [], onDone, onChange, }) {
+    const idx = typeof index === 'number' ? index : -1;
+    const currentState = typeof stepIndex !== 'number'
+        ? 'disabled'
+        : idx < stepIndex
+            ? 'done'
+            : idx === stepIndex
+                ? 'active'
+                : 'disabled';
+    // selectedOrder[i] = 선택 순서 (1-based), null = 미선택
+    const [selectedOrder, setSelectedOrder] = useState(() => choices.map(() => null));
+    // choices 변경 시 초기화 (choicesKey로 내용까지 비교 — 개수만이 아닌 실제 단어 변경도 감지)
+    const choicesKey = choices.join('|');
+    /* eslint-disable react-hooks/set-state-in-effect */
+    useEffect(() => {
+        setSelectedOrder(choicesKey ? choicesKey.split('|').map(() => null) : []);
+    }, [choicesKey]);
+    /* eslint-enable react-hooks/set-state-in-effect */
+    const nextRank = useMemo(() => selectedOrder.filter(v => v !== null).length + 1, [selectedOrder]);
+    const handleSelect = useCallback((i) => {
+        if (currentState !== 'active')
+            return;
+        setSelectedOrder(prev => {
+            const arr = [...prev];
+            if (arr[i] !== null) {
+                // 이미 선택된 카드 → 해당 순서 이후 선택 모두 해제
+                const rank = arr[i];
+                return arr.map(v => (v !== null && v >= rank ? null : v));
+            }
+            // 미선택 카드 → 다음 순서 부여
+            arr[i] = nextRank;
+            const payload = { selectedOrder: arr, words: choices, __ts: Date.now() };
+            try {
+                if (typeof onChange === 'function')
+                    onChange(payload);
+            }
+            catch { }
+            // 모두 선택됐으면 완료
+            if (arr.every(v => v !== null)) {
+                try {
+                    if (typeof onDone === 'function')
+                        onDone(payload);
+                }
+                catch { }
+            }
+            return arr;
+        });
+    }, [currentState, nextRank, onChange, onDone, choices]);
+    return (_jsx(TrainingStep, { index: index, stepIndex: stepIndex, isLast: isLast, title: title, onDone: onDone, children: _jsx("div", { className: "training-step__cards", children: choices.map((word, i) => (_jsx(TrainingWordCard, { item: { word }, disabled: currentState === 'disabled', selectable: true, selected: selectedOrder[i] !== null, orderRank: selectedOrder[i], onSelect: () => handleSelect(i), flipDelay: i * 120, hideLabel: false, hideAudio: true }, `${word}-${i}`))) }) }));
+}

package/dist/packages/core/src/components/Training/TrainingStepComponents.d.ts

@@ -0,0 +1,35 @@
+import type { ReactNode } from 'react';
+/**
+ * Compound Page Component that groups steps for multi-page training
+ */
+/** @public */
+export type PageProps = {
+    children?: ReactNode;
+    [k: string]: unknown;
+};
+/** @public */
+export declare function Page(_props: PageProps): null;
+export declare namespace Page {
+    var __isTrainingPage: boolean;
+}
+/**
+ * Compound Step Components that work within TrainingPagePopup context
+ */
+/** @public */
+export type StepWrapperProps = {
+    _stepIndex?: number;
+    _totalSteps?: number;
+    [k: string]: unknown;
+};
+/** @public */
+export declare function ListenStep({ _stepIndex, _totalSteps, ...rest }: StepWrapperProps): import("react").JSX.Element;
+/** @public */
+export declare function ConfirmStep({ _stepIndex, _totalSteps, ...rest }: StepWrapperProps): import("react").JSX.Element;
+/** @public */
+export declare function ConfirmWithTextStep({ _stepIndex, _totalSteps, ...rest }: StepWrapperProps): import("react").JSX.Element;
+/** @public */
+export declare function OrderListStep({ _stepIndex, _totalSteps, ...rest }: StepWrapperProps): import("react").JSX.Element;
+/** @public */
+export declare function CardStep({ _stepIndex, _totalSteps, ...rest }: StepWrapperProps): import("react").JSX.Element;
+/** @public */
+export declare function CardOrderStep({ _stepIndex, _totalSteps, ...rest }: StepWrapperProps): import("react").JSX.Element;

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

@@ -0,0 +1,60 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useTrainingPagePopupContext } from './TrainingPagePopupContext';
+import TrainingStepListen from './TrainingStepListen';
+import TrainingStepConfirm from './TrainingStepConfirm';
+import TrainingStepConfirmWithText from './TrainingStepConfirmWithText';
+import TrainingStepOrderList from './TrainingStepOrderList';
+import TrainingStepCard from './TrainingStepCard';
+import TrainingStepCardOrder from './TrainingStepCardOrder';
+/** @public */
+export function Page(_props) {
+    return null;
+}
+Page.__isTrainingPage = true;
+function useStepContext(stepIndex, totalSteps) {
+    const ctx = useTrainingPagePopupContext();
+    return {
+        ctx,
+        index: stepIndex,
+        stepIndex: ctx.currentStepIndex,
+        isLast: typeof stepIndex === 'number' && typeof totalSteps === 'number'
+            ? stepIndex === totalSteps - 1
+            : false,
+        // 답안은 항상 이 스텝 자신의 index로 귀속시킨다 — 완료('done')된 이전 스텝도 버튼이
+        // 활성이라 재선택이 가능한데, index를 안 넘기면 전역 currentStepIndex(진행 중인 스텝)로
+        // 폴백돼 이전 스텝의 재선택이 현재 스텝 답안을 덮어쓴다.
+        onDone: (payload) => ctx.handleStepDone(payload, stepIndex),
+        onChange: (payload) => ctx.handleStepChange(payload, stepIndex),
+    };
+}
+/** @public */
+export function ListenStep({ _stepIndex, _totalSteps, ...rest }) {
+    const { index, stepIndex, isLast, onDone } = useStepContext(_stepIndex, _totalSteps);
+    return (_jsx(TrainingStepListen, { ...rest, index: index, stepIndex: stepIndex, isLast: isLast, onDone: onDone }));
+}
+/** @public */
+export function ConfirmStep({ _stepIndex, _totalSteps, ...rest }) {
+    const { index, stepIndex, isLast, onDone, onChange } = useStepContext(_stepIndex, _totalSteps);
+    return (_jsx(TrainingStepConfirm, { ...rest, index: index, stepIndex: stepIndex, isLast: isLast, onDone: onDone, onChange: onChange }));
+}
+/** @public */
+export function ConfirmWithTextStep({ _stepIndex, _totalSteps, ...rest }) {
+    const { index, stepIndex, isLast, onDone, onChange } = useStepContext(_stepIndex, _totalSteps);
+    return (_jsx(TrainingStepConfirmWithText, { ...rest, index: index, stepIndex: stepIndex, isLast: isLast, onDone: onDone, onChange: onChange }));
+}
+/** @public */
+export function OrderListStep({ _stepIndex, _totalSteps, ...rest }) {
+    // 자기 index 귀속은 이제 useStepContext의 onDone/onChange 공통 동작이다.
+    const { index, stepIndex, isLast, onDone, onChange } = useStepContext(_stepIndex, _totalSteps);
+    return (_jsx(TrainingStepOrderList, { ...rest, index: index, stepIndex: stepIndex, isLast: isLast, onDone: onDone, onChange: onChange }));
+}
+/** @public */
+export function CardStep({ _stepIndex, _totalSteps, ...rest }) {
+    const { index, stepIndex, isLast, onDone, onChange } = useStepContext(_stepIndex, _totalSteps);
+    return (_jsx(TrainingStepCard, { ...rest, index: index, stepIndex: stepIndex, isLast: isLast, onDone: onDone, onChange: onChange }));
+}
+/** @public */
+export function CardOrderStep({ _stepIndex, _totalSteps, ...rest }) {
+    const { index, stepIndex, isLast, onDone, onChange } = useStepContext(_stepIndex, _totalSteps);
+    return (_jsx(TrainingStepCardOrder, { ...rest, index: index, stepIndex: stepIndex, isLast: isLast, onDone: onDone, onChange: onChange }));
+}

package/dist/packages/core/src/components/Training/TrainingStepConfirm.d.ts

@@ -0,0 +1,24 @@
+import "./TrainingStep.css";
+import type { TrainingPayload } from '../../types/training';
+/** @public */
+export type TrainingStepConfirmProps = {
+    index?: number;
+    stepIndex?: number;
+    isLast?: boolean;
+    title?: string;
+    useTitleFaded?: boolean;
+    onDone?: (payload?: TrainingPayload) => void;
+    onChange?: (payload?: TrainingPayload) => void;
+    answer?: unknown;
+    wrongAnswers?: unknown[];
+    choices?: unknown[];
+    multiSelect?: boolean;
+    correctCount?: number;
+    useDisabledCovered?: boolean;
+    /** 선택지 라벨 → 아이콘 이름 매핑 — "X 달라요 / O 같아요"처럼 아이콘을 함께 표시할 때 사용 */
+    choiceIcons?: Record<string, string>;
+    /** 선택지 순서 섞기 여부. 기본 true — X/O처럼 위치가 고정돼야 하는 이지선다는 false */
+    shuffleChoices?: boolean;
+};
+/** @public */
+export default function TrainingStepConfirm({ index, stepIndex, isLast, title, useTitleFaded, onDone, onChange, answer, wrongAnswers, choices: propChoices, multiSelect, correctCount, useDisabledCovered, choiceIcons, shuffleChoices }: TrainingStepConfirmProps): import("react").JSX.Element;

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

@@ -0,0 +1,117 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useTranslation } from 'react-i18next';
+import Button from '../Button';
+import "./TrainingStep.css";
+import TrainingStep from "./TrainingStep";
+import { shuffle as shuffleArray } from '../../utils/array';
+/** @public */
+export default function TrainingStepConfirm({ index, stepIndex, isLast = false, title, useTitleFaded, onDone, onChange, answer, wrongAnswers, choices: propChoices, multiSelect = false, correctCount = 0, useDisabledCovered = false, choiceIcons, shuffleChoices = true }) {
+    const { t } = useTranslation();
+    const resolvedTitle = title ?? t('training.selectConfirm', '문제를 보고 해당하는 내용을 선택하세요.');
+    const idx = typeof index === 'number' ? index : -1;
+    const currentState = (typeof stepIndex !== 'number') ? 'disabled' : (idx < stepIndex ? 'done' : idx === stepIndex ? 'active' : 'disabled');
+    const baseChoices = Array.isArray(propChoices) && propChoices.length
+        ? propChoices
+        : (typeof answer !== 'undefined' ? [answer].concat(Array.isArray(wrongAnswers) ? wrongAnswers : []) : undefined);
+    const wrongAnswersKey = wrongAnswers ? wrongAnswers.join('||') : '';
+    const propChoicesKey = propChoices ? propChoices.join('||') : '';
+    const [choices, setChoices] = useState(() => (Array.isArray(baseChoices) ? (shuffleChoices ? shuffleArray(baseChoices) : baseChoices.slice()) : undefined));
+    /* eslint-disable react-hooks/set-state-in-effect */
+    useEffect(() => {
+        if (Array.isArray(baseChoices) && baseChoices.length)
+            setChoices(shuffleChoices ? shuffleArray(baseChoices) : baseChoices.slice());
+        else
+            setChoices(undefined);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [answer, wrongAnswersKey, propChoicesKey, shuffleChoices]);
+    /* eslint-enable react-hooks/set-state-in-effect */
+    const [selectedAnswer, setSelectedAnswer] = useState(null);
+    const [selectedSet, setSelectedSet] = useState(() => new Set());
+    /* eslint-disable react-hooks/set-state-in-effect */
+    useEffect(() => {
+        setSelectedAnswer(null);
+        setSelectedSet(new Set());
+    }, [propChoicesKey]);
+    /* eslint-enable react-hooks/set-state-in-effect */
+    // 페이지 전환 감지: stepIndex가 이 step의 index 이상이었다가 다시 미만으로 돌아오면
+    // (다음 페이지가 시작되어 stepIndex가 리셋된 경우) 선택 상태도 초기화한다.
+    const prevStepIndexRef = useRef(undefined);
+    useEffect(() => {
+        const prev = prevStepIndexRef.current;
+        if (typeof prev === 'number' && typeof stepIndex === 'number' && typeof index === 'number'
+            && prev >= index && stepIndex < index) {
+            setSelectedAnswer(null);
+            setSelectedSet(new Set());
+        }
+        prevStepIndexRef.current = stepIndex;
+    }, [stepIndex, index]);
+    const handleSelect = useCallback((i) => {
+        /* 끝낸 단계(done)에서는 고를 수 없다 — 단추는 `!== 'disabled'` 로 열려 있었는데
+           기록(onDone)은 `=== 'active'` 일 때만 나가서, **화면 선택은 바뀌는데 점수는
+           그대로**였다. 되돌아본 사람이 옮겨 놓은 선택을 보며 옛 점수를 읽게 된다.
+           같은 자리를 TrainingStepCardOrder 는 이미 이렇게 막고 있다(그 꼴을 맞춘다). */
+        if (currentState !== 'active')
+            return;
+        const valRaw = choices?.[i];
+        if (valRaw == null)
+            return;
+        const val = valRaw;
+        /* 여기 오면 늘 active 다 — canNotify 는 아래 흐름을 그대로 두기 위해 남긴다. */
+        const canNotify = currentState === 'active' || currentState === 'done';
+        if (multiSelect) {
+            setSelectedSet((prev) => {
+                const next = new Set(prev);
+                const wasSelected = next.has(val);
+                if (wasSelected)
+                    next.delete(val);
+                else
+                    next.add(val);
+                if (typeof onChange === 'function') {
+                    onChange({ selectedValues: [...next], __ts: Date.now() });
+                }
+                if (canNotify) {
+                    // correctCount가 지정된 문제는 그 개수를 다 채워야 제출된다 — 지정 안 됐을 때만
+                    // (예: 정답이 정해지지 않은 단일 선택형) 아무거나 하나 고르면 바로 제출한다.
+                    // 이전엔 "|| !wasSelected"로 묶여 있어 correctCount 지정 여부와 무관하게
+                    // 추가 선택마다 항상 true가 되어, 목표 개수를 채우기 전에도 매번 제출됐다.
+                    const hasCorrectCount = typeof correctCount === 'number' && correctCount > 0;
+                    const shouldSubmitNow = hasCorrectCount ? next.size >= correctCount : !wasSelected;
+                    if (shouldSubmitNow && typeof onDone === 'function') {
+                        if (currentState === 'active') {
+                            onDone({ selectedValues: [...next], __ts: Date.now() });
+                        }
+                    }
+                }
+                return next;
+            });
+        }
+        else {
+            setSelectedAnswer(val);
+            if (typeof onChange === 'function') {
+                onChange({ selectedIndex: i, selectedValue: val, __ts: Date.now() });
+            }
+            if (canNotify && typeof onDone === 'function') {
+                if (currentState === 'active') {
+                    onDone({ selectedIndex: i, selectedValue: val, __ts: Date.now() });
+                }
+            }
+        }
+    }, [choices, currentState, multiSelect, onChange, onDone, correctCount]);
+    useEffect(() => {
+        if (!multiSelect || selectedSet.size === 0)
+            return;
+        if (typeof onChange === 'function') {
+            onChange({ selectedValues: [...selectedSet], __ts: Date.now() });
+        }
+        if (typeof correctCount === 'number' && correctCount > 0) {
+            if (selectedSet.size >= correctCount && currentState === 'active') {
+                if (typeof onDone === 'function')
+                    onDone({ selectedValues: [...selectedSet], __ts: Date.now() });
+            }
+        }
+    }, [selectedSet, multiSelect, onChange, correctCount, currentState, onDone]);
+    const btnsClassName = `training-step__buttons${Array.isArray(choices) && choices.length > 3 ? ' training-step__buttons--wrap-3' : ''}`;
+    return (_jsx(TrainingStep, { index: index, stepIndex: stepIndex, isLast: isLast, title: resolvedTitle, useTitleFaded: useTitleFaded, children: _jsx("div", { className: btnsClassName, children: Array.isArray(choices) && choices.length > 0 ? (choices.map((c, i) => (_jsx(Button, { size: 56, type: "bar", onClick: () => handleSelect(i), ariaLabel: String(c), label: c, useLabel: true, icon: choiceIcons ? choiceIcons[String(c)] : undefined, variant: 'default', disabled: currentState === 'disabled', selected: multiSelect ? selectedSet.has(c) : selectedAnswer === c, useDisabledCovered: useDisabledCovered, minWidth: 0 }, String(c))))) : null }) }));
+}

package/dist/packages/core/src/components/Training/TrainingStepConfirmWithText.d.ts

@@ -0,0 +1,16 @@
+import "./TrainingStep.css";
+import type { TrainingPayload } from '../../types/training';
+/** @public */
+export type TrainingStepConfirmWithTextProps = {
+    index?: number;
+    stepIndex?: number;
+    isLast?: boolean;
+    title?: string;
+    onDone?: (payload?: TrainingPayload) => void;
+    onChange?: (payload?: TrainingPayload) => void;
+    context?: unknown;
+    /** 데모/목업 전용: 선택된 답을 강제 표시(랜딩 폰 목업 등). true=잘 들렸어요, false=안 들렸어요 */
+    demoSelected?: number | boolean | null;
+};
+/** @public */
+export default function TrainingStepConfirmWithText({ index, stepIndex, isLast, title, onDone, onChange, context, demoSelected }: TrainingStepConfirmWithTextProps): import("react").JSX.Element;