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

docs/issues/issue_dashboard_and_modal_optimization.md

@@ -0,0 +1,45 @@
+# [Issue] 소프트웨어 자산 관리 체계 개편 및 클라우드(Cloud) 서비스 관리 신설
+
+## 1. 개요
+기존의 단일 소프트웨어(SW) 분류 체계를 비즈니스 모델에 맞춰 **구독형, 영구형, 클라우드형**으로 삼원화하고, 특히 비용 변동이 잦은 클라우드 서비스를 독립적으로 관리할 수 있는 전용 시스템을 신설함.
+
+---
+
+## 2. 주요 작업 내용
+
+### 📂 소프트웨어 관리 프레임워크 재구조화
+- **분류 체계 개편**: 소프트웨어를 아래 세 가지 유형으로 재정의하여 관리 효율성을 높임.
+  1. **구독형 (Subscription)**: 연/월 정액제로 운영되는 SW
+  2. **영구형 (Perpetual)**: 구매 후 영구 소유하는 SW (유지보수 중심 관리)
+  3. **클라우드형 (Cloud)**: 플랫폼 기반 종량제(AWS, Azure 등) 서비스
+- **내비게이션 통합**: 상단 탭을 유형별로 분리하여 각 자산 특성에 맞는 리스트 뷰를 제공함.
+
+### ☁️ 클라우드(Cloud) 서비스 관리 페이지 신설
+- **전용 리스트 뷰 (`CloudListView.ts`)**: 
+  - 플랫폼명, 담당 부서, 프로젝트(사용용도), 결제 수단, 결제일 등 클라우드 특화 항목 중심의 테이블 구성함.
+  - **결제수단별 필터링 기능** (법인카드, 인보이스) 및 통합 검색 기능을 추가함.
+- **클라우드 전문 모달 (`CloudModal.ts`)**:
+  - 클라우드 요금 및 결제 정보 입력을 위한 2분할 레이아웃 배치함.
+  - **업데이트 이력(History Logs)** 시스템을 도입하여 매월 변동되는 비용을 히스토리 형식으로 기록/추적 가능하게 함.
+
+### 📊 대시보드(Dashboard) 리팩토링 및 고도화
+- **카드 레이아웃 최적화**: 사용율, 만료 예정, 클라우드 현황(전월/당월 비교) 정보를 2열 그리드로 정돈함.
+- **데이터 시각화**: 
+  - **클라우드 결제 규모 추이**: 최근 4개월간의 비용 변동을 꺾은선 그래프로 구현함.
+  - **실시간 데이터 연동**: 자산 업데이트 이력(Logs)에 기록된 비용이 대시보드 차트에 실시간 합산 반영되도록 로그 분석 엔진을 구축함.
+- **상세 팝업 연동**: 대시보드 요약 카드를 클릭하면 해당하는 자산의 상세 목록이 뜨는 모달 연동 기능을 추가함.
+
+### 🪟 UX 및 데이터 정합성 강화
+- **수정 저장 워크플로우 (Edit-to-Save)**: 실수로 인한 데이터 변경을 막기 위해 모든 상세 모달에 '조회 모드'를 기본으로 하고, [수정] 버튼 클릭 시에만 입력이 활성화되도록 제어함.
+- **금액 자동 포맷팅**: 콤마 표시 오류를 해결하고 천 단위 포맷팅을 표준화함.
+- **결제 임박 알림**: 각 서비스의 결제일을 계산하여 14일 이내 결제가 필요한 항목을 대시보드에서 즉시 파악할 수 있게 함.
+
+---
+
+## 3. 향후 과제
+- 클라우드 플랫폼 간 비용 비교 통계 기능 확장 검토
+- 결제 수단(법인카드) 만료일에 기초한 알림 서비스 추가 검토
+
+---
+**작업자**: Antigravity (AI Assistant)
+**상태**: 완료 (2026-04-17)

src/components/Modal/CloudModal.ts

