코드 정리

TestMasterUI/src/App.jsx

@@ -1,16 +1,15 @@
-import React, {useEffect, useState} from 'react';
-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';
+import React, { useEffect, useState } from 'react';
+import { APIProvider, useAPI } from './providers/APIProvider';
+import { LoadTestProvider } from './providers/LoadTestProvider';
+import DialogManager from './components/shared/DialogManager';
+import { monacoConfig } from '@/config/monaco.js';
+import LoginDialog from '@/components/account/LoginDialog.jsx';
+import AppMenu from './components/app-menu/AppMenu';
+import { SCREENS } from './config/screenConfig';
 
 window.MonacoEnvironment = monacoConfig;
 
-const App = ({ options = { type: 'api', contextPath: '/' } }) => {
+const App = ({ options = { contextPath: '/' } }) => {
   const [showLogin, setShowLogin] = useState(false);
 
   return (
@@ -20,102 +19,50 @@ const App = ({ options = { type: 'api', contextPath: '/' } }) => {
   );
 };
 
-const menuConfig = [
-  {
-    id: 'response',
-    label: '응답관리',
-    items: [
-      {id: 'response-list', label: '응답목록', action: 'response-list'},
-      {id: 'response-add', label: '응답추가', action: 'response-add'}
-    ]
-  },
-  {
-    id: 'request',
-    label: '요청관리',
-    items: [
-      {id: 'collection-add', label: '컬렉션 추가', action: 'collection-add'},
-      {id: 'request-add', label: '요청 추가', action: 'request-add'},
-      {id: 'scenario-add', label: '시나리오 추가', action: 'scenario-add'},
-      {id: 'variables-show', label: '변수 보기', action: 'variables-show'},
-    ]
-  },
-  {
-    id: 'queue',
-    label: '큐관리',
-    items: [
-      {id: 'queue-status', label: '큐상태', action: 'queue-status'},
-      {id: 'queue-settings', label: '큐설정', action: 'queue-settings'}
-    ]
-  },
-  {
-    id: 'loadtest',
-    label: '부하테스트',
-    items: [
-      {id: 'load-test-new', label: '새 테스트', action: 'load-test-new'},
-      {id: 'load-test-history', label: '테스트 이력', action: 'load-test-history'},
-      {id: 'load-test-reports', label: '결과 리포트', action: 'load-test-reports'}
-    ]
-  },
-  {
-    id: 'system',
-    label: '시스템관리',
-    items: [
-      {id: 'system-settings', label: '시스템설정', action: 'system-settings'},
-      {id: 'user-management', label: '사용자관리', action: 'user-management'},
-      {type: 'separator'},
-      {id: 'system-logs', label: '시스템로그', action: 'system-logs'}
-    ]
-  },
-  {
-    id: 'account',
-    label: '계정',
-    items: [
-      {id: 'change-password', label: '비밀번호변경', action: 'change-password'},
-      {type: 'separator'},
-      {id: 'logout', label: '로그아웃', action: 'logout'}
-    ]
-  }
-];
-
-const MenuItem = ({item, onMenuClick}) => {
-  if (item.type === 'separator') {
-    return <MenubarSeparator/>;
-  }
-
-  return (
-      <MenubarItem onClick={() => onMenuClick(item.action)}>
-        {item.label}
-      </MenubarItem>
-  );
-};
-
 const AppContent = ({ options, showLogin, setShowLogin }) => {
   const { isAuthenticated, setIsAuthenticated, handleLogout } = useAPI();
   const [isInitialized, setIsInitialized] = useState(false);
+  const [currentScreen, setCurrentScreen] = useState('api-tester');
   const [dialogState, setDialogState] = useState({
     showAddApi: false,
     showAddCollection: false,
     showAddScenario: false,
-    showVariableModal: false
+    showVariableModal: false,
+    showMockRouteEdit: false,
+    selectedItem: null,
   });
 
-  const handleMenuClick = async (action) => {
+  const handleMenuClick = async (action, screen, item = null) => {
 
-    console.log('Menu action:', action);
+    if (screen) {
+      console.log('Screen:', screen);
+      setCurrentScreen(screen);
+      return;
+    }
+
+    console.log(item);
+    // Handle modal actions
     switch (action) {
       case 'request-add':
         setDialogState(prev => ({ ...prev, showAddApi: true }));
         break;
+      case 'response-add':
+      case 'response-edit':
+      case 'response-clone':
+        setDialogState(prev => ({
+          ...prev,
+          showMockRouteEdit: true,
+          selectedItem: item  // Pass the selected item
+        }));
+        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();
@@ -123,10 +70,6 @@ const AppContent = ({ options, showLogin, setShowLogin }) => {
           window.location.href = "/actionLogout.do";
         }
         break;
-      case 'change-password':
-        // Handle password change
-        break;
-        // Add other cases as needed
     }
   };
 
@@ -167,53 +110,27 @@ const AppContent = ({ options, showLogin, setShowLogin }) => {
     return <LoginDialog open={showLogin} onOpenChange={setShowLogin} />;
   }
 
+  const CurrentScreenComponent = SCREENS[currentScreen] || SCREENS['api-tester'];
+
   return (
       <LoadTestProvider contextPath={options.contextPath}>
         <div className="flex flex-col h-screen bg-background">
-          <div className="fixed top-0 left-0 right-0 z-50 bg-background border-b">
-            <div className="flex items-center h-14">
-              <div className="px-4 py-2 border-r h-full flex items-center">
-                <img
-                    src="/img/logo.png"
-                    alt="testmaster"
-                    className="h-8 w-auto"
-                />
-              </div>
-              <Menubar className="border-none flex-1">
-                {menuConfig.map((menu) => (
-                    <MenubarMenu key={menu.id}>
-                      <MenubarTrigger className="font-bold">
-                        {menu.label}
-                      </MenubarTrigger>
-                      <MenubarContent>
-                        {menu.items.map((item, index) => (
-                            <MenuItem
-                                key={item.id || `separator-${index}`}
-                                item={item}
-                                onMenuClick={handleMenuClick}
-                            />
-                        ))}
-                      </MenubarContent>
-                    </MenubarMenu>
-                ))}
-              </Menubar>
-            </div>
-          </div>
+          <AppMenu onMenuClick={handleMenuClick} />
           <DialogManager
               showAddApi={dialogState.showAddApi}
               showAddCollection={dialogState.showAddCollection}
               showAddScenario={dialogState.showAddScenario}
               showVariableModal={dialogState.showVariableModal}
+              showMockRouteEdit={dialogState.showMockRouteEdit}
+              selectedItem={dialogState.selectedItem}
               onDialogChange={handleDialogChange}
           />
-          {options.type === 'api' ? (
-              <APITester />
-          ) : (
-              <LoadTestManager />
-          )}
+          <div className="flex-1 mt-14">
+            <CurrentScreenComponent onMenuClick={handleMenuClick} />
+          </div>
         </div>
       </LoadTestProvider>
   );
 };
 
-export default App
+export default App;