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/SwListView.ts

@@ -1,45 +1,22 @@
 import { state } from '../../core/state';
 import { openSwModal } from '../../components/Modal/SWModal';
-import { openSwUserModal } from '../../components/Modal/SWUserModal';
-import { sortAssets, dynamicSort, formatPrice, getActionButtonsHTML } from '../../core/utils';
+import { sortAssets, dynamicSort, formatInline, getActionButtonsHTML, renderPageHeader } from '../../core/utils';
 import { setupTableSorting, SortState } from '../../core/tableHandler';
 import { ASSET_SCHEMA } from '../../core/schema';
-import { CORP_LIST } from '../../components/Modal/SharedData';
-import { generateOptionsHTML } from '../../components/Modal/ModalUtils';
-import { createIcons, Edit2, Users, RefreshCcw, Download, Upload, FileSpreadsheet, Plus } from 'lucide';
+import { renderFilterBar, applyCommonFilters } from '../../core/filterHandler';
+import { createIcons, Edit2, Users, RefreshCcw, Plus } from 'lucide';
 
 export function renderSwList(container: HTMLElement) {
   const isInternal = state.activeSubTab === '내부';
+  renderPageHeader(container, isInternal ? '내부' : '외부');
+  
   const fullList = sortAssets(isInternal ? state.masterData.swInternal : state.masterData.swExternal);
   
   let sortState: SortState = { key: '', direction: 'asc' };
+  let currentFilters = { keyword: '', corp: '', dept: '', field: '' };
   
   const filterBar = document.createElement('div');
   filterBar.className = 'search-bar';
-  filterBar.innerHTML = `
-    <div class="search-item flex-1">
-      <label>통합 검색 (${ASSET_SCHEMA.PRODUCT_NAME.ui}/${ASSET_SCHEMA.CURRENT_DEPT.ui})</label>
-      <input type="text" id="filter-keyword" placeholder="검색어를 입력하세요..." autocomplete="off">
-    </div>
-    <div class="search-item">
-      <label>${ASSET_SCHEMA.SW_FIELD.ui}</label>
-      <select id="filter-field">
-        <option value="">전체 분야</option>
-        <option value="업무공통">업무공통</option>
-        <option value="개발S/W">개발S/W</option>
-        <option value="디자인">디자인</option>
-        <option value="설계S/W">설계S/W</option>
-      </select>
-    </div>
-    <div class="search-item">
-      <label>${ASSET_SCHEMA.PURCHASE_CORP.ui}</label>
-      <select id="filter-corp">${generateOptionsHTML(CORP_LIST, '', true)}</select>
-    </div>
-    <button id="btn-reset-filters" class="btn btn-outline btn-reset">
-      <i data-lucide="refresh-ccw"></i> 필터 초기화
-    </button>
-    ${getActionButtonsHTML()}
-  `;
   container.appendChild(filterBar);
 
   const tableWrapper = document.createElement('div');
@@ -50,12 +27,11 @@ export function renderSwList(container: HTMLElement) {
     table.innerHTML = `
       <thead>
         <tr>
-          <th style="text-align:center; width: 50px;">No.</th>
           <th style="text-align:center;" data-sort="${ASSET_SCHEMA.SW_FIELD.key}">${ASSET_SCHEMA.SW_FIELD.ui}</th>
           <th style="text-align:center;" data-sort="${ASSET_SCHEMA.DEV_OBJ.key}">${ASSET_SCHEMA.DEV_OBJ.ui}</th>
           <th style="text-align:center;" data-sort="${ASSET_SCHEMA.SW_STATUS.key}">${ASSET_SCHEMA.SW_STATUS.ui}</th>
           <th style="text-align:center;" data-sort="${ASSET_SCHEMA.SW_TYPE.key}">${ASSET_SCHEMA.SW_TYPE.ui}</th>
-          <th style="text-align:center;" data-sort="${ASSET_SCHEMA.MEMO.key}">${ASSET_SCHEMA.MEMO.ui}</th>
+          <th class="col-memo" data-sort="${ASSET_SCHEMA.MEMO.key}">${ASSET_SCHEMA.MEMO.ui}</th>
         </tr>
       </thead>
       <tbody id="dynamic-tbody"></tbody>
@@ -64,17 +40,17 @@ export function renderSwList(container: HTMLElement) {
     table.innerHTML = `
       <thead>
         <tr>
-          <th style="text-align:center; width: 50px;">No.</th>
           <th style="text-align:center;" data-sort="${ASSET_SCHEMA.PRODUCT_NAME.key}">자산명</th>
           <th style="text-align:center;" data-sort="${ASSET_SCHEMA.ASSET_TYPE.key}">유형</th>
           <th style="text-align:center;" data-sort="${ASSET_SCHEMA.SW_STATUS.key}">${ASSET_SCHEMA.SW_STATUS.ui}</th>
           <th style="text-align:center;" data-sort="${ASSET_SCHEMA.SW_FIELD.key}">${ASSET_SCHEMA.SW_FIELD.ui}</th>
           <th style="text-align:center;" data-sort="${ASSET_SCHEMA.CURRENT_DEPT.key}">${ASSET_SCHEMA.CURRENT_DEPT.ui}</th>
-          <th style="text-align:center;">현 사용자</th>
+          <th style="text-align:center;">${ASSET_SCHEMA.CURRENT_USER.ui}</th>
+          <th style="text-align:center;">${ASSET_SCHEMA.PREV_USER.ui}</th>
           <th style="text-align:center;" data-sort="${ASSET_SCHEMA.PURCHASE_DATE.key}">구매연월</th>
           <th style="text-align:center;">시작일</th>
-          <th style="text-align:center;" data-sort="${ASSET_SCHEMA.EXPIRY_DATE.key}">만료일</th>
-          <th style="text-align:center;" data-sort="${ASSET_SCHEMA.MEMO.key}">${ASSET_SCHEMA.MEMO.ui}</th>
+          <th style="text-align:center;" data-sort="${ASSET_SCHEMA.EXPIRED_DATE.key}">만료일</th>
+          <th class="col-memo" data-sort="${ASSET_SCHEMA.MEMO.key}">${ASSET_SCHEMA.MEMO.ui}</th>
         </tr>
       </thead>
       <tbody id="dynamic-tbody"></tbody>
@@ -86,22 +62,7 @@ export function renderSwList(container: HTMLElement) {
   const tbody = table.querySelector('tbody')!;
 
   const updateTable = () => {
-    const keywordInput = document.getElementById('filter-keyword') as HTMLInputElement;
-    const fieldSelect = document.getElementById('filter-field') as HTMLSelectElement;
-    const corpSelect = document.getElementById('filter-corp') as HTMLSelectElement;
-
-    const keyword = keywordInput ? keywordInput.value.toLowerCase().trim() : '';
-    const field = fieldSelect ? fieldSelect.value : '';
-    const corp = corpSelect ? corpSelect.value : '';
-
-    let filtered = fullList.filter(asset => {
-      const matchKeyword = !keyword || 
-        (asset[ASSET_SCHEMA.PRODUCT_NAME.key] || '').toLowerCase().includes(keyword) || 
-        (asset[ASSET_SCHEMA.CURRENT_DEPT.key] || '').toLowerCase().includes(keyword);
-      const matchField = !field || asset[ASSET_SCHEMA.SW_FIELD.key] === field;
-      const matchCorp = !corp || asset[ASSET_SCHEMA.PURCHASE_CORP.key] === corp;
-      return matchKeyword && matchField && matchCorp;
-    });
+    let filtered = applyCommonFilters(fullList, currentFilters, ['PRODUCT_NAME', 'CURRENT_USER', 'CURRENT_DEPT']);
 
     if (sortState.key) {
       filtered = dynamicSort(filtered, sortState.key, sortState.direction);
@@ -109,7 +70,7 @@ export function renderSwList(container: HTMLElement) {
 
     tbody.innerHTML = '';
     if (filtered.length === 0) {
-      tbody.innerHTML = `<tr><td colspan="${isInternal ? 6 : 11}" style="text-align:center; padding: 3rem; color: var(--text-muted);">검색 결과가 없습니다.</td></tr>`;
+      tbody.innerHTML = `<tr><td colspan="${isInternal ? 5 : 11}" style="text-align:center; padding: 3rem; color: var(--text-muted);">검색 결과가 없습니다.</td></tr>`;
       return;
     }
 
@@ -118,33 +79,30 @@ export function renderSwList(container: HTMLElement) {
         const tr = document.createElement('tr');
         tr.style.cursor = 'pointer';
         tr.innerHTML = `
-          <td style="text-align:center;">${idx+1}</td>
           <td style="text-align:center;">${asset[ASSET_SCHEMA.SW_FIELD.key]||''}</td>
           <td style="text-align:center;">${asset[ASSET_SCHEMA.DEV_OBJ.key]||''}</td>
           <td style="text-align:center;">${asset[ASSET_SCHEMA.SW_STATUS.key]||'보유중'}</td>
           <td style="text-align:center;">${asset[ASSET_SCHEMA.SW_TYPE.key]||'내부'}</td>
-          <td>${formatInline(asset[ASSET_SCHEMA.MEMO.key]||'-')}</td>
+          <td class="col-memo">${formatInline(asset[ASSET_SCHEMA.MEMO.key]||'-')}</td>
         `;
         tr.addEventListener('click', () => openSwModal(asset, 'view'));
         tbody.appendChild(tr);
       } else {
         const tr = document.createElement('tr');
         tr.style.cursor = 'pointer';
-        const users = state.masterData.swUsers.filter(u => u.sw_id === asset.id);
-        const userText = users.length > 0 ? `${users[0].user_name}${users.length > 1 ? ' 외 ' + (users.length - 1) : ''}` : '-';
-
+        
         tr.innerHTML = `
-          <td style="text-align:center;">${idx+1}</td>
           <td>${asset[ASSET_SCHEMA.PRODUCT_NAME.key]||''}</td>
           <td style="text-align:center;">${asset[ASSET_SCHEMA.ASSET_TYPE.key]||'외부'}</td>
           <td style="text-align:center;">${asset[ASSET_SCHEMA.SW_STATUS.key]||'사용중'}</td>
           <td style="text-align:center;">${asset[ASSET_SCHEMA.SW_FIELD.key]||''}</td>
           <td style="text-align:center;">${asset[ASSET_SCHEMA.CURRENT_DEPT.key]||''}</td>
-          <td style="text-align:center;">${userText}</td>
+          <td style="text-align:center;">${asset[ASSET_SCHEMA.CURRENT_USER.key]||'-'}</td>
+          <td style="text-align:center;">${asset[ASSET_SCHEMA.PREV_USER.key]||'-'}</td>
           <td style="text-align:center;">${asset[ASSET_SCHEMA.PURCHASE_DATE.key]||''}</td>
           <td style="text-align:center;">${asset[ASSET_SCHEMA.PURCHASE_DATE.key]||''}</td>
-          <td style="text-align:center;">${asset[ASSET_SCHEMA.EXPIRY_DATE.key]||''}</td>
-          <td>${formatInline(asset[ASSET_SCHEMA.MEMO.key]||'-')}</td>
+          <td style="text-align:center;">${asset[ASSET_SCHEMA.EXPIRED_DATE.key]||''}</td>
+          <td class="col-memo">${formatInline(asset[ASSET_SCHEMA.MEMO.key]||'-')}</td>
         `;
         tr.addEventListener('click', () => openSwModal(asset, 'view'));
         tbody.appendChild(tr);
@@ -156,18 +114,32 @@ export function renderSwList(container: HTMLElement) {
       updateTable();
     });
 
-    createIcons({ icons: { Edit2, Users, RefreshCcw, Download, Upload, FileSpreadsheet, Plus } });
+    createIcons({ icons: { Edit2, Users, RefreshCcw, Plus } });
   };
 
-  document.getElementById('filter-keyword')?.addEventListener('input', updateTable);
-  document.getElementById('filter-field')?.addEventListener('change', updateTable);
-  document.getElementById('filter-corp')?.addEventListener('change', updateTable);
-  document.getElementById('btn-reset-filters')?.addEventListener('click', () => {
-    (document.getElementById('filter-keyword') as HTMLInputElement).value = '';
-    (document.getElementById('filter-field') as HTMLSelectElement).value = '';
-    (document.getElementById('filter-corp') as HTMLSelectElement).value = '';
-    updateTable();
+  renderFilterBar(filterBar, {
+    keywordLabel: `통합 검색 (${ASSET_SCHEMA.PRODUCT_NAME.ui}/${ASSET_SCHEMA.CURRENT_DEPT.ui})`,
+    showField: true,
+    showCorp: true,
+    showDept: true,
+    onFilterChange: (filters) => {
+      currentFilters = filters;
+      updateTable();
+    }
   });
 
+  // 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 = String(dept);
+      opt.textContent = String(dept);
+      deptSelect.appendChild(opt);
+    });
+  }
+
   updateTable();
 }
+