feat: 대시보드 및 모달 컴포넌트 최적화, 클라우드 자산 뷰 추가

src/components/Modal/DashboardDetailModal.ts

@@ -99,11 +99,34 @@ export function openSwUsageDetail(title: string, list: SoftwareAsset[]) {
   tbody.innerHTML = '';
   list.forEach((sw, idx) => {
     const assigned = state.masterData.swUsers.filter(u => u.swId === sw.id).length;
-    const qty = typeof sw.수량 === 'number' ? sw.수량 : parseInt(sw.수량||'0', 10);
-    const avail = qty - assigned;
     const tr = document.createElement('tr');
-    tr.innerHTML = `<td>${idx+1}</td><td>${sw.법인}</td><td>${sw.제품명}</td><td>${qty}</td><td>${assigned}</td><td>${avail}</td>`;
+    tr.innerHTML = `<td>${idx+1}</td><td>${sw.법인}</td><td>${sw.제품명}</td><td>${sw.수량}</td><td>${assigned}</td><td>${Number(sw.수량) - assigned}</td>`;
     tbody.appendChild(tr);
   });
   modal.classList.remove('hidden');
 }
+
+export function openCloudDashboardDetail(title: string, list: SoftwareAsset[]) {
+  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>`;
+  tbody.innerHTML = '';
+  if (list.length === 0) {
+    tbody.innerHTML = `<tr><td colspan="6" style="text-align:center; padding: 2rem;">해당 내역이 없습니다.</td></tr>`;
+  } else {
+    list.forEach((sw, idx) => {
+      const priceStr = sw.당월청구액 ? Number(sw.당월청구액.replace(/[^0-9]/g, '')).toLocaleString() : '0';
+      const tr = document.createElement('tr');
+      tr.innerHTML = `<td>${idx+1}</td><td>${sw.플랫폼명||'-'}</td><td>${sw.법인||'-'}</td><td>${sw.제품명||'-'}</td><td>${sw.결제일 ? sw.결제일 + '일' : '-'}</td><td>₩ ${priceStr}</td>`;
+      tbody.appendChild(tr);
+    });
+  }
+  modal.classList.remove('hidden');
+}