feat: 자산 카테고리별 6개 전용 테이블 분리 및 백엔드 API, 프론트엔드 상태 관리 전면 개편 (개인PC, 서버, 스토리지, 전산비품, 구독SW, 영구SW)

src/main.ts

@@ -12,101 +12,64 @@ import { initSwUserModal } from './components/Modal/SWUserModal';
 import { initDashboardDetailModal } from './components/Modal/DashboardDetailModal';
 import { createIcons, Download, Upload, FileSpreadsheet, Plus, X, LayoutDashboard, Monitor, Server, Database, Laptop, CalendarClock, Key, Cpu, Layers, Users, Paperclip, Edit2, History, RefreshCcw } from 'lucide';
 
-// --- DB 저장을 위한 헬퍼 함수 ---
-async function saveAllHwToDB(assets: HardwareAsset[]) {
+// --- DB 저장을 위한 세분화된 헬퍼 함수들 ---
+async function apiBatchSave(url: string, data: any[], label: string) {
   try {
-    const response = await fetch('http://localhost:3000/api/hw/batch', {
+    const response = await fetch(url, {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify(assets)
+      body: JSON.stringify(data)
     });
-    if (!response.ok) throw new Error('HW DB 저장 실패');
-    console.log('✅ HW DB 저장 완료');
+    if (!response.ok) throw new Error(`${label} DB 저장 실패`);
+    console.log(`✅ ${label} DB 저장 완료`);
   } catch (err) {
-    console.error('❌ HW DB 저장 실패:', err);
+    console.error(`❌ ${label} DB 저장 오류:`, err);
   }
 }
 
-async function saveAllSwToDB(assets: SoftwareAsset[]) {
-  try {
-    const response = await fetch('http://localhost:3000/api/sw/batch', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify(assets)
-    });
-    if (!response.ok) throw new Error('SW DB 저장 실패');
-    console.log('✅ SW DB 저장 완료');
-  } catch (err) {
-    console.error('❌ SW DB 저장 실패:', err);
-  }
-}
-
-async function saveAllSwUsersToDB(users: SWUser[]) {
-  try {
-    const response = await fetch('http://localhost:3000/api/sw-users/batch', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify(users)
-    });
-    if (!response.ok) throw new Error('SW User DB 저장 실패');
-    console.log('✅ SW User DB 저장 완료');
-  } catch (err) {
-    console.error('❌ SW User DB 저장 실패:', err);
-  }
-}
+const savePcToDB = () => apiBatchSave('http://localhost:3000/api/pc/batch', state.masterData.pc, '개인PC');
+const saveServerToDB = () => apiBatchSave('http://localhost:3000/api/server/batch', state.masterData.server, '서버');
+const saveStorageToDB = () => apiBatchSave('http://localhost:3000/api/storage/batch', state.masterData.storage, '스토리지');
+const saveEquipToDB = () => apiBatchSave('http://localhost:3000/api/equip/batch', state.masterData.equip, '전산비품');
+const saveSubSwToDB = () => apiBatchSave('http://localhost:3000/api/sw/sub/batch', state.masterData.subSw, '구독SW');
+const savePermSwToDB = () => apiBatchSave('http://localhost:3000/api/sw/perm/batch', state.masterData.permSw, '영구SW');
+const saveSwUsersToDB = () => apiBatchSave('http://localhost:3000/api/sw-users/batch', state.masterData.swUsers, 'SW사용자');
 
 // --- App Initialization ---
 function initApp() {
-  console.log('🚀 ITAM System Initializing...');
+  console.log('🚀 ITAM Dedicated System Initializing...');
   const mainContent = document.getElementById('main-content')!;
   if (!mainContent) return;
 
-  // 1. 전역 모달 및 내비게이션 초기화
   const { closeAllModals } = initBaseModal(); 
   
   try {
     renderNavigation((tab) => {
-      if (tab === '대시보드') {
-        renderDashboard(mainContent);
-      } else {
-        renderTable(mainContent);
-      }
+      if (tab === '대시보드') renderDashboard(mainContent);
+      else renderTable(mainContent);
     });
 
-    initPcModal(() => {
-      saveAllHwToDB(state.masterData.hw);
-      renderTable(mainContent);
-    }, closeAllModals);
-
+    // 각 모달 초기화 시 해당 카테고리의 저장 API만 호출하도록 콜백 연결
+    initPcModal(() => { savePcToDB(); renderTable(mainContent); }, closeAllModals);
     initHwModal(() => {
-      saveAllHwToDB(state.masterData.hw);
+      if (state.activeSubTab === '서버') saveServerToDB();
+      else if (state.activeSubTab === '스토리지') saveStorageToDB();
+      else if (state.activeSubTab === '전산비품') saveEquipToDB();
       renderTable(mainContent);
     }, closeAllModals); 
-    
-    initStorageModal(() => {
-      saveAllHwToDB(state.masterData.hw);
-      renderTable(mainContent);
-    }, closeAllModals);
-
+    initStorageModal(() => { saveStorageToDB(); renderTable(mainContent); }, closeAllModals);
     initSwModal(() => {
-      saveAllSwToDB(state.masterData.sw);
-      renderTable(mainContent);
-    }, closeAllModals);
-
-    initSwUserModal(() => {
-      saveAllSwUsersToDB(state.masterData.swUsers);
+      if (state.activeSubTab === '구독SW') saveSubSwToDB();
+      else savePermSwToDB();
       renderTable(mainContent);
     }, closeAllModals);
+    initSwUserModal(() => { saveSwUsersToDB(); renderTable(mainContent); }, closeAllModals);
 
     initDashboardDetailModal();
-  } catch (e) {
-    console.error('❌ Initialization failed:', e);
-  }
+  } catch (e) { console.error('❌ Initialization failed:', e); }
 
-  // 2. 초기 렌더링
   renderDashboard(mainContent);
 
-  // 3. 비동기 데이터 로드
   loadMasterDataFromDB().then((success) => {
     if (success) {
       if (state.activeSubTab === '대시보드') renderDashboard(mainContent);
@@ -114,7 +77,6 @@ function initApp() {
     }
   });
 
-  // 4. 이벤트 바인딩
   document.getElementById('btn-download-template')?.addEventListener('click', () => downloadTemplate());
   document.getElementById('btn-export-excel')?.addEventListener('click', () => exportToExcel(state.masterData));
   
@@ -124,11 +86,10 @@ function initApp() {
     if (file) {
       const data = await parseExcel(file);
       state.masterData = data;
-      // 엑셀 업로드 시 모든 카테고리 일괄 덮어쓰기 저장
+      // 엑셀 업로드 시 모든 카테고리 병렬 덮어쓰기
       await Promise.all([
-        saveAllHwToDB(data.hw),
-        saveAllSwToDB(data.sw),
-        saveAllSwUsersToDB(data.swUsers)
+        savePcToDB(), saveServerToDB(), saveStorageToDB(), saveEquipToDB(),
+        saveSubSwToDB(), savePermSwToDB(), saveSwUsersToDB()
       ]);
       renderTable(mainContent);
     }