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

PC_Table view 및 스타일 추가
2026-04-14 17:22:06 +09:00 · 2026-04-14 16:13:54 +09:00
7 changed files with 317 additions and 73 deletions
--- a/index.html
+++ b/index.html
@@ -6,7 +6,8 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ITAM 자산관리 ERP</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css" />
-    <link rel="stylesheet" href="/src/style.css" />
+    <link rel="stylesheet" href="/src/styles/common.css" />
+    <link rel="stylesheet" href="/src/styles/modal.css" />
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script>
  </head>
@@ -171,12 +172,14 @@

    <!-- PC Asset Modal -->
    <div id="pc-asset-modal" class="modal-overlay hidden">
-      <div class="modal-content">
+      <div class="modal-content wide">
        <div class="modal-header">
          <h2 id="pc-modal-title">개인PC 상세 정보</h2>
          <button id="btn-close-pc-modal" class="btn-icon" aria-label="닫기"><i data-lucide="x"></i></button>
        </div>
        <div class="modal-body">
+          <div class="modal-body-split">
+            <div class="modal-form-area">
              <form id="pc-asset-form" class="grid-form">
            <input type="hidden" id="pc-asset-id" />
            <input type="hidden" id="pc-asset-type" value="개인PC" />
@@ -247,7 +250,7 @@

            <div class="form-group">
              <label for="pc-금액">금액</label>
-              <input type="text" id="pc-금액" placeholder="ex) 1,000,000" oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/\\B(?=(\\d{3})+(?!\\d))/g, ',')" />
+              <input type="text" id="pc-금액" placeholder="ex) 1,000,000" oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/\B(?=(\d{3})+(?!\d))/g, ',')" />
            </div>

            <div class="form-group">
@@ -264,6 +267,16 @@
            </div>
          </form>
        </div>
+        <div class="modal-history-area">
+          <div class="history-header">
+            <h3><i data-lucide="history" style="width:16px; height:16px;"></i> 수정 이력</h3>
+          </div>
+          <div id="pc-history-list" class="history-timeline">
+            <div class="empty-history">이력이 없습니다.</div>
+          </div>
+        </div>
+      </div>
+    </div>
    <div class="modal-footer">
      <button id="btn-delete-pc-asset" class="btn btn-outline btn-danger">삭제</button>
      <div class="footer-actions">
--- a/src/components/Modal/PCModal.ts
+++ b/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('');
+}
--- a/src/excelHandler.ts
+++ b/src/excelHandler.ts
@@ -61,10 +61,19 @@ export interface SWUser {
  신청서명: string;
 }

+export interface HardwareLog {
+  id: string;
+  assetId: string;
+  date: string;
+  details: string;
+  user: string;
+}
+
 export interface MasterAssetData {
  hw: HardwareAsset[];
  sw: SoftwareAsset[];
  swUsers: SWUser[];
+  logs: HardwareLog[];
 }

 const HW_TABS = ['개인PC', '서버', '스토리지', '전산비품'];
