@ihabdevteam/core 0.19.0 → 0.21.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, pulseSelected, pulseSelectedDuration, clickable, onSelectSpeaker, buttonSize, showIcon, shortcutAnchor, shortcutScale, scaleShortcut, }: SoundCompassProps): JSX.Element;
+export declare function SoundCompass({ speakers, size, viewT, activeSpeakerId, playedIds, selectedId, answerId, showFeedback, pulseSelected, pulseSelectedDuration, pulseScale, clickable, onSelectSpeaker, buttonSize, showIcon, shortcutAnchor, shortcutScale, scaleShortcut, }: SoundCompassProps): JSX.Element;
 
 export declare interface SoundCompassExam {
     /** `<SoundCompass {...bind} />` 로 펼쳐 넣는 제어 props */
@@ -5212,6 +5212,17 @@ export declare interface SoundCompassProps {
      * 상태를 알리는 것이라 짧을 까닭이 없다. 필요해지면 그때 연다.
      */
     pulseSelectedDuration?: number;
+    /**
+     * 울림이 퍼지는 최대 배율. 기본 2.8.
+     *
+     * 얼마나 멀리 퍼져야 알맞은지는 **스피커 사이 거리**에 달렸다. 촘촘한 배치에서는
+     * 2.8 배가 이웃 버튼 앞까지 밀고 들어온다 — 소비 앱 실측: 버튼 지름 90px 이면
+     * 울림 지름이 252px 인데 이웃과의 중심 거리가 261px 이었다.
+     *
+     * 되풀이하는 울림과 한 번짜리 울림에 함께 걸린다. 둘의 퍼짐이 달라야 할 까닭이
+     * 아직 없다 — 필요해지면 그때 가른다.
+     */
+    pulseScale?: number;
     /** 스피커 클릭 가능 여부. 기본 false */
     clickable?: boolean;
     /** 스피커 선택 시 호출 */
@@ -5219,7 +5230,23 @@ export declare interface SoundCompassProps {
     /** 스피커 버튼 크기(px). 기본 40 */
     buttonSize?: number;
     /** 스피커 버튼에 아이콘을 표시할지 여부. false면 숫자만 가운데 표시. 기본 true */
-    showIcon?: boolean;
+    /**
+     * 버튼 안에 무엇을 그릴지.
+     *
+     * - `true` — 아이콘과 번호를 함께 (기본)
+     * - `false` — 번호만
+     * - `'answered'` — **답이 정해진 상태에서만 아이콘으로 갈아 끼운다.** 그때는
+     *   번호를 그리지 않는다. 나머지(`idle`·`active`)는 `false` 와 같이 번호만이다.
+     *
+     * `'answered'` 가 가르는 선은 자의적이지 않다. `idle` 과 `active` 는 아이콘이
+     * 둘 다 같은 `Volume2` 라 번호보다 더 말해 주는 것이 없다. `played`·`correct` 의
+     * 체크와 `wrong` 의 가위표만이 번호가 못 하는 말을 한다 — 아이콘이 자리를
+     * 차지할 값을 하는 자리만 바꿔 끼운다.
+     *
+     * 스피커를 번호로 부르는 화면에서 필요하다. `true` 로 켜면 고르지 않은 스피커까지
+     * 아이콘이 붙고 번호가 함께 작아져(실측: 36px → 18px) 번호로 부르는 화면이 무너진다.
+     */
+    showIcon?: boolean | 'answered';
     /**
      * `speakers[].shortcut` 배지가 버튼의 어느 모서리에 붙을지. 기본 우상단.
      *

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

@@ -8,6 +8,31 @@
   flex-direction: column;
   align-items: center;
   width: 100%;
+
+  /* 상태 색은 **뿌리에** 둔다. 예전에는 버튼 안에 선언돼 있었는데, 울림(pulse)은
+     버튼의 형제라 그 변수를 못 봤다 — 울림 색을 상태에 묶자마자 투명하게 나왔다
+     (실측: rgba(0,0,0,0)). 버튼과 울림이 함께 보려면 공통 조상에 있어야 한다.
+
+     **덮어쓸 때도 여기나 그 위에 얹어야 한다.** `.sound-compass__speaker-btn` 같은
+     버튼 선택자 위에 얹으면 버튼만 바뀌고 울림은 안 따라온다 — 그 자리에서는
+     조용히 어긋나므로, 색이 갈려 보이면 이것부터 보라. */
+  --scb-idle-bg: var(--color-deepWhite);
+  --scb-idle-border: var(--color-whiteLine);
+  --scb-idle-fg: var(--color-lightGray);
+  --scb-active-bg: var(--color-main);
+  --scb-active-border: var(--color-main);
+  --scb-active-fg: #ffffff;
+  --scb-played-bg: var(--color-sub);
+  --scb-played-border: var(--color-sub);
+  --scb-played-fg: #ffffff;
+  --scb-wrong-bg: #ef4444;
+  --scb-wrong-border: #ef4444;
+  --scb-wrong-fg: #ffffff;
+  /* 호버·포커스도 상태 색과 같은 방식으로 연다 — 소비자가 바꿔 끼울 수 있게. */
+  --scb-idle-hover-bg: var(--color-whiteLine);
+  --scb-idle-hover-border: var(--color-lightGray);
+  /* 호버의 글자색. 기본은 idle 과 같다 — 주지 않으면 예전 그대로다. */
+  --scb-idle-hover-fg: var(--scb-idle-fg);
 }
 
 .sound-compass__status {
@@ -43,23 +68,6 @@
   border-style: solid;
   transition: background-color .15s, border-color .15s, color .15s;
 
-  --scb-idle-bg: var(--color-deepWhite);
-  --scb-idle-border: var(--color-whiteLine);
-  --scb-idle-fg: var(--color-lightGray);
-  --scb-active-bg: var(--color-main);
-  --scb-active-border: var(--color-main);
-  --scb-active-fg: #ffffff;
-  --scb-played-bg: var(--color-sub);
-  --scb-played-border: var(--color-sub);
-  --scb-played-fg: #ffffff;
-  --scb-wrong-bg: #ef4444;
-  --scb-wrong-border: #ef4444;
-  --scb-wrong-fg: #ffffff;
-  /* 호버·포커스도 상태 색과 같은 방식으로 연다 — 소비자가 바꿔 끼울 수 있게. */
-  --scb-idle-hover-bg: var(--color-whiteLine);
-  --scb-idle-hover-border: var(--color-lightGray);
-  /* 호버의 글자색. 기본은 idle 과 같다 — 주지 않으면 예전 그대로다. */
-  --scb-idle-hover-fg: var(--scb-idle-fg);
   --scb-focus-ring: var(--color-main);
 }
 
@@ -124,7 +132,10 @@
 @keyframes sound-compass-pulse {
   0%   { transform: scale(0.95); opacity: 0; }
   8%   { transform: scale(1.05); opacity: 0.45; }
-  100% { transform: scale(2.8);  opacity: 0; }
+  /* 얼마나 멀리 퍼질지는 스피커 사이 거리에 달렸다 — 2.8 배는 촘촘한 배치에서
+     이웃 버튼 앞까지 밀고 들어간다(소비 앱 실측: 버튼 90px 이면 울림 지름 252px,
+     이웃과의 중심 거리 261px). keyframe 안의 var() 는 정적 값이라 잘 돈다. */
+  100% { transform: scale(var(--sc-pulse-scale, 2.8)); opacity: 0; }
 }
 
 .sound-compass__pulse {
@@ -132,12 +143,23 @@
   top: 0; left: 0;
   width: 40px; height: 40px;
   border-radius: 50%;
-  background: var(--color-main);
+  /* 색은 **그 순간 버튼 색**을 따른다. 아래 상태별 규칙이 정하고, 여기 것은
+     상태를 못 붙였을 때의 바닥값이다. `--sc-pulse-color` 로 덮을 수 있다. */
+  background: var(--sc-pulse-color, var(--scb-active-bg));
   pointer-events: none;
   animation: sound-compass-pulse 1s cubic-bezier(0.33, 1, 0.68, 1) infinite;
 }
 /* 고른 순간을 알리는 울림은 한 번만 번진다. 마지막 프레임이 opacity 0 이라
    되풀이를 끊는 것만으로 그대로 사라진다. */
+/* 울림 색이 버튼 색과 갈리면 청록 버튼에서 파란 울림이 번진다(소비 앱 실측:
+   고른 직후 버튼은 --scb-played-bg 인데 울림은 --color-main 이었다). 상태를 그대로
+   따라가게 두면 `--scb-*` 를 바꿔 끼운 소비자도 저절로 맞는다. */
+.sound-compass__pulse--idle    { background: var(--sc-pulse-color, var(--scb-idle-bg)); }
+.sound-compass__pulse--active  { background: var(--sc-pulse-color, var(--scb-active-bg)); }
+.sound-compass__pulse--played,
+.sound-compass__pulse--correct { background: var(--sc-pulse-color, var(--scb-played-bg)); }
+.sound-compass__pulse--wrong   { background: var(--sc-pulse-color, var(--scb-wrong-bg)); }
+
 .sound-compass__pulse--once {
   animation-iteration-count: 1;
   /* 고른 상태를 짧게만 잡아 두는 검사에서는 이 시간을 줄여야 울림이 안 끊긴다. */

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

@@ -56,6 +56,17 @@ export interface SoundCompassProps {
      * 상태를 알리는 것이라 짧을 까닭이 없다. 필요해지면 그때 연다.
      */
     pulseSelectedDuration?: number;
+    /**
+     * 울림이 퍼지는 최대 배율. 기본 2.8.
+     *
+     * 얼마나 멀리 퍼져야 알맞은지는 **스피커 사이 거리**에 달렸다. 촘촘한 배치에서는
+     * 2.8 배가 이웃 버튼 앞까지 밀고 들어온다 — 소비 앱 실측: 버튼 지름 90px 이면
+     * 울림 지름이 252px 인데 이웃과의 중심 거리가 261px 이었다.
+     *
+     * 되풀이하는 울림과 한 번짜리 울림에 함께 걸린다. 둘의 퍼짐이 달라야 할 까닭이
+     * 아직 없다 — 필요해지면 그때 가른다.
+     */
+    pulseScale?: number;
     /** 스피커 클릭 가능 여부. 기본 false */
     clickable?: boolean;
     /** 스피커 선택 시 호출 */
@@ -63,7 +74,23 @@ export interface SoundCompassProps {
     /** 스피커 버튼 크기(px). 기본 40 */
     buttonSize?: number;
     /** 스피커 버튼에 아이콘을 표시할지 여부. false면 숫자만 가운데 표시. 기본 true */
-    showIcon?: boolean;
+    /**
+     * 버튼 안에 무엇을 그릴지.
+     *
+     * - `true` — 아이콘과 번호를 함께 (기본)
+     * - `false` — 번호만
+     * - `'answered'` — **답이 정해진 상태에서만 아이콘으로 갈아 끼운다.** 그때는
+     *   번호를 그리지 않는다. 나머지(`idle`·`active`)는 `false` 와 같이 번호만이다.
+     *
+     * `'answered'` 가 가르는 선은 자의적이지 않다. `idle` 과 `active` 는 아이콘이
+     * 둘 다 같은 `Volume2` 라 번호보다 더 말해 주는 것이 없다. `played`·`correct` 의
+     * 체크와 `wrong` 의 가위표만이 번호가 못 하는 말을 한다 — 아이콘이 자리를
+     * 차지할 값을 하는 자리만 바꿔 끼운다.
+     *
+     * 스피커를 번호로 부르는 화면에서 필요하다. `true` 로 켜면 고르지 않은 스피커까지
+     * 아이콘이 붙고 번호가 함께 작아져(실측: 36px → 18px) 번호로 부르는 화면이 무너진다.
+     */
+    showIcon?: boolean | 'answered';
     /**
      * `speakers[].shortcut` 배지가 버튼의 어느 모서리에 붙을지. 기본 우상단.
      *
@@ -91,4 +118,4 @@ export interface SoundCompassProps {
     scaleShortcut?: boolean;
 }
 /** @public */
-export default function SoundCompass({ speakers, size, viewT, activeSpeakerId, playedIds, selectedId, answerId, showFeedback, pulseSelected, pulseSelectedDuration, 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, pulseSelectedDuration, pulseScale, 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, pulseSelected = false, pulseSelectedDuration, 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, pulseSelectedDuration, pulseScale, 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;
     // ── 탑뷰 좌표 ──────────────────────────────────────────────────────────
@@ -192,12 +192,22 @@ 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${pulse === 'once' ? ' sound-compass__pulse--once' : ''}`, style: {
+                    // `'answered'` 는 답이 정해진 자리에서만 아이콘으로 **갈아 끼운다** —
+                    // 아이콘과 번호를 같이 그리면 90px 버튼에서 둘 다 작아진다.
+                    const swapped = showIcon === 'answered'
+                        && (state === 'played' || state === 'correct' || state === 'wrong');
+                    const withIcon = showIcon === true || swapped;
+                    const withNumber = !swapped;
+                    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 sound-compass__pulse--${state}`
+                                    + (pulse === 'once' ? ' sound-compass__pulse--once' : ''), style: {
                                     width: BTN, height: BTN,
-                                    // 안 주면 아예 얹지 않는다 — CSS 의 기본 1s 가 살아 있게.
+                                    // 안 주면 아예 얹지 않는다 — CSS 의 기본값이 살아 있게.
                                     ...(pulse === 'once' && pulseSelectedDuration !== undefined
                                         ? { ['--sc-pulse-duration-once']: `${pulseSelectedDuration}ms` }
                                         : null),
-                                } })), _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));
+                                    ...(pulseScale !== undefined
+                                        ? { ['--sc-pulse-scale']: String(pulseScale) }
+                                        : null),
+                                } })), _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: [withIcon && getStateIcon(state, iconSize), withNumber && (_jsx("span", { className: "sound-compass__speaker-number", style: { fontSize: showIcon === true ? 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.19.0",
+  "version": "0.21.0",
   "private": false,
   "main": "dist/ihabdevteam-core.cjs.js",
   "module": "dist/ihabdevteam-core.esm.js",