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) 확인.

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

@@ -19,36 +19,6 @@
 </head>
 
 <body>
-  <!-- Login Screen -->
-  <div id="login-container" class="login-layout">
-    <div class="login-card">
-      <div class="login-header">
-        <img src="/image 92.png" alt="Logo" class="login-logo" />
-        <h2>ITAM 시스템</h2>
-        <p>자산 관리 포털에 오신 것을 환영합니다</p>
-      </div>
-      <div id="login-selection" class="login-selection">
-        <div class="role-card" data-role="admin">
-          <div class="role-icon">
-            <i data-lucide="settings"></i>
-          </div>
-          <h3>관리자</h3>
-          <p>시스템 설정 및 자산 마스터 관리</p>
-        </div>
-        <div class="role-card" data-role="user">
-          <div class="role-icon">
-            <i data-lucide="monitor"></i>
-          </div>
-          <h3>실무자</h3>
-          <p>자산 조회 및 현황 확인</p>
-        </div>
-      </div>
-      <div class="login-footer">
-        <p>&copy; 2026 BARON Consultant Co,Ltd. All rights reserved.</p>
-      </div>
-    </div>
-  </div>
-
   <div class="app-layout" id="app-layout" style="display: none;">
     <!-- Single-Line Integrated Header -->
     <header class="main-header">

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

@@ -4,7 +4,7 @@ import cors from 'cors';
 import dotenv from 'dotenv';
 import fs from 'fs';
 
-dotenv.config();
+dotenv.config({ override: true });
 
 const app = express();
 app.use(cors());
@@ -28,6 +28,32 @@ const pool = mysql.createPool({
   queueLimit: 0
 });
 
