매수매도 시그널 표시 수정

frontend/src/utils/ChartManager.ts

@@ -28,6 +28,11 @@ import type { OHLCVBar, ChartType, Theme, IndicatorConfig, Timeframe } from '../
 import { formatChartAxisPrice, formatIndicatorAxisPrice } from './dataGenerator';
 import { formatUpbitKrwPrice } from './safeFormat';
 import { TRADE_BUY_COLOR, TRADE_SELL_COLOR } from './tradeSignalColors';
+import {
+  toTradeSignalLabelItem,
+  type TradeSignalLabelItem,
+  type TradeSignalMarkerWithPrice,
+} from './tradeSignalLabels';
 import {
   DEFAULT_CHART_TIME_FORMAT,
   formatLwcTimeWithPattern,
@@ -266,9 +271,10 @@ export class ChartManager {
   private mainMarkersPlugin: ISeriesMarkersPluginApi<Time> | null = null;
   private patternMarkers: Array<{ id: string; markers: MarkerData[] }> = [];
   /** 백테스팅 매수/매도 시그널 마커 */
-  private backtestMarkers: MarkerData[] = [];
+  private backtestMarkers: TradeSignalMarkerWithPrice[] = [];
   /** 실시간 전략 체크 마커 */
-  private liveStrategyMarkers: MarkerData[] = [];
+  private liveStrategyMarkers: TradeSignalMarkerWithPrice[] = [];
+  private _tradeSignalLabelListeners = new Set<() => void>();
   private compareSeriesMap = new Map<string, ISeriesApi<SeriesType>>();
   /** 캔들 pane 오버레이 그룹 표시 (config.hidden 과 별도 — in-place 토글용) */
   private _chartOverlayVisibility: ChartOverlayVisibility = {
@@ -1762,14 +1768,14 @@ export class ChartManager {
       position: m.position,
       shape:    m.shape,
       color:    m.color,
-      text:     m.text,
+      text:     '',
     }));
     const liveAll = this.liveStrategyMarkers.map(m => ({
       time:     m.time as Time,
       position: m.position,
       shape:    m.shape,
       color:    m.color,
-      text:     m.text,
+      text:     '',
     }));
     const all = [...patternAll, ...backtestAll, ...liveAll];
     if (this.mainMarkersPlugin) {
@@ -1815,17 +1821,20 @@ export class ChartManager {
           shape:    buy ? ('arrowUp' as const)  : ('arrowDown' as const),
           color:    s.type === 'PARTIAL_SELL' ? '#FF9800' : (buy ? TRADE_BUY_COLOR : TRADE_SELL_COLOR),
           text,
+          price:    s.price,
         };
       });
     // 시리즈 교체·detach 이후 stale 플러그인 방지 — 백테스트 마커는 항상 재생성
     this._disposeMainMarkersPlugin();
     this._reapplyAllPatternMarkers();
+    this._notifyTradeSignalLabels();
   }
 
   /** 백테스팅 마커 제거 */
   clearBacktestMarkers(): void {
     this.backtestMarkers = [];
     this._reapplyAllPatternMarkers();
+    this._notifyTradeSignalLabels();
   }
 
   /**
@@ -1848,15 +1857,35 @@ export class ChartManager {
         shape:    buy ? ('arrowUp' as const)  : ('arrowDown' as const),
         color:    buy ? TRADE_BUY_COLOR : TRADE_SELL_COLOR,
         text,
+        price:    m.price,
       };
     });
     this._reapplyAllPatternMarkers();
+    this._notifyTradeSignalLabels();
   }
 
   /** 실시간 전략 마커 전체 제거 */
   clearLiveStrategyMarkers(): void {
     this.liveStrategyMarkers = [];
     this._reapplyAllPatternMarkers();
+    this._notifyTradeSignalLabels();
+  }
+
+  /** 매수·매도 시그널 라벨 (캔버스 오버레이용) */
+  getTradeSignalLabels(): TradeSignalLabelItem[] {
+    return [
+      ...this.backtestMarkers.map(toTradeSignalLabelItem),
+      ...this.liveStrategyMarkers.map(toTradeSignalLabelItem),
+    ];
+  }
+
+  subscribeTradeSignalLabels(cb: () => void): () => void {
+    this._tradeSignalLabelListeners.add(cb);
+    return () => { this._tradeSignalLabelListeners.delete(cb); };
+  }
+
+  private _notifyTradeSignalLabels(): void {
+    for (const cb of this._tradeSignalLabelListeners) cb();
   }
 
   /**