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

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');
 }
+
+