feat: 자산 현황 고도화 및 데이터 표준화 작업 완료

- UI 개선: 모든 아이콘/이모지 제거(미니멀리즘), 목록 행 하이라이트 추가, 요약 레이아웃 최적화
- 경고 시스템: 위치 부적절/형식 부적절 사유별 세분화 및 상단 통계 배지 적용
- 정보 강화: 우측 패널 '상세 보기' 버튼 복구 및 '자산 유형' 정보 추가 노출
- 표준화: 위치명(기술개발센터, 한맥빌딩) 및 자산번호 접두사(STO/NAS/DAS -> DSS/STM) 통합
- 데이터: realServerData.ts 및 SharedData.ts 내 유형/접두사 표준 체계 전면 반영
- 레이아웃: 헤더 역할 스위처 및 가이드 버튼 일렬 정렬 수정

server.js

@@ -134,19 +134,48 @@ app.get('/api/generate-asset-code', async (req, res) => {
   try {
     const { prefix } = req.query;
     if (!prefix) return res.status(400).json({ error: 'Prefix is required' });
-    const tables = ['asset_pc', 'asset_server', 'asset_storage', 'asset_network', 'asset_survey', 'asset_pc_parts', 'asset_equipment', 'asset_office_supplies', 'asset_vip'];
+    
+    // asset_code 컬럼이 있는 것으로 확인된 테이블 목록 (DESCRIBE 결과 기반)
+    const tables = [
+      'asset_pc', 'asset_server', 'asset_storage', 'asset_network', 
+      'asset_equipment', 'asset_office_supplies', 'asset_survey', 'asset_vip'
+    ];
+    
     let lastCode = '';
+    let maxNum = 0;
+
     for (const table of tables) {
-        const [rows] = await pool.query(`SELECT asset_code FROM ${table} WHERE asset_code LIKE ? ORDER BY asset_code DESC LIMIT 1`, [`${prefix}%`]);
+        try {
-        if (rows.length > 0 && rows[0].asset_code > lastCode) lastCode = rows[0].asset_code;
+          const [rows] = await pool.query(
+            `SELECT asset_code FROM ${table} WHERE asset_code LIKE ? ORDER BY asset_code DESC LIMIT 1`, 
+            [`${prefix}%`]
+          );
+          
+          if (rows.length > 0) {
+            const code = rows[0].asset_code;
+            // 숫자 부분 추출 (예: SVR048 -> 48)
+            const numMatch = code.match(/\d+/);
+            if (numMatch) {
+              const num = parseInt(numMatch[0]);
+              if (num > maxNum) {
+                maxNum = num;
+                lastCode = code;
+              }
+            }
+          }
+        } catch (err) {
+          console.warn(`[GENERATE CODE] Skipping ${table}: ${err.message}`);
+        }
     }
-    let nextNum = 1;
+    
-    if (lastCode) {
+    const nextNum = maxNum + 1;
-      const lastNum = parseInt(lastCode.split('-').pop() || '0');
+    const nextCode = `${prefix}${String(nextNum).padStart(3, '0')}`;
-      nextNum = lastNum + 1;
+    
-    }
+    console.log(`🆕 [GENERATE CODE] Prefix: ${prefix}, Last: ${lastCode}, Next: ${nextCode}`);
-    res.json({ nextCode: `${prefix}${String(nextNum).padStart(3, '0')}` });
+    res.json({ nextCode });
-  } catch (err) { handleError(res, err, 'GENERATE CODE'); }
+  } catch (err) { 
+    handleError(res, err, 'GENERATE CODE'); 
+  }
 });
 
 // 6. Map Config API (Real-time Save)

src/components/Modal/HWModal.ts

@@ -8,7 +8,7 @@ import {
   bindLocationEvents, 
   applyDateMask
 } from './ModalUtils';
-import { CORP_LIST, LOCATION_DATA, CATEGORY_TYPE_MAP, HW_STATUS_LIST, ORG_LIST, IMAGE_LOCATIONS } from './SharedData';
+import { CORP_LIST, LOCATION_DATA, CATEGORY_TYPE_MAP, HW_STATUS_LIST, ORG_LIST, IMAGE_LOCATIONS, TYPE_PREFIX_MAP } from './SharedData';
 import { BaseModal } from './BaseModal';
 import { createIcons, X, History, Plus, Save, Paperclip, Calendar, Monitor, Cpu, Network, ShieldCheck } from 'lucide';
 
@@ -278,6 +278,23 @@ class HwAssetModal extends BaseModal {
         : '<option value="">구분을 먼저 선택하세요</option>';
     });
 
+    document.getElementById('btn-gen-hw-code')?.addEventListener('click', async () => {
+      const cat = categorySelect.value;
+      if (!cat) { alert('구분을 먼저 선택해주세요.'); return; }
+      
+      const prefix = TYPE_PREFIX_MAP[cat] || 'ETC';
+      
+      try {
+        const res = await fetch(`http://${location.hostname}:3000/api/generate-asset-code?prefix=${prefix}`);
+        const data = await res.json();
+        if (data.nextCode) {
+          setFieldValue('hw-asset_code', data.nextCode);
+        }
+      } catch (err) {
+        console.error('코드 생성 실패:', err);
+      }
+    });
+
     bldgSelect.addEventListener('change', () => setTimeout(() => this.updateMapButtonVisibility(), 100));
     detailSelect.addEventListener('change', () => this.updateMapButtonVisibility());
 

src/components/Modal/SharedData.ts

