시나리오 콘솔 영역 수정

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>