Files
goldenChart/frontend/src/components/strategyEvaluation/StrategyEditorModal.tsx
T
2026-06-16 10:48:13 +09:00

51 lines
1.4 KiB
TypeScript

/**
* 전략 평가 — 전략편집기 전체 화면 팝업
*/
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>
);
}