@@ -13,9 +13,9 @@ export const HW_STATUS_LIST = ['운영', '재고', '수리', '폐기', '기타']
 
 // 구분(Category) -> 유형(Asset Type) 관계 정의 (통합 관리)
 export const CATEGORY_TYPE_MAP: Record<string, string[]> = {
-  '서버': ['서버 렉', '가상서버(VM)', '워크스테이션', 'NAS', 'DAS', '서버PC', '스토리지 렉'],
+  '서버': ['서버 렉', '가상서버(VM)', '워크스테이션', '서버PC', '저장시스템_렉(NAS)', '저장시스템_렉(DAS)', '저장시스템_미니(NAS)', '저장시스템_미니(DAS)'],
   'PC': ['개인PC', '노트북', '공용PC', '서버PC'],
-  '스토리지': ['SSD', 'HDD', '외장HDD'],
+  '저장매체': ['SSD', 'HDD', '외장HDD'],
   '네트워크': ['스위치', '허브', '방화벽', '라우터', '공유기', '허브'],
   'PC부품': ['CPU', 'RAM', 'GPU', 'SSD', 'HDD', 'RAM', '모니터'],
   '공간정보장비': ['드론', '측량장비', '보조기기'],
@@ -38,10 +38,12 @@ export const LOCATION_DATA: Record<string, string[]> = {
 
 // 유형별 자산번호 접두사(Prefix) 매핑
 export const TYPE_PREFIX_MAP: Record<string, string> = {
-  '서버': 'SVR', '워크스테이션': 'SVR', '개인PC': 'PC', '공용PC': 'PC', '서버PC': 'PC', 'NAS': 'NAS', 'DAS': 'DAS', '스토리지': 'STO', 
+  '서버': 'SVR', '워크스테이션': 'SVR', '개인PC': 'PC', '공용PC': 'PC', '서버PC': 'PC', 
-  'HDD': 'HDD', 'SSD': 'SSD', '노트북': 'NBK', '태블릿': 'TAB',
+  '저장시스템_렉(NAS)': 'DSS', '저장시스템_렉(DAS)': 'DSS', '저장시스템_미니(NAS)': 'DSS', '저장시스템_미니(DAS)': 'DSS',
+  '저장매체': 'STM', 'HDD': 'HDD', 'SSD': 'SSD',
+  '노트북': 'NBK', '태블릿': 'TAB',
   '드론': 'DRO', '측량장비': 'SUR', '보조기기': 'SUR', '허브': 'NET', 
-  '구독SW': 'SW', '영구SW': 'SW', '내부' : 'INT'
+  '구독SW': 'SW', '영구SW': 'SW', '내부' : 'SW_INT', '외부':'SW_EXT'
 };
 
 // 배치도 이미지 매핑 데이터

src/core/realServerData.ts

@@ -484,7 +484,7 @@ export const realServerData = [
   },
   {
     "법인": "삼안",
-    "자산코드": "sa-das-001",
+    "자산코드": "DSS020",
     "storage유형": "서버",
     "용도": "",
     "상세": "Satis01, Satis02 광케이블 연결 (물리연결)",
@@ -505,7 +505,7 @@ export const realServerData = [
   },
   {
     "법인": "삼안",
-    "자산코드": "sa-nas-001",
+    "자산코드": "DSS019",
     "storage유형": "서버",
     "용도": "인트라넷 백업 스토리지",
     "상세": "",
@@ -526,7 +526,7 @@ export const realServerData = [
   },
   {
     "법인": "삼안",
-    "자산코드": "sa-nas-002",
+    "자산코드": "DSS018",
     "storage유형": "서버",
     "용도": "성과품 스토리지",
     "상세": "매니지먼트 접속 확인 불가 (콘솔 연결 후 페이지 오픈 필요)",
@@ -547,7 +547,7 @@ export const realServerData = [
   },
   {
     "법인": "삼안",
-    "자산코드": "sa-nas-003",
+    "자산코드": "DSS017",
     "storage유형": "서버",
     "용도": "성과품 백업 스토리지",
     "상세": "",
@@ -568,7 +568,7 @@ export const realServerData = [
   },
   {
     "법인": "한라",
-    "자산코드": "hl-das-001",
+    "자산코드": "DSS016",
     "storage유형": "서버",
     "용도": "",
     "상세": "파일서버 정보 없음(접속 불가)",
@@ -589,7 +589,7 @@ export const realServerData = [
   },
   {
     "법인": "한라",
-    "자산코드": "hl-das-002",
+    "자산코드": "DSS015",
     "storage유형": "서버",
     "용도": "",
     "상세": "파일서버 정보 없음(접속 불가)",
@@ -611,7 +611,7 @@ export const realServerData = [
   {
     "법인": "",
     "자산코드": "",
-    "storage유형": "NAS",
+    "storage유형": "저장시스템_렉(DAS)",
     "용도": "GSIM NAS",
     "상세": "팀 내부 자료 저장 , 정사영상 및 지도 데이터 저장 , Gitea 및 Git 내장 NAS",
     "위치": "마천사무실",
@@ -631,7 +631,7 @@ export const realServerData = [
   {
     "법인": "",
     "자산코드": "",
-    "storage유형": "NAS",
+    "storage유형": "저장시스템_렉(DAS)",
     "용도": "그래픽스개발팀 데이터 백업 NAS",
     "상세": "그래픽스 개발팀 데이터 백업용 NAS",
     "위치": "마천사무실",
@@ -1091,7 +1091,7 @@ export const realServerData = [
   {
     "법인": "",
     "자산코드": "1",
-    "storage유형": "NAS",
+    "storage유형": "저장시스템_렉(DAS)",
     "용도": "NAS 2",
     "상세": "한라 기업부설연구소 공용 NAS",
     "위치": "한맥빌딩(MDF 실)",
@@ -1107,7 +1107,7 @@ export const realServerData = [
   {
     "법인": "",
     "자산코드": "2",
-    "storage유형": "NAS",
+    "storage유형": "저장시스템_렉(DAS)",
     "용도": "NAS 1",
     "상세": "한라 공용 NAS",
     "위치": "한맥빌딩(MDF 실)",
@@ -1123,7 +1123,7 @@ export const realServerData = [
   {
     "법인": "",
     "자산코드": "3",
-    "storage유형": "NAS",
+    "storage유형": "저장시스템_렉(DAS)",
     "용도": "NAS 4",
     "상세": "한라 공용 NAS",
     "위치": "한맥빌딩(MDF 실)",
@@ -1139,7 +1139,7 @@ export const realServerData = [
   {
     "법인": "",
     "자산코드": "4",
-    "storage유형": "NAS",
+    "storage유형": "저장시스템_렉(DAS)",
     "용도": "NAS 5",
     "상세": "한라 환경플랜트사업부 NAS",
     "위치": "한맥빌딩(MDF 실)",
@@ -1155,7 +1155,7 @@ export const realServerData = [
   {
     "법인": "",
     "자산코드": "5",
-    "storage유형": "NAS",
+    "storage유형": "저장시스템_렉(DAS)",
     "용도": "NAS 6",
     "상세": "한라 공용 NAS",
     "위치": "한맥빌딩(MDF 실)",
@@ -1171,7 +1171,7 @@ export const realServerData = [
   {
     "법인": "",
     "자산코드": "6",
-    "storage유형": "NAS",
+    "storage유형": "저장시스템_렉(DAS)",
     "용도": "NAS7",
     "상세": "한라 원주바이오 NAS",
     "위치": "한맥빌딩(MDF 실)",
@@ -1187,7 +1187,7 @@ export const realServerData = [
   {
     "법인": "",
     "자산코드": "7",
-    "storage유형": "NAS",
+    "storage유형": "저장시스템_렉(DAS)",
     "용도": "총괄기획실 NAS",
     "상세": "총괄기획실 공용 NAS",
     "위치": "한맥빌딩(MDF 실)",
@@ -1203,7 +1203,7 @@ export const realServerData = [
   {
     "법인": "",
     "자산코드": "8",
-    "storage유형": "NAS",
+    "storage유형": "저장시스템_렉(DAS)",
     "용도": "한맥 NAS 1",
     "상세": "한맥 공용 NAS",
     "위치": "한맥빌딩(MDF 실)",
@@ -1219,7 +1219,7 @@ export const realServerData = [
   {
     "법인": "",
     "자산코드": "9",
-    "storage유형": "NAS",
+    "storage유형": "저장시스템_렉(DAS)",
     "용도": "한맥 NAS 2",
     "상세": "한맥 공용 NAS",
     "위치": "한맥빌딩(MDF 실)",
@@ -1235,7 +1235,7 @@ export const realServerData = [
   {
     "법인": "",
     "자산코드": "10",
-    "storage유형": "NAS",
+    "storage유형": "저장시스템_렉(DAS)",
     "용도": "한맥 NAS 3",
     "상세": "한맥 공용 NAS",
     "위치": "한맥빌딩(MDF 실)",
@@ -1251,7 +1251,7 @@ export const realServerData = [
   {
     "법인": "",
     "자산코드": "11",
-    "storage유형": "NAS",
+    "storage유형": "저장시스템_렉(DAS)",
     "용도": "NAS 13",
     "상세": "환경플랜트사업",
     "위치": "한맥빌딩(MDF 실)",
@@ -1331,7 +1331,7 @@ export const realServerData = [
   {
     "법인": "",
     "자산코드": "16",
-    "storage유형": "NAS",
+    "storage유형": "저장시스템_렉(DAS)",
     "용도": "디자인팀1 NAS",
     "상세": "",
     "위치": "한맥빌딩(MDF 실)",
@@ -1347,7 +1347,7 @@ export const realServerData = [
   {
     "법인": "",
     "자산코드": "17",
-    "storage유형": "NAS",
+    "storage유형": "저장시스템_렉(DAS)",
     "용도": "디자인팀2 NAS",
     "상세": "",
     "위치": "한맥빌딩(MDF 실)",
@@ -1507,7 +1507,7 @@ export const realServerData = [
   {
     "법인": "",
     "자산코드": "27",
-    "storage유형": "NAS",
+    "storage유형": "저장시스템_렉(DAS)",
     "용도": "기술개발센터 NAS",
     "상세": "",
     "위치": "한맥빌딩(MDF 실)",
@@ -1523,7 +1523,7 @@ export const realServerData = [
   {
     "법인": "",
     "자산코드": "28",
-    "storage유형": "NAS",
+    "storage유형": "저장시스템_렉(DAS)",
     "용도": "-",
     "상세": "",
     "위치": "한맥빌딩(MDF 실)",

src/styles/common.css

@@ -1,5 +1,5 @@
 :root {
-  /* --- System Colors (Added) --- */
+  /* --- System Colors --- */
   --color-red: #F21D0D;
   --color-pink: #E8175E;
   --color-magenta: #B92ED1;
@@ -15,37 +15,6 @@
   --color-iron: #7F7F7F;
   --color-steel: #688897;
 
-  --color-red-light: #FEE9E7;
-  --color-pink-light: #FDE8EF;
-  --color-magenta-light: #F8EBFB;
-  --color-purple-light: #F1ECF9;
-  --color-navy-light: #EDEEF9;
-  --color-blue-light: #E7F4FE;
-  --color-cyan-light: #E6F7FF;
-  --color-green-light: #EEF8EE;
-  --color-yellow-light: #FFF9E6;
-  --color-orange-light: #FFF5E6;
-  --color-dahong-light: #FFECE6;
-  --color-brown-light: #F6F1EF;
-  --color-iron-light: #F3F3F3;
-  --color-steel-light: #F0F4F5;
-
-  --color-red-medium: #FAA59E;
-  --color-pink-medium: #F6A2BF;
-  --color-magenta-medium: #E3ABEC;
-  --color-purple-medium: #C5B1E7;
-  --color-navy-medium: #B3BBE5;
-  --color-blue-medium: #9ED1FA;
-  --color-cyan-medium: #9ADFFE;
-  --color-green-medium: #B8E0B9;
-  --color-yellow-medium: #FFE599;
-  --color-orange-medium: #FFD699;
-  --color-dahong-medium: #FFB199;
-  --color-dahong: #FF3D00;
-  --color-dahong-light: #FFECE6;
-  --color-dahong-medium: #FFB199;
-  --color-dahong-dark: #cc3100;
-
   /* --- Primary Brand Levels --- */
   --primary-lv-0: #E9EEED;
   --primary-lv-1: #D2DCDB;
@@ -64,39 +33,30 @@
   --primary-light: var(--primary-lv-0);
 
   --edit-mode-color: var(--color-dahong);
-  --edit-mode-light: var(--color-dahong-light);
+  --edit-mode-light: rgba(255, 61, 0, 0.1);
-  --edit-mode-focus: var(--color-dahong-medium);
+  --edit-mode-focus: rgba(255, 61, 0, 0.3);
-  --edit-mode-dark: var(--color-dahong-dark);
+  --edit-mode-dark: #cc3100;
 
   --text-main: #111827;
   --text-muted: #6B7280;
   --border-color: #E5E7EB;
   --bg-color: #F9FAFB;
   --bg-light: #FAFAFA;
-  --sidebar-bg: #ffffff;
   --white: #FFFFFF;
   --danger: var(--color-red);
-  --info: var(--color-blue);
   --success: var(--color-green);
-  --warning: var(--color-orange);
-
-  --dash-primary: #6cc020;
-  --dash-light: #f2f9ec;
-  --dash-danger: #cf222e;
-
   --header-height: 52px;
-  }
+}
 
 * {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
   letter-spacing: -0.02em;
-  /* 모든 요소에 자간 규칙 일괄 적용 */
 }
 
 body {
-  font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
+  font-family: 'Pretendard Variable', Pretendard, sans-serif;
   color: var(--text-main);
   background-color: var(--bg-color);
   line-height: 1.5;
@@ -111,12 +71,13 @@ body {
   width: 100%;
 }
 
-/* --- Main Header & GNB/LNB --- */
+/* --- Header --- */
 .main-header {
   background-color: var(--white);
   border-bottom: 1px solid var(--border-color);
   z-index: 100;
   height: var(--header-height);
+  flex-shrink: 0;
 }
 
 .header-container {
@@ -127,239 +88,46 @@ body {
   gap: 1.5rem;
 }
 
-.brand {
+.brand { display: flex; align-items: center; gap: 0.75rem; }
-  display: flex;
+.main-logo { height: 34px; width: auto; }
-  align-items: center;
+.brand h1 { font-size: 1.1rem; font-weight: 800; color: var(--text-main); white-space: nowrap; }
-  gap: 0.75rem;
+.brand h1 .sub-title { font-size: 0.85rem; color: var(--primary-color); font-weight: 600; margin-left: 0.25rem; }
-}
 
-.main-logo {
+.integrated-nav { flex: 1; height: 100%; display: flex; align-items: center; gap: 0.25rem; overflow: hidden; }
-  height: 34px;
+.nav-group { display: flex; align-items: center; height: 100%; position: relative; flex-shrink: 0; }
-  width: auto;
+.gnb-trigger { font-size: 14px; font-weight: 700; color: var(--text-muted); padding: 0 0.75rem; cursor: pointer; height: 100%; display: flex; align-items: center; white-space: nowrap; transition: color 0.2s; }
-}
+.nav-group.active .gnb-trigger, .nav-group:hover .gnb-trigger { color: var(--text-main); }
+.lnb-shelf { display: none; align-items: center; gap: 0.2rem; padding: 0 0.5rem; height: 60%; border-left: 1px solid var(--border-color); margin-left: 0.2rem; }
 
-.brand h1 {
+/* 기본적으로 활성 탭의 서브메뉴 표시 */
-  font-size: 1.1rem;
+.nav-group.active.is-showing-shelf .lnb-shelf { display: flex; }
-  /* 전체적으로 살짝 축소 */
-  font-weight: 800;
-  color: var(--text-main);
-  white-space: nowrap;
-}
 
-.brand h1 .sub-title {
+/* GNB 전체 영역에 마우스가 올라가면 활성 탭의 서브메뉴를 일단 숨김 (다른 메뉴 탐색 우선) */
-  font-size: 0.85rem;
+.integrated-nav:hover .nav-group.active.is-showing-shelf .lnb-shelf { display: none; }
-  /* 영문 제목은 더 작게 */
-  color: var(--primary-color);
-  font-weight: 600;
-  margin-left: 0.25rem;
-}
 
-.integrated-nav {
+/* 마우스가 올라간 메뉴의 서브메뉴만 표시 */
-  flex: 1;
+.nav-group:hover .lnb-shelf { display: flex !important; }
-  height: 100%;
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
 
-.nav-group {
+.lnb-item { font-size: 13px; font-weight: 500; color: var(--text-muted); cursor: pointer; padding: 0.2rem 0.6rem; border-radius: 4px; white-space: nowrap; transition: all 0.2s; }
-  display: flex;
+.lnb-item:hover { color: var(--primary-color); background-color: var(--primary-light); }
-  align-items: center;
+.lnb-item.active { color: var(--primary-color); background-color: var(--primary-light); font-weight: 700; }
-  height: 100%;
-}
 
-.gnb-trigger {
+.header-actions { display: flex; align-items: center; gap: 1rem; }
-  font-size: 14px;
+.role-switcher { display: flex; align-items: center; gap: 0.75rem; padding: 0 0.75rem; border-right: 1px solid var(--border-color); height: 24px; }
-  font-weight: 700;
+.role-label { font-size: 11px; font-weight: 700; color: var(--text-muted); }
-  color: var(--text-main);
+.role-label.active { color: var(--primary-color); }
-  padding: 0 1rem;
+.switch { position: relative; display: inline-block; width: 34px; height: 18px; }
-  cursor: pointer;
+.switch input { opacity: 0; width: 0; height: 0; }
-  height: 100%;
+.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 34px; }
-  display: flex;
+.slider:before { position: absolute; content: ""; height: 12px; width: 12px; left: 3px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%; }
-  align-items: center;
+input:checked + .slider { background-color: var(--color-orange); }
-  white-space: nowrap;
+input:checked + .slider:before { transform: translateX(16px); }
-}
 
-.lnb-shelf {
+/* --- Layout Content --- */
-  display: none;
-  align-items: center;
-  gap: 0.25rem;
-  padding: 0 0.75rem;
-  height: 60%;
-  border-left: 1px solid var(--border-color);
-  margin-left: 0.25rem;
-  animation: fadeIn 0.2s ease-out;
-}
-
-.nav-group:hover .lnb-shelf,
-.nav-group.is-showing-shelf .lnb-shelf {
-  display: flex;
-}
-
-.lnb-item {
-  font-size: 13px;
-  font-weight: 500;
-  color: var(--text-muted);
-  cursor: pointer;
-  padding: 0.2rem 0.6rem;
-  border-radius: 4px;
-  white-space: nowrap;
-}
-
-.lnb-item:hover {
-  color: var(--primary-color);
-  background-color: var(--bg-color);
-}
-
-.lnb-item.active {
-  color: var(--primary-color);
-  background-color: var(--primary-light);
-  font-weight: 700;
-}
-
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-    transform: translateX(-5px);
-  }
-
-  to {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
-
-/* --- Role Switcher Toggle --- */
-.role-switcher {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  margin-right: 0.5rem;
-  padding: 0 0.75rem;
-  border-right: 1px solid var(--border-color);
-  height: 24px;
-}
-
-.role-label {
-  font-size: 11px;
-  font-weight: 700;
-  color: var(--text-muted);
-  transition: color 0.2s;
-}
-
-.role-label.active {
-  color: var(--primary-color);
-}
-
-.role-label.admin.active {
-  color: var(--color-orange);
-}
-
-/* Toggle Switch Base */
-.switch {
-  position: relative;
-  display: inline-block;
-  width: 34px;
-  height: 18px;
-}
-
-.switch input {
-  opacity: 0;
-  width: 0;
-  height: 0;
-}
-
-.slider {
-  position: absolute;
-  cursor: pointer;
-  top: 0; left: 0; right: 0; bottom: 0;
-  background-color: #ccc;
-  transition: .4s;
-}
-
-.slider:before {
-  position: absolute;
-  content: "";
-  height: 12px;
-  width: 12px;
-  left: 3px;
-  bottom: 3px;
-  background-color: white;
-  transition: .4s;
-}
-
-input:checked + .slider {
-  background-color: var(--color-orange);
-}
-
-input:focus + .slider {
-  box-shadow: 0 0 1px var(--color-orange);
-}
-
-input:checked + .slider:before {
-  transform: translateX(16px);
-}
-
-.slider.round {
-  border-radius: 34px;
-}
-
-.slider.round:before {
-  border-radius: 50%;
-}
-
-/* --- Global Actions & Buttons --- */
-.header-actions {
-  display: flex;
-  gap: 0.3rem;
-  align-items: center;
-}
-
-.btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.35rem;
-  padding: 0 0.8rem;
-  font-size: 12px;
-  font-weight: 600;
-  border-radius: 4px;
-  cursor: pointer;
-  height: 28px;
-  line-height: 1;
-  white-space: nowrap; /* 텍스트 줄바꿈 방지 */
-  flex-shrink: 0; /* 크기 찌그러짐 방지 */
-}
-
-.btn i,
-.btn svg {
-  width: 12px !important;
-  height: 12px !important;
-}
-
-.btn-primary {
-  background-color: var(--primary-color);
-  color: var(--white);
-  border: 1px solid var(--primary-color);
-}
-
-.btn-outline {
-  background-color: transparent;
-  color: var(--text-muted);
-  border: 1px solid var(--border-color);
-}
-
-.btn-danger {
-  color: var(--danger) !important;
-  border-color: var(--danger) !important;
-}
-
-/* --- Layout Frame --- */
 .content-area {
   flex: 1;
-  padding: 1.25rem 2rem 0; /* 상단 여백 1.25rem 추가 */
+  padding: 1.25rem 2rem 0;
   overflow: hidden;
-  /* 전체 스크롤 차단 */
   display: flex;
   flex-direction: column;
 }
@@ -370,93 +138,58 @@ input:checked + .slider:before {
   display: flex;
   flex-direction: column;
   overflow: hidden;
-  /* 내부 스크롤을 유도하기 위해 설정 */
 }
 
+.view-content-wrapper {
+  flex: 1;
+  overflow-y: auto;
+  padding-bottom: 2rem;
+}
+
+/* --- View Toggle --- */
+.view-toggle-container { margin-bottom: 1rem; display: flex; justify-content: flex-start; }
+.view-toggle { display: inline-flex; background-color: var(--primary-lv-0); padding: 4px; border-radius: 8px; border: 1px solid var(--border-color); }
+.toggle-btn { padding: 6px 16px; font-size: 13px; font-weight: 600; color: var(--text-muted); background: none; border: none; border-radius: 6px; cursor: pointer; }
+.toggle-btn.active { background-color: var(--white); color: var(--primary-color); box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
+
+/* --- System Status List (Docker Style) --- */
+.system-status-list { display: flex; flex-direction: column; gap: 0.5rem; }
+.system-list-header { display: flex; align-items: center; padding: 0.75rem 1.25rem; background-color: var(--bg-light); border-bottom: 1px solid var(--border-color); font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; }
+.system-row { display: flex; align-items: center; padding: 1rem 1.25rem; background-color: var(--white); border: 1px solid var(--border-color); border-radius: 6px; transition: all 0.2s; }
+.system-row:hover { border-color: var(--primary-lv-3); box-shadow: 0 4px 12px rgba(0,0,0,0.03); }
+.col-status { width: 100px; display: flex; align-items: center; gap: 0.5rem; }
+.col-info { flex: 1.5; }
+.col-network { flex: 1; }
+.col-remote { flex: 1; display: flex; align-items: center; gap: 0.5rem; }
+.col-traffic { flex: 1.2; }
+.col-actions { width: 120px; display: flex; justify-content: flex-end; }
+.status-dot { width: 10px; height: 10px; border-radius: 50%; }
+.status-dot.online { background-color: var(--success); box-shadow: 0 0 6px var(--success); }
+.status-text { font-size: 11px; font-weight: 600; color: var(--success); }
+.asset-primary { font-weight: 700; font-size: 14px; }
+.asset-secondary { font-size: 12px; color: var(--text-muted); }
+.ip-address { font-weight: 600; font-family: monospace; color: var(--primary-color); }
+.traffic-mini-chart { display: flex; flex-direction: column; gap: 4px; }
+.traffic-info { display: flex; justify-content: space-between; font-size: 11px; }
+.progress-bg { height: 4px; background: var(--primary-lv-0); border-radius: 2px; overflow: hidden; }
+.progress-fill { height: 100%; background: var(--primary-color); }
+.icon-btn { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 4px; border: 1px solid var(--border-color); background: var(--white); color: var(--text-muted); cursor: pointer; }
+.icon-btn:hover { background-color: var(--primary-light); border-color: var(--primary-color); color: var(--primary-color); }
+
 /* --- Footer --- */
-.main-footer {
+.main-footer { height: 40px; background-color: var(--white); border-top: 1px solid var(--border-color); display: flex; align-items: center; justify-content: flex-end; padding: 0 1.5rem; flex-shrink: 0; }
-  height: 40px;
+.main-footer p { font-size: 0.75rem; color: var(--text-muted); }
-  background-color: var(--white);
-  border-top: 1px solid var(--border-color);
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  padding: 0 1.5rem;
-  flex-shrink: 0;
-}
 
-.main-footer p {
+/* --- Utility --- */
-  font-family: 'Pretendard Variable', Pretendard, sans-serif;
+.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; padding: 0 0.8rem; font-size: 12px; font-weight: 600; border-radius: 4px; cursor: pointer; height: 28px; }
-  font-size: 0.75rem;
+.btn-primary { background-color: var(--primary-color); color: var(--white); border: none; }
-  font-weight: 300;
+.btn-outline { background-color: transparent; color: var(--text-muted); border: 1px solid var(--border-color); }
-  line-height: 1.25rem;
+.badge { padding: 2px 6px; border-radius: 4px; font-size: 11px; font-weight: 700; }
-  letter-spacing: -0.0175rem;
+.badge-primary { background-color: var(--primary-color); color: white; }
-  color: var(--text-muted);
+.badge-light { background: var(--bg-color); color: var(--text-muted); border: 1px solid var(--border-color); }
-  user-select: none;
+.hidden { display: none !important; }
-  pointer-events: all;
-  -webkit-user-drag: none;
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
-.hidden {
-  display: none !important;
-}
-
-.text-nowrap {
-  white-space: nowrap;
-}
-
-/* --- Utility Styles --- */
-.badge {
-  padding: 2px 6px;
-  border-radius: 4px;
-  font-size: 11px;
-  font-weight: 700;
-  white-space: nowrap;
-}
-
-.badge-primary {
-  background-color: var(--primary-color);
-  color: white;
-}
-
-.badge-muted {
-  background-color: #9CA3AF;
-  color: white;
-}
-
-.text-tag {
-  color: var(--text-muted);
-  font-size: 11px;
-  padding: 1px 5px;
-  border: 1px solid var(--border-color);
-  border-radius: 3px;
-  background-color: var(--bg-light);
-}
-
-.font-bold {
-  font-weight: 700;
-}
-
-/* --- Responsive Design (Tablet & Mobile) --- */
-@media (max-width: 1200px) {
-  .header-container { gap: 0.75rem; padding: 0 1rem; }
-  .brand h1 { font-size: 1rem; }
-  .brand h1 .sub-title { font-size: 0.75rem; }
-}
-
-@media (max-width: 992px) {
-  .main-header { height: auto; padding: 0.5rem 0; }
-  .header-container { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
-  .integrated-nav { width: 100%; justify-content: flex-start; border-top: 1px solid var(--border-color); padding-top: 0.5rem; }
-  .header-actions { width: 100%; justify-content: flex-end; padding-top: 0.5rem; }
-  .content-area { padding: 0 1rem; }
-}
 
 @media (max-width: 768px) {
-  .brand h1 .sub-title { display: none; } /* 아주 좁은 화면에선 영문명 숨김 */
+  .brand h1 .sub-title { display: none; }
-  .header-actions .btn span { display: none; } /* 버튼 텍스트 숨기고 아이콘만 표시 */
+  .header-actions .btn span { display: none; }
-  .header-actions .btn { padding: 0 0.5rem; }
 }

src/views/List/ListFactory.ts

@@ -1,8 +1,9 @@
 import { ASSET_SCHEMA, UI_TEXT } from '../../core/schema';
-import { dynamicSort, renderPageHeader } from '../../core/utils';
+import { dynamicSort, renderPageHeader, calculateAssetAge, formatInline } from '../../core/utils';
 import { setupTableSorting, SortState } from '../../core/tableHandler';
 import { renderFilterBar, applyCommonFilters } from '../../core/filterHandler';
-import { createIcons, RefreshCcw, Plus, Edit2, Trash2, Users, Cloud, CreditCard, DollarSign, Paperclip } from 'lucide';
+import { state } from '../../core/state';
+import { IMAGE_LOCATIONS } from '../../components/Modal/SharedData';
 
 export interface ColumnDef {
   header: string;           
@@ -28,97 +29,536 @@ export interface ListViewConfig {
   columns: ColumnDef[];
   onRowClick?: (asset: any) => void;
   emptyMessage?: string;
-  persistentSortState?: SortState; // Allow passing external sort state (like DomainListView)
+  persistentSortState?: SortState; 
 }
 
 export function createListView(container: HTMLElement, config: ListViewConfig) {
+  // 1. 컨테이너 초기화 및 헤더 렌더링
+  container.innerHTML = '';
   renderPageHeader(container, config.title);
 
   const fullList = config.dataSource();
   let sortState: SortState = config.persistentSortState || { key: '', direction: 'asc' };
-  
-  // Initialize currentFilters with all possible keys to avoid undefined issues
   let currentFilters: any = { keyword: '', corp: '', dept: '', loc: '', field: '', type: '' };
   
+  // 강제로 기본 뷰 모드를 'system' (자산 현황)으로 설정
+  state.currentViewMode = 'system';
+
+  // 2. 뷰 전환 토글 버튼 생성 (명칭 변경)
+  const toggleWrapper = document.createElement('div');
+  toggleWrapper.className = 'view-toggle-container';
+  toggleWrapper.innerHTML = `
+    <div class="view-toggle">
+      <button class="toggle-btn ${state.currentViewMode === 'system' ? 'active' : ''}" data-mode="system">자산 현황</button>
+      <button class="toggle-btn ${state.currentViewMode === 'asset' ? 'active' : ''}" data-mode="asset">자산 목록</button>
+    </div>
+  `;
+  container.appendChild(toggleWrapper);
+
+  // 3. 필터 바 생성 (자산 목록에서만 사용)
   const filterBar = document.createElement('div');
   filterBar.className = 'search-bar';
   container.appendChild(filterBar);
 
+  // 4. 컨텐츠 영역 생성
+  const contentWrapper = document.createElement('div');
+  contentWrapper.className = 'view-content-wrapper';
+  container.appendChild(contentWrapper);
+
+  // --- 내부 상태 ---
+  let selectedLocation: string | null = '기술개발센터';
+  let selectedDetailLocation: string | null = null;
+  let dynamicMapConfig: Record<string, any[]> = {};
+
+  // 맵 설정 미리 로드
+  const fetchMapConfig = async () => {
+    try {
+      const res = await fetch(`http://${location.hostname}:3000/api/maps`);
+      dynamicMapConfig = await res.json();
+    } catch (err) { console.error('Failed to fetch map config:', err); }
+  };
+  fetchMapConfig();
+
+  // [자산 현황] 대시보드 렌더러
+  const renderSystemStatus = () => {
+    const isPcView = config.title === 'PC';
+    const locationCounts: Record<string, number> = {};
+    const pcTypeCounts = { public: 0, server: 0, personal: 0 };
+    const extSubCounts = { tech: 0, idc: 0, hm: 0 };
+    const intSubCounts = { tech: 0, idc: 0, hm: 0 };
+    let internalCount = 0;
+    let externalCount = 0;
+
+    const extTypeCounts: Record<string, number> = {};
+    const intTypeCounts: Record<string, number> = {};
+    let locWarningCount = 0;
+    let typeWarningCount = 0;
+
+    fullList.forEach(asset => {
+      const loc = asset[ASSET_SCHEMA.LOCATION.key] || '미지정';
+      const serviceTypeKey = ASSET_SCHEMA.SERVICE_TYPE?.key || 'service_type';
+      const serviceType = asset[serviceTypeKey] || '외부';
+      const type = asset[ASSET_SCHEMA.ASSET_TYPE.key] || '';
+
+      locationCounts[loc] = (locationCounts[loc] || 0) + 1;
+
+      if (isPcView) {
+        if (type.includes('공용')) pcTypeCounts.public++;
+        else if (type.includes('서버')) pcTypeCounts.server++;
+        else pcTypeCounts.personal++;
+      }
+
+      if (serviceType === '내부') {
+        internalCount++;
+        if (loc.includes('기술개발')) intSubCounts.tech++;
+        else if (loc.includes('IDC')) intSubCounts.idc++;
+        else if (loc.includes('한맥')) intSubCounts.hm++;
+        if (type) intTypeCounts[type] = (intTypeCounts[type] || 0) + 1;
+      } else {
+        externalCount++;
+        if (loc.includes('기술개발')) extSubCounts.tech++;
+        else if (loc.includes('IDC')) extSubCounts.idc++;
+        else if (loc.includes('한맥')) extSubCounts.hm++;
+        if (type) extTypeCounts[type] = (extTypeCounts[type] || 0) + 1;
+        
+        // [경고 로직 세분화] 외부 운영 기준 (공백/대소문자 무시)
+        if (serviceType === '외부') {
+            if (loc !== 'IDC') locWarningCount++;
+            if (type.toLowerCase().replace(/\s/g, '').includes('서버pc')) typeWarningCount++;
+        }
+      }
+    });
+
+    const locLabels = Object.keys(locationCounts).sort((a, b) => locationCounts[b] - locationCounts[a]);
+    const pcLabels = ['공용PC', '서버PC', '개인PC'];
+    const pcData = [pcTypeCounts.public, pcTypeCounts.server, pcTypeCounts.personal];
+
+    const chartLabels = isPcView ? pcLabels : locLabels;
+    const chartData = isPcView ? pcData : locLabels.map(l => locationCounts[l]);
+
+    contentWrapper.innerHTML = `
+      <div class="system-dashboard" style="height: calc(100vh - 240px); overflow: hidden; padding: 0.5rem 0; font-family: 'Pretendard', sans-serif; letter-spacing: -0.02em; display: flex; flex-direction: column;">
+
+        <!-- [자산 통계 그룹] -->
+        <div style="border-bottom: 1px solid var(--border-color); padding-bottom: 1.25rem; margin-bottom: 1rem; flex-shrink: 0; display: grid; grid-template-columns: 1fr 1.5fr 1.5fr; gap: 2rem;">
+          <div class="stat-group-item" style="min-width: 0;">
+            <div style="font-size: 11px; font-weight: 600; color: var(--text-muted); margin-bottom: 0.25rem;">총 보유 자산</div>
+            <div style="font-size: 28px; font-weight: 800; color: var(--text-main); line-height: 1.1;">${fullList.length}<span style="font-size: 13px; font-weight: 600; margin-left: 4px; color: var(--text-muted);">대</span></div>
+            <div style="display: flex; gap: 0.75rem; font-size: 14px; color: var(--text-muted); margin-top: 0.5rem;">
+              <span>외부: <strong style="color:#35635C; font-size: 18px;">${externalCount}</strong></span>
+              <span>내부: <strong style="color:#94A3B8; font-size: 18px;">${internalCount}</strong></span>
+            </div>
+          </div>
+
+          <div class="stat-group-item" style="border-left: 1px solid var(--border-color); padding-left: 1.5rem; min-width: 0;">
+            ${isPcView ? `
+            <div style="font-size: 11px; font-weight: 600; color: var(--text-muted); margin-bottom: 0.25rem;">PC 유형별 현황</div>
+            <div style="display: flex; gap: 1rem; font-size: 14px; color: var(--text-muted); margin-top: 0.5rem;">
+              <span>공용: <strong style="color:var(--text-main); font-size: 18px;">${pcTypeCounts.public}</strong></span>
+              <span>서버: <strong style="color:var(--text-main); font-size: 18px;">${pcTypeCounts.server}</strong></span>
+              <span>개인: <strong style="color:var(--text-main); font-size: 18px;">${pcTypeCounts.personal}</strong></span>
+            </div>
+            ` : `
+            <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; gap: 0.5rem;">
+              <span style="font-size: 14px; font-weight: 800; color: var(--text-main); white-space: nowrap;">외부 (운영) 상세</span>
+              <div style="display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end;">
+                ${locWarningCount > 0 ? `<span style="background: #FFF7ED; color: #C2410C; font-size: 10px; font-weight: 800; padding: 2px 6px; border-radius: 4px; border: 1px solid #FFEDD5; white-space: nowrap;">위치부적절: ${locWarningCount}</span>` : ''}
+                ${typeWarningCount > 0 ? `<span style="background: #FFF1F2; color: #E11D48; font-size: 10px; font-weight: 800; padding: 2px 6px; border-radius: 4px; border: 1px solid #FDA4AF; white-space: nowrap;">형식부적절: ${typeWarningCount}</span>` : ''}
+              </div>
+            </div>
+            <div style="display: flex; flex-direction: column; gap: 0.3rem; font-size: 13px; color: var(--text-muted);">
+              <div style="display: flex; gap: 0.75rem; flex-wrap: wrap;">
+                <span>기술개발센터: <strong style="color:var(--text-main); font-size: 14px;">${extSubCounts.tech}</strong></span>
+                <span>IDC: <strong style="color:var(--text-main); font-size: 14px;">${extSubCounts.idc}</strong></span>
+                <span>한맥빌딩: <strong style="color:var(--text-main); font-size: 14px;">${extSubCounts.hm}</strong></span>
+              </div>
+              <div style="display: flex; gap: 0.6rem; flex-wrap: wrap; opacity: 0.9; border-top: 1px dashed var(--border-color); padding-top: 4px; margin-top: 2px;">
+                ${Object.entries(extTypeCounts).sort((a, b) => b[1] - a[1]).map(([type, count]) => {
+                    const isTypeWarning = type.toLowerCase().replace(/\s/g, '').includes('서버pc');
+                    return `<span style="${isTypeWarning ? 'color:#E11D48; font-weight:700;' : ''}; font-size: 13px;">${type}: <strong style="color:var(--text-main); font-size: 14px;">${count}</strong></span>`;
+                }).join('')}
+              </div>
+            </div>
+            `}
+          </div>
+
+          <div class="stat-group-item" style="border-left: 1px solid var(--border-color); padding-left: 1.5rem; min-width: 0;">
+             ${isPcView ? '' : `
+            <div style="display: flex; align-items: flex-end; gap: 0.75rem; margin-bottom: 0.5rem;">
+              <span style="font-size: 14px; font-weight: 800; color: var(--text-main);">내부 (테스트) 상세</span>
+            </div>
+            <div style="display: flex; flex-direction: column; gap: 0.3rem; font-size: 13px; color: var(--text-muted);">
+              <div style="display: flex; gap: 0.75rem; flex-wrap: wrap;">
+                <span>기술개발센터: <strong style="color:var(--text-main); font-size: 14px;">${intSubCounts.tech}</strong></span>
+                <span>IDC: <strong style="color:var(--text-main); font-size: 14px;">${intSubCounts.idc}</strong></span>
+                <span>한맥빌딩: <strong style="color:var(--text-main); font-size: 14px;">${intSubCounts.hm}</strong></span>
+              </div>
+              <div style="display: flex; gap: 0.6rem; flex-wrap: wrap; opacity: 0.9; border-top: 1px dashed var(--border-color); padding-top: 4px; margin-top: 2px;">
+                ${Object.entries(intTypeCounts).sort((a, b) => b[1] - a[1]).map(([type, count]) => `<span style="font-size: 13px;">${type}: <strong style="color:var(--text-main); font-size: 14px;">${count}</strong></span>`).join('')}
+              </div>
+            </div>
+            `}
+          </div>
+        </div>
+
+        <div style="display: flex; flex: 1; min-height: 0; border-top: 1px solid var(--border-color);">
+          <!-- 좌측: 자산 현황 목록 (Border-based Separation) -->
+          <div class="list-section" style="flex: 1.1; display: flex; flex-direction: column; min-height: 0; padding: 1rem 1.5rem 0 0; border-right: 1px solid var(--border-color);">
+            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; flex-shrink: 0;">
+              <h4 id="list-section-title" style="font-size: 14px; font-weight: 700; color: var(--text-main); margin:0;">자산 현황 목록</h4>
+              <div style="display: flex; align-items: center; gap: 8px;">
+                <span style="font-size: 11px; font-weight: 600; color: var(--text-muted);">위치:</span>
+                <select id="select-loc" style="padding: 2px 8px; font-size: 11px; border-radius: 4px; border: 1px solid var(--border-color); outline: none; background: white; cursor:pointer; font-family: 'Pretendard';">
+                  <option value="">전체</option>
+                  ${Array.from(new Set(fullList.map(a => a[ASSET_SCHEMA.LOCATION.key] || '미지정'))).sort().map(l => `<option value="${l}" ${l === selectedLocation ? 'selected' : ''}>${l}</option>`).join('')}
+                </select>
+                <span style="font-size: 11px; font-weight: 600; color: var(--text-muted);">상세:</span>
+                <select id="select-detail-loc" style="padding: 2px 8px; font-size: 11px; border-radius: 4px; border: 1px solid var(--border-color); outline: none; background: white; cursor:pointer; font-family: 'Pretendard'; max-width: 120px;"></select>
+              </div>
+            </div>
+            <div style="flex: 1; overflow-y: auto;">
+              <table style="width: 100%; border-collapse: collapse; table-layout: fixed;">
+                <thead style="position: sticky; top: 0; background: #fff; z-index: 10;">
+                  <tr style="text-align: left; font-size: 11px; color: var(--text-muted);">
+                    <th style="padding: 10px 0; font-weight: 700; border-bottom: 2px solid var(--border-color); width: 80px; text-align:center; background: #fff;">분류</th>
+                    <th style="padding: 10px 0; font-weight: 700; border-bottom: 2px solid var(--border-color); width: 130px; background: #fff;">용도/자산명</th>
+                    <th style="padding: 10px 0; font-weight: 700; border-bottom: 2px solid var(--border-color); text-align:center; width: 90px; background: #fff;">관리자(정)</th>
+                    <th style="padding: 10px 0; font-weight: 700; border-bottom: 2px solid var(--border-color); text-align:center; width: 90px; background: #fff;">관리자(부)</th>
+                    <th style="padding: 10px 0; text-align: center; font-weight: 700; border-bottom: 2px solid var(--border-color); width: 100px; background: #fff;">상세위치</th>
+                  </tr>
+                </thead>
+                <tbody id="system-status-tbody" style="font-size: 12px;"></tbody>
+              </table>
+            </div>
+          </div>
+
+          <!-- 우측: 상세 정보 패널 (Box-less, Line-based) -->
+          <div id="system-detail-panel" style="flex: 0.9; display: flex; flex-direction: column; min-height: 0; padding: 1rem 0 0 1.5rem; overflow: hidden;">
+             <div id="detail-empty-state" style="height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; color: var(--text-muted); text-align: center;">
+                <p style="font-size: 1.125rem; font-weight: 500; color: #94A3B8;">목록에서 자산을 선택하면<br>상세 정보와 배치도가 표시됩니다.</p>
+             </div>
+             <div id="detail-content" style="display: none; height: 100%; flex-direction: column;">
+                <!-- 상단 요약 정보 (Wrapping 방지 최적화) -->
+                <div style="display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border-color); flex-shrink: 0; gap: 2rem;">
+                  <div style="display: flex; gap: 2.5rem; align-items: flex-end; min-width: 0; flex: 1;">
+                    <div style="flex-shrink: 0;">
+                      <label style="display: block; font-size: 10px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; margin-bottom: 4px;">자산번호</label>
+                      <div id="detail-asset-code" style="font-size: 14px; font-weight: 800; color: var(--primary-color); white-space: nowrap;"></div>
+                    </div>
+                    <div style="flex-shrink: 0;">
+                      <label style="display: block; font-size: 10px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; margin-bottom: 4px;">유형</label>
+                      <div id="detail-asset-type" style="font-size: 14px; font-weight: 600; color: var(--text-main); white-space: nowrap;"></div>
+                    </div>
+                    <div style="flex: 1; min-width: 0;">
+                      <label style="display: block; font-size: 10px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; margin-bottom: 4px;">메모 요약</label>
+                      <div id="detail-memo" style="font-size: 14px; color: var(--text-main); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;"></div>
+                    </div>
+                  </div>
+                  <button id="btn-view-full-detail" style="flex-shrink: 0; padding: 6px 16px; font-size: 12px; font-weight: 700; background: var(--primary-color); color: white; border: none; border-radius: 4px; cursor: pointer; transition: opacity 0.2s;">상세 보기</button>
+                </div>
+
+                <!-- 메인 배치도 영역 -->
+                <div style="flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden;">
+                  <div style="margin-bottom: 0.75rem; flex-shrink: 0; display: flex; justify-content: space-between; align-items: center;">
+                    <label style="font-size: 11px; font-weight: 700; color: var(--text-main); text-transform: uppercase;">설치 위치 배치도</label>
+                  </div>
+                  <div id="detail-photo-wrapper" style="width: 100%; flex: 1; overflow: hidden; display: flex; align-items: center; justify-content: center; position: relative; border: 1px solid var(--border-color); background: #f0f0f0;">
+                    <div class="layout-map-container readonly" style="position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;">
+                      <img id="detail-photo" src="" style="display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; pointer-events: none;" />
+                      <div id="detail-marker" class="layout-marker pulse-marker" style="display: none; position: absolute; z-index: 20;"></div>
+                      <div id="detail-overlay-layer" class="digital-overlay-layer" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; display: flex; align-items: center; justify-content: center;"></div>
+                    </div>
+                    <div id="detail-no-photo" style="display: none; height: 100%; flex-direction: column; align-items: center; justify-content: center; gap: 1rem;">
+                      <span style="color: #94A3B8; font-size: 13px; font-weight: 500;">등록된 배치도가 없습니다.</span>
+                    </div>
+                  </div>
+                </div>
+             </div>
+          </div>
+        </div>
+      </div>
+    `;
+
+    // 상세 정보 패널 업데이트 함수
+    const updateDetailPanel = (asset: any) => {
+      const emptyState = document.getElementById('detail-empty-state');
+      const content = document.getElementById('detail-content');
+      if (!emptyState || !content) return;
+
+      emptyState.style.display = 'none';
+      content.style.display = 'flex';
+
+      // 텍스트 정보 업데이트
+      const codeEl = document.getElementById('detail-asset-code');
+      const typeEl = document.getElementById('detail-asset-type');
+      const memoEl = document.getElementById('detail-memo');
+      const viewBtn = document.getElementById('btn-view-full-detail') as HTMLButtonElement;
+
+      if (codeEl) codeEl.textContent = asset.asset_code || '미지정';
+      if (typeEl) typeEl.textContent = asset.asset_type || '-';
+      if (memoEl) memoEl.textContent = asset.memo || '-';
+      if (viewBtn) {
+        viewBtn.onclick = () => config.onRowClick && config.onRowClick(asset);
+      }
+
+      // 위치 및 사진 정보 업데이트
+      const photo = document.getElementById('detail-photo') as HTMLImageElement;
+      const marker = document.getElementById('detail-marker');
+      const overlayLayer = document.getElementById('detail-overlay-layer');
+      const noPhoto = document.getElementById('detail-no-photo');
+      const photoWrapper = document.getElementById('detail-photo-wrapper');
+
+      const bldg = asset.location || '';
+      const detail = asset.location_detail || '';
+      // 숫자 0도 유효한 좌표이므로 정확한 체크 필요
+      const x = asset.loc_x;
+      const y = asset.loc_y;
+      const hasCoords = (x !== null && x !== undefined && x !== '' && x !== 'null') && 
+                        (y !== null && y !== undefined && y !== '' && y !== 'null');
+      
+      const savedImg = asset.location_photo || asset.loc_img;
+      const locImgs = IMAGE_LOCATIONS[bldg.trim()]?.[detail.trim()] || null;
+      const imgPath = (savedImg && locImgs?.includes(savedImg)) ? savedImg : (locImgs ? locImgs[0] : null);
+
+      // 좌표가 없으면 사진이 있어도 '정보 없음' 상태로 유도 (사용자 요청)
+      if (imgPath && hasCoords) {
+        photo.src = imgPath;
+        photo.style.display = 'block';
+        if (noPhoto) noPhoto.style.display = 'none';
+        
+        photo.onload = () => {
+          const updateMarkerPos = () => {
+              const imgW = photo.clientWidth;
+              const imgH = photo.clientHeight;
+
+              if (marker) {
+                marker.style.left = `calc(50% - ${imgW/2}px + ${ (parseFloat(x as string) * imgW) / 100 }px)`;
+                marker.style.top = `calc(50% - ${imgH/2}px + ${ (parseFloat(y as string) * imgH) / 100 }px)`;
+                marker.style.display = 'block';
+              }
+
+              if (overlayLayer) {
+                overlayLayer.style.width = `${imgW}px`;
+                overlayLayer.style.height = `${imgH}px`;
+                overlayLayer.style.left = `calc(50% - ${imgW/2}px)`;
+                overlayLayer.style.top = `calc(50% - ${imgH/2}px)`;
+
+                const boxes = dynamicMapConfig[imgPath] || [];
+                if (boxes.length > 0) {
+                  overlayLayer.innerHTML = `
+                    <svg viewBox="0 0 100 100" preserveAspectRatio="none" style="width:100%; height:100%;">
+                      <g class="seat-group">
+                        ${boxes.map((b, i) => {
+                          const isSelected = b.x === x && b.y === y;
+                          const fill = isSelected ? 'rgba(255, 61, 0, 0.4)' : 'rgba(30, 81, 73, 0.02)';
+                          const stroke = isSelected ? '#FF3D00' : 'rgba(30, 81, 73, 0.15)';
+                          const strokeWidth = isSelected ? '0.8' : '0.2';
+                          
+                          if (isSelected && marker) {
+                              marker.style.left = `calc(50% - ${imgW/2}px + ${ (parseFloat(b.x) + parseFloat(b.w)/2) * imgW / 100 }px)`;
+                              marker.style.top = `calc(50% - ${imgH/2}px + ${ (parseFloat(b.y) + parseFloat(b.h)/2) * imgH / 100 }px)`;
+                          }
+
+                          return `<rect class="map-seat-obj" x="${b.x}" y="${b.y}" width="${b.w}" height="${b.h}" rx="0.5" style="fill:${fill}; stroke:${stroke}; stroke-width:${strokeWidth};" />`;
+                        }).join('')}
+                      </g>
+                    </svg>
+                  `;
+                } else {
+                  overlayLayer.innerHTML = '';
+                }
+              }
+          };
+          updateMarkerPos();
+          window.addEventListener('resize', updateMarkerPos);
+        };
+      } else {
+        photo.style.display = 'none';
+        if (marker) marker.style.display = 'none';
+        if (overlayLayer) overlayLayer.innerHTML = '';
+        if (noPhoto) {
+            noPhoto.style.display = 'flex';
+            const msg = noPhoto.querySelector('span');
+            if (msg) msg.textContent = !hasCoords ? '등록된 위치 좌표 정보가 없습니다.' : '등록된 배치도가 없습니다.';
+        }
+      }
+    };
+
+    const updateTableOnly = () => {
+      let filtered = selectedLocation 
+        ? fullList.filter(a => (a[ASSET_SCHEMA.LOCATION.key] || '미지정') === selectedLocation)
+        : fullList;
+      const currentDetailLocs = Array.from(new Set(filtered.map(a => a[ASSET_SCHEMA.LOC_DETAIL.key] || '미지정'))).sort();
+      if (selectedDetailLocation) filtered = filtered.filter(a => (a[ASSET_SCHEMA.LOC_DETAIL.key] || '미지정') === selectedDetailLocation);
+      const finalDisplayList = (!selectedLocation && !selectedDetailLocation) ? filtered.slice(0, 10) : filtered;
+
+      const titleEl = document.getElementById('list-section-title');
+      if (titleEl) titleEl.textContent = selectedLocation ? `${selectedLocation} 자산 현황 (${finalDisplayList.length}대)` : '위치별 자산등록현황 (최근 등록)';
+      const selectEl = document.getElementById('select-detail-loc') as HTMLSelectElement;
+      if (selectEl && !selectedDetailLocation) {
+        selectEl.innerHTML = `<option value="">전체보기</option>` + currentDetailLocs.map(dl => `<option value="${dl}">${dl}</option>`).join('');
+      }
+
+      const tbody = document.getElementById('system-status-tbody');
+      if (tbody) {
+        tbody.innerHTML = finalDisplayList.length === 0 
+          ? `<tr><td colspan="4" style="padding: 3rem; text-align: center; color: var(--text-muted);">조회된 자산이 없습니다.</td></tr>`
+          : finalDisplayList.map(asset => {
+              const purpose = asset[ASSET_SCHEMA.ASSET_PURPOSE.key] || '';
+              const serviceTypeKey = ASSET_SCHEMA.SERVICE_TYPE?.key || 'service_type';
+              const serviceType = asset[serviceTypeKey] || '외부';
+              const type = asset[ASSET_SCHEMA.ASSET_TYPE.key] || '';
+              const loc = asset[ASSET_SCHEMA.LOCATION.key] || '';
+              
+              const labelColor = serviceType === '내부' ? '#94A3B8' : '#35635C';
+              const managerMain = asset[ASSET_SCHEMA.MANAGER_MAIN.key] || '-';
+              const managerSub = asset[ASSET_SCHEMA.MANAGER_SUB.key] || '-';
+              
+              // [경고 로직] 외부 운영인데 서버PC이거나 IDC가 아닌 경우
+              const isLocWarning = serviceType === '외부' && loc !== 'IDC';
+              const isTypeWarning = serviceType === '외부' && type.toLowerCase().replace(/\s/g, '').includes('서버pc');
+              const isWarning = isLocWarning || isTypeWarning;
+              const warningStyle = isWarning ? 'background-color: #FFF1F2; border-left: 3px solid #E11D48;' : '';
+
+              let warningReason = '';
+              if (isLocWarning && isTypeWarning) warningReason = '위치/형식 부적절';
+              else if (isLocWarning) warningReason = '위치 부적절';
+              else if (isTypeWarning) warningReason = '형식 부적절';
+
+              return `
+              <tr style="border-bottom: 1px solid var(--border-color); cursor: pointer; ${warningStyle}" class="mini-row" data-id="${asset.id}">
+                <td style="padding: 10px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align:center;">
+                    <div style="display:flex; flex-direction:column; align-items:center; gap:2px;">
+                        <span style="color: ${isWarning ? '#E11D48' : labelColor}; font-weight: 800; font-size: 12px;">${serviceType}</span>
+                        ${isWarning ? `<span style="color: #E11D48; font-size: 9px; font-weight: 700; white-space: nowrap;">${warningReason}</span>` : ''}
+                    </div>
+                </td>
+                <td style="padding: 10px 0; font-weight: 600; color: ${isWarning ? '#991B1B' : 'var(--text-main)'}; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;" title="${purpose}">${purpose || '-'}</td>
+                <td style="padding: 10px 0; text-align: center; color: var(--text-main); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">${managerMain}</td>
+                <td style="padding: 10px 0; text-align: center; color: var(--text-main); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">${managerSub}</td>
+                <td style="padding: 10px 0; text-align: center; color: var(--text-main); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">${asset[ASSET_SCHEMA.LOC_DETAIL.key] || '-'}</td>
+              </tr>`;
+            }).join('');
+        tbody.querySelectorAll('.mini-row').forEach(row => {
+          row.addEventListener('click', () => {
+            tbody.querySelectorAll('.mini-row').forEach(r => {
+                const rIsWarning = (r as HTMLElement).style.borderLeftColor === 'rgb(225, 29, 72)'; // E11D48
+                (r as HTMLElement).style.backgroundColor = rIsWarning ? '#FFF1F2' : 'transparent';
+            });
+            (row as HTMLElement).style.backgroundColor = '#EBF2F1'; // 선택 하이라이트
+            const id = (row as HTMLElement).getAttribute('data-id');
+            const asset = fullList.find(a => a.id === id);
+            if (asset) updateDetailPanel(asset);
+          });
+          row.addEventListener('mouseenter', () => { 
+            if ((row as HTMLElement).style.backgroundColor !== 'rgb(235, 242, 241)') {
+                (row as HTMLElement).style.backgroundColor = '#F8FAFA'; 
+            }
+          });
+          row.addEventListener('mouseleave', () => { 
+            const isWarning = (row as HTMLElement).style.borderLeftColor === 'rgb(225, 29, 72)';
+            if ((row as HTMLElement).style.backgroundColor !== 'rgb(235, 242, 241)') {
+                (row as HTMLElement).style.backgroundColor = isWarning ? '#FFF1F2' : 'transparent'; 
+            }
+          });
+        });
+      }
+    };
+
+    (window as any).dispatchLocFilter = (loc: string) => {
+      if (isPcView) return; 
+      selectedLocation = loc;
+      selectedDetailLocation = null;
+      renderSystemStatus();
+    };
+
+    setTimeout(() => {
+      const selectLoc = document.getElementById('select-loc') as HTMLSelectElement;
+      const selectDetailLoc = document.getElementById('select-detail-loc') as HTMLSelectElement;
+
+      selectLoc?.addEventListener('change', (e) => {
+        selectedLocation = (e.target as HTMLSelectElement).value || null;
+        selectedDetailLocation = null;
+        updateTableOnly();
+      });
+      selectDetailLoc?.addEventListener('change', (e) => {
+        selectedDetailLocation = (e.target as HTMLSelectElement).value || null;
+        updateTableOnly();
+      });
+      updateTableOnly();
+    }, 50);
+  };
+
+  // [자산 목록] 테이블 렌더러
   const tableWrapper = document.createElement('div');
   tableWrapper.className = 'table-container';
   const table = document.createElement('table');
-  
-  // 1. 헤더 생성
   const thead = document.createElement('thead');
-  const trHead = document.createElement('tr');
-  config.columns.forEach(col => {
-    const th = document.createElement('th');
-    th.innerHTML = col.header;
-    if (col.sortKey) th.setAttribute('data-sort', col.sortKey);
-    if (col.width) th.style.width = col.width;
-    if (col.align) th.style.textAlign = col.align;
-    if (col.className) th.className = col.className;
-    trHead.appendChild(th);
-  });
-  thead.appendChild(trHead);
-  table.appendChild(thead);
-
-  // 2. 본문 생성
   const tbody = document.createElement('tbody');
   tbody.id = 'dynamic-tbody';
+  table.appendChild(thead);
   table.appendChild(tbody);
-
   tableWrapper.appendChild(table);
-  container.appendChild(tableWrapper);
 
-  // 3. 테이블 업데이트 로직
   const updateTable = () => {
+    if (state.currentViewMode !== 'asset') return;
     let filtered = applyCommonFilters(fullList, currentFilters, config.searchKeys as any[]);
+    if (sortState.key) filtered = dynamicSort(filtered, sortState.key, sortState.direction);
 
-    if (sortState.key) {
+    thead.innerHTML = `<tr>${config.columns.map(col => `
-      filtered = dynamicSort(filtered, sortState.key, sortState.direction);
+      <th ${col.sortKey ? `data-sort="${col.sortKey}"` : ''} 
-    }
+          style="${col.width ? `width:${col.width};` : ''}${col.align ? `text-align:${col.align};` : ''}"
+          class="${col.className || ''}">${col.header}</th>`).join('')}</tr>`;
 
-    tbody.innerHTML = '';
+    tbody.innerHTML = filtered.length === 0 
-    if (filtered.length === 0) {
+      ? `<tr><td colspan="${config.columns.length}" class="text-center" style="padding: 3rem; color: var(--text-muted);">${config.emptyMessage || UI_TEXT.MESSAGES.NO_DATA}</td></tr>`
-      const emptyMsg = config.emptyMessage || UI_TEXT.MESSAGES.NO_DATA;
+      : filtered.map(asset => `
-      tbody.innerHTML = `<tr><td colspan="${config.columns.length}" class="text-center" style="padding: 3rem; color: var(--text-muted);">${emptyMsg}</td></tr>`;
+          <tr style="cursor:pointer;" class="asset-row" data-id="${asset.id}">
-      return;
+            ${config.columns.map(col => `<td style="${col.align ? `text-align:${col.align};` : ''}" class="${col.className || ''}">${col.render(asset)}</td>`).join('')}
-    }
+          </tr>`).join('');
 
-    filtered.forEach((asset) => {
+    tbody.querySelectorAll('.asset-row').forEach((tr, idx) => {
-      const tr = document.createElement('tr');
+      tr.addEventListener('click', () => config.onRowClick && config.onRowClick(filtered[idx]));
-      if (config.onRowClick) {
-        tr.style.cursor = 'pointer';
-        tr.addEventListener('click', () => config.onRowClick!(asset));
-      }
-
-      config.columns.forEach(col => {
-        const td = document.createElement('td');
-        if (col.align) td.style.textAlign = col.align;
-        if (col.className) td.className = col.className;
-        td.innerHTML = col.render(asset);
-        tr.appendChild(td);
-      });
-
-      tbody.appendChild(tr);
     });
 
     setupTableSorting(table, sortState, (key, dir) => {
       sortState = { key, direction: dir };
-      // If external state was provided, sync it back
       if (config.persistentSortState) {
-          config.persistentSortState.key = key;
+        config.persistentSortState.key = key;
-          config.persistentSortState.direction = dir;
+        config.persistentSortState.direction = dir;
       }
       updateTable();
     });
 
-    // 모든 가능한 아이콘 로드 (안전하게)
+    // createIcons call removed as icons are no longer needed in dashboard
-    createIcons({ icons: { RefreshCcw, Plus, Edit2, Trash2, Users, Cloud, CreditCard, DollarSign, Paperclip } });
   };
 
-  // 4. 필터 바 렌더링
+  // --- 뷰 전환 로직 ---
+  const switchView = () => {
+    contentWrapper.innerHTML = '';
+    if (state.currentViewMode === 'asset') {
+      filterBar.style.display = 'flex';
+      contentWrapper.style.overflowY = 'auto';
+      contentWrapper.appendChild(tableWrapper);
+      updateTable();
+    } else {
+      filterBar.style.display = 'none';
+      contentWrapper.style.overflowY = 'hidden';
+      renderSystemStatus();
+    }
+  };
+
+  // 토글 버튼 이벤트
+  toggleWrapper.addEventListener('click', (e) => {
+    const btn = (e.target as HTMLElement).closest('.toggle-btn') as HTMLButtonElement;
+    if (!btn) return;
+    toggleWrapper.querySelectorAll('.toggle-btn').forEach(b => b.classList.remove('active'));
+    btn.classList.add('active');
+    state.currentViewMode = btn.getAttribute('data-mode') as 'asset' | 'system';
+    switchView();
+  });
+
+  // 필터 바 초기화
   renderFilterBar(filterBar, {
     ...config.filterOptions,
     onFilterChange: (filters) => {
@@ -127,18 +567,11 @@ export function createListView(container: HTMLElement, config: ListViewConfig) {
     }
   });
 
-  // 5. 동적 Select 박스 데이터 채우기
+  // 셀렉트 박스 채우기
   const populateSelect = (selector: string, dataKey: string) => {
     const select = container.querySelector(selector) as HTMLSelectElement;
     if (select) {
-      // Handle multiple possible keys for department names due to legacy data
+      const getVal = (a: any) => dataKey === ASSET_SCHEMA.CURRENT_DEPT.key ? (a[dataKey] || a['현사용부서'] || a['현사용조직']) : a[dataKey];
-      const getVal = (a: any) => {
-        if (dataKey === ASSET_SCHEMA.CURRENT_DEPT.key) {
-           return a[dataKey] || a['현사용부서'] || a['현사용조직'];
-        }
-        return a[dataKey];
-      }
-      
       const uniqueValues = Array.from(new Set(fullList.map(getVal))).filter(Boolean).sort();
       uniqueValues.forEach(val => {
         const opt = document.createElement('option');
@@ -154,6 +587,6 @@ export function createListView(container: HTMLElement, config: ListViewConfig) {
   if (config.filterOptions.showCorp) populateSelect('#filter-corp', ASSET_SCHEMA.PURCHASE_CORP.key);
   if (config.filterOptions.showType) populateSelect('#filter-type', ASSET_SCHEMA.ASSET_TYPE.key);
 
-  // 6. 초기 렌더링
+  // 초기 실행
-  updateTable();
+  switchView();
 }