feat: 하드웨어 자산 관리 고도화 및 자동 이력 시스템 구축

- 통합 원격 접속 정보 UI 구현 (IP/MAC 및 계정 정보 통합) - 서버 측 스냅샷 비교 기반 자동 이력(Log) 생성 로직 도입 - 타임라인 UI 개선 (이벤트별 색상 뱃지 및 변동 사항 강조) - 자산 상세 필드 확장 (서비스 구분, 용도 등) - 테스트 데이터 생성기 및 이력 계획서 추가
2026-06-10 09:51:03 +09:00
parent 25ebaf4685
commit ce1ed40561
10 changed files with 617 additions and 140 deletions
--- a/PLAN_ASSET_HISTORY.md
+++ b/PLAN_ASSET_HISTORY.md
@@ -0,0 +1,60 @@
+# 자산 이력 누적 관리 시스템 (Cumulative Asset History System) 구현 계획
+
+본 문서는 자산의 라이프사이클(조직, 사용자, 용도, 상태 변동)을 체계적으로 추적하고 누적 관리하기 위한 기술적 설계 및 단계별 구현 계획을 담고 있습니다.
+
+## 1. 목적
+- 자산 정보 수정 시 중요 변경 사항을 자동으로 감지하여 이력(Log)화
+- 과거부터 현재까지의 변동 사항을 타임라인 형태로 시각화하여 자산 흐름 파악
+- 데이터 정합성을 위해 서버 측에서 변경 전/후 스냅샷 비교 방식 채택
+
+## 2. 관리 대상 이력 (Watch Fields)
+다음 항목의 변경이 발생할 경우 이력을 자동 생성합니다.
+1. **조직 변동**: `current_dept` (현 사용조직) ↔ `previous_dept` 업데이트 포함
+2. **사용자 변동**: `user_current` (현 사용자) ↔ `previous_user` 업데이트 포함
+3. **용도 변경**: `asset_type`, `current_role` (예: 개인PC -> 공용PC)
+4. **상태 변경**: `hw_status` (예: 운영 -> 수리, 재고 -> 폐기 등)
+
+## 3. 기술 설계 (Technical Design)
+
+### A. 데이터베이스 (DB)
+- **대상 테이블**: `asset_history`
+- **컬럼 구조 활용 및 보완**:
+    - `asset_id`: 대상 자산 식별자
+    - `event_type`: 변경 유형 (DEPT_CHANGE, USER_CHANGE, ROLE_CHANGE, STATUS_CHANGE)
+    - `details`: "상태 변경: 운영 -> 수리" 와 같이 읽기 쉬운 문자열 저장
+    - `cost`: 관련 비용 발생 시 기록 (수리비 등)
+    - `log_user`: 변경을 수행한 작업자
+    - `log_date`: 변경 발생 일시
+
+### B. 백엔드 (Server-side Logic)
+- **위치**: `server.js` 의 `POST /api/asset/:category/save` 엔드포인트
+- **동작 흐름**:
+    1. **Snapshot**: 인서트/업데이트 수행 전, 기존 DB의 데이터를 `SELECT`하여 메모리에 저장.
+    2. **Comparison**: 요청된 신규 데이터와 기존 데이터를 필드별로 대조.
+    3. **Auto-logging**: 변경점이 발견되면 `asset_history` 테이블에 즉시 인서트.
+    4. **Transaction**: 모든 로그 생성이 자산 저장과 하나의 트랜잭션으로 묶여야 함.
+
+### C. 프론트엔드 (UI/UX)
+- **위치**: `HWModal.ts` 우측 `modal-history-area`
+- **개선 사항**:
+    - `renderHistory()` 함수를 고도화하여 이벤트 타입별 아이콘/컬러 적용.
+    - "이전 값 ➔ 이후 값" 형태의 직관적인 레이아웃 도입.
+    - 스크롤을 통한 무제한 누적 이력 조회 지원.
+
+## 4. 단계별 구현 로직
+
+### 1단계: 서버 로직 고도화
+- `server.js`에 비교 함수(`compareAndLog`) 구현.
+- 각 자산 카테고리별 저장 로직에 비교 로직 삽입.
+
+### 2단계: DB 데이터 마이그레이션 (필요시)
+- 기존 자산의 `current_dept` 등을 `previous_dept`로 밀어내는 로직 점검.
+
+### 3단계: UI 타임라인 렌더링 개선
+- `modal.css`에 이력 전용 스타일(이벤트 뱃지 등) 추가.
+- `HWModal.ts`에서 최신 로그를 실시간으로 다시 불러오는 로직 확인.
+
+## 5. 검증 계획
+- **자동 감지 테스트**: 상태 변경 후 저장 시 우측 이력에 즉시 한 줄이 추가되는지 확인.
+- **다중 변경 테스트**: 조직과 사용자를 동시에 변경했을 때 두 개의 로그가 생성되는지 확인.
+- **데이터 무결성**: 수정을 취소하거나 저장 실패 시 로그가 남지 않는지(Transaction) 확인.
--- a/check_logs.js
+++ b/check_logs.js
@@ -0,0 +1,28 @@
+import mysql from 'mysql2/promise';
+import dotenv from 'dotenv';
+
+dotenv.config();
+
+const { DB_HOST, DB_USER, DB_PASS, DB_NAME, DB_PORT } = process.env;
+
+async function checkRecentLogs() {
+  const connection = await mysql.createConnection({
+    host: DB_HOST,
+    user: DB_USER,
+    password: DB_PASS,
+    database: DB_NAME,
+    port: parseInt(DB_PORT || '3306')
+  });
+
+  console.log('--- Recent History Logs ---');
+  const [rows] = await connection.query('SELECT * FROM asset_history ORDER BY created_at DESC LIMIT 5');
+  console.log(JSON.stringify(rows, null, 2));
+
+  console.log('\n--- Recent Core Data (to check current_dept) ---');
+  const [coreRows] = await connection.query('SELECT id, asset_code, current_dept, previous_dept FROM asset_core ORDER BY updated_at DESC LIMIT 5');
+  console.log(JSON.stringify(coreRows, null, 2));
+
+  await connection.end();
+}
+
+checkRecentLogs().catch(console.error);
--- a/probe_db.js
+++ b/probe_db.js
@@ -0,0 +1,36 @@
+import mysql from 'mysql2/promise';
+import dotenv from 'dotenv';
+
+dotenv.config();
+
+const { DB_HOST, DB_USER, DB_PASS, DB_NAME, DB_PORT } = process.env;
+
+async function probeDB() {
+  const connection = await mysql.createConnection({
+    host: DB_HOST,
+    user: DB_USER,
+    password: DB_PASS,
+    database: DB_NAME,
+    port: parseInt(DB_PORT || '3306')
+  });
+
+  console.log('--- Database Probe Start ---');
+  
+  const [tables] = await connection.query('SHOW TABLES');
+  const tableNames = tables.map(t => Object.values(t)[0]);
+  
+  console.log('Existing Tables:', tableNames);
+
+  for (const table of tableNames) {
+    const [columns] = await connection.query(`DESCRIBE ${table}`);
+    console.log(`\n[Table: ${table}]`);
+    columns.forEach(c => {
+      console.log(`  - ${c.Field} (${c.Type}) ${c.Comment ? '// ' + c.Comment : ''}`);
+    });
+  }
+
+  await connection.end();
+  console.log('\n--- Database Probe End ---');
+}
+
+probeDB().catch(console.error);
--- a/server.js
+++ b/server.js
@@ -170,6 +170,86 @@ app.post('/api/asset/:category/save', async (req, res) => {
    connection = await pool.getConnection();
    await connection.beginTransaction();

+    // 3.0 History Tracking & Auto Field Update
+    const [oldCoreRows] = await connection.query('SELECT * FROM asset_core WHERE id = ?', [asset.id]);
+    const [oldSpecRows] = await connection.query('SELECT * FROM asset_spec WHERE asset_id = ?', [asset.id]);
+    const oldCore = oldCoreRows[0] || {};
+    const oldSpec = oldSpecRows[0] || {};
+
+    console.log(`🔍 [History Check] ID: ${asset.id}`);
+    console.log(`   - Dept: [${oldCore.current_dept}] -> [${asset.current_dept}]`);
+    console.log(`   - User: [${oldCore.user_current}] -> [${asset.user_current}]`);
+
+    const historyLogs = [];
+    const logDate = new Date().toISOString().split('T')[0]; // YYYY-MM-DD
+    const logUser = '관리자';
+
+    // 조직 변동 감지 (null/undefined/empty string 세이프 처리)
+    const oldDept = oldCore.current_dept || '';
+    const newDept = asset.current_dept || '';
+    if (newDept !== '' && oldDept !== newDept) {
+        asset.previous_dept = oldDept;
+        historyLogs.push({
+            event_type: 'DEPT_CHANGE',
+            old_dept: oldDept || null,
+            new_dept: newDept,
+            details: `[조직 변동] ${oldDept || '(없음)'} -> ${newDept}`
+        });
+    }
+
+    // 사용자 변동 감지
+    const oldUser = oldCore.user_current || '';
+    const newUser = asset.user_current || '';
+    if (newUser !== '' && oldUser !== newUser) {
+        asset.previous_user = oldUser;
+        historyLogs.push({
+            event_type: 'USER_CHANGE',
+            old_user: oldUser || null,
+            new_user: newUser,
+            details: `[사용자 변동] ${oldUser || '(없음)'} -> ${newUser}`
+        });
+    }
+
+    // 유형/용도 변경 감지
+    const oldType = oldCore.asset_type || '';
+    const newType = asset.asset_type || '';
+    if (newType !== '' && oldType !== newType) {
+        historyLogs.push({
+            event_type: 'ROLE_CHANGE',
+            details: `[유형 변경] ${oldType || '(없음)'} -> ${newType}`
+        });
+    }
+
+    const oldRole = oldCore.current_role || '';
+    const newRole = asset.current_role || '';
+    if (newRole !== '' && oldRole !== newRole) {
+        historyLogs.push({
+            event_type: 'ROLE_CHANGE',
+            details: `[용도 변경] ${oldRole || '(없음)'} -> ${newRole}`
+        });
+    }
+
+    // 상태 변경 감지
+    const oldStatus = oldSpec.hw_status || '';
+    const newStatus = asset.hw_status || '';
+    if (newStatus !== '' && oldStatus !== newStatus) {
+        historyLogs.push({
+            event_type: 'STATUS_CHANGE',
+            details: `[상태 변경] ${oldStatus || '(없음)'} -> ${newStatus}`
+        });
+    }
+
+    console.log(`   - Logs Generated: ${historyLogs.length}`);
+
+    // 로그 일괄 삽입
+    for (const log of historyLogs) {
+        await connection.query(
+            `INSERT INTO asset_history (asset_id, event_type, old_dept, new_dept, old_user, new_user, details, log_date, log_user) 
+             VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)`,
+            [asset.id, log.event_type, log.old_dept || null, log.new_dept || null, log.old_user || null, log.new_user || null, log.details, logDate, logUser]
+        );
+    }
+
    // 3.1 asset_core
    const coreFields = ['id', 'asset_code', 'category', 'asset_type', 'current_role', 'asset_purpose', 'service_type', 'purchase_corp', 'purchase_date', 'purchase_amount', 'purchase_vendor', 'approval_document', 'memo', 'manager_primary', 'manager_secondary', 'current_dept', 'previous_dept', 'user_current', 'previous_user', 'emp_no', 'user_position'];
    const coreData = {};
--- a/src/components/Modal/BaseModal.ts
+++ b/src/components/Modal/BaseModal.ts
@@ -55,6 +55,9 @@ export abstract class BaseModal {
    this.currentAsset = asset;
    this.isEditMode = (mode === 'add' || mode === 'edit');
    
+    // 폼 초기화 추가
+    if (this.formEl) this.formEl.reset();
+
    this.setEditLockMode(mode);
    this.fillFormData(asset);
    
--- a/src/components/Modal/HWModal.ts
+++ b/src/components/Modal/HWModal.ts
@@ -67,6 +67,17 @@ class HwAssetModal extends BaseModal {
                    <label>${ASSET_SCHEMA.HW_STATUS.ui}</label>
                    <select id="hw-hw_status" name="hw_status" style="${inputStyle}">${generateOptionsHTML(HW_STATUS_LIST)}</select>
                  </div>
+                  <div class="form-group">
+                    <label>${ASSET_SCHEMA.SERVICE_TYPE.ui}</label>
+                    <select id="hw-service_type" name="service_type" style="${inputStyle}">
+                      <option value="외부">외부</option>
+                      <option value="내부">내부</option>
+                    </select>
+                  </div>
+                  <div class="form-group full-width" style="grid-column: span 2;">
+                    <label>${ASSET_SCHEMA.ASSET_PURPOSE.ui}</label>
+                    <input type="text" id="hw-asset_purpose" name="asset_purpose" placeholder="자산의 용도를 입력하세요" style="${inputStyle} width: 100%;" />
+                  </div>
                  <div class="form-group infra-only monitoring-field">
                    <label>${ASSET_SCHEMA.MONITORING.ui}</label>
                    <select id="hw-monitoring" name="monitoring" style="${inputStyle}">
@@ -76,15 +87,19 @@ class HwAssetModal extends BaseModal {
                  </div>

                  <!-- [SECTION 2] 조직 및 사용자 정보 -->
-                  <div class="form-section-title org-user-section" style="margin-top: 24px; margin-bottom: 12px;">사용자 및 조직 정보</div>
-                  <div class="form-group org-user-field">
+                  <div class="form-section-title" style="margin-top: 24px; margin-bottom: 12px;">사용자 및 조직 정보</div>
+                  <div class="form-group">
                    <label>${ASSET_SCHEMA.CURRENT_DEPT.ui}</label>
                    <select id="hw-current_dept" name="current_dept" style="${inputStyle}">${generateOptionsHTML(ORG_LIST)}</select>
                  </div>
-                  <div class="form-group org-user-field">
+                  <div class="form-group">
                    <label>${ASSET_SCHEMA.MANAGER_MAIN.ui}</label>
                    <input type="text" id="hw-manager_primary" name="manager_primary" style="${inputStyle}" />
                  </div>
+                  <div class="form-group">
+                    <label>${ASSET_SCHEMA.MANAGER_SUB.ui}</label>
+                    <input type="text" id="hw-manager_secondary" name="manager_secondary" style="${inputStyle}" />
+                  </div>
                  <div class="form-group personal-only">
                    <label>${ASSET_SCHEMA.CURRENT_USER.ui}</label>
                    <input type="text" id="hw-user_current" name="user_current" style="${inputStyle}" />
@@ -93,10 +108,6 @@ class HwAssetModal extends BaseModal {
                    <label>${ASSET_SCHEMA.USER_POSITION.ui}</label>
                    <input type="text" id="hw-user_position" name="user_position" style="${inputStyle}" />
                  </div>
-                  <div class="form-group">
-                    <label>${ASSET_SCHEMA.MANAGER_SUB.ui}</label>
-                    <input type="text" id="hw-manager_secondary" name="manager_secondary" style="${inputStyle}" />
-                  </div>
                  <div class="form-group personal-only">
                    <label>${ASSET_SCHEMA.PREV_USER.ui}</label>
                    <input type="text" id="hw-previous_user" name="previous_user" style="${inputStyle}" />
@@ -159,24 +170,14 @@ class HwAssetModal extends BaseModal {
                    <input type="hidden" id="hw-volumes-data" name="volumes" />
                  </div>

-                  <!-- [SECTION 4] 동적 네트워크 (IP/MAC) 정보 -->
-                  <div class="form-section-title net-only" style="margin-top: 24px; margin-bottom: 12px;">네트워크 인터페이스</div>
+                  <!-- [SECTION 4] 통합 원격 접속 정보 -->
+                  <div class="form-section-title net-only" style="margin-top: 24px; margin-bottom: 12px;">원격 접속 정보</div>
                  <div class="form-group net-only full-width" style="grid-column: span 2;">
                    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
-                      <label style="margin: 0; font-size: 11px; font-weight: 700; color: var(--text-muted);">IP / MAC 정보</label>
-                      <button type="button" id="btn-add-network" class="btn btn-outline" style="height: 26px !important; padding: 0 10px; font-size: 11px; display: none;">+ 인터페이스 추가</button>
+                      <label style="margin: 0; font-size: 11px; font-weight: 700; color: var(--text-muted);">IP/MAC 및 접속 계정 정보</label>
+                      <button type="button" id="btn-add-remote-info" class="btn btn-outline" style="height: 26px !important; padding: 0 10px; font-size: 11px; display: none;">+ 접속 정보 추가</button>
                    </div>
-                    <div id="hw-network-container" style="display: flex; flex-direction: column; gap: 8px;"></div>
-                  </div>
-
-                  <!-- [SECTION 5] 동적 원격 접속 정보 -->
-                  <div class="form-section-title remote-section" style="margin-top: 24px; margin-bottom: 12px;">원격 접속 정보</div>
-                  <div class="form-group remote-field full-width" style="grid-column: span 2;">
-                    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
-                      <label style="margin: 0; font-size: 11px; font-weight: 700; color: var(--text-muted);">접속 도구 및 인증 정보</label>
-                      <button type="button" id="btn-add-remote" class="btn btn-outline" style="height: 26px !important; padding: 0 10px; font-size: 11px; display: none;">+ 접속 도구 추가</button>
-                    </div>
-                    <div id="hw-remote-container" style="display: flex; flex-direction: column; gap: 8px;"></div>
+                    <div id="hw-remote-info-container" style="display: flex; flex-direction: column; gap: 12px;"></div>
                  </div>

                  <!-- [SECTION 6] 설치 위치 -->
@@ -318,6 +319,7 @@ class HwAssetModal extends BaseModal {
    });

    revertBtn.addEventListener('click', () => {
+      this.isEditMode = false;
      this.setEditLockMode('view');
      if (this.currentAsset) this.fillFormData(this.currentAsset);
      this.updateMapButtonVisibility();
@@ -326,8 +328,7 @@ class HwAssetModal extends BaseModal {

    // 동적 기능 이벤트 연결
    document.getElementById('btn-add-volume')?.addEventListener('click', () => this.addVolumeRow());
-    document.getElementById('btn-add-network')?.addEventListener('click', () => this.addNetworkRow());
-    document.getElementById('btn-add-remote')?.addEventListener('click', () => this.addRemoteRow());
+    document.getElementById('btn-add-remote-info')?.addEventListener('click', () => this.addRemoteInfoRow());

    const fileInput = document.getElementById('hw-approval_document_file') as HTMLInputElement;
    const fileNameDisplay = document.getElementById('hw-file-name-display');
@@ -380,17 +381,19 @@ class HwAssetModal extends BaseModal {

      // 동적 네트워크/원격 데이터 수집
      const nets: any[] = [];
-      document.querySelectorAll('#hw-network-container .net-row').forEach(row => {
-        const name = (row.querySelector('.net-name') as HTMLInputElement).value;
-        const ip = (row.querySelector('.net-ip') as HTMLInputElement).value;
-        const mac = (row.querySelector('.net-mac') as HTMLInputElement).value;
-        if (ip || mac) nets.push({ type: 'IP', name, val1: ip, val2: mac });
-      });
-      document.querySelectorAll('#hw-remote-container .remote-row').forEach(row => {
-        const name = (row.querySelector('.rem-name') as HTMLInputElement).value;
-        const id = (row.querySelector('.rem-id') as HTMLInputElement).value;
-        const pw = (row.querySelector('.rem-pw') as HTMLInputElement).value;
-        if (name || id) nets.push({ type: 'REMOTE', name, val1: id, val2: pw });
+      document.querySelectorAll('#hw-remote-info-container .remote-info-row').forEach(row => {
+        const type = (row.querySelector('.ri-type') as HTMLSelectElement).value;
+        const val1 = (row.querySelector('.ri-val1') as HTMLInputElement).value;
+        
+        if (type === 'IP' && val1) {
+            const tool = (row.querySelector('.ri-tool') as HTMLSelectElement)?.value || '';
+            const id = (row.querySelector('.ri-id') as HTMLInputElement)?.value || '';
+            const pw = (row.querySelector('.ri-pw') as HTMLInputElement)?.value || '';
+            const val2Str = (id || pw) ? JSON.stringify({ id, pw }) : '';
+            nets.push({ type: 'IP', name: tool, val1: val1, val2: val2Str });
+        } else if (type === 'MAC' && val1) {
+            nets.push({ type: 'MAC', name: 'MAC 주소', val1: val1, val2: '' });
+        }
      });
      setFieldValue('hw-remotes-data', JSON.stringify(nets));

@@ -420,7 +423,7 @@ class HwAssetModal extends BaseModal {
        <option value="NVMe" ${vol.type === 'NVMe' ? 'selected' : ''}>NVMe</option>
      </select>
      <input type="number" class="vol-cap" value="${vol.capacity || ''}" placeholder="용량" style="${inputStyle} flex: 1;" ${!this.isEditMode ? 'readonly' : ''} />
-      <select class="vol-unit" style="${inputStyle} width: 70px;" ${!this.isEditMode ? 'disabled' : ''}>
+      <select class="vol-unit" style="${inputStyle} width: 60px;" ${!this.isEditMode ? 'disabled' : ''}>
        <option value="GB" ${vol.unit === 'GB' ? 'selected' : ''}>GB</option>
        <option value="TB" ${vol.unit === 'TB' ? 'selected' : ''}>TB</option>
      </select>
@@ -430,48 +433,94 @@ class HwAssetModal extends BaseModal {
    container.appendChild(row);
  }

-  private addNetworkRow(net: any = { name: '기본망', val1: '', val2: '' }) {
-    const container = document.getElementById('hw-network-container');
+  private addRemoteInfoRow(info: any = { type: 'IP', name: '원격접속', val1: '', val2: '' }) {
+    const container = document.getElementById('hw-remote-info-container');
    if (!container) return;
-    const row = document.createElement('div');
-    row.className = 'net-row';
-    row.style.display = 'flex'; row.style.gap = '8px'; row.style.alignItems = 'center';
-    const inputStyle = 'height: 38px !important; box-sizing: border-box !important; font-size: 13px; margin: 0; padding: 0 8px;';
-    row.innerHTML = `
-      <input type="text" class="net-name" value="${net.name || ''}" placeholder="망구분(내부망)" style="${inputStyle} width: 100px;" ${!this.isEditMode ? 'readonly' : ''} />
-      <input type="text" class="net-ip" value="${net.val1 || ''}" placeholder="IP 주소" style="${inputStyle} flex: 1;" ${!this.isEditMode ? 'readonly' : ''} />
-      <input type="text" class="net-mac" value="${net.val2 || ''}" placeholder="MAC 주소" style="${inputStyle} flex: 1;" ${!this.isEditMode ? 'readonly' : ''} />
-      <button type="button" class="btn btn-outline btn-remove-row edit-only-btn" style="height: 38px !important; padding: 0 12px; color: #E11D48; border-color: #E11D48; display: ${this.isEditMode ? 'inline-flex' : 'none'};">&times;</button>
-    `;
-    row.querySelector('.btn-remove-row')?.addEventListener('click', () => row.remove());
-    container.appendChild(row);
+    
+    // Parse val2 (which contains JSON with id and pw if type is IP)
+    let parsedId = '';
+    let parsedPw = '';
+    if (info.type === 'IP' && info.val2) {
+        try {
+            const parsed = typeof info.val2 === 'string' ? JSON.parse(info.val2) : info.val2;
+            parsedId = parsed.id || '';
+            parsedPw = parsed.pw || '';
+        } catch (e) {
+            // Legacy fallback if val2 was just a simple string
+            parsedId = info.val2;
+        }
    }

-  private addRemoteRow(rem: any = { name: '', val1: '', val2: '' }) {
-    const container = document.getElementById('hw-remote-container');
-    if (!container) return;
    const row = document.createElement('div');
-    row.className = 'remote-row';
-    row.style.display = 'flex'; row.style.gap = '8px'; row.style.alignItems = 'center';
-    const inputStyle = 'height: 38px !important; box-sizing: border-box !important; font-size: 13px; margin: 0; padding: 0 8px;';
-    row.innerHTML = `
-      <input type="text" class="rem-name" value="${rem.name || ''}" placeholder="접속 도구(AnyDesk)" style="${inputStyle} flex: 1;" ${!this.isEditMode ? 'readonly' : ''} />
-      <input type="text" class="rem-id" value="${rem.val1 || ''}" placeholder="접속 ID" style="${inputStyle} flex: 1;" ${!this.isEditMode ? 'readonly' : ''} />
-      <input type="text" class="rem-pw" value="${rem.val2 || ''}" placeholder="접속 PW" style="${inputStyle} flex: 1;" ${!this.isEditMode ? 'readonly' : ''} />
-      <button type="button" class="btn btn-outline btn-remove-row edit-only-btn" style="height: 38px !important; padding: 0 12px; color: #E11D48; border-color: #E11D48; display: ${this.isEditMode ? 'inline-flex' : 'none'};">&times;</button>
+    row.className = 'remote-info-row';
+
+    // First Line: Type & Address
+    const line1 = document.createElement('div');
+    line1.className = 'ri-line';
+    line1.innerHTML = `
+      <select class="ri-type" ${!this.isEditMode ? 'disabled' : ''}>
+        <option value="IP" ${info.type === 'IP' ? 'selected' : ''}>IP 주소</option>
+        <option value="MAC" ${info.type === 'MAC' ? 'selected' : ''}>MAC 주소</option>
+      </select>
+      <input type="text" class="ri-val1" value="${info.val1 || ''}" placeholder="주소 입력" ${!this.isEditMode ? 'readonly' : ''} />
+      <button type="button" class="btn-remove-row ri-remove-btn edit-only-btn" style="display: ${this.isEditMode ? 'inline-flex' : 'none'};">&times;</button>
    `;
+
+    // Second Line: Tool & Credentials (Only for IP)
+    const line2 = document.createElement('div');
+    line2.className = 'ri-line ri-cred-line';
+    line2.style.display = info.type === 'IP' ? 'flex' : 'none'; 
+    line2.innerHTML = `
+      <div class="ri-connector"></div>
+      <select class="ri-tool" ${!this.isEditMode ? 'disabled' : ''}>
+        <option value="원격접속" ${info.name === '원격접속' ? 'selected' : ''}>원격접속</option>
+        <option value="리눅스" ${info.name === '리눅스' ? 'selected' : ''}>리눅스</option>
+        <option value="기타" ${info.name === '기타' ? 'selected' : ''}>기타</option>
+      </select>
+      <input type="text" class="ri-id" value="${parsedId}" placeholder="원격 ID" ${!this.isEditMode ? 'readonly' : ''} />
+      <input type="text" class="ri-pw" value="${parsedPw}" placeholder="원격 PW" ${!this.isEditMode ? 'readonly' : ''} />
+      <div class="ri-spacer"></div> <!-- Spacer for the remove button width -->
+    `;
+
+    row.appendChild(line1);
+    row.appendChild(line2);
+
+    // Toggle logic
+    const typeSelect = row.querySelector('.ri-type') as HTMLSelectElement;
+    typeSelect.addEventListener('change', (e) => {
+        const isIP = (e.target as HTMLSelectElement).value === 'IP';
+        line2.style.display = isIP ? 'flex' : 'none';
+        if (!isIP) {
+            (row.querySelector('.ri-id') as HTMLInputElement).value = '';
+            (row.querySelector('.ri-pw') as HTMLInputElement).value = '';
+        }
+    });
+
    row.querySelector('.btn-remove-row')?.addEventListener('click', () => row.remove());
    container.appendChild(row);
  }

  private toggleEditOnlyBtns(isEdit: boolean) {
-    ['btn-add-volume', 'btn-add-network', 'btn-add-remote'].forEach(id => {
+    ['btn-add-volume', 'btn-add-remote-info'].forEach(id => {
        const btn = document.getElementById(id);
        if (btn) btn.style.display = isEdit ? 'inline-flex' : 'none';   
    });
    document.querySelectorAll('.edit-only-btn').forEach(btn => {        
        (btn as HTMLElement).style.display = isEdit ? 'inline-flex' : 'none';
    });
+
+    // 동적 생성된 필드들 (볼륨/원격정보)의 상태 일괄 토글
+    const containers = ['#hw-volume-container', '#hw-remote-info-container'];
+    containers.forEach(selector => {
+      document.querySelectorAll(`${selector} input`).forEach(input => {
+          if (isEdit) input.removeAttribute('readonly');
+          else input.setAttribute('readonly', 'true');
+      });
+      document.querySelectorAll(`${selector} select`).forEach(select => {
+          if (isEdit) select.removeAttribute('disabled');
+          else select.setAttribute('disabled', 'true');
+      });
+    });
  }

  protected fillFormData(asset: any): void {
@@ -484,6 +533,8 @@ class HwAssetModal extends BaseModal {
    if (typeSelect) typeSelect.innerHTML = types.length > 0 ? generateOptionsHTML(types, asset.asset_type, true) : '<option value="">구분을 먼저 선택하세요</option>';
    setFieldValue('hw-asset_type', asset.asset_type || '');
    setFieldValue('hw-hw_status', asset.hw_status || '운영');
+    setFieldValue('hw-service_type', asset.service_type || '외부');
+    setFieldValue('hw-asset_purpose', asset.asset_purpose || '');
    setFieldValue('hw-current_dept', asset.current_dept || '');
    setFieldValue('hw-manager_primary', asset.manager_primary || '');
    setFieldValue('hw-manager_secondary', asset.manager_secondary || '');
@@ -500,30 +551,37 @@ class HwAssetModal extends BaseModal {
    
    // 동적 볼륨 렌더링
    const volumeContainer = document.getElementById('hw-volume-container');
-    if (volumeContainer) {
-        volumeContainer.innerHTML = '';
+    if (volumeContainer) volumeContainer.innerHTML = '';
    let vols = [];
    try { vols = asset.volumes ? (typeof asset.volumes === 'string' ? JSON.parse(asset.volumes) : asset.volumes) : []; } catch(e) {}
    vols.forEach((v: any) => this.addVolumeRow(v));
-    }

-    // 동적 네트워크 및 원격 렌더링
-    const netContainer = document.getElementById('hw-network-container');
-    const remContainer = document.getElementById('hw-remote-container');
-    if (netContainer) netContainer.innerHTML = '';
-    if (remContainer) remContainer.innerHTML = '';
+    // 통합 원격 접속 정보 렌더링
+    const remoteInfoContainer = document.getElementById('hw-remote-info-container');
+    if (remoteInfoContainer) remoteInfoContainer.innerHTML = '';
    let nets = [];
    try { nets = asset.remotes ? (typeof asset.remotes === 'string' ? JSON.parse(asset.remotes) : asset.remotes) : []; } catch(e) {}
    
    // Fallback: 서버에서 배열을 안 줬지만 기존 평탄화 데이터가 있는 경우
-    if (nets.length === 0 && (asset.ip_address || asset.remote_tool)) {
-        if (asset.ip_address || asset.mac_address) nets.push({ type: 'IP', name: '기본망', val1: asset.ip_address || '', val2: asset.mac_address || '' });
-        if (asset.remote_tool || asset.remote_id) nets.push({ type: 'REMOTE', name: asset.remote_tool || '', val1: asset.remote_id || '', val2: asset.remote_pw || '' });
+    if (nets.length === 0 && (asset.ip_address || asset.mac_address || asset.remote_tool || asset.remote_id)) {
+        if (asset.ip_address) {
+            // 기존 REMOTE 정보가 있다면 IP 로우에 통합 시도
+            const tool = asset.remote_tool || '원격접속';
+            const creds = (asset.remote_id || asset.remote_pw) ? JSON.stringify({ id: asset.remote_id || '', pw: asset.remote_pw || '' }) : '';
+            nets.push({ type: 'IP', name: tool, val1: asset.ip_address, val2: creds });
+        }
+        if (asset.mac_address) {
+            nets.push({ type: 'MAC', name: 'MAC 주소', val1: asset.mac_address, val2: '' });
+        }
+        // IP가 없는데 원격 정보만 있는 경우 (특이 케이스)
+        if (!asset.ip_address && (asset.remote_tool || asset.remote_id)) {
+            const creds = JSON.stringify({ id: asset.remote_id || '', pw: asset.remote_pw || '' });
+            nets.push({ type: 'IP', name: asset.remote_tool || '기타', val1: '', val2: creds });
+        }
    }

    nets.forEach((n: any) => {
-        if (n.type === 'IP') this.addNetworkRow(n);
-        else if (n.type === 'REMOTE') this.addRemoteRow(n);
+        this.addRemoteInfoRow(n);
    });

    setFieldValue('hw-monitoring', asset.monitoring || '비대상');
@@ -697,9 +755,51 @@ class HwAssetModal extends BaseModal {
  private renderHistory(assetId: string) {
    const container = document.getElementById('hw-history-list');
    if (!container) return;
-    const logs = (state.masterData.logs || []).filter(l => l.assetId === assetId);
-    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('');
+    
+    // state.masterData.logs에서 해당 자산의 이력 필터링 (최신순)
+    const logs = (state.masterData.logs || [])
+      .filter(l => l.asset_id === assetId)
+      .sort((a, b) => new Date(b.created_at || b.log_date).getTime() - new Date(a.created_at || a.log_date).getTime());
+
+    if (logs.length === 0) { 
+      container.innerHTML = '<div class="empty-history">기록된 변동 이력이 없습니다.</div>'; 
+      return; 
+    }
+
+    container.innerHTML = logs.map(l => {
+      let eventTag = '기타';
+      let tagClass = 'tag-default';
+      let itemClass = '';
+
+      switch(l.event_type) {
+        case 'DEPT_CHANGE': 
+          eventTag = '조직'; tagClass = 'tag-dept'; itemClass = 'evt-dept'; 
+          break;
+        case 'USER_CHANGE': 
+          eventTag = '사용자'; tagClass = 'tag-user'; itemClass = 'evt-user'; 
+          break;
+        case 'ROLE_CHANGE': 
+          eventTag = '용도'; tagClass = 'tag-role'; itemClass = 'evt-role'; 
+          break;
+        case 'STATUS_CHANGE': 
+          eventTag = '상태'; tagClass = 'tag-status'; itemClass = 'evt-status'; 
+          break;
+      }
+
+      // 화살표 기호(➔)를 사용하여 변경 사항 강조
+      const formattedDetails = l.details.replace(' -> ', ' <span class="history-arrow">➔</span> ');
+
+      return `
+        <div class="history-item ${itemClass}">
+          <div class="history-header-row">
+            <span class="history-tag ${tagClass}">${eventTag}</span>
+            <span class="history-date">${l.log_date || ''}</span>
+          </div>
+          <span class="history-user">${l.log_user || '시스템'}</span>
+          <div class="history-details">${formattedDetails}</div>
+        </div>
+      `;
+    }).join('');
  }

  private getCategoryKey(asset: any): string {
--- a/src/core/schema.ts
+++ b/src/core/schema.ts
@@ -17,6 +17,7 @@ export const ASSET_SCHEMA = {
  PURCHASE_AMOUNT:{ key: 'purchase_amount', db: 'purchase_amount', ui: '구매금액' },
  PURCHASE_VENDOR:{ key: 'purchase_vendor', db: 'purchase_vendor', ui: '구매업체' },
  APPROVAL_DOC:   { key: 'approval_document', db: 'approval_document', ui: '품의서' },
+  SERVICE_TYPE:   { key: 'service_type', db: 'service_type',    ui: '서비스 구분' },
  MANAGER_MAIN:   { key: 'manager_primary', db: 'manager_primary', ui: '담당자(정)' },
  MANAGER_SUB:    { key: 'manager_secondary', db: 'manager_secondary', ui: '담당자(부)' },
  LOCATION:       { key: 'location',     db: 'location',        ui: '자산위치' },
--- a/src/main.ts
+++ b/src/main.ts
@@ -11,37 +11,6 @@ import { initDashboardDetailModal } from './components/Modal/DashboardDetailModa
 import { initGuide } from './components/Guide';
 import { createIcons, Plus, X, LayoutDashboard, Monitor, Server, Database, Laptop, CalendarClock, Key, Cpu, Layers, Users, Paperclip, Edit2, History, RefreshCcw, BookOpen, Settings } from 'lucide';

-// --- DB 저장을 위한 세분화된 헬퍼 함수들 ---
-async function apiBatchSave(url: string, data: any[], label: string) {
-  try {
-    const response = await fetch(url, {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify(data)
-    });
-    if (!response.ok) {
-      const errorData = await response.json().catch(() => ({}));
-      throw new Error(`${label} DB 저장 실패: ${errorData.error || response.statusText}`);
-    }
-    console.log(`✅ ${label} DB 저장 완료`);
-  } catch (err) {
-    console.error(`❌ ${label} DB 저장 오류:`, err);
-    alert(`${label} 저장 중 오류가 발생했습니다: ${(err as any).message}`);
-  }
-}
-
-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 saveNetworkToDB = () => apiBatchSave(`http://${location.hostname}:3000/api/network/batch`, state.masterData.network, '네트워크');
-const saveEquipToDB = () => apiBatchSave(`http://${location.hostname}:3000/api/equipment/batch`, state.masterData.equipment, '업무지원장비');
-const saveSwInternalToDB = () => apiBatchSave(`http://${location.hostname}:3000/api/sw/internal/batch`, state.masterData.swInternal, '내부SW');
-const saveSwExternalToDB = () => apiBatchSave(`http://${location.hostname}:3000/api/sw/external/batch`, state.masterData.swExternal, '외부SW');
-const saveCloudToDB = () => apiBatchSave(`http://${location.hostname}:3000/api/cloud/batch`, state.masterData.cloud, '클라우드');
-const saveSwUsersToDB = () => apiBatchSave(`http://${location.hostname}:3000/api/asset/software/assignment/batch`, state.masterData.swUsers, 'SW사용자');
-const saveLogsToDB = () => apiBatchSave(`http://${location.hostname}:3000/api/asset/history/batch`, state.masterData.logs, '자산 로그');
-const saveUsersToDB = () => apiBatchSave(`http://${location.hostname}:3000/api/users/batch`, state.masterData.users, '사용자마스터');
-
 // 화면 갱신 통합 핸들러
 function refreshView() {
  const mainContent = document.getElementById('main-content')!;
@@ -54,13 +23,8 @@ function refreshView() {
  }
 }

-// 통합 저장 및 갱신
-async function saveAllDataToDB() {
-    await Promise.all([
-        savePcToDB(), saveServerToDB(), saveStorageToDB(), saveNetworkToDB(),
-        saveEquipToDB(), saveSwInternalToDB(), saveSwExternalToDB(), 
-        saveCloudToDB(), saveSwUsersToDB(), saveLogsToDB(), saveUsersToDB()
-    ]);
+// 통합 갱신 (저장은 이미 개별 모달에서 처리됨)
+async function refreshAllData() {
    await loadMasterDataFromDB();
    refreshView();
 }
@@ -81,14 +45,12 @@ function initApp() {
      }
    });

-    initHwModal(() => saveAllDataToDB(), closeAllModals);
-    initSwModal(() => saveAllDataToDB(), closeAllModals);
+    initHwModal(() => refreshAllData(), closeAllModals);
+    initSwModal(() => refreshAllData(), closeAllModals);
    initSwUserModal(() => { 
-      saveSwUsersToDB().then(() => {
        loadMasterDataFromDB().then(() => refreshView());
-      });
    }, closeAllModals);
-    initDomainModal(() => saveAllDataToDB(), closeAllModals);
+    initDomainModal(() => refreshAllData(), closeAllModals);
    
    initDashboardDetailModal();
    initGuide();
--- a/src/styles/modal.css
+++ b/src/styles/modal.css
@@ -379,16 +379,21 @@
  flex: 1;
  overflow-y: auto;
  max-height: 500px;
-  padding-right: 0.5rem;
+  padding-right: 8px;
+  margin-top: 8px;
 }

 .history-item {
  position: relative;
-  padding-left: 1.25rem;
-  padding-bottom: 1.5rem;
+  padding-left: 20px;
+  padding-bottom: 20px;
  border-left: 2px solid var(--border-color);
 }

+.history-item:last-child {
+  border-left: 2px solid transparent;
+}
+
 .history-item::before {
  content: '';
  position: absolute;
@@ -399,34 +404,68 @@
  border-radius: 50%;
  background-color: var(--white);
  border: 2px solid var(--primary-color);
+  z-index: 1;
 }

-.history-item:last-child {
-  border-left: 2px solid transparent;
+/* Event Specific Markers */
+.history-item.evt-dept::before { border-color: #3b82f6; }
+.history-item.evt-user::before { border-color: #8b5cf6; }
+.history-item.evt-role::before { border-color: #10b981; }
+.history-item.evt-status::before { border-color: #f59e0b; }
+
+.history-header-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 4px;
 }

 .history-date {
-  font-size: 0.75rem;
+  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
-  margin-bottom: 0.25rem;
 }

+.history-tag {
+  font-size: 10px;
+  font-weight: 700;
+  padding: 2px 6px;
+  border-radius: 10px;
+  text-transform: uppercase;
+}
+
+.tag-dept { background: #eff6ff; color: #3b82f6; }
+.tag-user { background: #f5f3ff; color: #8b5cf6; }
+.tag-role { background: #ecfdf5; color: #10b981; }
+.tag-status { background: #fffbeb; color: #f59e0b; }
+.tag-default { background: #f3f4f6; color: #6b7280; }
+
 .history-user {
-  font-size: 0.75rem;
+  font-size: 11px;
  font-weight: 600;
-  color: var(--primary-color);
-  margin-bottom: 0.25rem;
+  color: var(--text-main);
+  margin-bottom: 6px;
+  display: block;
 }

 .history-details {
-  font-size: 0.8125rem;
+  font-size: 12.5px;
  color: var(--text-main);
-  line-height: 1.4;
-  white-space: pre-wrap;
+  line-height: 1.5;
+  background: #f8fafc;
+  padding: 8px 10px;
+  border-radius: 6px;
+  border: 1px solid #f1f5f9;
  word-break: break-all;
 }

+.history-arrow {
+  display: inline-block;
+  margin: 0 4px;
+  color: var(--text-muted);
+  font-weight: 400;
+}
+
 .empty-history {
  padding: 2rem 0;
  text-align: center;
@@ -691,3 +730,100 @@
 .location-detail-container select {
  flex: 1;
 }
+
+/* Dynamic Remote Info Row */
+.remote-info-row {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 8px 0;
+  border-bottom: 1px dashed var(--border-color);
+}
+
+.remote-info-row:last-child {
+  border-bottom: none;
+}
+
+.ri-line {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.ri-line select,
+.ri-line input {
+  height: 38px;
+  box-sizing: border-box;
+  font-size: 13px;
+  padding: 0 10px;
+  border: 1px solid var(--border-color);
+  border-radius: 4px;
+  outline: none;
+  background-color: var(--white);
+  color: var(--text-main);
+  transition: border-color 0.2s;
+}
+
+.ri-line select:disabled,
+.ri-line input[readonly] {
+  background-color: var(--bg-muted);
+  border-color: transparent;
+  cursor: default;
+}
+
+.ri-line select:focus,
+.ri-line input:focus {
+  border-color: var(--primary-color);
+  box-shadow: 0 0 0 2px rgba(30, 81, 73, 0.1);
+}
+
+.ri-type, .ri-tool {
+  width: 110px;
+  flex-shrink: 0;
+}
+
+.ri-val1, .ri-id, .ri-pw {
+  flex: 1;
+  min-width: 0;
+}
+
+.ri-remove-btn {
+  height: 38px;
+  width: 38px;
+  padding: 0;
+  color: #E11D48;
+  border: 1px solid #E11D48;
+  background: transparent;
+  border-radius: 4px;
+  cursor: pointer;
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 18px;
+  transition: all 0.2s;
+}
+
+.ri-remove-btn:hover {
+  background-color: #FFF1F2;
+}
+
+.ri-spacer {
+  width: 46px; /* 38px btn + 8px gap */
+  flex-shrink: 0;
+}
+
+.ri-connector {
+  width: 24px;
+  height: 24px;
+  border-left: 1.5px solid #94a3b8;
+  border-bottom: 1.5px solid #94a3b8;
+  margin-top: -24px;
+  margin-left: 12px;
+  border-bottom-left-radius: 6px;
+  flex-shrink: 0;
+}
+
+.ri-cred-line {
+  margin-top: -4px;
+}
--- a/test_data_generator.js
+++ b/test_data_generator.js
@@ -0,0 +1,71 @@
+import mysql from 'mysql2/promise';
+import dotenv from 'dotenv';
+import crypto from 'crypto';
+
+dotenv.config();
+
+const { DB_HOST, DB_USER, DB_PASS, DB_NAME, DB_PORT } = process.env;
+
+const CATEGORIES = ['PC', '서버', '노트북', '모니터', '업무지원장비'];
+const DEPTS = ['기술개발센터', '총괄기획실', '한맥', '삼안', '장헌', '한라'];
+const USERS = ['홍길동', '김철수', '이영희', '박지성', '손흥민', '봉준호', '싸이'];
+const STATUSES = ['운영', '재고', '수리', '폐기', '기타'];
+const CORPS = ['한맥', '삼안', '장헌', '한라', 'PTC', '바론'];
+
+async function generateTestData() {
+  const connection = await mysql.createConnection({
+    host: DB_HOST,
+    user: DB_USER,
+    password: DB_PASS,
+    database: DB_NAME,
+    port: parseInt(DB_PORT || '3306')
+  });
+
+  console.log('🚀 무작위 테스트 데이터 생성을 시작합니다 (Crypto UUID 방식)...');
+
+  for (let i = 1; i <= 20; i++) {
+    const category = CATEGORIES[Math.floor(Math.random() * CATEGORIES.length)];
+    const dept = DEPTS[Math.floor(Math.random() * DEPTS.length)];
+    const user = USERS[Math.floor(Math.random() * USERS.length)];
+    const status = STATUSES[Math.floor(Math.random() * STATUSES.length)];
+    const corp = CORPS[Math.floor(Math.random() * CORPS.length)];
+    
+    // Crypto UUID 생성
+    const id = crypto.randomUUID();
+    const assetCode = `TEST-${Date.now().toString().slice(-6)}-${String(i).padStart(3, '0')}`;
+
+    try {
+      // 1. asset_core 삽입 (id 수동 지정)
+      await connection.query(
+        `INSERT INTO asset_core 
+        (id, asset_code, category, asset_type, purchase_corp, current_dept, user_current, purchase_date, service_type) 
+        VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)`,
+        [id, assetCode, category, category, corp, dept, user, '2026-06-10', '내부']
+      );
+
+      // 2. asset_spec 삽입
+      await connection.query(
+        `INSERT INTO asset_spec 
+        (asset_id, hw_status, model_name, cpu, ram) 
+        VALUES (?, ?, ?, ?, ?)`,
+        [id, status, `${category} Model ${i}`, 'Intel i7', '16GB']
+      );
+
+      // 3. 초기 이력 삽입
+      await connection.query(
+        `INSERT INTO asset_history (asset_id, event_type, details, log_date, log_user) 
+         VALUES (?, ?, ?, ?, ?)`,
+        [id, 'STATUS_CHANGE', `[최초 등록] 테스트 데이터 생성 (${status})`, '2026-06-10', '시스템']
+      );
+
+      console.log(`✅ 생성 완료: ${assetCode} (${category} / ${dept} / ${user})`);
+    } catch (err) {
+      console.error(`❌ 생성 실패 (${i}):`, err.message);
+    }
+  }
+
+  await connection.end();
+  console.log('\n✨ 20개의 테스트 데이터 생성이 완료되었습니다.');
+}
+
+generateTestData().catch(console.error);