feat: 소프트웨어 대시보드 시각화 개선 및 금액 열 추가 (#4)

2026-04-14 13:18:51 +09:00
parent 7860edd8d0
commit 3c98ce948a
3 changed files with 121 additions and 13 deletions
--- a/src/views/AssetTableView.ts
+++ b/src/views/AssetTableView.ts
@@ -79,18 +79,18 @@ function renderSwTable(table: HTMLTableElement, container: HTMLElement, mainCont
  const isSub = state.activeSubTab === '구독SW';
  
  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></tr></thead><tbody id="dynamic-tbody"></tbody>`;
+  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>`;
  container.appendChild(table);
  mainContent.appendChild(container);
  const tbody = document.getElementById('dynamic-tbody')!;
-  if (list.length === 0) { tbody.innerHTML = `<tr><td colspan="${isSub ? 10 : 9}" style="text-align:center;">정보가 없습니다.</td></tr>`; return; }
+  if (list.length === 0) { tbody.innerHTML = `<tr><td colspan="${isSub ? 11 : 10}" style="text-align:center;">정보가 없습니다.</td></tr>`; return; }
  
  list.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.수량}</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.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));
--- 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,7 +181,8 @@ function renderSwDashboard(container: HTMLElement) {
        </div>
      </div>
    </div>
-    <div class="dashboard-layout-2col">
+    
+    <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;">
@@ -196,8 +218,90 @@ function renderSwDashboard(container: HTMLElement) {
        </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'));
@@ -305,3 +409,5 @@ function openSwUsageDetail(title: string, list: SoftwareAsset[]) {
  });
  modal.classList.remove('hidden');
 }
+
+