@ihabdevteam/core 0.20.0 → 0.22.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, pulseScale, 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, onCenterClick, centerLabel, centerDisabled, centerAttention, shortcutAnchor, shortcutScale, scaleShortcut, }: SoundCompassProps): JSX.Element;
 
 export declare interface SoundCompassExam {
     /** `<SoundCompass {...bind} />` 로 펼쳐 넣는 제어 props */
@@ -5230,7 +5230,42 @@ 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';
+    /**
+     * 가운데(피험자 자리)를 눌렀을 때. **주면 그 자리가 진짜 `<button>` 이 된다** —
+     * 초점이 닿고 Enter·Space 로 눌리고 포커스 링이 뜬다.
+     *
+     * 주지 않으면 예전 그대로 그림일 뿐이다(`<div>` · `pointer-events: none`).
+     * 소리를 듣는 단추를 그 자리에 두면 자리로도 말이 된다 — 소리는 그 사람을
+     * 향해 나온다.
+     */
+    onCenterClick?: () => void;
+    /** 가운데 단추의 이름표. `onCenterClick` 을 줄 때만 쓰인다. */
+    centerLabel?: string;
+    /** 가운데 단추를 못 누르게. 재생 중처럼 지금은 누를 때가 아닌 자리에 쓴다. */
+    centerDisabled?: boolean;
+    /**
+     * 가운데 단추에 눈을 끄는 울림을 건다. 스피커 재생 울림과 같은 그림·같은 색이라
+     * 화면이 한 벌로 읽힌다. 못 누를 때(`centerDisabled`)는 걸리지 않는다 —
+     * 누를 수 없는 자리로 눈을 끌면 안 된다.
+     */
+    centerAttention?: boolean;
     /**
      * `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);
@@ -29,6 +33,20 @@
   --scb-idle-hover-border: var(--color-lightGray);
   /* 호버의 글자색. 기본은 idle 과 같다 — 주지 않으면 예전 그대로다. */
   --scb-idle-hover-fg: var(--scb-idle-fg);
+  --scb-focus-ring: var(--color-main);
+
+  /* 가운데 단추 색 — 스피커 버튼(--scb-*)과 같은 결로 연다. 기본값은 지금 그림
+     그대로라, 단추로 쓰지 않는 소비자에게는 변화가 없다. */
+  --scc-bg: var(--color-white);
+  --scc-border: var(--color-whiteLine);
+  --scc-fg: var(--color-lightGray);
+  --scc-hover-bg: var(--color-deepWhite);
+  --scc-hover-border: var(--color-lightGray);
+  --scc-hover-fg: var(--color-darkGray);
+  /* 못 누를 때. 눌러야 하는 자리인지 한눈에 갈려야 한다. */
+  --scc-disabled-bg: var(--color-deepWhite);
+  --scc-disabled-border: var(--color-whiteLine);
+  --scc-disabled-fg: var(--color-whiteLine);
 }
 
 .sound-compass__status {
@@ -63,8 +81,6 @@
   border-width: 1px;
   border-style: solid;
   transition: background-color .15s, border-color .15s, color .15s;
-
-  --scb-focus-ring: var(--color-main);
 }
 
 .sound-compass__speaker-btn--idle {
@@ -114,13 +130,13 @@
   left: 50%;
   transform: translate(-50%, -50%);
   pointer-events: none;
-  background: var(--color-white);
-  border: 1px solid var(--color-whiteLine);
+  background: var(--scc-bg);
+  border: 1px solid var(--scc-border);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
-  color: var(--color-lightGray);
+  color: var(--scc-fg);
 }
 
 /* ── Button 모드 전용 스타일 (speakerType='button') ── */
@@ -134,6 +150,48 @@
   100% { transform: scale(var(--sc-pulse-scale, 2.8)); opacity: 0; }
 }
 
