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

2026-04-23 19:47:07 +09:00
parent d125de1902
commit 9fcecd4bf5
13 changed files with 649 additions and 324 deletions
--- a/db_init.js
+++ b/db_init.js
@@ -99,6 +99,7 @@ async function initDB() {
      price VARCHAR(100) COMMENT '금액',
      purchase_date VARCHAR(50) COMMENT '구매일',
      start_date VARCHAR(50) COMMENT '시작일',
+      expiry_date VARCHAR(50) COMMENT '만료일',
      vendor VARCHAR(255) COMMENT '납품업체',
      remarks TEXT COMMENT '비고',
      created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
@@ -138,11 +139,12 @@ async function initDB() {

  await connection.query(`
    CREATE TABLE asset_logs (
-      id VARCHAR(50) PRIMARY KEY,
+      id INT AUTO_INCREMENT PRIMARY KEY,
      asset_id VARCHAR(50),
      log_date VARCHAR(50),
      log_user VARCHAR(100),
      details TEXT,
+      cost DECIMAL(15,2) DEFAULT 0,
      created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
    ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
  `);
--- a/server.js
+++ b/server.js
@@ -44,12 +44,8 @@ async function ensureTables() {
    `);
    await connection.query(`
      CREATE TABLE IF NOT EXISTS asset_logs (
-        id VARCHAR(50) PRIMARY KEY,
-        asset_id VARCHAR(50),
-        log_date VARCHAR(50),
-        log_user VARCHAR(100),
-        details TEXT,
-        created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+        id INT AUTO_INCREMENT PRIMARY KEY, asset_id VARCHAR(50), log_date VARCHAR(50),
+        log_user VARCHAR(100), details TEXT, cost DECIMAL(15,2) DEFAULT 0
      ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
    `);
    await connection.query(`
@@ -71,7 +67,7 @@ async function ensureTables() {

    await connection.query(`
      CREATE TABLE IF NOT EXISTS sw_sub_assets (
-        id VARCHAR(50) PRIMARY KEY, corp VARCHAR(100), asset_code VARCHAR(100), 
+        id VARCHAR(50) PRIMARY KEY, corp VARCHAR(100), 
        category VARCHAR(100), dept VARCHAR(100), product_name VARCHAR(255),
        license_type VARCHAR(100), quantity INT, price VARCHAR(100), purchase_date VARCHAR(50), 
        start_date VARCHAR(50), expiry_date VARCHAR(50), vendor VARCHAR(100), remarks TEXT
@@ -79,10 +75,16 @@ async function ensureTables() {
    `);
    await connection.query(`
      CREATE TABLE IF NOT EXISTS sw_perm_assets (
-        id VARCHAR(50) PRIMARY KEY, corp VARCHAR(100), asset_code VARCHAR(100), 
+        id VARCHAR(50) PRIMARY KEY, corp VARCHAR(100), 
        category VARCHAR(100), dept VARCHAR(100), product_name VARCHAR(255),
        license_key VARCHAR(255), quantity INT, price VARCHAR(100), purchase_date VARCHAR(50), 
-        start_date VARCHAR(50), vendor VARCHAR(100), remarks TEXT
+        start_date VARCHAR(50), expiry_date VARCHAR(50), vendor VARCHAR(100), remarks TEXT
+      ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
+    `);
+    await connection.query(`
+      CREATE TABLE IF NOT EXISTS asset_logs (
+        id INT AUTO_INCREMENT PRIMARY KEY, asset_id VARCHAR(50), log_date VARCHAR(50),
+        log_user VARCHAR(100), details TEXT, cost DECIMAL(15,2) DEFAULT 0
      ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
    `);
    await connection.query(`
@@ -277,7 +279,7 @@ app.get('/api/sw/sub', async (req, res) => {
  try {
    const [rows] = await pool.query('SELECT * FROM sw_sub_assets');
    res.json(rows.map(r => ({
-      id: r.id, type: '구독SW', 법인: r.corp, 자산번호: r.asset_code, 
+      id: r.id, type: '구독SW', 법인: r.corp, 
      분야: r.category, 부서: r.dept, 제품명: r.product_name,
      라이선스유형: r.license_type, 수량: r.quantity, 금액: r.price, 
      구매일: r.purchase_date, 시작일: r.start_date, 만료일: r.expiry_date, 
@@ -289,9 +291,9 @@ app.get('/api/sw/sub', async (req, res) => {
 app.post('/api/sw/sub/batch', async (req, res) => {
  try {
    const result = await batchSave('sw_sub_assets', req.body, (assets) => ({
-      sql: `INSERT INTO sw_sub_assets (id, corp, asset_code, category, dept, product_name, license_type, quantity, price, purchase_date, start_date, expiry_date, vendor, remarks) VALUES ?`,
+      sql: `INSERT INTO sw_sub_assets (id, corp, category, dept, product_name, license_type, quantity, price, purchase_date, start_date, expiry_date, vendor, remarks) VALUES ?`,
      values: assets.map(a => [
-        a.id, a.법인||'', a.자산번호||'', a.분야||'', a.부서||'', a.제품명||'', 
+        a.id, a.법인||'', a.분야||'', a.부서||'', a.제품명||'', 
        a.라이선스유형||'', a.수량||0, a.금액||'', a.구매일||'', a.시작일||'', a.만료일||'', a.납품업체||'', a.비고||''
      ])
    }));
@@ -304,10 +306,10 @@ app.get('/api/sw/perm', async (req, res) => {
  try {
    const [rows] = await pool.query('SELECT * FROM sw_perm_assets');
    res.json(rows.map(r => ({
-      id: r.id, type: '영구SW', 법인: r.corp, 자산번호: r.asset_code, 
+      id: r.id, type: '영구SW', 법인: r.corp, 
      분야: r.category, 부서: r.dept, 제품명: r.product_name,
      라이선스키: r.license_key, 수량: r.quantity, 금액: r.price, 
-      구매일: r.purchase_date, 시작일: r.start_date,
+      구매일: r.purchase_date, 시작일: r.start_date, 만료일: r.expiry_date,
      납품업체: r.vendor, 비고: r.remarks
    })));
  } catch (err) { res.status(500).json({ error: err.message }); }
@@ -315,11 +317,13 @@ app.get('/api/sw/perm', async (req, res) => {

 app.post('/api/sw/perm/batch', async (req, res) => {
  try {
+    console.log('📦 Permanent SW Batch Save Request:', req.body.length, 'items');
+    if (req.body.length > 0) console.log('Sample:', req.body[0]);
    const result = await batchSave('sw_perm_assets', req.body, (assets) => ({
-      sql: `INSERT INTO sw_perm_assets (id, corp, asset_code, category, dept, product_name, license_key, quantity, price, purchase_date, start_date, vendor, remarks) VALUES ?`,
+      sql: `INSERT INTO sw_perm_assets (id, corp, category, dept, product_name, license_key, quantity, price, purchase_date, start_date, expiry_date, vendor, remarks) VALUES ?`,
      values: assets.map(a => [
-        a.id, a.법인||'', a.자산번호||'', a.분야||'', a.부서||'', a.제품명||'', 
-        a.라이선스키||'', a.수량||0, a.금액||'', a.구매일||'', a.시작일||'', a.납품업체||'', a.비고||''
+        a.id, a.법인||'', a.분야||'', a.부서||'', a.제품명||'', 
+        a.라이선스키||'', a.수량||0, a.금액||'', a.구매일||'', a.시작일||'', a.만료일||'', a.납품업체||'', a.비고||''
      ])
    }));
    res.json(result);
@@ -353,16 +357,16 @@ app.get('/api/logs', async (req, res) => {
  try {
    const [rows] = await pool.query('SELECT * FROM asset_logs ORDER BY log_date DESC');
    res.json(rows.map(r => ({
-      id: r.id, assetId: r.asset_id, date: r.log_date, user: r.log_user, details: r.details
+      id: r.id, assetId: r.asset_id, date: r.log_date, user: r.log_user, details: r.details, cost: r.cost
    })));
  } catch (err) { res.status(500).json({ error: err.message }); }
 });

 app.post('/api/logs/batch', async (req, res) => {
  try {
-    const result = await batchSave('asset_logs', req.body, (assets) => ({
-      sql: `INSERT INTO asset_logs (id, asset_id, log_date, log_user, details) VALUES ?`,
-      values: assets.map(a => [a.id, a.assetId||'', a.date||'', a.user||'', a.details||''])
+    const result = await batchSave('asset_logs', req.body, (logs) => ({
+      sql: `INSERT INTO asset_logs (asset_id, log_date, log_user, details, cost) VALUES ?`,
+      values: logs.map(l => [l.assetId, l.date, l.user, l.details, l.cost || 0])
    }));
    res.json(result);
  } catch (err) { res.status(500).json({ error: err.message }); }
--- a/src/components/Modal/BaseModal.ts
+++ b/src/components/Modal/BaseModal.ts
@@ -1,26 +1,26 @@
 /**
 * 모든 모달의 공통 기능 (닫기, ESC 처리, 배경 클릭 등)을 관리하는 베이스 모듈입니다.
 */
-export function initBaseModal() {
-  const closeAllModals = () => {
-    const modals = document.querySelectorAll('.modal-overlay');
-    modals.forEach(modal => modal.classList.add('hidden'));
-  };
+export function closeModals() {
+  const modals = document.querySelectorAll('.modal-overlay');
+  modals.forEach(modal => modal.classList.add('hidden'));
+}

+export function initBaseModal() {
  // ESC 키로 닫기
  window.addEventListener('keydown', (e) => {
-    if (e.key === 'Escape') closeAllModals();
+    if (e.key === 'Escape') closeModals();
  });

-  // 배경(Overlay) 클릭 시 닫기 (동적 생성된 모달 대응을 위해 이벤트 위임 고려 가능하나 일단 단순 구현)
+  // 배경(Overlay) 클릭 시 닫기
  document.addEventListener('click', (e) => {
    const target = e.target as HTMLElement;
    if (target.classList.contains('modal-overlay')) {
-      closeAllModals();
+      closeModals();
    }
  });

-  return { closeAllModals };
+  return { closeAllModals: closeModals };
 }

 /**
--- a/src/components/Modal/ModalUtils.ts
+++ b/src/components/Modal/ModalUtils.ts
@@ -211,3 +211,35 @@ export function autoExtractForm(idPrefix: string, fieldMap: Record<string, strin
  return result;
 }

+/**
+ * 10. 날짜 자동 마스킹 및 포커스 제어 (Auto-jump)
+ */
+export function applyDateMask(el: HTMLInputElement) {
+  if (!el) return;
+
+  el.placeholder = 'YYYY-MM-DD';
+  el.maxLength = 10;
+
+  el.addEventListener('input', (e) => {
+    let value = el.value.replace(/[^0-9]/g, ''); // 숫자만 남김
+    let result = '';
+
+    if (value.length <= 4) {
+      result = value;
+    } else if (value.length <= 6) {
+      result = value.substring(0, 4) + '-' + value.substring(4);
+    } else {
+      result = value.substring(0, 4) + '-' + value.substring(4, 6) + '-' + value.substring(6, 10);
+    }
+
+    el.value = result;
+  });
+
+  // 엔터 키나 입력 완료 시 유효성 검사 (선택 사항)
+  el.addEventListener('blur', () => {
+    const val = el.value;
+    if (val && !/^\d{4}-\d{2}-\d{2}$/.test(val)) {
+      // 형식이 맞지 않으면 경고 효과 등을 줄 수 있음
+    }
+  });
+}
--- a/src/components/Modal/SWModal.ts
+++ b/src/components/Modal/SWModal.ts
@@ -1,135 +1,231 @@
 import { state } from '../../core/state';
 import { SoftwareAsset } from '../../core/excelHandler';
-import { openModal } from './BaseModal';
+import { openModal, closeModals } from './BaseModal';
 import { openSwUserModal } from './SWUserModal';
-import { ASSET_SCHEMA, UI_TEXT } from '../../core/schema';
-import { createIcons, History, Plus, X, Save, Edit2, RotateCcw } from 'lucide';
+import { createIcons, History, Plus, X, Save, Edit2, RotateCcw, Calendar } from 'lucide';
 import { CORP_LIST } from './SharedData';
 import { 
  generateOptionsHTML, 
  setFieldValue, 
  getFieldValue, 
  setEditLock,
-  createModalFrameHTML,
-  autoFillForm,
-  autoExtractForm
+  applyDateMask
 } from './ModalUtils';

 let currentSwAsset: SoftwareAsset | null = null;
 let isEditMode = false;

-/**
- * 소프트웨어 필드 매핑 (통합 스키마 기반)
- * 소프트웨어는 자산번호를 사용하지 않으므로 제거함
- */
-const SW_FIELD_MAP: Record<string, string> = {
-  '법인':         ASSET_SCHEMA.CORP.key,
-  '제품명':       ASSET_SCHEMA.PRODUCT.key,
-  '수량':         ASSET_SCHEMA.QTY.key,
-  '금액':         ASSET_SCHEMA.PRICE.key,
-  '구매일':       ASSET_SCHEMA.PURCHASE_YM.key,
-  '시작일':       '시작일',
-  '납품업체':      ASSET_SCHEMA.VENDOR.key,
-  '비고':         ASSET_SCHEMA.REMARKS.key,
-  '플랫폼명':      ASSET_SCHEMA.PLATFORM.key,
-  '부서':         '부서',
-  '계정명':       ASSET_SCHEMA.ACCOUNT.key,
-  '결제수단':      ASSET_SCHEMA.PAY_METHOD.key,
-  '연결카드번호':   ASSET_SCHEMA.CARD_NUM.key,
-  '결제일':       ASSET_SCHEMA.PAY_DAY.key,
-  '당월청구액':    ASSET_SCHEMA.BILLING.key,
-  '라이선스유형':   ASSET_SCHEMA.LICENSE_TYPE.key,
-  '만료일':       ASSET_SCHEMA.EXPIRY.key,
-  '라이선스키':     ASSET_SCHEMA.LICENSE_KEY.key
-};
+const SW_MODAL_HTML = `
+  <div id="sw-asset-modal" class="modal-overlay hidden">
+    <div class="modal-content wide">
+      <div class="modal-header">
+        <h2 id="sw-modal-title">소프트웨어 상세 정보</h2>
+        <button id="btn-close-sw-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="sw-asset-form" class="grid-form">
+              <input type="hidden" id="sw-asset-id" />
              
-const SW_FORM_HTML = `
-  <!-- Group 1: 기본 정보 -->
-  <div class="form-section-title">기본 정보 (Identity)</div>
-  <div class="form-group">
-    <label for="sw-asset-type">자산 유형</label>
-    <select id="sw-asset-type" required>
-      <option value="구독SW">구독SW</option>
-      <option value="영구SW">영구SW</option>
-      <option value="클라우드">클라우드</option>
-    </select>
-  </div>
-  <div class="form-group">
-    <label for="sw-법인">${ASSET_SCHEMA.CORP.ui}</label>
-    <select id="sw-법인" required>${generateOptionsHTML(CORP_LIST)}</select>
-  </div>
-  <div class="form-group full-width">
-    <label for="sw-제품명">${ASSET_SCHEMA.PRODUCT.ui}</label>
-    <input type="text" id="sw-제품명" required />
-  </div>
-  <div class="form-group cloud-only"><label for="sw-플랫폼명">${ASSET_SCHEMA.PLATFORM.ui}</label><input type="text" id="sw-플랫폼명" placeholder="예: AWS, Cafe24" /></div>
-  <div class="form-group cloud-only"><label for="sw-부서">담당부서</label><input type="text" id="sw-부서" /></div>
+              <!-- Group 1: 기본 정보 (Identity) -->
+              <div class="form-section-title">기본 정보 (Identity)</div>
+              <div class="form-group">
+                <label for="sw-asset-type">자산 유형</label>
+                <select id="sw-asset-type" required>
+                  <option value="구독SW">구독SW</option>
+                  <option value="영구SW">영구SW</option>
+                  <option value="클라우드">클라우드</option>
+                </select>
+              </div>
+              <div class="form-group">
+                <label for="sw-분야">분야</label>
+                <select id="sw-분야" required>
+                  <option value="업무공통">업무공통</option>
+                  <option value="개발S/W">개발S/W</option>
+                  <option value="디자인">디자인</option>
+                  <option value="설계S/W">설계S/W</option>
+                </select>
+              </div>

-  <!-- Group 2: 라이선스 및 계약 -->
-  <div class="form-section-title">라이선스 및 계약 정보</div>
-  <div class="form-group sw-standard-field" id="sw-license-type-group"><label for="sw-라이선스유형">${ASSET_SCHEMA.LICENSE_TYPE.ui}</label><input type="text" id="sw-라이선스유형" /></div>
-  <div class="form-group sw-standard-field" id="sw-license-key-group"><label for="sw-라이선스키">${ASSET_SCHEMA.LICENSE_KEY.ui}</label><input type="text" id="sw-라이선스키" /></div>
-  <div class="form-group sw-standard-field"><label for="sw-수량">${ASSET_SCHEMA.QTY.ui}</label><input type="number" id="sw-수량" min="0" /></div>
-  <div class="form-group sw-standard-field"><label for="sw-금액">${ASSET_SCHEMA.PRICE.ui}</label><input type="text" id="sw-금액" oninput="this.value=this.value.replace(/[^0-9]/g,'').replace(/\\\\B(?=(\\\\d{3})+(?!\\\\d))/g,',')" /></div>
+              <div class="form-group">
+                <label for="sw-법인">법인</label>
+                <select id="sw-법인" required>${generateOptionsHTML(CORP_LIST)}</select>
+              </div>
+              <div class="form-group full-width">
+                <label for="sw-제품명">제품명 / 서비스명</label>
+                <input type="text" id="sw-제품명" required />
+              </div>
+              <div class="form-group cloud-only">
+                <label for="sw-플랫폼명">플랫폼명</label>
+                <input type="text" id="sw-플랫폼명" placeholder="예: AWS, Cafe24" />
+              </div>
+              <div class="form-group">
+                <label for="sw-부서">조직 / 부서</label>
+                <input type="text" id="sw-부서" />
+              </div>

-  <div class="form-group cloud-only"><label for="sw-계정명">${ASSET_SCHEMA.ACCOUNT.ui}</label><input type="text" id="sw-계정명" /></div>
-  <div class="form-group cloud-only"><label for="sw-결제수단">${ASSET_SCHEMA.PAY_METHOD.ui}</label><select id="sw-결제수단"><option value="">선택안함</option><option value="법인카드">법인카드</option><option value="인보이스">인보이스</option></select></div>
-  <div class="form-group cloud-only"><label for="sw-연결카드번호">${ASSET_SCHEMA.CARD_NUM.ui}</label><input type="text" id="sw-연결카드번호" maxlength="4" /></div>
-  <div class="form-group cloud-only"><label for="sw-결제일">${ASSET_SCHEMA.PAY_DAY.ui}</label><input type="number" id="sw-결제일" min="1" max="31" /></div>
-  <div class="form-group cloud-only"><label for="sw-당월청구액">${ASSET_SCHEMA.BILLING.ui}</label><input type="text" id="sw-당월청구액" oninput="this.value=this.value.replace(/[^0-9]/g,'').replace(/\\\\B(?=(\\\\d{3})+(?!\\\\d))/g,',')" /></div>
+              <!-- Group 2: 라이선스 및 계약 (License/Contract) -->
+              <div class="form-section-title">라이선스 및 계약 정보</div>
+              <div class="form-group sw-standard-field">
+                <label for="sw-수량">보유 수량</label>
+                <input type="number" id="sw-수량" min="0" />
+              </div>
+              <div class="form-group sw-standard-field">
+                <label for="sw-금액">도입 금액</label>
+                <input type="text" id="sw-금액" oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/\\B(?=(\\d{3})+(?!\\d))/g, ',')" />
+              </div>

-  <!-- Group 4: 관리 정보 -->
-  <div class="form-section-title">관리 및 비고</div>
-  <div class="form-group sw-standard-field"><label for="sw-구매일">구매일자</label><input type="date" id="sw-구매일" /></div>
-  <div class="form-group sw-standard-field" id="sw-start-group"><label for="sw-시작일">시작일</label><input type="date" id="sw-시작일" /></div>
-  <div class="form-group sw-standard-field" id="sw-expiry-group"><label for="sw-만료일">${ASSET_SCHEMA.EXPIRY.ui}</label><input type="date" id="sw-만료일" /></div>
-  <div class="form-group sw-standard-field"><label for="sw-납품업체">${ASSET_SCHEMA.VENDOR.ui}</label><input type="text" id="sw-납품업체" /></div>
-  <div class="form-group full-width"><label for="sw-비고">${ASSET_SCHEMA.REMARKS.ui}</label><textarea id="sw-비고" rows="2"></textarea></div>
+              <!-- Group 3: 클라우드 전용 정보 (Cloud Specific) -->
+              <div class="form-group cloud-only">
+                <label for="sw-계정명">계정명 (이메일)</label>
+                <input type="text" id="sw-계정명" />
+              </div>
+              <div class="form-group cloud-only">
+                <label for="sw-결제수단">결제수단</label>
+                <select id="sw-결제수단">
+                  <option value="">선택안함</option>
+                  <option value="법인카드">법인카드</option>
+                  <option value="인보이스">인보이스</option>
+                </select>
+              </div>
+              <div class="form-group cloud-only">
+                <label for="sw-연결카드번호">연결카드번호(뒷4자리)</label>
+                <input type="text" id="sw-연결카드번호" maxlength="4" />
+              </div>
+              <div class="form-group cloud-only">
+                <label for="sw-결제일">결제일 (기준일)</label>
+                <input type="number" id="sw-결제일" min="1" max="31" />
+              </div>
+              <div class="form-group cloud-only">
+                <label for="sw-당월청구액">당월 청구액(원)</label>
+                <input type="text" id="sw-당월청구액" oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/\\B(?=(\\d{3})+(?!\\d))/g, ',')" />
+              </div>

-  <div id="sw-user-section" class="user-management-section" style="margin-top: 2rem;">
-    <div class="section-header" style="display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem;">
-      <h3 style="font-size:1rem; font-weight:600;">사용자 할당 현황</h3>
-      <button type="button" id="btn-open-sw-update" class="btn btn-outline btn-sm">할당 관리 <i data-lucide="plus" style="width:14px; height:14px;"></i></button>
+              <!-- Group 4: 관리 정보 (Management) -->
+              <div class="form-section-title">관리 및 비고</div>
+              <div class="form-group sw-standard-field">
+                <label for="sw-구매일">구매일</label>
+                <div style="display:flex; gap:0.25rem; align-items:center; position:relative;">
+                  <input type="text" id="sw-구매일" style="flex:1;" />
+                  <button type="button" class="btn-icon" onclick="const p = document.getElementById('sw-구매일-picker'); p.value = document.getElementById('sw-구매일').value; p.showPicker();" style="padding:0.25rem;">
+                    <i data-lucide="calendar" style="width:18px; height:18px; color:var(--primary-color);"></i>
+                  </button>
+                  <input type="date" id="sw-구매일-picker" style="position:absolute; width:0; height:0; opacity:0; pointer-events:none;" onchange="document.getElementById('sw-구매일').value = this.value" tabindex="-1" />
+                </div>
+              </div>
+              <div class="form-group sw-standard-field">
+                <label for="sw-납품업체">납품업체</label>
+                <input type="text" id="sw-납품업체" />
+              </div>
+              <div class="form-group sw-standard-field">
+                <label for="sw-시작일">시작일 (구독/유지보수)</label>
+                <div style="display:flex; gap:0.25rem; align-items:center; position:relative;">
+                  <input type="text" id="sw-시작일" style="flex:1;" />
+                  <button type="button" class="btn-icon" onclick="const p = document.getElementById('sw-시작일-picker'); p.value = document.getElementById('sw-시작일').value; p.showPicker();" style="padding:0.25rem;">
+                    <i data-lucide="calendar" style="width:18px; height:18px; color:var(--primary-color);"></i>
+                  </button>
+                  <input type="date" id="sw-시작일-picker" style="position:absolute; width:0; height:0; opacity:0; pointer-events:none;" onchange="document.getElementById('sw-시작일').value = this.value" tabindex="-1" />
+                </div>
+              </div>
+              <div class="form-group sw-standard-field" id="sw-expiry-group">
+                <label for="sw-만료일">만료일 (종료일)</label>
+                <div style="display:flex; gap:0.25rem; align-items:center; position:relative;">
+                  <input type="text" id="sw-만료일" style="flex:1;" />
+                  <button type="button" class="btn-icon" onclick="const p = document.getElementById('sw-만료일-picker'); p.value = document.getElementById('sw-만료일').value; p.showPicker();" style="padding:0.25rem;">
+                    <i data-lucide="calendar" style="width:18px; height:18px; color:var(--primary-color);"></i>
+                  </button>
+                  <input type="date" id="sw-만료일-picker" style="position:absolute; width:0; height:0; opacity:0; pointer-events:none;" onchange="document.getElementById('sw-만료일').value = this.value" tabindex="-1" />
+                </div>
+              </div>
+              <div class="form-group full-width">
+                <label for="sw-비고">비고</label>
+                <textarea id="sw-비고" rows="2"></textarea>
+              </div>
+            </form>
+
+            <div id="sw-user-section" class="user-management-section" style="margin-top: 2rem; border-top: 1px solid var(--border-color); padding-top: 1.5rem;">
+              <button type="button" id="btn-open-sw-user" class="btn btn-outline btn-sm" title="사용자 관리">
+                <i data-lucide="users" style="width:16px; height:16px; margin-right:4px;"></i> 사용자 관리
+              </button>
+            </div>
+          </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-sw-update" class="btn btn-outline btn-sm">
+                계약 업데이트 <i data-lucide="refresh-ccw" style="width:14px; height:14px;"></i>
+              </button>
+            </div>
+            <div id="sw-history-list" class="history-timeline"></div>
+          </div>
+        </div>
+      </div>
+      <div class="modal-footer">
+        <button id="btn-delete-sw-asset" class="btn btn-outline btn-danger">삭제</button>
+        <div class="footer-actions">
+          <button id="btn-revert-sw-edit" class="btn btn-outline hidden">수정 취소</button>
+          <button id="btn-cancel-sw-modal" class="btn btn-outline">닫기</button>
+          <button id="btn-save-sw-asset" class="btn btn-primary">수정</button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- 계약/유지보수 기간 갱신 및 업데이트 모달 -->
+  <div id="sw-update-modal" class="modal-overlay hidden" style="z-index: 1100;">
+    <div class="modal-content" style="max-width: 500px;">
+      <div class="modal-header">
+        <h2>계약 업데이트 반영</h2>
+        <button id="btn-close-sw-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="sw-update-date" />
+          </div>
+          <div class="form-group sub-sw-update">
+            <label>새로운 계약 기간</label>
+            <div style="display: flex; align-items: center; gap: 0.5rem;">
+              <input type="text" id="sw-update-start" placeholder="YYYY-MM-DD" style="flex: 1;" />
+              <span>~</span>
+              <input type="text" id="sw-update-end" placeholder="YYYY-MM-DD" style="flex: 1;" />
+            </div>
+          </div>
+          <div class="form-group perm-sw-update" style="display:none;">
+            <label>유지보수 체결 (상태 연동)</label>
+            <label style="display:flex; align-items:center; gap:0.5rem; height: 38px; cursor: pointer;">
+              <input type="checkbox" id="sw-update-maintenance" /> 유효 상태로 갱신
+            </label>
+          </div>
+          <div class="form-group">
+            <label>발생 비용</label>
+            <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>
+            <input type="text" id="sw-update-note" placeholder="예: 25년도 구독 연장 결제 완료" />
+          </div>
+        </div>
+      </div>
+      <div class="modal-footer">
+        <div></div>
+        <div class="footer-actions">
+          <button id="btn-cancel-sw-update" class="btn btn-outline">취소</button>
+          <button id="btn-save-sw-update" class="btn btn-primary">반영하기</button>
+        </div>
+      </div>
    </div>
-    <div id="sw-assigned-users-summary" class="user-summary-grid"></div>
  </div>
 `;

-function renderSwHistory(swId: string) {
-  const container = document.getElementById('sw-history-list');
-  if (!container) return;
-  const logs = (state.masterData.logs || []).filter(l => l.assetId === swId).sort((a,b) => new Date(b.date).getTime() - new Date(a.date).getTime());
-  if (logs.length === 0) { container.innerHTML = '<div class="empty-history">수정 이력이 없습니다.</div>'; return; }
-  container.innerHTML = logs.map(l => `
-    <div class="history-item">
-      <div class="history-date">${l.date}</div>
-      <div class="history-user">${l.user}</div>
-      <div class="history-details">${l.details.replace(/\n/g, '<br>')}</div>
-    </div>
-  `).join('');
-}
-
-function renderUserSummary(swId: string) {
-  const container = document.getElementById('sw-assigned-users-summary');
-  if (!container) return;
-  const userMapping = state.masterData.swUsers.find(u => u.sw_id === swId);
-  if (!userMapping || !userMapping.userData || userMapping.userData.length === 0) {
-    container.innerHTML = '<div class="empty-summary">할당된 사용자가 없습니다.</div>';
-    return;
-  }
-  container.innerHTML = userMapping.userData.map(u => `
-    <div class="user-badge-item"><span class="u-name">${u[3] || '이름없음'}</span><span class="u-dept">${u[1] || '부서없음'}</span></div>
-  `).join('');
-}
-
 function applySwTypeUI(type: string) {
  const cloudFields = document.querySelectorAll('.cloud-only');
  const swFields = document.querySelectorAll('.sw-standard-field');
  const userSection = document.getElementById('sw-user-section');
-  const keyGroup = document.getElementById('sw-license-key-group');
-  const typeGroup = document.getElementById('sw-license-type-group');
  const expiryGroup = document.getElementById('sw-expiry-group');
-  const startGroup = document.getElementById('sw-start-group');

  if (type === '클라우드') {
    cloudFields.forEach(el => (el as HTMLElement).style.display = 'flex');
@@ -139,59 +235,83 @@ function applySwTypeUI(type: string) {
    cloudFields.forEach(el => (el as HTMLElement).style.display = 'none');
    swFields.forEach(el => (el as HTMLElement).style.display = 'flex');
    if (userSection) userSection.style.display = 'block';
-    if (type === '구독SW') {
-      if (keyGroup) keyGroup.style.display = 'none';
-      if (typeGroup) typeGroup.style.display = 'flex';
+
+    if (type === '구독SW' || type === '영구SW') {
      if (expiryGroup) expiryGroup.style.display = 'flex';
-      if (startGroup) startGroup.style.display = 'flex';
-    } else if (type === '영구SW') {
-      if (keyGroup) keyGroup.style.display = 'flex';
-      if (typeGroup) typeGroup.style.display = 'none';
-      if (expiryGroup) expiryGroup.style.display = 'none';
-      if (startGroup) startGroup.style.display = 'flex';
    }
  }
 }

-export function openSwModal(asset: SoftwareAsset, mode: 'view' | 'add' = 'view') {
+function fillSwFormData(asset: SoftwareAsset) {
+  setFieldValue('sw-asset-id', asset.id);
+  setFieldValue('sw-asset-type', asset.type);
+  setFieldValue('sw-분야', asset.분야 || '업무공통');
+  setFieldValue('sw-법인', asset.법인);
+
+  setFieldValue('sw-부서', asset.부서 || '');
+  setFieldValue('sw-제품명', asset.제품명);
+  setFieldValue('sw-수량', asset.수량);
+  setFieldValue('sw-금액', asset.금액);
+  setFieldValue('sw-구매일', asset.구매일 || '');
+  setFieldValue('sw-시작일', asset.시작일 || '');
+  setFieldValue('sw-납품업체', asset.납품업체 || '');
+  setFieldValue('sw-비고', asset.비고 || '');
+
+  if (asset.type === '클라우드') {
+    setFieldValue('sw-플랫폼명', (asset as any).플랫폼명 || '');
+    setFieldValue('sw-계정명', (asset as any).계정명 || '');
+    setFieldValue('sw-결제수단', (asset as any).결제수단 || '');
+    setFieldValue('sw-연결카드번호', (asset as any).연결카드번호 || '');
+    setFieldValue('sw-결제일', (asset as any).결제일 || '');
+    setFieldValue('sw-당월청구액', (asset as any).당월청구액 || '');
+  } else if (asset.type === '구독SW' || asset.type === '영구SW') {
+    setFieldValue('sw-만료일', (asset as any).만료일 || '');
+  }
+
+  renderSwHistory(asset.id);
+}
+
+
+
+function renderSwHistory(swId: string) {
+  const container = document.getElementById('sw-history-list');
+  if (!container) return;
+  const logs = (state.masterData.logs || []).filter(l => l.assetId === swId);
+  if (logs.length === 0) {
+    container.innerHTML = '<div class="empty-history">수정 이력이 없습니다.</div>';
+    return;
+  }
+  container.innerHTML = logs.map(l => `
+    <div class="history-item">
+      <div class="history-date">${l.date}</div>
+      <div class="history-user">${l.user}</div>
+      <div class="history-details">${l.details}</div>
+    </div>
+  `).join('');
+}
+
+export function openSwModal(asset: SoftwareAsset, mode: 'view' | 'add' | 'edit' = 'view') {
  currentSwAsset = asset;
  const modal = document.getElementById('sw-asset-modal')!;
+  
+  // 수정 잠금 상태 제어
  setEditLock('sw-asset-form', mode, {
    saveBtnId: 'btn-save-sw-asset',
-    revertBtnId: 'btn-revert-sw-edit',
-    addLogBtnId: 'btn-add-sw-log'
+    revertBtnId: 'btn-revert-sw-edit'
  });
-  isEditMode = (mode === 'add');
-  autoFillForm('sw', asset, SW_FIELD_MAP);

-  // 자산 유형 select를 명시적으로 설정 (hidden input과 충돌 방지)
-  const typeSelect = document.getElementById('sw-asset-type') as HTMLSelectElement;
-  if (typeSelect) typeSelect.value = asset.type;
+  isEditMode = (mode === 'add' || mode === 'edit');
  
+  fillSwFormData(asset);
  applySwTypeUI(asset.type);
-  renderUserSummary(asset.id);
-  renderSwHistory(asset.id);
+
  modal.classList.remove('hidden');
  createIcons({ icons: { X, History, Plus } });
 }

-export function initSwModal(onSave: () => void, closeModalsCb: () => void) {
+export function initSwModal(onSave: () => void, closeModals: () => void) {
  if (!document.getElementById('sw-asset-modal')) {
-    const html = createModalFrameHTML('sw', '소프트웨어 상세 정보', SW_FORM_HTML, {
-      historyTitle: '업데이트 내역',
-      addLogBtnId: 'btn-add-sw-log'
-    });
-    document.body.insertAdjacentHTML('beforeend', html);
-    const logModalHTML = `
-      <div id="sw-log-modal" class="modal-overlay hidden" style="z-index: 1100;">
-        <div class="modal-content" style="max-width: 400px;">
-          <div class="modal-header"><h2>${UI_TEXT.ACTION.HISTORY_ADD}</h2><button id="btn-close-sw-log" 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="new-log-date" /></div><div class="form-group"><label>상세 내용</label><textarea id="new-log-details" rows="3"></textarea></div></div></div>
-          <div class="modal-footer"><div></div><div class="footer-actions"><button id="btn-cancel-sw-log" class="btn btn-outline">${UI_TEXT.ACTION.CANCEL}</button><button id="btn-confirm-sw-log" class="btn btn-primary">추가</button></div></div>
-        </div>
-      </div>
-    `;
-    document.body.insertAdjacentHTML('beforeend', logModalHTML);
+    document.body.insertAdjacentHTML('beforeend', SW_MODAL_HTML);
  }

  const form = document.getElementById('sw-asset-form') as HTMLFormElement;
@@ -199,47 +319,71 @@ export function initSwModal(onSave: () => void, closeModalsCb: () => void) {
  const revertBtn = document.getElementById('btn-revert-sw-edit')!;
  const deleteBtn = document.getElementById('btn-delete-sw-asset')!;
  const userAssignBtn = document.getElementById('btn-open-sw-user')!;
-  const userUpdateBtn = document.getElementById('btn-open-sw-update')!;
-  const logAddBtn = document.getElementById('btn-add-sw-log')!;
-  const logModal = document.getElementById('sw-log-modal')!;
+  const btnOpenUpdate = document.getElementById('btn-open-sw-update')!;
  const typeSelect = document.getElementById('sw-asset-type') as HTMLSelectElement;

  typeSelect?.addEventListener('change', () => {
    applySwTypeUI(typeSelect.value);
  });

-  const closeModalAction = () => { closeModalsCb(); isEditMode = false; };
+  // 날짜 스마트 마스킹 적용
+  ['sw-구매일', 'sw-시작일', 'sw-만료일', 'sw-update-start', 'sw-update-end'].forEach(id => {
+    applyDateMask(document.getElementById(id) as HTMLInputElement);
+  });
+
+  createIcons({ icons: { Calendar } });
+
+  const closeModalAction = () => { closeModals(); isEditMode = false; };
  document.getElementById('btn-close-sw-modal')?.addEventListener('click', closeModalAction);
  document.getElementById('btn-cancel-sw-modal')?.addEventListener('click', closeModalAction);

  revertBtn.addEventListener('click', () => {
    setEditLock('sw-asset-form', 'view', {
      saveBtnId: 'btn-save-sw-asset',
-      revertBtnId: 'btn-revert-sw-edit', 
-      addLogBtnId: 'btn-add-sw-log'
+      revertBtnId: 'btn-revert-sw-edit'
    });
    isEditMode = false;
-    if (currentSwAsset) openSwModal(currentSwAsset, 'view');
+    if (currentSwAsset) fillSwFormData(currentSwAsset);
  });

-  // 날짜 필드는 type="date"로 변경되어 별도 제한 로직 불필요
-
  saveBtn.addEventListener('click', () => {
    if (!currentSwAsset) return;
    if (!isEditMode) {
      setEditLock('sw-asset-form', 'edit', {
        saveBtnId: 'btn-save-sw-asset',
-        revertBtnId: 'btn-revert-sw-edit', 
-        addLogBtnId: 'btn-add-hw-log'
+        revertBtnId: 'btn-revert-sw-edit'
      });
      isEditMode = true;
      return;
    }
-    const extracted = autoExtractForm('sw', SW_FIELD_MAP);
-    const updated = { ...currentSwAsset, ...extracted, 수량: parseInt(extracted[ASSET_SCHEMA.QTY.key] || '0') };

-    const type = getFieldValue('sw-asset-type') || currentSwAsset.type;
-    updated.type = type;
+    const type = getFieldValue('sw-asset-type');
+    const updated: any = {
+      ...currentSwAsset,
+      분야: getFieldValue('sw-분야'),
+      법인: getFieldValue('sw-법인'),
+      부서: getFieldValue('sw-부서'),
+
+      제품명: getFieldValue('sw-제품명'),
+      수량: parseInt(getFieldValue('sw-수량') || '0'),
+      금액: getFieldValue('sw-금액'),
+      구매일: getFieldValue('sw-구매일'),
+      시작일: getFieldValue('sw-시작일'),
+      납품업체: getFieldValue('sw-납품업체'),
+      비고: getFieldValue('sw-비고'),
+      type: type
+    };
+
+    if (type === '클라우드') {
+      updated.플랫폼명 = getFieldValue('sw-플랫폼명');
+      updated.계정명 = getFieldValue('sw-계정명');
+      updated.결제수단 = getFieldValue('sw-결제수단');
+      updated.연결카드번호 = getFieldValue('sw-연결카드번호');
+      updated.결제일 = getFieldValue('sw-결제일');
+      updated.당월청구액 = getFieldValue('sw-당월청구액').replace(/,/g, '');
+    } else if (type === '구독SW' || type === '영구SW') {
+      updated.만료일 = getFieldValue('sw-만료일');
+    }

    // 데이터 저장 로직 (state 업데이트)
    const oldType = currentSwAsset.type;
@@ -255,44 +399,104 @@ export function initSwModal(onSave: () => void, closeModalsCb: () => void) {
    let targetList: SoftwareAsset[] = [];
    if (newType === '구독SW') targetList = state.masterData.subSw;
    else if (newType === '영구SW') targetList = state.masterData.permSw;
-    else targetList = (state.masterData as any).cloud || [];
+    else if (newType === '클라우드') targetList = state.masterData.cloud;

    const idx = targetList.findIndex(a => a.id === updated.id);
-    if (idx > -1) targetList[idx] = updated; else targetList.push(updated);
+    if (idx > -1) targetList[idx] = updated;
+    else targetList.push(updated);

    onSave();
-    setEditLock('sw-asset-form', 'view', { 
-      saveBtnId: 'btn-save-sw-asset', 
-      revertBtnId: 'btn-revert-sw-edit', 
-      addLogBtnId: 'btn-add-sw-log'
-    });
-    isEditMode = false;
+    closeModalAction();
  });

  deleteBtn.addEventListener('click', () => {
-    if (currentSwAsset && confirm(UI_TEXT.MESSAGES.CONFIRM_DELETE)) {
+    if (!currentSwAsset) return;
+    if (confirm('삭제하시겠습니까?')) {
      const type = currentSwAsset.type;
      if (type === '구독SW') state.masterData.subSw = state.masterData.subSw.filter(a => a.id !== currentSwAsset!.id);
      else if (type === '영구SW') state.masterData.permSw = state.masterData.permSw.filter(a => a.id !== currentSwAsset!.id);
-      onSave(); closeModalAction();
+      else if (type === '클라우드') state.masterData.cloud = state.masterData.cloud.filter(a => a.id !== currentSwAsset!.id);
+      onSave();
+      closeModalAction();
    }
  });

-  userUpdateBtn.addEventListener('click', () => { if (currentSwAsset) openSwUserModal(currentSwAsset); });
-  logAddBtn.addEventListener('click', () => {
-    logModal.classList.remove('hidden');
-    (document.getElementById('new-log-date') as HTMLInputElement).value = new Date().toISOString().split('T')[0];
-    (document.getElementById('new-log-details') as HTMLTextAreaElement).value = '';
+  userAssignBtn.addEventListener('click', () => {
+    if (currentSwAsset) openSwUserModal(currentSwAsset);
  });
-  document.getElementById('btn-close-sw-log')?.addEventListener('click', () => logModal.classList.add('hidden'));
-  document.getElementById('btn-cancel-sw-log')?.addEventListener('click', () => logModal.classList.add('hidden'));
-  document.getElementById('btn-confirm-sw-log')?.addEventListener('click', () => {
-    if (!currentSwAsset) return;
-    const date = (document.getElementById('new-log-date') as HTMLInputElement).value;
-    const details = (document.getElementById('new-log-details') as HTMLTextAreaElement).value;
-    if (!date || !details) return;
-    state.masterData.logs = state.masterData.logs || [];
-    state.masterData.logs.push({ id: Math.random().toString(36).substring(2, 9), assetId: currentSwAsset.id, date, user: '담당자', details });
-    logModal.classList.add('hidden'); renderSwHistory(currentSwAsset.id);
+
+  // 자산 업데이트(계약 갱신) 모달 로직
+  const subModal = document.getElementById('sw-update-modal')!;
+  const btnCloseUpdate = document.getElementById('btn-close-sw-update')!;
+  const btnCancelUpdate = document.getElementById('btn-cancel-sw-update')!;
+  const btnSaveUpdate = document.getElementById('btn-save-sw-update')!;
+
+  const closeUpdateModal = () => subModal.classList.add('hidden');
+  btnCloseUpdate?.addEventListener('click', closeUpdateModal);
+  btnCancelUpdate?.addEventListener('click', closeUpdateModal);
+
+  btnOpenUpdate?.addEventListener('click', (e) => {
+    e.preventDefault();
+    if (!isEditMode) {
+      alert('자산을 수정 모드로 변경한 후 업데이트를 진행해주세요.');
+      return;
+    }
+    
+    subModal.classList.remove('hidden');
+    
+    (document.getElementById('sw-update-date') as HTMLInputElement).value = new Date().toISOString().substring(0, 10);
+    (document.getElementById('sw-update-start') as HTMLInputElement).value = '';
+    (document.getElementById('sw-update-end') as HTMLInputElement).value = '';
+    (document.getElementById('sw-update-cost') as HTMLInputElement).value = '';
+    (document.getElementById('sw-update-note') as HTMLInputElement).value = '';
+
+    document.querySelector('.sub-sw-update')!.setAttribute('style', 'display:flex; flex-direction:column;');
+    document.querySelector('.perm-sw-update')!.setAttribute('style', 'display:none');
+  });
+
+  btnSaveUpdate?.addEventListener('click', (e) => {
+    e.preventDefault();
+    const isSub = getFieldValue('sw-asset-type') === '구독SW';
+    const date = (document.getElementById('sw-update-date') as HTMLInputElement).value;
+    const start = (document.getElementById('sw-update-start') as HTMLInputElement).value;
+    const end = (document.getElementById('sw-update-end') as HTMLInputElement).value;
+    const maintenance = (document.getElementById('sw-update-maintenance') as HTMLInputElement).checked;
+    const cost = (document.getElementById('sw-update-cost') as HTMLInputElement).value;
+    const note = (document.getElementById('sw-update-note') as HTMLInputElement).value;
+
+    const periodStr = (start || end) ? `${start || ''} ~ ${end || ''}` : '';
+
+    let details = `[업데이트] ${note || '계약 갱신'}\n`;
+    if (cost) details += `비용 추가: ${cost}원\n`;
+
+    if (periodStr) details += `계약 변경: -> ${periodStr}\n`;
+    // 메인 폼에 시작일 만료일 자동 세팅
+    if (start) setFieldValue('sw-시작일', start);
+    if (end) setFieldValue('sw-만료일', end);
+    
+    // 금액 갱신 (선택사항)
+    if (cost) {
+      if (getFieldValue('sw-asset-type') === '클라우드') {
+        setFieldValue('sw-당월청구액', cost);
+      } else {
+        setFieldValue('sw-금액', cost);
+      }
+    }
+
+    // 이력 탭 갱신 (메모리상)
+    if (!state.masterData.logs) state.masterData.logs = [];
+    state.masterData.logs.push({
+      id: Math.random().toString(36).substring(2, 9),
+      assetId: currentSwAsset ? currentSwAsset.id : 'NEW',
+      date,
+      details,
+      cost: cost ? Number(String(cost).replace(/,/g, '')) : 0,
+      user: '관리자'
+    });
+
+    closeUpdateModal();
+    renderSwHistory(currentSwAsset ? currentSwAsset.id : '');
+    onSave(); // 로그 즉시 저장
  });
 }
+
--- a/src/components/Modal/SWUserModal.ts
+++ b/src/components/Modal/SWUserModal.ts
@@ -1,12 +1,12 @@
 import { state } from '../../core/state';
 import { SoftwareAsset, SWUser } from '../../core/excelHandler';
 import { openModal } from './BaseModal';
-import { createIcons, Edit2, X, Paperclip } from 'lucide';
+import { createIcons, Edit2, X, Paperclip, Calendar } from 'lucide';
 import { CORP_LIST, ORG_LIST } from './SharedData';
-import { generateOptionsHTML, setFieldValue, getFieldValue } from './ModalUtils';
+import { generateOptionsHTML, setFieldValue, getFieldValue, applyDateMask } from './ModalUtils';

 let currentSwUserAsset: SoftwareAsset | null = null;
-let tempSwUsers: SWUser[] = [];
+let tempSwUsers: any[] = [];

 const SW_USER_MODAL_HTML = `
  <div id="sw-user-modal" class="modal-overlay hidden">
@@ -28,6 +28,7 @@ const SW_USER_MODAL_HTML = `
            <thead>
              <tr>
                <th>조직</th>
+                <th>부서</th>
                <th>직위</th>
                <th>이름</th>
                <th>사용기간</th>
@@ -58,7 +59,11 @@ const SW_USER_MODAL_HTML = `
          <input type="hidden" id="edit-user-index" value="-1" />
          <div class="form-group">
            <label>조직</label>
-            <select id="new-user-부서">${generateOptionsHTML(ORG_LIST)}</select>
+            <select id="new-user-조직">${generateOptionsHTML(ORG_LIST)}</select>
+          </div>
+          <div class="form-group">
+            <label>부서</label>
+            <input type="text" id="new-user-부서" />
          </div>
          <div class="form-group">
            <label>직위</label>
@@ -69,8 +74,24 @@ const SW_USER_MODAL_HTML = `
            <input type="text" id="new-user-이름" required />
          </div>
          <div class="form-group">
-            <label>사용기간</label>
-            <input type="text" id="new-user-사용기간" placeholder="ex) 2024-01-01 ~ 2024-12-31" />
+            <label>사용 시작일</label>
+            <div style="display:flex; gap:0.25rem; align-items:center; position:relative;">
+              <input type="text" id="new-user-시작일" style="flex:1;" />
+              <button type="button" class="btn-icon" onclick="const p = document.getElementById('new-user-시작일-picker'); p.value = document.getElementById('new-user-시작일').value; p.showPicker();" style="padding:0.25rem;">
+                <i data-lucide="calendar" style="width:18px; height:18px; color:var(--primary-color);"></i>
+              </button>
+              <input type="date" id="new-user-시작일-picker" style="position:absolute; width:0; height:0; opacity:0; pointer-events:none;" onchange="document.getElementById('new-user-시작일').value = this.value" tabindex="-1" />
+            </div>
+          </div>
+          <div class="form-group">
+            <label>사용 종료일</label>
+            <div style="display:flex; gap:0.25rem; align-items:center; position:relative;">
+              <input type="text" id="new-user-종료일" style="flex:1;" />
+              <button type="button" class="btn-icon" onclick="const p = document.getElementById('new-user-종료일-picker'); p.value = document.getElementById('new-user-종료일').value; p.showPicker();" style="padding:0.25rem;">
+                <i data-lucide="calendar" style="width:18px; height:18px; color:var(--primary-color);"></i>
+              </button>
+              <input type="date" id="new-user-종료일-picker" style="position:absolute; width:0; height:0; opacity:0; pointer-events:none;" onchange="document.getElementById('new-user-종료일').value = this.value" tabindex="-1" />
+            </div>
          </div>
          <div class="form-group">
            <label>신청서 (증빙)</label>
@@ -93,14 +114,16 @@ export function openSwUserModal(asset: SoftwareAsset) {
  const swInfo = document.getElementById('sw-user-sw-info')!;
  swInfo.innerHTML = `
    <div style="background:var(--bg-light); padding:1rem; border-radius:6px; margin-bottom:1.5rem;">
-      <div style="font-size:0.8rem; color:var(--text-muted); margin-bottom:0.25rem;">${asset.법인} | ${asset.자산번호}</div>
+      <div style="font-size:0.8rem; color:var(--text-muted); margin-bottom:0.25rem;">${asset.법인}</div>
      <div style="font-size:1.1rem; font-weight:700; color:var(--primary-color);">${asset.제품명}</div>
    </div>
  `;

  // 기존 사용자 데이터 복사 (원본 보호를 위해 temp 사용)
  const existingMapping = state.masterData.swUsers.find(u => u.sw_id === asset.id);
-  tempSwUsers = existingMapping ? JSON.parse(JSON.stringify(existingMapping.userData || [])) : [];
+  tempSwUsers = existingMapping ? (existingMapping.userData || []).map((u: any) => ({
+    조직: u[0], 부서: u[1], 직위: u[2], 이름: u[3], 사용기간: u[4], 신청서명: u[5]
+  })) : [];
  
  renderUserList();
  modal.classList.remove('hidden');
@@ -119,7 +142,7 @@ function renderUserList() {
  tempSwUsers.forEach((user, idx) => {
    const tr = document.createElement('tr');
    tr.innerHTML = `
-
+      <td>${user.조직 || ''}</td>
      <td>${user.부서 || ''}</td>
      <td>${user.직위 || ''}</td>
      <td>${user.이름 || ''}</td>
@@ -164,10 +187,20 @@ function openUserEditSubModal(idx: number = -1) {
  
  if (idx > -1) {
    const user = tempSwUsers[idx];
+    setFieldValue('new-user-조직', user.조직);
    setFieldValue('new-user-부서', user.부서);
    setFieldValue('new-user-직위', user.직위);
    setFieldValue('new-user-이름', user.이름);
-    setFieldValue('new-user-사용기간', user.사용기간);
+    
+    // 사용기간 파싱 (yyyy-mm-dd ~ yyyy-mm-dd)
+    if (user.사용기간 && user.사용기간.includes('~')) {
+      const parts = user.사용기간.split('~');
+      setFieldValue('new-user-시작일', parts[0].trim());
+      setFieldValue('new-user-종료일', parts[1].trim());
+    } else {
+      setFieldValue('new-user-시작일', '');
+      setFieldValue('new-user-종료일', '');
+    }
  }

  subModal.classList.remove('hidden');
@@ -182,6 +215,12 @@ export function initSwUserModal(onSave: () => void, closeModals: () => void) {
  const addUserBtn = document.getElementById('btn-open-add-user')!;
  const confirmUserBtn = document.getElementById('btn-confirm-user-edit')!;

+  ['new-user-시작일', 'new-user-종료일'].forEach(id => {
+    applyDateMask(document.getElementById(id) as HTMLInputElement);
+  });
+
+  createIcons({ icons: { Calendar } });
+
  addUserBtn.addEventListener('click', () => openUserEditSubModal());

  confirmUserBtn.addEventListener('click', () => {
@@ -195,7 +234,7 @@ export function initSwUserModal(onSave: () => void, closeModals: () => void) {
    const existingIdx = state.masterData.swUsers.findIndex(u => u.sw_id === currentSwUserAsset!.id);
    const newMapping = {
      sw_id: currentSwUserAsset!.id,
-      userData: tempSwUsers.map(u => ['', u.부서, u.직위, u.이름, u.사용기간, u.신청서명])
+      userData: tempSwUsers.map(u => [u.조직, u.부서, u.직위, u.이름, u.사용기간, u.신청서명])
    };

    if (existingIdx > -1) state.masterData.swUsers[existingIdx] = newMapping as any;
@@ -225,11 +264,11 @@ function saveUserDataToList() {
  const 신청서명 = 신청서Input.files && 신청서Input.files.length > 0 ? 신청서Input.files[0].name : (idx > -1 ? tempSwUsers[idx].신청서명 : '');

  const userData: any = {
-
+    조직: getFieldValue('new-user-조직'),
    부서: getFieldValue('new-user-부서'),
    직위: getFieldValue('new-user-직위'),
    이름: getFieldValue('new-user-이름'),
-    사용기간: getFieldValue('new-user-사용기간'),
+    사용기간: `${getFieldValue('new-user-시작일')} ~ ${getFieldValue('new-user-종료일')}`,
    신청서명
  };
  
--- a/src/core/excelHandler.ts
+++ b/src/core/excelHandler.ts
@@ -92,6 +92,7 @@ export interface HardwareLog {
  date: string;
  details: string;
  user: string;
+  cost?: number;
 }

 export interface MasterAssetData {
@@ -119,7 +120,7 @@ const EQUIP_HEADERS = ['구매법인', '비품유형', '자산코드', '명칭',
 const MOBILE_HEADERS = ['구매법인', '자산코드', '명칭', '위치', '관리자', '기기유형', 'OS', '구매연월', '금액', '납품업체', '품의서명', '비고'];

 const SUB_SW_HEADERS = ['ID', '분야', '법인', '부서', '제품명', '구매연월', '만료일', '라이선스유형', '금액', '수량', '계정명', '납품업체', '비고'];
-const PERM_SW_HEADERS = ['ID', '분야', '법인', '부서', '제품명', '구매연월', '라이선스키', '금액', '수량', '계정명', '납품업체', '비고'];
+const PERM_SW_HEADERS = ['ID', '분야', '법인', '부서', '제품명', '구매연월', '만료일', '라이선스키', '금액', '수량', '계정명', '납품업체', '비고'];
 const CLOUD_HEADERS = ['ID', '플랫폼명', '법인', '부서', '사용용도(제품명)', '계정명', '결제수단', '결제일', '연결카드번호', '당월청구액', '비고'];

 export function downloadTemplate() {
@@ -157,7 +158,7 @@ export function exportToExcel(masterData: MasterAssetData) {
    { tab: '전산비품', list: masterData.equip, headers: EQUIP_HEADERS, map: (a: any) => [a.법인, a.비품유형, a.자산코드, a.명칭, a.위치, a.관리자, a.IP주소, a.MACaddress, a.HW사양, a.OS, a.구매일||a.구매연월, a.금액, a.납품업체, a.품의서명, a.비고] },
    { tab: '모바일기기', list: masterData.mobile, headers: MOBILE_HEADERS, map: (a: any) => [a.법인, a.자산코드, a.명칭, a.위치, a.관리자, a.type, a.OS, a.구매일||a.구매연월, a.금액, a.납품업체, a.품의서명, a.비고] },
    { tab: '구독SW', list: masterData.subSw, headers: SUB_SW_HEADERS, map: (a: any) => [a.id, a.분야, a.법인, a.부서, a.제품명, a.구매일||a.구매연월, a.만료일, a.라이선스유형, a.금액, a.수량, a.계정명, a.납품업체, a.비고] },
-    { tab: '영구SW', list: masterData.permSw, headers: PERM_SW_HEADERS, map: (a: any) => [a.id, a.분야, a.법인, a.부서, a.제품명, a.구매일||a.구매연월, a.라이선스키, a.금액, a.수량, a.계정명, a.납품업체, a.비고] }
+    { tab: '영구SW', list: masterData.permSw, headers: PERM_SW_HEADERS, map: (a: any) => [a.id, a.분야, a.법인, a.부서, a.제품명, a.구매일||a.구매연월, a.만료일, a.라이선스키, a.금액, a.수량, a.계정명, a.납품업체, a.비고] }
  ];

  exportMap.forEach(m => {
@@ -189,7 +190,7 @@ export async function parseExcel(file: File): Promise<MasterAssetData> {
          } else if (sheetName === '구독SW') {
            rows.forEach(r => data.subSw.push({ id: r['ID']||Math.random().toString(36).substring(2, 9), type: '구독SW', 분야: r['분야']||'', 법인: r['법인']||'', 부서: r['부서']||'', 제품명: r['제품명']||'', 구매연월: r['구매연월']||r['구매일']||'', 만료일: r['만료일']||'', 라이선스유형: r['라이선스유형']||'', 금액: r['금액']||'', 수량: parseInt(r['수량']||'1'), 계정명: r['계정명']||'', 납품업체: r['납품업체']||'', 비고: r['비고']||'' }));
          } else if (sheetName === '영구SW') {
-            rows.forEach(r => data.permSw.push({ id: r['ID']||Math.random().toString(36).substring(2, 9), type: '영구SW', 분야: r['분야']||'', 법인: r['법인']||'', 부서: r['부서']||'', 제품명: r['제품명']||'', 구매연월: r['구매연월']||r['구매일']||'', 라이선스키: r['라이선스키']||'', 금액: r['금액']||'', 수량: parseInt(r['수량']||'1'), 계정명: r['계정명']||'', 납품업체: r['납품업체']||'', 비고: r['비고']||'' }));
+            rows.forEach(r => data.permSw.push({ id: r['ID']||Math.random().toString(36).substring(2, 9), type: '영구SW', 분야: r['분야']||'', 법인: r['법인']||'', 부서: r['부서']||'', 제품명: r['제품명']||'', 구매연월: r['구매연월']||r['구매일']||'', 만료일: r['만료일']||'', 라이선스키: r['라이선스키']||'', 금액: r['금액']||'', 수량: parseInt(r['수량']||'1'), 계정명: r['계정명']||'', 납품업체: r['납품업체']||'', 비고: r['비고']||'' }));
          }
        });
        resolve(data);
--- a/src/core/state.ts
+++ b/src/core/state.ts
@@ -51,16 +51,16 @@ export const state: AppState = {
 export async function loadMasterDataFromDB() {
  try {
    const endpoints = [
-      { key: 'pc', url: 'http://172.16.40.100:3000/api/pc' },
-      { key: 'server', url: 'http://172.16.40.100:3000/api/server' },
-      { key: 'storage', url: 'http://172.16.40.100:3000/api/storage' },
-      { key: 'equip', url: 'http://172.16.40.100:3000/api/equip' },
-      { key: 'mobile', url: 'http://172.16.40.100:3000/api/mobile' },
-      { key: 'subSw', url: 'http://172.16.40.100:3000/api/sw/sub' },
-      { key: 'permSw', url: 'http://172.16.40.100:3000/api/sw/perm' },
-      { key: 'cloud', url: 'http://172.16.40.100:3000/api/cloud' },
-      { key: 'swUsers', url: 'http://172.16.40.100:3000/api/sw-users' },
-      { key: 'logs', url: 'http://172.16.40.100:3000/api/logs' }
+      { key: 'pc', url: `http://${location.hostname}:3000/api/pc` },
+      { key: 'server', url: `http://${location.hostname}:3000/api/server` },
+      { key: 'storage', url: `http://${location.hostname}:3000/api/storage` },
+      { key: 'equip', url: `http://${location.hostname}:3000/api/equip` },
+      { key: 'mobile', url: `http://${location.hostname}:3000/api/mobile` },
+      { key: 'subSw', url: `http://${location.hostname}:3000/api/sw/sub` },
+      { key: 'permSw', url: `http://${location.hostname}:3000/api/sw/perm` },
+      { key: 'cloud', url: `http://${location.hostname}:3000/api/cloud` },
+      { key: 'swUsers', url: `http://${location.hostname}:3000/api/sw-users` },
+      { key: 'logs', url: `http://${location.hostname}:3000/api/logs` }
    ];

    const results = await Promise.all(endpoints.map(e => fetch(e.url)));
@@ -195,7 +195,7 @@ export function deleteHardwareAsset(assetId: string) {
 */
 export async function saveSoftwareAsset(asset: SoftwareAsset) {
  try {
-    const response = await fetch('http://172.16.40.100:3000/api/software/save', {
+    const response = await fetch(`http://${location.hostname}:3000/api/software/save`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(asset)
@@ -224,7 +224,7 @@ export async function saveSoftwareAsset(asset: SoftwareAsset) {
 */
 export async function deleteSoftwareAsset(type: string, id: string) {
  try {
-    const response = await fetch(`http://172.16.40.100:3000/api/asset/${type}/${id}`, {
+    const response = await fetch(`http://${location.hostname}:3000/api/asset/${type}/${id}`, {
      method: 'DELETE'
    });
    
--- a/src/main.ts
+++ b/src/main.ts
@@ -30,15 +30,16 @@ async function apiBatchSave(url: string, data: any[], label: string) {
  }
 }

-const savePcToDB = () => apiBatchSave('http://172.16.40.100:3000/api/pc/batch', state.masterData.pc, '개인PC');
-const saveServerToDB = () => apiBatchSave('http://172.16.40.100:3000/api/server/batch', state.masterData.server, '서버');
-const saveStorageToDB = () => apiBatchSave('http://172.16.40.100:3000/api/storage/batch', state.masterData.storage, '스토리지');
-const saveEquipToDB = () => apiBatchSave('http://172.16.40.100:3000/api/equip/batch', state.masterData.equip, '전산비품');
-const saveMobileToDB = () => apiBatchSave('http://172.16.40.100:3000/api/mobile/batch', state.masterData.mobile, '모바일기기');
-const saveSubSwToDB = () => apiBatchSave('http://172.16.40.100:3000/api/sw/sub/batch', state.masterData.subSw, '구독SW');
-const savePermSwToDB = () => apiBatchSave('http://172.16.40.100:3000/api/sw/perm/batch', state.masterData.permSw, '영구SW');
-const saveCloudToDB = () => apiBatchSave('http://172.16.40.100:3000/api/cloud/batch', state.masterData.cloud, '클라우드');
-const saveSwUsersToDB = () => apiBatchSave('http://172.16.40.100:3000/api/sw-users/batch', state.masterData.swUsers, 'SW사용자');
+const savePcToDB = () => apiBatchSave(`http://${location.hostname}:3000/api/pc/batch`, state.masterData.pc, '개인PC');
+const saveServerToDB = () => apiBatchSave(`http://${location.hostname}:3000/api/server/batch`, state.masterData.server, '서버');
+const saveStorageToDB = () => apiBatchSave(`http://${location.hostname}:3000/api/storage/batch`, state.masterData.storage, '스토리지');
+const saveEquipToDB = () => apiBatchSave(`http://${location.hostname}:3000/api/equip/batch`, state.masterData.equip, '전산비품');
+const saveMobileToDB = () => apiBatchSave(`http://${location.hostname}:3000/api/mobile/batch`, state.masterData.mobile, '모바일기기');
+const saveSubSwToDB = () => apiBatchSave(`http://${location.hostname}:3000/api/sw/sub/batch`, state.masterData.subSw, '구독SW');
+const savePermSwToDB = () => apiBatchSave(`http://${location.hostname}:3000/api/sw/perm/batch`, state.masterData.permSw, '영구SW');
+const saveCloudToDB = () => apiBatchSave(`http://${location.hostname}:3000/api/cloud/batch`, state.masterData.cloud, '클라우드');
+const saveSwUsersToDB = () => apiBatchSave(`http://${location.hostname}:3000/api/sw-users/batch`, state.masterData.swUsers, 'SW사용자');
+const saveLogsToDB = () => apiBatchSave(`http://${location.hostname}:3000/api/logs/batch`, state.masterData.logs, '자산 로그');

 // 화면 갱신 통합 핸들러 (대시보드 vs 리스트)
 function refreshView() {
@@ -59,7 +60,8 @@ async function saveAllHardwareToDB() {
    saveServerToDB(),
    saveStorageToDB(),
    saveEquipToDB(),
-    saveMobileToDB()
+    saveMobileToDB(),
+    saveLogsToDB()
  ]);
  await loadMasterDataFromDB();
  refreshView();
@@ -71,7 +73,8 @@ async function saveAllSoftwareToDB() {
    saveSubSwToDB(),
    savePermSwToDB(),
    saveCloudToDB(),
-    saveSwUsersToDB()
+    saveSwUsersToDB(),
+    saveLogsToDB()
  ]);
  // 저장 후 최신 데이터 다시 로드 (정합성)
  await loadMasterDataFromDB();
--- 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>`;
      }