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

- 통합 원격 접속 정보 UI 구현 (IP/MAC 및 계정 정보 통합)
- 서버 측 스냅샷 비교 기반 자동 이력(Log) 생성 로직 도입
- 타임라인 UI 개선 (이벤트별 색상 뱃지 및 변동 사항 강조)
- 자산 상세 필드 확장 (서비스 구분, 용도 등)
- 테스트 데이터 생성기 및 이력 계획서 추가

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);
     

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';
+        if (btn) btn.style.display = isEdit ? 'inline-flex' : 'none';   
     });
-    document.querySelectorAll('.edit-only-btn').forEach(btn => {
+    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 = '';
-        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));
-    }
+    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 {