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

주요 변경 사항: - 서버 자산 상세 정보 4개 그룹(Identity, Connectivity, Specs, Operation)으로 최적화 - 모달 내 조회/수정 모드 전환 및 수정 강조색(#FF3D00) 적용 - 모든 모달의 버튼 사이즈 및 폰트 스타일 가이드 준수 통일 - 수정 취소(Revert) 기능 및 누락된 대시보드 상세 모달 추가 - TypeScript 타입 오류 및 런타임 렌더링 결함 긴급 복구
2026-04-15 12:15:59 +09:00
parent 3c28c664da
commit 7c4ccf6bba
16 changed files with 743 additions and 520 deletions
--- a/src/views/AssetTableView.ts
+++ b/src/views/AssetTableView.ts
@@ -10,6 +10,7 @@ import { openSwUserModal } from '../components/Modal/SWUserModal';
 * 자산 목록 테이블 렌더링 메인 함수
 */
 export function renderTable(mainContent: HTMLElement) {
+  mainContent.innerHTML = ''; // 기존 내용 삭제 (중요)
  const container = document.createElement('div');
  container.className = 'view-container'; 
  const table = document.createElement('table');
@@ -41,7 +42,7 @@ function renderHwTable(table: HTMLTableElement, container: HTMLElement, mainCont
    list.forEach((asset, idx) => {
      const tr = document.createElement('tr');
      tr.style.cursor = 'pointer';
-      tr.innerHTML = `<td>${idx+1}</td><td>${asset.법인}</td><td>${asset.자산코드}</td><td>${asset.사용자||''}</td><td>${asset.위치||''}</td><td>${asset.CPU||''}</td><td>${asset.GPU||''}</td><td>${asset.RAM||''}</td><td>${asset.SSD1||'-'}</td><td>${asset.SSD2||'-'}</td><td>${asset.HDD1||'-'}</td><td>${asset.HDD2||'-'}</td><td>${asset.구매일||''}</td><td>${asset.금액||''}</td><td>${asset.납품업체||''}</td><td style="text-align:center;">${asset.품의서명 ? '<i data-lucide="paperclip" class="text-primary"></i>' : '-'}</td><td><button class="btn-outline btn-edit">수정</button></td>`;
+      tr.innerHTML = `<td>${idx+1}</td><td>${asset.법인}</td><td>${asset.자산코드}</td><td>${asset.사용자||''}</td><td>${asset.위치||''}</td><td>${asset.CPU||''}</td><td>${asset.GPU||''}</td><td>${asset.RAM||''}</td><td>${asset.SSD1||'-'}</td><td>${asset.SSD2||'-'}</td><td>${asset.HDD1||'-'}</td><td>${asset.HDD2||'-'}</td><td>${asset.구매일||''}</td><td>${asset.금액||''}</td><td>${asset.납품업체||''}</td><td style="text-align:center;">${asset.품의서명 ? '<i data-lucide="paperclip" class="text-primary"></i>' : '-'}</td><td><button class="btn btn-outline btn-sm btn-edit">수정</button></td>`;
      tr.addEventListener('click', (e) => { if (!(e.target as HTMLElement).closest('button')) openPcModal(asset); });
      tr.querySelector('.btn-edit')?.addEventListener('click', () => openPcModal(asset));
      tbody.appendChild(tr);
@@ -56,7 +57,7 @@ function renderHwTable(table: HTMLTableElement, container: HTMLElement, mainCont
    list.forEach((asset, idx) => {
      const tr = document.createElement('tr');
      tr.style.cursor = 'pointer';
-      tr.innerHTML = `<td>${idx+1}</td><td>${asset.법인}</td><td>${asset.storage유형||''}</td><td>${asset.자산코드}</td><td>${asset.명칭}</td><td>${asset.위치||''}</td><td>${asset.모델명||''}</td><td>${asset.용량||''}</td><td>${asset.담당자_정||''}</td><td>${asset.IP주소||''}</td><td>${asset.구매일||''}</td><td>${asset.금액||''}</td><td><button class="btn-outline btn-edit">수정</button></td>`;
+      tr.innerHTML = `<td>${idx+1}</td><td>${asset.법인}</td><td>${asset.storage유형||''}</td><td>${asset.자산코드}</td><td>${asset.명칭}</td><td>${asset.위치||''}</td><td>${asset.모델명||''}</td><td>${asset.용량||''}</td><td>${asset.담당자_정||''}</td><td>${asset.IP주소||''}</td><td>${asset.구매일||''}</td><td>${asset.금액||''}</td><td><button class="btn btn-outline btn-sm btn-edit">수정</button></td>`;
      tr.addEventListener('click', (e) => { if (!(e.target as HTMLElement).closest('button')) openStorageModal(asset); });
      tr.querySelector('.btn-edit')?.addEventListener('click', () => openStorageModal(asset));
      tbody.appendChild(tr);
@@ -158,7 +159,7 @@ function renderHwTable(table: HTMLTableElement, container: HTMLElement, mainCont
        `;
        tr.addEventListener('click', (e) => { if (!(e.target as HTMLElement).closest('button')) openHwModal(asset); });
      } else {
-        tr.innerHTML = `<td>${idx+1}</td><td>${asset.법인}</td>${state.activeSubTab === '전산비품' ? `<td>${asset.비품유형||'-'}</td>` : ''}<td>${asset.자산코드}</td><td>${asset.명칭}</td><td>${asset.위치}</td><td>${asset.관리자}</td><td>${asset.구매일||''}</td><td>${asset.금액||''}</td><td><button class="btn-outline btn-edit">수정</button></td>`;
+        tr.innerHTML = `<td>${idx+1}</td><td>${asset.법인}</td>${state.activeSubTab === '전산비품' ? `<td>${asset.비품유형||'-'}</td>` : ''}<td>${asset.자산코드}</td><td>${asset.명칭}</td><td>${asset.위치}</td><td>${asset.관리자}</td><td>${asset.구매일||''}</td><td>${asset.금액||''}</td><td><button class="btn btn-outline btn-sm btn-edit">수정</button></td>`;
        tr.addEventListener('click', (e) => { if (!(e.target as HTMLElement).closest('button')) openHwModal(asset); });
      }
      tbody.appendChild(tr);
@@ -255,10 +256,6 @@ function renderSwTable(table: HTMLTableElement, container: HTMLElement, mainCont
    createIcons({
      icons: { Edit2, Users, RefreshCcw } 
    });
-    // 초기화 버튼 아이콘은 별도로
-    createIcons({
-      scope: filterBar
-    });
  };

  // 4. 이벤트 바인딩
--- a/src/views/DashboardView.ts
+++ b/src/views/DashboardView.ts
@@ -7,12 +7,15 @@ declare var Chart: any;
 * 대시보드 렌더링 메인 함수
 */
 export function renderDashboard(mainContent: HTMLElement) {
+  if (!mainContent) return;
  mainContent.innerHTML = '';

  // 기존 차트 리소스 해제
-  state.activeCharts.forEach(c => {
-    if (c && typeof c.destroy === 'function') c.destroy();
-  });
+  if (state.activeCharts) {
+    state.activeCharts.forEach(c => {
+      if (c && typeof c.destroy === 'function') c.destroy();
+    });
+  }
  state.activeCharts = [];

  if (state.activeCategory === 'hw') {
@@ -41,7 +44,6 @@ function renderHwDashboard(container: HTMLElement) {
    else groups[a.type].normal.push(a);
  });

-  // 사용현황 카드 생성
  let usageCards = '';
  types.forEach((t, i) => {
    const total = groups[t].idle.length + groups[t].active.length;
@@ -69,7 +71,6 @@ function renderHwDashboard(container: HTMLElement) {
      </div>`;
  });

-  // 노후화 카드 생성
  let agedCards = '';
  types.forEach((t, i) => {
    const total = groups[t].aged.length + groups[t].normal.length;
@@ -104,7 +105,6 @@ function renderHwDashboard(container: HTMLElement) {
    <div class="dashboard-layout-2col">${agedCards}</div>
  `;

-  // 클릭 이벤트 바인딩
  container.querySelectorAll('[data-action="idle"]').forEach(card => {
    card.addEventListener('click', () => {
      const t = card.getAttribute('data-type')!;
@@ -135,7 +135,7 @@ function renderSwDashboard(container: HTMLElement) {
  state.masterData.sw.forEach(sw => {
     const assigned = state.masterData.swUsers.filter(u => u.swId === sw.id).length;
     const qty = typeof sw.수량 === 'number' ? sw.수량 : parseInt(sw.수량||'0', 10);
-     const priceStr = sw.금액 ? sw.금액.replace(/,/g, '') : '0';
+     const priceStr = sw.금액 ? String(sw.금액).replace(/,/g, '') : '0';
     const price = parseInt(priceStr, 10) || 0;

     if (sw.type === '구독SW') {
@@ -146,7 +146,6 @@ function renderSwDashboard(container: HTMLElement) {
       if (isSWExpiring(sw)) permExp++;
     }

-     // 오늘이 속해있는 년도(2026)의 사용 금액 합계
     if (sw.구매일 && sw.구매일.startsWith(currentYear)) {
       if (costByCorp[sw.법인] !== undefined) costByCorp[sw.법인] += price;
       if (sw.분야 && costByCat[sw.분야] !== undefined) costByCat[sw.분야] += price;
@@ -232,7 +231,6 @@ function renderSwDashboard(container: HTMLElement) {
    </div>
  `;

-  // 차트 생성
  setTimeout(() => {
    const ctxCorp = (document.getElementById('chart-cost-corp') as HTMLCanvasElement)?.getContext('2d');
    const ctxCat = (document.getElementById('chart-cost-cat') as HTMLCanvasElement)?.getContext('2d');
@@ -247,7 +245,7 @@ function renderSwDashboard(container: HTMLElement) {
            data: corps.map(c => costByCorp[c]),
            backgroundColor: '#3b82f6',
            borderRadius: 4,
-            barThickness: 20 // 막대 두께 줄임
+            barThickness: 20
          }]
        },
        options: {
@@ -258,11 +256,9 @@ function renderSwDashboard(container: HTMLElement) {
            y: { 
              beginAtZero: true, 
              ticks: { callback: (v: any) => v.toLocaleString() },
-              grid: { display: false } // 가로줄 삭제
-            },
-            x: {
              grid: { display: false }
-            }
+            },
+            x: { grid: { display: false } }
          }
        }
      });
@@ -279,7 +275,7 @@ function renderSwDashboard(container: HTMLElement) {
            data: categories.map(c => costByCat[c]),
            backgroundColor: '#10b981',
            borderRadius: 4,
-            barThickness: 20 // 막대 두께 줄임
+            barThickness: 20
          }]
        },
        options: {
@@ -290,11 +286,9 @@ function renderSwDashboard(container: HTMLElement) {
            y: { 
              beginAtZero: true, 
              ticks: { callback: (v: any) => v.toLocaleString() },
-              grid: { display: false } // 가로줄 삭제
-            },
-            x: {
              grid: { display: false }
-            }
+            },
+            x: { grid: { display: false } }
          }
        }
      });
@@ -302,7 +296,6 @@ function renderSwDashboard(container: HTMLElement) {
    }
  }, 0);

