diff --git a/frontend/src/App.css b/frontend/src/App.css index 7e0b0bf..459959d 100644 --- a/frontend/src/App.css +++ b/frontend/src/App.css @@ -1172,13 +1172,13 @@ html.desktop-client .tmb-logo-version { transform: translateY(-50%); height: 2px; border-radius: 1px; - background: transparent; + background: color-mix(in srgb, var(--border, rgba(100, 120, 180, 0.35)) 45%, transparent); transition: background 0.15s ease; } .chart-pane-resize-handle:hover::after, .chart-pane-resize-handle:active::after { - background: rgba(100, 120, 180, 0.55); + background: color-mix(in srgb, var(--accent, rgba(100, 120, 180, 0.55)) 55%, transparent); } /* 우측 세로 툴바 — 가격축 라벨 오른쪽 전용 영역 */ diff --git a/frontend/src/components/TradingChart.tsx b/frontend/src/components/TradingChart.tsx index 8042895..138933b 100644 --- a/frontend/src/components/TradingChart.tsx +++ b/frontend/src/components/TradingChart.tsx @@ -153,7 +153,7 @@ interface TradingChartProps { paneSeparatorOptions?: ChartPaneSeparatorOptions; /** true: pane 합산 높이로 chart-container 를 키우지 않고 래퍼 높이에 맞춤 (미니 차트·알림 목록) */ paneLayoutClamp?: boolean; - /** paneLayoutClamp=true 환경에서도 캔들/보조지표 비율 드래그 핸들을 표시 (백테스팅 차트 등) */ + /** false — 캔들·보조 pane 분리선 드래그 비활성 (기본 true, 보조 pane 있을 때 자동 표시) */ showPaneResizeHandle?: boolean; /** 캔들+거래량 vs 보조 pane 높이 비율 (aux 0 이면 미적용) */ paneAreaRatio?: { candle: number; aux: number } | null; @@ -231,7 +231,7 @@ const TradingChart: React.FC = ({ chartVisible = true, paneSeparatorOptions, paneLayoutClamp = false, - showPaneResizeHandle = false, + showPaneResizeHandle = true, paneAreaRatio = null, showPaneLegend = true, showChartRightToolbar, @@ -1806,6 +1806,7 @@ const TradingChart: React.FC = ({ && chartPaintReady && (effectiveShowChartRightToolbar || showOverlayControlsOnly) ); + const allowPaneResize = showPaneResizeHandle && !auxIndicatorOnly; return ( // wrapperRef: 스크롤 영역 (overflow-y: auto → App.css .tv-chart-wrap) @@ -1829,8 +1830,8 @@ const TradingChart: React.FC = ({ ref={containerRef} className="chart-container" /> - {/* 캔들 pane 하단 드래그 핸들 — 캔들/보조지표 높이 비율 조절 */} - {candlePaneBottomY != null && !candleOnlyMode && (!paneLayoutClamp || showPaneResizeHandle) && chartPaintReady && ( + {/* 캔들 pane 하단 드래그 핸들 — 캔들/보조지표(·거래량) 높이 비율 조절 */} + {allowPaneResize && candlePaneBottomY != null && !candleOnlyMode && chartPaintReady && (
= ({ volumeVisible={false} paneSeparatorOptions={appDefaults.chartPaneSeparator} paneLayoutClamp - showPaneResizeHandle={!indicatorOnly && auxPaneCount > 0} paneAreaRatio={paneAreaRatio} showPaneLegend crosshairInfoVisible diff --git a/frontend/src/components/backtest/BacktestAnalysisChart.tsx b/frontend/src/components/backtest/BacktestAnalysisChart.tsx index db9749a..87078d8 100644 --- a/frontend/src/components/backtest/BacktestAnalysisChart.tsx +++ b/frontend/src/components/backtest/BacktestAnalysisChart.tsx @@ -486,7 +486,6 @@ const BacktestAnalysisChart: React.FC = ({ volumeVisible={false} paneSeparatorOptions={appDefaults.chartPaneSeparator} paneLayoutClamp - showPaneResizeHandle={auxPaneCount > 0} paneAreaRatio={paneAreaRatio} showPaneLegend crosshairInfoVisible diff --git a/frontend/src/components/strategyEvaluation/StrategyEvaluationChart.tsx b/frontend/src/components/strategyEvaluation/StrategyEvaluationChart.tsx index 7bc0a26..24a1a42 100644 --- a/frontend/src/components/strategyEvaluation/StrategyEvaluationChart.tsx +++ b/frontend/src/components/strategyEvaluation/StrategyEvaluationChart.tsx @@ -899,7 +899,6 @@ const StrategyEvaluationChart: React.FC = ({ volumeVisible={false} paneSeparatorOptions={appDefaults.chartPaneSeparator} paneLayoutClamp - showPaneResizeHandle={auxPaneCount > 0} paneAreaRatio={paneAreaRatio} showPaneLegend crosshairInfoVisible={false}