merge: merge origin/main into HW_Dashboard and resolve conflicts

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

@@ -35,8 +35,9 @@ class HwAssetModal extends BaseModal {
               <div class="modal-form-area">
                 <form id="hw-asset-form" class="grid-form">
                   <input type="hidden" id="hw-id" name="id" />
+                  <input type="hidden" id="hw-remotes-data" name="remotes" />
                   
-                  <!-- [SECTION 1] 기본 관리 정보 (필수 공통) -->
+                  <!-- [SECTION 1] 기본 관리 정보 -->
                   <div class="form-section-title" style="padding-top: 0; margin-bottom: 12px;">기본 관리 정보</div>
                   <div class="form-group">
                     <label>${ASSET_SCHEMA.ASSET_CODE.ui}</label>
@@ -66,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}">
@@ -75,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}" />
@@ -92,17 +108,13 @@ 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}" />
                   </div>
 
-                  <!-- [SECTION 3] 하드웨어 사양 및 네트워크 -->
-                  <div class="form-section-title hardware-section" style="margin-top: 24px; margin-bottom: 12px;">시스템 사양 및 네트워크</div>
+                  <!-- [SECTION 3] 하드웨어 사양 -->
+                  <div class="form-section-title hardware-section" style="margin-top: 24px; margin-bottom: 12px;">시스템 사양 정보</div>
                   <div class="form-group">
                     <label>${ASSET_SCHEMA.MODEL_NAME.ui}</label>
                     <input type="text" id="hw-model_name" name="model_name" style="${inputStyle}" />
@@ -135,58 +147,33 @@ class HwAssetModal extends BaseModal {
                     <label>${ASSET_SCHEMA.MAINBOARD.ui}</label>
                     <input type="text" id="hw-mainboard" name="mainboard" style="${inputStyle}" />
                   </div>
+                  <div class="form-group monitor-only">
+                    <label>${ASSET_SCHEMA.MONITOR_INCH.ui}</label>
+                    <input type="text" id="hw-monitor_inch" name="monitor_inch" style="${inputStyle}" />
+                  </div>
 
-                  <!-- 동적 디스크 할당 영역 (Plan B) -->
+                  <!-- 동적 디스크 할당 영역 -->
+                  <div class="form-section-title spec-only" style="margin-top: 24px; margin-bottom: 12px;">디스크(용량) 정보</div>
                   <div class="form-group spec-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);">저장장치 (디스크)</label>
-                      <button type="button" id="btn-add-volume" 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);">연결된 드라이브 리스트</label>
+                      <button type="button" id="btn-add-volume" class="btn btn-outline" style="height: 26px !important; padding: 0 10px; font-size: 11px; display: none;">+ 볼륨 추가</button>
                     </div>
                     <div id="hw-volume-container" style="display: flex; flex-direction: column; gap: 8px;"></div>
                     <input type="hidden" id="hw-volumes-data" name="volumes" />
                   </div>
 
-                  <div class="form-group net-only">
-                    <label>${ASSET_SCHEMA.IP_ADDR.ui}</label>
-                    <input type="text" id="hw-ip_address" name="ip_address" style="${inputStyle}" />
-                  </div>
-                  <div class="form-group net-only">
-                    <label>${ASSET_SCHEMA.MAC_ADDR.ui}</label>
-                    <input type="text" id="hw-mac_address" name="mac_address" style="${inputStyle}" />
-                  </div>
-                  <div class="form-group monitor-only">
-                    <label>${ASSET_SCHEMA.MONITOR_INCH.ui}</label>
-                    <input type="text" id="hw-monitor_inch" name="monitor_inch" style="${inputStyle}" />
-                  </div>
-                  <div class="form-group parts-only">
-                    <label>${ASSET_SCHEMA.VOLUME.ui}</label>
-                    <input type="text" id="hw-volume" name="volume" style="${inputStyle}" />
-                  </div>
-                  <div class="form-group parts-only">
-                    <label>${ASSET_SCHEMA.ASSET_COUNT.ui}</label>
-                    <input type="text" id="hw-asset_count" name="asset_count" style="${inputStyle}" />
+                  <!-- 통합 원격 접속 정보 영역 -->
+                  <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-remote-info" class="btn btn-outline" style="height: 26px !important; padding: 0 10px; font-size: 11px; display: none;">+ 접속 정보 추가</button>
+                    </div>
+                    <div id="hw-remote-info-container" style="display: flex; flex-direction: column; gap: 12px;"></div>
                   </div>
 
