메뉴, dialog 정리

TestMasterUI/src/App.jsx

@@ -3,6 +3,7 @@ import {APIProvider, useAPI} from './providers/APIProvider';
 import {LoadTestProvider} from './providers/LoadTestProvider';
 import APITester from './components/APITester';
 import LoadTestManager from './components/LoadTestManager';
+import DialogManager from './components/DialogManager';
 import {monacoConfig} from '@/config/monaco.js';
 import LoginDialog from '@/components/LoginDialog.jsx';
 import {Menubar, MenubarContent, MenubarItem, MenubarMenu, MenubarSeparator, MenubarTrigger} from '@/components/ui/menubar.jsx';
@@ -88,39 +89,46 @@ const MenuItem = ({item, onMenuClick}) => {
   );
 };
 
-const handleMenuClick = async (action) => {
-  // Handle menu item clicks
-  console.log('Menu action:', action);
-  switch (action) {
-    case 'request-add':
-      setShowAddApi(true);
-      break;
-    case 'collection-add':
-      setShowAddCollection(true);
-      break;
-    case 'scenario-add':
-      setShowAddScenario(true);
-      break;
-    case 'variables-show':
-      setShowVariableModal(true);
-      break;
-    case 'logout':
-      const success = await handleLogout();
-      if (success) {
-        window.location.href = "/actionLogout.do";
-      }
-      break;
-    case 'change-password':
-      // Handle password change
-      break;
-      // Add other cases as needed
-  }
-};
-
 const AppContent = ({ options, showLogin, setShowLogin }) => {
-  const { isAuthenticated, setIsAuthenticated } = useAPI();
+  const { isAuthenticated, setIsAuthenticated, handleLogout } = useAPI();
   const [isInitialized, setIsInitialized] = useState(false);
+  const [dialogState, setDialogState] = useState({
+    showAddApi: false,
+    showAddCollection: false,
+    showAddScenario: false,
+    showVariableModal: false
+  });
 
+  const handleMenuClick = async (action) => {
+
+    console.log('Menu action:', action);
+    switch (action) {
+      case 'request-add':
+        setDialogState(prev => ({ ...prev, showAddApi: true }));
+        break;
+      case 'collection-add':
+        setDialogState(prev => ({ ...prev, showAddCollection: true }));
+        break;
+      case 'scenario-add':
+        setDialogState(prev => ({ ...prev, showAddScenario: true }));
+
+        break;
+      case 'variables-show':
+        setDialogState(prev => ({ ...prev, showVariableModal: true }));
+
+        break;
+      case 'logout':
+        const success = await handleLogout();
+        if (success) {
+          window.location.href = "/actionLogout.do";
+        }
+        break;
+      case 'change-password':
+        // Handle password change
+        break;
+        // Add other cases as needed
+    }
+  };
 
   const checkAuth = async () => {
     try {
@@ -151,6 +159,10 @@ const AppContent = ({ options, showLogin, setShowLogin }) => {
     }
   }, [isInitialized]);
 
+  const handleDialogChange = (dialogName, isOpen) => {
+    setDialogState(prev => ({ ...prev, [dialogName]: isOpen }));
+  };
+
   if (!isAuthenticated) {
     return <LoginDialog open={showLogin} onOpenChange={setShowLogin} />;
   }
@@ -187,6 +199,13 @@ const AppContent = ({ options, showLogin, setShowLogin }) => {
               </Menubar>
             </div>
           </div>
+          <DialogManager
+              showAddApi={dialogState.showAddApi}
+              showAddCollection={dialogState.showAddCollection}
+              showAddScenario={dialogState.showAddScenario}
+              showVariableModal={dialogState.showVariableModal}
+              onDialogChange={handleDialogChange}
+          />
           {options.type === 'api' ? (
               <APITester />
           ) : (

TestMasterUI/src/components/APITester.jsx

@@ -1,82 +1,21 @@
 import React, {useState} from 'react';
 import MainContentArea from '@/components/MainContentArea.jsx';
-import {useAPI} from '@/providers/APIProvider.jsx';
-import AddCollectionDialog from '@/components/api-tester/AddCollectionDialog.jsx';
-import AddAPIDialog from '@/components/api-tester/AddAPIDialog.jsx';
-import AddScenarioDialog from '@/components/api-tester/AddScenarioDialog.jsx';
-import {useLoadTest} from '@/providers/LoadTestProvider.jsx';
-import VariableModal from '@/components/api-tester/VariableModal.jsx';
 
 const APITester = () => {
   // API 모드와 시나리오 모드 상태를 관리
   const [isApiMode, setIsApiMode] = useState(true);
-  const [showAddCollection, setShowAddCollection] = useState(false);
-  const [showAddApi, setShowAddApi] = useState(false);
-  const [showAddScenario, setShowAddScenario] = useState(false);
-  const [showVariableModal, setShowVariableModal] = useState(false);
-  const { handleLogout, createCollection, createAPIRequest } = useAPI();
-  const {createScenario} = useLoadTest();
 
   // 모드 전환 핸들러
   const toggleMode = () => {
     setIsApiMode((prevMode) => !prevMode);
   };
 
-  const handleAddCollection = async (name) => {
-    try {
-      await createCollection(name);
-      return true;
-    } catch (error) {
-      throw new Error('컬렉션 생성에 실패했습니다');
-    }
-  };
-
-  const handleAddApi = async (collectionId, apiData) => {
-    try {
-      await createAPIRequest(collectionId, apiData);
-      return true;
-    } catch (error) {
-      console.error('Failed to create API:', error);
-      return false;
-    }
-  };
-
-  const handleAddScenario = async (name) => {
-    try {
-      await createScenario(name);
-      return true;
-    } catch (error) {
-      console.error('시나리오 생성에 실패했습니다.');
-    }
-  }
-
   return (
       <div className="flex flex-col h-screen">
-
         {/* Main content area with top padding for menubar */}
         <div className="flex-1 pt-14">
           <MainContentArea isApiMode={isApiMode} toggleMode={toggleMode}/>
         </div>
-        <AddCollectionDialog
-            open={showAddCollection}
-            onOpenChange={setShowAddCollection}
-            onSubmit={handleAddCollection}
-        />
-        {/* Add these at the bottom of your return statement */}
-        <AddAPIDialog
-            open={showAddApi}
-            onOpenChange={setShowAddApi}
-            onSubmit={handleAddApi}
-        />
-        <AddScenarioDialog
-          open={showAddScenario}
-          onOpenChange={setShowAddScenario}
-          onSubmit={handleAddScenario}
-        />
-        <VariableModal
-            open={showVariableModal}
-            onOpenChange={setShowVariableModal}
-        />
       </div>
   );
 };

TestMasterUI/src/components/DialogManager.jsx

@@ -0,0 +1,72 @@
+import AddAPIDialog from '@/components/api-tester/AddAPIDialog.jsx';
+import React from 'react';
+import AddCollectionDialog from '@/components/api-tester/AddCollectionDialog.jsx';
+import AddScenarioDialog from '@/components/api-tester/AddScenarioDialog.jsx';
+import VariableModal from '@/components/api-tester/VariableModal.jsx';
+import {useLoadTest} from '@/providers/LoadTestProvider.jsx';
+import {useAPI} from '@/providers/APIProvider.jsx';
+
+const DialogManager = ({
+  showAddApi,
+  showAddCollection,
+  showAddScenario,
+  showVariableModal,
+  onDialogChange
+}) => {
+  const {createCollection, createAPIRequest} = useAPI();
+  const {createScenario} = useLoadTest();
+
+  const handleAddCollection = async (name) => {
+    try {
+      await createCollection(name);
+      return true;
+    } catch (error) {
+      throw new Error('컬렉션 생성에 실패했습니다');
+    }
+  };
+
+  const handleAddApi = async (collectionId, apiData) => {
+    try {
+      await createAPIRequest(collectionId, apiData);
+      return true;
+    } catch (error) {
+      console.error('Failed to create API:', error);
+      return false;
+    }
+  };
+
+  const handleAddScenario = async (name) => {
+    try {
+      await createScenario(name);
+      return true;
+    } catch (error) {
+      console.error('시나리오 생성에 실패했습니다.');
+    }
+  }
+
+  return <>
+    <AddCollectionDialog
+        open={showAddCollection}
+        onOpenChange={(isOpen) => onDialogChange('showAddCollection', isOpen)}
+        onSubmit={handleAddCollection}
+    />
+    {/* Add these at the bottom of your return statement */}
+    <AddAPIDialog
+        open={showAddApi}
+        onOpenChange={(isOpen) => onDialogChange('showAddApi', isOpen)}
+        onSubmit={handleAddApi}
+    />
+    <AddScenarioDialog
+        open={showAddScenario}
+        onOpenChange={(isOpen) => onDialogChange('showAddScenario', isOpen)}
+        onSubmit={handleAddScenario}
+    />
+    <VariableModal
+        open={showVariableModal}
+        onOpenChange={(isOpen) => onDialogChange('showVariableModal', isOpen)}
+    />
+
+  </>;
+}
+
+export default DialogManager;

TestMasterUI/src/components/api-tester/APINavigation.jsx

@@ -32,7 +32,6 @@ const APINavigation = ({
   const [apiToRename, setApiToRename] = useState(null);
   const [renameApiDialogOpen, setRenameApiDialogOpen] = useState(false);
 
-
   // API Context
   const {
     collections,
@@ -61,16 +60,18 @@ const APINavigation = ({
 
   const handleApiAction = {
     open: (collectionId, apiId) => {
-      if (onApiSelect) onApiSelect(collectionId, apiId);
+      if (onApiSelect) {
+        onApiSelect(collectionId, apiId);
+      }
     },
     delete: async (collectionId, apiId) => {
-      setApiToDelete({ collectionId, apiId });
+      setApiToDelete({collectionId, apiId});
     },
     rename: (collectionId, apiId) => {
       const collection = collections.find(c => c.id === collectionId);
       const api = collection?.apis?.find(a => a.id === apiId);
       if (api) {
-        setApiToRename({ ...api, collectionId });
+        setApiToRename({...api, collectionId});
         setRenameApiDialogOpen(true);
       }
     }
@@ -250,22 +251,19 @@ const APINavigation = ({
   };
 
   return (
-      <>
+      <Sidebar side={side} className="py-16">
-        <Sidebar side={side} className="py-16">
+        {side === 'left' && (
-          {side === 'left' && (
+            <SidebarHeader>
-              <SidebarHeader>
+              <Button
-                <Button
+                  variant="outline"
-                    variant="outline"
+                  className="w-full"
-                    className="w-full"
+                  onClick={onToggleMode}
-                    onClick={onToggleMode}
+              >
-                >
+                {isApiMode ? 'Switch to Scenario Mode' : 'Switch to API Mode'}
-                  {isApiMode ? 'Switch to Scenario Mode' : 'Switch to API Mode'}
+              </Button>
-                </Button>
+            </SidebarHeader>
-              </SidebarHeader>
+        )}
-          )}
+        {renderContent()}
-          {renderContent()}
-        </Sidebar>
-
         <DeleteCollectionDialog
             open={deleteDialogOpen}
             onOpenChange={setDeleteDialogOpen}
@@ -279,8 +277,6 @@ const APINavigation = ({
             onSubmit={handleRenameConfirm}
             collection={collectionToRename}
         />
-
-
         <DeleteAPIDialog
             open={!!apiToDelete}
             onOpenChange={(open) => !open && setApiToDelete(null)}
@@ -293,14 +289,13 @@ const APINavigation = ({
             onSubmit={handleAddApi}
             selectedCollection={collections.find(c => c.id === selectedCollection)}
         />
-
         <RenameAPIDialog
             open={renameApiDialogOpen}
             onOpenChange={setRenameApiDialogOpen}
             onSubmit={handleRenameApi}
             api={apiToRename}
         />
-      </>
+      </Sidebar>
   );
 };
 

TestMasterUI/src/components/api-tester/ScenarioNavigation.jsx

@@ -1,28 +1,12 @@
 import React, {useEffect, useState} from 'react';
-import { FileText, MoreHorizontal } from 'lucide-react';
+import {FileText, MoreHorizontal} from 'lucide-react';
-import {
+import {Sidebar, SidebarContent, SidebarGroup, SidebarGroupLabel, SidebarHeader, SidebarMenu, SidebarMenuAction, SidebarMenuButton, SidebarMenuItem} from '@/components/ui/sidebar';
-  Sidebar,
+import {ScrollArea} from '@/components/ui/scroll-area';
-  SidebarContent,
+import {Alert, AlertDescription} from '@/components/ui/alert';
-  SidebarGroup,
+import {DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger} from '@/components/ui/dropdown-menu';
-  SidebarGroupLabel,
+import {Tooltip, TooltipContent, TooltipTrigger} from '@/components/ui/tooltip';
-  SidebarMenu,
+import {Button} from '@/components/ui/button';
-  SidebarMenuItem,
+import {useLoadTest} from '@/providers/LoadTestProvider';
-  SidebarMenuButton,
-  SidebarMenuAction, SidebarHeader,
-} from '@/components/ui/sidebar';
-import { ScrollArea } from '@/components/ui/scroll-area';
-import { Alert, AlertDescription } from '@/components/ui/alert';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger
-} from '@/components/ui/dropdown-menu';
-import { Tooltip, TooltipTrigger, TooltipContent } from '@/components/ui/tooltip';
-import { Button } from '@/components/ui/button';
-import { useLoadTest } from '@/providers/LoadTestProvider';
-import { SidebarProvider } from '@/components/ui/sidebar';
 import DeleteScenarioDialog from '@/components/api-tester/DeleteScenarioDialog.jsx';
 
 const ScenarioDropdownMenu = ({ onOpen, onRename, onDelete }) => (