@@ -0,0 +1,317 @@
+import { state } from '../../core/state';
+import { SoftwareAsset } from '../../core/excelHandler';
+import { openModal } from './BaseModal';
+import { createIcons, Save, X, Edit2, RotateCcw, History, Plus } from 'lucide';
+
+const CLOUD_MODAL_HTML = `
+  <div id="cloud-asset-modal" class="modal-overlay hidden">
+    <div class="modal-content wide">
+      <div class="modal-header">
+        <h2 id="cloud-modal-title">클라우드 서비스 상세</h2>
+        <button id="btn-close-cloud-modal" class="btn-icon" aria-label="닫기"><i data-lucide="x"></i></button>
+      </div>
+      <div class="modal-body">
+        <div class="modal-body-split">
+          <div class="modal-form-area">
+            <form id="cloud-asset-form" class="grid-form">
+              <input type="hidden" id="cloud-asset-id" />
+              <div class="form-group"><label>플랫폼명</label><input type="text" id="cloud-플랫폼명" placeholder="예: AWS, Cafe24" required /></div>
+              <div class="form-group">
+                <label>담당법인</label>
+                <select id="cloud-법인" required>
+                  <option value="한맥">한맥</option><option value="삼안">삼안</option><option value="바론">바론</option>
+                </select>
+              </div>
+              <div class="form-group" style="grid-column: span 2;"><label>사용용도(프로젝트/제품명)</label><input type="text" id="cloud-제품명" required /></div>
+              <div class="form-group"><label>담당부서</label><input type="text" id="cloud-부서" /></div>
+              <div class="form-group"><label>계정명(이메일)</label><input type="text" id="cloud-계정명" /></div>
+              
+              <div class="form-group"><label>결제수단</label>
+                <select id="cloud-결제수단">
+                  <option value="">선택안함</option>
+                  <option value="법인카드">법인카드</option>
+                  <option value="인보이스">인보이스</option>
+                </select>
+              </div>
+              <div class="form-group"><label>연결카드번호(뒷4자리)</label><input type="text" id="cloud-연결카드번호" placeholder="1234" /></div>
+              <div class="form-group"><label>결제일(기준일)</label><input type="number" min="1" max="31" id="cloud-결제일" placeholder="15" /></div>
+              <div class="form-group"><label>당월 청구액(원)</label><input type="text" id="cloud-당월청구액" placeholder="0" oninput="this.value = this.value.replace(/[^0-9]/g, '') ? Number(this.value.replace(/[^0-9]/g, '')).toLocaleString() : ''" /></div>
+              <div class="form-group" style="grid-column: span 2;"><label>비고</label><input type="text" id="cloud-비고" /></div>
+            </form>
+          </div>
+          <div class="modal-history-area">
+            <div class="history-header" style="display:flex; justify-content:space-between; align-items:center;">
+              <h3><i data-lucide="history" style="width:16px; height:16px;"></i> 업데이트 내역</h3>
+              <button type="button" id="btn-open-cloud-update" class="btn btn-outline btn-sm"><i data-lucide="plus" style="width:14px;height:14px;"></i> 내역 추가</button>
+            </div>
+            <div id="cloud-history-list" class="history-timeline">
+              <div class="empty-history">내역이 없습니다.</div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="modal-footer" style="justify-content: space-between;">
+        <button id="btn-delete-cloud-asset" class="btn btn-outline btn-danger">삭제</button>
+        <div class="footer-actions">
+          <button id="btn-revert-cloud-edit" class="btn btn-outline hidden">취소</button>
+          <button id="btn-close-cloud-footer" class="btn btn-outline">닫기</button>
+          <button id="btn-save-cloud-asset" class="btn btn-primary">수정</button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div id="cloud-update-modal" class="modal-overlay hidden" style="z-index: 1100;">
+    <div class="modal-content" style="max-width: 400px;">
+      <div class="modal-header">
+        <h2>클라우드 결제/이력 업데이트</h2>
+        <button id="btn-close-cloud-update" class="btn-icon"><i data-lucide="x"></i></button>
+      </div>
+      <div class="modal-body">
+        <div class="grid-form" style="grid-template-columns: 1fr;">
+          <div class="form-group">
+            <label>업데이트 일자</label>
+            <input type="date" id="cloud-update-date" />
+          </div>
+          <div class="form-group">
+            <label>청구 금액(원)</label>
+            <input type="text" id="cloud-update-cost" oninput="this.value = this.value.replace(/[^0-9]/g, '') ? Number(this.value.replace(/[^0-9]/g, '')).toLocaleString() : ''" placeholder="ex) 150,000" />
+          </div>
+          <div class="form-group">
+            <label>상세 내용 (메모)</label>
+            <input type="text" id="cloud-update-note" placeholder="예: 트래픽 초과로 인한 요금 증가" />
+          </div>
+        </div>
+      </div>
+      <div class="modal-footer">
+        <div></div>
+        <div class="footer-actions">
+          <button id="btn-cancel-cloud-update" class="btn btn-outline">취소</button>
+          <button id="btn-save-cloud-update" class="btn btn-primary">반영하기</button>
+        </div>
+      </div>
+    </div>
+  </div>
+`;
+
+export let currentCloudAsset: SoftwareAsset | null = null;
+export let isCloudEditMode = false;
+
+export function setCloudEditMode(edit: boolean) {
+  isCloudEditMode = edit;
+  const form = document.getElementById('cloud-asset-form') as HTMLFormElement;
+  const btnSave = document.getElementById('btn-save-cloud-asset') as HTMLButtonElement;
+  const btnRevert = document.getElementById('btn-revert-cloud-edit') as HTMLButtonElement;
+  const btnClose = document.getElementById('btn-close-cloud-footer') as HTMLButtonElement;
+
+  if (edit) {
+    form.classList.add('is-edit-mode');
+    form.classList.remove('is-view-mode');
+    btnSave.textContent = '저장';
+    btnRevert.classList.remove('hidden');
+    btnClose.classList.add('hidden');
+    Array.from(form.elements).forEach((el: any) => el.disabled = false);
+  } else {
+    form.classList.add('is-view-mode');
+    form.classList.remove('is-edit-mode');
+    btnSave.textContent = '수정';
+    btnRevert.classList.add('hidden');
+    btnClose.classList.remove('hidden');
+    Array.from(form.elements).forEach((el: any) => el.disabled = true);
+    if (currentCloudAsset) fillCloudFormData(currentCloudAsset);
+  }
+}
+
+export function fillCloudFormData(asset: SoftwareAsset) {
+  (document.getElementById('cloud-asset-id') as HTMLInputElement).value = asset.id;
+  (document.getElementById('cloud-플랫폼명') as HTMLInputElement).value = asset.플랫폼명 || '';
+  (document.getElementById('cloud-법인') as HTMLSelectElement).value = asset.법인 || '한맥';
+  (document.getElementById('cloud-제품명') as HTMLInputElement).value = asset.제품명 || '';
+  (document.getElementById('cloud-부서') as HTMLInputElement).value = asset.부서 || '';
+  (document.getElementById('cloud-계정명') as HTMLInputElement).value = asset.계정명 || '';
+  (document.getElementById('cloud-결제수단') as HTMLSelectElement).value = asset.결제수단 || '';
+  (document.getElementById('cloud-연결카드번호') as HTMLInputElement).value = asset.연결카드번호 || '';
+  (document.getElementById('cloud-결제일') as HTMLInputElement).value = asset.결제일 || '';
+  
+  const billing = asset.당월청구액 ? asset.당월청구액.replace(/[^0-9]/g, '') : '';
+  (document.getElementById('cloud-당월청구액') as HTMLInputElement).value = billing ? Number(billing).toLocaleString() : '';
+  (document.getElementById('cloud-비고') as HTMLInputElement).value = asset.비고 || '';
+
+  document.getElementById('btn-open-cloud-update')!.style.display = 'flex';
+  renderCloudHistory(asset.id);
+}
+
+function renderCloudHistory(assetId: string) {
+  const historyList = document.getElementById('cloud-history-list');
+  if (!historyList) return;
+  if (!state.masterData.logs) state.masterData.logs = [];
+
+  const logs = state.masterData.logs
+    .filter(l => l.assetId === assetId)
+    .sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());
+
+  if (logs.length === 0) {
+    historyList.innerHTML = '<div class="empty-history">업데이트 내역이 없습니다.</div>';
+    return;
+  }
+
+  historyList.innerHTML = logs.map(log => `
+    <div class="history-item">
+      <div class="history-date">${log.date}</div>
+      <div class="history-user">작업자: ${log.user}</div>
+      <div class="history-details">${log.details.replace(/\n/g, '<br>')}</div>
+    </div>
+  `).join('');
+  createIcons({ icons: { X, History, Plus } });
+}
+
+export function initCloudModal(renderContent: () => void, closeModals: () => void) {
+  if (!document.getElementById('cloud-asset-modal')) {
+    document.body.insertAdjacentHTML('beforeend', CLOUD_MODAL_HTML);
+  }
+
+  const form = document.getElementById('cloud-asset-form') as HTMLFormElement;
+  const btnRevert = document.getElementById('btn-revert-cloud-edit');
+  const btnSave = document.getElementById('btn-save-cloud-asset');
+  const btnDelete = document.getElementById('btn-delete-cloud-asset');
+
+  document.getElementById('btn-close-cloud-modal')?.addEventListener('click', closeModals);
+  document.getElementById('btn-close-cloud-footer')?.addEventListener('click', closeModals);
+
+  btnRevert?.addEventListener('click', (e) => {
+    e.preventDefault();
+    setCloudEditMode(false);
+  });
+
+  btnSave?.addEventListener('click', (e) => {
+    e.preventDefault();
+    if (!isCloudEditMode) {
+      setCloudEditMode(true);
+      return;
+    }
+    if (!form.checkValidity()) { form.reportValidity(); return; }
+
+    const id = (document.getElementById('cloud-asset-id') as HTMLInputElement).value;
+    const billingRaw = (document.getElementById('cloud-당월청구액') as HTMLInputElement).value.replace(/[^0-9]/g, '');
+
+    const newAsset: SoftwareAsset = {
+      id: id || Math.random().toString(36).substring(2, 9),
+      type: '클라우드',
+      플랫폼명: (document.getElementById('cloud-플랫폼명') as HTMLInputElement).value,
+      법인: (document.getElementById('cloud-법인') as HTMLSelectElement).value,
+      제품명: (document.getElementById('cloud-제품명') as HTMLInputElement).value,
+      부서: (document.getElementById('cloud-부서') as HTMLInputElement).value,
+      계정명: (document.getElementById('cloud-계정명') as HTMLInputElement).value,
+      결제수단: (document.getElementById('cloud-결제수단') as HTMLSelectElement).value,
+      연결카드번호: (document.getElementById('cloud-연결카드번호') as HTMLInputElement).value,
+      결제일: (document.getElementById('cloud-결제일') as HTMLInputElement).value,
+      당월청구액: billingRaw,
+      비고: (document.getElementById('cloud-비고') as HTMLInputElement).value,
+      구매일: '', 금액: '', 수량: 1, 납품업체: ''
+    };
+
+    if (id) {
+      const idx = state.masterData.sw.findIndex(a => a.id === id);
+      if (idx !== -1) state.masterData.sw[idx] = newAsset;
+    } else {
+      state.masterData.sw.push(newAsset);
+      const now = new Date();
+      state.masterData.logs = state.masterData.logs || [];
+      state.masterData.logs.push({
+        id: Math.random().toString(36).substring(2, 9),
+        assetId: newAsset.id,
+        date: `${now.getFullYear()}-${String(now.getMonth()+1).padStart(2,'0')}-${String(now.getDate()).padStart(2,'0')}`,
+        user: '관리자',
+        details: '신규 등록'
+      });
+    }
+    closeModals();
+    renderContent();
+  });
+
+  btnDelete?.addEventListener('click', (e) => {
+    e.preventDefault();
+    const id = (document.getElementById('cloud-asset-id') as HTMLInputElement).value;
+    if (confirm('클라우드 자산을 삭제하시겠습니까?')) {
+      state.masterData.sw = state.masterData.sw.filter(a => a.id !== id);
+      closeModals();
+      renderContent();
+    }
+  });
+
+  // 클라우드 업데이트 (이력) 모달 로직
+  const updateModal = document.getElementById('cloud-update-modal')!;
+  document.getElementById('btn-open-cloud-update')?.addEventListener('click', () => {
+    updateModal.classList.remove('hidden');
+    (document.getElementById('cloud-update-date') as HTMLInputElement).value = new Date().toISOString().split('T')[0];
+    (document.getElementById('cloud-update-cost') as HTMLInputElement).value = '';
+    (document.getElementById('cloud-update-note') as HTMLInputElement).value = '';
+  });
+  
+  const closeUpdateModal = () => updateModal.classList.add('hidden');
+  document.getElementById('btn-close-cloud-update')?.addEventListener('click', closeUpdateModal);
+  document.getElementById('btn-cancel-cloud-update')?.addEventListener('click', closeUpdateModal);
+  
+  document.getElementById('btn-save-cloud-update')?.addEventListener('click', () => {
+    const id = (document.getElementById('cloud-asset-id') as HTMLInputElement).value;
+    if (!id) return;
+    
+    const date = (document.getElementById('cloud-update-date') as HTMLInputElement).value;
+    const costRaw = (document.getElementById('cloud-update-cost') as HTMLInputElement).value.replace(/[^0-9]/g, '');
+    const note = (document.getElementById('cloud-update-note') as HTMLInputElement).value;
+    
+    if (!date) return alert('업데이트 일자를 입력하세요.');
+    
+    let details = '결제/상태 업데이트';
+    if (costRaw) details += ` (비용: ₩ ${Number(costRaw).toLocaleString()})`;
+    if (note) details += `\n메모: ${note}`;
+    
+    state.masterData.logs = state.masterData.logs || [];
+    state.masterData.logs.push({
+      id: Math.random().toString(36).substring(2, 9),
+      assetId: id,
+      date,
+      user: '관리자',
+      details
+    });
+    
+    // 금액 업데이트 반영
+    if (costRaw) {
+      const idx = state.masterData.sw.findIndex(a => a.id === id);
+      if (idx !== -1) {
+        state.masterData.sw[idx].당월청구액 = costRaw;
+        (document.getElementById('cloud-당월청구액') as HTMLInputElement).value = Number(costRaw).toLocaleString();
+      }
+    }
+    
+    closeUpdateModal();
+    renderCloudHistory(id);
+    renderContent();
+  });
+
+  createIcons({ icons: { Save, X, Edit2, RotateCcw, History, Plus } });
+}
+
+export function openCloudModal(asset?: SoftwareAsset) {
+  currentCloudAsset = asset || null;
+  const form = document.getElementById('cloud-asset-form') as HTMLFormElement;
+  const deleteBtn = document.getElementById('btn-delete-cloud-asset')!;
+  
+  openModal('cloud-asset-modal');
+  form.reset();
+
+  if (asset) {
+    document.getElementById('cloud-modal-title')!.textContent = '클라우드 서비스 상세';
+    deleteBtn.style.display = 'block';
+    fillCloudFormData(asset);
+    setCloudEditMode(false);
+  } else {
+    document.getElementById('cloud-modal-title')!.textContent = '신규 클라우드 서비스 등록';
+    deleteBtn.style.display = 'none';
+    (document.getElementById('cloud-asset-id') as HTMLInputElement).value = '';
+    document.getElementById('btn-open-cloud-update')!.style.display = 'none';
+    renderCloudHistory('');
+    setCloudEditMode(true);
+  }
+  createIcons({ icons: { History, Plus } });
+}

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

