From 97648bab405e15fcc5e2361d95362fcd49c73277 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=ED=98=84=EC=84=B1=ED=95=84?= <hyunsp@gmail.com>
Date: Sat, 25 Jan 2025 23:04:37 +0900
Subject: [PATCH] =?UTF-8?q?=EC=8B=9C=EB=82=98=EB=A6=AC=EC=98=A4=20?=
 =?UTF-8?q?=EC=97=90=EB=94=94=ED=84=B0=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/api-tester/DiagramArea.jsx |  6 +++-
 .../components/api-tester/ScenarioEditor.jsx  | 28 ++++++++++++-------
 2 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/TestMasterUI/src/components/api-tester/DiagramArea.jsx b/TestMasterUI/src/components/api-tester/DiagramArea.jsx
index 37f8986..91813e8 100644
--- a/TestMasterUI/src/components/api-tester/DiagramArea.jsx
+++ b/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,
diff --git a/TestMasterUI/src/components/api-tester/ScenarioEditor.jsx b/TestMasterUI/src/components/api-tester/ScenarioEditor.jsx
index 9b88655..2763b8e 100644
--- a/TestMasterUI/src/components/api-tester/ScenarioEditor.jsx
+++ b/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();
-      await updateScenario({
-        ...currentScenario,
-        scenario: JSON.stringify(flowData)
-      });
+      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'}>