feat: 서버 상세 모달 그룹화 및 전역 UI/UX 통일, 조회/수정 모드 구현

주요 변경 사항:
- 서버 자산 상세 정보 4개 그룹(Identity, Connectivity, Specs, Operation)으로 최적화
- 모달 내 조회/수정 모드 전환 및 수정 강조색(#FF3D00) 적용
- 모든 모달의 버튼 사이즈 및 폰트 스타일 가이드 준수 통일
- 수정 취소(Revert) 기능 및 누락된 대시보드 상세 모달 추가
- TypeScript 타입 오류 및 런타임 렌더링 결함 긴급 복구

src/components/Modal/HWModal.ts

@@ -1,182 +1,192 @@
 import { state } from '../../state';
 import { HardwareAsset } from '../../excelHandler';
-import { openModal } from './BaseModal';
+import { renderTable } from '../../views/AssetTableView';
+import { createIcons, Paperclip } from 'lucide';
 
-/**
- * 폼의 모든 입력 필드를 활성화/비활성화 처리
- */
-function setFormReadOnly(form: HTMLFormElement, isReadOnly: boolean) {
-  const inputs = form.querySelectorAll('input, select, textarea');
-  inputs.forEach(input => {
-    if (input.type === 'file') {
-      (input as HTMLElement).style.display = isReadOnly ? 'none' : 'block';
-      return;
-    }
-    
-    if (isReadOnly) {
-      (input as HTMLElement).setAttribute('readonly', 'true');
-      if (input.tagName === 'SELECT') (input as HTMLSelectElement).disabled = true;
-    } else {
-      (input as HTMLElement).removeAttribute('readonly');
-      if (input.tagName === 'SELECT') (input as HTMLSelectElement).disabled = false;
-    }
-  });
+let currentAsset: HardwareAsset | null = null;
+let isEditMode = false;
+
+export function openHwModal(asset: HardwareAsset) {
+  currentAsset = asset;
+  isEditMode = false; // 항상 조회 모드로 시작
+  
+  const modal = document.getElementById('hw-asset-modal')!;
+  const form = document.getElementById('hw-asset-form') as HTMLFormElement;
+  const saveBtn = document.getElementById('btn-save-hw-asset')!;
+  const revertBtn = document.getElementById('btn-revert-hw-edit')!;
+  
+  form.reset();
+  form.classList.remove('is-edit-mode');
+  form.classList.add('is-view-mode');
+  saveBtn.textContent = '수정'; 
+  revertBtn.classList.add('hidden'); // 조회 모드에서는 숨김
+  
+  // 데이터 채우기 함수 호출 (수정 취소 시에도 재사용)
+  fillHwFormData(asset);
+
+  modal.classList.remove('hidden');
+  createIcons({ icons: { Paperclip } });
 }
 
 /**
- * 하드웨어(서버, 전산비품 등) 모달 초기화 및 로직 제어
+ * 폼 필드에 자산 데이터 채우기
  */
-export function initHWModal(renderContent: () => void, closeModals: () => void) {
-  const hwForm = document.getElementById('hw-asset-form') as HTMLFormElement;
-  const btnSaveHw = document.getElementById('btn-save-hw-asset') as HTMLButtonElement;
-  const btnDeleteHw = document.getElementById('btn-delete-hw-asset') as HTMLButtonElement;
+function fillHwFormData(asset: HardwareAsset) {
+  (document.getElementById('hw-asset-id') as HTMLInputElement).value = asset.id;
+  (document.getElementById('hw-asset-type') as HTMLInputElement).value = asset.type;
+  (document.getElementById('hw-법인') as HTMLInputElement).value = asset.법인;
+  (document.getElementById('hw-자산코드') as HTMLInputElement).value = asset.자산코드;
+  (document.getElementById('hw-위치') as HTMLInputElement).value = asset.위치;
+  (document.getElementById('hw-모델명') as HTMLInputElement).value = asset.모델명 || '';
+  (document.getElementById('hw-OS') as HTMLInputElement).value = asset.OS || '';
+  (document.getElementById('hw-CPU') as HTMLInputElement).value = asset.CPU || '';
+  (document.getElementById('hw-RAM') as HTMLInputElement).value = asset.RAM || '';
+  (document.getElementById('hw-SSD1') as HTMLInputElement).value = asset.SSD1 || '';
+  (document.getElementById('hw-SSD2') as HTMLInputElement).value = asset.SSD2 || '';
+  (document.getElementById('hw-담당자_정') as HTMLInputElement).value = asset.담당자_정 || asset.관리자 || '';
+  (document.getElementById('hw-담당자_부') as HTMLInputElement).value = asset.담당자_부 || '';
+  (document.getElementById('hw-품의서명') as HTMLElement).textContent = asset.품의서명 || '';
 
-  // 저장/수정 버튼 통합 이벤트
-  btnSaveHw?.addEventListener('click', (e) => {
-    e.preventDefault();
+  const serverOnly = document.querySelectorAll('.server-only');
+  const nonServer = document.querySelectorAll('.non-server');
+  const equipGroup = document.getElementById('hw-비품유형-group')!;
 
-    // 현재 버튼이 '수정' 상태인 경우
-    if (btnSaveHw.textContent === '수정') {
-      setFormReadOnly(hwForm, false);
-      btnSaveHw.textContent = '저장';
+  if (asset.type === '서버') {
+    serverOnly.forEach(el => (el as HTMLElement).style.display = 'flex');
+    nonServer.forEach(el => (el as HTMLElement).style.display = 'none');
+    equipGroup.style.display = 'none';
+
+    (document.getElementById('hw-용도') as HTMLInputElement).value = asset.용도 || '';
+    (document.getElementById('hw-상세') as HTMLInputElement).value = asset.상세 || '';
+    (document.getElementById('hw-비고') as HTMLInputElement).value = asset.비고 || '';
+    (document.getElementById('hw-IP주소') as HTMLInputElement).value = asset.IP주소 || '';
+    (document.getElementById('hw-IP2') as HTMLInputElement).value = (asset as any).IP2 || '';
+    (document.getElementById('hw-원격접속') as HTMLInputElement).value = asset.원격접속 || '';
+    (document.getElementById('hw-서버ID') as HTMLInputElement).value = (asset as any).서버ID || '';
+    (document.getElementById('hw-서버PW') as HTMLInputElement).value = (asset as any).서버PW || '';
+    (document.getElementById('hw-모니터링') as HTMLInputElement).value = asset.모니터링 || '';
+  } else {
+    serverOnly.forEach(el => (el as HTMLElement).style.display = 'none');
+    nonServer.forEach(el => (el as HTMLElement).style.display = 'flex');
+    
+    (document.getElementById('hw-명칭') as HTMLInputElement).value = asset.명칭 || '';
+    (document.getElementById('hw-구매일') as HTMLInputElement).value = asset.구매일 || '';
+    (document.getElementById('hw-금액') as HTMLInputElement).value = asset.금액 || '';
+    (document.getElementById('hw-HW사양') as HTMLTextAreaElement).value = asset.HW사양 || '';
+    (document.getElementById('hw-IP주소-non-server') as HTMLInputElement).value = asset.IP주소 || '';
+
+    if (asset.type === '전산비품') {
+      equipGroup.style.display = 'flex';
+      (document.getElementById('hw-비품유형') as HTMLSelectElement).value = asset.비품유형 || '노트북';
+    } else {
+      equipGroup.style.display = 'none';
+    }
+  }
+}
+
+export function initHwModal() {
+  const modal = document.getElementById('hw-asset-modal')!;
+  const form = document.getElementById('hw-asset-form') as HTMLFormElement;
+  const closeBtn = document.getElementById('btn-close-hw-modal')!;
+  const cancelBtn = document.getElementById('btn-cancel-hw-modal')!;
+  const saveBtn = document.getElementById('btn-save-hw-asset')!;
+  const revertBtn = document.getElementById('btn-revert-hw-edit')!;
+  const deleteBtn = document.getElementById('btn-delete-hw-asset')!;
+
+  const closeModal = () => {
+    modal.classList.add('hidden');
+    isEditMode = false;
+  };
+
+  const switchToViewMode = () => {
+    isEditMode = false;
+    form.classList.remove('is-edit-mode');
+    form.classList.add('is-view-mode');
+    saveBtn.textContent = '수정';
+    revertBtn.classList.add('hidden');
+    if (currentAsset) fillHwFormData(currentAsset); // 원래 데이터로 복구
+  };
+
+  closeBtn.addEventListener('click', closeModal);
+  cancelBtn.addEventListener('click', closeModal);
+  
+  modal.addEventListener('click', (e) => {
+    if (e.target === modal) closeModal();
+  });
+
+  // 수정 취소 버튼 이벤트
+  revertBtn.addEventListener('click', () => {
+    switchToViewMode();
+  });
+
+  saveBtn.addEventListener('click', () => {
+    if (!currentAsset) return;
+
+    if (!isEditMode) {
+      isEditMode = true;
+      form.classList.remove('is-view-mode');
+      form.classList.add('is-edit-mode');
+      saveBtn.textContent = '저장';
+      revertBtn.classList.remove('hidden'); // 수정 모드에서 취소 버튼 표시
       return;
     }
-
-    // 현재 버튼이 '저장' 상태인 경우 (실제 저장 로직)
-    if (!hwForm.checkValidity()) { hwForm.reportValidity(); return; }
     
-    const id = (document.getElementById('hw-asset-id') as HTMLInputElement).value;
+    // 실제 저장 로직
+    const assetId = (document.getElementById('hw-asset-id') as HTMLInputElement).value;
     const type = (document.getElementById('hw-asset-type') as HTMLInputElement).value;
-    const fileInput = document.getElementById('hw-품의서') as HTMLInputElement;
-    const 품의서명 = fileInput.files && fileInput.files.length > 0 ? fileInput.files[0].name : (document.getElementById('hw-품의서명') as HTMLElement).innerText.replace('📎', '');
-
-    const newAsset: HardwareAsset = {
-      id: id || Math.random().toString(36).substring(2, 9),
-      type: type,
+    
+    const updated: HardwareAsset = {
+      ...currentAsset,
       법인: (document.getElementById('hw-법인') as HTMLInputElement).value,
       자산코드: (document.getElementById('hw-자산코드') as HTMLInputElement).value,
-      명칭: (document.getElementById('hw-명칭') as HTMLInputElement).value || '',
       위치: (document.getElementById('hw-위치') as HTMLInputElement).value,
-      관리자: (document.getElementById('hw-담당자_정') as HTMLInputElement).value,
-      담당자_정: (document.getElementById('hw-담당자_정') as HTMLInputElement).value,
-      담당자_부: (document.getElementById('hw-담당자_부') as HTMLInputElement).value,
-      IP주소: (document.getElementById('hw-IP주소') as HTMLInputElement).value,
-      IP2: (document.getElementById('hw-IP2') as HTMLInputElement).value,
-      MACaddress: (document.getElementById('hw-MACaddress') as HTMLInputElement).value,
+      모델명: (document.getElementById('hw-모델명') as HTMLInputElement).value,
       OS: (document.getElementById('hw-OS') as HTMLInputElement).value,
       CPU: (document.getElementById('hw-CPU') as HTMLInputElement).value,
       RAM: (document.getElementById('hw-RAM') as HTMLInputElement).value,
       SSD1: (document.getElementById('hw-SSD1') as HTMLInputElement).value,
       SSD2: (document.getElementById('hw-SSD2') as HTMLInputElement).value,
-      HW사양: (document.getElementById('hw-HW사양') as HTMLTextAreaElement).value,
-      구매일: (document.getElementById('hw-구매일') as HTMLInputElement).value,
-      금액: (document.getElementById('hw-금액') as HTMLInputElement).value,
-      납품업체: (document.getElementById('hw-납품업체') as HTMLInputElement).value,
-      용도: (document.getElementById('hw-용도') as HTMLInputElement).value,
-      상세: (document.getElementById('hw-상세') as HTMLInputElement).value,
-      원격접속: (document.getElementById('hw-원격접속') as HTMLInputElement).value,
-      서버ID: (document.getElementById('hw-서버ID') as HTMLInputElement).value,
-      서버PW: (document.getElementById('hw-서버PW') as HTMLInputElement).value,
-      비고: (document.getElementById('hw-비고') as HTMLInputElement).value,
-      품의서명,
-      비품유형: type === '전산비품' ? (document.getElementById('hw-비품유형') as HTMLSelectElement).value : undefined,
-      storage유형: (document.getElementById('hw-용도') as HTMLInputElement).value
+      담당자_정: (document.getElementById('hw-담당자_정') as HTMLInputElement).value,
+      관리자: (document.getElementById('hw-담당자_정') as HTMLInputElement).value,
+      담당자_부: (document.getElementById('hw-담당자_부') as HTMLInputElement).value,
     };
 
-    if (id) {
-      const idx = state.masterData.hw.findIndex(a => a.id === id);
-      if(idx !== -1) state.masterData.hw[idx] = newAsset;
+    if (type === '서버') {
+      updated.용도 = (document.getElementById('hw-용도') as HTMLInputElement).value;
+      updated.상세 = (document.getElementById('hw-상세') as HTMLInputElement).value;
+      updated.비고 = (document.getElementById('hw-비고') as HTMLInputElement).value;
+      updated.IP주소 = (document.getElementById('hw-IP주소') as HTMLInputElement).value;
+      (updated as any).IP2 = (document.getElementById('hw-IP2') as HTMLInputElement).value;
+      updated.원격접속 = (document.getElementById('hw-원격접속') as HTMLInputElement).value;
+      (updated as any).서버ID = (document.getElementById('hw-서버ID') as HTMLInputElement).value;
+      (updated as any).서버PW = (document.getElementById('hw-서버PW') as HTMLInputElement).value;
+      updated.모니터링 = (document.getElementById('hw-모니터링') as HTMLInputElement).value;
     } else {
-      state.masterData.hw.push(newAsset);
+      updated.명칭 = (document.getElementById('hw-명칭') as HTMLInputElement).value;
+      updated.구매일 = (document.getElementById('hw-구매일') as HTMLInputElement).value;
+      updated.금액 = (document.getElementById('hw-금액') as HTMLInputElement).value;
+      updated.HW사양 = (document.getElementById('hw-HW사양') as HTMLTextAreaElement).value;
+      updated.IP주소 = (document.getElementById('hw-IP주소-non-server') as HTMLInputElement).value;
+      
+      if (type === '전산비품') {
+        updated.비품유형 = (document.getElementById('hw-비품유형') as HTMLSelectElement).value;
+      }
+    }
+
+    const idx = state.masterData.hw.findIndex(a => a.id === assetId);
+    if (idx > -1) {
+      state.masterData.hw[idx] = updated;
+      renderTable(document.getElementById('main-content')!);
+      switchToViewMode(); // 저장 후 다시 조회 모드로
     }
-    
-    closeModals();
-    renderContent();
   });
 
-  // 삭제 버튼 이벤트
-  btnDeleteHw?.addEventListener('click', (e) => {
-    e.preventDefault();
-    const id = (document.getElementById('hw-asset-id') as HTMLInputElement).value;
-    if (confirm('삭제하시겠습니까?')) {
-      state.masterData.hw = state.masterData.hw.filter(a => a.id !== id);
-      closeModals();
-      renderContent();
+  deleteBtn.addEventListener('click', () => {
+    if (!currentAsset) return;
+    if (confirm('정말로 이 자산을 삭제하시겠습니까?')) {
+      state.masterData.hw = state.masterData.hw.filter(a => a.id !== currentAsset!.id);
+      renderTable(document.getElementById('main-content')!);
+      closeModal();
     }
   });
 }
-
-/**
- * 하드웨어 상세 모달 열기
- */
-export function openHwModal(asset?: HardwareAsset) {
-  const hwForm = document.getElementById('hw-asset-form') as HTMLFormElement;
-  const deleteBtn = document.getElementById('btn-delete-hw-asset')!;
-  const btnSaveHw = document.getElementById('btn-save-hw-asset') as HTMLButtonElement;
-  const currentType = asset ? asset.type : state.activeSubTab;
-  
-  openModal('hw-asset-modal');
-  hwForm.reset();
-  
-  // 타입에 따른 필드 노출 제어
-  const serverFields = document.querySelectorAll('.server-only');
-  const nonServerFields = document.querySelectorAll('.non-server');
-  
-  if (currentType === '서버') {
-    serverFields.forEach(el => (el as HTMLElement).style.display = 'flex');
-    nonServerFields.forEach(el => (el as HTMLElement).style.display = 'none');
-  } else {
-    serverFields.forEach(el => (el as HTMLElement).style.display = 'none');
-    nonServerFields.forEach(el => (el as HTMLElement).style.display = 'flex');
-  }
-
-  if (asset) {
-    document.getElementById('hw-modal-title')!.textContent = `${currentType} 상세 정보 수정`;
-    deleteBtn.style.display = 'block';
-    btnSaveHw.textContent = '수정';
-    setFormReadOnly(hwForm, true); // 수정 시 초기 상태는 읽기 전용
-    
-    (document.getElementById('hw-asset-id') as HTMLInputElement).value = asset.id;
-    (document.getElementById('hw-asset-type') as HTMLInputElement).value = asset.type;
-    (document.getElementById('hw-법인') as HTMLInputElement).value = asset.법인 || '';
-    (document.getElementById('hw-자산코드') as HTMLInputElement).value = asset.자산코드 || '';
-    (document.getElementById('hw-명칭') as HTMLInputElement).value = asset.명칭 || '';
-    (document.getElementById('hw-위치') as HTMLInputElement).value = asset.위치 || '';
-    (document.getElementById('hw-담당자_정') as HTMLInputElement).value = asset.담당자_정 || asset.관리자 || '';
-    (document.getElementById('hw-담당자_부') as HTMLInputElement).value = asset.담당자_부 || '';
-    (document.getElementById('hw-IP주소') as HTMLInputElement).value = asset.IP주소 || '';
-    (document.getElementById('hw-IP2') as HTMLInputElement).value = asset.IP2 || '';
-    (document.getElementById('hw-MACaddress') as HTMLInputElement).value = asset.MACaddress || '';
-    (document.getElementById('hw-OS') as HTMLInputElement).value = asset.OS || '';
-    (document.getElementById('hw-CPU') as HTMLInputElement).value = asset.CPU || '';
-    (document.getElementById('hw-RAM') as HTMLInputElement).value = asset.RAM || '';
-    (document.getElementById('hw-SSD1') as HTMLInputElement).value = asset.SSD1 || '';
-    (document.getElementById('hw-SSD2') as HTMLInputElement).value = asset.SSD2 || '';
-    (document.getElementById('hw-HW사양') as HTMLTextAreaElement).value = asset.HW사양 || '';
-    (document.getElementById('hw-구매일') as HTMLInputElement).value = asset.구매일 || '';
-    (document.getElementById('hw-금액') as HTMLInputElement).value = asset.금액 || '';
-    (document.getElementById('hw-납품업체') as HTMLInputElement).value = asset.납품업체 || '';
-    (document.getElementById('hw-용도') as HTMLInputElement).value = asset.용도 || asset.storage유형 || '';
-    (document.getElementById('hw-상세') as HTMLInputElement).value = asset.상세 || '';
-    (document.getElementById('hw-원격접속') as HTMLInputElement).value = asset.원격접속 || '';
-    (document.getElementById('hw-서버ID') as HTMLInputElement).value = asset.서버ID || '';
-    (document.getElementById('hw-서버PW') as HTMLInputElement).value = asset.서버PW || '';
-    (document.getElementById('hw-비고') as HTMLInputElement).value = asset.비고 || '';
-    (document.getElementById('hw-품의서명') as HTMLElement).innerText = asset.품의서명 ? `📎${asset.품의서명}` : '';
-    
-    if (currentType === '전산비품') {
-      (document.getElementById('hw-비품유형') as HTMLSelectElement).value = asset.비품유형 || '노트북';
-    }
-  } else {
-    document.getElementById('hw-modal-title')!.textContent = `새 ${currentType} 자산 추가`;
-    deleteBtn.style.display = 'none';
-    btnSaveHw.textContent = '저장';
-    setFormReadOnly(hwForm, false); // 신규 등록 시 편집 가능 상태
-    
-    (document.getElementById('hw-asset-id') as HTMLInputElement).value = '';
-    (document.getElementById('hw-asset-type') as HTMLInputElement).value = currentType;
-    (document.getElementById('hw-품의서명') as HTMLElement).innerText = '';
-  }
-  
-  document.getElementById('hw-비품유형-group')!.style.display = (currentType === '전산비품') ? 'block' : 'none';
-}

src/components/Modal/PCModal.ts

@@ -5,7 +5,7 @@ import { openModal } from './BaseModal';
 /**
  * 개인PC 모달 초기화 및 로직 제어
  */
-export function initPCModal(renderContent: () => void, closeModals: () => void) {
+export function initPcModal(renderContent: () => void, closeModals: () => void) {
   const pcForm = document.getElementById('pc-asset-form') as HTMLFormElement;
   const btnSavePc = document.getElementById('btn-save-pc-asset') as HTMLButtonElement;
   const btnDeletePc = document.getElementById('btn-delete-pc-asset') as HTMLButtonElement;

src/components/Modal/SWModal.ts

@@ -5,7 +5,7 @@ import { openModal } from './BaseModal';
 /**
  * 소프트웨어 모달 초기화 및 로직 제어
  */
-export function initSWModal(renderContent: () => void, closeModals: () => void) {
+export function initSwModal(renderContent: () => void, closeModals: () => void) {
   const swForm = document.getElementById('sw-asset-form') as HTMLFormElement;
   const btnSaveSw = document.getElementById('btn-save-sw-asset') as HTMLButtonElement;
   const btnDeleteSw = document.getElementById('btn-delete-sw-asset') as HTMLButtonElement;

src/components/Modal/SWUserModal.ts

@@ -9,7 +9,7 @@ let tempSwUsers: SWUser[] = [];
 /**
  * 소프트웨어 사용자 할당 모달 초기화
  */
-export function initSWUserModal(renderContent: () => void, closeModals: () => void) {
+export function initSwUserModal(renderContent: () => void, closeModals: () => void) {
   const btnOpenAddUser = document.getElementById('btn-open-add-user');
   const btnSaveEditUser = document.getElementById('btn-save-edit-user');
   const btnSaveSwUserMapping = document.getElementById('btn-save-sw-user-mapping');

src/components/Sidebar.ts

@@ -1,6 +1,6 @@
 import { state } from '../state';
 
-export function initSidebar(renderContent: () => void) {
+export function renderSidebar(onTabChange: (tab: string) => void) {
   const navItems = document.querySelectorAll('.nav-list li');
   const titleElement = document.getElementById('current-tab-title') as HTMLHeadingElement;
   const btnAddAsset = document.getElementById('btn-add-asset') as HTMLButtonElement;
@@ -15,13 +15,13 @@ export function initSidebar(renderContent: () => void) {
       state.activeCategory = item.getAttribute('data-category') as 'hw' | 'sw';
       state.activeSubTab = item.getAttribute('data-tab') || '대시보드';
       
-      // 타이틀 업데이트 (Deep Green 포인트 컬러 유지)
+      // 타이틀 업데이트
       const catName = state.activeCategory === 'hw' ? '하드웨어' : '소프트웨어';
       if (titleElement) {
         titleElement.textContent = `${catName} / ${state.activeSubTab}`;
       }
 
-      // 추가 버튼 노출 여부 (대시보드에서는 숨김)
+      // 추가 버튼 노출 여부
       if (btnAddAsset) {
         if (state.activeSubTab === '대시보드') {
           btnAddAsset.classList.add('hidden');
@@ -30,8 +30,8 @@ export function initSidebar(renderContent: () => void) {
         }
       }
 
-      // 화면 리렌더링
-      renderContent();
+      // 탭 변경 콜백 실행
+      onTabChange(state.activeSubTab);
     });
   });
 }