시나리오 에디터 수정

TestMasterUI/src/components/api-tester/DiagramArea.jsx

@@ -169,7 +169,7 @@ const nodeTypes = {
   delayNode: DelayNode
 };
 
-const DiagramArea = forwardRef(({onSave}, ref) => {
+const DiagramArea = forwardRef(({onSave, onFlowChange, isExecuting}, ref) => {
   const {currentFlowData} = useLoadTest();
   const reactFlowWrapper = useRef(null);
   const [selectedNodeId, setSelectedNodeId] = useState(null);
@@ -196,6 +196,10 @@ const DiagramArea = forwardRef(({onSave}, ref) => {
     }
   }, [currentFlowData, setNodes, setEdges]);
 
+  useEffect(() => {
+    onFlowChange?.(nodes, edges);
+  }, [nodes, edges, onFlowChange]);
+
   useImperativeHandle(ref, () => ({
     getFlowData: () => ({
       nodes,

TestMasterUI/src/components/api-tester/ScenarioEditor.jsx

@@ -1,5 +1,4 @@
 import React, {useCallback, useEffect, useRef, useState} from 'react';
-
 import '@xyflow/react/dist/style.css';
 import MonacoEditor from '@/components/shared/MonacoEditor';
 import ScenarioMenuBar from '@/components/api-tester/ScenarioMenuBar.jsx';
@@ -11,7 +10,6 @@ import {Button} from '@/components/ui/button.jsx';
 
 const apiClient = new APIClient();
 
-// ConsoleArea Component
 const ConsoleArea = ({value, isVisible}) => (
     <div className={`${isVisible ? 'h-full' : 'hidden'}`}>
       <MonacoEditor
@@ -24,10 +22,10 @@ const ConsoleArea = ({value, isVisible}) => (
     </div>
 );
 
-// Main ScenarioEditor Component
 const ScenarioEditor = () => {
   const diagramRef = useRef(null);
   const {currentScenario, currentFlowData, updateScenario} = useLoadTest();
+  const [flowData, setFlowData] = useState(currentFlowData);
   const [isExecuting, setIsExecuting] = useState(false);
   const [isConsoleVisible, setIsConsoleVisible] = useState(true);
 
@@ -40,24 +38,33 @@ const ScenarioEditor = () => {
     pauseExecution,
     isRunning
   } = useScenarioExecutor(
-      currentFlowData?.nodes || [],
-      currentFlowData?.edges || [],
+      flowData?.nodes || [],
+      flowData?.edges || [],
       apiClient
   );
 
   useEffect(() => {
+    setFlowData(currentFlowData);
     resetExecutor();
     clearLogs();
   }, [currentFlowData]);
 
+
+  const handleFlowChange = useCallback((nodes, edges) => {
+    setFlowData({ nodes, edges });
+    resetExecutor();
+  }, [resetExecutor]);
+
   const handleSave = async () => {
     try {
-      console.log(currentScenario);
       const flowData = diagramRef.current?.getFlowData();
+      if (flowData) {
+        resetExecutor();
         await updateScenario({
           ...currentScenario,
           scenario: JSON.stringify(flowData)
         });
+      }
     } catch (error) {
       console.error('Failed to save scenario:', error);
     }
@@ -116,6 +123,7 @@ const ScenarioEditor = () => {
                 initialNodes={currentFlowData?.nodes || []}
                 initialEdges={currentFlowData?.edges || []}
                 isExecuting={isExecuting}
+                onFlowChange={handleFlowChange}
             />
           </div>
           <div className={isConsoleVisible ? 'h-1/2' : 'h-auto'}>