종목변경 시 캔들차트 사라지는 현상 수정

frontend/src/App.tsx

@@ -654,6 +654,7 @@ function App() {
   /** applyBacktestMarkersWhenReady rAF 재시도 시 최신 차트 종목·타임프레임 검증용 */
   const chartContextRef = useRef({ symbol, timeframe });
   chartContextRef.current = { symbol, timeframe };
+  const barsMarketRef = useRef<string | null>(null);
 
   const syncBacktestMarkersRef = useRef<() => void>(() => {});
 
@@ -730,8 +731,9 @@ function App() {
   const liveStompSubscriptions = useMemo(() => {
     if (!appDefaults.liveStrategyCheck || !appDefaults.liveStrategyId) return [];
     if (marketSubscriptions.length > 0) return marketSubscriptions;
-    return monitoredMarkets.map(m => ({ market: m, candleType: '1m' as const }));
-  }, [appDefaults.liveStrategyCheck, appDefaults.liveStrategyId, marketSubscriptions, monitoredMarkets]);
+    const ct = liveCandleType || '1m';
+    return monitoredMarkets.map(m => ({ market: m, candleType: ct }));
+  }, [appDefaults.liveStrategyCheck, appDefaults.liveStrategyId, marketSubscriptions, monitoredMarkets, liveCandleType]);
 
   useEffect(() => {
     if (!appDefaults.liveStrategyCheck) {
@@ -942,6 +944,7 @@ function App() {
   // ── Upbit 실시간 데이터 ─────────────────────────────────────────────────
   // 틱 수신: 동일 캔들 업데이트 → React state 변경 없이 차트만 직접 갱신
   const handleTickUpdate = useCallback((bar: OHLCVBar) => {
+    if (barsMarketRef.current !== chartContextRef.current.symbol) return;
     if (!managerRef.current) {
       pendingRealtimeBarRef.current = bar;
       flashWsDot();
@@ -953,6 +956,7 @@ function App() {
 
   // 새 캔들: bars state를 변경하지 않고 차트에 바만 추가 + 인디케이터 last point 갱신
   const handleNewCandle = useCallback((newBar: OHLCVBar) => {
+    if (barsMarketRef.current !== chartContextRef.current.symbol) return;
     if (!managerRef.current) {
       pendingRealtimeBarRef.current = newBar;
       flashWsDot();
@@ -963,7 +967,7 @@ function App() {
   }, []);
 
   const chartRealtimeSource = appDefaults.chartRealtimeSource ?? 'BACKEND_STOMP';
-  const { bars: upbitBars, latestBar, wsStatus, isLoading, error } = useChartRealtimeData(
+  const { bars: upbitBars, barsMarket: upbitBarsMarket, latestBar, wsStatus, isLoading, error } = useChartRealtimeData(
     symbol,
     timeframe,
     useMemo(() => ({
@@ -976,6 +980,8 @@ function App() {
 
   // 실제로 차트에 넘길 bars (초기 200개, 실시간 수신 후에도 변경 없음)
   const bars = useUpbit ? upbitBars : simBars;
+  const barsMarket = useUpbit ? upbitBarsMarket : symbol;
+  barsMarketRef.current = barsMarket;
 
   // Upbit 초기 로딩 완료 시 stats 업데이트
   useEffect(() => {
@@ -1955,7 +1961,7 @@ function App() {
 
           <TradingChart
             key={chartMountKey}
-            bars={bars} market={symbol} timeframe={timeframe} displayTimezone={displayTimezone}
+            bars={bars} barsMarket={barsMarket} market={symbol} timeframe={timeframe} displayTimezone={displayTimezone}
             chartType={chartType} theme={theme} mode={mode}
             indicators={effectiveIndicators} drawingTool={drawingTool}
             drawings={drawings} logScale={logScale}