@ihabdevteam/core 0.20.0 → 0.21.0

package/dist/ihabdevteam-core.d.ts

@@ -5230,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

@@ -11,7 +11,11 @@
 
   /* 상태 색은 **뿌리에** 둔다. 예전에는 버튼 안에 선언돼 있었는데, 울림(pulse)은
      버튼의 형제라 그 변수를 못 봤다 — 울림 색을 상태에 묶자마자 투명하게 나왔다
-     (실측: rgba(0,0,0,0)). 버튼과 울림이 함께 보려면 공통 조상에 있어야 한다. */
+     (실측: 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);

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

@@ -74,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` 배지가 버튼의 어느 모서리에 붙을지. 기본 우상단.
      *

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

@@ -192,6 +192,12 @@ 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)));
+                    // `'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,
@@ -202,6 +208,6 @@ export default function SoundCompass({ speakers, size = 300, viewT = 0, activeSp
                                     ...(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: [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));
+                                } })), _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.20.0",
+  "version": "0.21.0",
   "private": false,
   "main": "dist/ihabdevteam-core.cjs.js",
   "module": "dist/ihabdevteam-core.esm.js",