전략평가 차트, 조건 영역 사이즈조절

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) {
 
         <main className={`btd-main${leftOpen ? '' : ' seval-main--left-collapsed'}`}>
           <div className="btd-main-content seval-main-content">
-            <StrategyEvaluationChart
+            <div className="seval-main-chart-area">
+              <StrategyEvaluationChart
               market={market}
               timeframe={chartTimeframe}
               timeframeChoice={timeframeChoice}
@@ -1021,10 +1039,26 @@ function StrategyEvaluationPageInner({ theme = 'dark' }: Props) {
               overlayVisibility={overlayVisibility}
               onSetOverlayVisibility={handleSetOverlayVisibility}
             />
-            <StrategyEvaluationStrategyPanel
-              strategy={selectedStrategy}
-              editor={strategyEditor}
+            </div>
+            <div
+              className="btd-splitter btd-splitter--h seval-strategy-splitter"
+              role="separator"
+              aria-orientation="horizontal"
+              aria-label="차트·전략 패널 높이 조절"
+              aria-valuemin={STRATEGY_PANEL_MIN}
+              aria-valuemax={STRATEGY_PANEL_MAX}
+              aria-valuenow={strategyPanelHeight}
+              onPointerDown={onStrategyPanelSplit}
             />
+            <div
+              className="seval-strategy-panel-wrap"
+              style={{ height: strategyPanelHeight }}
+            >
+              <StrategyEvaluationStrategyPanel
+                strategy={selectedStrategy}
+                editor={strategyEditor}
+              />
+            </div>
           </div>
         </main>