From 8a2d8054ad9215c57180bc0f528a08671acfb0cd Mon Sep 17 00:00:00 2001
From: Macbook <macbook@Macbookui-MacBookPro.local>
Date: Tue, 9 Jun 2026 00:55:37 +0900
Subject: [PATCH] =?UTF-8?q?=EC=95=8C=EB=A6=BC=EB=AA=A9=EB=A1=9D=20?=
 =?UTF-8?q?=EC=BA=94=EB=93=A4=EC=B0=A8=ED=8A=B8=20=EB=A7=A4=EB=A7=A4=20?=
 =?UTF-8?q?=EC=8B=9C=EA=B7=B8=EB=84=90=20=ED=91=9C=EC=8B=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../FullscreenChartModal.tsx                  |  5 ++
 .../TradeNotificationListRow.tsx              | 11 ++++
 .../TradeSignalChartCard.tsx                  |  4 ++
 .../TradeSignalMiniChart.tsx                  | 48 +++++++++++---
 frontend/src/utils/tradeSignalChartMarkers.ts | 65 +++++++++++++++++++
 5 files changed, 125 insertions(+), 8 deletions(-)
 create mode 100644 frontend/src/utils/tradeSignalChartMarkers.ts

diff --git a/frontend/src/components/tradeNotification/FullscreenChartModal.tsx b/frontend/src/components/tradeNotification/FullscreenChartModal.tsx
index 7fb0768..cf8365e 100644
--- a/frontend/src/components/tradeNotification/FullscreenChartModal.tsx
+++ b/frontend/src/components/tradeNotification/FullscreenChartModal.tsx
@@ -120,6 +120,11 @@ const FullscreenChartModal: React.FC<Props> = ({ item, theme, onClose }) => {
             indicators={allIndicatorConfigs}
             enabled
             fillHeight
+            signalMarker={{
+              candleTime: item.candleTime,
+              signalType: item.signalType,
+              price: item.price,
+            }}
           />
         </div>
       </div>
diff --git a/frontend/src/components/tradeNotification/TradeNotificationListRow.tsx b/frontend/src/components/tradeNotification/TradeNotificationListRow.tsx
index 0d95ce6..d7cd8de 100644
--- a/frontend/src/components/tradeNotification/TradeNotificationListRow.tsx
+++ b/frontend/src/components/tradeNotification/TradeNotificationListRow.tsx
@@ -232,6 +232,15 @@ const TradeNotificationListRow: React.FC<Props> = ({
   const indicatorScrollNeeded = indicatorChartCount >= 2;
   const indicatorPlaceholder = item.strategyId != null && indicatorChartCount === 0 && chartActive;
 
+  const signalMarker = useMemo(
+    () => ({
+      candleTime: item.candleTime,
+      signalType: item.signalType,
+      price: item.price,
+    }),
+    [item.candleTime, item.signalType, item.price],
+  );
+
   const handleRowClick = useCallback((e: React.MouseEvent) => {
     const t = e.target as HTMLElement;
     if (t.closest(
@@ -432,6 +441,7 @@ const TradeNotificationListRow: React.FC<Props> = ({
               onExpand={() => setExpandedChartKey('candle')}
               onRestore={() => setExpandedChartKey(null)}
               onRealtimeActivity={chartActive ? bumpChartActivity : undefined}
+              signalMarker={signalMarker}
             />
           </div>
         ) : (
@@ -476,6 +486,7 @@ const TradeNotificationListRow: React.FC<Props> = ({
                 onExpand={() => setExpandedChartKey('candle')}
                 onRestore={() => setExpandedChartKey(null)}
                 onRealtimeActivity={chartActive ? bumpChartActivity : undefined}
+                signalMarker={signalMarker}
               />
               {indicatorPlaceholder && (
                 <div className="tnl-combined-chart-placeholder">전략 지표 로딩 중…</div>
diff --git a/frontend/src/components/tradeNotification/TradeSignalChartCard.tsx b/frontend/src/components/tradeNotification/TradeSignalChartCard.tsx
index 27b2987..c4cbbd0 100644
--- a/frontend/src/components/tradeNotification/TradeSignalChartCard.tsx
+++ b/frontend/src/components/tradeNotification/TradeSignalChartCard.tsx
@@ -5,6 +5,7 @@ import React from 'react';
 import type { IndicatorConfig } from '../../types';
 import type { Theme, Timeframe } from '../../types';
 import TradeSignalMiniChart from './TradeSignalMiniChart';
+import type { TradeSignalChartMarker } from '../../utils/tradeSignalChartMarkers';
 
 const IcExpand = () => (
   <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
@@ -36,6 +37,7 @@ export interface TradeSignalChartCardProps {
   onExpand: () => void;
   onRestore: () => void;
   onRealtimeActivity?: () => void;
+  signalMarker?: TradeSignalChartMarker;
 }
 
 const TradeSignalChartCard: React.FC<TradeSignalChartCardProps> = ({
@@ -50,6 +52,7 @@ const TradeSignalChartCard: React.FC<TradeSignalChartCardProps> = ({
   onExpand,
   onRestore,
   onRealtimeActivity,
+  signalMarker,
 }) => (
   <section
     className={[
@@ -70,6 +73,7 @@ const TradeSignalChartCard: React.FC<TradeSignalChartCardProps> = ({
         enabled={enabled}
         fillHeight={expanded}
         onRealtimeActivity={onRealtimeActivity}
+        signalMarker={signalMarker}
       />
       {expanded ? (
         <button
diff --git a/frontend/src/components/tradeNotification/TradeSignalMiniChart.tsx b/frontend/src/components/tradeNotification/TradeSignalMiniChart.tsx
index 11db93d..bbd4eab 100644
--- a/frontend/src/components/tradeNotification/TradeSignalMiniChart.tsx
+++ b/frontend/src/components/tradeNotification/TradeSignalMiniChart.tsx
@@ -19,6 +19,10 @@ import { DEFAULT_DISPLAY_TIMEZONE } from '../../utils/timezone';
 import { useIndicatorSettings } from '../../hooks/useIndicatorSettings';
 import { useSessionCandleOverlayControls } from '../../hooks/useSessionCandleOverlayControls';
 import { ensurePaperChartOverlays } from '../../utils/strategyToChartIndicators';
+import {
+  applyNotificationSignalMarkers,
+  type TradeSignalChartMarker,
+} from '../../utils/tradeSignalChartMarkers';
 
 interface Props {
   market: string;
@@ -30,6 +34,8 @@ interface Props {
   fillHeight?: boolean;
   /** STOMP/WS 실시간 봉 수신 시 (목록 행 형광 플래시 등) */
   onRealtimeActivity?: () => void;
+  /** 알림 발생 시점 매매 시그널 (캔들 마커) */
+  signalMarker?: TradeSignalChartMarker;
 }
 
 const noop = () => {};
@@ -42,6 +48,7 @@ const TradeSignalMiniChart: React.FC<Props> = ({
   enabled = true,
   fillHeight = false,
   onRealtimeActivity,
+  signalMarker,
 }) => {
   const { getParams, getVisualConfig } = useIndicatorSettings();
   const managerRef = useRef<ChartManager | null>(null);
@@ -53,6 +60,8 @@ const TradeSignalMiniChart: React.FC<Props> = ({
   const chartLiveReadyRef = useRef(false);
   const marketRef = useRef(market);
   marketRef.current = market;
+  const signalMarkerRef = useRef(signalMarker);
+  signalMarkerRef.current = signalMarker;
 
   const baseIndicators = useMemo(
     () => ensurePaperChartOverlays(indicators, getParams, getVisualConfig),
@@ -66,6 +75,15 @@ const TradeSignalMiniChart: React.FC<Props> = ({
     syncToManager,
   } = useSessionCandleOverlayControls(managerRef, baseIndicators);
 
+  const applySignalMarkers = useCallback((attempt = 0) => {
+    const mgr = managerRef.current;
+    if (!mgr?.hasMainSeries()) {
+      if (attempt < 80) requestAnimationFrame(() => applySignalMarkers(attempt + 1));
+      return;
+    }
+    applyNotificationSignalMarkers(mgr, signalMarkerRef.current, false);
+  }, []);
+
   const syncChartLayout = useCallback(() => {
     const wrap = canvasWrapRef.current;
     const mgr = managerRef.current;
@@ -81,11 +99,19 @@ const TradeSignalMiniChart: React.FC<Props> = ({
     chartLiveReadyRef.current = true;
     const pending = pendingBarRef.current;
     const mgr = managerRef.current;
-    if (!pending || !mgr || barsMarketRef.current !== marketRef.current) return;
-    pendingBarRef.current = null;
-    mgr.updateBar(pending);
+    if (pending && mgr && barsMarketRef.current === marketRef.current) {
+      pendingBarRef.current = null;
+      mgr.updateBar(pending);
+    }
     syncChartLayout();
-  }, [syncChartLayout]);
+    applySignalMarkers();
+  }, [syncChartLayout, applySignalMarkers]);
+
+  const handleManagerReady = useCallback((mgr: ChartManager) => {
+    managerRef.current = mgr;
+    syncToManager(mgr);
+    applySignalMarkers();
+  }, [syncToManager, applySignalMarkers]);
 
   const applyRealtimeBar = useCallback((bar: OHLCVBar, append: boolean) => {
     if (barsMarketRef.current !== marketRef.current) return;
@@ -134,8 +160,17 @@ const TradeSignalMiniChart: React.FC<Props> = ({
     chartLiveReadyRef.current = false;
     pendingBarRef.current = null;
     chartReloadTriggeredRef.current = false;
+    managerRef.current?.clearBacktestMarkers();
   }, [market, timeframe, enabled]);
 
+  useEffect(() => {
+    if (!enabled) {
+      managerRef.current?.clearBacktestMarkers();
+      return;
+    }
+    applySignalMarkers();
+  }, [enabled, signalMarker, applySignalMarkers, barsReady]);
+
   useEffect(() => {
     if (!enabled) return;
     const wrap = canvasWrapRef.current;
@@ -223,10 +258,7 @@ const TradeSignalMiniChart: React.FC<Props> = ({
         drawingsLocked
         drawingsVisible={false}
         onCrosshair={noop as (d: LegendData | null) => void}
-        onManagerReady={mgr => {
-          managerRef.current = mgr;
-          syncToManager(mgr);
-        }}
+        onManagerReady={handleManagerReady}
         onAddDrawing={noop as (d: Drawing) => void}
         onCandlesReady={handleCandlesReady}
         magnifierEnabled={false}
diff --git a/frontend/src/utils/tradeSignalChartMarkers.ts b/frontend/src/utils/tradeSignalChartMarkers.ts
new file mode 100644
index 0000000..899b01c
--- /dev/null
+++ b/frontend/src/utils/tradeSignalChartMarkers.ts
@@ -0,0 +1,65 @@
+/**
+ * 알림 목록 미니 차트 — 매매 시그널 마커
+ */
+import type { ChartManager } from './ChartManager';
+
+export interface TradeSignalChartMarker {
+  candleTime: number;
+  signalType: 'BUY' | 'SELL';
+  price: number;
+}
+
+/** 알림 candleTime → 차트 bar time (정확 일치 또는 최근접 bar) */
+export function resolveSignalMarkerBarTime(
+  mgr: ChartManager,
+  candleTimeSec: number,
+): number | null {
+  if (!Number.isFinite(candleTimeSec) || candleTimeSec <= 0) return null;
+  if (mgr.getBarAtTime(candleTimeSec)) return candleTimeSec;
+
+  const bars = mgr.getRawBars();
+  if (bars.length === 0) return null;
+
+  let bestTime = bars[0].time;
+  let bestDist = Math.abs(bars[0].time - candleTimeSec);
+  for (let i = 1; i < bars.length; i++) {
+    const t = bars[i].time;
+    const dist = Math.abs(t - candleTimeSec);
+    if (dist < bestDist) {
+      bestDist = dist;
+      bestTime = t;
+    }
+  }
+
+  const maxSnapSec = Math.max(86400, estimateBarIntervalSec(bars) * 2);
+  return bestDist <= maxSnapSec ? bestTime : null;
+}
+
+function estimateBarIntervalSec(bars: { time: number }[]): number {
+  if (bars.length < 2) return 60;
+  const last = bars[bars.length - 1].time - bars[bars.length - 2].time;
+  return last > 0 ? last : 60;
+}
+
+export function buildNotificationSignalMarkers(
+  mgr: ChartManager,
+  marker: TradeSignalChartMarker | undefined,
+): Array<{ time: number; type: string; price: number }> {
+  if (!marker || !Number.isFinite(marker.price) || marker.price <= 0) return [];
+  const time = resolveSignalMarkerBarTime(mgr, marker.candleTime);
+  if (time == null) return [];
+  return [{ time, type: marker.signalType, price: marker.price }];
+}
+
+export function applyNotificationSignalMarkers(
+  mgr: ChartManager,
+  marker: TradeSignalChartMarker | undefined,
+  showPrice = false,
+): void {
+  const signals = buildNotificationSignalMarkers(mgr, marker);
+  if (signals.length === 0) {
+    mgr.clearBacktestMarkers();
+    return;
+  }
+  mgr.setBacktestMarkers(signals, showPrice);
+}