@ihabdevteam/core 0.8.0

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

@@ -0,0 +1,445 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import Button from '../Button';
+import { shuffle, reorderArray } from '../../utils/array';
+import "./TrainingPagePopup.css";
+import "./TrainingStep.css";
+import TrainingStep from "./TrainingStep";
+import "./TrainingStepOrderList.css";
+/** @public */
+export default function TrainingStepOrderList({ index, stepIndex, isLast = false, title, onDone, onChange, context = [], }) {
+    const { t } = useTranslation();
+    const resolvedTitle = title ?? t('training.orderListDefault', '문장을 들은 순서대로 배치하세요.');
+    const toText = (v) => typeof v === "string"
+        ? v
+        : (v && (v.context || v.sentence || v.question || "")) || "";
+    const [items, setItems] = useState(Array.isArray(context) ? context : []);
+    const [shuffled, setShuffled] = useState(() => (items || []).map((v, i) => ({ id: i, text: toText(v) })));
+    const currentState = useMemo(() => {
+        if (typeof stepIndex !== "number")
+            return "disabled";
+        if (typeof index !== "number")
+            return "disabled";
+        if (index < stepIndex)
+            return "done";
+        if (index === stepIndex)
+            return "active";
+        return "disabled";
+    }, [stepIndex, index]);
+    // context 변경 시 items/shuffled를 다시 초기화하는 의도된 동기화다
+    /* eslint-disable react-hooks/set-state-in-effect */
+    useEffect(() => {
+        const it = Array.isArray(context) ? context : [];
+        setItems(it);
+        const makeInitial = (src) => {
+            const arr = (src || []).map((v, i) => ({ id: i, text: toText(v) }));
+            if (arr.length <= 1)
+                return arr;
+            const isSame = (a, b) => {
+                if (a.length !== b.length)
+                    return false;
+                for (let i = 0; i < a.length; i++)
+                    if (a[i].text !== b[i].text)
+                        return false;
+                return true;
+            };
+            // 원본과 순서가 같으면(정렬 문제라 의미 없음) 다를 때까지 최대 20회 재셔플.
+            let next = shuffle(arr);
+            let attempts = 0;
+            while (isSame(next, arr) && attempts < 20) {
+                next = shuffle(arr);
+                attempts += 1;
+            }
+            return next;
+        };
+        const initial = makeInitial(it);
+        setShuffled(initial);
+        try {
+            if (typeof onChange === "function") {
+                const sc = initial.filter((s, i) => s.text === toText(it[i])).length;
+                onChange({ shuffled: initial, score: sc, total: (it || []).length, initial: true, __ts: Date.now() });
+            }
+            if (typeof onDone === "function" && currentState === "active") {
+                const sc2 = initial.filter((s, i) => s.text === toText(it[i])).length;
+                onDone({ shuffled: initial, score: sc2, total: (it || []).length, initial: true, __ts: Date.now() });
+            }
+        }
+        catch (e) { }
+        // context가 바뀔 때만 재초기화(재셔플)해야 한다 — onChange/onDone/currentState를 deps에 넣으면
+        // 부모 리렌더나 단계 전환만으로도 매번 다시 섞이는 문제가 생긴다.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [context]);
+    /* eslint-enable react-hooks/set-state-in-effect */
+    /**
+     * 카드 한 칸 옮기기.
+     *
+     * **조작은 진행 중(active)일 때만 열려 있다.** 예전에는 끝낸 단계(done)에서도 단추와
+     * 끌어놓기가 살아 있었는데, 여기와 handleDrop 은 `currentState === 'active'` 일 때만
+     * onDone 을 부른다 — 그래서 화면 배치는 바뀌는데 **기록된 점수는 그대로**였다.
+     * 되돌아본 사람은 옮겨 놓은 배치를 보면서 옛 점수를 읽게 된다. 끝난 단계는 결과를
+     * 그대로 보여 주기만 한다.
+     */
+    const move = (idx, dir) => {
+        const arr = [...shuffled];
+        const i2 = idx + dir;
+        if (i2 < 0 || i2 >= arr.length)
+            return;
+        const tmp = arr[i2];
+        arr[i2] = arr[idx];
+        arr[idx] = tmp;
+        flipSetShuffled(arr);
+        try {
+            if (typeof onDone === "function" && currentState === "active") {
+                const sc2 = arr.filter((s, i) => s.text === toText(items[i])).length;
+                // move()는 onClick에서만 호출되며 렌더링 중에는 실행되지 않는다
+                // eslint-disable-next-line react-hooks/purity
+                onDone({ shuffled: arr, score: sc2, total: (items || []).length, __ts: Date.now() });
+            }
+        }
+        catch (e) { }
+    };
+    const [draggedIndex, setDraggedIndex] = useState(null);
+    const draggingObjRef = useRef(null);
+    // use EventListener for add/remove symmetry
+    const docDragOverHandlerRef = useRef(null);
+    const docMouseMoveHandlerRef = useRef(null);
+    const lastDragOverRef = useRef(null);
+    // ReturnType<typeof setTimeout> covers both browser number and NodeJS.Timeout
+    const dragLeaveTimeoutRef = useRef(null);
+    const lastPosRef = useRef({ x: 0, y: 0 });
+    const rafRef = useRef(null);
+    const dragOffsetRef = useRef({ dx: 0, dy: 0 });
+    const startRafLoop = () => {
+        if (rafRef.current !== null)
+            return;
+        const loop = () => {
+            rafRef.current = requestAnimationFrame(loop);
+            const p = lastPosRef.current;
+            const off = dragOffsetRef.current || { dx: 0, dy: 0 };
+            if (draggingObjRef.current) {
+                draggingObjRef.current.style.transform = `translate3d(${p.x - off.dx}px, ${p.y - off.dy}px, 0)`;
+            }
+        };
+        rafRef.current = requestAnimationFrame(loop);
+    };
+    const itemRefs = useRef(new Map());
+    const markerRefs = useRef(new Map());
+    const getRects = () => {
+        const map = new Map();
+        itemRefs.current.forEach((el, id) => {
+            if (el && el.getBoundingClientRect)
+                map.set(id, el.getBoundingClientRect());
+        });
+        return map;
+    };
+    const flipSetShuffled = (nextArr) => {
+        const prevRects = getRects();
+        setShuffled(nextArr);
+        try {
+            if (typeof onChange === "function") {
+                const sc = nextArr.filter((s, i) => s.text === toText(items[i])).length;
+                // flipSetShuffled()는 클릭/드래그 핸들러에서만 호출되며 렌더링 중에는 실행되지 않는다
+                // eslint-disable-next-line react-hooks/purity
+                onChange({ shuffled: nextArr, score: sc, total: (items || []).length, __ts: Date.now() });
+            }
+        }
+        catch (e) { }
+        requestAnimationFrame(() => {
+            const newRects = getRects();
+            nextArr.forEach((item) => {
+                const prev = prevRects.get(item.id);
+                const now = newRects.get(item.id);
+                const el = itemRefs.current.get(item.id);
+                if (!el || !prev || !now)
+                    return;
+                const dy = prev.top - now.top;
+                if (!dy)
+                    return;
+                el.style.transition = "none";
+                el.style.transform = `translateY(${dy}px)`;
+                requestAnimationFrame(() => {
+                    el.style.transition = "transform 420ms cubic-bezier(.22,.9,.39,1)";
+                    el.style.transform = "";
+                    const cleanup = () => {
+                        el.style.transition = "";
+                        el.removeEventListener("transitionend", cleanup);
+                    };
+                    el.addEventListener('transitionend', cleanup);
+                });
+            });
+        });
+    };
+    const handleDragStart = (i, e) => {
+        try {
+            try {
+                e.dataTransfer?.setData("text/plain", String(i));
+            }
+            catch { }
+            try {
+                if (e.dataTransfer)
+                    e.dataTransfer.effectAllowed = 'move';
+            }
+            catch (err) { }
+            try {
+                const ghostEl = document.createElement('div');
+                ghostEl.style.cssText = 'position:absolute;top:-9999px;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none;';
+                document.body.appendChild(ghostEl);
+                e.dataTransfer?.setDragImage(ghostEl, 0, 0);
+                requestAnimationFrame(() => { try {
+                    document.body.removeChild(ghostEl);
+                }
+                catch { } });
+            }
+            catch (err) { }
+        }
+        catch { }
+        setDraggedIndex(i);
+        try {
+            const it = shuffled[i];
+            const obj = document.createElement("div");
+            obj.className = "order-list__dragging-object order-list__dragging-object--visible";
+            obj.textContent = it && it.text ? it.text : "";
+            document.body.appendChild(obj);
+            draggingObjRef.current = obj;
+            const srcEl = itemRefs.current.get(it.id);
+            let startX = (e.clientX || 0);
+            let startY = (e.clientY || 0);
+            try {
+                if (srcEl && srcEl.getBoundingClientRect) {
+                    const srcRect = srcEl.getBoundingClientRect();
+                    startX = srcRect.left + srcRect.width / 2;
+                    startY = srcRect.top + srcRect.height / 2;
+                }
+            }
+            catch (err) { }
+            const rect = obj.getBoundingClientRect();
+            const dx = rect.width / 2;
+            const dy = rect.height / 2;
+            dragOffsetRef.current = { dx, dy };
+            obj.style.transition = "none";
+            lastPosRef.current = { x: startX, y: startY };
+            obj.style.transform = `translate3d(${startX - dx}px, ${startY - dy}px, 0)`;
+            requestAnimationFrame(() => {
+                try {
+                    obj.style.transition = "";
+                }
+                catch (e) { }
+                startRafLoop();
+            });
+            const mouseHandler = (ev) => {
+                const e = ev;
+                lastPosRef.current = { x: e.clientX, y: e.clientY };
+                startRafLoop();
+            };
+            docMouseMoveHandlerRef.current = mouseHandler;
+            document.addEventListener("mousemove", mouseHandler);
+            const handler = (ev) => {
+                const e = ev;
+                lastPosRef.current = { x: e.clientX, y: e.clientY };
+                startRafLoop();
+            };
+            docDragOverHandlerRef.current = handler;
+            document.addEventListener("dragover", handler);
+            try {
+                e.dataTransfer?.setData('text/plain', String(i));
+                try {
+                    e.dataTransfer?.setData('application/json', JSON.stringify({ idx: i }));
+                }
+                catch (err) { }
+            }
+            catch (err) { }
+        }
+        catch (err) { }
+    };
+    const handleDragOverWithClass = (_i, e) => {
+        e.preventDefault();
+        try {
+            if (e.dataTransfer)
+                e.dataTransfer.dropEffect = 'move';
+        }
+        catch (err) { }
+        try {
+            if (dragLeaveTimeoutRef.current !== null) {
+                clearTimeout(dragLeaveTimeoutRef.current);
+                dragLeaveTimeoutRef.current = null;
+            }
+            const targetItem = (e.currentTarget && e.currentTarget.closest)
+                ? e.currentTarget.closest('.order-list__item')
+                : null;
+            if (targetItem && lastDragOverRef.current !== targetItem) {
+                if (lastDragOverRef.current) {
+                    try {
+                        lastDragOverRef.current.classList.remove('drag-over');
+                    }
+                    catch (err) { }
+                }
+                try {
+                    targetItem.classList.add('drag-over');
+                }
+                catch (err) { }
+                lastDragOverRef.current = targetItem;
+            }
+        }
+        catch (err) { }
+    };
+    const handleDrop = (i, e) => {
+        e.preventDefault();
+        const fromStr = e.dataTransfer?.getData("text/plain") || "";
+        const from = fromStr ? parseInt(fromStr, 10) : draggedIndex;
+        const to = i;
+        if (typeof from !== "number" || isNaN(from) || from === to) {
+            setDraggedIndex(null);
+            clearDragOverClasses();
+            clearDragState();
+            return;
+        }
+        const arr = reorderArray(shuffled, from, to);
+        flipSetShuffled(arr);
+        setDraggedIndex(null);
+        clearDragState();
+        try {
+            if (typeof onDone === 'function' && currentState === 'active') {
+                const sc2 = arr.filter((s, i) => s.text === toText(items[i])).length;
+                // 드롭 핸들러에서만 호출되며 렌더링 중에는 실행되지 않는다
+                // eslint-disable-next-line react-hooks/purity
+                onDone({ shuffled: arr, score: sc2, total: (items || []).length, __ts: Date.now() });
+            }
+        }
+        catch (e) { }
+        try {
+            requestAnimationFrame(() => {
+                const list = document.querySelectorAll('.order-list .order-list__item');
+                const el = list[to];
+                if (!el)
+                    return;
+                const slotEl = el.querySelector('.order-list__slot') || el;
+                try {
+                    slotEl.classList.add('pulse');
+                    void slotEl.offsetHeight;
+                    slotEl.classList.add('to-dark');
+                    const cleanup = () => {
+                        slotEl.classList.remove('pulse', 'to-dark');
+                        slotEl.removeEventListener('transitionend', cleanup);
+                    };
+                    slotEl.addEventListener('transitionend', cleanup);
+                }
+                catch (e) { }
+            });
+        }
+        catch (err) { }
+        clearDragOverClasses();
+    };
+    const clearDragState = () => {
+        if (draggingObjRef.current) {
+            try {
+                document.body.removeChild(draggingObjRef.current);
+            }
+            catch { }
+            draggingObjRef.current = null;
+        }
+        if (docDragOverHandlerRef.current) {
+            document.removeEventListener("dragover", docDragOverHandlerRef.current);
+            docDragOverHandlerRef.current = null;
+        }
+        if (docMouseMoveHandlerRef.current) {
+            document.removeEventListener("mousemove", docMouseMoveHandlerRef.current);
+            docMouseMoveHandlerRef.current = null;
+        }
+        if (rafRef.current !== null) {
+            cancelAnimationFrame(rafRef.current);
+            rafRef.current = null;
+        }
+    };
+    const handleDragEnd = () => {
+        setDraggedIndex(null);
+        clearDragOverClasses();
+        clearDragState();
+    };
+    // 드래그 도중(dragend/drop 발생 전) 컴포넌트가 언마운트되면(예: 훈련 스텝 자동 전환)
+    // document에 등록한 mousemove/dragover 리스너와 rAF 루프가 정리되지 않고 남아
+    // 언마운트된 클로저를 계속 참조하며 실행된다 — 언마운트 시 명시적으로 정리한다.
+    useEffect(() => {
+        return () => clearDragState();
+    }, []);
+    const clearDragOverClasses = () => {
+        try {
+            if (dragLeaveTimeoutRef.current !== null) {
+                clearTimeout(dragLeaveTimeoutRef.current);
+                dragLeaveTimeoutRef.current = null;
+            }
+            if (lastDragOverRef.current) {
+                try {
+                    lastDragOverRef.current.classList.remove('drag-over');
+                }
+                catch (err) { }
+                lastDragOverRef.current = null;
+            }
+            const list = document.querySelectorAll('.order-list .order-list__item');
+            list.forEach((el) => el.classList.remove('drag-over'));
+        }
+        catch (err) { }
+    };
+    useEffect(() => {
+        try {
+            const total = Math.max(1, (shuffled || []).length);
+            shuffled.forEach((it, idx) => {
+                const el = markerRefs.current.get(it.id);
+                if (!el)
+                    return;
+                let pct = 50;
+                if (total > 1)
+                    pct = Math.round((idx / (total - 1)) * 100);
+                try {
+                    el.style.setProperty('--marker-pos', pct + '%');
+                }
+                catch (err) { }
+            });
+        }
+        catch (err) { }
+    }, [shuffled]);
+    useEffect(() => {
+        return () => {
+            clearDragState();
+            if (dragLeaveTimeoutRef.current !== null) {
+                clearTimeout(dragLeaveTimeoutRef.current);
+                dragLeaveTimeoutRef.current = null;
+            }
+        };
+    }, []);
+    return (_jsx(TrainingStep, { index: index, stepIndex: stepIndex, isLast: isLast, title: resolvedTitle, children: _jsx("div", { className: "order-list", children: shuffled.map((it, idx) => {
+                const total = Math.max(1, (shuffled || []).length);
+                const pct = total > 1 ? Math.round((idx / (total - 1)) * 100) : 50;
+                return (_jsx("div", { className: `order-list__item`, children: _jsxs("div", { className: "order-list__slot", "data-disabled": currentState === 'disabled', "aria-disabled": currentState === 'disabled', children: [currentState !== 'disabled' ? (_jsx("div", { className: "order-list__marker caption-1", style: { '--marker-pos': pct + '%' }, ref: (el) => {
+                                    const map = markerRefs.current;
+                                    if (el)
+                                        map.set(it.id, el);
+                                    else
+                                        map.delete(it.id);
+                                }, children: _jsx("span", { className: "order-list__slot-number button-1", children: idx + 1 }) })) : null, _jsxs("div", { ref: (el) => {
+                                    const map = itemRefs.current;
+                                    if (el)
+                                        map.set(it.id, el);
+                                    else
+                                        map.delete(it.id);
+                                }, className: `order-list__draggable ${draggedIndex === idx ? "dragging" : ""}`, "data-disabled": currentState === 'disabled', "aria-disabled": currentState === 'disabled', tabIndex: currentState === 'disabled' ? -1 : 0, draggable: currentState === 'active', onDragStart: currentState === 'active' ? (e) => handleDragStart(idx, e) : undefined, onDragEnter: currentState === 'active' ? (e) => handleDragOverWithClass(idx, e) : undefined, onDragOver: currentState === 'active' ? (e) => handleDragOverWithClass(idx, e) : undefined, onDragLeave: currentState === 'active' ? () => {
+                                    try {
+                                        if (dragLeaveTimeoutRef.current !== null)
+                                            clearTimeout(dragLeaveTimeoutRef.current);
+                                        dragLeaveTimeoutRef.current = setTimeout(() => {
+                                            try {
+                                                const list = document.querySelectorAll('.order-list .order-list__item');
+                                                if (list && list[idx]) {
+                                                    list[idx].classList.remove('drag-over');
+                                                    if (lastDragOverRef.current === list[idx])
+                                                        lastDragOverRef.current = null;
+                                                }
+                                            }
+                                            catch (err) { }
+                                        }, 80);
+                                    }
+                                    catch (err) { }
+                                } : undefined, onDrop: currentState === 'active' ? (e) => handleDrop(idx, e) : undefined, onDragEnd: currentState === 'active' ? handleDragEnd : undefined, children: [_jsx("span", { className: "order-list__item-text body-2", children: it.text }), currentState === 'active' ? (_jsxs("span", { className: "order-list__item-buttons", children: [_jsx(Button, { size: 32, type: "dot", onClick: () => move(idx, -1), ariaLabel: t("training.up"), icon: 'chevron-up', variant: 'transparent-gray', width: 48, useFaded: "true", disabled: idx === 0, useBorder: false, useDisabledInvisible: true }), _jsx(Button, { size: 32, type: "dot", onClick: () => move(idx, 1), ariaLabel: t("training.down"), icon: 'chevron-down', variant: 'transparent-gray', width: 48, useFaded: "true", disabled: idx === shuffled.length - 1, useBorder: false, useDisabledInvisible: true })] })) : null] })] }) }, it.id));
+            }) }) }));
+}

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

@@ -0,0 +1,111 @@
+.training-text-box {
+  background: var(--color-darkWhite);
+  border-radius: var(--radius-m);
+  color: var(--color-black);
+  max-width: 100%;
+  text-align: center;
+  word-break: keep-all;
+  overflow-wrap: anywhere;
+  /* allow overflow so preview button shadow isn't clipped */
+  overflow: visible;
+  position: relative;
+  padding: var(--spacing-content);
+  border: 1px solid var(--color-deepWhite);
+  
+  /* make textbox a column flex container so inner parts can stretch */
+  display: flex;
+  flex-direction: column;
+  min-height: 160px;
+}
+
+/* 상태 변형 */
+.training-text-box--disabled {
+  pointer-events: none;
+  user-select: none;
+}
+
+/* hide inner text when disabled, keep layout */
+.training-text-box--disabled .training-text-box__inner {
+  visibility: hidden;
+}
+
+/* optional subtle overlay to indicate hidden state */
+.training-text-box--disabled::after {
+  content: "";
+  position: absolute;
+  pointer-events: none;
+  z-index: 5;
+}
+
+/* Preview button container - center overlay */
+.training-text-box__preview {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 60;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: auto; /* ensure clickable even when parent has pointer-events:none */
+}
+
+.training-text-box__buttons {
+  position: relative;
+  left: 0; right:0;
+  height: 28px;
+  display: flex;
+  gap: 4px;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  z-index: 40;
+  pointer-events: auto;
+  border-radius: 999px;
+}
+
+.training-text-box__area {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  box-sizing: border-box;
+  z-index: 40;
+  pointer-events: auto;
+  margin: 0 auto;
+  width: 100%;
+  /* take remaining vertical space inside .textbox */
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
+.training-text-box--active,
+.training-text-box--done {
+  pointer-events: auto;
+  user-select: auto;
+  background-color: var(--color-white);
+  transition: box-shadow 180ms ease, transform 180ms ease, opacity 160ms ease;
+  border-color: var(--color-main);
+}
+
+.training-text-box.is-dark {
+  background: var(--color-darkGray);
+  border: 1px solid var(--color-black);
+  color: var(--color-deepWhite);
+}
+
+/* ensure inner text block wraps and defines height */
+.training-text-box .training-text-box__inner {
+  display: block;
+  text-align: center;
+  white-space: normal;
+  word-break: keep-all;
+  overflow-wrap: anywhere;
+  width: 100%;
+}
+/* ensure tooltip/text color inside dark mode is readable */
+.training-text-box.is-dark .tooltip-textbox__text,
+.training-text-box.is-dark .training-text-box__inner {
+  color: var(--color-deepWhite);
+}

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

@@ -0,0 +1,8 @@
+import "./TrainingStep.css";
+import "./TrainingStepTextBox.css";
+/** @public */
+export default function TrainingStepTextBox({ context, state, theme: themeProp }: {
+    context?: string | Record<string, unknown>;
+    state?: string;
+    theme?: string;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,74 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { useTranslation } from 'react-i18next';
+import Button from '../Button';
+import Toast from '../Toast';
+import { useFontScale } from '../../hooks';
+import "./TrainingStep.css";
+import "./TrainingStepTextBox.css";
+/** @public */
+export default function TrainingStepTextBox({ context, state = "disabled", theme: themeProp = 'light' }) {
+    const { t } = useTranslation();
+    const [localStatus, setLocalStatus] = useState("disabled");
+    const [theme, setTheme] = useState(() => {
+        try {
+            return localStorage.getItem('tooltip-theme') || themeProp;
+        }
+        catch (e) {
+            return themeProp;
+        }
+    });
+    useEffect(() => {
+        try {
+            localStorage.setItem('tooltip-theme', theme);
+        }
+        catch (e) { }
+    }, [theme]);
+    const toggleTheme = () => setTheme((t) => (t === 'dark' ? 'light' : 'dark'));
+    const { increase, decrease, canIncrease, canDecrease, fontSize, lineHeight, } = useFontScale({
+        storageKey: 'textbox_fontScale',
+    });
+    const [noticeMessage, setNoticeMessage] = useState('');
+    const handleActivate = useCallback(() => setLocalStatus("active"), []);
+    const handleNoticeClose = useCallback(() => setNoticeMessage(''), []);
+    const showNotice = (msg) => {
+        try {
+            setNoticeMessage(msg);
+        }
+        catch (e) { }
+    };
+    const isMobile = typeof navigator !== "undefined" &&
+        /Mobi|Android/i.test(navigator.userAgent || "");
+    useEffect(() => {
+        if (state !== "disabled") {
+            const id = setTimeout(() => setLocalStatus(state), 0);
+            return () => clearTimeout(id);
+        }
+        return undefined;
+    }, [state]);
+    const content = useMemo(() => {
+        if (context && typeof context === "object")
+            return String(context.sentence ?? context.text ?? "");
+        if (typeof context === "string")
+            return context;
+        return "";
+    }, [context]);
+    useEffect(() => {
+        const id = setTimeout(() => setLocalStatus("disabled"), 0);
+        return () => clearTimeout(id);
+    }, [content]);
+    const displayStatus = state === "disabled" ? localStatus : state;
+    const stateClass = displayStatus === "disabled"
+        ? "training-text-box--disabled"
+        : displayStatus === "active"
+            ? "training-text-box--active"
+            : displayStatus === "done"
+                ? "training-text-box--done"
+                : "";
+    const textStyle = useMemo(() => ({
+        fontSize: `${fontSize}px`,
+        lineHeight: `${lineHeight}px`,
+    }), [fontSize, lineHeight]);
+    return (_jsxs("div", { className: `training-text-box ${stateClass} ${displayStatus !== 'disabled' && theme === 'dark' ? 'is-dark' : ''}`, children: [displayStatus === "disabled" && (_jsx("div", { className: "training-text-box__preview", children: _jsx(Button, { size: 48, type: "bar", onClick: handleActivate, icon: 'eye', ariaLabel: t('training.sentencePreview', '문장 미리보기'), label: t('training.sentencePreview', '문장 미리보기'), useBorder: false }) })), _jsx("div", { className: "training-text-box__area", "aria-hidden": displayStatus === "disabled", children: _jsx("span", { className: "training-text-box__inner h3", style: textStyle, children: content }) }), displayStatus !== "disabled" && (_jsxs("div", { className: "training-text-box__buttons", "aria-hidden": displayStatus === "disabled", children: [_jsx(Button, { size: 32, type: "dot", onClick: decrease, onDisabledClick: () => showNotice(t('training.fontSizeMin', '글씨 크기가 최소입니다.')), ariaLabel: t('training.fontSizeDecrease', '글자 크기 감소'), icon: 'minus', variant: theme === 'dark' ? 'transparent-white' : 'transparent-gray', disabled: !canDecrease, useBorder: false, showTooltipInfo: true, ...(!isMobile && { width: '60px' }) }), _jsx(Button, { size: 32, type: "dot", onClick: increase, onDisabledClick: () => showNotice(t('training.fontSizeMax', '글씨 크기가 최대입니다.')), ariaLabel: t('training.fontSizeIncrease', '글자 크기 증가'), icon: 'plus', variant: theme === 'dark' ? 'transparent-white' : 'transparent-gray', disabled: !canIncrease, useBorder: false, showTooltipInfo: true, ...(!isMobile && { width: '60px' }) }), _jsx(Button, { size: 32, showTooltipInfo: true, type: "dot", useBorder: false, width: 48, icon: theme === 'dark' ? 'moon' : 'sun-medium', onClick: toggleTheme, ariaLabel: t('training.toggleBackground', '배경 전환'), variant: theme === 'dark' ? 'transparent-white' : 'transparent-gray' })] })), _jsx(Toast, { message: noticeMessage, position: "top", onClose: handleNoticeClose })] }));
+}