feat: update server asset details, ui labels, and excel mapping logic

주요 변경 사항:
- 리스트 보안 강화: 서버 자산 리스트에서 IP 주소 및 원격접속 컬럼 제거 (상세 모달에서만 노출)
- 보안 배지 가독성 개선: 상세 모달 내 개별 필드 배지를 '네트워크 정보' 섹션 타이틀 옆으로 통합 이동
- 위치 정보 포맷팅: 서버 리스트 내 '서관/동관' 시작 위치에 'IDC' 접두사 자동 추가 (예: IDC(서관 204번))
- 모달 시스템 복구: 이벤트 위임 방식을 통한 전역 ESC 키 및 닫기 버튼 기능 완벽 복구
- 안정성 확보: BaseModal 초기화 로직 보완 및 동적 DOM 요소 대응 강화

src/components/Modal/BaseModal.ts

@@ -4,7 +4,9 @@
 export function initBaseModal() {
   const closeAllModals = () => {
     const modals = document.querySelectorAll('.modal-overlay');
-    modals.forEach(modal => modal.classList.add('hidden'));
+    modals.forEach(modal => {
+      modal.classList.add('hidden');
+    });
   };
 
   // ESC 키로 닫기
@@ -12,12 +14,21 @@ export function initBaseModal() {
     if (e.key === 'Escape') closeAllModals();
   });
 
-  // 배경(Overlay) 클릭 시 닫기 (동적 생성된 모달 대응을 위해 이벤트 위임 고려 가능하나 일단 단순 구현)
+  // 배경(Overlay) 및 닫기 버튼 클릭 시 닫기 (이벤트 위임)
   document.addEventListener('click', (e) => {
     const target = e.target as HTMLElement;
+    
+    // 1. 오버레이 클릭 시 닫기
     if (target.classList.contains('modal-overlay')) {
       closeAllModals();
     }
+    
+    // 2. 닫기 아이콘(data-lucide="x") 또는 닫기/취소 버튼 클릭 시 닫기
+    // 버튼 ID가 btn-close- 또는 btn-cancel-로 시작하는 경우 대응
+    const btn = target.closest('button');
+    if (btn && (btn.id.startsWith('btn-close-') || btn.id.startsWith('btn-cancel-'))) {
+      closeAllModals();
+    }
   });
 
   return { closeAllModals };

src/components/Modal/HWModal.ts

@@ -21,13 +21,25 @@ const HW_MODAL_HTML = `
           <!-- Group 1: 기본 정보 -->
           <div class="form-section-title">기본 정보 (Identity)</div>
           <div class="form-group">
-            <label for="hw-법인">법인</label>
+            <label for="hw-법인">구매법인</label>
             <input type="text" id="hw-법인" required />
           </div>
           <div class="form-group">
             <label for="hw-자산코드">자산번호/코드</label>
             <input type="text" id="hw-자산코드" required />
           </div>
+          <div class="form-group">
+            <label for="hw-구매일">구매일자</label>
+            <input type="text" id="hw-구매일" />
+          </div>
+          <div class="form-group">
+            <label for="hw-현사용조직">현 사용조직</label>
+            <input type="text" id="hw-현사용조직" />
+          </div>
+          <div class="form-group">
+            <label for="hw-이전사용조직">이전 사용조직</label>
+            <input type="text" id="hw-이전사용조직" />
+          </div>
           <div class="form-group server-only">
             <label for="hw-용도">용도</label>
             <input type="text" id="hw-용도" />
@@ -46,7 +58,7 @@ const HW_MODAL_HTML = `
           </div>
 
           <!-- Group 2: 네트워크 정보 -->
-          <div class="form-section-title server-only">네트워크 정보 (Connectivity)</div>
+          <div class="form-section-title server-only">네트워크 정보 (Connectivity) <span class="badge-security" style="margin-left: 0.5rem;">보안 정보</span></div>
           <div class="form-group server-only">
             <label for="hw-IP주소">IP 주소 1</label>
             <input type="text" id="hw-IP주소" />
