실시간 차트 캔들차트 높이 조절

frontend/src/components/backtest/BacktestAnalysisChart.tsx

@@ -35,7 +35,6 @@ import {
   resolveStrategyPrimaryTimeframe,
 } from '../../utils/strategyToChartIndicators';
 import type { ChartOverlayToggleKey } from '../../utils/chartOverlayVisibility';
-import StrategyOscillatorPanes from './StrategyOscillatorPanes';
 
 interface Props {
   symbol: string;
@@ -73,6 +72,8 @@ function newIndId() {
   return `btd_${_indSeq}_${Date.now()}`;
 }
 
+const ALL_TF_VISIBLE = { '1m': true, '3m': true, '5m': true, '10m': true, '15m': true, '30m': true, '1h': true, '4h': true, '1D': true, '1W': true, '1M': true };
+
 function defaultOverlayIndicators(
   getParams: (t: string, d?: Record<string, number | string | boolean>) => Record<string, number | string | boolean>,
 ): IndicatorConfig[] {
@@ -89,11 +90,32 @@ function defaultOverlayIndicators(
     params,
     plots: def.plots,
     hlines: def.hlines ?? [],
-    timeframeVisibility: { '1m': true, '3m': true, '5m': true, '10m': true, '15m': true, '30m': true, '1h': true, '4h': true, '1D': true, '1W': true, '1M': true },
+    timeframeVisibility: ALL_TF_VISIBLE,
   }));
   return [cfg];
 }
 
+/** 전략 미선택 시 기본 오실레이터(RSI, MACD)를 TradingChart sub-pane 으로 추가 */
+function defaultOscillatorIndicators(
+  getParams: (t: string, d?: Record<string, number | string | boolean>) => Record<string, number | string | boolean>,
+): IndicatorConfig[] {
+  const result: IndicatorConfig[] = [];
+  for (const type of ['RSI', 'MACD']) {
+    const def = getIndicatorDef(type);
+    if (!def) continue;
+    const params: Record<string, number | string | boolean> = { ...def.defaultParams, ...getParams(type, def.defaultParams) };
+    result.push(enrichIndicatorConfig({
+      id: newIndId(),
+      type,
+      params,
+      plots: def.plots,
+      hlines: def.hlines ?? [],
+      timeframeVisibility: ALL_TF_VISIBLE,
+    }));
+  }
+  return result;
+}
+
 const isOverlayType = (type: string) => getIndicatorDef(type)?.overlay === true;
 
 /**
@@ -156,9 +178,11 @@ const BacktestAnalysisChart: React.FC<Props> = ({
   }, [strategyId]);
 
   /**
-   * overlayVisibility 가 없는 경우(BacktestHistoryPage 컨텍스트)에는
-   * 보조지표(오실레이터)를 TradingChart sub-pane 이 아닌 아래쪽
-   * StrategyOscillatorPanes 섹션에서 표시한다.
+   * 백테스트 화면(overlayVisibility 없음)에서 보조지표를 TradingChart sub-pane 으로 통합.
+   * - 기존: 오실레이터를 SVG 기반 StrategyOscillatorPanes 에서 별도 렌더링
+   *   → 캔들 차트와 시간 축(x축) 불일치, 우측 가격 라벨 없음
+   * - 변경: 모든 지표를 TradingChart sub-pane 으로 통합
+   *   → 시간 축 완전 동기화, 우측 가격 라벨 표시
    */
   const showOscillatorPanel = !overlayVisibility;
 
@@ -166,13 +190,15 @@ const BacktestAnalysisChart: React.FC<Props> = ({
     let inds: IndicatorConfig[];
     if (strategy) {
       inds = buildVirtualTradingChartIndicators(strategy, getParams, getVisualConfig);
-      // 오실레이터 패널을 별도 섹션으로 표시할 때는 TradingChart 에서 제거
-      if (showOscillatorPanel) {
-        inds = inds.filter(i => isOverlayType(i.type));
-      }
+      // [수정] 오실레이터 필터 제거 — TradingChart sub-pane 에서 직접 렌더링
+      // (기존: showOscillatorPanel 시 overlay 지표만 남기고 나머지는 SVG 패널로 분리)
       inds = inds.filter(i => i.timeframeVisibility?.[chartTimeframe] !== false);
     } else {
       inds = defaultOverlayIndicators(getParams);
+      // 전략 미선택 시 기본 오실레이터(RSI, MACD)도 TradingChart sub-pane 으로 추가
+      if (showOscillatorPanel) {
+        inds = [...inds, ...defaultOscillatorIndicators(getParams)];
+      }
     }
     if (overlayVisibility) {
       inds = ensurePaperChartOverlays(inds, getParams, getVisualConfig);
@@ -467,9 +493,7 @@ const BacktestAnalysisChart: React.FC<Props> = ({
             <div className="btd-analysis-error">표시할 캔들 데이터가 없습니다.</div>
           )}
         </div>
-        {showOscillatorPanel && !loading && bars.length > 0 && (
-          <StrategyOscillatorPanes bars={bars} strategy={strategy} />
-        )}
+        {/* 오실레이터 pane 은 TradingChart 내부 sub-pane 으로 통합 (시간 축 동기화) */}
       </div>
     </div>
   );