전략편집기 팝업 기능 적용

frontend/src/components/strategyEvaluation/StrategyEditorModal.tsx

@@ -0,0 +1,50 @@
+/**
+ * 전략 평가 — 전략편집기 전체 화면 팝업
+ */
+import React, { Suspense, lazy, useEffect } from 'react';
+import type { Theme } from '../../types';
+
+const StrategyEditorPage = lazy(() => import('../StrategyEditorPage'));
+
+interface Props {
+  theme: Theme;
+  initialStrategyId?: number | null;
+  onClose: () => void;
+  onStrategiesChanged?: () => void;
+}
+
+export default function StrategyEditorModal({
+  theme,
+  initialStrategyId = null,
+  onClose,
+  onStrategiesChanged,
+}: Props) {
+  useEffect(() => {
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = 'hidden';
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose();
+    };
+    window.addEventListener('keydown', onKey);
+    return () => {
+      document.body.style.overflow = prev;
+      window.removeEventListener('keydown', onKey);
+    };
+  }, [onClose]);
+
+  return (
+    <div className="seval-editor-modal-overlay" role="dialog" aria-modal aria-label="전략 편집">
+      <div className="seval-editor-modal-shell">
+        <Suspense fallback={<div className="seval-editor-modal-loading">전략 편집기 불러오는 중…</div>}>
+          <StrategyEditorPage
+            theme={theme}
+            variant="modal"
+            initialStrategyId={initialStrategyId}
+            onClose={onClose}
+            onStrategiesChanged={onStrategiesChanged}
+          />
+        </Suspense>
+      </div>
+    </div>
+  );
+}