@@ -56,7 +68,7 @@ const HW_MODAL_HTML = `
             <input type="text" id="hw-IP2" />
           </div>
           <div class="form-group server-only">
-            <label for="hw-원격접속">원격 도구 (Anydesk/Chrome 등)</label>
+            <label for="hw-원격접속">원격 도구</label>
             <input type="text" id="hw-원격접속" />
           </div>
           <div class="form-group server-only">
@@ -183,12 +195,15 @@ function fillHwFormData(asset: HardwareAsset) {
   (document.getElementById('hw-법인') as HTMLInputElement).value = asset.법인;
   (document.getElementById('hw-자산코드') as HTMLInputElement).value = asset.자산코드;
   (document.getElementById('hw-위치') as HTMLInputElement).value = asset.위치;
+  (document.getElementById('hw-현사용조직') as HTMLInputElement).value = asset.현사용조직 || '';
+  (document.getElementById('hw-이전사용조직') as HTMLInputElement).value = asset.이전사용조직 || '';
   (document.getElementById('hw-모델명') as HTMLInputElement).value = asset.모델명 || '';
   (document.getElementById('hw-OS') as HTMLInputElement).value = asset.OS || '';
   (document.getElementById('hw-CPU') as HTMLInputElement).value = asset.CPU || '';
   (document.getElementById('hw-RAM') as HTMLInputElement).value = asset.RAM || '';
   (document.getElementById('hw-SSD1') as HTMLInputElement).value = asset.SSD1 || '';
   (document.getElementById('hw-SSD2') as HTMLInputElement).value = asset.SSD2 || '';
+  (document.getElementById('hw-구매일') as HTMLInputElement).value = asset.구매일 || '';
   (document.getElementById('hw-담당자_정') as HTMLInputElement).value = asset.담당자_정 || asset.관리자 || '';
   (document.getElementById('hw-담당자_부') as HTMLInputElement).value = asset.담당자_부 || '';
   (document.getElementById('hw-품의서명') as HTMLElement).textContent = asset.품의서명 || '';
@@ -283,12 +298,15 @@ export function initHwModal() {
       법인: (document.getElementById('hw-법인') as HTMLInputElement).value,
       자산코드: (document.getElementById('hw-자산코드') as HTMLInputElement).value,
       위치: (document.getElementById('hw-위치') as HTMLInputElement).value,
+      현사용조직: (document.getElementById('hw-현사용조직') as HTMLInputElement).value,
+      이전사용조직: (document.getElementById('hw-이전사용조직') as HTMLInputElement).value,
       모델명: (document.getElementById('hw-모델명') as HTMLInputElement).value,
       OS: (document.getElementById('hw-OS') as HTMLInputElement).value,
       CPU: (document.getElementById('hw-CPU') as HTMLInputElement).value,
       RAM: (document.getElementById('hw-RAM') as HTMLInputElement).value,
       SSD1: (document.getElementById('hw-SSD1') as HTMLInputElement).value,
       SSD2: (document.getElementById('hw-SSD2') as HTMLInputElement).value,
+      구매일: (document.getElementById('hw-구매일') as HTMLInputElement).value,
       담당자_정: (document.getElementById('hw-담당자_정') as HTMLInputElement).value,
       관리자: (document.getElementById('hw-담당자_정') as HTMLInputElement).value,
       담당자_부: (document.getElementById('hw-담당자_부') as HTMLInputElement).value,

src/core/excelHandler.ts

@@ -38,6 +38,8 @@ export interface HardwareAsset {
   서버PW?: string;
   모니터링?: string;
   비고?: string;
+  현사용조직?: string;
+  이전사용조직?: string;
 }
 
 
@@ -90,7 +92,7 @@ const SW_TABS = ['구독SW', '영구SW'];
 
 const HW_HEADERS = ['법인', '자산코드', '명칭', '위치', '관리자', 'IP주소', 'MACaddress', 'HW사양', 'OS', '구매일', '금액', '납품업체', '품의서명'];
 const PC_HEADERS = ['법인', '자산코드', '사용자', '위치', 'CPU', 'GPU', 'RAM', 'SSD1', 'SSD2', 'HDD1', 'HDD2', '구매일', '금액', '납품업체', '품의서명'];
-const SERVER_HEADERS = ['법인', '자산번호', '유형', '용도', '설치위치', '담당자(정)', '담당자(부)', 'IP 주소', '원격접속', '모델명', 'OS', 'CPU', 'RAM', 'GPU', 'Storage1', 'Storage2', 'Storage3', '모니터링', '비고'];
+const SERVER_HEADERS = ['구매법인', '자산번호', '구매일자', '용도', '상세내용', '현 사용조직', '이전 사용조직', '설치위치', '담당자(정)', '담당자(부)', 'IP 주소 1', 'IP 주소 2', '원격도구', '서버 ID', '서버 PW', '모델명', 'OS', 'CPU', 'RAM', 'SSD1', 'SSD2', '모니터링', '비고'];
 const STORAGE_HEADERS = ['법인', '유형', '자산코드', '명칭', '위치', '모델명', '용량', '담당자(정)', '담당자(부)', 'IP주소', 'MAC주소', '구매일', '금액', '납품업체', '품의서명'];
 const SUB_SW_HEADERS = ['ID', '분야', '법인', '부서', '제품명', '구매일', '구독일', '금액', '수량', '계정명', '납품업체', '비고'];
 const PERM_SW_HEADERS = ['ID', '분야', '법인', '부서', '제품명', '구매일', '유지보수여부', '금액', '수량', '계정명', '납품업체', '비고'];
@@ -112,7 +114,7 @@ export function downloadTemplate() {
       wscols = [{wch:15}, {wch:25}, {wch:15}, {wch:20}, {wch:20}, {wch:20}, {wch:15}, {wch:15}, {wch:15}, {wch:15}, {wch:15}, {wch:15}, {wch:15}, {wch:20}, {wch:25}];
     } else if (tab === '서버') {
       hd = SERVER_HEADERS;
-      wscols = [{wch:15}, {wch:20}, {wch:15}, {wch:25}, {wch:20}, {wch:15}, {wch:15}, {wch:20}, {wch:20}, {wch:25}, {wch:20}, {wch:15}, {wch:15}, {wch:15}, {wch:15}, {wch:15}, {wch:15}, {wch:15}, {wch:30}];
+      wscols = [{wch:15}, {wch:20}, {wch:15}, {wch:25}, {wch:30}, {wch:20}, {wch:20}, {wch:20}, {wch:15}, {wch:15}, {wch:20}, {wch:20}, {wch:20}, {wch:20}, {wch:20}, {wch:25}, {wch:20}, {wch:15}, {wch:15}, {wch:15}, {wch:15}, {wch:15}, {wch:30}];
     } else if (tab === '스토리지') {
       hd = STORAGE_HEADERS;
       wscols = [{wch:15}, {wch:15}, {wch:25}, {wch:25}, {wch:20}, {wch:25}, {wch:15}, {wch:15}, {wch:15}, {wch:15}, {wch:20}, {wch:15}, {wch:15}, {wch:20}, {wch:25}];
@@ -164,9 +166,13 @@ export function exportToExcel(masterData: MasterAssetData) {
     } else if (tab === '서버') {
       wsData = [
         SERVER_HEADERS,
-        ...targetAssets.map(a => [a.법인, a.자산코드, a.storage유형 || '물리', a.용도 || '', a.위치, a.담당자_정 || '', a.담당자_부 || '', a.IP주소, a.원격접속 || '', a.모델명 || '', a.OS, a.CPU, a.RAM, a.GPU || '', a.SSD1 || '', a.SSD2 || '', a.HDD1 || '', a.모니터링 || '', a.비고 || ''])
+        ...targetAssets.map(a => [
+          a.법인, a.자산코드, a.구매일 || '', a.용도 || '', a.상세 || '', a.현사용조직 || '', a.이전사용조직 || '',
+          a.위치, a.담당자_정 || '', a.담당자_부 || '', a.IP주소, (a as any).IP2 || '', a.원격접속 || '', 
+          (a as any).서버ID || '', (a as any).서버PW || '', a.모델명 || '', a.OS, a.CPU, a.RAM, a.SSD1 || '', a.SSD2 || '', a.모니터링 || '', a.비고 || ''
+        ])
       ];
-      colsConfig = [{wch:15}, {wch:20}, {wch:15}, {wch:25}, {wch:20}, {wch:15}, {wch:15}, {wch:20}, {wch:20}, {wch:25}, {wch:20}, {wch:15}, {wch:15}, {wch:15}, {wch:15}, {wch:15}, {wch:15}, {wch:15}, {wch:30}];
+      colsConfig = [{wch:15}, {wch:20}, {wch:15}, {wch:25}, {wch:30}, {wch:20}, {wch:20}, {wch:20}, {wch:15}, {wch:15}, {wch:20}, {wch:20}, {wch:20}, {wch:20}, {wch:20}, {wch:25}, {wch:20}, {wch:15}, {wch:15}, {wch:15}, {wch:15}, {wch:15}, {wch:30}];
     } else if (tab === '스토리지') {
       wsData = [
         STORAGE_HEADERS,
@@ -262,18 +268,27 @@ export async function parseExcel(file: File): Promise<MasterAssetData> {
                 hwAssets.push({
                   id: Math.random().toString(36).substring(2, 9),
                   type: sheetName,
-                  법인: row['법인'] || '',
+                  법인: row['구매법인'] || row['법인'] || '',
                   자산코드: row['자산번호'] || row['자산코드'] || '',
                   명칭: row['용도'] || row['명칭'] || '',
-                  용도: row['용도'] || '', 위치: row['설치위치'] || row['위치'] || '',
+                  구매일: row['구매일자'] || row['구매일'] || '',
+                  용도: row['용도'] || '', 
+                  상세: row['상세내용'] || row['상세'] || '',
+                  현사용조직: row['현 사용조직'] || '',
+                  이전사용조직: row['이전 사용조직'] || '',
+                  위치: row['설치위치'] || row['위치'] || '',
                   관리자: row['담당자(정)'] || '', 담당자_정: row['담당자(정)'] || '', 담당자_부: row['담당자(부)'] || '',
-                  IP주소: row['IP 주소'] || row['IP주소'] || '', IP2: row['IP2'] || '',
+                  IP주소: row['IP 주소 1'] || row['IP 주소'] || row['IP주소'] || '', 
-                  원격접속: row['원격접속'] || '', 서버ID: row['서버ID'] || '', 서버PW: row['서버PW'] || '',
+                  IP2: row['IP 주소 2'] || row['IP2'] || '',
+                  원격접속: row['원격도구'] || row['원격접속'] || '', 
+                  서버ID: row['서버 ID'] || row['서버ID'] || '', 
+                  서버PW: row['서버 PW'] || row['서버PW'] || '',
                   모델명: row['모델명'] || '', OS: row['OS'] || '',
-                  CPU: row['CPU'] || '', RAM: row['RAM'] || '', GPU: row['GPU'] || '',
+                  CPU: row['CPU'] || '', RAM: row['RAM'] || '', 
-                  SSD1: row['Storage1'] || row['SSD1'] || '', SSD2: row['Storage2'] || row['SSD2'] || '', HDD1: row['Storage3'] || row['HDD1'] || '',
+                  SSD1: row['SSD1'] || row['Storage1'] || '', 
-                  모니터링: row['모니터링'] || '', 비고: row['비고'] || '', storage유형: row['유형'] || '물리',
+                  SSD2: row['SSD2'] || row['Storage2'] || '', 
-                  MACaddress: '', HW사양: '', 구매일: '', 금액: '', 납품업체: '', 품의서명: '',
+                  모니터링: row['모니터링'] || '', 비고: row['비고'] || '', storage유형: '물리',
+                  MACaddress: '', HW사양: '', 금액: '', 납품업체: '', 품의서명: '',
                 });
               } else if (sheetName === '스토리지') {
                 hwAssets.push({

src/core/realServerData.ts

@@ -609,7 +609,7 @@ export const realServerData = [
     "SSD2": ""
   },
   {
-    "법인": "기술개발센터",
+    "법인": "",
     "자산코드": "",
     "storage유형": "NAS",
     "용도": "GSIM NAS",
@@ -629,7 +629,7 @@ export const realServerData = [
     "SSD2": ""
   },
   {
-    "법인": "기술개발센터",
+    "법인": "",
     "자산코드": "",
     "storage유형": "NAS",
     "용도": "그래픽스개발팀 데이터 백업 NAS",
@@ -649,7 +649,7 @@ export const realServerData = [
     "SSD2": ""
   },
   {
-    "법인": "기술개발센터",
+    "법인": "",
     "자산코드": "",
     "storage유형": "PC",
     "용도": "공통 GIT 서버",
@@ -669,7 +669,7 @@ export const realServerData = [
     "SSD2": "1TB"
   },
   {
-    "법인": "기술개발센터",
+    "법인": "",
     "자산코드": "",
     "storage유형": "PC",
     "용도": "BUILD 서버",
@@ -689,7 +689,7 @@ export const realServerData = [
     "SSD2": "10TB"
   },
   {
-    "법인": "기술개발센터",
+    "법인": "",
     "자산코드": "",
     "storage유형": "PC",
     "용도": "HmEG 테스트 서버",
@@ -709,7 +709,7 @@ export const realServerData = [
     "SSD2": "1TB"
   },
   {
-    "법인": "기술개발센터",
+    "법인": "",
     "자산코드": "",
     "storage유형": "PC",
     "용도": "산하 ERP 개발서버",
@@ -729,7 +729,7 @@ export const realServerData = [
     "SSD2": ""
   },
   {
-    "법인": "기술개발센터",
+    "법인": "",
     "자산코드": "",
     "storage유형": "PC",
     "용도": "공간정보 신청",
@@ -749,7 +749,7 @@ export const realServerData = [
     "SSD2": "931GB"
   },
   {
-    "법인": "기술개발센터",
+    "법인": "",
     "자산코드": "",
     "storage유형": "PC",
     "용도": "AI 관련",
@@ -769,7 +769,7 @@ export const realServerData = [
     "SSD2": ""
   },
   {
-    "법인": "기술개발센터",
+    "법인": "",
     "자산코드": "",
     "storage유형": "PC",
     "용도": "한종 테스트",
@@ -789,7 +789,7 @@ export const realServerData = [
     "SSD2": ""
   },
   {
-    "법인": "기술개발센터",
+    "법인": "",
     "자산코드": "",
     "storage유형": "PC",
     "용도": "GSIM 언리얼 서버",
@@ -809,7 +809,7 @@ export const realServerData = [
     "SSD2": "8TB"
   },
   {
-    "법인": "기술개발센터",
+    "법인": "",
     "자산코드": "",
     "storage유형": "PC",
     "용도": "AutoCAD 테스트 서버",
@@ -829,7 +829,7 @@ export const realServerData = [
     "SSD2": "2TB"
   },
   {
-    "법인": "기술개발센터",
+    "법인": "",
     "자산코드": "",
     "storage유형": "PC",
     "용도": "GSIM 테스트 서버",
@@ -849,7 +849,7 @@ export const realServerData = [
     "SSD2": "512GB"
   },
   {
-    "법인": "기술개발센터",
+    "법인": "",
     "자산코드": "",
     "storage유형": "PC",
     "용도": "공간데이터 서버",
@@ -869,7 +869,7 @@ export const realServerData = [
     "SSD2": "8 TB"
   },
   {
-    "법인": "기술개발센터",
+    "법인": "",
     "자산코드": "",
     "storage유형": "PC",
     "용도": "가평 VM 원격 서버",
@@ -889,7 +889,7 @@ export const realServerData = [
     "SSD2": ""
   },
   {
-    "법인": "기술개발센터",
+    "법인": "",
     "자산코드": "",
     "storage유형": "서버",
     "용도": "GSIM 협업",
@@ -909,7 +909,7 @@ export const realServerData = [
     "SSD2": "1.88TB"
   },
   {
-    "법인": "기술개발센터",
+    "법인": "",
     "자산코드": "",
     "storage유형": "스토리지",
     "용도": "GSIM 협업 스토리지",
@@ -929,7 +929,7 @@ export const realServerData = [
     "SSD2": ""
   },
   {
-    "법인": "기술개발센터",
+    "법인": "",
     "자산코드": "",
     "storage유형": "서버",
     "용도": "GSIM META 서버",
@@ -949,7 +949,7 @@ export const realServerData = [
     "SSD2": "4TB"
   },
   {
-    "법인": "기술개발센터",
+    "법인": "",
     "자산코드": "",
     "storage유형": "서버",
     "용도": "GSIM 서버",
@@ -969,7 +969,7 @@ export const realServerData = [
     "SSD2": "4TB"
   },
   {
-    "법인": "기술개발센터",
+    "법인": "",
     "자산코드": "",
     "storage유형": "스토리지",
     "용도": "GSIM 스토리지",
@@ -989,7 +989,7 @@ export const realServerData = [
     "SSD2": ""
   },
   {
-    "법인": "기술개발센터",
+    "법인": "",
     "자산코드": "",
     "storage유형": "서버",
     "용도": "함양-합천 서버",
@@ -1009,7 +1009,7 @@ export const realServerData = [
     "SSD2": "10TB"
   },
   {
-    "법인": "기술개발센터",
+    "법인": "",
     "자산코드": "",
     "storage유형": "서버",
     "용도": "HM MapService 2.0 서버",
@@ -1029,7 +1029,7 @@ export const realServerData = [
     "SSD2": "40 TB"
   },
   {
-    "법인": "기술개발센터",
+    "법인": "",
     "자산코드": "",
     "storage유형": "스토리지",
     "용도": "HM MapService 2.0 스토리지",
@@ -1049,7 +1049,7 @@ export const realServerData = [
     "SSD2": ""
   },
   {
-    "법인": "기술개발센터",
+    "법인": "",
     "자산코드": "",
     "storage유형": "서버",
     "용도": "Gitlab Runner",
@@ -1069,7 +1069,7 @@ export const realServerData = [
     "SSD2": ""
   },
   {
-    "법인": "기술개발센터",
+    "법인": "",
     "자산코드": "",
     "storage유형": "서버",
     "용도": "전산모사",
@@ -1089,7 +1089,7 @@ export const realServerData = [
     "SSD2": ""
   },
   {
-    "법인": "한맥빌딩",
+    "법인": "",
     "자산코드": "1",
     "storage유형": "NAS",
     "용도": "NAS 2",
@@ -1105,7 +1105,7 @@ export const realServerData = [
     "SSD2": ""
   },
   {
-    "법인": "한맥빌딩",
+    "법인": "",
     "자산코드": "2",
     "storage유형": "NAS",
     "용도": "NAS 1",
@@ -1121,7 +1121,7 @@ export const realServerData = [
     "SSD2": ""
   },
   {
-    "법인": "한맥빌딩",
+    "법인": "",
     "자산코드": "3",
     "storage유형": "NAS",
     "용도": "NAS 4",
@@ -1137,7 +1137,7 @@ export const realServerData = [
     "SSD2": ""
   },
   {
-    "법인": "한맥빌딩",
+    "법인": "",
     "자산코드": "4",
     "storage유형": "NAS",
     "용도": "NAS 5",
@@ -1153,7 +1153,7 @@ export const realServerData = [
     "SSD2": ""
   },
   {
-    "법인": "한맥빌딩",
+    "법인": "",
     "자산코드": "5",
     "storage유형": "NAS",
     "용도": "NAS 6",
@@ -1169,7 +1169,7 @@ export const realServerData = [
     "SSD2": ""
   },
   {
-    "법인": "한맥빌딩",
+    "법인": "",
     "자산코드": "6",
     "storage유형": "NAS",
     "용도": "NAS7",
@@ -1185,7 +1185,7 @@ export const realServerData = [
     "SSD2": ""
   },
   {
-    "법인": "한맥빌딩",
+    "법인": "",
     "자산코드": "7",
     "storage유형": "NAS",
     "용도": "총괄기획실 NAS",
@@ -1201,7 +1201,7 @@ export const realServerData = [
     "SSD2": ""
   },
   {
-    "법인": "한맥빌딩",
+    "법인": "",
     "자산코드": "8",
     "storage유형": "NAS",
     "용도": "한맥 NAS 1",
@@ -1217,7 +1217,7 @@ export const realServerData = [
     "SSD2": ""
   },
   {
-    "법인": "한맥빌딩",
+    "법인": "",
     "자산코드": "9",
     "storage유형": "NAS",
     "용도": "한맥 NAS 2",
@@ -1233,7 +1233,7 @@ export const realServerData = [
     "SSD2": ""
   },
   {
-    "법인": "한맥빌딩",
+    "법인": "",
     "자산코드": "10",
     "storage유형": "NAS",
     "용도": "한맥 NAS 3",
@@ -1249,7 +1249,7 @@ export const realServerData = [
     "SSD2": ""
   },
   {
-    "법인": "한맥빌딩",
+    "법인": "",
     "자산코드": "11",
     "storage유형": "NAS",
     "용도": "NAS 13",
@@ -1265,7 +1265,7 @@ export const realServerData = [
     "SSD2": ""
   },
   {
-    "법인": "한맥빌딩",
+    "법인": "",
     "자산코드": "12",
     "storage유형": "PC",
     "용도": "회계",
@@ -1281,7 +1281,7 @@ export const realServerData = [
     "SSD2": ""
   },
   {
-    "법인": "한맥빌딩",
+    "법인": "",
     "자산코드": "13",
     "storage유형": "PC",
     "용도": "한맥CAD",
@@ -1297,9 +1297,9 @@ export const realServerData = [
     "SSD2": ""
   },
   {
-    "법인": "한맥빌딩",
+    "법인": "",
     "자산코드": "14",
-    "storage유형": "서버(타워)",
+    "storage유형": "PC",
     "용도": "Ai-Cell-Util",
     "상세": "깃티, 매터모스트 등 70여종",
     "위치": "한맥빌딩(MDF 실)",
@@ -1313,7 +1313,7 @@ export const realServerData = [
     "SSD2": "8 TB"
   },
   {
-    "법인": "한맥빌딩",
+    "법인": "",
     "자산코드": "15",
     "storage유형": "PC",
     "용도": "한라CAD",
@@ -1329,7 +1329,7 @@ export const realServerData = [
     "SSD2": ""
   },
   {
-    "법인": "한맥빌딩",
+    "법인": "",
     "자산코드": "16",
     "storage유형": "NAS",
     "용도": "디자인팀1 NAS",
@@ -1345,7 +1345,7 @@ export const realServerData = [
     "SSD2": ""
   },
   {
-    "법인": "한맥빌딩",
+    "법인": "",
     "자산코드": "17",
     "storage유형": "NAS",
     "용도": "디자인팀2 NAS",
@@ -1361,9 +1361,9 @@ export const realServerData = [
     "SSD2": ""
   },
   {
-    "법인": "한맥빌딩",
+    "법인": "",
     "자산코드": "18",
-    "storage유형": "서버(미니워크스테이션)",
+    "storage유형": "PC",
     "용도": "인사정보 서버",
     "상세": "인사정보 PM",
     "위치": "한맥빌딩(MDF 실)",
@@ -1377,9 +1377,9 @@ export const realServerData = [
     "SSD2": "2 TB"
   },
   {
-    "법인": "한맥빌딩",
+    "법인": "",
     "자산코드": "19",
-    "storage유형": "서버(타워)",
+    "storage유형": "PC",
     "용도": "BEPs 서버",
     "상세": "BEPs 개발서버, Outline 협업서비스",
     "위치": "한맥빌딩(MDF 실)",
@@ -1393,9 +1393,9 @@ export const realServerData = [
     "SSD2": ""
   },
   {
-    "법인": "한맥빌딩",
+    "법인": "",
     "자산코드": "20",
-    "storage유형": "서버(타워)",
+    "storage유형": "PC",
     "용도": "Ai-Cell-A100-1",
     "상세": "OCR, Local LLM 등 30여종",
     "위치": "한맥빌딩(MDF 실)",
@@ -1409,9 +1409,9 @@ export const realServerData = [
     "SSD2": ""
   },
   {
-    "법인": "한맥빌딩",
+    "법인": "",
     "자산코드": "21",
-    "storage유형": "서버(타워)",
+    "storage유형": "PC",
     "용도": "빌드서버",
     "상세": "인스톨 쉴드, 지라",
     "위치": "한맥빌딩(MDF 실)",
@@ -1425,9 +1425,9 @@ export const realServerData = [
     "SSD2": "4TB"
   },
   {
-    "법인": "한맥빌딩",
+    "법인": "",
     "자산코드": "22",
-    "storage유형": "PC\n서버(랙)",
+    "storage유형": "PC",
     "용도": "저장소 및 전산모사\n구)스마트건설 서버",
     "상세": "ParaView, CFDCore\n디지털화설문, 검색WIKI 웹서비스",
     "위치": "한맥빌딩(MDF 실)",
@@ -1441,9 +1441,9 @@ export const realServerData = [
     "SSD2": "2TB"
   },
   {
-    "법인": "한맥빌딩",
+    "법인": "",
     "자산코드": "23",
-    "storage유형": "서버(랙)",
+    "storage유형": "서버",
     "용도": "IDC 산하ERP서버",
     "상세": "XR 가상화 메인 서버 → IDC 산하ERP서버",
     "위치": "한맥빌딩(MDF 실)",
@@ -1457,9 +1457,9 @@ export const realServerData = [
     "SSD2": ""
   },
   {
-    "법인": "한맥빌딩",
+    "법인": "",
     "자산코드": "24",
-    "storage유형": "스토리지(랙)",
+    "storage유형": "스토리지",
     "용도": "WAS Storage",
     "상세": "",
     "위치": "한맥빌딩(MDF 실)",
@@ -1473,9 +1473,9 @@ export const realServerData = [
     "SSD2": ""
   },
   {
-    "법인": "한맥빌딩",
+    "법인": "",
     "자산코드": "25",
-    "storage유형": "서버(랙)",
+    "storage유형": "서버",
     "용도": "한맥 백업 서버",
     "상세": "가족사 인트라넷 소스 백업 서버",
     "위치": "한맥빌딩(MDF 실)",
@@ -1489,9 +1489,9 @@ export const realServerData = [
     "SSD2": ""
   },
   {
-    "법인": "한맥빌딩",
+    "법인": "",
     "자산코드": "26",
-    "storage유형": "서버(랙)",
+    "storage유형": "서버",
     "용도": "한라 백업 서버",
     "상세": "한라 웹 소스 및 Miso DB 백업 서버",
     "위치": "한맥빌딩(MDF 실)",
@@ -1505,7 +1505,7 @@ export const realServerData = [
     "SSD2": ""
   },
   {
-    "법인": "한맥빌딩",
+    "법인": "",
     "자산코드": "27",
     "storage유형": "NAS",
     "용도": "기술개발센터 NAS",
@@ -1521,7 +1521,7 @@ export const realServerData = [
     "SSD2": ""
   },
   {
-    "법인": "한맥빌딩",
+    "법인": "",
     "자산코드": "28",
     "storage유형": "NAS",
     "용도": "-",
@@ -1537,9 +1537,9 @@ export const realServerData = [
     "SSD2": ""
   },
   {
-    "법인": "한맥빌딩",
+    "법인": "",
     "자산코드": "29",
-    "storage유형": "스토리지(랙)",
+    "storage유형": "스토리지",
     "용도": "Backup Storage",
     "상세": "",
     "위치": "한맥빌딩(MDF 실)",
@@ -1553,9 +1553,9 @@ export const realServerData = [
     "SSD2": ""
   },
   {
-    "법인": "한맥빌딩",
+    "법인": "",
     "자산코드": "30",
-    "storage유형": "스토리지(랙)",
+    "storage유형": "스토리지",
     "용도": "-",
     "상세": "",
     "위치": "한맥빌딩(MDF 실)",
@@ -1569,9 +1569,9 @@ export const realServerData = [
     "SSD2": ""
   },
   {
-    "법인": "한맥빌딩",
+    "법인": "",
     "자산코드": "31",
-    "storage유형": "서버(랙)",
+    "storage유형": "서버",
     "용도": "XR WAS Server",
     "상세": "",
     "위치": "한맥빌딩(MDF 실)",
@@ -1585,9 +1585,9 @@ export const realServerData = [
     "SSD2": ""
   },
   {
-    "법인": "한맥빌딩",
+    "법인": "",
     "자산코드": "32",
-    "storage유형": "서버(랙)",
+    "storage유형": "서버",
     "용도": "WAS Storage",
     "상세": "",
     "위치": "한맥빌딩(MDF 실)",

src/main.ts

@@ -3,6 +3,7 @@ import { renderSidebar } from './components/Sidebar';
 import { renderDashboard } from './views/DashboardView';
 import { renderTable } from './views/AssetTableView';
 import { downloadTemplate, exportToExcel, parseExcel, HardwareAsset } from './core/excelHandler';
+import { initBaseModal } from './components/Modal/BaseModal';
 import { initPcModal } from './components/Modal/PCModal';
 import { initHwModal, openHwModal } from './components/Modal/HWModal';
 import { initStorageModal } from './components/Modal/StorageModal';
@@ -36,12 +37,14 @@ function initApp() {
     }
   });
 
-  // 3. 모달 초기화 (HTML 주입 및 이벤트 바인딩)
+  // 3. 모달 초기화 (HTML 주입 및 개별 로직 바인딩)
-  initPcModal(() => renderTable(mainContent), () => {});
+  const { closeAllModals } = initBaseModal(); 
-  initHwModal();
+  
-  initStorageModal(() => renderTable(mainContent), () => {});
+  initPcModal(() => renderTable(mainContent), closeAllModals);
-  initSwModal(() => renderTable(mainContent), () => {});
+  initHwModal(); // HW 모달은 내부에서 자체 닫기 로직 포함 중이나 추후 통일 가능
-  initSwUserModal(() => renderTable(mainContent), () => {});
+  initStorageModal(() => renderTable(mainContent), closeAllModals);
+  initSwModal(() => renderTable(mainContent), closeAllModals);
+  initSwUserModal(() => renderTable(mainContent), closeAllModals);
   initDashboardDetailModal();
 
   // 4. 전역 버튼 이벤트 바인딩

src/styles/modal.css

@@ -126,6 +126,19 @@
   font-size: 0.8125rem; 
   font-weight: 600; 
   color: var(--text-muted);
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.badge-security {
+  font-size: 10px;
+  background-color: #fef2f2;
+  color: #ef4444;
+  padding: 1px 4px;
+  border-radius: 3px;
+  border: 1px solid #fee2e2;
+  font-weight: 700;
 }
 
 .form-group input, 

src/views/AssetTableView.ts

@@ -27,18 +27,18 @@ export function renderTable(mainContent: HTMLElement) {
 }
 
 function renderHwTable(table: HTMLTableElement, container: HTMLElement, mainContent: HTMLElement) {
-  const list = state.masterData.hw.filter(a => a.type === state.activeSubTab);
+  const fullList = state.masterData.hw.filter(a => a.type === state.activeSubTab);
   const tableWrapper = document.createElement('div');
   tableWrapper.className = 'table-container';
   
   if (state.activeSubTab === '개인PC') {
-    table.innerHTML = `<thead><tr><th>No</th><th>법인</th><th>자산코드</th><th>사용자</th><th>위치</th><th>CPU</th><th>GPU</th><th>RAM</th><th>SSD1</th><th>SSD2</th><th>HDD1</th><th>HDD2</th><th>구매일</th><th>금액</th><th>납품업체</th><th>품의서</th><th>관리</th></tr></thead><tbody id="dynamic-tbody"></tbody>`;
+    table.innerHTML = `<thead><tr><th>No</th><th>구매법인</th><th>자산코드</th><th>사용자</th><th>위치</th><th>CPU</th><th>GPU</th><th>RAM</th><th>SSD1</th><th>SSD2</th><th>HDD1</th><th>HDD2</th><th>구매일</th><th>금액</th><th>납품업체</th><th>품의서</th><th>관리</th></tr></thead><tbody id="dynamic-tbody"></tbody>`;
     tableWrapper.appendChild(table);
     container.appendChild(tableWrapper);
     mainContent.appendChild(container);
     const tbody = document.getElementById('dynamic-tbody')!;
-    if (list.length === 0) { tbody.innerHTML = `<tr><td colspan="17">등록된 자산이 없습니다.</td></tr>`; return; }
+    if (fullList.length === 0) { tbody.innerHTML = `<tr><td colspan="17">등록된 자산이 없습니다.</td></tr>`; return; }
-    list.forEach((asset, idx) => {
+    fullList.forEach((asset, idx) => {
       const tr = document.createElement('tr');
       tr.style.cursor = 'pointer';
       tr.innerHTML = `<td>${idx+1}</td><td>${asset.법인}</td><td>${asset.자산코드}</td><td>${asset.사용자||''}</td><td>${asset.위치||''}</td><td>${asset.CPU||''}</td><td>${asset.GPU||''}</td><td>${asset.RAM||''}</td><td>${asset.SSD1||'-'}</td><td>${asset.SSD2||'-'}</td><td>${asset.HDD1||'-'}</td><td>${asset.HDD2||'-'}</td><td>${asset.구매일||''}</td><td>${asset.금액||''}</td><td>${asset.납품업체||''}</td><td style="text-align:center;">${asset.품의서명 ? '<i data-lucide="paperclip" class="text-primary"></i>' : '-'}</td><td><button class="btn btn-outline btn-sm btn-edit">수정</button></td>`;
@@ -46,68 +46,190 @@ function renderHwTable(table: HTMLTableElement, container: HTMLElement, mainCont
       tbody.appendChild(tr);
     });
   } else if (state.activeSubTab === '스토리지') {
-    table.innerHTML = `<thead><tr><th>No</th><th>법인</th><th>유형</th><th>자산코드</th><th>명칭</th><th>위치</th><th>모델명</th><th>용량</th><th>담당자(정)</th><th>IP주소</th><th>구매일</th><th>금액</th><th>관리</th></tr></thead><tbody id="dynamic-tbody"></tbody>`;
+    table.innerHTML = `<thead><tr><th>No</th><th>구매법인</th><th>유형</th><th>자산코드</th><th>명칭</th><th>위치</th><th>모델명</th><th>용량</th><th>담당자(정)</th><th>IP주소</th><th>구매일</th><th>금액</th><th>관리</th></tr></thead><tbody id="dynamic-tbody"></tbody>`;
     tableWrapper.appendChild(table);
     container.appendChild(tableWrapper);
     mainContent.appendChild(container);
     const tbody = document.getElementById('dynamic-tbody')!;
-    if (list.length === 0) { tbody.innerHTML = `<tr><td colspan="13">등록된 자산이 없습니다.</td></tr>`; return; }
+    if (fullList.length === 0) { tbody.innerHTML = `<tr><td colspan="13">등록된 자산이 없습니다.</td></tr>`; return; }
-    list.forEach((asset, idx) => {
+    fullList.forEach((asset, idx) => {
       const tr = document.createElement('tr');
       tr.style.cursor = 'pointer';
       tr.innerHTML = `<td>${idx+1}</td><td>${asset.법인}</td><td>${asset.storage유형||''}</td><td>${asset.자산코드}</td><td>${asset.명칭}</td><td>${asset.위치||''}</td><td>${asset.모델명||''}</td><td>${asset.용량||''}</td><td>${asset.담당자_정||''}</td><td>${asset.IP주소||''}</td><td>${asset.구매일||''}</td><td>${asset.금액||''}</td><td><button class="btn btn-outline btn-sm btn-edit">수정</button></td>`;
       tr.addEventListener('click', (e) => { if (!(e.target as HTMLElement).closest('button')) openStorageModal(asset); });
       tbody.appendChild(tr);
     });
-  } else {
+  } else if (state.activeSubTab === '서버') {
-    // 서버 또는 전산비품
+    // --- 서버 전용 필터 및 검색 기능 ---
-    if (state.activeSubTab === '서버') {
+    const filterBar = document.createElement('div');
-      table.innerHTML = `<thead><tr><th>No</th><th>법인</th><th>자산번호</th><th>유형</th><th>용도</th><th>상세</th><th>설치위치</th><th>담당자</th><th>IP 주소</th><th>원격접속</th><th>모델명</th><th>OS</th><th>CPU</th><th>RAM</th><th>Storage</th></tr></thead><tbody id="dynamic-tbody"></tbody>`;
+    filterBar.className = 'search-bar';
-    } else {
-      table.innerHTML = `<thead><tr><th>No</th><th>법인</th>${state.activeSubTab === '전산비품' ? '<th>유형</th>' : ''}<th>자산코드</th><th>명칭</th><th>위치</th><th>관리자</th><th>구매일</th><th>금액</th><th>관리</th></tr></thead><tbody id="dynamic-tbody"></tbody>`;
-    }
     
+    // 법인, 조직, 유형, 위치 고유값 추출
+    const corps = Array.from(new Set(fullList.map(a => a.법인))).filter(Boolean).sort();
+    const orgUnits = Array.from(new Set(fullList.map(a => a.현사용조직))).filter(Boolean).sort();
+    const types = Array.from(new Set(fullList.map(a => a.storage유형))).filter(Boolean).sort();
+    const locations = Array.from(new Set(fullList.map(a => {
+      const loc = String(a.위치 || '');
+      if (loc.startsWith('서관') || loc.startsWith('동관')) return 'IDC';
+      return loc.split(' ')[0]; // 첫 단어 기준 (본사, 지사, 마천사무실 등)
+    }))).filter(Boolean).sort();
+
+    filterBar.innerHTML = `
+      <div class="search-item flex-1">
+        <label>통합 검색 (자산번호/조직/용도/모델명)</label>
+        <input type="text" id="filter-keyword" placeholder="검색어를 입력하세요..." autocomplete="off">
+      </div>
+      <div class="search-item">
+        <label>구매법인</label>
+        <select id="filter-corp">
+          <option value="">전체 법인</option>
+          ${corps.map(c => `<option value="${c}">${c}</option>`).join('')}
+        </select>
+      </div>
+      <div class="search-item">
+        <label>현 사용조직</label>
+        <select id="filter-org-unit">
+          <option value="">전체 조직</option>
+          ${orgUnits.map(o => `<option value="${o}">${o}</option>`).join('')}
+        </select>
+      </div>
+      <div class="search-item">
+        <label>유형</label>
+        <select id="filter-type">
+          <option value="">전체 유형</option>
+          ${types.map(t => `<option value="${t}">${t}</option>`).join('')}
+        </select>
+      </div>
+      <div class="search-item">
+        <label>설치위치</label>
+        <select id="filter-location">
+          <option value="">전체 위치</option>
+          ${locations.map(l => `<option value="${l}">${l}</option>`).join('')}
+        </select>
+      </div>
+      <button id="btn-reset-filters" class="btn btn-outline btn-reset" title="검색 조건 초기화">
+        <i data-lucide="refresh-ccw" style="width:14px; height:14px;"></i> 필터 초기화
+      </button>
+    `;
+    container.appendChild(filterBar);
+
+    table.innerHTML = `<thead><tr><th>No</th><th>구매법인</th><th>현 사용조직</th><th>자산번호</th><th>유형</th><th>용도</th><th>상세</th><th>설치위치</th><th>담당자</th><th>모델명</th><th>OS</th><th>CPU</th><th>RAM</th><th>Storage</th></tr></thead><tbody id="dynamic-tbody"></tbody>`;
     tableWrapper.appendChild(table);
     container.appendChild(tableWrapper);
     mainContent.appendChild(container);
-    const tbody = document.getElementById('dynamic-tbody')!;
-    const colCount = state.activeSubTab === '서버' ? 15 : (state.activeSubTab === '전산비품' ? 11 : 10);
-    if (list.length === 0) { tbody.innerHTML = `<tr><td colspan="${colCount}">등록된 자산이 없습니다.</td></tr>`; return; }
 
-    list.forEach((asset, idx) => {
+    const tbody = document.getElementById('dynamic-tbody')!;
+    
+    const updateTable = () => {
+      const keyword = (document.getElementById('filter-keyword') as HTMLInputElement).value.toLowerCase().trim();
+      const corp = (document.getElementById('filter-corp') as HTMLSelectElement).value;
+      const orgUnit = (document.getElementById('filter-org-unit') as HTMLSelectElement).value;
+      const type = (document.getElementById('filter-type') as HTMLSelectElement).value;
+      const location = (document.getElementById('filter-location') as HTMLSelectElement).value;
+
+      const filtered = fullList.filter(asset => {
+        const formatAsset = (v: any) => String(v || '').toLowerCase();
+        const matchKeyword = !keyword || 
+          formatAsset(asset.자산코드).includes(keyword) || 
+          formatAsset(asset.용도).includes(keyword) || 
+          formatAsset(asset.상세).includes(keyword) || 
+          formatAsset(asset.모델명).includes(keyword) || 
+          formatAsset(asset.담당자_정).includes(keyword) || 
+          formatAsset(asset.현사용조직).includes(keyword) || 
+          formatAsset(asset.담당자_부).includes(keyword);
+        
+        const matchCorp = !corp || asset.법인 === corp;
+        const matchOrgUnit = !orgUnit || asset.현사용조직 === orgUnit;
+        const matchType = !type || asset.storage유형 === type;
+        
+        let matchLocation = true;
+        if (location) {
+          const loc = String(asset.위치 || '');
+          if (location === 'IDC') {
+            matchLocation = loc.startsWith('서관') || loc.startsWith('동관');
+          } else {
+            matchLocation = loc.includes(location);
+          }
+        }
+
+        return matchKeyword && matchCorp && matchOrgUnit && matchType && matchLocation;
+      });
+
+      tbody.innerHTML = '';
+      if (filtered.length === 0) {
+        tbody.innerHTML = `<tr><td colspan="14" style="text-align:center; padding: 3rem; color: var(--text-muted);">검색 결과가 없습니다.</td></tr>`;
+        return;
+      }
+
+      filtered.forEach((asset, idx) => {
         const tr = document.createElement('tr');
         tr.style.cursor = 'pointer';
         const formatInline = (v: any) => String(v || '').replace(/\n/g, ' / ').trim();
         const getBadge = (text: string, bgColor: string) => `<span style="background:${bgColor}; color:white; font-size:10px; padding:1px 4px; border-radius:3px; font-weight:700; margin-right:4px; display:inline-block; line-height:1.2;">${text}</span>`;
 
-      if (state.activeSubTab === '서버') {
         const mainManager = asset.담당자_정 || '';
         const subManager = asset.담당자_부 || '';
         const managerHtml = [mainManager ? `${getBadge('정', '#1E5149')} ${mainManager}` : '', subManager ? `${getBadge('부', '#9CA3AF')} ${subManager}` : ''].filter(v => v !== '').join(' / ');
-        const tools = (asset.원격접속 || '').split('\n');
-        const ids = (asset.서버ID || '').split('\n');
-        const pws = (asset.서버PW || '').split('\n');
-        const maxLen = Math.max(tools.length, ids.length, pws.length);
-        let remoteItems = [];
-        for(let i=0; i<maxLen; i++) {
-          let toolName = tools[i] || '접속';
-          let badgeColor = '#3B82F6'; 
-          if (toolName.toLowerCase().includes('any')) badgeColor = '#EF4444'; 
-          if (toolName.toLowerCase().includes('chrome')) badgeColor = '#F59E0B'; 
-          let item = `${getBadge(toolName, badgeColor)}`;
-          if (ids[i] || pws[i]) item += ` (${ids[i] || '-'}/${pws[i] || '-'})`;
-          remoteItems.push(item);
-        }
-        const remoteHtml = remoteItems.join(' / ');
-        const ipInfo = [asset.IP주소, asset.IP2].filter(v => v && v !== '').join(' / ');
         const storageInfo = [asset.SSD1, asset.SSD2].filter(v => v && v !== '').join(' / ');
 
-        tr.innerHTML = `<td>${idx+1}</td><td class="text-nowrap">${formatInline(asset.법인)}</td><td class="text-nowrap">${formatInline(asset.자산코드)}</td><td class="text-nowrap">${formatInline(asset.storage유형)}</td><td class="text-nowrap">${formatInline(asset.용도)}</td><td class="text-nowrap">${formatInline(asset.상세)}</td><td class="text-nowrap">${formatInline(asset.위치)}</td><td class="text-nowrap">${managerHtml}</td><td class="text-nowrap">${formatInline(ipInfo)}</td><td class="text-nowrap">${remoteHtml}</td><td class="text-nowrap">${formatInline(asset.모델명)}</td><td class="text-nowrap">${formatInline(asset.OS)}</td><td class="text-nowrap">${formatInline(asset.CPU)}</td><td class="text-nowrap">${formatInline(asset.RAM)}</td><td class="text-nowrap">${formatInline(storageInfo)}</td>`;
+        let locationHtml = formatInline(asset.위치);
+        if (locationHtml.startsWith('서관') || locationHtml.startsWith('동관')) {
+          locationHtml = `IDC(${locationHtml})`;
+        }
+
+        tr.innerHTML = `
+          <td>${idx+1}</td>
+          <td class="text-nowrap">${formatInline(asset.법인)}</td>
+          <td class="text-nowrap">${formatInline(asset.현사용조직)}</td>
+          <td class="text-nowrap">${formatInline(asset.자산코드)}</td>
+          <td class="text-nowrap">${formatInline(asset.storage유형)}</td>
+          <td class="text-nowrap">${formatInline(asset.용도)}</td>
+          <td class="text-nowrap">${formatInline(asset.상세)}</td>
+          <td class="text-nowrap">${locationHtml}</td>
+          <td class="text-nowrap">${managerHtml}</td>
+          <td class="text-nowrap">${formatInline(asset.모델명)}</td>
+          <td class="text-nowrap">${formatInline(asset.OS)}</td>
+          <td class="text-nowrap">${formatInline(asset.CPU)}</td>
+          <td class="text-nowrap">${formatInline(asset.RAM)}</td>
+          <td class="text-nowrap">${formatInline(storageInfo)}</td>
+        `;
         tr.addEventListener('click', (e) => { if (!(e.target as HTMLElement).closest('button')) openHwModal(asset); });
+        tbody.appendChild(tr);
+      });
+      createIcons({ icons: { RefreshCcw, Paperclip } });
+    };
+
+    const keywordInput = document.getElementById('filter-keyword') as HTMLInputElement;
+    const corpSelect = document.getElementById('filter-corp') as HTMLSelectElement;
+    const typeSelect = document.getElementById('filter-type') as HTMLSelectElement;
+    const locationSelect = document.getElementById('filter-location') as HTMLSelectElement;
+    const resetBtn = document.getElementById('btn-reset-filters') as HTMLButtonElement;
+
+    keywordInput.addEventListener('input', updateTable);
+    corpSelect.addEventListener('change', updateTable);
+    typeSelect.addEventListener('change', updateTable);
+    locationSelect.addEventListener('change', updateTable);
+    resetBtn.addEventListener('click', () => {
+      keywordInput.value = ''; corpSelect.value = ''; typeSelect.value = ''; locationSelect.value = '';
+      updateTable();
+    });
+
+    updateTable();
   } else {
+    // 전산비품
+    table.innerHTML = `<thead><tr><th>No</th><th>구매법인</th>${state.activeSubTab === '전산비품' ? '<th>유형</th>' : ''}<th>자산코드</th><th>명칭</th><th>위치</th><th>관리자</th><th>구매일</th><th>금액</th><th>관리</th></tr></thead><tbody id="dynamic-tbody"></tbody>`;
+    tableWrapper.appendChild(table);
+    container.appendChild(tableWrapper);
+    mainContent.appendChild(container);
+    const tbody = document.getElementById('dynamic-tbody')!;
+    const colCount = state.activeSubTab === '전산비품' ? 11 : 10;
+    if (fullList.length === 0) { tbody.innerHTML = `<tr><td colspan="${colCount}">등록된 자산이 없습니다.</td></tr>`; return; }
+    
+    fullList.forEach((asset, idx) => {
+      const tr = document.createElement('tr');
+      tr.style.cursor = 'pointer';
       tr.innerHTML = `<td>${idx+1}</td><td>${asset.법인}</td>${state.activeSubTab === '전산비품' ? `<td>${asset.비품유형||'-'}</td>` : ''}<td>${asset.자산코드}</td><td>${asset.명칭}</td><td>${asset.위치}</td><td>${asset.관리자}</td><td>${asset.구매일||''}</td><td>${asset.금액||''}</td><td><button class="btn btn-outline btn-sm btn-edit">수정</button></td>`;
       tr.addEventListener('click', (e) => { if (!(e.target as HTMLElement).closest('button')) openHwModal(asset); });
-      }
       tbody.appendChild(tr);
     });
   }