전략편집기 수정

frontend/src/components/virtual/VirtualSignalEqualizer.tsx

@@ -1,4 +1,5 @@
 import React, { useMemo } from 'react';
+import { coerceFiniteNumber } from '../../utils/safeFormat';
 
 const SEGMENTS = 25;
 
@@ -7,9 +8,10 @@ interface Props {
 }
 
 const VirtualSignalEqualizer: React.FC<Props> = ({ matchRate }) => {
+  const rate = coerceFiniteNumber(matchRate) ?? 0;
   const litCount = useMemo(
-    () => Math.round((Math.min(100, Math.max(0, matchRate)) / 100) * SEGMENTS),
-    [matchRate],
+    () => Math.round((Math.min(100, Math.max(0, rate)) / 100) * SEGMENTS),
+    [rate],
   );
 
   const segments = useMemo(() => {
@@ -20,7 +22,7 @@ const VirtualSignalEqualizer: React.FC<Props> = ({ matchRate }) => {
         items.push({ lit: false, tone: 'blue' });
         continue;
       }
-      if (matchRate >= 100 && i === SEGMENTS - 1) {
+      if (rate >= 100 && i === SEGMENTS - 1) {
         items.push({ lit: true, tone: 'peak' });
       } else if (i >= Math.floor(SEGMENTS * 0.55)) {
         items.push({ lit: true, tone: 'gold' });
@@ -29,7 +31,7 @@ const VirtualSignalEqualizer: React.FC<Props> = ({ matchRate }) => {
       }
     }
     return items;
-  }, [litCount, matchRate]);
+  }, [litCount, rate]);
 
   const ticks = [100, 90, 80, 70, 60, 50, 40, 30, 20, 10, 0];
 
@@ -53,7 +55,7 @@ const VirtualSignalEqualizer: React.FC<Props> = ({ matchRate }) => {
             />
           ))}
         </div>
-        {matchRate >= 100 && (
+        {rate >= 100 && (
           <div className="vtd-sig-eq-badge">100% MATCH</div>
         )}
       </div>