feat: migrate ServerPC data to asset_pc, enhance filters with location, and standardize page headers

- 서버PC 자산을 asset_pc 테이블로 통합 마이그레이션 및 스키마 확장 (위치, IP 정보 복구 완료)

- 하드웨어 자산 페이지의 구매법인 필터를 자산위치 필터로 교체 및 동적 데이터 바인딩 적용

- 모든 자산 리스트 페이지 상단에 설명(Description) 필드 추가 및 헤더 표준화

- 상세 모달 내 삭제 버튼 기능 구현 및 서버PC 용도 필드 노출 오류 수정

- 현 사용조직 필터 리스트가 비어있던 DOM 셀렉터 버그 수정

src/views/List/ServerListView.ts

@@ -1,42 +1,24 @@
 import { state } from '../../core/state';
 import { openHwModal } from '../../components/Modal/HWModal';
-import { formatInline, createBadge, sortAssets, dynamicSort, getActionButtonsHTML } from '../../core/utils';
+import { formatInline, sortAssets, dynamicSort, renderPageHeader } from '../../core/utils';
 import { ASSET_SCHEMA, UI_TEXT } from '../../core/schema';
 import { setupTableSorting, SortState } from '../../core/tableHandler';
-import { createIcons, RefreshCcw, Download, Upload, FileSpreadsheet, Plus } from 'lucide';
+import { renderFilterBar, applyCommonFilters } from '../../core/filterHandler';
+import { createIcons, RefreshCcw, Plus } from 'lucide';
 
