전략평가 화면 수정

frontend/src/components/strategyEvaluation/StrategyEvaluationSignalPanel.tsx

@@ -2,12 +2,9 @@ import React, { useMemo } from 'react';
 import type { VirtualIndicatorSnapshot } from '../../hooks/useVirtualIndicatorSnapshots';
 import {
   buildConditionMetrics,
-  computeMatchRate,
-  getTrafficLightState,
   type ConditionMetric,
 } from '../../utils/virtualSignalMetrics';
-import VirtualConditionList from '../virtual/VirtualConditionList';
-import VirtualSignalTrafficLight from '../virtual/VirtualSignalTrafficLight';
+import VirtualSignalMatchVisual from '../virtual/VirtualSignalMatchVisual';
 import type { BarSignalHighlight } from '../../utils/strategyEvaluationBarSignals';
 
 interface Props {
@@ -28,8 +25,6 @@ interface SideCardProps {
 }
 
 const SideCard: React.FC<SideCardProps> = ({ side, metrics, overallMet, signalActive = false }) => {
-  const matchRate = useMemo(() => computeMatchRate(metrics), [metrics]);
-  const trafficState = useMemo(() => getTrafficLightState(matchRate, metrics), [matchRate, metrics]);
   const title = side === 'buy' ? '매수 조건' : '매도 조건';
   const overallLabel =
     overallMet === true ? '전체 충족' : overallMet === false ? '전체 미충족' : null;
@@ -41,7 +36,7 @@ const SideCard: React.FC<SideCardProps> = ({ side, metrics, overallMet, signalAc
         `seval-side-card--${side}`,
         signalActive ? 'seval-side-card--signal-active' : '',
       ].filter(Boolean).join(' ')}
-      aria-label={`${title} 지표 목록${signalActive ? ' · 백테스트 시그널 발생 봉' : ''}`}
+      aria-label={`${title} 지표 일치율${signalActive ? ' · 백테스트 시그널 발생 봉' : ''}`}
     >
       <header className="seval-side-card-head">
         <div className="seval-side-card-head-main">
@@ -55,12 +50,13 @@ const SideCard: React.FC<SideCardProps> = ({ side, metrics, overallMet, signalAc
             </span>
           )}
         </div>
-        <div className="seval-side-card-head-signal">
-          <VirtualSignalTrafficLight state={trafficState} matchRate={matchRate} />
-        </div>
       </header>
       <div className="seval-side-card-body">
-        <VirtualConditionList metrics={metrics} />
+        <VirtualSignalMatchVisual
+          metrics={metrics}
+          title="SIGNAL INTELLIGENCE & MATCH RATES"
+          panelClassName="seval-side-sig-panel"
+        />
       </div>
     </section>
   );