+// Database startup check (ensure job_spec_standards table exists)
+(async () => {
+  let connection;
+  try {
+    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) {
+    console.error('❌ Failed to verify/create job_spec_standards table:', err);
+  } finally {
+    if (connection) connection.release();
+  }
+})();
+
 // Error Handler
 const handleError = (res, err, label) => {
   console.error(`❌ [${label}] Error:`, err);
@@ -36,25 +62,24 @@ const handleError = (res, err, label) => {
 
 // --- Global Constants ---
 const CATEGORY_TABLE_MAP = {
-  pc: 'asset_pc',
-  server: 'asset_server',
-  storage: 'asset_storage',
-  network: 'asset_network',
-  equipment: 'asset_equipment',
-  officeSupplies: 'asset_office_supplies',
-  survey: 'asset_survey',
-  vip: 'asset_vip',
-  swInternal: 'sw_internal',
-  swExternal: 'sw_external',
-  cloud: 'asset_cloud',
+  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',
-  swUsers: 'sw_assignment',
   logs: 'asset_history'
 };
 
 const ASSET_TABLES = [
-  'asset_pc', 'asset_server', 'asset_storage', 'asset_network', 
-  'asset_equipment', 'asset_office_supplies', 'asset_survey', 'asset_vip'
+  'asset_core'
 ];
 
 // --- API Endpoints ---
@@ -101,22 +126,27 @@ app.post('/api/:table/batch', async (req, res) => {
 
 // 2. Get All Assets (Integrated Master Data from Normalized V3 Schema)
 app.get('/api/assets/master', async (req, res) => {
+  let connection;
   try {
-    const connection = await pool.getConnection();
+    connection = await pool.getConnection();
 
     const masterData = {
       pc: [], server: [], storage: [], network: [],
       equipment: [], officeSupplies: [], survey: [], vip: [], pcParts: [],
-      swInternal: [], swExternal: [], swUsers: [], users: [], logs: []
+      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,
-        n.ip_address, n.mac_address, n.remote_tool, n.remote_id, n.remote_pw,
+        (
+          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
@@ -128,11 +158,6 @@ app.get('/api/assets/master', async (req, res) => {
         WHERE asset_id = c.id AND is_active = 1 
         ORDER BY created_at DESC LIMIT 1
       )
-      LEFT JOIN asset_network n ON n.id = (
-        SELECT id FROM asset_network 
-        WHERE asset_id = c.id AND is_active = 1 
-        ORDER BY created_at DESC LIMIT 1
-      )
     `);
 
     const catMap = {
@@ -151,17 +176,22 @@ app.get('/api/assets/master', async (req, res) => {
     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;
 
-    connection.release();
     res.json(masterData);
   } catch (err) {
     handleError(res, err, 'MASTER DATA');
+  } finally {
+    if (connection) connection.release();
   }
 });
 
@@ -173,13 +203,102 @@ app.post('/api/asset/:category/save', async (req, res) => {
     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}`
+        });
+    }
+
+    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);
-    const coreSql = `INSERT INTO asset_core (${coreKeys.join(', ')}) VALUES (${coreKeys.map(() => '?').join(', ')}) ON DUPLICATE KEY UPDATE ${coreKeys.map(k => `${k} = VALUES(${k})`).join(', ')}`;
-    await connection.query(coreSql, Object.values(coreData));
+
+    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'];
@@ -224,14 +343,36 @@ app.post('/api/asset/:category/save', async (req, res) => {
         }
     }
 
-    // 3.5 asset_network
-    if (asset.ip_address || asset.mac_address || asset.remote_tool) {
-        const [netActive] = await connection.query('SELECT * FROM asset_network WHERE asset_id = ? AND is_active = 1', [asset.id]);
-        const isChanged = netActive.length === 0 || netActive[0].ip_address !== asset.ip_address || netActive[0].mac_address !== asset.mac_address || netActive[0].remote_tool !== asset.remote_tool || netActive[0].remote_id !== asset.remote_id || netActive[0].remote_pw !== asset.remote_pw;
-        if (isChanged) {
-            await connection.query('UPDATE asset_network SET is_active = 0, deactivated_at = NOW() WHERE asset_id = ? AND is_active = 1', [asset.id]);
-            await connection.query(`INSERT INTO asset_network (asset_id, ip_address, mac_address, remote_tool, remote_id, remote_pw, is_active) VALUES (?, ?, ?, ?, ?, ?, 1)`, 
-                [asset.id, asset.ip_address, asset.mac_address, asset.remote_tool, asset.remote_id, asset.remote_pw]);
+    // 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]);
+                }
+            }
         }
     }
 
@@ -262,19 +403,19 @@ app.post('/api/pc/flow', async (req, res) => {
         [userName, empNo, dept, position, assetId]
       );
       await connection.query(
-        `UPDATE asset_spec SET hw_status = '사용중' WHERE asset_id = ?`,
+        `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 = '', current_dept = '재고창고', user_position = '' 
+             user_current = '', emp_no = '', user_position = '' 
          WHERE id = ?`,
         [assetId]
       );
       await connection.query(
-        `UPDATE asset_spec SET hw_status = '대기' WHERE asset_id = ?`,
+        `UPDATE asset_spec SET hw_status = '재고' WHERE asset_id = ?`,
         [assetId]
       );
     } else if (action === 'move') {
@@ -286,7 +427,7 @@ app.post('/api/pc/flow', async (req, res) => {
         [userName, empNo, dept, position, assetId]
       );
       await connection.query(
-        `UPDATE asset_spec SET hw_status = '사용중' WHERE asset_id = ?`,
+        `UPDATE asset_spec SET hw_status = '운영' WHERE asset_id = ?`,
         [assetId]
       );
     } else {
@@ -338,7 +479,7 @@ app.delete('/api/asset/:category/:id', async (req, res) => {
   
   try {
     const connection = await pool.getConnection();
-    // For asset_core, ON DELETE CASCADE will handle spec, location, network, volume
+    // 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}`);
@@ -383,6 +524,157 @@ app.get('/api/maps', (req, res) => {
   } 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;

src/components/Modal/BaseModal.ts

@@ -55,6 +55,9 @@ export abstract class BaseModal {
     this.currentAsset = asset;
     this.isEditMode = (mode === 'add' || mode === 'edit');
     
+    // 폼 초기화 추가
+    if (this.formEl) this.formEl.reset();
+
     this.setEditLockMode(mode);
     this.fillFormData(asset);
     

src/components/Modal/HWModal.ts

@@ -1,5 +1,6 @@
 import { state, saveAsset, deleteAsset } from '../../core/state';
 import { ASSET_SCHEMA, UI_TEXT } from '../../core/schema';
+import { calculatePcScoreDeductive, getPcGrade } from '../../core/utils';
 import { 
   generateOptionsHTML, 
   setFieldValue, 
@@ -13,6 +14,7 @@ import { BaseModal } from './BaseModal';
 
 class HwAssetModal extends BaseModal {
   private dynamicMapConfig: Record<string, any[]> = {};
+  private masterComponents: any[] = [];
 
   constructor() {
     super('hw', '자산 상세 정보');
@@ -24,6 +26,39 @@ class HwAssetModal extends BaseModal {
     const btnStyle = `padding: 0 16px; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; white-space: nowrap; cursor: pointer; ${sharedStyle}`;
 
     return `
+      <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 id="hw-asset-modal" class="modal-overlay hidden">
         <div class="modal-content wide">
           <div class="modal-header">
@@ -35,8 +70,9 @@ class HwAssetModal extends BaseModal {
               <div class="modal-form-area">
                 <form id="hw-asset-form" class="grid-form">
                   <input type="hidden" id="hw-id" name="id" />
+                  <input type="hidden" id="hw-remotes-data" name="remotes" />
                   
-                  <!-- [SECTION 1] 기본 관리 정보 (필수 공통) -->
+                  <!-- [SECTION 1] 기본 관리 정보 -->
                   <div class="form-section-title" style="padding-top: 0; margin-bottom: 12px;">기본 관리 정보</div>
                   <div class="form-group">
                     <label>${ASSET_SCHEMA.ASSET_CODE.ui}</label>
@@ -66,6 +102,17 @@ class HwAssetModal extends BaseModal {
                     <label>${ASSET_SCHEMA.HW_STATUS.ui}</label>
                     <select id="hw-hw_status" name="hw_status" style="${inputStyle}">${generateOptionsHTML(HW_STATUS_LIST)}</select>
                   </div>
+                  <div class="form-group">
+                    <label>${ASSET_SCHEMA.SERVICE_TYPE.ui}</label>
+                    <select id="hw-service_type" name="service_type" style="${inputStyle}">
+                      <option value="외부">외부</option>
+                      <option value="내부">내부</option>
+                    </select>
+                  </div>
+                  <div class="form-group full-width" style="grid-column: span 2;">
+                    <label>${ASSET_SCHEMA.ASSET_PURPOSE.ui}</label>
+                    <input type="text" id="hw-asset_purpose" name="asset_purpose" placeholder="자산의 용도를 입력하세요" style="${inputStyle} width: 100%;" />
+                  </div>
                   <div class="form-group infra-only monitoring-field">
                     <label>${ASSET_SCHEMA.MONITORING.ui}</label>
                     <select id="hw-monitoring" name="monitoring" style="${inputStyle}">
@@ -75,15 +122,19 @@ class HwAssetModal extends BaseModal {
                   </div>
 
                   <!-- [SECTION 2] 조직 및 사용자 정보 -->
-                  <div class="form-section-title org-user-section" style="margin-top: 24px; margin-bottom: 12px;">사용자 및 조직 정보</div>
-                  <div class="form-group org-user-field">
+                  <div class="form-section-title" style="margin-top: 24px; margin-bottom: 12px;">사용자 및 조직 정보</div>
+                  <div class="form-group">
                     <label>${ASSET_SCHEMA.CURRENT_DEPT.ui}</label>
                     <select id="hw-current_dept" name="current_dept" style="${inputStyle}">${generateOptionsHTML(ORG_LIST)}</select>
                   </div>
-                  <div class="form-group org-user-field">
+                  <div class="form-group">
                     <label>${ASSET_SCHEMA.MANAGER_MAIN.ui}</label>
                     <input type="text" id="hw-manager_primary" name="manager_primary" style="${inputStyle}" />
                   </div>
+                  <div class="form-group">
+                    <label>${ASSET_SCHEMA.MANAGER_SUB.ui}</label>
+                    <input type="text" id="hw-manager_secondary" name="manager_secondary" style="${inputStyle}" />
+                  </div>
                   <div class="form-group personal-only">
                     <label>${ASSET_SCHEMA.CURRENT_USER.ui}</label>
                     <input type="text" id="hw-user_current" name="user_current" style="${inputStyle}" />
@@ -92,17 +143,13 @@ class HwAssetModal extends BaseModal {
                     <label>${ASSET_SCHEMA.USER_POSITION.ui}</label>
                     <input type="text" id="hw-user_position" name="user_position" style="${inputStyle}" />
                   </div>
-                  <div class="form-group">
-                    <label>${ASSET_SCHEMA.MANAGER_SUB.ui}</label>
-                    <input type="text" id="hw-manager_secondary" name="manager_secondary" style="${inputStyle}" />
-                  </div>
                   <div class="form-group personal-only">
                     <label>${ASSET_SCHEMA.PREV_USER.ui}</label>
                     <input type="text" id="hw-previous_user" name="previous_user" style="${inputStyle}" />
                   </div>
 
-                  <!-- [SECTION 3] 하드웨어 사양 및 네트워크 -->
-                  <div class="form-section-title hardware-section" style="margin-top: 24px; margin-bottom: 12px;">시스템 사양 및 네트워크</div>
+                  <!-- [SECTION 3] 하드웨어 사양 -->
+                  <div class="form-section-title hardware-section" style="margin-top: 24px; margin-bottom: 12px;">시스템 사양 정보</div>
                   <div class="form-group">
                     <label>${ASSET_SCHEMA.MODEL_NAME.ui}</label>
                     <input type="text" id="hw-model_name" name="model_name" style="${inputStyle}" />
@@ -119,74 +166,58 @@ class HwAssetModal extends BaseModal {
                     <label>${ASSET_SCHEMA.OS.ui}</label>
                     <input type="text" id="hw-os" name="os" style="${inputStyle}" />
                   </div>
-                  <div class="form-group spec-only">
+                  <div class="form-group spec-only" style="position: relative;">
                     <label>${ASSET_SCHEMA.CPU.ui}</label>
-                    <input type="text" id="hw-cpu" name="cpu" style="${inputStyle}" />
+                    <input type="text" id="hw-cpu" name="cpu" autocomplete="off" placeholder="CPU 부품 검색..." style="${inputStyle}" />
+                    <div id="hw-cpu-autocomplete" class="autocomplete-list hidden"></div>
                   </div>
-                  <div class="form-group spec-only">
+                  <div class="form-group spec-only" style="position: relative;">
                     <label>${ASSET_SCHEMA.RAM.ui}</label>
-                    <input type="text" id="hw-ram" name="ram" style="${inputStyle}" />
+                    <input type="text" id="hw-ram" name="ram" autocomplete="off" placeholder="RAM 부품 검색..." style="${inputStyle}" />
+                    <div id="hw-ram-autocomplete" class="autocomplete-list hidden"></div>
                   </div>
-                  <div class="form-group spec-only">
+                  <div class="form-group spec-only" style="position: relative;">
                     <label>${ASSET_SCHEMA.GPU.ui}</label>
-                    <input type="text" id="hw-gpu" name="gpu" style="${inputStyle}" />
+                    <input type="text" id="hw-gpu" name="gpu" autocomplete="off" placeholder="GPU 부품 검색..." style="${inputStyle}" />
+                    <div id="hw-gpu-autocomplete" class="autocomplete-list hidden"></div>
                   </div>
                   <div class="form-group spec-only">
                     <label>${ASSET_SCHEMA.MAINBOARD.ui}</label>
                     <input type="text" id="hw-mainboard" name="mainboard" style="${inputStyle}" />
                   </div>
-
-                  <!-- 동적 디스크 할당 영역 (Plan B) -->
-                  <div class="form-group spec-only full-width" style="grid-column: span 2;">
-                    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
-                      <label style="margin: 0; font-size: 11px; font-weight: 700; color: var(--text-muted);">저장장치 (디스크)</label>
-                      <button type="button" id="btn-add-volume" class="btn btn-outline" style="height: 26px !important; padding: 0 10px; font-size: 11px; display: none;">+ 디스크 추가</button>
+                  <div class="form-group spec-only">
+                    <label>성능 등급</label>
+                    <div id="hw-pc-grade-container" style="display: flex; align-items: center; height: 38px;">
+                      <span class="badge b-yellow" id="hw-pc-grade-badge">-</span>
                     </div>
-                    <div id="hw-volume-container" style="display: flex; flex-direction: column; gap: 8px;"></div>
-                    <input type="hidden" id="hw-volumes-data" name="volumes" />
-                  </div>
-
-                  <div class="form-group net-only">
-                    <label>${ASSET_SCHEMA.IP_ADDR.ui}</label>
-                    <input type="text" id="hw-ip_address" name="ip_address" style="${inputStyle}" />
-                  </div>
-                  <div class="form-group net-only">
-                    <label>${ASSET_SCHEMA.MAC_ADDR.ui}</label>
-                    <input type="text" id="hw-mac_address" name="mac_address" style="${inputStyle}" />
                   </div>
                   <div class="form-group monitor-only">
                     <label>${ASSET_SCHEMA.MONITOR_INCH.ui}</label>
                     <input type="text" id="hw-monitor_inch" name="monitor_inch" style="${inputStyle}" />
                   </div>
-                  <div class="form-group parts-only">
-                    <label>${ASSET_SCHEMA.VOLUME.ui}</label>
-                    <input type="text" id="hw-volume" name="volume" style="${inputStyle}" />
-                  </div>
-                  <div class="form-group parts-only">
-                    <label>${ASSET_SCHEMA.ASSET_COUNT.ui}</label>
-                    <input type="text" id="hw-asset_count" name="asset_count" style="${inputStyle}" />
+
+                  <!-- 동적 디스크 할당 영역 -->
+                  <div class="form-section-title spec-only" style="margin-top: 24px; margin-bottom: 12px;">디스크(용량) 정보</div>
+                  <div class="form-group spec-only full-width" style="grid-column: span 2;">
+                    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
+                      <label style="margin: 0; font-size: 11px; font-weight: 700; color: var(--text-muted);">연결된 드라이브 리스트</label>
+                      <button type="button" id="btn-add-volume" class="btn btn-outline" style="height: 26px !important; padding: 0 10px; font-size: 11px; display: none;">+ 볼륨 추가</button>
+                    </div>
+                    <div id="hw-volume-container" style="display: flex; flex-direction: column; gap: 8px;"></div>
+                    <input type="hidden" id="hw-volumes-data" name="volumes" />
                   </div>
 
-                  <!-- [SECTION 4] 원격 접속 정보 (서버 전용) -->
-                  <div class="form-section-title remote-section" style="margin-top: 24px; margin-bottom: 12px;">원격 접속 정보</div>
-                  <div class="form-group remote-field">
-                    <label>${ASSET_SCHEMA.IP_ADDR2.ui}</label>
-                    <input type="text" id="hw-ip_address_2" name="ip_address_2" style="${inputStyle}" />
-                  </div>
-                  <div class="form-group remote-field">
-                    <label>${ASSET_SCHEMA.REMOTE_TOOL.ui}</label>
-                    <input type="text" id="hw-remote_tool" name="remote_tool" style="${inputStyle}" />
-                  </div>
-                  <div class="form-group remote-field">
-                    <label>${ASSET_SCHEMA.REMOTE_ID.ui}</label>
-                    <input type="text" id="hw-remote_id" name="remote_id" style="${inputStyle}" />
-                  </div>
-                  <div class="form-group remote-field">
-                    <label>${ASSET_SCHEMA.REMOTE_PW.ui}</label>
-                    <input type="text" id="hw-remote_pw" name="remote_pw" style="${inputStyle}" />
+                  <!-- 통합 원격 접속 정보 영역 -->
+                  <div class="form-section-title net-only" style="margin-top: 24px; margin-bottom: 12px;">네트워크 및 원격 접속 정보</div>
+                  <div class="form-group net-only full-width" style="grid-column: span 2;">
+                    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
+                      <label style="margin: 0; font-size: 11px; font-weight: 700; color: var(--text-muted);">IP/MAC 및 접속 계정 정보</label>
+                      <button type="button" id="btn-add-remote-info" class="btn btn-outline" style="height: 26px !important; padding: 0 10px; font-size: 11px; display: none;">+ 접속 정보 추가</button>
+                    </div>
+                    <div id="hw-remote-info-container" style="display: flex; flex-direction: column; gap: 12px;"></div>
                   </div>
 
-                  <!-- [SECTION 5] 설치 위치 (인프라/실물 장비 전용) -->
+                  <!-- [SECTION 5] 설치 위치 -->
                   <div class="form-section-title location-section" style="margin-top: 24px; margin-bottom: 12px;">설치 위치</div>
                   <div class="form-group location-field">
                     <label>건물/위치</label>
@@ -202,7 +233,7 @@ class HwAssetModal extends BaseModal {
                     <input type="hidden" id="hw-loc_x" name="loc_x" /><input type="hidden" id="hw-loc_y" name="loc_y" /><input type="hidden" id="hw-location_photo" name="location_photo" />
                   </div>
 
-                  <!-- [SECTION 6] 구매 및 증빙 (공통) -->
+                  <!-- [SECTION 6] 구매 정보 -->
                   <div class="form-section-title" style="margin-top: 24px; margin-bottom: 12px;">구매 및 증빙 정보</div>
                   <div class="form-group">
                     <label>${ASSET_SCHEMA.PURCHASE_DATE.ui}</label>
@@ -270,6 +301,18 @@ class HwAssetModal extends BaseModal {
     bindLocationEvents('hw-bldg-select', 'hw-location_detail', '', '');
     applyDateMask(document.getElementById('hw-purchase_date') as HTMLInputElement);
 
+    this.fetchMasterComponents().then(() => {
+      this.bindAutocomplete('hw-cpu', 'hw-cpu-autocomplete', 'CPU');
+      this.bindAutocomplete('hw-ram', 'hw-ram-autocomplete', 'RAM');
+      this.bindAutocomplete('hw-gpu', 'hw-gpu-autocomplete', 'GPU');
+    });
+
+    const specInputs = ['hw-cpu', 'hw-ram', 'hw-gpu', 'hw-purchase_date'];
+    specInputs.forEach(id => {
+      document.getElementById(id)?.addEventListener('input', () => this.updatePcGradeBadge());
+      document.getElementById(id)?.addEventListener('change', () => this.updatePcGradeBadge());
+    });
+
     categorySelect.addEventListener('change', () => {
       const types = CATEGORY_TYPE_MAP[categorySelect.value] || [];
       typeSelect.innerHTML = types.length > 0 ? generateOptionsHTML(types, '', true) : '<option value="">구분을 먼저 선택하세요</option>';
@@ -281,10 +324,21 @@ class HwAssetModal extends BaseModal {
     });
 
     document.getElementById('btn-gen-hw-code')?.addEventListener('click', async () => {
+      const type = typeSelect.value;
       const cat = categorySelect.value;
-      if (!cat) { alert('구분을 먼저 선택해주세요.'); return; }
-      const prefix = TYPE_PREFIX_MAP[cat] || 'ETC';
-      const purchaseDate = (document.getElementById('hw-purchase_date') as HTMLInputElement)?.value || '';
+      if (!type) { alert('유형을 먼저 선택해주세요.'); return; }
+      
+      const purchaseDateEl = document.getElementById('hw-purchase_date') as HTMLInputElement;
+      const purchaseDate = purchaseDateEl?.value || '';
+
+      if (!purchaseDate) {
+        alert('구매일자를 먼저 입력해야 자산번호 생성이 가능합니다.');
+        purchaseDateEl?.focus();
+        return;
+      }
+      
+      // 유형 기반 매핑 우선, 없으면 구분 기반, 그래도 없으면 ETC
+      const prefix = TYPE_PREFIX_MAP[type] || TYPE_PREFIX_MAP[cat] || 'ETC';
       try {
         const res = await fetch(`http://${location.hostname}:3000/api/generate-asset-code?prefix=${prefix}&purchaseDate=${purchaseDate}`);
         const data = await res.json();
@@ -325,15 +379,16 @@ class HwAssetModal extends BaseModal {
     });
 
     revertBtn.addEventListener('click', () => {
+      this.isEditMode = false;
       this.setEditLockMode('view');
       if (this.currentAsset) this.fillFormData(this.currentAsset);
       this.updateMapButtonVisibility();
       this.toggleEditOnlyBtns(false);
     });
 
-    // 동적 볼륨 추가 기능 연결
-    const btnAddVolume = document.getElementById('btn-add-volume')!;
-    btnAddVolume.addEventListener('click', () => this.addVolumeRow());
+    // 동적 기능 이벤트 연결
+    document.getElementById('btn-add-volume')?.addEventListener('click', () => this.addVolumeRow());
+    document.getElementById('btn-add-remote-info')?.addEventListener('click', () => this.addRemoteInfoRow());
 
     const fileInput = document.getElementById('hw-approval_document_file') as HTMLInputElement;
     const fileNameDisplay = document.getElementById('hw-file-name-display');
@@ -374,7 +429,36 @@ class HwAssetModal extends BaseModal {
         return;
       }
 
-      // 동적 볼륨 데이터 수집 및 배열 생성
+      // CPU, RAM, GPU 마스터 테이블 기반 유효성 검사 (완전 강제 방식)
+      const category = categorySelect.value;
+      const type = typeSelect.value;
+      const specCategories = ['PC', '서버', '노트북', '스토리지', '워크스테이션'];
+      const hasSpec = specCategories.includes(category) || type.includes('서버PC');
+
+      if (hasSpec) {
+        const cpuVal = (document.getElementById('hw-cpu') as HTMLInputElement)?.value || '';
+        const ramVal = (document.getElementById('hw-ram') as HTMLInputElement)?.value || '';
+        const gpuVal = (document.getElementById('hw-gpu') as HTMLInputElement)?.value || '';
+
+        const cpuMaster = this.masterComponents.filter(c => c.category === 'CPU').map(c => c.component_name);
+        const ramMaster = this.masterComponents.filter(c => c.category === 'RAM').map(c => c.component_name);
+        const gpuMaster = this.masterComponents.filter(c => c.category === 'GPU').map(c => c.component_name);
+
+        if (cpuVal && !cpuMaster.includes(cpuVal)) {
+          alert(`[입력 오류] '${cpuVal}'은(는) 마스터 테이블에 존재하지 않는 CPU 부품명입니다. 자동완성 추천 목록에서 올바른 부품명을 골라 선택해 주세요.`);
+          return;
+        }
+        if (ramVal && !ramMaster.includes(ramVal)) {
+          alert(`[입력 오류] '${ramVal}'은(는) 마스터 테이블에 존재하지 않는 RAM 부품명입니다. 자동완성 추천 목록에서 올바른 부품명을 골라 선택해 주세요.`);
+          return;
+        }
+        if (gpuVal && !gpuMaster.includes(gpuVal)) {
+          alert(`[입력 오류] '${gpuVal}'은(는) 마스터 테이블에 존재하지 않는 GPU 부품명입니다. 자동완성 추천 목록에서 올바른 부품명을 골라 선택해 주세요.`);
+          return;
+        }
+      }
+
+      // 동적 볼륨 데이터 수집
       const vols: any[] = [];
       document.querySelectorAll('#hw-volume-container .volume-row').forEach((row, idx) => {
         const type = (row.querySelector('.vol-type') as HTMLSelectElement).value;
@@ -384,6 +468,24 @@ class HwAssetModal extends BaseModal {
       });
       setFieldValue('hw-volumes-data', JSON.stringify(vols));
 
+      // 동적 네트워크/원격 데이터 수집
+      const nets: any[] = [];
+      document.querySelectorAll('#hw-remote-info-container .remote-info-row').forEach(row => {
+        const type = (row.querySelector('.ri-type') as HTMLSelectElement).value;
+        const val1 = (row.querySelector('.ri-val1') as HTMLInputElement).value;
+
+        if (type === 'IP' && val1) {
+            const tool = (row.querySelector('.ri-tool') as HTMLSelectElement)?.value || '';
+            const id = (row.querySelector('.ri-id') as HTMLInputElement)?.value || '';
+            const pw = (row.querySelector('.ri-pw') as HTMLInputElement)?.value || '';
+            const val2Str = (id || pw) ? JSON.stringify({ id, pw }) : '';
+            nets.push({ type: 'IP', name: tool, val1: val1, val2: val2Str });
+        } else if (type === 'MAC' && val1) {
+            nets.push({ type: 'MAC', name: 'MAC 주소', val1: val1, val2: '' });
+        }
+      });
+      setFieldValue('hw-remotes-data', JSON.stringify(nets));
+
       const formData = new FormData(this.formEl!);
       const updated = { ...this.currentAsset };
       formData.forEach((value, key) => { if (key !== 'id') updated[key] = value; });
@@ -399,15 +501,10 @@ class HwAssetModal extends BaseModal {
   private addVolumeRow(vol: any = { type: 'SSD', capacity: '', unit: 'GB' }) {
     const container = document.getElementById('hw-volume-container');
     if (!container) return;
-
     const row = document.createElement('div');
-    row.style.display = 'flex';
-    row.style.gap = '8px';
-    row.style.alignItems = 'center';
     row.className = 'volume-row';
-    
+    row.style.display = 'flex'; row.style.gap = '8px'; row.style.alignItems = 'center';
     const inputStyle = 'height: 38px !important; box-sizing: border-box !important; font-size: 13px; margin: 0; padding: 0 8px;';
-
     row.innerHTML = `
       <select class="vol-type" style="${inputStyle} width: 80px;" ${!this.isEditMode ? 'disabled' : ''}>
         <option value="SSD" ${vol.type === 'SSD' ? 'selected' : ''}>SSD</option>
@@ -415,23 +512,104 @@ class HwAssetModal extends BaseModal {
         <option value="NVMe" ${vol.type === 'NVMe' ? 'selected' : ''}>NVMe</option>
       </select>
       <input type="number" class="vol-cap" value="${vol.capacity || ''}" placeholder="용량" style="${inputStyle} flex: 1;" ${!this.isEditMode ? 'readonly' : ''} />
-      <select class="vol-unit" style="${inputStyle} width: 70px;" ${!this.isEditMode ? 'disabled' : ''}>
+      <select class="vol-unit" style="${inputStyle} width: 60px;" ${!this.isEditMode ? 'disabled' : ''}>
         <option value="GB" ${vol.unit === 'GB' ? 'selected' : ''}>GB</option>
         <option value="TB" ${vol.unit === 'TB' ? 'selected' : ''}>TB</option>
       </select>
-      <button type="button" class="btn btn-outline btn-remove-vol edit-only-btn" style="height: 38px !important; padding: 0 12px; color: #E11D48; border-color: #E11D48; display: ${this.isEditMode ? 'inline-flex' : 'none'};">&times;</button>
+      <button type="button" class="btn btn-outline btn-remove-row edit-only-btn" style="height: 38px !important; padding: 0 12px; color: #E11D48; border-color: #E11D48; display: ${this.isEditMode ? 'inline-flex' : 'none'};">&times;</button>
+    `;
+    row.querySelector('.btn-remove-row')?.addEventListener('click', () => row.remove());
+    container.appendChild(row);
+  }
+
+  private addRemoteInfoRow(info: any = { type: 'IP', name: '원격접속', val1: '', val2: '' }) {
+    const container = document.getElementById('hw-remote-info-container');
+    if (!container) return;
+
+    // Parse val2 (which contains JSON with id and pw if type is IP)
+    let parsedId = '';
+    let parsedPw = '';
+    if (info.type === 'IP' && info.val2) {
+        try {
+            const parsed = typeof info.val2 === 'string' ? JSON.parse(info.val2) : info.val2;
+            parsedId = parsed.id || '';
+            parsedPw = parsed.pw || '';
+        } catch (e) {
+            // Legacy fallback if val2 was just a simple string
+            parsedId = info.val2;
+        }
+    }
+
+    const row = document.createElement('div');
+    row.className = 'remote-info-row';
+
+    // First Line: Type & Address
+    const line1 = document.createElement('div');
+    line1.className = 'ri-line';
+    line1.innerHTML = `
+      <select class="ri-type" ${!this.isEditMode ? 'disabled' : ''}>
+        <option value="IP" ${info.type === 'IP' ? 'selected' : ''}>IP 주소</option>
+        <option value="MAC" ${info.type === 'MAC' ? 'selected' : ''}>MAC 주소</option>
+      </select>
+      <input type="text" class="ri-val1" value="${info.val1 || ''}" placeholder="주소 입력" ${!this.isEditMode ? 'readonly' : ''} />
+      <button type="button" class="btn-remove-row ri-remove-btn edit-only-btn" style="display: ${this.isEditMode ? 'inline-flex' : 'none'};">&times;</button>
     `;
 
-    row.querySelector('.btn-remove-vol')?.addEventListener('click', () => row.remove());
+    // Second Line: Tool & Credentials (Only for IP)
+    const line2 = document.createElement('div');
+    line2.className = 'ri-line ri-cred-line';
+    line2.style.display = info.type === 'IP' ? 'flex' : 'none';
+    line2.innerHTML = `
+      <div class="ri-connector"></div>
+      <select class="ri-tool" ${!this.isEditMode ? 'disabled' : ''}>
+        <option value="원격접속" ${info.name === '원격접속' ? 'selected' : ''}>원격접속</option>
+        <option value="리눅스" ${info.name === '리눅스' ? 'selected' : ''}>리눅스</option>
+        <option value="기타" ${info.name === '기타' ? 'selected' : ''}>기타</option>
+      </select>
+      <input type="text" class="ri-id" value="${parsedId}" placeholder="원격 ID" ${!this.isEditMode ? 'readonly' : ''} />
+      <input type="text" class="ri-pw" value="${parsedPw}" placeholder="원격 PW" ${!this.isEditMode ? 'readonly' : ''} />
+      <div class="ri-spacer"></div> <!-- Spacer for the remove button width -->
+    `;
+
+    row.appendChild(line1);
+    row.appendChild(line2);
+
+    // Toggle logic
+    const typeSelect = row.querySelector('.ri-type') as HTMLSelectElement;
+    typeSelect.addEventListener('change', (e) => {
+        const isIP = (e.target as HTMLSelectElement).value === 'IP';
+        line2.style.display = isIP ? 'flex' : 'none';
+        if (!isIP) {
+            (row.querySelector('.ri-id') as HTMLInputElement).value = '';
+            (row.querySelector('.ri-pw') as HTMLInputElement).value = '';
+        }
+    });
+
+    row.querySelector('.btn-remove-row')?.addEventListener('click', () => row.remove());
     container.appendChild(row);
   }
 
   private toggleEditOnlyBtns(isEdit: boolean) {
-    const addBtn = document.getElementById('btn-add-volume');
-    if (addBtn) addBtn.style.display = isEdit ? 'inline-flex' : 'none';
+    ['btn-add-volume', 'btn-add-remote-info'].forEach(id => {
+        const btn = document.getElementById(id);
+        if (btn) btn.style.display = isEdit ? 'inline-flex' : 'none';
+    });
     document.querySelectorAll('.edit-only-btn').forEach(btn => {
         (btn as HTMLElement).style.display = isEdit ? 'inline-flex' : 'none';
     });
+
+    // 동적 생성된 필드들 (볼륨/원격정보)의 상태 일괄 토글
+    const containers = ['#hw-volume-container', '#hw-remote-info-container'];
+    containers.forEach(selector => {
+      document.querySelectorAll(`${selector} input`).forEach(input => {
+          if (isEdit) input.removeAttribute('readonly');
+          else input.setAttribute('readonly', 'true');
+      });
+      document.querySelectorAll(`${selector} select`).forEach(select => {
+          if (isEdit) select.removeAttribute('disabled');
+          else select.setAttribute('disabled', 'true');
+      });
+    });
   }
 
   protected fillFormData(asset: any): void {
@@ -444,6 +622,8 @@ class HwAssetModal extends BaseModal {
     if (typeSelect) typeSelect.innerHTML = types.length > 0 ? generateOptionsHTML(types, asset.asset_type, true) : '<option value="">구분을 먼저 선택하세요</option>';
     setFieldValue('hw-asset_type', asset.asset_type || '');
     setFieldValue('hw-hw_status', asset.hw_status || '운영');
+    setFieldValue('hw-service_type', asset.service_type || '외부');
+    setFieldValue('hw-asset_purpose', asset.asset_purpose || '');
     setFieldValue('hw-current_dept', asset.current_dept || '');
     setFieldValue('hw-manager_primary', asset.manager_primary || '');
     setFieldValue('hw-manager_secondary', asset.manager_secondary || '');
@@ -458,23 +638,40 @@ class HwAssetModal extends BaseModal {
     setFieldValue('hw-gpu', asset.gpu || '');
     setFieldValue('hw-mainboard', asset.mainboard || '');
     
-    // 동적 볼륨 렌더링 초기화 및 생성
+    // 동적 볼륨 렌더링
     const volumeContainer = document.getElementById('hw-volume-container');
-    if (volumeContainer) {
-        volumeContainer.innerHTML = '';
-        let vols = [];
+    if (volumeContainer) volumeContainer.innerHTML = '';
+    let vols = [];
+    try { vols = asset.volumes ? (typeof asset.volumes === 'string' ? JSON.parse(asset.volumes) : asset.volumes) : []; } catch(e) {}
+    vols.forEach((v: any) => this.addVolumeRow(v));
+
+    // 통합 원격 접속 정보 렌더링 초기화 및 생성
+    const remoteInfoContainer = document.getElementById('hw-remote-info-container');
+    if (remoteInfoContainer) {
+        remoteInfoContainer.innerHTML = '';
+        let nets = [];
         try {
-            vols = asset.volumes ? (typeof asset.volumes === 'string' ? JSON.parse(asset.volumes) : asset.volumes) : [];
+            nets = asset.remotes ? (typeof asset.remotes === 'string' ? JSON.parse(asset.remotes) : asset.remotes) : [];
         } catch(e) {}
-        vols.forEach((v: any) => this.addVolumeRow(v));
+
+        // Fallback: 서버에서 배열을 안 줬지만 기존 평탄화 데이터가 있는 경우 
+        if (nets.length === 0 && (asset.ip_address || asset.mac_address || asset.remote_tool || asset.remote_id)) {
+            if (asset.ip_address) {
+                const tool = asset.remote_tool || '원격접속';
+                const creds = (asset.remote_id || asset.remote_pw) ? JSON.stringify({ id: asset.remote_id || '', pw: asset.remote_pw || '' }) : '';
+                nets.push({ type: 'IP', name: tool, val1: asset.ip_address, val2: creds });
+            }
+            if (asset.mac_address) {
+                nets.push({ type: 'MAC', name: 'MAC 주소', val1: asset.mac_address, val2: '' });
+            }
+            if (!asset.ip_address && (asset.remote_tool || asset.remote_id)) {
+                const creds = JSON.stringify({ id: asset.remote_id || '', pw: asset.remote_pw || '' });
+                nets.push({ type: 'IP', name: asset.remote_tool || '기타', val1: '', val2: creds });
+            }
+        }
+        nets.forEach((n: any) => this.addRemoteInfoRow(n));
     }
 
-    setFieldValue('hw-ip_address', asset.ip_address || '');
-    setFieldValue('hw-ip_address_2', asset.ip_address_2 || '');
-    setFieldValue('hw-mac_address', asset.mac_address || '');
-    setFieldValue('hw-remote_tool', asset.remote_tool || '');
-    setFieldValue('hw-remote_id', asset.remote_id || '');
-    setFieldValue('hw-remote_pw', asset.remote_pw || '');
     setFieldValue('hw-monitoring', asset.monitoring || '비대상');
     setFieldValue('hw-serial_num', asset.serial_num || '');
     setFieldValue('hw-monitor_inch', asset.monitor_inch || '');
@@ -484,6 +681,7 @@ class HwAssetModal extends BaseModal {
     setFieldValue('hw-purchase_vendor', asset.purchase_vendor || '');
     setFieldValue('hw-purchase_amount', asset.purchase_amount || '');
     setFieldValue('hw-approval_document', asset.approval_document || '');
+    
     const docName = document.getElementById('hw-file-name-display');
     if (docName) docName.textContent = asset.approval_document ? asset.approval_document.split('/').pop() : '파일 선택...';
     const fileLinkContainer = document.getElementById('hw-file-link-container');
@@ -492,6 +690,7 @@ class HwAssetModal extends BaseModal {
     } else if (fileLinkContainer) {
       fileLinkContainer.innerHTML = '';
     }
+    
     setFieldValue('hw-memo', asset.memo || '');
     setFieldValue('hw-location_detail', asset.location_detail || '');
     setFieldValue('hw-loc_x', asset.loc_x || '');
@@ -500,6 +699,7 @@ class HwAssetModal extends BaseModal {
     parseAndSetLocation(asset.location || '', asset.location_detail || '', 'hw-bldg-select', 'hw-location_detail');
     this.renderHistory(asset.id);
     this.applyRoleVisibility();
+    this.updatePcGradeBadge();
   }
 
   protected onAfterOpen(asset: any, mode: string): void {
@@ -520,32 +720,18 @@ class HwAssetModal extends BaseModal {
     const category = (document.getElementById('hw-category') as HTMLSelectElement)?.value || '';
     const type = (document.getElementById('hw-asset_type') as HTMLSelectElement)?.value || '';
 
-    // 인프라 장비 (서버, 저장매체, 네트워크, 보안장비, 공간정보장비, 서버PC)
     const infraCategories = ['서버', '저장매체', '네트워크', '보안장비', '공간정보장비'];
     const isInfra = infraCategories.includes(category) || type.includes('서버') || type.includes('저장시스템');
-
-    // 개인 장비 (PC, 노트북, 모바일, 태블릿) - '서버PC'는 제외
     const personalCategories = ['PC', '노트북', '모바일', '태블릿'];
     const isPersonal = (personalCategories.includes(category) || type.includes('개인PC') || type.includes('노트북')) && !type.includes('서버PC');
-
-    // 시스템 사양 (PC, 서버 등)
     const specCategories = ['PC', '서버', '노트북', '스토리지', '워크스테이션'];
     const hasSpec = specCategories.includes(category) || type.includes('서버PC');
-
-    // 네트워크 정보 (IP/MAC)
     const noNetCategories = ['저장매체', '네트워크', '공간정보장비', 'PC부품', '사무가구'];
     const showNet = (isInfra || isPersonal) && !noNetCategories.includes(category);
-
-    // 시리얼 번호
     const hasSN = !['사무가구', 'PC부품'].includes(category);
-
-    // 수량/용량 전용 (부품)
     const isParts = ['PC부품', '사무가구'].includes(category);
-
-    // 원격 접속 (서버 전용)
     const showRemote = category === '서버' || type.includes('서버');
 
-    // JS에서 display: block 강제 대신 빈 문자열 할당하여 네이티브 CSS flex 활용
     document.querySelectorAll('.remote-section, .remote-field, .monitoring-field').forEach(el => (el as HTMLElement).style.display = showRemote ? '' : 'none');
     document.querySelectorAll('.net-only').forEach(el => (el as HTMLElement).style.display = showNet ? '' : 'none');
     document.querySelectorAll('.spec-only').forEach(el => (el as HTMLElement).style.display = hasSpec ? '' : 'none');
@@ -601,29 +787,110 @@ class HwAssetModal extends BaseModal {
     overlay.className = 'image-picker-overlay';
     const renderContent = () => {
       const imgPath = imagePaths[currentIdx];
-      const digitalMap = this.generateDynamicSVG(imgPath);
+      const isMulti = imagePaths.length > 1;
+      const isHtmlMap = imgPath.toLowerCase().endsWith('.html');
+      const digitalMap = isHtmlMap ? '' : this.generateDynamicSVG(imgPath);
+      
       overlay.innerHTML = `
-        <div class="image-picker-header"><h3>${title}</h3><button class="btn-close-picker" style="background:none; border:none; color:white; font-size:24px; cursor:pointer;">&times;</button></div>
-        <div class="image-picker-content"><div class="layout-map-container" id="picker-container"><img src="${imgPath}" class="layout-map-img" /><div id="picker-marker" class="layout-marker hidden"></div><div class="digital-overlay-layer">${digitalMap}</div></div></div>
+        <div class="image-picker-header">
+          <h3>${title} ${isMulti ? `(${currentIdx + 1}/${imagePaths.length})` : ''}</h3>
+          <button class="btn-close-picker" style="background:none; border:none; color:white; font-size:24px; cursor:pointer;">&times;</button>
+        </div>
+        <div class="image-picker-content">
+          ${isMulti ? `
+            <div class="picker-nav prev ${currentIdx === 0 ? 'disabled' : ''}" style="position: absolute; left: 10px; top: 50%; transform: translateY(-50%); z-index: 100; cursor: pointer; background: rgba(0,0,0,0.5); color: white; padding: 20px 10px; border-radius: 5px; font-size: 24px; user-select: none;">◀</div>
+            <div class="picker-nav next ${currentIdx === imagePaths.length - 1 ? 'disabled' : ''}" style="position: absolute; right: 10px; top: 50%; transform: translateY(-50%); z-index: 100; cursor: pointer; background: rgba(0,0,0,0.5); color: white; padding: 20px 10px; border-radius: 5px; font-size: 24px; user-select: none;">▶</div>
+          ` : ''}
+          <div class="layout-map-container" id="picker-container">
+            ${isHtmlMap 
+              ? `<iframe src="${imgPath}" style="width:100%; height:100%; border:none; display:block;"></iframe>`
+              : `<img src="${imgPath}" class="layout-map-img" /><div id="picker-marker" class="layout-marker hidden"></div><div class="digital-overlay-layer">${digitalMap}</div>`
+            }
+          </div>
+        </div>
         <div class="image-picker-footer"><button id="btn-picker-cancel" class="btn btn-outline" style="color:white; border-color:white;">취소</button><button id="btn-picker-save" class="btn btn-primary">위치 확정</button></div>`;
+      
       let selectedX = ''; let selectedY = '';
-      const container = overlay.querySelector('#picker-container') as HTMLElement;
-      const marker = overlay.querySelector('#picker-marker') as HTMLElement;
-      container.addEventListener('click', (e) => {
-        const rect = container.getBoundingClientRect();
-        const x = ((e.clientX - rect.left) / rect.width) * 100;
-        const y = ((e.clientY - rect.top) / rect.height) * 100;
-        selectedX = x.toFixed(2); selectedY = y.toFixed(2);
-        marker.style.left = `${selectedX}%`; marker.style.top = `${selectedY}%`; marker.classList.remove('hidden');
-      });
-      overlay.querySelector('.btn-close-picker')?.addEventListener('click', () => overlay.remove());
-      overlay.querySelector('#btn-picker-cancel')?.addEventListener('click', () => overlay.remove());
-      overlay.querySelector('#btn-picker-save')?.addEventListener('click', () => {
-        if (!selectedX || !selectedY) { alert('위치를 선택해주세요.'); return; }
-        setFieldValue('hw-loc_x', selectedX); setFieldValue('hw-loc_y', selectedY);
-        setFieldValue('hw-location_photo', imagePaths[currentIdx]);
-        this.updateMapButtonVisibility(); overlay.remove();
-      });
+
+      if (isMulti) {
+        overlay.querySelector('.picker-nav.prev')?.addEventListener('click', (e) => { e.stopPropagation(); if (currentIdx > 0) { currentIdx--; renderContent(); } });
+        overlay.querySelector('.picker-nav.next')?.addEventListener('click', (e) => { e.stopPropagation(); if (currentIdx < imagePaths.length - 1) { currentIdx++; renderContent(); } });
+      }
+
+      if (isHtmlMap) {
+        // HTML 지도 메시지 리스너
+        const handleMessage = (e: MessageEvent) => {
+          if (e.data.type === 'PICK_LOCATION') {
+            selectedX = e.data.x;
+            selectedY = e.data.y;
+          }
+        };
+        window.addEventListener('message', handleMessage);
+        overlay.querySelector('.btn-close-picker')?.addEventListener('click', () => { window.removeEventListener('message', handleMessage); overlay.remove(); });
+        overlay.querySelector('#btn-picker-cancel')?.addEventListener('click', () => { window.removeEventListener('message', handleMessage); overlay.remove(); });
+        overlay.querySelector('#btn-picker-save')?.addEventListener('click', () => {
+          if (!selectedX || !selectedY) { alert('위치를 선택해주세요.'); return; }
+          setFieldValue('hw-loc_x', selectedX); setFieldValue('hw-loc_y', selectedY);
+          setFieldValue('hw-location_photo', imagePaths[currentIdx]);
+          this.updateMapButtonVisibility(); 
+          window.removeEventListener('message', handleMessage);
+          overlay.remove();
+        });
+      } else {
+        const container = overlay.querySelector('#picker-container') as HTMLElement;
+        const marker = overlay.querySelector('#picker-marker') as HTMLElement;
+        container.addEventListener('click', (e) => {
+          const rectBound = container.getBoundingClientRect();
+          const clickX = ((e.clientX - rectBound.left) / rectBound.width) * 100;
+          const clickY = ((e.clientY - rectBound.top) / rectBound.height) * 100;
+          
+          let snapped = false;
+          overlay.querySelectorAll('rect').forEach(rect => {
+            const rx = parseFloat(rect.getAttribute('x') || '0');
+            const ry = parseFloat(rect.getAttribute('y') || '0');
+            const rw = parseFloat(rect.getAttribute('width') || '0');
+            const rh = parseFloat(rect.getAttribute('height') || '0');
+
+            if (clickX >= rx && clickX <= rx + rw && clickY >= ry && clickY <= ry + rh) {
+              overlay.querySelectorAll('rect').forEach(r => {
+                  r.style.fill = 'rgba(30,81,73,0.05)'; 
+                  r.style.stroke = 'rgba(30,81,73,0.2)'; 
+                  r.style.strokeWidth = '0.2';
+              });
+              rect.style.fill = 'rgba(255, 61, 0, 0.4)';
+              rect.style.stroke = '#FF3D00';
+              rect.style.strokeWidth = '0.8';
+
+              selectedX = rx.toFixed(2);
+              selectedY = ry.toFixed(2);
+              
+              marker.style.left = `${rx + rw/2}%`;
+              marker.style.top = `${ry + rh/2}%`;
+              marker.classList.remove('hidden');
+              snapped = true;
+            }
+          });
+
+          if (!snapped) {
+              selectedX = '';
+              selectedY = '';
+              marker.classList.add('hidden');
+              overlay.querySelectorAll('rect').forEach(r => {
+                  r.style.fill = 'rgba(30,81,73,0.05)'; 
+                  r.style.stroke = 'rgba(30,81,73,0.2)'; 
+                  r.style.strokeWidth = '0.2';
+              });
+          }
+        });
+        overlay.querySelector('.btn-close-picker')?.addEventListener('click', () => overlay.remove());
+        overlay.querySelector('#btn-picker-cancel')?.addEventListener('click', () => overlay.remove());
+        overlay.querySelector('#btn-picker-save')?.addEventListener('click', () => {
+          if (!selectedX || !selectedY) { alert('위치를 선택해주세요.'); return; }
+          setFieldValue('hw-loc_x', selectedX); setFieldValue('hw-loc_y', selectedY);
+          setFieldValue('hw-location_photo', imagePaths[currentIdx]);
+          this.updateMapButtonVisibility(); overlay.remove();
+        });
+      }
     };
     renderContent(); document.body.appendChild(overlay);
   }
@@ -631,13 +898,26 @@ class HwAssetModal extends BaseModal {
   private openImagePreview(imagePath: string, title: string, x: string, y: string) {
     const overlay = document.createElement('div');
     overlay.className = 'image-picker-overlay';
-    const digitalMap = this.generateDynamicSVG(imagePath);
+    const isHtmlMap = imagePath.toLowerCase().endsWith('.html');
+    const digitalMap = isHtmlMap ? '' : this.generateDynamicSVG(imagePath);
+    
+    // HTML 지도인 경우 좌표를 쿼리 파라미터로 전달
+    const finalPath = isHtmlMap ? `${imagePath}?markerX=${x}&markerY=${y}` : imagePath;
+
     overlay.innerHTML = `
       <div class="image-picker-header"><h3>${title}</h3><button class="btn-close-picker" style="background:none; border:none; color:white; font-size:24px; cursor:pointer;">&times;</button></div>
-      <div class="image-picker-content"><div class="layout-map-container readonly"><img src="${imagePath}" class="layout-map-img" /><div id="preview-marker" class="layout-marker pulse-marker" style="left:${x}%; top:${y}%;"></div><div class="digital-overlay-layer">${digitalMap}</div></div></div>
+      <div class="image-picker-content">
+        <div class="layout-map-container readonly">
+          ${isHtmlMap 
+            ? `<iframe src="${finalPath}" style="width:100%; height:100%; border:none; display:block;"></iframe>`
+            : `<img src="${imagePath}" class="layout-map-img" /><div id="preview-marker" class="layout-marker pulse-marker" style="left:${x}%; top:${y}%;"></div><div class="digital-overlay-layer">${digitalMap}</div>`
+          }
+        </div>
+      </div>
       <div class="image-picker-footer"><button id="btn-preview-close" class="btn btn-primary">확인</button></div>`;
+    
     document.body.appendChild(overlay);
-    if (digitalMap) {
+    if (!isHtmlMap && digitalMap) {
       const curX = parseFloat(x || '0'); const curY = parseFloat(y || '0');
       overlay.querySelectorAll('rect').forEach(rect => {
         const sx = parseFloat(rect.getAttribute('x') || '0');
@@ -658,9 +938,51 @@ class HwAssetModal extends BaseModal {
   private renderHistory(assetId: string) {
     const container = document.getElementById('hw-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('');
+    
+    // state.masterData.logs에서 해당 자산의 이력 필터링 (최신순)
+    const logs = (state.masterData.logs || [])
+      .filter(l => l.asset_id === assetId)
+      .sort((a, b) => new Date(b.created_at || b.log_date || '').getTime() - new Date(a.created_at || a.log_date || '').getTime());
+
+    if (logs.length === 0) { 
+      container.innerHTML = '<div class="empty-history">기록된 변동 이력이 없습니다.</div>'; 
+      return; 
+    }
+
+    container.innerHTML = logs.map(l => {
+      let eventTag = '기타';
+      let tagClass = 'tag-default';
+      let itemClass = '';
+
+      switch(l.event_type) {
+        case 'DEPT_CHANGE': 
+          eventTag = '조직'; tagClass = 'tag-dept'; itemClass = 'evt-dept'; 
+          break;
+        case 'USER_CHANGE': 
+          eventTag = '사용자'; tagClass = 'tag-user'; itemClass = 'evt-user'; 
+          break;
+        case 'ROLE_CHANGE': 
+          eventTag = '용도'; tagClass = 'tag-role'; itemClass = 'evt-role'; 
+          break;
+        case 'STATUS_CHANGE': 
+          eventTag = '상태'; tagClass = 'tag-status'; itemClass = 'evt-status'; 
+          break;
+      }
+
+      // 화살표 기호(➔)를 사용하여 변경 사항 강조
+      const formattedDetails = (l.details || '').replace(' -> ', ' <span class="history-arrow">➔</span> ');
+
+      return `
+        <div class="history-item ${itemClass}">
+          <div class="history-header-row">
+            <span class="history-tag ${tagClass}">${eventTag}</span>
+            <span class="history-date">${l.log_date || ''}</span>
+          </div>
+          <span class="history-user">${l.log_user || '시스템'}</span>
+          <div class="history-details">${formattedDetails}</div>
+        </div>
+      `;
+    }).join('');
   }
 
   private getCategoryKey(asset: any): string {
@@ -675,6 +997,77 @@ class HwAssetModal extends BaseModal {
     if (cat === 'PC부품') return 'pcParts';
     return (cat === 'PC' || code.startsWith('PC')) ? 'pc' : 'officeSupplies';
   }
+
+  private async fetchMasterComponents(): Promise<void> {
+    try {
+      const res = await fetch(`http://${location.hostname}:3000/api/hardware-components`);
+      this.masterComponents = await res.json();
+    } catch (err) {
+      console.error('Failed to fetch master components:', err);
+    }
+  }
+
+  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 = this.masterComponents.filter(c => c.category === category);
+      const filtered = filterText 
+        ? items.filter(c => 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 => `<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.updatePcGradeBadge(); // 뱃지 즉시 업데이트
+      }
+    });
+
+    // 아웃사이드 클릭 시 닫기
+    document.addEventListener('mousedown', (e) => {
+      if (e.target !== input && !list.contains(e.target as Node)) {
+        list.classList.add('hidden');
+      }
+    });
+  }
+
+  private updatePcGradeBadge(): void {
+    const cpu = (document.getElementById('hw-cpu') as HTMLInputElement)?.value || '';
+    const ram = (document.getElementById('hw-ram') as HTMLInputElement)?.value || '';
+    const gpu = (document.getElementById('hw-gpu') as HTMLInputElement)?.value || '';
+    const date = (document.getElementById('hw-purchase_date') as HTMLInputElement)?.value || '';
+
+    const score = calculatePcScoreDeductive(cpu, ram, gpu, date);
+    const grade = getPcGrade(score);
+
+    const badge = document.getElementById('hw-pc-grade-badge');
+    if (badge) {
+      badge.textContent = `${grade.name} (${score}점)`;
+      badge.className = `badge ${grade.class}`;
+    }
+  }
 }
 
 export const hwModal = new HwAssetModal();

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

@@ -201,7 +201,7 @@ export class PCFlowModal {
     const showStockSuggestions = () => {
       const query = stockSearch.value.trim().toLowerCase();
 
-      // Filter available PCs (category PC, status '대기' or '재고창고')
+      // Filter available PCs (category PC, status '대기', '미할당', or '재고')
       const pcs = state.masterData.pc || [];
       const filtered = pcs.filter((p: any) => {
         const status = (p.hw_status || '').trim();
@@ -210,7 +210,7 @@ export class PCFlowModal {
           (p.model_name && p.model_name.toLowerCase().includes(query)) ||
           (p.cpu && p.cpu.toLowerCase().includes(query));
         
-        return (status === '대기' || status === '재고창고' || status === '미할당') && matchesQuery;
+        return (status === '대기' || status === '미할당' || status === '재고') && matchesQuery;
       });
 
       this.renderPCSuggestions(filtered, stockSuggestions, (pc) => {

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

@@ -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층', '파고라'],
-  '기술개발센터': ['서버실', 'BLUE ZONE', 'GREEN ZONE', 'ORANGE ZONE', '회의실2', '회의실3', '회의실5', '회의실6', '회의실7', '사이니지룸'],
+  '기술개발센터': ['서버실', '센터내부'],
   '유니온빌딩': ['4층', '5층', '6층'],
   '뉴코아빌딩': ['4층', '6층', '7층'],
   'IDC': ['서관202', '서관203', '서관204', '서관205', '동관53', '동관54']
@@ -60,10 +60,17 @@ export const IMAGE_LOCATIONS: Record<string, Record<string, string[]>> = {
     '서버실': [
       'img/location_photo/기술개발센터/서버실/서버실_1.png',
       'img/location_photo/기술개발센터/서버실/서버실_2.png'
-    ]
+    ],
+    '센터내부': ['img/location_photo/기술개발센터/센터내부/센터내부.png']
   },
   '한맥빌딩': {
-    '7층': ['img/location_photo/한맥빌딩/7층_로비.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',

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,7 +3,7 @@ import { state } from '../core/state';
 const MENU_CONFIG: any = {
   hw: {
     label: '하드웨어',
-    tabs: ['대시보드', '서버', 'PC', '스토리지', '공간정보장비', 'PC부품', '네트워크', '업무지원장비']
+    tabs: ['대시보드', '서버', 'PC', '스토리지', '공간정보장비', 'PC부품', '부품 마스터', '네트워크', '업무지원장비']
   },
   sw: {
     label: '소프트웨어',
@@ -11,7 +11,7 @@ const MENU_CONFIG: any = {
   },
   ops: {
     label: '운영지원',
-    tabs: ['클라우드', '도메인', '비용관리']
+    tabs: ['클라우드', '도메인', '비용관리', '사용자']
   },
   vip: {
     label: '내빈/외빈',
@@ -73,6 +73,7 @@ export function renderNavigation(onTabChange: (tab: string) => void) {
       shelf.className = 'lnb-shelf';
       
       visibleTabs.forEach((tab: string) => {
+        if (tab === '부품 마스터') return; // 메뉴바에서 표시 생략
         const item = document.createElement('div');
         item.className = `lnb-item ${isActive && state.activeSubTab === tab ? 'active' : ''}`;
         item.textContent = tab;

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

@@ -15,17 +15,30 @@ export interface FilterOptions {
   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, showType = 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">
@@ -34,21 +47,28 @@ export function renderFilterBar(container: HTMLElement, options: FilterOptions)
         <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">
@@ -75,7 +95,8 @@ export function renderFilterBar(container: HTMLElement, options: FilterOptions)
       dept: (container.querySelector('#filter-dept') as HTMLSelectElement)?.value || '',
       loc: (container.querySelector('#filter-loc') as HTMLSelectElement)?.value || '',
       field: (container.querySelector('#filter-field') as HTMLSelectElement)?.value || '',
-      type: (container.querySelector('#filter-type') as HTMLSelectElement)?.value || ''
+      type: (container.querySelector('#filter-type') as HTMLSelectElement)?.value || '',
+      status: (container.querySelector('#filter-status') as HTMLSelectElement)?.value || ''
     };
     onFilterChange(filters);
   };
@@ -86,9 +107,10 @@ export function renderFilterBar(container: HTMLElement, options: FilterOptions)
   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', 'filter-type'].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 = '';
     });
@@ -109,7 +131,8 @@ export function applyCommonFilters(list: any[], filters: any, searchKeys: (keyof
     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 && matchType;
+    return matchKeyword && matchCorp && matchDept && matchLoc && matchField && matchType && matchStatus;
   });
 }

src/core/schema.ts

@@ -17,6 +17,7 @@ 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: '자산위치' },
@@ -154,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,26 +39,31 @@ 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: []
   }
 };
 
@@ -74,6 +81,7 @@ export async function loadMasterDataFromDB() {
     state.masterData = {
       ...state.masterData,
       ...data,
+      jobSpecs: data.jobSpecs || [],
       logs: (data.logs || []).map((l: any) => ({
         ...l,
         assetId: l.asset_id || l.assetId,
@@ -158,3 +166,104 @@ export async function deleteAsset(category: string, assetId: string) {
   }
   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>
   `;
@@ -158,3 +158,202 @@ export function dynamicSort<T>(list: T[], key: string, direction: 'asc' | 'desc'
 export function getActionButtonsHTML(): string {
   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,62 +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';
 
-async function apiBatchSave(url: string, data: any[], label: string) {
-  try {
-    const response = await fetch(url, {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify(data)
-    });
-    if (!response.ok) throw new Error(`${label} DB 저장 실패`);
-    console.log(`✅ ${label} DB 저장 완료`);
-  } 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/swInternal/batch`, state.masterData.swInternal, '내부SW');
-const saveSwExternalToDB = () => apiBatchSave(`http://${location.hostname}:3000/api/swExternal/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/swUsers/batch`, state.masterData.swUsers, 'SW사용자');
-const saveLogsToDB = () => apiBatchSave(`http://${location.hostname}:3000/api/logs/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();
 }
@@ -71,21 +77,18 @@ 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(() => saveAllDataToDB(), closeAllModals);
+    initDomainModal(() => refreshAllData(), closeAllModals);
+    initPartsMasterModal(() => refreshAllData(), closeAllModals);
+    initJobSpecModal(() => refreshAllData(), closeAllModals);
+    initUserModal(() => refreshAllData(), closeAllModals);
     
     initDashboardDetailModal();
     initGuide();
@@ -112,23 +115,35 @@ 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' ? '외부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();
@@ -193,66 +208,40 @@ function initRoleSwitcher() {
 }
 
 /**
- * 로그인 처리 로직
+ * 앱 초기화 (로그인 과정 없이 즉시 시작)
  */
-function handleLogin() {
+function initializeAppDirectly() {
   const loginContainer = document.getElementById('login-container');
   const appLayout = document.getElementById('app-layout');
-  const roleCards = document.querySelectorAll('.role-card');
+  const checkbox = document.getElementById('role-toggle-checkbox') as HTMLInputElement;
   const userLabel = document.querySelector('.role-label.user');
   const adminLabel = document.querySelector('.role-label.admin');
 
-  if (!loginContainer || !appLayout || roleCards.length === 0) return;
+  // 기본 권한 설정: 실무자 (User)
+  state.currentUserRole = 'user';
+  state.activeCategory = 'hw';
+  state.activeSubTab = '서버'; // 실무자 기본 탭
 
-  roleCards.forEach(card => {
-    card.addEventListener('click', () => {
-      const role = card.getAttribute('data-role');
-      const checkbox = document.getElementById('role-toggle-checkbox') as HTMLInputElement;
-      
-      if (role === 'admin') {
-        console.log('🔓 Entering as Admin');
-        
-        state.currentUserRole = 'admin';
-        state.activeCategory = 'hw';
-        state.activeSubTab = '대시보드'; // 관리자는 대시보드로 진입
-        
-        if (checkbox) checkbox.checked = true;
-        if (userLabel) userLabel.classList.remove('active');
-        if (adminLabel) adminLabel.classList.add('active');
-        document.body.classList.add('admin-mode');
-      } else if (role === 'user') {
-        console.log('🔓 Entering as Practitioner');
-        
-        state.currentUserRole = 'user';
-        state.activeCategory = 'hw';
-        state.activeSubTab = '서버'; // 실무자는 서버 목록으로 진입
-        
-        if (checkbox) checkbox.checked = false;
-        if (userLabel) userLabel.classList.add('active');
-        if (adminLabel) adminLabel.classList.remove('active');
-        document.body.classList.remove('admin-mode');
-      } else {
-        return;
-      }
+  // UI 상태 동기화
+  if (checkbox) checkbox.checked = false;
+  if (userLabel) userLabel.classList.add('active');
+  if (adminLabel) adminLabel.classList.remove('active');
+  document.body.classList.remove('admin-mode');
 
-      // UI 전환
-      loginContainer.style.display = 'none';
-      appLayout.style.display = 'flex';
-      
-      // 역할 스위처 및 앱 초기화 시작
-      initRoleSwitcher();
-      initApp();
-      
-      // 로고 클릭 시 초기화면 복귀 로직 (한 번만 등록)
-      const brand = document.querySelector('.brand') as HTMLElement;
-      if (brand) {
-        brand.style.cursor = 'pointer';
-        brand.onclick = () => {
-          location.reload(); // 즉시 초기화면으로 복귀
-        };
-      }
-    });
-  });
+  // 화면 전환
+  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', handleLogin);
+document.addEventListener('DOMContentLoaded', initializeAppDirectly);

src/styles/common.css

@@ -60,7 +60,7 @@ body {
   color: var(--text-main);
   background-color: var(--bg-color);
   line-height: 1.5;
-  font-size: 19px;
+  font-size: 14px;
   overflow: hidden;
 }
 
@@ -240,6 +240,36 @@ input:checked + .slider:before { transform: translateX(16px); }
   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;

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 {
@@ -198,3 +223,304 @@
   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/modal.css

@@ -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;
@@ -691,3 +730,100 @@
 .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);
 }
@@ -141,7 +133,7 @@ thead {
 
 th {
   background-color: var(--bg-light) !important;
-  font-size: 18px;
+  font-size: 13px;
   font-weight: 600;
   color: var(--text-muted);
   position: sticky;
@@ -152,7 +144,7 @@ th {
 }
 
 td {
-  font-size: 18px;
+  font-size: 13px;
   color: var(--text-main);
   font-weight: 400;
 }

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/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,23 +1,57 @@
 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')),
+    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,
-      showType: 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] || '-' },
@@ -27,13 +61,35 @@ export function renderPcList(container: HTMLElement) {
         header: 'SSD', 
         align: 'center', 
         width: '8%',
-        render: a => [a[ASSET_SCHEMA.SSD1.key], a[ASSET_SCHEMA.SSD2.key]].filter(Boolean).join(' / ') || '-' 
+        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 => [a[ASSET_SCHEMA.HDD1.key], a[ASSET_SCHEMA.HDD2.key], a[ASSET_SCHEMA.HDD3.key], a[ASSET_SCHEMA.HDD4.key]].filter(Boolean).join(' / ') || '-' 
+        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, 
@@ -41,7 +97,18 @@ export function renderPcList(container: HTMLElement) {
         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', width: '30%', 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/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/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,6 +38,7 @@ 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>`;
@@ -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,
+      }
+    }
   },
 });