From 54c5633654390bca67df4c50b9d5b01bfb17e1e9 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 11:10:57 +0900
Subject: [PATCH] =?UTF-8?q?API=20=ED=81=B4=EB=9D=BC=EC=9D=B4=EC=96=B8?=
 =?UTF-8?q?=ED=8A=B8=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/MainContentArea.jsx        |   1 +
 .../components/api-tester/ScenarioMenuBar.jsx |  16 +-
 .../client-views/HTTPClientView.jsx           | 284 +++++++++---------
 3 files changed, 156 insertions(+), 145 deletions(-)

diff --git a/TestMasterUI/src/components/MainContentArea.jsx b/TestMasterUI/src/components/MainContentArea.jsx
index 398b032..6ebb599 100644
--- a/TestMasterUI/src/components/MainContentArea.jsx
+++ b/TestMasterUI/src/components/MainContentArea.jsx
@@ -154,6 +154,7 @@ const ScenarioMode = ({
   onToggleMode,
 }) => {
 
+  let handleApiSelect = () => {};
   return (
       <div className="scenario-mode flex flex-1 h-[calc(100vh-57px)]">
         <div className="navigation-sidebar min-w-[200px] border-r bg-gray-100">
diff --git a/TestMasterUI/src/components/api-tester/ScenarioMenuBar.jsx b/TestMasterUI/src/components/api-tester/ScenarioMenuBar.jsx
index 3d827e6..5d6f9b5 100644
--- a/TestMasterUI/src/components/api-tester/ScenarioMenuBar.jsx
+++ b/TestMasterUI/src/components/api-tester/ScenarioMenuBar.jsx
@@ -29,14 +29,14 @@ const ScenarioMenuBar = ({ onSave, onStepRun, onFullRun, onPause, onReset }) =>
           <Play className="h-4 w-4 mr-2" />
           전체 실행
         </Button>
-        <Button
-            variant="outline"
-            size="sm"
-            onClick={onPause}
-        >
-          <Pause className="h-4 w-4 mr-2" />
-          일시 정지
-        </Button>
+        {/*<Button*/}
+        {/*    variant="outline"*/}
+        {/*    size="sm"*/}
+        {/*    onClick={onPause}*/}
+        {/*>*/}
+        {/*  <Pause className="h-4 w-4 mr-2" />*/}
+        {/*  일시 정지*/}
+        {/*</Button>*/}
         <Button
             variant="outline"
             size="sm"
diff --git a/TestMasterUI/src/components/client-views/HTTPClientView.jsx b/TestMasterUI/src/components/client-views/HTTPClientView.jsx
index e6c0606..66a6757 100644
--- a/TestMasterUI/src/components/client-views/HTTPClientView.jsx
+++ b/TestMasterUI/src/components/client-views/HTTPClientView.jsx
@@ -2,7 +2,7 @@ import React, {useState} from 'react';
 import {Button} from '@/components/ui/button';
 import {Select, SelectContent, SelectItem, SelectTrigger, SelectValue} from '@/components/ui/select';
 import {Input} from '@/components/ui/input';
-import {Tabs, TabsList, TabsTrigger} from '@/components/ui/tabs';
+import {Tabs, TabsContent, TabsList, TabsTrigger} from '@/components/ui/tabs';
 import {Label} from '@/components/ui/label';
 import EditableInput from '../shared/EditableInput';
 import PropertyTable from '../shared/PropertyTable';
@@ -18,7 +18,7 @@ const HTTP_METHODS = [
 ];
 
 export const HTTPClientView = ({model, index}) => {
-  const { getServer } = useAPI();
+  const {getServer} = useAPI();
   const [currentModel, setCurrentModel] = useState(model);
   const [basePath, setBasePath] = useState('');
   const [currentTab, setCurrentTab] = useState('body');
@@ -121,9 +121,9 @@ export const HTTPClientView = ({model, index}) => {
   );
 
   return (
-      <div className="flex flex-col h-full p-4 space-y-4">
+      <div className="flex flex-col h-full p-4 gap-4">
         {/* Request Header Section */}
-        <div className="flex items-center space-x-2">
+        <div className="flex items-center gap-2">
           <div>
             <span>{currentModel.collectionName}</span>
             {' > '}
@@ -132,7 +132,7 @@ export const HTTPClientView = ({model, index}) => {
         </div>
 
         {/* Request Controls */}
-        <div className="flex items-center space-x-2">
+        <div className="flex items-center gap-2">
           <Select
               value={currentModel.method}
               onValueChange={(value) => setCurrentModel(prev => ({...prev, method: value}))}
@@ -166,147 +166,157 @@ export const HTTPClientView = ({model, index}) => {
           <Button variant="secondary">Save</Button>
         </div>
 
-        {/* Request/Response Tabs */}
-        <Tabs value={currentTab} onValueChange={setCurrentTab}>
-          <TabsList>
-            <TabsTrigger value="body">Body</TabsTrigger>
-            <TabsTrigger value="params">Params</TabsTrigger>
-            <TabsTrigger value="headers">Headers</TabsTrigger>
-            <TabsTrigger value="pre-request">Pre-Request</TabsTrigger>
-            <TabsTrigger value="post-request">Post-Request</TabsTrigger>
-          </TabsList>
+        {/* Request/Response Container */}
+        <div className="flex flex-col gap-4 flex-1 min-h-0">
+          {/* Request Section */}
+          <div className="flex-1 min-h-0">
+            <Tabs value={currentTab} onValueChange={setCurrentTab} className="flex flex-col h-full">
+              <TabsList>
+                <TabsTrigger value="body">Body</TabsTrigger>
+                <TabsTrigger value="params">Params</TabsTrigger>
+                <TabsTrigger value="headers">Headers</TabsTrigger>
+                <TabsTrigger value="pre-request">Pre-Request</TabsTrigger>
+                <TabsTrigger value="post-request">Post-Request</TabsTrigger>
+              </TabsList>
 
-          <div className="mt-2">
-            {/* Body Tab Content */}
-            <div style={{ display: currentTab === 'body' ? 'block' : 'none' }}>
-              <Select
-                  value={currentModel.contentType}
-                  // onValueChange={(value) => setCurrentModel(prev => ({ ...prev, contentType: value }))}
-                  onValueChange={(value) => {
-                    // Update both content type and editor content
-                    setCurrentModel(prev => ({
-                      ...prev,
-                      contentType: value,
-                      // Optionally format the content when switching to JSON
-                      requestBody: value === 'json' && prev.requestBody ?
-                          JSON.stringify(JSON.parse(prev.requestBody), null, 2) :
-                          prev.requestBody
-                    }));
-                  }}
-              >
-                <SelectTrigger>
-                  <SelectValue placeholder="Content Type" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="json">JSON</SelectItem>
-                  <SelectItem value="xml">XML</SelectItem>
-                  <SelectItem value="plaintext">Text/Plain</SelectItem>
-                </SelectContent>
-              </Select>
-              <MonacoEditor
-                  id={`request-body-${model.id}`}
-                  value={currentModel.requestBody}
-                  language={
-                      currentModel.contentType
-                  }
-                  onChange={(newValue) => {
-                    setCurrentModel(prev => ({
-                      ...prev,
-                      requestBody: newValue
-                    }));
-                  }}
-                  height="64"
-              />
-            </div>
+              <div className="flex-1 min-h-0 mt-2">
+                {/* Body Tab Content */}
+                <TabsContent value="body" className="h-full m-0">
+                  <div className="flex flex-col h-full gap-2">
+                    <Select
+                        value={currentModel.contentType}
+                        // onValueChange={(value) => setCurrentModel(prev => ({ ...prev, contentType: value }))}
+                        onValueChange={(value) => {
+                          // Update both content type and editor content
+                          setCurrentModel(prev => ({
+                            ...prev,
+                            contentType: value,
+                            // Optionally format the content when switching to JSON
+                            requestBody: value === 'json' && prev.requestBody ?
+                                JSON.stringify(JSON.parse(prev.requestBody), null, 2) :
+                                prev.requestBody
+                          }));
+                        }}
+                    >
+                      <SelectTrigger>
+                        <SelectValue placeholder="Content Type"/>
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="json">JSON</SelectItem>
+                        <SelectItem value="xml">XML</SelectItem>
+                        <SelectItem value="plaintext">Text/Plain</SelectItem>
+                      </SelectContent>
+                    </Select>
+                    <div className="h-full">
+                      <MonacoEditor
+                          id={`request-body-${model.id}`}
+                          value={currentModel.requestBody}
+                          language={
+                            currentModel.contentType
+                          }
+                          onChange={(newValue) => {
+                            setCurrentModel(prev => ({
+                              ...prev,
+                              requestBody: newValue
+                            }));
+                          }}
+                          height="full"
+                      />
+                    </div>
+                  </div>
+                </TabsContent>
 
-            {/* Params Tab Content */}
-            <div style={{ display: currentTab === 'params' ? 'block' : 'none' }}>
-              <PropertyTable
-                  properties={currentModel.queryParams}
-                  onChange={handlePathChange}
-              />
-            </div>
+                <TabsContent value="params" className="h-full m-0">
+                  <PropertyTable
+                      properties={currentModel.queryParams}
+                      onChange={handlePathChange}
+                  />
+                </TabsContent>
 
-            {/* Headers Tab Content */}
-            <div style={{ display: currentTab === 'headers' ? 'block' : 'none' }}>
-              <PropertyTable
-                  properties={currentModel.headers}
-                  onChange={handleHeadersChange}
-              />
-            </div>
+                {/* Headers Tab Content */}
+                <TabsContent value="headers" className="h-full m-0">
+                  <PropertyTable
+                      properties={currentModel.headers}
+                      onChange={handleHeadersChange}
+                  />
+                </TabsContent>
+                <TabsContent value="pre-request" className="h-full m-0">
+                  <MonacoEditor
+                      id={`pre-request-${model.id}`}
+                      value={editorContents.preRequestScript}
+                      language="javascript"
+                      onChange={(value) => {
+                        setEditorContents(prev => ({...prev, preRequestScript: value}));
+                        setCurrentModel(prev => ({...prev, preRequestScript: value}));
+                      }}
+                      height="full"
+                  />
+                </TabsContent>
 
-            {/* Pre-Request Tab Content */}
-            <div style={{ display: currentTab === 'pre-request' ? 'block' : 'none' }} className="flex">
-              <div className="flex-1">
-                <MonacoEditor
-                    id={`pre-request-${model.id}`}
-                    value={editorContents.preRequestScript}
-                    language="javascript"
-                    onChange={(value) => {
-                      setEditorContents(prev => ({ ...prev, preRequestScript: value }));
-                      setCurrentModel(prev => ({ ...prev, preRequestScript: value }));
-                    }}
-                />
+                {/* Post-Request Tab Content */}
+                <TabsContent value="post-request" className="h-full m-0">
+                  <MonacoEditor
+                      id={`post-request-${model.id}`}
+                      value={editorContents.postRequestScript}
+                      language="javascript"
+                      onChange={(value) => {
+                        setEditorContents(prev => ({...prev, postRequestScript: value}));
+                        setCurrentModel(prev => ({...prev, postRequestScript: value}));
+                      }}
+                      height="full"
+                  />
+                </TabsContent>
               </div>
-            </div>
-
-            {/* Post-Request Tab Content */}
-            <div style={{ display: currentTab === 'post-request' ? 'block' : 'none' }} className="flex">
-              <div>
-                <MonacoEditor
-                    id={`post-request-${model.id}`}
-                    value={editorContents.postRequestScript}
-                    language="javascript"
-                    onChange={(value) => {
-                      setEditorContents(prev => ({ ...prev, postRequestScript: value }));
-                      setCurrentModel(prev => ({ ...prev, postRequestScript: value }));
-                    }}
-                />
-              </div>
-            </div>
-          </div>
-        </Tabs>
-        {/* Response Section */}
-        <div className="flex-1">
-          <div className="flex items-center space-x-2 mb-2">
-            <span>Response</span>
-            <span className="text-sm text-gray-500">{responseData.status}</span>
-            <span className="text-sm text-gray-500">{responseData.time}</span>
-            <span className="text-sm text-gray-500">{responseData.size}</span>
+            </Tabs>
           </div>
 
-          <Tabs value={currentResponseTab} onValueChange={setCurrentResponseTab}>
-            <TabsList>
-              <TabsTrigger value="response-body">Body</TabsTrigger>
-              <TabsTrigger value="response-headers">Headers</TabsTrigger>
-              <TabsTrigger value="console">Console</TabsTrigger>
-            </TabsList>
-
-            <div className="mt-2">
-              <div style={{display: currentResponseTab === 'response-body' ? 'block' : 'none'}}>
-                <MonacoEditor
-                    id={`response-body-${model.id}`}
-                    value={editorContents.responseBody}
-                    readOnly={true}
-                    onChange={() => {}} // Read-only, so no onChange needed
-                />
-              </div>
-
-              <div style={{display: currentResponseTab === 'response-headers' ? 'block' : 'none'}}>
-                {renderResponseHeaders()}
-              </div>
-
-              <div style={{display: currentResponseTab === 'console' ? 'block' : 'none'}}>
-                <MonacoEditor
-                    id={`console-${model.id}`}
-                    value={editorContents.console}
-                    language="plaintext"
-                    readOnly={true}
-                />
-              </div>
+          {/* Response Section */}
+          <div className="flex-1 min-h-0">
+            <div className="flex items-center gap-2 mb-2">
+              <span>Response</span>
+              <span className="text-sm text-gray-500">{responseData.status}</span>
+              <span className="text-sm text-gray-500">{responseData.time}</span>
+              <span className="text-sm text-gray-500">{responseData.size}</span>
             </div>
-          </Tabs>
+
+            <Tabs value={currentResponseTab} onValueChange={setCurrentResponseTab} className="flex flex-col h-[calc(100%-2rem)]">
+              <TabsList>
+                <TabsTrigger value="response-body">Body</TabsTrigger>
+                <TabsTrigger value="response-headers">Headers</TabsTrigger>
+                <TabsTrigger value="console">Console</TabsTrigger>
+              </TabsList>
+
+              <div className="flex-1 min-h-0 mt-2">
+                <TabsContent value="response-body" className="h-full m-0">
+                  <MonacoEditor
+                      id={`response-body-${model.id}`}
+                      value={editorContents.responseBody}
+                      readOnly={true}
+                      height="full"
+                  />
+                </TabsContent>
+
+                <TabsContent value="response-headers" className="h-full m-0">
+                  {renderResponseHeaders()}
+                </TabsContent>
+
+                <TabsContent value="console" className="h-full m-0">
+                  <MonacoEditor
+                      id={`console-${model.id}`}
+                      value={editorContents.console}
+                      language="plaintext"
+                      readOnly={true}
+                      height="full"
+                  />
+                </TabsContent>
+              </div>
+            </Tabs>
+          </div>
         </div>
+
+
+
+
       </div>
   );
 };