diff --git a/frontend/src/components/StrategyEvaluationPage.tsx b/frontend/src/components/StrategyEvaluationPage.tsx index d86b5b0..e58dc74 100644 --- a/frontend/src/components/StrategyEvaluationPage.tsx +++ b/frontend/src/components/StrategyEvaluationPage.tsx @@ -82,6 +82,10 @@ const RIGHT_KEY = 'seval-right-width'; const RIGHT_OPEN_KEY = 'seval-right-open'; const LEFT_DEFAULT = 380; const RIGHT_DEFAULT = 440; +const STRATEGY_PANEL_HEIGHT_KEY = 'seval-strategy-panel-height'; +const STRATEGY_PANEL_MIN = 160; +const STRATEGY_PANEL_MAX = 520; +const STRATEGY_PANEL_DEFAULT = 280; type LeftTab = 'strategy' | 'market' | 'settings'; type RightTab = 'signal' | 'indicators' | 'chart' | 'ai'; @@ -223,6 +227,9 @@ function StrategyEvaluationPageInner({ theme = 'dark' }: Props) { const [leftOpen, setLeftOpen] = useState(() => readStoredBool(LEFT_OPEN_KEY, true)); const [rightWidth, setRightWidth] = useState(() => readMinWidth(RIGHT_KEY, RIGHT_DEFAULT)); const [rightOpen, setRightOpen] = useState(() => readStoredBool(RIGHT_OPEN_KEY, true)); + const [strategyPanelHeight, setStrategyPanelHeight] = useState(() => + readStoredSize(STRATEGY_PANEL_HEIGHT_KEY, STRATEGY_PANEL_DEFAULT), + ); /** 종목 탭·종목검색 전용 ticker — 차트 OHLCV·scan-signals 와 분리 (upbitWsBroker ticker 채널) */ const marketTabActive = leftOpen && leftTab === 'market'; @@ -235,10 +242,20 @@ function StrategyEvaluationPageInner({ theme = 'dark' }: Props) { const leftRef = useRef(leftWidth); const rightRef = useRef(rightWidth); + const strategyPanelHeightRef = useRef(strategyPanelHeight); leftRef.current = leftWidth; rightRef.current = rightWidth; + strategyPanelHeightRef.current = strategyPanelHeight; const onLeftSplit = usePanelResize('vertical', setLeftWidth, () => leftRef.current, 300, 520, v => storeSize(LEFT_KEY, v)); + const onStrategyPanelSplit = usePanelResize( + 'horizontal', + setStrategyPanelHeight, + () => strategyPanelHeightRef.current, + STRATEGY_PANEL_MIN, + STRATEGY_PANEL_MAX, + v => storeSize(STRATEGY_PANEL_HEIGHT_KEY, v), + ); const toggleLeftPanel = useCallback(() => { setLeftOpen(prev => { @@ -983,7 +1000,8 @@ function StrategyEvaluationPageInner({ theme = 'dark' }: Props) {
- + - +
+
+ +
diff --git a/frontend/src/styles/strategyEvaluation.css b/frontend/src/styles/strategyEvaluation.css index 788d623..8b710d4 100644 --- a/frontend/src/styles/strategyEvaluation.css +++ b/frontend/src/styles/strategyEvaluation.css @@ -377,11 +377,37 @@ padding: 8px 10px; } -.seval-main-content .seval-chart { +.seval-main-chart-area { + flex: 1; + min-height: 140px; + min-width: 0; + display: flex; + flex-direction: column; +} + +.seval-main-chart-area .seval-chart { flex: 1; min-height: 0; } +.seval-strategy-splitter { + flex-shrink: 0; + margin: 2px 0; + border-radius: 2px; +} + +.seval-strategy-panel-wrap { + flex: 0 0 auto; + min-height: 0; + display: flex; + flex-direction: column; + overflow: hidden; +} + +.seval-strategy-splitter.btd-splitter.se-splitter--active { + background: color-mix(in srgb, var(--btd-gold) 35%, var(--btd-divider)); +} + .seval-chart { display: flex; flex-direction: column; @@ -1273,10 +1299,8 @@ /* ── 중앙 하단 — 목록 방식 전략 설정 ── */ .seval-strategy-panel { position: relative; - flex: 0 0 min(40vh, 380px); - min-height: 200px; - max-height: min(48vh, 440px); - margin-top: 6px; + flex: 1; + min-height: 0; border: 1px solid var(--se-terminal-border, rgba(255, 255, 255, 0.08)); border-radius: 8px; background: var(--se-panel-card-bg, var(--se-terminal-bg, color-mix(in srgb, var(--bg) 92%, #000))); @@ -1285,8 +1309,7 @@ flex-direction: column; } .seval-strategy-panel--empty { - flex: 0 0 auto; - max-height: none; + flex: 1; min-height: 0; padding: 12px 14px; }