src/components/Modal/SWModal.ts

@@ -25,7 +25,7 @@ const SW_MODAL_HTML = `
               <div class="form-group">
                 <label for="sw-법인">법인</label>
                 <select id="sw-법인" required>
-                  <option value="한맥">한맥 (HM)</option><option value="삼안 (SM)">삼안 (SM)</option><option value="바론 (BR)">바론 (BR)</option>
+                  <option value="한맥">한맥</option><option value="삼안">삼안</option><option value="바론">바론</option>
                 </select>
               </div>
               <div class="form-group">
@@ -52,7 +52,7 @@ const SW_MODAL_HTML = `
               </div>
               <div class="form-group">
                 <label for="sw-금액">금액</label>
-                <input type="text" id="sw-금액" oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/\\B(?=(\\d{3})+(?!\d))/g, ',')" />
+                <input type="text" id="sw-금액" oninput="this.value = this.value.replace(/[^0-9]/g, '') ? Number(this.value.replace(/[^0-9]/g, '')).toLocaleString() : ''" />
               </div>
               <div class="form-group">
                 <label for="sw-수량">수량 (보유량)</label>
@@ -122,7 +122,7 @@ const SW_MODAL_HTML = `
           </div>
           <div class="form-group">
             <label>발생 비용</label>
-            <input type="text" id="sw-update-cost" oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/\\B(?=(\\d{3})+(?!\d))/g, ',')" placeholder="ex) 500,000" />
+            <input type="text" id="sw-update-cost" oninput="this.value = this.value.replace(/[^0-9]/g, '') ? Number(this.value.replace(/[^0-9]/g, '')).toLocaleString() : ''" placeholder="ex) 500,000" />
           </div>
           <div class="form-group">
             <label>상세 내용 (메모)</label>
@@ -157,12 +157,14 @@ export function setEditMode(edit: boolean) {
     btnSaveSw.textContent = '저장';
     btnRevertEdit.classList.remove('hidden');
     btnCloseFooter.classList.add('hidden');
+    Array.from(swForm.elements).forEach((el: any) => el.disabled = false);
   } else {
     swForm.classList.add('is-view-mode');
     swForm.classList.remove('is-edit-mode');
     btnSaveSw.textContent = '수정';
     btnRevertEdit.classList.add('hidden');
     btnCloseFooter.classList.remove('hidden');
+    Array.from(swForm.elements).forEach((el: any) => el.disabled = true);
     if (currentAsset) fillFormData(currentAsset);
   }
 }
@@ -248,6 +250,16 @@ export function initSwModal(renderContent: () => void, closeModals: () => void)
       if(idx !== -1) state.masterData.sw[idx] = newAsset;
     } else {
       state.masterData.sw.push(newAsset);
+      
+      const now = new Date();
+      state.masterData.logs = state.masterData.logs || [];
+      state.masterData.logs.push({
+        id: Math.random().toString(36).substring(2, 9),
+        assetId: newAsset.id,
+        date: `${now.getFullYear()}-${String(now.getMonth()+1).padStart(2,'0')}-${String(now.getDate()).padStart(2,'0')}`,
+        user: '관리자',
+        details: '신규 등록'
+      });
     }
     
     closeModals();
@@ -348,6 +360,7 @@ export function initSwModal(renderContent: () => void, closeModals: () => void)
 function renderSwHistory(assetId: string) {
   const historyList = document.getElementById('sw-history-list');
   if (!historyList) return;
+  if (!state.masterData.logs) state.masterData.logs = [];
 
   const logs = state.masterData.logs
     .filter(l => l.assetId === assetId)

src/components/Navigation.ts

@@ -7,7 +7,7 @@ const MENU_CONFIG = {
   },
   sw: {
     label: '소프트웨어',
-    tabs: ['대시보드', '구독SW', '영구SW']
+    tabs: ['대시보드', '구독SW', '영구SW', '클라우드']
   },
   ops: {
     label: '운영 서비스',

src/core/dummyDataGenerator.ts

@@ -23,6 +23,7 @@ export function generateDummyData(): MasterAssetData {
   const hw: HardwareAsset[] = [];
   const sw: SoftwareAsset[] = [];
   const swUsers: SWUser[] = [];
+  const logs: any[] = [];
   
   // 1. 개인PC 50개
   for (let i = 1; i <= 50; i++) {
@@ -228,5 +229,51 @@ export function generateDummyData(): MasterAssetData {
     }
   }
 
-  return { hw, sw, swUsers, logs: [] };
+  // 7. 클라우드 서비스 15개
+  for (let i = 1; i <= 15; i++) {
+    const swId = Math.random().toString(36).substring(2, 9);
+    const platforms = ['AWS', 'Microsoft Azure', 'Google Cloud', 'Naver Cloud', 'Cafe24'];
+    const pfmt = rand(platforms);
+    
+    const billing = (Math.floor(Math.random() * 500) + 10) * 10000;
+    const paymentDay = String(Math.floor(Math.random() * 28) + 1);
+    
+    sw.push({
+      id: swId,
+      type: '클라우드',
+      플랫폼명: pfmt,
+      법인: rand(corps),
+      부서: rand(depts),
+      제품명: rand(['본사 홈페이지 운영', 'AI 분석 프로젝트', '인트라넷 백업용', '현장 모니터링 시스템']),
+      계정명: `admin_${i}@hm.com`,
+      결제수단: Math.random() > 0.5 ? '법인카드' : '인보이스',
+      결제일: paymentDay,
+      연결카드번호: String(Math.floor(Math.random() * 8999) + 1000), // 1000~9999
+      당월청구액: String(billing),
+      비고: Math.random() > 0.8 ? '비용 한도 초과 경고' : '',
+      
+      // 더미 필수값
+      구매일: '',
+      금액: '',
+      수량: 1,
+      납품업체: ''
+    });
+
+    // 4개월치 모의 결제 이력 생성
+    for (let m = 0; m < 4; m++) {
+      const logDate = new Date();
+      logDate.setMonth(logDate.getMonth() - m);
+      logDate.setDate(parseInt(paymentDay, 10));
+      const historyBilling = Math.floor(billing * (1 + (Math.random() * 0.2 - 0.1)));
+      logs.push({
+        id: Math.random().toString(36).substring(2, 9),
+        assetId: swId,
+        date: `${logDate.getFullYear()}-${String(logDate.getMonth()+1).padStart(2,'0')}-${String(logDate.getDate()).padStart(2,'0')}`,
+        user: `admin_${i}@hm.com`,
+        details: `정기 결제 완료 (비용: ₩ ${historyBilling.toLocaleString()})`
+      });
+    }
+  }
+
+  return { hw, sw, swUsers, logs };
 }

src/core/excelHandler.ts

@@ -57,6 +57,11 @@ export interface SoftwareAsset {
   계정명: string;
   납품업체: string;
   비고: string;
+  플랫폼명?: string;
+  결제수단?: string;
+  결제일?: string;
+  연결카드번호?: string;
+  당월청구액?: string;
 }
 
 export interface SWUser {
@@ -87,7 +92,7 @@ export interface MasterAssetData {
 }
 
 const HW_TABS = ['개인PC', '서버', '스토리지', '전산비품'];
-const SW_TABS = ['구독SW', '영구SW'];
+const SW_TABS = ['구독SW', '영구SW', '클라우드'];
 
 const HW_HEADERS = ['법인', '자산코드', '명칭', '위치', '관리자', 'IP주소', 'MACaddress', 'HW사양', 'OS', '구매일', '금액', '납품업체', '품의서명'];
 const PC_HEADERS = ['법인', '자산코드', '사용자', '위치', 'CPU', 'GPU', 'RAM', 'SSD1', 'SSD2', 'HDD1', 'HDD2', '구매일', '금액', '납품업체', '품의서명'];
@@ -95,6 +100,7 @@ const SERVER_HEADERS = ['법인', '자산번호', '유형', '용도', '설치위
 const STORAGE_HEADERS = ['법인', '유형', '자산코드', '명칭', '위치', '모델명', '용량', '담당자(정)', '담당자(부)', 'IP주소', 'MAC주소', '구매일', '금액', '납품업체', '품의서명'];
 const SUB_SW_HEADERS = ['ID', '분야', '법인', '부서', '제품명', '구매일', '구독일', '금액', '수량', '계정명', '납품업체', '비고'];
 const PERM_SW_HEADERS = ['ID', '분야', '법인', '부서', '제품명', '구매일', '유지보수여부', '금액', '수량', '계정명', '납품업체', '비고'];
+const CLOUD_HEADERS = ['ID', '플랫폼명', '법인', '부서', '사용용도(제품명)', '계정명', '결제수단', '결제일', '연결카드번호', '당월청구액', '비고'];
 const SW_USER_HEADERS = ['id', 'swId', '법인', '부서', '팀', '직위', '이름', '사용기간', '신청서명'];
 const HISTORY_HEADERS = ['id', 'assetId', 'date', 'details', 'user'];
 
@@ -128,9 +134,11 @@ export function downloadTemplate() {
   });
 
   SW_TABS.forEach(tab => {
-    let hd = tab === '구독SW' ? SUB_SW_HEADERS : PERM_SW_HEADERS;
+    let hd = tab === '구독SW' ? SUB_SW_HEADERS : (tab === '클라우드' ? CLOUD_HEADERS : PERM_SW_HEADERS);
     const ws = XLSX.utils.aoa_to_sheet([hd]);
-    ws['!cols'] = [{wch:15}, {wch:15}, {wch:15}, {wch:20}, {wch:30}, {wch:15}, {wch:20}, {wch:15}, {wch:10}, {wch:20}, {wch:20}, {wch:30}];
+    ws['!cols'] = tab === '클라우드' 
+      ? [{wch:15}, {wch:20}, {wch:15}, {wch:20}, {wch:30}, {wch:25}, {wch:15}, {wch:10}, {wch:15}, {wch:15}, {wch:30}] 
+      : [{wch:15}, {wch:15}, {wch:15}, {wch:20}, {wch:30}, {wch:15}, {wch:20}, {wch:15}, {wch:10}, {wch:20}, {wch:20}, {wch:30}];
     XLSX.utils.book_append_sheet(wb, ws, tab);
   });
 
@@ -195,6 +203,11 @@ export function exportToExcel(masterData: MasterAssetData) {
         SUB_SW_HEADERS,
         ...targetAssets.map(a => [a.id, a.분야||'', a.법인, a.부서||'', a.제품명, a.구매일, a.구독일, a.금액, a.수량, a.계정명, a.납품업체, a.비고])
       ];
+    } else if (tab === '클라우드') {
+      wsData = [
+        CLOUD_HEADERS,
+        ...targetAssets.map(a => [a.id, a.플랫폼명||'', a.법인, a.부서||'', a.제품명, a.계정명, a.결제수단||'', a.결제일||'', a.연결카드번호||'', a.당월청구액||'', a.비고])
+      ];
     } else {
       wsData = [
         PERM_SW_HEADERS,
@@ -202,7 +215,9 @@ export function exportToExcel(masterData: MasterAssetData) {
       ];
     }
     const ws = XLSX.utils.aoa_to_sheet(wsData);
-    ws['!cols'] = [{wch:15}, {wch:15}, {wch:15}, {wch:20}, {wch:30}, {wch:15}, {wch:20}, {wch:15}, {wch:10}, {wch:20}, {wch:20}, {wch:30}];
+    ws['!cols'] = tab === '클라우드' 
+      ? [{wch:15}, {wch:20}, {wch:15}, {wch:20}, {wch:30}, {wch:25}, {wch:15}, {wch:10}, {wch:15}, {wch:15}, {wch:30}] 
+      : [{wch:15}, {wch:15}, {wch:15}, {wch:20}, {wch:30}, {wch:15}, {wch:20}, {wch:15}, {wch:10}, {wch:20}, {wch:20}, {wch:30}];
     XLSX.utils.book_append_sheet(wb, ws, tab);
   });
 
@@ -303,13 +318,34 @@ export async function parseExcel(file: File): Promise<MasterAssetData> {
 
           if (SW_TABS.includes(sheetName)) {
             json.forEach(row => {
-              swAssets.push({
-                id: row['ID'] ? String(row['ID']) : Math.random().toString(36).substring(2, 9),
-                type: sheetName, 분야: row['분야'] || '', 법인: row['법인'] || '', 부서: row['부서'] || '', 제품명: row['제품명'] || '',
-                구매일: row['구매일'] || '', 구독일: row['구독일'] || '', 유지보수여부: row['유지보수여부'] === 'Y' || row['유지보수여부'] === true,
-                금액: row['금액'] ? String(row['금액']) : '', 수량: parseInt(row['수량'] || '1', 10),
-                계정명: row['계정명'] || '', 납품업체: row['납품업체'] || '', 비고: row['비고'] || '',
-              });
+              if (sheetName === '클라우드') {
+                swAssets.push({
+                  id: row['ID'] ? String(row['ID']) : Math.random().toString(36).substring(2, 9),
+                  type: sheetName,
+                  플랫폼명: row['플랫폼명'] || '',
+                  법인: row['법인'] || '',
+                  부서: row['부서'] || '',
+                  제품명: row['사용용도(제품명)'] || '',
+                  구매일: '',
+                  금액: '',
+                  수량: 1,
+                  계정명: row['계정명'] || '',
+                  결제수단: row['결제수단'] || '',
+                  결제일: row['결제일'] ? String(row['결제일']) : '',
+                  연결카드번호: row['연결카드번호'] ? String(row['연결카드번호']) : '',
+                  당월청구액: row['당월청구액'] ? String(row['당월청구액']) : '',
+                  납품업체: '',
+                  비고: row['비고'] || '',
+                });
+              } else {
+                swAssets.push({
+                  id: row['ID'] ? String(row['ID']) : Math.random().toString(36).substring(2, 9),
+                  type: sheetName, 분야: row['분야'] || '', 법인: row['법인'] || '', 부서: row['부서'] || '', 제품명: row['제품명'] || '',
+                  구매일: row['구매일'] || '', 구독일: row['구독일'] || '', 유지보수여부: row['유지보수여부'] === 'Y' || row['유지보수여부'] === true,
+                  금액: row['금액'] ? String(row['금액']) : '', 수량: parseInt(row['수량'] || '1', 10),
+                  계정명: row['계정명'] || '', 납품업체: row['납품업체'] || '', 비고: row['비고'] || '',
+                });
+              }
             });
           }
 

src/core/state.ts

@@ -57,7 +57,7 @@ export const state: AppState = {
   masterData: {
     ...dummy,
     hw: mergedHw, // 기본적으로 하드코딩된 데이터를 가지고 시작
-    logs: [] 
+    logs: dummy.logs || []
   },
   activeCategory: 'hw',
   activeSubTab: '대시보드',

src/views/Dashboard/SwDashboard.ts

@@ -1,6 +1,6 @@
 import { state } from '../../core/state';
 import { SoftwareAsset } from '../../core/excelHandler';
-import { openSwDashboardDetail, openSwUsageDetail } from '../../components/Modal/DashboardDetailModal';
+import { openSwDashboardDetail, openSwUsageDetail, openCloudDashboardDetail } from '../../components/Modal/DashboardDetailModal';
 import { normalizeDate } from '../../core/utils';
 
 declare var Chart: any;
@@ -9,7 +9,12 @@ export 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();
+  let thisMonthCloudCost = 0;
+  let lastMonthCloudCost = 0;
+  let cloudExp = 0;
+
+  const currentYear = new Date().getFullYear();
+  
   const corps = ['한맥', '삼안', '바론'];
   const categories = ['업무공통', '개발S/W', '디자인', '설계S/W'];
   
@@ -17,6 +22,8 @@ export function renderSwDashboard(container: HTMLElement) {
   const costByCat: Record<string, number> = {};
   categories.forEach(c => costByCat[c] = 0);
 
+  const today = new Date();
+
   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);
@@ -26,12 +33,28 @@ export function renderSwDashboard(container: HTMLElement) {
      if (sw.type === '구독SW') {
        subQty += qty; subUsed += assigned; subTotal++;
        if (isSWExpiring(sw)) subExp++;
-     } else {
+     } else if (sw.type === '영구SW') {
        permQty += qty; permUsed += assigned; permTotal++;
        if (isSWExpiring(sw)) permExp++;
+     } else if (sw.type === '클라우드') {
+       if (sw.당월청구액) {
+         thisMonthCloudCost += parseInt(String(sw.당월청구액).replace(/,/g, ''), 10) || 0;
+       }
+       if (sw.결제일) {
+         const payDay = parseInt(sw.결제일, 10);
+         if (!isNaN(payDay)) {
+           const nextPayMs = new Date(today.getFullYear(), today.getMonth(), payDay).getTime();
+           let diff = (nextPayMs - today.getTime()) / (1000 * 60 * 60 * 24);
+           if (diff < 0) {
+             const nextMonthMs = new Date(today.getFullYear(), today.getMonth() + 1, payDay).getTime();
+             diff = (nextMonthMs - today.getTime()) / (1000 * 60 * 60 * 24);
+           }
+           if (diff <= 14) cloudExp++;
+         }
+       }
      }
 
-     if (sw.구매일 && sw.구매일.startsWith(currentYear)) {
+     if (sw.구매일 && sw.구매일.startsWith(String(currentYear))) {
        if (costByCorp[sw.법인] !== undefined) costByCorp[sw.법인] += price;
        if (sw.분야 && costByCat[sw.분야] !== undefined) costByCat[sw.분야] += price;
      }
@@ -41,10 +64,41 @@ export function renderSwDashboard(container: HTMLElement) {
   const permPer = permQty > 0 ? Math.round((permUsed/permQty)*100) : 0;
   const subExpPer = subTotal > 0 ? Math.round((subExp/subTotal)*100) : 0;
   const permExpPer = permTotal > 0 ? Math.round((permExp/permTotal)*100) : 0;
+  const cloudExpTotal = state.masterData.sw.filter(s => s.type === '클라우드').length;
+  const cloudExpPer = cloudExpTotal > 0 ? Math.round((cloudExp/cloudExpTotal)*100) : 0;
+
+  // Cloud trend & Last month cost logic
+  const cloudCostTrend = [0, 0, 0, 0];
+  const trendLabels: string[] = [];
+  for(let i=3; i>=0; i--) {
+     const d = new Date();
+     d.setMonth(d.getMonth() - i);
+     trendLabels.push(`${d.getMonth()+1}월`);
+  }
+  
+  if (state.masterData.logs) {
+    state.masterData.logs.forEach(log => {
+        const match = log.details.match(/[^\d]*([\d,]+)/);
+        if (match && (log.details.includes('청구액') || log.details.includes('비용'))) {
+           const cost = parseInt(match[1].replace(/,/g, ''), 10);
+           const logDate = new Date(log.date);
+           const monthDiff = (today.getFullYear() - logDate.getFullYear())*12 + (today.getMonth() - logDate.getMonth());
+           
+           if (monthDiff === 1) lastMonthCloudCost += cost;
+           if (monthDiff >= 0 && monthDiff < 4) cloudCostTrend[3 - monthDiff] += cost;
+        }
+    });
+  }
+
+  const costDiff = thisMonthCloudCost - lastMonthCloudCost;
+  const costDiffText = lastMonthCloudCost > 0 
+    ? `${costDiff >= 0 ? '+' : ''}${((costDiff/lastMonthCloudCost)*100).toFixed(1)}%`
+    : 'New';
 
   container.innerHTML = `
     <div class="view-container">
       <h3 class="dashboard-section-title">소프트웨어 라이선스 현황</h3>
