Merge origin/main into HW_Dashboard and resolve conflicts

src/views/List/CloudListView.ts

@@ -8,17 +8,19 @@ export function renderCloudList(container: HTMLElement) {
   createListView(container, {
     title: '클라우드',
     dataSource: () => state.masterData.cloud || [],
-    searchKeys: ['PRODUCT_NAME', 'ASSET_PURPOSE', 'PURCHASE_VENDOR'],
+    searchKeys: ['PRODUCT_NAME', 'ASSET_PURPOSE', 'PURCHASE_VENDOR', 'ASSET_TYPE'],
     filterOptions: {
       keywordLabel: `통합 검색 (${ASSET_SCHEMA.PRODUCT_NAME.ui}/${ASSET_SCHEMA.PURCHASE_VENDOR.ui})`,
       showCorp: true,
-      showDept: true
+      showDept: true,
+      showType: true
     },
     onRowClick: (asset) => openSwModal(asset, 'view'),
     columns: [
       { header: ASSET_SCHEMA.PRODUCT_NAME.ui, sortKey: ASSET_SCHEMA.PRODUCT_NAME.key, render: a => a[ASSET_SCHEMA.PRODUCT_NAME.key] || '' },
       { header: ASSET_SCHEMA.ASSET_PURPOSE.ui, sortKey: ASSET_SCHEMA.ASSET_PURPOSE.key, render: a => a[ASSET_SCHEMA.ASSET_PURPOSE.key] || '' },
       { header: ASSET_SCHEMA.PURCHASE_VENDOR.ui, sortKey: ASSET_SCHEMA.PURCHASE_VENDOR.key, render: a => a[ASSET_SCHEMA.PURCHASE_VENDOR.key] || '' },
+      { header: ASSET_SCHEMA.ASSET_TYPE.ui, sortKey: ASSET_SCHEMA.ASSET_TYPE.key, align: 'center', width: '10%', render: a => a[ASSET_SCHEMA.ASSET_TYPE.key] || '-' },
       { 
         header: ASSET_SCHEMA.PURCHASE_AMOUNT.ui, 
         sortKey: ASSET_SCHEMA.PURCHASE_AMOUNT.key, 

src/views/List/CostListView.ts

@@ -7,15 +7,16 @@ export function renderCostList(container: HTMLElement) {
   createListView(container, {
     title: '비용관리',
     dataSource: () => sortAssets(state.masterData.cloud?.filter((a: any) => a.category === '비용관리') || []),
-    searchKeys: ['PRODUCT_NAME', 'MANAGER_MAIN', 'EMAIL_ACCOUNT'],
+    searchKeys: ['PRODUCT_NAME', 'MANAGER_MAIN', 'EMAIL_ACCOUNT', 'ASSET_TYPE'],
     filterOptions: {
       keywordLabel: `통합 검색 (${ASSET_SCHEMA.PRODUCT_NAME.ui}/${ASSET_SCHEMA.MANAGER_MAIN.ui})`,
       showCorp: true,
-      showDept: true
+      showDept: true,
+      showType: true
     },
     onRowClick: () => alert('상세 정보 준비 중입니다.'),
     columns: [
-      { header: ASSET_SCHEMA.ASSET_TYPE.ui, sortKey: ASSET_SCHEMA.ASSET_TYPE.key, align: 'center', render: a => a[ASSET_SCHEMA.ASSET_TYPE.key] || '' },
+      { header: ASSET_SCHEMA.ASSET_TYPE.ui, sortKey: ASSET_SCHEMA.ASSET_TYPE.key, align: 'center', width: '10%', render: a => a[ASSET_SCHEMA.ASSET_TYPE.key] || '-' },
       { header: ASSET_SCHEMA.ASSET_PURPOSE.ui, sortKey: ASSET_SCHEMA.ASSET_PURPOSE.key, render: a => formatInline(a[ASSET_SCHEMA.ASSET_PURPOSE.key] || '-') },
       { header: '현 사용자', sortKey: ASSET_SCHEMA.MANAGER_MAIN.key, align: 'center', render: a => a[ASSET_SCHEMA.MANAGER_MAIN.key] || '-' },
       { 

src/views/List/DomainListView.ts

@@ -12,24 +12,20 @@ export function renderDomainList(container: HTMLElement) {
   createListView(container, {
     title: '도메인',
     dataSource: () => state.masterData.domain || [],
-    searchKeys: ['DOMAIN_ADDR', 'ASSET_PURPOSE', 'PRODUCT_NAME'],
+    searchKeys: ['DOMAIN_ADDR', 'ASSET_PURPOSE', 'PRODUCT_NAME', 'ASSET_TYPE'],
     persistentSortState,
     emptyMessage: '등록된 도메인 정보가 없습니다.',
     filterOptions: {
       keywordLabel: `통합 검색 (${ASSET_SCHEMA.DOMAIN_ADDR.ui}/${ASSET_SCHEMA.PRODUCT_NAME.ui})`,
       showCorp: true,
-      showDept: true
+      showDept: true,
+      showType: true
     },
     onRowClick: (item) => openDomainModal(item),
     columns: [
       { header: ASSET_SCHEMA.DOMAIN_ADDR.ui, sortKey: ASSET_SCHEMA.DOMAIN_ADDR.key, align: 'left', render: a => a[ASSET_SCHEMA.DOMAIN_ADDR.key] || '' },
       { header: ASSET_SCHEMA.ASSET_PURPOSE.ui, sortKey: ASSET_SCHEMA.ASSET_PURPOSE.key, align: 'left', render: a => a[ASSET_SCHEMA.ASSET_PURPOSE.key] || '' },
-      { 
-        header: ASSET_SCHEMA.ASSET_TYPE.ui, 
-        sortKey: ASSET_SCHEMA.ASSET_TYPE.key, 
-        align: 'center', 
-        render: a => `<span class="badge badge-${a[ASSET_SCHEMA.ASSET_TYPE.key] === '관리중' ? 'primary' : 'muted'}">${a[ASSET_SCHEMA.ASSET_TYPE.key] || '-'}</span>` 
-      },
+      { header: ASSET_SCHEMA.ASSET_TYPE.ui, sortKey: ASSET_SCHEMA.ASSET_TYPE.key, align: 'center', width: '10%', render: a => a[ASSET_SCHEMA.ASSET_TYPE.key] || '-' },
       { header: ASSET_SCHEMA.PURCHASE_CORP.ui, sortKey: ASSET_SCHEMA.PURCHASE_CORP.key, align: 'center', render: a => a[ASSET_SCHEMA.PURCHASE_CORP.key] || '' },
       { header: ASSET_SCHEMA.EXPIRED_DATE.ui, sortKey: ASSET_SCHEMA.EXPIRED_DATE.key, align: 'center', render: a => a[ASSET_SCHEMA.EXPIRED_DATE.key] || '' },
       { header: ASSET_SCHEMA.MEMO.ui, sortKey: ASSET_SCHEMA.MEMO.key, className: 'col-memo', render: a => formatInline(a[ASSET_SCHEMA.MEMO.key] || '-') }

src/views/List/EquipmentListView.ts

@@ -8,11 +8,12 @@ export function renderEquipmentList(container: HTMLElement) {
   createListView(container, {
     title: '업무지원장비',
     dataSource: () => sortAssets(state.masterData.equipment || []),
-    searchKeys: ['MODEL_NAME', 'CURRENT_USER', 'ASSET_MFR'],
+    searchKeys: ['MODEL_NAME', 'CURRENT_USER', 'ASSET_MFR', 'ASSET_TYPE'],
     filterOptions: {
       keywordLabel: `통합 검색 (${ASSET_SCHEMA.MODEL_NAME.ui}/${ASSET_SCHEMA.ASSET_MFR.ui})`,
       showLoc: true,
-      showDept: true
+      showDept: true,
+      showType: true
     },
     onRowClick: (asset) => openHwModal(asset, 'view'),
     columns: [
@@ -23,7 +24,7 @@ export function renderEquipmentList(container: HTMLElement) {
         render: a => `<span class="badge badge-${a[ASSET_SCHEMA.HW_STATUS.key] === '대여중' ? 'primary' : 'success'}">${a[ASSET_SCHEMA.HW_STATUS.key] || '보관중'}</span>` 
       },
       { header: ASSET_SCHEMA.CURRENT_USER.ui, sortKey: ASSET_SCHEMA.CURRENT_USER.key, align: 'center', render: a => a[ASSET_SCHEMA.CURRENT_USER.key] || '-' },
-      { header: ASSET_SCHEMA.ASSET_TYPE.ui, sortKey: ASSET_SCHEMA.ASSET_TYPE.key, align: 'center', render: a => a[ASSET_SCHEMA.ASSET_TYPE.key] || '' },
+      { header: ASSET_SCHEMA.ASSET_TYPE.ui, sortKey: ASSET_SCHEMA.ASSET_TYPE.key, align: 'center', width: '10%', render: a => a[ASSET_SCHEMA.ASSET_TYPE.key] || '-' },
       { header: ASSET_SCHEMA.ASSET_MFR.ui, sortKey: ASSET_SCHEMA.ASSET_MFR.key, align: 'center', render: a => a[ASSET_SCHEMA.ASSET_MFR.key] || '' },
       { header: ASSET_SCHEMA.MODEL_NAME.ui, sortKey: ASSET_SCHEMA.MODEL_NAME.key, render: a => formatInline(a[ASSET_SCHEMA.MODEL_NAME.key] || a.명칭 || '-') },
       { header: ASSET_SCHEMA.ASSET_COUNT.ui, sortKey: ASSET_SCHEMA.ASSET_COUNT.key, align: 'center', render: a => a[ASSET_SCHEMA.ASSET_COUNT.key] || '1' },

src/views/List/FacilityListView.ts

@@ -8,11 +8,12 @@ export function renderFacilityList(container: HTMLElement) {
   createListView(container, {
     title: '사무가구',
     dataSource: () => sortAssets(state.masterData.equipment?.filter((a: any) => a.category === '시설자산') || []),
-    searchKeys: ['MODEL_NAME', 'ASSET_MFR'],
+    searchKeys: ['MODEL_NAME', 'ASSET_MFR', 'ASSET_TYPE'],
     filterOptions: {
       keywordLabel: `통합 검색 (${ASSET_SCHEMA.MODEL_NAME.ui})`,
       showLoc: true,
-      showDept: true
+      showDept: true,
+      showType: true
     },
     onRowClick: (asset) => openHwModal(asset, 'view'),
     columns: [
@@ -22,7 +23,7 @@ export function renderFacilityList(container: HTMLElement) {
         align: 'center', 
         render: a => `<span class="badge badge-success">${a[ASSET_SCHEMA.HW_STATUS.key] || '보관중'}</span>` 
       },
-      { header: ASSET_SCHEMA.ASSET_TYPE.ui, sortKey: ASSET_SCHEMA.ASSET_TYPE.key, align: 'center', render: a => a[ASSET_SCHEMA.ASSET_TYPE.key] || '' },
+      { header: ASSET_SCHEMA.ASSET_TYPE.ui, sortKey: ASSET_SCHEMA.ASSET_TYPE.key, align: 'center', width: '10%', render: a => a[ASSET_SCHEMA.ASSET_TYPE.key] || '-' },
       { header: ASSET_SCHEMA.ASSET_MFR.ui, sortKey: ASSET_SCHEMA.ASSET_MFR.key, align: 'center', render: a => a[ASSET_SCHEMA.ASSET_MFR.key] || '' },
       { header: ASSET_SCHEMA.MODEL_NAME.ui, sortKey: ASSET_SCHEMA.MODEL_NAME.key, render: a => formatInline(a[ASSET_SCHEMA.MODEL_NAME.key] || '-') },
       { 

src/views/List/GiftListView.ts

@@ -7,15 +7,17 @@ export function renderGiftList(container: HTMLElement) {
   createListView(container, {
     title: '선물',
     dataSource: () => sortAssets(state.masterData.equipment?.filter((a: any) => a.category === '선물') || []),
-    searchKeys: ['PRODUCT_NAME', 'MODEL_NAME'],
+    searchKeys: ['PRODUCT_NAME', 'MODEL_NAME', 'ASSET_TYPE'],
     filterOptions: {
       keywordLabel: `통합 검색 (${ASSET_SCHEMA.PRODUCT_NAME.ui})`,
       showCorp: true,
-      showDept: true
+      showDept: true,
+      showType: true
     },
     onRowClick: () => alert('상세 정보 준비 중입니다.'),
     columns: [
       { header: '자산명', sortKey: ASSET_SCHEMA.PRODUCT_NAME.key, render: a => formatInline(a[ASSET_SCHEMA.PRODUCT_NAME.key] || a[ASSET_SCHEMA.MODEL_NAME.key] || '-') },
+      { header: ASSET_SCHEMA.ASSET_TYPE.ui, sortKey: ASSET_SCHEMA.ASSET_TYPE.key, align: 'center', width: '10%', render: a => a[ASSET_SCHEMA.ASSET_TYPE.key] || '-' },
       { header: '구매연월', sortKey: ASSET_SCHEMA.PURCHASE_DATE.key, align: 'center', render: a => a[ASSET_SCHEMA.PURCHASE_DATE.key] || '' },
       { header: ASSET_SCHEMA.EXPIRED_DATE.ui, sortKey: ASSET_SCHEMA.EXPIRED_DATE.key, align: 'center', render: a => a[ASSET_SCHEMA.EXPIRED_DATE.key] || '' },
       { header: ASSET_SCHEMA.ASSET_COUNT.ui, sortKey: ASSET_SCHEMA.ASSET_COUNT.key, align: 'center', render: a => a[ASSET_SCHEMA.ASSET_COUNT.key] || '1' },

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;           
@@ -23,101 +24,553 @@ export interface ListViewConfig {
     showDept?: boolean;
     showLoc?: boolean;
     showField?: boolean;
+    showType?: boolean;
   };
   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' };
+  let currentFilters: any = { keyword: '', corp: '', dept: '', loc: '', field: '', type: '' };
   
-  // Initialize currentFilters with all possible keys to avoid undefined issues
-  let currentFilters: any = { keyword: '', corp: '', dept: '', loc: '', field: '' };
+  // 강제로 기본 뷰 모드를 'system' (자산 현황)으로 설정
+  (state as any).currentViewMode = 'system';
 
+  // 2. 뷰 전환 토글 버튼 생성 (명칭 변경)
+  const toggleWrapper = document.createElement('div');
+  toggleWrapper.className = 'view-toggle-container';
+  toggleWrapper.innerHTML = `
+    <div style="display: flex; justify-content: space-between; align-items: center; width: 100%;">
+      <div class="view-toggle" style="display: flex; gap: 0;">
+        <button class="toggle-btn ${(state as any).currentViewMode === 'system' ? 'active' : ''}" data-mode="system">자산 현황</button>
+        <button class="toggle-btn ${(state as any).currentViewMode === 'asset' ? 'active' : ''}" data-mode="asset">자산 목록</button>
+      </div>
+      <button id="btn-add-asset" style="padding: 6px 14px; font-size: 12px; font-weight: 700; background: #1E5149; color: white; border: none; border-radius: 4px; cursor: pointer; display: flex; align-items: center; gap: 4px;">
+        <span style="font-size: 16px; line-height: 1;">+</span> 자산 추가
+      </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 };
+    
+    // 동적 통계 수집 객체 (Hardcoding 제거)
+    const extStats = { 
+        total: 0, 
+        locCounts: {} as Record<string, number>, 
+        typeCounts: {} as Record<string, number>, 
+        typeLocMap: {} as Record<string, Record<string, number>>, // 유형별 위치 분포
+        locWarning: 0, 
+        typeWarning: 0 
+    };
+    const intStats = { 
+        total: 0, 
+        locCounts: {} as Record<string, number>, 
+        typeCounts: {} as Record<string, number>,
+        typeLocMap: {} as Record<string, Record<string, number>>
+    };
+
+    // 중앙화된 경고 감지 로직
+    const checkAnomaly = (serviceType: string, loc: string, type: string) => {
+        if (serviceType !== '외부') return { isWarning: false, isLocWarning: false, isTypeWarning: false, reason: '' };
+        const isLocWarning = loc !== 'IDC' && loc !== '미지정' && loc !== '';
+        const isTypeWarning = type.toLowerCase().replace(/\s/g, '').includes('서버pc');
+        const isWarning = isLocWarning || isTypeWarning;
+        
+        let reason = '';
+        if (isLocWarning && isTypeWarning) reason = '위치/형식 부적절';
+        else if (isLocWarning) reason = '위치 부적절';
+        else if (isTypeWarning) reason = '형식 부적절';
+        
+        return { isWarning, isLocWarning, isTypeWarning, reason };
+    };
+
+    fullList.forEach(asset => {
+      const loc = asset[ASSET_SCHEMA.LOCATION.key] || '미지정';
+      const serviceTypeKey = (ASSET_SCHEMA as any).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++;
+      }
+
+      const targetStat = serviceType === '내부' ? intStats : extStats;
+      targetStat.total++;
+      if (loc) targetStat.locCounts[loc] = (targetStat.locCounts[loc] || 0) + 1;
+      if (type) {
+          targetStat.typeCounts[type] = (targetStat.typeCounts[type] || 0) + 1;
+          // 유형별 위치 분포 수집
+          if (!targetStat.typeLocMap[type]) targetStat.typeLocMap[type] = {};
+          targetStat.typeLocMap[type][loc] = (targetStat.typeLocMap[type][loc] || 0) + 1;
+      }
+
+      if (serviceType === '외부') {
+          const anomaly = checkAnomaly(serviceType, loc, type);
+          if (anomaly.isLocWarning) extStats.locWarning++;
+          if (anomaly.isTypeWarning) extStats.typeWarning++;
+      }
+    });
+
+    // 템플릿 제너레이터 함수 (HTML 중복 제거)
+    const generateDetailStatHTML = (title: string, stats: any) => `
+      <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;">${title}</span>
+        <div style="display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end;">
+          ${stats.locWarning ? `<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;">위치부적절: ${stats.locWarning}</span>` : ''}
+          ${stats.typeWarning ? `<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;">형식부적절: ${stats.typeWarning}</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;">
+          ${Object.entries(stats.locCounts as Record<string, number>).sort((a, b) => b[1] - a[1]).slice(0, 4).map(([l, c]) => `<span>${l}: <strong style="color:var(--text-main); font-size: 14px;">${c}</strong></span>`).join('')}
+        </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(stats.typeCounts as Record<string, number>).sort((a, b) => b[1] - a[1]).slice(0, 6).map(([t, c]) => {
+              const isTypeWarning = title.includes('외부') && t.toLowerCase().replace(/\s/g, '').includes('서버pc');
+              
+              // 위치별 상세 정보 생성 (툴팁용)
+              const locDist = stats.typeLocMap[t] || {};
+              const locHint = Object.entries(locDist)
+                  .sort((a: any, b: any) => b[1] - a[1])
+                  .map(([l, count]) => `${l}: ${count}대`)
+                  .join('\n');
+
+              return `<span title="${locHint}" style="${isTypeWarning ? 'color:#E11D48; font-weight:700;' : ''}; font-size: 13px; cursor: help;">${t}: <strong style="color:var(--text-main); font-size: 14px;">${c}</strong></span>`;
+          }).join('')}
+        </div>
+      </div>
+    `;
+
+    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;">${extStats.total}</strong></span>
+              <span>내부: <strong style="color:#94A3B8; font-size: 18px;">${intStats.total}</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>
+            ` : generateDetailStatHTML('외부 (운영) 상세', extStats)}
+          </div>
+
+          <div class="stat-group-item" style="border-left: 1px solid var(--border-color); padding-left: 1.5rem; min-width: 0;">
+             ${isPcView ? '' : generateDetailStatHTML('내부 (테스트) 상세', intStats as any)}
+          </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 as any).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 === '외부SW' && loc !== 'IDC';
+              const isTypeWarning = serviceType === '외부SW' && 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 as any).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) {
-      filtered = dynamicSort(filtered, sortState.key, sortState.direction);
-    }
+    thead.innerHTML = `<tr>${config.columns.map(col => `
+      <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 = '';
-    if (filtered.length === 0) {
-      const emptyMsg = config.emptyMessage || UI_TEXT.MESSAGES.NO_DATA;
-      tbody.innerHTML = `<tr><td colspan="${config.columns.length}" class="text-center" style="padding: 3rem; color: var(--text-muted);">${emptyMsg}</td></tr>`;
-      return;
-    }
+    tbody.innerHTML = 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>`
+      : filtered.map(asset => `
+          <tr style="cursor:pointer;" class="asset-row" data-id="${asset.id}">
+            ${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) => {
-      const tr = document.createElement('tr');
-      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);
+    tbody.querySelectorAll('.asset-row').forEach((tr, idx) => {
+      tr.addEventListener('click', () => config.onRowClick && config.onRowClick(filtered[idx]));
     });
 
     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.direction = dir;
+        config.persistentSortState.key = key;
+        config.persistentSortState.direction = dir;
       }
       updateTable();
     });
 
-    // 모든 가능한 아이콘 로드 (안전하게)
-    createIcons({ icons: { RefreshCcw, Plus, Edit2, Trash2, Users, Cloud, CreditCard, DollarSign, Paperclip } });
+    // createIcons call removed as icons are no longer needed in dashboard
   };
 
-  // 4. 필터 바 렌더링
+  // --- 뷰 전환 로직 ---
+  const switchView = () => {
+    contentWrapper.innerHTML = '';
+    if ((state as any).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 as any).currentViewMode = btn.getAttribute('data-mode') as 'asset' | 'system';
+    switchView();
+  });
+
+  // 필터 바 초기화
   renderFilterBar(filterBar, {
     ...config.filterOptions,
     onFilterChange: (filters) => {
@@ -126,18 +579,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) => {
-        if (dataKey === ASSET_SCHEMA.CURRENT_DEPT.key) {
-           return a[dataKey] || a['현사용부서'] || a['현사용조직'];
-        }
-        return a[dataKey];
-      }
-      
+      const getVal = (a: any) => dataKey === ASSET_SCHEMA.CURRENT_DEPT.key ? (a[dataKey] || a['현사용부서'] || a['현사용조직']) : a[dataKey];
       const uniqueValues = Array.from(new Set(fullList.map(getVal))).filter(Boolean).sort();
       uniqueValues.forEach(val => {
         const opt = document.createElement('option');
@@ -151,7 +597,8 @@ export function createListView(container: HTMLElement, config: ListViewConfig) {
   if (config.filterOptions.showLoc) populateSelect('#filter-loc', ASSET_SCHEMA.LOCATION.key);
   if (config.filterOptions.showDept) populateSelect('#filter-dept', ASSET_SCHEMA.CURRENT_DEPT.key);
   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();
 }

src/views/List/MobileListView.ts

@@ -8,16 +8,18 @@ export function renderMobileList(container: HTMLElement) {
   createListView(container, {
     title: 'PC', // Legacy support
     dataSource: () => sortAssets(state.masterData.mobile || []),
-    searchKeys: ['MODEL_NAME'],
+    searchKeys: ['MODEL_NAME', 'ASSET_TYPE'],
     filterOptions: {
       keywordLabel: `통합 검색 (${ASSET_SCHEMA.MODEL_NAME.ui})`,
       showCorp: true,
-      showDept: true
+      showDept: true,
+      showType: true
     },
     onRowClick: (asset) => openHwModal(asset, 'view'),
     columns: [
       { header: ASSET_SCHEMA.HW_STATUS.ui, sortKey: ASSET_SCHEMA.HW_STATUS.key, align: 'center', render: a => a[ASSET_SCHEMA.HW_STATUS.key] || '운영중' },
       { header: ASSET_SCHEMA.PURCHASE_CORP.ui, sortKey: ASSET_SCHEMA.PURCHASE_CORP.key, align: 'center', render: a => a[ASSET_SCHEMA.PURCHASE_CORP.key] || '' },
+      { header: ASSET_SCHEMA.ASSET_TYPE.ui, sortKey: ASSET_SCHEMA.ASSET_TYPE.key, align: 'center', width: '10%', render: a => a[ASSET_SCHEMA.ASSET_TYPE.key] || '-' },
       { header: ASSET_SCHEMA.MODEL_NAME.ui, sortKey: ASSET_SCHEMA.MODEL_NAME.key, render: a => a[ASSET_SCHEMA.MODEL_NAME.key] || '' },
       { 
         header: ASSET_SCHEMA.LOCATION.ui, 

src/views/List/NetworkListView.ts

@@ -8,11 +8,12 @@ export function renderNetworkList(container: HTMLElement) {
   createListView(container, {
     title: '네트워크',
     dataSource: () => sortAssets(state.masterData.network || []),
-    searchKeys: ['MODEL_NAME', 'CURRENT_USER', 'ASSET_MFR'],
+    searchKeys: ['MODEL_NAME', 'CURRENT_USER', 'ASSET_MFR', 'ASSET_TYPE'],
     filterOptions: {
       keywordLabel: `통합 검색 (${ASSET_SCHEMA.MODEL_NAME.ui}/${ASSET_SCHEMA.ASSET_MFR.ui})`,
       showLoc: true,
-      showDept: true
+      showDept: true,
+      showType: true
     },
     onRowClick: (asset) => openHwModal(asset, 'view'),
     columns: [
@@ -23,7 +24,7 @@ export function renderNetworkList(container: HTMLElement) {
         render: a => `<span class="badge badge-success">${a[ASSET_SCHEMA.HW_STATUS.key] || '운영중'}</span>` 
       },
       { header: ASSET_SCHEMA.CURRENT_USER.ui, sortKey: ASSET_SCHEMA.CURRENT_USER.key, align: 'center', render: a => a[ASSET_SCHEMA.CURRENT_USER.key] || '-' },
-      { header: ASSET_SCHEMA.ASSET_TYPE.ui, sortKey: ASSET_SCHEMA.ASSET_TYPE.key, align: 'center', render: a => a[ASSET_SCHEMA.ASSET_TYPE.key] || '' },
+      { header: ASSET_SCHEMA.ASSET_TYPE.ui, sortKey: ASSET_SCHEMA.ASSET_TYPE.key, align: 'center', width: '10%', render: a => a[ASSET_SCHEMA.ASSET_TYPE.key] || '-' },
       { header: ASSET_SCHEMA.ASSET_MFR.ui, sortKey: ASSET_SCHEMA.ASSET_MFR.key, align: 'center', render: a => a[ASSET_SCHEMA.ASSET_MFR.key] || '' },
       { header: ASSET_SCHEMA.MODEL_NAME.ui, sortKey: ASSET_SCHEMA.MODEL_NAME.key, render: a => formatInline(a[ASSET_SCHEMA.MODEL_NAME.key] || '-') },
       { header: ASSET_SCHEMA.ASSET_COUNT.ui, sortKey: ASSET_SCHEMA.ASSET_COUNT.key, align: 'center', render: a => a[ASSET_SCHEMA.ASSET_COUNT.key] || '1' },

src/views/List/PcListView.ts

@@ -8,32 +8,40 @@ export function renderPcList(container: HTMLElement) {
   createListView(container, {
     title: 'PC',
     dataSource: () => sortAssets((state.masterData.pc || []).filter((a: any) => a.asset_type !== '서버PC')),
-    searchKeys: ['CURRENT_DEPT', 'CURRENT_USER', 'MODEL_NAME', 'MAC_ADDR', 'MANAGER_MAIN'],
+    searchKeys: ['CURRENT_DEPT', 'CURRENT_USER', 'MODEL_NAME', 'MAC_ADDR', 'MANAGER_MAIN', 'ASSET_TYPE'],
     filterOptions: {
       keywordLabel: `통합 검색 (${ASSET_SCHEMA.MODEL_NAME.ui}/${ASSET_SCHEMA.MANAGER_MAIN.ui}/${ASSET_SCHEMA.CURRENT_USER.ui})`,
       showLoc: true,
-      showDept: true
+      showDept: true,
+      showType: true
     },
     onRowClick: (asset) => openHwModal(asset, 'view'),
     columns: [
       { header: ASSET_SCHEMA.CURRENT_USER.ui, sortKey: ASSET_SCHEMA.CURRENT_USER.key, align: 'center', render: a => a[ASSET_SCHEMA.CURRENT_USER.key] || '-' },
+      { header: ASSET_SCHEMA.ASSET_TYPE.ui, sortKey: ASSET_SCHEMA.ASSET_TYPE.key, align: 'center', width: '10%', render: a => a[ASSET_SCHEMA.ASSET_TYPE.key] || '-' },
       { header: ASSET_SCHEMA.CPU.ui, sortKey: ASSET_SCHEMA.CPU.key, align: 'center', render: a => a[ASSET_SCHEMA.CPU.key] || '' },
       { header: ASSET_SCHEMA.MAINBOARD.ui, sortKey: ASSET_SCHEMA.MAINBOARD.key, align: 'center', render: a => a[ASSET_SCHEMA.MAINBOARD.key] || '-' },
       { header: ASSET_SCHEMA.RAM.ui, sortKey: ASSET_SCHEMA.RAM.key, align: 'center', render: a => a[ASSET_SCHEMA.RAM.key] || '' },
       { header: ASSET_SCHEMA.GPU.ui, sortKey: ASSET_SCHEMA.GPU.key, align: 'center', render: a => a[ASSET_SCHEMA.GPU.key] || '-' },
-      { header: 'SSD1', sortKey: ASSET_SCHEMA.SSD1.key, align: 'center', render: a => a[ASSET_SCHEMA.SSD1.key] || '-' },
-      { header: 'SSD2', sortKey: ASSET_SCHEMA.SSD2.key, align: 'center', render: a => a[ASSET_SCHEMA.SSD2.key] || '-' },
-      { header: 'HDD1', sortKey: ASSET_SCHEMA.HDD1.key, align: 'center', render: a => a[ASSET_SCHEMA.HDD1.key] || '-' },
-      { header: 'HDD2', sortKey: ASSET_SCHEMA.HDD2.key, align: 'center', render: a => a[ASSET_SCHEMA.HDD2.key] || '-' },
-      { header: 'HDD3', sortKey: ASSET_SCHEMA.HDD3.key, align: 'center', render: a => a[ASSET_SCHEMA.HDD3.key] || '-' },
-      { header: 'HDD4', sortKey: ASSET_SCHEMA.HDD4.key, align: 'center', render: a => a[ASSET_SCHEMA.HDD4.key] || '-' },
+      { 
+        header: 'SSD', 
+        align: 'center', 
+        width: '8%',
+        render: a => [a[ASSET_SCHEMA.SSD1.key], a[ASSET_SCHEMA.SSD2.key]].filter(Boolean).join(' / ') || '-' 
+      },
+      { 
+        header: 'HDD', 
+        align: 'center', 
+        width: '12%',
+        render: a => [a[ASSET_SCHEMA.HDD1.key], a[ASSET_SCHEMA.HDD2.key], a[ASSET_SCHEMA.HDD3.key], a[ASSET_SCHEMA.HDD4.key]].filter(Boolean).join(' / ') || '-' 
+      },
       { 
         header: ASSET_SCHEMA.MAC_ADDR.ui, 
         sortKey: ASSET_SCHEMA.MAC_ADDR.key, 
         align: 'center', 
         render: a => `<span style="font-family:monospace; font-size:11px;">${a[ASSET_SCHEMA.MAC_ADDR.key] || '-'}</span>` 
       },
-      { header: ASSET_SCHEMA.MEMO.ui, sortKey: ASSET_SCHEMA.MEMO.key, className: 'col-memo', render: a => formatInline(a[ASSET_SCHEMA.MEMO.key] || '-') }
+      { header: ASSET_SCHEMA.MEMO.ui, sortKey: ASSET_SCHEMA.MEMO.key, className: 'col-memo', width: '30%', render: a => formatInline(a[ASSET_SCHEMA.MEMO.key] || '-') }
     ]
   });
 }

src/views/List/PcPartListView.ts

@@ -12,7 +12,8 @@ export function renderPcPartList(container: HTMLElement) {
     filterOptions: {
       keywordLabel: `통합 검색 (${ASSET_SCHEMA.MODEL_NAME.ui})`,
       showLoc: true,
-      showDept: true
+      showDept: true,
+      showType: true
     },
     onRowClick: (asset) => openHwModal(asset, 'view'),
     columns: [
@@ -22,7 +23,7 @@ export function renderPcPartList(container: HTMLElement) {
         align: 'center', 
         render: a => `<span class="badge badge-success">${a[ASSET_SCHEMA.HW_STATUS.key] || '보관중'}</span>` 
       },
-      { header: ASSET_SCHEMA.ASSET_TYPE.ui, sortKey: ASSET_SCHEMA.ASSET_TYPE.key, align: 'center', render: a => a[ASSET_SCHEMA.ASSET_TYPE.key] || '' },
+      { header: ASSET_SCHEMA.ASSET_TYPE.ui, sortKey: ASSET_SCHEMA.ASSET_TYPE.key, align: 'center', width: '10%', render: a => a[ASSET_SCHEMA.ASSET_TYPE.key] || '-' },
       { header: ASSET_SCHEMA.ASSET_MFR.ui, sortKey: ASSET_SCHEMA.ASSET_MFR.key, align: 'center', render: a => a[ASSET_SCHEMA.ASSET_MFR.key] || '' },
       { header: ASSET_SCHEMA.MODEL_NAME.ui, sortKey: ASSET_SCHEMA.MODEL_NAME.key, render: a => formatInline(a[ASSET_SCHEMA.MODEL_NAME.key] || '-') },
       { header: ASSET_SCHEMA.VOLUME.ui, sortKey: ASSET_SCHEMA.VOLUME.key, align: 'center', render: a => a[ASSET_SCHEMA.VOLUME.key] || '-' },

src/views/List/ServerListView.ts

@@ -12,11 +12,12 @@ export function renderServerList(container: HTMLElement) {
       const serverPcList = (state.masterData.pc || []).filter((a: any) => a.asset_type === '서버PC');
       return sortAssets([...serverList, ...serverPcList]);
     },
-    searchKeys: ['CURRENT_DEPT', 'MODEL_NAME', 'ASSET_PURPOSE'],
+    searchKeys: ['CURRENT_DEPT', 'MODEL_NAME', 'ASSET_PURPOSE', 'ASSET_TYPE'],
     filterOptions: {
       keywordLabel: `통합 검색 (${ASSET_SCHEMA.CURRENT_DEPT.ui}/${ASSET_SCHEMA.MODEL_NAME.ui})`,
       showLoc: true,
-      showDept: true
+      showDept: true,
+      showType: true
     },
     onRowClick: (asset) => openHwModal(asset, 'view'),
     columns: [

src/views/List/SpaceInfoListView.ts

@@ -8,11 +8,12 @@ export function renderSpaceInfoList(container: HTMLElement) {
   createListView(container, {
     title: '공간정보장비',
     dataSource: () => sortAssets(state.masterData.equipment?.filter((a: any) => a.category === '공간정보장비') || []),
-    searchKeys: ['MODEL_NAME', 'PRODUCT_NAME', 'CURRENT_USER'],
+    searchKeys: ['MODEL_NAME', 'PRODUCT_NAME', 'CURRENT_USER', 'ASSET_TYPE'],
     filterOptions: {
       keywordLabel: `통합 검색 (${ASSET_SCHEMA.MODEL_NAME.ui}/${ASSET_SCHEMA.CURRENT_USER.ui})`,
       showLoc: true,
-      showDept: true
+      showDept: true,
+      showType: true
     },
     onRowClick: (asset) => openHwModal(asset, 'view'),
     columns: [
@@ -24,7 +25,7 @@ export function renderSpaceInfoList(container: HTMLElement) {
       },
       { header: ASSET_SCHEMA.CURRENT_USER.ui, sortKey: ASSET_SCHEMA.CURRENT_USER.key, align: 'center', render: a => a[ASSET_SCHEMA.CURRENT_USER.key] || '-' },
       { header: ASSET_SCHEMA.ASSET_NAME.ui, sortKey: ASSET_SCHEMA.ASSET_NAME.key, render: a => formatInline(a[ASSET_SCHEMA.PRODUCT_NAME.key] || a[ASSET_SCHEMA.MODEL_NAME.key] || a[ASSET_SCHEMA.ASSET_NAME.key] || '-') },
-      { header: ASSET_SCHEMA.ASSET_TYPE.ui, sortKey: ASSET_SCHEMA.ASSET_TYPE.key, align: 'center', render: a => a[ASSET_SCHEMA.ASSET_TYPE.key] || '' },
+      { header: ASSET_SCHEMA.ASSET_TYPE.ui, sortKey: ASSET_SCHEMA.ASSET_TYPE.key, align: 'center', width: '10%', render: a => a[ASSET_SCHEMA.ASSET_TYPE.key] || '-' },
       { 
         header: ASSET_SCHEMA.LOCATION.ui, 
         sortKey: ASSET_SCHEMA.LOCATION.key, 

src/views/List/StorageListView.ts

@@ -8,17 +8,18 @@ export function renderStorageList(container: HTMLElement) {
   createListView(container, {
     title: '스토리지',
     dataSource: () => sortAssets(state.masterData.storage || []),
-    searchKeys: ['MODEL_NAME', 'CURRENT_USER', 'SERIAL_NUM'],
+    searchKeys: ['MODEL_NAME', 'CURRENT_USER', 'SERIAL_NUM', 'ASSET_TYPE'],
     filterOptions: {
       keywordLabel: `통합 검색 (${ASSET_SCHEMA.MODEL_NAME.ui}/${ASSET_SCHEMA.CURRENT_USER.ui})`,
       showLoc: true,
-      showDept: true
+      showDept: true,
+      showType: true
     },
     onRowClick: (asset) => openHwModal(asset, 'view'),
     columns: [
       { header: ASSET_SCHEMA.HW_STATUS.ui, sortKey: ASSET_SCHEMA.HW_STATUS.key, align: 'center', render: a => a[ASSET_SCHEMA.HW_STATUS.key] || '-' },
       { header: ASSET_SCHEMA.CURRENT_USER.ui, sortKey: ASSET_SCHEMA.CURRENT_USER.key, align: 'center', render: a => a[ASSET_SCHEMA.CURRENT_USER.key] || '-' },
-      { header: ASSET_SCHEMA.ASSET_TYPE.ui, sortKey: ASSET_SCHEMA.ASSET_TYPE.key, align: 'center', render: a => a[ASSET_SCHEMA.ASSET_TYPE.key] || '-' },
+      { header: ASSET_SCHEMA.ASSET_TYPE.ui, sortKey: ASSET_SCHEMA.ASSET_TYPE.key, align: 'center', width: '10%', render: a => a[ASSET_SCHEMA.ASSET_TYPE.key] || '-' },
       { header: ASSET_SCHEMA.VOLUME.ui, sortKey: ASSET_SCHEMA.VOLUME.key, align: 'center', render: a => a[ASSET_SCHEMA.VOLUME.key] || '-' },
       { header: ASSET_SCHEMA.MODEL_NAME.ui, sortKey: ASSET_SCHEMA.MODEL_NAME.key, render: a => formatInline(a[ASSET_SCHEMA.MODEL_NAME.key] || a[ASSET_SCHEMA.ASSET_NAME.key] || '-') },
       { header: ASSET_SCHEMA.SERIAL_NUM.ui, sortKey: ASSET_SCHEMA.SERIAL_NUM.key, align: 'center', render: a => a[ASSET_SCHEMA.SERIAL_NUM.key] || '-' },

src/views/List/SwListView.ts

@@ -5,29 +5,31 @@ import { ASSET_SCHEMA } from '../../core/schema';
 import { createListView } from './ListFactory';
 
 export function renderSwList(container: HTMLElement) {
-  const isInternal = state.activeSubTab === '내부';
-  
+  const isInternal = state.activeSubTab === '내부SW';
+
   createListView(container, {
-    title: isInternal ? '내부' : '외부',
+    title: isInternal ? '내부SW' : '외부SW',
     dataSource: () => sortAssets(isInternal ? state.masterData.swInternal : state.masterData.swExternal),
-    searchKeys: ['PRODUCT_NAME', 'CURRENT_USER', 'CURRENT_DEPT'],
+    searchKeys: ['PRODUCT_NAME', 'CURRENT_USER', 'CURRENT_DEPT', 'ASSET_TYPE'],
     emptyMessage: '검색 결과가 없습니다.',
     filterOptions: {
       keywordLabel: `통합 검색 (${ASSET_SCHEMA.PRODUCT_NAME.ui}/${ASSET_SCHEMA.CURRENT_DEPT.ui})`,
       showField: true,
       showCorp: true,
-      showDept: true
+      showDept: true,
+      showType: true
     },
     onRowClick: (asset) => openSwModal(asset, 'view'),
     columns: isInternal ? [
       { header: ASSET_SCHEMA.SW_FIELD.ui, sortKey: ASSET_SCHEMA.SW_FIELD.key, align: 'center', render: a => a[ASSET_SCHEMA.SW_FIELD.key] || '' },
       { header: ASSET_SCHEMA.DEV_OBJ.ui, sortKey: ASSET_SCHEMA.DEV_OBJ.key, align: 'center', render: a => a[ASSET_SCHEMA.DEV_OBJ.key] || '' },
       { header: ASSET_SCHEMA.SW_STATUS.ui, sortKey: ASSET_SCHEMA.SW_STATUS.key, align: 'center', render: a => a[ASSET_SCHEMA.SW_STATUS.key] || '보유중' },
+      { header: ASSET_SCHEMA.ASSET_TYPE.ui, sortKey: ASSET_SCHEMA.ASSET_TYPE.key, align: 'center', width: '10%', render: a => a[ASSET_SCHEMA.ASSET_TYPE.key] || '-' },
       { header: ASSET_SCHEMA.SW_TYPE.ui, sortKey: ASSET_SCHEMA.SW_TYPE.key, align: 'center', render: a => a[ASSET_SCHEMA.SW_TYPE.key] || '내부' },
       { header: ASSET_SCHEMA.MEMO.ui, sortKey: ASSET_SCHEMA.MEMO.key, className: 'col-memo', render: a => formatInline(a[ASSET_SCHEMA.MEMO.key] || '-') }
     ] : [
       { header: '자산명', sortKey: ASSET_SCHEMA.PRODUCT_NAME.key, render: a => a[ASSET_SCHEMA.PRODUCT_NAME.key] || '' },
-      { header: '유형', sortKey: ASSET_SCHEMA.ASSET_TYPE.key, align: 'center', render: a => a[ASSET_SCHEMA.ASSET_TYPE.key] || '외부' },
+      { header: ASSET_SCHEMA.ASSET_TYPE.ui, sortKey: ASSET_SCHEMA.ASSET_TYPE.key, align: 'center', width: '10%', render: a => a[ASSET_SCHEMA.ASSET_TYPE.key] || '-' },
       { header: ASSET_SCHEMA.SW_STATUS.ui, sortKey: ASSET_SCHEMA.SW_STATUS.key, align: 'center', render: a => a[ASSET_SCHEMA.SW_STATUS.key] || '사용중' },
       { header: ASSET_SCHEMA.SW_FIELD.ui, sortKey: ASSET_SCHEMA.SW_FIELD.key, align: 'center', render: a => a[ASSET_SCHEMA.SW_FIELD.key] || '' },
       { header: ASSET_SCHEMA.CURRENT_DEPT.ui, sortKey: ASSET_SCHEMA.CURRENT_DEPT.key, align: 'center', render: a => a[ASSET_SCHEMA.CURRENT_DEPT.key] || '' },

src/views/MapEditor.ts

@@ -0,0 +1,222 @@
+import { IMAGE_LOCATIONS } from '../components/Modal/SharedData';
+import { createIcons, X, Save, Trash2, ChevronLeft, ChevronRight } from 'lucide';
+
+export class MapEditor {
+  private container: HTMLElement;
+  private wrapper: HTMLElement;
+  private img: HTMLImageElement;
+  private boxListEl: HTMLElement;
+  private pathLabel: HTMLElement;
+  private statusEl: HTMLElement;
+  private saveBtn: HTMLButtonElement;
+  private fileSidebar: HTMLElement;
+
+  private allMapConfig: Record<string, any[]> = {};
+  private boxes: any[] = [];
+  private isDrawing: boolean = false;
+  private startX: number = 0;
+  private startY: number = 0;
+  private currentBox: HTMLElement | null = null;
+  private currentPath: string = '';
+
+  constructor() {
+    this.container = document.getElementById('container')!;
+    this.wrapper = document.getElementById('wrapper')!;
+    this.img = document.getElementById('target-img') as HTMLImageElement;
+    this.boxListEl = document.getElementById('box-list')!;
+    this.pathLabel = document.getElementById('current-path')!;
+    this.statusEl = document.getElementById('save-status')!;
+    this.saveBtn = document.getElementById('btn-save-server') as HTMLButtonElement;
+    this.fileSidebar = document.getElementById('file-sidebar')!;
+  }
+
+  public async init() {
+    this.renderFileSidebar();
+    await this.loadConfig();
+    this.bindEvents();
+    this.selectFirstFile();
+    createIcons({ icons: { X, Save, Trash2, ChevronLeft, ChevronRight } });
+  }
+
+  private renderFileSidebar() {
+    let html = '';
+    Object.entries(IMAGE_LOCATIONS).forEach(([bldg, details]) => {
+      html += `<div class="folder-item">${bldg}</div>`;
+      Object.entries(details).forEach(([detail, paths]) => {
+        paths.forEach(path => {
+          const fileName = path.split('/').pop() || path;
+          html += `<div class="file-item" data-path="${path}">${fileName}</div>`;
+        });
+      });
+    });
+    this.fileSidebar.innerHTML = html;
+
+    this.fileSidebar.querySelectorAll('.file-item').forEach(item => {
+      item.addEventListener('click', () => {
+        this.fileSidebar.querySelectorAll('.file-item').forEach(i => i.classList.remove('active'));
+        item.classList.add('active');
+        this.renderCurrentFile();
+      });
+    });
+  }
+
+  private selectFirstFile() {
+    const firstItem = this.fileSidebar.querySelector('.file-item') as HTMLElement;
+    if (firstItem) {
+      firstItem.classList.add('active');
+      this.renderCurrentFile();
+    }
+  }
+
+  private async loadConfig() {
+    try {
+      const res = await fetch(`http://${location.hostname}:3000/api/maps`);
+      this.allMapConfig = await res.json();
+    } catch (err) {
+      console.error('Failed to load config:', err);
+    }
+  }
+
+  private renderCurrentFile() {
+    const activeItem = this.fileSidebar.querySelector('.file-item.active') as HTMLElement;
+    if (!activeItem) return;
+
+    this.currentPath = activeItem.dataset.path || '';
+    this.boxes = this.allMapConfig[this.currentPath] || [];
+    this.pathLabel.textContent = this.currentPath;
+    this.img.src = this.currentPath;
+    this.render();
+  }
+
+  private bindEvents() {
+    this.wrapper.addEventListener('mousedown', (e) => {
+      if (e.button !== 0) return;
+      this.isDrawing = true;
+      const rect = this.wrapper.getBoundingClientRect();
+      this.startX = e.clientX - rect.left;
+      this.startY = e.clientY - rect.top;
+
+      this.currentBox = document.createElement('div');
+      this.currentBox.className = 'draw-box';
+      this.currentBox.style.left = this.startX + 'px';
+      this.currentBox.style.top = this.startY + 'px';
+      
+      const label = document.createElement('div');
+      label.className = 'box-label';
+      label.textContent = '#' + (this.boxes.length + 1);
+      this.currentBox.appendChild(label);
+      
+      this.wrapper.appendChild(this.currentBox);
+    });
+
+    window.addEventListener('mousemove', (e) => {
+      if (!this.isDrawing || !this.currentBox) return;
+      const rect = this.wrapper.getBoundingClientRect();
+      const currentX = Math.max(0, Math.min(e.clientX - rect.left, rect.width));
+      const currentY = Math.max(0, Math.min(e.clientY - rect.top, rect.height));
+
+      const width = currentX - this.startX;
+      const height = currentY - this.startY;
+
+      this.currentBox.style.width = Math.abs(width) + 'px';
+      this.currentBox.style.height = Math.abs(height) + 'px';
+      this.currentBox.style.left = (width > 0 ? this.startX : currentX) + 'px';
+      this.currentBox.style.top = (height > 0 ? this.startY : currentY) + 'px';
+    });
+
+    window.addEventListener('mouseup', () => {
+      if (!this.isDrawing || !this.currentBox) return;
+      this.isDrawing = false;
+      
+      const width = parseFloat(this.currentBox.style.width);
+      const height = parseFloat(this.currentBox.style.height);
+
+      if (width > 3 && height > 3) {
+        const rect = this.wrapper.getBoundingClientRect();
+        const boxData = {
+          x: (parseFloat(this.currentBox.style.left) / rect.width * 100).toFixed(2),
+          y: (parseFloat(this.currentBox.style.top) / rect.height * 100).toFixed(2),
+          w: (width / rect.width * 100).toFixed(2),
+          h: (height / rect.height * 100).toFixed(2)
+        };
+        this.boxes.push(boxData);
+        this.render();
+      }
+      
+      this.currentBox.remove();
+      this.currentBox = null;
+    });
+
+    (window as any).removeBox = (index: number) => {
+      this.boxes.splice(index, 1);
+      this.render();
+    };
+
+    document.getElementById('btn-clear-all')?.addEventListener('click', () => {
+      if(confirm('모든 박스를 삭제할까요?')) {
+        this.boxes = [];
+        this.render();
+      }
+    });
+
+    document.getElementById('btn-save-server')?.addEventListener('click', () => this.saveToServer());
+  }
+
+  private async saveToServer() {
+    if (!this.currentPath) return;
+    
+    try {
+      this.saveBtn.disabled = true;
+      this.saveBtn.textContent = '저장 중...';
+      
+      const res = await fetch(`http://${location.hostname}:3000/api/maps/save`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ path: this.currentPath, boxes: this.boxes })
+      });
+
+      if (res.ok) {
+        this.allMapConfig[this.currentPath] = [...this.boxes];
+        this.statusEl.textContent = '✅ 서버 저장 완료 (' + new Date().toLocaleTimeString() + ')';
+        setTimeout(() => this.statusEl.textContent = '', 3000);
+      } else {
+        alert('저장 실패!');
+      }
+    } catch (err) {
+      alert('서버 연결 오류!');
+    } finally {
+      this.saveBtn.disabled = false;
+      this.saveBtn.textContent = '서버에 즉시 저장';
+    }
+  }
+
+  private render() {
+    this.boxListEl.innerHTML = '';
+    const oldBoxes = this.wrapper.querySelectorAll('.placed-box');
+    oldBoxes.forEach(b => b.remove());
+
+    this.boxes.forEach((box, i) => {
+      const div = document.createElement('div');
+      div.className = 'placed-box';
+      div.style.left = box.x + '%';
+      div.style.top = box.y + '%';
+      div.style.width = box.w + '%';
+      div.style.height = box.h + '%';
+      
+      const label = document.createElement('div');
+      label.className = 'box-label';
+      label.textContent = '#' + (i + 1);
+      div.appendChild(label);
+      
+      this.wrapper.appendChild(div);
+
+      const item = document.createElement('div');
+      item.className = 'box-item';
+      item.innerHTML = `
+        <span>#${i+1}: [${box.x}, ${box.y}]</span>
+        <button class="btn-del" onclick="removeBox(${i})">×</button>
+      `;
+      this.boxListEl.appendChild(item);
+    });
+  }
+}

src/views/SW_Table.ts

@@ -41,7 +41,7 @@ export function renderSWTable(mainContent: HTMLElement) {
         container.innerHTML = `<div style="padding:2rem; color:var(--text-muted);">"${tab}" 탭에 대한 하드웨어 리스트 뷰가 정의되지 않았습니다.</div>`;
       }
     } else if (state.activeCategory === 'sw') {
-      if (tab === '외부' || tab === '내부') {
+      if (tab === '외부SW' || tab === '내부SW') {
         renderSwList(container);
       } else {
         container.innerHTML = `<div style="padding:2rem; color:var(--text-muted);">"${tab}" 탭에 대한 소프트웨어 리스트 뷰가 정의되지 않았습니다.</div>`;