매매 시그널 알림 화면 수정

frontend/src/components/CandlePaneTimeAxis.tsx

@@ -0,0 +1,64 @@
+/**
+ * 캔들 pane 하단 시간축 — 거래량·보조지표가 아래에 있을 때 캔들 영역 바로 아래에도 시간 표시.
+ */
+import React, { useState, useEffect, useCallback } from 'react';
+import type { ChartManager } from '../utils/ChartManager';
+
+const AXIS_HEIGHT = 22;
+
+interface CandlePaneTimeAxisProps {
+  manager: ChartManager;
+  containerEl: HTMLElement;
+}
+
+const CandlePaneTimeAxis: React.FC<CandlePaneTimeAxisProps> = ({ manager, containerEl }) => {
+  const [state, setState] = useState<ReturnType<ChartManager['getCandlePaneTimeAxisOverlay']>>(null);
+
+  const sync = useCallback(() => {
+    if (!containerEl.isConnected) return;
+    setState(manager.getCandlePaneTimeAxisOverlay());
+  }, [manager, containerEl]);
+
+  useEffect(() => {
+    sync();
+    const ro = new ResizeObserver(sync);
+    ro.observe(containerEl);
+
+    const unsubLayout = manager.subscribePaneLayout(sync);
+    const unsubRange = manager.subscribeViewport(sync);
+
+    const timers = [0, 50, 150, 400].map(ms => window.setTimeout(sync, ms));
+    return () => {
+      ro.disconnect();
+      unsubLayout();
+      unsubRange();
+      timers.forEach(clearTimeout);
+    };
+  }, [manager, containerEl, sync]);
+
+  if (!state || state.labels.length === 0) return null;
+
+  return (
+    <div
+      className="candle-pane-time-axis"
+      style={{
+        top: state.topY,
+        height: state.height ?? AXIS_HEIGHT,
+        width: state.plotWidth,
+      }}
+      aria-hidden
+    >
+      {state.labels.map((label, idx) => (
+        <span
+          key={`${label.x}-${idx}`}
+          className="candle-pane-time-axis__label"
+          style={{ left: label.x }}
+        >
+          {label.text}
+        </span>
+      ))}
+    </div>
+  );
+};
+
+export default CandlePaneTimeAxis;