merge: 공동작업자의 PC 및 SW 관리 기능과 서버 자산 관리 기능 통합 (충돌 해결)

2026-04-15 10:10:57 +09:00
parent d94be9a494 c14eff8278
commit 3c28c664da
11 changed files with 814 additions and 138 deletions
--- a/src/views/AssetTableView.ts
+++ b/src/views/AssetTableView.ts
@@ -1,5 +1,5 @@
 import { state } from '../state';
-import { createIcons, Download, Upload, FileSpreadsheet, Plus, X, LayoutDashboard, Monitor, Server, Database, Laptop, CalendarClock, Key, Cpu, Layers, Users, Paperclip, Edit2 } from 'lucide';
+import { createIcons, Download, Upload, FileSpreadsheet, Plus, X, LayoutDashboard, Monitor, Server, Database, Laptop, CalendarClock, Key, Cpu, Layers, Users, Paperclip, Edit2, RefreshCcw } from 'lucide';
 import { openPcModal } from '../components/Modal/PCModal';
 import { openHwModal } from '../components/Modal/HWModal';
 import { openStorageModal } from '../components/Modal/StorageModal';
@@ -11,7 +11,7 @@ import { openSwUserModal } from '../components/Modal/SWUserModal';
 */
 export function renderTable(mainContent: HTMLElement) {
  const container = document.createElement('div');
-  container.className = 'table-container';
+  container.className = 'view-container'; 
  const table = document.createElement('table');

  if (state.activeCategory === 'hw') {
@@ -28,10 +28,13 @@ export function renderTable(mainContent: HTMLElement) {

 function renderHwTable(table: HTMLTableElement, container: HTMLElement, mainContent: HTMLElement) {
  const list = state.masterData.hw.filter(a => a.type === state.activeSubTab);
+  const tableWrapper = document.createElement('div');
+  tableWrapper.className = 'table-container';
  
  if (state.activeSubTab === '개인PC') {
    table.innerHTML = `<thead><tr><th>No</th><th>법인</th><th>자산코드</th><th>사용자</th><th>위치</th><th>CPU</th><th>GPU</th><th>RAM</th><th>SSD1</th><th>SSD2</th><th>HDD1</th><th>HDD2</th><th>구매일</th><th>금액</th><th>납품업체</th><th>품의서</th><th>관리</th></tr></thead><tbody id="dynamic-tbody"></tbody>`;
-    container.appendChild(table);
+    tableWrapper.appendChild(table);
+    container.appendChild(tableWrapper);
    mainContent.appendChild(container);
    const tbody = document.getElementById('dynamic-tbody')!;
    if (list.length === 0) { tbody.innerHTML = `<tr><td colspan="17">등록된 자산이 없습니다.</td></tr>`; return; }
@@ -45,7 +48,8 @@ function renderHwTable(table: HTMLTableElement, container: HTMLElement, mainCont
    });
  } else if (state.activeSubTab === '스토리지') {
    table.innerHTML = `<thead><tr><th>No</th><th>법인</th><th>유형</th><th>자산코드</th><th>명칭</th><th>위치</th><th>모델명</th><th>용량</th><th>담당자(정)</th><th>IP주소</th><th>구매일</th><th>금액</th><th>관리</th></tr></thead><tbody id="dynamic-tbody"></tbody>`;
-    container.appendChild(table);
+    tableWrapper.appendChild(table);
+    container.appendChild(tableWrapper);
    mainContent.appendChild(container);
    const tbody = document.getElementById('dynamic-tbody')!;
    if (list.length === 0) { tbody.innerHTML = `<tr><td colspan="13">등록된 자산이 없습니다.</td></tr>`; return; }
@@ -58,6 +62,7 @@ function renderHwTable(table: HTMLTableElement, container: HTMLElement, mainCont
      tbody.appendChild(tr);
    });
  } else {
+    // 서버 또는 전산비품
    if (state.activeSubTab === '서버') {
      table.innerHTML = `
        <thead>
@@ -84,7 +89,8 @@ function renderHwTable(table: HTMLTableElement, container: HTMLElement, mainCont
      table.innerHTML = `<thead><tr><th>No</th><th>법인</th>${state.activeSubTab === '전산비품' ? '<th>유형</th>' : ''}<th>자산코드</th><th>명칭</th><th>위치</th><th>관리자</th><th>구매일</th><th>금액</th><th>관리</th></tr></thead><tbody id="dynamic-tbody"></tbody>`;
    }
    
-    container.appendChild(table);
+    tableWrapper.appendChild(table);
+    container.appendChild(tableWrapper);
    mainContent.appendChild(container);
    const tbody = document.getElementById('dynamic-tbody')!;
    const colCount = state.activeSubTab === '서버' ? 15 : (state.activeSubTab === '전산비품' ? 11 : 10);
@@ -129,7 +135,7 @@ function renderHwTable(table: HTMLTableElement, container: HTMLElement, mainCont
        }
        const remoteHtml = remoteItems.join(' / ');

-        // IP 및 Storage (기존 유지)
+        // IP 및 Storage
        const ipInfo = [asset.IP주소, asset.IP2].filter(v => v && v !== '').join(' / ');
        const storageInfo = [asset.SSD1, asset.SSD2].filter(v => v && v !== '').join(' / ');

@@ -150,32 +156,128 @@ function renderHwTable(table: HTMLTableElement, container: HTMLElement, mainCont
          <td class="text-nowrap">${formatInline(asset.RAM)}</td>
          <td class="text-nowrap">${formatInline(storageInfo)}</td>
        `;
+        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.addEventListener('click', (e) => { if (!(e.target as HTMLElement).closest('button')) openHwModal(asset); });
      }
-      
-      tr.addEventListener('click', (e) => { if (!(e.target as HTMLElement).closest('button')) openHwModal(asset); });
      tbody.appendChild(tr);
    });
  }
 }

 function renderSwTable(table: HTMLTableElement, container: HTMLElement, mainContent: HTMLElement) {
-  const list = state.masterData.sw.filter(a => a.type === state.activeSubTab);
-  table.innerHTML = `<thead><tr><th>No</th><th>법인</th><th>제품명</th><th>구매일</th><th>수량</th><th>사용가능</th><th>관리</th></tr></thead><tbody id="dynamic-tbody"></tbody>`;
-  container.appendChild(table);
+  const fullList = state.masterData.sw.filter(a => a.type === state.activeSubTab);
+  const isSub = state.activeSubTab === '구독SW';
+
+  // 0. Container 준비 (조회 바 + 테이블)
+  container.innerHTML = ''; 
+  
+  // 1. 조회 바 (Filter Bar) 생성
+  const filterBar = document.createElement('div');
+  filterBar.className = 'search-bar';
+  filterBar.innerHTML = `
+    <div class="search-item flex-1">
+      <label>통합 검색 (제품명/부서)</label>
+      <input type="text" id="filter-keyword" placeholder="검색어를 입력하세요..." autocomplete="off">
+    </div>
+    <div class="search-item">
+      <label>분야</label>
+      <select id="filter-field">
+        <option value="">전체 분야</option>
+        <option value="업무공통">업무공통</option>
+        <option value="개발S/W">개발S/W</option>
+        <option value="디자인">디자인</option>
+        <option value="설계S/W">설계S/W</option>
+      </select>
+    </div>
+    <div class="search-item">
+      <label>법인</label>
+      <select id="filter-corp">
+        <option value="">전체 법인</option>
+        <option value="한맥">한맥</option>
+        <option value="삼안">삼안</option>
+        <option value="바론">바론</option>
+      </select>
+    </div>
+    <button id="btn-reset-filters" class="btn btn-outline btn-reset" title="검색 조건 초기화">
+      <i data-lucide="refresh-ccw" style="width:14px; height:14px;"></i> 필터 초기화
+    </button>
+  `;
+  container.appendChild(filterBar);
+
+  // 2. 테이블 기본 구조 생성
+  const tableWrapper = document.createElement('div');
+  tableWrapper.className = 'table-container';
+  table.classList.add('sw-table');
+  table.innerHTML = `<thead><tr><th style="text-align:center;">No.</th><th style="text-align:center;">분야</th><th style="text-align:center;">법인</th><th style="text-align:center;">부서</th><th style="text-align:center;">제품명</th><th style="text-align:center;">구매일</th>${isSub ? '<th style="text-align:center;">구독일</th>' : ''}<th style="text-align:center;">금액</th><th style="text-align:center;">수량</th><th style="text-align:center;">사용가능</th><th style="text-align:center;">관리</th></tr></thead><tbody id="dynamic-tbody"></tbody>`;
+  
+  tableWrapper.appendChild(table);
+  container.appendChild(tableWrapper);
  mainContent.appendChild(container);
+  
  const tbody = document.getElementById('dynamic-tbody')!;
-  if (list.length === 0) { tbody.innerHTML = `<tr><td colspan="7">정보가 없습니다.</td></tr>`; return; }
-  list.forEach((asset, idx) => {
-    const assigned = state.masterData.swUsers.filter(u => u.swId === asset.id).length;
-    const avail = asset.수량 - assigned;
-    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><strong style="color: ${avail > 0 ? 'var(--primary)' : 'var(--danger)'}">${avail}</strong></td><td style="display:flex; gap:0.25rem;"><button class="btn-outline btn-edit">수정</button><button class="btn-outline btn-users"><i data-lucide="users" style="width:14px; height:14px;"></i></button></td>`;
-    tr.addEventListener('click', (e) => { if (!(e.target as HTMLElement).closest('button')) openSwModal(asset); });
-    tr.querySelector('.btn-edit')?.addEventListener('click', () => openSwModal(asset));
-    tr.querySelector('.btn-users')?.addEventListener('click', () => openSwUserModal(asset));
-    tbody.appendChild(tr);
+
+  // 3. 필터링 및 테이블 업데이트 로직
+  const updateTable = () => {
+    const keyword = (document.getElementById('filter-keyword') as HTMLInputElement).value.toLowerCase().trim();
+    const field = (document.getElementById('filter-field') as HTMLSelectElement).value;
+    const corp = (document.getElementById('filter-corp') as HTMLSelectElement).value;
+
+    const filtered = fullList.filter(asset => {
+      const matchKeyword = !keyword || 
+        (asset.제품명 || '').toLowerCase().includes(keyword) || 
+        (asset.부서 || '').toLowerCase().includes(keyword);
+      const matchField = !field || asset.분야 === field;
+      const matchCorp = !corp || asset.법인 === corp;
+      return matchKeyword && matchField && matchCorp;
+    });
+
+    tbody.innerHTML = '';
+    if (filtered.length === 0) {
+      tbody.innerHTML = `<tr><td colspan="${isSub ? 11 : 10}" style="text-align:center; padding: 3rem; color: var(--text-muted);">검색 결과가 없습니다.</td></tr>`;
+      return;
+    }
+
+    filtered.forEach((asset, idx) => {
+      const assigned = state.masterData.swUsers.filter(u => u.swId === asset.id).length;
+      const avail = (typeof asset.수량 === 'number' ? asset.수량 : parseInt(asset.수량||'0', 10)) - assigned;
+      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.구매일||''}</td>${isSub ? `<td>${asset.구독일||''}</td>` : ''}<td>${asset.금액||'0'}</td><td>${asset.수량}</td><td><strong style="color: ${avail > 0 ? 'var(--primary-color)' : 'var(--danger)'}">${avail}</strong></td><td style="display:flex; justify-content:center; align-items:center; gap:0.5rem;"><button type="button" class="btn-icon btn-edit" title="수정" style="color: var(--text-muted);"><i data-lucide="edit-2" style="width:18px; height:18px;"></i></button><button type="button" class="btn-icon btn-users" title="사용자 관리" style="color: var(--primary-color);"><i data-lucide="users" style="width:18px; height:18px;"></i></button></td>`;
+      tr.addEventListener('click', (e) => { if (!(e.target as HTMLElement).closest('button')) openSwModal(asset); });
+      tr.querySelector('.btn-edit')?.addEventListener('click', () => openSwModal(asset));
+      tr.querySelector('.btn-users')?.addEventListener('click', () => openSwUserModal(asset));
+      tbody.appendChild(tr);
+    });
+
+    // 버튼 내 아이콘 다시 그리기
+    createIcons({
+      icons: { Edit2, Users, RefreshCcw } 
+    });
+    // 초기화 버튼 아이콘은 별도로
+    createIcons({
+      scope: filterBar
+    });
+  };
+
+  // 4. 이벤트 바인딩
+  const keywordInput = document.getElementById('filter-keyword') as HTMLInputElement;
+  const fieldSelect = document.getElementById('filter-field') as HTMLSelectElement;
+  const corpSelect = document.getElementById('filter-corp') as HTMLSelectElement;
+  const resetBtn = document.getElementById('btn-reset-filters') as HTMLButtonElement;
+
+  keywordInput.addEventListener('input', updateTable);
+  fieldSelect.addEventListener('change', updateTable);
+  corpSelect.addEventListener('change', updateTable);
+  
+  resetBtn.addEventListener('click', () => {
+    keywordInput.value = '';
+    fieldSelect.value = '';
+    corpSelect.value = '';
+    updateTable();
  });
