전략평가 수정

frontend/src/components/StrategyEvaluationPage.tsx

@@ -43,6 +43,7 @@ import type { OHLCVBar } from '../types';
 const LEFT_KEY = 'seval-left-width';
 const LEFT_OPEN_KEY = 'seval-left-open';
 const RIGHT_KEY = 'seval-right-width';
+const RIGHT_OPEN_KEY = 'seval-right-open';
 const LEFT_DEFAULT = 380;
 const RIGHT_DEFAULT = 440;
 
@@ -88,6 +89,7 @@ export default function StrategyEvaluationPage({ theme = 'dark' }: Props) {
   const [leftWidth, setLeftWidth] = useState(() => readMinWidth(LEFT_KEY, LEFT_DEFAULT));
   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 leftRef = useRef(leftWidth);
   const rightRef = useRef(rightWidth);
   leftRef.current = leftWidth;
@@ -103,10 +105,22 @@ export default function StrategyEvaluationPage({ theme = 'dark' }: Props) {
     });
   }, []);
 
+  const toggleRightPanel = useCallback(() => {
+    setRightOpen(prev => {
+      const next = !prev;
+      storeBool(RIGHT_OPEN_KEY, next);
+      return next;
+    });
+  }, []);
+
   const leftWrapStyle = useMemo(
     () => ({ '--seval-left-width': `${leftWidth}px` }) as React.CSSProperties,
     [leftWidth],
   );
+  const rightWrapStyle = useMemo(
+    () => ({ '--seval-right-width': `${rightWidth}px` }) as React.CSSProperties,
+    [rightWidth],
+  );
   const onRightSplit = useCallback((e: React.PointerEvent<HTMLDivElement>) => {
     const startX = e.clientX;
     const start = rightRef.current;
@@ -474,14 +488,25 @@ export default function StrategyEvaluationPage({ theme = 'dark' }: Props) {
         </main>
 
         <div
-          className="btd-splitter btd-splitter--v"
-          role="separator"
-          aria-orientation="vertical"
-          aria-label="우측 패널 너비"
-          onPointerDown={onRightSplit}
-        />
-
-        <aside className="btd-right seval-right-panel" style={{ width: rightWidth, flex: `0 0 ${rightWidth}px` }}>
+          className={`seval-right-wrap${rightOpen ? ' seval-right-wrap--open' : ''}`}
+          style={rightWrapStyle}
+        >
+          <SePanelCollapseHandle
+            side="right"
+            open={rightOpen}
+            onToggle={toggleRightPanel}
+            label="시그널 패널"
+          />
+          {rightOpen && (
+          <div
+            className="btd-splitter btd-splitter--v seval-right-splitter"
+            role="separator"
+            aria-orientation="vertical"
+            aria-label="우측 패널 너비"
+            onPointerDown={onRightSplit}
+          />
+          )}
+          <aside className={`btd-right seval-right-panel seval-right-sidebar${rightOpen ? ' seval-right-sidebar--open' : ''}`}>
           <div className="seval-signal-head">
             <span className="seval-signal-market">{getKoreanName(market)}</span>
             <span
@@ -523,7 +548,8 @@ export default function StrategyEvaluationPage({ theme = 'dark' }: Props) {
             </span>
             <span className="seval-strategy-chip">{strategyLabel}</span>
           </footer>
-        </aside>
+          </aside>
+        </div>
       </div>
 
       {editorModalOpen && (