탭 처리 수정

TestMasterUI/src/components/MainContentArea.jsx

@@ -1,28 +1,50 @@
 import React, {useEffect, useState} from 'react';
-import APINavigation from "@/components/api-tester/APINavigation";
+import APINavigation from '@/components/api-tester/APINavigation';
-import APITabs from "@/components/api-tester/APITabs";
+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}) => {
+  // 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 APIMode = ({
-  const [apiRequests, setApiRequests] = useState([]);
+  isApiMode,
-  const [currentIndex, setCurrentIndex] = useState(0);
+  onToggleMode,
-  const {
+  apiRequests,
-    collections,
+  setApiRequests,
-    loadCollections,
+  currentIndex,
-    loading,
+  setCurrentIndex
-    error
+}) => {
-  } = useAPI();
+  const {collections, loadCollections} = useAPI();
 
   useEffect(() => {
     loadCollections();
@@ -127,9 +149,13 @@ const APIMode = ({ isApiMode, onToggleMode }) => {
 };
 
 // 시나리오 모드
-const ScenarioMode = ({ isApiMode, onToggleMode }) => (
+const ScenarioMode = ({
+  isApiMode,
+  onToggleMode,
+}) => {
+
+  return (
       <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="/"
@@ -138,29 +164,20 @@ const ScenarioMode = ({ isApiMode, onToggleMode }) => (
               onToggleMode={onToggleMode}
           />
         </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="/"
+          <APINavigation
+              contextPath="/"
               side="right"
-                       onApiSelect={(collectionId, apiId) => {
+              onApiSelect={handleApiSelect}
-                         // Handle API selection
-                       }}
-                       onNewCollection={() => {
-                         // Handle new collection creation
-                       }}
               isApiMode={isApiMode}
               onToggleMode={onToggleMode}
           />
-
         </div>
       </div>
   );
-
+};
 
   export default MainContentArea;