@@ -76,6 +85,7 @@ const STORAGE_HEADERS = ['법인', '유형', '자산코드', '명칭', '위치',
 const SUB_SW_HEADERS = ['ID', '분야', '법인', '부서', '제품명', '구매일', '구독일', '금액', '수량', '계정명', '납품업체', '비고'];
 const PERM_SW_HEADERS = ['ID', '분야', '법인', '부서', '제품명', '구매일', '유지보수여부', '금액', '수량', '계정명', '납품업체', '비고'];
 const SW_USER_HEADERS = ['id', 'swId', '법인', '부서', '팀', '직위', '이름', '사용기간', '신청서명'];
+const HISTORY_HEADERS = ['id', 'assetId', 'date', 'details', 'user'];

 /**
 * 템플릿 엑셀 다중 시트로 다운로드
@@ -112,6 +122,11 @@ export function downloadTemplate() {
  swUserWs['!cols'] = [{wch:15}, {wch:15}, {wch:15}, {wch:15}, {wch:15}, {wch:15}, {wch:15}, {wch:20}, {wch:25}];
  XLSX.utils.book_append_sheet(wb, swUserWs, 'SW_사용자');

+  // History 시트 (템플릿에도 포함)
+  const historyWs = XLSX.utils.aoa_to_sheet([HISTORY_HEADERS]);
+  historyWs['!cols'] = [{wch:15}, {wch:20}, {wch:20}, {wch:50}, {wch:15}];
+  XLSX.utils.book_append_sheet(wb, historyWs, 'History');
+
  XLSX.writeFile(wb, 'itam_assets_template.xlsx');
 }

@@ -181,6 +196,15 @@ export function exportToExcel(masterData: MasterAssetData) {
  swUserWs['!cols'] = [{wch:15}, {wch:15}, {wch:15}, {wch:15}, {wch:15}, {wch:15}, {wch:15}, {wch:20}, {wch:25}];
  XLSX.utils.book_append_sheet(wb, swUserWs, 'SW_사용자');

+  // History
+  const historyWsData = [
+    HISTORY_HEADERS,
+    ...masterData.logs.map(l => [l.id, l.assetId, l.date, l.details, l.user])
+  ];
+  const historyWs = XLSX.utils.aoa_to_sheet(historyWsData);
+  historyWs['!cols'] = [{wch:15}, {wch:20}, {wch:20}, {wch:50}, {wch:15}];
+  XLSX.utils.book_append_sheet(wb, historyWs, 'History');
+  
  const dateStr = new Date().toISOString().split('T')[0];
  XLSX.writeFile(wb, `itam_assets_master_${dateStr}.xlsx`);
 }
@@ -200,6 +224,7 @@ export async function parseExcel(file: File): Promise<MasterAssetData> {
        const hwAssets: HardwareAsset[] = [];
        const swAssets: SoftwareAsset[] = [];
        const swUsers: SWUser[] = [];
+        const logs: HardwareLog[] = [];

        workbook.SheetNames.forEach(sheetName => {
          const worksheet = workbook.Sheets[sheetName];
@@ -314,9 +339,21 @@ export async function parseExcel(file: File): Promise<MasterAssetData> {
              });
            });
          }
+
+          if (sheetName === 'History') {
+            json.forEach(row => {
+              logs.push({
+                id: row['id'] ? String(row['id']) : Math.random().toString(36).substring(2, 9),
+                assetId: row['assetId'] ? String(row['assetId']) : '',
+                date: row['date'] || '',
+                details: row['details'] || '',
+                user: row['user'] || '',
+              });
+            });
+          }
        });

-        resolve({ hw: hwAssets, sw: swAssets, swUsers });
+        resolve({ hw: hwAssets, sw: swAssets, swUsers, logs });
      } catch (err) {
        reject(err);
      }
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,4 +1,4 @@
-import { createIcons, Download, Upload, FileSpreadsheet, Plus, X, LayoutDashboard, Monitor, Server, Database, Laptop, CalendarClock, Key, Cpu, Layers, Users, Paperclip, Edit2 } from 'lucide';
+import { createIcons, Download, Upload, FileSpreadsheet, Plus, X, LayoutDashboard, Monitor, Server, Database, Laptop, CalendarClock, Key, Cpu, Layers, Users, Paperclip, Edit2, History } from 'lucide';
 import { downloadTemplate, exportToExcel, parseExcel } from './excelHandler';
 import { state } from './state';
 import { initSidebar } from './components/Sidebar';
@@ -22,7 +22,7 @@ const btnExport = document.getElementById('btn-export-excel') as HTMLButtonEleme

 // Initialize Icons
 createIcons({
-  icons: { Download, Upload, FileSpreadsheet, Plus, X, LayoutDashboard, Monitor, Server, Database, Laptop, CalendarClock, Key, Cpu, Layers, Users, Paperclip, Edit2 }
+  icons: { Download, Upload, FileSpreadsheet, Plus, X, LayoutDashboard, Monitor, Server, Database, Laptop, CalendarClock, Key, Cpu, Layers, Users, Paperclip, Edit2, History }
 });

 // Initialize Components
--- a/src/state.ts
+++ b/src/state.ts
@@ -11,7 +11,10 @@ export interface AppState {

 // --- Initial State ---
 export const state: AppState = {
-  masterData: generateDummyData(),
+  masterData: {
+    ...generateDummyData(),
+    logs: [] // 초기 로그 배열 추가
+  },
  activeCategory: 'hw',
  activeSubTab: '대시보드',
  activeCharts: []
--- a/src/styles/common.css
+++ b/src/styles/common.css
@@ -304,59 +304,6 @@ tbody tr:hover { background-color: var(--bg-color); }
  text-align: center;
 }

-/* Modal */
-.modal-overlay {
-  position: fixed;
-  top: 0; left: 0; right: 0; bottom: 0;
-  background-color: rgba(0, 0, 0, 0.4);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1000;
-  opacity: 0;
-  visibility: hidden;
-  transition: opacity 0.2s ease, visibility 0.2s ease;
-}
-
-.modal-overlay:not(.hidden) { opacity: 1; visibility: visible; }
-.modal-content {
-  background-color: var(--white);
-  width: 100%; max-width: 600px;
-  border-radius: 8px;
-  overflow: hidden;
-  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
-  transform: translateY(20px);
-  transition: transform 0.2s ease;
-}
-.modal-overlay:not(.hidden) .modal-content { transform: translateY(0); }
-.modal-header {
-  background-color: var(--primary-color);
-  color: var(--white);
-  padding: 1rem 1.5rem;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-.modal-header h2 { font-size: 1.125rem; font-weight: 500; }
-.modal-body { padding: 1.5rem; }
-.grid-form { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
-.form-group { display: flex; flex-direction: column; gap: 0.375rem; }
-.form-group.full-width { grid-column: span 2; }
-.form-group label { font-size: 0.875rem; font-weight: 500; }
-.form-group input, .form-group textarea {
-  padding: 0.625rem;
-  border: 1px solid var(--border-color);
-  border-radius: 4px;
-  font-family: inherit; font-size: 0.875rem;
-  outline: none; transition: border-color 0.2s;
-}
-.form-group input:focus, .form-group textarea:focus { border-color: var(--primary-color); }
-.modal-footer {
-  padding: 1rem 1.5rem; border-top: 1px solid var(--border-color);
-  display: flex; justify-content: space-between; align-items: center;
-}
-.footer-actions { display: flex; gap: 0.5rem; }
-
 /* Search Filter Bar */
 .search-bar {
  display: flex;
@@ -416,4 +363,3 @@ tbody tr:hover { background-color: var(--bg-color); }
  font-size: 0.875rem;
  color: var(--text-muted);
 }
-
--- a/src/styles/modal.css
+++ b/src/styles/modal.css
@@ -0,0 +1,161 @@
+/* Modal */
+.modal-overlay {
+  position: fixed;
+  top: 0; left: 0; right: 0; bottom: 0;
+  background-color: rgba(0, 0, 0, 0.4);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.2s ease, visibility 0.2s ease;
+}
+
+.modal-overlay:not(.hidden) { opacity: 1; visibility: visible; }
+
+.modal-content {
+  background-color: var(--white);
+  width: 100%; max-width: 600px;
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
+  transform: translateY(20px);
+  transition: transform 0.2s ease;
+}
+
+.modal-overlay:not(.hidden) .modal-content { transform: translateY(0); }
+
+.modal-header {
+  background-color: var(--primary-color);
+  color: var(--white);
+  padding: 1rem 1.5rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.modal-header h2 { font-size: 1.125rem; font-weight: 500; }
+
+.modal-body { padding: 1.5rem; }
+
+.grid-form { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
+
+.form-group { display: flex; flex-direction: column; gap: 0.375rem; }
+
+.form-group.full-width { grid-column: span 2; }
+
+.form-group label { font-size: 0.875rem; font-weight: 500; }
+
+.form-group input, .form-group textarea {
+  padding: 0.625rem;
+  border: 1px solid var(--border-color);
+  border-radius: 4px;
+  font-family: inherit; font-size: 0.875rem;
+  outline: none; transition: border-color 0.2s;
+}
+
+.form-group input:focus, .form-group textarea:focus { border-color: var(--primary-color); }
+
+.modal-footer {
+  padding: 1rem 1.5rem; border-top: 1px solid var(--border-color);
+  display: flex; justify-content: space-between; align-items: center;
+}
+
+.footer-actions { display: flex; gap: 0.5rem; }
+
+/* Wide Modal for History */
+.modal-content.wide {
+  max-width: 950px;
+}
+
+.modal-body-split {
+  display: flex;
+  gap: 2rem;
+  min-height: 480px;
+}
+
+.modal-form-area {
+  flex: 1.2;
+}
+
+.modal-history-area {
+  flex: 0.8;
+  border-left: 1px solid var(--border-color);
+  padding-left: 1.5rem;
+  display: flex;
+  flex-direction: column;
+}
+
+.history-header {
+  margin-bottom: 1rem;
+}
+
+.history-header h3 {
+  font-size: 0.9375rem;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  color: var(--text-main);
+}
+
+.history-timeline {
+  flex: 1;
+  overflow-y: auto;
+  max-height: 500px;
+  padding-right: 0.5rem;
+}
+
+.history-item {
+  position: relative;
+  padding-left: 1.25rem;
+  padding-bottom: 1.5rem;
+  border-left: 2px solid var(--border-color);
+}
+
+.history-item::before {
+  content: '';
+  position: absolute;
+  left: -7px;
+  top: 0;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background-color: var(--white);
+  border: 2px solid var(--primary-color);
+}
+
+.history-item:last-child {
+  border-left: 2px solid transparent;
+}
+
+.history-date {
+  font-size: 0.75rem;
+  color: var(--text-muted);
+  font-weight: 500;
+  margin-bottom: 0.25rem;
+}
+
+.history-user {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--primary-color);
+  margin-bottom: 0.25rem;
+}
+
+.history-details {
+  font-size: 0.8125rem;
+  color: var(--text-main);
+  line-height: 1.4;
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+
+.empty-history {
+  padding: 2rem 0;
+  text-align: center;
+  color: var(--text-muted);
+  font-size: 0.8125rem;
+}
+
Author	SHA1	Message	Date
JooWangi	c14eff8278	feat: 개인 PC 수정 이력(Log) 시스템 구현 및 UI 개선	2026-04-14 17:22:06 +09:00
JooWangi	c83fa1cc5a	PC_Table view 및 스타일 추가	2026-04-14 16:13:54 +09:00