-                  <!-- [SECTION 4] 원격 접속 정보 (서버 전용) -->
-                  <div class="form-section-title remote-section" style="margin-top: 24px; margin-bottom: 12px;">원격 접속 정보</div>
-                  <div class="form-group remote-field">
-                    <label>${ASSET_SCHEMA.IP_ADDR2.ui}</label>
-                    <input type="text" id="hw-ip_address_2" name="ip_address_2" style="${inputStyle}" />
-                  </div>
-                  <div class="form-group remote-field">
-                    <label>${ASSET_SCHEMA.REMOTE_TOOL.ui}</label>
-                    <input type="text" id="hw-remote_tool" name="remote_tool" style="${inputStyle}" />
-                  </div>
-                  <div class="form-group remote-field">
-                    <label>${ASSET_SCHEMA.REMOTE_ID.ui}</label>
-                    <input type="text" id="hw-remote_id" name="remote_id" style="${inputStyle}" />
-                  </div>
-                  <div class="form-group remote-field">
-                    <label>${ASSET_SCHEMA.REMOTE_PW.ui}</label>
-                    <input type="text" id="hw-remote_pw" name="remote_pw" style="${inputStyle}" />
-                  </div>
-
-                  <!-- [SECTION 5] 설치 위치 (인프라/실물 장비 전용) -->
+                  <!-- [SECTION 5] 설치 위치 -->
                   <div class="form-section-title location-section" style="margin-top: 24px; margin-bottom: 12px;">설치 위치</div>
                   <div class="form-group location-field">
                     <label>건물/위치</label>
@@ -202,7 +189,7 @@ class HwAssetModal extends BaseModal {
                     <input type="hidden" id="hw-loc_x" name="loc_x" /><input type="hidden" id="hw-loc_y" name="loc_y" /><input type="hidden" id="hw-location_photo" name="location_photo" />
                   </div>
 
-                  <!-- [SECTION 6] 구매 및 증빙 (공통) -->
+                  <!-- [SECTION 6] 구매 정보 -->
                   <div class="form-section-title" style="margin-top: 24px; margin-bottom: 12px;">구매 및 증빙 정보</div>
                   <div class="form-group">
                     <label>${ASSET_SCHEMA.PURCHASE_DATE.ui}</label>
@@ -325,15 +312,16 @@ class HwAssetModal extends BaseModal {
     });
 
     revertBtn.addEventListener('click', () => {
+      this.isEditMode = false;
       this.setEditLockMode('view');
       if (this.currentAsset) this.fillFormData(this.currentAsset);
       this.updateMapButtonVisibility();
       this.toggleEditOnlyBtns(false);
     });
 
-    // 동적 볼륨 추가 기능 연결
-    const btnAddVolume = document.getElementById('btn-add-volume')!;
-    btnAddVolume.addEventListener('click', () => this.addVolumeRow());
+    // 동적 기능 이벤트 연결
+    document.getElementById('btn-add-volume')?.addEventListener('click', () => this.addVolumeRow());
+    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');
@@ -374,7 +362,7 @@ class HwAssetModal extends BaseModal {
         return;
       }
 
-      // 동적 볼륨 데이터 수집 및 배열 생성
+      // 동적 볼륨 데이터 수집
       const vols: any[] = [];
       document.querySelectorAll('#hw-volume-container .volume-row').forEach((row, idx) => {
         const type = (row.querySelector('.vol-type') as HTMLSelectElement).value;
@@ -384,6 +372,24 @@ class HwAssetModal extends BaseModal {
       });
       setFieldValue('hw-volumes-data', JSON.stringify(vols));
 
+      // 동적 네트워크/원격 데이터 수집
+      const nets: any[] = [];
+      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));
+
       const formData = new FormData(this.formEl!);
       const updated = { ...this.currentAsset };
       formData.forEach((value, key) => { if (key !== 'id') updated[key] = value; });
