매매 시그널 알림 화면 수정

frontend/src/components/trendSearch/TrendSearchCardSignalPanel.tsx

@@ -1,4 +1,5 @@
 import React, { useMemo } from 'react';
+import { useSignalVisualRailHeight } from '../../hooks/useSignalVisualRailHeight';
 import type { TrendSearchConditionDto } from '../../utils/trendSearchApi';
 import { computeMatchRate, getTrafficLightState } from '../../utils/virtualSignalMetrics';
 import { buildTrendSearchMetrics } from '../../utils/trendSearchMetrics';
@@ -31,6 +32,11 @@ const TrendSearchCardSignalPanel: React.FC<Props> = ({
     () => getTrafficLightState(resolvedMatch, metrics),
     [resolvedMatch, metrics],
   );
+  const { visualRef, lightRef } = useSignalVisualRailHeight([
+    conditions.length,
+    resolvedMatch,
+    trafficState,
+  ]);
 
   if (conditions.length === 0) {
     return <p className="vtd-muted vtd-card-empty">조건 데이터 없음</p>;
@@ -46,12 +52,18 @@ const TrendSearchCardSignalPanel: React.FC<Props> = ({
     <div className="vtd-sig-panel-wrap vtd-sig-panel-wrap--detail">
       <div className="vtd-sig-panel vtd-sig-panel--detail-top">
         <div className="vtd-sig-panel-title">SIGNAL INTELLIGENCE &amp; MATCH RATES</div>
-        <div className="vtd-sig-visual">
-          <div className="vtd-sig-visual-eq">
+        <div className="vtd-sig-visual" ref={visualRef}>
+          <div className="vtd-sig-visual-pane vtd-sig-visual-eq">
             <VirtualSignalEqualizer matchRate={resolvedMatch} />
           </div>
-          <VirtualConditionList metrics={metrics} />
-          <VirtualSignalTrafficLight state={trafficState} matchRate={resolvedMatch} />
+          <div className="vtd-sig-visual-pane vtd-sig-visual-heat">
+            <VirtualConditionList metrics={metrics} />
+          </div>
+          <div className="vtd-sig-visual-pane vtd-sig-visual-light">
+            <div ref={lightRef} className="vtd-sig-light-rail">
+              <VirtualSignalTrafficLight state={trafficState} matchRate={resolvedMatch} />
+            </div>
+          </div>
         </div>
       </div>
       <div className="vtd-sig-detail-table" aria-label="지표별 상태 목록">