매매 시그널 알림 화면 수정

frontend/src/hooks/useSignalVisualRailHeight.ts

@@ -0,0 +1,35 @@
+import { useLayoutEffect, useRef } from 'react';
+
+/**
+ * 신호등+하단 %/문구(.vtd-sig-light-rail) 높이를 측정해
+ * 이퀄라이저 pane 눈금·막대 높이(--vtd-sig-rail-height)와 동기화
+ */
+export function useSignalVisualRailHeight(deps: unknown[] = []) {
+  const visualRef = useRef<HTMLDivElement>(null);
+  const lightRef = useRef<HTMLDivElement>(null);
+
+  useLayoutEffect(() => {
+    const visual = visualRef.current;
+    const light = lightRef.current;
+    if (!visual || !light) return;
+
+    const sync = () => {
+      const h = Math.ceil(light.getBoundingClientRect().height);
+      if (h > 0) {
+        visual.style.setProperty('--vtd-sig-rail-height', `${h}px`);
+      }
+    };
+
+    sync();
+    const ro = new ResizeObserver(sync);
+    ro.observe(light);
+    window.addEventListener('resize', sync);
+    return () => {
+      ro.disconnect();
+      window.removeEventListener('resize', sync);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, deps);
+
+  return { visualRef, lightRef };
+}