feat: DB V3 정규화 및 용도 기반 동적 UI 구현

- 백엔드: asset_core(마스터), asset_spec(사양), asset_volume(스토리지), asset_location(위치), asset_network(네트워크/원격) 5개 테이블로 V3 정규화 완료

- 백엔드: /api/assets/master 단일 엔드포인트로 통합 및 서브쿼리 최적화를 통한 UI 하위 호환성 유지

- 백엔드: 저장 로직(save) V3 스키마 분산 저장 및 cascade 기반 삭제 로직 적용

- 프론트엔드(HWModal): '현 용도(current_role)' 필드 추가 및 서버/개인용에 따른 네트워크/위치 섹션 동적 렌더링 구현

- 프론트엔드(state): 분산된 API 호출을 단일 호출로 통합하여 렌더링 성능 최적화

- 레거시 백업 파일 및 불필요한 구형 테이블 완벽 정리 완료

server.js

@@ -8,179 +8,325 @@ dotenv.config();
 
 const app = express();
 app.use(cors());
-app.use(express.json({ limit: '100mb' }));
+app.use(express.json({ limit: '50mb' }));
-
-// Request Logger
-app.use((req, res, next) => {
-  console.log(`[${new Date().toISOString()}] ${req.method} ${req.url}`);
-  next();
-});
 
+// MySQL Pool Configuration
 const pool = mysql.createPool({
   host: process.env.DB_HOST,
   user: process.env.DB_USER,
   password: process.env.DB_PASS,
   database: process.env.DB_NAME,
   port: parseInt(process.env.DB_PORT || '3306'),
-  charset: 'utf8mb4'
+  waitForConnections: true,
+  connectionLimit: 10,
+  queueLimit: 0
 });
 