+      
       <div class="dashboard-layout-2col" style="margin-bottom: 1.5rem;">
         <div class="dashboard-card" data-action="sub-usage" style="cursor:pointer; min-height:auto;">
           <span style="font-size:1rem; font-weight:700; color:var(--text-main);">구독 소프트웨어 사용율</span>
@@ -67,46 +121,83 @@ export function renderSwDashboard(container: HTMLElement) {
       <div class="dashboard-layout-2col" style="margin-bottom: 1.5rem;">
         <div class="dashboard-card" data-action="sub-exp" style="flex-direction:row; justify-content:space-between; align-items:center; cursor:pointer; min-height:auto;">
           <div style="flex:1;">
-            <span style="font-size:1rem; font-weight:700; color:var(--text-main);">구독 SW 만료 예정 (30일 이내)</span>
+            <span style="font-size:1rem; font-weight:700; color:var(--text-main);">구독 SW 만료 예정<br><span style="font-size:0.8rem;font-weight:400;color:var(--text-muted);">(30일 이내)</span></span>
             <div style="font-size: 1.5rem; font-weight:700; color:${subExp > 0 ? 'var(--dash-danger)' : 'var(--text-main)'}; margin-top:0.5rem;">${subExp}개 제품</div>
           </div>
-          <div style="width: 60px; height: 60px; 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: 48px; height: 48px; border-radius: 50%; background: var(--white); display:flex; justify-content:center; align-items:center;">
-              <span style="font-size: 0.875rem; color:var(--text-muted); font-weight:600;">${subExpPer}%</span>
+          <div style="width: 50px; height: 50px; 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: 40px; height: 40px; border-radius: 50%; background: var(--white); display:flex; justify-content:center; align-items:center;">
+              <span style="font-size: 0.75rem; color:var(--text-muted); font-weight:600;">${subExpPer}%</span>
             </div>
           </div>
         </div>
         <div class="dashboard-card" data-action="perm-exp" style="flex-direction:row; justify-content:space-between; align-items:center; cursor:pointer; min-height:auto;">
           <div style="flex:1;">
-            <span style="font-size:1rem; font-weight:700; color:var(--text-main);">유지보수 만료 예정 (30일 이내)</span>
+            <span style="font-size:1rem; font-weight:700; color:var(--text-main);">유지보수 만료 예정<br><span style="font-size:0.8rem;font-weight:400;color:var(--text-muted);">(30일 이내)</span></span>
             <div style="font-size: 1.5rem; font-weight:700; color:${permExp > 0 ? 'var(--dash-danger)' : 'var(--text-main)'}; margin-top:0.5rem;">${permExp}개 제품</div>
           </div>
-          <div style="width: 60px; height: 60px; 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: 48px; height: 48px; border-radius: 50%; background: var(--white); display:flex; justify-content:center; align-items:center;">
-              <span style="font-size: 0.875rem; color:var(--text-muted); font-weight:600;">${permExpPer}%</span>
+          <div style="width: 50px; height: 50px; 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: 40px; height: 40px; border-radius: 50%; background: var(--white); display:flex; justify-content:center; align-items:center;">
+              <span style="font-size: 0.75rem; color:var(--text-muted); font-weight:600;">${permExpPer}%</span>
             </div>
           </div>
         </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>
+      <!-- 클라우드 전월/당월 통합 및 결제 임박 (1:1 비율) -->
+      <div class="dashboard-layout-2col" style="margin-bottom: 2.5rem;">
+        <div class="dashboard-card" data-action="cloud-billing" style="flex-direction:row; cursor:pointer; min-height:auto; align-items:center; gap: 1.5rem;">
+          <div style="flex:1;">
+            <span style="font-size:1rem; font-weight:700; color:var(--text-main);">☁️ 클라우드 청구 현황 (통합)</span>
+            <div style="margin-top: 0.5rem; display:flex; align-items:baseline; gap: 0.75rem;">
+              <span style="font-size: 2rem; font-weight:800; color:var(--primary-color);">₩ ${thisMonthCloudCost.toLocaleString()}</span>
+              <span style="font-size: 0.85rem; font-weight:600; color:${costDiff >= 0 ? 'var(--dash-danger)' : 'var(--dash-primary)'};">
+                ${costDiff >= 0 ? '▲' : '▼'} ${costDiffText}
+              </span>
+            </div>
+            <div style="font-size: 0.8125rem; color:var(--text-muted); margin-top:0.25rem;">전월 실적: ₩ ${lastMonthCloudCost.toLocaleString()}</div>
+          </div>
+          <div style="width: 50px; height: 50px; border-radius: 50%; background: conic-gradient(var(--primary-color) 100%, var(--border-color) 0); display:flex; justify-content:center; align-items:center; opacity:0.8;">
+            <div style="width: 40px; height: 40px; border-radius: 50%; background: var(--white); display:flex; justify-content:center; align-items:center;">
+              <span style="font-size: 0.75rem; color:var(--text-muted); font-weight:600;">₩</span>
+            </div>
+          </div>
+        </div>
+        
+        <div class="dashboard-card" data-action="cloud-exp" style="flex-direction:row; justify-content:space-between; align-items:center; cursor:pointer; min-height:auto;">
+          <div style="flex:1;">
+            <span style="font-size:1rem; font-weight:700; color:var(--text-main);">클라우드 결제 임박<br><span style="font-size:0.8rem;font-weight:400;color:var(--text-muted);">(14일 이내)</span></span>
+            <div style="font-size: 1.5rem; font-weight:700; color:${cloudExp > 0 ? 'var(--dash-danger)' : 'var(--text-main)'}; margin-top:0.5rem;">${cloudExp}건 청구</div>
+          </div>
+          <div style="width: 50px; height: 50px; border-radius: 50%; background: conic-gradient(var(--dash-danger) ${cloudExpPer}%, var(--border-color) 0); display:flex; justify-content:center; align-items:center;">
+            <div style="width: 40px; height: 40px; border-radius: 50%; background: var(--white); display:flex; justify-content:center; align-items:center;">
+              <span style="font-size: 0.75rem; color:var(--text-muted); font-weight:600;">${cloudExpPer}%</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <h3 class="dashboard-section-title">비용 분석 현황</h3>
+      <div style="display:grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 2rem;">
+        <div class="dashboard-card" style="grid-column: span 1;">
+          <h4 style="margin-bottom:1rem; font-size:0.9rem; color:var(--text-muted);">${currentYear}년 법인별 도입 금액 (원)</h4>
           <canvas id="chart-sw-corp"></canvas>
         </div>
-        <div class="dashboard-card">
-          <h4 style="margin-bottom:1rem; font-size:0.9rem; color:var(--text-muted);">분야별 도입 금액 (원)</h4>
+        <div class="dashboard-card" style="grid-column: span 1;">
+          <h4 style="margin-bottom:1rem; font-size:0.9rem; color:var(--text-muted);">${currentYear}년 분야별 도입 금액 (원)</h4>
           <canvas id="chart-sw-cat"></canvas>
         </div>
+        <div class="dashboard-card" style="grid-column: span 1;">
+          <h4 style="margin-bottom:1rem; font-size:0.9rem; color:var(--text-muted);">직전 4개월 클라우드 결제 추이 (원)</h4>
+          <canvas id="chart-cloud-trend"></canvas>
+        </div>
       </div>
     </div>
   `;
 
   setTimeout(() => {
     if (typeof Chart === 'undefined') return;
+    
     const ctxCorp = (document.getElementById('chart-sw-corp') as HTMLCanvasElement)?.getContext('2d');
-    const ctxCat = (document.getElementById('chart-sw-cat') as HTMLCanvasElement)?.getContext('2d');
     if (ctxCorp) {
       const chart = new Chart(ctxCorp, {
         type: 'bar',
@@ -115,6 +206,33 @@ export function renderSwDashboard(container: HTMLElement) {
       });
       state.activeCharts.push(chart);
     }
+
+    const ctxTrend = (document.getElementById('chart-cloud-trend') as HTMLCanvasElement)?.getContext('2d');
+    if (ctxTrend) {
+      const chart = new Chart(ctxTrend, {
+        type: 'line',
+        data: { 
+          labels: trendLabels, 
+          datasets: [{ 
+            data: cloudCostTrend, 
+            borderColor: '#6366f1', 
+            backgroundColor: 'rgba(99, 102, 241, 0.05)', 
+            borderWidth: 2, 
+            fill: true,
+            tension: 0.4
+          }] 
+        },
+        options: { 
+          responsive: true, 
+          maintainAspectRatio: false, 
+          plugins: { legend: { display: false } },
+          scales: { y: { beginAtZero: true } }
+        }
+      });
+      state.activeCharts.push(chart);
+    }
+
+    const ctxCat = (document.getElementById('chart-sw-cat') as HTMLCanvasElement)?.getContext('2d');
     if (ctxCat) {
       const chart = new Chart(ctxCat, {
         type: 'bar',
@@ -129,6 +247,23 @@ export function renderSwDashboard(container: HTMLElement) {
   container.querySelector('[data-action="perm-usage"]')?.addEventListener('click', () => openSwUsageDetail('영구 소프트웨어 사용 목록', state.masterData.sw.filter(sw => sw.type === '영구SW')));
   container.querySelector('[data-action="sub-exp"]')?.addEventListener('click', () => openSwDashboardDetail('구독 SW 만료 예정 목록', state.masterData.sw.filter(sw => sw.type === '구독SW' && isSWExpiring(sw))));
   container.querySelector('[data-action="perm-exp"]')?.addEventListener('click', () => openSwDashboardDetail('유지보수 만료 예정 목록', state.masterData.sw.filter(sw => sw.type === '영구SW' && isSWExpiring(sw))));
+  container.querySelector('[data-action="cloud-billing"]')?.addEventListener('click', () => openCloudDashboardDetail('클라우드 청구 현황 (전체)', state.masterData.sw.filter(sw => sw.type === '클라우드')));
+  
+  container.querySelector('[data-action="cloud-exp"]')?.addEventListener('click', () => {
+    const expiringClouds = state.masterData.sw.filter(sw => {
+      if (sw.type !== '클라우드' || !sw.결제일) return false;
+      const payDay = parseInt(sw.결제일, 10);
+      if (isNaN(payDay)) return false;
+      const nextPayMs = new Date(today.getFullYear(), today.getMonth(), payDay).getTime();
+      let diff = (nextPayMs - today.getTime()) / (1000 * 60 * 60 * 24);
+      if (diff < 0) {
+        const nextMonthMs = new Date(today.getFullYear(), today.getMonth() + 1, payDay).getTime();
+        diff = (nextMonthMs - today.getTime()) / (1000 * 60 * 60 * 24);
+      }
+      return diff <= 14;
+    });
+    openCloudDashboardDetail('결제 임박 클라우드 목록 (14일 이내)', expiringClouds);
+  });
 }
 
 function isSWExpiring(sw: SoftwareAsset) {

src/views/List/CloudListView.ts

@@ -0,0 +1,114 @@
+import { state } from '../../core/state';
+import { openCloudModal } from '../../components/Modal/CloudModal';
+import { createIcons, Cloud, CreditCard, DollarSign } from 'lucide';
+
+export function renderCloudList(container: HTMLElement) {
+  const fullList = state.masterData.sw.filter(a => a.type === '클라우드');
+  
+  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-payment">
+        <option value="">전체 결제수단</option>
+        <option value="법인카드">법인카드</option>
+        <option value="인보이스">인보이스 (월별송금)</option>
+      </select>
+    </div>
+    <button id="btn-reset-filters" class="btn btn-outline btn-reset">
+      <i data-lucide="refresh-ccw"></i> 필터 초기화
+    </button>
+  `;
+  container.appendChild(filterBar);
+
+  const tableWrapper = document.createElement('div');
+  tableWrapper.className = 'table-container';
+  const table = document.createElement('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>
+        <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="cloud-tbody"></tbody>
+  `;
+  
+  tableWrapper.appendChild(table);
+  container.appendChild(tableWrapper);
+  const tbody = table.querySelector('tbody')!;
+
+  const updateTable = () => {
+    const keywordInput = document.getElementById('filter-keyword') as HTMLInputElement;
+    const paymentSelect = document.getElementById('filter-payment') as HTMLSelectElement;
+
+    const keyword = keywordInput ? keywordInput.value.toLowerCase().trim() : '';
+    const payment = paymentSelect ? paymentSelect.value : '';
+
+    const filtered = fullList.filter(asset => {
+      const kwMatch = !keyword || 
+        (asset.제품명 || '').toLowerCase().includes(keyword) || 
+        (asset.부서 || '').toLowerCase().includes(keyword) || 
+        (asset.계정명 || '').toLowerCase().includes(keyword);
+      const payMatch = !payment || asset.결제수단 === payment;
+      return kwMatch && payMatch;
+    });
+
+    tbody.innerHTML = '';
+    if (filtered.length === 0) {
+      tbody.innerHTML = '<tr><td colspan="10" style="text-align:center; padding: 3rem; color: var(--text-muted);">등록된 클라우드 서비스가 없습니다.</td></tr>';
+      return;
+    }
+
+    filtered.forEach((asset, idx) => {
+      const tr = document.createElement('tr');
+      tr.style.cursor = 'pointer';
+      
+      const paymentBadge = asset.결제수단 === '법인카드' 
+        ? '<span style="color:#6366f1; font-weight:600;"><i data-lucide="credit-card" style="width:14px; height:14px; vertical-align:middle; margin-right:4px;"></i>법인카드 (' + (asset.연결카드번호||'미상') + ')</span>'
+        : (asset.결제수단 === '인보이스' 
+            ? '<span style="color:#10b981; font-weight:600;"><i data-lucide="dollar-sign" style="width:14px; height:14px; vertical-align:middle; margin-right:4px;"></i>인보이스</span>'
+            : '<span style="color:var(--text-muted)">미설정</span>');
+
+      tr.innerHTML = `
+        <td style="text-align:center;">${idx+1}</td>
+        <td style="font-weight:600; color:var(--primary-color)"><i data-lucide="cloud" style="width:14px; height:14px; vertical-align:middle; margin-right:4px;"></i> ${asset.플랫폼명||'미지정'}</td>
+        <td style="text-align:center;">${asset.법인||''}</td>
+        <td style="text-align:center;">${asset.부서||''}</td>
+        <td>${asset.제품명||''}</td>
+        <td>${asset.계정명||''}</td>
+        <td style="text-align:center;">${paymentBadge}</td>
+        <td style="text-align:center;">${asset.결제일 ? asset.결제일 + '일' : ''}</td>
+        <td style="text-align:right; font-weight:600;">₩ ${asset.당월청구액 ? Number(asset.당월청구액).toLocaleString() : '0'}</td>
+        <td>${asset.비고||''}</td>
+      `;
+      
+      tr.addEventListener('click', () => openCloudModal(asset));
+      tbody.appendChild(tr);
+    });
+    createIcons({ icons: { Cloud, CreditCard, DollarSign } });
+  };
+
+  document.getElementById('filter-keyword')?.addEventListener('input', updateTable);
+  document.getElementById('filter-payment')?.addEventListener('change', updateTable);
+  document.getElementById('btn-reset-filters')?.addEventListener('click', () => {
+    if (document.getElementById('filter-keyword')) (document.getElementById('filter-keyword') as HTMLInputElement).value = '';
+    if (document.getElementById('filter-payment')) (document.getElementById('filter-payment') as HTMLSelectElement).value = '';
+    updateTable();
+  });
+
+  updateTable();
+}