@ihabdevteam/core 0.17.0 → 0.18.0

package/dist/ihabdevteam-core.d.ts

@@ -5119,7 +5119,7 @@ export declare interface SliderProps {
 export declare function sortToValue(key: string, asc: boolean): string | undefined;
 
 /** @public */
-export declare function SoundCompass({ speakers, size, viewT, activeSpeakerId, playedIds, selectedId, answerId, showFeedback, clickable, onSelectSpeaker, buttonSize, showIcon, shortcutAnchor, shortcutScale, scaleShortcut, }: SoundCompassProps): JSX.Element;
+export declare function SoundCompass({ speakers, size, viewT, activeSpeakerId, playedIds, selectedId, answerId, showFeedback, pulseSelected, clickable, onSelectSpeaker, buttonSize, showIcon, shortcutAnchor, shortcutScale, scaleShortcut, }: SoundCompassProps): JSX.Element;
 
 export declare interface SoundCompassExam {
     /** `<SoundCompass {...bind} />` 로 펼쳐 넣는 제어 props */
@@ -5186,6 +5186,20 @@ export declare interface SoundCompassProps {
     answerId?: string | null;
     /** 정답/오답을 시각적으로 표시할지 여부. 기본 false */
     showFeedback?: boolean;
+    /**
+     * 고른 스피커(`selectedId`)에도 울림을 붙일지. 기본 꺼짐.
+     *
+     * 울림은 원래 **소리가 나는 스피커**(`activeSpeakerId`)와 **피드백의 정답**에만
+     * 붙는다. 정답을 알려주지 않는 검사에서는 그 둘을 쓰지 않으므로 울림이 한 번도
+     * 안 난다 — 고른 자리에 손맛이 없다.
+     *
+     * 피드백을 보이는 동안에는 걸리지 않는다. 그때는 정답이 이미 울리고 있어서,
+     * 고른 것까지 울리면 무엇을 가리키는 울림인지 흐려진다.
+     *
+     * 이 울림은 **한 번만** 번진다. 소리가 나는 동안 계속 알리는 것과 달리, 선택은
+     * 일어난 순간을 알리는 것이라 되풀이할 까닭이 없다.
+     */
+    pulseSelected?: boolean;
     /** 스피커 클릭 가능 여부. 기본 false */
     clickable?: boolean;
     /** 스피커 선택 시 호출 */

package/dist/packages/core/src/components/SoundCompass.css

@@ -136,6 +136,11 @@
   pointer-events: none;
   animation: sound-compass-pulse 1s cubic-bezier(0.33, 1, 0.68, 1) infinite;
 }
+/* 고른 순간을 알리는 울림은 한 번만 번진다. 마지막 프레임이 opacity 0 이라
+   되풀이를 끊는 것만으로 그대로 사라진다. */
+.sound-compass__pulse--once {
+  animation-iteration-count: 1;
+}
 
 /* 스피커 버튼 wrap의 정적 속성만 분리(나머지는 상태·좌표 기반 동적 값이라 인라인 유지) */
 /* 호버·포커스 — `all: unset` 이 브라우저 기본 상태까지 지워, 누를 수 있는 자리인지

package/dist/packages/core/src/components/SoundCompass.d.ts

@@ -30,6 +30,20 @@ export interface SoundCompassProps {
     answerId?: string | null;
     /** 정답/오답을 시각적으로 표시할지 여부. 기본 false */
     showFeedback?: boolean;
+    /**
+     * 고른 스피커(`selectedId`)에도 울림을 붙일지. 기본 꺼짐.
+     *
+     * 울림은 원래 **소리가 나는 스피커**(`activeSpeakerId`)와 **피드백의 정답**에만
+     * 붙는다. 정답을 알려주지 않는 검사에서는 그 둘을 쓰지 않으므로 울림이 한 번도
+     * 안 난다 — 고른 자리에 손맛이 없다.
+     *
+     * 피드백을 보이는 동안에는 걸리지 않는다. 그때는 정답이 이미 울리고 있어서,
+     * 고른 것까지 울리면 무엇을 가리키는 울림인지 흐려진다.
+     *
+     * 이 울림은 **한 번만** 번진다. 소리가 나는 동안 계속 알리는 것과 달리, 선택은
+     * 일어난 순간을 알리는 것이라 되풀이할 까닭이 없다.
+     */
+    pulseSelected?: boolean;
     /** 스피커 클릭 가능 여부. 기본 false */
     clickable?: boolean;
     /** 스피커 선택 시 호출 */
@@ -65,4 +79,4 @@ export interface SoundCompassProps {
     scaleShortcut?: boolean;
 }
 /** @public */
-export default function SoundCompass({ speakers, size, viewT, activeSpeakerId, playedIds, selectedId, answerId, showFeedback, clickable, onSelectSpeaker, buttonSize, showIcon, shortcutAnchor, shortcutScale, scaleShortcut, }: SoundCompassProps): import("react").JSX.Element;
+export default function SoundCompass({ speakers, size, viewT, activeSpeakerId, playedIds, selectedId, answerId, showFeedback, pulseSelected, clickable, onSelectSpeaker, buttonSize, showIcon, shortcutAnchor, shortcutScale, scaleShortcut, }: SoundCompassProps): import("react").JSX.Element;

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

@@ -14,7 +14,7 @@ import ShortcutBadge from './ShortcutBadge';
 import './SoundCompass.css';
 const lerp = (a, b, t) => a + (b - a) * t;
 /** @public */
-export default function SoundCompass({ speakers, size = 300, viewT = 0, activeSpeakerId = null, playedIds, selectedId = null, answerId = null, showFeedback = false, clickable = false, onSelectSpeaker, buttonSize = 40, showIcon = true, shortcutAnchor = 'top-right', shortcutScale, scaleShortcut = false, }) {
+export default function SoundCompass({ speakers, size = 300, viewT = 0, activeSpeakerId = null, playedIds, selectedId = null, answerId = null, showFeedback = false, pulseSelected = false, clickable = false, onSelectSpeaker, buttonSize = 40, showIcon = true, shortcutAnchor = 'top-right', shortcutScale, scaleShortcut = false, }) {
     const t = Math.max(0, Math.min(1, viewT));
     const CENTER = size / 2;
     // ── 탑뷰 좌표 ──────────────────────────────────────────────────────────
@@ -132,8 +132,17 @@ export default function SoundCompass({ speakers, size = 300, viewT = 0, activeSp
             return 'played';
         return 'idle';
     };
-    const shouldPulse = (sp) => activeSpeakerId === sp.id ||
-        (showFeedback && sp.id === answerId);
+    /**
+     * 울림을 어떤 까닭으로 다는지. 까닭에 따라 되풀이가 다르다 — 소리가 나는 동안은
+     * 계속(`loop`), 고른 순간은 한 번(`once`).
+     */
+    const pulseKind = (sp) => {
+        if (activeSpeakerId === sp.id)
+            return 'loop';
+        if (showFeedback)
+            return sp.id === answerId ? 'loop' : null;
+        return pulseSelected && sp.id === selectedId ? 'once' : null;
+    };
     // SpeakerState → 아이콘. 색상/배경은 Button에 기대지 않고 SoundCompass.css의
     // .sound-compass__speaker-btn--{state} 클래스가 전담해, 자유롭게 바꿀 수 있다.
     const getStateIcon = (state, iconSize) => {
@@ -150,7 +159,7 @@ export default function SoundCompass({ speakers, size = 300, viewT = 0, activeSp
                         }), rowArcPaths.map(a => (_jsx("path", { d: a.d, fill: "none", stroke: "#dde3ec", strokeWidth: "1" }, a.key)))] }), _jsx("div", { className: "sound-compass__center", style: { width: centerSize, height: centerSize, left: personPos.x, top: personPos.y }, children: _jsx(User, { size: centerIconSize, color: "currentColor", strokeWidth: 1.5 }) }), speakers.map((sp, idx) => {
                     const { x, y } = getSpeakerXY(sp);
                     const state = getSpeakerState(sp);
-                    const pulse = shouldPulse(sp);
+                    const pulse = pulseKind(sp);
                     const baseStyle = {
                         // 배지는 24px 고정인데 버튼은 크게 오간다. 그대로 두면 버튼 대비 비율이
                         // 세 배씩 흔들려, 작은 버튼에서는 배지가 버튼을 덮고 큰 버튼에서는
@@ -183,6 +192,6 @@ export default function SoundCompass({ speakers, size = 300, viewT = 0, activeSp
                     const iconSize = Math.round(Math.max(10, Math.min(56, BTN * 0.38)));
                     const numberSize = Math.round(Math.max(7, Math.min(18, BTN * 0.2)));
                     const numberOnlySize = Math.round(Math.max(10, Math.min(56, BTN * 0.4)));
-                    return (_jsxs("div", { className: "sound-compass__speaker-pos", style: { ...baseStyle, left: x - BTN / 2, top: y - BTN / 2 }, children: [pulse && _jsx("div", { className: "sound-compass__pulse", style: { width: BTN, height: BTN } }), _jsxs("button", { type: "button", tabIndex: clickable ? 0 : -1, "aria-disabled": clickable ? undefined : true, onClick: clickable ? () => onSelectSpeaker?.(sp.id) : undefined, className: `sound-compass__speaker-btn sound-compass__speaker-btn--${state}`, style: { width: BTN, height: BTN }, "aria-label": sp.label, children: [showIcon && getStateIcon(state, iconSize), _jsx("span", { className: "sound-compass__speaker-number", style: { fontSize: showIcon ? numberSize : numberOnlySize }, children: idx + 1 })] }), sp.shortcut && (_jsx(ShortcutBadge, { keys: sp.shortcut, anchor: shortcutAnchor, className: "sound-compass__speaker-shortcut" }))] }, sp.id));
+                    return (_jsxs("div", { className: "sound-compass__speaker-pos", style: { ...baseStyle, left: x - BTN / 2, top: y - BTN / 2 }, children: [pulse && (_jsx("div", { className: `sound-compass__pulse${pulse === 'once' ? ' sound-compass__pulse--once' : ''}`, style: { width: BTN, height: BTN } })), _jsxs("button", { type: "button", tabIndex: clickable ? 0 : -1, "aria-disabled": clickable ? undefined : true, onClick: clickable ? () => onSelectSpeaker?.(sp.id) : undefined, className: `sound-compass__speaker-btn sound-compass__speaker-btn--${state}`, style: { width: BTN, height: BTN }, "aria-label": sp.label, children: [showIcon && getStateIcon(state, iconSize), _jsx("span", { className: "sound-compass__speaker-number", style: { fontSize: showIcon ? numberSize : numberOnlySize }, children: idx + 1 })] }), sp.shortcut && (_jsx(ShortcutBadge, { keys: sp.shortcut, anchor: shortcutAnchor, className: "sound-compass__speaker-shortcut" }))] }, sp.id));
                 })] }) }));
 }

package/package.json

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