feat: 개인 PC 수정 이력(Log) 시스템 구현 및 UI 개선

src/components/Modal/PCModal.ts

@@ -1,12 +1,11 @@
 import { state } from '../../state';
-import { HardwareAsset } from '../../excelHandler';
+import { HardwareAsset, HardwareLog } from '../../excelHandler';
 import { openModal } from './BaseModal';
 
 /**
  * 개인PC 모달 초기화 및 로직 제어
  */
 export function initPCModal(renderContent: () => void, closeModals: () => void) {
-  const pcModal = document.getElementById('pc-asset-modal') as HTMLDivElement;
   const pcForm = document.getElementById('pc-asset-form') as HTMLFormElement;
   const btnSavePc = document.getElementById('btn-save-pc-asset') as HTMLButtonElement;
   const btnDeletePc = document.getElementById('btn-delete-pc-asset') as HTMLButtonElement;
@@ -48,7 +47,27 @@ export function initPCModal(renderContent: () => void, closeModals: () => void)
 
     if (id) {
       const idx = state.masterData.hw.findIndex(a => a.id === id);
-      if(idx !== -1) state.masterData.hw[idx] = newAsset;
+      if(idx !== -1) {
+        const oldAsset = state.masterData.hw[idx];
+        const changes = getChangeDetails(oldAsset, newAsset);
+        
+        if (changes) {
+          // 로그인 기능이 없으므로 '관리자'가 로그인한 것으로 가정
+          const modifier = '관리자'; 
+          
+          const log: HardwareLog = {
+            id: Math.random().toString(36).substring(2, 9),
+            assetId: id,
+            date: new Date().toLocaleString(),
+            details: changes,
+            user: modifier
+          };
+          
+          state.masterData.logs.push(log);
+        }
+        
+        state.masterData.hw[idx] = newAsset;
+      }
     } else {
       state.masterData.hw.push(newAsset);
     }
@@ -63,6 +82,7 @@ export function initPCModal(renderContent: () => void, closeModals: () => void)
     const id = (document.getElementById('pc-asset-id') as HTMLInputElement).value;
     if (confirm('삭제하시겠습니까?')) {
       state.masterData.hw = state.masterData.hw.filter(a => a.id !== id);
+      // 관련 로그도 삭제할지 여부는 정책에 따라 (여기서는 유지)
       closeModals();
       renderContent();
     }
@@ -71,12 +91,11 @@ export function initPCModal(renderContent: () => void, closeModals: () => void)
 
 /**
  * 개인PC 상세 모달 열기
- * @param asset 수정 시 자산 데이터, 신규 시 undefined
  */
 export function openPcModal(asset?: HardwareAsset) {
-  const pcModal = document.getElementById('pc-asset-modal') as HTMLDivElement;
   const pcForm = document.getElementById('pc-asset-form') as HTMLFormElement;
   const deleteBtn = document.getElementById('btn-delete-pc-asset')!;
+  const historyArea = document.querySelector('.modal-history-area') as HTMLElement;
   
   openModal('pc-asset-modal');
   pcForm.reset();
@@ -84,6 +103,7 @@ export function openPcModal(asset?: HardwareAsset) {
   if (asset) {
     document.getElementById('pc-modal-title')!.textContent = '개인PC 상세 정보 수정';
     deleteBtn.style.display = 'block';
+    if (historyArea) historyArea.style.display = 'flex';
     
     (document.getElementById('pc-asset-id') as HTMLInputElement).value = asset.id;
     (document.getElementById('pc-법인') as HTMLSelectElement).value = asset.법인;
@@ -98,14 +118,78 @@ export function openPcModal(asset?: HardwareAsset) {
     (document.getElementById('pc-HDD1') as HTMLInputElement).value = asset.HDD1 || '';
     (document.getElementById('pc-HDD2') as HTMLInputElement).value = asset.HDD2 || '';
     (document.getElementById('pc-구매일') as HTMLInputElement).value = asset.구매일 || '';
-    (document.getElementById('pc-금액') as HTMLInputElement).value = asset.금액 ? Number(asset.금액.replace(/,/g, '')).toLocaleString() : '';
+    (document.getElementById('pc-금액') as HTMLInputElement).value = asset.금액 ? asset.금액.replace(/,/g, '').replace(/\B(?=(\d{3})+(?!\d))/g, ',') : '';
     (document.getElementById('pc-납품업체') as HTMLInputElement).value = asset.납품업체 || '';
     (document.getElementById('pc-품의서명') as HTMLElement).innerText = asset.품의서명 ? `📎${asset.품의서명}` : '';
+    
+    renderHistory(asset.id);
   } else {
     document.getElementById('pc-modal-title')!.textContent = '새 개인PC 자산 추가';
     deleteBtn.style.display = 'none';
+    if (historyArea) historyArea.style.display = 'none'; // 신규 시 이력 숨김
+    
     (document.getElementById('pc-asset-id') as HTMLInputElement).value = '';
     (document.getElementById('pc-법인') as HTMLSelectElement).value = '한맥';
     (document.getElementById('pc-품의서명') as HTMLElement).innerText = '';
   }
 }
+
+/**
+ * 변경 사항 감지 및 문자열 생성
+ */
+function getChangeDetails(oldAsset: HardwareAsset, newAsset: HardwareAsset): string {
+  const changes: string[] = [];
+  const fields = [
+    { key: '법인', label: '법인' },
+    { key: '자산코드', label: '자산코드' },
+    { key: '사용자', label: '사용자' },
+    { key: '위치', label: '위치' },
+    { key: 'CPU', label: 'CPU' },
+    { key: 'GPU', label: 'GPU' },
+    { key: 'RAM', label: 'RAM' },
+    { key: 'SSD1', label: 'SSD1' },
+    { key: 'SSD2', label: 'SSD2' },
+    { key: 'HDD1', label: 'HDD1' },
+    { key: 'HDD2', label: 'HDD2' },
+    { key: '구매일', label: '구매일' },
+    { key: '금액', label: '금액' },
+    { key: '납품업체', label: '납품업체' },
+    { key: '품의서명', label: '품의서' },
+  ];
+
+  fields.forEach(field => {
+    const oldVal = (oldAsset as any)[field.key] || '';
+    const newVal = (newAsset as any)[field.key] || '';
+    
+    if (oldVal !== newVal) {
+      changes.push(`${field.label}: ${oldVal || '없음'} → ${newVal || '없음'}`);
+    }
+  });
+
+  return changes.join('\n');
+}
+
+/**
+ * 이력 리스트 렌더링
+ */
+function renderHistory(assetId: string) {
+  const historyList = document.getElementById('pc-history-list');
+  if (!historyList) return;
+
+  const logs = state.masterData.logs
+    .filter(l => l.assetId === assetId)
+    .sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());
+
+  if (logs.length === 0) {
+    historyList.innerHTML = '<div class="empty-history">이력이 없습니다.</div>';
+    return;
+  }
+
+  historyList.innerHTML = logs.map(log => `
+    <div class="history-item">
+      <div class="history-date">${log.date}</div>
+      <div class="history-user">수정자: ${log.user}</div>
+      <div class="history-details">${log.details.replace(/\n/g, '<br>')}</div>
+    </div>
+  `).join('');
+}