탭 처리 수정

TestMasterUI/src/components/MainContentArea.jsx

@@ -1,28 +1,50 @@
 import React, {useEffect, useState} from 'react';
-import APINavigation from "@/components/api-tester/APINavigation";
-import APITabs from "@/components/api-tester/APITabs";
-import { useAPI } from '@/providers/APIProvider.jsx';
+import APINavigation from '@/components/api-tester/APINavigation';
+import APITabs from '@/components/api-tester/APITabs';
+import {useAPI} from '@/providers/APIProvider.jsx';
 import ScenarioNavigation from '@/components/api-tester/ScenarioNavigation.jsx';
 import ScenarioEditor from '@/components/api-tester/ScenarioEditor.jsx';
 
-const MainContentArea = ({ isApiMode, toggleMode }) => {
+const MainContentArea = ({isApiMode, toggleMode}) => {
+  // Lift tab state up
+  const [apiRequests, setApiRequests] = useState([]);
+  const [currentIndex, setCurrentIndex] = useState(0);
+
   return (
       <div className="h-[calc(100vh-57px)] w-full overflow-hidden">
-        {isApiMode ? <APIMode isApiMode={isApiMode} onToggleMode={toggleMode}/> : <ScenarioMode isApiMode={isApiMode} onToggleMode={toggleMode}/>}
+        {isApiMode ? (
+            <APIMode
+                isApiMode={isApiMode}
+                onToggleMode={toggleMode}
+                apiRequests={apiRequests}
+                setApiRequests={setApiRequests}
+                currentIndex={currentIndex}
+                setCurrentIndex={setCurrentIndex}
+            />
+        ) : (
+            <ScenarioMode
+                isApiMode={isApiMode}
+                onToggleMode={toggleMode}
+                apiRequests={apiRequests}
+                setApiRequests={setApiRequests}
+                currentIndex={currentIndex}
+                setCurrentIndex={setCurrentIndex}
+            />
+        )}
       </div>
   );
 };
 
 // API 모드
-const APIMode = ({ isApiMode, onToggleMode }) => {
-  const [apiRequests, setApiRequests] = useState([]);
-  const [currentIndex, setCurrentIndex] = useState(0);
-  const {
-    collections,
-    loadCollections,
-    loading,
-    error
-  } = useAPI();
+const APIMode = ({
+  isApiMode,
+  onToggleMode,
+  apiRequests,
+  setApiRequests,
+  currentIndex,
+  setCurrentIndex
+}) => {
+  const {collections, loadCollections} = useAPI();
 
   useEffect(() => {
     loadCollections();
@@ -127,40 +149,35 @@ const APIMode = ({ isApiMode, onToggleMode }) => {
 };
 
 // 시나리오 모드
-const ScenarioMode = ({ isApiMode, onToggleMode }) => (
-    <div className="scenario-mode flex flex-1 h-[calc(100vh-57px)]">
-      {/* 왼쪽 고정: ScenarioNavigation */}
-      <div className="navigation-sidebar min-w-[200px] border-r bg-gray-100">
-        <ScenarioNavigation
-            contextPath="/"
-            side="left"
-            isApiMode={isApiMode}
-            onToggleMode={onToggleMode}
-        />
+const ScenarioMode = ({
+  isApiMode,
+  onToggleMode,
+}) => {
+
+  return (
+      <div className="scenario-mode flex flex-1 h-[calc(100vh-57px)]">
+        <div className="navigation-sidebar min-w-[200px] border-r bg-gray-100">
+          <ScenarioNavigation
+              contextPath="/"
+              side="left"
+              isApiMode={isApiMode}
+              onToggleMode={onToggleMode}
+          />
+        </div>
+        <div className="editor flex-1 h-[calc(100vh-57px)] overflow-hidden">
+          <ScenarioEditor />
+        </div>
+        <div className="navigation-sidebar min-w-[200px] border-l bg-gray-100">
+          <APINavigation
+              contextPath="/"
+              side="right"
+              onApiSelect={handleApiSelect}
+              isApiMode={isApiMode}
+              onToggleMode={onToggleMode}
+          />
+        </div>
       </div>
+  );
+};
 
-      {/* 중앙: ScenarioEditor */}
-      <div className="editor flex-1 h-[calc(100vh-57px)] overflow-hidden">
-        <ScenarioEditor/>
-      </div>
-
-      {/* 오른쪽 고정: APINavigation */}
-      <div className="navigation-sidebar min-w-[200px] border-l bg-gray-100">
-        <APINavigation contextPath="/"
-                       side="right"
-                       onApiSelect={(collectionId, apiId) => {
-                         // Handle API selection
-                       }}
-                       onNewCollection={() => {
-                         // Handle new collection creation
-                       }}
-                       isApiMode={isApiMode}
-                       onToggleMode={onToggleMode}
-        />
-
-      </div>
-    </div>
-);
-
-
-export default MainContentArea;
+  export default MainContentArea;