From e0fd69ea5a28b21ff88de464b7e22437b387e17c 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 10:32:52 +0900
Subject: [PATCH] =?UTF-8?q?=EC=8B=9C=EB=82=98=EB=A6=AC=EC=98=A4=20?=
 =?UTF-8?q?=EC=BD=98=EC=86=94=20=EC=98=81=EC=97=AD=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/api-tester/ScenarioEditor.jsx  | 48 ++++++++++---------
 1 file changed, 26 insertions(+), 22 deletions(-)

diff --git a/TestMasterUI/src/components/api-tester/ScenarioEditor.jsx b/TestMasterUI/src/components/api-tester/ScenarioEditor.jsx
index 40c26bd..9b88655 100644
--- a/TestMasterUI/src/components/api-tester/ScenarioEditor.jsx
+++ b/TestMasterUI/src/components/api-tester/ScenarioEditor.jsx
@@ -12,16 +12,16 @@ import {Button} from '@/components/ui/button.jsx';
 const apiClient = new APIClient();
 
 // ConsoleArea Component
-const ConsoleArea = ({value}) => (
-
-    <MonacoEditor
-        id="scenario-console"
-        value={value}
-        language="plaintext"
-        readOnly={true}
-        height="full"
-    />
-
+const ConsoleArea = ({value, isVisible}) => (
+    <div className={`${isVisible ? 'h-full' : 'hidden'}`}>
+      <MonacoEditor
+          id="scenario-console"
+          value={value}
+          language="plaintext"
+          readOnly={true}
+          height="full"
+      />
+    </div>
 );
 
 // Main ScenarioEditor Component
@@ -29,6 +29,7 @@ const ScenarioEditor = () => {
   const diagramRef = useRef(null);
   const {currentScenario, currentFlowData, updateScenario} = useLoadTest();
   const [isExecuting, setIsExecuting] = useState(false);
+  const [isConsoleVisible, setIsConsoleVisible] = useState(true);
 
   const {
     logs,
@@ -89,6 +90,10 @@ const ScenarioEditor = () => {
     clearLogs();
   }, [resetExecutor, clearLogs]);
 
+  const toggleConsole = useCallback((visibility) => {
+    setIsConsoleVisible(visibility);
+  }, []);
+
   if (!currentFlowData) {
     return <div className="flex items-center justify-center h-full">Select a scenario to edit</div>;
   }
@@ -104,8 +109,8 @@ const ScenarioEditor = () => {
             disabled={isExecuting}
             isRunning={isRunning}
         />
-        <div className="flex-1 min-h-0 grid grid-rows-2">
-          <div className="min-h-0 border-b">
+        <div className="flex-1 min-h-0 flex flex-col">
+          <div className={`${isConsoleVisible ? 'h-1/2' : 'h-full'} min-h-0 border-b`}>
             <DiagramArea
                 ref={diagramRef}
                 initialNodes={currentFlowData?.nodes || []}
@@ -113,21 +118,20 @@ const ScenarioEditor = () => {
                 isExecuting={isExecuting}
             />
           </div>
-          <div className="flex-1">
+          <div className={isConsoleVisible ? 'h-1/2' : 'h-auto'}>
             <div className="flex items-center gap-2 p-1 border-b">
-              <div>Output: </div>
+              <div>Output:</div>
               <Button
                   variant="outline"
-                  size="sm">
-                숨기기
-              </Button>
-              <Button
-                  variant="outline"
-                  size="sm">
-                보이기
+                  size="sm"
+                  onClick={() => toggleConsole(!isConsoleVisible)}
+              >
+                {isConsoleVisible ? '숨기기' : '보이기'}
               </Button>
             </div>
-            <ConsoleArea value={logs}/>
+            <div className="h-[calc(100%-32px)]">
+              <ConsoleArea value={logs} isVisible={isConsoleVisible}/>
+            </div>
           </div>
         </div>
       </div>