feat: 소프트웨어 자산 관리 기능 고도화 및 대시보드 누적 비용 분석 기능 추가

2026-04-23 19:47:07 +09:00
parent d125de1902
commit 9fcecd4bf5
13 changed files with 649 additions and 324 deletions
--- a/src/views/Dashboard/SwDashboard.ts
+++ b/src/views/Dashboard/SwDashboard.ts
@@ -9,6 +9,10 @@ export function renderSwDashboard(container: HTMLElement) {
  let subQty = 0, subUsed = 0, subExp = 0, subTotal = 0;
  let permQty = 0, permUsed = 0, permExp = 0, permTotal = 0;
  
+  let subCost2026 = 0;
+  let permCost2026 = 0;
+  let cloudCost2026 = 0;
+  
  const currentYear = new Date().getFullYear();
  
  const corps = ['한맥', '삼안', '바론'];
@@ -19,7 +23,7 @@ export function renderSwDashboard(container: HTMLElement) {
  categories.forEach(c => costByCat[c] = 0);

  // 통합 SW 데이터
-  const allSw = [...state.masterData.subSw, ...state.masterData.permSw];
+  const allSw = [...state.masterData.subSw, ...state.masterData.permSw, ...state.masterData.cloud];

  allSw.forEach(sw => {
     const userMapping = state.masterData.swUsers.find(u => u.sw_id === sw.id);
@@ -36,12 +40,35 @@ export function renderSwDashboard(container: HTMLElement) {
       if (isSWExpiring(sw)) permExp++;
     }

-     if (sw.구매일 && sw.구매일.startsWith(String(currentYear))) {
+     // 초기 도입 비용 (2026년 구매건)
+     if (sw.구매일 && sw.구매일.startsWith('2026')) {
+       if (sw.type === '구독SW') subCost2026 += price;
+       else if (sw.type === '영구SW') permCost2026 += price;
+       else if (sw.type === '클라우드') cloudCost2026 += price;
+
       if (costByCorp[sw.법인] !== undefined) costByCorp[sw.법인] += price;
       if (sw.분야 && costByCat[sw.분야] !== undefined) costByCat[sw.분야] += price;
     }
  });

+  // 누적 추가 비용 집계 (2026년 계약 업데이트 로그 기반)
+  if (state.masterData.logs) {
+    state.masterData.logs.forEach(log => {
+      if (log.date && log.date.startsWith('2026') && log.cost) {
+        const asset = allSw.find(a => a.id === log.assetId);
+        if (asset) {
+          const cost = Number(log.cost) || 0;
+          if (asset.type === '구독SW') subCost2026 += cost;
+          else if (asset.type === '영구SW') permCost2026 += cost;
+          else if (asset.type === '클라우드') cloudCost2026 += cost;
+          
+          if (costByCorp[asset.법인] !== undefined) costByCorp[asset.법인] += cost;
+          if (asset.분야 && costByCat[asset.분야] !== undefined) costByCat[asset.분야] += cost;
+        }
+      }
+    });
+  }
+
  const subPer = subQty > 0 ? Math.round((subUsed/subQty)*100) : 0;
  const permPer = permQty > 0 ? Math.round((permUsed/permQty)*100) : 0;
  const subExpPer = subTotal > 0 ? Math.round((subExp/subTotal)*100) : 0;
@@ -95,42 +122,32 @@ export function renderSwDashboard(container: HTMLElement) {
        </div>
      </div>

-      <h3 class="dashboard-section-title">${currentYear}년 도입 비용 분석</h3>
-      <div class="dashboard-layout-2col">
-        <div class="dashboard-card">
-          <h4 style="margin-bottom:1rem; font-size:0.9rem; color:var(--text-muted);">구매법인별 도입 금액 (원)</h4>
-          <canvas id="chart-sw-corp"></canvas>
+      <h3 class="dashboard-section-title">2026년 누적 도입 비용 분석</h3>
+      
+      <div style="display:grid; grid-template-columns: repeat(3, 1fr); gap:1.5rem; margin-bottom:1.5rem;">
+        <div class="dashboard-card" style="min-height:auto;">
+          <span style="font-size:1rem; font-weight:700; color:var(--text-main);">구독 SW 누적 비용 (2026)</span>
+          <div style="font-size: 0.8125rem; color:var(--text-muted); margin-bottom: 1rem;">갱신 및 추가 비용 합계</div>
+          <div style="font-size: 2rem; font-weight:700; color:var(--dash-primary);">₩ ${subCost2026.toLocaleString()}</div>
+          <div style="width: 100%; height: 4px; background-color: var(--primary-color); border-radius: 2px; margin-top: 0.5rem;"></div>
        </div>
-        <div class="dashboard-card">
-          <h4 style="margin-bottom:1rem; font-size:0.9rem; color:var(--text-muted);">분야별 도입 금액 (원)</h4>
-          <canvas id="chart-sw-cat"></canvas>
+        <div class="dashboard-card" style="min-height:auto;">
+          <span style="font-size:1rem; font-weight:700; color:var(--text-main);">영구 SW 누적 비용 (2026)</span>
+          <div style="font-size: 0.8125rem; color:var(--text-muted); margin-bottom: 1rem;">유지보수 및 신규 도입 합계</div>
+          <div style="font-size: 2rem; font-weight:700; color:#3b82f6;">₩ ${permCost2026.toLocaleString()}</div>
+          <div style="width: 100%; height: 4px; background-color: #3b82f6; border-radius: 2px; margin-top: 0.5rem;"></div>
+        </div>
+        <div class="dashboard-card" style="min-height:auto;">
+          <span style="font-size:1rem; font-weight:700; color:var(--text-main);">클라우드 누적 비용 (2026)</span>
+          <div style="font-size: 0.8125rem; color:var(--text-muted); margin-bottom: 1rem;">월별 청구액 누적 합계</div>
+          <div style="font-size: 2rem; font-weight:700; color:#f59e0b;">₩ ${cloudCost2026.toLocaleString()}</div>
+          <div style="width: 100%; height: 4px; background-color: #f59e0b; border-radius: 2px; margin-top: 0.5rem;"></div>
        </div>
      </div>
+
    </div>
  `;

-  setTimeout(() => {
-    if (typeof Chart === 'undefined') return;
-    
-    const ctxCorp = (document.getElementById('chart-sw-corp') as HTMLCanvasElement)?.getContext('2d');
-    if (ctxCorp) {
-      new Chart(ctxCorp, {
-        type: 'bar',
-        data: { labels: corps, datasets: [{ data: corps.map(c => costByCorp[c]), backgroundColor: 'rgba(30, 81, 73, 0.8)', borderRadius: 4 }] },
-        options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } } }
-      });
-    }
-
-    const ctxCat = (document.getElementById('chart-sw-cat') as HTMLCanvasElement)?.getContext('2d');
-    if (ctxCat) {
-      new Chart(ctxCat, {
-        type: 'bar',
-        data: { labels: categories, datasets: [{ data: categories.map(c => costByCat[c]), backgroundColor: 'rgba(59, 130, 246, 0.8)', borderRadius: 4 }] },
-        options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } } }
-      });
-    }
-  }, 100);
-
  container.querySelector('[data-action="sub-usage"]')?.addEventListener('click', () => openSwUsageDetail('구독 소프트웨어 사용 목록', state.masterData.subSw));
  container.querySelector('[data-action="perm-usage"]')?.addEventListener('click', () => openSwUsageDetail('영구 소프트웨어 사용 목록', state.masterData.permSw));
  container.querySelector('[data-action="sub-exp"]')?.addEventListener('click', () => openSwDashboardDetail('구독 SW 만료 예정 목록', state.masterData.subSw.filter(sw => isSWExpiring(sw))));
--- a/src/views/List/CloudListView.ts
+++ b/src/views/List/CloudListView.ts
@@ -98,7 +98,7 @@ export function renderCloudList(container: HTMLElement) {
        <td>${asset[ASSET_SCHEMA.ACCOUNT.key]||''}</td>
        <td class="text-center">${paymentBadge}</td>
        <td class="text-center">${asset[ASSET_SCHEMA.PAY_DAY.key] ? asset[ASSET_SCHEMA.PAY_DAY.key] + '일' : ''}</td>
-        <td class="text-right" style="font-weight:600;">₩ ${asset[ASSET_SCHEMA.BILLING.key] ? Number(asset[ASSET_SCHEMA.BILLING.key]).toLocaleString() : '0'}</td>
+        <td class="text-right" style="font-weight:600;">₩ ${asset[ASSET_SCHEMA.BILLING.key] ? Number(String(asset[ASSET_SCHEMA.BILLING.key]).replace(/,/g, '')).toLocaleString() : '0'}</td>
        <td>${asset[ASSET_SCHEMA.REMARKS.key]||''}</td>
      `;
      
--- a/src/views/List/SwListView.ts
+++ b/src/views/List/SwListView.ts
@@ -1,14 +1,11 @@
 import { state } from '../../core/state';
 import { openSwModal } from '../../components/Modal/SWModal';
-import { sortAssets } from '../../core/utils';
+import { openSwUserModal } from '../../components/Modal/SWUserModal';
+import { sortAssets, formatPrice } from '../../core/utils';
 import { CORP_LIST } from '../../components/Modal/SharedData';
 import { generateOptionsHTML } from '../../components/Modal/ModalUtils';
-import { ASSET_SCHEMA, UI_TEXT } from '../../core/schema';
-import { createIcons, RefreshCcw } from 'lucide';
+import { createIcons, Edit2, Users, RefreshCcw } from 'lucide';

-/**
- * 소프트웨어(구독/영구) 자산 목록 뷰
- */
 export function renderSwList(container: HTMLElement) {
  const isSub = state.activeSubTab === '구독SW';
  const fullList = sortAssets(isSub ? state.masterData.subSw : state.masterData.permSw);
@@ -17,7 +14,7 @@ export function renderSwList(container: HTMLElement) {
  filterBar.className = 'search-bar';
  filterBar.innerHTML = `
    <div class="search-item flex-1">
-      <label>통합 검색 (${ASSET_SCHEMA.PRODUCT.ui}/부서)</label>
+      <label>통합 검색 (제품명/부서)</label>
      <input type="text" id="filter-keyword" placeholder="검색어를 입력하세요..." autocomplete="off">
    </div>
    <div class="search-item">
@@ -31,11 +28,11 @@ export function renderSwList(container: HTMLElement) {
      </select>
    </div>
    <div class="search-item">
-      <label>${ASSET_SCHEMA.CORP.ui}</label>
+      <label>법인</label>
      <select id="filter-corp">${generateOptionsHTML(CORP_LIST, '', true)}</select>
    </div>
    <button id="btn-reset-filters" class="btn btn-outline btn-reset">
-      <i data-lucide="refresh-ccw"></i> ${UI_TEXT.ACTION.RESET_FILTER}
+      <i data-lucide="refresh-ccw"></i> 필터 초기화
    </button>
  `;
  container.appendChild(filterBar);
@@ -49,14 +46,16 @@ export function renderSwList(container: HTMLElement) {
        <th style="text-align:center;">No.</th>
        <th style="text-align:center;">상태</th>
        <th style="text-align:center;">분야</th>
-        <th style="text-align:center;">${ASSET_SCHEMA.CORP.ui}</th>
+        <th style="text-align:center;">법인</th>
        <th style="text-align:center;">부서</th>
-        <th style="text-align:center;">${ASSET_SCHEMA.PRODUCT.ui}</th>
-        <th style="text-align:center;">${ASSET_SCHEMA.PURCHASE_YM.ui}</th>
-        ${isSub ? `<th style="text-align:center;">${ASSET_SCHEMA.EXPIRY.ui}</th>` : ''}
-        <th style="text-align:center;">${ASSET_SCHEMA.PRICE.ui}</th>
-        <th style="text-align:center;">${ASSET_SCHEMA.QTY.ui}</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>
+        <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>
@@ -76,38 +75,49 @@ export function renderSwList(container: HTMLElement) {
    const corp = corpSelect ? corpSelect.value : '';

    const filtered = fullList.filter(asset => {
-      const matchKeyword = !keyword || ((asset as any)[ASSET_SCHEMA.PRODUCT.key] || '').toLowerCase().includes(keyword) || (asset.부서 || '').toLowerCase().includes(keyword);
+      const matchKeyword = !keyword || (asset.제품명 || '').toLowerCase().includes(keyword) || (asset.부서 || '').toLowerCase().includes(keyword);
      const matchField = !field || asset.분야 === field;
-      const matchCorp = !corp || (asset as any)[ASSET_SCHEMA.CORP.key] === corp;
+      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);">${UI_TEXT.MESSAGES.NO_DATA}</td></tr>`;
+      tbody.innerHTML = `<tr><td colspan="13" 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.sw_id === asset.id).length;
-      const qty = typeof (asset as any)[ASSET_SCHEMA.QTY.key] === 'number' ? (asset as any)[ASSET_SCHEMA.QTY.key] : parseInt((asset as any)[ASSET_SCHEMA.QTY.key]||'0', 10);
+      const qty = typeof asset.수량 === 'number' ? asset.수량 : parseInt(asset.수량||'0', 10);
      const avail = qty - assigned;
      
-      let statusBadge = '';
+      let statusHtml = '';
      if (isSub) {
        let isExpired = false;
-        if ((asset as any)[ASSET_SCHEMA.EXPIRY.key]) {
-          const parts = (asset as any)[ASSET_SCHEMA.EXPIRY.key].split('~');
-          const endDateStr = parts[parts.length - 1].trim().replace(/\./g, '-');
+        if (asset.만료일) {
+          const endDateStr = asset.만료일.replace(/\./g, '-');
          const endDate = new Date(endDateStr);
          if (!isNaN(endDate.getTime())) {
            endDate.setHours(23, 59, 59, 999);
            if (endDate < new Date()) isExpired = true;
          }
        }
-        statusBadge = isExpired ? `<span class="badge badge-danger">만료</span>` : `<span class="badge badge-primary">사용중</span>`;
+        if (isExpired) statusHtml = `<span style="background: var(--danger, #ef4444); color: white; padding: 2px 6px; border-radius: 4px; font-size: 0.75rem; font-weight: bold; white-space: nowrap;">만료</span>`;
+        else statusHtml = `<span style="background: var(--primary-color, #1E5149); color: white; padding: 2px 6px; border-radius: 4px; font-size: 0.75rem; font-weight: bold; white-space: nowrap;">사용중</span>`;
      } else {
-        statusBadge = asset.유지보수여부 ? `<span class="badge badge-success">유효</span>` : `<span class="badge badge-muted">없음</span>`;
+        let isMaintenance = false;
+        if (asset.시작일 && asset.만료일) {
+          const startDate = new Date(asset.시작일.replace(/\./g, '-'));
+          const endDate = new Date(asset.만료일.replace(/\./g, '-'));
+          const today = new Date();
+          if (!isNaN(startDate.getTime()) && !isNaN(endDate.getTime())) {
+            endDate.setHours(23, 59, 59, 999);
+            if (today >= startDate && today <= endDate) isMaintenance = true;
+          }
+        }
+        if (isMaintenance) statusHtml = `<span style="background: #3b82f6; color: white; padding: 2px 6px; border-radius: 4px; font-size: 0.75rem; font-weight: bold; white-space: nowrap;">유지보수</span>`;
+        else statusHtml = `<span style="background: #6b7280; color: white; padding: 2px 6px; border-radius: 4px; font-size: 0.75rem; font-weight: bold; white-space: nowrap;">보유중</span>`;
      }

      const tr = document.createElement('tr');
@@ -115,22 +125,36 @@ export function renderSwList(container: HTMLElement) {
      
      tr.innerHTML = `
        <td style="text-align:center;">${idx+1}</td>
-        <td style="text-align:center;">${statusBadge}</td>
-        <td style="text-align:center;">${asset.분야||''}</td>
-        <td style="text-align:center;">${(asset as any)[ASSET_SCHEMA.CORP.key]}</td>
-        <td style="text-align:center;">${asset.부서||''}</td>
-        <td>${(asset as any)[ASSET_SCHEMA.PRODUCT.key]}</td>
-        <td style="text-align:center;">${(asset as any)[ASSET_SCHEMA.PURCHASE_YM.key]||''}</td>
-        ${isSub ? `<td style="text-align:center;">${(asset as any)[ASSET_SCHEMA.EXPIRY.key]||''}</td>` : ''}
-        <td style="text-align:right;">${Number((asset as any)[ASSET_SCHEMA.PRICE.key]||0).toLocaleString()}</td>
+        <td style="text-align:center;">${statusHtml}</td>
+        <td>${asset.분야||''}</td>
+        <td>${asset.법인}</td>
+        <td>${asset.부서||''}</td>
+        <td>${asset.제품명}</td>
+        <td style="text-align:center;">${asset.구매일||''}</td>
+        <td style="text-align:center;">${asset.시작일||''}</td>
+        <td style="text-align:center;">${asset.만료일||''}</td>
+        <td style="text-align:right;">${formatPrice(asset.금액)}</td>
        <td style="text-align:center;">${qty}</td>
        <td style="text-align:center;"><strong style="color: ${avail > 0 ? 'var(--primary-color)' : 'var(--danger)'}">${avail}</strong></td>
+        <td style="text-align:center;">
+          <button class="btn-icon btn-user-mgmt" title="사용자 관리" style="margin: 0 auto; color: var(--primary-color);">
+            <i data-lucide="users" style="width:18px; height:18px;"></i>
+          </button>
+        </td>
      `;
      
-      tr.addEventListener('click', () => openSwModal(asset, 'view'));
+      const userBtn = tr.querySelector('.btn-user-mgmt');
+      userBtn?.addEventListener('click', (e) => {
+        e.stopPropagation();
+        openSwUserModal(asset);
+      });
+      
+      tr.addEventListener('click', (e) => { 
+        openSwModal(asset, 'view'); 
+      });
      tbody.appendChild(tr);
    });
-    createIcons({ icons: { RefreshCcw } });
+    createIcons({ icons: { Edit2, Users, RefreshCcw } });
  };

  document.getElementById('filter-keyword')?.addEventListener('input', updateTable);
--- a/src/views/SW_Table.ts
+++ b/src/views/SW_Table.ts
@@ -40,9 +40,8 @@ export function renderSWTable(mainContent: HTMLElement) {
        container.innerHTML = `<div style="padding:2rem; color:var(--text-muted);">"${tab}" 탭에 대한 소프트웨어 리스트 뷰가 정의되지 않았습니다.</div>`;
      }
    } else if (state.activeCategory === 'ops') {
-      // 운영 서비스 관련 탭 처리
      if (['도메인', '메일', '메신저', '청구비용'].includes(tab)) {
-        renderCloudList(container); // 일단 클라우드 리스트로 공통 처리
+        renderCloudList(container); 
      } else {
        container.innerHTML = `<div style="padding:2rem; color:var(--text-muted);">"${tab}" 탭에 대한 운영 서비스 뷰가 정의되지 않았습니다.</div>`;
      }