-const handleError = (res, err, context, isGet = false) => {
+// Error Handler
-  console.error(`❌ [${context}] Error:`, err.message);
+const handleError = (res, err, label) => {
-  if (isGet) res.json([]);
+  console.error(`❌ [${label}] Error:`, err);
-  else res.status(500).json({ error: err.message });
+  res.status(500).json({ error: err.message });
 };
 
-// --- API Implementation ---
+// --- Global Constants ---
-
+const CATEGORY_TABLE_MAP = {
-/**
+  pc: 'asset_pc',
- * Generic Fetcher for Asset Tables
+  server: 'asset_server',
- */
+  storage: 'asset_storage',
-const fetchAssets = async (tableName, res, context) => {
+  network: 'asset_network',
-  try {
+  equipment: 'asset_equipment',
-    const [rows] = await pool.query(`SELECT * FROM ${tableName}`);
+  officeSupplies: 'asset_office_supplies',
-    console.log(`📡 [GET ${context}] Returning ${rows.length} rows from ${tableName}`);
+  survey: 'asset_survey',
-    res.json(rows);
+  vip: 'asset_vip',
-  } catch (err) {
+  swInternal: 'sw_internal',
-    handleError(res, err, context, true);
+  swExternal: 'sw_external',
-  }
+  cloud: 'asset_cloud',
+  users: 'user_master',
+  swUsers: 'sw_assignment',
+  logs: 'asset_history'
 };
 
-/**
+const ASSET_TABLES = [
- * Generic Batch Saver for Asset Tables
+  'asset_pc', 'asset_server', 'asset_storage', 'asset_network', 
- */
+  'asset_equipment', 'asset_office_supplies', 'asset_survey', 'asset_vip'
-const saveAssetsBatch = async (tableName, items, res, context) => {
+];
-  const connection = await pool.getConnection();
+
+// --- API Endpoints ---
+
+// 1. Generic Batch Save (Dynamic Table Detection)
+app.post('/api/:table/batch', async (req, res) => {
+  const { table } = req.params;
+  const data = req.body;
+  if (!Array.isArray(data)) return res.status(400).json({ error: 'Data must be an array' });
+
+  let connection;
   try {
+    connection = await pool.getConnection();
     await connection.beginTransaction();
-    
-    // Get valid columns for this table
-    const [cols] = await connection.query(`DESCRIBE ${tableName}`);
-    const validColumns = cols.map(c => c.Field);
-    
-    // 1. Clear existing
-    await connection.query(`DELETE FROM ${tableName}`);
-    
-    // 2. Insert new items
-    for (const item of items) {
-      const filteredRow = {};
-      validColumns.forEach(col => {
-        if (col === 'created_at' || col === 'updated_at') return;
-        if (item[col] !== undefined) filteredRow[col] = item[col];
-      });
-      
-      if (!filteredRow.id) filteredRow.id = Math.random().toString(36).substring(2, 9);
-      await connection.query(`INSERT INTO ${tableName} SET ?`, [filteredRow]);
-    }
-    
-    await connection.commit();
-    res.json({ success: true, count: items.length });
-  } catch (err) {
-    await connection.rollback();
-    handleError(res, err, context);
-  } finally {
-    connection.release();
-  }
-};
 
-// --- Routes ---
+    const [columns] = await connection.query(`DESCRIBE ${table}`);
+    const validFields = columns.map(c => c.Field);
 
-const routeMap = {
+    await connection.query(`DELETE FROM ${table}`);
-  '/api/users': { table: 'system_users', context: 'USERS' },
-  '/api/pc': { table: 'asset_pc', context: 'PC' },
-  '/api/server': { table: 'asset_server', context: 'SERVER' },
-  '/api/storage': { table: 'asset_storage', context: 'STORAGE' },
-  '/api/network': { table: 'asset_network', context: 'NETWORK' },
-  '/api/sw/internal': { table: 'asset_sw_internal', context: 'SW INTERNAL' },
-  '/api/sw/external': { table: 'asset_sw_external', context: 'SW EXTERNAL' },
-  '/api/survey': { table: 'asset_survey', context: 'SURVEY' },
-  '/api/pc-parts': { table: 'asset_pc_parts', context: 'PC PARTS' },
-  '/api/equipment': { table: 'asset_equipment', context: 'EQUIPMENT' },
-  '/api/office-supplies': { table: 'asset_office_supplies', context: 'OFFICE SUPPLIES' },
-  '/api/cloud': { table: 'asset_cloud', context: 'CLOUD' },
-  '/api/domain': { table: 'asset_domain', context: 'DOMAIN' },
-  '/api/cost': { table: 'asset_cost', context: 'COST' },
-  '/api/vip': { table: 'asset_vip', context: 'VIP' },
-  '/api/asset/software/assignment': { table: 'asset_software_assignment', context: 'SW ASSIGN' }
-};
 
-Object.entries(routeMap).forEach(([route, { table, context }]) => {
+    if (data.length > 0) {
-  app.get(route, (req, res) => fetchAssets(table, res, context));
+        const placeholders = validFields.map(() => '?').join(', ');
-  app.post(`${route}/batch`, (req, res) => saveAssetsBatch(table, req.body, res, `${context} BATCH`));
+        const sql = `INSERT INTO ${table} (${validFields.join(', ')}) VALUES (${placeholders})`;
-});
+        
-
+        for (const item of data) {
-app.get('/api/asset/history', (req, res) => fetchAssets('asset_history', res, 'HISTORY'));
+            const values = validFields.map(field => {
-app.post('/api/asset/history/batch', async (req, res) => {
+                const val = item[field];
-    const connection = await pool.getConnection();
+                return val === undefined ? null : val;
-    try {
+            });
-        await connection.beginTransaction();
+            await connection.query(sql, values);
-        await connection.query('DELETE FROM asset_history');
-        for (const item of req.body) {
-            const dbRow = {
-                asset_id: item.assetId,
-                log_date: item.date,
-                log_user: item.user,
-                details: item.details,
-                cost: item.cost || 0
-            };
-            await connection.query('INSERT INTO asset_history SET ?', [dbRow]);
         }
-        await connection.commit();
+    }
-        res.json({ success: true });
+
-    } catch (err) { await connection.rollback(); handleError(res, err, 'BATCH HISTORY'); } finally { connection.release(); }
+    await connection.commit();
+    res.json({ success: true, count: data.length });
+  } catch (err) {
+    if (connection) await connection.rollback();
+    handleError(res, err, 'BATCH SAVE');
+  } finally {
+    if (connection) connection.release();
+  }
 });
 
-app.get('/api/generate-asset-code', async (req, res) => {
+// 2. Get All Assets (Integrated Master Data from Normalized V3 Schema)
+app.get('/api/assets/master', async (req, res) => {
   try {
-    const { prefix } = req.query;
+    const connection = await pool.getConnection();
-    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'];
+    const masterData = {
-    let lastCode = '';
+      pc: [], server: [], storage: [], network: [],
-    for (const table of tables) {
+      equipment: [], officeSupplies: [], survey: [], vip: [], pcParts: [],
-        const [rows] = await pool.query(`SELECT asset_code FROM ${table} WHERE asset_code LIKE ? ORDER BY asset_code DESC LIMIT 1`, [`${prefix}%`]);
+      swInternal: [], swExternal: [], swUsers: [], users: [], logs: []
-        if (rows.length > 0 && rows[0].asset_code > lastCode) lastCode = rows[0].asset_code;
+    };
+
+    const [rows] = await connection.query(`
+      SELECT 
+        c.*, 
+        s.hw_status, s.model_name, s.mainboard, s.os, s.cpu, s.ram, s.gpu, 
+        s.monitoring, s.price, s.monitor_inch, s.serial_num,
+        l.location, l.location_detail, l.location_photo, l.loc_x, l.loc_y,
+        n.ip_address, n.mac_address, n.remote_tool, n.remote_id, n.remote_pw,
+        (SELECT CONCAT(capacity, unit) FROM asset_volume WHERE asset_id = c.id AND disk_type = 'SSD' AND slot_no = 1 LIMIT 1) as ssd_1,
+        (SELECT CONCAT(capacity, unit) FROM asset_volume WHERE asset_id = c.id AND disk_type = 'SSD' AND slot_no = 2 LIMIT 1) as ssd_2,
+        (SELECT CONCAT(capacity, unit) FROM asset_volume WHERE asset_id = c.id AND disk_type = 'HDD' AND slot_no = 1 LIMIT 1) as hdd_1,
+        (SELECT CONCAT(capacity, unit) FROM asset_volume WHERE asset_id = c.id AND disk_type = 'HDD' AND slot_no = 2 LIMIT 1) as hdd_2,
+        (SELECT GROUP_CONCAT(CONCAT(disk_type, ': ', capacity, unit) SEPARATOR ', ') FROM asset_volume WHERE asset_id = c.id) as volume_summary
+      FROM asset_core c
+      LEFT JOIN asset_spec s ON c.id = s.asset_id
+      LEFT JOIN asset_location l ON l.id = (
+        SELECT id FROM asset_location 
+        WHERE asset_id = c.id AND is_active = 1 
+        ORDER BY created_at DESC LIMIT 1
+      )
+      LEFT JOIN asset_network n ON n.id = (
+        SELECT id FROM asset_network 
+        WHERE asset_id = c.id AND is_active = 1 
+        ORDER BY created_at DESC LIMIT 1
+      )
+    `);
+
+    const catMap = {
+      'PC': 'pc', '서버': 'server', '저장매체': 'storage', '네트워크': 'network',
+      '업무지원장비': 'equipment', '사무가구': 'officeSupplies', '공간정보장비': 'survey',
+      '내빈/외빈': 'vip', 'PC부품': 'pcParts'
+    };
+
+    rows.forEach(row => {
+      const key = catMap[row.category] || 'pc';
+      masterData[key].push(row);
+    });
+
+    const [swInternal] = await connection.query('SELECT * FROM asset_software_perpetual');
+    const [swExternal] = await connection.query('SELECT * FROM asset_software_subscription');
+    const [swUsers] = await connection.query('SELECT * FROM asset_software_assignment');
+    const [users] = await connection.query('SELECT * FROM system_users');
+    const [logs] = await connection.query('SELECT * FROM asset_history ORDER BY created_at DESC');
+    
+    masterData.swInternal = swInternal;
+    masterData.swExternal = swExternal;
+    masterData.swUsers = swUsers;
+    masterData.users = users;
+    masterData.logs = logs;
+
+    connection.release();
+    res.json(masterData);
+  } catch (err) {
+    handleError(res, err, 'MASTER DATA');
+  }
+});
+
+// 3. Asset Save (Surgical Split to Normalized V3 Tables)
+app.post('/api/asset/:category/save', async (req, res) => {
+  const asset = req.body;
+  let connection;
+  try {
+    connection = await pool.getConnection();
+    await connection.beginTransaction();
+
+    // 3.1 asset_core
+    const coreFields = ['id', 'asset_code', 'category', 'asset_type', 'current_role', 'asset_purpose', 'service_type', 'purchase_corp', 'purchase_date', 'purchase_amount', 'purchase_vendor', 'approval_document', 'memo', 'manager_primary', 'manager_secondary', 'current_dept', 'previous_dept', 'user_current', 'previous_user', 'emp_no', 'user_position'];
+    const coreData = {};
+    coreFields.forEach(f => { if (asset[f] !== undefined) coreData[f] = asset[f]; });
+    const coreKeys = Object.keys(coreData);
+    const coreSql = `INSERT INTO asset_core (${coreKeys.join(', ')}) VALUES (${coreKeys.map(() => '?').join(', ')}) ON DUPLICATE KEY UPDATE ${coreKeys.map(k => `${k} = VALUES(${k})`).join(', ')}`;
+    await connection.query(coreSql, Object.values(coreData));
+
+    // 3.2 asset_spec
+    const specFields = ['hw_status', 'model_name', 'mainboard', 'os', 'cpu', 'ram', 'gpu', 'monitoring', 'price', 'monitor_inch', 'serial_num'];
+    const specData = { asset_id: asset.id };
+    specFields.forEach(f => { if (asset[f] !== undefined) specData[f] = asset[f]; });
+    const specKeys = Object.keys(specData);
+    const [specExists] = await connection.query('SELECT id FROM asset_spec WHERE asset_id = ?', [asset.id]);
+    if (specExists.length > 0) {
+        const updateSql = `UPDATE asset_spec SET ${specKeys.filter(k => k !== 'asset_id').map(k => `${k} = ?`).join(', ')} WHERE asset_id = ?`;
+        await connection.query(updateSql, [...specKeys.filter(k => k !== 'asset_id').map(k => specData[k]), asset.id]);
+    } else {
+        await connection.query(`INSERT INTO asset_spec (${specKeys.join(', ')}) VALUES (${specKeys.map(() => '?').join(', ')})`, Object.values(specData));
     }
-    let nextNum = 1;
+
-    if (lastCode) {
+    // 3.3 asset_volume (Legacy Parser)
-      const lastNum = parseInt(lastCode.split('-').pop() || '0');
+    const parseCapacity = (str) => {
-      nextNum = lastNum + 1;
+        if (!str || str.trim() === '' || str.toLowerCase() === 'null') return null;
+        const match = str.match(/(\d+(?:\.\d+)?)\s*([GT]B)?/i);
+        if (match) return { value: parseFloat(match[1]), unit: (match[2] || 'GB').toUpperCase() };
+        return null;
+    };
+    const storages = [
+        { val: asset.ssd_1, type: 'SSD', slot: 1 },
+        { val: asset.ssd_2, type: 'SSD', slot: 2 },
+        { val: asset.hdd_1, type: 'HDD', slot: 1 },
+        { val: asset.hdd_2, type: 'HDD', slot: 2 }
+    ];
+    await connection.query('DELETE FROM asset_volume WHERE asset_id = ?', [asset.id]);
+    for (const s of storages) {
+        const parsed = parseCapacity(s.val);
+        if (parsed) {
+            await connection.query('INSERT INTO asset_volume (asset_id, disk_type, capacity, unit, slot_no) VALUES (?, ?, ?, ?, ?)', 
+                [asset.id, s.type, parsed.value, parsed.unit, s.slot]);
+        }
     }
-    res.json({ nextCode: `${prefix}${String(nextNum).padStart(3, '0')}` });
+
+    // 3.4 asset_location
+    if (asset.location || asset.location_detail) {
+        const [locActive] = await connection.query('SELECT * FROM asset_location WHERE asset_id = ? AND is_active = 1', [asset.id]);
+        const isChanged = locActive.length === 0 || locActive[0].location !== asset.location || locActive[0].location_detail !== asset.location_detail || locActive[0].loc_x !== asset.loc_x || locActive[0].loc_y !== asset.loc_y;
+        if (isChanged) {
+            await connection.query('UPDATE asset_location SET is_active = 0, deactivated_at = NOW() WHERE asset_id = ? AND is_active = 1', [asset.id]);
+            await connection.query(`INSERT INTO asset_location (asset_id, location, location_detail, location_photo, loc_x, loc_y, is_active) VALUES (?, ?, ?, ?, ?, ?, 1)`, 
+                [asset.id, asset.location, asset.location_detail, asset.location_photo, asset.loc_x, asset.loc_y]);
+        }
+    }
+
+    // 3.5 asset_network
+    if (asset.ip_address || asset.mac_address || asset.remote_tool) {
+        const [netActive] = await connection.query('SELECT * FROM asset_network WHERE asset_id = ? AND is_active = 1', [asset.id]);
+        const isChanged = netActive.length === 0 || netActive[0].ip_address !== asset.ip_address || netActive[0].mac_address !== asset.mac_address || netActive[0].remote_tool !== asset.remote_tool || netActive[0].remote_id !== asset.remote_id || netActive[0].remote_pw !== asset.remote_pw;
+        if (isChanged) {
+            await connection.query('UPDATE asset_network SET is_active = 0, deactivated_at = NOW() WHERE asset_id = ? AND is_active = 1', [asset.id]);
+            await connection.query(`INSERT INTO asset_network (asset_id, ip_address, mac_address, remote_tool, remote_id, remote_pw, is_active) VALUES (?, ?, ?, ?, ?, ?, 1)`, 
+                [asset.id, asset.ip_address, asset.mac_address, asset.remote_tool, asset.remote_id, asset.remote_pw]);
+        }
+    }
+
+    await connection.commit();
+    console.log(`💾 [V3 ASSET SAVE] ID: ${asset.id}`);
+    res.json({ success: true });
+  } catch (err) {
+    if (connection) await connection.rollback();
+    handleError(res, err, 'ASSET SAVE V3');
+  } finally {
+    if (connection) connection.release();
+  }
+});
+
+// 4. Asset Delete
+app.delete('/api/asset/:category/:id', async (req, res) => {
+  const { category, id } = req.params;
+  
+  // Define mapping for which base table handles the delete
+  const deleteTableMap = {
+    pc: 'asset_core',
+    server: 'asset_core',
+    storage: 'asset_core',
+    network: 'asset_core',
+    equipment: 'asset_core',
+    officeSupplies: 'asset_core',
+    survey: 'asset_core',
+    vip: 'asset_core',
+    pcParts: 'asset_core',
+    swInternal: 'asset_software_perpetual',
+    swExternal: 'asset_software_subscription',
+    swUsers: 'asset_software_assignment',
+    users: 'system_users'
+  };
+
+  const table = deleteTableMap[category];
+  
+  if (!table) return res.status(400).json({ error: 'Invalid category for deletion' });
+  
+  try {
+    const connection = await pool.getConnection();
+    // For asset_core, ON DELETE CASCADE will handle spec, location, network, volume
+    await connection.query(`DELETE FROM ${table} WHERE id = ?`, [id]);
+    connection.release();
+    console.log(`🗑️ [ASSET DELETE] Category: ${category}, ID: ${id}`);
+    res.json({ success: true });
+  } catch (err) { 
+    handleError(res, err, 'ASSET DELETE'); 
+  }
+});
+
+// 5. Generate Next Asset Code
+app.get('/api/generate-asset-code', async (req, res) => {
+  const { prefix, purchaseDate } = req.query;
+  if (!prefix) return res.status(400).json({ error: 'Prefix is required' });
+  try {
+    const connection = await pool.getConnection();
+    const datePart = purchaseDate ? purchaseDate.toString().replace(/-/g, '').substring(0, 6) : '';
+    const searchPattern = datePart ? `${prefix}-${datePart}-%` : `${prefix}-%`;
+    let maxNum = 0;
+    for (const table of ASSET_TABLES) {
+        try {
+          const [rows] = await connection.query(`SELECT asset_code FROM ${table} WHERE asset_code LIKE ?`, [searchPattern]);
+          rows.forEach(row => {
+            const parts = row.asset_code.split('-');
+            const num = parseInt(parts[parts.length - 1]);
+            if (!isNaN(num) && num > maxNum) maxNum = num;
+          });
+        } catch (err) {}
+    }
+    const nextNum = maxNum + 1;
+    const nextCode = datePart ? `${prefix}-${datePart}-${String(nextNum).padStart(4, '0')}` : `${prefix}-${String(nextNum).padStart(4, '0')}`;
+    connection.release();
+    res.json({ nextCode });
   } catch (err) { handleError(res, err, 'GENERATE CODE'); }
 });
 
-// 6. Map Config API (Real-time Save)
+// 6. Map Config API
 app.get('/api/maps', (req, res) => {
   try {
-    if (!fs.existsSync('map_config.json')) {
+    if (!fs.existsSync('map_config.json')) return res.json({});
-      return res.json({});
-    }
     const data = fs.readFileSync('map_config.json', 'utf8');
     res.json(JSON.parse(data || '{}'));
-  } catch (err) {
+  } catch (err) { handleError(res, err, 'GET MAPS'); }
-    handleError(res, err, 'GET MAPS');
-  }
 });
 
 app.post('/api/maps/save', (req, res) => {
   try {
     const { path, boxes } = req.body;
     if (!path) return res.status(400).json({ error: 'Path is required' });
-
     let config = {};
-    if (fs.existsSync('map_config.json')) {
+    if (fs.existsSync('map_config.json')) config = JSON.parse(fs.readFileSync('map_config.json', 'utf8') || '{}');
-      config = JSON.parse(fs.readFileSync('map_config.json', 'utf8') || '{}');
-    }
-
     config[path] = boxes;
     fs.writeFileSync('map_config.json', JSON.stringify(config, null, 2));
-    console.log(`💾 [MAP SAVE] Updated config for: ${path}`);
     res.json({ success: true });
-  } catch (err) {
+  } catch (err) { handleError(res, err, 'SAVE MAPS'); }
-    handleError(res, err, 'SAVE MAPS');
-  }
 });
 
 app.listen(3000, '0.0.0.0', () => {
-  console.log('📡 ITAM BACKEND SERVER RUNNING ON PORT 3000 (Multi-Table Optimized)');
+  console.log('📡 ITAM BACKEND SERVER RUNNING ON PORT 3000 (V3 Normalized)');
 });

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,24 @@ 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';
+      const purchaseDate = (document.getElementById('hw-purchase_date') as HTMLInputElement)?.value || '';
+      
+      try {
+        const res = await fetch(`http://${location.hostname}:3000/api/generate-asset-code?prefix=${prefix}&purchaseDate=${purchaseDate}`);
+        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());
 
@@ -341,6 +359,7 @@ class HwAssetModal extends BaseModal {
     setFieldValue('hw-asset_code', asset.asset_code || '');
     setFieldValue('hw-purchase_corp', asset.purchase_corp || '');
     setFieldValue('hw-category', asset.category || '');
+    setFieldValue('hw-current_role', asset.current_role || 'Normal');
     
     const types = CATEGORY_TYPE_MAP[asset.category] || [];
     const typeSelect = document.getElementById('hw-asset_type') as HTMLSelectElement;
@@ -390,19 +409,50 @@ class HwAssetModal extends BaseModal {
 
     parseAndSetLocation(asset.location || '', asset.location_detail || '', 'hw-bldg-select', 'hw-location_detail');
     this.renderHistory(asset.id);
+
+    // Initial visibility check based on role
+    this.applyRoleVisibility(asset.current_role || 'Normal');
   }
 
   protected onAfterOpen(asset: any, mode: string): void {
     this.updateMapButtonVisibility(asset);
 
-    const isServer = asset.category === '서버' || asset.asset_code?.startsWith('SVR') || asset.asset_type === '서버PC';
+    const role = asset.current_role || 'Normal';
-    const isPc = asset.category === 'PC' || asset.asset_code?.startsWith('PC');
+    this.applyRoleVisibility(role);
-    const isVip = asset.category === '선물' || asset.category === 'VIP';
 
+    // Role change event
+    const roleSelect = document.getElementById('hw-current_role') as HTMLSelectElement;
+    roleSelect?.addEventListener('change', (e) => {
+        this.applyRoleVisibility((e.target as HTMLSelectElement).value);
+    });
+  }
+
+  private applyRoleVisibility(role: string): void {
+    const isServer = role === 'Server';
+    const isPersonal = role === 'Personal';
+
+    // Section Visibility
+    const networkSectionTitle = document.evaluate("//div[contains(text(), '네트워크 및 접속 정보')]", document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue as HTMLElement;
+    const locationSectionTitle = document.evaluate("//div[contains(text(), '설치 위치')]", document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue as HTMLElement;
+
+    // Helper to toggle visibility of elements after a title until next section title
+    const toggleSection = (titleEl: HTMLElement, show: boolean) => {
+        if (!titleEl) return;
+        titleEl.style.display = show ? 'block' : 'none';
+        let next = titleEl.nextElementSibling as HTMLElement;
+        while (next && !next.classList.contains('form-section-title')) {
+            next.style.display = show ? 'flex' : 'none';
+            next = next.nextElementSibling as HTMLElement;
+        }
+    };
+
+    // Show/Hide based on role
+    toggleSection(networkSectionTitle, isServer);
+    toggleSection(locationSectionTitle, !isPersonal);
+
+    // Specific fields
     document.querySelectorAll('.server-only').forEach(el => (el as HTMLElement).style.display = isServer ? 'flex' : 'none');
-    document.querySelectorAll('.non-server').forEach(el => (el as HTMLElement).style.display = !isServer ? 'flex' : 'none');
+    document.querySelectorAll('.pc-only').forEach(el => (el as HTMLElement).style.display = isPersonal ? 'flex' : 'none');
-    document.querySelectorAll('.pc-only').forEach(el => (el as HTMLElement).style.display = isPc ? 'flex' : 'none');
-    document.querySelectorAll('.user-tracking-field').forEach(el => (el as HTMLElement).style.display = (!isServer && !isVip) ? 'flex' : 'none');
   }
 
   private updateMapButtonVisibility(asset?: any) {

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/core/state.ts

@@ -60,44 +60,20 @@ export const state: AppState = {
 };
 
 /**
- * 신규 14개 테이블 구조에 맞춘 데이터 로드
+ * 통합 V2 스키마에 맞춘 데이터 로드
  */
 export async function loadMasterDataFromDB() {
   try {
-    const endpoints = [
+    const response = await fetch(`${API_BASE_URL}/api/assets/master`);
-      { key: 'users', url: '/api/users' },
+    if (!response.ok) throw new Error('Failed to fetch master data');
-      { key: 'pc', url: '/api/pc' },
+    
-      { key: 'server', url: '/api/server' },
+    const data = await response.json();
-      { key: 'storage', url: '/api/storage' },
+    
-      { key: 'network', url: '/api/network' },
+    // 전역 상태 업데이트
-      { key: 'survey', url: '/api/survey' }, 
+    state.masterData = {
-      { key: 'pcParts', url: '/api/pc-parts' },
+      ...state.masterData,
-      { key: 'equipment', url: '/api/equipment' },
+      ...data
-      { key: 'officeSupplies', url: '/api/office-supplies' }, 
+    };
-      { key: 'swInternal', url: '/api/sw/internal' },
-      { key: 'swExternal', url: '/api/sw/external' },
-      { key: 'cloud', url: '/api/cloud' },
-      { key: 'domain', url: '/api/domain' },
-      { key: 'cost', url: '/api/cost' },
-      { key: 'vip', url: '/api/vip' }, 
-      { key: 'swUsers', url: '/api/asset/software/assignment' },
-      { key: 'logs', url: '/api/asset/history' }
-    ];
-
-    const results = await Promise.all(endpoints.map(e => fetch(API_BASE_URL + e.url)));
-
-    for (let i = 0; i < endpoints.length; i++) {
-      if (results[i].ok) {
-        const data = await results[i].json();
-        const key = endpoints[i].key;
-        (state.masterData as any)[key] = Array.isArray(data) ? data : [];
-      }
-    }
-
-    // Mapping for backward compatibility
-    state.masterData.equip = state.masterData.equipment;
-    state.masterData.subSw = state.masterData.swExternal;
-    state.masterData.permSw = state.masterData.swInternal;
 
     // 하드웨어 통합 (대시보드 호환용)
     state.masterData.hw = [
@@ -114,10 +90,10 @@ export async function loadMasterDataFromDB() {
     state.masterData.sw = [
       ...state.masterData.swInternal,
       ...state.masterData.swExternal,
-      ...state.masterData.cloud
+      ...(state.masterData.cloud || [])
     ];
 
-    console.log('✅ All data (including users) loaded and unified');
+    console.log('✅ V2 Normalized data loaded successfully');
     return true;
   } catch (err) {
     console.warn('⚠️ 서버 연결 실패:', err);
@@ -130,39 +106,15 @@ export function updateState(newState: Partial<AppState>) {
 }
 
 /**
- * 자산 저장 (Generic API)
+ * 자산 저장 (V2 Normalized API)
  */
 export async function saveAsset(category: string, asset: any) {
   try {
-    const endpointMap: Record<string, string> = {
+    const url = `${API_BASE_URL}/api/asset/${category}/save`;
-      'users': '/api/users/batch',
-      'pc': '/api/pc/batch',
-      'server': '/api/server/batch',
-      'storage': '/api/storage/batch',
-      'network': '/api/network/batch',
-      'survey': '/api/survey/batch',
-      'pcParts': '/api/pc-parts/batch',
-      'equipment': '/api/equipment/batch',
-      'officeSupplies': '/api/office-supplies/batch',
-      'swInternal': '/api/sw/internal/batch',
-      'swExternal': '/api/sw/external/batch',
-      'cloud': '/api/cloud/batch',
-      'domain': '/api/domain/batch',
-      'cost': '/api/cost/batch',
-      'vip': '/api/vip/batch'
-    };
-
-    const url = `${API_BASE_URL}${endpointMap[category]}`;
-    const currentList = [...(state.masterData as any)[category]];
-    const idx = currentList.findIndex(a => a.id === asset.id);
-    
-    if (idx > -1) currentList[idx] = asset;
-    else currentList.push(asset);
-
     const response = await fetch(url, {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify(currentList)
+      body: JSON.stringify(asset)
     });
     
     if (response.ok) {
@@ -176,37 +128,12 @@ export async function saveAsset(category: string, asset: any) {
 }
 
 /**
- * 자산 삭제 (Generic API - Batch 방식 활용)
+ * 자산 삭제 (V2 API)
  */
 export async function deleteAsset(category: string, assetId: string) {
   try {
-    const endpointMap: Record<string, string> = {
+    const url = `${API_BASE_URL}/api/asset/${category}/${assetId}`;
-      'users': '/api/users/batch',
+    const response = await fetch(url, { method: 'DELETE' });
-      'pc': '/api/pc/batch',
-      'server': '/api/server/batch',
-      'storage': '/api/storage/batch',
-      'network': '/api/network/batch',
-      'survey': '/api/survey/batch',
-      'pcParts': '/api/pc-parts/batch',
-      'equipment': '/api/equipment/batch',
-      'officeSupplies': '/api/office-supplies/batch',
-      'swInternal': '/api/sw/internal/batch',
-      'swExternal': '/api/sw/external/batch',
-      'cloud': '/api/cloud/batch',
-      'domain': '/api/domain/batch',
-      'cost': '/api/cost/batch',
-      'vip': '/api/vip/batch'
-    };
-
-    const url = `${API_BASE_URL}${endpointMap[category]}`;
-    const currentList = [...(state.masterData as any)[category]];
-    const filteredList = currentList.filter(a => a.id !== assetId);
-
-    const response = await fetch(url, {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify(filteredList)
-    });
     
     if (response.ok) {
         await loadMasterDataFromDB(); // 전역 상태 갱신

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,518 @@ 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 as any).currentViewMode = 'system';
 
+  // 2. 뷰 전환 토글 버튼 생성 (명칭 변경)
+  const toggleWrapper = document.createElement('div');
+  toggleWrapper.className = 'view-toggle-container';
+  toggleWrapper.innerHTML = `
+    <div class="view-toggle">
+      <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>
+  `;
+  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>, locWarning: 0, typeWarning: 0 };
+    const intStats = { total: 0, locCounts: {} as Record<string, number>, typeCounts: {} as 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 (serviceType === '외부') {
+          const anomaly = checkAnomaly(serviceType, loc, type);
+          if (anomaly.isLocWarning) extStats.locWarning++;
+          if (anomaly.isTypeWarning) extStats.typeWarning++;
+      }
+    });
+
+    // 템플릿 제너레이터 함수 (HTML 중복 제거)
+    const generateDetailStatHTML = (title: string, stats: typeof extStats) => `
+      <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).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).sort((a, b) => b[1] - a[1]).slice(0, 6).map(([t, c]) => {
+              const isTypeWarning = title.includes('외부') && t.toLowerCase().replace(/\s/g, '').includes('서버pc');
+              return `<span style="${isTypeWarning ? 'color:#E11D48; font-weight:700;' : ''}; font-size: 13px;">${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 === '외부' && 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 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) {
+    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 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) => {
@@ -127,18 +549,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 +569,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();
 }