-/**
- * 서버 자산 목록 뷰
- * 라인 정렬 보정 및 헤더 통일
- */
 export function renderServerList(container: HTMLElement) {
-  const fullList = sortAssets(state.masterData.server);
-  let sortState: SortState = { key: '', direction: 'asc' };
+  renderPageHeader(container, '서버');
+
+  // asset_server 데이터와 asset_pc 데이터 중 '서버PC' 유형만 추출하여 병합
+  const serverList = state.masterData.server || [];
+  const serverPcList = (state.masterData.pc || []).filter((a: any) => a.asset_type === '서버PC');
+  const fullList = sortAssets([...serverList, ...serverPcList]);
   
+  let sortState: SortState = { key: '', direction: 'asc' };
+  let currentFilters = { keyword: '', loc: '', dept: '', field: '' };
+
   const filterBar = document.createElement('div');
   filterBar.className = 'search-bar';
-  
-  const corps = Array.from(new Set(fullList.map(a => a[ASSET_SCHEMA.PURCHASE_CORP.key]))).filter(Boolean).sort();
-  const orgUnits = Array.from(new Set(fullList.map(a => a[ASSET_SCHEMA.CURRENT_DEPT.key]))).filter(Boolean).sort();
-
-  filterBar.innerHTML = `
-    <div class="search-item flex-1">
-      <label>통합 검색 (${ASSET_SCHEMA.CURRENT_DEPT.ui}/${ASSET_SCHEMA.MODEL_NAME.ui})</label>
-      <input type="text" id="filter-keyword" placeholder="검색어를 입력하세요..." autocomplete="off">
-    </div>
-    <div class="search-item">
-      <label>${ASSET_SCHEMA.PURCHASE_CORP.ui}</label>
-      <select id="filter-corp"><option value="">전체 법인</option>${corps.map(c => `<option value="${c}">${c}</option>`).join('')}</select>
-    </div>
-    <div class="search-item">
-      <label>${ASSET_SCHEMA.CURRENT_DEPT.ui}</label>
-      <select id="filter-org-unit"><option value="">전체 조직</option>${orgUnits.map(o => `<option value="${o}">${o}</option>`).join('')}</select>
-    </div>
-    <button id="btn-reset-filters" class="btn btn-outline btn-reset">
-      <i data-lucide="refresh-ccw"></i> ${UI_TEXT.ACTION.RESET_FILTER}
-    </button>
-    ${getActionButtonsHTML()}
-  `;
   container.appendChild(filterBar);
 
   const tableWrapper = document.createElement('div');
@@ -45,13 +27,11 @@ export function renderServerList(container: HTMLElement) {
   table.innerHTML = `
     <thead>
       <tr>
-        <th class="text-center" style="width:50px;">No</th>
         <th class="text-center" data-sort="${ASSET_SCHEMA.CURRENT_DEPT.key}">${ASSET_SCHEMA.CURRENT_DEPT.ui}</th>
         <th data-sort="${ASSET_SCHEMA.ASSET_PURPOSE.key}">${ASSET_SCHEMA.ASSET_PURPOSE.ui}</th>
-        <th data-sort="${ASSET_SCHEMA.MODEL_NAME.key}">${ASSET_SCHEMA.MODEL_NAME.ui}</th>
-        <th class="text-center" data-sort="${ASSET_SCHEMA.LOCATION.key}">${ASSET_SCHEMA.LOCATION.ui}(건물)</th>
-        <th class="text-center" data-sort="${ASSET_SCHEMA.LOC_DETAIL.key}">${ASSET_SCHEMA.LOC_DETAIL.ui}</th>
-        <th class="text-center" data-sort="${ASSET_SCHEMA.MEMO.key}">${ASSET_SCHEMA.MEMO.ui}</th>
+        <th style="width: 15%;" data-sort="${ASSET_SCHEMA.MODEL_NAME.key}">${ASSET_SCHEMA.MODEL_NAME.ui}</th>
+        <th class="text-center" data-sort="${ASSET_SCHEMA.LOCATION.key}">${ASSET_SCHEMA.LOCATION.ui}</th>
+        <th class="col-memo" style="width: 40%;" data-sort="${ASSET_SCHEMA.MEMO.key}">${ASSET_SCHEMA.MEMO.ui}</th>
       </tr>
     </thead>
     <tbody id="dynamic-tbody"></tbody>
@@ -62,23 +42,7 @@ export function renderServerList(container: HTMLElement) {
   const tbody = table.querySelector('tbody')!;
 
   const updateTable = () => {
-    const keywordInput = document.getElementById('filter-keyword') as HTMLInputElement;
-    const corpSelect = document.getElementById('filter-corp') as HTMLSelectElement;
-    const orgSelect = document.getElementById('filter-org-unit') as HTMLSelectElement;
-
-    const keyword = keywordInput ? keywordInput.value.toLowerCase().trim() : '';
-    const corp = corpSelect ? corpSelect.value : '';
-    const orgUnit = orgSelect ? orgSelect.value : '';
-
-    let filtered = fullList.filter(asset => {
-      const matchKeyword = !keyword || 
-        String(asset[ASSET_SCHEMA.CURRENT_DEPT.key]||'').toLowerCase().includes(keyword) || 
-        String(asset[ASSET_SCHEMA.MODEL_NAME.key]||'').toLowerCase().includes(keyword) ||
-        String(asset[ASSET_SCHEMA.ASSET_PURPOSE.key]||'').toLowerCase().includes(keyword);
-      const matchCorp = !corp || asset[ASSET_SCHEMA.PURCHASE_CORP.key] === corp;
-      const matchOrg = !orgUnit || asset[ASSET_SCHEMA.CURRENT_DEPT.key] === orgUnit;
-      return matchKeyword && matchCorp && matchOrg;
-    });
+    let filtered = applyCommonFilters(fullList, currentFilters, ['CURRENT_DEPT', 'MODEL_NAME', 'ASSET_PURPOSE']);
 
     if (sortState.key) {
       filtered = dynamicSort(filtered, sortState.key, sortState.direction);
@@ -86,7 +50,7 @@ export function renderServerList(container: HTMLElement) {
 
     tbody.innerHTML = '';
     if (filtered.length === 0) {
-      tbody.innerHTML = `<tr><td colspan="7" class="text-center" style="padding: 3rem; color: var(--text-muted);">${UI_TEXT.MESSAGES.NO_DATA}</td></tr>`;
+      tbody.innerHTML = `<tr><td colspan="5" class="text-center" style="padding: 3rem; color: var(--text-muted);">${UI_TEXT.MESSAGES.NO_DATA}</td></tr>`;
       return;
     }
 
@@ -94,14 +58,16 @@ export function renderServerList(container: HTMLElement) {
       const tr = document.createElement('tr');
       tr.style.cursor = 'pointer';
       
+      const loc = asset[ASSET_SCHEMA.LOCATION.key] || '';
+      const detail = asset[ASSET_SCHEMA.LOC_DETAIL.key] || '';
+      const displayLoc = detail ? `${loc}(${detail})` : (loc || '-');
+
       tr.innerHTML = `
-        <td class="text-center">${idx+1}</td>
         <td class="text-center">${asset[ASSET_SCHEMA.CURRENT_DEPT.key]||'-'}</td>
-        <td>${formatInline(asset[ASSET_SCHEMA.ASSET_PURPOSE.key])}</td>
+        <td>${formatInline(asset[ASSET_SCHEMA.ASSET_PURPOSE.key]||'-')}</td>
         <td>${formatInline(asset[ASSET_SCHEMA.MODEL_NAME.key]||asset[ASSET_SCHEMA.ASSET_NAME.key]||'-')}</td>
-        <td class="text-center">${formatInline(asset[ASSET_SCHEMA.LOCATION.key])}</td>
-        <td class="text-center">${formatInline(asset[ASSET_SCHEMA.LOC_DETAIL.key]||'-')}</td>
-        <td class="text-center">${formatInline(asset[ASSET_SCHEMA.MEMO.key]||'-')}</td>
+        <td class="text-center">${displayLoc}</td>
+        <td class="col-memo">${formatInline(asset[ASSET_SCHEMA.MEMO.key]||'-')}</td>
       `;
       tr.addEventListener('click', () => openHwModal(asset, 'view'));
       tbody.appendChild(tr);
@@ -111,18 +77,42 @@ export function renderServerList(container: HTMLElement) {
       sortState = { key, direction: dir };
       updateTable();
     });
+    createIcons({ icons: { RefreshCcw, Plus } });
   };
 
-  document.getElementById('filter-keyword')?.addEventListener('input', updateTable);
-  document.getElementById('filter-corp')?.addEventListener('change', updateTable);
-  document.getElementById('filter-org-unit')?.addEventListener('change', updateTable);
-  document.getElementById('btn-reset-filters')?.addEventListener('click', () => {
-    (document.getElementById('filter-keyword') as HTMLInputElement).value = '';
-    (document.getElementById('filter-corp') as HTMLSelectElement).value = '';
-    (document.getElementById('filter-org-unit') as HTMLSelectElement).value = '';
-    updateTable();
+  renderFilterBar(filterBar, {
+    keywordLabel: `통합 검색 (${ASSET_SCHEMA.CURRENT_DEPT.ui}/${ASSET_SCHEMA.MODEL_NAME.ui})`,
+    showLoc: true,
+    showDept: true,
+    onFilterChange: (filters) => {
+      currentFilters = filters;
+      updateTable();
+    }
   });
 
+  // Populate Location Options
+  const locSelect = container.querySelector('#filter-loc') as HTMLSelectElement;
+  if (locSelect) {
+    const locations = Array.from(new Set(fullList.map(a => a[ASSET_SCHEMA.LOCATION.key]))).filter(Boolean).sort();
+    locations.forEach(loc => {
+      const opt = document.createElement('option');
+      opt.value = String(loc);
+      opt.textContent = String(loc);
+      locSelect.appendChild(opt);
+    });
+  }
+
+  // Populate Dept Options
+  const deptSelect = container.querySelector('#filter-dept') as HTMLSelectElement;
+  if (deptSelect) {
+    const orgUnits = Array.from(new Set(fullList.map(a => a[ASSET_SCHEMA.CURRENT_DEPT.key]))).filter(Boolean).sort();
+    orgUnits.forEach(dept => {
+      const opt = document.createElement('option');
+      opt.value = dept;
+      opt.textContent = dept;
+      deptSelect.appendChild(opt);
+    });
+  }
+
   updateTable();
-  createIcons({ icons: { RefreshCcw, Download, Upload, FileSpreadsheet, Plus } });
 }