@@ -399,15 +405,10 @@ class HwAssetModal extends BaseModal {
   private addVolumeRow(vol: any = { type: 'SSD', capacity: '', unit: 'GB' }) {
     const container = document.getElementById('hw-volume-container');
     if (!container) return;
-
     const row = document.createElement('div');
-    row.style.display = 'flex';
-    row.style.gap = '8px';
-    row.style.alignItems = 'center';
     row.className = 'volume-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 = `
       <select class="vol-type" style="${inputStyle} width: 80px;" ${!this.isEditMode ? 'disabled' : ''}>
         <option value="SSD" ${vol.type === 'SSD' ? 'selected' : ''}>SSD</option>
@@ -415,23 +416,104 @@ 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>
-      <button type="button" class="btn btn-outline btn-remove-vol edit-only-btn" style="height: 38px !important; padding: 0 12px; color: #E11D48; border-color: #E11D48; display: ${this.isEditMode ? 'inline-flex' : 'none'};">&times;</button>
+      <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);
+  }
+
+  private addRemoteInfoRow(info: any = { type: 'IP', name: '원격접속', val1: '', val2: '' }) {
+    const container = document.getElementById('hw-remote-info-container');
+    if (!container) return;
+
+    // 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;
+        }
+    }
+
+    const row = document.createElement('div');
+    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>
     `;
 
-    row.querySelector('.btn-remove-vol')?.addEventListener('click', () => row.remove());
+    // 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) {
-    const addBtn = document.getElementById('btn-add-volume');
-    if (addBtn) addBtn.style.display = isEdit ? 'inline-flex' : 'none';
+    ['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 {
@@ -444,6 +526,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 || '');
@@ -458,23 +542,40 @@ class HwAssetModal extends BaseModal {
     setFieldValue('hw-gpu', asset.gpu || '');
     setFieldValue('hw-mainboard', asset.mainboard || '');
     
-    // 동적 볼륨 렌더링 초기화 및 생성
+    // 동적 볼륨 렌더링
     const volumeContainer = document.getElementById('hw-volume-container');
-    if (volumeContainer) {
-        volumeContainer.innerHTML = '';
-        let vols = [];
+    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 remoteInfoContainer = document.getElementById('hw-remote-info-container');
+    if (remoteInfoContainer) {
+        remoteInfoContainer.innerHTML = '';
+        let nets = [];
         try {
-            vols = asset.volumes ? (typeof asset.volumes === 'string' ? JSON.parse(asset.volumes) : asset.volumes) : [];
+            nets = asset.remotes ? (typeof asset.remotes === 'string' ? JSON.parse(asset.remotes) : asset.remotes) : [];
         } catch(e) {}
-        vols.forEach((v: any) => this.addVolumeRow(v));
+
+        // Fallback: 서버에서 배열을 안 줬지만 기존 평탄화 데이터가 있는 경우 
+        if (nets.length === 0 && (asset.ip_address || asset.mac_address || asset.remote_tool || asset.remote_id)) {
+            if (asset.ip_address) {
+                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: '' });
+            }
+            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) => this.addRemoteInfoRow(n));
     }
 
-    setFieldValue('hw-ip_address', asset.ip_address || '');
-    setFieldValue('hw-ip_address_2', asset.ip_address_2 || '');
-    setFieldValue('hw-mac_address', asset.mac_address || '');
-    setFieldValue('hw-remote_tool', asset.remote_tool || '');
-    setFieldValue('hw-remote_id', asset.remote_id || '');
-    setFieldValue('hw-remote_pw', asset.remote_pw || '');
     setFieldValue('hw-monitoring', asset.monitoring || '비대상');
     setFieldValue('hw-serial_num', asset.serial_num || '');
     setFieldValue('hw-monitor_inch', asset.monitor_inch || '');
@@ -484,6 +585,7 @@ class HwAssetModal extends BaseModal {
     setFieldValue('hw-purchase_vendor', asset.purchase_vendor || '');
     setFieldValue('hw-purchase_amount', asset.purchase_amount || '');
     setFieldValue('hw-approval_document', asset.approval_document || '');
+    
     const docName = document.getElementById('hw-file-name-display');
     if (docName) docName.textContent = asset.approval_document ? asset.approval_document.split('/').pop() : '파일 선택...';
     const fileLinkContainer = document.getElementById('hw-file-link-container');
@@ -492,6 +594,7 @@ class HwAssetModal extends BaseModal {
     } else if (fileLinkContainer) {
       fileLinkContainer.innerHTML = '';
     }
+    
     setFieldValue('hw-memo', asset.memo || '');
     setFieldValue('hw-location_detail', asset.location_detail || '');
     setFieldValue('hw-loc_x', asset.loc_x || '');
@@ -520,32 +623,18 @@ class HwAssetModal extends BaseModal {
     const category = (document.getElementById('hw-category') as HTMLSelectElement)?.value || '';
     const type = (document.getElementById('hw-asset_type') as HTMLSelectElement)?.value || '';
 
-    // 인프라 장비 (서버, 저장매체, 네트워크, 보안장비, 공간정보장비, 서버PC)
     const infraCategories = ['서버', '저장매체', '네트워크', '보안장비', '공간정보장비'];
     const isInfra = infraCategories.includes(category) || type.includes('서버') || type.includes('저장시스템');
-
-    // 개인 장비 (PC, 노트북, 모바일, 태블릿) - '서버PC'는 제외
     const personalCategories = ['PC', '노트북', '모바일', '태블릿'];
     const isPersonal = (personalCategories.includes(category) || type.includes('개인PC') || type.includes('노트북')) && !type.includes('서버PC');
-
-    // 시스템 사양 (PC, 서버 등)
     const specCategories = ['PC', '서버', '노트북', '스토리지', '워크스테이션'];
     const hasSpec = specCategories.includes(category) || type.includes('서버PC');
-
-    // 네트워크 정보 (IP/MAC)
     const noNetCategories = ['저장매체', '네트워크', '공간정보장비', 'PC부품', '사무가구'];
     const showNet = (isInfra || isPersonal) && !noNetCategories.includes(category);
-
-    // 시리얼 번호
     const hasSN = !['사무가구', 'PC부품'].includes(category);
-
-    // 수량/용량 전용 (부품)
     const isParts = ['PC부품', '사무가구'].includes(category);
-
-    // 원격 접속 (서버 전용)
     const showRemote = category === '서버' || type.includes('서버');
 
-    // JS에서 display: block 강제 대신 빈 문자열 할당하여 네이티브 CSS flex 활용
     document.querySelectorAll('.remote-section, .remote-field, .monitoring-field').forEach(el => (el as HTMLElement).style.display = showRemote ? '' : 'none');
     document.querySelectorAll('.net-only').forEach(el => (el as HTMLElement).style.display = showNet ? '' : 'none');
     document.querySelectorAll('.spec-only').forEach(el => (el as HTMLElement).style.display = hasSpec ? '' : 'none');
@@ -658,9 +747,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 {