-  // 클릭 이벤트 바인딩
  container.querySelector('[data-action="sub-usage"]')?.addEventListener('click', () => {
    openSwUsageDetail('구독 소프트웨어 사용 목록', state.masterData.sw.filter(sw => sw.type === '구독SW'));
  });
@@ -317,7 +310,6 @@ function renderSwDashboard(container: HTMLElement) {
  });
 }

-// --- 공통 헬퍼 함수들 ---
 function isHwIdle(a: HardwareAsset) {
  if (a.type === '개인PC') return !a.사용자 || a.사용자.trim() === '' || a.사용자.trim() === '-';
  if (a.type === '스토리지') return !a.담당자_정 || a.담당자_정.trim() === '' || a.담당자_정.trim() === '-';
@@ -326,7 +318,11 @@ function isHwIdle(a: HardwareAsset) {

 function getHwAgeYears(a: HardwareAsset) {
  if (!a.구매일) return 0;
-  return (Date.now() - new Date(a.구매일).getTime()) / (1000 * 60 * 60 * 24 * 365.25);
+  try {
+    const buyDate = new Date(a.구매일.replace(/\./g, '-'));
+    if (isNaN(buyDate.getTime())) return 0;
+    return (Date.now() - buyDate.getTime()) / (1000 * 60 * 60 * 24 * 365.25);
+  } catch { return 0; }
 }

 function isSWExpiring(sw: SoftwareAsset) {
@@ -339,29 +335,30 @@ function isSWExpiring(sw: SoftwareAsset) {
      return diffDays >= 0 && diffDays <= 30;
    }
  } else if (sw.type === '영구SW' && sw.비고 && sw.비고.includes('유지보수: ~')) {
-    const endStr = sw.비고.split('~')[1].trim();
-    const endMs = new Date(endStr.replace(/\./g, '-')).getTime();
-    const diffDays = (endMs - Date.now()) / (1000 * 60 * 60 * 24);
-    return diffDays >= 0 && diffDays <= 30;
+    try {
+      const endStr = sw.비고.split('~')[1].trim();
+      const endMs = new Date(endStr.replace(/\./g, '-')).getTime();
+      const diffDays = (endMs - Date.now()) / (1000 * 60 * 60 * 24);
+      return diffDays >= 0 && diffDays <= 30;
+    } catch { return false; }
  }
  return false;
 }

-// --- 대시보드 상세 모달 제어 (main.ts의 함수 재사용 또는 이동 필요) ---
-// 일단 main.ts에 있는 함수를 전역에서 가져와 쓸 수 없으므로, 여기서 직접 정의하거나 main.ts에서 export 해야 합니다.
-// 구조 개선을 위해 main.ts에서 이 함수들도 DashboardView로 옮기는 것이 좋습니다.
-
 function openDashboardDetail(title: string, list: HardwareAsset[]) {
-  const modal = document.getElementById('dashboard-detail-modal') as HTMLDivElement;
-  const titleEl = document.getElementById('dashboard-detail-modal-title') as HTMLHeadingElement;
-  const tbody = document.getElementById('dashboard-detail-tbody') as HTMLTableSectionElement;
-  const thead = tbody.closest('table')!.querySelector('thead')!;
+  const modal = document.getElementById('dashboard-detail-modal');
+  if (!modal) return;
+  const titleEl = document.getElementById('dashboard-detail-modal-title');
+  const tbody = document.getElementById('dashboard-detail-tbody');
+  if (!titleEl || !tbody) return;
+  const thead = tbody.closest('table')?.querySelector('thead');
+  if (!thead) return;

  titleEl.textContent = title;
  thead.innerHTML = `<tr><th>No</th><th>유형</th><th>자산코드</th><th>명칭/모델</th><th>위치</th><th>담당/사용자</th><th>구매일</th><th>금액</th></tr>`;
  tbody.innerHTML = '';
  if (list.length === 0) {
-    tbody.innerHTML = `<tr><td colspan="8" style="text-align:center;">해당 조건의 자산이 없습니다.</td></tr>`;
+    tbody.innerHTML = `<tr><td colspan="8" style="text-align:center; padding: 2rem;">해당 조건의 자산이 없습니다.</td></tr>`;
  } else {
    list.forEach((asset, idx) => {
      let manager = asset.관리자 || asset.사용자 || asset.담당자_정 || '-';
@@ -375,10 +372,13 @@ function openDashboardDetail(title: string, list: HardwareAsset[]) {
 }

 function openSwDashboardDetail(title: string, list: SoftwareAsset[]) {
-  const modal = document.getElementById('dashboard-detail-modal') as HTMLDivElement;
-  const titleEl = document.getElementById('dashboard-detail-modal-title') as HTMLHeadingElement;
-  const tbody = document.getElementById('dashboard-detail-tbody') as HTMLTableSectionElement;
-  const thead = tbody.closest('table')!.querySelector('thead')!;
+  const modal = document.getElementById('dashboard-detail-modal');
+  if (!modal) return;
+  const titleEl = document.getElementById('dashboard-detail-modal-title');
+  const tbody = document.getElementById('dashboard-detail-tbody');
+  if (!titleEl || !tbody) return;
+  const thead = tbody.closest('table')?.querySelector('thead');
+  if (!thead) return;

  titleEl.textContent = title;
  thead.innerHTML = `<tr><th>No</th><th>유형</th><th>법인</th><th>제품명</th><th>수량</th><th>금액</th></tr>`;
@@ -392,10 +392,13 @@ function openSwDashboardDetail(title: string, list: SoftwareAsset[]) {
 }

 function openSwUsageDetail(title: string, list: SoftwareAsset[]) {
-  const modal = document.getElementById('dashboard-detail-modal') as HTMLDivElement;
-  const titleEl = document.getElementById('dashboard-detail-modal-title') as HTMLHeadingElement;
-  const tbody = document.getElementById('dashboard-detail-tbody') as HTMLTableSectionElement;
-  const thead = tbody.closest('table')!.querySelector('thead')!;
+  const modal = document.getElementById('dashboard-detail-modal');
+  if (!modal) return;
+  const titleEl = document.getElementById('dashboard-detail-modal-title');
+  const tbody = document.getElementById('dashboard-detail-tbody');
+  if (!titleEl || !tbody) return;
+  const thead = tbody.closest('table')?.querySelector('thead');
+  if (!thead) return;

  titleEl.textContent = title;
  thead.innerHTML = `<tr><th>No</th><th>법인</th><th>제품명</th><th>수량</th><th>사용중</th><th>사용가능</th></tr>`;
@@ -409,5 +412,3 @@ function openSwUsageDetail(title: string, list: SoftwareAsset[]) {
  });
  modal.classList.remove('hidden');
 }
-
-