+/* 가운데를 단추로 쓸 때. `onCenterClick` 을 준 자리에만 붙는다 — 안 주면 위의
+   그림 그대로이고 pointer-events 도 none 이라 변화가 없다.
+
+   `<button>` 의 기본 모양만 걷어낸다. 위 규칙이 이미 배치·색을 다 정하므로
+   `all: unset` 까지 갈 까닭이 없다 — 그러면 position 까지 지워져 자리가 무너진다. */
+.sound-compass__center--button {
+  appearance: none;
+  font: inherit;
+  padding: 0;
+  cursor: pointer;
+  pointer-events: auto;
+  transition: background-color .15s, border-color .15s, color .15s;
+}
+.sound-compass__center--button:hover {
+  background: var(--scc-hover-bg);
+  border-color: var(--scc-hover-border);
+  color: var(--scc-hover-fg);
+}
+/* 스피커 버튼과 같은 링을 쓴다 — 화면 안에서 초점이 한 가지 모양으로 읽히게. */
+.sound-compass__center--button:focus-visible {
+  outline: 2px solid var(--scb-focus-ring);
+  outline-offset: 2px;
+}
+/* 못 누를 때는 눌러도 안 되는 것이 눈으로 보여야 한다. */
+.sound-compass__center--disabled {
+  pointer-events: none;
+  cursor: default;
+  background: var(--scc-disabled-bg);
+  border-color: var(--scc-disabled-border);
+  color: var(--scc-disabled-fg);
+}
+
+/* 가운데 울림은 그 자리에 겹쳐 놓는다 — 가운데 원과 같은 크기·같은 자리에서
+   번져야 한 몸으로 보인다. 뒤에 깔리도록 단추보다 낮게 둔다.
+
+   **가운데 맞춤을 transform 으로 하지 않는다.** 이 원소는 keyframe 이 transform 에
+   scale 을 거는 자리라, translate 를 함께 걸면 애니메이션이 도는 동안 그것이 통째로
+   날아간다 — 배지에서 이미 겪은 그 충돌이다. 좌표를 미리 빼서 얹는다. */
+.sound-compass__pulse--center {
+  z-index: 0;
+}
+
 .sound-compass__pulse {
   position: absolute;
   top: 0; left: 0;

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

@@ -74,7 +74,42 @@ 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';
+    /**
+     * 가운데(피험자 자리)를 눌렀을 때. **주면 그 자리가 진짜 `<button>` 이 된다** —
+     * 초점이 닿고 Enter·Space 로 눌리고 포커스 링이 뜬다.
+     *
+     * 주지 않으면 예전 그대로 그림일 뿐이다(`<div>` · `pointer-events: none`).
+     * 소리를 듣는 단추를 그 자리에 두면 자리로도 말이 된다 — 소리는 그 사람을
+     * 향해 나온다.
+     */
+    onCenterClick?: () => void;
+    /** 가운데 단추의 이름표. `onCenterClick` 을 줄 때만 쓰인다. */
+    centerLabel?: string;
+    /** 가운데 단추를 못 누르게. 재생 중처럼 지금은 누를 때가 아닌 자리에 쓴다. */
+    centerDisabled?: boolean;
+    /**
+     * 가운데 단추에 눈을 끄는 울림을 건다. 스피커 재생 울림과 같은 그림·같은 색이라
+     * 화면이 한 벌로 읽힌다. 못 누를 때(`centerDisabled`)는 걸리지 않는다 —
+     * 누를 수 없는 자리로 눈을 끌면 안 된다.
+     */
+    centerAttention?: boolean;
     /**
      * `speakers[].shortcut` 배지가 버튼의 어느 모서리에 붙을지. 기본 우상단.
      *
@@ -102,4 +137,4 @@ export interface SoundCompassProps {
     scaleShortcut?: boolean;
 }
 /** @public */
-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;
+export default function SoundCompass({ speakers, size, viewT, activeSpeakerId, playedIds, selectedId, answerId, showFeedback, pulseSelected, pulseSelectedDuration, pulseScale, clickable, onSelectSpeaker, buttonSize, showIcon, onCenterClick, centerLabel, centerDisabled, centerAttention, 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, pulseScale, 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, onCenterClick, centerLabel, centerDisabled = false, centerAttention = false, shortcutAnchor = 'top-right', shortcutScale, scaleShortcut = false, }) {
     const t = Math.max(0, Math.min(1, viewT));
     const CENTER = size / 2;
     // ── 탑뷰 좌표 ──────────────────────────────────────────────────────────
@@ -156,7 +156,8 @@ export default function SoundCompass({ speakers, size = 300, viewT = 0, activeSp
     return (_jsx("div", { className: "sound-compass", children: _jsxs("div", { className: "sound-compass__compass-wrap", style: { width: size, height: size }, children: [_jsxs("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, className: "sound-compass__svg", children: [t === 0 && speakers.map(sp => {
                             const { x, y } = getSpeakerXY(sp);
                             return (_jsx("line", { x1: personPos.x, y1: personPos.y, x2: x, y2: y, stroke: "#dde3ec", strokeWidth: "1" }, sp.id));
-                        }), 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) => {
+                        }), rowArcPaths.map(a => (_jsx("path", { d: a.d, fill: "none", stroke: "#dde3ec", strokeWidth: "1" }, a.key)))] }), centerAttention && !centerDisabled && (_jsx("div", { className: "sound-compass__pulse sound-compass__pulse--active sound-compass__pulse--center", style: { width: centerSize, height: centerSize,
+                        left: personPos.x - centerSize / 2, top: personPos.y - centerSize / 2 } })), onCenterClick ? (_jsx("button", { type: "button", className: `sound-compass__center sound-compass__center--button${centerDisabled ? ' sound-compass__center--disabled' : ''}`, style: { width: centerSize, height: centerSize, left: personPos.x, top: personPos.y }, "aria-label": centerLabel, "aria-disabled": centerDisabled || undefined, tabIndex: centerDisabled ? -1 : 0, onClick: centerDisabled ? undefined : onCenterClick, children: _jsx(User, { size: centerIconSize, color: "currentColor", strokeWidth: 1.5 }) })) : (_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 = pulseKind(sp);
@@ -192,6 +193,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 +209,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.22.0",
   "private": false,
   "main": "dist/ihabdevteam-core.cjs.js",
   "module": "dist/ihabdevteam-core.esm.js",