+
+  // 초기 실행
+  updateTable();
 }
--- a/src/views/DashboardView.ts
+++ b/src/views/DashboardView.ts
@@ -1,6 +1,8 @@
 import { state } from '../state';
 import { HardwareAsset, SoftwareAsset } from '../excelHandler';

+declare var Chart: any;
+
 /**
 * 대시보드 렌더링 메인 함수
 */
@@ -8,7 +10,9 @@ export function renderDashboard(mainContent: HTMLElement) {
  mainContent.innerHTML = '';

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

  if (state.activeCategory === 'hw') {
@@ -120,9 +124,20 @@ function renderSwDashboard(container: HTMLElement) {
  let subQty = 0, subUsed = 0, subExp = 0, subTotal = 0;
  let permQty = 0, permUsed = 0, permExp = 0, permTotal = 0;

+  const currentYear = new Date().getFullYear().toString();
+  const corps = ['한맥', '삼안', '바론'];
+  const categories = ['업무공통', '개발S/W', '디자인', '설계S/W'];
+  
+  const costByCorp: Record<string, number> = { '한맥': 0, '삼안': 0, '바론': 0 };
+  const costByCat: Record<string, number> = {};
+  categories.forEach(c => costByCat[c] = 0);
+
  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 price = parseInt(priceStr, 10) || 0;
+
     if (sw.type === '구독SW') {
       subQty += qty; subUsed += assigned; subTotal++;
       if (isSWExpiring(sw)) subExp++;
@@ -130,6 +145,12 @@ function renderSwDashboard(container: HTMLElement) {
       permQty += qty; permUsed += assigned; permTotal++;
       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;
+     }
  });

  const subPer = subQty > 0 ? Math.round((subUsed/subQty)*100) : 0;
@@ -160,24 +181,127 @@ function renderSwDashboard(container: HTMLElement) {
        </div>
      </div>
    </div>
-    <div class="dashboard-layout-2col">
-      <div class="dashboard-card" data-action="sub-exp" style="padding: 1.25rem 1.5rem; cursor:pointer; display:flex; justify-content:space-between; align-items:center;">
-        <div>
-          <span style="font-size:1rem; font-weight:700; color:var(--text-main);">구독 SW 만료 예정</span>
-          <div style="font-size: 0.8125rem; color:var(--text-muted);">${subExp}개 만료 예정</div>
+    
+    <div class="dashboard-layout-2col" style="margin-bottom: 1.5rem;">
+      <div class="dashboard-card" data-action="sub-exp" style="padding: 1.25rem 1.5rem; flex-direction:row; justify-content:space-between; align-items:center; cursor:pointer;">
+        <div style="flex:1;">
+          <div style="display:flex; align-items:center; gap: 0.5rem; margin-bottom: 0.5rem;">
+            <span style="font-size:1rem; font-weight:700; color:var(--text-main);">구독 SW 만료 예정</span>
+            <span style="font-size:0.75rem; color:#bfbfbf; background:#f9f9f9; padding:2px 6px; border-radius:4px;">30일 이내</span>
+          </div>
+          <div style="font-size: 0.8125rem; color:var(--text-muted); margin-bottom: 1.25rem;">
+            전체 ${subTotal}개 제품 중 ${subExp}개 만료 예정
+          </div>
+          <div style="font-size: 1.5rem; font-weight:700; color:${subExp > 0 ? 'var(--dash-danger)' : 'var(--text-main)'};">${subExp}개</div>
+        </div>
+        <div style="width: 80px; height: 80px; border-radius: 50%; background: conic-gradient(var(--dash-danger) ${subExpPer}%, var(--border-color) 0); display:flex; justify-content:center; align-items:center;">
+          <div style="width: 64px; height: 64px; border-radius: 50%; background: var(--white); display:flex; justify-content:center; align-items:center;">
+            <span style="font-size: 1rem; color:var(--text-muted); font-weight:600;">${subExpPer}%</span>
+          </div>
        </div>
-        <div style="width: 60px; height: 60px; border-radius: 50%; background: conic-gradient(var(--dash-danger) ${subExpPer}%, var(--border-color) 0);"></div>
      </div>
-      <div class="dashboard-card" data-action="perm-exp" style="padding: 1.25rem 1.5rem; cursor:pointer; display:flex; justify-content:space-between; align-items:center;">
-        <div>
-          <span style="font-size:1rem; font-weight:700; color:var(--text-main);">유지보수 만료 예정</span>
-          <div style="font-size: 0.8125rem; color:var(--text-muted);">${permExp}개 만료 예정</div>
+      <div class="dashboard-card" data-action="perm-exp" style="padding: 1.25rem 1.5rem; flex-direction:row; justify-content:space-between; align-items:center; cursor:pointer;">
+        <div style="flex:1;">
+          <div style="display:flex; align-items:center; gap: 0.5rem; margin-bottom: 0.5rem;">
+            <span style="font-size:1rem; font-weight:700; color:var(--text-main);">유지보수 만료 예정</span>
+            <span style="font-size:0.75rem; color:#bfbfbf; background:#f9f9f9; padding:2px 6px; border-radius:4px;">30일 이내</span>
+          </div>
+          <div style="font-size: 0.8125rem; color:var(--text-muted); margin-bottom: 1.25rem;">
+            전체 ${permTotal}개 제품 중 ${permExp}개 만료 예정
+          </div>
+          <div style="font-size: 1.5rem; font-weight:700; color:${permExp > 0 ? 'var(--dash-danger)' : 'var(--text-main)'};">${permExp}개</div>
        </div>
-        <div style="width: 60px; height: 60px; border-radius: 50%; background: conic-gradient(var(--dash-danger) ${permExpPer}%, var(--border-color) 0);"></div>
+        <div style="width: 80px; height: 80px; border-radius: 50%; background: conic-gradient(var(--dash-danger) ${permExpPer}%, var(--border-color) 0); display:flex; justify-content:center; align-items:center;">
+          <div style="width: 64px; height: 64px; border-radius: 50%; background: var(--white); display:flex; justify-content:center; align-items:center;">
+            <span style="font-size: 1rem; color:var(--text-muted); font-weight:600;">${permExpPer}%</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <h3 style="margin: 0 0 1rem 0; font-size: 1.125rem; color: var(--text-main);">${currentYear}년 소프트웨어 도입 비용</h3>
+    <div class="dashboard-layout-2col">
+      <div class="dashboard-card" style="padding: 1.5rem;">
+        <h4 style="margin: 0 0 1rem 0; font-size: 0.9375rem; color: var(--text-main);">법인별 도입 금액 (원)</h4>
+        <canvas id="chart-cost-corp" style="max-height: 250px;"></canvas>
+      </div>
+      <div class="dashboard-card" style="padding: 1.5rem;">
+        <h4 style="margin: 0 0 1rem 0; font-size: 0.9375rem; color: var(--text-main);">분야별 도입 금액 (원)</h4>
+        <canvas id="chart-cost-cat" style="max-height: 250px;"></canvas>
      </div>
    </div>
  `;

+  // 차트 생성
+  setTimeout(() => {
+    const ctxCorp = (document.getElementById('chart-cost-corp') as HTMLCanvasElement)?.getContext('2d');
+    const ctxCat = (document.getElementById('chart-cost-cat') as HTMLCanvasElement)?.getContext('2d');
+
+    if (ctxCorp && typeof Chart !== 'undefined') {
+      const chartCorp = new Chart(ctxCorp, {
+        type: 'bar',
+        data: {
+          labels: corps,
+          datasets: [{
+            label: '도입 금액',
+            data: corps.map(c => costByCorp[c]),
+            backgroundColor: '#3b82f6',
+            borderRadius: 4,
+            barThickness: 20 // 막대 두께 줄임
+          }]
+        },
+        options: {
+          responsive: true,
+          maintainAspectRatio: false,
+          plugins: { legend: { display: false } },
+          scales: { 
+            y: { 
+              beginAtZero: true, 
+              ticks: { callback: (v: any) => v.toLocaleString() },
+              grid: { display: false } // 가로줄 삭제
+            },
+            x: {
+              grid: { display: false }
+            }
+          }
+        }
+      });
+      state.activeCharts.push(chartCorp);
+    }
+
+    if (ctxCat && typeof Chart !== 'undefined') {
+      const chartCat = new Chart(ctxCat, {
+        type: 'bar',
+        data: {
+          labels: categories,
+          datasets: [{
+            label: '도입 금액',
+            data: categories.map(c => costByCat[c]),
+            backgroundColor: '#10b981',
+            borderRadius: 4,
+            barThickness: 20 // 막대 두께 줄임
+          }]
+        },
+        options: {
+          responsive: true,
+          maintainAspectRatio: false,
+          plugins: { legend: { display: false } },
+          scales: { 
+            y: { 
+              beginAtZero: true, 
+              ticks: { callback: (v: any) => v.toLocaleString() },
+              grid: { display: false } // 가로줄 삭제
+            },
+            x: {
+              grid: { display: false }
+            }
+          }
+        }
+      });
+      state.activeCharts.push(chartCat);
+    }
+  }, 0);
+
  // 클릭 이벤트 바인딩
  container.querySelector('[data-action="sub-usage"]')?.addEventListener('click', () => {
    openSwUsageDetail('구독 소프트웨어 사용 목록', state.masterData.sw.filter(sw => sw.type === '구독SW'));
@@ -285,3 +409,5 @@ function openSwUsageDetail(title: string, list: SoftwareAsset[]) {
  });
  modal.classList.remove('hidden');
 }
+
+