@ihabdevteam/core 0.9.6 → 0.9.8

package/dist/packages/core/src/components/Tooltip/DebugTooltip.d.ts

@@ -1,7 +1,23 @@
 import { type ReactNode } from 'react';
 import './DebugTooltip.css';
-/** @public */
-export default function DebugResultLauncher({ renderResultPopup }?: {
+/**
+ * 결과 팝업을 실제 훈련 없이 열어보는 개발용 단추 넷.
+ *
+ * 예전에는 파일 안의 `const DEBUG = false` 로만 켤 수 있었다. 모노레포 시절에는
+ * packages/core 를 그 자리에서 고칠 수 있었으니 말이 됐는데, **패키지로 분리되면서
+ * 켤 방법이 사라졌다** — 소비자가 node_modules 를 고치지 않는 한 언제나 null 이다.
+ * 실제로 speechear-v2 가 이것을 렌더하고 있고, 아무것도 그려지지 않는다.
+ *
+ * 그래서 스위치를 밖으로 낸다. 기본값은 그대로 꺼짐이라 지금 쓰는 곳은 안 바뀐다.
+ *
+ * @example
+ * <DebugResultLauncher enabled={import.meta.env.DEV} renderResultPopup={…} />
+ *
+ * @public
+ */
+export default function DebugResultLauncher({ enabled, renderResultPopup }?: {
+    /** 켜야 단추가 보인다. 기본은 꺼짐 — 배포 화면에 실수로 남지 않게. */
+    enabled?: boolean;
     renderResultPopup?: (props: {
         score?: number | null;
         contextsLength?: number | null;

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

@@ -2,9 +2,22 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useCallback } from 'react';
 import './DebugTooltip.css';
-const DEBUG = false;
-/** @public */
-export default function DebugResultLauncher({ renderResultPopup } = {}) {
+/**
+ * 결과 팝업을 실제 훈련 없이 열어보는 개발용 단추 넷.
+ *
+ * 예전에는 파일 안의 `const DEBUG = false` 로만 켤 수 있었다. 모노레포 시절에는
+ * packages/core 를 그 자리에서 고칠 수 있었으니 말이 됐는데, **패키지로 분리되면서
+ * 켤 방법이 사라졌다** — 소비자가 node_modules 를 고치지 않는 한 언제나 null 이다.
+ * 실제로 speechear-v2 가 이것을 렌더하고 있고, 아무것도 그려지지 않는다.
+ *
+ * 그래서 스위치를 밖으로 낸다. 기본값은 그대로 꺼짐이라 지금 쓰는 곳은 안 바뀐다.
+ *
+ * @example
+ * <DebugResultLauncher enabled={import.meta.env.DEV} renderResultPopup={…} />
+ *
+ * @public
+ */
+export default function DebugResultLauncher({ enabled = false, renderResultPopup } = {}) {
     const [openType, setOpenType] = useState(null);
     const [payload, setPayload] = useState(null);
     const openPopup = (type) => {
@@ -66,8 +79,8 @@ export default function DebugResultLauncher({ renderResultPopup } = {}) {
     const handleShortPopup = useCallback(() => openPopup('short'), []);
     const handleLongPopup = useCallback(() => openPopup('long'), []);
     const handleOrderPopup = useCallback(() => openPopup('order'), []);
-    // 훅 규칙 준수를 위해 모든 훅 호출 뒤에서 분기(DEBUG는 컴파일 타임 상수)
-    if (!DEBUG)
+    // 훅 규칙 준수를 위해 모든 훅 호출 뒤에서 분기한다 — 위 훅들은 언제나 같은 수만큼 돈다.
+    if (!enabled)
         return null;
     return (_jsxs("div", { className: "debug-result-launcher", children: [_jsxs("div", { className: "debug-buttons", children: [_jsx("button", { className: "debug-button", onClick: handleNoisePopup, children: "Noise \uACB0\uACFC\uBCF4\uAE30" }), _jsx("button", { className: "debug-button", onClick: handleShortPopup, children: "ShortStory \uACB0\uACFC\uBCF4\uAE30" }), _jsx("button", { className: "debug-button", onClick: handleLongPopup, children: "LongStory \uACB0\uACFC\uBCF4\uAE30" }), _jsx("button", { className: "debug-button", onClick: handleOrderPopup, children: "Order \uACB0\uACFC\uBCF4\uAE30" })] }), openType && payload ? renderResultPopup?.({
                 score: payload.score,

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

@@ -61,31 +61,34 @@ export default function TrainingStepConfirm({ index, stepIndex, isLast = false,
         /* 여기 오면 늘 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() });
-                        }
+            /* 다음 선택 집합을 **updater 밖에서** 만든다. 예전에는 updater 안에서 만들면서
+               거기서 onChange/onDone 까지 불렀는데, updater 는 순수해야 하고 React 가 렌더
+               단계에 부를 수 있다 — 그래서 "렌더 중에 다른 컴포넌트를 갱신한다" 는 경고가
+               났다(실측). 클릭은 discrete event 라 처리 시점에 상태가 이미 커밋돼 있으므로
+               여기서 selectedSet 을 읽어도 어긋나지 않는다. */
+            const next = new Set(selectedSet);
+            const wasSelected = next.has(val);
+            if (wasSelected)
+                next.delete(val);
+            else
+                next.add(val);
+            setSelectedSet(next);
+            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);
@@ -98,20 +101,17 @@ export default function TrainingStepConfirm({ index, stepIndex, isLast = false,
                 }
             }
         }
-    }, [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]);
+    }, [choices, currentState, multiSelect, onChange, onDone, correctCount, selectedSet]);
+    /* 여기 있던 effect 는 selectedSet 이 바뀔 때마다 onChange/onDone 을 **한 번 더**
+       불렀다. 클릭 핸들러가 이미 같은 일을 하고 있어 한 번 고를 때마다 두 번 보고됐다.
+       게다가 콜백이 그 effect 의 의존성에 있어서, 부르는 쪽이 인라인 화살표를 주고
+       받은 payload 를 담으면(payload 에 Date.now() 가 있어 담는 값이 매번 다르다)
+       onChange → 부모 리렌더 → 새 화살표 → effect → onChange … 로 끝나지 않았다.
+       실측: 고르기 한 번에 40회(세운 상한). 상한을 빼면 10분이 지나도 안 끝났다.
+  
+       지울 수 있는 까닭은 selectedSet 을 실제로 채우는 곳이 클릭 핸들러 하나뿐이기
+       때문이다 — 나머지 둘(choices 바뀜·페이지 전환)은 빈 Set 으로 되돌리는 자리라
+       저 effect 의 `size === 0` 가드에 걸려 어차피 아무것도 안 했다. */
     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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ihabdevteam/core",
-  "version": "0.9.6",
+  "version": "0.9.8",
   "private": false,
   "main": "dist/ihabdevteam-core.cjs.js",
   "module": "dist/ihabdevteam-core.esm.js",