fix: 대시보드 사양 적정성 직무 매핑 수정 (system_users.position 우선 참조)

- HwDashboard: asset_core.user_position 대신 system_users.user_name -> position 으로 세부 직무 조회
- ListFactory: 동일하게 세부 직무명 우선 참조
- 미니 모달 조직(직무) 컬럼: _resolved_position 사용으로 정확한 직무명 표시
- 수정된 필드명: u.name -> u.user_name (system_users 실제 컬럼명 반영)
- 예) 디자이너(3D, 영상) 직군이 최상급 기준으로 올바르게 판정됨

.env

@@ -0,0 +1,6 @@
+DB_HOST=172.16.8.151
+DB_PORT=3306
+DB_USER=itam_admin
+DB_PASS=itam1234
+DB_NAME=itam
+PORT=3000

PLAN_ASSET_HISTORY.md

@@ -0,0 +1,60 @@
+# 자산 이력 누적 관리 시스템 (Cumulative Asset History System) 구현 계획
+
+본 문서는 자산의 라이프사이클(조직, 사용자, 용도, 상태 변동)을 체계적으로 추적하고 누적 관리하기 위한 기술적 설계 및 단계별 구현 계획을 담고 있습니다.
+
+## 1. 목적
+- 자산 정보 수정 시 중요 변경 사항을 자동으로 감지하여 이력(Log)화
+- 과거부터 현재까지의 변동 사항을 타임라인 형태로 시각화하여 자산 흐름 파악
+- 데이터 정합성을 위해 서버 측에서 변경 전/후 스냅샷 비교 방식 채택
+
+## 2. 관리 대상 이력 (Watch Fields)
+다음 항목의 변경이 발생할 경우 이력을 자동 생성합니다.
+1. **조직 변동**: `current_dept` (현 사용조직) ↔ `previous_dept` 업데이트 포함
+2. **사용자 변동**: `user_current` (현 사용자) ↔ `previous_user` 업데이트 포함
+3. **용도 변경**: `asset_type`, `current_role` (예: 개인PC -> 공용PC)
+4. **상태 변경**: `hw_status` (예: 운영 -> 수리, 재고 -> 폐기 등)
+
+## 3. 기술 설계 (Technical Design)
+
+### A. 데이터베이스 (DB)
+- **대상 테이블**: `asset_history`
+- **컬럼 구조 활용 및 보완**:
+    - `asset_id`: 대상 자산 식별자
+    - `event_type`: 변경 유형 (DEPT_CHANGE, USER_CHANGE, ROLE_CHANGE, STATUS_CHANGE)
+    - `details`: "상태 변경: 운영 -> 수리" 와 같이 읽기 쉬운 문자열 저장
+    - `cost`: 관련 비용 발생 시 기록 (수리비 등)
+    - `log_user`: 변경을 수행한 작업자
+    - `log_date`: 변경 발생 일시
+
+### B. 백엔드 (Server-side Logic)
+- **위치**: `server.js` 의 `POST /api/asset/:category/save` 엔드포인트
+- **동작 흐름**:
+    1. **Snapshot**: 인서트/업데이트 수행 전, 기존 DB의 데이터를 `SELECT`하여 메모리에 저장.
+    2. **Comparison**: 요청된 신규 데이터와 기존 데이터를 필드별로 대조.
+    3. **Auto-logging**: 변경점이 발견되면 `asset_history` 테이블에 즉시 인서트.
+    4. **Transaction**: 모든 로그 생성이 자산 저장과 하나의 트랜잭션으로 묶여야 함.
+
+### C. 프론트엔드 (UI/UX)
+- **위치**: `HWModal.ts` 우측 `modal-history-area`
+- **개선 사항**:
+    - `renderHistory()` 함수를 고도화하여 이벤트 타입별 아이콘/컬러 적용.
+    - "이전 값 ➔ 이후 값" 형태의 직관적인 레이아웃 도입.
+    - 스크롤을 통한 무제한 누적 이력 조회 지원.
+
+## 4. 단계별 구현 로직
+
+### 1단계: 서버 로직 고도화
+- `server.js`에 비교 함수(`compareAndLog`) 구현.
+- 각 자산 카테고리별 저장 로직에 비교 로직 삽입.
+
+### 2단계: DB 데이터 마이그레이션 (필요시)
+- 기존 자산의 `current_dept` 등을 `previous_dept`로 밀어내는 로직 점검.
+
+### 3단계: UI 타임라인 렌더링 개선
+- `modal.css`에 이력 전용 스타일(이벤트 뱃지 등) 추가.
+- `HWModal.ts`에서 최신 로그를 실시간으로 다시 불러오는 로직 확인.
+
+## 5. 검증 계획
+- **자동 감지 테스트**: 상태 변경 후 저장 시 우측 이력에 즉시 한 줄이 추가되는지 확인.
+- **다중 변경 테스트**: 조직과 사용자를 동시에 변경했을 때 두 개의 로그가 생성되는지 확인.
+- **데이터 무결성**: 수정을 취소하거나 저장 실패 시 로그가 남지 않는지(Transaction) 확인.

README.md

@@ -51,6 +51,6 @@
     *   **Input/Button**: 입력 필드와 버튼은 최소한의 보더와 포인트 컬러만 사용하여 정갈하게 표현합니다.
     *   **Modal (모달 공통 규칙)**:
         *   **Header**: 짙은 그린(`#1E5149`) 배경에 화이트 텍스트를 사용하며, 우측 상단에 명확한 'X' 닫기 버튼을 배치합니다.
-        *   **Interaction**: 사용자의 편의를 위해 `ESC` 키를 누르거나 모달 바깥 영역(Overlay)을 클릭하면 모달이 닫히도록 구현합니다.
+        *   **Interaction**: 사용자의 오입력(실수로 바깥을 클릭하여 입력 내용이 날아가는 현상)을 방지하기 위해 **모달 바깥 영역(Overlay) 클릭 시 모달이 닫히지 않도록** 설정합니다. 닫기는 오직 'ESC' 키 또는 명시적인 'X' 및 '닫기' 버튼을 통해서만 가능합니다.
         *   **Layout**: `detail.png` 기준의 2열 그리드 시스템을 권장하며, 하단 우측에 액션 버튼(닫기, 저장 등)을 배치합니다.
 

backup_db.js

@@ -0,0 +1,59 @@
+import mysql from 'mysql2/promise';
+import dotenv from 'dotenv';
+import * as xlsx from 'xlsx';
+import fs from 'fs';
+
+dotenv.config();
+
+const { DB_HOST, DB_USER, DB_PASS, DB_NAME, DB_PORT } = process.env;
+
+async function backup() {
+  const connection = await mysql.createConnection({
+    host: DB_HOST,
+    user: DB_USER,
+    password: DB_PASS,
+    database: DB_NAME,
+    port: parseInt(DB_PORT || '3306')
+  });
+
+  console.log('🚀 Starting Database Backup Process...');
+
+  const tables = [
+    'asset_pc', 'asset_server', 'asset_storage', 'asset_remote', 
+    'asset_equipment', 'asset_office_supplies', 'asset_survey', 'asset_vip'
+  ];
+  
+  const wb = xlsx.utils.book_new();
+
+  for (const table of tables) {
+    try {
+      // 1. Create table backup
+      await connection.query(`DROP TABLE IF EXISTS ${table}_backup`);
+      await connection.query(`CREATE TABLE ${table}_backup AS SELECT * FROM ${table}`);
+      console.log(`✅ Table backup created: ${table} -> ${table}_backup`);
+
+      // 2. Fetch data for Excel
+      const [rows] = await connection.query(`SELECT * FROM ${table}`);
+      if (rows.length > 0) {
+          const ws = xlsx.utils.json_to_sheet(rows);
+          // Sheet names max length is 31 chars
+          const sheetName = table.substring(0, 31);
+          xlsx.utils.book_append_sheet(wb, ws, sheetName);
+      }
+    } catch (e) {
+      console.warn(`⚠️ Skipped ${table}: ${e.message}`);
+    }
+  }
+
+  // 3. Write Excel file
+  const fileName = 'backupDB_20260608.xlsx';
+  xlsx.writeFile(wb, fileName);
+  console.log(`✅ Excel data exported successfully to ${fileName}`);
+  
+  await connection.end();
+}
+
+backup().catch(err => {
+  console.error('❌ Backup Failed:', err);
+  process.exit(1);
+});

check_logs.js

@@ -0,0 +1,28 @@
+import mysql from 'mysql2/promise';
+import dotenv from 'dotenv';
+
+dotenv.config();
+
+const { DB_HOST, DB_USER, DB_PASS, DB_NAME, DB_PORT } = process.env;
+
+async function checkRecentLogs() {
+  const connection = await mysql.createConnection({
+    host: DB_HOST,
+    user: DB_USER,
+    password: DB_PASS,
+    database: DB_NAME,
+    port: parseInt(DB_PORT || '3306')
+  });
+
+  console.log('--- Recent History Logs ---');
+  const [rows] = await connection.query('SELECT * FROM asset_history ORDER BY created_at DESC LIMIT 5');
+  console.log(JSON.stringify(rows, null, 2));
+
+  console.log('\n--- Recent Core Data (to check current_dept) ---');
+  const [coreRows] = await connection.query('SELECT id, asset_code, current_dept, previous_dept FROM asset_core ORDER BY updated_at DESC LIMIT 5');
+  console.log(JSON.stringify(coreRows, null, 2));
+
+  await connection.end();
+}
+
+checkRecentLogs().catch(console.error);

check_network.js

@@ -0,0 +1,29 @@
+import mysql from 'mysql2/promise';
+import dotenv from 'dotenv';
+
+dotenv.config();
+
+const { DB_HOST, DB_USER, DB_PASS, DB_NAME, DB_PORT } = process.env;
+
+async function checkRemote() {
+  const connection = await mysql.createConnection({
+    host: DB_HOST,
+    user: DB_USER,
+    password: DB_PASS,
+    database: DB_NAME,
+    port: parseInt(DB_PORT || '3306')
+  });
+
+  console.log('--- Checking asset_remote table ---');
+  
+  const [columns] = await connection.query('DESCRIBE asset_remote');
+  const cols = columns.map(c => c.Field);
+  console.log('Columns in asset_remote:', cols.join(', '));
+
+  const [count] = await connection.query('SELECT COUNT(*) as count FROM asset_remote WHERE remote_tool IS NOT NULL OR remote_id IS NOT NULL');
+  console.log(`Rows with remote info (tool or id): ${count[0].count}`);
+
+  await connection.end();
+}
+
+checkRemote().catch(console.error);

drop_legacy.js

@@ -0,0 +1,44 @@
+import mysql from 'mysql2/promise';
+import dotenv from 'dotenv';
+
+dotenv.config();
+
+const { DB_HOST, DB_USER, DB_PASS, DB_NAME, DB_PORT } = process.env;
+
+async function dropLegacyTables() {
+  const connection = await mysql.createConnection({
+    host: DB_HOST,
+    user: DB_USER,
+    password: DB_PASS,
+    database: DB_NAME,
+    port: parseInt(DB_PORT || '3306')
+  });
+
+  console.log('🧹 Starting cleanup of obsolete legacy backup tables...');
+
+  const tablesToDrop = [
+    'asset_pc', 'asset_pc_backup',
+    'asset_server', 'asset_server_backup',
+    'asset_storage', 'asset_storage_backup',
+    'asset_remote_backup', // IMPORTANT: DO NOT drop asset_remote!
+    'asset_equipment', 'asset_equipment_backup',
+    'asset_office_supplies', 'asset_office_supplies_backup',
+    'asset_survey', 'asset_survey_backup',
+    'asset_vip', 'asset_vip_backup',
+    'asset_pc_parts'
+  ];
+
+  for (const table of tablesToDrop) {
+    try {
+      await connection.query(`DROP TABLE IF EXISTS ${table}`);
+      console.log(`✅ Dropped table: ${table}`);
+    } catch (err) {
+      console.warn(`⚠️ Failed to drop table ${table}: ${err.message}`);
+    }
+  }
+
+  console.log('🎉 Cleanup complete. Database is now lean and mean.');
+  await connection.end();
+}
+
+dropLegacyTables().catch(console.error);

index.html

@@ -9,6 +9,7 @@
   <link rel="stylesheet"
     href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css" />
   <link rel="stylesheet" href="/src/styles/common.css" />
+  <link rel="stylesheet" href="/src/styles/login.css" />
   <link rel="stylesheet" href="/src/styles/guide.css" />
   <link rel="stylesheet" href="/src/styles/modal.css" />
   <link rel="stylesheet" href="/src/styles/dashboard.css" />
@@ -18,7 +19,7 @@
 </head>
 
 <body>
-  <div class="app-layout">
+  <div class="app-layout" id="app-layout" style="display: none;">
     <!-- Single-Line Integrated Header -->
     <header class="main-header">
       <div class="header-container" id="nav-container">
@@ -33,6 +34,14 @@
         </nav>
 
         <div class="header-actions">
+          <div class="role-switcher" id="role-switcher">
+            <span class="role-label user active">실무자</span>
+            <label class="switch">
+              <input type="checkbox" id="role-toggle-checkbox">
+              <span class="slider round"></span>
+            </label>
+            <span class="role-label admin">관리자</span>
+          </div>
           <button id="btn-admin-page" class="hidden"></button> <!-- JS 호환용 숨김 -->
           <button id="btn-open-guide-header" class="btn btn-outline" title="프로세스 가이드">
             <i data-lucide="book-open"></i> 가이드

map_config.json

@@ -0,0 +1,768 @@
+{
+  "img/location_photo/IDC/서관205.png": [
+    {
+      "x": "50.78",
+      "y": "1.53",
+      "w": "45.83",
+      "h": "6.10"
+    },
+    {
+      "x": "50.67",
+      "y": "10.35",
+      "w": "45.95",
+      "h": "5.99"
+    },
+    {
+      "x": "50.78",
+      "y": "19.06",
+      "w": "45.83",
+      "h": "6.32"
+    },
+    {
+      "x": "50.67",
+      "y": "27.89",
+      "w": "46.06",
+      "h": "6.32"
+    },
+    {
+      "x": "50.78",
+      "y": "36.71",
+      "w": "45.95",
+      "h": "6.21"
+    },
+    {
+      "x": "50.78",
+      "y": "45.64",
+      "w": "45.83",
+      "h": "6.32"
+    },
+    {
+      "x": "50.67",
+      "y": "54.25",
+      "w": "46.06",
+      "h": "6.54"
+    },
+    {
+      "x": "50.90",
+      "y": "63.29",
+      "w": "45.72",
+      "h": "5.99"
+    },
+    {
+      "x": "50.90",
+      "y": "72.00",
+      "w": "45.72",
+      "h": "6.32"
+    },
+    {
+      "x": "50.78",
+      "y": "81.92",
+      "w": "18.40",
+      "h": "15.58"
+    },
+    {
+      "x": "78.67",
+      "y": "82.03",
+      "w": "17.94",
+      "h": "15.25"
+    }
+  ],
+  "img/location_photo/IDC/서관202.png": [
+    {
+      "x": "56.35",
+      "y": "64.02",
+      "w": "40.41",
+      "h": "5.89"
+    },
+    {
+      "x": "56.35",
+      "y": "71.57",
+      "w": "40.66",
+      "h": "5.89"
+    },
+    {
+      "x": "56.23",
+      "y": "79.25",
+      "w": "40.53",
+      "h": "5.76"
+    },
+    {
+      "x": "55.98",
+      "y": "86.42",
+      "w": "41.15",
+      "h": "6.27"
+    }
+  ],
+  "img/location_photo/IDC/서관203.png": [
+    {
+      "x": "56.07",
+      "y": "2.44",
+      "w": "40.91",
+      "h": "6.40"
+    },
+    {
+      "x": "56.07",
+      "y": "10.12",
+      "w": "40.79",
+      "h": "6.27"
+    },
+    {
+      "x": "55.95",
+      "y": "17.80",
+      "w": "41.04",
+      "h": "6.14"
+    },
+    {
+      "x": "55.95",
+      "y": "63.51",
+      "w": "40.91",
+      "h": "6.14"
+    },
+    {
+      "x": "55.95",
+      "y": "71.19",
+      "w": "41.04",
+      "h": "6.14"
+    },
+    {
+      "x": "56.07",
+      "y": "87.70",
+      "w": "40.91",
+      "h": "6.02"
+    }
+  ],
+  "img/location_photo/IDC/서관204.png": [
+    {
+      "x": "48.87",
+      "y": "2.57",
+      "w": "47.40",
+      "h": "6.14"
+    },
+    {
+      "x": "49.01",
+      "y": "10.38",
+      "w": "47.40",
+      "h": "5.89"
+    },
+    {
+      "x": "48.87",
+      "y": "17.93",
+      "w": "47.40",
+      "h": "5.89"
+    },
+    {
+      "x": "48.73",
+      "y": "25.49",
+      "w": "47.69",
+      "h": "6.27"
+    },
+    {
+      "x": "48.87",
+      "y": "33.17",
+      "w": "47.40",
+      "h": "6.02"
+    },
+    {
+      "x": "48.87",
+      "y": "40.59",
+      "w": "47.54",
+      "h": "6.40"
+    },
+    {
+      "x": "48.87",
+      "y": "48.40",
+      "w": "47.54",
+      "h": "6.14"
+    },
+    {
+      "x": "48.73",
+      "y": "55.95",
+      "w": "47.69",
+      "h": "6.14"
+    },
+    {
+      "x": "49.01",
+      "y": "63.63",
+      "w": "47.40",
+      "h": "6.14"
+    },
+    {
+      "x": "48.73",
+      "y": "71.06",
+      "w": "47.54",
+      "h": "6.27"
+    },
+    {
+      "x": "48.87",
+      "y": "78.74",
+      "w": "47.40",
+      "h": "6.27"
+    },
+    {
+      "x": "49.01",
+      "y": "86.68",
+      "w": "18.76",
+      "h": "12.29"
+    }
+  ],
+  "img/location_photo/IDC/동관53.png": [
+    {
+      "x": "61.62",
+      "y": "3.08",
+      "w": "35.63",
+      "h": "7.55"
+    },
+    {
+      "x": "61.53",
+      "y": "12.68",
+      "w": "35.80",
+      "h": "7.30"
+    },
+    {
+      "x": "61.70",
+      "y": "21.65",
+      "w": "35.63",
+      "h": "7.68"
+    }
+  ],
+  "img/location_photo/IDC/동관54.png": [
+    {
+      "x": "54.71",
+      "y": "2.57",
+      "w": "42.21",
+      "h": "6.27"
+    },
+    {
+      "x": "54.71",
+      "y": "10.38",
+      "w": "42.21",
+      "h": "6.14"
+    },
+    {
+      "x": "54.71",
+      "y": "27.15",
+      "w": "41.97",
+      "h": "6.27"
+    },
+    {
+      "x": "54.71",
+      "y": "43.54",
+      "w": "42.09",
+      "h": "6.02"
+    },
+    {
+      "x": "54.71",
+      "y": "54.93",
+      "w": "42.09",
+      "h": "6.40"
+    },
+    {
+      "x": "54.83",
+      "y": "70.16",
+      "w": "42.09",
+      "h": "6.27"
+    },
+    {
+      "x": "54.71",
+      "y": "79.51",
+      "w": "42.09",
+      "h": "6.14"
+    }
+  ],
+  "img/location_photo/기술개발센터/서버실_1.png": [
+    {
+      "x": "69.45",
+      "y": "1.10",
+      "w": "8.58",
+      "h": "11.45"
+    },
+    {
+      "x": "79.21",
+      "y": "1.10",
+      "w": "11.65",
+      "h": "11.45"
+    },
+    {
+      "x": "90.16",
+      "y": "23.23",
+      "w": "8.43",
+      "h": "21.11"
+    },
+    {
+      "x": "52.91",
+      "y": "53.35",
+      "w": "8.66",
+      "h": "21.11"
+    },
+    {
+      "x": "62.36",
+      "y": "53.47",
+      "w": "8.43",
+      "h": "21.11"
+    },
+    {
+      "x": "71.65",
+      "y": "53.47",
+      "w": "8.50",
+      "h": "20.98"
+    },
+    {
+      "x": "80.87",
+      "y": "53.35",
+      "w": "8.35",
+      "h": "21.23"
+    },
+    {
+      "x": "90.08",
+      "y": "53.35",
+      "w": "8.58",
+      "h": "21.11"
+    },
+    {
+      "x": "43.78",
+      "y": "76.38",
+      "w": "8.50",
+      "h": "21.11"
+    },
+    {
+      "x": "53.15",
+      "y": "76.38",
+      "w": "8.43",
+      "h": "21.23"
+    },
+    {
+      "x": "62.44",
+      "y": "76.51",
+      "w": "8.35",
+      "h": "20.98"
+    },
+    {
+      "x": "71.57",
+      "y": "76.25",
+      "w": "8.43",
+      "h": "21.11"
+    },
+    {
+      "x": "81.02",
+      "y": "76.64",
+      "w": "8.27",
+      "h": "20.85"
+    },
+    {
+      "x": "90.24",
+      "y": "76.64",
+      "w": "8.50",
+      "h": "20.98"
+    }
+  ],
+  "img/location_photo/기술개발센터/서버실_2.png": [
+    {
+      "x": "49.60",
+      "y": "1.93",
+      "w": "46.96",
+      "h": "6.53"
+    },
+    {
+      "x": "49.34",
+      "y": "11.92",
+      "w": "47.09",
+      "h": "6.66"
+    },
+    {
+      "x": "49.34",
+      "y": "21.39",
+      "w": "47.35",
+      "h": "6.40"
+    },
+    {
+      "x": "49.47",
+      "y": "30.73",
+      "w": "47.22",
+      "h": "6.40"
+    },
+    {
+      "x": "49.34",
+      "y": "39.82",
+      "w": "47.22",
+      "h": "6.53"
+    },
+    {
+      "x": "49.47",
+      "y": "49.68",
+      "w": "47.09",
+      "h": "6.91"
+    },
+    {
+      "x": "49.60",
+      "y": "59.28",
+      "w": "46.82",
+      "h": "6.27"
+    },
+    {
+      "x": "49.34",
+      "y": "68.63",
+      "w": "47.35",
+      "h": "6.40"
+    },
+    {
+      "x": "49.47",
+      "y": "77.84",
+      "w": "46.82",
+      "h": "6.40"
+    },
+    {
+      "x": "49.60",
+      "y": "86.93",
+      "w": "46.82",
+      "h": "6.53"
+    }
+  ],
+  "img/location_photo/한맥빌딩/MDF실/MDF_1.png": [
+    {
+      "x": "49.33",
+      "y": "14.99",
+      "w": "7.13",
+      "h": "11.01"
+    },
+    {
+      "x": "59.23",
+      "y": "14.73",
+      "w": "7.13",
+      "h": "11.14"
+    },
+    {
+      "x": "69.22",
+      "y": "14.86",
+      "w": "7.13",
+      "h": "11.14"
+    },
+    {
+      "x": "78.96",
+      "y": "14.99",
+      "w": "7.30",
+      "h": "11.01"
+    },
+    {
+      "x": "89.03",
+      "y": "14.99",
+      "w": "7.05",
+      "h": "11.14"
+    },
+    {
+      "x": "48.57",
+      "y": "34.19",
+      "w": "7.39",
+      "h": "11.14"
+    },
+    {
+      "x": "56.80",
+      "y": "34.06",
+      "w": "7.22",
+      "h": "11.27"
+    },
+    {
+      "x": "64.94",
+      "y": "34.19",
+      "w": "7.30",
+      "h": "11.01"
+    },
+    {
+      "x": "72.83",
+      "y": "34.19",
+      "w": "7.47",
+      "h": "10.88"
+    },
+    {
+      "x": "81.22",
+      "y": "34.06",
+      "w": "7.22",
+      "h": "11.14"
+    },
+    {
+      "x": "89.36",
+      "y": "34.19",
+      "w": "7.13",
+      "h": "11.01"
+    },
+    {
+      "x": "48.66",
+      "y": "53.52",
+      "w": "9.06",
+      "h": "20.99"
+    },
+    {
+      "x": "58.48",
+      "y": "53.27",
+      "w": "9.15",
+      "h": "21.12"
+    },
+    {
+      "x": "68.55",
+      "y": "53.27",
+      "w": "9.06",
+      "h": "21.12"
+    },
+    {
+      "x": "78.54",
+      "y": "53.39",
+      "w": "8.90",
+      "h": "21.25"
+    },
+    {
+      "x": "89.36",
+      "y": "53.27",
+      "w": "7.39",
+      "h": "9.99"
+    },
+    {
+      "x": "89.36",
+      "y": "64.92",
+      "w": "7.39",
+      "h": "9.60"
+    },
+    {
+      "x": "48.57",
+      "y": "77.08",
+      "w": "9.40",
+      "h": "21.38"
+    },
+    {
+      "x": "58.56",
+      "y": "77.20",
+      "w": "9.23",
+      "h": "21.12"
+    },
+    {
+      "x": "68.63",
+      "y": "77.33",
+      "w": "9.06",
+      "h": "21.12"
+    },
+    {
+      "x": "78.71",
+      "y": "77.46",
+      "w": "8.98",
+      "h": "20.99"
+    }
+  ],
+  "img/location_photo/한맥빌딩/MDF실/MDF_2.png": [
+    {
+      "x": "56.59",
+      "y": "44.43",
+      "w": "40.35",
+      "h": "6.78"
+    },
+    {
+      "x": "56.71",
+      "y": "54.80",
+      "w": "40.24",
+      "h": "6.53"
+    },
+    {
+      "x": "56.71",
+      "y": "65.94",
+      "w": "40.24",
+      "h": "6.40"
+    }
+  ],
+  "img/location_photo/한맥빌딩/MDF실/MDF_3.png": [
+    {
+      "x": "56.71",
+      "y": "13.20",
+      "w": "40.24",
+      "h": "6.78"
+    },
+    {
+      "x": "56.48",
+      "y": "23.57",
+      "w": "40.58",
+      "h": "6.53"
+    },
+    {
+      "x": "56.59",
+      "y": "34.57",
+      "w": "40.58",
+      "h": "6.27"
+    },
+    {
+      "x": "56.59",
+      "y": "44.69",
+      "w": "40.46",
+      "h": "6.66"
+    },
+    {
+      "x": "56.71",
+      "y": "54.80",
+      "w": "40.24",
+      "h": "6.66"
+    },
+    {
+      "x": "56.71",
+      "y": "65.81",
+      "w": "40.24",
+      "h": "6.53"
+    },
+    {
+      "x": "56.59",
+      "y": "76.05",
+      "w": "40.35",
+      "h": "6.53"
+    }
+  ],
+  "img/location_photo/한맥빌딩/MDF실/MDF_4.png": [
+    {
+      "x": "52.36",
+      "y": "64.02",
+      "w": "44.38",
+      "h": "6.53"
+    }
+  ],
+  "img/location_photo/기술개발센터/서버실/서버실_1.png": [
+    {
+      "x": "69.53",
+      "y": "1.42",
+      "w": "8.58",
+      "h": "11.45"
+    },
+    {
+      "x": "79.21",
+      "y": "1.55",
+      "w": "11.97",
+      "h": "11.32"
+    },
+    {
+      "x": "90.24",
+      "y": "23.30",
+      "w": "8.50",
+      "h": "21.49"
+    },
+    {
+      "x": "53.07",
+      "y": "53.28",
+      "w": "8.74",
+      "h": "21.62"
+    },
+    {
+      "x": "62.28",
+      "y": "53.41",
+      "w": "8.82",
+      "h": "21.49"
+    },
+    {
+      "x": "71.50",
+      "y": "53.28",
+      "w": "8.90",
+      "h": "21.75"
+    },
+    {
+      "x": "80.87",
+      "y": "53.15",
+      "w": "8.66",
+      "h": "21.75"
+    },
+    {
+      "x": "90.08",
+      "y": "53.54",
+      "w": "8.90",
+      "h": "21.49"
+    },
+    {
+      "x": "43.86",
+      "y": "76.32",
+      "w": "8.82",
+      "h": "21.75"
+    },
+    {
+      "x": "53.15",
+      "y": "76.45",
+      "w": "8.66",
+      "h": "21.49"
+    },
+    {
+      "x": "62.52",
+      "y": "76.57",
+      "w": "8.58",
+      "h": "21.62"
+    },
+    {
+      "x": "71.65",
+      "y": "76.45",
+      "w": "8.66",
+      "h": "21.62"
+    },
+    {
+      "x": "80.94",
+      "y": "76.57",
+      "w": "8.74",
+      "h": "21.49"
+    },
+    {
+      "x": "90.24",
+      "y": "76.57",
+      "w": "8.50",
+      "h": "21.36"
+    }
+  ],
+  "img/location_photo/기술개발센터/서버실/서버실_2.png": [
+    {
+      "x": "49.47",
+      "y": "1.80",
+      "w": "47.49",
+      "h": "7.04"
+    },
+    {
+      "x": "49.47",
+      "y": "12.04",
+      "w": "47.49",
+      "h": "6.91"
+    },
+    {
+      "x": "49.60",
+      "y": "21.52",
+      "w": "47.35",
+      "h": "6.91"
+    },
+    {
+      "x": "49.47",
+      "y": "30.48",
+      "w": "47.49",
+      "h": "7.04"
+    },
+    {
+      "x": "49.60",
+      "y": "39.82",
+      "w": "47.49",
+      "h": "6.91"
+    },
+    {
+      "x": "49.47",
+      "y": "50.06",
+      "w": "47.62",
+      "h": "6.91"
+    },
+    {
+      "x": "49.74",
+      "y": "59.28",
+      "w": "47.22",
+      "h": "6.91"
+    },
+    {
+      "x": "49.34",
+      "y": "68.37",
+      "w": "47.75",
+      "h": "7.04"
+    },
+    {
+      "x": "49.60",
+      "y": "77.97",
+      "w": "47.22",
+      "h": "6.91"
+    },
+    {
+      "x": "49.60",
+      "y": "86.93",
+      "w": "47.35",
+      "h": "7.17"
+    }
+  ]
+}

map_editor.html

@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>ITAM Map Coordinate Editor v3.0</title>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css" />
+</head>
+<body style="margin: 0; display: flex; height: 100vh; overflow: hidden; font-family: sans-serif;">
+
+  <!-- Left: File Selector -->
+  <div class="file-sidebar" id="file-sidebar">
+    <!-- Rendered by MapEditor.ts -->
+  </div>
+
+  <!-- Center: Main Editor -->
+  <div class="editor-container" id="container">
+    <div class="img-wrapper" id="wrapper">
+      <img src="" id="target-img" alt="Map Image">
+    </div>
+  </div>
+
+  <!-- Right: Control Panel -->
+  <div class="sidebar">
+    <h2>Map Editor <small style="font-size: 0.6em; color: #888;">v3.0</small></h2>
+    <div class="current-path" id="current-path">파일을 선택하세요</div>
+    <p>
+      드래그하여 구역을 정의하세요. 저장 버튼을 누르면 즉시 시스템에 반영됩니다.
+    </p>
+
+    <div class="box-list" id="box-list"></div>
+
+    <div class="actions">
+      <button id="btn-clear-all" class="btn btn-outline" style="height:38px;">전체 삭제</button>
+      <button id="btn-save-server" class="btn btn-primary" style="height:38px;">서버에 즉시 저장</button>
+      <div id="save-status"></div>
+    </div>
+  </div>
+
+  <script type="module" src="/src/map-editor-main.ts"></script>
+</body>
+</html>

migrate_schema.js

@@ -0,0 +1,197 @@
+import mysql from 'mysql2/promise';
+import dotenv from 'dotenv';
+
+dotenv.config();
+
+const { DB_HOST, DB_USER, DB_PASS, DB_NAME, DB_PORT } = process.env;
+
+async function migrateSchema() {
+  const connection = await mysql.createConnection({
+    host: DB_HOST,
+    user: DB_USER,
+    password: DB_PASS,
+    database: DB_NAME,
+    port: parseInt(DB_PORT || '3306')
+  });
+
+  console.log('🚀 Phase 1: Creating Normalized Tables & Migrating Data...');
+
+  try {
+    await connection.query('SET FOREIGN_KEY_CHECKS = 0');
+
+    // --- 1. Drop existing new tables if they exist ---
+    await connection.query('DROP TABLE IF EXISTS asset_core, asset_hardware, asset_location, asset_remote');
+
+    // --- 2. Create New Schema ---
+    await connection.query(`
+      CREATE TABLE asset_core (
+        id VARCHAR(50) PRIMARY KEY,
+        asset_code VARCHAR(100) UNIQUE NOT NULL,
+        category VARCHAR(100),
+        asset_type VARCHAR(100),
+        asset_purpose VARCHAR(255),
+        service_type VARCHAR(50),
+        purchase_corp VARCHAR(100),
+        purchase_date VARCHAR(50),
+        purchase_amount VARCHAR(100),
+        purchase_vendor VARCHAR(255),
+        approval_document VARCHAR(255),
+        memo TEXT,
+        manager_primary VARCHAR(100),
+        manager_secondary VARCHAR(100),
+        current_dept VARCHAR(255),
+        previous_dept VARCHAR(255),
+        user_current VARCHAR(100),
+        previous_user VARCHAR(100),
+        emp_no VARCHAR(20),
+        user_position VARCHAR(50),
+        created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+        updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
+      ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
+    `);
+
+    await connection.query(`
+      CREATE TABLE asset_hardware (
+        id INT AUTO_INCREMENT PRIMARY KEY,
+        asset_id VARCHAR(50) NOT NULL,
+        hw_status VARCHAR(50),
+        model_name VARCHAR(255),
+        mainboard VARCHAR(255),
+        os VARCHAR(100),
+        cpu VARCHAR(255),
+        ram VARCHAR(100),
+        gpu VARCHAR(100),
+        storage1 VARCHAR(255),
+        storage2 VARCHAR(255),
+        storage3 VARCHAR(255),
+        monitoring VARCHAR(100),
+        price VARCHAR(100),
+        volume VARCHAR(100),
+        monitor_inch VARCHAR(50),
+        serial_num VARCHAR(100),
+        FOREIGN KEY (asset_id) REFERENCES asset_core(id) ON DELETE CASCADE
+      ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
+    `);
+
+    await connection.query(`
+      CREATE TABLE asset_location (
+        id INT AUTO_INCREMENT PRIMARY KEY,
+        asset_id VARCHAR(50) NOT NULL,
+        location VARCHAR(255),
+        location_detail VARCHAR(255),
+        location_photo VARCHAR(255),
+        loc_x VARCHAR(20),
+        loc_y VARCHAR(20),
+        is_active BOOLEAN DEFAULT TRUE,
+        created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+        FOREIGN KEY (asset_id) REFERENCES asset_core(id) ON DELETE CASCADE
+      ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
+    `);
+
+    await connection.query(`
+      CREATE TABLE asset_remote (
+        id INT AUTO_INCREMENT PRIMARY KEY,
+        asset_id VARCHAR(50) NOT NULL,
+        ip_address VARCHAR(100),
+        mac_address VARCHAR(100),
+        remote_tool VARCHAR(100),
+        remote_id VARCHAR(100),
+        remote_pw VARCHAR(100),
+        is_active BOOLEAN DEFAULT TRUE,
+        created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+        FOREIGN KEY (asset_id) REFERENCES asset_core(id) ON DELETE CASCADE
+      ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
+    `);
+
+    await connection.query('SET FOREIGN_KEY_CHECKS = 1');
+    console.log('✅ Normalized tables created.');
+
+    // --- 3. Migrate Data from Legacy Tables ---
+    const legacyTables = ['asset_pc', 'asset_server', 'asset_storage', 'asset_remote', 'asset_equipment', 'asset_office_supplies', 'asset_survey', 'asset_vip'];
+    
+    let totalMigrated = 0;
+
+    for (const table of legacyTables) {
+      try {
+        const [rows] = await connection.query(`SELECT * FROM ${table}`);
+        
+        for (const row of rows) {
+          // 3.1 Insert into asset_core
+          await connection.query(`
+            INSERT IGNORE INTO asset_core (
+              id, asset_code, category, asset_type, 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, created_at
+            ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
+          `, [
+            row.id, row.asset_code, row.category, row.asset_type, row.asset_purpose, row.service_type, 
+            row.purchase_corp, row.purchase_date, row.purchase_amount, row.purchase_vendor, row.approval_document, 
+            row.memo, row.manager_primary, row.manager_secondary, row.current_dept, row.previous_dept, 
+            row.user_current, row.previous_user, row.emp_no, row.user_position, row.created_at
+          ]);
+
+          // 3.2 Insert into asset_hardware (if hardware fields exist)
+          if (row.model_name || row.cpu || row.ram || row.hw_status) {
+              await connection.query(`
+                INSERT INTO asset_hardware (
+                  asset_id, hw_status, model_name, mainboard, os, cpu, ram, gpu, storage1, storage2, storage3, monitoring, price, volume, monitor_inch, serial_num
+                ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
+              `, [
+                row.id, row.hw_status, row.model_name, row.mainboard, row.os, row.cpu, row.ram, row.gpu, 
+                row.ssd_1 || row.hdd_1, row.ssd_2 || row.hdd_2, row.hdd_3, row.monitoring, row.price, 
+                row.volume, row.monitor_inch, row.serial_num
+              ]);
+          }
+
+          // 3.3 Insert into asset_location (if location fields exist)
+          if (row.location || row.location_detail) {
+              await connection.query(`
+                INSERT INTO asset_location (
+                  asset_id, location, location_detail, location_photo, loc_x, loc_y
+                ) VALUES (?, ?, ?, ?, ?, ?)
+              `, [
+                row.id, row.location, row.location_detail, row.location_photo, row.loc_x, row.loc_y
+              ]);
+          }
+
+          // 3.4 Insert into asset_remote (if network fields exist)
+          // Handle primary network interface
+          if (row.ip_address || row.mac_address || row.remote_tool) {
+              await connection.query(`
+                INSERT INTO asset_remote (
+                  asset_id, ip_address, mac_address, remote_tool, remote_id, remote_pw
+                ) VALUES (?, ?, ?, ?, ?, ?)
+              `, [
+                row.id, row.ip_address, row.mac_address, row.remote_tool, row.remote_id, row.remote_pw
+              ]);
+          }
+          
+          // Handle secondary network interface (e.g., from server table) if it exists
+          if (row.ip_address_2 || row.remote_tool_2) {
+              await connection.query(`
+                INSERT INTO asset_remote (
+                  asset_id, ip_address, remote_tool, remote_id, remote_pw
+                ) VALUES (?, ?, ?, ?, ?)
+              `, [
+                row.id, row.ip_address_2, row.remote_tool_2, row.remote_id_2, row.remote_pw_2
+              ]);
+          }
+
+          totalMigrated++;
+        }
+        console.log(`- Migrated ${rows.length} records from ${table}`);
+      } catch (err) {
+        console.warn(`- Skipping legacy table ${table}: ${err.message}`);
+      }
+    }
+
+    console.log(`✅ Phase 1 Data Migration Completed. Total Assets Migrated: ${totalMigrated}`);
+
+  } catch (err) {
+    console.error('❌ Migration Failed:', err);
+  } finally {
+    await connection.end();
+  }
+}
+
+migrateSchema();

migrate_v2_final.js

@@ -0,0 +1,212 @@
+import mysql from 'mysql2/promise';
+import dotenv from 'dotenv';
+
+dotenv.config();
+
+const { DB_HOST, DB_USER, DB_PASS, DB_NAME, DB_PORT } = process.env;
+
+async function migrateV2() {
+  const connection = await mysql.createConnection({
+    host: DB_HOST,
+    user: DB_USER,
+    password: DB_PASS,
+    database: DB_NAME,
+    port: parseInt(DB_PORT || '3306')
+  });
+
+  console.log('🚀 Phase 2: Final Migration to Normalized V2 Schema...');
+
+  try {
+    await connection.query('SET FOREIGN_KEY_CHECKS = 0');
+
+    // 1. Create/Enhance Core Tables
+    console.log('1. Creating/Enhancing Tables...');
+
+    await connection.query('DROP TABLE IF EXISTS asset_core, asset_hardware, asset_location, asset_remote');
+
+    await connection.query(`
+      CREATE TABLE asset_core (
+        id VARCHAR(50) PRIMARY KEY,
+        asset_code VARCHAR(100) UNIQUE NOT NULL,
+        category VARCHAR(100),
+        asset_type VARCHAR(100),
+        current_role VARCHAR(50) DEFAULT 'Normal' COMMENT 'Normal, Server, Personal, etc.',
+        asset_purpose VARCHAR(255),
+        service_type VARCHAR(50),
+        purchase_corp VARCHAR(100),
+        purchase_date VARCHAR(50),
+        purchase_amount VARCHAR(100),
+        purchase_vendor VARCHAR(255),
+        approval_document VARCHAR(255),
+        memo TEXT,
+        manager_primary VARCHAR(100),
+        manager_secondary VARCHAR(100),
+        current_dept VARCHAR(255),
+        previous_dept VARCHAR(255),
+        user_current VARCHAR(100),
+        previous_user VARCHAR(100),
+        emp_no VARCHAR(20),
+        user_position VARCHAR(50),
+        created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+        updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
+      ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
+    `);
+
+    await connection.query(`
+      CREATE TABLE asset_hardware (
+        id INT AUTO_INCREMENT PRIMARY KEY,
+        asset_id VARCHAR(50) NOT NULL,
+        hw_status VARCHAR(50),
+        model_name VARCHAR(255),
+        mainboard VARCHAR(255),
+        os VARCHAR(100),
+        cpu VARCHAR(255),
+        ram VARCHAR(100),
+        gpu VARCHAR(100),
+        storage1 VARCHAR(255),
+        storage2 VARCHAR(255),
+        storage3 VARCHAR(255),
+        storage4 VARCHAR(255),
+        monitoring VARCHAR(100),
+        price VARCHAR(100),
+        volume VARCHAR(100),
+        monitor_inch VARCHAR(50),
+        serial_num VARCHAR(100),
+        FOREIGN KEY (asset_id) REFERENCES asset_core(id) ON DELETE CASCADE
+      ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
+    `);
+
+    await connection.query(`
+      CREATE TABLE asset_location (
+        id INT AUTO_INCREMENT PRIMARY KEY,
+        asset_id VARCHAR(50) NOT NULL,
+        location VARCHAR(255),
+        location_detail VARCHAR(255),
+        location_photo VARCHAR(255),
+        loc_x VARCHAR(20),
+        loc_y VARCHAR(20),
+        is_active TINYINT(1) DEFAULT 1,
+        deactivated_at DATETIME NULL,
+        created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+        FOREIGN KEY (asset_id) REFERENCES asset_core(id) ON DELETE CASCADE
+      ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
+    `);
+
+    await connection.query(`
+      CREATE TABLE asset_remote (
+        id INT AUTO_INCREMENT PRIMARY KEY,
+        asset_id VARCHAR(50) NOT NULL,
+        ip_address VARCHAR(100),
+        mac_address VARCHAR(100),
+        remote_tool VARCHAR(100),
+        remote_id VARCHAR(100),
+        remote_pw VARCHAR(100),
+        is_active TINYINT(1) DEFAULT 1,
+        deactivated_at DATETIME NULL,
+        created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+        FOREIGN KEY (asset_id) REFERENCES asset_core(id) ON DELETE CASCADE
+      ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
+    `);
+
+    console.log('✅ V2 Schema tables created.');
+
+    // 2. Migration Logic
+    const legacyTables = [
+      { name: 'asset_pc', defaultRole: 'Personal' },
+      { name: 'asset_server', defaultRole: 'Server' },
+      { name: 'asset_storage', defaultRole: 'Normal' },
+      { name: 'asset_equipment', defaultRole: 'Normal' },
+      { name: 'asset_office_supplies', defaultRole: 'Normal' },
+      { name: 'asset_survey', defaultRole: 'Normal' },
+      { name: 'asset_vip', defaultRole: 'Normal' },
+      { name: 'asset_pc_parts', defaultRole: 'Normal' }
+    ];
+
+    let totalMigrated = 0;
+
+    for (const tableInfo of legacyTables) {
+      const table = tableInfo.name;
+      try {
+        const [rows] = await connection.query(`SELECT * FROM ${table}`);
+        console.log(`- Migrating ${rows.length} records from ${table}...`);
+
+        for (const row of rows) {
+          // 2.1 Insert into asset_core
+          const role = (table === 'asset_pc' && row.asset_type === '서버PC') ? 'Server' : tableInfo.defaultRole;
+          
+          await connection.query(`
+            INSERT IGNORE INTO asset_core (
+              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, created_at
+            ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
+          `, [
+            row.id, row.asset_code, row.category, row.asset_type, role, row.asset_purpose, row.service_type, 
+            row.purchase_corp, row.purchase_date, row.purchase_amount, row.purchase_vendor, row.approval_document, 
+            row.memo, row.manager_primary, row.manager_secondary, row.current_dept, row.previous_dept, 
+            row.user_current || row.current_user, row.previous_user, row.emp_no, row.user_position, row.created_at
+          ]);
+
+          // 2.2 Insert into asset_hardware
+          await connection.query(`
+            INSERT INTO asset_hardware (
+              asset_id, hw_status, model_name, mainboard, os, cpu, ram, gpu, storage1, storage2, storage3, storage4, monitoring, price, volume, monitor_inch, serial_num
+            ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
+          `, [
+            row.id, row.hw_status, row.model_name, row.mainboard, row.os, row.cpu, row.ram, row.gpu, 
+            row.ssd_1 || row.storage1, row.ssd_2 || row.storage2, row.hdd_1 || row.storage3, row.hdd_2, row.monitoring, row.price, 
+            row.volume, row.monitor_inch, row.serial_num
+          ]);
+
+          // 2.3 Insert into asset_location
+          if (row.location || row.location_detail) {
+              await connection.query(`
+                INSERT INTO asset_location (
+                  asset_id, location, location_detail, location_photo, loc_x, loc_y, is_active
+                ) VALUES (?, ?, ?, ?, ?, ?, 1)
+              `, [
+                row.id, row.location, row.location_detail, row.location_photo, row.loc_x, row.loc_y
+              ]);
+          }
+
+          // 2.4 Insert into asset_remote
+          // Primary Network
+          if (row.ip_address || row.mac_address || row.remote_tool) {
+              await connection.query(`
+                INSERT INTO asset_remote (
+                  asset_id, ip_address, mac_address, remote_tool, remote_id, remote_pw, is_active
+                ) VALUES (?, ?, ?, ?, ?, ?, 1)
+              `, [
+                row.id, row.ip_address, row.mac_address, row.remote_tool, row.remote_id, row.remote_pw
+              ]);
+          }
+          
+          // Secondary Network (for servers)
+          if (row.ip_address_2 || row.remote_tool_2) {
+              await connection.query(`
+                INSERT INTO asset_remote (
+                  asset_id, ip_address, remote_tool, remote_id, remote_pw, is_active
+                ) VALUES (?, ?, ?, ?, ?, 1)
+              `, [
+                row.id, row.ip_address_2, row.remote_tool_2, row.remote_id_2, row.remote_pw_2
+              ]);
+          }
+
+          totalMigrated++;
+        }
+      } catch (err) {
+        console.warn(`- Skipping table ${table}: ${err.message}`);
+      }
+    }
+
+    await connection.query('SET FOREIGN_KEY_CHECKS = 1');
+    console.log(`✅ Phase 2 Data Migration Completed. Total Assets Migrated: ${totalMigrated}`);
+
+  } catch (err) {
+    console.error('❌ Migration Failed:', err);
+  } finally {
+    await connection.end();
+  }
+}
+
+migrateV2();

migrate_v4_network.js

@@ -0,0 +1,73 @@
+import mysql from 'mysql2/promise';
+import dotenv from 'dotenv';
+
+dotenv.config();
+
+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'),
+});
+
+async function migrate() {
+    const conn = await pool.getConnection();
+    try {
+        console.log('1. Creating asset_remote_v4 table...');
+        await conn.query(`
+            CREATE TABLE IF NOT EXISTS asset_remote_v4 (
+                id INT AUTO_INCREMENT PRIMARY KEY,
+                asset_id VARCHAR(50) NOT NULL,
+                net_type VARCHAR(20) NOT NULL, /* 'IP' or 'REMOTE' */
+                net_name VARCHAR(100), /* e.g., '기본망', 'AnyDesk' */
+                net_value1 VARCHAR(100), /* IP or ID */
+                net_value2 VARCHAR(100), /* MAC or PW */
+                is_active TINYINT(1) DEFAULT 1,
+                deactivated_at DATETIME NULL,
+                created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+                FOREIGN KEY (asset_id) REFERENCES asset_core(id) ON DELETE CASCADE
+            ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
+        `);
+
+        console.log('2. Migrating data from asset_remote...');
+        const [oldRows] = await conn.query('SELECT * FROM asset_remote WHERE is_active = 1');
+        
+        let ipCount = 0;
+        let remoteCount = 0;
+
+        for (const row of oldRows) {
+            // Migrating IP/MAC
+            if (row.ip_address || row.mac_address) {
+                await conn.query(
+                    'INSERT INTO asset_remote_v4 (asset_id, net_type, net_name, net_value1, net_value2, created_at) VALUES (?, ?, ?, ?, ?, ?)',
+                    [row.asset_id, 'IP', '기본망', row.ip_address, row.mac_address, row.created_at]
+                );
+                ipCount++;
+            }
+            // Migrating Remote
+            if (row.remote_tool || row.remote_id || row.remote_pw) {
+                await conn.query(
+                    'INSERT INTO asset_remote_v4 (asset_id, net_type, net_name, net_value1, net_value2, created_at) VALUES (?, ?, ?, ?, ?, ?)',
+                    [row.asset_id, 'REMOTE', row.remote_tool, row.remote_id, row.remote_pw, row.created_at]
+                );
+                remoteCount++;
+            }
+        }
+        
+        console.log(`Migrated ${ipCount} IP records and ${remoteCount} Remote records.`);
+
+        console.log('3. Renaming tables...');
+        await conn.query('DROP TABLE IF EXISTS asset_remote_legacy');
+        await conn.query('RENAME TABLE asset_remote TO asset_remote_legacy, asset_remote_v4 TO asset_remote;');
+
+        console.log('✅ Migration V4 (Remote) Complete.');
+    } catch (e) {
+        console.error('Migration failed:', e);
+    } finally {
+        conn.release();
+        pool.end();
+    }
+}
+
+migrate();

migrate_v5_rename_remote.js

@@ -0,0 +1,28 @@
+import mysql from 'mysql2/promise';
+import dotenv from 'dotenv';
+
+dotenv.config();
+
+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'),
+});
+
+async function migrate() {
+    const conn = await pool.getConnection();
+    try {
+        console.log('1. Renaming asset_network to asset_remote...');
+        await conn.query('RENAME TABLE asset_network TO asset_remote');
+        console.log('✅ Table renamed successfully.');
+    } catch (e) {
+        console.error('Migration failed:', e);
+    } finally {
+        conn.release();
+        pool.end();
+    }
+}
+
+migrate();

migrate_v6_parts_master.js

@@ -0,0 +1,195 @@
+import mysql from 'mysql2/promise';
+import dotenv from 'dotenv';
+
+dotenv.config({ override: true });
+
+const { DB_HOST, DB_USER, DB_PASS, DB_NAME, DB_PORT } = process.env;
+
+// 기존의 감점 계산 로직을 그대로 이용해 등급과 감점점수를 도출하는 헬퍼 함수
+function parseCpu(cpu) {
+  if (!cpu) return { tier: '기타', deduction: 30 };
+  const cpuUpper = cpu.toUpperCase().trim();
+  if (cpuUpper === '-' || cpuUpper === '') return { tier: '기타', deduction: 30 };
+
+  let tier = '기타';
+  let deduction = 30;
+
+  if (cpuUpper.includes('I9') || cpuUpper.includes('RYZEN 9') || cpuUpper.includes('RYZEN9')) {
+    tier = 'i9 / Ryzen 9';
+    deduction = 0;
+  } else if (cpuUpper.includes('I7') || cpuUpper.includes('RYZEN 7') || cpuUpper.includes('RYZEN7')) {
+    tier = 'i7 / Ryzen 7';
+    deduction = 5;
+  } else if (cpuUpper.includes('I5') || cpuUpper.includes('RYZEN 5') || cpuUpper.includes('RYZEN5')) {
+    tier = 'i5 / Ryzen 5';
+    deduction = 15;
+  } else if (cpuUpper.includes('I3') || cpuUpper.includes('RYZEN 3') || cpuUpper.includes('RYZEN3')) {
+    tier = 'i3 / Ryzen 3';
+    deduction = 25;
+  }
+
+  // CPU 세대 감점 계산 (최대 -15점)
+  let genDeduction = 0;
+  const intelMatch = cpuUpper.match(/I\d-?(\d+)/);
+  let gen = 0;
+  if (intelMatch && intelMatch[1]) {
+    const numStr = intelMatch[1];
+    if (numStr.length === 5) gen = parseInt(numStr.substring(0, 2), 10);
+    else if (numStr.length === 4) gen = parseInt(numStr.substring(0, 1), 10);
+  }
+
+  const amdMatch = cpuUpper.match(/RYZEN\s?\d\s?-?(\d+)/);
+  let amdGen = 0;
+  if (amdMatch && amdMatch[1] && !intelMatch) {
+    const numStr = amdMatch[1];
+    if (numStr.length === 4) amdGen = parseInt(numStr.substring(0, 1), 10);
+  }
+
+  if (intelMatch) {
+    if (gen >= 12) genDeduction = 0;
+    else if (gen >= 10) genDeduction = 5;
+    else if (gen >= 8) genDeduction = 10;
+    else genDeduction = 15;
+  } else if (amdMatch) {
+    if (amdGen >= 5) genDeduction = 0;
+    else if (amdGen >= 3) genDeduction = 5;
+    else genDeduction = 10;
+  } else {
+    genDeduction = 15;
+  }
+
+  // 최종 등급 감점 + 세대 감점 합산
+  return { tier, deduction: deduction + genDeduction };
+}
+
+function parseGpu(gpu) {
+  if (!gpu) return { tier: 'C', deduction: 25 };
+  const gpuUpper = gpu.toUpperCase().trim();
+  if (gpuUpper === '-' || gpuUpper === '') return { tier: 'C', deduction: 25 };
+
+  if (
+    gpuUpper.includes('RTX 4090') || gpuUpper.includes('RTX 4080') || gpuUpper.includes('RTX 4070') ||
+    gpuUpper.includes('RTX A5000') || gpuUpper.includes('RTX A6000') || gpuUpper.includes('RTX A4000')
+  ) {
+    return { tier: 'S', deduction: 0 };
+  } else if (
+    gpuUpper.includes('RTX 3070') || gpuUpper.includes('RTX 3060') || gpuUpper.includes('RTX 2060') ||
+    gpuUpper.includes('RTX A2000') || gpuUpper.includes('RTX A3000') || gpuUpper.includes('QUADRO')
+  ) {
+    return { tier: 'A', deduction: 5 };
+  } else if (
+    gpuUpper.includes('GTX 1660') || gpuUpper.includes('GTX 1080') || gpuUpper.includes('GTX 1070') ||
+    gpuUpper.includes('GTX 1060') || gpuUpper.includes('RX 6700') || gpuUpper.includes('RX 6600')
+  ) {
+    return { tier: 'B', deduction: 15 };
+  } else {
+    return { tier: 'C', deduction: 25 };
+  }
+}
+
+function parseRam(ram) {
+  if (!ram) return { tier: '부족', deduction: 25 };
+  const ramUpper = ram.toUpperCase().trim();
+  if (ramUpper === '-' || ramUpper === '') return { tier: '부족', deduction: 25 };
+
+  const ramMatch = ramUpper.match(/(\d+)\s*GB/);
+  if (ramMatch && ramMatch[1]) {
+    const ramVal = parseInt(ramMatch[1], 10);
+    if (ramVal >= 32) return { tier: '최적', deduction: 0 };
+    else if (ramVal >= 16) return { tier: '보통', deduction: 10 };
+    else if (ramVal >= 8) return { tier: '주의', deduction: 20 };
+  }
+  return { tier: '부족', deduction: 25 };
+}
+
+async function runMigration() {
+  console.log('🔄 DB 커넥션 연결 중...');
+  const connection = await mysql.createConnection({
+    host: DB_HOST,
+    user: DB_USER,
+    password: DB_PASS,
+    database: DB_NAME,
+    port: parseInt(DB_PORT || '3306')
+  });
+
+  try {
+    console.log('⚙️ 1. hardware_components_master 테이블 생성...');
+    await connection.query('DROP TABLE IF EXISTS hardware_components_master');
+    await connection.query(`
+      CREATE TABLE hardware_components_master (
+        id INT AUTO_INCREMENT PRIMARY KEY,
+        category VARCHAR(50) NOT NULL COMMENT 'CPU, GPU, RAM 등',
+        component_name VARCHAR(255) NOT NULL UNIQUE COMMENT '부품 표준 명칭',
+        score_tier VARCHAR(50) COMMENT '성능 등급',
+        deduction INT DEFAULT 0 COMMENT '감점 점수',
+        created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+      ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
+    `);
+    console.log('✅ 테이블 생성 완료.');
+
+    console.log('🔍 2. 기존 asset_spec 테이블에서 부품명 조회...');
+    const [specRows] = await connection.query('SELECT DISTINCT cpu, ram, gpu FROM asset_spec');
+    
+    const uniqueCpus = new Set();
+    const uniqueGpus = new Set();
+    const uniqueRams = new Set();
+
+    specRows.forEach(row => {
+      if (row.cpu && row.cpu.trim() !== '-' && row.cpu.trim() !== '') uniqueCpus.add(row.cpu.trim());
+      if (row.gpu && row.gpu.trim() !== '-' && row.gpu.trim() !== '') uniqueGpus.add(row.gpu.trim());
+      if (row.ram && row.ram.trim() !== '-' && row.ram.trim() !== '') uniqueRams.add(row.ram.trim());
+    });
+
+    // 만약 데이터가 너무 비어있을 경우를 대비하여 기본 대표 부품 몇 개 추가
+    if (uniqueCpus.size === 0) {
+      ['Intel Core i9-13900K', 'Intel Core i7-14700K', 'Intel Core i5-12400', 'AMD Ryzen 7 7800X3D', 'Intel Core i3-10100'].forEach(c => uniqueCpus.add(c));
+    }
+    if (uniqueGpus.size === 0) {
+      ['NVIDIA GeForce RTX 4090', 'NVIDIA GeForce RTX 4070', 'NVIDIA GeForce RTX 3060', 'Intel Iris Xe Graphics', 'NVIDIA GeForce GTX 1660 Super'].forEach(g => uniqueGpus.add(g));
+    }
+    if (uniqueRams.size === 0) {
+      ['8GB', '16GB', '32GB', '64GB'].forEach(r => uniqueRams.add(r));
+    }
+
+    console.log(`   - 추출된 CPU 개수: ${uniqueCpus.size}`);
+    console.log(`   - 추출된 GPU 개수: ${uniqueGpus.size}`);
+    console.log(`   - 추출된 RAM 개수: ${uniqueRams.size}`);
+
+    console.log('💾 3. 마스터 테이블에 부품 데이터 및 감점 정보 삽입...');
+    
+    // CPU 삽입
+    for (const cpu of uniqueCpus) {
+      const { tier, deduction } = parseCpu(cpu);
+      await connection.query(
+        'INSERT IGNORE INTO hardware_components_master (category, component_name, score_tier, deduction) VALUES (?, ?, ?, ?)',
+        ['CPU', cpu, tier, deduction]
+      );
+    }
+
+    // GPU 삽입
+    for (const gpu of uniqueGpus) {
+      const { tier, deduction } = parseGpu(gpu);
+      await connection.query(
+        'INSERT IGNORE INTO hardware_components_master (category, component_name, score_tier, deduction) VALUES (?, ?, ?, ?)',
+        ['GPU', gpu, tier, deduction]
+      );
+    }
+
+    // RAM 삽입
+    for (const ram of uniqueRams) {
+      const { tier, deduction } = parseRam(ram);
+      await connection.query(
+        'INSERT IGNORE INTO hardware_components_master (category, component_name, score_tier, deduction) VALUES (?, ?, ?, ?)',
+        ['RAM', ram, tier, deduction]
+      );
+    }
+
+    console.log('✅ 마이그레이션이 성공적으로 완료되었습니다!');
+  } catch (error) {
+    console.error('❌ 마이그레이션 오류 발생:', error);
+  } finally {
+    await connection.end();
+  }
+}
+
+runMigration();

probe_db.js

@@ -0,0 +1,36 @@
+import mysql from 'mysql2/promise';
+import dotenv from 'dotenv';
+
+dotenv.config();
+
+const { DB_HOST, DB_USER, DB_PASS, DB_NAME, DB_PORT } = process.env;
+
+async function probeDB() {
+  const connection = await mysql.createConnection({
+    host: DB_HOST,
+    user: DB_USER,
+    password: DB_PASS,
+    database: DB_NAME,
+    port: parseInt(DB_PORT || '3306')
+  });
+
+  console.log('--- Database Probe Start ---');
+  
+  const [tables] = await connection.query('SHOW TABLES');
+  const tableNames = tables.map(t => Object.values(t)[0]);
+  
+  console.log('Existing Tables:', tableNames);
+
+  for (const table of tableNames) {
+    const [columns] = await connection.query(`DESCRIBE ${table}`);
+    console.log(`\n[Table: ${table}]`);
+    columns.forEach(c => {
+      console.log(`  - ${c.Field} (${c.Type}) ${c.Comment ? '// ' + c.Comment : ''}`);
+    });
+  }
+
+  await connection.end();
+  console.log('\n--- Database Probe End ---');
+}
+
+probeDB().catch(console.error);

server.js

@@ -2,166 +2,715 @@ import express from 'express';
 import mysql from 'mysql2/promise';
 import cors from 'cors';
 import dotenv from 'dotenv';
+import fs from 'fs';
 
-dotenv.config();
+dotenv.config({ override: true });
 
 const app = express();
 app.use(cors());
-app.use(express.json({ limit: '100mb' }));
+app.use(express.json({ limit: '50mb' }));
+app.use('/uploads', express.static('uploads')); // 업로드 파일 정적 서빙
 
-// Request Logger
-app.use((req, res, next) => {
-  console.log(`[${new Date().toISOString()}] ${req.method} ${req.url}`);
-  next();
-});
+// uploads 폴더가 없으면 생성
+if (!fs.existsSync('uploads')) {
+  fs.mkdirSync('uploads');
+}
 
+// 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) => {
-  console.error(`❌ [${context}] Error:`, err.message);
-  if (isGet) res.json([]);
-  else res.status(500).json({ error: err.message });
-};
-
-// --- API Implementation ---
-
-/**
- * Generic Fetcher for Asset Tables
- */
-const fetchAssets = async (tableName, res, context) => {
+// Database startup check (ensure job_spec_standards table exists)
+(async () => {
+  let connection;
   try {
-    const [rows] = await pool.query(`SELECT * FROM ${tableName}`);
-    console.log(`📡 [GET ${context}] Returning ${rows.length} rows from ${tableName}`);
-    res.json(rows);
+    connection = await pool.getConnection();
+    await connection.query(`
+      CREATE TABLE IF NOT EXISTS job_spec_standards (
+        id INT AUTO_INCREMENT PRIMARY KEY,
+        job_name VARCHAR(100) UNIQUE NOT NULL,
+        cpu_standard VARCHAR(255),
+        ram_standard VARCHAR(100),
+        gpu_standard VARCHAR(100),
+        min_score INT DEFAULT 0,
+        remarks TEXT,
+        created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+        updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
+      ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
+    `);
+    console.log('✅ job_spec_standards table verification completed.');
   } catch (err) {
-    handleError(res, err, context, true);
-  }
-};
-
-/**
- * Generic Batch Saver for Asset Tables
- */
-const saveAssetsBatch = async (tableName, items, res, context) => {
-  const connection = await pool.getConnection();
-  try {
-    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 (or we could use UPSERT logic, but existing code used DELETE-INSERT pattern)
-    await connection.query(`DELETE FROM ${tableName}`);
-    
-    // 2. Insert new items
-    for (const item of items) {
-      const filteredRow = {};
-      validColumns.forEach(col => {
-        // Exclude auto-managed timestamps from manual insertion
-        if (col === 'created_at' || col === 'updated_at') return;
-        
-        if (item[col] !== undefined) filteredRow[col] = item[col];
-      });
-      
-      // Auto-generate ID if missing
-      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);
+    console.error('❌ Failed to verify/create job_spec_standards table:', err);
   } finally {
-    connection.release();
+    if (connection) connection.release();
   }
+})();
+
+// Error Handler
+const handleError = (res, err, label) => {
+  console.error(`❌ [${label}] Error:`, err);
+  res.status(500).json({ error: err.message });
 };
 
-// --- Routes ---
-
-const routeMap = {
-  '/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' }
+// --- Global Constants ---
+const CATEGORY_TABLE_MAP = {
+  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',
+  logs: 'asset_history'
 };
 
-// 동적 라우팅 생성 (Dynamic Routing)
-Object.entries(routeMap).forEach(([route, { table, context }]) => {
-  app.get(route, (req, res) => fetchAssets(table, res, context));
-  app.post(`${route}/batch`, (req, res) => saveAssetsBatch(table, req.body, res, `${context} BATCH`));
-});
+const ASSET_TABLES = [
+  'asset_core'
+];
 
-// 4. Legacy/Auxiliary (History & Assignment)
-app.get('/api/asset/history', (req, res) => fetchAssets('asset_history', res, 'HISTORY'));
-app.post('/api/asset/history/batch', async (req, res) => {
-    // Custom logic for history as it might not follow the random-id pattern
-    const connection = await pool.getConnection();
-    try {
-        await connection.beginTransaction();
-        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(); }
-});
+// --- API Endpoints ---
 
-// 5. Utility
-app.get('/api/generate-asset-code', async (req, res) => {
+// 1. Generic Batch Save (Dynamic Table Detection)
+app.post('/api/:table/batch', async (req, res) => {
+  const { table } = req.params;
+  const dbTable = CATEGORY_TABLE_MAP[table] || table;
+  const data = req.body;
+  if (!Array.isArray(data)) return res.status(400).json({ error: 'Data must be an array' });
+
+  let connection;
   try {
-    const { prefix } = req.query;
-    if (!prefix) return res.status(400).json({ error: 'Prefix is required' });
-    
-    // Search in multiple tables if necessary, but typically prefix-based tables are known
-    const tables = ['asset_pc', 'asset_server', 'asset_storage', 'asset_network', 'asset_survey', 'asset_pc_parts', 'asset_equipment', 'asset_office_supplies', 'asset_vip'];
-    let lastCode = '';
-    
-    for (const table of tables) {
-        const [rows] = await pool.query(`SELECT asset_code FROM ${table} WHERE asset_code LIKE ? ORDER BY asset_code DESC LIMIT 1`, [`${prefix}%`]);
-        if (rows.length > 0 && rows[0].asset_code > lastCode) {
-            lastCode = rows[0].asset_code;
+    connection = await pool.getConnection();
+    await connection.beginTransaction();
+
+    const [columns] = await connection.query(`DESCRIBE ${dbTable}`);
+    const validFields = columns.map(c => c.Field);
+
+    await connection.query(`DELETE FROM ${dbTable}`);
+
+    if (data.length > 0) {
+        const placeholders = validFields.map(() => '?').join(', ');
+        const sql = `INSERT INTO ${dbTable} (${validFields.join(', ')}) VALUES (${placeholders})`;
+        
+        for (const item of data) {
+            const values = validFields.map(field => {
+                const val = item[field];
+                return val === undefined ? null : val;
+            });
+            await connection.query(sql, values);
         }
     }
 
-    let nextNum = 1;
-    if (lastCode) {
-      const lastNum = parseInt(lastCode.split('-').pop() || '0');
-      nextNum = lastNum + 1;
+    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();
+  }
+});
+
+// 2. Get All Assets (Integrated Master Data from Normalized V3 Schema)
+app.get('/api/assets/master', async (req, res) => {
+  let connection;
+  try {
+    connection = await pool.getConnection();
+
+    const masterData = {
+      pc: [], server: [], storage: [], network: [],
+      equipment: [], officeSupplies: [], survey: [], vip: [], pcParts: [],
+      swInternal: [], swExternal: [], swUsers: [], users: [], logs: [], partsMaster: []
+    };
+
+    // Load from V3 Normalized Schema
+    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,
+        (
+          SELECT JSON_ARRAYAGG(JSON_OBJECT('type', net_type, 'name', net_name, 'val1', net_value1, 'val2', net_value2))
+          FROM asset_remote WHERE asset_id = c.id AND is_active = 1
+        ) as remotes,
+        (
+          SELECT JSON_ARRAYAGG(JSON_OBJECT('type', disk_type, 'capacity', capacity, 'unit', unit, 'slot', slot_no))
+          FROM asset_volume WHERE asset_id = c.id
+        ) as volumes
+      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
+      )
+    `);
+
+    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');
+    const [partsMaster] = await connection.query('SELECT * FROM hardware_components_master ORDER BY category, component_name');
+    const [jobSpecs] = await connection.query('SELECT * FROM job_spec_standards ORDER BY job_name');
+    
+    masterData.swInternal = swInternal;
+    masterData.swExternal = swExternal;
+    masterData.swUsers = swUsers;
+    masterData.users = users;
+    masterData.logs = logs;
+    masterData.partsMaster = partsMaster;
+    masterData.jobSpecs = jobSpecs;
+
+    res.json(masterData);
+  } catch (err) {
+    handleError(res, err, 'MASTER DATA');
+  } finally {
+    if (connection) connection.release();
+  }
+});
+
+// 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.0 History Tracking & Auto Field Update
+    const [oldCoreRows] = await connection.query('SELECT * FROM asset_core WHERE id = ?', [asset.id]);
+    const [oldSpecRows] = await connection.query('SELECT * FROM asset_spec WHERE asset_id = ?', [asset.id]);
+    const oldCore = oldCoreRows[0] || {};
+    const oldSpec = oldSpecRows[0] || {};
+
+    const historyLogs = [];
+    const logDate = new Date().toISOString().split('T')[0]; // YYYY-MM-DD
+    const logUser = '관리자';
+
+    // 3.0.1 Core 변동 감지 (Dept, User)
+    const oldDept = oldCore.current_dept || '';
+    const newDept = asset.current_dept || '';
+    if (newDept !== '' && oldDept !== newDept) {
+        asset.previous_dept = oldDept;
+        historyLogs.push({
+            event_type: 'DEPT_CHANGE',
+            old_dept: oldDept || null,
+            new_dept: newDept,
+            details: `[조직 변동] ${oldDept || '(없음)'} -> ${newDept}`
+        });
     }
-    res.json({ nextCode: `${prefix}${String(nextNum).padStart(3, '0')}` });
+
+    const oldUser = oldCore.user_current || '';
+    const newUser = asset.user_current || '';
+    if (newUser !== '' && oldUser !== newUser) {
+        asset.previous_user = oldUser;
+        historyLogs.push({
+            event_type: 'USER_CHANGE',
+            old_user: oldUser || null,
+            new_user: newUser,
+            details: `[사용자 변동] ${oldUser || '(없음)'} -> ${newUser}`
+        });
+    }
+
+    // 3.0.2 Spec 변동 감지 (CPU, RAM, GPU, OS, Mainboard 등)
+    const specFieldsToTrack = [
+        { key: 'cpu', label: 'CPU' },
+        { key: 'ram', label: 'RAM' },
+        { key: 'gpu', label: 'GPU' },
+        { key: 'os', label: 'OS' },
+        { key: 'mainboard', label: '메인보드' }
+    ];
+
+    specFieldsToTrack.forEach(field => {
+        const oldVal = String(oldSpec[field.key] || '').trim();
+        const newVal = String(asset[field.key] || '').trim();
+        if (newVal !== '' && oldVal !== newVal) {
+            historyLogs.push({
+                event_type: 'SPEC_CHANGE',
+                details: `[사양 변경] ${field.label}: ${oldVal || '(없음)'} -> ${newVal}`
+            });
+        }
+    });
+
+    // 3.0.3 상태 변경 감지
+    const oldStatus = oldSpec.hw_status || '';
+    const newStatus = asset.hw_status || '';
+    if (newStatus !== '' && oldStatus !== newStatus) {
+        historyLogs.push({
+            event_type: 'STATUS_CHANGE',
+            details: `[상태 변경] ${oldStatus || '(없음)'} -> ${newStatus}`
+        });
+    }
+
+    // 로그 일괄 삽입
+    for (const log of historyLogs) {
+        await connection.query(
+            `INSERT INTO asset_history (asset_id, event_type, old_dept, new_dept, old_user, new_user, details, log_date, log_user) 
+             VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)`,
+            [asset.id, log.event_type, log.old_dept || null, log.new_dept || null, log.old_user || null, log.new_user || null, log.details, logDate, logUser]
+        );
+    }
+
+    // 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);
+
+    console.log(`[DEBUG] Saving Asset ID: ${asset.id}, Code: ${asset.asset_code}`);
+    const [existingCore] = await connection.query('SELECT id FROM asset_core WHERE id = ?', [asset.id]);
+    console.log(`[DEBUG] Existing Core Check for ${asset.id}: Found ${existingCore.length}`);
+
+    if (existingCore.length > 0) {
+        // UPDATE
+        const updateKeys = coreKeys.filter(k => k !== 'id');
+        const coreSql = `UPDATE asset_core SET ${updateKeys.map(k => `${k} = ?`).join(', ')} WHERE id = ?`;
+        const [updRes] = await connection.query(coreSql, [...updateKeys.map(k => coreData[k]), asset.id]);
+        console.log(`[DEBUG] Core UPDATE result: affectedRows=${updRes.affectedRows}`);
+    } else {
+        // INSERT
+        const coreSql = `INSERT INTO asset_core (${coreKeys.join(', ')}) VALUES (${coreKeys.map(() => '?').join(', ')})`;
+        const [insRes] = await connection.query(coreSql, Object.values(coreData));
+        console.log(`[DEBUG] Core INSERT result: affectedRows=${insRes.affectedRows}`);
+    }
+
+    // 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));
+    }
+
+    // 3.3 asset_volume
+    await connection.query('DELETE FROM asset_volume WHERE asset_id = ?', [asset.id]);
+    if (asset.volumes) {
+        try {
+            let vols = typeof asset.volumes === 'string' ? JSON.parse(asset.volumes) : asset.volumes;
+            if (Array.isArray(vols)) {
+                for (let i = 0; i < vols.length; i++) {
+                    const v = vols[i];
+                    if (v.type && v.capacity) {
+                        await connection.query(
+                            'INSERT INTO asset_volume (asset_id, disk_type, capacity, unit, slot_no) VALUES (?, ?, ?, ?, ?)', 
+                            [asset.id, v.type, v.capacity, v.unit || 'GB', v.slot || (i + 1)]
+                        );
+                    }
+                }
+            }
+        } catch(e) { console.error('Volume parse error', e); }
+    }
+
+    // 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_remote (Dynamic Array Logic)
+    if (asset.remotes) {
+        try {
+            let nets = typeof asset.remotes === 'string' ? JSON.parse(asset.remotes) : asset.remotes;
+            if (Array.isArray(nets)) {
+                await connection.query('UPDATE asset_remote SET is_active = 0, deactivated_at = NOW() WHERE asset_id = ? AND is_active = 1', [asset.id]);
+                for (const n of nets) {
+                    if (n.type) {
+                        await connection.query(
+                            'INSERT INTO asset_remote (asset_id, net_type, net_name, net_value1, net_value2, is_active) VALUES (?, ?, ?, ?, ?, 1)', 
+                            [asset.id, n.type, n.name || '', n.val1 || '', n.val2 || '']
+                        );
+                    }
+                }
+            }
+        } catch(e) { console.error('Remote data parse error', e); }
+    } else {
+        // Fallback for UI that hasn't sent the networks array yet
+        if (asset.ip_address || asset.mac_address || asset.remote_tool) {
+            const [netActive] = await connection.query('SELECT * FROM asset_remote WHERE asset_id = ? AND is_active = 1', [asset.id]);
+            const isChanged = netActive.length === 0 || netActive[0].net_value1 !== asset.ip_address || netActive[0].net_value2 !== asset.mac_address || netActive[0].net_name !== asset.remote_tool;
+            if (isChanged) {
+                await connection.query('UPDATE asset_remote SET is_active = 0, deactivated_at = NOW() WHERE asset_id = ? AND is_active = 1', [asset.id]);
+                if (asset.ip_address || asset.mac_address) {
+                    await connection.query('INSERT INTO asset_remote (asset_id, net_type, net_name, net_value1, net_value2, is_active) VALUES (?, ?, ?, ?, ?, 1)', [asset.id, 'IP', '기본망', asset.ip_address, asset.mac_address]);
+                }
+                if (asset.remote_tool || asset.remote_id || asset.remote_pw) {
+                    await connection.query('INSERT INTO asset_remote (asset_id, net_type, net_name, net_value1, net_value2, is_active) VALUES (?, ?, ?, ?, ?, 1)', [asset.id, 'REMOTE', 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();
+  }
+});
+
+// 3.6 PC Flow Transaction (Checkout, Return, Move)
+app.post('/api/pc/flow', async (req, res) => {
+  const { action, assetId, userName, dept, empNo, position, date, details, manager } = req.body;
+  let connection;
+  try {
+    connection = await pool.getConnection();
+    await connection.beginTransaction();
+
+    if (action === 'checkout') {
+      await connection.query(
+        `UPDATE asset_core 
+         SET user_current = ?, emp_no = ?, current_dept = ?, user_position = ? 
+         WHERE id = ?`,
+        [userName, empNo, dept, position, assetId]
+      );
+      await connection.query(
+        `UPDATE asset_spec SET hw_status = '운영' WHERE asset_id = ?`,
+        [assetId]
+      );
+    } else if (action === 'return') {
+      await connection.query(
+        `UPDATE asset_core 
+         SET previous_user = user_current, previous_dept = current_dept, 
+             user_current = '', emp_no = '', user_position = '' 
+         WHERE id = ?`,
+        [assetId]
+      );
+      await connection.query(
+        `UPDATE asset_spec SET hw_status = '재고' WHERE asset_id = ?`,
+        [assetId]
+      );
+    } else if (action === 'move') {
+      await connection.query(
+        `UPDATE asset_core 
+         SET previous_user = user_current, previous_dept = current_dept, 
+             user_current = ?, emp_no = ?, current_dept = ?, user_position = ? 
+         WHERE id = ?`,
+        [userName, empNo, dept, position, assetId]
+      );
+      await connection.query(
+        `UPDATE asset_spec SET hw_status = '운영' WHERE asset_id = ?`,
+        [assetId]
+      );
+    } else {
+      throw new Error('Invalid action type');
+    }
+
+    // Insert into asset_history
+    await connection.query(
+      `INSERT INTO asset_history (asset_id, log_date, log_user, details) 
+       VALUES (?, ?, ?, ?)`,
+      [assetId, date || new Date().toISOString().split('T')[0], manager || 'system', details]
+    );
+
+    await connection.commit();
+    console.log(`💾 [PC FLOW TRANSACTION] Action: ${action}, Asset ID: ${assetId}`);
+    res.json({ success: true });
+  } catch (err) {
+    if (connection) await connection.rollback();
+    handleError(res, err, 'PC FLOW TRANSACTION');
+  } 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, remote, 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'); }
 });
 
-app.listen(3000, '0.0.0.0', () => {
-  console.log('📡 ITAM BACKEND SERVER RUNNING ON PORT 3000 (Multi-Table Optimized)');
+// 6. Map Config API
+app.get('/api/maps', (req, res) => {
+  try {
+    if (!fs.existsSync('map_config.json')) return res.json({});
+    const data = fs.readFileSync('map_config.json', 'utf8');
+    res.json(JSON.parse(data || '{}'));
+  } catch (err) { handleError(res, err, 'GET MAPS'); }
+});
+
+// 6.5. Get Hardware Components Master List
+app.get('/api/hardware-components', async (req, res) => {
+  try {
+    const [rows] = await pool.query('SELECT * FROM hardware_components_master ORDER BY category, component_name');
+    res.json(rows);
+  } catch (err) {
+    handleError(res, err, 'GET HARDWARE COMPONENTS');
+  }
+});
+
+// 6.6. Save Hardware Component (Add or Update)
+app.post('/api/hardware-components/save', async (req, res) => {
+  const { id, category, component_name, score_tier, deduction } = req.body;
+  let connection;
+  try {
+    connection = await pool.getConnection();
+    if (id) {
+      await connection.query(
+        'UPDATE hardware_components_master SET category = ?, component_name = ?, score_tier = ?, deduction = ? WHERE id = ?',
+        [category, component_name, score_tier, deduction, id]
+      );
+    } else {
+      await connection.query(
+        'INSERT INTO hardware_components_master (category, component_name, score_tier, deduction) VALUES (?, ?, ?, ?)',
+        [category, component_name, score_tier, deduction]
+      );
+    }
+    res.json({ success: true });
+  } catch (err) {
+    handleError(res, err, 'SAVE HARDWARE COMPONENT');
+  } finally {
+    if (connection) connection.release();
+  }
+});
+
+// 6.7. Delete Hardware Component
+app.delete('/api/hardware-components/:id', async (req, res) => {
+  const { id } = req.params;
+  let connection;
+  try {
+    connection = await pool.getConnection();
+    await connection.query('DELETE FROM hardware_components_master WHERE id = ?', [id]);
+    res.json({ success: true });
+  } catch (err) {
+    handleError(res, err, 'DELETE HARDWARE COMPONENT');
+  } finally {
+    if (connection) connection.release();
+  }
+});
+
+// 6.7.1. Get Job Spec Standards
+app.get('/api/job-specs', async (req, res) => {
+  try {
+    const [rows] = await pool.query('SELECT * FROM job_spec_standards ORDER BY job_name');
+    res.json(rows);
+  } catch (err) {
+    handleError(res, err, 'GET JOB SPECS');
+  }
+});
+
+// 6.7.2. Save Job Spec Standard (Add or Update)
+app.post('/api/job-specs/save', async (req, res) => {
+  const { id, job_name, cpu_standard, ram_standard, gpu_standard, min_score, remarks } = req.body;
+  let connection;
+  try {
+    connection = await pool.getConnection();
+    if (id) {
+      await connection.query(
+        'UPDATE job_spec_standards SET job_name = ?, cpu_standard = ?, ram_standard = ?, gpu_standard = ?, min_score = ?, remarks = ? WHERE id = ?',
+        [job_name, cpu_standard, ram_standard, gpu_standard, min_score, remarks, id]
+      );
+    } else {
+      await connection.query(
+        'INSERT INTO job_spec_standards (job_name, cpu_standard, ram_standard, gpu_standard, min_score, remarks) VALUES (?, ?, ?, ?, ?, ?)',
+        [job_name, cpu_standard, ram_standard, gpu_standard, min_score, remarks]
+      );
+    }
+    res.json({ success: true });
+  } catch (err) {
+    handleError(res, err, 'SAVE JOB SPEC');
+  } finally {
+    if (connection) connection.release();
+  }
+});
+
+// 6.7.3. Delete Job Spec Standard
+app.delete('/api/job-specs/:id', async (req, res) => {
+  const { id } = req.params;
+  let connection;
+  try {
+    connection = await pool.getConnection();
+    await connection.query('DELETE FROM job_spec_standards WHERE id = ?', [id]);
+    res.json({ success: true });
+  } catch (err) {
+    handleError(res, err, 'DELETE JOB SPEC');
+  } finally {
+    if (connection) connection.release();
+  }
+});
+
+// 6.8. Get System Users List
+app.get('/api/system-users', async (req, res) => {
+  try {
+    const [rows] = await pool.query('SELECT * FROM system_users ORDER BY user_name');
+    res.json(rows);
+  } catch (err) {
+    handleError(res, err, 'GET SYSTEM USERS');
+  }
+});
+
+// 6.9. Save System User (Add or Update)
+app.post('/api/system-users/save', async (req, res) => {
+  const { id, emp_no, user_name, dept_name, position, status } = req.body;
+  let connection;
+  try {
+    connection = await pool.getConnection();
+    if (id) {
+      await connection.query(
+        'UPDATE system_users SET emp_no = ?, user_name = ?, dept_name = ?, position = ?, status = ? WHERE id = ?',
+        [emp_no, user_name, dept_name, position, status, id]
+      );
+    } else {
+      const newId = 'USER-' + Math.random().toString(36).substring(2, 9).toUpperCase();
+      await connection.query(
+        'INSERT INTO system_users (id, emp_no, user_name, dept_name, position, status) VALUES (?, ?, ?, ?, ?, ?)',
+        [newId, emp_no, user_name, dept_name, position, status]
+      );
+    }
+    res.json({ success: true });
+  } catch (err) {
+    handleError(res, err, 'SAVE SYSTEM USER');
+  } finally {
+    if (connection) connection.release();
+  }
+});
+
+// 6.10. Delete System User
+app.delete('/api/system-users/:id', async (req, res) => {
+  const { id } = req.params;
+  let connection;
+  try {
+    connection = await pool.getConnection();
+    await connection.query('DELETE FROM system_users WHERE id = ?', [id]);
+    res.json({ success: true });
+  } catch (err) {
+    handleError(res, err, 'DELETE SYSTEM USER');
+  } finally {
+    if (connection) connection.release();
+  }
+});
+
+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')) config = JSON.parse(fs.readFileSync('map_config.json', 'utf8') || '{}');
+    config[path] = boxes;
+    fs.writeFileSync('map_config.json', JSON.stringify(config, null, 2));
+    res.json({ success: true });
+  } catch (err) { handleError(res, err, 'SAVE MAPS'); }
+});
+
+// 7. File Upload API (Base64)
+app.post('/api/upload', (req, res) => {
+  try {
+    const { fileName, fileData } = req.body;
+    if (!fileName || !fileData) return res.status(400).json({ error: 'FileName and FileData are required' });
+
+    // base64 데이터에서 실제 바이너리 추출
+    const base64Data = fileData.replace(/^data:.*;base64,/, "");
+    const buffer = Buffer.from(base64Data, 'base64');
+    
+    // 고유한 파일명 생성 (타임스탬프 결합)
+    const timestamp = Date.now();
+    const safeFileName = `${timestamp}_${fileName.replace(/[^a-zA-Z0-9._-]/g, '_')}`;
+    const filePath = `uploads/${safeFileName}`;
+
+    fs.writeFileSync(filePath, buffer);
+    
+    console.log(`파일 업로드 성공: ${filePath}`);
+    res.json({ success: true, filePath: `/${filePath}`, fileName: safeFileName });
+  } catch (err) {
+    handleError(res, err, 'FILE UPLOAD');
+  }
+});
+
+app.listen(3000, '0.0.0.0', () => {
+  console.log('📡 ITAM BACKEND SERVER RUNNING ON PORT 3000 (V3 Normalized)');
 });

src/components/Modal/BaseModal.ts

@@ -1,5 +1,109 @@
+import { createIcons, X } from 'lucide';
+import { setEditLock } from './ModalUtils';
+
 /**
- * 모든 모달의 공통 기능 (닫기, ESC 처리, 배경 클릭 등)을 관리하는 베이스 모듈입니다.
+ * 모든 모달의 공통 기능을 관리하는 베이스 추상 클래스입니다.
+ */
+export abstract class BaseModal {
+  protected idPrefix: string;
+  protected title: string;
+  protected currentAsset: any | null = null;
+  protected isEditMode: boolean = false;
+  protected modalEl: HTMLElement | null = null;
+  protected formEl: HTMLFormElement | null = null;
+
+  constructor(idPrefix: string, title: string) {
+    this.idPrefix = idPrefix;
+    this.title = title;
+  }
+
+  /**
+   * 모달 초기화: HTML 삽입 및 공통 이벤트 바인딩
+   */
+  public init(onSave: () => void, closeModalsFn: () => void) {
+    // 1. 프레임 HTML 삽입 (자식 클래스에서 정의한 HTML 사용)
+    if (!document.getElementById(`${this.idPrefix}-asset-modal`)) {
+      document.body.insertAdjacentHTML('beforeend', this.renderFrameHTML());
+    }
+
+    this.modalEl = document.getElementById(`${this.idPrefix}-asset-modal`);
+    this.formEl = document.getElementById(`${this.idPrefix}-asset-form`) as HTMLFormElement;
+
+    // 2. 공통 버튼 이벤트 바인딩 (닫기, 취소 등)
+    const btnCloseHeader = document.getElementById(`btn-close-${this.idPrefix}-modal`);
+    const btnCancelFooter = document.getElementById(`btn-cancel-${this.idPrefix}-modal`);
+
+    const closeAction = () => {
+      this.close();
+      closeModalsFn(); // 전역 모달 상태 해제 콜백
+    };
+
+    btnCloseHeader?.addEventListener('click', closeAction);
+    btnCancelFooter?.addEventListener('click', closeAction);
+
+    // 3. 자식 클래스 전용 초기화 로직 실행
+    this.initChildLogic(onSave, closeModalsFn);
+    
+    // 4. 아이콘 초기화
+    createIcons({ icons: { X } });
+  }
+
+  /**
+   * 모달 열기: 데이터 바인딩 및 모드 설정
+   */
+  public open(asset: any, mode: 'view' | 'edit' | 'add' = 'view') {
+    this.currentAsset = asset;
+    this.isEditMode = (mode === 'add' || mode === 'edit');
+    
+    // 폼 초기화 추가
+    if (this.formEl) this.formEl.reset();
+
+    this.setEditLockMode(mode);
+    this.fillFormData(asset);
+    
+    if (this.modalEl) {
+      this.modalEl.classList.remove('hidden');
+    }
+    
+    this.onAfterOpen(asset, mode);
+  }
+
+  /**
+   * 모달 닫기: 상태 초기화
+   */
+  public close() {
+    if (this.modalEl) {
+      this.modalEl.classList.add('hidden');
+    }
+    this.isEditMode = false;
+    this.currentAsset = null;
+    this.onAfterClose();
+  }
+
+  /**
+   * 조회/수정 모드에 따른 UI 잠금 및 버튼 제어
+   */
+  protected setEditLockMode(mode: 'view' | 'edit' | 'add') {
+    setEditLock(`${this.idPrefix}-asset-form`, mode, {
+      saveBtnId: `btn-save-${this.idPrefix}-asset`,
+      revertBtnId: `btn-revert-${this.idPrefix}-edit`,
+      addLogBtnId: `btn-add-${this.idPrefix}-log`
+    });
+  }
+
+  // --- 추상 메서드: 자식 클래스에서 구현해야 함 ---
+  protected abstract renderFrameHTML(): string;
+  protected abstract initChildLogic(onSave: () => void, closeModals: () => void): void;
+  protected abstract fillFormData(asset: any): void;
+  protected abstract onAfterOpen(asset: any, mode: string): void;
+  
+  // --- 훅(Hook) 메서드: 필요 시 오버라이드 ---
+  protected onAfterClose(): void {}
+}
+
+/**
+ * --- 레거시 호환성을 위한 함수형 익스포트 ---
+ * 기존 코드들이 참조하고 있는 함수들을 유지합니다.
  */
 export function closeModals() {
   const modals = document.querySelectorAll('.modal-overlay');
@@ -7,26 +111,14 @@ export function closeModals() {
 }
 
 export function initBaseModal() {
-  // ESC 키로 닫기
+  // ESC 키로 모든 모달 닫기
   window.addEventListener('keydown', (e) => {
     if (e.key === 'Escape') closeModals();
   });
 
-  // 배경(Overlay) 클릭 시 닫기
-  document.addEventListener('click', (e) => {
-    const target = e.target as HTMLElement;
-    if (target.classList.contains('modal-overlay')) {
-      closeModals();
-    }
-  });
-
   return { closeAllModals: closeModals };
 }
 
-/**
- * 특정 모달을 엽니다.
- * @param modalId 모달 엘리먼트의 ID
- */
 export function openModal(modalId: string) {
   const modal = document.getElementById(modalId);
   if (modal) {

src/components/Modal/DomainModal.ts

@@ -1,121 +1,188 @@
 import { state, saveAsset, deleteAsset } from '../../core/state';
-import { closeModals, openModal } from './BaseModal';
+import { BaseModal } from './BaseModal';
 import { CORP_LIST } from './SharedData';
-import { generateOptionsHTML, setEditLock } from './ModalUtils';
-import { createIcons, X, Save, Database, CalendarClock, Edit2 } from 'lucide';
+import { generateOptionsHTML, setFieldValue, getFieldValue } from './ModalUtils';
+import { createIcons, X, Save, Database, CalendarClock, Edit2, History, Plus } from 'lucide';
 import { formatExcelDate } from '../../core/excelHandler';
 import { UI_TEXT } from '../../core/schema';
-import { API_BASE_URL } from '../../core/utils';
 
-let currentItem: any = null;
-
-const DOMAIN_MODAL_HTML = `
-... (rest of DOMAIN_MODAL_HTML remains same) ...
-`;
-
-export function initDomainModal() {
-  if (!document.getElementById('domain-asset-modal')) {
-    document.body.insertAdjacentHTML('beforeend', DOMAIN_MODAL_HTML);
+class DomainAssetModal extends BaseModal {
+  constructor() {
+    super('domain', '도메인 정보');
   }
 
-  const modal = document.getElementById('domain-asset-modal')!;
-  document.getElementById('btn-close-domain-modal')?.addEventListener('click', () => closeModals());
-  document.getElementById('btn-cancel-domain')?.addEventListener('click', () => closeModals());
-  
-  const saveBtn = document.getElementById('btn-save-domain');
-  const revertBtn = document.getElementById('btn-revert-domain');
-  const deleteBtn = document.getElementById('btn-delete-domain');
-  const headerEditBtn = document.getElementById('btn-edit-domain-header');
+  protected renderFrameHTML(): string {
+    return `
+      <div id="domain-asset-modal" class="modal-overlay hidden">
+        <div class="modal-content wide">
+          <div class="modal-header">
+            <h2 id="domain-modal-title">${this.title}</h2>
+            <button id="btn-close-domain-modal" class="btn-icon" aria-label="닫기"><i data-lucide="x"></i></button>
+          </div>
+          <div class="modal-body">
+            <div class="modal-body-split">
+              <div class="modal-form-area">
+                <form id="domain-asset-form" class="grid-form">
+                  <input type="hidden" id="domain-id" name="id" />
+                  
+                  <div class="form-section-title">기본 정보</div>
+                  <div class="form-group">
+                    <label>구분</label>
+                    <select id="domain-type" name="type">
+                      <option value="호스팅">호스팅</option>
+                      <option value="도메인">도메인</option>
+                      <option value="기타">기타</option>
+                    </select>
+                  </div>
+                  <div class="form-group">
+                    <label>관리법인</label>
+                    <select id="domain-corp" name="corp">${generateOptionsHTML(CORP_LIST)}</select>
+                  </div>
+                  <div class="form-group full-width">
+                    <label>서비스명</label>
+                    <input type="text" id="domain-service-name" name="service_name" required />
+                  </div>
+                  <div class="form-group full-width">
+                    <label>관리도메인</label>
+                    <input type="text" id="domain-name" name="domain_name" required />
+                  </div>
 
-  saveBtn?.addEventListener('click', () => {
-    if (!currentItem) return;
-    if (saveBtn.textContent?.includes('수정')) {
-      setEditLock('domain-asset-form', 'edit', { saveBtnId: 'btn-save-domain', revertBtnId: 'btn-revert-domain' });
-      return;
-    }
-    saveDomain();
-  });
+                  <div class="form-section-title">계약 및 비용</div>
+                  <div class="form-group">
+                    <label>계약시작일</label>
+                    <input type="date" id="domain-start-date" name="start_date" />
+                  </div>
+                  <div class="form-group">
+                    <label>만료예정일</label>
+                    <input type="date" id="domain-expiry-date" name="expiry_date" />
+                  </div>
+                  <div class="form-group">
+                    <label>비용 (연간/월간)</label>
+                    <input type="text" id="domain-price" name="price" oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/\\\\B(?=(\\\\d{3})+(?!\\\\d))/g, ',')" />
+                  </div>
 
-  headerEditBtn?.addEventListener('click', () => {
-    setEditLock('domain-asset-form', 'edit', { saveBtnId: 'btn-save-domain', revertBtnId: 'btn-revert-domain' });
-  });
+                  <div class="form-section-title">담당자 및 비고</div>
+                  <div class="form-group">
+                    <label>정담당자</label>
+                    <input type="text" id="domain-manager-main" name="manager_main" />
+                  </div>
+                  <div class="form-group">
+                    <label>부담당자</label>
+                    <input type="text" id="domain-manager-sub" name="manager_sub" />
+                  </div>
+                  <div class="form-group full-width">
+                    <label>비고</label>
+                    <textarea id="domain-remarks" name="remarks" rows="3"></textarea>
+                  </div>
+                </form>
+              </div>
+              <div class="modal-history-area">
+                <div class="history-header">
+                  <h3><i data-lucide="history" style="width:16px; height:16px;"></i> 변경 이력</h3>
+                  <button type="button" id="btn-add-domain-log" class="btn btn-outline btn-sm">
+                    이력 추가 <i data-lucide="plus" style="width:14px; height:14px;"></i>
+                  </button>
+                </div>
+                <div id="domain-history-list" class="history-timeline"></div>
+              </div>
+            </div>
+          </div>
+          <div class="modal-footer">
+            <button id="btn-delete-domain-asset" class="btn btn-outline btn-danger">삭제</button>
+            <div class="footer-actions">
+              <button id="btn-revert-domain-edit" class="btn btn-outline hidden">수정 취소</button>
+              <button id="btn-cancel-domain-modal" class="btn btn-outline">닫기</button>
+              <button id="btn-save-domain-asset" class="btn btn-primary">수정</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+  }
 
-  revertBtn?.addEventListener('click', () => {
-    setEditLock('domain-asset-form', 'view', { saveBtnId: 'btn-save-domain', revertBtnId: 'btn-revert-domain' });
-    if (currentItem) openDomainModal(currentItem);
-  });
+  protected initChildLogic(onSave: () => void, closeModals: () => void): void {
+    const saveBtn = document.getElementById('btn-save-domain-asset')!;
+    const revertBtn = document.getElementById('btn-revert-domain-edit')!;
+    const deleteBtn = document.getElementById('btn-delete-domain-asset')!;
 
-  deleteBtn?.addEventListener('click', async () => {
-    if (currentItem && confirm(UI_TEXT.MESSAGES.CONFIRM_DELETE)) {
-      const success = await deleteAsset('domain', currentItem.id);
-      if (success) {
-          alert('성공적으로 삭제되었습니다.');
-          closeModals();
-          window.dispatchEvent(new CustomEvent('refresh-view'));
+    saveBtn.addEventListener('click', async () => {
+      if (!this.currentAsset) return;
+      if (!this.isEditMode) {
+        this.setEditLockMode('edit');
+        this.isEditMode = true;
+        return;
       }
-    }
-  });
-}
 
-export function openDomainModal(item: any = null) {
-  currentItem = item;
-  const isEdit = !!item;
-  const mode = isEdit ? 'view' : 'add';
-  
-  const titleEl = document.getElementById('domain-modal-title');
-  if (titleEl) titleEl.textContent = isEdit ? '도메인 정보 상세' : '신규 도메인 등록';
+      const formData = new FormData(this.formEl!);
+      const updated = { ...this.currentAsset };
+      formData.forEach((value, key) => { updated[key] = value; });
 
-  setEditLock('domain-asset-form', mode, { saveBtnId: 'btn-save-domain', revertBtnId: 'btn-revert-domain' });
+      if (!updated.service_name || !updated.domain_name) {
+        alert('서비스명과 관리도메인은 필수 입력 사항입니다.');
+        return;
+      }
 
-  const setVal = (id: string, val: any) => {
-    const el = document.getElementById(id) as HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
-    if (el) el.value = val || '';
-  };
+      if (await saveAsset('domain', updated)) {
+        alert(UI_TEXT.MESSAGES.SAVE_SUCCESS);
+        onSave(); this.close(); closeModals();
+      }
+    });
 
-  setVal('domain-type', item?.type || '호스팅');
-  setVal('domain-corp', item?.corp || '');
-  setVal('domain-service-name', item?.service_name || '');
-  setVal('domain-name', item?.domain_name || '');
-  setVal('domain-start-date', formatExcelDate(item?.start_date));
-  setVal('domain-expiry-date', formatExcelDate(item?.expiry_date));
-  setVal('domain-price', item?.price || '');
-  setVal('domain-manager-main', item?.manager_main || '');
-  setVal('domain-manager-sub', item?.manager_sub || '');
-  setVal('domain-remarks', item?.remarks || '');
+    revertBtn.addEventListener('click', () => {
+      this.setEditLockMode('view');
+      if (this.currentAsset) this.fillFormData(this.currentAsset);
+    });
 
-  const deleteBtn = document.getElementById('btn-delete-domain');
-  if (deleteBtn) deleteBtn.style.display = isEdit ? 'block' : 'none';
+    deleteBtn.addEventListener('click', async () => {
+      if (!this.currentAsset || !confirm(UI_TEXT.MESSAGES.CONFIRM_DELETE)) return;
+      if (await deleteAsset('domain', this.currentAsset.id)) {
+        alert('성공적으로 삭제되었습니다.');
+        onSave(); this.close(); closeModals();
+      }
+    });
 
-  openModal('domain-asset-modal');
-  createIcons({ icons: { X, Save, Database, CalendarClock, Edit2 } });
-}
-
-async function saveDomain() {
-  const getVal = (id: string) => (document.getElementById(id) as HTMLInputElement)?.value || '';
-
-  const newDomain = {
-    id: currentItem ? currentItem.id : `DOM-${Date.now()}`,
-    type: getVal('domain-type'),
-    corp: getVal('domain-corp'),
-    service_name: getVal('domain-service-name'),
-    domain_name: getVal('domain-name'),
-    start_date: getVal('domain-start-date'),
-    expiry_date: getVal('domain-expiry-date'),
-    price: getVal('domain-price'),
-    manager_main: getVal('domain-manager-main'),
-    manager_sub: getVal('domain-manager-sub'),
-    remarks: getVal('domain-remarks')
-  };
-
-  if (!newDomain.service_name || !newDomain.domain_name) {
-    alert('서비스명과 관리도메인은 필수 입력 사항입니다.');
-    return;
+    createIcons({ icons: { History, Plus, Save, CalendarClock, Database } });
   }
 
-  const success = await saveAsset('domain', newDomain);
-  if (success) {
-      alert(UI_TEXT.MESSAGES.SAVE_SUCCESS);
-      closeModals();
-      window.dispatchEvent(new CustomEvent('refresh-view'));
+  protected fillFormData(asset: any): void {
+    setFieldValue('domain-id', asset.id);
+    setFieldValue('domain-type', asset.type || '호스팅');
+    setFieldValue('domain-corp', asset.corp || '');
+    setFieldValue('domain-service-name', asset.service_name || '');
+    setFieldValue('domain-name', asset.domain_name || '');
+    setFieldValue('domain-start-date', formatExcelDate(asset.start_date));
+    setFieldValue('domain-expiry-date', formatExcelDate(asset.expiry_date));
+    setFieldValue('domain-price', asset.price || '');
+    setFieldValue('domain-manager-main', asset.manager_main || '');
+    setFieldValue('domain-manager-sub', asset.manager_sub || '');
+    setFieldValue('domain-remarks', asset.remarks || '');
+
+    this.renderHistory(asset.id);
+  }
+
+  protected onAfterOpen(asset: any, mode: string): void {
+    const titleEl = document.getElementById('domain-modal-title');
+    if (titleEl) titleEl.textContent = (mode === 'add') ? '신규 도메인 등록' : '도메인 정보 상세';
+    
+    const deleteBtn = document.getElementById('btn-delete-domain-asset');
+    if (deleteBtn) deleteBtn.style.display = (mode === 'add') ? 'none' : 'block';
+  }
+
+  private renderHistory(assetId: string) {
+    const container = document.getElementById('domain-history-list');
+    if (!container) return;
+    const logs = (state.masterData.logs || []).filter(l => l.assetId === assetId);
+    if (logs.length === 0) { container.innerHTML = '<div class="empty-history">이력이 없습니다.</div>'; return; }
+    container.innerHTML = logs.map(l => `<div class=\"history-item\"><div class=\"history-date\">${l.date}</div><div class=\"history-user\">${l.user}</div><div class=\"history-details\">${l.details}</div></div>`).join('');
   }
 }
+
+export const domainModal = new DomainAssetModal();
+
+export function initDomainModal(onSave: () => void, closeModals: () => void) {
+  domainModal.init(onSave, closeModals);
+}
+
+export function openDomainModal(asset: any, mode: 'view' | 'edit' | 'add' = 'view') {
+  domainModal.open(asset, mode);
+}

src/components/Modal/JobSpecModal.ts

@@ -0,0 +1,284 @@
+import { state, saveJobSpec, deleteJobSpec } from '../../core/state';
+import { BaseModal } from './BaseModal';
+import { setFieldValue } from './ModalUtils';
+import { UI_TEXT } from '../../core/schema';
+import { calculatePcScoreDeductive } from '../../core/utils';
+
+class JobSpecModal extends BaseModal {
+  constructor() {
+    super('job-spec', '직무별 기준 사양');
+  }
+
+  protected renderFrameHTML(): string {
+    const sharedStyle = 'height: 38px !important; box-sizing: border-box !important; font-size: 13px; margin: 0;';
+    const inputStyle = sharedStyle;
+
+    return `
+      <div id="job-spec-asset-modal" class="modal-overlay hidden">
+        <style>
+          .autocomplete-list {
+            position: absolute;
+            top: 100%;
+            left: 0;
+            right: 0;
+            max-height: 150px;
+            overflow-y: auto;
+            background-color: white;
+            border: 1px solid var(--border-color, #E2E8F0);
+            border-top: none;
+            border-radius: 0 0 4px 4px;
+            z-index: 1000;
+            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+          }
+          .autocomplete-item {
+            padding: 8px 12px;
+            font-size: 13px;
+            color: #334155;
+            cursor: pointer;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+          }
+          .autocomplete-item:hover {
+            background-color: #F1F5F9;
+            color: #1E5149;
+            font-weight: 600;
+          }
+          .hidden {
+            display: none !important;
+          }
+        </style>
+        <div class="modal-content" style="max-width: 500px; width: 100%;">
+          <div class="modal-header">
+            <h2 id="job-spec-modal-title" style="margin: 0; font-size: 18px; font-weight: 800; color: white;">\${this.title}</h2>
+            <button id="btn-close-job-spec-modal" class="btn-icon" aria-label="닫기" style="font-size: 28px; color: white; background: none; border: none; cursor: pointer; line-height: 1;">&times;</button>
+          </div>
+          <div class="modal-body" style="padding: 24px; overflow-y: auto;">
+            <form id="job-spec-asset-form" class="grid-form" style="display: flex; flex-direction: column; gap: 16px;">
+              <input type="hidden" id="job-spec-id" name="id" />
+              
+              <div class="form-group" style="display: flex; flex-direction: column; gap: 6px;">
+                <label style="font-size: 11px; font-weight: 700; color: var(--text-muted);">직무명</label>
+                <input type="text" id="job-spec-job-name" name="job_name" placeholder="예: BIM 모델러, 개발자, 엔지니어" required style="\${inputStyle} width: 100%;" />
+              </div>
+
+              <div class="form-group" style="display: flex; flex-direction: column; gap: 6px; position: relative;">
+                <label style="font-size: 11px; font-weight: 700; color: var(--text-muted);">권장 CPU 사양</label>
+                <input type="text" id="job-spec-cpu-standard" name="cpu_standard" placeholder="CPU 검색..." required style="\${inputStyle} width: 100%;" autocomplete="off" />
+                <div id="job-spec-cpu-autocomplete" class="autocomplete-list hidden"></div>
+              </div>
+
+              <div class="form-group" style="display: flex; flex-direction: column; gap: 6px; position: relative;">
+                <label style="font-size: 11px; font-weight: 700; color: var(--text-muted);">권장 RAM 사양</label>
+                <input type="text" id="job-spec-ram-standard" name="ram_standard" placeholder="RAM 검색..." required style="\${inputStyle} width: 100%;" autocomplete="off" />
+                <div id="job-spec-ram-autocomplete" class="autocomplete-list hidden"></div>
+              </div>
+
+              <div class="form-group" style="display: flex; flex-direction: column; gap: 6px; position: relative;">
+                <label style="font-size: 11px; font-weight: 700; color: var(--text-muted);">권장 GPU 사양</label>
+                <input type="text" id="job-spec-gpu-standard" name="gpu_standard" placeholder="GPU 검색..." required style="\${inputStyle} width: 100%;" autocomplete="off" />
+                <div id="job-spec-gpu-autocomplete" class="autocomplete-list hidden"></div>
+              </div>
+
+              <div class="form-group" style="display: flex; flex-direction: column; gap: 6px;">
+                <label style="font-size: 11px; font-weight: 700; color: var(--text-muted);">성능 기준 점수 (이상, 자동 계산됨)</label>
+                <input type="number" id="job-spec-min-score" name="min_score" placeholder="자동 계산 대기..." required style="\${inputStyle} width: 100%;" readonly />
+              </div>
+
+              <div class="form-group" style="display: flex; flex-direction: column; gap: 6px;">
+                <label style="font-size: 11px; font-weight: 700; color: var(--text-muted);">비고 (메모)</label>
+                <textarea id="job-spec-remarks" name="remarks" placeholder="기타 필요 사양 및 안내 사항" style="box-sizing: border-box !important; font-size: 13px; margin: 0; min-height: 80px; width: 100%; padding: 8px; border: 1px solid var(--border-color); border-radius: 4px; resize: vertical;"></textarea>
+              </div>
+            </form>
+          </div>
+          <div class="modal-footer" style="display: flex; justify-content: space-between; align-items: center; padding: 16px 24px; background: #f8fafc; border-top: 1px solid var(--border-color);">
+            <button id="btn-delete-job-spec-asset" class="btn btn-outline btn-danger" style="height: 42px;">삭제</button>
+            <div class="footer-actions" style="display: flex; gap: 8px;">
+              <button id="btn-revert-job-spec-edit" class="btn btn-outline hidden" style="height: 42px;">수정 취소</button>
+              <button id="btn-cancel-job-spec-modal" class="btn btn-outline" style="height: 42px;">닫기</button>
+              <button id="btn-save-job-spec-asset" class="btn btn-primary" style="height: 42px;">수정</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  protected initChildLogic(onSave: () => void, closeModals: () => void): void {
+    const saveBtn = document.getElementById('btn-save-job-spec-asset')!;
+    const revertBtn = document.getElementById('btn-revert-job-spec-edit')!;
+    const deleteBtn = document.getElementById('btn-delete-job-spec-asset')!;
+
+    saveBtn.addEventListener('click', async () => {
+      if (!this.currentAsset) return;
+      if (!this.isEditMode) {
+        this.setEditLockMode('edit');
+        this.isEditMode = true;
+        return;
+      }
+
+      const jobName = (document.getElementById('job-spec-job-name') as HTMLInputElement).value.trim();
+      const cpuStd = (document.getElementById('job-spec-cpu-standard') as HTMLInputElement).value.trim();
+      const ramStd = (document.getElementById('job-spec-ram-standard') as HTMLInputElement).value.trim();
+      const gpuStd = (document.getElementById('job-spec-gpu-standard') as HTMLInputElement).value.trim();
+      const minScoreStr = (document.getElementById('job-spec-min-score') as HTMLInputElement).value;
+      const remarks = (document.getElementById('job-spec-remarks') as HTMLTextAreaElement).value.trim();
+
+      if (!jobName) {
+        alert('직무명을 입력해 주세요.');
+        return;
+      }
+
+      const updated = {
+        id: this.currentAsset.id || null,
+        job_name: jobName,
+        cpu_standard: cpuStd,
+        ram_standard: ramStd,
+        gpu_standard: gpuStd,
+        min_score: minScoreStr !== '' ? parseInt(minScoreStr, 10) : 0,
+        remarks: remarks
+      };
+
+      if (await saveJobSpec(updated)) {
+        alert(UI_TEXT.MESSAGES.SAVE_SUCCESS);
+        onSave(); this.close(); closeModals();
+      }
+    });
+
+    revertBtn.addEventListener('click', () => {
+      this.setEditLockMode('view');
+      if (this.currentAsset) this.fillFormData(this.currentAsset);
+    });
+
+    deleteBtn.addEventListener('click', async () => {
+      if (!this.currentAsset || !this.currentAsset.id) return;
+      if (!confirm('정말로 이 직무별 기준 사양을 삭제하시겠습니까?')) return;
+
+      if (await deleteJobSpec(this.currentAsset.id)) {
+        alert('성공적으로 삭제되었습니다.');
+        onSave(); this.close(); closeModals();
+      }
+    });
+
+    // 자동완성 바인딩
+    this.bindAutocomplete('job-spec-cpu-standard', 'job-spec-cpu-autocomplete', 'CPU');
+    this.bindAutocomplete('job-spec-ram-standard', 'job-spec-ram-autocomplete', 'RAM');
+    this.bindAutocomplete('job-spec-gpu-standard', 'job-spec-gpu-autocomplete', 'GPU');
+
+    // 실시간 점수 계산 이벤트 바인딩
+    const inputs = ['job-spec-cpu-standard', 'job-spec-ram-standard', 'job-spec-gpu-standard'];
+    inputs.forEach(id => {
+      const el = document.getElementById(id);
+      el?.addEventListener('input', () => this.updateMinScore());
+      el?.addEventListener('change', () => this.updateMinScore());
+    });
+  }
+
+  private bindAutocomplete(inputId: string, autocompleteId: string, category: string) {
+    const input = document.getElementById(inputId) as HTMLInputElement;
+    const list = document.getElementById(autocompleteId) as HTMLDivElement;
+    if (!input || !list) return;
+
+    const showList = (filterText: string = '') => {
+      if (!this.isEditMode) return;
+      const items = (state.masterData.partsMaster || []).filter((c: any) => c.category === category);
+      const filtered = filterText 
+        ? items.filter((c: any) => c.component_name.toLowerCase().includes(filterText.toLowerCase()))
+        : items;
+
+      if (filtered.length === 0) {
+        list.innerHTML = '<div class="autocomplete-item" style="color: #94a3b8; cursor: default;">검색 결과 없음</div>';
+      } else {
+        list.innerHTML = filtered.map((c: any) => `<div class="autocomplete-item" data-val="${c.component_name}">${c.component_name}</div>`).join('');
+      }
+      list.classList.remove('hidden');
+    };
+
+    input.addEventListener('focus', () => {
+      showList(input.value);
+    });
+
+    input.addEventListener('input', () => {
+      showList(input.value);
+    });
+
+    list.addEventListener('mousedown', (e) => {
+      const item = (e.target as HTMLElement).closest('.autocomplete-item');
+      if (item && item.getAttribute('data-val')) {
+        input.value = item.getAttribute('data-val') || '';
+        list.classList.add('hidden');
+        this.updateMinScore();
+      }
+    });
+
+    document.addEventListener('mousedown', (e) => {
+      if (e.target !== input && !list.contains(e.target as Node)) {
+        list.classList.add('hidden');
+      }
+    });
+  }
+
+  private updateMinScore(): void {
+    const cpu = (document.getElementById('job-spec-cpu-standard') as HTMLInputElement)?.value || '';
+    const ram = (document.getElementById('job-spec-ram-standard') as HTMLInputElement)?.value || '';
+    const gpu = (document.getElementById('job-spec-gpu-standard') as HTMLInputElement)?.value || '';
+    
+    const score = calculatePcScoreDeductive(cpu, ram, gpu, '');
+    
+    const minScoreEl = document.getElementById('job-spec-min-score') as HTMLInputElement;
+    if (minScoreEl) {
+      minScoreEl.value = score.toString();
+    }
+  }
+
+  protected fillFormData(asset: any): void {
+    setFieldValue('job-spec-id', asset.id || '');
+    setFieldValue('job-spec-job-name', asset.job_name || '');
+    setFieldValue('job-spec-cpu-standard', asset.cpu_standard || '');
+    setFieldValue('job-spec-ram-standard', asset.ram_standard || '');
+    setFieldValue('job-spec-gpu-standard', asset.gpu_standard || '');
+    setFieldValue('job-spec-min-score', asset.min_score !== undefined ? asset.min_score.toString() : '100');
+    setFieldValue('job-spec-remarks', asset.remarks || '');
+  }
+
+  protected onAfterOpen(asset: any, mode: string): void {
+    const titleEl = document.getElementById('job-spec-modal-title');
+
+    if (titleEl) {
+      if (mode === 'add') {
+        titleEl.textContent = '신규 직무별 기준 사양 등록';
+      } else {
+        titleEl.textContent = '직무별 기준 사양 상세 편집';
+      }
+    }
+
+    const deleteBtn = document.getElementById('btn-delete-job-spec-asset')!;
+    const saveBtn = document.getElementById('btn-save-job-spec-asset')!;
+    
+    deleteBtn.style.display = (mode === 'add') ? 'none' : 'block';
+
+    if (mode === 'add') {
+      this.setEditLockMode('edit');
+      this.isEditMode = true;
+      saveBtn.textContent = '등록';
+      saveBtn.style.display = 'block';
+    } else {
+      this.setEditLockMode('view');
+      this.isEditMode = false;
+      saveBtn.textContent = '수정';
+      saveBtn.style.display = 'block';
+    }
+    
+    this.updateMinScore();
+  }
+}
+
+export const jobSpecModal = new JobSpecModal();
+
+export function initJobSpecModal(onSave: () => void, closeModals: () => void) {
+  jobSpecModal.init(onSave, closeModals);
+}
+
+export function openJobSpecModal(asset: any, mode: 'view' | 'edit' | 'add' = 'view') {
+  jobSpecModal.open(asset, mode);
+}

src/components/Modal/PCFlowModal.ts

@@ -0,0 +1,625 @@
+import { state, loadMasterDataFromDB } from '../../core/state';
+import { createIcons, Search, Monitor, RefreshCw } from 'lucide';
+import { API_BASE_URL } from '../../core/utils';
+
+export class PCFlowModal {
+  private static instance: PCFlowModal | null = null;
+  
+  private modalEl: HTMLElement | null = null;
+  private currentFlowType: 'checkout' | 'return' | 'move' = 'checkout';
+  
+  // Selected state
+  private selectedUser: any = null;
+  private selectedTargetUser: any = null;
+  private selectedPC: any = null;
+
+  private constructor() {}
+
+  public static getInstance(): PCFlowModal {
+    if (!PCFlowModal.instance) {
+      PCFlowModal.instance = new PCFlowModal();
+    }
+    return PCFlowModal.instance;
+  }
+
+  public init(onSave: () => void) {
+    if (document.getElementById('pc-flow-modal')) return;
+
+    // Inject HTML
+    document.body.insertAdjacentHTML('beforeend', this.renderHTML());
+
+    this.modalEl = document.getElementById('pc-flow-modal');
+    this.setupEventListeners(onSave);
+    
+    // Set default date to today
+    const dateInput = document.getElementById('pc-flow-date') as HTMLInputElement;
+    if (dateInput) {
+      dateInput.value = new Date().toISOString().split('T')[0];
+    }
+
+    createIcons({ icons: { Search, Monitor, RefreshCw } });
+  }
+
+  public open() {
+    this.resetState();
+    if (this.modalEl) {
+      this.modalEl.classList.remove('hidden');
+    }
+    this.updateUI();
+  }
+
+  public close() {
+    if (this.modalEl) {
+      this.modalEl.classList.add('hidden');
+    }
+  }
+
+  private resetState() {
+    this.selectedUser = null;
+    this.selectedTargetUser = null;
+    this.selectedPC = null;
+    this.currentFlowType = 'checkout';
+    
+    const radioCheckout = document.querySelector('input[name="flow-type"][value="checkout"]') as HTMLInputElement;
+    if (radioCheckout) radioCheckout.checked = true;
+
+    // Reset text fields
+    const userSearch = document.getElementById('pc-flow-user-search') as HTMLInputElement;
+    if (userSearch) userSearch.value = '';
+    
+    const targetUserSearch = document.getElementById('pc-flow-target-user-search') as HTMLInputElement;
+    if (targetUserSearch) targetUserSearch.value = '';
+
+    const stockSearch = document.getElementById('pc-flow-stock-search') as HTMLInputElement;
+    if (stockSearch) stockSearch.value = '';
+
+    const details = document.getElementById('pc-flow-details') as HTMLTextAreaElement;
+    if (details) details.value = '';
+  }
+
+  private setupEventListeners(onSave: () => void) {
+    const btnClose = document.getElementById('btn-close-pc-flow-modal');
+    const btnCancel = document.getElementById('btn-cancel-pc-flow-modal');
+    const btnSubmit = document.getElementById('btn-submit-pc-flow');
+
+    btnClose?.addEventListener('click', () => this.close());
+    btnCancel?.addEventListener('click', () => this.close());
+
+    // Flow Type Radio Buttons
+    const labels = document.querySelectorAll('.flow-type-label');
+    labels.forEach(label => {
+      const radio = label.querySelector('input[name="flow-type"]') as HTMLInputElement;
+      label.addEventListener('click', () => {
+        labels.forEach(l => l.classList.remove('active'));
+        label.classList.add('active');
+        radio.checked = true;
+        this.currentFlowType = radio.value as any;
+        
+        // Reset selected PC when switching flow types
+        this.selectedPC = null;
+        this.updateUI();
+      });
+    });
+
+    // 1. Source User Autocomplete Search
+    const userSearch = document.getElementById('pc-flow-user-search') as HTMLInputElement;
+    const userSuggestions = document.getElementById('pc-flow-user-suggestions')!;
+    
+    userSearch?.addEventListener('input', () => {
+      const query = userSearch.value.trim().toLowerCase();
+      if (!query) {
+        userSuggestions.classList.add('hidden');
+        return;
+      }
+      
+      const users = state.masterData.users || [];
+      const filtered = users.filter((u: any) => 
+        (u.user_name && u.user_name.toLowerCase().includes(query)) ||
+        (u.dept_name && u.dept_name.toLowerCase().includes(query)) ||
+        (u.emp_no && u.emp_no.toString().includes(query))
+      );
+
+      const uniqueFiltered: any[] = [];
+      const seen = new Set();
+      filtered.forEach((u: any) => {
+        const key = u.emp_no || u.user_name;
+        if (!seen.has(key)) {
+          seen.add(key);
+          uniqueFiltered.push(u);
+        }
+      });
+
+      this.renderUserSuggestions(uniqueFiltered, userSuggestions, (user) => {
+        this.selectedUser = user;
+        userSearch.value = `${user.user_name} (${user.dept_name} / 사번:${user.emp_no || '-'})`;
+        userSuggestions.classList.add('hidden');
+        
+        // Automatically populate details if return or move
+        if (this.currentFlowType === 'return' || this.currentFlowType === 'move') {
+          this.selectedPC = null; // Reset selection
+        }
+        this.updateUI();
+      });
+    });
+
+    // Close suggestion overlays on clicking outside
+    document.addEventListener('click', (e) => {
+      const target = e.target as HTMLElement;
+      if (!target.closest('#pc-flow-user-search') && !target.closest('#pc-flow-user-suggestions')) {
+        userSuggestions.classList.add('hidden');
+      }
+      if (!target.closest('#pc-flow-target-user-search') && !target.closest('#pc-flow-target-user-suggestions')) {
+        const targetSuggestions = document.getElementById('pc-flow-target-user-suggestions');
+        targetSuggestions?.classList.add('hidden');
+      }
+      if (!target.closest('#pc-flow-stock-search') && !target.closest('#pc-flow-stock-suggestions')) {
+        const stockSuggestions = document.getElementById('pc-flow-stock-suggestions');
+        stockSuggestions?.classList.add('hidden');
+      }
+    });
+
+    // 2. Target User Autocomplete Search (For Moves)
+    const targetUserSearch = document.getElementById('pc-flow-target-user-search') as HTMLInputElement;
+    const targetSuggestions = document.getElementById('pc-flow-target-user-suggestions')!;
+    
+    targetUserSearch?.addEventListener('input', () => {
+      const query = targetUserSearch.value.trim().toLowerCase();
+      if (!query) {
+        targetSuggestions.classList.add('hidden');
+        return;
+      }
+      
+      const users = state.masterData.users || [];
+      const filtered = users.filter((u: any) => 
+        (u.user_name && u.user_name.toLowerCase().includes(query)) ||
+        (u.dept_name && u.dept_name.toLowerCase().includes(query)) ||
+        (u.emp_no && u.emp_no.toString().includes(query))
+      );
+
+      const uniqueFiltered: any[] = [];
+      const seen = new Set();
+      filtered.forEach((u: any) => {
+        const key = u.emp_no || u.user_name;
+        if (!seen.has(key)) {
+          seen.add(key);
+          uniqueFiltered.push(u);
+        }
+      });
+
+      this.renderUserSuggestions(uniqueFiltered, targetSuggestions, (user) => {
+        this.selectedTargetUser = user;
+        targetUserSearch.value = `${user.user_name} (${user.dept_name} / 사번:${user.emp_no || '-'})`;
+        targetSuggestions.classList.add('hidden');
+        this.updateUI();
+      });
+    });
+
+    // 3. Stock PC Autocomplete Search (For Checkout)
+    const stockSearch = document.getElementById('pc-flow-stock-search') as HTMLInputElement;
+    const stockSuggestions = document.getElementById('pc-flow-stock-suggestions')!;
+    
+    const showStockSuggestions = () => {
+      const query = stockSearch.value.trim().toLowerCase();
+
+      // Filter available PCs (category PC, status '대기', '미할당', or '재고')
+      const pcs = state.masterData.pc || [];
+      const filtered = pcs.filter((p: any) => {
+        const status = (p.hw_status || '').trim();
+        const matchesQuery = !query || 
+          (p.asset_code && p.asset_code.toLowerCase().includes(query)) ||
+          (p.model_name && p.model_name.toLowerCase().includes(query)) ||
+          (p.cpu && p.cpu.toLowerCase().includes(query));
+        
+        return (status === '대기' || status === '미할당' || status === '재고') && matchesQuery;
+      });
+
+      this.renderPCSuggestions(filtered, stockSuggestions, (pc) => {
+        this.selectedPC = pc;
+        stockSearch.value = `${pc.asset_code} - ${pc.model_name}`;
+        stockSuggestions.classList.add('hidden');
+        this.updateUI();
+      });
+    };
+
+    stockSearch?.addEventListener('input', showStockSuggestions);
+    stockSearch?.addEventListener('focus', showStockSuggestions);
+    stockSearch?.addEventListener('click', showStockSuggestions);
+
+    // 4. Submit Transaction
+    btnSubmit?.addEventListener('click', async () => {
+      if (!this.validateInputs()) return;
+
+      const dateVal = (document.getElementById('pc-flow-date') as HTMLInputElement).value;
+      const detailsVal = (document.getElementById('pc-flow-details') as HTMLTextAreaElement).value.trim();
+      const loginUser = state.currentUserRole === 'admin' ? '관리자' : '실무담당자';
+
+      // Build Details Message as JSON
+      const logData = {
+        type: this.currentFlowType,
+        user: this.selectedUser ? this.selectedUser.user_name : '',
+        dept: this.selectedUser ? this.selectedUser.dept_name : '',
+        targetUser: this.selectedTargetUser ? this.selectedTargetUser.user_name : '',
+        targetDept: this.selectedTargetUser ? this.selectedTargetUser.dept_name : '',
+        assetCode: this.selectedPC ? this.selectedPC.asset_code : '',
+        memo: detailsVal
+      };
+      const finalDetails = JSON.stringify(logData);
+
+      const payload: any = {
+        action: this.currentFlowType,
+        assetId: this.selectedPC.id,
+        date: dateVal,
+        details: finalDetails,
+        manager: loginUser
+      };
+
+      if (this.currentFlowType === 'checkout') {
+        payload.userName = this.selectedUser.user_name;
+        payload.dept = this.selectedUser.dept_name;
+        payload.empNo = this.selectedUser.emp_no;
+        payload.position = this.selectedUser.position || '사원';
+      } else if (this.currentFlowType === 'move') {
+        payload.userName = this.selectedTargetUser.user_name;
+        payload.dept = this.selectedTargetUser.dept_name;
+        payload.empNo = this.selectedTargetUser.emp_no;
+        payload.position = this.selectedTargetUser.position || '사원';
+      }
+
+      try {
+        const response = await fetch(`${API_BASE_URL}/api/pc/flow`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(payload)
+        });
+
+        if (response.ok) {
+          alert('PC 이동/반납 처리가 완료되었습니다.');
+          this.close();
+          onSave(); // Refresh views
+        } else {
+          const errData = await response.json();
+          alert(`오류 발생: ${errData.error || '처리 실패'}`);
+        }
+      } catch (err) {
+        console.error('API Error:', err);
+        alert('서버 전송 중 오류가 발생했습니다.');
+      }
+    });
+  }
+
+  private validateInputs(): boolean {
+    if (this.currentFlowType === 'checkout') {
+      if (!this.selectedUser) { alert('대상 사원을 선택해주세요.'); return false; }
+      if (!this.selectedPC) { alert('불출할 재고 PC를 선택해주세요.'); return false; }
+    } else if (this.currentFlowType === 'return') {
+      if (!this.selectedUser) { alert('반납 대상 사원을 선택해주세요.'); return false; }
+      if (!this.selectedPC) { alert('반납할 PC 자산을 선택해주세요.'); return false; }
+    } else if (this.currentFlowType === 'move') {
+      if (!this.selectedUser) { alert('인계 사원을 선택해주세요.'); return false; }
+      if (!this.selectedPC) { alert('이동할 PC 자산을 선택해주세요.'); return false; }
+      if (!this.selectedTargetUser) { alert('인수 사원을 선택해주세요.'); return false; }
+      if (this.selectedUser.emp_no === this.selectedTargetUser.emp_no) {
+        alert('인계자와 인수자는 동일할 수 없습니다.');
+        return false;
+      }
+    }
+    return true;
+  }
+
+  private renderUserSuggestions(users: any[], container: HTMLElement, onSelect: (user: any) => void) {
+    container.innerHTML = '';
+    if (users.length === 0) {
+      container.innerHTML = '<div style="padding: 10px; color: var(--text-muted); font-size: 13px;">일치하는 사원이 없습니다.</div>';
+      container.classList.remove('hidden');
+      return;
+    }
+
+    users.forEach(u => {
+      const item = document.createElement('div');
+      item.style.padding = '8px 12px';
+      item.style.cursor = 'pointer';
+      item.style.fontSize = '13px';
+      item.style.borderBottom = '1px solid #F3F4F6';
+      item.className = 'suggestion-item';
+      item.innerHTML = `
+        <div style="font-weight: 700; color: var(--text-main);">${u.user_name}</div>
+        <div style="font-size: 11px; color: var(--text-muted); display: flex; gap: 8px;">
+          <span>부서: ${u.dept_name}</span>
+          <span>|</span>
+          <span>사번: ${u.emp_no || '-'}</span>
+        </div>
+      `;
+      item.addEventListener('click', () => onSelect(u));
+      container.appendChild(item);
+    });
+    container.classList.remove('hidden');
+  }
+
+  private renderPCSuggestions(pcs: any[], container: HTMLElement, onSelect: (pc: any) => void) {
+    container.innerHTML = '';
+    if (pcs.length === 0) {
+      container.innerHTML = '<div style="padding: 10px; color: var(--text-muted); font-size: 13px;">불출 가능한 대기 PC 재고가 없습니다.</div>';
+      container.classList.remove('hidden');
+      return;
+    }
+
+    pcs.forEach(p => {
+      const item = document.createElement('div');
+      item.style.padding = '8px 12px';
+      item.style.cursor = 'pointer';
+      item.style.fontSize = '13px';
+      item.style.borderBottom = '1px solid #F3F4F6';
+      item.className = 'suggestion-item';
+      item.innerHTML = `
+        <div style="font-weight: 700; color: var(--primary-color);">${p.asset_code} (${p.model_name || '모델명 없음'})</div>
+        <div style="font-size: 11px; color: var(--text-muted);">
+          사양: CPU ${p.cpu || '-'} / RAM ${p.ram || '-'} / 위치: ${p.location || '-'}
+        </div>
+      `;
+      item.addEventListener('click', () => onSelect(p));
+      container.appendChild(item);
+    });
+    container.classList.remove('hidden');
+  }
+
+  private updateUI() {
+    // 1. Hide/Show dynamic sections based on flow type
+    const stockContainer = document.getElementById('stock-pc-search-container')!;
+    const targetUserContainer = document.getElementById('target-user-search-container')!;
+    const userPcsContainer = document.getElementById('user-pcs-container')!;
+    const labelStep2 = document.getElementById('user-search-label')!;
+
+    if (this.currentFlowType === 'checkout') {
+      stockContainer.classList.remove('hidden');
+      targetUserContainer.classList.add('hidden');
+      userPcsContainer.classList.add('hidden');
+      labelStep2.textContent = '2. 불출 대상 사원 검색';
+    } else if (this.currentFlowType === 'return') {
+      stockContainer.classList.add('hidden');
+      targetUserContainer.classList.add('hidden');
+      userPcsContainer.classList.remove('hidden');
+      labelStep2.textContent = '2. 반납 대상 사원 검색';
+    } else if (this.currentFlowType === 'move') {
+      stockContainer.classList.add('hidden');
+      targetUserContainer.classList.remove('hidden');
+      userPcsContainer.classList.remove('hidden');
+      labelStep2.textContent = '2. 인계 사원 검색';
+    }
+
+    // 2. Update summary panels on the right
+    const summaryUserName = document.getElementById('summary-user-name')!;
+    const summaryUserDept = document.getElementById('summary-user-dept')!;
+    if (this.selectedUser) {
+      summaryUserName.textContent = this.selectedUser.user_name;
+      summaryUserDept.textContent = `${this.selectedUser.dept_name} / 사번: ${this.selectedUser.emp_no || '-'}`;
+    } else {
+      summaryUserName.textContent = '선택된 사원 없음';
+      summaryUserDept.textContent = '-';
+    }
+
+    const summaryTargetCard = document.getElementById('summary-target-user-card')!;
+    const summaryTargetUserName = document.getElementById('summary-target-user-name')!;
+    const summaryTargetUserDept = document.getElementById('summary-target-user-dept')!;
+    if (this.currentFlowType === 'move') {
+      summaryTargetCard.classList.remove('hidden');
+      if (this.selectedTargetUser) {
+        summaryTargetUserName.textContent = this.selectedTargetUser.user_name;
+        summaryTargetUserDept.textContent = `${this.selectedTargetUser.dept_name} / 사번: ${this.selectedTargetUser.emp_no || '-'}`;
+      } else {
+        summaryTargetUserName.textContent = '선택된 사원 없음';
+        summaryTargetUserDept.textContent = '-';
+      }
+    } else {
+      summaryTargetCard.classList.add('hidden');
+    }
+
+    const summaryPcCode = document.getElementById('summary-pc-code')!;
+    const summaryPcModel = document.getElementById('summary-pc-model')!;
+    if (this.selectedPC) {
+      summaryPcCode.textContent = this.selectedPC.asset_code;
+      summaryPcModel.textContent = `${this.selectedPC.model_name || '모델명 없음'} (${this.selectedPC.cpu || '-'} / ${this.selectedPC.ram || '-'})`;
+    } else {
+      summaryPcCode.textContent = '선택된 PC 없음';
+      summaryPcModel.textContent = '-';
+    }
+
+    // 3. Render user's active PCs list on the right (For Return & Move)
+    const userPcsList = document.getElementById('user-pcs-list')!;
+    if (this.selectedUser && (this.currentFlowType === 'return' || this.currentFlowType === 'move')) {
+      const allPcs = state.masterData.pc || [];
+      const userPcs = allPcs.filter((p: any) => 
+        (p.emp_no && p.emp_no.toString() === this.selectedUser.emp_no?.toString()) ||
+        (p.user_current && p.user_current === this.selectedUser.user_name)
+      );
+
+      if (userPcs.length === 0) {
+        userPcsList.innerHTML = '<div style="font-size: 12px; color: var(--text-muted); padding: 8px 0;">이 사용자가 소유한 PC 자산이 없습니다.</div>';
+      } else {
+        userPcsList.innerHTML = userPcs.map(p => {
+          const isSelected = this.selectedPC && this.selectedPC.id === p.id;
+          return `
+            <div class="user-pc-item ${isSelected ? 'selected' : ''}" data-id="${p.id}" style="padding: 10px; border: 1px solid ${isSelected ? 'var(--primary-color)' : 'var(--border-color)'}; border-radius: 4px; cursor: pointer; background: ${isSelected ? 'var(--primary-light)' : 'white'}; transition: all 0.2s;">
+              <div style="font-weight: 700; font-size: 13px; color: ${isSelected ? 'var(--primary-color)' : 'var(--text-main)'};">${p.asset_code}</div>
+              <div style="font-size: 11px; color: var(--text-muted); margin-top: 2px;">
+                ${p.model_name || '모델명 없음'} | CPU: ${p.cpu || '-'} | RAM: ${p.ram || '-'}
+              </div>
+            </div>
+          `;
+        }).join('');
+
+        // Bind clicks to list items
+        userPcsList.querySelectorAll('.user-pc-item').forEach(item => {
+          item.addEventListener('click', () => {
+            const pcId = item.getAttribute('data-id');
+            const foundPC = userPcs.find(p => p.id === pcId);
+            if (foundPC) {
+              this.selectedPC = foundPC;
+              this.updateUI();
+            }
+          });
+        });
+      }
+    } else {
+      userPcsList.innerHTML = '';
+    }
+  }
+
+  private renderHTML(): string {
+    const overlayStyle = `
+      position: fixed; top: 0; left: 0; right: 0; bottom: 0;
+      background: rgba(0, 0, 0, 0.4); display: flex; align-items: center; justify-content: center;
+      z-index: 1000; transition: opacity 0.3s;
+    `;
+    const contentStyle = `
+      background: white; border-radius: 12px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
+      overflow: hidden; max-height: 90vh; width: 950px; display: flex; flex-direction: column;
+    `;
+    const labelStyle = 'display: block; font-size: 13px; font-weight: 700; color: var(--text-muted); margin-bottom: 8px;';
+    const inputStyle = 'width: 100%; height: 38px; padding: 0 12px; border: 1px solid var(--border-color); border-radius: 4px; font-size: 13px; outline: none; box-sizing: border-box;';
+    const inputWithIconStyle = 'width: 100%; height: 38px; padding: 0 12px 0 36px; border: 1px solid var(--border-color); border-radius: 4px; font-size: 13px; outline: none; box-sizing: border-box;';
+
+    return `
+      <div id="pc-flow-modal" class="modal-overlay hidden" style="${overlayStyle}">
+        <div class="modal-content" style="${contentStyle}">
+          
+          <div class="modal-header" style="background: var(--primary-color); padding: 16px 24px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-color);">
+            <h2 style="margin: 0; font-size: 18px; font-weight: 800; color: white; display: flex; align-items: center; gap: 8px;">
+              <i data-lucide="refresh-cw"></i> PC 이동/반납 (불출/반납/이동)
+            </h2>
+            <button id="btn-close-pc-flow-modal" class="btn-icon" aria-label="닫기" style="font-size: 28px; color: white; background: none; border: none; cursor: pointer; line-height: 1;">&times;</button>
+          </div>
+
+          <div class="modal-body" style="padding: 24px; overflow-y: auto; display: flex; gap: 24px;">
+            <!-- 왼쪽 영역: 입력 폼 -->
+            <div style="flex: 1.2; display: flex; flex-direction: column; gap: 20px;">
+              
+              <!-- 1. 처리 유형 -->
+              <div>
+                <label style="${labelStyle}">1. 처리 유형 선택</label>
+                <div style="display: flex; gap: 12px;">
+                  <label class="flow-type-label active" style="flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; border: 1px solid var(--border-color); border-radius: 6px; cursor: pointer; font-size: 14px; font-weight: 600;">
+                    <input type="radio" name="flow-type" value="checkout" checked style="display:none;" />
+                    불출 (지급)
+                  </label>
+                  <label class="flow-type-label" style="flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; border: 1px solid var(--border-color); border-radius: 6px; cursor: pointer; font-size: 14px; font-weight: 600;">
+                    <input type="radio" name="flow-type" value="return" style="display:none;" />
+                    입고 (반납)
+                  </label>
+                  <label class="flow-type-label" style="flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; border: 1px solid var(--border-color); border-radius: 6px; cursor: pointer; font-size: 14px; font-weight: 600;">
+                    <input type="radio" name="flow-type" value="move" style="display:none;" />
+                    이동 (이관)
+                  </label>
+                </div>
+              </div>
+
+              <!-- 2. 대상 사용자 검색 -->
+              <div style="position: relative;">
+                <label id="user-search-label" style="${labelStyle}">2. 대상 사원 검색</label>
+                <div style="position: relative; display: flex; align-items: center;">
+                  <input type="text" id="pc-flow-user-search" placeholder="사원명, 부서, 사번 검색..." style="${inputWithIconStyle}" />
+                  <i data-lucide="search" style="position: absolute; left: 10px; width: 16px; height: 16px; color: var(--text-muted);"></i>
+                </div>
+                <div id="pc-flow-user-suggestions" class="hidden" style="position: absolute; top: 100%; left: 0; right: 0; max-height: 200px; overflow-y: auto; background: white; border: 1px solid var(--border-color); border-radius: 4px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); z-index: 1000; margin-top: 4px;"></div>
+              </div>
+
+              <!-- 3. 새 인수자 검색 (이동 시 노출) -->
+              <div id="target-user-search-container" class="hidden" style="position: relative;">
+                <label style="${labelStyle}">새 인수 사원 검색</label>
+                <div style="position: relative; display: flex; align-items: center;">
+                  <input type="text" id="pc-flow-target-user-search" placeholder="사원명, 부서, 사번 검색..." style="${inputWithIconStyle}" />
+                  <i data-lucide="search" style="position: absolute; left: 10px; width: 16px; height: 16px; color: var(--text-muted);"></i>
+                </div>
+                <div id="pc-flow-target-user-suggestions" class="hidden" style="position: absolute; top: 100%; left: 0; right: 0; max-height: 200px; overflow-y: auto; background: white; border: 1px solid var(--border-color); border-radius: 4px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); z-index: 1000; margin-top: 4px;"></div>
+              </div>
+
+              <!-- 4. 재고 PC 검색 (불출 시 노출) -->
+              <div id="stock-pc-search-container" style="position: relative;">
+                <label style="${labelStyle}">3. 불출할 재고 PC 선택</label>
+                <div style="position: relative; display: flex; align-items: center;">
+                  <input type="text" id="pc-flow-stock-search" placeholder="자산코드 또는 모델명 검색..." style="${inputWithIconStyle}" />
+                  <i data-lucide="monitor" style="position: absolute; left: 10px; width: 16px; height: 16px; color: var(--text-muted);"></i>
+                </div>
+                <div id="pc-flow-stock-suggestions" class="hidden" style="position: absolute; top: 100%; left: 0; right: 0; max-height: 200px; overflow-y: auto; background: white; border: 1px solid var(--border-color); border-radius: 4px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); z-index: 1000; margin-top: 4px;"></div>
+              </div>
+
+              <!-- 5. 상세 공통 입력 -->
+              <div style="display: flex; gap: 16px;">
+                <div style="flex: 1;">
+                  <label style="${labelStyle.replace('margin-bottom: 8px;', 'margin-bottom: 6px;')}">처리 일자</label>
+                  <input type="date" id="pc-flow-date" style="${inputStyle}" />
+                </div>
+                <div style="flex: 2;">
+                  <label style="${labelStyle.replace('margin-bottom: 8px;', 'margin-bottom: 6px;')}">상세 사유</label>
+                  <textarea id="pc-flow-details" rows="2" placeholder="미입력 시 기본 문구로 자동 입력됩니다." style="width: 100%; padding: 10px; border: 1px solid var(--border-color); border-radius: 4px; font-family: inherit; font-size: 13px; resize: none; box-sizing: border-box; outline: none;"></textarea>
+                </div>
+              </div>
+
+            </div>
+
+            <!-- 오른쪽 영역: 선택 요약 & 사원 소유 자산 목록 -->
+            <div style="flex: 0.8; border-left: 1px solid var(--border-color); padding-left: 24px; display: flex; flex-direction: column; gap: 16px;">
+              <h3 style="margin: 0; font-size: 14px; font-weight: 800; border-bottom: 1px solid var(--border-color); padding-bottom: 8px;">선택 내역 요약</h3>
+              
+              <!-- 사원 요약 카드 -->
+              <div id="summary-user-card" style="padding: 12px; background: var(--bg-light); border: 1px solid var(--border-color); border-radius: 6px; display: flex; flex-direction: column; gap: 4px;">
+                <div style="font-size: 11px; color: var(--text-muted);">대상 사원</div>
+                <div id="summary-user-name" style="font-weight: 700; font-size: 14px;">선택된 사원 없음</div>
+                <div id="summary-user-dept" style="font-size: 12px; color: var(--text-muted);">-</div>
+              </div>
+
+              <!-- 인수 사원 요약 카드 (이동 전용) -->
+              <div id="summary-target-user-card" class="summary-card hidden" style="padding: 12px; background: #EEF2F6; border: 1px solid var(--border-color); border-radius: 6px; display: flex; flex-direction: column; gap: 4px;">
+                <div style="font-size: 11px; color: var(--text-muted);">새 인수 사원</div>
+                <div id="summary-target-user-name" style="font-weight: 700; font-size: 14px;">선택된 사원 없음</div>
+                <div id="summary-target-user-dept" style="font-size: 12px; color: var(--text-muted);">-</div>
+              </div>
+
+              <!-- 대상 PC 자산 요약 카드 -->
+              <div id="summary-pc-card" style="padding: 12px; background: var(--bg-light); border: 1px solid var(--border-color); border-radius: 6px; display: flex; flex-direction: column; gap: 4px;">
+                <div style="font-size: 11px; color: var(--text-muted);">대상 PC 자산</div>
+                <div id="summary-pc-code" style="font-weight: 700; font-size: 14px; color: var(--primary-color);">선택된 PC 없음</div>
+                <div id="summary-pc-model" style="font-size: 12px; color: var(--text-muted);">-</div>
+              </div>
+
+              <!-- 사용자 보유 PC 목록 선택 (반납/이동 시) -->
+              <div id="user-pcs-container" class="hidden" style="display: flex; flex-direction: column; gap: 8px;">
+                <div style="font-size: 12px; font-weight: 700; color: var(--text-muted);">사원 보유 PC 선택 (클릭하여 매핑)</div>
+                <div id="user-pcs-list" style="display: flex; flex-direction: column; gap: 8px; max-height: 200px; overflow-y: auto;"></div>
+              </div>
+            </div>
+
+          </div>
+
+          <div class="modal-footer" style="padding: 16px 24px; border-top: 1px solid var(--border-color); display: flex; justify-content: flex-end; gap: 12px; background: var(--bg-light);">
+            <button id="btn-cancel-pc-flow-modal" class="btn btn-outline" style="height: 42px;">취소</button>
+            <button id="btn-submit-pc-flow" class="btn btn-primary" style="height: 42px;">이동/반납 처리 완료</button>
+          </div>
+
+        </div>
+      </div>
+      
+      <style>
+        .flow-type-label {
+          transition: all 0.2s;
+          border-color: var(--border-color);
+          background: white;
+          color: var(--text-muted);
+        }
+        .flow-type-label:hover {
+          border-color: var(--primary-color);
+          color: var(--primary-color);
+        }
+        .flow-type-label.active {
+          border-color: var(--primary-color);
+          background: var(--primary-light);
+          color: var(--primary-color);
+        }
+        .suggestion-item:hover {
+          background-color: var(--primary-light) !important;
+        }
+      </style>
+    `;
+  }
+}
+
+export const pcFlowModal = PCFlowModal.getInstance();

src/components/Modal/PartsMasterModal.ts

@@ -0,0 +1,166 @@
+import { state, savePartsMaster, deletePartsMaster } from '../../core/state';
+import { BaseModal } from './BaseModal';
+import { generateOptionsHTML, setFieldValue, getFieldValue } from './ModalUtils';
+import { createIcons, X, Save, Database, Edit2, Plus } from 'lucide';
+import { UI_TEXT } from '../../core/schema';
+
+class PartsMasterModal extends BaseModal {
+  constructor() {
+    super('parts-master', '부품 표준 정보');
+  }
+
+  protected renderFrameHTML(): string {
+    const sharedStyle = 'height: 38px !important; box-sizing: border-box !important; font-size: 13px; margin: 0;';
+    const inputStyle = sharedStyle;
+    const selectStyle = sharedStyle;
+
+    return `
+      <div id="parts-master-asset-modal" class="modal-overlay hidden">
+        <div class="modal-content" style="max-width: 500px; width: 100%;">
+          <div class="modal-header">
+            <h2 id="parts-master-modal-title" style="margin: 0; font-size: 18px; font-weight: 800; color: white;">${this.title}</h2>
+            <button id="btn-close-parts-master-modal" class="btn-icon" aria-label="닫기" style="font-size: 28px; color: white; background: none; border: none; cursor: pointer; line-height: 1;">&times;</button>
+          </div>
+          <div class="modal-body" style="padding: 24px; overflow-y: auto;">
+            <form id="parts-master-asset-form" class="grid-form" style="display: flex; flex-direction: column; gap: 16px;">
+              <input type="hidden" id="parts-master-id" name="id" />
+              
+              <div class="form-group" style="display: flex; flex-direction: column; gap: 6px;">
+                <label style="font-size: 11px; font-weight: 700; color: var(--text-muted);">부품 분류</label>
+                <select id="parts-master-category" name="category" style="${selectStyle}">
+                  <option value="CPU">CPU</option>
+                  <option value="GPU">GPU</option>
+                  <option value="RAM">RAM</option>
+                </select>
+              </div>
+
+              <div class="form-group" style="display: flex; flex-direction: column; gap: 6px;">
+                <label style="font-size: 11px; font-weight: 700; color: var(--text-muted);">부품 표준 명칭</label>
+                <input type="text" id="parts-master-component-name" name="component_name" placeholder="예: Intel Core i7-14700K" required style="${inputStyle} width: 100%;" />
+              </div>
+
+              <div class="form-group" style="display: flex; flex-direction: column; gap: 6px;">
+                <label style="font-size: 11px; font-weight: 700; color: var(--text-muted);">성능 등급</label>
+                <input type="text" id="parts-master-score-tier" name="score_tier" placeholder="예: i7 / S / 최적" required style="${inputStyle} width: 100%;" />
+              </div>
+
+              <div class="form-group" style="display: flex; flex-direction: column; gap: 6px;">
+                <label style="font-size: 11px; font-weight: 700; color: var(--text-muted);">감점 점수 (양수로 입력)</label>
+                <input type="number" id="parts-master-deduction" name="deduction" placeholder="예: 5" required style="${inputStyle} width: 100%;" />
+              </div>
+            </form>
+          </div>
+          <div class="modal-footer" style="display: flex; justify-content: space-between; align-items: center; padding: 16px 24px; background: #f8fafc; border-top: 1px solid var(--border-color);">
+            <button id="btn-delete-parts-master-asset" class="btn btn-outline btn-danger" style="height: 42px;">삭제</button>
+            <div class="footer-actions" style="display: flex; gap: 8px;">
+              <button id="btn-revert-parts-master-edit" class="btn btn-outline hidden" style="height: 42px;">수정 취소</button>
+              <button id="btn-cancel-parts-master-modal" class="btn btn-outline" style="height: 42px;">닫기</button>
+              <button id="btn-save-parts-master-asset" class="btn btn-primary" style="height: 42px;">수정</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  protected initChildLogic(onSave: () => void, closeModals: () => void): void {
+    const saveBtn = document.getElementById('btn-save-parts-master-asset')!;
+    const revertBtn = document.getElementById('btn-revert-parts-master-edit')!;
+    const deleteBtn = document.getElementById('btn-delete-parts-master-asset')!;
+
+    saveBtn.addEventListener('click', async () => {
+      if (!this.currentAsset) return;
+      if (!this.isEditMode) {
+        this.setEditLockMode('edit');
+        this.isEditMode = true;
+        return;
+      }
+
+      const category = (document.getElementById('parts-master-category') as HTMLSelectElement).value;
+      const compName = (document.getElementById('parts-master-component-name') as HTMLInputElement).value.trim();
+      const tier = (document.getElementById('parts-master-score-tier') as HTMLInputElement).value.trim();
+      const deductStr = (document.getElementById('parts-master-deduction') as HTMLInputElement).value;
+
+      if (!compName || !tier || deductStr === '') {
+        alert('모든 필드를 올바르게 입력해 주세요.');
+        return;
+      }
+
+      const updated = {
+        id: this.currentAsset.id || null,
+        category,
+        component_name: compName,
+        score_tier: tier,
+        deduction: parseInt(deductStr, 10)
+      };
+
+      if (await savePartsMaster(updated)) {
+        alert(UI_TEXT.MESSAGES.SAVE_SUCCESS);
+        onSave(); this.close(); closeModals();
+      }
+    });
+
+    revertBtn.addEventListener('click', () => {
+      this.setEditLockMode('view');
+      if (this.currentAsset) this.fillFormData(this.currentAsset);
+    });
+
+    deleteBtn.addEventListener('click', async () => {
+      if (!this.currentAsset || !this.currentAsset.id) return;
+      if (!confirm('정말로 이 부품 마스터 정보를 삭제하시겠습니까?\n삭제 시 기존 등록 PC 중 이 부품명을 사용하는 PC의 자동완성 정합성 체크에 영향을 줄 수 있습니다.')) return;
+
+      if (await deletePartsMaster(this.currentAsset.id)) {
+        alert('성공적으로 삭제되었습니다.');
+        onSave(); this.close(); closeModals();
+      }
+    });
+  }
+
+  protected fillFormData(asset: any): void {
+    setFieldValue('parts-master-id', asset.id || '');
+    setFieldValue('parts-master-category', asset.category || 'CPU');
+    setFieldValue('parts-master-component-name', asset.component_name || '');
+    setFieldValue('parts-master-score-tier', asset.score_tier || '');
+    setFieldValue('parts-master-deduction', asset.deduction !== undefined ? asset.deduction.toString() : '0');
+  }
+
+  protected onAfterOpen(asset: any, mode: string): void {
+    const titleEl = document.getElementById('parts-master-modal-title');
+
+    if (titleEl) {
+      if (mode === 'add') {
+        titleEl.textContent = '신규 부품 마스터 등록';
+      } else {
+        titleEl.textContent = '부품 마스터 상세 편집';
+      }
+    }
+
+    const deleteBtn = document.getElementById('btn-delete-parts-master-asset')!;
+    const saveBtn = document.getElementById('btn-save-parts-master-asset')!;
+    
+    // 추가 모드일 때는 삭제 버튼 숨김
+    deleteBtn.style.display = (mode === 'add') ? 'none' : 'block';
+
+    if (mode === 'add') {
+      this.setEditLockMode('edit');
+      this.isEditMode = true;
+      saveBtn.textContent = '등록';
+      saveBtn.style.display = 'block';
+    } else {
+      this.setEditLockMode('view');
+      this.isEditMode = false;
+      saveBtn.textContent = '수정';
+      saveBtn.style.display = 'block';
+    }
+  }
+}
+
+export const partsMasterModal = new PartsMasterModal();
+
+export function initPartsMasterModal(onSave: () => void, closeModals: () => void) {
+  partsMasterModal.init(onSave, closeModals);
+}
+
+export function openPartsMasterModal(asset: any, mode: 'view' | 'edit' | 'add' = 'view') {
+  partsMasterModal.open(asset, mode);
+}

src/components/Modal/SWModal.ts

@@ -1,7 +1,7 @@
 import { state, saveAsset, deleteAsset } from '../../core/state';
-import { openModal, closeModals } from './BaseModal';
+import { BaseModal } from './BaseModal';
 import { openSwUserModal } from './SWUserModal';
-import { createIcons, History, Plus, X, Save, Edit2, RotateCcw, Calendar } from 'lucide';
+import { createIcons, History, Plus, X, Save, Edit2, RotateCcw, Calendar, Users } from 'lucide';
 import { CORP_LIST } from './SharedData';
 import { ASSET_SCHEMA, UI_TEXT } from '../../core/schema';
 import { API_BASE_URL } from '../../core/utils';
@@ -9,438 +9,363 @@ import {
   generateOptionsHTML, 
   setFieldValue, 
   getFieldValue, 
-  setEditLock,
   applyDateMask
 } from './ModalUtils';
 
-let currentSwAsset: any | null = null;
-let isEditMode = false;
+class SwAssetModal extends BaseModal {
+  constructor() {
+    super('sw', '소프트웨어 상세 정보');
+  }
 
-const SW_MODAL_HTML = `
-  <div id="sw-asset-modal" class="modal-overlay hidden">
-    <div class="modal-content wide">
-      <div class="modal-header">
-        <h2 id="sw-modal-title">소프트웨어 상세 정보</h2>
-        <button id="btn-close-sw-modal" class="btn-icon" aria-label="닫기"><i data-lucide="x"></i></button>
-      </div>
-      <div class="modal-body">
-        <div class="modal-body-split">
-          <div class="modal-form-area">
-            <form id="sw-asset-form" class="grid-form">
-              <input type="hidden" id="sw-asset-id" name="id" />
-              
-              <!-- Group 1: 기본 정보 (Identity) -->
-              <div class="form-section-title">기본 정보 (Identity)</div>
-              <div class="form-group">
-                <label for="sw-asset-type">자산 유형</label>
-                <select id="sw-asset-type" name="asset_type" required>
-                  <option value="내부SW">내부SW</option>
-                  <option value="외부SW">외부SW</option>
-                  <option value="클라우드">클라우드</option>
-                </select>
-              </div>
-              <div class="form-group">
-                <label for="sw-분야">${ASSET_SCHEMA.SW_FIELD.ui}</label>
-                <select id="sw-분야" name="sw_field" required>
-                  <option value="업무공통">업무공통</option>
-                  <option value="개발S/W">개발S/W</option>
-                  <option value="디자인">디자인</option>
-                  <option value="설계S/W">설계S/W</option>
-                </select>
-              </div>
+  protected renderFrameHTML(): string {
+    return `
+      <div id="sw-asset-modal" class="modal-overlay hidden">
+        <div class="modal-content wide">
+          <div class="modal-header">
+            <h2 id="sw-modal-title">${this.title}</h2>
+            <button id="btn-close-sw-modal" class="btn-icon" aria-label="닫기"><i data-lucide="x"></i></button>
+          </div>
+          <div class="modal-body">
+            <div class="modal-body-split">
+              <div class="modal-form-area">
+                <form id="sw-asset-form" class="grid-form">
+                  <input type="hidden" id="sw-asset-id" name="id" />
+                  
+                  <div class="form-section-title">기본 정보 (Identity)</div>
+                  <div class="form-group">
+                    <label>자산 유형</label>
+                    <select id="sw-asset-type" name="asset_type" required>
+                      <option value="내부SW">내부SW</option>
+                      <option value="외부SW">외부SW</option>
+                      <option value="클라우드">클라우드</option>
+                    </select>
+                  </div>
+                  <div class="form-group">
+                    <label>${ASSET_SCHEMA.SW_FIELD.ui}</label>
+                    <select id="sw-분야" name="sw_field" required>
+                      <option value="업무공통">업무공통</option>
+                      <option value="개발S/W">개발S/W</option>
+                      <option value="디자인">디자인</option>
+                      <option value="설계S/W">설계S/W</option>
+                    </select>
+                  </div>
+                  <div class="form-group">
+                    <label>${ASSET_SCHEMA.PURCHASE_CORP.ui}</label>
+                    <select id="sw-법인" name="purchase_corp" required>${generateOptionsHTML(CORP_LIST)}</select>
+                  </div>
+                  <div class="form-group full-width">
+                    <label>${ASSET_SCHEMA.PRODUCT_NAME.ui}</label>
+                    <input type="text" id="sw-제품명" name="product_name" required />
+                  </div>
+                  <div class="form-group cloud-only">
+                    <label>${ASSET_SCHEMA.DEV_OBJ.ui} / 플랫폼</label>
+                    <input type="text" id="sw-플랫폼명" name="dev_objective" placeholder="개발목적 또는 플랫폼명" />
+                  </div>
+                  <div class="form-group">
+                    <label>${ASSET_SCHEMA.CURRENT_DEPT.ui}</label>
+                    <input type="text" id="sw-부서" name="current_dept" />
+                  </div>
+                  <div class="form-group sw-user-tracking">
+                    <label>${ASSET_SCHEMA.CURRENT_USER.ui}</label>
+                    <input type="text" id="sw-user-current" name="user_current" />
+                  </div>
+                  <div class="form-group sw-user-tracking">
+                    <label>${ASSET_SCHEMA.PREV_USER.ui}</label>
+                    <input type="text" id="sw-previous-user" name="previous_user" />
+                  </div>
 
-              <div class="form-group">
-                <label for="sw-법인">${ASSET_SCHEMA.PURCHASE_CORP.ui}</label>
-                <select id="sw-법인" name="purchase_corp" required>${generateOptionsHTML(CORP_LIST)}</select>
-              </div>
-              <div class="form-group full-width">
-                <label for="sw-제품명">${ASSET_SCHEMA.PRODUCT_NAME.ui}</label>
-                <input type="text" id="sw-제품명" name="product_name" required />
-              </div>
-              <div class="form-group cloud-only">
-                <label for="sw-플랫폼명">${ASSET_SCHEMA.DEV_OBJ.ui} / 플랫폼</label>
-                <input type="text" id="sw-플랫폼명" name="dev_objective" placeholder="개발목적 또는 플랫폼명" />
-              </div>
-              <div class="form-group">
-                <label for="sw-부서">${ASSET_SCHEMA.CURRENT_DEPT.ui}</label>
-                <input type="text" id="sw-부서" name="current_dept" />
-              </div>
-              <div class="form-group sw-user-tracking">
-                <label for="sw-user-current">${ASSET_SCHEMA.CURRENT_USER.ui}</label>
-                <input type="text" id="sw-user-current" name="user_current" />
-              </div>
-              <div class="form-group sw-user-tracking">
-                <label for="sw-previous-user">${ASSET_SCHEMA.PREV_USER.ui}</label>
-                <input type="text" id="sw-previous-user" name="previous_user" />
-              </div>
+                  <div class="form-section-title">라이선스 및 계약 정보</div>
+                  <div class="form-group sw-standard-field">
+                    <label>${ASSET_SCHEMA.ASSET_COUNT.ui}</label>
+                    <input type="number" id="sw-수량" name="asset_count" min="0" />
+                  </div>
+                  <div class="form-group sw-standard-field">
+                    <label>${ASSET_SCHEMA.PURCHASE_AMOUNT.ui}</label>
+                    <input type="text" id="sw-금액" name="purchase_amount" oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/\\\\B(?=(\\\\d{3})+(?!\\\\d))/g, ',')" />
+                  </div>
 
-              <!-- Group 2: 라이선스 및 계약 (License/Contract) -->
-              <div class="form-section-title">라이선스 및 계약 정보</div>
-              <div class="form-group sw-standard-field">
-                <label for="sw-수량">${ASSET_SCHEMA.ASSET_COUNT.ui}</label>
-                <input type="number" id="sw-수량" name="asset_count" min="0" />
-              </div>
-              <div class="form-group sw-standard-field">
-                <label for="sw-금액">${ASSET_SCHEMA.PURCHASE_AMOUNT.ui}</label>
-                <input type="text" id="sw-금액" name="purchase_amount" oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/\\B(?=(\\d{3})+(?!\\d))/g, ',')" />
-              </div>
+                  <div class="form-group cloud-only">
+                    <label>${ASSET_SCHEMA.EMAIL_ACCOUNT.ui}</label>
+                    <input type="text" id="sw-계정명" name="email_account" />
+                  </div>
+                  <div class="form-group cloud-only">
+                    <label>${ASSET_SCHEMA.PURCHASE_METHOD.ui}</label>
+                    <select id="sw-결제수단" name="purchase_method">
+                      <option value="">선택안함</option>
+                      <option value="법인카드">법인카드</option>
+                      <option value="인보이스">인보이스</option>
+                    </select>
+                  </div>
 
-              <!-- Group 3: 클라우드 전용 정보 (Cloud Specific) -->
-              <div class="form-group cloud-only">
-                <label for="sw-계정명">${ASSET_SCHEMA.EMAIL_ACCOUNT.ui}</label>
-                <input type="text" id="sw-계정명" name="email_account" />
-              </div>
-              <div class="form-group cloud-only">
-                <label for="sw-결제수단">${ASSET_SCHEMA.PURCHASE_METHOD.ui}</label>
-                <select id="sw-결제수단" name="purchase_method">
-                  <option value="">선택안함</option>
-                  <option value="법인카드">법인카드</option>
-                  <option value="인보이스">인보이스</option>
-                </select>
-              </div>
+                  <div class="form-section-title">관리 및 비고</div>
+                  <div class="form-group sw-standard-field">
+                    <label>${ASSET_SCHEMA.PURCHASE_DATE.ui}</label>
+                    <div style="display:flex; gap:0.25rem; align-items:center; position:relative;">
+                      <input type="text" id="sw-구매일" name="purchase_date" style="flex:1;" />
+                      <button type="button" class="btn-icon" onclick="const p = document.getElementById('sw-구매일-picker'); p.value = document.getElementById('sw-구매일').value; p.showPicker();" style="padding:0.25rem;">
+                        <i data-lucide="calendar" style="width:18px; height:18px; color:var(--primary-color);"></i>
+                      </button>
+                      <input type="date" id="sw-구매일-picker" style="position:absolute; width:0; height:0; opacity:0; pointer-events:none;" onchange="document.getElementById('sw-구매일').value = this.value" tabindex="-1" />
+                    </div>
+                  </div>
+                  <div class="form-group sw-standard-field">
+                    <label>${ASSET_SCHEMA.PURCHASE_VENDOR.ui}</label>
+                    <input type="text" id="sw-납품업체" name="purchase_vendor" />
+                  </div>
+                  <div class="form-group sw-standard-field">
+                    <label>${ASSET_SCHEMA.DEV_MGR.ui}</label>
+                    <input type="text" id="sw-개발담당자" name="dev_manager" />
+                  </div>
+                  <div class="form-group sw-standard-field">
+                    <label>${ASSET_SCHEMA.PLANNING_MGR.ui}</label>
+                    <input type="text" id="sw-기획담당자" name="planning_manager" />
+                  </div>
+                  <div class="form-group sw-standard-field">
+                    <label>${ASSET_SCHEMA.SALES_MGR.ui}</label>
+                    <input type="text" id="sw-영업담당자" name="sales_manager" />
+                  </div>
+                  <div class="form-group sw-standard-field" id="sw-expiry-group">
+                    <label>${ASSET_SCHEMA.EXPIRED_DATE.ui}</label>
+                    <div style="display:flex; gap:0.25rem; align-items:center; position:relative;">
+                      <input type="text" id="sw-만료일" name="expiry_date" style="flex:1;" />
+                      <button type="button" class="btn-icon" onclick="const p = document.getElementById('sw-만료일-picker'); p.value = document.getElementById('sw-만료일').value; p.showPicker();" style="padding:0.25rem;">
+                        <i data-lucide="calendar" style="width:18px; height:18px; color:var(--primary-color);"></i>
+                      </button>
+                      <input type="date" id="sw-만료일-picker" style="position:absolute; width:0; height:0; opacity:0; pointer-events:none;" onchange="document.getElementById('sw-만료일').value = this.value" tabindex="-1" />
+                    </div>
+                  </div>
+                  <div class="form-group full-width">
+                    <label>${ASSET_SCHEMA.MEMO.ui}</label>
+                    <textarea id="sw-비고" name="memo" rows="2"></textarea>
+                  </div>
+                </form>
 
-              <!-- Group 4: 관리 정보 (Management) -->
-              <div class="form-section-title">관리 및 비고</div>
-              <div class="form-group sw-standard-field">
-                <label for="sw-구매일">${ASSET_SCHEMA.PURCHASE_DATE.ui}</label>
-                <div style="display:flex; gap:0.25rem; align-items:center; position:relative;">
-                  <input type="text" id="sw-구매일" name="purchase_date" style="flex:1;" />
-                  <button type="button" class="btn-icon" onclick="const p = document.getElementById('sw-구매일-picker'); p.value = document.getElementById('sw-구매일').value; p.showPicker();" style="padding:0.25rem;">
-                    <i data-lucide="calendar" style="width:18px; height:18px; color:var(--primary-color);"></i>
+                <div id="sw-user-section" class="user-management-section" style="margin-top: 2rem; border-top: 1px solid var(--border-color); padding-top: 1.5rem;">
+                  <button type="button" id="btn-open-sw-user" class="btn btn-outline btn-sm" title="사용자 관리">
+                    <i data-lucide="users" style="width:16px; height:16px; margin-right:4px;"></i> 사용자 관리
                   </button>
-                  <input type="date" id="sw-구매일-picker" style="position:absolute; width:0; height:0; opacity:0; pointer-events:none;" onchange="document.getElementById('sw-구매일').value = this.value" tabindex="-1" />
                 </div>
               </div>
-              <div class="form-group sw-standard-field">
-                <label for="sw-납품업체">${ASSET_SCHEMA.PURCHASE_VENDOR.ui}</label>
-                <input type="text" id="sw-납품업체" name="purchase_vendor" />
-              </div>
-              <div class="form-group sw-standard-field">
-                <label for="sw-개발담당자">${ASSET_SCHEMA.DEV_MGR.ui}</label>
-                <input type="text" id="sw-개발담당자" name="dev_manager" />
-              </div>
-              <div class="form-group sw-standard-field">
-                <label for="sw-기획담당자">${ASSET_SCHEMA.PLANNING_MGR.ui}</label>
-                <input type="text" id="sw-기획담당자" name="planning_manager" />
-              </div>
-              <div class="form-group sw-standard-field">
-                <label for="sw-영업담당자">${ASSET_SCHEMA.SALES_MGR.ui}</label>
-                <input type="text" id="sw-영업담당자" name="sales_manager" />
-              </div>
-              <div class="form-group sw-standard-field" id="sw-expiry-group">
-                <label for="sw-만료일">${ASSET_SCHEMA.EXPIRED_DATE.ui}</label>
-                <div style="display:flex; gap:0.25rem; align-items:center; position:relative;">
-                  <input type="text" id="sw-만료일" name="expiry_date" style="flex:1;" />
-                  <button type="button" class="btn-icon" onclick="const p = document.getElementById('sw-만료일-picker'); p.value = document.getElementById('sw-만료일').value; p.showPicker();" style="padding:0.25rem;">
-                    <i data-lucide="calendar" style="width:18px; height:18px; color:var(--primary-color);"></i>
+
+              <div class="modal-history-area">
+                <div class="history-header" style="display:flex; justify-content:space-between; align-items:center;">
+                  <h3><i data-lucide="history" style="width:16px; height:16px;"></i> 업데이트 내역</h3>
+                  <button type="button" id="btn-open-sw-update" class="btn btn-outline btn-sm">
+                    계약 업데이트 <i data-lucide="refresh-ccw" style="width:14px; height:14px;"></i>
                   </button>
-                  <input type="date" id="sw-만료일-picker" style="position:absolute; width:0; height:0; opacity:0; pointer-events:none;" onchange="document.getElementById('sw-만료일').value = this.value" tabindex="-1" />
+                </div>
+                <div id="sw-history-list" class="history-timeline"></div>
+              </div>
+            </div>
+          </div>
+          <div class="modal-footer">
+            <button id="btn-delete-sw-asset" class="btn btn-outline btn-danger">삭제</button>
+            <div class="footer-actions">
+              <button id="btn-revert-sw-edit" class="btn btn-outline hidden">수정 취소</button>
+              <button id="btn-cancel-sw-modal" class="btn btn-outline">닫기</button>
+              <button id="btn-save-sw-asset" class="btn btn-primary">수정</button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 계약 업데이트 서브 모달 -->
+      <div id="sw-update-modal" class="modal-overlay hidden" style="z-index: 1100;">
+        <div class="modal-content" style="max-width: 500px;">
+          <div class="modal-header">
+            <h2>계약 업데이트 반영</h2>
+            <button id="btn-close-sw-update" class="btn-icon"><i data-lucide="x"></i></button>
+          </div>
+          <div class="modal-body">
+            <div class="grid-form" style="grid-template-columns: 1fr;">
+              <div class="form-group">
+                <label>업데이트 일자</label>
+                <input type="date" id="sw-update-date" />
+              </div>
+              <div class="form-group sub-sw-update">
+                <label>새로운 계약 기간</label>
+                <div style="display: flex; align-items: center; gap: 0.5rem;">
+                  <input type="text" id="sw-update-start" placeholder="YYYY-MM-DD" style="flex: 1;" />
+                  <span>~</span>
+                  <input type="text" id="sw-update-end" placeholder="YYYY-MM-DD" style="flex: 1;" />
                 </div>
               </div>
-              <div class="form-group full-width">
-                <label for="sw-비고">${ASSET_SCHEMA.MEMO.ui}</label>
-                <textarea id="sw-비고" name="memo" rows="2"></textarea>
+              <div class="form-group">
+                <label>발생 비용</label>
+                <input type="text" id="sw-update-cost" oninput="this.value = this.value.replace(/[^0-9]/g, '') ? Number(this.value.replace(/[^0-9]/g, '')).toLocaleString() : ''" placeholder="ex) 500,000" />
+              </div>
+              <div class="form-group">
+                <label>상세 내용 (메모)</label>
+                <input type="text" id="sw-update-note" placeholder="예: 25년도 구독 연장 결제 완료" />
               </div>
-            </form>
-
-            <div id="sw-user-section" class="user-management-section" style="margin-top: 2rem; border-top: 1px solid var(--border-color); padding-top: 1.5rem;">
-              <button type="button" id="btn-open-sw-user" class="btn btn-outline btn-sm" title="사용자 관리">
-                <i data-lucide="users" style="width:16px; height:16px; margin-right:4px;"></i> 사용자 관리
-              </button>
             </div>
           </div>
-
-          <div class="modal-history-area">
-            <div class="history-header" style="display:flex; justify-content:space-between; align-items:center;">
-              <h3><i data-lucide="history" style="width:16px; height:16px;"></i> 업데이트 내역</h3>
-              <button type="button" id="btn-open-sw-update" class="btn btn-outline btn-sm">
-                계약 업데이트 <i data-lucide="refresh-ccw" style="width:14px; height:14px;"></i>
-              </button>
-            </div>
-            <div id="sw-history-list" class="history-timeline"></div>
-          </div>
-        </div>
-      </div>
-      <div class="modal-footer">
-        <button id="btn-delete-sw-asset" class="btn btn-outline btn-danger">삭제</button>
-        <div class="footer-actions">
-          <button id="btn-revert-sw-edit" class="btn btn-outline hidden">수정 취소</button>
-          <button id="btn-cancel-sw-modal" class="btn btn-outline">닫기</button>
-          <button id="btn-save-sw-asset" class="btn btn-primary">수정</button>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <!-- 계약/유지보수 기간 갱신 및 업데이트 모달 -->
-  <div id="sw-update-modal" class="modal-overlay hidden" style="z-index: 1100;">
-    <div class="modal-content" style="max-width: 500px;">
-      <div class="modal-header">
-        <h2>계약 업데이트 반영</h2>
-        <button id="btn-close-sw-update" class="btn-icon"><i data-lucide="x"></i></button>
-      </div>
-      <div class="modal-body">
-        <div class="grid-form" style="grid-template-columns: 1fr;">
-          <div class="form-group">
-            <label>업데이트 일자</label>
-            <input type="date" id="sw-update-date" />
-          </div>
-          <div class="form-group sub-sw-update">
-            <label>새로운 계약 기간</label>
-            <div style="display: flex; align-items: center; gap: 0.5rem;">
-              <input type="text" id="sw-update-start" placeholder="YYYY-MM-DD" style="flex: 1;" />
-              <span>~</span>
-              <input type="text" id="sw-update-end" placeholder="YYYY-MM-DD" style="flex: 1;" />
+          <div class="modal-footer">
+            <div></div>
+            <div class="footer-actions">
+              <button id="btn-cancel-sw-update" class="btn btn-outline">취소</button>
+              <button id="btn-save-sw-update" class="btn btn-primary">반영하기</button>
             </div>
           </div>
-          <div class="form-group">
-            <label>발생 비용</label>
-            <input type="text" id="sw-update-cost" oninput="this.value = this.value.replace(/[^0-9]/g, '') ? Number(this.value.replace(/[^0-9]/g, '')).toLocaleString() : ''" placeholder="ex) 500,000" />
-          </div>
-          <div class="form-group">
-            <label>상세 내용 (메모)</label>
-            <input type="text" id="sw-update-note" placeholder="예: 25년도 구독 연장 결제 완료" />
-          </div>
         </div>
       </div>
-      <div class="modal-footer">
-        <div></div>
-        <div class="footer-actions">
-          <button id="btn-cancel-sw-update" class="btn btn-outline">취소</button>
-          <button id="btn-save-sw-update" class="btn btn-primary">반영하기</button>
-        </div>
-      </div>
-    </div>
-  </div>
-`;
+    `;
+  }
 
-function applySwTypeUI(type: string) {
-  const cloudFields = document.querySelectorAll('.cloud-only');
-  const swFields = document.querySelectorAll('.sw-standard-field');
-  const userSection = document.getElementById('sw-user-section');
-  const expiryGroup = document.getElementById('sw-expiry-group');
-  const userTracking = document.querySelectorAll('.sw-user-tracking');
+  protected initChildLogic(onSave: () => void, closeModals: () => void): void {
+    const saveBtn = document.getElementById('btn-save-sw-asset')!;
+    const revertBtn = document.getElementById('btn-revert-sw-edit')!;
+    const deleteBtn = document.getElementById('btn-delete-sw-asset')!;
+    const typeSelect = document.getElementById('sw-asset-type') as HTMLSelectElement;
+    const userAssignBtn = document.getElementById('btn-open-sw-user')!;
+    const btnOpenUpdate = document.getElementById('btn-open-sw-update')!;
 
-  if (type === '클라우드') {
-    cloudFields.forEach(el => (el as HTMLElement).style.display = 'flex');
-    swFields.forEach(el => (el as HTMLElement).style.display = 'none');
-    if (userSection) userSection.style.display = 'none';
-    userTracking.forEach(el => (el as HTMLElement).style.display = 'none');
-  } else {
-    cloudFields.forEach(el => (el as HTMLElement).style.display = 'none');
-    swFields.forEach(el => (el as HTMLElement).style.display = 'flex');
-    if (userSection) userSection.style.display = 'block';
+    typeSelect?.addEventListener('change', () => this.applySwTypeUI(typeSelect.value));
 
-    if (type === '외부SW' || type === '내부SW') {
-      if (expiryGroup) expiryGroup.style.display = 'flex';
+    ['sw-구매일', 'sw-시작일', 'sw-만료일', 'sw-update-start', 'sw-update-end'].forEach(id => {
+      const el = document.getElementById(id) as HTMLInputElement;
+      if (el) applyDateMask(el);
+    });
+
+    userAssignBtn.addEventListener('click', () => {
+      if (this.currentAsset) openSwUserModal(this.currentAsset);
+    });
+
+    // 업데이트 모달 로직
+    const subModal = document.getElementById('sw-update-modal')!;
+    const closeUpdate = () => subModal.classList.add('hidden');
+    document.getElementById('btn-close-sw-update')?.addEventListener('click', closeUpdate);
+    document.getElementById('btn-cancel-sw-update')?.addEventListener('click', closeUpdate);
+
+    btnOpenUpdate?.addEventListener('click', (e) => {
+      e.preventDefault();
+      if (!this.isEditMode) { alert('자산을 수정 모드로 변경한 후 업데이트를 진행해주세요.'); return; }
+      subModal.classList.remove('hidden');
+    });
+
+    document.getElementById('btn-save-sw-update')?.addEventListener('click', async (e) => {
+      e.preventDefault();
+      const date = (document.getElementById('sw-update-date') as HTMLInputElement).value;
+      const start = (document.getElementById('sw-update-start') as HTMLInputElement).value;
+      const end = (document.getElementById('sw-update-end') as HTMLInputElement).value;
+      const cost = (document.getElementById('sw-update-cost') as HTMLInputElement).value;
+      const note = (document.getElementById('sw-update-note') as HTMLInputElement).value;
+
+      if (start) setFieldValue('sw-시작일', start);
+      if (end) setFieldValue('sw-만료일', end);
+      if (cost) setFieldValue('sw-금액', cost);
+
+      const log = { assetId: this.currentAsset.id, date, details: `[계약갱신] ${note} (${start} ~ ${end}, 비용: ${cost})`, user: '관리자' };
+      await fetch(`${API_BASE_URL}/api/asset/history/batch`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify([...state.masterData.logs, log])
+      });
+
+      closeUpdate(); onSave();
+    });
+
+    revertBtn.addEventListener('click', () => {
+      this.setEditLockMode('view');
+      if (this.currentAsset) this.fillFormData(this.currentAsset);
+    });
+
+    saveBtn.addEventListener('click', async () => {
+      if (!this.currentAsset) return;
+      if (!this.isEditMode) { this.setEditLockMode('edit'); this.isEditMode = true; return; }
+
+      const type = getFieldValue('sw-asset-type');
+      const formData = new FormData(this.formEl!);
+      const updated = { ...this.currentAsset };
+      formData.forEach((value, key) => { updated[key] = value; });
       
-      // 외부SW에만 현 사용자/직전 사용자 표시 (내부SW는 user tracking 제외 요청됨)
-      userTracking.forEach(el => (el as HTMLElement).style.display = (type === '외부SW') ? 'flex' : 'none');
+      let categoryKey = (type === '내부SW') ? 'swInternal' : (type === '클라우드' ? 'cloud' : 'swExternal');
+      if (await saveAsset(categoryKey, updated)) { onSave(); this.close(); closeModals(); }
+    });
+
+    deleteBtn.addEventListener('click', async () => {
+      if (!this.currentAsset || !confirm(UI_TEXT.MESSAGES.CONFIRM_DELETE)) return;
+      const type = this.currentAsset.asset_type || this.currentAsset.type;
+      let categoryKey = (type === '내부SW') ? 'swInternal' : (type === '클라우드' ? 'cloud' : 'swExternal');
+      if (await deleteAsset(categoryKey, this.currentAsset.id)) {
+        alert('성공적으로 삭제되었습니다.'); onSave(); this.close(); closeModals();
+      }
+    });
+
+    createIcons({ icons: { History, Plus, Save, Calendar, Users, RotateCcw } });
+  }
+
+  protected fillFormData(asset: any): void {
+    setFieldValue('sw-asset-id', asset.id);
+    setFieldValue('sw-asset-type', asset.asset_type || asset.type);
+    setFieldValue('sw-분야', asset.sw_field || '');
+    setFieldValue('sw-법인', asset.purchase_corp || '');
+    setFieldValue('sw-부서', asset.current_dept || '');
+    setFieldValue('sw-user-current', asset.user_current || '');
+    setFieldValue('sw-previous-user', asset.previous_user || '');
+    setFieldValue('sw-제품명', asset.product_name || '');
+    setFieldValue('sw-수량', asset.asset_count || '');
+    setFieldValue('sw-금액', asset.purchase_amount || '');
+    setFieldValue('sw-구매일', asset.purchase_date || '');
+    setFieldValue('sw-납품업체', asset.purchase_vendor || '');
+    setFieldValue('sw-개발담당자', asset.dev_manager || '');
+    setFieldValue('sw-기획담당자', asset.planning_manager || '');
+    setFieldValue('sw-영업담당자', asset.sales_manager || '');
+    setFieldValue('sw-비고', asset.memo || '');
+
+    if (asset.type === '클라우드' || asset.asset_type === '클라우드') {
+      setFieldValue('sw-플랫폼명', asset.dev_objective || '');
+      setFieldValue('sw-계정명', asset.email_account || '');
+      setFieldValue('sw-결제수단', asset.purchase_method || '');
+    } else {
+      setFieldValue('sw-만료일', asset.expiry_date || '');
+    }
+
+    this.renderHistory(asset.id);
+  }
+
+  protected onAfterOpen(asset: any, mode: string): void {
+    this.applySwTypeUI(asset.asset_type || asset.type);
+  }
+
+  private applySwTypeUI(type: string) {
+    const cloudFields = document.querySelectorAll('.cloud-only');
+    const swFields = document.querySelectorAll('.sw-standard-field');
+    const userSection = document.getElementById('sw-user-section');
+    const expiryGroup = document.getElementById('sw-expiry-group');
+    const userTracking = document.querySelectorAll('.sw-user-tracking');
+
+    if (type === '클라우드') {
+      cloudFields.forEach(el => (el as HTMLElement).style.display = 'flex');
+      swFields.forEach(el => (el as HTMLElement).style.display = 'none');
+      if (userSection) userSection.style.display = 'none';
+      userTracking.forEach(el => (el as HTMLElement).style.display = 'none');
+    } else {
+      cloudFields.forEach(el => (el as HTMLElement).style.display = 'none');
+      swFields.forEach(el => (el as HTMLElement).style.display = 'flex');
+      if (userSection) userSection.style.display = 'block';
+      if (type === '외부SW' || type === '내부SW') {
+        if (expiryGroup) expiryGroup.style.display = 'flex';
+        userTracking.forEach(el => (el as HTMLElement).style.display = (type === '외부SW') ? 'flex' : 'none');
+      }
     }
   }
+
+  private renderHistory(swId: string) {
+    const container = document.getElementById('sw-history-list');
+    if (!container) return;
+    const logs = (state.masterData.logs || []).filter(l => l.assetId === swId);
+    if (logs.length === 0) { container.innerHTML = '<div class="empty-history">수정 이력이 없습니다.</div>'; return; }
+    container.innerHTML = logs.map(l => `<div class=\"history-item\"><div class=\"history-date\">${l.date}</div><div class=\"history-user\">${l.user}</div><div class=\"history-details\">${l.details}</div></div>`).join('');
+  }
 }
 
-function fillSwFormData(asset: any) {
-  setFieldValue('sw-asset-id', asset.id);
-  setFieldValue('sw-asset-type', asset.asset_type || asset.type);
-  setFieldValue('sw-분야', asset.sw_field || '');
-  setFieldValue('sw-법인', asset.purchase_corp || '');
+export const swModal = new SwAssetModal();
 
-  setFieldValue('sw-부서', asset.current_dept || '');
-  setFieldValue('sw-user-current', asset.user_current || '');
-  setFieldValue('sw-previous-user', asset.previous_user || '');
-  setFieldValue('sw-previous_dept', asset.previous_dept || '');
-  setFieldValue('sw-제품명', asset.product_name || '');
-  setFieldValue('sw-수량', asset.asset_count || '');
-  setFieldValue('sw-금액', asset.purchase_amount || '');
-  setFieldValue('sw-구매일', asset.purchase_date || '');
-  setFieldValue('sw-시작일', asset.start_date || '');
-  setFieldValue('sw-납품업체', asset.purchase_vendor || '');
-  setFieldValue('sw-개발담당자', asset.dev_manager || '');
-  setFieldValue('sw-기획담당자', asset.planning_manager || '');
-  setFieldValue('sw-영업담당자', asset.sales_manager || '');
-  setFieldValue('sw-비고', asset.memo || '');
-
-  if (asset.type === '클라우드' || asset.asset_type === '클라우드') {
-    setFieldValue('sw-플랫폼명', asset.dev_objective || '');
-    setFieldValue('sw-계정명', asset.email_account || '');
-    setFieldValue('sw-결제수단', asset.purchase_method || '');
-  } else {
-    setFieldValue('sw-만료일', asset.expiry_date || '');
-  }
-
-  renderSwHistory(asset.id);
-}
-
-function renderSwHistory(swId: string) {
-  const container = document.getElementById('sw-history-list');
-  if (!container) return;
-  const logs = (state.masterData.logs || []).filter(l => l.assetId === swId);
-  if (logs.length === 0) {
-    container.innerHTML = '<div class="empty-history">수정 이력이 없습니다.</div>';
-    return;
-  }
-  container.innerHTML = logs.map(l => `
-    <div class="history-item">
-      <div class="history-date">${l.date}</div>
-      <div class="history-user">${l.user}</div>
-      <div class="history-details">${l.details}</div>
-    </div>
-  `).join('');
+export function initSwModal(onSave: () => void, closeModals: () => void) {
+  swModal.init(onSave, closeModals);
 }
 
 export function openSwModal(asset: any, mode: 'view' | 'add' | 'edit' = 'view') {
-  currentSwAsset = asset;
-  const modal = document.getElementById('sw-asset-modal')!;
-  
-  setEditLock('sw-asset-form', mode, {
-    saveBtnId: 'btn-save-sw-asset',
-    revertBtnId: 'btn-revert-sw-edit'
-  });
-
-  isEditMode = (mode === 'add' || mode === 'edit');
-  
-  fillSwFormData(asset);
-  applySwTypeUI(asset.asset_type || asset.type);
-
-  modal.classList.remove('hidden');
-  createIcons({ icons: { X, History, Plus } });
-}
-
-export function initSwModal(onSave: () => void, closeModals: () => void) {
-  if (!document.getElementById('sw-asset-modal')) {
-    document.body.insertAdjacentHTML('beforeend', SW_MODAL_HTML);
-  }
-
-  const form = document.getElementById('sw-asset-form') as HTMLFormElement;
-  const saveBtn = document.getElementById('btn-save-sw-asset')!;
-  const revertBtn = document.getElementById('btn-revert-sw-edit')!;
-  const deleteBtn = document.getElementById('btn-delete-sw-asset')!;
-  const userAssignBtn = document.getElementById('btn-open-sw-user')!;
-  const btnOpenUpdate = document.getElementById('btn-open-sw-update')!;
-  const typeSelect = document.getElementById('sw-asset-type') as HTMLSelectElement;
-
-  typeSelect?.addEventListener('change', () => {
-    applySwTypeUI(typeSelect.value);
-  });
-
-  ['sw-구매일', 'sw-시작일', 'sw-만료일', 'sw-update-start', 'sw-update-end'].forEach(id => {
-    applyDateMask(document.getElementById(id) as HTMLInputElement);
-  });
-
-  createIcons({ icons: { Calendar } });
-
-  const closeModalAction = () => { closeModals(); isEditMode = false; };
-  document.getElementById('btn-close-sw-modal')?.addEventListener('click', closeModalAction);
-  document.getElementById('btn-cancel-sw-modal')?.addEventListener('click', closeModalAction);
-
-  revertBtn.addEventListener('click', () => {
-    setEditLock('sw-asset-form', 'view', {
-      saveBtnId: 'btn-save-sw-asset',
-      revertBtnId: 'btn-revert-sw-edit'
-    });
-    isEditMode = false;
-    if (currentSwAsset) fillSwFormData(currentSwAsset);
-  });
-
-  saveBtn.addEventListener('click', async () => {
-    if (!currentSwAsset) return;
-    if (!isEditMode) {
-      setEditLock('sw-asset-form', 'edit', {
-        saveBtnId: 'btn-save-sw-asset',
-        revertBtnId: 'btn-revert-sw-edit'
-      });
-      isEditMode = true;
-      return;
-    }
-
-    const type = getFieldValue('sw-asset-type');
-    const formData = new FormData(form);
-    const updated: any = { ...currentSwAsset };
-    formData.forEach((value, key) => {
-        updated[key] = value;
-    });
-    
-    // Mapping for generic saveAsset
-    let categoryKey = 'swExternal';
-    if (type === '내부SW') categoryKey = 'swInternal';
-    else if (type === '클라우드') categoryKey = 'cloud';
-
-    const success = await saveAsset(categoryKey, updated);
-    if (success) {
-        onSave();
-        closeModalAction();
-    }
-  });
-
-  deleteBtn.addEventListener('click', async () => {
-    if (!currentSwAsset) return;
-    if (!confirm(UI_TEXT.MESSAGES.CONFIRM_DELETE)) return;
-
-    const type = currentSwAsset.asset_type || currentSwAsset.type;
-    let categoryKey = 'swExternal';
-    if (type === '내부SW') categoryKey = 'swInternal';
-    else if (type === '클라우드') categoryKey = 'cloud';
-
-    const success = await deleteAsset(categoryKey, currentSwAsset.id);
-    if (success) {
-      alert('성공적으로 삭제되었습니다.');
-      onSave(); // Refresh list
-      closeModalAction();
-    }
-  });
-
-  userAssignBtn.addEventListener('click', () => {
-    if (currentSwAsset) openSwUserModal(currentSwAsset);
-  });
-
-  // 자산 업데이트(계약 갱신) 모달 로직
-  const subModal = document.getElementById('sw-update-modal')!;
-  const btnCloseUpdate = document.getElementById('btn-close-sw-update')!;
-  const btnCancelUpdate = document.getElementById('btn-cancel-sw-update')!;
-  const btnSaveUpdate = document.getElementById('btn-save-sw-update')!;
-
-  const closeUpdateModal = () => subModal.classList.add('hidden');
-  btnCloseUpdate?.addEventListener('click', closeUpdateModal);
-  btnCancelUpdate?.addEventListener('click', closeUpdateModal);
-
-  btnOpenUpdate?.addEventListener('click', (e) => {
-    e.preventDefault();
-    if (!isEditMode) {
-      alert('자산을 수정 모드로 변경한 후 업데이트를 진행해주세요.');
-      return;
-    }
-    subModal.classList.remove('hidden');
-  });
-
-  btnSaveUpdate?.addEventListener('click', async (e) => {
-    e.preventDefault();
-    const date = (document.getElementById('sw-update-date') as HTMLInputElement).value;
-    const start = (document.getElementById('sw-update-start') as HTMLInputElement).value;
-    const end = (document.getElementById('sw-update-end') as HTMLInputElement).value;
-    const cost = (document.getElementById('sw-update-cost') as HTMLInputElement).value;
-    const note = (document.getElementById('sw-update-note') as HTMLInputElement).value;
-
-    if (start) setFieldValue('sw-시작일', start);
-    if (end) setFieldValue('sw-만료일', end);
-    if (cost) setFieldValue('sw-금액', cost);
-
-    // Save as log
-    const log = {
-        assetId: currentSwAsset.id,
-        date,
-        details: `[계약갱신] ${note} (${start} ~ ${end}, 비용: ${cost})`,
-        user: '관리자'
-    };
-    
-    // Call generic API for logs (could be added to state.ts)
-    await fetch(`${API_BASE_URL}/api/asset/history/batch`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify([...state.masterData.logs, log])
-    });
-
-    closeUpdateModal();
-    onSave();
-  });
+  swModal.open(asset, mode);
 }

src/components/Modal/SWUserModal.ts

@@ -1,280 +1,267 @@
 import { state } from '../../core/state';
-import { SoftwareAsset, SWUser } from '../../core/excelHandler';
-import { openModal } from './BaseModal';
-import { createIcons, Edit2, X, Paperclip, Calendar } from 'lucide';
-import { CORP_LIST, ORG_LIST } from './SharedData';
+import { BaseModal } from './BaseModal';
+import { createIcons, Edit2, X, Paperclip, Calendar, Plus } from 'lucide';
+import { ORG_LIST } from './SharedData';
 import { generateOptionsHTML, setFieldValue, getFieldValue, applyDateMask } from './ModalUtils';
 
-let currentSwUserAsset: SoftwareAsset | null = null;
-let tempSwUsers: any[] = [];
+class SwUserModal extends BaseModal {
+  private tempSwUsers: any[] = [];
 
-const SW_USER_MODAL_HTML = `
-  <div id="sw-user-modal" class="modal-overlay hidden">
-    <div class="modal-content wide">
-      <div class="modal-header">
-        <h2 id="sw-user-title">소프트웨어 사용자 관리</h2>
-        <button id="btn-close-sw-user-modal" class="btn-icon"><i data-lucide="x"></i></button>
-      </div>
-      <div class="modal-body">
-        <div class="sw-info-summary" id="sw-user-sw-info"></div>
-        
-        <div class="user-list-toolbar" style="display:flex; justify-content:space-between; margin-bottom:1rem; align-items:center;">
-          <h3 style="font-size:1rem; font-weight:600;">할당된 사용자 목록</h3>
-          <button type="button" id="btn-open-add-user" class="btn btn-primary btn-sm"><i data-lucide="plus"></i> 사용자 추가</button>
-        </div>
-
-        <div class="table-container">
-          <table>
-            <thead>
-              <tr>
-                <th>조직</th>
-                <th>부서</th>
-                <th>직위</th>
-                <th>이름</th>
-                <th>사용기간</th>
-                <th>신청서</th>
-                <th>관리</th>
-              </tr>
-            </thead>
-            <tbody id="sw-user-table-body"></tbody>
-          </table>
-        </div>
-      </div>
-      <div class="modal-footer">
-        <button id="btn-cancel-sw-user" class="btn btn-outline">취소</button>
-        <button id="btn-save-sw-user" class="btn btn-primary">저장</button>
-      </div>
-    </div>
-  </div>
-
-  <!-- 사용자 추가/수정 서브 모달 -->
-  <div id="sw-user-edit-modal" class="modal-overlay hidden" style="z-index:1100;">
-    <div class="modal-content" style="width:400px;">
-      <div class="modal-header">
-        <h3 id="sw-user-edit-title">사용자 정보</h3>
-        <button id="btn-close-user-edit" class="btn-icon"><i data-lucide="x"></i></button>
-      </div>
-      <div class="modal-body">
-        <form id="sw-user-edit-form" class="grid-form" style="grid-template-columns: 1fr;">
-          <input type="hidden" id="edit-user-index" value="-1" />
-          <div class="form-group">
-            <label>조직</label>
-            <select id="new-user-조직">${generateOptionsHTML(ORG_LIST)}</select>
-          </div>
-          <div class="form-group">
-            <label>부서</label>
-            <input type="text" id="new-user-부서" />
-          </div>
-          <div class="form-group">
-            <label>직위</label>
-            <input type="text" id="new-user-직위" />
-          </div>
-          <div class="form-group">
-            <label>이름</label>
-            <input type="text" id="new-user-이름" required />
-          </div>
-          <div class="form-group">
-            <label>사용 시작일</label>
-            <div style="display:flex; gap:0.25rem; align-items:center; position:relative;">
-              <input type="text" id="new-user-시작일" style="flex:1;" />
-              <button type="button" class="btn-icon" onclick="const p = document.getElementById('new-user-시작일-picker'); p.value = document.getElementById('new-user-시작일').value; p.showPicker();" style="padding:0.25rem;">
-                <i data-lucide="calendar" style="width:18px; height:18px; color:var(--primary-color);"></i>
-              </button>
-              <input type="date" id="new-user-시작일-picker" style="position:absolute; width:0; height:0; opacity:0; pointer-events:none;" onchange="document.getElementById('new-user-시작일').value = this.value" tabindex="-1" />
-            </div>
-          </div>
-          <div class="form-group">
-            <label>사용 종료일</label>
-            <div style="display:flex; gap:0.25rem; align-items:center; position:relative;">
-              <input type="text" id="new-user-종료일" style="flex:1;" />
-              <button type="button" class="btn-icon" onclick="const p = document.getElementById('new-user-종료일-picker'); p.value = document.getElementById('new-user-종료일').value; p.showPicker();" style="padding:0.25rem;">
-                <i data-lucide="calendar" style="width:18px; height:18px; color:var(--primary-color);"></i>
-              </button>
-              <input type="date" id="new-user-종료일-picker" style="position:absolute; width:0; height:0; opacity:0; pointer-events:none;" onchange="document.getElementById('new-user-종료일').value = this.value" tabindex="-1" />
-            </div>
-          </div>
-          <div class="form-group">
-            <label>신청서 (증빙)</label>
-            <input type="file" id="new-user-신청서" />
-          </div>
-        </form>
-      </div>
-      <div class="modal-footer">
-        <button id="btn-close-user-sub" class="btn btn-outline">취소</button>
-        <button id="btn-confirm-user-edit" class="btn btn-primary">확인</button>
-      </div>
-    </div>
-  </div>
-`;
-
-export function openSwUserModal(asset: SoftwareAsset) {
-  currentSwUserAsset = asset;
-  const modal = document.getElementById('sw-user-modal')!;
-  
-  const swInfo = document.getElementById('sw-user-sw-info')!;
-  swInfo.innerHTML = `
-    <div style="background:var(--bg-light); padding:1rem; border-radius:6px; margin-bottom:1.5rem;">
-      <div style="font-size:0.8rem; color:var(--text-muted); margin-bottom:0.25rem;">${asset.법인}</div>
-      <div style="font-size:1.1rem; font-weight:700; color:var(--primary-color);">${asset.제품명}</div>
-    </div>
-  `;
-
-  // 기존 사용자 데이터 복사 (원본 보호를 위해 temp 사용)
-  const existingMapping = state.masterData.swUsers.find(u => u.sw_id === asset.id);
-  tempSwUsers = existingMapping ? (existingMapping.userData || []).map((u: any) => ({
-    조직: u[0], 부서: u[1], 직위: u[2], 이름: u[3], 사용기간: u[4], 신청서명: u[5]
-  })) : [];
-  
-  renderUserList();
-  modal.classList.remove('hidden');
-  createIcons({ icons: { Edit2, X, Paperclip } });
-}
-
-function renderUserList() {
-  const tbody = document.getElementById('sw-user-table-body')!;
-  tbody.innerHTML = '';
-  
-  if (tempSwUsers.length === 0) {
-    tbody.innerHTML = '<tr><td colspan="6" style="text-align:center; padding:2rem; color:var(--text-muted);">할당된 사용자가 없습니다.</td></tr>';
-    return;
+  constructor() {
+    super('sw-user', '소프트웨어 사용자 관리');
   }
 
-  tempSwUsers.forEach((user, idx) => {
-    const tr = document.createElement('tr');
-    tr.innerHTML = `
-      <td>${user.조직 || ''}</td>
-      <td>${user.부서 || ''}</td>
-      <td>${user.직위 || ''}</td>
-      <td>${user.이름 || ''}</td>
-      <td>${user.사용기간 || ''}</td>
-      <td style="text-align:center;">${user.신청서명 ? '<i data-lucide="paperclip" class="text-primary"></i>' : '-'}</td>
-      <td>
-        <div style="display:flex; gap:0.5rem;">
-          <button class="btn btn-outline btn-sm btn-edit-user" data-idx="${idx}">수정</button>
-          <button class="btn btn-outline btn-sm btn-danger btn-del-user" data-idx="${idx}">삭제</button>
+  protected renderFrameHTML(): string {
+    return `
+      <div id="sw-user-asset-modal" class="modal-overlay hidden">
+        <div class="modal-content wide">
+          <div class="modal-header">
+            <h2 id="sw-user-title">${this.title}</h2>
+            <button id="btn-close-sw-user-modal" class="btn-icon"><i data-lucide="x"></i></button>
+          </div>
+          <div class="modal-body">
+            <div class="sw-info-summary" id="sw-user-sw-info"></div>
+            
+            <div class="user-list-toolbar" style="display:flex; justify-content:space-between; margin-bottom:1rem; align-items:center;">
+              <h3 style="font-size:1rem; font-weight:600;">할당된 사용자 목록</h3>
+              <button type="button" id="btn-open-add-user" class="btn btn-primary btn-sm"><i data-lucide="plus"></i> 사용자 추가</button>
+            </div>
+
+            <div class="table-container">
+              <table>
+                <thead>
+                  <tr>
+                    <th>조직</th>
+                    <th>부서</th>
+                    <th>직위</th>
+                    <th>이름</th>
+                    <th>사용기간</th>
+                    <th>신청서</th>
+                    <th>관리</th>
+                  </tr>
+                </thead>
+                <tbody id="sw-user-table-body"></tbody>
+              </table>
+            </div>
+            <!-- 더미 폼 (BaseModal 필수 요건 충족용) -->
+            <form id="sw-user-asset-form" class="hidden"></form>
+          </div>
+          <div class="modal-footer">
+            <button id="btn-cancel-sw-user" class="btn btn-outline">취소</button>
+            <button id="btn-save-sw-user" class="btn btn-primary">저장</button>
+          </div>
         </div>
-      `;
-    tbody.appendChild(tr);
-  });
+      </div>
 
-  // 이벤트 연결
-  tbody.querySelectorAll('.btn-edit-user').forEach(btn => {
-    btn.addEventListener('click', (e) => {
-      const idx = parseInt((e.currentTarget as HTMLElement).getAttribute('data-idx')!);
-      openUserEditSubModal(idx);
+      <!-- 사용자 추가/수정 서브 모달 -->
+      <div id="sw-user-edit-modal" class="modal-overlay hidden" style="z-index: 1100;">
+        <div class="modal-content" style="width: 400px;">
+          <div class="modal-header">
+            <h3 id="sw-user-edit-title">사용자 정보</h3>
+            <button id="btn-close-user-edit" class="btn-icon"><i data-lucide="x"></i></button>
+          </div>
+          <div class="modal-body">
+            <form id="sw-user-edit-form" class="grid-form" style="grid-template-columns: 1fr;">
+              <input type="hidden" id="edit-user-index" value="-1" />
+              <div class="form-group">
+                <label>조직</label>
+                <select id="new-user-조직">${generateOptionsHTML(ORG_LIST)}</select>
+              </div>
+              <div class="form-group">
+                <label>부서</label>
+                <input type="text" id="new-user-부서" />
+              </div>
+              <div class="form-group">
+                <label>직위</label>
+                <input type="text" id="new-user-직위" />
+              </div>
+              <div class="form-group">
+                <label>이름</label>
+                <input type="text" id="new-user-이름" required />
+              </div>
+              <div class="form-group">
+                <label>사용 시작일</label>
+                <div style="display:flex; gap:0.25rem; align-items:center; position:relative;">
+                  <input type="text" id="new-user-시작일" style="flex:1;" />
+                  <button type="button" class="btn-icon" onclick="const p = document.getElementById('new-user-시작일-picker'); p.value = document.getElementById('new-user-시작일').value; p.showPicker();" style="padding:0.25rem;">
+                    <i data-lucide="calendar" style="width:18px; height:18px; color:var(--primary-color);"></i>
+                  </button>
+                  <input type="date" id="new-user-시작일-picker" style="position:absolute; width:0; height:0; opacity:0; pointer-events:none;" onchange="document.getElementById('new-user-시작일').value = this.value" tabindex="-1" />
+                </div>
+              </div>
+              <div class="form-group">
+                <label>사용 종료일</label>
+                <div style="display:flex; gap:0.25rem; align-items:center; position:relative;">
+                  <input type="text" id="new-user-종료일" style="flex:1;" />
+                  <button type="button" class="btn-icon" onclick="const p = document.getElementById('new-user-종료일-picker'); p.value = document.getElementById('new-user-종료일').value; p.showPicker();" style="padding:0.25rem;">
+                    <i data-lucide="calendar" style="width:18px; height:18px; color:var(--primary-color);"></i>
+                  </button>
+                  <input type="date" id="new-user-종료일-picker" style="position:absolute; width:0; height:0; opacity:0; pointer-events:none;" onchange="document.getElementById('new-user-종료일').value = this.value" tabindex="-1" />
+                </div>
+              </div>
+              <div class="form-group">
+                <label>신청서 (증빙)</label>
+                <input type="file" id="new-user-신청서" />
+              </div>
+            </form>
+          </div>
+          <div class="modal-footer">
+            <button id="btn-close-user-sub" class="btn btn-outline">취소</button>
+            <button id="btn-confirm-user-edit" class="btn btn-primary">확인</button>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  protected initChildLogic(onSave: () => void, closeModals: () => void): void {
+    const mainSaveBtn = document.getElementById('btn-save-sw-user')!;
+    const addUserBtn = document.getElementById('btn-open-add-user')!;
+    const confirmUserBtn = document.getElementById('btn-confirm-user-edit')!;
+
+    ['new-user-시작일', 'new-user-종료일'].forEach(id => {
+      const el = document.getElementById(id) as HTMLInputElement;
+      if (el) applyDateMask(el);
     });
-  });
 
-  tbody.querySelectorAll('.btn-del-user').forEach(btn => {
-    btn.addEventListener('click', (e) => {
-      const idx = parseInt((e.currentTarget as HTMLElement).getAttribute('data-idx')!);
-      if (confirm('사용자 할당을 삭제하시겠습니까?')) {
-        tempSwUsers.splice(idx, 1);
-        renderUserList();
-      }
+    addUserBtn.addEventListener('click', () => this.openUserEditSubModal());
+    confirmUserBtn.addEventListener('click', () => this.saveUserDataToList());
+
+    mainSaveBtn.addEventListener('click', () => {
+      if (!this.currentAsset) return;
+      const existingIdx = state.masterData.swUsers.findIndex(u => u.sw_id === this.currentAsset!.id);
+      const newMapping = {
+        sw_id: this.currentAsset!.id,
+        userData: this.tempSwUsers.map(u => [u.조직, u.부서, u.직위, u.이름, u.사용기간, u.신청서명])
+      };
+      if (existingIdx > -1) state.masterData.swUsers[existingIdx] = newMapping as any;
+      else state.masterData.swUsers.push(newMapping as any);
+
+      onSave(); this.close(); closeModals();
     });
-  });
 
-  createIcons({ icons: { Paperclip } });
-}
-
-function openUserEditSubModal(idx: number = -1) {
-  const subModal = document.getElementById('sw-user-edit-modal')!;
-  const form = document.getElementById('sw-user-edit-form') as HTMLFormElement;
-  form.reset();
-  
-  setFieldValue('edit-user-index', idx);
-  
-  if (idx > -1) {
-    const user = tempSwUsers[idx];
-    setFieldValue('new-user-조직', user.조직);
-    setFieldValue('new-user-부서', user.부서);
-    setFieldValue('new-user-직위', user.직위);
-    setFieldValue('new-user-이름', user.이름);
+    // 닫기 이벤트들 (BaseModal의 공통 버튼 외 추가분)
+    document.getElementById('btn-close-sw-user-modal')?.addEventListener('click', () => this.close());
+    document.getElementById('btn-cancel-sw-user')?.addEventListener('click', () => this.close());
     
-    // 사용기간 파싱 (yyyy-mm-dd ~ yyyy-mm-dd)
-    if (user.사용기간 && user.사용기간.includes('~')) {
-      const parts = user.사용기간.split('~');
-      setFieldValue('new-user-시작일', parts[0].trim());
-      setFieldValue('new-user-종료일', parts[1].trim());
-    } else {
-      setFieldValue('new-user-시작일', '');
-      setFieldValue('new-user-종료일', '');
-    }
+    const subModal = document.getElementById('sw-user-edit-modal')!;
+    const closeSub = () => subModal.classList.add('hidden');
+    document.getElementById('btn-close-user-edit')?.addEventListener('click', closeSub);
+    document.getElementById('btn-close-user-sub')?.addEventListener('click', closeSub);
+
+    createIcons({ icons: { X, Plus, Calendar, Edit2, Paperclip } });
   }
 
-  subModal.classList.remove('hidden');
+  protected fillFormData(asset: any): void {
+    const swInfo = document.getElementById('sw-user-sw-info')!;
+    swInfo.innerHTML = `
+      <div style="background:var(--bg-light); padding:1rem; border-radius:6px; margin-bottom:1.5rem;">
+        <div style="font-size:0.8rem; color:var(--text-muted); margin-bottom:0.25rem;">${asset.purchase_corp || asset.법인 || ''}</div>
+        <div style="font-size:1.1rem; font-weight:700; color:var(--primary-color);">${asset.product_name || asset.제품명 || ''}</div>
+      </div>
+    `;
+
+    const existingMapping = state.masterData.swUsers.find(u => u.sw_id === asset.id);
+    this.tempSwUsers = existingMapping ? (existingMapping.userData || []).map((u: any) => ({
+      조직: u[0], 부서: u[1], 직위: u[2], 이름: u[3], 사용기간: u[4], 신청서명: u[5]
+    })) : [];
+    
+    this.renderUserList();
+  }
+
+  protected onAfterOpen(): void {}
+
+  private renderUserList() {
+    const tbody = document.getElementById('sw-user-table-body')!;
+    tbody.innerHTML = '';
+    if (this.tempSwUsers.length === 0) {
+      tbody.innerHTML = '<tr><td colspan="7" style="text-align:center; padding:2rem; color:var(--text-muted);">할당된 사용자가 없습니다.</td></tr>';
+      return;
+    }
+
+    this.tempSwUsers.forEach((user, idx) => {
+      const tr = document.createElement('tr');
+      tr.innerHTML = `
+        <td>${user.조직 || ''}</td>
+        <td>${user.부서 || ''}</td>
+        <td>${user.직위 || ''}</td>
+        <td>${user.이름 || ''}</td>
+        <td>${user.사용기간 || ''}</td>
+        <td style="text-align:center;">${user.신청서명 ? '<i data-lucide="paperclip" class="text-primary"></i>' : '-'}</td>
+        <td>
+          <div style="display:flex; gap:0.5rem;">
+            <button class="btn btn-outline btn-sm btn-edit-user" data-idx="${idx}">수정</button>
+            <button class="btn btn-outline btn-sm btn-danger btn-del-user" data-idx="${idx}">삭제</button>
+          </div>
+        </td>
+      `;
+      tbody.appendChild(tr);
+    });
+
+    tbody.querySelectorAll('.btn-edit-user').forEach(btn => {
+      btn.addEventListener('click', (e) => {
+        const idx = parseInt((e.currentTarget as HTMLElement).getAttribute('data-idx')!);
+        this.openUserEditSubModal(idx);
+      });
+    });
+
+    tbody.querySelectorAll('.btn-del-user').forEach(btn => {
+      btn.addEventListener('click', (e) => {
+        const idx = parseInt((e.currentTarget as HTMLElement).getAttribute('data-idx')!);
+        if (confirm('사용자 할당을 삭제하시겠습니까?')) {
+          this.tempSwUsers.splice(idx, 1); this.renderUserList();
+        }
+      });
+    });
+    createIcons({ icons: { Paperclip } });
+  }
+
+  private openUserEditSubModal(idx: number = -1) {
+    const subModal = document.getElementById('sw-user-edit-modal')!;
+    const form = document.getElementById('sw-user-edit-form') as HTMLFormElement;
+    form.reset();
+    setFieldValue('edit-user-index', idx);
+    if (idx > -1) {
+      const user = this.tempSwUsers[idx];
+      setFieldValue('new-user-조직', user.조직);
+      setFieldValue('new-user-부서', user.부서);
+      setFieldValue('new-user-직위', user.직위);
+      setFieldValue('new-user-이름', user.이름);
+      if (user.사용기간 && user.사용기간.includes('~')) {
+        const parts = user.사용기간.split('~');
+        setFieldValue('new-user-시작일', parts[0].trim());
+        setFieldValue('new-user-종료일', parts[1].trim());
+      }
+    }
+    subModal.classList.remove('hidden');
+  }
+
+  private saveUserDataToList() {
+    const idx = parseInt(getFieldValue('edit-user-index'));
+    const 신청서Input = document.getElementById('new-user-신청서') as HTMLInputElement;
+    const 신청서명 = 신청서Input.files && 신청서Input.files.length > 0 ? 신청서Input.files[0].name : (idx > -1 ? this.tempSwUsers[idx].신청서명 : '');
+
+    const userData: any = {
+      조직: getFieldValue('new-user-조직'),
+      부서: getFieldValue('new-user-부서'),
+      직위: getFieldValue('new-user-직위'),
+      이름: getFieldValue('new-user-이름'),
+      사용기간: `${getFieldValue('new-user-시작일')} ~ ${getFieldValue('new-user-종료일')}`,
+      신청서명
+    };
+    if (idx === -1) this.tempSwUsers.push(userData);
+    else this.tempSwUsers[idx] = userData;
+    document.getElementById('sw-user-edit-modal')?.classList.add('hidden');
+    this.renderUserList();
+  }
 }
 
+export const swUserModal = new SwUserModal();
+
 export function initSwUserModal(onSave: () => void, closeModals: () => void) {
-  if (!document.getElementById('sw-user-modal')) {
-    document.body.insertAdjacentHTML('beforeend', SW_USER_MODAL_HTML);
-  }
-
-  const mainSaveBtn = document.getElementById('btn-save-sw-user')!;
-  const addUserBtn = document.getElementById('btn-open-add-user')!;
-  const confirmUserBtn = document.getElementById('btn-confirm-user-edit')!;
-
-  ['new-user-시작일', 'new-user-종료일'].forEach(id => {
-    applyDateMask(document.getElementById(id) as HTMLInputElement);
-  });
-
-  createIcons({ icons: { Calendar } });
-
-  addUserBtn.addEventListener('click', () => openUserEditSubModal());
-
-  confirmUserBtn.addEventListener('click', () => {
-    saveUserDataToList();
-  });
-
-  mainSaveBtn.addEventListener('click', () => {
-    if (!currentSwUserAsset) return;
-    
-    // 전역 상태 업데이트
-    const existingIdx = state.masterData.swUsers.findIndex(u => u.sw_id === currentSwUserAsset!.id);
-    const newMapping = {
-      sw_id: currentSwUserAsset!.id,
-      userData: tempSwUsers.map(u => [u.조직, u.부서, u.직위, u.이름, u.사용기간, u.신청서명])
-    };
-
-    if (existingIdx > -1) state.masterData.swUsers[existingIdx] = newMapping as any;
-    else state.masterData.swUsers.push(newMapping as any);
-
-    onSave();
-    document.getElementById('sw-user-modal')?.classList.add('hidden');
-  });
-
-  document.getElementById('btn-close-sw-user-modal')?.addEventListener('click', () => {
-    document.getElementById('sw-user-modal')?.classList.add('hidden');
-  });
-  document.getElementById('btn-cancel-sw-user')?.addEventListener('click', () => {
-    document.getElementById('sw-user-modal')?.classList.add('hidden');
-  });
-  document.getElementById('btn-close-user-edit')?.addEventListener('click', () => {
-    document.getElementById('sw-user-edit-modal')?.classList.add('hidden');
-  });
-  document.getElementById('btn-close-user-sub')?.addEventListener('click', () => {
-    document.getElementById('sw-user-edit-modal')?.classList.add('hidden');
-  });
+  swUserModal.init(onSave, closeModals);
 }
 
-function saveUserDataToList() {
-  const idx = parseInt(getFieldValue('edit-user-index'));
-  const 신청서Input = document.getElementById('new-user-신청서') as HTMLInputElement;
-  const 신청서명 = 신청서Input.files && 신청서Input.files.length > 0 ? 신청서Input.files[0].name : (idx > -1 ? tempSwUsers[idx].신청서명 : '');
-
-  const userData: any = {
-    조직: getFieldValue('new-user-조직'),
-    부서: getFieldValue('new-user-부서'),
-    직위: getFieldValue('new-user-직위'),
-    이름: getFieldValue('new-user-이름'),
-    사용기간: `${getFieldValue('new-user-시작일')} ~ ${getFieldValue('new-user-종료일')}`,
-    신청서명
-  };
-  
-  if (idx === -1) tempSwUsers.push(userData);
-  else tempSwUsers[idx] = userData;
-  
-  document.getElementById('sw-user-edit-modal')?.classList.add('hidden');
-  renderUserList();
+export function openSwUserModal(asset: any) {
+  swUserModal.open(asset);
 }

src/components/Modal/SharedData.ts

@@ -13,15 +13,15 @@ export const HW_STATUS_LIST = ['운영', '재고', '수리', '폐기', '기타']
 
 // 구분(Category) -> 유형(Asset Type) 관계 정의 (통합 관리)
 export const CATEGORY_TYPE_MAP: Record<string, string[]> = {
-  '서버': ['서버 렉', '가상서버(VM)', '워크스테이션', 'NAS', 'DAS', '서버PC', '스토리지 렉'],
+  '서버': ['서버 렉', '가상서버(VM)', '워크스테이션', '저장시스템_렉(NAS)', '저장시스템_렉(DAS)', '저장시스템_미니(NAS)', '저장시스템_미니(DAS)'],
   'PC': ['개인PC', '노트북', '공용PC', '서버PC'],
-  '스토리지': ['SSD', 'HDD', '외장HDD'],
+  '저장매체': ['SSD', 'HDD', '외장HDD'],
   '네트워크': ['스위치', '허브', '방화벽', '라우터', '공유기', '허브'],
   'PC부품': ['CPU', 'RAM', 'GPU', 'SSD', 'HDD', 'RAM', '모니터'],
   '공간정보장비': ['드론', '측량장비', '보조기기'],
   '업무지원장비': ['카메라', '스피커', 'TV', '모바일', '유선전화기', 'XR', '프린터', '전산소모품'],
-  '외부': ['영구', '구독'],
-  '내부': ['판매용', 'Solutions', 'Inhouse', 'Engine&Module'],
+  '외부SW': ['영구', '구독'],
+  '내부SW': ['판매용', 'Solutions', 'Inhouse', 'Engine&Module'],
   '비용관리': ['클라우드', '도메인', '전화', '인터넷', '이메일'],
   '내빈/외빈': ['선물'],
   '시설자산': ['사무가구']
@@ -30,7 +30,7 @@ export const CATEGORY_TYPE_MAP: Record<string, string[]> = {
 // 설치위치 종속성 데이터
 export const LOCATION_DATA: Record<string, string[]> = {
   '한맥빌딩': ['MDF실', '1층', '2층', '3층', '4층', '5층', '6층', '7층', '파고라'],
-  '기술개발센터': ['서버실', '1층', '기타'],
+  '기술개발센터': ['서버실', '센터내부'],
   '유니온빌딩': ['4층', '5층', '6층'],
   '뉴코아빌딩': ['4층', '6층', '7층'],
   'IDC': ['서관202', '서관203', '서관204', '서관205', '동관53', '동관54']
@@ -38,8 +38,44 @@ export const LOCATION_DATA: Record<string, string[]> = {
 
 // 유형별 자산번호 접두사(Prefix) 매핑
 export const TYPE_PREFIX_MAP: Record<string, string> = {
-  '서버': 'SVR', '개인PC': 'PC', '공용PC': 'PC', '서버PC': 'PC', 'NAS': 'NAS', 'DAS': 'DAS', '스토리지': 'STO', 
-  'HDD': 'HDD', 'SSD': 'SSD', '노트북': 'NBK', '태블릿': 'TAB',
+  '서버': 'SVR', '워크스테이션': 'SVR', '개인PC': 'PC', '공용PC': 'PC', '서버PC': 'PC', 
+  '저장시스템_렉(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'
+};
+
+// 배치도 이미지 매핑 데이터
+export const IMAGE_LOCATIONS: Record<string, Record<string, string[]>> = {
+  'IDC': {
+    '서관202': ['img/location_photo/IDC/서관202.png'],
+    '서관203': ['img/location_photo/IDC/서관203.png'],
+    '서관204': ['img/location_photo/IDC/서관204.png'],
+    '서관205': ['img/location_photo/IDC/서관205.png'],
+    '동관53': ['img/location_photo/IDC/동관53.png'],
+    '동관54': ['img/location_photo/IDC/동관54.png'],
+  },
+  '기술개발센터': {
+    '서버실': [
+      'img/location_photo/기술개발센터/서버실/서버실_1.png',
+      'img/location_photo/기술개발센터/서버실/서버실_2.png'
+    ],
+    '센터내부': ['img/location_photo/기술개발센터/센터내부/센터내부.png']
+  },
+  '한맥빌딩': {
+    '1층': ['img/location_photo/한맥빌딩/1층.png'],
+    '2층': ['img/location_photo/한맥빌딩/2층.png'],
+    '3층': ['img/location_photo/한맥빌딩/3층.png'],
+    '4층': ['img/location_photo/한맥빌딩/4층.png'],
+    '5층': ['img/location_photo/한맥빌딩/5층.png'],
+    '6층': ['img/location_photo/한맥빌딩/6층.png'],
+    '7층': ['img/location_photo/한맥빌딩/7층.png'],
+    'MDF실': [
+      'img/location_photo/한맥빌딩/MDF실/MDF_1.png',
+      'img/location_photo/한맥빌딩/MDF실/MDF_2.png',
+      'img/location_photo/한맥빌딩/MDF실/MDF_3.png',
+      'img/location_photo/한맥빌딩/MDF실/MDF_4.png'
+    ]
+  }
 };

src/components/Modal/UserModal.ts

@@ -0,0 +1,171 @@
+import { state, saveSystemUser, deleteSystemUser } from '../../core/state';
+import { BaseModal } from './BaseModal';
+import { setFieldValue } from './ModalUtils';
+import { createIcons, X, Save } from 'lucide';
+import { UI_TEXT } from '../../core/schema';
+
+class UserModal extends BaseModal {
+  constructor() {
+    super('user', '임직원 정보');
+  }
+
+  protected renderFrameHTML(): string {
+    const sharedStyle = 'height: 38px !important; box-sizing: border-box !important; font-size: 13px; margin: 0;';
+    const inputStyle = sharedStyle;
+
+    return `
+      <div id="user-asset-modal" class="modal-overlay hidden">
+        <div class="modal-content" style="max-width: 500px; width: 100%;">
+          <div class="modal-header">
+            <h2 id="user-modal-title" style="margin: 0; font-size: 18px; font-weight: 800; color: white;">\${this.title}</h2>
+            <button id="btn-close-user-modal" class="btn-icon" aria-label="닫기" style="font-size: 28px; color: white; background: none; border: none; cursor: pointer; line-height: 1;">&times;</button>
+          </div>
+          <div class="modal-body" style="padding: 24px; overflow-y: auto;">
+            <form id="user-asset-form" class="grid-form" style="display: flex; flex-direction: column; gap: 16px;">
+              <input type="hidden" id="user-id" name="id" />
+              
+              <div class="form-group" style="display: flex; flex-direction: column; gap: 6px;">
+                <label style="font-size: 11px; font-weight: 700; color: var(--text-muted);">사번</label>
+                <input type="text" id="user-emp-no" name="emp_no" placeholder="예: HM202601" required style="\${inputStyle} width: 100%;" />
+              </div>
+
+              <div class="form-group" style="display: flex; flex-direction: column; gap: 6px;">
+                <label style="font-size: 11px; font-weight: 700; color: var(--text-muted);">사용자명</label>
+                <input type="text" id="user-name-input" name="user_name" placeholder="예: 홍길동" required style="\${inputStyle} width: 100%;" />
+              </div>
+
+              <div class="form-group" style="display: flex; flex-direction: column; gap: 6px;">
+                <label style="font-size: 11px; font-weight: 700; color: var(--text-muted);">사용조직 (부서)</label>
+                <input type="text" id="user-dept" name="dept_name" placeholder="예: 기술개발센터" required style="\${inputStyle} width: 100%;" />
+              </div>
+
+              <div class="form-group" style="display: flex; flex-direction: column; gap: 6px;">
+                <label style="font-size: 11px; font-weight: 700; color: var(--text-muted);">직무 (직급)</label>
+                <input type="text" id="user-position-input" name="position" placeholder="예: BIM모델러" required style="\${inputStyle} width: 100%;" />
+              </div>
+
+              <div class="form-group" style="display: flex; flex-direction: column; gap: 6px;">
+                <label style="font-size: 11px; font-weight: 700; color: var(--text-muted);">상태</label>
+                <select id="user-status" name="status" style="\${sharedStyle}">
+                  <option value="재직">재직</option>
+                  <option value="퇴직">퇴직</option>
+                </select>
+              </div>
+            </form>
+          </div>
+          <div class="modal-footer" style="display: flex; justify-content: space-between; align-items: center; padding: 16px 24px; background: #f8fafc; border-top: 1px solid var(--border-color);">
+            <button id="btn-delete-user-asset" class="btn btn-outline btn-danger" style="height: 42px;">삭제</button>
+            <div class="footer-actions" style="display: flex; gap: 8px;">
+              <button id="btn-revert-user-edit" class="btn btn-outline hidden" style="height: 42px;">수정 취소</button>
+              <button id="btn-cancel-user-modal" class="btn btn-outline" style="height: 42px;">닫기</button>
+              <button id="btn-save-user-asset" class="btn btn-primary" style="height: 42px;">수정</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  protected initChildLogic(onSave: () => void, closeModals: () => void): void {
+    const saveBtn = document.getElementById('btn-save-user-asset')!;
+    const revertBtn = document.getElementById('btn-revert-user-edit')!;
+    const deleteBtn = document.getElementById('btn-delete-user-asset')!;
+
+    saveBtn.addEventListener('click', async () => {
+      if (!this.currentAsset) return;
+      if (!this.isEditMode) {
+        this.setEditLockMode('edit');
+        this.isEditMode = true;
+        return;
+      }
+
+      const empNo = (document.getElementById('user-emp-no') as HTMLInputElement).value.trim();
+      const userName = (document.getElementById('user-name-input') as HTMLInputElement).value.trim();
+      const deptName = (document.getElementById('user-dept') as HTMLInputElement).value.trim();
+      const position = (document.getElementById('user-position-input') as HTMLInputElement).value.trim();
+      const status = (document.getElementById('user-status') as HTMLSelectElement).value;
+
+      if (!empNo || !userName || !deptName || !position) {
+        alert('모든 필수 입력 필드를 채워주세요.');
+        return;
+      }
+
+      const updated = {
+        id: this.currentAsset.id || null,
+        emp_no: empNo,
+        user_name: userName,
+        dept_name: deptName,
+        position: position,
+        status: status
+      };
+
+      if (await saveSystemUser(updated)) {
+        alert(UI_TEXT.MESSAGES.SAVE_SUCCESS);
+        onSave(); this.close(); closeModals();
+      }
+    });
+
+    revertBtn.addEventListener('click', () => {
+      this.setEditLockMode('view');
+      if (this.currentAsset) this.fillFormData(this.currentAsset);
+    });
+
+    deleteBtn.addEventListener('click', async () => {
+      if (!this.currentAsset || !this.currentAsset.id) return;
+      if (!confirm('정말로 이 임직원 정보를 삭제하시겠습니까?')) return;
+
+      if (await deleteSystemUser(this.currentAsset.id)) {
+        alert('성공적으로 삭제되었습니다.');
+        onSave(); this.close(); closeModals();
+      }
+    });
+  }
+
+  protected fillFormData(asset: any): void {
+    setFieldValue('user-id', asset.id || '');
+    setFieldValue('user-emp-no', asset.emp_no || '');
+    setFieldValue('user-name-input', asset.user_name || '');
+    setFieldValue('user-dept', asset.dept_name || '');
+    setFieldValue('user-position-input', asset.position || '');
+    setFieldValue('user-status', asset.status || '재직');
+  }
+
+  protected onAfterOpen(asset: any, mode: string): void {
+    const titleEl = document.getElementById('user-modal-title');
+
+    if (titleEl) {
+      if (mode === 'add') {
+        titleEl.textContent = '신규 임직원 등록';
+      } else {
+        titleEl.textContent = '임직원 정보 수정';
+      }
+    }
+
+    const deleteBtn = document.getElementById('btn-delete-user-asset')!;
+    const saveBtn = document.getElementById('btn-save-user-asset')!;
+    
+    deleteBtn.style.display = (mode === 'add') ? 'none' : 'block';
+
+    if (mode === 'add') {
+      this.setEditLockMode('edit');
+      this.isEditMode = true;
+      saveBtn.textContent = '등록';
+      saveBtn.style.display = 'block';
+    } else {
+      this.setEditLockMode('view');
+      this.isEditMode = false;
+      saveBtn.textContent = '수정';
+      saveBtn.style.display = 'block';
+    }
+  }
+}
+
+export const userModal = new UserModal();
+
+export function initUserModal(onSave: () => void, closeModals: () => void) {
+  userModal.init(onSave, closeModals);
+}
+
+export function openUserModal(asset: any, mode: 'view' | 'edit' | 'add' = 'view') {
+  userModal.open(asset, mode);
+}

src/components/Navigation.ts

@@ -3,15 +3,15 @@ import { state } from '../core/state';
 const MENU_CONFIG: any = {
   hw: {
     label: '하드웨어',
-    tabs: ['대시보드', '서버', 'PC', '스토리지', '공간정보장비', 'PC부품', '네트워크', '업무지원장비']
+    tabs: ['대시보드', '서버', 'PC', '스토리지', '공간정보장비', 'PC부품', '부품 마스터', '네트워크', '업무지원장비']
   },
   sw: {
     label: '소프트웨어',
-    tabs: ['외부', '내부']
+    tabs: ['외부SW', '내부SW']
   },
   ops: {
     label: '운영지원',
-    tabs: ['클라우드', '도메인', '비용관리']
+    tabs: ['클라우드', '도메인', '비용관리', '사용자']
   },
   vip: {
     label: '내빈/외빈',
@@ -32,6 +32,23 @@ export function renderNavigation(onTabChange: (tab: string) => void) {
     // 기존 메뉴 렌더링
     (Object.keys(MENU_CONFIG) as Array<keyof typeof MENU_CONFIG>).forEach(catKey => {
       const config = MENU_CONFIG[catKey];
+      
+      // 역할에 따라 노출할 서브탭 필터링
+      const visibleTabs = config.tabs.filter((tab: string) => {
+        if (state.currentUserRole === 'admin') {
+          // 관리자(admin)일 경우 대시보드 탭만 노출
+          return tab === '대시보드';
+        } else {
+          // 실무자(user)일 경우 대시보드 제외한 모든 탭 노출
+          return tab !== '대시보드';
+        }
+      });
+
+      // 노출할 서브탭이 없으면 해당 대분류 GNB 메뉴도 렌더링하지 않음
+      if (visibleTabs.length === 0) {
+        return;
+      }
+
       const isActive = state.activeCategory === catKey;
 
       const group = document.createElement('div');
@@ -40,11 +57,11 @@ export function renderNavigation(onTabChange: (tab: string) => void) {
       const trigger = document.createElement('div');
       trigger.className = 'gnb-trigger';
       trigger.textContent = config.label;
-      
+
       trigger.addEventListener('click', () => {
         if (state.activeCategory !== catKey) {
           state.activeCategory = catKey as any;
-          const firstTab = config.tabs[0];
+          const firstTab = visibleTabs[0] || config.tabs[0];
           state.activeSubTab = firstTab;
           render();
           onTabChange(firstTab);
@@ -55,7 +72,8 @@ export function renderNavigation(onTabChange: (tab: string) => void) {
       const shelf = document.createElement('div');
       shelf.className = 'lnb-shelf';
       
-      config.tabs.forEach((tab: string) => {
+      visibleTabs.forEach((tab: string) => {
+        if (tab === '부품 마스터') return; // 메뉴바에서 표시 생략
         const item = document.createElement('div');
         item.className = `lnb-item ${isActive && state.activeSubTab === tab ? 'active' : ''}`;
         item.textContent = tab;
@@ -73,24 +91,26 @@ export function renderNavigation(onTabChange: (tab: string) => void) {
       navContainer.appendChild(group);
     });
 
-    // ─── '관리자' 메뉴 별도 추가 (GNB 스타일) ───
-    const adminGroup = document.createElement('div');
-    adminGroup.className = 'nav-group';
-    
-    const adminTrigger = document.createElement('div');
-    adminTrigger.className = 'gnb-trigger';
-    adminTrigger.innerHTML = '관리자';
-    adminTrigger.style.color = 'var(--text-muted)';
-    adminTrigger.style.borderLeft = '1px solid var(--border-color)';
-    adminTrigger.style.marginLeft = '1rem';
-    adminTrigger.style.paddingLeft = '1.5rem';
-    
-    adminTrigger.addEventListener('click', () => {
-      alert('준비중입니다.');
-    });
-    
-    adminGroup.appendChild(adminTrigger);
-    navContainer.appendChild(adminGroup);
+    // ─── '관리자' 메뉴 별도 추가 (GNB 스타일 - 관리자 역할일 때만 노출) ───
+    if (state.currentUserRole === 'admin') {
+      const adminGroup = document.createElement('div');
+      adminGroup.className = 'nav-group';
+      
+      const adminTrigger = document.createElement('div');
+      adminTrigger.className = 'gnb-trigger';
+      adminTrigger.innerHTML = '관리자';
+      adminTrigger.style.color = 'var(--text-muted)';
+      adminTrigger.style.borderLeft = '1px solid var(--border-color)';
+      adminTrigger.style.marginLeft = '1rem';
+      adminTrigger.style.paddingLeft = '1.5rem';
+      
+      adminTrigger.addEventListener('click', () => {
+        window.open('/map_editor.html', '_blank');
+      });
+      
+      adminGroup.appendChild(adminTrigger);
+      navContainer.appendChild(adminGroup);
+    }
   };
 
   render();

src/core/excelHandler.ts

@@ -27,10 +27,15 @@ export interface SWUser {
 
 export interface HardwareLog {
   id: string;
-  assetId: string;
-  date: string;
+  assetId?: string;
+  asset_id?: string;
+  date?: string;
+  log_date?: string;
+  created_at?: string;
   details: string;
-  user: string;
+  user?: string;
+  log_user?: string;
+  event_type?: string;
 }
 
 export interface MasterAssetData {

src/core/filterHandler.ts

@@ -14,33 +14,61 @@ export interface FilterOptions {
   showDept?: boolean;
   showLoc?: boolean;
   showField?: boolean;
+  showType?: boolean;
+  showStatus?: boolean;
   extraHTML?: string;
   onFilterChange: (filters: any) => void;
+  initialFilters?: any;
 }
 
 export function renderFilterBar(container: HTMLElement, options: FilterOptions) {
-  const { keywordLabel = '통합 검색', showCorp = false, showDept = false, showLoc = false, showField = false, extraHTML = '', onFilterChange } = options;
+  const { 
+    keywordLabel = '통합 검색', 
+    showCorp = false, 
+    showDept = false, 
+    showLoc = false, 
+    showField = false, 
+    showType = false, 
+    showStatus = false,
+    extraHTML = '', 
+    onFilterChange,
+    initialFilters = { keyword: '', corp: '', dept: '', loc: '', field: '', type: '', status: '' }
+  } = options;
 
   container.innerHTML = `
     <div class="search-item flex-1">
       <label>${keywordLabel}</label>
-      <input type="text" id="filter-keyword" placeholder="검색어를 입력하세요..." autocomplete="off">
+      <input type="text" id="filter-keyword" placeholder="검색어를 입력하세요..." autocomplete="off" value="${initialFilters.keyword || ''}">
     </div>
+    ${showType ? `
+    <div class="search-item">
+      <label>${ASSET_SCHEMA.ASSET_TYPE.ui}</label>
+      <select id="filter-type">
+        <option value="">전체 유형</option>
+      </select>
+    </div>` : ''}
+    ${showStatus ? `
+    <div class="search-item">
+      <label>${ASSET_SCHEMA.HW_STATUS.ui}</label>
+      <select id="filter-status">
+        <option value="">전체 상태</option>
+      </select>
+    </div>` : ''}
     ${showField ? `
     <div class="search-item">
       <label>${ASSET_SCHEMA.SW_FIELD.ui}</label>
       <select id="filter-field">
         <option value="">전체 분야</option>
-        <option value="업무공통">업무공통</option>
-        <option value="개발S/W">개발S/W</option>
-        <option value="디자인">디자인</option>
-        <option value="설계S/W">설계S/W</option>
+        <option value="업무공통" ${initialFilters.field === '업무공통' ? 'selected' : ''}>업무공통</option>
+        <option value="개발S/W" ${initialFilters.field === '개발S/W' ? 'selected' : ''}>개발S/W</option>
+        <option value="디자인" ${initialFilters.field === '디자인' ? 'selected' : ''}>디자인</option>
+        <option value="설계S/W" ${initialFilters.field === '설계S/W' ? 'selected' : ''}>설계S/W</option>
       </select>
     </div>` : ''}
     ${showCorp ? `
     <div class="search-item">
       <label>${ASSET_SCHEMA.PURCHASE_CORP.ui}</label>
-      <select id="filter-corp">${generateOptionsHTML(CORP_LIST, '', true)}</select>
+      <select id="filter-corp">${generateOptionsHTML(CORP_LIST, initialFilters.corp || '', true)}</select>
     </div>` : ''}
     ${showLoc ? `
     <div class="search-item">
@@ -66,7 +94,9 @@ export function renderFilterBar(container: HTMLElement, options: FilterOptions)
       corp: (container.querySelector('#filter-corp') as HTMLSelectElement)?.value || '',
       dept: (container.querySelector('#filter-dept') as HTMLSelectElement)?.value || '',
       loc: (container.querySelector('#filter-loc') as HTMLSelectElement)?.value || '',
-      field: (container.querySelector('#filter-field') as HTMLSelectElement)?.value || ''
+      field: (container.querySelector('#filter-field') as HTMLSelectElement)?.value || '',
+      type: (container.querySelector('#filter-type') as HTMLSelectElement)?.value || '',
+      status: (container.querySelector('#filter-status') as HTMLSelectElement)?.value || ''
     };
     onFilterChange(filters);
   };
@@ -76,9 +106,11 @@ export function renderFilterBar(container: HTMLElement, options: FilterOptions)
   container.querySelector('#filter-dept')?.addEventListener('change', triggerChange);
   container.querySelector('#filter-loc')?.addEventListener('change', triggerChange);
   container.querySelector('#filter-field')?.addEventListener('change', triggerChange);
+  container.querySelector('#filter-type')?.addEventListener('change', triggerChange);
+  container.querySelector('#filter-status')?.addEventListener('change', triggerChange);
 
   container.querySelector('#btn-reset-filters')?.addEventListener('click', () => {
-    ['filter-keyword', 'filter-corp', 'filter-dept', 'filter-loc', 'filter-field'].forEach(id => {
+    ['filter-keyword', 'filter-corp', 'filter-dept', 'filter-loc', 'filter-field', 'filter-type', 'filter-status'].forEach(id => {
       const el = container.querySelector(`#${id}`);
       if (el) (el as any).value = '';
     });
@@ -98,7 +130,9 @@ export function applyCommonFilters(list: any[], filters: any, searchKeys: (keyof
     const matchDept = !filters.dept || (item[ASSET_SCHEMA.CURRENT_DEPT.key] || item[ASSET_SCHEMA.CURRENT_DEPT.db]) === filters.dept;
     const matchLoc = !filters.loc || (item[ASSET_SCHEMA.LOCATION.key] || item[ASSET_SCHEMA.LOCATION.db]) === filters.loc;
     const matchField = !filters.field || (item[ASSET_SCHEMA.SW_FIELD.key] || item[ASSET_SCHEMA.SW_FIELD.db]) === filters.field;
+    const matchType = !filters.type || (item[ASSET_SCHEMA.ASSET_TYPE.key] || item[ASSET_SCHEMA.ASSET_TYPE.db]) === filters.type;
+    const matchStatus = !filters.status || (item[ASSET_SCHEMA.HW_STATUS.key] || item[ASSET_SCHEMA.HW_STATUS.db]) === filters.status;
 
-    return matchKeyword && matchCorp && matchDept && matchLoc && matchField;
+    return matchKeyword && matchCorp && matchDept && matchLoc && matchField && matchType && matchStatus;
   });
 }

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

@@ -17,10 +17,14 @@ export const ASSET_SCHEMA = {
   PURCHASE_AMOUNT:{ key: 'purchase_amount', db: 'purchase_amount', ui: '구매금액' },
   PURCHASE_VENDOR:{ key: 'purchase_vendor', db: 'purchase_vendor', ui: '구매업체' },
   APPROVAL_DOC:   { key: 'approval_document', db: 'approval_document', ui: '품의서' },
+  SERVICE_TYPE:   { key: 'service_type', db: 'service_type',    ui: '서비스 구분' },
   MANAGER_MAIN:   { key: 'manager_primary', db: 'manager_primary', ui: '담당자(정)' },
   MANAGER_SUB:    { key: 'manager_secondary', db: 'manager_secondary', ui: '담당자(부)' },
   LOCATION:       { key: 'location',     db: 'location',        ui: '자산위치' },
   LOC_DETAIL:     { key: 'location_detail', db: 'location_detail', ui: '상세위치' },
+  LOCATION_PHOTO: { key: 'location_photo', db: 'location_photo', ui: '배치도이미지' },
+  LOC_X:          { key: 'loc_x',         db: 'loc_x',           ui: '위치X' },
+  LOC_Y:          { key: 'loc_y',         db: 'loc_y',           ui: '위치Y' },
   MEMO:           { key: 'memo',         db: 'memo',            ui: '메모' },
 
   // ─── 하드웨어 상세 (Hardware) ───
@@ -117,12 +121,12 @@ export const PAGE_DESCRIPTIONS: Record<string, { title: string; description: str
     description: '측량 및 공간 정보 수집에 사용되는 특수 정밀 장비들의 이력과 상태를 관리합니다.',
     icon: 'map'
   },
-  '내부': {
+  '내부SW': {
     title: '사내 개발 S/W 관리',
     description: '사내에서 자체 개발하거나 운영 중인 시스템 및 소프트웨어 서비스 현황을 관리합니다.',
     icon: 'code'
   },
-  '외부': {
+  '외부SW': {
     title: '외부 상용 S/W 관리',
     description: '상용 소프트웨어의 라이선스 보유 현황, 사용자 할당 및 만료 일정을 관리합니다.',
     icon: 'package'
@@ -151,6 +155,21 @@ export const PAGE_DESCRIPTIONS: Record<string, { title: string; description: str
     title: '사무용 가구 관리',
     description: '책상, 의자, 캐비닛 등 사무 환경 구성을 위한 가구 자산의 배치 현황을 관리합니다.',
     icon: 'armchair'
+  },
+  '사용자': {
+    title: '임직원 사용자 관리',
+    description: 'IT 자산 할당 및 관리의 기준이 되는 사내 임직원(사용자) 정보를 데이터베이스 기반으로 직접 등록하고 수정합니다.',
+    icon: 'users'
+  },
+  '부품 마스터': {
+    title: '부품 표준 정보 관리',
+    description: 'PC 사양 적정성 평가의 기준이 되는 부품 표준 정보 및 등급별 감점 점수를 관리합니다.',
+    icon: 'cpu'
+  },
+  '직무별 기준 사양': {
+    title: '직무별 기준 사양 관리',
+    description: 'BIM 모델러, 개발자, 엔지니어 등 사내 직무별 권장 하드웨어 기준 및 성능 합격 점수를 관리합니다.',
+    icon: 'sliders'
   }
 };
 

src/core/state.ts

@@ -11,6 +11,7 @@ export interface MasterAssetData {
   network: any[];
   survey: any[];
   pcParts: any[];
+  partsMaster: any[];
   equipment: any[];
   officeSupplies: any[];
   swInternal: any[];
@@ -21,6 +22,7 @@ export interface MasterAssetData {
   vip: any[];
   mobile?: any[]; // Legacy mobile support
   equip?: any[];  // Backward compat
+  jobSpecs?: any[];
   
   // Backward compatibility
   subSw: any[];
@@ -37,49 +39,58 @@ export interface MasterAssetData {
 export interface AppState {
   activeCategory: 'dashboard' | 'hw' | 'sw' | 'ops' | 'vip' | 'fac' | 'users' | 'etc';
   activeSubTab: string;
+  viewMode: 'location' | 'legacy' | 'list';
   masterData: MasterAssetData;
   activeCharts: any[];
+  currentUserRole: 'admin' | 'user';
+  listFilters?: Record<string, any>;
 }
 
 // 초기 상태
 export const state: AppState = {
   activeCategory: 'hw',
   activeSubTab: '대시보드',
+  viewMode: 'location',
   activeCharts: [],
+  currentUserRole: 'user',
+  listFilters: {},
   masterData: {
     users: [],
     pc: [], server: [], storage: [], network: [],
-    survey: [], pcParts: [], equipment: [], officeSupplies: [],
+    survey: [], pcParts: [], partsMaster: [], equipment: [], officeSupplies: [],
     swInternal: [], swExternal: [], cloud: [], domain: [],
     cost: [], vip: [],
     subSw: [], permSw: [],
     hw: [], sw: [],
-    swUsers: [], logs: []
+    swUsers: [], logs: [],
+    jobSpecs: []
   }
 };
 
 /**
- * 신규 14개 테이블 구조에 맞춘 데이터 로드 (Dummy Data)
+ * 통합 V2 스키마에 맞춘 데이터 로드
  */
 export async function loadMasterDataFromDB() {
   try {
-    state.masterData.pc = dummyPCs || [];
-    state.masterData.server = dummyServers || [];
-    state.masterData.storage = dummyStorages || [];
-    state.masterData.network = dummyEquips || []; // dummy fallback
-    state.masterData.survey = []; 
-    state.masterData.pcParts = [];
-    state.masterData.equipment = dummyEquips || [];
-    state.masterData.officeSupplies = []; 
-    state.masterData.swInternal = dummyPermSw || [];
-    state.masterData.swExternal = dummySubSw || [];
-    state.masterData.cloud = dummyCloud || [];
-    state.masterData.domain = dummyDomain || [];
-    state.masterData.cost = [];
-    state.masterData.vip = []; 
-    state.masterData.swUsers = dummySwUsers || [];
-    state.masterData.logs = dummyLogs || [];
-    state.masterData.users = [];
+    const response = await fetch(`${API_BASE_URL}/api/assets/master`);
+    if (!response.ok) throw new Error('Failed to fetch master data');
+    
+    const data = await response.json();
+    
+    // 전역 상태 업데이트
+    state.masterData = {
+      ...state.masterData,
+      ...data,
+      jobSpecs: data.jobSpecs || [],
+      logs: (data.logs || []).map((l: any) => ({
+        ...l,
+        assetId: l.asset_id || l.assetId,
+        date: l.log_date || l.date,
+        user: l.log_user || l.user,
+        log_date: l.log_date || l.date,
+        log_user: l.log_user || l.user
+      }))
+    };
 
     // Mapping for backward compatibility
     state.masterData.equip = state.masterData.equipment;
@@ -101,10 +112,10 @@ export async function loadMasterDataFromDB() {
     state.masterData.sw = [
       ...state.masterData.swInternal,
       ...state.masterData.swExternal,
-      ...state.masterData.cloud
+      ...(state.masterData.cloud || [])
     ];
 
-    console.log('✅ All dummy data loaded and unified');
+    console.log('✅ V2 Normalized data loaded successfully');
     return true;
   } catch (err) {
     console.warn('⚠️ Dummy 로드 실패:', err);
@@ -117,18 +128,21 @@ export function updateState(newState: Partial<AppState>) {
 }
 
 /**
- * 자산 저장 (Dummy API)
+ * 자산 저장 (V2 Normalized API)
  */
 export async function saveAsset(category: string, asset: any) {
   try {
-    const currentList = [...(state.masterData as any)[category]];
-    const idx = currentList.findIndex(a => a.id === asset.id);
+    const url = `${API_BASE_URL}/api/asset/${category}/save`;
+    const response = await fetch(url, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(asset)
+    });
     
-    if (idx > -1) currentList[idx] = asset;
-    else currentList.push(asset);
-
-    (state.masterData as any)[category] = currentList;
-    return true;
+    if (response.ok) {
+        await loadMasterDataFromDB(); // 전역 상태 갱신
+        return true;
+    }
   } catch (err) {
     console.error('자산 저장 실패:', err);
   }
@@ -136,16 +150,120 @@ export async function saveAsset(category: string, asset: any) {
 }
 
 /**
- * 자산 삭제 (Dummy API)
+ * 자산 삭제 (V2 API)
  */
 export async function deleteAsset(category: string, assetId: string) {
   try {
-    const currentList = [...(state.masterData as any)[category]];
-    const filteredList = currentList.filter(a => a.id !== assetId);
-    (state.masterData as any)[category] = filteredList;
-    return true;
+    const url = `${API_BASE_URL}/api/asset/${category}/${assetId}`;
+    const response = await fetch(url, { method: 'DELETE' });
+    
+    if (response.ok) {
+        await loadMasterDataFromDB(); // 전역 상태 갱신
+        return true;
+    }
   } catch (err) {
     console.error('자산 삭제 실패:', err);
   }
   return false;
 }
+
+export async function savePartsMaster(component: any) {
+  try {
+    const url = `${API_BASE_URL}/api/hardware-components/save`;
+    const response = await fetch(url, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(component)
+    });
+    
+    if (response.ok) {
+        await loadMasterDataFromDB(); // 전역 상태 갱신
+        return true;
+    }
+  } catch (err) {
+    console.error('부품 마스터 저장 실패:', err);
+  }
+  return false;
+}
+
+export async function deletePartsMaster(id: number) {
+  try {
+    const url = `${API_BASE_URL}/api/hardware-components/${id}`;
+    const response = await fetch(url, { method: 'DELETE' });
+    
+    if (response.ok) {
+        await loadMasterDataFromDB(); // 전역 상태 갱신
+        return true;
+    }
+  } catch (err) {
+    console.error('부품 마스터 삭제 실패:', err);
+  }
+  return false;
+}
+
+export async function saveSystemUser(user: any) {
+  try {
+    const url = `${API_BASE_URL}/api/system-users/save`;
+    const response = await fetch(url, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(user)
+    });
+    if (response.ok) {
+      await loadMasterDataFromDB(); // 전역 상태 갱신
+      return true;
+    }
+  } catch (err) {
+    console.error('사용자 정보 저장 실패:', err);
+  }
+  return false;
+}
+
+export async function deleteSystemUser(id: string) {
+  try {
+    const url = `${API_BASE_URL}/api/system-users/${id}`;
+    const response = await fetch(url, { method: 'DELETE' });
+    if (response.ok) {
+      await loadMasterDataFromDB(); // 전역 상태 갱신
+      return true;
+    }
+  } catch (err) {
+    console.error('사용자 정보 삭제 실패:', err);
+  }
+  return false;
+}
+
+export async function saveJobSpec(spec: any) {
+  try {
+    const url = `${API_BASE_URL}/api/job-specs/save`;
+    const response = await fetch(url, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(spec)
+    });
+    
+    if (response.ok) {
+        await loadMasterDataFromDB(); // 전역 상태 갱신
+        return true;
+    }
+  } catch (err) {
+    console.error('직무별 기준 사양 저장 실패:', err);
+  }
+  return false;
+}
+
+export async function deleteJobSpec(id: number) {
+  try {
+    const url = `${API_BASE_URL}/api/job-specs/${id}`;
+    const response = await fetch(url, { method: 'DELETE' });
+    
+    if (response.ok) {
+        await loadMasterDataFromDB(); // 전역 상태 갱신
+        return true;
+    }
+  } catch (err) {
+    console.error('직무별 기준 사양 삭제 실패:', err);
+  }
+  return false;
+}
+

src/core/utils.ts

@@ -1,6 +1,6 @@
 import { PAGE_DESCRIPTIONS } from './schema';
 
-export const API_BASE_URL = `http://${location.hostname}:3000`;
+export const API_BASE_URL = '';
 
 /**
  * ITAM 공통 유틸리티 함수
@@ -17,7 +17,7 @@ export function renderPageHeader(container: HTMLElement, pageId: string) {
   header.className = 'page-header';
   header.innerHTML = `
     <div class="page-title-group">
-      <h2 class="page-title"><i data-lucide="${config.icon}"></i> ${config.title}</h2>
+      <h2 class="page-title">${config.title}</h2>
       <p class="page-description">${config.description}</p>
     </div>
   `;
@@ -153,14 +153,207 @@ export function dynamicSort<T>(list: T[], key: string, direction: 'asc' | 'desc'
 }
 
 /**
- * 목록 뷰용 액션 버튼 HTML 생성 (자산추가)
+ * 목록 뷰용 액션 버튼 HTML 생성 (중복 제거를 위해 비워둠)
  */
 export function getActionButtonsHTML(): string {
-  return `
-    <div class="search-actions">
-      <button id="btn-add-asset" class="btn btn-primary">
-        <i data-lucide="plus"></i> 자산추가
-      </button>
-    </div>
-  `;
+  return '';
 }
+
+/**
+ * 100점 만점 감점형 PC 성능 점수 계산 (CPU + RAM + GPU + 연식)
+ */
+export function calculatePcScoreDeductive(cpu: string, ram: string, gpu: string, purchaseDate: string): number {
+  let score = 100;
+  if (!cpu) cpu = '';
+  if (!ram) ram = '';
+  if (!gpu) gpu = '';
+
+  const cpuUpper = cpu.toUpperCase();
+  const ramUpper = ram.toUpperCase();
+  const gpuUpper = gpu.toUpperCase();
+
+  // 1. CPU 등급 감점 (최대 -30점)
+  let cpuDeduction = 0;
+  if (cpuUpper.includes('I9') || cpuUpper.includes('RYZEN 9') || cpuUpper.includes('RYZEN9')) {
+    cpuDeduction = 0;
+  } else if (cpuUpper.includes('I7') || cpuUpper.includes('RYZEN 7') || cpuUpper.includes('RYZEN7')) {
+    cpuDeduction = 5;
+  } else if (cpuUpper.includes('I5') || cpuUpper.includes('RYZEN 5') || cpuUpper.includes('RYZEN5')) {
+    cpuDeduction = 15;
+  } else if (cpuUpper.includes('I3') || cpuUpper.includes('RYZEN 3') || cpuUpper.includes('RYZEN3')) {
+    cpuDeduction = 25;
+  } else {
+    cpuDeduction = 30;
+  }
+  score -= cpuDeduction;
+
+  // 2. CPU 세대 노후 감점 (최대 -15점)
+  let genDeduction = 0;
+  const intelMatch = cpuUpper.match(/I\d-?(\d+)/);
+  let gen = 0;
+  if (intelMatch && intelMatch[1]) {
+    const numStr = intelMatch[1];
+    if (numStr.length === 5) gen = parseInt(numStr.substring(0, 2), 10);
+    else if (numStr.length === 4) gen = parseInt(numStr.substring(0, 1), 10);
+  }
+
+  const amdMatch = cpuUpper.match(/RYZEN\s?\d\s?-?(\d+)/);
+  let amdGen = 0;
+  if (amdMatch && amdMatch[1] && !intelMatch) {
+    const numStr = amdMatch[1];
+    if (numStr.length === 4) amdGen = parseInt(numStr.substring(0, 1), 10);
+  }
+
+  if (intelMatch) {
+    if (gen >= 12) genDeduction = 0;
+    else if (gen >= 10) genDeduction = 5;
+    else if (gen >= 8) genDeduction = 10;
+    else genDeduction = 15;
+  } else if (amdMatch) {
+    if (amdGen >= 5) genDeduction = 0;
+    else if (amdGen >= 3) genDeduction = 5;
+    else genDeduction = 10;
+  } else {
+    genDeduction = 15;
+  }
+  score -= genDeduction;
+
+  // 3. RAM 용량 감점 (최대 -25점)
+  const ramMatch = ramUpper.match(/(\d+)\s*GB/);
+  let ramDeduction = 25;
+  if (ramMatch && ramMatch[1]) {
+    const ramVal = parseInt(ramMatch[1], 10);
+    if (ramVal >= 32) ramDeduction = 0;
+    else if (ramVal >= 16) ramDeduction = 10;
+    else if (ramVal >= 8) ramDeduction = 20;
+    else ramDeduction = 25;
+  }
+  score -= ramDeduction;
+
+  // 4. GPU 성능 감점 (최대 -25점)
+  let gpuDeduction = 25;
+  if (!gpuUpper || gpuUpper === '-' || gpuUpper.trim() === '') {
+    gpuDeduction = 25;
+  } else if (
+    gpuUpper.includes('RTX 4090') || gpuUpper.includes('RTX 4080') || gpuUpper.includes('RTX 4070') ||
+    gpuUpper.includes('RTX 3090') || gpuUpper.includes('RTX 3080') ||
+    gpuUpper.includes('RTX A5000') || gpuUpper.includes('RTX A6000') || gpuUpper.includes('RTX A4000')
+  ) {
+    gpuDeduction = 0;
+  } else if (
+    gpuUpper.includes('RTX 3070') || gpuUpper.includes('RTX 3060') || gpuUpper.includes('RTX 2060') ||
+    gpuUpper.includes('RTX A2000') || gpuUpper.includes('RTX A3000') || gpuUpper.includes('QUADRO')
+  ) {
+    gpuDeduction = 5;
+  } else if (
+    gpuUpper.includes('GTX 1660') || gpuUpper.includes('GTX 1080') || gpuUpper.includes('GTX 1070') ||
+    gpuUpper.includes('GTX 1060') || gpuUpper.includes('RX 6700') || gpuUpper.includes('RX 6600')
+  ) {
+    gpuDeduction = 15;
+  } else {
+    gpuDeduction = 25;
+  }
+  score -= gpuDeduction;
+
+  // 5. 연식(노후도) 감점 (최대 -15점)
+  let age = 0;
+  if (purchaseDate && purchaseDate !== '-') {
+    let normalized = purchaseDate.replace(/\./g, '-').trim();
+    if (/^\d{6}$/.test(normalized)) {
+      normalized = `${normalized.substring(0, 4)}-${normalized.substring(4, 6)}`;
+    }
+    const purchase = new Date(normalized);
+    if (!isNaN(purchase.getTime())) {
+      // 2026년 5월 31일 기준 경과연수 계산
+      const mockToday = new Date('2026-05-31');
+      const diffMs = mockToday.getTime() - purchase.getTime();
+      age = diffMs / (1000 * 60 * 60 * 24 * 365.25);
+      age = Math.max(0, parseFloat(age.toFixed(1)));
+    }
+  }
+
+  let ageDeduction = 0;
+  if (age < 1) ageDeduction = 0;
+  else if (age < 2) ageDeduction = 3;
+  else if (age < 3) ageDeduction = 6;
+  else if (age < 4) ageDeduction = 9;
+  else if (age < 5) ageDeduction = 12;
+  else ageDeduction = 15;
+
+  score -= ageDeduction;
+
+  return Math.max(10, score);
+}
+
+/**
+ * 성능 점수 기준 등급 뱃지 메타 정보 가져오기
+ */
+export function getPcGrade(score: number, isWin11Incompatible?: boolean): { name: string; class: string; color: string } {
+  if (score >= 85) return { name: '최상급', class: 'b-purple', color: '#7C3AED' };
+  if (score >= 70) return { name: '상급', class: 'b-primary', color: '#4F46E5' };
+  if (score >= 40) return { name: '중급', class: 'b-green', color: '#10B981' };
+  if (score >= 20 && !isWin11Incompatible) return { name: '보급', class: 'b-yellow', color: '#F59E0B' };
+  return { name: '교체 대상', class: 'badge-danger', color: '#EF4444' };
+}
+
+/**
+ * Windows 11 업그레이드 지원 불가능한 하드웨어 조건인지 판별
+ */
+export function isWindows11Incompatible(cpu: string, ram: string): boolean {
+  if (!cpu) return true;
+  const cpuUpper = cpu.toUpperCase();
+
+  // 1. RAM 4GB 미만은 공식 미지원
+  if (ram) {
+    const ramMatch = ram.toUpperCase().match(/(\d+)\s*GB/);
+    if (ramMatch && ramMatch[1]) {
+      const ramVal = parseInt(ramMatch[1], 10);
+      if (ramVal < 4) return true;
+    }
+  }
+
+  // 2. CPU 세대 검사
+  // Intel CPU 세대 판정
+  const intelMatch = cpuUpper.match(/I\d-?(\d+)/);
+  if (intelMatch && intelMatch[1]) {
+    const numStr = intelMatch[1];
+    let gen = 0;
+    if (numStr.length === 5) gen = parseInt(numStr.substring(0, 2), 10);
+    else if (numStr.length === 4) gen = parseInt(numStr.substring(0, 1), 10);
+    else if (numStr.length === 3) gen = parseInt(numStr.substring(0, 1), 10); // 3자리수 구형 세대 (예: i5-750)
+    
+    if (gen > 0 && gen < 8) return true; // 8세대 미만 불가
+    return false;
+  }
+
+  // AMD Ryzen CPU 세대 판정
+  const amdMatch = cpuUpper.match(/RYZEN\s?\d\s?-?(\d+)/);
+  if (amdMatch && amdMatch[1]) {
+    const numStr = amdMatch[1];
+    let amdGen = 0;
+    if (numStr.length === 4) amdGen = parseInt(numStr.substring(0, 1), 10); // 1xxx, 2xxx 등
+    
+    if (amdGen > 0 && amdGen < 2) return true; // Ryzen 1세대 이하는 불가
+    return false;
+  }
+
+  // Apple Silicon은 지원
+  if (cpuUpper.includes('APPLE') || cpuUpper.includes('M1') || cpuUpper.includes('M2') || cpuUpper.includes('M3') || cpuUpper.includes('M4')) {
+    return false;
+  }
+
+  // 그 외 확실한 구형 CPU 제품군
+  const knownOldCpus = ['CORE2', 'CORE 2', 'PENTIUM', 'CELERON', 'ATHLON', 'PHENOM', 'XEON'];
+  if (knownOldCpus.some(name => cpuUpper.includes(name))) {
+    return true;
+  }
+
+  // 세대 매칭은 안되었으나 Intel Core i 시리즈 구조이면 구형(1세대 등)으로 간주
+  if (cpuUpper.includes('I3') || cpuUpper.includes('I5') || cpuUpper.includes('I7') || cpuUpper.includes('I9')) {
+    // i5-620M 처럼 옛날 구형 모바일 칩 등
+    return true;
+  }
+
+  return false;
+}
+

src/main.ts

@@ -2,56 +2,68 @@ import { state, loadMasterDataFromDB, saveAsset } from './core/state';
 import { renderNavigation } from './components/Navigation';
 import { renderDashboard } from './views/DashboardView';
 import { renderSWTable } from './views/SW_Table';
+import { renderLocationView } from './views/LocationView';
 import { initBaseModal } from './components/Modal/BaseModal';
 import { initHwModal, openHwModal } from './components/Modal/HWModal';
 import { initSwModal, openSwModal } from './components/Modal/SWModal';
 import { initSwUserModal } from './components/Modal/SWUserModal';
 import { initDomainModal, openDomainModal } from './components/Modal/DomainModal';
+import { initPartsMasterModal, openPartsMasterModal } from './components/Modal/PartsMasterModal';
+import { initJobSpecModal, openJobSpecModal } from './components/Modal/JobSpecModal';
+import { initUserModal, openUserModal } from './components/Modal/UserModal';
+import { activePartsMasterSubTab } from './views/List/PartsMasterListView';
 import { initDashboardDetailModal } from './components/Modal/DashboardDetailModal';
 import { initGuide } from './components/Guide';
+import { pcFlowModal } from './components/Modal/PCFlowModal';
 import { createIcons, Plus, X, LayoutDashboard, Monitor, Server, Database, Laptop, CalendarClock, Key, Cpu, Layers, Users, Paperclip, Edit2, History, RefreshCcw, BookOpen, Settings } from 'lucide';
 
-// --- DB 저장을 위한 세분화된 헬퍼 함수들 ---
-async function apiBatchSave(url: string, data: any[], label: string) {
-  try {
-    console.log(`✅ ${label} DB 저장 완료 (Dummy Mode: ${data?.length || 0} items)`);
-  } catch (err) {
-    console.error(`❌ ${label} DB 저장 오류:`, err);
-    alert(`${label} 저장 중 오류가 발생했습니다: ${(err as any).message}`);
-  }
-}
-
-const savePcToDB = () => apiBatchSave(`http://${location.hostname}:3000/api/pc/batch`, state.masterData.pc, '개인PC');
-const saveServerToDB = () => apiBatchSave(`http://${location.hostname}:3000/api/server/batch`, state.masterData.server, '서버');
-const saveStorageToDB = () => apiBatchSave(`http://${location.hostname}:3000/api/storage/batch`, state.masterData.storage, '스토리지');
-const saveNetworkToDB = () => apiBatchSave(`http://${location.hostname}:3000/api/network/batch`, state.masterData.network, '네트워크');
-const saveEquipToDB = () => apiBatchSave(`http://${location.hostname}:3000/api/equipment/batch`, state.masterData.equipment, '업무지원장비');
-const saveSwInternalToDB = () => apiBatchSave(`http://${location.hostname}:3000/api/sw/internal/batch`, state.masterData.swInternal, '내부SW');
-const saveSwExternalToDB = () => apiBatchSave(`http://${location.hostname}:3000/api/sw/external/batch`, state.masterData.swExternal, '외부SW');
-const saveCloudToDB = () => apiBatchSave(`http://${location.hostname}:3000/api/cloud/batch`, state.masterData.cloud, '클라우드');
-const saveSwUsersToDB = () => apiBatchSave(`http://${location.hostname}:3000/api/asset/software/assignment/batch`, state.masterData.swUsers, 'SW사용자');
-const saveLogsToDB = () => apiBatchSave(`http://${location.hostname}:3000/api/asset/history/batch`, state.masterData.logs, '자산 로그');
-const saveUsersToDB = () => apiBatchSave(`http://${location.hostname}:3000/api/users/batch`, state.masterData.users, '사용자마스터');
 
 // 화면 갱신 통합 핸들러
 function refreshView() {
   const mainContent = document.getElementById('main-content')!;
   if (!mainContent) return;
-  
+
   if (state.activeSubTab === '대시보드') {
     renderDashboard(mainContent);
+    return;
+  }
+
+  // 서버 탭이 아닐 경우 '자산현황(위치)' 뷰 진입 방지 및 강제 리스트 모드 전환
+  if (state.activeSubTab !== '서버' && state.viewMode === 'location') {
+    state.viewMode = 'list';
+  }
+
+  const isServerTab = state.activeSubTab === '서버';
+  
+  mainContent.innerHTML = `
+    <div class="view-header">
+      <div class="view-toggle-container" style="${isServerTab ? '' : 'display:none;'}">
+        <button class="mode-toggle-btn ${state.viewMode === 'location' ? 'active' : ''}" data-mode="location">자산현황(위치)</button>
+        <button class="mode-toggle-btn ${state.viewMode === 'list' ? 'active' : ''}" data-mode="list">자산목록</button>
+      </div>
+    </div>
+    <div id="view-body" style="flex: 1; overflow: hidden; display: flex; flex-direction: column;"></div>
+  `;
+
+  // 이벤트 바인딩
+  mainContent.querySelectorAll('.mode-toggle-btn').forEach(btn => {      
+    btn.addEventListener('click', () => {
+      const mode = (btn as HTMLElement).getAttribute('data-mode') as any;
+      state.viewMode = mode;
+      refreshView();
+    });
+  });
+
+  const viewBody = document.getElementById('view-body')!;
+  if (state.viewMode === 'location') {
+    renderLocationView(viewBody);
   } else {
-    renderSWTable(mainContent);
+    renderSWTable(viewBody);    // 리스트 형식
   }
 }
 
-// 통합 저장 및 갱신
-async function saveAllDataToDB() {
-    await Promise.all([
-        savePcToDB(), saveServerToDB(), saveStorageToDB(), saveNetworkToDB(),
-        saveEquipToDB(), saveSwInternalToDB(), saveSwExternalToDB(), 
-        saveCloudToDB(), saveSwUsersToDB(), saveLogsToDB(), saveUsersToDB()
-    ]);
+// 통합 갱신 (저장은 이미 개별 모달에서 처리됨)
+async function refreshAllData() {
     await loadMasterDataFromDB();
     refreshView();
 }
@@ -65,25 +77,24 @@ function initApp() {
 
   try {
     renderNavigation((tab) => {
-      if (tab === '대시보드') {
-        renderDashboard(mainContent);
-      } else {
-        renderSWTable(mainContent);
-      }
+      refreshView();
     });
 
-    initHwModal(() => saveAllDataToDB(), closeAllModals);
-    initSwModal(() => saveAllDataToDB(), closeAllModals);
-
+    initHwModal(() => refreshAllData(), closeAllModals);
+    initSwModal(() => refreshAllData(), closeAllModals);
     initSwUserModal(() => { 
-      saveSwUsersToDB().then(() => {
         loadMasterDataFromDB().then(() => refreshView());
-      });
     }, closeAllModals);
-
+    initDomainModal(() => refreshAllData(), closeAllModals);
+    initPartsMasterModal(() => refreshAllData(), closeAllModals);
+    initJobSpecModal(() => refreshAllData(), closeAllModals);
+    initUserModal(() => refreshAllData(), closeAllModals);
+    
     initDashboardDetailModal();
-    initDomainModal();
     initGuide();
+    pcFlowModal.init(() => {
+      loadMasterDataFromDB().then(() => refreshView());
+    });
 
     loadMasterDataFromDB().then((success) => {
       if (success) {
@@ -104,22 +115,40 @@ function initApp() {
       const cat = state.activeCategory;
       const newId = Math.random().toString(36).substring(2, 9);
       
-      if (cat === 'users') {
-          // 사용자 추가는 renderUserList 내부에서 별도로 처리하거나 여기서 호출 가능
-          // 현재 renderUserList에서 별도로 핸들링하고 있으므로 중복 실행 방지
-          return;
-      }
-
       if (cat === 'hw') {
-        openHwModal({ id: newId, asset_code: '', category: tab } as any, 'add');
+        if (tab === '부품 마스터') {
+          if (activePartsMasterSubTab === 'job-spec') {
+            openJobSpecModal({ id: '' } as any, 'add');
+          } else {
+            openPartsMasterModal({ id: '' } as any, 'add');
+          }
+        } else {
+          openHwModal({ id: newId, asset_code: '', category: tab } as any, 'add');
+        }
       } else if (cat === 'sw') {
-        const swType = tab === '외부' ? '외부SW' : (tab === '내부' ? '내부SW' : '외부SW');
+        const swType = tab === '외부SW' ? '외부SW' : (tab === '내부SW' ? '내부SW' : '외부SW');
         openSwModal({ id: newId, asset_type: swType } as any, 'add');
       } else if (cat === 'ops') {
         if (tab === '도메인') openDomainModal(null);
+        else if (tab === '사용자') openUserModal({ id: '' }, 'add');
       }
       return;
     }
+
+    // 부품 마스터 탭으로 바로가기 연동
+    if (target.closest('#btn-goto-parts-master')) {
+      state.activeCategory = 'hw';
+      state.activeSubTab = '부품 마스터';
+      renderNavigation((tab) => { refreshView(); });
+      refreshView();
+      return;
+    }
+
+    // PC 이동/반납 모달 열기
+    if (target.closest('#btn-pc-flow')) {
+      pcFlowModal.open();
+      return;
+    }
   });
 
   createIcons({
@@ -128,4 +157,91 @@ function initApp() {
   window.addEventListener('refresh-view', () => refreshView());
 }
 
-document.addEventListener('DOMContentLoaded', initApp);
+/**
+ * 헤더 역할 전환 토글 로직
+ */
+function initRoleSwitcher() {
+  const checkbox = document.getElementById('role-toggle-checkbox') as HTMLInputElement;
+  const userLabel = document.querySelector('.role-label.user');
+  const adminLabel = document.querySelector('.role-label.admin');
+
+  if (!checkbox || !userLabel || !adminLabel) return;
+
+  checkbox.addEventListener('change', () => {
+    const mainContent = document.getElementById('main-content')!;
+    if (checkbox.checked) {
+      state.currentUserRole = 'admin';
+      userLabel.classList.remove('active');
+      adminLabel.classList.add('active');
+      document.body.classList.add('admin-mode');
+      
+      // 관리자 모드 전환 시 대시보드로 이동
+      state.activeCategory = 'hw';
+      state.activeSubTab = '대시보드';
+      refreshView();
+      renderNavigation((tab) => {
+        if (tab === '대시보드') {
+          renderDashboard(mainContent);
+        } else {
+          renderSWTable(mainContent);
+        }
+      });
+    } else {
+      state.currentUserRole = 'user';
+      adminLabel.classList.remove('active');
+      userLabel.classList.add('active');
+      document.body.classList.remove('admin-mode');
+      
+      // 실무자 모드 전환 시 서버 목록으로 이동
+      state.activeCategory = 'hw';
+      state.activeSubTab = '서버';
+      refreshView();
+      renderNavigation((tab) => {
+        if (tab === '대시보드') {
+          renderDashboard(mainContent);
+        } else {
+          renderSWTable(mainContent);
+        }
+      });
+    }
+  });
+}
+
+/**
+ * 앱 초기화 (로그인 과정 없이 즉시 시작)
+ */
+function initializeAppDirectly() {
+  const loginContainer = document.getElementById('login-container');
+  const appLayout = document.getElementById('app-layout');
+  const checkbox = document.getElementById('role-toggle-checkbox') as HTMLInputElement;
+  const userLabel = document.querySelector('.role-label.user');
+  const adminLabel = document.querySelector('.role-label.admin');
+
+  // 기본 권한 설정: 실무자 (User)
+  state.currentUserRole = 'user';
+  state.activeCategory = 'hw';
+  state.activeSubTab = '서버'; // 실무자 기본 탭
+
+  // UI 상태 동기화
+  if (checkbox) checkbox.checked = false;
+  if (userLabel) userLabel.classList.add('active');
+  if (adminLabel) adminLabel.classList.remove('active');
+  document.body.classList.remove('admin-mode');
+
+  // 화면 전환
+  if (loginContainer) loginContainer.style.display = 'none';
+  if (appLayout) appLayout.style.display = 'flex';
+
+  // 앱 초기화
+  initRoleSwitcher();
+  initApp();
+
+  // 로고 클릭 시 새로고침 (초기 화면 복귀 효과)
+  const brand = document.querySelector('.brand') as HTMLElement;
+  if (brand) {
+    brand.style.cursor = 'pointer';
+    brand.onclick = () => location.reload();
+  }
+}
+
+document.addEventListener('DOMContentLoaded', initializeAppDirectly);

src/map-editor-main.ts

@@ -0,0 +1,8 @@
+import './styles/common.css';
+import './styles/map-editor.css';
+import { MapEditor } from './views/MapEditor';
+
+document.addEventListener('DOMContentLoaded', () => {
+  const editor = new MapEditor();
+  editor.init();
+});

src/styles/common.css

@@ -1,5 +1,5 @@
 :root {
-  /* --- System Colors (Added) --- */
+  /* --- System Colors --- */
   --color-red: #F21D0D;
   --color-pink: #E8175E;
   --color-magenta: #B92ED1;
@@ -15,36 +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-brown-medium: #D9C6BF;
-  --color-iron-medium: #CCCCCC;
-  --color-steel-medium: #C3CFD5;
-
   /* --- Primary Brand Levels --- */
   --primary-lv-0: #E9EEED;
   --primary-lv-1: #D2DCDB;
@@ -57,24 +27,24 @@
   --primary-lv-8: #193833;
   --primary-lv-9: #162A27;
 
-  /* --- Legacy Aliases (Maintained for compatibility) --- */
+  /* --- Semantic Colors --- */
   --primary-color: var(--primary-lv-6);
   --primary-hover: var(--primary-lv-5);
   --primary-light: var(--primary-lv-0);
 
+  --edit-mode-color: var(--color-dahong);
+  --edit-mode-light: rgba(255, 61, 0, 0.1);
+  --edit-mode-focus: rgba(255, 61, 0, 0.3);
+  --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);
-
-  --dash-primary: #6cc020;
-  --dash-light: #f2f9ec;
-  --dash-danger: #cf222e;
-
+  --success: var(--color-green);
   --header-height: 52px;
 }
 
@@ -83,15 +53,14 @@
   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;
-  font-size: 19px;
+  font-size: 14px;
   overflow: hidden;
 }
 
@@ -102,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 {
@@ -118,160 +88,46 @@ body {
   gap: 1.5rem;
 }
 
-.brand {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-}
+.brand { display: flex; align-items: center; gap: 0.75rem; }
+.main-logo { height: 34px; width: auto; }
+.brand h1 { font-size: 1.1rem; font-weight: 800; color: var(--text-main); white-space: nowrap; }
+.brand h1 .sub-title { font-size: 0.85rem; color: var(--primary-color); font-weight: 600; margin-left: 0.25rem; }
 
-.main-logo {
-  height: 34px;
-  width: auto;
-}
+.integrated-nav { flex: 1; height: 100%; display: flex; align-items: center; gap: 0.25rem; overflow: hidden; }
+.nav-group { display: flex; align-items: center; height: 100%; position: relative; flex-shrink: 0; }
+.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;
-  /* 전체적으로 살짝 축소 */
-  font-weight: 800;
-  color: var(--text-main);
-  white-space: nowrap;
-}
+/* 기본적으로 활성 탭의 서브메뉴 표시 */
+.nav-group.active.is-showing-shelf .lnb-shelf { display: flex; }
 
-.brand h1 .sub-title {
-  font-size: 0.85rem;
-  /* 영문 제목은 더 작게 */
-  color: var(--primary-color);
-  font-weight: 600;
-  margin-left: 0.25rem;
-}
+/* GNB 전체 영역에 마우스가 올라가면 활성 탭의 서브메뉴를 일단 숨김 (다른 메뉴 탐색 우선) */
+.integrated-nav:hover .nav-group.active.is-showing-shelf .lnb-shelf { display: none; }
 
-.integrated-nav {
-  flex: 1;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
+/* 마우스가 올라간 메뉴의 서브메뉴만 표시 */
+.nav-group:hover .lnb-shelf { display: flex !important; }
 
-.nav-group {
-  display: flex;
-  align-items: center;
-  height: 100%;
-}
+.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; }
+.lnb-item:hover { color: var(--primary-color); background-color: var(--primary-light); }
+.lnb-item.active { color: var(--primary-color); background-color: var(--primary-light); font-weight: 700; }
 
-.gnb-trigger {
-  font-size: 14px;
-  font-weight: 700;
-  color: var(--text-main);
-  padding: 0 1rem;
-  cursor: pointer;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  white-space: nowrap;
-}
+.header-actions { display: flex; align-items: center; gap: 1rem; }
+.role-switcher { display: flex; align-items: center; gap: 0.75rem; 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); }
+.role-label.active { color: var(--primary-color); }
+.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; border-radius: 34px; }
+.slider:before { position: absolute; content: ""; height: 12px; width: 12px; left: 3px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%; }
+input:checked + .slider { background-color: var(--color-orange); }
+input:checked + .slider:before { transform: translateX(16px); }
 
-.lnb-shelf {
-  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);
-  }
-}
-
-/* --- 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 --- */
+/* --- Layout Content --- */
 .content-area {
   flex: 1;
-  padding: 1.25rem 2rem 0; /* 상단 여백 1.25rem 추가 */
+  padding: 1.25rem 2rem 0;
   overflow: hidden;
-  /* 전체 스크롤 차단 */
   display: flex;
   flex-direction: column;
 }
@@ -282,9 +138,44 @@ body {
   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 {
   height: 28px;
@@ -321,6 +212,10 @@ body {
 }
 
 /* --- Utility Styles --- */
+.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; }
+.btn-primary { background-color: var(--primary-color); color: var(--white); border: none; }
+.btn-outline { background-color: transparent; color: var(--text-muted); border: 1px solid var(--border-color); }
+
 .badge {
   padding: 2px 6px;
   border-radius: 4px;
@@ -339,6 +234,42 @@ body {
   color: white;
 }
 
+.badge-light {
+  background: var(--bg-color);
+  color: var(--text-muted);
+  border: 1px solid var(--border-color);
+}
+
+/* PC 성능 등급 뱃지 컬러 스타일 */
+.badge.b-purple {
+  background-color: #EDE9FE;
+  color: #7C3AED;
+  border: 1px solid #DDD6FE;
+  font-size: 11px;
+  padding: 2px 6px;
+}
+.badge.b-primary {
+  background-color: #DBEAFE;
+  color: #1D4ED8;
+  border: 1px solid #BFDBFE;
+  font-size: 11px;
+  padding: 2px 6px;
+}
+.badge.b-green {
+  background-color: #D1FAE5;
+  color: #047857;
+  border: 1px solid #A7F3D0;
+  font-size: 11px;
+  padding: 2px 6px;
+}
+.badge.b-yellow {
+  background-color: #FEF3C7;
+  color: #D97706;
+  border: 1px solid #FDE68A;
+  font-size: 11px;
+  padding: 2px 6px;
+}
+
 .text-tag {
   color: var(--text-muted);
   font-size: 16px;
@@ -368,7 +299,6 @@ body {
 }
 
 @media (max-width: 768px) {
-  .brand h1 .sub-title { display: none; } /* 아주 좁은 화면에선 영문명 숨김 */
-  .header-actions .btn span { display: none; } /* 버튼 텍스트 숨기고 아이콘만 표시 */
-  .header-actions .btn { padding: 0 0.5rem; }
-}
+  .brand h1 .sub-title { display: none; }
+  .header-actions .btn span { display: none; }
+}

src/styles/dashboard.css

@@ -1,10 +1,13 @@
 /* --- Premium Executive Dashboard View Specific Styles --- */
 .dashboard-section-title {
-  padding: 0 0 1rem 0;
+  padding: 0 0 0 8px;
   font-size: 1.55rem;
   font-weight: 800;
   color: var(--text-main);
   letter-spacing: -0.02em;
+  border-left: 4px solid var(--primary-color);
+  margin-bottom: 1rem;
+  line-height: 1.2;
 }
 
 .dashboard-grid {
@@ -14,23 +17,25 @@
   margin-bottom: 2rem;
 }
 
-/* Premium Glassmorphism Card Style */
+/* Premium Executive Divider-based Style (Line-based Division) */
 .dashboard-card, .stat-card {
-  background: rgba(255, 255, 255, 0.7);
-  backdrop-filter: blur(10px);
-  -webkit-backdrop-filter: blur(10px);
-  border: 1px solid rgba(255, 255, 255, 0.5);
-  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.07);
-  border-radius: 12px;
-  padding: 1.5rem;
+  background: transparent;
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+  border: none;
+  border-bottom: 1px solid var(--border-color);
+  box-shadow: none;
+  border-radius: 0;
+  padding: 1.5rem 0.5rem;
   display: flex;
   flex-direction: column;
-  transition: transform 0.2s ease, box-shadow 0.2s ease;
+  transition: opacity 0.2s ease;
 }
 
 .dashboard-card:hover, .stat-card:hover {
-  transform: translateY(-5px);
-  box-shadow: 0 12px 40px rgba(31, 38, 135, 0.12);
+  transform: none;
+  box-shadow: none;
+  opacity: 0.85;
 }
 
 .dashboard-layout-2col {
@@ -57,7 +62,7 @@
 
 /* Premium KPI Value Styling */
 .stat-value {
-  font-size: 2.2rem;
+  font-size: 2.41rem;
   font-weight: 800;
   background: linear-gradient(135deg, #1E5149 0%, #3B82F6 100%);
   -webkit-background-clip: text;
@@ -75,7 +80,7 @@
 }
 
 .stat-label {
-  font-size: 1.15rem;
+  font-size: 1.36rem;
   color: var(--text-muted);
   font-weight: 700;
   text-transform: uppercase;
@@ -115,7 +120,7 @@
   font-weight: 700;
   padding: 1rem;
   text-transform: uppercase;
-  font-size: 0.75rem;
+  font-size: 0.96rem;
   letter-spacing: 0.05em;
 }
 
@@ -123,7 +128,7 @@
   padding: 1rem;
   border-bottom: 1px solid #E2E8F0;
   color: #1E293B;
-  font-size: 13px;
+  font-size: 16px;
 }
 
 .table-premium tr:hover td {
@@ -170,10 +175,30 @@
   cursor: not-allowed;
 }
 
+.page-info {
+  font-size: 0.96rem;
+  color: var(--text-muted);
+  font-weight: 600;
+}
+
+.page-btns button {
+  padding: 0.3rem 0.75rem;
+  border: 1px solid var(--border-color);
+  background: var(--white);
+  border-radius: 4px;
+  font-size: 0.96rem;
+  cursor: pointer;
+}
+
+.page-btns button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
 .slider-indicator {
   font-weight: 700;
   color: var(--text-muted);
-  font-size: 1.2rem;
+  font-size: 1.41rem;
 }
 
 .dashboard-slider-viewport {
@@ -185,11 +210,317 @@
 .dashboard-slider-track {
   display: flex;
   transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
-  width: 200%; /* For 2 pages */
+  width: 400%; /* For 4 pages */
 }
 
 .dashboard-slide {
-  width: 50%; /* 100% / 2 pages */
+  width: 25%; /* 100% / 4 pages */
   flex-shrink: 0;
   padding: 0 2px; /* Slight padding to avoid cutting off box-shadows */
+  height: calc(100vh - 150px);
+  min-height: 520px;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+}
+
+/* --- Location View Styles --- */
+.location-layout {
+  display: grid;
+  grid-template-columns: 1.2fr 1fr;
+  gap: 2rem;
+  height: calc(100vh - 180px);
+}
+
+.map-section, .asset-section {
+  display: flex;
+  flex-direction: column;
+}
+
+.section-title {
+  font-size: 1.125rem;
+  font-weight: 700;
+  margin-bottom: 1rem;
+  color: var(--text-main);
+  display: flex;
+  align-items: center;
+}
+
+.map-wrapper {
+  flex: 1;
+  background: #f8fafc;
+  box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);
+}
+
+.location-box {
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+  user-select: none;
+}
+
+.location-box:hover {
+  background: rgba(30, 81, 73, 0.2) !important;
+  transform: scale(1.02);
+  z-index: 10;
+}
+
+.location-box:active {
+  transform: scale(0.98);
+}
+
+.asset-section .table-container {
+  flex: 1;
+  overflow-y: auto;
+}
+
+.status-tag {
+  display: inline-block;
+  padding: 0.25rem 0.625rem;
+  border-radius: 9999px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  background: #ecfdf5;
+  color: #059669;
+  border: 1px solid #d1fae5;
+}
+
+.view-toggle-btn:hover {
+  border-color: var(--primary-color) !important;
+  color: var(--primary-color) !important;
+}
+
+.view-toggle-btn.active:hover {
+  color: white !important;
+}
+
+/* --- View Toggle Header --- */
+.view-header {
+  padding: 0.5rem 1.5rem;
+  background: var(--white);
+  border-bottom: 1px solid var(--border-color);
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 1rem;
+}
+
+.view-toggle-container {
+  display: flex;
+  background: #f1f5f9;
+  padding: 0.25rem;
+  border-radius: 8px;
+  gap: 0.25rem;
+}
+
+.mode-toggle-btn {
+  padding: 0.5rem 1rem;
+  border: none;
+  background: transparent;
+  border-radius: 6px;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: var(--text-muted);
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.mode-toggle-btn:hover {
+  color: var(--text-main);
+}
+
+.mode-toggle-btn.active {
+  background: var(--white);
+  color: var(--primary-color);
+  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+}
+
+/* --- Enhanced Location View --- */
+.location-view-wrapper {
+  display: flex;
+  flex-direction: column;
+  height: calc(100vh - 120px);
+}
+
+.location-filter-bar {
+  padding: 1rem 1.5rem;
+  background: var(--white);
+  border-bottom: 1px solid var(--border-color);
+  display: flex;
+  align-items: center;
+  gap: 2rem;
+}
+
+.filter-group {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.filter-group label {
+  font-size: 0.8125rem;
+  font-weight: 700;
+  color: var(--text-main);
+}
+
+.filter-group select {
+  padding: 0.4rem 0.75rem;
+  border: 1px solid var(--border-color);
+  border-radius: 6px;
+  font-size: 0.8125rem;
+  color: var(--text-main);
+  background: var(--white);
+  min-width: 140px;
+}
+
+.map-pagination {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.location-main-content {
+  flex: 1;
+  display: grid;
+  grid-template-columns: 1.4fr 1fr;
+  gap: 1.5rem;
+  padding: 1.5rem;
+  overflow: hidden;
+}
+
+.map-container-section {
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+}
+
+.location-box-point {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s ease;
+}
+
+.box-label-text {
+  font-size: 0.65rem;
+  font-weight: 800;
+  color: var(--primary-color);
+  pointer-events: none;
+  text-shadow: 0 0 2px white;
+}
+
+.asset-list-section {
+  background: var(--white);
+  border-radius: 12px;
+  border: 1px solid var(--border-color);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.asset-list-section .section-header {
+  padding: 1rem 1.25rem;
+  border-bottom: 1px solid var(--border-color);
+  background: #f8fafc;
+}
+
+.asset-list-section h4 {
+  margin: 0;
+  font-size: 0.9375rem;
+  color: var(--text-main);
+}
+
+.mini-table-wrapper {
+  flex: 1;
+  overflow-y: auto;
+}
+
+.compact-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.compact-table th {
+  position: sticky;
+  top: 0;
+  background: var(--white);
+  padding: 0.75rem 1rem;
+  text-align: left;
+  font-size: 0.75rem;
+  font-weight: 700;
+  color: var(--text-muted);
+  border-bottom: 1px solid var(--border-color);
+}
+
+.compact-table td {
+  padding: 0.75rem 1rem;
+  font-size: 0.8125rem;
+  border-bottom: 1px solid #f1f5f9;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 150px;
+}
+
+.compact-table tr.clickable-row:hover {
+  background: #f1f5f9;
+  cursor: pointer;
+}
+
+/* --- Asset Detail Sidebar (LocationView) --- */
+.asset-detail-sidebar {
+  padding-top: 1rem;
+  background: var(--white);
+  height: 100%;
+  overflow-y: auto;
+}
+
+.detail-section {
+  margin-bottom: 20px;
+  padding: 0 1.25rem;
+}
+
+.detail-section-title {
+  font-size: 13px;
+  font-weight: 700;
+  color: var(--primary-color);
+  border-bottom: 1px solid var(--border-color);
+  padding-bottom: 6px;
+  margin-bottom: 12px;
+}
+
+.detail-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(80px, auto) 1fr);
+  gap: 8px 16px;
+}
+
+.detail-label {
+  font-size: 12px;
+  color: var(--text-muted);
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+}
+
+.detail-value {
+  font-size: 14px;
+  color: var(--text-main);
+  font-weight: 500;
+  word-break: break-all;
+  display: flex;
+  align-items: center;
+}
+
+.detail-header-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+}
+
+.detail-header-title {
+  flex: 1;
+  font-size: 0.95rem;
+  font-weight: 700;
 }

src/styles/login.css

@@ -0,0 +1,115 @@
+/* Login Screen Styles */
+
+.login-layout {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  background-color: var(--bg-color);
+  padding: 1.5rem;
+}
+
+.login-card {
+  width: 100%;
+  max-width: 500px;
+  background-color: var(--white);
+  border: 1px solid var(--border-color);
+  border-radius: 12px;
+  padding: 3rem;
+  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.08);
+  animation: slideUp 0.4s ease-out;
+}
+
+@keyframes slideUp {
+  from { opacity: 0; transform: translateY(10px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.login-header {
+  text-align: center;
+  margin-bottom: 2.5rem;
+}
+
+.login-logo {
+  height: 52px;
+  margin-bottom: 1.25rem;
+}
+
+.login-header h2 {
+  font-size: 1.75rem;
+  font-weight: 800;
+  color: var(--text-main);
+  margin-bottom: 0.5rem;
+}
+
+.login-header p {
+  font-size: 0.9375rem;
+  color: var(--text-muted);
+}
+
+.login-selection {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1.5rem;
+}
+
+.role-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  padding: 2rem 1.5rem;
+  border: 2px solid var(--bg-light);
+  border-radius: 10px;
+  cursor: pointer;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  background-color: var(--bg-light);
+}
+
+.role-card:hover {
+  border-color: var(--primary-color);
+  background-color: var(--white);
+  transform: translateY(-4px);
+  box-shadow: 0 10px 20px rgba(30, 81, 73, 0.08);
+}
+
+.role-icon {
+  width: 56px;
+  height: 56px;
+  background-color: var(--white);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 1.25rem;
+  color: var(--primary-color);
+  border: 1px solid var(--border-color);
+  transition: all 0.2s;
+}
+
+.role-card:hover .role-icon {
+  background-color: var(--primary-color);
+  color: var(--white);
+  border-color: var(--primary-color);
+}
+
+.role-card h3 {
+  font-size: 1.125rem;
+  font-weight: 700;
+  color: var(--text-main);
+  margin-bottom: 0.5rem;
+}
+
+.role-card p {
+  font-size: 0.8125rem;
+  color: var(--text-muted);
+  line-height: 1.4;
+}
+
+.login-footer {
+  margin-top: 3rem;
+  text-align: center;
+  font-size: 0.75rem;
+  color: var(--text-muted);
+}
+

src/styles/map-editor.css

@@ -0,0 +1,159 @@
+/* ITAM Map Coordinate Editor Styles */
+
+.file-sidebar { 
+  width: 260px; 
+  background: var(--white); 
+  border-right: 1px solid var(--border-color); 
+  display: flex; 
+  flex-direction: column; 
+  overflow-y: auto; 
+}
+
+.folder-item { 
+  padding: 10px 15px; 
+  background: var(--bg-light); 
+  font-weight: bold; 
+  font-size: 13px; 
+  border-bottom: 1px solid var(--border-color); 
+  color: var(--primary-color); 
+}
+
+.file-item { 
+  padding: 8px 25px; 
+  cursor: pointer; 
+  font-size: 12px; 
+  border-bottom: 1px solid var(--bg-color); 
+  transition: background 0.2s; 
+}
+
+.file-item:hover { background: var(--bg-light); }
+.file-item.active { background: var(--primary-color); color: var(--white); font-weight: bold; }
+
+/* Center: Editor Area */
+.editor-container { 
+  flex: 1; 
+  position: relative; 
+  overflow: auto; 
+  padding: 20px; 
+  display: flex; 
+  align-items: center; 
+  justify-content: center; 
+  background: #e0e0e0; /* 전용 배경색 유지 */
+}
+
+.img-wrapper { 
+  position: relative; 
+  display: inline-block; 
+  box-shadow: 0 0 30px rgba(0,0,0,0.3); 
+  background: var(--white); 
+  line-height: 0; 
+}
+
+.img-wrapper img { 
+  display: block;
+  max-width: calc(100vw - 650px); 
+  max-height: 85vh; 
+  width: auto;
+  height: auto;
+  user-select: none; 
+  -webkit-user-drag: none; 
+}
+
+/* Right Sidebar: Control Panel */
+.sidebar { 
+  width: 350px; 
+  background: var(--white); 
+  border-left: 1px solid var(--border-color); 
+  display: flex; 
+  flex-direction: column; 
+  padding: 20px; 
+  box-shadow: -5px 0 15px rgba(0,0,0,0.05); 
+}
+
+.sidebar h2 { margin-top: 0; color: var(--primary-color); font-size: 1.2rem; }
+.sidebar p { font-size: 0.85rem; color: var(--text-muted); line-height: 1.4; margin-bottom: 20px; }
+
+.current-path { font-size: 11px; color: var(--text-muted); margin-bottom: 10px; word-break: break-all; font-family: monospace; }
+
+.box-list { 
+  flex: 1; 
+  overflow-y: auto; 
+  margin-bottom: 15px; 
+  border: 1px solid var(--border-color); 
+  border-radius: 4px; 
+  padding: 10px; 
+  background: var(--bg-light); 
+}
+
+.box-item { 
+  font-family: monospace; 
+  font-size: 11px; 
+  padding: 6px; 
+  border-bottom: 1px solid var(--border-color); 
+  display: flex; 
+  justify-content: space-between; 
+  align-items: center; 
+}
+
+.box-item:hover { background: var(--white); }
+.btn-del { cursor: pointer; color: var(--danger); border: none; background: none; font-size: 16px; padding: 0 5px; }
+
+.actions { display: flex; flex-direction: column; gap: 8px; }
+
+/* Drawing Elements */
+.draw-box { 
+  position: absolute; 
+  border: 2px solid var(--edit-mode-color); 
+  background: rgba(255, 61, 0, 0.2); 
+  pointer-events: none; 
+  z-index: 100; 
+}
+
+.placed-box { 
+  position: absolute; 
+  border: 1.5px solid var(--primary-color); 
+  background: rgba(30, 81, 73, 0.15); 
+  cursor: pointer; 
+  z-index: 50; 
+}
+
+.placed-box:hover { 
+  background: rgba(30, 81, 73, 0.4); 
+  border-color: #000; 
+}
+
+.placed-box.selected { 
+  border: 2.5px solid var(--edit-mode-color); 
+  z-index: 60; 
+  box-shadow: 0 0 10px rgba(255,61,0,0.5); 
+}
+
+.box-label {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 10px;
+  font-weight: bold;
+  color: var(--primary-color);
+  pointer-events: none;
+  white-space: nowrap;
+  background: rgba(255,255,255,0.7);
+  padding: 0 2px;
+  border-radius: 2px;
+  line-height: 1;
+}
+
+.draw-box .box-label {
+  color: var(--edit-mode-color);
+  background: rgba(255,255,255,0.8);
+}
+
+#save-status { 
+  margin-top: 8px; 
+  font-size: 11px; 
+  color: var(--success); 
+  text-align: center; 
+  font-weight: bold; 
+  height: 14px; 
+}

src/styles/modal.css

@@ -47,7 +47,7 @@
 }
 
 .modal-header .btn-icon {
-  color: #FFFFFF !important;
+  color: var(--white) !important;
   cursor: pointer;
   background: none !important;
   border: none !important;
@@ -129,7 +129,7 @@
   display: none !important;
 }
 
-.grid-form.is-view-mode button {
+.grid-form.is-view-mode button:not(.btn-loc-action) {
   pointer-events: none !important;
   background: none !important;
   border: none !important;
@@ -143,7 +143,7 @@
 .grid-form.is-edit-mode input,
 .grid-form.is-edit-mode select,
 .grid-form.is-edit-mode textarea {
-  color: #FF3D00; /* 수정 시 글자색 변경 */
+  color: var(--edit-mode-color); /* 수정 시 글자색 변경 */
   border: 1px solid var(--border-color);
 }
 
@@ -160,8 +160,8 @@
 .grid-form.is-edit-mode input:focus,
 .grid-form.is-edit-mode select:focus,
 .grid-form.is-edit-mode textarea:focus {
-  border-color: #FF3D00;
-  box-shadow: 0 0 0 2px rgba(255, 61, 0, 0.1);
+  border-color: var(--edit-mode-color);
+  box-shadow: 0 0 0 2px var(--edit-mode-focus);
 }
 
 .form-section-title:first-child {
@@ -379,16 +379,21 @@
   flex: 1;
   overflow-y: auto;
   max-height: 500px;
-  padding-right: 0.5rem;
+  padding-right: 8px;
+  margin-top: 8px;
 }
 
 .history-item {
   position: relative;
-  padding-left: 1.25rem;
-  padding-bottom: 1.5rem;
+  padding-left: 20px;
+  padding-bottom: 20px;
   border-left: 2px solid var(--border-color);
 }
 
+.history-item:last-child {
+  border-left: 2px solid transparent;
+}
+
 .history-item::before {
   content: '';
   position: absolute;
@@ -399,34 +404,68 @@
   border-radius: 50%;
   background-color: var(--white);
   border: 2px solid var(--primary-color);
+  z-index: 1;
 }
 
-.history-item:last-child {
-  border-left: 2px solid transparent;
+/* Event Specific Markers */
+.history-item.evt-dept::before { border-color: #3b82f6; }
+.history-item.evt-user::before { border-color: #8b5cf6; }
+.history-item.evt-role::before { border-color: #10b981; }
+.history-item.evt-status::before { border-color: #f59e0b; }
+
+.history-header-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 4px;
 }
 
 .history-date {
-  font-size: 1.05rem;
+  font-size: 11px;
   color: var(--text-muted);
   font-weight: 500;
-  margin-bottom: 0.25rem;
 }
 
+.history-tag {
+  font-size: 10px;
+  font-weight: 700;
+  padding: 2px 6px;
+  border-radius: 10px;
+  text-transform: uppercase;
+}
+
+.tag-dept { background: #eff6ff; color: #3b82f6; }
+.tag-user { background: #f5f3ff; color: #8b5cf6; }
+.tag-role { background: #ecfdf5; color: #10b981; }
+.tag-status { background: #fffbeb; color: #f59e0b; }
+.tag-default { background: #f3f4f6; color: #6b7280; }
+
 .history-user {
-  font-size: 1.05rem;
+  font-size: 11px;
   font-weight: 600;
-  color: var(--primary-color);
-  margin-bottom: 0.25rem;
+  color: var(--text-main);
+  margin-bottom: 6px;
+  display: block;
 }
 
 .history-details {
-  font-size: 1.1rem;
+  font-size: 12.5px;
   color: var(--text-main);
-  line-height: 1.4;
-  white-space: pre-wrap;
+  line-height: 1.5;
+  background: #f8fafc;
+  padding: 8px 10px;
+  border-radius: 6px;
+  border: 1px solid #f1f5f9;
   word-break: break-all;
 }
 
+.history-arrow {
+  display: inline-block;
+  margin: 0 4px;
+  color: var(--text-muted);
+  font-weight: 400;
+}
+
 .empty-history {
   padding: 2rem 0;
   text-align: center;
@@ -508,3 +547,283 @@
   color: #3b82f6;
   background: #eff6ff;
 }
+
+/* Layout Map & Image Picker Styles */
+.layout-map-container {
+  position: relative;
+  display: inline-block;
+  cursor: crosshair;
+  background-color: #f0f0f0;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.layout-map-container.readonly {
+  cursor: default;
+}
+
+.layout-map-container.readonly .map-seat-obj {
+  pointer-events: none;
+}
+
+.digital-overlay-layer {
+  position: absolute;
+  top: 0; left: 0; width: 100%; height: 100%;
+  pointer-events: none;
+  z-index: 8;
+}
+
+.digital-map-svg {
+  width: 100%; height: 100%;
+}
+
+.map-seat-obj {
+  fill: rgba(30, 81, 73, 0.02);
+  stroke: rgba(30, 81, 73, 0.15); /* 평상시에도 아주 연하게 보이게 수정 */
+  stroke-width: 0.2;
+  cursor: pointer;
+  pointer-events: all;
+  transition: all 0.2s;
+}
+
+.map-seat-obj:hover {
+  fill: rgba(30, 81, 73, 0.3);
+  stroke: rgba(30, 81, 73, 0.6);
+  stroke-width: 0.5;
+}
+
+.layout-map-img {
+  display: block;
+  max-width: 100%;
+  max-height: 75vh;
+  user-select: none;
+  -webkit-user-drag: none;
+}
+
+.layout-marker {
+  position: absolute;
+  width: 14px;
+  height: 14px;
+  background-color: rgba(30, 81, 73, 0.7);
+  border: 2px solid #FFFFFF;
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+  z-index: 10;
+  box-shadow: 0 0 8px rgba(0,0,0,0.4);
+}
+
+.pulse-marker {
+  background-color: rgba(255, 61, 0, 0.8) !important;
+  border-color: #FFFFFF !important;
+  animation: marker-pulse 1.2s infinite;
+}
+
+@keyframes marker-pulse {
+  0% { transform: translate(-50%, -50%) scale(1); box-shadow: 0 0 0 0 rgba(255, 61, 0, 0.6); }
+  70% { transform: translate(-50%, -50%) scale(1.6); box-shadow: 0 0 0 10px rgba(255, 61, 0, 0); }
+  100% { transform: translate(-50%, -50%) scale(1); box-shadow: 0 0 0 0 rgba(255, 61, 0, 0); }
+}
+
+.image-picker-overlay {
+  position: fixed;
+  top: 0; left: 0; right: 0; bottom: 0;
+  background: rgba(0,0,0,0.85);
+  z-index: 2500;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+}
+
+.image-picker-header {
+  width: 100%;
+  max-width: 900px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 15px;
+}
+
+.image-picker-header h3 {
+  color: white;
+  margin: 0;
+  font-size: 1.25rem;
+  font-weight: 600;
+}
+
+.image-picker-content {
+  background: white;
+  padding: 8px;
+  border-radius: 8px;
+  max-width: 95vw;
+  max-height: 80vh;
+  overflow: auto;
+  position: relative;
+  box-shadow: 0 20px 50px rgba(0,0,0,0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.picker-nav {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 40px;
+  height: 60px;
+  background: rgba(0,0,0,0.5);
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 24px;
+  cursor: pointer;
+  z-index: 100;
+  user-select: none;
+  transition: background 0.2s;
+}
+
+.picker-nav:hover { background: rgba(0,0,0,0.8); }
+.picker-nav.disabled { opacity: 0.2; cursor: not-allowed; }
+.picker-nav.prev { left: 10px; border-radius: 0 4px 4px 0; }
+.picker-nav.next { right: 10px; border-radius: 4px 0 0 4px; }
+
+.image-picker-footer {
+  margin-top: 20px;
+  display: flex;
+  gap: 12px;
+}
+
+.btn-loc-action {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  padding: 0 6px;
+  font-size: 10px !important;
+  font-weight: 600;
+  border-radius: 4px;
+  height: 24px;
+  min-width: 52px;
+  white-space: nowrap;
+  transition: all 0.2s;
+}
+
+.btn-loc-view {
+  background-color: var(--primary-color);
+  color: white !important;
+  border: none;
+}
+
+.btn-loc-view:hover {
+  background-color: #163d37;
+}
+
+.location-detail-container {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.location-detail-container select {
+  flex: 1;
+}
+
+/* Dynamic Remote Info Row */
+.remote-info-row {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 8px 0;
+  border-bottom: 1px dashed var(--border-color);
+}
+
+.remote-info-row:last-child {
+  border-bottom: none;
+}
+
+.ri-line {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.ri-line select,
+.ri-line input {
+  height: 38px;
+  box-sizing: border-box;
+  font-size: 13px;
+  padding: 0 10px;
+  border: 1px solid var(--border-color);
+  border-radius: 4px;
+  outline: none;
+  background-color: var(--white);
+  color: var(--text-main);
+  transition: border-color 0.2s;
+}
+
+.ri-line select:disabled,
+.ri-line input[readonly] {
+  background-color: var(--bg-muted);
+  border-color: transparent;
+  cursor: default;
+}
+
+.ri-line select:focus,
+.ri-line input:focus {
+  border-color: var(--primary-color);
+  box-shadow: 0 0 0 2px rgba(30, 81, 73, 0.1);
+}
+
+.ri-type, .ri-tool {
+  width: 110px;
+  flex-shrink: 0;
+}
+
+.ri-val1, .ri-id, .ri-pw {
+  flex: 1;
+  min-width: 0;
+}
+
+.ri-remove-btn {
+  height: 38px;
+  width: 38px;
+  padding: 0;
+  color: #E11D48;
+  border: 1px solid #E11D48;
+  background: transparent;
+  border-radius: 4px;
+  cursor: pointer;
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 18px;
+  transition: all 0.2s;
+}
+
+.ri-remove-btn:hover {
+  background-color: #FFF1F2;
+}
+
+.ri-spacer {
+  width: 46px; /* 38px btn + 8px gap */
+  flex-shrink: 0;
+}
+
+.ri-connector {
+  width: 24px;
+  height: 24px;
+  border-left: 1.5px solid #94a3b8;
+  border-bottom: 1.5px solid #94a3b8;
+  margin-top: -24px;
+  margin-left: 12px;
+  border-bottom-left-radius: 6px;
+  flex-shrink: 0;
+}
+
+.ri-cred-line {
+  margin-top: -4px;
+}

src/styles/table.css

@@ -10,27 +10,19 @@
 }
 
 .page-title {
-  font-size: 21px;
+  font-size: 16px;
   font-weight: 700;
   color: var(--primary-color);
   display: flex;
   align-items: center;
-  gap: 0.5rem;
   margin: 0;
-}
-
-.page-title i {
-  display: flex;
-  align-items: center;
-}
-
-.page-title svg {
-  width: 18px;
-  height: 18px;
+  border-left: 4px solid var(--primary-color);
+  padding-left: 8px;
+  line-height: 1.2;
 }
 
 .page-description {
-  font-size: 17px;
+  font-size: 12px;
   color: var(--text-muted);
   margin: 0;
   line-height: 1.4;
@@ -72,7 +64,7 @@
 }
 
 .search-item label {
-  font-size: 16px;
+  font-size: 11px;
   font-weight: 700;
   color: var(--text-muted);
 }
@@ -83,7 +75,7 @@
   padding: 0 1rem;
   border: 1px solid var(--border-color);
   border-radius: 4px;
-  font-size: 19px;
+  font-size: 14px;
   outline: none;
   background-color: var(--white);
 }
@@ -128,7 +120,7 @@ table {
 
 th, td {
   padding: 0.8rem 1.2rem;
-  border-bottom: 1px solid #F3F4F6;
+  border-bottom: 1px solid var(--border-color);
   text-align: left; /* 기본은 좌측 정렬 */
   white-space: nowrap;
 }
@@ -140,8 +132,8 @@ thead {
 }
 
 th {
-  background-color: #FAFAFA !important;
-  font-size: 18px;
+  background-color: var(--bg-light) !important;
+  font-size: 13px;
   font-weight: 600;
   color: var(--text-muted);
   position: sticky;
@@ -152,13 +144,13 @@ th {
 }
 
 td {
-  font-size: 18px;
+  font-size: 13px;
   color: var(--text-main);
   font-weight: 400;
 }
 
 tbody tr:hover {
-  background-color: #F9FAFB;
+  background-color: var(--bg-color);
 }
 
 /* 정렬 클래스 강제 적용 */

src/views/Dashboard/SwDashboard.ts

@@ -38,17 +38,17 @@ export function renderSwDashboard(container: HTMLElement) {
       
       <div class="dashboard-layout-2col" style="margin-bottom: 1.5rem;">
         <div class="dashboard-card" data-action="ext-usage" style="cursor:pointer; min-height:auto;">
-          <span style="font-size:1rem; font-weight:700; color:var(--text-main);">외부 소프트웨어 사용율</span>
-          <div style="font-size: 0.8125rem; color:var(--text-muted); margin-bottom: 1rem;">${extQty}카피 중 ${extUsed}개 할당</div>
-          <div style="font-size: 2rem; font-weight:700; color:var(--dash-primary);">${extPer}%</div>
+          <span style="font-size:1.21rem; font-weight:700; color:var(--text-main);">외부 소프트웨어 사용율</span>
+          <div style="font-size: 1.02rem; color:var(--text-muted); margin-bottom: 1rem;">${extQty}카피 중 ${extUsed}개 할당</div>
+          <div style="font-size: 2.21rem; font-weight:700; color:var(--dash-primary);">${extPer}%</div>
           <div style="width: 100%; height: 4px; background-color: var(--border-color); border-radius: 2px; overflow: hidden; margin-top: 0.5rem;">
             <div style="width: ${extPer}%; height: 100%; background-color: var(--dash-primary);"></div>
           </div>
         </div>
         <div class="dashboard-card" data-action="int-usage" style="cursor:pointer; min-height:auto;">
-          <span style="font-size:1rem; font-weight:700; color:var(--text-main);">내부 소프트웨어 현황</span>
-          <div style="font-size: 0.8125rem; color:var(--text-muted); margin-bottom: 1rem;">등록된 내부 솔루션: ${intTotal}개</div>
-          <div style="font-size: 2rem; font-weight:700; color:var(--dash-primary);">${intPer}%</div>
+          <span style="font-size:1.21rem; font-weight:700; color:var(--text-main);">내부 소프트웨어 현황</span>
+          <div style="font-size: 1.02rem; color:var(--text-muted); margin-bottom: 1rem;">등록된 내부 솔루션: ${intTotal}개</div>
+          <div style="font-size: 2.21rem; font-weight:700; color:var(--dash-primary);">${intPer}%</div>
            <div style="width: 100%; height: 4px; background-color: var(--border-color); border-radius: 2px; overflow: hidden; margin-top: 0.5rem;">
             <div style="width: ${intPer}%; height: 100%; background-color: var(--dash-primary);"></div>
           </div>
@@ -59,12 +59,12 @@ export function renderSwDashboard(container: HTMLElement) {
       
       <div style="display:grid; grid-template-columns: repeat(2, 1fr); gap:1.5rem; margin-bottom:1.5rem;">
         <div class="dashboard-card" style="min-height:auto;">
-          <span style="font-size:1rem; font-weight:700; color:var(--text-main);">외부 SW 누적 비용 (2026)</span>
-          <div style="font-size: 2rem; font-weight:700; color:var(--dash-primary);">₩ ${extCost2026.toLocaleString()}</div>
+          <span style="font-size:1.21rem; font-weight:700; color:var(--text-main);">외부 SW 누적 비용 (2026)</span>
+          <div style="font-size: 2.21rem; font-weight:700; color:var(--dash-primary);">₩ ${extCost2026.toLocaleString()}</div>
         </div>
         <div class="dashboard-card" style="min-height:auto;">
-          <span style="font-size:1rem; font-weight:700; color:var(--text-main);">내부 SW 누적 비용 (2026)</span>
-          <div style="font-size: 2rem; font-weight:700; color:#3b82f6;">₩ ${intCost2026.toLocaleString()}</div>
+          <span style="font-size:1.21rem; font-weight:700; color:var(--text-main);">내부 SW 누적 비용 (2026)</span>
+          <div style="font-size: 2.21rem; font-weight:700; color:#3b82f6;">₩ ${intCost2026.toLocaleString()}</div>
         </div>
       </div>
     </div>

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,136 @@
 import { ASSET_SCHEMA, UI_TEXT } from '../../core/schema';
-import { dynamicSort, renderPageHeader } from '../../core/utils';
+import { dynamicSort, renderPageHeader, calculateAssetAge, formatInline, isWindows11Incompatible } 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';
+
+declare var Chart: any;
+let pcFlowChartInstance: any = null;
+
+// ─── 100점 만점 감점형 성능 점수 계산 (CPU + RAM + GPU + 연식) ───
+function calculatePcScoreDeductive(cpu: string, ram: string, gpu: string, purchaseDate: string): number {
+  let score = 100;
+  if (!cpu) cpu = '';
+  if (!ram) ram = '';
+  if (!gpu) gpu = '';
+
+  const cpuUpper = cpu.toUpperCase();
+  const ramUpper = ram.toUpperCase();
+  const gpuUpper = gpu.toUpperCase();
+
+  // 1. CPU 등급 감점 (최대 -30점)
+  let cpuDeduction = 0;
+  if (cpuUpper.includes('I9') || cpuUpper.includes('RYZEN 9') || cpuUpper.includes('RYZEN9')) {
+    cpuDeduction = 0;
+  } else if (cpuUpper.includes('I7') || cpuUpper.includes('RYZEN 7') || cpuUpper.includes('RYZEN7')) {
+    cpuDeduction = 5;
+  } else if (cpuUpper.includes('I5') || cpuUpper.includes('RYZEN 5') || cpuUpper.includes('RYZEN5')) {
+    cpuDeduction = 15;
+  } else if (cpuUpper.includes('I3') || cpuUpper.includes('RYZEN 3') || cpuUpper.includes('RYZEN3')) {
+    cpuDeduction = 25;
+  } else {
+    cpuDeduction = 30;
+  }
+  score -= cpuDeduction;
+
+  // 2. CPU 세대 노후 감점 (최대 -15점)
+  let genDeduction = 0;
+  const intelMatch = cpuUpper.match(/I\d-?(\d+)/);
+  let gen = 0;
+  if (intelMatch && intelMatch[1]) {
+    const numStr = intelMatch[1];
+    if (numStr.length === 5) gen = parseInt(numStr.substring(0, 2), 10);
+    else if (numStr.length === 4) gen = parseInt(numStr.substring(0, 1), 10);
+  }
+
+  const amdMatch = cpuUpper.match(/RYZEN\s?\d\s?-?(\d+)/);
+  let amdGen = 0;
+  if (amdMatch && amdMatch[1] && !intelMatch) {
+    const numStr = amdMatch[1];
+    if (numStr.length === 4) amdGen = parseInt(numStr.substring(0, 1), 10);
+  }
+
+  if (intelMatch) {
+    if (gen >= 12) genDeduction = 0;
+    else if (gen >= 10) genDeduction = 5;
+    else if (gen >= 8) genDeduction = 10;
+    else genDeduction = 15;
+  } else if (amdMatch) {
+    if (amdGen >= 5) genDeduction = 0;
+    else if (amdGen >= 3) genDeduction = 5;
+    else genDeduction = 10;
+  } else {
+    genDeduction = 15;
+  }
+  score -= genDeduction;
+
+  // 3. RAM 용량 감점 (최대 -25점)
+  const ramMatch = ramUpper.match(/(\d+)\s*GB/);
+  let ramDeduction = 25;
+  if (ramMatch && ramMatch[1]) {
+    const ramVal = parseInt(ramMatch[1], 10);
+    if (ramVal >= 32) ramDeduction = 0;
+    else if (ramVal >= 16) ramDeduction = 10;
+    else if (ramVal >= 8) ramDeduction = 20;
+    else ramDeduction = 25;
+  }
+  score -= ramDeduction;
+
+  // 4. GPU 성능 감점 (최대 -25점)
+  let gpuDeduction = 25;
+  if (!gpuUpper || gpuUpper === '-' || gpuUpper.trim() === '') {
+    gpuDeduction = 25;
+  } else if (
+    gpuUpper.includes('RTX 4090') || gpuUpper.includes('RTX 4080') || gpuUpper.includes('RTX 4070') ||
+    gpuUpper.includes('RTX 3090') || gpuUpper.includes('RTX 3080') ||
+    gpuUpper.includes('RTX A5000') || gpuUpper.includes('RTX A6000') || gpuUpper.includes('RTX A4000')
+  ) {
+    gpuDeduction = 0;
+  } else if (
+    gpuUpper.includes('RTX 3070') || gpuUpper.includes('RTX 3060') || gpuUpper.includes('RTX 2060') ||
+    gpuUpper.includes('RTX A2000') || gpuUpper.includes('RTX A3000') || gpuUpper.includes('QUADRO')
+  ) {
+    gpuDeduction = 5;
+  } else if (
+    gpuUpper.includes('GTX 1660') || gpuUpper.includes('GTX 1080') || gpuUpper.includes('GTX 1070') ||
+    gpuUpper.includes('GTX 1060') || gpuUpper.includes('RX 6700') || gpuUpper.includes('RX 6600')
+  ) {
+    gpuDeduction = 15;
+  } else {
+    gpuDeduction = 25;
+  }
+  score -= gpuDeduction;
+
+  // 5. 연식(노후도) 감점 (최대 -15점)
+  let age = 0;
+  if (purchaseDate && purchaseDate !== '-') {
+    let normalized = purchaseDate.replace(/\./g, '-').trim();
+    if (/^\d{6}$/.test(normalized)) {
+      normalized = `${normalized.substring(0, 4)}-${normalized.substring(4, 6)}`;
+    }
+    const purchase = new Date(normalized);
+    if (!isNaN(purchase.getTime())) {
+      // 2026년 5월 31일 기준 경과연수 계산
+      const mockToday = new Date('2026-05-31');
+      const diffMs = mockToday.getTime() - purchase.getTime();
+      age = diffMs / (1000 * 60 * 60 * 24 * 365.25);
+      age = Math.max(0, parseFloat(age.toFixed(1)));
+    }
+  }
+
+  let ageDeduction = 0;
+  if (age < 1) ageDeduction = 0;
+  else if (age < 2) ageDeduction = 3;
+  else if (age < 3) ageDeduction = 6;
+  else if (age < 4) ageDeduction = 9;
+  else if (age < 5) ageDeduction = 12;
+  else ageDeduction = 15;
+
+  score -= ageDeduction;
+
+  return Math.max(10, score);
+}
 
 export interface ColumnDef {
   header: string;           
@@ -23,135 +151,737 @@ export interface ListViewConfig {
     showDept?: boolean;
     showLoc?: boolean;
     showField?: boolean;
+    showType?: boolean;
+    showStatus?: boolean;
+    showPosition?: 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) {
-  renderPageHeader(container, config.title);
+  // 1. 컨테이너 초기화
+  container.innerHTML = '';
 
   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: '' };
+  if (!(state as any).listFilters) {
+    (state as any).listFilters = {};
+  }
+  const filterKey = config.title;
+  if (!(state as any).listFilters[filterKey]) {
+    (state as any).listFilters[filterKey] = { keyword: '', corp: '', dept: '', loc: '', field: '', type: '', status: '' };
+  }
+  let currentFilters: any = (state as any).listFilters[filterKey];
+  
+  // 서버 탭이 아닐 경우 '자산 현황' 뷰 진입 방지 및 강제 'asset' 모드 (PC 탭은 자산 현황 숨김)
+  const isServer = config.title === '서버';
+  if (!isServer) {
+    (state as any).currentViewMode = 'asset';
+  }
 
+  // 1. 컨텐츠 영역 생성 (먼저 생성하여 참조 가능하게 함)
+  const contentWrapper = document.createElement('div');
+  contentWrapper.className = 'view-content-wrapper';
+
+  // 2. 필터 바 생성 (자산 목록에서만 사용)
   const filterBar = document.createElement('div');
   filterBar.className = 'search-bar';
+  
+  // 자산 추가 버튼 및 목록 보기 체크박스 추가 로직
+  const showPcFlowBtn = config.title === 'PC';
+
   container.appendChild(filterBar);
+  container.appendChild(contentWrapper);
+
+  // --- 내부 상태 ---
+  let selectedLocation: string | null = 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';
+    
+    // 실제 보유 자산이 존재하는 위치 목록만 추출 (0대인 곳 제외)
+    const validLocations = Array.from(new Set(fullList.map(a => a[ASSET_SCHEMA.LOCATION.key] || '미지정')))
+      .filter(l => {
+        const count = fullList.filter(a => (a[ASSET_SCHEMA.LOCATION.key] || '미지정') === l).length;
+        return count > 0;
+      })
+      .sort();
+
+    // 초기값이나 유효하지 않은 값이 지정되어 있다면 첫 번째 유효 위치로 동적 갱신
+    if (!selectedLocation || !validLocations.includes(selectedLocation)) {
+      selectedLocation = validLocations[0] || '';
+    }
+    
+    // 동적 통계 수집 객체
+    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 };
+        const isLocWarning = loc !== 'IDC' && loc !== '미지정' && loc !== '';
+        const isTypeWarning = type.toLowerCase().replace(/\s/g, '').includes('서버pc');
+        return { isWarning: isLocWarning || isTypeWarning, isLocWarning, isTypeWarning };
+    };
+
+    fullList.forEach(asset => {
+      const loc = asset[ASSET_SCHEMA.LOCATION.key] || '미지정';
+      const serviceType = asset.service_type || '외부';
+      const type = asset[ASSET_SCHEMA.ASSET_TYPE.key] || '';
+
+      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++;
+      }
+    });
+
+    const generateDetailStatHTML = (title: string, stats: any) => `
+      <div class="detail-stat-header">
+        <span class="stat-title">${title}</span>
+        <div class="stat-badges">
+          ${stats.locWarning ? `<span class="warning-badge-orange">위치부적절: ${stats.locWarning}</span>` : ''}
+          ${stats.typeWarning ? `<span class="warning-badge">형식부적절: ${stats.typeWarning}</span>` : ''}
+        </div>
+      </div>
+      <div class="detail-stat-body">
+        <div class="loc-summary">
+          ${Object.entries(stats.locCounts as Record<string, number>).sort((a, b) => b[1] - a[1]).slice(0, 4).map(([l, c]) => `<span>${l}: <strong>${c}</strong></span>`).join('')}
+        </div>
+        <div class="type-summary">
+          ${Object.entries(stats.typeCounts as Record<string, number>).sort((a, b) => b[1] - a[1]).slice(0, 6).map(([t, c]) => {
+              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}">${t}: <strong>${c}</strong></span>`;
+          }).join('')}
+        </div>
+      </div>
+    `;
+
+    contentWrapper.innerHTML = `
+      <div class="system-dashboard">
+        <div class="dashboard-stats-row">
+          <div class="stat-group-item">
+            <div class="stat-label">총 보유 자산</div>
+            <div class="stat-value">${fullList.length}<span>대</span></div>
+            <div class="stat-sub">
+              <span>외부: <strong class="text-primary">${extStats.total}</strong></span>
+              <span>내부: <strong class="text-muted">${intStats.total}</strong></span>
+            </div>
+          </div>
+          <div class="stat-group-item bordered">${generateDetailStatHTML('외부 (운영) 상세', extStats)}</div>
+          <div class="stat-group-item bordered">${generateDetailStatHTML('내부 (테스트) 상세', intStats)}</div>
+        </div>
+
+        <div class="flex flex-1 min-h-0 border-t border-hairline">
+          <!-- 좌측: 자산 현황 목록 -->
+          <div class="list-section">
+            <div class="flex justify-between items-center mb-4 flex-shrink-0">
+              <h4 id="list-section-title" class="sidebar-title">
+                ${isPcView ? `🔄 PC 유동 이력 (${new Date().getMonth() + 1}월)` : '자산 현황 목록'}
+              </h4>
+              ${!isPcView ? `
+              <div class="filter-row">
+                <span class="detail-label-sm">위치:</span>
+                <select id="select-loc" class="form-select-sm">
+                  <option value="">전체</option>
+                  ${validLocations.map(l => `<option value="${l}" ${l === selectedLocation ? 'selected' : ''}>${l}</option>`).join('')}
+                </select>
+                <select id="select-detail-loc" class="form-select-sm"></select>
+              </div>
+              ` : ''}
+            </div>
+            <div class="flex-1 overflow-y-auto">
+              <table class="compact-table">
+                <thead>
+                  ${isPcView ? `
+                    <tr>
+                      <th class="text-center" style="width: 120px;">일자</th>
+                      <th class="text-center" style="width: 100px;">담당자</th>
+                      <th class="text-center" style="width: 60px;">구분</th>
+                      <th class="text-center" style="width: 90px;">사용자</th>
+                      <th class="text-center" style="width: 90px;">인수자</th>
+                      <th class="text-center" style="width: 160px;">자산번호</th>
+                      <th class="text-center">상세</th>
+                    </tr>
+                  ` : `
+                    <tr>
+                      <th class="text-center" style="width: 80px;">분류</th>
+                      <th class="text-center">용도/자산명</th>
+                      <th class="text-center" style="width: 90px;">관리자(정)</th>
+                      <th class="text-center" style="width: 90px;">관리자(부)</th>
+                      <th class="text-center" style="width: 100px;">상세위치</th>
+                    </tr>
+                  `}
+                </thead>
+                <tbody id="system-status-tbody"></tbody>
+              </table>
+            </div>
+          </div>
+
+          <!-- 우측: 상세 정보 패널 -->
+          <div id="system-detail-panel" class="detail-panel">
+             <div id="detail-empty-state" class="detail-empty-state">
+                ${isPcView ? `
+                  <div class="flex-col h-full text-left">
+                    <div class="flex justify-between items-center mb-4 flex-shrink-0">
+                      <h4 class="sidebar-title text-danger">
+                        ⚠️ 사양 주의 장비 현황 (부족/오버스펙)
+                      </h4>
+                    </div>
+                    <div class="flex-1 overflow-y-auto">
+                      <table class="compact-table">
+                        <thead>
+                          <tr>
+                            <th style="width: 65px;">사용자</th>
+                            <th style="width: 115px;">부서 (직무)</th>
+                            <th class="text-center" style="width: 65px;">상태</th>
+                            <th>자산코드</th>
+                          </tr>
+                        </thead>
+                        <tbody id="spec-mismatch-tbody">
+                          <tr><td colspan="4" class="empty-cell">사양 주의 자산이 없습니다.</td></tr>
+                        </tbody>
+                      </table>
+                    </div>
+                  </div>
+                ` : `
+                  <p class="empty-list-message">목록에서 자산을 선택하면<br>상세 정보와 배치도가 표시됩니다.</p>
+                `}
+             </div>
+             <div id="detail-content" class="detail-content hidden flex-col flex-1 overflow-hidden">
+                <div class="detail-header-actions bg-canvas p-4 border-b border-hairline">
+                  <div class="header-identity">
+                    <span class="asset-code-title" id="detail-asset-code"></span>
+                    <span class="asset-type-label" id="detail-asset-type"></span>
+                  </div>
+                  <button id="btn-view-full-detail" class="btn btn-primary btn-sm">상세 보기</button>
+                </div>
+
+                <!-- 메인 배치도 영역 -->
+                <div class="flex-col flex-1 overflow-hidden p-4">
+                  <div id="detail-photo-wrapper" class="detail-photo-wrapper">
+                    <div class="layout-map-container readonly w-full h-full justify-center">
+                      <img id="detail-photo" src="" class="layout-map-img pointer-events-none" />
+                      <iframe id="detail-html-map" src="" class="hidden w-full h-full border-none"></iframe>
+                      <div id="detail-marker" class="layout-marker pulse-marker hidden absolute z-20"></div>
+                      <div id="detail-overlay-layer" class="absolute pointer-events-none"></div>
+                    </div>
+                    <div id="detail-no-photo" class="no-photo-state hidden">
+                      <span>등록된 배치도가 없습니다.</span>
+                    </div>
+                  </div>
+                </div>
+             </div>
+          </div>
+        </div>
+      </div>
+    `;
+
+    const updateFlowLogsSection = () => {
+      if (!isPcView) return;
+
+      // 사양 주의 장비 현황 (부족/오버스펙) 계산 및 바인딩
+      const specMismatchTbody = document.getElementById('spec-mismatch-tbody');
+      if (specMismatchTbody) {
+        // fullList 중 개인 PC 관련 장비 필터링
+        const pcs = fullList.filter((a: any) => {
+          const type = a[ASSET_SCHEMA.ASSET_TYPE.key] || '';
+          const job = a[ASSET_SCHEMA.USER_POSITION.key] || '';
+          const status = a[ASSET_SCHEMA.HW_STATUS.key] || '';
+          const user = a[ASSET_SCHEMA.CURRENT_USER.key] || '';
+          
+          // 운영 중이고 사용자가 할당되어 있으며, 직무가 재고PC가 아닌 실사용 기기 대상
+          return job !== '재고PC' && status === '운영' && user.trim() !== '';
+        });
+
+        // 직무별 평균 점수 산출
+        const jobScores: Record<string, { totalScore: number; count: number; avg: number }> = {};
+        pcs.forEach((pc: any) => {
+          const job = pc[ASSET_SCHEMA.USER_POSITION.key] || '미분류';
+          const cpu = pc[ASSET_SCHEMA.CPU.key] || '';
+          const ram = pc[ASSET_SCHEMA.RAM.key] || '';
+          const gpu = pc[ASSET_SCHEMA.GPU.key] || '';
+          const pDate = pc[ASSET_SCHEMA.PURCHASE_DATE.key] || '';
+          const score = calculatePcScoreDeductive(cpu, ram, gpu, pDate);
+          pc['_pc_score'] = score;
+          
+          if (!jobScores[job]) jobScores[job] = { totalScore: 0, count: 0, avg: 0 };
+          jobScores[job].totalScore += score;
+          jobScores[job].count += 1;
+        });
+
+        Object.keys(jobScores).forEach(job => {
+          jobScores[job].avg = jobScores[job].count > 0 ? jobScores[job].totalScore / jobScores[job].count : 0;
+        });
+
+        // DB 기준 사양 데이터 맵핑 (state.masterData.jobSpecs 이용)
+        const jobSpecsMap: Record<string, string> = {};
+        if (state.masterData.jobSpecs) {
+          state.masterData.jobSpecs.forEach((s: any) => {
+            jobSpecsMap[s.job_name] = s.required_grade || '중급';
+          });
+        }
+
+        // 사용자 이름 → 세부 직무 맵 생성 (system_users.position 기준)
+        const userPositionMap: Record<string, string> = {};
+        if (state.masterData.users) {
+          state.masterData.users.forEach((u: any) => {
+            if (u.user_name && u.position) {
+              userPositionMap[u.user_name.trim()] = u.position.trim();
+            }
+          });
+        }
+
+        const GRADE_RANK: Record<string, number> = {
+          'premium': 4, '최상급': 4,
+          'high': 3,    '상급': 3,
+          'normal': 2,  '중급': 2,
+          'entry': 1,   '보급': 1,
+          'replace': 0, '교체 대상': 0
+        };
+
+        // 기준 대비 사양 부족/오버스펙 분류
+        const criticalPcList: any[] = [];
+        pcs.forEach((pc: any) => {
+          const userName = (pc[ASSET_SCHEMA.CURRENT_USER.key] || '').trim();
+          const job = userPositionMap[userName] || pc[ASSET_SCHEMA.USER_POSITION.key] || '미분류';
+          const score = pc['_pc_score'];
+          const requiredGrade = jobSpecsMap[job] || jobSpecsMap[pc[ASSET_SCHEMA.USER_POSITION.key]] || '중급';
+          
+          const cpu = pc[ASSET_SCHEMA.CPU.key] || '';
+          const ram = pc[ASSET_SCHEMA.RAM.key] || '';
+          const win11Incompatible = isWindows11Incompatible(cpu, ram);
+          
+          let actualGrade = 'replace';
+          if (score >= 85) actualGrade = 'premium';
+          else if (score >= 70) actualGrade = 'high';
+          else if (score >= 40) actualGrade = 'normal';
+          else if (score >= 20) actualGrade = 'entry';
+
+          const reqRank = GRADE_RANK[requiredGrade] !== undefined ? GRADE_RANK[requiredGrade] : 2;
+          const actRank = GRADE_RANK[actualGrade] !== undefined ? GRADE_RANK[actualGrade] : 0;
+
+          let isUnder = false;
+          if (job !== '재고PC') {
+            if (win11Incompatible) {
+              isUnder = true;
+              pc['_spec_status'] = '사양 부족';
+            } else if (actRank < reqRank) {
+              isUnder = true;
+              pc['_spec_status'] = '사양 부족';
+            } else if (actRank > reqRank) {
+              pc['_spec_status'] = '오버스펙';
+              criticalPcList.push(pc);
+            } else {
+              pc['_spec_status'] = '적정';
+            }
+          } else {
+            if (win11Incompatible) {
+              isUnder = true;
+              pc['_spec_status'] = '사양 부족';
+            } else {
+              pc['_spec_status'] = '적정';
+            }
+          }
+
+          if (isUnder) {
+            criticalPcList.push(pc);
+          }
+        });
+
+        // 정렬: 요구 등급 대비 실제 성능이 많이 부족한 순(등급 편차가 큰 순)으로 정렬
+        criticalPcList.sort((a: any, b: any) => {
+          const userNameA = (a[ASSET_SCHEMA.CURRENT_USER.key] || '').trim();
+          const userNameB = (b[ASSET_SCHEMA.CURRENT_USER.key] || '').trim();
+          const jobA = userPositionMap[userNameA] || a[ASSET_SCHEMA.USER_POSITION.key] || '미분류';
+          const jobB = userPositionMap[userNameB] || b[ASSET_SCHEMA.USER_POSITION.key] || '미분류';
+          
+          const reqA = jobSpecsMap[jobA] || jobSpecsMap[a[ASSET_SCHEMA.USER_POSITION.key]] || '중급';
+          const reqB = jobSpecsMap[jobB] || jobSpecsMap[b[ASSET_SCHEMA.USER_POSITION.key]] || '중급';
+          
+          const scoreA = a['_pc_score'];
+          const scoreB = b['_pc_score'];
+          
+          let actA = 'replace';
+          if (scoreA >= 85) actA = 'premium';
+          else if (scoreA >= 70) actA = 'high';
+          else if (scoreA >= 40) actA = 'normal';
+          else if (scoreA >= 20) actA = 'entry';
+
+          let actB = 'replace';
+          if (scoreB >= 85) actB = 'premium';
+          else if (scoreB >= 70) actB = 'high';
+          else if (scoreB >= 40) actB = 'normal';
+          else if (scoreB >= 20) actB = 'entry';
+
+          const devA = (GRADE_RANK[reqA] || 2) - (GRADE_RANK[actA] || 0);
+          const devB = (GRADE_RANK[reqB] || 2) - (GRADE_RANK[actB] || 0);
+
+          if (devA !== devB) {
+            return devB - devA; // 편차가 큰 것(더 많이 부족한 것)이 먼저 정렬됨
+          }
+          return scoreA - scoreB; // 편차가 같으면 성능 점수가 낮은 순
+        });
+
+        if (criticalPcList.length === 0) {
+          specMismatchTbody.innerHTML = '<tr><td colspan="4" style="text-align:center; padding:1.5rem; color:#94A3B8;">사양 주의 자산이 없습니다.</td></tr>';
+        } else {
+          specMismatchTbody.innerHTML = criticalPcList.map((pc: any) => {
+            const user = pc[ASSET_SCHEMA.CURRENT_USER.key] || '-';
+            const dept = pc[ASSET_SCHEMA.CURRENT_DEPT.key] || '-';
+            const job = pc[ASSET_SCHEMA.USER_POSITION.key] || '-';
+            const status = pc['_spec_status'];
+            const assetCode = pc.asset_code || '-';
+
+            const badgeColor = status === '사양 부족' 
+              ? 'background:#FFF1F2; color:#E11D48; border: 1px solid #FDA4AF;' 
+              : 'background:#F0FDF4; color:#16A34A; border: 1px solid #BBF7D0;';
+
+            return `
+              <tr style="border-bottom: 1px solid var(--border-color); cursor: pointer;" class="spec-row" data-id="${pc.id}">
+                <td style="padding: 10px 0; font-weight: 600; color: #334155; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;" title="${user}">${user}</td>
+                <td style="padding: 10px 0; color: #475569; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;" title="${dept} (${job})">${dept} (${job})</td>
+                <td style="padding: 10px 0; white-space: nowrap; text-align: center;">
+                  <span style="padding: 2px 6px; border-radius: 4px; font-size: 10px; font-weight: 700; ${badgeColor}">${status === '오버스펙' ? '오버 스펙' : status}</span>
+                </td>
+                <td style="padding: 10px 0; font-family: monospace; color: #64748B; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;" title="${assetCode}">${assetCode}</td>
+              </tr>
+            `;
+          }).join('');
+
+          // 클릭 시 해당 자산 상세 페이지로 전환
+          specMismatchTbody.querySelectorAll('.spec-row').forEach(row => {
+            row.addEventListener('click', () => {
+              specMismatchTbody.querySelectorAll('.spec-row').forEach(r => {
+                (r as HTMLElement).style.backgroundColor = 'transparent';
+              });
+              (row as HTMLElement).style.backgroundColor = '#EBF2F1'; // 선택 하이라이트
+              const assetId = row.getAttribute('data-id');
+              const found = fullList.find(a => String(a.id) === String(assetId));
+              if (found) {
+                updateDetailPanel(found);
+              }
+            });
+          });
+        }
+      }
+    };
+
+    const updateDetailPanel = (asset: any) => {
+      const emptyState = document.getElementById('detail-empty-state');
+      const content = document.getElementById('detail-content');
+      if (!emptyState || !content) return;
+
+      emptyState.classList.add('hidden');
+      content.classList.remove('hidden');
+
+      const codeEl = document.getElementById('detail-asset-code');
+      const typeEl = document.getElementById('detail-asset-type');
+      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 (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 bldg = asset.location || '';
+      const detail = asset.location_detail || '';
+      const x = asset.loc_x; const y = asset.loc_y;
+      const hasCoords = (x !== null && x !== undefined && x !== '' && x !== '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);
+
+      const htmlMap = document.getElementById('detail-html-map') as HTMLIFrameElement;
+      const isHtmlMap = imgPath?.toLowerCase().endsWith('.html');
+
+      if (imgPath && hasCoords) {
+        if (isHtmlMap) {
+          photo.style.display = 'none';
+          if (marker) marker.style.display = 'none';
+          if (overlayLayer) overlayLayer.innerHTML = '';
+          if (htmlMap) {
+            htmlMap.src = `${imgPath}?markerX=${x}&markerY=${y}`;
+            htmlMap.classList.remove('hidden');
+            htmlMap.style.display = 'block';
+          }
+        } else {
+          if (htmlMap) {
+            htmlMap.src = '';
+            htmlMap.classList.add('hidden');
+            htmlMap.style.display = 'none';
+          }
+          photo.src = imgPath;
+          photo.style.display = 'block';
+        }
+        
+        if (noPhoto) noPhoto.style.display = 'none';
+        
+        if (!isHtmlMap) {
+          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 (htmlMap) {
+          htmlMap.src = '';
+          htmlMap.style.display = 'none';
+        }
+        if (marker) marker.style.display = 'none';
+        if (overlayLayer) overlayLayer.innerHTML = '';
+        if (noPhoto) { noPhoto.classList.remove('hidden'); noPhoto.style.display = 'flex'; }
+      }
+    };
+
+    // [자산 현황] 테이블 렌더러
+    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, 20) : 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="5" class="empty-cell text-center">조회된 자산이 없습니다.</td></tr>`
+          : finalDisplayList.map(asset => {
+              const purpose = asset[ASSET_SCHEMA.ASSET_PURPOSE.key] || '';
+              const serviceType = asset.service_type || '외부';
+              const type = asset[ASSET_SCHEMA.ASSET_TYPE.key] || '';
+              const loc = asset[ASSET_SCHEMA.LOCATION.key] || '';
+              
+              const isWarning = serviceType === '외부' && (loc !== 'IDC' || type.toLowerCase().includes('서버pc'));
+              const managerMain = asset[ASSET_SCHEMA.MANAGER_MAIN.key] || '-';
+              const managerSub = asset[ASSET_SCHEMA.MANAGER_SUB.key] || '-';
+              
+              return `
+              <tr class="mini-row clickable-row ${isWarning ? 'warning' : ''}" data-id="${asset.id}">
+                <td class="text-center">
+                  <span class="badge ${isWarning ? 'badge-danger' : 'badge-primary'}">${serviceType}</span>
+                </td>
+                <td class="font-bold">${purpose || '-'}</td>
+                <td class="text-center">${managerMain}</td>
+                <td class="text-center">${managerSub}</td>
+                <td class="text-center">${asset[ASSET_SCHEMA.LOC_DETAIL.key] || '-'}</td>
+              </tr>`;
+            }).join('');
+
+        tbody.querySelectorAll('.mini-row').forEach(row => {
+          row.addEventListener('click', () => {
+            tbody.querySelectorAll('.mini-row').forEach(r => r.classList.remove('active'));
+            row.classList.add('active');
+            const asset = fullList.find(a => a.id === row.getAttribute('data-id'));
+            if (asset) updateDetailPanel(asset);
+          });
+        });
+      }
+    };
+
+    setTimeout(() => {
+      document.getElementById('select-loc')?.addEventListener('change', (e) => {
+        selectedLocation = (e.target as HTMLSelectElement).value || null; selectedDetailLocation = null; updateTableOnly();
+      });
+      document.getElementById('select-detail-loc')?.addEventListener('change', (e) => {
+        selectedDetailLocation = (e.target as HTMLSelectElement).value || null; updateTableOnly();
+      });
+      updateTableOnly();
+      updateFlowLogsSection();
+    }, 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(tbody);
+  table.appendChild(thead); table.appendChild(tbody); tableWrapper.appendChild(table);
 
-  tableWrapper.appendChild(table);
-  container.appendChild(tableWrapper);
-
-  // 3. 테이블 업데이트 로직
   const updateTable = () => {
     let filtered = applyCommonFilters(fullList, currentFilters, config.searchKeys as any[]);
-
-    if (sortState.key) {
-      filtered = dynamicSort(filtered, sortState.key, sortState.direction);
-    }
-
-    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;
-    }
-
-    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);
-    });
-
-    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;
-      }
-      updateTable();
-    });
-
-    // 모든 가능한 아이콘 로드 (안전하게)
-    createIcons({ icons: { RefreshCcw, Plus, Edit2, Trash2, Users, Cloud, CreditCard, DollarSign, Paperclip } });
+    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.header}</th>`).join('')}</tr>`;
+    
+    tbody.innerHTML = filtered.length === 0 ? `<tr><td colspan="${config.columns.length}" class="text-center empty-cell">${UI_TEXT.MESSAGES.NO_DATA}</td></tr>`
+      : filtered.map(asset => `<tr class="asset-row clickable" data-id="${asset.id}">${config.columns.map(col => {
+          const isDateCol = col.header.includes('일') || col.header.includes('날짜') || col.header.includes('연월');
+          return `<td class="${isDateCol ? 'text-center' : ''}">${col.render(asset)}</td>`;
+        }).join('')}</tr>`).join('');
+    
+    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 }; updateTable(); });
   };
 
-  // 4. 필터 바 렌더링
-  renderFilterBar(filterBar, {
-    ...config.filterOptions,
-    onFilterChange: (filters) => {
-      currentFilters = { ...currentFilters, ...filters };
-      updateTable();
+  const switchView = () => {
+    contentWrapper.innerHTML = '';
+    if ((state as any).currentViewMode === 'asset') {
+      filterBar.style.display = 'flex'; contentWrapper.style.overflowY = 'hidden';
+      contentWrapper.appendChild(tableWrapper); updateTable();
+    } else {
+      filterBar.style.display = 'none'; contentWrapper.style.overflowY = 'hidden';
+      renderSystemStatus();
     }
+  };
+
+  // 2. 필터 바 렌더링
+  renderFilterBar(filterBar, {
+    ...config.filterOptions, 
+    initialFilters: currentFilters,
+    fullList: fullList, // Added for dynamic options
+    extraHTML: isServer ? `
+      <div class="search-item">
+        <label class="list-view-toggle-label">
+          <input type="checkbox" id="chk-list-view" ${(state as any).currentViewMode === 'asset' ? 'checked' : ''} />
+          목록보기
+        </label>
+      </div>
+    ` : '',
+    onFilterChange: (filters) => { Object.assign(currentFilters, filters); updateTable(); }
   });
 
-  // 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['현사용조직'];
+  // 3. 필터 바 내 액션 버튼 배치
+  const actionContainer = filterBar.querySelector('#filter-bar-actions');
+  if (actionContainer) {
+    actionContainer.className = "header-action-group";
+    actionContainer.innerHTML = `
+      ${showPcFlowBtn ? `
+        <button id="btn-goto-parts-master" class="btn btn-outline">
+          <i data-lucide="settings" class="icon-sm"></i> 부품 마스터
+        </button>
+        <button id="btn-pc-flow" class="btn btn-outline">
+          PC 이동/반납
+        </button>
+      ` : ''}
+      <button id="btn-add-asset" class="btn btn-primary">
+        <i data-lucide="plus" class="icon-sm"></i> ${config.title === '직무별 기준 사양' ? '기준 사양 추가' : (config.title === '부품 마스터' ? '표준 부품 추가' : '자산 추가')}
+      </button>
+    `;
+    
+    actionContainer.querySelector('#btn-add-asset')?.addEventListener('click', () => {
+        const dummyAsset = { id: '', category: config.title };
+        config.onRowClick && config.onRowClick(dummyAsset);
+    });
+    actionContainer.querySelector('#btn-pc-flow')?.addEventListener('click', () => {
+        window.dispatchEvent(new CustomEvent('open-pc-flow'));
+    });
+    actionContainer.querySelector('#btn-goto-parts-master')?.addEventListener('click', () => {
+        state.activeSubTab = '부품 마스터';
+        window.dispatchEvent(new Event('refresh-view'));
+    });
+  }
+
+  // 서버 탭 전용 목록보기 체크박스 이벤트
+  if (isServer) {
+    const chkBox = filterBar.querySelector('#chk-list-view') as HTMLInputElement;
+    
+    const handleToggle = () => {
+        const isListMode = (state as any).currentViewMode === 'asset';
+        if (isListMode) {
+            state.viewMode = 'location';
+            (state as any).currentViewMode = 'location';
+        } else {
+            state.viewMode = 'list';
+            (state as any).currentViewMode = 'asset';
         }
-        return a[dataKey];
-      }
-      
-      const uniqueValues = Array.from(new Set(fullList.map(getVal))).filter(Boolean).sort();
-      uniqueValues.forEach(val => {
-        const opt = document.createElement('option');
-        opt.value = String(val);
-        opt.textContent = String(val);
-        select.appendChild(opt);
-      });
-    }
-  };
+        window.dispatchEvent(new Event('refresh-view'));
+    };
+    chkBox?.addEventListener('change', handleToggle);
+  }
 
-  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);
-
-  // 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/PartsMasterListView.ts

@@ -0,0 +1,171 @@
+import { state } from '../../core/state';
+import { openPartsMasterModal } from '../../components/Modal/PartsMasterModal';
+import { openJobSpecModal } from '../../components/Modal/JobSpecModal';
+import { formatInline } from '../../core/utils';
+import { createListView } from './ListFactory';
+
+export let activePartsMasterSubTab: 'parts-master' | 'job-spec' = 'parts-master';
+
+export function renderPartsMasterList(container: HTMLElement) {
+  if (activePartsMasterSubTab === 'parts-master') {
+    createListView(container, {
+      title: '부품 마스터',
+      dataSource: () => state.masterData.partsMaster || [],
+      searchKeys: ['component_name', 'category', 'score_tier'],
+      filterOptions: {
+        keywordLabel: '부품명 / 등급 검색',
+        showLoc: false,
+        showDept: false,
+        showType: false
+      },
+      onRowClick: (component) => openPartsMasterModal(component, 'view'),
+      columns: [
+        {
+          header: 'ID',
+          sortKey: 'id',
+          align: 'center',
+          width: '5%',
+          render: c => c.id.toString()
+        },
+        {
+          header: '분류',
+          sortKey: 'category',
+          align: 'center',
+          width: '15%',
+          render: c => {
+            let badgeClass = 'badge-primary';
+            if (c.category === 'CPU') badgeClass = 'b-primary';
+            else if (c.category === 'GPU') badgeClass = 'b-purple';
+            else if (c.category === 'RAM') badgeClass = 'b-green';
+            return `<span class="badge ${badgeClass}">${c.category}</span>`;
+          }
+        },
+        {
+          header: '부품 표준 명칭',
+          sortKey: 'component_name',
+          render: c => formatInline(c.component_name || '-')
+        },
+        {
+          header: '성능 등급',
+          sortKey: 'score_tier',
+          align: 'center',
+          width: '15%',
+          render: c => c.score_tier || '-'
+        },
+        {
+          header: '감점 점수',
+          sortKey: 'deduction',
+          align: 'center',
+          width: '15%',
+          render: c => {
+            const score = c.deduction || 0;
+            let color = '#3b82f6'; // blue
+            if (score >= 20) color = '#ef4444'; // red
+            else if (score >= 10) color = '#f59e0b'; // orange
+            return `<strong style="color: ${color}; font-size: 14px;">-${score}점</strong>`;
+          }
+        }
+      ]
+    });
+  } else {
+    createListView(container, {
+      title: '직무별 기준 사양',
+      dataSource: () => state.masterData.jobSpecs || [],
+      searchKeys: ['job_name', 'cpu_standard', 'ram_standard', 'gpu_standard', 'remarks'],
+      filterOptions: {
+        keywordLabel: '직무명 / 사양 검색',
+        showLoc: false,
+        showDept: false,
+        showType: false
+      },
+      onRowClick: (jobSpec) => openJobSpecModal(jobSpec, 'view'),
+      columns: [
+        {
+          header: 'ID',
+          sortKey: 'id',
+          align: 'center',
+          width: '5%',
+          render: j => j.id.toString()
+        },
+        {
+          header: '직무명',
+          sortKey: 'job_name',
+          width: '15%',
+          render: j => `<strong style="color: var(--primary-color); font-size: 14px;">${formatInline(j.job_name || '-')}</strong>`
+        },
+        {
+          header: '권장 CPU 사양',
+          sortKey: 'cpu_standard',
+          render: j => formatInline(j.cpu_standard || '-')
+        },
+        {
+          header: '권장 RAM 사양',
+          sortKey: 'ram_standard',
+          width: '12%',
+          render: j => formatInline(j.ram_standard || '-')
+        },
+        {
+          header: '권장 GPU 사양',
+          sortKey: 'gpu_standard',
+          render: j => formatInline(j.gpu_standard || '-')
+        },
+        {
+          header: '기준 점수',
+          sortKey: 'min_score',
+          align: 'center',
+          width: '10%',
+          render: j => `<span style="font-weight: 700;">${j.min_score || 0}점 이상</span>`
+        },
+        {
+          header: '비고',
+          sortKey: 'remarks',
+          width: '20%',
+          render: j => formatInline(j.remarks || '-')
+        }
+      ]
+    });
+  }
+
+  renderSubTabs(container);
+}
+
+function renderSubTabs(container: HTMLElement) {
+  const header = container.querySelector('.page-header');
+  if (!header) return;
+
+  const tabContainer = document.createElement('div');
+  tabContainer.className = 'sub-tab-container';
+  tabContainer.style.cssText = 'display: flex; gap: 16px; margin-top: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--border-color); padding-bottom: 0;';
+
+  const tab1Active = activePartsMasterSubTab === 'parts-master';
+  const tab2Active = activePartsMasterSubTab === 'job-spec';
+
+  tabContainer.innerHTML = `
+    <button id="tab-parts-master" class="sub-tab-btn ${tab1Active ? 'active' : ''}" style="padding: 10px 16px; border: none; background: none; font-size: 14px; font-weight: 600; cursor: pointer; color: ${tab1Active ? 'var(--primary-color)' : 'var(--text-muted)'}; position: relative; border-bottom: 3px solid ${tab1Active ? 'var(--primary-color)' : 'transparent'};">
+      부품 표준 등급
+    </button>
+    <button id="tab-job-spec" class="sub-tab-btn ${tab2Active ? 'active' : ''}" style="padding: 10px 16px; border: none; background: none; font-size: 14px; font-weight: 600; cursor: pointer; color: ${tab2Active ? 'var(--primary-color)' : 'var(--text-muted)'}; position: relative; border-bottom: 3px solid ${tab2Active ? 'var(--primary-color)' : 'transparent'};">
+      직무별 기준 사양
+    </button>
+  `;
+
+  header.parentNode!.insertBefore(tabContainer, header.nextSibling);
+
+  const tabPartsMaster = tabContainer.querySelector('#tab-parts-master')!;
+  const tabJobSpec = tabContainer.querySelector('#tab-job-spec')!;
+
+  tabPartsMaster.addEventListener('click', () => {
+    if (activePartsMasterSubTab !== 'parts-master') {
+      activePartsMasterSubTab = 'parts-master';
+      renderPartsMasterList(container);
+    }
+  });
+
+  tabJobSpec.addEventListener('click', () => {
+    if (activePartsMasterSubTab !== 'job-spec') {
+      activePartsMasterSubTab = 'job-spec';
+      renderPartsMasterList(container);
+    }
+  });
+}
+

src/views/List/PcListView.ts

@@ -1,39 +1,114 @@
 import { state } from '../../core/state';
 import { openHwModal } from '../../components/Modal/HWModal';
-import { sortAssets, formatInline } from '../../core/utils';
+import { sortAssets, formatInline, calculatePcScoreDeductive, getPcGrade, isWindows11Incompatible } from '../../core/utils';
 import { ASSET_SCHEMA } from '../../core/schema';
 import { createListView } from './ListFactory';
+import { SortState } from '../../core/tableHandler';
+
+let persistentSortState: SortState = { key: 'updated_at', direction: 'desc' };
 
 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'],
+    persistentSortState,
+    dataSource: () => {
+      const list = (state.masterData.pc || []).filter((a: any) => a.asset_type !== '서버PC');
+      list.forEach((a: any) => {
+        a['_pc_score'] = calculatePcScoreDeductive(a[ASSET_SCHEMA.CPU.key], a[ASSET_SCHEMA.RAM.key], a[ASSET_SCHEMA.GPU.key], a.purchase_date);
+      });
+      // 변경일시(updated_at) 내림차순 정렬 (최신 변경 항목이 맨 위로)
+      return list.sort((a: any, b: any) => {
+        const dateA = a.updated_at || a.created_at || '';
+        const dateB = b.updated_at || b.created_at || '';
+        if (dateA < dateB) return 1;
+        if (dateA > dateB) return -1;
+        return 0;
+      });
+    },
+    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,
+      showStatus: true
     },
     onRowClick: (asset) => openHwModal(asset, 'view'),
     columns: [
+      { 
+        header: ASSET_SCHEMA.HW_STATUS.ui, 
+        sortKey: ASSET_SCHEMA.HW_STATUS.key, 
+        align: 'center', 
+        width: '8%',
+        render: a => {
+          const status = a[ASSET_SCHEMA.HW_STATUS.key] || '재고';
+          let badgeClass = 'badge-light';
+          if (status === '운영') badgeClass = 'b-green';
+          else if (status === '재고') badgeClass = 'b-yellow';
+          else if (status === '수리') badgeClass = 'b-purple';
+          else if (status === '폐기') badgeClass = 'badge-muted';
+          return `<span class="badge ${badgeClass}">${status}</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.USER_POSITION.ui, sortKey: ASSET_SCHEMA.USER_POSITION.key, align: 'center', render: a => a[ASSET_SCHEMA.USER_POSITION.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 => {
+          try {
+            const vols = a.volumes ? (typeof a.volumes === 'string' ? JSON.parse(a.volumes) : a.volumes) : [];
+            if (Array.isArray(vols)) {
+              const ssds = vols.filter((v: any) => v && String(v.type).toUpperCase() === 'SSD');
+              if (ssds.length > 0) {
+                return ssds.map((v: any) => `${v.capacity || ''}${v.unit || 'GB'}`).join(' / ');
+              }
+            }
+          } catch (e) {}
+          return '-';
+        }
+      },
+      { 
+        header: 'HDD', 
+        align: 'center', 
+        width: '12%',
+        render: a => {
+          try {
+            const vols = a.volumes ? (typeof a.volumes === 'string' ? JSON.parse(a.volumes) : a.volumes) : [];
+            if (Array.isArray(vols)) {
+              const hdds = vols.filter((v: any) => v && String(v.type).toUpperCase() === 'HDD');
+              if (hdds.length > 0) {
+                return hdds.map((v: any) => `${v.capacity || ''}${v.unit || 'GB'}`).join(' / ');
+              }
+            }
+          } catch (e) {}
+          return '-';
+        }
+      },
       { 
         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: '성능 등급',
+        sortKey: '_pc_score',
+        align: 'center',
+        width: '8%',
+        render: a => {
+          const score = a._pc_score !== undefined ? a._pc_score : calculatePcScoreDeductive(a[ASSET_SCHEMA.CPU.key], a[ASSET_SCHEMA.RAM.key], a[ASSET_SCHEMA.GPU.key], a.purchase_date);
+          const isWin11Incompatible = isWindows11Incompatible(a[ASSET_SCHEMA.CPU.key], a[ASSET_SCHEMA.RAM.key]);
+          const grade = getPcGrade(score, isWin11Incompatible);
+          return `<span class="badge ${grade.class}" title="성능 점수: ${score}점">${grade.name}</span>`;
+        }
+      }
     ]
   });
 }

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/List/UserListView.ts

@@ -0,0 +1,60 @@
+import { state } from '../../core/state';
+import { openUserModal } from '../../components/Modal/UserModal';
+import { formatInline } from '../../core/utils';
+import { createListView } from './ListFactory';
+
+export function renderUserList(container: HTMLElement) {
+  createListView(container, {
+    title: '사용자',
+    dataSource: () => state.masterData.users || [],
+    searchKeys: ['emp_no', 'user_name', 'dept_name', 'position', 'status'],
+    filterOptions: {
+      keywordLabel: '사번/이름/부서/직급 검색',
+      showCorp: false,
+      showDept: true,
+      showType: false
+    },
+    onRowClick: (user) => openUserModal(user, 'view'),
+    columns: [
+      {
+        header: '사번',
+        sortKey: 'emp_no',
+        align: 'center',
+        width: '15%',
+        render: u => formatInline(u.emp_no || '-')
+      },
+      {
+        header: '이름',
+        sortKey: 'user_name',
+        align: 'center',
+        width: '15%',
+        render: u => formatInline(u.user_name || '-')
+      },
+      {
+        header: '조직 (부서)',
+        sortKey: 'dept_name',
+        align: 'left',
+        width: '25%',
+        render: u => formatInline(u.dept_name || '-')
+      },
+      {
+        header: '직급 (직무)',
+        sortKey: 'position',
+        align: 'left',
+        width: '25%',
+        render: u => formatInline(u.position || '-')
+      },
+      {
+        header: '상태',
+        sortKey: 'status',
+        align: 'center',
+        width: '10%',
+        render: u => {
+          const status = u.status || '재직';
+          const badgeClass = status === '퇴직' ? 'badge-danger' : 'badge-success';
+          return `<span class="badge ${badgeClass}">${status}</span>`;
+        }
+      }
+    ]
+  });
+}

src/views/LocationView.ts

@@ -0,0 +1,244 @@
+import { state } from '../core/state';
+import { openHwModal } from '../components/Modal/HWModal';
+import { ASSET_SCHEMA } from '../core/schema';
+import { LOCATION_DATA, IMAGE_LOCATIONS } from '../components/Modal/SharedData';
+
+/**
+ * 위치 중심 자산 현황 뷰 (Refined)
+ */
+export async function renderLocationView(container: HTMLElement) {
+  if (!container) return;
+
+  // 로컬 상태 (UI 제어용)
+  let currentLoc = '기술개발센터';
+  let currentDetail = '서버실';
+  let currentPage = 0; 
+  let mapConfig: any = {};
+
+  try {
+    const res = await fetch('/api/maps');
+    mapConfig = await res.json();
+  } catch (err) { console.error('Failed to load map config', err); }
+
+  const render = () => {
+    const locImages = (IMAGE_LOCATIONS[currentLoc] && IMAGE_LOCATIONS[currentLoc][currentDetail]) 
+                     ? IMAGE_LOCATIONS[currentLoc][currentDetail] 
+                     : [];
+    const mapPath = locImages[currentPage] || '';
+    
+    // 자산이 등록된(좌표가 일치하는) 구역만 필터링하여 표시
+    const allBoxes = mapConfig[mapPath] || [];
+    const boxes = allBoxes.filter((box: any) => 
+      state.masterData.hw.some(a => 
+        a.location === currentLoc && 
+        a.location_detail === currentDetail && 
+        String(a.loc_x) === String(box.x) && 
+        String(a.loc_y) === String(box.y)
+      )
+    );
+
+    container.innerHTML = `
+      <div class="location-view-wrapper">
+        <!-- 2단계 필터 바 -->
+        <div class="location-filter-bar">
+          <div class="filter-group">
+            <label>건물/위치</label>
+            <select id="sel-loc-main">
+              ${Object.keys(LOCATION_DATA).map(loc => `<option value="${loc}" ${loc === currentLoc ? 'selected' : ''}>${loc}</option>`).join('')}
+            </select>
+          </div>
+          <div class="filter-group">
+            <label>상세 위치</label>
+            <div style="display: flex; align-items: center; gap: 0.5rem;">
+              <select id="sel-loc-detail">
+                ${(LOCATION_DATA[currentLoc] || []).map(det => `<option value="${det}" ${det === currentDetail ? 'selected' : ''}>${det}</option>`).join('')}
+              </select>
+
+              <!-- 페이지네이션을 상세 위치 바로 옆으로 이동 -->
+              ${locImages.length > 1 ? `
+              <div class="map-pagination" style="margin-left: 0; padding-left: 0.5rem; border-left: 1px solid var(--border-color); display: flex; align-items: center; gap: 0.5rem;">
+                <div class="page-btns">
+                  <button id="btn-prev-page" class="btn btn-outline btn-sm" style="height: 28px; padding: 0 8px;" ${currentPage === 0 ? 'disabled' : ''}>이전</button>
+                  <button id="btn-next-page" class="btn btn-outline btn-sm" style="height: 28px; padding: 0 8px;" ${currentPage === locImages.length - 1 ? 'disabled' : ''}>다음</button>
+                </div>
+                <span class="page-info">(${currentPage + 1} / ${locImages.length})</span>
+              </div>
+              ` : ''}
+            </div>
+          </div>
+        </div>
+
+        <div class="location-main-content" style="height: calc(100vh - 180px); align-items: stretch; gap: 1rem; padding: 1rem; overflow: hidden; display: grid; grid-template-columns: 1.4fr 1fr;">
+          <!-- 지도 섹션: 상단 고정 정렬로 밀림 방지 -->
+          <div class="map-container-section" style="position: relative; overflow: hidden; border-radius: 8px; border: 1px solid var(--border-color); background: #f1f5f9; display: flex; align-items: flex-start; justify-content: center;">
+            <div class="map-frame-wrapper" style="position: relative; width: 100%; height: 100%; display: flex; align-items: flex-start; justify-content: center;">
+              ${mapPath ? `
+                <img src="${mapPath}" id="main-map-img" style="max-width: 100%; max-height: 100%; object-fit: contain; display: block;">
+                <div id="box-overlay" style="position: absolute; pointer-events: none; transition: none;">
+                  ${boxes.map((box: any, idx: number) => {
+                    const name = box.name || `#${idx+1}`;
+                    return `
+                    <div class="location-box-point" 
+                         data-name="${name}"
+                         data-x="${box.x}"
+                         data-y="${box.y}"
+                         style="position: absolute; left:${box.x}%; top:${box.y}%; width:${box.w}%; height:${box.h}%;
+                                border: 2px solid var(--primary-color); background: rgba(30, 81, 73, 0.1); cursor:pointer; pointer-events: auto;">
+                    </div>
+                  `}).join('')}
+                </div>
+              ` : '<div style="padding: 5rem; text-align:center; color: #999;">해당 위치의 도면이 등록되지 않았습니다.</div>'}
+            </div>
+          </div>
+
+          <!-- 상세 정보 섹션: 내부 스크롤만 허용 -->
+          <div class="asset-list-section" style="display: flex; flex-direction: column; height: 100%; overflow: hidden; background: #fff; border-radius: 8px; border: 1px solid var(--border-color);">
+            <div class="section-header" style="flex-shrink: 0; background: #f8fafc; border-bottom: 1px solid var(--border-color); padding: 1rem;">
+               <h4 id="loc-list-title" style="margin:0; font-size: 0.95rem; font-weight: 700;">📍 구역을 선택하세요</h4>
+            </div>
+            <div id="loc-asset-table-container" class="mini-table-wrapper" style="flex: 1; overflow-y: auto; padding: 0;">
+               <div class="empty-state" style="padding: 3rem 1rem;">지도에서 자산 위치를 클릭하세요.</div>
+            </div>
+          </div>
+        </div>
+        <div style="padding: 0 1.5rem 0.5rem; flex-shrink: 0;">
+          <p style="font-size:0.75rem; color:var(--text-muted); margin: 0;">* 지도 위의 구역을 클릭하면 자산 상세 정보가 표시됩니다.</p>
+        </div>
+      </div>
+    `;
+
+    // 이미지 로드 및 윈도우 리사이즈 시 오버레이 크기와 위치를 이미지에 정확히 맞춤
+    const syncOverlaySize = () => {
+      const img = container.querySelector('#main-map-img') as HTMLImageElement;
+      const overlay = container.querySelector('#box-overlay') as HTMLElement;
+      if (img && overlay && img.complete) {
+        overlay.style.width = img.clientWidth + 'px';
+        overlay.style.height = img.clientHeight + 'px';
+        overlay.style.left = img.offsetLeft + 'px';
+        overlay.style.top = img.offsetTop + 'px';
+      }
+    };
+
+    const img = container.querySelector('#main-map-img') as HTMLImageElement;
+    if (img) {
+      if (img.complete) {
+        syncOverlaySize();
+        setTimeout(syncOverlaySize, 50); // 레이아웃 안정화 대기
+      } else {
+        img.onload = syncOverlaySize;
+      }
+    }
+    
+    window.removeEventListener('resize', syncOverlaySize);
+    window.addEventListener('resize', syncOverlaySize);
+
+    // 이벤트 바인딩
+    const selMain = container.querySelector('#sel-loc-main') as HTMLSelectElement;
+    selMain?.addEventListener('change', () => {
+      currentLoc = selMain.value;
+      currentDetail = LOCATION_DATA[currentLoc][0];
+      currentPage = 0;
+      render();
+    });
+
+    const selDetail = container.querySelector('#sel-loc-detail') as HTMLSelectElement;
+    selDetail?.addEventListener('change', () => {
+      currentDetail = selDetail.value;
+      currentPage = 0;
+      render();
+    });
+
+    container.querySelector('#btn-prev-page')?.addEventListener('click', () => { currentPage--; render(); });
+    container.querySelector('#btn-next-page')?.addEventListener('click', () => { currentPage++; render(); });
+
+    container.querySelectorAll('.location-box-point').forEach(box => {
+      box.addEventListener('click', () => {
+        const x = box.getAttribute('data-x');
+        const y = box.getAttribute('data-y');
+
+        const targetAsset = state.masterData.hw.find(a => 
+          a.location === currentLoc && 
+          a.location_detail === currentDetail && 
+          String(a.loc_x) === String(x) && 
+          String(a.loc_y) === String(y)
+        );
+
+        if (targetAsset) {
+          renderAssetDetail(targetAsset);
+        }
+
+        container.querySelectorAll('.location-box-point').forEach(b => (b as HTMLElement).style.background = 'rgba(30, 81, 73, 0.1)');
+        (box as HTMLElement).style.background = 'rgba(30, 81, 73, 0.4)';
+      });
+    });
+  };
+
+  const renderAssetDetail = (asset: any) => {
+    const title = container.querySelector('#loc-list-title')!;
+    const tableContainer = container.querySelector('#loc-asset-table-container')!;
+    
+    title.innerHTML = `
+      <div class="detail-header-actions">
+        <button id="btn-back-to-list" class="btn-icon" style="background: none; border: none; cursor: pointer; color: var(--primary-color); font-size: 1.2rem; padding: 0 4px;">←</button>
+        <span class="detail-header-title">자산 상세 정보</span>
+        <button id="btn-edit-from-loc" class="btn btn-primary btn-sm" style="font-size: 11px; height: 28px;">수정</button>
+      </div>
+    `;
+
+    const renderSection = (title: string, fields: { label: string; value: any }[]) => `
+      <div class="detail-section">
+        <div class="detail-section-title">${title}</div>
+        <div class="detail-grid">
+          ${fields.map(f => `
+            <div class="detail-label">${f.label}</div>
+            <div class="detail-value">${f.value || '-'}</div>
+          `).join('')}
+        </div>
+      </div>
+    `;
+
+    const sectionsHTML = [
+      renderSection('기본 관리 정보', [
+        { label: ASSET_SCHEMA.ASSET_CODE.ui, value: asset.asset_code },
+        { label: ASSET_SCHEMA.PURCHASE_CORP.ui, value: asset.purchase_corp },
+        { label: ASSET_SCHEMA.CATEGORY.ui, value: asset.category },
+        { label: ASSET_SCHEMA.ASSET_TYPE.ui, value: asset.asset_type },
+        { label: ASSET_SCHEMA.HW_STATUS.ui, value: asset.hw_status }
+      ]),
+      renderSection('시스템 사양', [
+        { label: ASSET_SCHEMA.MODEL_NAME.ui, value: asset.model_name },
+        { label: ASSET_SCHEMA.OS.ui, value: asset.os },
+        { label: ASSET_SCHEMA.CPU.ui, value: asset.cpu },
+        { label: ASSET_SCHEMA.RAM.ui, value: asset.ram },
+        { label: ASSET_SCHEMA.GPU.ui, value: asset.gpu }
+      ]),
+      renderSection('네트워크 정보', [
+        { label: ASSET_SCHEMA.IP_ADDR.ui, value: asset.ip_address },
+        { label: ASSET_SCHEMA.MAC_ADDR.ui, value: asset.mac_address },
+        { label: ASSET_SCHEMA.REMOTE_TOOL.ui, value: asset.remote_tool }
+      ]),
+      renderSection('구매 및 기타', [
+        { label: ASSET_SCHEMA.PURCHASE_DATE.ui, value: asset.purchase_date },
+        { label: ASSET_SCHEMA.PURCHASE_AMOUNT.ui, value: asset.purchase_amount ? `${Number(asset.purchase_amount).toLocaleString()}원` : '-' },
+        { label: ASSET_SCHEMA.MEMO.ui, value: asset.memo }
+      ])
+    ].join('');
+
+    tableContainer.innerHTML = `
+      <div class="asset-detail-sidebar">
+        ${sectionsHTML}
+      </div>
+    `;
+
+    container.querySelector('#btn-back-to-list')?.addEventListener('click', () => {
+      title.textContent = `📍 구역을 선택하세요`;
+      tableContainer.innerHTML = `<div class="empty-state" style="padding: 3rem 1rem;">지도에서 자산 위치를 클릭하세요.</div>`;
+    });
+
+    container.querySelector('#btn-edit-from-loc')?.addEventListener('click', () => {
+      openHwModal(asset, 'edit');
+    });
+  };
+
+  render();
+}

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

@@ -9,11 +9,13 @@ import { renderCloudList } from './List/CloudListView';
 import { renderDomainList } from './List/DomainListView';
 import { renderNetworkList } from './List/NetworkListView';
 import { renderPcPartList } from './List/PcPartListView';
+import { renderPartsMasterList } from './List/PartsMasterListView';
 import { renderSpaceInfoList } from './List/SpaceInfoListView';
 import { renderGiftList } from './List/GiftListView';
 import { renderFacilityList } from './List/FacilityListView';
 import { renderCostList } from './List/CostListView';
-import { createIcons, Plus, X, LayoutDashboard, Monitor, Server, Database, Laptop, CalendarClock, Key, Cpu, Layers, Users, Paperclip, Edit2, RefreshCcw } from 'lucide';
+import { renderUserList } from './List/UserListView';
+import { createIcons, Plus, X, LayoutDashboard, Monitor, Server, Database, Laptop, CalendarClock, Key, Cpu, Layers, Users, Paperclip, Edit2, RefreshCcw, Settings } from 'lucide';
 
 /**
  * 자산 목록 테이블 렌더링 통합 허브
@@ -36,12 +38,13 @@ export function renderSWTable(mainContent: HTMLElement) {
       else if (tab === '업무지원장비') renderEquipmentList(container);
       else if (tab === '네트워크') renderNetworkList(container);
       else if (tab === 'PC부품') renderPcPartList(container);
+      else if (tab === '부품 마스터') renderPartsMasterList(container);
       else if (tab === '공간정보장비') renderSpaceInfoList(container);
       else {
         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>`;
@@ -50,6 +53,7 @@ export function renderSWTable(mainContent: HTMLElement) {
       if (tab === '도메인') renderDomainList(container);
       else if (tab === '클라우드') renderCloudList(container);
       else if (tab === '비용관리') renderCostList(container);
+      else if (tab === '사용자') renderUserList(container);
       else {
         container.innerHTML = `<div style="padding:2rem; color:var(--text-muted);">"${tab}" 탭에 대한 운영지원 리스트 뷰가 정의되지 않았습니다.</div>`;
       }
@@ -69,7 +73,7 @@ export function renderSWTable(mainContent: HTMLElement) {
     
     // 전역 아이콘 초기화 (한 번 더 실행하여 누락 방지)
     createIcons({
-      icons: { Plus, X, LayoutDashboard, Monitor, Server, Database, Laptop, CalendarClock, Key, Cpu, Layers, Users, Paperclip, Edit2, RefreshCcw }
+      icons: { Plus, X, LayoutDashboard, Monitor, Server, Database, Laptop, CalendarClock, Key, Cpu, Layers, Users, Paperclip, Edit2, RefreshCcw, Settings }
     });
   } catch (err: any) {
     console.error('❌ Error rendering table view:', err);

test_data_generator.js

@@ -0,0 +1,71 @@
+import mysql from 'mysql2/promise';
+import dotenv from 'dotenv';
+import crypto from 'crypto';
+
+dotenv.config();
+
+const { DB_HOST, DB_USER, DB_PASS, DB_NAME, DB_PORT } = process.env;
+
+const CATEGORIES = ['PC', '서버', '노트북', '모니터', '업무지원장비'];
+const DEPTS = ['기술개발센터', '총괄기획실', '한맥', '삼안', '장헌', '한라'];
+const USERS = ['홍길동', '김철수', '이영희', '박지성', '손흥민', '봉준호', '싸이'];
+const STATUSES = ['운영', '재고', '수리', '폐기', '기타'];
+const CORPS = ['한맥', '삼안', '장헌', '한라', 'PTC', '바론'];
+
+async function generateTestData() {
+  const connection = await mysql.createConnection({
+    host: DB_HOST,
+    user: DB_USER,
+    password: DB_PASS,
+    database: DB_NAME,
+    port: parseInt(DB_PORT || '3306')
+  });
+
+  console.log('🚀 무작위 테스트 데이터 생성을 시작합니다 (Crypto UUID 방식)...');
+
+  for (let i = 1; i <= 20; i++) {
+    const category = CATEGORIES[Math.floor(Math.random() * CATEGORIES.length)];
+    const dept = DEPTS[Math.floor(Math.random() * DEPTS.length)];
+    const user = USERS[Math.floor(Math.random() * USERS.length)];
+    const status = STATUSES[Math.floor(Math.random() * STATUSES.length)];
+    const corp = CORPS[Math.floor(Math.random() * CORPS.length)];
+    
+    // Crypto UUID 생성
+    const id = crypto.randomUUID();
+    const assetCode = `TEST-${Date.now().toString().slice(-6)}-${String(i).padStart(3, '0')}`;
+
+    try {
+      // 1. asset_core 삽입 (id 수동 지정)
+      await connection.query(
+        `INSERT INTO asset_core 
+        (id, asset_code, category, asset_type, purchase_corp, current_dept, user_current, purchase_date, service_type) 
+        VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)`,
+        [id, assetCode, category, category, corp, dept, user, '2026-06-10', '내부']
+      );
+
+      // 2. asset_spec 삽입
+      await connection.query(
+        `INSERT INTO asset_spec 
+        (asset_id, hw_status, model_name, cpu, ram) 
+        VALUES (?, ?, ?, ?, ?)`,
+        [id, status, `${category} Model ${i}`, 'Intel i7', '16GB']
+      );
+
+      // 3. 초기 이력 삽입
+      await connection.query(
+        `INSERT INTO asset_history (asset_id, event_type, details, log_date, log_user) 
+         VALUES (?, ?, ?, ?, ?)`,
+        [id, 'STATUS_CHANGE', `[최초 등록] 테스트 데이터 생성 (${status})`, '2026-06-10', '시스템']
+      );
+
+      console.log(`✅ 생성 완료: ${assetCode} (${category} / ${dept} / ${user})`);
+    } catch (err) {
+      console.error(`❌ 생성 실패 (${i}):`, err.message);
+    }
+  }
+
+  await connection.end();
+  console.log('\n✨ 20개의 테스트 데이터 생성이 완료되었습니다.');
+}
+
+generateTestData().catch(console.error);

vite.config.ts

@@ -4,5 +4,15 @@ export default defineConfig({
   server: {
     port: 8080,
     host: true, // Listen on all local IPs
+    proxy: {
+      '/api': {
+        target: 'http://localhost:3000',
+        changeOrigin: true,
+      },
+      '/uploads': {
+        target: 'http://localhost:3000',
+        changeOrigin: true,
+      }
+    }
   },
 });