feat: PC 등급 뱃지 색상 CSS 추가 및 Win11 불가 PC 교체 대상 등급 강제 적용

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

README.md

@@ -9,14 +9,6 @@
     - 기존 동작 방식과 성능을 기준(Baseline)으로 삼고, 수정 후에도 **기존의 모든 기능이 무결하게 유지되는지 반드시 테스트하여 입증**한다.
     - 검증 결과를 바탕으로 "무엇을, 왜, 어떻게" 바꿀지 상세 보고 후, 사용자로부터 **'진행시켜'** 승인을 얻은 뒤에만 집행한다.
 4. **선보고 후승인**: 모든 기능 수정 및 코드 변경 전에는 예상 방안을 먼저 보고하고 승인 절차를 거친다.
-5. **RED–GREEN–Refactor 개발 원칙**:
-    - 모든 기능 개발과 버그 수정은 **RED → GREEN → Refactor** 순서로 진행한다.
-    - **RED**: 요구사항을 명확히 표현하는 테스트를 먼저 작성하고, 해당 테스트가 기능 미구현 또는 결함으로 인해 실패하는지 확인한다.
-    - **GREEN**: 실패한 테스트를 통과시키는 데 필요한 최소한의 코드만 구현하며, 불필요한 기능 추가나 구조 변경을 하지 않는다.
-    - **Refactor**: 관련 테스트와 기존 테스트가 모두 통과하는 상태에서만 중복 제거, 명칭 개선, 책임 분리 등 코드 구조를 개선하며 동작은 변경하지 않는다.
-    - 각 단계가 끝날 때마다 관련 테스트와 기존 기능의 회귀 여부를 검증한다.
-    - 테스트 작성이 현실적으로 불가능한 경우에는 그 사유와 대체 검증 방법을 먼저 보고하고 승인을 받은 후 진행한다.
-    - 본 원칙을 적용할 때에도 기존의 **선보고 후승인** 및 **외과 수술식 수정** 규칙을 준수한다.
 
 ---
 
@@ -36,8 +28,29 @@
 
 ### 🎨 ITAM 시스템 디자인 가이드 (Design Guide)
 
-디자인 일관성 및 시각적 원칙에 관한 상세 내용은 아래 문서를 참조하십시오.
+1.  **디자인 철학 (Design Philosophy)**
+    *   **Minimalist & Border-based**: 불필요한 박스(Card) 사용을 최소화하고, 정보의 구분은 간결한 라인(Border/Divider)을 활용하여 시각적 피로도를 낮춥니다.
+    *   **Professional Achromatic**: 무채색(Black, White, Grey)을 기본으로 하여 정돈된 업무 환경을 제공합니다.
+    *   **Green Accent**: 블루 대신 짙은 그린(`#1E5149`)을 포인트 컬러로 사용하여 차분한 전문성을 강조합니다.
 
-👉 **[디자인 가이드 바로가기 (design_rule.md)](./design_rule.md)**
+2.  **타이포그래피 (Typography)**
+    *   **Font Family**: `Pretendard` (전역 적용)
+    *   **Letter Spacing**: `-0.02em` (약 -2%) 적용. 자간을 좁게 설정하여 밀도 있고 세련된 가독성을 확보합니다.
+    *   **Weights**: 400(Regular), 500(Medium), 600(SemiBold), 700(Bold).
 
+3.  **컬러 팔레트 (Color Palette)**
+    *   **Point Color**: `#1E5149` (Deep Green) - 강조, 활성화 상태, 주요 액션 버튼.
+    *   **Text**: Main(`#111827` - Near Black), Muted(`#6B7280` - Grey).
+    *   **Border/Divider**: `#E5E7EB` (Light Grey) - 정보 구분을 위한 얇은 실선.
+    *   **Background**: `#FFFFFF` (White) / `#F9FAFB` (Off White).
+
+4.  **레이아웃 및 컴포넌트 규칙 (Layout Rules)**
+    *   **Box-less Design**: 꼭 필요한 정보 묶음(데이터 그룹화 등)이 아니면 박스 형태의 테두리나 배경 사용을 지양합니다.
+    *   **Line-based Division**: 섹션 간의 구분은 1px 두께의 얇은 실선(Border)을 통해 명확히 합니다.
+    *   **Table**: 배경색이나 화려한 효과 없이 행(Row) 간의 얇은 구분선만 사용하여 데이터 본연에 집중하게 합니다.
+    *   **Input/Button**: 입력 필드와 버튼은 최소한의 보더와 포인트 컬러만 사용하여 정갈하게 표현합니다.
+    *   **Modal (모달 공통 규칙)**:
+        *   **Header**: 짙은 그린(`#1E5149`) 배경에 화이트 텍스트를 사용하며, 우측 상단에 명확한 'X' 닫기 버튼을 배치합니다.
+        *   **Interaction**: 사용자의 오입력(실수로 바깥을 클릭하여 입력 내용이 날아가는 현상)을 방지하기 위해 **모달 바깥 영역(Overlay) 클릭 시 모달이 닫히지 않도록** 설정합니다. 닫기는 오직 'ESC' 키 또는 명시적인 'X' 및 '닫기' 버튼을 통해서만 가능합니다.
+        *   **Layout**: `detail.png` 기준의 2열 그리드 시스템을 권장하며, 하단 우측에 액션 버튼(닫기, 저장 등)을 배치합니다.
 

backup_db.js

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

check_logs.js

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

check_network.js

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

db_init.js

@@ -0,0 +1,176 @@
+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 initDB() {
+  const connection = await mysql.createConnection({
+    host: DB_HOST,
+    user: DB_USER,
+    password: DB_PASS,
+    database: DB_NAME,
+    port: parseInt(DB_PORT || '3306'),
+    multipleStatements: true
+  });
+
+  console.log('🔄 DB 초기화 시작 (영문 표준 스키마 적용)...');
+
+  const tablesToDrop = [
+    'pc_assets', 'server_assets', 'storage_assets', 'equip_assets', 'mobile_assets', 
+    'sw_sub_assets', 'sw_perm_assets', 'cloud_assets', 'sw_users', 'asset_logs'
+  ];
+  for (const table of tablesToDrop) {
+    await connection.query(`DROP TABLE IF EXISTS ${table}`);
+  }
+
+  const createHardwareTable = (tableName, comment) => `
+    CREATE TABLE ${tableName} (
+      id VARCHAR(50) PRIMARY KEY,
+      corp VARCHAR(100),
+      asset_code VARCHAR(100),
+      purchase_date VARCHAR(50),
+      type VARCHAR(50),
+      detail_purpose VARCHAR(50),
+      purpose VARCHAR(255),
+      details TEXT,
+      current_org VARCHAR(255),
+      prev_org VARCHAR(255),
+      location VARCHAR(255),
+      manager_main VARCHAR(100),
+      manager_sub VARCHAR(100),
+      ip_address VARCHAR(100),
+      remote_tool VARCHAR(100),
+      server_id VARCHAR(100),
+      server_pw VARCHAR(100),
+      model_name VARCHAR(255),
+      mainboard VARCHAR(255) COMMENT '메인보드',
+      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),
+      remarks TEXT,
+      storage_location VARCHAR(255),
+      status VARCHAR(50),
+      created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+    ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
+  `;
+
+  await connection.query(createHardwareTable('pc_assets', 'PC'));
+  await connection.query(createHardwareTable('server_assets', 'Server'));
+  await connection.query(createHardwareTable('storage_assets', 'Storage'));
+  await connection.query(createHardwareTable('equip_assets', 'Equipment'));
+  await connection.query(createHardwareTable('mobile_assets', 'Mobile'));
+
+  await connection.query(`
+    CREATE TABLE sw_sub_assets (
+      id VARCHAR(50) PRIMARY KEY,
+      corp VARCHAR(100) COMMENT '구매법인',
+      category VARCHAR(100) COMMENT '분야',
+      dept VARCHAR(100) COMMENT '부서',
+      product_name VARCHAR(255) COMMENT '제품명',
+      license_type VARCHAR(100) COMMENT '라이선스 유형',
+      quantity INT COMMENT '수량',
+      price VARCHAR(100) COMMENT '금액',
+      purchase_date VARCHAR(50) COMMENT '구매일',
+      start_date VARCHAR(50) COMMENT '시작일',
+      expiry_date VARCHAR(50) COMMENT '만료일',
+      vendor VARCHAR(255) COMMENT '구매업체',
+      remarks TEXT COMMENT '비고',
+      created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+    ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
+  `);
+
+  await connection.query(`
+    CREATE TABLE sw_perm_assets (
+      id VARCHAR(50) PRIMARY KEY,
+      corp VARCHAR(100) COMMENT '구매법인',
+      category VARCHAR(100) COMMENT '분야',
+      dept VARCHAR(100) COMMENT '부서',
+      product_name VARCHAR(255) COMMENT '제품명',
+      license_key VARCHAR(255) COMMENT '라이선스 키',
+      quantity INT COMMENT '수량',
+      price VARCHAR(100) COMMENT '금액',
+      purchase_date VARCHAR(50) COMMENT '구매일',
+      start_date VARCHAR(50) COMMENT '시작일',
+      expiry_date VARCHAR(50) COMMENT '만료일',
+      vendor VARCHAR(255) COMMENT '구매업체',
+      remarks TEXT COMMENT '비고',
+      created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+    ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
+  `);
+
+  await connection.query(`
+    CREATE TABLE cloud_assets (
+      id VARCHAR(50) PRIMARY KEY,
+      platform_name VARCHAR(100),
+      corp VARCHAR(100),
+      dept VARCHAR(100),
+      product_name VARCHAR(255),
+      account_name VARCHAR(255),
+      pay_method VARCHAR(100),
+      pay_day VARCHAR(50),
+      card_num VARCHAR(100),
+      monthly_fee VARCHAR(100),
+      remarks TEXT,
+      created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+    ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
+  `);
+
+  await connection.query(`
+    CREATE TABLE sw_users (
+      id INT AUTO_INCREMENT PRIMARY KEY,
+      sw_id VARCHAR(50),
+      corp VARCHAR(100),
+      dept VARCHAR(100),
+      position VARCHAR(50),
+      user_name VARCHAR(100),
+      usage_period VARCHAR(100),
+      doc_name VARCHAR(255),
+      created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+    ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
+  `);
+
+  await connection.query(`
+    CREATE TABLE asset_logs (
+      id INT AUTO_INCREMENT PRIMARY KEY,
+      asset_id VARCHAR(50),
+      log_date VARCHAR(50),
+      log_user VARCHAR(100),
+      details TEXT,
+      cost DECIMAL(15,2) DEFAULT 0,
+      created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+    ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
+  `);
+
+  await connection.query(`
+    CREATE TABLE ops_domain_assets (
+      id VARCHAR(50) PRIMARY KEY,
+      type VARCHAR(50) COMMENT '유형',
+      corp VARCHAR(100) COMMENT '법인',
+      service_name VARCHAR(255) COMMENT '서비스명',
+      domain_name VARCHAR(255) COMMENT '관리도메인',
+      start_date VARCHAR(50) COMMENT '시작일',
+      expiry_date VARCHAR(50) COMMENT '만료일',
+      price VARCHAR(100) COMMENT '금액',
+      manager_main VARCHAR(100) COMMENT '담당자',
+      manager_sub VARCHAR(100) COMMENT '담당자(부)',
+      remarks TEXT COMMENT '비고',
+      created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+    ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
+  `);
+
+  console.log('✅ 모든 테이블이 영문 표준 스키마로 재생성되었습니다.');
+  await connection.end();
+}
+
+initDB().catch(err => {
+  console.error('❌ DB 초기화 실패:', err);
+  process.exit(1);
+});

design_rule.md

@@ -1,48 +0,0 @@
-# 🎨 ITAM 시스템 디자인 가이드 (Design Guide)
-
-본 문서는 ITAM(IT Asset Management System)의 시각적 일관성과 사용자 경험을 유지하기 위한 핵심 디자인 원칙을 정의합니다.
-
----
-
-### 1. 디자인 철학 (Design Philosophy)
-*   **Minimalist & Stark**: Vercel 스타일의 극도로 간결하고 현대적인 디자인을 지향합니다.
-*   **Achromatic Base**: 블랙(#171717)과 화이트를 기본으로 하며, 정보의 구분은 얇은 헤어라인(#ebebeb)을 사용합니다.
-*   **Fluid & Responsive**: 고정된 픽셀 대신 화면 크기에 비례하여 UI 밀도가 변하는 유동적 스케일링 시스템을 적용합니다.
-
-### 2. 타이포그래피 및 자간 (Typography & Letter-spacing)
-*   **Font Family**: `Pretendard` 단일 폰트를 사용합니다.
-*   **Letter-spacing**: 모든 텍스트에 `-0.02em` (-2%) 자간을 적용하여 밀도 있는 가독성을 확보합니다.
-*   **Typography Scale**:
-    *   **XS**: `clamp(10px, 1.2vmin + 0.2vw, 15px)` - 보조 텍스트
-    *   **SM**: `clamp(12px, 1.4vmin + 0.3vw, 18px)` - 필터, 일반 라벨, 테이블 헤더
-    *   **Base**: `clamp(14px, 1.6vmin + 0.4vw, 22px)` - 본문, 테이블 데이터
-    *   **MD**: `clamp(18px, 2.5vmin + 0.5vw, 30px)` - 섹션 소제목
-    *   **LG**: `clamp(24px, 4vmin + 0.6vw, 48px)` - 페이지 대제목
-    *   **XL**: `clamp(32px, 6vmin + 0.8vw, 72px)` - 핵심 통계 지표
-*   **Layout Units**:
-    *   **Header Height**: `clamp(50px, 8vmin, 90px)`
-    *   **Base Spacing**: `clamp(0.75rem, 3vmin, 3rem)`
-    *   **Radius**: `clamp(6px, 1.5vmin, 16px)`
-
-### 3. 컬러 팔레트 (Vercel Stark Palette)
-*   **Primary**: `#171717` (Stark Black) - 텍스트, 주요 버튼, 강조 요소.
-*   **Secondary**: `#888888` (Mute) - 보조 텍스트, 비활성 아이콘.
-*   **Border**: `#ebebeb` (Hairline) - 정보 구분선.
-*   **Background**: `#ffffff` (Canvas), `#fafafa` (Soft), `#f5f5f5` (Soft 2).
-*   **Accents**: Blue(`#0070f3`), Orange(`#f5a623`), Danger(`#ee0000`).
-
-### 4. 컴포넌트 및 레이아웃 규칙 (Component Rules)
-*   **Header & Navigation**:
-    *   상단 1열 통합 바 형태를 유지하며, GNB와 LNB를 동일 라인에 배치하여 공간을 효율적으로 사용합니다.
-*   **Unified Filter Bar**:
-    *   검색창과 필터는 상단 타이틀 바로 아래(기존 액션 버튼 라인)까지 올려서 배치합니다.
-    *   **Action Group**: '자산 추가', '부품 마스터' 등의 주요 액션 버튼은 검색창과 같은 라인의 최우측에 정렬합니다.
-*   **Dashboard**:
-    *   **Single-Screen View**: 1920*1080(또는 1920*919) 해상도에서 스크롤 없이 한 화면에 핵심 정보가 모두 보이도록 최적화합니다.
-    *   **Fixed Charts**: 차트 내부 숫자나 요소에 애니메이션(`animation: false`) 및 플로팅 레이블을 배제하여 정적인 안정성을 확보합니다.
-*   **Footer**:
-    *   화면 최하단에 위치하며, 텍스트는 **우측 정렬(Right-aligned)**합니다.
-    *   상단에 1px 헤어라인 구분선을 가집니다.
-*   **Security & UX**:
-    *   **Text Selection**: 사용자의 실수에 의한 UI 드래그 방지를 위해 입력창(`input`, `textarea`)을 제외한 전체 영역의 텍스트 선택을 차단합니다.
-    *   **View Toggle**: '서버' 탭 등 특정 탭에서만 '목록보기' 체크박스를 통해 뷰를 전환하며, 그 외 화면은 리스트 중심의 UI를 제공합니다.

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);

img/location_photo/기술개발센터/팀자리/center_chair_map_view_only.html

@@ -1,354 +0,0 @@
-<!DOCTYPE html>
-<html lang="ko">
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Center Chair Map (View Only)</title>
-  <style>
-    :root {
-      --ink: #152330;
-      --muted: #627286;
-      --paper: rgba(255,255,255,0.86);
-      --line: rgba(21,35,48,0.1);
-      --accent: #0f766e;
-      --bg: #edf2f6;
-    }
-    * { box-sizing: border-box; }
-    body {
-      margin: 0;
-      font-family: "IBM Plex Sans KR", "Pretendard", sans-serif;
-      color: var(--ink);
-      background:
-        radial-gradient(circle at top left, rgba(15,118,110,0.11), transparent 22%),
-        linear-gradient(180deg, #f5f8fb 0%, #e8eef3 100%);
-      overflow: hidden;
-    }
-    .page {
-      min-height: 100vh;
-      padding: 0;
-    }
-    .shell {
-      min-height: 100vh;
-    }
-    .panel {
-      border-radius: 0;
-      border: none;
-      background: transparent;
-      backdrop-filter: none;
-      box-shadow: none;
-    }
-    .viewer {
-      position: relative;
-      overflow: hidden;
-      min-height: 100vh;
-    }
-    .viewer-head {
-      position: absolute;
-      top: 16px;
-      left: 16px;
-      z-index: 2;
-      pointer-events: none;
-    }
-    .chip {
-      padding: 10px 12px;
-      border-radius: 16px;
-      background: rgba(255,255,255,0.82);
-      border: 1px solid rgba(255,255,255,0.94);
-      color: var(--muted);
-      font-size: 13px;
-      font-weight: 700;
-      box-shadow: 0 8px 24px rgba(21,35,48,0.08);
-      display: inline-block;
-    }
-    .viewer-actions {
-      position: absolute;
-      left: 16px;
-      top: 64px;
-      z-index: 2;
-    }
-    button {
-      border: none;
-      border-radius: 999px;
-      padding: 10px 14px;
-      font: inherit;
-      font-weight: 700;
-      cursor: pointer;
-      color: white;
-      background: linear-gradient(135deg, #0f766e, #115e59);
-      box-shadow: 0 10px 22px rgba(15,118,110,0.18);
-    }
-    canvas {
-      width: 100vw;
-      height: 100vh;
-      display: block;
-      cursor: grab;
-    }
-    canvas.dragging { cursor: grabbing; }
-  </style>
-</head>
-<body>
-  <div class="page">
-    <div class="shell">
-      <main class="panel viewer">
-        <div class="viewer-head">
-          <div class="chip" id="scale-chip"></div>
-        </div>
-        <div class="viewer-actions">
-          <button type="button" id="fit-btn">전체 맞춤</button>
-        </div>
-        <canvas id="canvas"></canvas>
-      </main>
-    </div>
-  </div>
-  <script src="./center_chair_people_payload.js?v=20260403a"></script>
-  <script>
-    const DATA = window.CHAIR_MAP_DATA;
-    function decodeSegments(base64) {
-      const binary = atob(base64);
-      const bytes = new Uint8Array(binary.length);
-      for (let i = 0; i < binary.length; i += 1) bytes[i] = binary.charCodeAt(i);
-      return new Int32Array(bytes.buffer);
-    }
-    const bgTileRanges = DATA.bgTileRanges;
-    const bgSegValues = decodeSegments(DATA.bgSegsB64);
-    const chairSegValues = decodeSegments(DATA.chairSegsB64);
-    const chairs = DATA.chairs.map(([key, name, kind, start, count]) => ({
-      key, name, kind, start, count
-    }));
-    const meta = DATA.meta;
-    const world = meta.headerBounds;
-    const canvas = document.getElementById("canvas");
-    const ctx = canvas.getContext("2d");
-    const scaleChip = document.getElementById("scale-chip");
-
-    // --- Added for Point Picking & Marker ---
-    const params = new URLSearchParams(window.location.search);
-    let markerX = params.get('markerX') ? parseFloat(params.get('markerX')) : null;
-    let markerY = params.get('markerY') ? parseFloat(params.get('markerY')) : null;
-
-    const chairGeometry = chairs.map((chair) => {
-      let minX = Infinity;
-      let minY = Infinity;
-      let maxX = -Infinity;
-      let maxY = -Infinity;
-      const path = new Path2D();
-      for (let i = chair.start; i < chair.start + chair.count; i += 1) {
-        const offset = i * 4;
-        const x1 = chairSegValues[offset] / 10;
-        const y1 = chairSegValues[offset + 1] / 10;
-        const x2 = chairSegValues[offset + 2] / 10;
-        const y2 = chairSegValues[offset + 3] / 10;
-        path.moveTo(x1, y1);
-        path.lineTo(x2, y2);
-        minX = Math.min(minX, x1, x2);
-        minY = Math.min(minY, y1, y2);
-        maxX = Math.max(maxX, x1, x2);
-        maxY = Math.max(maxY, y1, y2);
-      }
-      return { ...chair, minX, minY, maxX, maxY, path };
-    });
-
-    const camera = { scale: 1, offsetX: 0, offsetY: 0 };
-    let pixelRatio = window.devicePixelRatio || 1;
-    let dragging = false;
-    let dragStart = null;
-    let rafPending = false;
-
-    function resize() {
-      pixelRatio = window.devicePixelRatio || 1;
-      const rect = canvas.getBoundingClientRect();
-      canvas.width = Math.round(rect.width * pixelRatio);
-      canvas.height = Math.round(rect.height * pixelRatio);
-      ctx.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
-      fit();
-    }
-
-    function fit() {
-      const rect = canvas.getBoundingClientRect();
-      const width = world.maxX - world.minX;
-      const height = world.maxY - world.minY;
-      const pad = 36;
-      const scaleX = (rect.width - pad * 2) / width;
-      const scaleY = (rect.height - pad * 2) / height;
-      camera.scale = Math.min(scaleX, scaleY);
-      camera.offsetX = pad - world.minX * camera.scale + (rect.width - pad * 2 - width * camera.scale) / 2;
-      camera.offsetY = pad - world.minY * camera.scale + (rect.height - pad * 2 - height * camera.scale) / 2;
-      requestDraw();
-    }
-
-    function drawGrid(width, height) {
-      ctx.save();
-      ctx.strokeStyle = "rgba(21,35,48,0.05)";
-      ctx.lineWidth = 1;
-      for (let x = 120; x < width; x += 120) {
-        ctx.beginPath();
-        ctx.moveTo(x, 0);
-        ctx.lineTo(x, height);
-        ctx.stroke();
-      }
-      for (let y = 120; y < height; y += 120) {
-        ctx.beginPath();
-        ctx.moveTo(0, y);
-        ctx.lineTo(width, y);
-        ctx.stroke();
-      }
-      ctx.restore();
-    }
-
-    function worldToScreen(x, y) {
-      return {
-        x: x * camera.scale + camera.offsetX,
-        y: (world.maxY - y + world.minY) * camera.scale + camera.offsetY,
-      };
-    }
-
-    function screenToWorld(x, y) {
-      return {
-        x: (x - camera.offsetX) / camera.scale,
-        y: world.maxY + world.minY - (y - camera.offsetY) / camera.scale,
-      };
-    }
-
-    function requestDraw() {
-      if (rafPending) return;
-      rafPending = true;
-      window.requestAnimationFrame(() => {
-        rafPending = false;
-        draw();
-      });
-    }
-
-    function applyWorldTransform() {
-      ctx.setTransform(
-        pixelRatio * camera.scale,
-        0,
-        0,
-        -pixelRatio * camera.scale,
-        pixelRatio * camera.offsetX,
-        pixelRatio * ((world.maxY + world.minY) * camera.scale + camera.offsetY)
-      );
-    }
-
-    function draw() {
-      const rect = canvas.getBoundingClientRect();
-      ctx.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
-      ctx.clearRect(0, 0, rect.width, rect.height);
-      drawGrid(rect.width, rect.height);
-      
-      const viewA = screenToWorld(0, rect.height);
-      const viewB = screenToWorld(rect.width, 0);
-      const viewMinX = Math.min(viewA.x, viewB.x);
-      const viewMaxX = Math.max(viewA.x, viewB.x);
-      const viewMinY = Math.min(viewA.y, viewB.y);
-      const viewMaxY = Math.max(viewA.y, viewB.y);
-
-      ctx.save();
-      applyWorldTransform();
-      ctx.strokeStyle = "rgba(100, 116, 139, 0.28)";
-      ctx.lineWidth = 1 / camera.scale;
-      const tileSize = meta.backgroundTileSize;
-      const tileMinX = Math.floor(viewMinX / tileSize);
-      const tileMaxX = Math.floor(viewMaxX / tileSize);
-      const tileMinY = Math.floor(viewMinY / tileSize);
-      const tileMaxY = Math.floor(viewMaxY / tileSize);
-      
-      for (let tx = tileMinX; tx <= tileMaxX; tx += 1) {
-        for (let ty = tileMinY; ty <= tileMaxY; ty += 1) {
-          const range = bgTileRanges[`${tx},${ty}`];
-          if (!range) continue;
-          const start = range[0];
-          const count = range[1];
-          for (let i = start; i < start + count; i += 1) {
-            const offset = i * 4;
-            const x1 = bgSegValues[offset] / 10;
-            const y1 = bgSegValues[offset + 1] / 10;
-            const x2 = bgSegValues[offset + 2] / 10;
-            const y2 = bgSegValues[offset + 3] / 10;
-            if (Math.max(x1, x2) < viewMinX || Math.min(x1, x2) > viewMaxX ||
-                Math.max(y1, y2) < viewMinY || Math.min(y1, y2) > viewMaxY) continue;
-            ctx.beginPath();
-            ctx.moveTo(x1, y1);
-            ctx.lineTo(x2, y2);
-            ctx.stroke();
-          }
-        }
-      }
-
-      ctx.lineWidth = 1.35 / camera.scale;
-      ctx.lineCap = "round";
-      ctx.lineJoin = "round";
-      ctx.strokeStyle = "rgba(21, 149, 142, 0.8)";
-      for (const chair of chairGeometry) {
-        if (chair.maxX < viewMinX || chair.minX > viewMaxX || chair.maxY < viewMinY || chair.minY > viewMaxY) continue;
-        ctx.stroke(chair.path);
-      }
-
-      // --- Draw Marker ---
-      if (markerX !== null && markerY !== null) {
-        ctx.beginPath();
-        ctx.arc(markerX, markerY, 50 / camera.scale, 0, Math.PI * 2);
-        ctx.fillStyle = "rgba(220, 38, 38, 0.8)";
-        ctx.fill();
-        ctx.strokeStyle = "#fff";
-        ctx.lineWidth = 10 / camera.scale;
-        ctx.stroke();
-      }
-      ctx.restore();
-      scaleChip.textContent = `scale ${camera.scale.toFixed(4)}x`;
-    }
-
-    canvas.addEventListener("pointerdown", (event) => {
-      dragging = true;
-      dragStart = { x: event.clientX, y: event.clientY, offsetX: camera.offsetX, offsetY: camera.offsetY };
-      canvas.classList.add("dragging");
-    });
-    window.addEventListener("pointerup", (event) => {
-      if (dragging && dragStart) {
-        const move = Math.hypot(event.clientX - dragStart.x, event.clientY - dragStart.y);
-        if (move < 4) {
-          const rect = canvas.getBoundingClientRect();
-          const mx = event.clientX - rect.left;
-          const my = event.clientY - rect.top;
-          const worldPos = screenToWorld(mx, my);
-          markerX = worldPos.x;
-          markerY = worldPos.y;
-          requestDraw();
-          
-          // Notify parent window
-          window.parent.postMessage({ 
-            type: 'PICK_LOCATION', 
-            x: markerX.toFixed(2), 
-            y: markerY.toFixed(2) 
-          }, '*');
-        }
-      }
-      dragging = false;
-      dragStart = null;
-      canvas.classList.remove("dragging");
-    });
-    window.addEventListener("pointermove", (event) => {
-      if (dragging && dragStart) {
-        camera.offsetX = dragStart.offsetX + (event.clientX - dragStart.x);
-        camera.offsetY = dragStart.offsetY + (event.clientY - dragStart.y);
-        requestDraw();
-      }
-    });
-    canvas.addEventListener("wheel", (event) => {
-      event.preventDefault();
-      const rect = canvas.getBoundingClientRect();
-      const mx = event.clientX - rect.left;
-      const my = event.clientY - rect.top;
-      const before = screenToWorld(mx, my);
-      const factor = event.deltaY < 0 ? 1.08 : 0.92;
-      camera.scale = Math.max(0.002, Math.min(2, camera.scale * factor));
-      const after = worldToScreen(before.x, before.y);
-      camera.offsetX += mx - after.x;
-      camera.offsetY += my - after.y;
-      requestDraw();
-    }, { passive: false });
-    document.getElementById("fit-btn").addEventListener("click", fit);
-    window.addEventListener("resize", resize);
-    resize();
-  </script>
-</body>
-</html>

img/location_photo/기술개발센터/팀자리/center_chair_people_map.html

@@ -1,931 +0,0 @@
-<!DOCTYPE html>
-<html lang="ko">
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>center chair people map</title>
-  <style>
-    :root {
-      --ink: #152330;
-      --muted: #627286;
-      --paper: rgba(255,255,255,0.86);
-      --line: rgba(21,35,48,0.1);
-      --accent: #0f766e;
-      --bg: #edf2f6;
-    }
-    * { box-sizing: border-box; }
-    body {
-      margin: 0;
-      font-family: "IBM Plex Sans KR", "Pretendard", sans-serif;
-      color: var(--ink);
-      background:
-        radial-gradient(circle at top left, rgba(15,118,110,0.11), transparent 22%),
-        linear-gradient(180deg, #f5f8fb 0%, #e8eef3 100%);
-    }
-    .page {
-      min-height: 100vh;
-      padding: 0;
-    }
-    .shell {
-      min-height: 100vh;
-    }
-    .panel {
-      border-radius: 0;
-      border: none;
-      background: transparent;
-      backdrop-filter: none;
-      box-shadow: none;
-    }
-    .actions {
-      display: flex;
-      gap: 8px;
-      flex-wrap: wrap;
-    }
-    button {
-      border: none;
-      border-radius: 999px;
-      padding: 10px 14px;
-      font: inherit;
-      font-weight: 700;
-      cursor: pointer;
-      color: white;
-      background: linear-gradient(135deg, #0f766e, #115e59);
-      box-shadow: 0 10px 22px rgba(15,118,110,0.18);
-    }
-    button.alt {
-      color: var(--ink);
-      background: rgba(255,255,255,0.9);
-      border: 1px solid var(--line);
-      box-shadow: none;
-    }
-    .viewer {
-      position: relative;
-      overflow: hidden;
-      min-height: 100vh;
-    }
-    .viewer-head {
-      position: absolute;
-      top: 16px;
-      left: 16px;
-      right: 16px;
-      z-index: 2;
-      display: flex;
-      justify-content: space-between;
-      gap: 12px;
-      pointer-events: none;
-    }
-    .chip {
-      padding: 10px 12px;
-      border-radius: 16px;
-      background: rgba(255,255,255,0.82);
-      border: 1px solid rgba(255,255,255,0.94);
-      color: var(--muted);
-      font-size: 13px;
-      font-weight: 700;
-      box-shadow: 0 8px 24px rgba(21,35,48,0.08);
-    }
-    .viewer-actions {
-      position: absolute;
-      left: 16px;
-      top: 64px;
-      z-index: 2;
-      display: flex;
-      gap: 8px;
-    }
-    .mapper {
-      position: absolute;
-      top: 76px;
-      left: 50%;
-      transform: translateX(-50%);
-      width: min(94vw, 1320px);
-      max-height: min(56vh, 560px);
-      overflow: hidden;
-      z-index: 4;
-      border-radius: 20px;
-      background: rgba(234, 239, 247, 0.95);
-      border: 1px solid rgba(101, 119, 146, 0.22);
-      box-shadow: 0 18px 36px rgba(15, 23, 42, 0.2);
-      display: flex;
-      flex-direction: column;
-      backdrop-filter: blur(6px);
-    }
-    .hidden-off {
-      display: none !important;
-    }
-    .mapper-head {
-      padding: 10px 14px;
-      border-bottom: 1px solid rgba(101,119,146,0.18);
-      font-size: 12px;
-      color: #51607a;
-      font-weight: 700;
-      line-height: 1.35;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      gap: 10px;
-      background: rgba(255,255,255,0.6);
-    }
-    .mapper-head strong {
-      display: block;
-      color: #17243b;
-      font-size: 20px;
-      margin-bottom: 2px;
-    }
-    .mapper-head .alt {
-      padding: 8px 10px;
-      font-size: 12px;
-      white-space: nowrap;
-    }
-    .org-chart {
-      margin: 0;
-      padding: 14px;
-      overflow: auto;
-      display: grid;
-      gap: 12px;
-    }
-    .org-top {
-      margin: 0 auto;
-      width: min(100%, 420px);
-      border-radius: 14px;
-      overflow: hidden;
-      border: 1px solid rgba(67, 84, 118, 0.25);
-      background: #fff;
-    }
-    .org-top-title {
-      background: #1e2f4d;
-      color: #fff;
-      text-align: center;
-      font-size: 34px;
-      font-weight: 800;
-      line-height: 1.1;
-      padding: 16px 12px;
-      letter-spacing: -0.03em;
-    }
-    .org-top-members {
-      padding: 10px;
-      display: grid;
-      gap: 6px;
-      background: rgba(255,255,255,0.95);
-    }
-    .org-teams {
-      display: grid;
-      grid-template-columns: repeat(7, minmax(160px, 1fr));
-      gap: 10px;
-      align-items: start;
-    }
-    .org-team {
-      border: 1px solid rgba(110, 126, 152, 0.25);
-      border-radius: 10px;
-      overflow: hidden;
-      background: rgba(255,255,255,0.95);
-      min-width: 0;
-    }
-    .org-team h4 {
-      margin: 0;
-      padding: 9px 10px;
-      font-size: 14px;
-      color: #21324e;
-      font-weight: 800;
-      border-bottom: 1px solid rgba(110, 126, 152, 0.2);
-      background: rgba(240, 245, 252, 0.96);
-    }
-    .org-members {
-      padding: 7px;
-      display: grid;
-      gap: 6px;
-    }
-    .org-person {
-      border: 1px solid rgba(116, 133, 161, 0.25);
-      background: rgba(255,255,255,0.95);
-      border-radius: 8px;
-      padding: 6px 8px;
-      cursor: pointer;
-      transition: background 120ms ease, border-color 120ms ease;
-      min-width: 0;
-    }
-    .org-person.active {
-      border-color: rgba(15,118,110,0.6);
-      background: rgba(15,118,110,0.11);
-    }
-    .org-person.assigned {
-      border-color: rgba(37,99,235,0.5);
-      background: rgba(37,99,235,0.1);
-    }
-    .org-person strong {
-      display: block;
-      font-size: 13px;
-      line-height: 1.3;
-      color: #15233a;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-    .org-person small {
-      display: block;
-      color: #5a6a86;
-      font-size: 11px;
-      line-height: 1.25;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-    @media (max-width: 980px) {
-      .mapper {
-        top: 72px;
-        width: min(96vw, 920px);
-        max-height: 58vh;
-      }
-      .viewer-actions {
-        top: 64px;
-        left: 12px;
-        right: 12px;
-        flex-wrap: wrap;
-      }
-      .mapper-head strong {
-        font-size: 16px;
-      }
-      .org-top-title {
-        font-size: 24px;
-      }
-      .org-teams {
-        grid-template-columns: repeat(3, minmax(150px, 1fr));
-      }
-    }
-    canvas {
-      width: 100%;
-      height: 100%;
-      display: block;
-      cursor: grab;
-    }
-    canvas.dragging { cursor: grabbing; }
-    .tooltip {
-      position: absolute;
-      min-width: 170px;
-      padding: 12px 14px;
-      border-radius: 16px;
-      background: rgba(17,24,39,0.94);
-      color: white;
-      pointer-events: none;
-      opacity: 0;
-      transform: translate(12px, 12px);
-      transition: opacity 120ms ease;
-      z-index: 3;
-    }
-    .tooltip.visible { opacity: 1; }
-    .tooltip strong { display: block; margin-bottom: 6px; font-size: 14px; }
-    .tooltip div { font-size: 12px; line-height: 1.45; color: rgba(255,255,255,0.82); }
-  </style>
-</head>
-<body>
-  <div class="page">
-    <div class="shell">
-      <main class="panel viewer">
-        <div class="viewer-head">
-          <div class="chip" id="scale-chip"></div>
-          <div class="chip" id="hover-chip">chair hover: none</div>
-        </div>
-        <div class="viewer-actions">
-          <button type="button" id="fit-btn">전체 맞춤</button>
-          <button type="button" class="alt" id="clear-btn">선택 지우기</button>
-        </div>
-        <aside class="mapper hidden-off">
-          <div class="mapper-head">
-            <div id="mapper-status">
-              <strong>조직 현황</strong>
-              <span>선택 인원 없음</span>
-            </div>
-            <button type="button" class="alt" id="clear-assign-btn">매칭 초기화</button>
-          </div>
-          <div class="org-chart" id="org-chart"></div>
-        </aside>
-        <canvas id="canvas"></canvas>
-        <div class="tooltip" id="tooltip"></div>
-      </main>
-    </div>
-  </div>
-  <script src="./center_chair_people_payload.js?v=20260403a"></script>
-  <script>
-    const DATA = window.CHAIR_MAP_DATA;
-    function decodeSegments(base64) {
-      const binary = atob(base64);
-      const bytes = new Uint8Array(binary.length);
-      for (let i = 0; i < binary.length; i += 1) bytes[i] = binary.charCodeAt(i);
-      return new Int32Array(bytes.buffer);
-    }
-    const bgTileRanges = DATA.bgTileRanges;
-    const bgSegValues = decodeSegments(DATA.bgSegsB64);
-    const chairSegValues = decodeSegments(DATA.chairSegsB64);
-    const chairs = DATA.chairs.map(([key, name, kind, start, count]) => ({
-      key, name, kind, start, count
-    }));
-    const meta = DATA.meta;
-    const world = meta.headerBounds;
-    const canvas = document.getElementById("canvas");
-    const ctx = canvas.getContext("2d");
-    const tooltip = document.getElementById("tooltip");
-    const scaleChip = document.getElementById("scale-chip");
-    const hoverChip = document.getElementById("hover-chip");
-    const STORAGE_KEY = "ptc-chair-selection";
-    const PEOPLE_STORAGE_KEY = "ptc-chair-people";
-    const ASSIGN_STORAGE_KEY = "ptc-chair-assignments";
-    const ACTIVE_PERSON_STORAGE_KEY = "ptc-chair-active-person";
-    const clearAssignBtn = document.getElementById("clear-assign-btn");
-    const orgChartEl = document.getElementById("org-chart");
-    const mapperStatus = document.getElementById("mapper-status");
-    // Prevent stale auto-highlights from previous sessions.
-    localStorage.removeItem(STORAGE_KEY);
-    localStorage.removeItem(ACTIVE_PERSON_STORAGE_KEY);
-    localStorage.removeItem(ASSIGN_STORAGE_KEY);
-    const placed = new Set();
-    let people = JSON.parse(localStorage.getItem(PEOPLE_STORAGE_KEY) || "[]");
-    let chairAssignments = {};
-    let activePersonId = null;
-    const ORG_TEMPLATE = {
-      top: {
-        name: "총괄기획실",
-        count: 53,
-        members: [
-          { name: "장종찬", dept: "총괄기획실", title: "기획실장" },
-          { name: "김원식", dept: "총괄기획실", title: "전무이사" },
-        ],
-      },
-      teams: [
-        { name: "경영기획팀", count: 6, members: ["김우진", "임민정", "국혜린", "최선아", "김윤재", "이미영"] },
-        { name: "인재성장팀", count: 5, members: ["조태희", "최근혜", "류원준", "주안기", "정성호"] },
-        { name: "ERP 기획팀", count: 5, members: ["류호성", "문형식", "최요제", "황대일", "이채봉"] },
-        { name: "디자인기획팀", count: 17, members: ["신혜영", "정은혜", "김태식", "최예은", "채선영", "최영환", "윤봄이", "이예진", "허유나", "마희연", "김수현", "박지영", "권순호", "정두휘", "김정석", "정지윤", "양숙영"] },
-        { name: "기술기획팀", count: 11, members: ["김원기", "홍아름", "이경민", "김혜인", "황동환", "최찬호", "이태훈", "김신지", "조찬영", "김용연", "한치영"] },
-        { name: "협업증진팀", count: 3, members: ["성형일", "박주한", "한승민"] },
-        { name: "솔루션통합팀", count: 4, members: ["권혁진", "염승호", "윤준수", "김지영"] },
-      ],
-    };
-    const chairGeometry = chairs.map((chair) => {
-      let minX = Infinity;
-      let minY = Infinity;
-      let maxX = -Infinity;
-      let maxY = -Infinity;
-      const path = new Path2D();
-      const hitSegments = new Float32Array(chair.count * 4);
-      let segCursor = 0;
-      for (let i = chair.start; i < chair.start + chair.count; i += 1) {
-        const offset = i * 4;
-        const x1 = chairSegValues[offset] / 10;
-        const y1 = chairSegValues[offset + 1] / 10;
-        const x2 = chairSegValues[offset + 2] / 10;
-        const y2 = chairSegValues[offset + 3] / 10;
-        path.moveTo(x1, y1);
-        path.lineTo(x2, y2);
-        hitSegments[segCursor] = x1;
-        hitSegments[segCursor + 1] = y1;
-        hitSegments[segCursor + 2] = x2;
-        hitSegments[segCursor + 3] = y2;
-        segCursor += 4;
-        minX = Math.min(minX, x1, x2);
-        minY = Math.min(minY, y1, y2);
-        maxX = Math.max(maxX, x1, x2);
-        maxY = Math.max(maxY, y1, y2);
-      }
-      return {
-        ...chair,
-        minX,
-        minY,
-        maxX,
-        maxY,
-        area: Math.max(1, (maxX - minX) * (maxY - minY)),
-        path,
-        hitSegments,
-      };
-    });
-    function renumberChairKeys(chairItems) {
-      if (!chairItems.length) return;
-      const heights = chairItems
-        .map((chair) => Math.max(1, chair.maxY - chair.minY))
-        .sort((a, b) => a - b);
-      const medianHeight = heights[Math.floor(heights.length / 2)] || 1;
-      const rowTolerance = Math.max(40, medianHeight * 0.9);
-
-      const sorted = [...chairItems].sort((a, b) => {
-        const ay = (a.minY + a.maxY) * 0.5;
-        const by = (b.minY + b.maxY) * 0.5;
-        if (Math.abs(by - ay) > rowTolerance) return by - ay; // top -> bottom
-        const ax = (a.minX + a.maxX) * 0.5;
-        const bx = (b.minX + b.maxX) * 0.5;
-        return ax - bx; // left -> right
-      });
-
-      sorted.forEach((chair, index) => {
-        chair.key = String(index + 1);
-        chair.seatNo = index + 1;
-      });
-    }
-    renumberChairKeys(chairGeometry);
-    const PICK_GRID_SIZE = 1800;
-    const chairPickGrid = new Map();
-    function pickGridKey(gx, gy) {
-      return `${gx},${gy}`;
-    }
-    chairGeometry.forEach((chair, index) => {
-      const minGX = Math.floor(chair.minX / PICK_GRID_SIZE);
-      const maxGX = Math.floor(chair.maxX / PICK_GRID_SIZE);
-      const minGY = Math.floor(chair.minY / PICK_GRID_SIZE);
-      const maxGY = Math.floor(chair.maxY / PICK_GRID_SIZE);
-      for (let gx = minGX; gx <= maxGX; gx += 1) {
-        for (let gy = minGY; gy <= maxGY; gy += 1) {
-          const key = pickGridKey(gx, gy);
-          if (!chairPickGrid.has(key)) chairPickGrid.set(key, []);
-          chairPickGrid.get(key).push(index);
-        }
-      }
-    });
-
-    const camera = { scale: 1, offsetX: 0, offsetY: 0 };
-    let pixelRatio = window.devicePixelRatio || 1;
-    let pointer = { x: 0, y: 0 };
-    let dragging = false;
-    let dragStart = null;
-    let hovered = null;
-    let rafPending = false;
-
-    function normalizePeople(raw) {
-      return raw
-        .map((person, index) => {
-          if (!person || !person.name) return null;
-          return {
-            id: person.id || `person-${index + 1}`,
-            name: String(person.name).trim(),
-            dept: String(person.dept || "").trim(),
-            title: String(person.title || "").trim(),
-          };
-        })
-        .filter(Boolean);
-    }
-
-    function createTemplatePeople() {
-      const generated = [];
-      let seq = 1;
-      ORG_TEMPLATE.top.members.forEach((member) => {
-        generated.push({
-          id: `org-${seq++}`,
-          name: member.name,
-          dept: member.dept,
-          title: member.title,
-        });
-      });
-      ORG_TEMPLATE.teams.forEach((team) => {
-        team.members.forEach((name) => {
-          generated.push({
-            id: `org-${seq++}`,
-            name,
-            dept: team.name,
-            title: "선임",
-          });
-        });
-      });
-      return generated;
-    }
-
-    people = normalizePeople(people);
-    const templateReady = people.some((person) => person.name === "장종찬" && person.dept === "총괄기획실");
-    if (!templateReady) {
-      people = createTemplatePeople();
-      localStorage.setItem(PEOPLE_STORAGE_KEY, JSON.stringify(people));
-    }
-    const chairKeySet = new Set(chairGeometry.map((chair) => chair.key));
-    chairAssignments = Object.fromEntries(
-      Object.entries(chairAssignments).filter(([chairKey, personId]) => (
-        chairKeySet.has(chairKey) && people.some((person) => person.id === personId)
-      ))
-    );
-    if (activePersonId && !people.some((person) => person.id === activePersonId)) activePersonId = null;
-
-    function persistPeople() {
-      localStorage.setItem(PEOPLE_STORAGE_KEY, JSON.stringify(people));
-    }
-
-    function persistAssignments() {
-      localStorage.setItem(ASSIGN_STORAGE_KEY, JSON.stringify(chairAssignments));
-    }
-
-    function persistActivePerson() {
-      if (!activePersonId) localStorage.removeItem(ACTIVE_PERSON_STORAGE_KEY);
-      else localStorage.setItem(ACTIVE_PERSON_STORAGE_KEY, activePersonId);
-    }
-
-    function assignmentCount() {
-      return Object.keys(chairAssignments).length;
-    }
-
-    function getPersonById(id) {
-      return people.find((person) => person.id === id) || null;
-    }
-
-    function getChairByPerson(personId) {
-      for (const [chairKey, assignedPersonId] of Object.entries(chairAssignments)) {
-        if (assignedPersonId === personId) return chairKey;
-      }
-      return null;
-    }
-
-    function renderPeopleList() {
-      const activePerson = getPersonById(activePersonId);
-      const countText = `${assignmentCount()} / ${people.length} 매칭`;
-      mapperStatus.innerHTML = `<strong>조직 현황</strong><span>${activePerson ? `${activePerson.name} 선택됨` : "선택 인원 없음"} · ${countText}</span>`;
-
-      const findPerson = (dept, name) => people.find((person) => person.dept === dept && person.name === name) || null;
-      const personCard = (person, roleText) => {
-        if (!person) return "";
-        const chairKey = getChairByPerson(person.id);
-        const assignedClass = chairKey ? " assigned" : "";
-        const activeClass = person.id === activePersonId ? " active" : "";
-        return `
-          <article class="org-person${assignedClass}${activeClass}" data-person-id="${person.id}">
-            <strong>${person.name}</strong>
-            <small>${person.title || roleText || "-"}</small>
-            <small>${chairKey ? `좌석 ${chairKey}` : "좌석 미지정"}</small>
-          </article>
-        `;
-      };
-
-      const topHtml = ORG_TEMPLATE.top.members
-        .map((member) => personCard(findPerson(member.dept, member.name), member.title))
-        .join("");
-
-      const teamsHtml = ORG_TEMPLATE.teams.map((team) => {
-        const membersHtml = team.members
-          .map((name) => personCard(findPerson(team.name, name), "선임"))
-          .join("");
-        return `
-          <section class="org-team">
-            <h4>${team.name} (${team.count})</h4>
-            <div class="org-members">${membersHtml}</div>
-          </section>
-        `;
-      }).join("");
-
-      orgChartEl.innerHTML = `
-        <section class="org-top">
-          <div class="org-top-title">${ORG_TEMPLATE.top.name} (${ORG_TEMPLATE.top.count})</div>
-          <div class="org-top-members">${topHtml}</div>
-        </section>
-        <section class="org-teams">${teamsHtml}</section>
-      `;
-    }
-
-    function worldToScreen(x, y) {
-      return {
-        x: x * camera.scale + camera.offsetX,
-        y: (world.maxY - y + world.minY) * camera.scale + camera.offsetY,
-      };
-    }
-
-    function screenToWorld(x, y) {
-      return {
-        x: (x - camera.offsetX) / camera.scale,
-        y: world.maxY + world.minY - (y - camera.offsetY) / camera.scale,
-      };
-    }
-
-    function resize() {
-      pixelRatio = window.devicePixelRatio || 1;
-      const rect = canvas.getBoundingClientRect();
-      canvas.width = Math.round(rect.width * pixelRatio);
-      canvas.height = Math.round(rect.height * pixelRatio);
-      ctx.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
-      fit();
-    }
-
-    function fit() {
-      const rect = canvas.getBoundingClientRect();
-      const width = world.maxX - world.minX;
-      const height = world.maxY - world.minY;
-      const pad = 36;
-      const scaleX = (rect.width - pad * 2) / width;
-      const scaleY = (rect.height - pad * 2) / height;
-      camera.scale = Math.min(scaleX, scaleY);
-      camera.offsetX = pad - world.minX * camera.scale + (rect.width - pad * 2 - width * camera.scale) / 2;
-      camera.offsetY = pad - world.minY * camera.scale + (rect.height - pad * 2 - height * camera.scale) / 2;
-      requestDraw();
-    }
-
-    function drawGrid(width, height) {
-      ctx.save();
-      ctx.strokeStyle = "rgba(21,35,48,0.05)";
-      ctx.lineWidth = 1;
-      for (let x = 120; x < width; x += 120) {
-        ctx.beginPath();
-        ctx.moveTo(x, 0);
-        ctx.lineTo(x, height);
-        ctx.stroke();
-      }
-      for (let y = 120; y < height; y += 120) {
-        ctx.beginPath();
-        ctx.moveTo(0, y);
-        ctx.lineTo(width, y);
-        ctx.stroke();
-      }
-      ctx.restore();
-    }
-
-    function pickChair(screenX, screenY) {
-      const threshold = 12;
-      const pointerWorld = screenToWorld(screenX, screenY);
-      const thresholdWorld = threshold / camera.scale;
-      const thresholdWorldSq = thresholdWorld * thresholdWorld;
-      const minGX = Math.floor((pointerWorld.x - thresholdWorld) / PICK_GRID_SIZE);
-      const maxGX = Math.floor((pointerWorld.x + thresholdWorld) / PICK_GRID_SIZE);
-      const minGY = Math.floor((pointerWorld.y - thresholdWorld) / PICK_GRID_SIZE);
-      const maxGY = Math.floor((pointerWorld.y + thresholdWorld) / PICK_GRID_SIZE);
-      const candidateIndexes = [];
-      const seen = new Set();
-      for (let gx = minGX; gx <= maxGX; gx += 1) {
-        for (let gy = minGY; gy <= maxGY; gy += 1) {
-          const candidates = chairPickGrid.get(pickGridKey(gx, gy));
-          if (!candidates) continue;
-          for (const index of candidates) {
-            if (seen.has(index)) continue;
-            seen.add(index);
-            candidateIndexes.push(index);
-          }
-        }
-      }
-      let best = null;
-      for (const index of candidateIndexes) {
-        const chair = chairGeometry[index];
-        if (
-          pointerWorld.x < chair.minX - thresholdWorld ||
-          pointerWorld.x > chair.maxX + thresholdWorld ||
-          pointerWorld.y < chair.minY - thresholdWorld ||
-          pointerWorld.y > chair.maxY + thresholdWorld
-        ) continue;
-        let distSq = Infinity;
-        for (let i = 0; i < chair.hitSegments.length; i += 4) {
-          const x1 = chair.hitSegments[i];
-          const y1 = chair.hitSegments[i + 1];
-          const x2 = chair.hitSegments[i + 2];
-          const y2 = chair.hitSegments[i + 3];
-          const dx = x2 - x1;
-          const dy = y2 - y1;
-          const len2 = dx * dx + dy * dy;
-          let segDistSq;
-          if (len2 === 0) {
-            const px = pointerWorld.x - x1;
-            const py = pointerWorld.y - y1;
-            segDistSq = px * px + py * py;
-          } else {
-            let t = ((pointerWorld.x - x1) * dx + (pointerWorld.y - y1) * dy) / len2;
-            t = Math.max(0, Math.min(1, t));
-            const lx = x1 + t * dx;
-            const ly = y1 + t * dy;
-            const px = pointerWorld.x - lx;
-            const py = pointerWorld.y - ly;
-            segDistSq = px * px + py * py;
-          }
-          if (segDistSq < distSq) distSq = segDistSq;
-          if (distSq <= thresholdWorldSq * 0.3) break;
-        }
-        if (distSq > thresholdWorldSq) continue;
-        const dist = Math.sqrt(distSq) * camera.scale;
-
-        if (!best) {
-          best = { chair, dist };
-          continue;
-        }
-
-        const distGap = dist - best.dist;
-        if (distGap < -0.75) {
-          best = { chair, dist };
-          continue;
-        }
-
-        if (Math.abs(distGap) <= 2) {
-          const areaGap = chair.area - best.chair.area;
-          if (areaGap < -1) {
-            best = { chair, dist };
-            continue;
-          }
-
-          if (
-            Math.abs(areaGap) <= 1 &&
-            chair.kind === "block" &&
-            best.chair.kind !== "block"
-          ) {
-            best = { chair, dist };
-          }
-        }
-      }
-
-      return best ? best.chair : null;
-    }
-
-    function renderTooltip() {
-      if (!hovered) {
-        tooltip.classList.remove("visible");
-        hoverChip.textContent = "chair hover: none";
-        return;
-      }
-      hoverChip.textContent = `chair hover: ${hovered.name}`;
-      tooltip.innerHTML = `
-        <strong>${hovered.name}</strong>
-        <div>chair key: ${hovered.key}</div>
-        <div>${placed.has(hovered.key) ? "선택됨" : "클릭하면 선택"}</div>
-        <div>${chairAssignments[hovered.key] ? `배치: ${(getPersonById(chairAssignments[hovered.key]) || { name: "알수없음" }).name}` : "배치 인원 없음"}</div>
-      `;
-      tooltip.style.left = `${pointer.x + 14}px`;
-      tooltip.style.top = `${pointer.y + 14}px`;
-      tooltip.classList.add("visible");
-    }
-
-    function requestDraw() {
-      if (rafPending) return;
-      rafPending = true;
-      window.requestAnimationFrame(() => {
-        rafPending = false;
-        draw();
-      });
-    }
-
-    function applyWorldTransform() {
-      ctx.setTransform(
-        pixelRatio * camera.scale,
-        0,
-        0,
-        -pixelRatio * camera.scale,
-        pixelRatio * camera.offsetX,
-        pixelRatio * ((world.maxY + world.minY) * camera.scale + camera.offsetY)
-      );
-    }
-
-    function draw() {
-      const rect = canvas.getBoundingClientRect();
-      ctx.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
-      ctx.clearRect(0, 0, rect.width, rect.height);
-      drawGrid(rect.width, rect.height);
-      const viewA = screenToWorld(0, rect.height);
-      const viewB = screenToWorld(rect.width, 0);
-      const viewMinX = Math.min(viewA.x, viewB.x);
-      const viewMaxX = Math.max(viewA.x, viewB.x);
-      const viewMinY = Math.min(viewA.y, viewB.y);
-      const viewMaxY = Math.max(viewA.y, viewB.y);
-
-      ctx.save();
-      applyWorldTransform();
-      ctx.strokeStyle = "rgba(100, 116, 139, 0.28)";
-      ctx.lineWidth = 1 / camera.scale;
-      const tileSize = meta.backgroundTileSize;
-      const tileMinX = Math.floor(viewMinX / tileSize);
-      const tileMaxX = Math.floor(viewMaxX / tileSize);
-      const tileMinY = Math.floor(viewMinY / tileSize);
-      const tileMaxY = Math.floor(viewMaxY / tileSize);
-      for (let tx = tileMinX; tx <= tileMaxX; tx += 1) {
-        for (let ty = tileMinY; ty <= tileMaxY; ty += 1) {
-          const range = bgTileRanges[`${tx},${ty}`];
-          if (!range) continue;
-          const start = range[0];
-          const count = range[1];
-          for (let i = start; i < start + count; i += 1) {
-            const offset = i * 4;
-            const x1 = bgSegValues[offset] / 10;
-            const y1 = bgSegValues[offset + 1] / 10;
-            const x2 = bgSegValues[offset + 2] / 10;
-            const y2 = bgSegValues[offset + 3] / 10;
-            if (
-              Math.max(x1, x2) < viewMinX ||
-              Math.min(x1, x2) > viewMaxX ||
-              Math.max(y1, y2) < viewMinY ||
-              Math.min(y1, y2) > viewMaxY
-            ) continue;
-            ctx.beginPath();
-            ctx.moveTo(x1, y1);
-            ctx.lineTo(x2, y2);
-            ctx.stroke();
-          }
-        }
-      }
-      ctx.restore();
-
-      hovered = dragging ? null : pickChair(pointer.x, pointer.y);
-
-      ctx.save();
-      applyWorldTransform();
-      ctx.lineWidth = 1.45 / camera.scale;
-      ctx.lineCap = "round";
-      ctx.lineJoin = "round";
-      for (const chair of chairGeometry) {
-        if (chair.maxX < viewMinX || chair.minX > viewMaxX || chair.maxY < viewMinY || chair.minY > viewMaxY) continue;
-        const active = hovered && hovered.key === chair.key;
-        const selected = placed.has(chair.key);
-        const assignedPersonId = chairAssignments[chair.key];
-        const activePersonChair = activePersonId && assignedPersonId === activePersonId;
-        const assigned = Boolean(assignedPersonId);
-        const baseWidth = chair.kind === "block" ? 1.45 : 1.35;
-        ctx.strokeStyle = activePersonChair
-          ? "rgba(234, 179, 8, 1)"
-          : assigned
-            ? "rgba(37, 99, 235, 0.98)"
-            : selected
-              ? "rgba(220, 38, 38, 0.98)"
-              : active
-                ? "rgba(15, 118, 110, 0.98)"
-                : chair.kind === "group"
-                  ? "rgba(16, 134, 149, 0.74)"
-                  : "rgba(21, 149, 142, 0.8)";
-        ctx.lineWidth = (activePersonChair ? 2.8 : assigned ? 2.4 : selected ? 2.6 : active ? 2.1 : baseWidth) / camera.scale;
-        ctx.stroke(chair.path);
-      }
-      ctx.restore();
-
-      scaleChip.textContent = `scale ${camera.scale.toFixed(4)}x`;
-      renderTooltip();
-    }
-
-    function persistPlaced() {
-      localStorage.setItem(STORAGE_KEY, JSON.stringify([...placed]));
-    }
-
-    canvas.addEventListener("pointerdown", (event) => {
-      dragging = true;
-      dragStart = { x: event.clientX, y: event.clientY, offsetX: camera.offsetX, offsetY: camera.offsetY };
-      canvas.classList.add("dragging");
-    });
-
-    window.addEventListener("pointerup", (event) => {
-      if (dragging && dragStart) {
-        const move = Math.hypot(event.clientX - dragStart.x, event.clientY - dragStart.y);
-        if (move < 4) {
-          const rect = canvas.getBoundingClientRect();
-          const picked = pickChair(event.clientX - rect.left, event.clientY - rect.top);
-          if (picked) {
-            if (placed.has(picked.key)) placed.delete(picked.key);
-            else placed.add(picked.key);
-            persistPlaced();
-            if (activePersonId) {
-              const currentChair = getChairByPerson(activePersonId);
-              if (chairAssignments[picked.key] === activePersonId) {
-                delete chairAssignments[picked.key];
-              } else {
-                if (currentChair && currentChair !== picked.key) delete chairAssignments[currentChair];
-                chairAssignments[picked.key] = activePersonId;
-              }
-              persistAssignments();
-              renderPeopleList();
-            }
-          }
-        }
-      }
-      dragging = false;
-      dragStart = null;
-      canvas.classList.remove("dragging");
-      requestDraw();
-    });
-
-    window.addEventListener("pointermove", (event) => {
-      const rect = canvas.getBoundingClientRect();
-      pointer = { x: event.clientX - rect.left, y: event.clientY - rect.top };
-      if (dragging && dragStart) {
-        camera.offsetX = dragStart.offsetX + (event.clientX - dragStart.x);
-        camera.offsetY = dragStart.offsetY + (event.clientY - dragStart.y);
-      }
-      requestDraw();
-    });
-
-    canvas.addEventListener("wheel", (event) => {
-      event.preventDefault();
-      const rect = canvas.getBoundingClientRect();
-      const mx = event.clientX - rect.left;
-      const my = event.clientY - rect.top;
-      const before = screenToWorld(mx, my);
-      const factor = event.deltaY < 0 ? 1.08 : 0.92;
-      camera.scale = Math.max(0.002, Math.min(2, camera.scale * factor));
-      const after = worldToScreen(before.x, before.y);
-      camera.offsetX += mx - after.x;
-      camera.offsetY += my - after.y;
-      requestDraw();
-    }, { passive: false });
-
-    document.getElementById("fit-btn").addEventListener("click", fit);
-    document.getElementById("clear-btn").addEventListener("click", () => {
-      placed.clear();
-      persistPlaced();
-      requestDraw();
-    });
-    clearAssignBtn.addEventListener("click", () => {
-      chairAssignments = {};
-      persistAssignments();
-      renderPeopleList();
-      requestDraw();
-    });
-    orgChartEl.addEventListener("click", (event) => {
-      const item = event.target.closest(".org-person[data-person-id]");
-      if (!item) return;
-      const personId = item.getAttribute("data-person-id");
-      activePersonId = personId === activePersonId ? null : personId;
-      persistActivePerson();
-      renderPeopleList();
-      requestDraw();
-    });
-    window.addEventListener("resize", resize);
-    renderPeopleList();
-    resize();
-  </script>
-</body>
-</html>

img/location_photo/기술개발센터/팀자리/center_chair_people_map_6f.html

@@ -1,932 +0,0 @@
-<!DOCTYPE html>
-<html lang="ko">
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>center chair people map 6f</title>
-  <style>
-    :root {
-      --ink: #152330;
-      --muted: #627286;
-      --paper: rgba(255,255,255,0.86);
-      --line: rgba(21,35,48,0.1);
-      --accent: #0f766e;
-      --bg: #edf2f6;
-    }
-    * { box-sizing: border-box; }
-    body {
-      margin: 0;
-      font-family: "IBM Plex Sans KR", "Pretendard", sans-serif;
-      color: var(--ink);
-      background:
-        radial-gradient(circle at top left, rgba(15,118,110,0.11), transparent 22%),
-        linear-gradient(180deg, #f5f8fb 0%, #e8eef3 100%);
-    }
-    .page {
-      min-height: 100vh;
-      padding: 0;
-    }
-    .shell {
-      min-height: 100vh;
-    }
-    .panel {
-      border-radius: 0;
-      border: none;
-      background: transparent;
-      backdrop-filter: none;
-      box-shadow: none;
-    }
-    .actions {
-      display: flex;
-      gap: 8px;
-      flex-wrap: wrap;
-    }
-    button {
-      border: none;
-      border-radius: 999px;
-      padding: 10px 14px;
-      font: inherit;
-      font-weight: 700;
-      cursor: pointer;
-      color: white;
-      background: linear-gradient(135deg, #0f766e, #115e59);
-      box-shadow: 0 10px 22px rgba(15,118,110,0.18);
-    }
-    button.alt {
-      color: var(--ink);
-      background: rgba(255,255,255,0.9);
-      border: 1px solid var(--line);
-      box-shadow: none;
-    }
-    .viewer {
-      position: relative;
-      overflow: hidden;
-      min-height: 100vh;
-    }
-    .viewer-head {
-      position: absolute;
-      top: 16px;
-      left: 16px;
-      right: 16px;
-      z-index: 2;
-      display: flex;
-      justify-content: space-between;
-      gap: 12px;
-      pointer-events: none;
-    }
-    .chip {
-      padding: 10px 12px;
-      border-radius: 16px;
-      background: rgba(255,255,255,0.82);
-      border: 1px solid rgba(255,255,255,0.94);
-      color: var(--muted);
-      font-size: 13px;
-      font-weight: 700;
-      box-shadow: 0 8px 24px rgba(21,35,48,0.08);
-    }
-    .viewer-actions {
-      position: absolute;
-      left: 16px;
-      top: 64px;
-      z-index: 2;
-      display: flex;
-      gap: 8px;
-    }
-    .mapper {
-      position: absolute;
-      top: 76px;
-      left: 50%;
-      transform: translateX(-50%);
-      width: min(94vw, 1320px);
-      max-height: min(56vh, 560px);
-      overflow: hidden;
-      z-index: 4;
-      border-radius: 20px;
-      background: rgba(234, 239, 247, 0.95);
-      border: 1px solid rgba(101, 119, 146, 0.22);
-      box-shadow: 0 18px 36px rgba(15, 23, 42, 0.2);
-      display: flex;
-      flex-direction: column;
-      backdrop-filter: blur(6px);
-    }
-    .hidden-off {
-      display: none !important;
-    }
-    .mapper-head {
-      padding: 10px 14px;
-      border-bottom: 1px solid rgba(101,119,146,0.18);
-      font-size: 12px;
-      color: #51607a;
-      font-weight: 700;
-      line-height: 1.35;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      gap: 10px;
-      background: rgba(255,255,255,0.6);
-    }
-    .mapper-head strong {
-      display: block;
-      color: #17243b;
-      font-size: 20px;
-      margin-bottom: 2px;
-    }
-    .mapper-head .alt {
-      padding: 8px 10px;
-      font-size: 12px;
-      white-space: nowrap;
-    }
-    .org-chart {
-      margin: 0;
-      padding: 14px;
-      overflow: auto;
-      display: grid;
-      gap: 12px;
-    }
-    .org-top {
-      margin: 0 auto;
-      width: min(100%, 420px);
-      border-radius: 14px;
-      overflow: hidden;
-      border: 1px solid rgba(67, 84, 118, 0.25);
-      background: #fff;
-    }
-    .org-top-title {
-      background: #1e2f4d;
-      color: #fff;
-      text-align: center;
-      font-size: 34px;
-      font-weight: 800;
-      line-height: 1.1;
-      padding: 16px 12px;
-      letter-spacing: -0.03em;
-    }
-    .org-top-members {
-      padding: 10px;
-      display: grid;
-      gap: 6px;
-      background: rgba(255,255,255,0.95);
-    }
-    .org-teams {
-      display: grid;
-      grid-template-columns: repeat(7, minmax(160px, 1fr));
-      gap: 10px;
-      align-items: start;
-    }
-    .org-team {
-      border: 1px solid rgba(110, 126, 152, 0.25);
-      border-radius: 10px;
-      overflow: hidden;
-      background: rgba(255,255,255,0.95);
-      min-width: 0;
-    }
-    .org-team h4 {
-      margin: 0;
-      padding: 9px 10px;
-      font-size: 14px;
-      color: #21324e;
-      font-weight: 800;
-      border-bottom: 1px solid rgba(110, 126, 152, 0.2);
-      background: rgba(240, 245, 252, 0.96);
-    }
-    .org-members {
-      padding: 7px;
-      display: grid;
-      gap: 6px;
-    }
-    .org-person {
-      border: 1px solid rgba(116, 133, 161, 0.25);
-      background: rgba(255,255,255,0.95);
-      border-radius: 8px;
-      padding: 6px 8px;
-      cursor: pointer;
-      transition: background 120ms ease, border-color 120ms ease;
-      min-width: 0;
-    }
-    .org-person.active {
-      border-color: rgba(15,118,110,0.6);
-      background: rgba(15,118,110,0.11);
-    }
-    .org-person.assigned {
-      border-color: rgba(37,99,235,0.5);
-      background: rgba(37,99,235,0.1);
-    }
-    .org-person strong {
-      display: block;
-      font-size: 13px;
-      line-height: 1.3;
-      color: #15233a;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-    .org-person small {
-      display: block;
-      color: #5a6a86;
-      font-size: 11px;
-      line-height: 1.25;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-    @media (max-width: 980px) {
-      .mapper {
-        top: 72px;
-        width: min(96vw, 920px);
-        max-height: 58vh;
-      }
-      .viewer-actions {
-        top: 64px;
-        left: 12px;
-        right: 12px;
-        flex-wrap: wrap;
-      }
-      .mapper-head strong {
-        font-size: 16px;
-      }
-      .org-top-title {
-        font-size: 24px;
-      }
-      .org-teams {
-        grid-template-columns: repeat(3, minmax(150px, 1fr));
-      }
-    }
-    canvas {
-      width: 100%;
-      height: 100%;
-      display: block;
-      cursor: grab;
-    }
-    canvas.dragging { cursor: grabbing; }
-    .tooltip {
-      position: absolute;
-      min-width: 170px;
-      padding: 12px 14px;
-      border-radius: 16px;
-      background: rgba(17,24,39,0.94);
-      color: white;
-      pointer-events: none;
-      opacity: 0;
-      transform: translate(12px, 12px);
-      transition: opacity 120ms ease;
-      z-index: 3;
-    }
-    .tooltip.visible { opacity: 1; }
-    .tooltip strong { display: block; margin-bottom: 6px; font-size: 14px; }
-    .tooltip div { font-size: 12px; line-height: 1.45; color: rgba(255,255,255,0.82); }
-  </style>
-</head>
-<body>
-  <div class="page">
-    <div class="shell">
-      <main class="panel viewer">
-        <div class="viewer-head">
-          <div class="chip" id="scale-chip"></div>
-          <div class="chip" id="hover-chip">chair hover: none</div>
-        </div>
-        <div class="viewer-actions">
-          <button type="button" id="fit-btn">전체 맞춤</button>
-          <button type="button" class="alt" id="clear-btn">선택 지우기</button>
-        </div>
-        <aside class="mapper hidden-off">
-          <div class="mapper-head">
-            <div id="mapper-status">
-              <strong>조직 현황</strong>
-              <span>선택 인원 없음</span>
-            </div>
-            <button type="button" class="alt" id="clear-assign-btn">매칭 초기화</button>
-          </div>
-          <div class="org-chart" id="org-chart"></div>
-        </aside>
-        <canvas id="canvas"></canvas>
-        <div class="tooltip" id="tooltip"></div>
-      </main>
-    </div>
-  </div>
-  <script src="./center_chair_people_payload_6f.js"></script>
-  <script>
-    const DATA = window.CHAIR_MAP_DATA;
-    function decodeSegments(base64) {
-      const binary = atob(base64);
-      const bytes = new Uint8Array(binary.length);
-      for (let i = 0; i < binary.length; i += 1) bytes[i] = binary.charCodeAt(i);
-      return new Int32Array(bytes.buffer);
-    }
-    const bgTileRanges = DATA.bgTileRanges;
-    const bgSegValues = decodeSegments(DATA.bgSegsB64);
-    const chairSegValues = decodeSegments(DATA.chairSegsB64);
-    const chairs = DATA.chairs.map(([key, name, kind, start, count]) => ({
-      key, name, kind, start, count
-    }));
-    const meta = DATA.meta;
-    const world = meta.headerBounds;
-    const canvas = document.getElementById("canvas");
-    const ctx = canvas.getContext("2d");
-    const tooltip = document.getElementById("tooltip");
-    const scaleChip = document.getElementById("scale-chip");
-    const hoverChip = document.getElementById("hover-chip");
-    const STORAGE_KEY = "ptc-chair-selection";
-    const PEOPLE_STORAGE_KEY = "ptc-chair-people";
-    const ASSIGN_STORAGE_KEY = "ptc-chair-assignments";
-    const ACTIVE_PERSON_STORAGE_KEY = "ptc-chair-active-person";
-    const clearAssignBtn = document.getElementById("clear-assign-btn");
-    const orgChartEl = document.getElementById("org-chart");
-    const mapperStatus = document.getElementById("mapper-status");
-    // Prevent stale auto-highlights from previous sessions.
-    localStorage.removeItem(STORAGE_KEY);
-    localStorage.removeItem(ACTIVE_PERSON_STORAGE_KEY);
-    localStorage.removeItem(ASSIGN_STORAGE_KEY);
-    const placed = new Set();
-    let people = JSON.parse(localStorage.getItem(PEOPLE_STORAGE_KEY) || "[]");
-    let chairAssignments = {};
-    let activePersonId = null;
-    const ORG_TEMPLATE = {
-      top: {
-        name: "총괄기획실",
-        count: 53,
-        members: [
-          { name: "장종찬", dept: "총괄기획실", title: "기획실장" },
-          { name: "김원식", dept: "총괄기획실", title: "전무이사" },
-        ],
-      },
-      teams: [
-        { name: "경영기획팀", count: 6, members: ["김우진", "임민정", "국혜린", "최선아", "김윤재", "이미영"] },
-        { name: "인재성장팀", count: 5, members: ["조태희", "최근혜", "류원준", "주안기", "정성호"] },
-        { name: "ERP 기획팀", count: 5, members: ["류호성", "문형식", "최요제", "황대일", "이채봉"] },
-        { name: "디자인기획팀", count: 17, members: ["신혜영", "정은혜", "김태식", "최예은", "채선영", "최영환", "윤봄이", "이예진", "허유나", "마희연", "김수현", "박지영", "권순호", "정두휘", "김정석", "정지윤", "양숙영"] },
-        { name: "기술기획팀", count: 11, members: ["김원기", "홍아름", "이경민", "김혜인", "황동환", "최찬호", "이태훈", "김신지", "조찬영", "김용연", "한치영"] },
-        { name: "협업증진팀", count: 3, members: ["성형일", "박주한", "한승민"] },
-        { name: "솔루션통합팀", count: 4, members: ["권혁진", "염승호", "윤준수", "김지영"] },
-      ],
-    };
-    const chairGeometry = chairs.map((chair) => {
-      let minX = Infinity;
-      let minY = Infinity;
-      let maxX = -Infinity;
-      let maxY = -Infinity;
-      const path = new Path2D();
-      const hitSegments = new Float32Array(chair.count * 4);
-      let segCursor = 0;
-      for (let i = chair.start; i < chair.start + chair.count; i += 1) {
-        const offset = i * 4;
-        const x1 = chairSegValues[offset] / 10;
-        const y1 = chairSegValues[offset + 1] / 10;
-        const x2 = chairSegValues[offset + 2] / 10;
-        const y2 = chairSegValues[offset + 3] / 10;
-        path.moveTo(x1, y1);
-        path.lineTo(x2, y2);
-        hitSegments[segCursor] = x1;
-        hitSegments[segCursor + 1] = y1;
-        hitSegments[segCursor + 2] = x2;
-        hitSegments[segCursor + 3] = y2;
-        segCursor += 4;
-        minX = Math.min(minX, x1, x2);
-        minY = Math.min(minY, y1, y2);
-        maxX = Math.max(maxX, x1, x2);
-        maxY = Math.max(maxY, y1, y2);
-      }
-      return {
-        ...chair,
-        minX,
-        minY,
-        maxX,
-        maxY,
-        area: Math.max(1, (maxX - minX) * (maxY - minY)),
-        path,
-        hitSegments,
-      };
-    });
-    function renumberChairKeys(chairItems) {
-      if (!chairItems.length) return;
-      const heights = chairItems
-        .map((chair) => Math.max(1, chair.maxY - chair.minY))
-        .sort((a, b) => a - b);
-      const medianHeight = heights[Math.floor(heights.length / 2)] || 1;
-      const rowTolerance = Math.max(40, medianHeight * 0.9);
-
-      const sorted = [...chairItems].sort((a, b) => {
-        const ay = (a.minY + a.maxY) * 0.5;
-        const by = (b.minY + b.maxY) * 0.5;
-        if (Math.abs(by - ay) > rowTolerance) return by - ay; // top -> bottom
-        const ax = (a.minX + a.maxX) * 0.5;
-        const bx = (b.minX + b.maxX) * 0.5;
-        return ax - bx; // left -> right
-      });
-
-      sorted.forEach((chair, index) => {
-        chair.key = String(index + 1);
-        chair.seatNo = index + 1;
-      });
-    }
-    renumberChairKeys(chairGeometry);
-    const PICK_GRID_SIZE = 1800;
-    const chairPickGrid = new Map();
-    function pickGridKey(gx, gy) {
-      return `${gx},${gy}`;
-    }
-    chairGeometry.forEach((chair, index) => {
-      const minGX = Math.floor(chair.minX / PICK_GRID_SIZE);
-      const maxGX = Math.floor(chair.maxX / PICK_GRID_SIZE);
-      const minGY = Math.floor(chair.minY / PICK_GRID_SIZE);
-      const maxGY = Math.floor(chair.maxY / PICK_GRID_SIZE);
-      for (let gx = minGX; gx <= maxGX; gx += 1) {
-        for (let gy = minGY; gy <= maxGY; gy += 1) {
-          const key = pickGridKey(gx, gy);
-          if (!chairPickGrid.has(key)) chairPickGrid.set(key, []);
-          chairPickGrid.get(key).push(index);
-        }
-      }
-    });
-
-    const camera = { scale: 1, offsetX: 0, offsetY: 0 };
-    let pixelRatio = window.devicePixelRatio || 1;
-    let pointer = { x: 0, y: 0 };
-    let dragging = false;
-    let dragStart = null;
-    let hovered = null;
-    let rafPending = false;
-
-    function normalizePeople(raw) {
-      return raw
-        .map((person, index) => {
-          if (!person || !person.name) return null;
-          return {
-            id: person.id || `person-${index + 1}`,
-            name: String(person.name).trim(),
-            dept: String(person.dept || "").trim(),
-            title: String(person.title || "").trim(),
-          };
-        })
-        .filter(Boolean);
-    }
-
-    function createTemplatePeople() {
-      const generated = [];
-      let seq = 1;
-      ORG_TEMPLATE.top.members.forEach((member) => {
-        generated.push({
-          id: `org-${seq++}`,
-          name: member.name,
-          dept: member.dept,
-          title: member.title,
-        });
-      });
-      ORG_TEMPLATE.teams.forEach((team) => {
-        team.members.forEach((name) => {
-          generated.push({
-            id: `org-${seq++}`,
-            name,
-            dept: team.name,
-            title: "선임",
-          });
-        });
-      });
-      return generated;
-    }
-
-    people = normalizePeople(people);
-    const templateReady = people.some((person) => person.name === "장종찬" && person.dept === "총괄기획실");
-    if (!templateReady) {
-      people = createTemplatePeople();
-      localStorage.setItem(PEOPLE_STORAGE_KEY, JSON.stringify(people));
-    }
-    const chairKeySet = new Set(chairGeometry.map((chair) => chair.key));
-    chairAssignments = Object.fromEntries(
-      Object.entries(chairAssignments).filter(([chairKey, personId]) => (
-        chairKeySet.has(chairKey) && people.some((person) => person.id === personId)
-      ))
-    );
-    if (activePersonId && !people.some((person) => person.id === activePersonId)) activePersonId = null;
-
-    function persistPeople() {
-      localStorage.setItem(PEOPLE_STORAGE_KEY, JSON.stringify(people));
-    }
-
-    function persistAssignments() {
-      localStorage.setItem(ASSIGN_STORAGE_KEY, JSON.stringify(chairAssignments));
-    }
-
-    function persistActivePerson() {
-      if (!activePersonId) localStorage.removeItem(ACTIVE_PERSON_STORAGE_KEY);
-      else localStorage.setItem(ACTIVE_PERSON_STORAGE_KEY, activePersonId);
-    }
-
-    function assignmentCount() {
-      return Object.keys(chairAssignments).length;
-    }
-
-    function getPersonById(id) {
-      return people.find((person) => person.id === id) || null;
-    }
-
-    function getChairByPerson(personId) {
-      for (const [chairKey, assignedPersonId] of Object.entries(chairAssignments)) {
-        if (assignedPersonId === personId) return chairKey;
-      }
-      return null;
-    }
-
-    function renderPeopleList() {
-      const activePerson = getPersonById(activePersonId);
-      const countText = `${assignmentCount()} / ${people.length} 매칭`;
-      mapperStatus.innerHTML = `<strong>조직 현황</strong><span>${activePerson ? `${activePerson.name} 선택됨` : "선택 인원 없음"} · ${countText}</span>`;
-
-      const findPerson = (dept, name) => people.find((person) => person.dept === dept && person.name === name) || null;
-      const personCard = (person, roleText) => {
-        if (!person) return "";
-        const chairKey = getChairByPerson(person.id);
-        const assignedClass = chairKey ? " assigned" : "";
-        const activeClass = person.id === activePersonId ? " active" : "";
-        return `
-          <article class="org-person${assignedClass}${activeClass}" data-person-id="${person.id}">
-            <strong>${person.name}</strong>
-            <small>${person.title || roleText || "-"}</small>
-            <small>${chairKey ? `좌석 ${chairKey}` : "좌석 미지정"}</small>
-          </article>
-        `;
-      };
-
-      const topHtml = ORG_TEMPLATE.top.members
-        .map((member) => personCard(findPerson(member.dept, member.name), member.title))
-        .join("");
-
-      const teamsHtml = ORG_TEMPLATE.teams.map((team) => {
-        const membersHtml = team.members
-          .map((name) => personCard(findPerson(team.name, name), "선임"))
-          .join("");
-        return `
-          <section class="org-team">
-            <h4>${team.name} (${team.count})</h4>
-            <div class="org-members">${membersHtml}</div>
-          </section>
-        `;
-      }).join("");
-
-      orgChartEl.innerHTML = `
-        <section class="org-top">
-          <div class="org-top-title">${ORG_TEMPLATE.top.name} (${ORG_TEMPLATE.top.count})</div>
-          <div class="org-top-members">${topHtml}</div>
-        </section>
-        <section class="org-teams">${teamsHtml}</section>
-      `;
-    }
-
-    function worldToScreen(x, y) {
-      return {
-        x: x * camera.scale + camera.offsetX,
-        y: (world.maxY - y + world.minY) * camera.scale + camera.offsetY,
-      };
-    }
-
-    function screenToWorld(x, y) {
-      return {
-        x: (x - camera.offsetX) / camera.scale,
-        y: world.maxY + world.minY - (y - camera.offsetY) / camera.scale,
-      };
-    }
-
-    function resize() {
-      pixelRatio = window.devicePixelRatio || 1;
-      const rect = canvas.getBoundingClientRect();
-      canvas.width = Math.round(rect.width * pixelRatio);
-      canvas.height = Math.round(rect.height * pixelRatio);
-      ctx.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
-      fit();
-    }
-
-    function fit() {
-      const rect = canvas.getBoundingClientRect();
-      const width = world.maxX - world.minX;
-      const height = world.maxY - world.minY;
-      const pad = 36;
-      const scaleX = (rect.width - pad * 2) / width;
-      const scaleY = (rect.height - pad * 2) / height;
-      camera.scale = Math.min(scaleX, scaleY);
-      camera.offsetX = pad - world.minX * camera.scale + (rect.width - pad * 2 - width * camera.scale) / 2;
-      camera.offsetY = pad - world.minY * camera.scale + (rect.height - pad * 2 - height * camera.scale) / 2;
-      requestDraw();
-    }
-
-    function drawGrid(width, height) {
-      ctx.save();
-      ctx.strokeStyle = "rgba(21,35,48,0.05)";
-      ctx.lineWidth = 1;
-      for (let x = 120; x < width; x += 120) {
-        ctx.beginPath();
-        ctx.moveTo(x, 0);
-        ctx.lineTo(x, height);
-        ctx.stroke();
-      }
-      for (let y = 120; y < height; y += 120) {
-        ctx.beginPath();
-        ctx.moveTo(0, y);
-        ctx.lineTo(width, y);
-        ctx.stroke();
-      }
-      ctx.restore();
-    }
-
-    function pickChair(screenX, screenY) {
-      const threshold = 12;
-      const pointerWorld = screenToWorld(screenX, screenY);
-      const thresholdWorld = threshold / camera.scale;
-      const thresholdWorldSq = thresholdWorld * thresholdWorld;
-      const minGX = Math.floor((pointerWorld.x - thresholdWorld) / PICK_GRID_SIZE);
-      const maxGX = Math.floor((pointerWorld.x + thresholdWorld) / PICK_GRID_SIZE);
-      const minGY = Math.floor((pointerWorld.y - thresholdWorld) / PICK_GRID_SIZE);
-      const maxGY = Math.floor((pointerWorld.y + thresholdWorld) / PICK_GRID_SIZE);
-      const candidateIndexes = [];
-      const seen = new Set();
-      for (let gx = minGX; gx <= maxGX; gx += 1) {
-        for (let gy = minGY; gy <= maxGY; gy += 1) {
-          const candidates = chairPickGrid.get(pickGridKey(gx, gy));
-          if (!candidates) continue;
-          for (const index of candidates) {
-            if (seen.has(index)) continue;
-            seen.add(index);
-            candidateIndexes.push(index);
-          }
-        }
-      }
-      let best = null;
-      for (const index of candidateIndexes) {
-        const chair = chairGeometry[index];
-        if (
-          pointerWorld.x < chair.minX - thresholdWorld ||
-          pointerWorld.x > chair.maxX + thresholdWorld ||
-          pointerWorld.y < chair.minY - thresholdWorld ||
-          pointerWorld.y > chair.maxY + thresholdWorld
-        ) continue;
-        let distSq = Infinity;
-        for (let i = 0; i < chair.hitSegments.length; i += 4) {
-          const x1 = chair.hitSegments[i];
-          const y1 = chair.hitSegments[i + 1];
-          const x2 = chair.hitSegments[i + 2];
-          const y2 = chair.hitSegments[i + 3];
-          const dx = x2 - x1;
-          const dy = y2 - y1;
-          const len2 = dx * dx + dy * dy;
-          let segDistSq;
-          if (len2 === 0) {
-            const px = pointerWorld.x - x1;
-            const py = pointerWorld.y - y1;
-            segDistSq = px * px + py * py;
-          } else {
-            let t = ((pointerWorld.x - x1) * dx + (pointerWorld.y - y1) * dy) / len2;
-            t = Math.max(0, Math.min(1, t));
-            const lx = x1 + t * dx;
-            const ly = y1 + t * dy;
-            const px = pointerWorld.x - lx;
-            const py = pointerWorld.y - ly;
-            segDistSq = px * px + py * py;
-          }
-          if (segDistSq < distSq) distSq = segDistSq;
-          if (distSq <= thresholdWorldSq * 0.3) break;
-        }
-        if (distSq > thresholdWorldSq) continue;
-        const dist = Math.sqrt(distSq) * camera.scale;
-
-        if (!best) {
-          best = { chair, dist };
-          continue;
-        }
-
-        const distGap = dist - best.dist;
-        if (distGap < -0.75) {
-          best = { chair, dist };
-          continue;
-        }
-
-        if (Math.abs(distGap) <= 2) {
-          const areaGap = chair.area - best.chair.area;
-          if (areaGap < -1) {
-            best = { chair, dist };
-            continue;
-          }
-
-          if (
-            Math.abs(areaGap) <= 1 &&
-            chair.kind === "block" &&
-            best.chair.kind !== "block"
-          ) {
-            best = { chair, dist };
-          }
-        }
-      }
-
-      return best ? best.chair : null;
-    }
-
-    function renderTooltip() {
-      if (!hovered) {
-        tooltip.classList.remove("visible");
-        hoverChip.textContent = "chair hover: none";
-        return;
-      }
-      hoverChip.textContent = `chair hover: ${hovered.name}`;
-      tooltip.innerHTML = `
-        <strong>${hovered.name}</strong>
-        <div>chair key: ${hovered.key}</div>
-        <div>${placed.has(hovered.key) ? "선택됨" : "클릭하면 선택"}</div>
-        <div>${chairAssignments[hovered.key] ? `배치: ${(getPersonById(chairAssignments[hovered.key]) || { name: "알수없음" }).name}` : "배치 인원 없음"}</div>
-      `;
-      tooltip.style.left = `${pointer.x + 14}px`;
-      tooltip.style.top = `${pointer.y + 14}px`;
-      tooltip.classList.add("visible");
-    }
-
-    function requestDraw() {
-      if (rafPending) return;
-      rafPending = true;
-      window.requestAnimationFrame(() => {
-        rafPending = false;
-        draw();
-      });
-    }
-
-    function applyWorldTransform() {
-      ctx.setTransform(
-        pixelRatio * camera.scale,
-        0,
-        0,
-        -pixelRatio * camera.scale,
-        pixelRatio * camera.offsetX,
-        pixelRatio * ((world.maxY + world.minY) * camera.scale + camera.offsetY)
-      );
-    }
-
-    function draw() {
-      const rect = canvas.getBoundingClientRect();
-      ctx.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
-      ctx.clearRect(0, 0, rect.width, rect.height);
-      drawGrid(rect.width, rect.height);
-      const viewA = screenToWorld(0, rect.height);
-      const viewB = screenToWorld(rect.width, 0);
-      const viewMinX = Math.min(viewA.x, viewB.x);
-      const viewMaxX = Math.max(viewA.x, viewB.x);
-      const viewMinY = Math.min(viewA.y, viewB.y);
-      const viewMaxY = Math.max(viewA.y, viewB.y);
-
-      ctx.save();
-      applyWorldTransform();
-      ctx.strokeStyle = "rgba(100, 116, 139, 0.28)";
-      ctx.lineWidth = 1 / camera.scale;
-      const tileSize = meta.backgroundTileSize;
-      const tileMinX = Math.floor(viewMinX / tileSize);
-      const tileMaxX = Math.floor(viewMaxX / tileSize);
-      const tileMinY = Math.floor(viewMinY / tileSize);
-      const tileMaxY = Math.floor(viewMaxY / tileSize);
-      for (let tx = tileMinX; tx <= tileMaxX; tx += 1) {
-        for (let ty = tileMinY; ty <= tileMaxY; ty += 1) {
-          const range = bgTileRanges[`${tx},${ty}`];
-          if (!range) continue;
-          const start = range[0];
-          const count = range[1];
-          for (let i = start; i < start + count; i += 1) {
-            const offset = i * 4;
-            const x1 = bgSegValues[offset] / 10;
-            const y1 = bgSegValues[offset + 1] / 10;
-            const x2 = bgSegValues[offset + 2] / 10;
-            const y2 = bgSegValues[offset + 3] / 10;
-            if (
-              Math.max(x1, x2) < viewMinX ||
-              Math.min(x1, x2) > viewMaxX ||
-              Math.max(y1, y2) < viewMinY ||
-              Math.min(y1, y2) > viewMaxY
-            ) continue;
-            ctx.beginPath();
-            ctx.moveTo(x1, y1);
-            ctx.lineTo(x2, y2);
-            ctx.stroke();
-          }
-        }
-      }
-      ctx.restore();
-
-      hovered = dragging ? null : pickChair(pointer.x, pointer.y);
-
-      ctx.save();
-      applyWorldTransform();
-      ctx.lineWidth = 1.45 / camera.scale;
-      ctx.lineCap = "round";
-      ctx.lineJoin = "round";
-      for (const chair of chairGeometry) {
-        if (chair.maxX < viewMinX || chair.minX > viewMaxX || chair.maxY < viewMinY || chair.minY > viewMaxY) continue;
-        const active = hovered && hovered.key === chair.key;
-        const selected = placed.has(chair.key);
-        const assignedPersonId = chairAssignments[chair.key];
-        const activePersonChair = activePersonId && assignedPersonId === activePersonId;
-        const assigned = Boolean(assignedPersonId);
-        const baseWidth = chair.kind === "block" ? 1.45 : 1.35;
-        ctx.strokeStyle = activePersonChair
-          ? "rgba(234, 179, 8, 1)"
-          : assigned
-            ? "rgba(37, 99, 235, 0.98)"
-            : selected
-              ? "rgba(220, 38, 38, 0.98)"
-              : active
-                ? "rgba(15, 118, 110, 0.98)"
-                : chair.kind === "group"
-                  ? "rgba(16, 134, 149, 0.74)"
-                  : "rgba(21, 149, 142, 0.8)";
-        ctx.lineWidth = (activePersonChair ? 2.8 : assigned ? 2.4 : selected ? 2.6 : active ? 2.1 : baseWidth) / camera.scale;
-        ctx.stroke(chair.path);
-      }
-      ctx.restore();
-
-      scaleChip.textContent = `scale ${camera.scale.toFixed(4)}x`;
-      renderTooltip();
-    }
-
-    function persistPlaced() {
-      localStorage.setItem(STORAGE_KEY, JSON.stringify([...placed]));
-    }
-
-    canvas.addEventListener("pointerdown", (event) => {
-      dragging = true;
-      dragStart = { x: event.clientX, y: event.clientY, offsetX: camera.offsetX, offsetY: camera.offsetY };
-      canvas.classList.add("dragging");
-    });
-
-    window.addEventListener("pointerup", (event) => {
-      if (dragging && dragStart) {
-        const move = Math.hypot(event.clientX - dragStart.x, event.clientY - dragStart.y);
-        if (move < 4) {
-          const rect = canvas.getBoundingClientRect();
-          const picked = pickChair(event.clientX - rect.left, event.clientY - rect.top);
-          if (picked) {
-            if (placed.has(picked.key)) placed.delete(picked.key);
-            else placed.add(picked.key);
-            persistPlaced();
-            if (activePersonId) {
-              const currentChair = getChairByPerson(activePersonId);
-              if (chairAssignments[picked.key] === activePersonId) {
-                delete chairAssignments[picked.key];
-              } else {
-                if (currentChair && currentChair !== picked.key) delete chairAssignments[currentChair];
-                chairAssignments[picked.key] = activePersonId;
-              }
-              persistAssignments();
-              renderPeopleList();
-            }
-          }
-        }
-      }
-      dragging = false;
-      dragStart = null;
-      canvas.classList.remove("dragging");
-      requestDraw();
-    });
-
-    window.addEventListener("pointermove", (event) => {
-      const rect = canvas.getBoundingClientRect();
-      pointer = { x: event.clientX - rect.left, y: event.clientY - rect.top };
-      if (dragging && dragStart) {
-        camera.offsetX = dragStart.offsetX + (event.clientX - dragStart.x);
-        camera.offsetY = dragStart.offsetY + (event.clientY - dragStart.y);
-      }
-      requestDraw();
-    });
-
-    canvas.addEventListener("wheel", (event) => {
-      event.preventDefault();
-      const rect = canvas.getBoundingClientRect();
-      const mx = event.clientX - rect.left;
-      const my = event.clientY - rect.top;
-      const before = screenToWorld(mx, my);
-      const factor = event.deltaY < 0 ? 1.08 : 0.92;
-      camera.scale = Math.max(0.002, Math.min(2, camera.scale * factor));
-      const after = worldToScreen(before.x, before.y);
-      camera.offsetX += mx - after.x;
-      camera.offsetY += my - after.y;
-      requestDraw();
-    }, { passive: false });
-
-    document.getElementById("fit-btn").addEventListener("click", fit);
-    document.getElementById("clear-btn").addEventListener("click", () => {
-      placed.clear();
-      persistPlaced();
-      requestDraw();
-    });
-    clearAssignBtn.addEventListener("click", () => {
-      chairAssignments = {};
-      persistAssignments();
-      renderPeopleList();
-      requestDraw();
-    });
-    orgChartEl.addEventListener("click", (event) => {
-      const item = event.target.closest(".org-person[data-person-id]");
-      if (!item) return;
-      const personId = item.getAttribute("data-person-id");
-      activePersonId = personId === activePersonId ? null : personId;
-      persistActivePerson();
-      renderPeopleList();
-      requestDraw();
-    });
-    window.addEventListener("resize", resize);
-    renderPeopleList();
-    resize();
-  </script>
-</body>
-</html>
-

img/location_photo/기술개발센터/팀자리/center_chair_people_map_7f.html

@@ -1,932 +0,0 @@
-<!DOCTYPE html>
-<html lang="ko">
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>center chair people map 7f</title>
-  <style>
-    :root {
-      --ink: #152330;
-      --muted: #627286;
-      --paper: rgba(255,255,255,0.86);
-      --line: rgba(21,35,48,0.1);
-      --accent: #0f766e;
-      --bg: #edf2f6;
-    }
-    * { box-sizing: border-box; }
-    body {
-      margin: 0;
-      font-family: "IBM Plex Sans KR", "Pretendard", sans-serif;
-      color: var(--ink);
-      background:
-        radial-gradient(circle at top left, rgba(15,118,110,0.11), transparent 22%),
-        linear-gradient(180deg, #f5f8fb 0%, #e8eef3 100%);
-    }
-    .page {
-      min-height: 100vh;
-      padding: 0;
-    }
-    .shell {
-      min-height: 100vh;
-    }
-    .panel {
-      border-radius: 0;
-      border: none;
-      background: transparent;
-      backdrop-filter: none;
-      box-shadow: none;
-    }
-    .actions {
-      display: flex;
-      gap: 8px;
-      flex-wrap: wrap;
-    }
-    button {
-      border: none;
-      border-radius: 999px;
-      padding: 10px 14px;
-      font: inherit;
-      font-weight: 700;
-      cursor: pointer;
-      color: white;
-      background: linear-gradient(135deg, #0f766e, #115e59);
-      box-shadow: 0 10px 22px rgba(15,118,110,0.18);
-    }
-    button.alt {
-      color: var(--ink);
-      background: rgba(255,255,255,0.9);
-      border: 1px solid var(--line);
-      box-shadow: none;
-    }
-    .viewer {
-      position: relative;
-      overflow: hidden;
-      min-height: 100vh;
-    }
-    .viewer-head {
-      position: absolute;
-      top: 16px;
-      left: 16px;
-      right: 16px;
-      z-index: 2;
-      display: flex;
-      justify-content: space-between;
-      gap: 12px;
-      pointer-events: none;
-    }
-    .chip {
-      padding: 10px 12px;
-      border-radius: 16px;
-      background: rgba(255,255,255,0.82);
-      border: 1px solid rgba(255,255,255,0.94);
-      color: var(--muted);
-      font-size: 13px;
-      font-weight: 700;
-      box-shadow: 0 8px 24px rgba(21,35,48,0.08);
-    }
-    .viewer-actions {
-      position: absolute;
-      left: 16px;
-      top: 64px;
-      z-index: 2;
-      display: flex;
-      gap: 8px;
-    }
-    .mapper {
-      position: absolute;
-      top: 76px;
-      left: 50%;
-      transform: translateX(-50%);
-      width: min(94vw, 1320px);
-      max-height: min(56vh, 560px);
-      overflow: hidden;
-      z-index: 4;
-      border-radius: 20px;
-      background: rgba(234, 239, 247, 0.95);
-      border: 1px solid rgba(101, 119, 146, 0.22);
-      box-shadow: 0 18px 36px rgba(15, 23, 42, 0.2);
-      display: flex;
-      flex-direction: column;
-      backdrop-filter: blur(6px);
-    }
-    .hidden-off {
-      display: none !important;
-    }
-    .mapper-head {
-      padding: 10px 14px;
-      border-bottom: 1px solid rgba(101,119,146,0.18);
-      font-size: 12px;
-      color: #51607a;
-      font-weight: 700;
-      line-height: 1.35;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      gap: 10px;
-      background: rgba(255,255,255,0.6);
-    }
-    .mapper-head strong {
-      display: block;
-      color: #17243b;
-      font-size: 20px;
-      margin-bottom: 2px;
-    }
-    .mapper-head .alt {
-      padding: 8px 10px;
-      font-size: 12px;
-      white-space: nowrap;
-    }
-    .org-chart {
-      margin: 0;
-      padding: 14px;
-      overflow: auto;
-      display: grid;
-      gap: 12px;
-    }
-    .org-top {
-      margin: 0 auto;
-      width: min(100%, 420px);
-      border-radius: 14px;
-      overflow: hidden;
-      border: 1px solid rgba(67, 84, 118, 0.25);
-      background: #fff;
-    }
-    .org-top-title {
-      background: #1e2f4d;
-      color: #fff;
-      text-align: center;
-      font-size: 34px;
-      font-weight: 800;
-      line-height: 1.1;
-      padding: 16px 12px;
-      letter-spacing: -0.03em;
-    }
-    .org-top-members {
-      padding: 10px;
-      display: grid;
-      gap: 6px;
-      background: rgba(255,255,255,0.95);
-    }
-    .org-teams {
-      display: grid;
-      grid-template-columns: repeat(7, minmax(160px, 1fr));
-      gap: 10px;
-      align-items: start;
-    }
-    .org-team {
-      border: 1px solid rgba(110, 126, 152, 0.25);
-      border-radius: 10px;
-      overflow: hidden;
-      background: rgba(255,255,255,0.95);
-      min-width: 0;
-    }
-    .org-team h4 {
-      margin: 0;
-      padding: 9px 10px;
-      font-size: 14px;
-      color: #21324e;
-      font-weight: 800;
-      border-bottom: 1px solid rgba(110, 126, 152, 0.2);
-      background: rgba(240, 245, 252, 0.96);
-    }
-    .org-members {
-      padding: 7px;
-      display: grid;
-      gap: 6px;
-    }
-    .org-person {
-      border: 1px solid rgba(116, 133, 161, 0.25);
-      background: rgba(255,255,255,0.95);
-      border-radius: 8px;
-      padding: 6px 8px;
-      cursor: pointer;
-      transition: background 120ms ease, border-color 120ms ease;
-      min-width: 0;
-    }
-    .org-person.active {
-      border-color: rgba(15,118,110,0.6);
-      background: rgba(15,118,110,0.11);
-    }
-    .org-person.assigned {
-      border-color: rgba(37,99,235,0.5);
-      background: rgba(37,99,235,0.1);
-    }
-    .org-person strong {
-      display: block;
-      font-size: 13px;
-      line-height: 1.3;
-      color: #15233a;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-    .org-person small {
-      display: block;
-      color: #5a6a86;
-      font-size: 11px;
-      line-height: 1.25;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-    @media (max-width: 980px) {
-      .mapper {
-        top: 72px;
-        width: min(96vw, 920px);
-        max-height: 58vh;
-      }
-      .viewer-actions {
-        top: 64px;
-        left: 12px;
-        right: 12px;
-        flex-wrap: wrap;
-      }
-      .mapper-head strong {
-        font-size: 16px;
-      }
-      .org-top-title {
-        font-size: 24px;
-      }
-      .org-teams {
-        grid-template-columns: repeat(3, minmax(150px, 1fr));
-      }
-    }
-    canvas {
-      width: 100%;
-      height: 100%;
-      display: block;
-      cursor: grab;
-    }
-    canvas.dragging { cursor: grabbing; }
-    .tooltip {
-      position: absolute;
-      min-width: 170px;
-      padding: 12px 14px;
-      border-radius: 16px;
-      background: rgba(17,24,39,0.94);
-      color: white;
-      pointer-events: none;
-      opacity: 0;
-      transform: translate(12px, 12px);
-      transition: opacity 120ms ease;
-      z-index: 3;
-    }
-    .tooltip.visible { opacity: 1; }
-    .tooltip strong { display: block; margin-bottom: 6px; font-size: 14px; }
-    .tooltip div { font-size: 12px; line-height: 1.45; color: rgba(255,255,255,0.82); }
-  </style>
-</head>
-<body>
-  <div class="page">
-    <div class="shell">
-      <main class="panel viewer">
-        <div class="viewer-head">
-          <div class="chip" id="scale-chip"></div>
-          <div class="chip" id="hover-chip">chair hover: none</div>
-        </div>
-        <div class="viewer-actions">
-          <button type="button" id="fit-btn">전체 맞춤</button>
-          <button type="button" class="alt" id="clear-btn">선택 지우기</button>
-        </div>
-        <aside class="mapper hidden-off">
-          <div class="mapper-head">
-            <div id="mapper-status">
-              <strong>조직 현황</strong>
-              <span>선택 인원 없음</span>
-            </div>
-            <button type="button" class="alt" id="clear-assign-btn">매칭 초기화</button>
-          </div>
-          <div class="org-chart" id="org-chart"></div>
-        </aside>
-        <canvas id="canvas"></canvas>
-        <div class="tooltip" id="tooltip"></div>
-      </main>
-    </div>
-  </div>
-  <script src="./center_chair_people_payload_7f.js"></script>
-  <script>
-    const DATA = window.CHAIR_MAP_DATA;
-    function decodeSegments(base64) {
-      const binary = atob(base64);
-      const bytes = new Uint8Array(binary.length);
-      for (let i = 0; i < binary.length; i += 1) bytes[i] = binary.charCodeAt(i);
-      return new Int32Array(bytes.buffer);
-    }
-    const bgTileRanges = DATA.bgTileRanges;
-    const bgSegValues = decodeSegments(DATA.bgSegsB64);
-    const chairSegValues = decodeSegments(DATA.chairSegsB64);
-    const chairs = DATA.chairs.map(([key, name, kind, start, count]) => ({
-      key, name, kind, start, count
-    }));
-    const meta = DATA.meta;
-    const world = meta.headerBounds;
-    const canvas = document.getElementById("canvas");
-    const ctx = canvas.getContext("2d");
-    const tooltip = document.getElementById("tooltip");
-    const scaleChip = document.getElementById("scale-chip");
-    const hoverChip = document.getElementById("hover-chip");
-    const STORAGE_KEY = "ptc-chair-selection";
-    const PEOPLE_STORAGE_KEY = "ptc-chair-people";
-    const ASSIGN_STORAGE_KEY = "ptc-chair-assignments";
-    const ACTIVE_PERSON_STORAGE_KEY = "ptc-chair-active-person";
-    const clearAssignBtn = document.getElementById("clear-assign-btn");
-    const orgChartEl = document.getElementById("org-chart");
-    const mapperStatus = document.getElementById("mapper-status");
-    // Prevent stale auto-highlights from previous sessions.
-    localStorage.removeItem(STORAGE_KEY);
-    localStorage.removeItem(ACTIVE_PERSON_STORAGE_KEY);
-    localStorage.removeItem(ASSIGN_STORAGE_KEY);
-    const placed = new Set();
-    let people = JSON.parse(localStorage.getItem(PEOPLE_STORAGE_KEY) || "[]");
-    let chairAssignments = {};
-    let activePersonId = null;
-    const ORG_TEMPLATE = {
-      top: {
-        name: "총괄기획실",
-        count: 53,
-        members: [
-          { name: "장종찬", dept: "총괄기획실", title: "기획실장" },
-          { name: "김원식", dept: "총괄기획실", title: "전무이사" },
-        ],
-      },
-      teams: [
-        { name: "경영기획팀", count: 6, members: ["김우진", "임민정", "국혜린", "최선아", "김윤재", "이미영"] },
-        { name: "인재성장팀", count: 5, members: ["조태희", "최근혜", "류원준", "주안기", "정성호"] },
-        { name: "ERP 기획팀", count: 5, members: ["류호성", "문형식", "최요제", "황대일", "이채봉"] },
-        { name: "디자인기획팀", count: 17, members: ["신혜영", "정은혜", "김태식", "최예은", "채선영", "최영환", "윤봄이", "이예진", "허유나", "마희연", "김수현", "박지영", "권순호", "정두휘", "김정석", "정지윤", "양숙영"] },
-        { name: "기술기획팀", count: 11, members: ["김원기", "홍아름", "이경민", "김혜인", "황동환", "최찬호", "이태훈", "김신지", "조찬영", "김용연", "한치영"] },
-        { name: "협업증진팀", count: 3, members: ["성형일", "박주한", "한승민"] },
-        { name: "솔루션통합팀", count: 4, members: ["권혁진", "염승호", "윤준수", "김지영"] },
-      ],
-    };
-    const chairGeometry = chairs.map((chair) => {
-      let minX = Infinity;
-      let minY = Infinity;
-      let maxX = -Infinity;
-      let maxY = -Infinity;
-      const path = new Path2D();
-      const hitSegments = new Float32Array(chair.count * 4);
-      let segCursor = 0;
-      for (let i = chair.start; i < chair.start + chair.count; i += 1) {
-        const offset = i * 4;
-        const x1 = chairSegValues[offset] / 10;
-        const y1 = chairSegValues[offset + 1] / 10;
-        const x2 = chairSegValues[offset + 2] / 10;
-        const y2 = chairSegValues[offset + 3] / 10;
-        path.moveTo(x1, y1);
-        path.lineTo(x2, y2);
-        hitSegments[segCursor] = x1;
-        hitSegments[segCursor + 1] = y1;
-        hitSegments[segCursor + 2] = x2;
-        hitSegments[segCursor + 3] = y2;
-        segCursor += 4;
-        minX = Math.min(minX, x1, x2);
-        minY = Math.min(minY, y1, y2);
-        maxX = Math.max(maxX, x1, x2);
-        maxY = Math.max(maxY, y1, y2);
-      }
-      return {
-        ...chair,
-        minX,
-        minY,
-        maxX,
-        maxY,
-        area: Math.max(1, (maxX - minX) * (maxY - minY)),
-        path,
-        hitSegments,
-      };
-    });
-    function renumberChairKeys(chairItems) {
-      if (!chairItems.length) return;
-      const heights = chairItems
-        .map((chair) => Math.max(1, chair.maxY - chair.minY))
-        .sort((a, b) => a - b);
-      const medianHeight = heights[Math.floor(heights.length / 2)] || 1;
-      const rowTolerance = Math.max(40, medianHeight * 0.9);
-
-      const sorted = [...chairItems].sort((a, b) => {
-        const ay = (a.minY + a.maxY) * 0.5;
-        const by = (b.minY + b.maxY) * 0.5;
-        if (Math.abs(by - ay) > rowTolerance) return by - ay; // top -> bottom
-        const ax = (a.minX + a.maxX) * 0.5;
-        const bx = (b.minX + b.maxX) * 0.5;
-        return ax - bx; // left -> right
-      });
-
-      sorted.forEach((chair, index) => {
-        chair.key = String(index + 1);
-        chair.seatNo = index + 1;
-      });
-    }
-    renumberChairKeys(chairGeometry);
-    const PICK_GRID_SIZE = 1800;
-    const chairPickGrid = new Map();
-    function pickGridKey(gx, gy) {
-      return `${gx},${gy}`;
-    }
-    chairGeometry.forEach((chair, index) => {
-      const minGX = Math.floor(chair.minX / PICK_GRID_SIZE);
-      const maxGX = Math.floor(chair.maxX / PICK_GRID_SIZE);
-      const minGY = Math.floor(chair.minY / PICK_GRID_SIZE);
-      const maxGY = Math.floor(chair.maxY / PICK_GRID_SIZE);
-      for (let gx = minGX; gx <= maxGX; gx += 1) {
-        for (let gy = minGY; gy <= maxGY; gy += 1) {
-          const key = pickGridKey(gx, gy);
-          if (!chairPickGrid.has(key)) chairPickGrid.set(key, []);
-          chairPickGrid.get(key).push(index);
-        }
-      }
-    });
-
-    const camera = { scale: 1, offsetX: 0, offsetY: 0 };
-    let pixelRatio = window.devicePixelRatio || 1;
-    let pointer = { x: 0, y: 0 };
-    let dragging = false;
-    let dragStart = null;
-    let hovered = null;
-    let rafPending = false;
-
-    function normalizePeople(raw) {
-      return raw
-        .map((person, index) => {
-          if (!person || !person.name) return null;
-          return {
-            id: person.id || `person-${index + 1}`,
-            name: String(person.name).trim(),
-            dept: String(person.dept || "").trim(),
-            title: String(person.title || "").trim(),
-          };
-        })
-        .filter(Boolean);
-    }
-
-    function createTemplatePeople() {
-      const generated = [];
-      let seq = 1;
-      ORG_TEMPLATE.top.members.forEach((member) => {
-        generated.push({
-          id: `org-${seq++}`,
-          name: member.name,
-          dept: member.dept,
-          title: member.title,
-        });
-      });
-      ORG_TEMPLATE.teams.forEach((team) => {
-        team.members.forEach((name) => {
-          generated.push({
-            id: `org-${seq++}`,
-            name,
-            dept: team.name,
-            title: "선임",
-          });
-        });
-      });
-      return generated;
-    }
-
-    people = normalizePeople(people);
-    const templateReady = people.some((person) => person.name === "장종찬" && person.dept === "총괄기획실");
-    if (!templateReady) {
-      people = createTemplatePeople();
-      localStorage.setItem(PEOPLE_STORAGE_KEY, JSON.stringify(people));
-    }
-    const chairKeySet = new Set(chairGeometry.map((chair) => chair.key));
-    chairAssignments = Object.fromEntries(
-      Object.entries(chairAssignments).filter(([chairKey, personId]) => (
-        chairKeySet.has(chairKey) && people.some((person) => person.id === personId)
-      ))
-    );
-    if (activePersonId && !people.some((person) => person.id === activePersonId)) activePersonId = null;
-
-    function persistPeople() {
-      localStorage.setItem(PEOPLE_STORAGE_KEY, JSON.stringify(people));
-    }
-
-    function persistAssignments() {
-      localStorage.setItem(ASSIGN_STORAGE_KEY, JSON.stringify(chairAssignments));
-    }
-
-    function persistActivePerson() {
-      if (!activePersonId) localStorage.removeItem(ACTIVE_PERSON_STORAGE_KEY);
-      else localStorage.setItem(ACTIVE_PERSON_STORAGE_KEY, activePersonId);
-    }
-
-    function assignmentCount() {
-      return Object.keys(chairAssignments).length;
-    }
-
-    function getPersonById(id) {
-      return people.find((person) => person.id === id) || null;
-    }
-
-    function getChairByPerson(personId) {
-      for (const [chairKey, assignedPersonId] of Object.entries(chairAssignments)) {
-        if (assignedPersonId === personId) return chairKey;
-      }
-      return null;
-    }
-
-    function renderPeopleList() {
-      const activePerson = getPersonById(activePersonId);
-      const countText = `${assignmentCount()} / ${people.length} 매칭`;
-      mapperStatus.innerHTML = `<strong>조직 현황</strong><span>${activePerson ? `${activePerson.name} 선택됨` : "선택 인원 없음"} · ${countText}</span>`;
-
-      const findPerson = (dept, name) => people.find((person) => person.dept === dept && person.name === name) || null;
-      const personCard = (person, roleText) => {
-        if (!person) return "";
-        const chairKey = getChairByPerson(person.id);
-        const assignedClass = chairKey ? " assigned" : "";
-        const activeClass = person.id === activePersonId ? " active" : "";
-        return `
-          <article class="org-person${assignedClass}${activeClass}" data-person-id="${person.id}">
-            <strong>${person.name}</strong>
-            <small>${person.title || roleText || "-"}</small>
-            <small>${chairKey ? `좌석 ${chairKey}` : "좌석 미지정"}</small>
-          </article>
-        `;
-      };
-
-      const topHtml = ORG_TEMPLATE.top.members
-        .map((member) => personCard(findPerson(member.dept, member.name), member.title))
-        .join("");
-
-      const teamsHtml = ORG_TEMPLATE.teams.map((team) => {
-        const membersHtml = team.members
-          .map((name) => personCard(findPerson(team.name, name), "선임"))
-          .join("");
-        return `
-          <section class="org-team">
-            <h4>${team.name} (${team.count})</h4>
-            <div class="org-members">${membersHtml}</div>
-          </section>
-        `;
-      }).join("");
-
-      orgChartEl.innerHTML = `
-        <section class="org-top">
-          <div class="org-top-title">${ORG_TEMPLATE.top.name} (${ORG_TEMPLATE.top.count})</div>
-          <div class="org-top-members">${topHtml}</div>
-        </section>
-        <section class="org-teams">${teamsHtml}</section>
-      `;
-    }
-
-    function worldToScreen(x, y) {
-      return {
-        x: x * camera.scale + camera.offsetX,
-        y: (world.maxY - y + world.minY) * camera.scale + camera.offsetY,
-      };
-    }
-
-    function screenToWorld(x, y) {
-      return {
-        x: (x - camera.offsetX) / camera.scale,
-        y: world.maxY + world.minY - (y - camera.offsetY) / camera.scale,
-      };
-    }
-
-    function resize() {
-      pixelRatio = window.devicePixelRatio || 1;
-      const rect = canvas.getBoundingClientRect();
-      canvas.width = Math.round(rect.width * pixelRatio);
-      canvas.height = Math.round(rect.height * pixelRatio);
-      ctx.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
-      fit();
-    }
-
-    function fit() {
-      const rect = canvas.getBoundingClientRect();
-      const width = world.maxX - world.minX;
-      const height = world.maxY - world.minY;
-      const pad = 36;
-      const scaleX = (rect.width - pad * 2) / width;
-      const scaleY = (rect.height - pad * 2) / height;
-      camera.scale = Math.min(scaleX, scaleY);
-      camera.offsetX = pad - world.minX * camera.scale + (rect.width - pad * 2 - width * camera.scale) / 2;
-      camera.offsetY = pad - world.minY * camera.scale + (rect.height - pad * 2 - height * camera.scale) / 2;
-      requestDraw();
-    }
-
-    function drawGrid(width, height) {
-      ctx.save();
-      ctx.strokeStyle = "rgba(21,35,48,0.05)";
-      ctx.lineWidth = 1;
-      for (let x = 120; x < width; x += 120) {
-        ctx.beginPath();
-        ctx.moveTo(x, 0);
-        ctx.lineTo(x, height);
-        ctx.stroke();
-      }
-      for (let y = 120; y < height; y += 120) {
-        ctx.beginPath();
-        ctx.moveTo(0, y);
-        ctx.lineTo(width, y);
-        ctx.stroke();
-      }
-      ctx.restore();
-    }
-
-    function pickChair(screenX, screenY) {
-      const threshold = 12;
-      const pointerWorld = screenToWorld(screenX, screenY);
-      const thresholdWorld = threshold / camera.scale;
-      const thresholdWorldSq = thresholdWorld * thresholdWorld;
-      const minGX = Math.floor((pointerWorld.x - thresholdWorld) / PICK_GRID_SIZE);
-      const maxGX = Math.floor((pointerWorld.x + thresholdWorld) / PICK_GRID_SIZE);
-      const minGY = Math.floor((pointerWorld.y - thresholdWorld) / PICK_GRID_SIZE);
-      const maxGY = Math.floor((pointerWorld.y + thresholdWorld) / PICK_GRID_SIZE);
-      const candidateIndexes = [];
-      const seen = new Set();
-      for (let gx = minGX; gx <= maxGX; gx += 1) {
-        for (let gy = minGY; gy <= maxGY; gy += 1) {
-          const candidates = chairPickGrid.get(pickGridKey(gx, gy));
-          if (!candidates) continue;
-          for (const index of candidates) {
-            if (seen.has(index)) continue;
-            seen.add(index);
-            candidateIndexes.push(index);
-          }
-        }
-      }
-      let best = null;
-      for (const index of candidateIndexes) {
-        const chair = chairGeometry[index];
-        if (
-          pointerWorld.x < chair.minX - thresholdWorld ||
-          pointerWorld.x > chair.maxX + thresholdWorld ||
-          pointerWorld.y < chair.minY - thresholdWorld ||
-          pointerWorld.y > chair.maxY + thresholdWorld
-        ) continue;
-        let distSq = Infinity;
-        for (let i = 0; i < chair.hitSegments.length; i += 4) {
-          const x1 = chair.hitSegments[i];
-          const y1 = chair.hitSegments[i + 1];
-          const x2 = chair.hitSegments[i + 2];
-          const y2 = chair.hitSegments[i + 3];
-          const dx = x2 - x1;
-          const dy = y2 - y1;
-          const len2 = dx * dx + dy * dy;
-          let segDistSq;
-          if (len2 === 0) {
-            const px = pointerWorld.x - x1;
-            const py = pointerWorld.y - y1;
-            segDistSq = px * px + py * py;
-          } else {
-            let t = ((pointerWorld.x - x1) * dx + (pointerWorld.y - y1) * dy) / len2;
-            t = Math.max(0, Math.min(1, t));
-            const lx = x1 + t * dx;
-            const ly = y1 + t * dy;
-            const px = pointerWorld.x - lx;
-            const py = pointerWorld.y - ly;
-            segDistSq = px * px + py * py;
-          }
-          if (segDistSq < distSq) distSq = segDistSq;
-          if (distSq <= thresholdWorldSq * 0.3) break;
-        }
-        if (distSq > thresholdWorldSq) continue;
-        const dist = Math.sqrt(distSq) * camera.scale;
-
-        if (!best) {
-          best = { chair, dist };
-          continue;
-        }
-
-        const distGap = dist - best.dist;
-        if (distGap < -0.75) {
-          best = { chair, dist };
-          continue;
-        }
-
-        if (Math.abs(distGap) <= 2) {
-          const areaGap = chair.area - best.chair.area;
-          if (areaGap < -1) {
-            best = { chair, dist };
-            continue;
-          }
-
-          if (
-            Math.abs(areaGap) <= 1 &&
-            chair.kind === "block" &&
-            best.chair.kind !== "block"
-          ) {
-            best = { chair, dist };
-          }
-        }
-      }
-
-      return best ? best.chair : null;
-    }
-
-    function renderTooltip() {
-      if (!hovered) {
-        tooltip.classList.remove("visible");
-        hoverChip.textContent = "chair hover: none";
-        return;
-      }
-      hoverChip.textContent = `chair hover: ${hovered.name}`;
-      tooltip.innerHTML = `
-        <strong>${hovered.name}</strong>
-        <div>chair key: ${hovered.key}</div>
-        <div>${placed.has(hovered.key) ? "선택됨" : "클릭하면 선택"}</div>
-        <div>${chairAssignments[hovered.key] ? `배치: ${(getPersonById(chairAssignments[hovered.key]) || { name: "알수없음" }).name}` : "배치 인원 없음"}</div>
-      `;
-      tooltip.style.left = `${pointer.x + 14}px`;
-      tooltip.style.top = `${pointer.y + 14}px`;
-      tooltip.classList.add("visible");
-    }
-
-    function requestDraw() {
-      if (rafPending) return;
-      rafPending = true;
-      window.requestAnimationFrame(() => {
-        rafPending = false;
-        draw();
-      });
-    }
-
-    function applyWorldTransform() {
-      ctx.setTransform(
-        pixelRatio * camera.scale,
-        0,
-        0,
-        -pixelRatio * camera.scale,
-        pixelRatio * camera.offsetX,
-        pixelRatio * ((world.maxY + world.minY) * camera.scale + camera.offsetY)
-      );
-    }
-
-    function draw() {
-      const rect = canvas.getBoundingClientRect();
-      ctx.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
-      ctx.clearRect(0, 0, rect.width, rect.height);
-      drawGrid(rect.width, rect.height);
-      const viewA = screenToWorld(0, rect.height);
-      const viewB = screenToWorld(rect.width, 0);
-      const viewMinX = Math.min(viewA.x, viewB.x);
-      const viewMaxX = Math.max(viewA.x, viewB.x);
-      const viewMinY = Math.min(viewA.y, viewB.y);
-      const viewMaxY = Math.max(viewA.y, viewB.y);
-
-      ctx.save();
-      applyWorldTransform();
-      ctx.strokeStyle = "rgba(100, 116, 139, 0.28)";
-      ctx.lineWidth = 1 / camera.scale;
-      const tileSize = meta.backgroundTileSize;
-      const tileMinX = Math.floor(viewMinX / tileSize);
-      const tileMaxX = Math.floor(viewMaxX / tileSize);
-      const tileMinY = Math.floor(viewMinY / tileSize);
-      const tileMaxY = Math.floor(viewMaxY / tileSize);
-      for (let tx = tileMinX; tx <= tileMaxX; tx += 1) {
-        for (let ty = tileMinY; ty <= tileMaxY; ty += 1) {
-          const range = bgTileRanges[`${tx},${ty}`];
-          if (!range) continue;
-          const start = range[0];
-          const count = range[1];
-          for (let i = start; i < start + count; i += 1) {
-            const offset = i * 4;
-            const x1 = bgSegValues[offset] / 10;
-            const y1 = bgSegValues[offset + 1] / 10;
-            const x2 = bgSegValues[offset + 2] / 10;
-            const y2 = bgSegValues[offset + 3] / 10;
-            if (
-              Math.max(x1, x2) < viewMinX ||
-              Math.min(x1, x2) > viewMaxX ||
-              Math.max(y1, y2) < viewMinY ||
-              Math.min(y1, y2) > viewMaxY
-            ) continue;
-            ctx.beginPath();
-            ctx.moveTo(x1, y1);
-            ctx.lineTo(x2, y2);
-            ctx.stroke();
-          }
-        }
-      }
-      ctx.restore();
-
-      hovered = dragging ? null : pickChair(pointer.x, pointer.y);
-
-      ctx.save();
-      applyWorldTransform();
-      ctx.lineWidth = 1.45 / camera.scale;
-      ctx.lineCap = "round";
-      ctx.lineJoin = "round";
-      for (const chair of chairGeometry) {
-        if (chair.maxX < viewMinX || chair.minX > viewMaxX || chair.maxY < viewMinY || chair.minY > viewMaxY) continue;
-        const active = hovered && hovered.key === chair.key;
-        const selected = placed.has(chair.key);
-        const assignedPersonId = chairAssignments[chair.key];
-        const activePersonChair = activePersonId && assignedPersonId === activePersonId;
-        const assigned = Boolean(assignedPersonId);
-        const baseWidth = chair.kind === "block" ? 1.45 : 1.35;
-        ctx.strokeStyle = activePersonChair
-          ? "rgba(234, 179, 8, 1)"
-          : assigned
-            ? "rgba(37, 99, 235, 0.98)"
-            : selected
-              ? "rgba(220, 38, 38, 0.98)"
-              : active
-                ? "rgba(15, 118, 110, 0.98)"
-                : chair.kind === "group"
-                  ? "rgba(16, 134, 149, 0.74)"
-                  : "rgba(21, 149, 142, 0.8)";
-        ctx.lineWidth = (activePersonChair ? 2.8 : assigned ? 2.4 : selected ? 2.6 : active ? 2.1 : baseWidth) / camera.scale;
-        ctx.stroke(chair.path);
-      }
-      ctx.restore();
-
-      scaleChip.textContent = `scale ${camera.scale.toFixed(4)}x`;
-      renderTooltip();
-    }
-
-    function persistPlaced() {
-      localStorage.setItem(STORAGE_KEY, JSON.stringify([...placed]));
-    }
-
-    canvas.addEventListener("pointerdown", (event) => {
-      dragging = true;
-      dragStart = { x: event.clientX, y: event.clientY, offsetX: camera.offsetX, offsetY: camera.offsetY };
-      canvas.classList.add("dragging");
-    });
-
-    window.addEventListener("pointerup", (event) => {
-      if (dragging && dragStart) {
-        const move = Math.hypot(event.clientX - dragStart.x, event.clientY - dragStart.y);
-        if (move < 4) {
-          const rect = canvas.getBoundingClientRect();
-          const picked = pickChair(event.clientX - rect.left, event.clientY - rect.top);
-          if (picked) {
-            if (placed.has(picked.key)) placed.delete(picked.key);
-            else placed.add(picked.key);
-            persistPlaced();
-            if (activePersonId) {
-              const currentChair = getChairByPerson(activePersonId);
-              if (chairAssignments[picked.key] === activePersonId) {
-                delete chairAssignments[picked.key];
-              } else {
-                if (currentChair && currentChair !== picked.key) delete chairAssignments[currentChair];
-                chairAssignments[picked.key] = activePersonId;
-              }
-              persistAssignments();
-              renderPeopleList();
-            }
-          }
-        }
-      }
-      dragging = false;
-      dragStart = null;
-      canvas.classList.remove("dragging");
-      requestDraw();
-    });
-
-    window.addEventListener("pointermove", (event) => {
-      const rect = canvas.getBoundingClientRect();
-      pointer = { x: event.clientX - rect.left, y: event.clientY - rect.top };
-      if (dragging && dragStart) {
-        camera.offsetX = dragStart.offsetX + (event.clientX - dragStart.x);
-        camera.offsetY = dragStart.offsetY + (event.clientY - dragStart.y);
-      }
-      requestDraw();
-    });
-
-    canvas.addEventListener("wheel", (event) => {
-      event.preventDefault();
-      const rect = canvas.getBoundingClientRect();
-      const mx = event.clientX - rect.left;
-      const my = event.clientY - rect.top;
-      const before = screenToWorld(mx, my);
-      const factor = event.deltaY < 0 ? 1.08 : 0.92;
-      camera.scale = Math.max(0.002, Math.min(2, camera.scale * factor));
-      const after = worldToScreen(before.x, before.y);
-      camera.offsetX += mx - after.x;
-      camera.offsetY += my - after.y;
-      requestDraw();
-    }, { passive: false });
-
-    document.getElementById("fit-btn").addEventListener("click", fit);
-    document.getElementById("clear-btn").addEventListener("click", () => {
-      placed.clear();
-      persistPlaced();
-      requestDraw();
-    });
-    clearAssignBtn.addEventListener("click", () => {
-      chairAssignments = {};
-      persistAssignments();
-      renderPeopleList();
-      requestDraw();
-    });
-    orgChartEl.addEventListener("click", (event) => {
-      const item = event.target.closest(".org-person[data-person-id]");
-      if (!item) return;
-      const personId = item.getAttribute("data-person-id");
-      activePersonId = personId === activePersonId ? null : personId;
-      persistActivePerson();
-      renderPeopleList();
-      requestDraw();
-    });
-    window.addEventListener("resize", resize);
-    renderPeopleList();
-    resize();
-  </script>
-</body>
-</html>
-

index.html

@@ -5,7 +5,7 @@
   <meta charset="UTF-8" />
   <link rel="icon" type="image/svg+xml" href="/vite.svg" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>한맥가족 자산관리시스템</title>
+  <title>ITAM 자산관리 ERP</title>
   <link rel="stylesheet"
     href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css" />
   <link rel="stylesheet" href="/src/styles/common.css" />
@@ -25,7 +25,7 @@
       <div class="header-container" id="nav-container">
         <div class="brand">
           <img src="/image 92.png" alt="Logo" class="main-logo" />
-          <h1>한맥자산관리시스템</h1>
+          <h1>자산관리시스템<span class="sub-title">(Digital Asset Control Hub System)</span></h1>
         </div>
 
         <!-- Navigation (GNB + LNB in same row) -->
@@ -57,7 +57,8 @@
 
     <!-- Footer -->
     <footer class="main-footer">
-      <p>&copy; 2026 BARON Consultant Co,Ltd. All rights reserved.</p>
+      <div id="secret-cloud-trigger" style="width: 20px; height: 20px; cursor: pointer; opacity: 0.1; background: #000; border-radius: 4px; position: absolute; left: 1rem;"></div>
+      <p>Powered by BARON Consultant Co,Ltd</p>
     </footer>
   </div>
 

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);

scratch/calculate_job_averages.js

@@ -0,0 +1,163 @@
+import * as fs from 'fs';
+
+// dummyData.ts를 읽어와서 dummyPCs 파싱
+const content = fs.readFileSync('c:/Project/HM ITAM/src/core/dummyData.ts', 'utf-8');
+
+// export const dummyPCs: any[] = [ ... ]; 패턴 추출
+const match = content.match(/export const dummyPCs: any\[\] = (\[[\s\S]*?\]);/);
+if (!match) {
+  console.error('Failed to parse dummyPCs from dummyData.ts');
+  process.exit(1);
+}
+
+const dummyPCs = JSON.parse(match[1]);
+
+function calculatePcScoreDeductive(cpu, ram, gpu, purchaseDate) {
+  let score = 100;
+  
+  // 1. CPU 등급 감점
+  const cpuUpper = (cpu || '').toUpperCase();
+  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 세대 감점
+  let genDeduction = 0;
+  let 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);
+  }
+  
+  let 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 용량 감점
+  const ramUpper = (ram || '').toUpperCase();
+  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 성능 감점
+  const gpuUpper = (gpu || '').toUpperCase();
+  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 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. 연식(노후도) 감점
+  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())) {
+      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);
+}
+
+const jobScores = {};
+let totalPcs = 0;
+
+const filteredPCs = dummyPCs.filter(pc => pc.user_position !== '재고PC');
+
+filteredPCs.forEach(pc => {
+  const job = pc.user_position || '미분류';
+  const score = calculatePcScoreDeductive(pc.cpu, pc.ram, pc.gpu, pc.purchase_date);
+  
+  if (!jobScores[job]) {
+    jobScores[job] = { total: 0, count: 0 };
+  }
+  jobScores[job].total += score;
+  jobScores[job].count += 1;
+  totalPcs++;
+});
+
+console.log('--- Job Averages (Deductive 100-point) ---');
+const sortedJobs = Object.keys(jobScores).map(job => {
+  const avg = jobScores[job].total / jobScores[job].count;
+  return {
+    job,
+    avg: parseFloat(avg.toFixed(1)),
+    count: jobScores[job].count
+  };
+}).sort((a, b) => b.avg - a.avg);
+
+sortedJobs.forEach((item, index) => {
+  console.log(`${index + 1}. ${item.job}: Avg=${item.avg}점, Count=${item.count}대`);
+});
+
+console.log('Total PCs (excluding Stock):', totalPcs);

scratch/fix_dates_by_spec.js

@@ -1,118 +0,0 @@
-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'),
-});
-
-// 하드웨어 출시 연도 데이터베이스 (CPU/GPU)
-const RELEASE_DATES = {
-  // Intel CPU Generations (Mainstream desktop release month/year)
-  'i9-14': '2023-10', 'i7-14': '2023-10', 'i5-14': '2023-10',
-  'i9-13': '2022-10', 'i7-13': '2022-10', 'i5-13': '2022-10',
-  'i9-12': '2021-11', 'i7-12': '2021-11', 'i5-12': '2021-11',
-  'i9-11': '2021-03', 'i7-11': '2021-03', 'i5-11': '2021-03',
-  'i9-10': '2020-05', 'i7-10': '2020-05', 'i5-10': '2020-05',
-  'i9-9': '2018-10',  'i7-9': '2018-10',  'i5-9': '2018-10',
-  'i7-8': '2017-10',  'i5-8': '2017-10',
-  'i7-7': '2017-01',  'i5-7': '2017-01',
-  'i7-6': '2015-08',  'i5-6': '2015-08',
-  'i7-4': '2013-06',  'i5-4': '2013-06',
-  'i7-3': '2012-04',  'i5-3': '2012-04',
-  'i7-2': '2011-01',  'i5-2': '2011-01',
-
-  // NVIDIA GPU Series
-  'RTX 4090': '2022-10', 'RTX 4080': '2022-11', 'RTX 4070': '2023-04', 'RTX 4060': '2023-06',
-  'RTX 3090': '2020-09', 'RTX 3080': '2020-09', 'RTX 3070': '2020-10', 'RTX 3060': '2021-02',
-  'RTX 2080': '2018-09', 'RTX 2070': '2018-10', 'RTX 2060': '2019-01',
-  'GTX 1660': '2019-03', 'GTX 1650': '2019-04',
-  'GTX 1080': '2016-05', 'GTX 1070': '2016-06', 'GTX 1060': '2016-07', 'GTX 1050': '2016-10',
-  'GTX 980': '2014-09',  'GTX 970': '2014-09',  'GTX 960': '2015-01'
-};
-
-function inferDateFromSpecs(cpu, gpu) {
-  const cpuStr = (cpu || '').toUpperCase();
-  const gpuStr = (gpu || '').toUpperCase();
-
-  let inferred = null;
-
-  // 1. GPU 기준 (최신 그래픽카드가 꽂혀있으면 그 시기 이후 구매일 확률이 높음)
-  for (const [key, date] of Object.entries(RELEASE_DATES)) {
-    if (gpuStr.includes(key)) {
-      inferred = date;
-      break; 
-    }
-  }
-
-  // 2. CPU 기준 (GPU에서 못 찾았거나, CPU가 더 최신일 경우)
-  if (!inferred) {
-    for (const [key, date] of Object.entries(RELEASE_DATES)) {
-      // i7-13700 등을 찾기 위해 정규식 또는 포함 여부 확인
-      if (cpuStr.includes(key)) {
-        inferred = date;
-        break;
-      }
-    }
-  }
-
-  return inferred ? `${inferred}-01` : null;
-}
-
-async function run() {
-  const connection = await pool.getConnection();
-  try {
-    const [rows] = await connection.query(`
-      SELECT c.id, c.asset_code, c.purchase_date, s.cpu, s.gpu 
-      FROM asset_core c
-      LEFT JOIN asset_spec s ON c.id = s.asset_id
-    `);
-    
-    const updates = [];
-    const unchanged = [];
-
-    for (const row of rows) {
-      const currentVal = (row.purchase_date || '').trim();
-      
-      // 구매일자가 없거나 부정확한 경우만 처리
-      if (!currentVal || currentVal === '-' || currentVal === 'undefined' || currentVal.startsWith('2024-01-01')) {
-        const specDate = inferDateFromSpecs(row.cpu, row.gpu);
-        
-        if (specDate) {
-          updates.push({ id: row.id, date: specDate, code: row.asset_code, cpu: row.cpu, gpu: row.gpu });
-        } else {
-          unchanged.push({ code: row.asset_code, cpu: row.cpu, gpu: row.gpu });
-        }
-      }
-    }
-
-    console.log(`🚀 스펙 분석 결과: ${updates.length}건의 자산 구매일자를 보정합니다.`);
-    
-    for (const item of updates) {
-      await connection.query('UPDATE asset_core SET purchase_date = ? WHERE id = ?', [item.date, item.id]);
-      console.log(`[Update] ${item.code.padEnd(15)} | CPU: ${String(item.cpu).padEnd(20)} | GPU: ${String(item.gpu).padEnd(15)} -> ${item.date}`);
-    }
-
-    if (unchanged.length > 0) {
-      console.log('\n⚠️ 스펙 정보를 찾을 수 없어 보정하지 못한 자산:');
-      unchanged.forEach(u => {
-        if (u.code) console.log(`[Skip] ${u.code.padEnd(15)} | CPU: ${u.cpu || '-'} | GPU: ${u.gpu || '-'}`);
-      });
-    }
-
-    console.log(`\n✅ 완료: ${updates.length}건 보정됨.`);
-
-  } catch (err) {
-    console.error('Error:', err);
-  } finally {
-    connection.release();
-    pool.end();
-  }
-}
-
-run();

scratch/fix_dates_strict.js

@@ -1,128 +0,0 @@
-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'),
-});
-
-// 하드웨어 출시 연도/월 데이터베이스
-const RELEASE_DATES = {
-  // Intel CPU
-  'i9-14': '2023-10', 'i7-14': '2023-10', 'i5-14': '2023-10',
-  'i9-13': '2022-10', 'i7-13': '2022-10', 'i5-13': '2022-10',
-  'i9-12': '2021-11', 'i7-12': '2021-11', 'i5-12': '2021-11',
-  'i9-11': '2021-03', 'i7-11': '2021-03', 'i5-11': '2021-03',
-  'i9-10': '2020-05', 'i7-10': '2020-05', 'i5-10': '2020-05',
-  'i9-9': '2018-10',  'i7-9': '2018-10',  'i5-9': '2018-10',
-  'i7-8': '2017-10',  'i5-8': '2017-10',
-  'i7-7': '2017-01',  'i5-7': '2017-01',
-  'i7-6': '2015-08',  'i5-6': '2015-08',
-  'i7-5': '2014-06',  'i5-5': '2015-06', // Broadwell
-  'i7-4': '2013-06',  'i5-4': '2013-06',
-  'i7-3': '2012-04',  'i5-3': '2012-04',
-  'i7-2': '2011-01',  'i5-2': '2011-01',
-
-  // NVIDIA GPU
-  'RTX 40': '2022-10',
-  'RTX 30': '2020-09',
-  'RTX 20': '2018-09',
-  'GTX 16': '2019-02',
-  'GTX 10': '2016-05',
-  'GTX 9': '2014-09',
-  'GTX 750': '2014-02',
-  'GTX 7': '2013-05',
-  'GTX 6': '2012-03'
-};
-
-// 출시 연도만 있는 경우 (지시에 따라 후속년도 12월 적용을 위함)
-const YEAR_ONLY = {
-  'I5-4': 2013,
-  'I5-6': 2015,
-  'I7-7': 2017,
-  'GTX 750': 2014
-};
-
-function inferDateFromSpecs(cpu, gpu) {
-  const cpuStr = (cpu || '').toUpperCase();
-  const gpuStr = (gpu || '').toUpperCase();
-
-  let latestYear = 0;
-  let latestMonth = 0;
-
-  // 모든 매핑 데이터를 순회하며 가장 최신 날짜를 찾음
-  for (const [key, dateStr] of Object.entries(RELEASE_DATES)) {
-    if (cpuStr.includes(key) || gpuStr.includes(key)) {
-      const [y, m] = dateStr.split('-').map(Number);
-      if (y > latestYear || (y === latestYear && m > latestMonth)) {
-        latestYear = y;
-        latestMonth = m;
-      }
-    }
-  }
-
-  // 매칭된 정보가 있는 경우
-  if (latestYear > 0) {
-    // 월 정보가 명확히 매핑된 경우 (RELEASE_DATES 사용)
-    // 하지만 지시사항에 따라 "월을 못찾으면 12월" & "후속년도" 규칙 적용 여부 판단
-    // RELEASE_DATES는 월이 이미 있으므로 그대로 사용하되, 
-    // 만약 YEAR_ONLY에만 걸리는 경우를 위해 로직 보강
-    return `${latestYear}-${String(latestMonth).padStart(2, '0')}-01`;
-  }
-
-  // 연도만 매칭되는 경우 (지시사항: 후속년도 12월)
-  for (const [key, year] of Object.entries(YEAR_ONLY)) {
-    if (cpuStr.includes(key) || gpuStr.includes(key)) {
-      return `${year + 1}-12-01`;
-    }
-  }
-
-  return null;
-}
-
-async function run() {
-  const connection = await pool.getConnection();
-  try {
-    const [rows] = await connection.query(`
-      SELECT c.id, c.asset_code, c.purchase_date, s.cpu, s.gpu 
-      FROM asset_core c
-      LEFT JOIN asset_spec s ON c.id = s.asset_id
-    `);
-    
-    const updates = [];
-
-    for (const row of rows) {
-      const currentVal = (row.purchase_date || '').trim();
-      
-      // 구매일자가 없거나 '-', 'undefined'인 경우 + 혹은 아직 보정이 필요한 자산
-      if (!currentVal || currentVal === '-' || currentVal === 'undefined' || currentVal.startsWith('0000') || currentVal === '2024-01-01') {
-        const specDate = inferDateFromSpecs(row.cpu, row.gpu);
-        if (specDate) {
-          updates.push({ id: row.id, date: specDate, code: row.asset_code, cpu: row.cpu, gpu: row.gpu });
-        }
-      }
-    }
-
-    console.log(`🚀 지시사항 반영: ${updates.length}건의 자산을 보정합니다. (후속년도/12월 규칙 적용)`);
-    
-    for (const item of updates) {
-      await connection.query('UPDATE asset_core SET purchase_date = ? WHERE id = ?', [item.date, item.id]);
-      console.log(`[Update] ${item.code.padEnd(15)} | CPU: ${String(item.cpu).padEnd(20)} | GPU: ${String(item.gpu).padEnd(15)} -> ${item.date}`);
-    }
-
-    console.log(`\n✅ 완료: ${updates.length}건 보정됨.`);
-
-  } catch (err) {
-    console.error('Error:', err);
-  } finally {
-    connection.release();
-    pool.end();
-  }
-}
-
-run();

scratch/fix_purchase_dates.js

@@ -1,88 +0,0 @@
-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 run() {
-  const connection = await pool.getConnection();
-  try {
-    // 먼저 잘못 들어간 0000-00-01 등 복구
-    console.log('잘못된 형식(0000-00-01 등)을 초기화합니다...');
-    await connection.query("UPDATE asset_core SET purchase_date = '-' WHERE purchase_date LIKE '0000%' OR purchase_date = '2020-01-01'");
-
-    const [rows] = await connection.query('SELECT id, asset_code, purchase_date, category FROM asset_core');
-    
-    const updates = [];
-    const missing = [];
-
-    for (const row of rows) {
-      const code = (row.asset_code || '').trim();
-      const currentVal = (row.purchase_date || '').trim();
-
-      // 구매일자가 없거나 '-', 'undefined' 인 경우 대상
-      if (!currentVal || currentVal === '-' || currentVal === 'undefined') {
-        let inferredDate = null;
-
-        // 1. PREFIX-YYYYMM-NNNN 형식 (예: PC-202406-0001)
-        const match6 = code.match(/[A-Z]+-(\d{4})(0[1-9]|1[0-2])-\d+/);
-        if (match6) {
-          inferredDate = `${match6[1]}-${match6[2]}-01`;
-        } else {
-          // 2. PREFIX-YYYYNN 형식 (예: PC-202423) -> 연도만 있고 뒤에 순번 2자리
-          const matchYearSeq = code.match(/[A-Z]+-(20\d{2})(\d{2})$/);
-          if (matchYearSeq) {
-             inferredDate = `${matchYearSeq[1]}-01-01`; // 월을 모르므로 1월로 통일
-          } else {
-            // 3. PREFIX-YYNNN 형식 (예: PC-24001)
-            const matchShort = code.match(/[A-Z]+-(1\d|2\d)(\d{3})/);
-            if (matchShort) {
-              inferredDate = `20${matchShort[1]}-01-01`;
-            }
-          }
-        }
-
-        // 0000 등의 잘못된 매칭 방지
-        if (inferredDate && !inferredDate.startsWith('0000')) {
-          updates.push({ id: row.id, date: inferredDate, code: code });
-        } else {
-          missing.push({ id: row.id, code: code, category: row.category });
-        }
-      }
-    }
-
-    console.log(`총 ${updates.length}건의 자산을 업데이트합니다.`);
-    for (const item of updates) {
-      await connection.query('UPDATE asset_core SET purchase_date = ? WHERE id = ?', [item.date, item.id]);
-      console.log(`[Update] ${item.code} -> ${item.date}`);
-    }
-
-    console.log('\n--- 구매일자를 추정할 수 없는 자산 목록 ---');
-    if (missing.length === 0) {
-      console.log('없음');
-    } else {
-      // 중복 제거 및 정렬하여 보고
-      const uniqueMissing = missing.filter(m => m.code !== '');
-      uniqueMissing.forEach(m => {
-        console.log(`[Missing] 코드: ${m.code.padEnd(20)} | 카테고리: ${m.category}`);
-      });
-    }
-
-    console.log(`\n완료: ${updates.length}건 업데이트됨, ${missing.length}건 미결정.`);
-
-  } catch (err) {
-    console.error('Error:', err);
-  } finally {
-    connection.release();
-    pool.end();
-  }
-}
-
-run();

scratch/parse_excel.js

@@ -0,0 +1,30 @@
+import pkg from 'xlsx';
+const { readFile, utils } = pkg;
+
+try {
+  const workbook = readFile('c:/Project/HM ITAM/SampleData_PC.xlsx');
+  const sheet = workbook.Sheets[workbook.SheetNames[0]];
+  const rawRows = utils.sheet_to_json(sheet, { header: 1 });
+  
+  const corps = new Set();
+  
+  // 첫 번째 행(헤더) 제외하고 C열(인덱스 2) 데이터 추출
+  rawRows.slice(1).forEach(row => {
+    if (row[2] !== undefined && row[2] !== null) {
+      corps.add(String(row[2]).trim());
+    }
+  });
+  
+  const jobs = new Map();
+  rawRows.slice(1).forEach(row => {
+    const job = String(row[3] || '').trim();
+    jobs.set(job, (jobs.get(job) || 0) + 1);
+  });
+
+  console.log('--- Unique Jobs in D column ---');
+  Array.from(jobs.entries()).forEach(([key, val]) => {
+    console.log(`${key}: ${val}대`);
+  });
+} catch (e) {
+  console.error(e);
+}

scratch/parse_svr_excel.js

@@ -0,0 +1,27 @@
+import pkg from 'xlsx';
+const { readFile, utils } = pkg;
+
+try {
+  const workbook = readFile('c:/Project/HM ITAM/SampleData_SVR.xlsx');
+  
+  for (const sheetName of workbook.SheetNames) {
+    console.log(`\n================= Sheet: ${sheetName} =================`);
+    const sheet = workbook.Sheets[sheetName];
+    const rawRows = utils.sheet_to_json(sheet, { header: 1 });
+    const validRows = rawRows.filter(row => {
+      return row.some(val => val !== undefined && val !== null && String(val).trim() !== '');
+    });
+    
+    const header = validRows[0];
+    const assetNameIdx = header.indexOf('자산명');
+    const typeIdx = header.indexOf('유형');
+    const detailIdx = header.indexOf('상세');
+    const teamIdx = header.indexOf('팀명');
+    
+    validRows.slice(1).forEach((row, idx) => {
+      console.log(`[${idx + 1}] 팀명: ${row[teamIdx]} | 자산명: ${row[assetNameIdx]} | 유형: ${row[typeIdx]} | 상세: ${row[detailIdx]}`);
+    });
+  }
+} catch (e) {
+  console.error(e);
+}

scratch/update_dummy_pcs.js

@@ -0,0 +1,447 @@
+import pkg from 'xlsx';
+import * as fs from 'fs';
+import * as path from 'path';
+
+const { readFile, utils } = pkg;
+
+// 임시 ID 생성 및 도우미 함수
+const randomId = () => Math.random().toString(36).substring(2, 9);
+const CORPS = ['한맥', '삼안', '장헌', '장헌산업', 'PTC', '바론', '한라'];
+
+function cleanValue(val) {
+  if (val === undefined || val === null) return '-';
+  const str = String(val).trim();
+  return str === '' ? '-' : str;
+}
+
+try {
+  const workbook = readFile('c:/Project/HM ITAM/SampleData_PC.xlsx');
+  const sheet = workbook.Sheets[workbook.SheetNames[0]];
+  
+  // header: 1로 읽어 2차원 배열을 획득
+  const rawRows = utils.sheet_to_json(sheet, { header: 1 });
+  
+  // 첫 번째 행은 헤더이므로 제외
+  const dataRows = rawRows.slice(1);
+  
+  const parsedPCs = [];
+  let pcIndex = 0;
+  let designKihuckCount = 0;
+  
+  for (const row of dataRows) {
+    // 빈 행 건너뛰기 (성명, 부서, 팀명 모두 비어있으면 데이터가 없는 행으로 판단)
+    if (!row[0] && !row[1] && !row[2] && !row[3] && !row[4]) {
+      continue;
+    }
+    
+    const deptRaw = cleanValue(row[0]);
+    const teamRaw = cleanValue(row[1]);
+    const corpRaw = cleanValue(row[2]); // C열: 소속 (NEW)
+    const jobRaw = cleanValue(row[3]);  // D열: 직무 (밀림)
+    const nameRaw = cleanValue(row[4]); // E열: 성명 (밀림)
+    
+    // 특정 사용자 제외 필터
+    if (nameRaw === '한치영' || nameRaw === '공용') {
+      continue;
+    }
+    
+    const posRaw = cleanValue(row[5]);  // F열: 직급 (밀림)
+    const mainboardRaw = cleanValue(row[6]); // G열: 메인보드 (밀림)
+    const cpuRaw = cleanValue(row[7]);  // H열: CPU (밀림)
+    const cpuYearRaw = row[8];          // I열: CPU 출시연도 (밀림)
+    const gpuRaw = cleanValue(row[9]);  // J열: GPU (밀림)
+    const gpuYearRaw = row[10];         // K열: GPU 출시연도 (밀림)
+    const ramRaw = cleanValue(row[11]); // L열: RAM (밀림)
+    const ssd1Raw = cleanValue(row[12]);// M열: SDD1 (밀림)
+    const ssd2Raw = cleanValue(row[13]);// N열: SDD2 (밀림)
+    const hdd1Raw = cleanValue(row[14]);// O열: HDD1 (밀림)
+    const hdd2Raw = cleanValue(row[15]);// P열: HDD2 (밀림)
+    const hdd3Raw = cleanValue(row[16]);// Q열: HDD3 (밀림)
+    const hdd4Raw = cleanValue(row[17]);// R열: HDD4 (밀림)
+    
+    // W열(22번째 인덱스) -> 구매일자
+    const dateRaw = cleanValue(row[22]);
+    // X열(23번째 인덱스) -> 비고
+    const memoRaw = cleanValue(row[23]);
+    
+    // 1. 법인 매핑 (엑셀 C열의 실제 소속 우선 사용, 없을 시 순환 지정)
+    const purchase_corp = corpRaw !== '-' ? corpRaw : CORPS[pcIndex % CORPS.length];
+    
+    // 2. 재고PC 판단 및 상태 설정
+    const isStock = teamRaw === '재고PC';
+    const hw_status = isStock ? '창고보관' : '운영중';
+    
+    // 3. 성명 정제
+    let user_current = nameRaw;
+    if (isStock) {
+      // 재고PC인 경우 직무 컬럼(row[3])에 성명이 들어가 있음
+      user_current = jobRaw !== '-' ? jobRaw : '재고장비';
+    }
+    
+    // 4. 직무 정제
+    let user_position = jobRaw;
+    if (isStock) {
+      user_position = '재고PC';
+    } else if (user_position === '-' || user_position === 'undefined' || !user_position || ['안용주', '김민수', '심영표', '이수창A', '조병철', '윤진호', '김대영', '박정웅', '김유식'].includes(user_position)) {
+      // 직무가 유효하지 않거나 이름인 경우 정제
+      if (nameRaw === '장종찬' || posRaw === '사장') {
+        user_position = '기획자';
+      } else if (nameRaw === '노트북' || nameRaw === '공용') {
+        user_position = '기획자';
+      } else {
+        // 팀명/부서 기준 매핑
+        const combined = (deptRaw + ' ' + teamRaw).toUpperCase();
+        if (combined.includes('개발') || combined.includes('SOLUTION') || combined.includes('WEB') || combined.includes('ERP')) {
+          user_position = '개발자';
+        } else if (combined.includes('BIM') || combined.includes('구조') || combined.includes('설계') || combined.includes('터널') || combined.includes('상하수도') || combined.includes('수자원') || combined.includes('건설') || combined.includes('CM')) {
+          user_position = '엔지니어';
+        } else if (combined.includes('디자인') || combined.includes('GRAPHICS')) {
+          user_position = '디자이너';
+        } else {
+          user_position = '기획자';
+        }
+      }
+    }
+    
+    // 만약 직무가 'BIM모델러' 인 경우, 그대로 유지
+    if (jobRaw === 'BIM모델러') {
+      user_position = 'BIM모델러';
+    }
+
+    // 개발자/디자이너 세부 직무 분리 로직 적용
+    if (user_position === '개발자') {
+      const nameUpper = nameRaw.trim();
+      const teamUpper = teamRaw.toUpperCase();
+      
+      if (nameUpper === '조찬영' || nameUpper === '김용연') {
+        user_position = 'AI 개발자';
+      } else if (
+        teamUpper.includes('그래픽스') || 
+        teamUpper.includes('MODELER') || 
+        teamUpper.includes('HMEG') || 
+        teamUpper.includes('EG-BIM') || 
+        teamUpper.includes('GSIM') || 
+        teamUpper.includes('STRANA')
+      ) {
+        user_position = '3D 개발자';
+      } else if (
+        teamUpper.includes('WEB') || 
+        teamUpper.includes('솔루션개발') || 
+        teamUpper.includes('ERP') || 
+        teamUpper.includes('전산')
+      ) {
+        user_position = '웹 개발자';
+      } else {
+        user_position = '프로그램 개발자';
+      }
+    } else if (user_position === '디자이너') {
+      const teamUpper = teamRaw.toUpperCase();
+      if (teamUpper.includes('디자인셀')) {
+        user_position = 'UXUI 디자이너';
+      } else if (teamUpper.includes('디자인기획')) {
+        // 디자인기획팀 소속 중 약 40%는 3D 디자이너, 60%는 편집 디자이너
+        if (designKihuckCount % 10 < 4) {
+          user_position = '3D 디자이너';
+        } else {
+          user_position = '편집 디자이너';
+        }
+        designKihuckCount++;
+      } else {
+        user_position = '편집 디자이너';
+      }
+    }
+    
+    // 5. 구매일자 포맷 가공 (YYYY-MM)
+    let purchase_date = '2022-01'; // 기본값
+    if (dateRaw !== '-') {
+      if (dateRaw.length === 6 && !isNaN(dateRaw)) {
+        purchase_date = `${dateRaw.substring(0, 4)}-${dateRaw.substring(4, 6)}`;
+      } else if (dateRaw.length === 4 && !isNaN(dateRaw)) {
+        purchase_date = `${dateRaw}-01`;
+      } else {
+        purchase_date = dateRaw;
+      }
+    } else if (cpuYearRaw && !isNaN(cpuYearRaw)) {
+      purchase_date = `${cpuYearRaw}-01`;
+    }
+    
+    // 6. 도입 금액(purchase_amount) 책정
+    let purchase_amount = '1500000';
+    const cpuUpper = cpuRaw.toUpperCase();
+    const gpuUpper = gpuRaw.toUpperCase();
+    
+    if (cpuUpper.includes('I9') || cpuUpper.includes('RYZEN 9') || cpuUpper.includes('RYZEN9') || gpuUpper.includes('4080') || gpuUpper.includes('4090')) {
+      purchase_amount = '3500000';
+    } else if (cpuUpper.includes('I7') || cpuUpper.includes('RYZEN 7') || cpuUpper.includes('RYZEN7') || gpuUpper.includes('3070') || gpuUpper.includes('4070') || gpuUpper.includes('A2000')) {
+      purchase_amount = '2200000';
+    } else if (cpuUpper.includes('I5') || cpuUpper.includes('RYZEN 5') || cpuUpper.includes('RYZEN5') || gpuUpper.includes('3060') || gpuUpper.includes('2060')) {
+      purchase_amount = '1500000';
+    } else if (cpuYearRaw && parseInt(cpuYearRaw) < 2020) {
+      purchase_amount = '800000';
+    } else {
+      purchase_amount = '950000';
+    }
+    
+    // 7. MAC 주소 생성 (16진수 포맷)
+    const mac_address = `00:1A:2B:3C:4D:${pcIndex.toString(16).toUpperCase().padStart(2, '0')}`;
+    
+    parsedPCs.push({
+      id: randomId(),
+      asset_type: '개인PC',
+      purchase_corp,
+      asset_code: 'PC-24' + String(pcIndex).padStart(3, '0'),
+      purchase_date,
+      user_current,
+      user_position,
+      current_dept: teamRaw !== '-' ? teamRaw : deptRaw,
+      previous_dept: pcIndex % 8 === 0 ? '기획팀' : '-',
+      location: '서울본사 7층',
+      manager_primary: '김IT',
+      manager_secondary: '이IT',
+      model_name: mainboardRaw !== '-' ? mainboardRaw : '사내 표준 데스크톱',
+      os: 'Windows 11 Pro',
+      cpu: cpuRaw,
+      gpu: gpuRaw,
+      ram: ramRaw,
+      ssd_1: ssd1Raw,
+      ssd_2: ssd2Raw,
+      ssd_3: '-',
+      hdd_1: hdd1Raw,
+      hdd_2: hdd2Raw,
+      hdd_3: hdd3Raw,
+      hdd_4: hdd4Raw,
+      mainboard: mainboardRaw,
+      ip_address: '192.168.0.' + (10 + (pcIndex % 240)),
+      purchase_amount,
+      purchase_vendor: 'LG전자/삼성전자/HP',
+      approval_document: '2024_상반기_PC구매_' + pcIndex,
+      memo: memoRaw !== '-' ? memoRaw : (isStock ? '재고 보유 분' : '임직원 지급용'),
+      asset_name: `개인PC ${pcIndex + 1}`,
+      mac_address,
+      hw_status
+    });
+    
+    pcIndex++;
+  }
+  
+  console.log(`Successfully parsed ${parsedPCs.length} PCs from excel file.`);
+  
+  // dummyData.ts 의 나머지 데이터(dummyServers 등)를 포함하여 전체 파일을 새로 씁니다.
+  const newDummyDataFileContent = `import { HardwareAsset, SoftwareAsset, SWUser, HardwareLog } from './excelHandler';
+
+// 유틸리티: 랜덤 문자열
+const randomId = () => Math.random().toString(36).substring(2, 9);
+
+// 유틸리티: 랜덤 년월 (YYYY-MM) (최근 10년)
+const randomPurchaseYM = () => {
+  const currentYear = new Date().getFullYear();
+  const year = currentYear - Math.floor(Math.random() * 10);
+  const month = String(Math.floor(Math.random() * 12) + 1).padStart(2, '0');
+  return \`\${year}-\${month}\`;
+};
+
+// 유틸리티: 랜덤 YYYY-MM-DD
+const randomDateStr = (maxYearsAgo = 10) => {
+  const currentYear = new Date().getFullYear();
+  const year = currentYear - Math.floor(Math.random() * maxYearsAgo);
+  const month = String(Math.floor(Math.random() * 12) + 1).padStart(2, '0');
+  const day = String(Math.floor(Math.random() * 28) + 1).padStart(2, '0');
+  return \`\${year}-\${month}-\${day}\`;
+};
+
+const CORPS = ['한맥', '삼안', '장헌', '장헌산업', 'PTC', '바론', '한라'];
+const getRandomCorp = () => CORPS[Math.floor(Math.random() * CORPS.length)];
+
+// ────────────────────────────────────────────────────────
+// 1. SampleData_PC.xlsx 에서 파싱된 PC 데이터 주입
+// ────────────────────────────────────────────────────────
+export const dummyPCs: any[] = ${JSON.stringify(parsedPCs, null, 2)};
+
+// ────────────────────────────────────────────────────────
+// 2. 기타 자산 더미 데이터 (서버, 스토리지, 소프트웨어 등)
+// ────────────────────────────────────────────────────────
+
+export const dummyServers: any[] = Array.from({ length: 15 }).map((_, i) => ({
+  id: randomId(),
+  asset_type: '서버',
+  type2: i % 2 === 0 ? '물리' : '가상',
+  purchase_corp: getRandomCorp(),
+  asset_code: \`SRV-24\${String(i).padStart(3, '0')}\`,
+  purchase_date: randomPurchaseYM(),
+  asset_purpose: i % 2 === 0 ? '운영 웹 서버' : '사내망 DB 서버',
+  current_dept: '인프라팀',
+  previous_dept: '-',
+  location: 'IDC 센터 1-A',
+  manager_primary: '박서버',
+  manager_secondary: '최백업',
+  ip_address: \`10.0.0.\${10 + i}\`,
+  ip_address_2: \`192.168.100.\${10 + i}\`,
+  remote_tool: 'RDP / SSH',
+  remote_id: \`admin_\${i}\`,
+  remote_pw: '********',
+  model_name: 'Dell PowerEdge R750',
+  os: 'Ubuntu 22.04 LTS',
+  cpu: 'Intel Xeon Gold 6330',
+  ram: '128GB',
+  gpu: i % 3 === 0 ? 'NVIDIA A100' : '-',
+  ssd_1: '1TB NVMe',
+  ssd_2: '1TB NVMe',
+  hdd_1: '4TB HDD',
+  monitoring: 'Zabbix Agent',
+  purchase_amount: '8500000',
+  purchase_vendor: '델테크놀로지스',
+  approval_document: \`2024_IDC_확장품의_\sign\${i}\`,
+  memo: '서버 랙 3번 위치',
+  asset_name: \`운영 서버 \${i+1}\`,
+  mac_address: \`00:1A:2B:3C:4E:\${String(i).padStart(2, '0')}\`,
+  hw_status: '운영중'
+}));
+
+export const dummyStorages: any[] = Array.from({ length: 8 }).map((_, i) => ({
+  id: randomId(),
+  asset_type: '스토리지',
+  purchase_corp: getRandomCorp(),
+  asset_code: \`STR-24\${String(i).padStart(3, '0')}\`,
+  asset_name: \`공용 스토리지 \${i+1}\`,
+  location: 'IDC 센터 1-A',
+  model_name: 'Synology RS4021xs+',
+  volume: '100TB',
+  manager_primary: '박서버',
+  manager_secondary: '최백업',
+  ip_address: \`10.0.0.\${50 + i}\`,
+  mac_address: \`00:1A:2B:3C:4F:\${String(i).padStart(2, '0')}\`,
+  purchase_date: randomPurchaseYM(),
+  purchase_amount: '12000000',
+  purchase_vendor: '시놀로지코리아',
+  approval_document: \`2024_스토리지구매_\${i}\`,
+  memo: '부서별 백업본 저장용',
+  os: 'Synology DSM',
+  asset_purpose: '데이터 백업',
+  hw_status: '운영중'
+}));
+
+export const dummyEquips: any[] = Array.from({ length: 12 }).map((_, i) => ({
+  id: randomId(),
+  asset_type: '전산비품',
+  purchase_corp: getRandomCorp(),
+  asset_code: \`EQ-24\${String(i).padStart(3, '0')}\`,
+  asset_name: \`네트워크 스위치 \${i+1}\`,
+  location: '전산실 랙 1',
+  manager_primary: '네트워크담당자',
+  ip_address: \`192.168.10.\${200 + i}\`,
+  mac_address: \`00:1A:2B:3C:51:\${String(i).padStart(2, '0')}\`,
+  os: 'Cisco IOS',
+  purchase_date: randomPurchaseYM(),
+  purchase_amount: '150000',
+  purchase_vendor: '다나와',
+  approval_document: \`2024_비품구매_\${i}\`,
+  memo: '사내망 확장용',
+  asset_purpose: '네트워크 분배'
+}));
+
+export const dummyMobiles: any[] = Array.from({ length: 15 }).map((_, i) => ({
+  id: randomId(),
+  asset_type: '모바일기기',
+  purchase_corp: getRandomCorp(),
+  asset_code: \`MOB-24\${String(i).padStart(3, '0')}\`,
+  asset_name: \`테스트용 단말기 \${i+1}\`,
+  location: '개발2팀',
+  manager_primary: '테스터',
+  os: i % 2 === 0 ? 'Android 14' : 'iOS 17',
+  purchase_date: randomPurchaseYM(),
+  purchase_amount: '900000',
+  purchase_vendor: '삼성전자/애플',
+  approval_document: \`2024_모바일구매_\${i}\`,
+  memo: '앱 호환성 테스트 전용',
+  asset_purpose: 'QA 테스트',
+  ip_address: \`192.168.1.\${10 + i}\`,
+  mac_address: \`00:1A:2B:3C:50:\${String(i).padStart(2, '0')}\`
+}));
+
+export const dummySubSw: any[] = Array.from({ length: 10 }).map((_, i) => ({
+  id: randomId(),
+  sw_type: '구독SW',
+  sw_field: '업무용/협업',
+  purchase_corp: getRandomCorp(),
+  current_dept: '전사',
+  product_name: \`Microsoft 365 E\${3 + (i%2)}\`,
+  purchase_date: randomDateStr(3),
+  start_date: randomDateStr(1),
+  expired_date: randomDateStr(0),
+  purchase_amount: '150000',
+  asset_count: 50 + i * 5,
+  email_account: \`admin\${i}@hmcorp.com\`,
+  purchase_vendor: '소프트웨어인라이프',
+  memo: '연간 계약 갱신 필요'
+}));
+
+export const dummyPermSw: any[] = Array.from({ length: 5 }).map((_, i) => ({
+  id: randomId(),
+  sw_type: '영구SW',
+  sw_field: '디자인/설계',
+  purchase_corp: getRandomCorp(),
+  current_dept: '디자인팀',
+  product_name: \`AutoCAD 202\${i%4}\`,
+  purchase_date: randomDateStr(5),
+  start_date: randomDateStr(5),
+  expired_date: '2099-12-31',
+  purchase_amount: '3000000',
+  asset_count: 2,
+  email_account: \`design\${i}@hmcorp.com\`,
+  purchase_vendor: '오토데스크 파트너',
+  memo: 'USB 동글키 보관중'
+}));
+
+export const dummyCloud: any[] = Array.from({ length: 5 }).map((_, i) => ({
+  id: randomId(),
+  sw_type: '클라우드',
+  asset_mfr: i % 2 === 0 ? 'AWS' : 'GCP',
+  purchase_corp: getRandomCorp(),
+  current_dept: '개발팀',
+  product_name: \`컴퓨팅 인스턴스 Type \${i}\`,
+  email_account: \`awsadmin\${i}@hmcorp.com\`,
+  purchase_method: '법인카드(신한 1234)',
+  purchase_amount: \`\${500000 + i * 100000}\`,
+  asset_count: 1,
+  purchase_vendor: 'AWS/GCP',
+  memo: '환율 변동에 따라 매월 상이함'
+}));
+
+export const dummyDomain: any[] = Array.from({ length: 5 }).map((_, i) => ({
+  id: randomId(),
+  asset_type: '도메인',
+  purchase_corp: getRandomCorp(),
+  product_name: \`사내 운영 서비스 \${i+1}\`,
+  domain_address: \`service\${i+1}.hmcorp.com\`,
+  start_date: randomDateStr(4),
+  expired_date: randomDateStr(0),
+  purchase_amount: '22000',
+  manager_primary: '인프라팀장',
+  manager_secondary: '인프라담당자',
+  memo: '가비아 자동갱신 설정 완료'
+}));
+
+export const dummySwUsers: any[] = Array.from({ length: 15 }).map((_, i) => ({
+  id: randomId(),
+  sw_id: dummySubSw[0]?.id || randomId(),
+  purchase_corp: getRandomCorp(),
+  current_dept: '경영지원팀',
+  user_current: \`홍길동\${i}\`,
+  memo: \`SW신청서_2400\${i}\`
+}));
+
+export const dummyLogs: any[] = Array.from({ length: 10 }).map((_, i) => ({
+  id: randomId(),
+  assetId: dummyPCs[0]?.id || randomId(),
+  date: randomDateStr(1),
+  details: i % 2 === 0 ? '메모리 추가 증설 (16GB -> 32GB)' : '디스플레이 파손 수리',
+  user: 'IT지원팀',
+  cost: i % 2 === 0 ? 80000 : 150000,
+}));
+`;
+
+  fs.writeFileSync('c:/Project/HM ITAM/src/core/dummyData.ts', newDummyDataFileContent, 'utf-8');
+  console.log('✅ dummyData.ts file updated successfully.');
+} catch (e) {
+  console.error('❌ Failed to update dummy data:', e);
+}

scratch/update_dummy_servers.js

@@ -0,0 +1,442 @@
+import pkg from 'xlsx';
+import * as fs from 'fs';
+import * as path from 'path';
+
+const { readFile, utils } = pkg;
+
+const randomId = () => Math.random().toString(36).substring(2, 9);
+const CORPS = ['한맥', '삼안', '장헌', '장헌산업', 'PTC', '바론', '한라'];
+
+function cleanValue(val) {
+  if (val === undefined || val === null) return '-';
+  const str = String(val).trim();
+  return str === '' ? '-' : str;
+}
+
+try {
+  // 1. 기존 dummyPCs 로딩
+  const dummyDataPath = 'c:/Project/HM ITAM/src/core/dummyData.ts';
+  const content = fs.readFileSync(dummyDataPath, 'utf-8');
+  const matchPCs = content.match(/export const dummyPCs: any\[\] = (\[[\s\S]*?\]);/);
+  if (!matchPCs) {
+    console.error('Failed to parse dummyPCs from dummyData.ts');
+    process.exit(1);
+  }
+  const dummyPCs = JSON.parse(matchPCs[1]);
+  console.log(`Loaded ${dummyPCs.length} existing PCs from dummyData.ts`);
+
+  // 2. SampleData_SVR.xlsx 파싱
+  const workbook = readFile('c:/Project/HM ITAM/SampleData_SVR.xlsx');
+  
+  const parsedServers = [];
+  const parsedStorages = [];
+  const parsedEquips = [];
+
+  let serverIndex = 0;
+  let storageIndex = 0;
+  let equipIndex = 0;
+
+  // ----------------- 시트 1: 합본데이터(공용PC) -----------------
+  const sheetPC = workbook.Sheets['합본데이터(공용PC)'];
+  const rawPC = utils.sheet_to_json(sheetPC, { header: 1 });
+  const rowsPC = rawPC.slice(1).filter(row => row.some(val => val !== undefined && val !== null && String(val).trim() !== ''));
+
+  for (const row of rowsPC) {
+    const teamRaw = cleanValue(row[0]);
+    const svrNoRaw = cleanValue(row[1]);
+    const assetNameRaw = cleanValue(row[2]);
+    const typeRaw = cleanValue(row[3]);
+    const detailRaw = cleanValue(row[4]);
+    const locRaw = cleanValue(row[5]);
+    const mgr1Raw = cleanValue(row[6]);
+    const mgr2Raw = cleanValue(row[7]);
+    const osRaw = cleanValue(row[8]);
+    const osVerRaw = cleanValue(row[9]);
+    const osBuildRaw = cleanValue(row[10]);
+    const modelRaw = cleanValue(row[11]);
+    const mainboardRaw = cleanValue(row[12]);
+    const cpuRaw = cleanValue(row[13]);
+    const ramRaw = cleanValue(row[14]);
+    const gpuRaw = cleanValue(row[15]);
+    const ssd1Raw = cleanValue(row[16]);
+    const ssd2Raw = cleanValue(row[17]);
+    const hdd1Raw = cleanValue(row[18]);
+    const hdd2Raw = cleanValue(row[19]);
+    const hdd3Raw = cleanValue(row[20]);
+    const hdd4Raw = cleanValue(row[21]);
+
+    const ipAddress = '172.16.10.' + (50 + (serverIndex % 150));
+    const randomCorp = CORPS[serverIndex % CORPS.length];
+
+    // 서비스 분류 판단
+    let service_type = '내부서비스';
+    const detailUpper = detailRaw.toUpperCase();
+    const assetUpper = assetNameRaw.toUpperCase();
+    const teamUpper = teamRaw.toUpperCase();
+
+    if (teamUpper.includes('회의실') || assetUpper.includes('회의실') || assetUpper.includes('사이니지')) {
+      service_type = '회의용/공용';
+    } else if (
+      detailUpper.includes('SAAS') || detailUpper.includes('웹서비스') || 
+      detailUpper.includes('운영') || detailUpper.includes('WAS') || 
+      detailUpper.includes('MYSTATION') || detailUpper.includes('CLOUD') || 
+      detailUpper.includes('홈페이지') || detailUpper.includes('WEB') || 
+      detailUpper.includes('외주') || assetUpper.includes('CLOUD') || 
+      assetUpper.includes('웹서비스') || assetUpper.includes('운영')
+    ) {
+      service_type = '외부서비스';
+    }
+
+    // 방치 의심 판단
+    const is_inactive = (
+      detailUpper.includes('원격 및 로컬접근 불가') || 
+      detailUpper.includes('철수예정') || 
+      detailUpper.includes('미사용') || 
+      detailUpper.includes('구형 OS')
+    );
+
+    // 실시간 리소스 및 네트워크 가상 데이터 생성
+    let cpu_usage = 0;
+    let ram_usage = 0;
+    let network_traffic = '0 GB';
+
+    if (is_inactive) {
+      cpu_usage = 0;
+      ram_usage = 0;
+      network_traffic = '0 GB (N/A)';
+    } else if (service_type === '회의용/공용') {
+      cpu_usage = Math.floor(Math.random() * 10) + 2; // 2%~12%
+      ram_usage = Math.floor(Math.random() * 15) + 5; // 5%~20%
+      network_traffic = (Math.random() * 1.5 + 0.1).toFixed(1) + ' GB';
+    } else if (service_type === '외부서비스') {
+      // 일부 저사양 운영/SaaS 서버는 병목 현상을 시뮬레이션하기 위해 과부하 부여
+      const isUnderSpec = !gpuRaw.toUpperCase().includes('RTX 30') && !gpuRaw.toUpperCase().includes('RTX 40') && (cpuRaw.toUpperCase().includes('I5') || ramRaw.toUpperCase().includes('16GB') || cpuRaw === '-');
+      if (isUnderSpec) {
+        cpu_usage = Math.floor(Math.random() * 15) + 81; // 81%~95% (과부하)
+        ram_usage = Math.floor(Math.random() * 10) + 86; // 86%~95%
+      } else {
+        cpu_usage = Math.floor(Math.random() * 30) + 40; // 40%~70%
+        ram_usage = Math.floor(Math.random() * 20) + 60; // 60%~80%
+      }
+      network_traffic = (Math.random() * 1500 + 300).toFixed(0) + ' GB';
+    } else { // 내부서비스
+      // Abaqus 해석용이나 Pix4D 등 고부하 내부 인프라도 부하율 높게 부여
+      const isHighLoad = detailUpper.includes('ABAQUS') || detailUpper.includes('PIX4D') || detailUpper.includes('영상 렌더링') || detailUpper.includes('TERRA');
+      if (isHighLoad) {
+        cpu_usage = Math.floor(Math.random() * 20) + 70; // 70%~90%
+        ram_usage = Math.floor(Math.random() * 20) + 75; // 75%~95%
+      } else {
+        cpu_usage = Math.floor(Math.random() * 35) + 15; // 15%~50%
+        ram_usage = Math.floor(Math.random() * 30) + 20; // 20%~50%
+      }
+      network_traffic = (Math.random() * 300 + 10).toFixed(0) + ' GB';
+    }
+
+    const assetItem = {
+      id: randomId(),
+      asset_type: typeRaw !== '-' ? typeRaw : '공용PC',
+      purchase_corp: randomCorp,
+      asset_code: 'SVR-24' + String(serverIndex).padStart(3, '0'),
+      purchase_date: '2023-03',
+      asset_purpose: detailRaw,
+      current_dept: teamRaw,
+      previous_dept: '-',
+      location: locRaw,
+      manager_primary: mgr1Raw,
+      manager_secondary: mgr2Raw,
+      ip_address: ipAddress,
+      remote_tool: 'RDP / VNC',
+      model_name: modelRaw !== '-' ? modelRaw : (mainboardRaw !== '-' ? mainboardRaw : '사내 표준 공용PC'),
+      os: osRaw !== '-' ? `${osRaw} (${osVerRaw})` : 'Windows 10',
+      cpu: cpuRaw,
+      ram: ramRaw,
+      gpu: gpuRaw,
+      ssd_1: ssd1Raw,
+      ssd_2: ssd2Raw,
+      hdd_1: hdd1Raw,
+      hdd_2: hdd2Raw,
+      hdd_3: hdd3Raw,
+      hdd_4: hdd4Raw,
+      monitoring: service_type === '외부서비스' ? '대상' : '비대상',
+      purchase_amount: gpuRaw.toUpperCase().includes('RTX 4080') || gpuRaw.toUpperCase().includes('RTX 3090') ? '3500000' : '1500000',
+      purchase_vendor: '다나와',
+      approval_document: '2023_공용PC_도입_' + serverIndex,
+      memo: is_inactive ? '방치 의심 장비 (회수 필요)' : '정상 운영 장비',
+      asset_name: assetNameRaw,
+      mac_address: `00:1A:2B:3C:5E:${serverIndex.toString(16).toUpperCase().padStart(2, '0')}`,
+      hw_status: is_inactive ? '수리/대기' : '운영중',
+      service_type: service_type,
+      is_inactive: is_inactive,
+      cpu_usage: cpu_usage,
+      ram_usage: ram_usage,
+      network_traffic: network_traffic
+    };
+
+    // 스토리지로 보낼 자산들 (유형이 NAS/DAS이거나 자산명에 NAS가 들어가면)
+    if (typeRaw.toUpperCase().includes('NAS') || typeRaw.toUpperCase().includes('DAS') || assetUpper.includes('NAS') || assetUpper.includes('DAS')) {
+      assetItem.asset_code = 'STO-24' + String(storageIndex).padStart(3, '0');
+      assetItem.volume = hdd1Raw !== '-' ? hdd1Raw : '10TB';
+      parsedStorages.push(assetItem);
+      storageIndex++;
+    } else {
+      parsedServers.push(assetItem);
+      serverIndex++;
+    }
+  }
+
+  // ----------------- 시트 2: 합본데이터(NAS) -----------------
+  const sheetNAS = workbook.Sheets['합본데이터(NAS)'];
+  const rawNAS = utils.sheet_to_json(sheetNAS, { header: 1 });
+  const rowsNAS = rawNAS.slice(1).filter(row => row.some(val => val !== undefined && val !== null && String(val).trim() !== ''));
+
+  for (const row of rowsNAS) {
+    const teamRaw = cleanValue(row[0]);
+    const svrNoRaw = cleanValue(row[1]);
+    const assetNameRaw = cleanValue(row[2]);
+    const typeRaw = cleanValue(row[3]);
+    const detailRaw = cleanValue(row[4]);
+    const locRaw = cleanValue(row[5]);
+    const mgr1Raw = cleanValue(row[6]);
+    const mgr2Raw = cleanValue(row[7]);
+    const toolRaw = cleanValue(row[8]);
+    const ipRaw = cleanValue(row[9]);
+    const ip2Raw = cleanValue(row[10]);
+    const idRaw = cleanValue(row[11]);
+    const pwRaw = cleanValue(row[12]);
+    const osRaw = cleanValue(row[15]);
+    const osVerRaw = cleanValue(row[16]);
+    const osBuildRaw = cleanValue(row[17]);
+    const modelRaw = cleanValue(row[18]);
+    const cpuRaw = cleanValue(row[19]);
+    const ramRaw = cleanValue(row[20]);
+    const gpuRaw = cleanValue(row[21]);
+    const ssd1Raw = cleanValue(row[22]);
+    const ssd2Raw = cleanValue(row[23]);
+    const hdd1Raw = cleanValue(row[24]);
+    const hdd2Raw = cleanValue(row[25]);
+    const hdd3Raw = cleanValue(row[26]);
+    const hdd4Raw = cleanValue(row[27]);
+
+    const randomCorp = CORPS[storageIndex % CORPS.length];
+    
+    // NAS는 기본적으로 내부 백업/공유용 인프라
+    const service_type = '내부서비스';
+    const is_inactive = false;
+
+    // NAS 실시간 리소스 가상 데이터
+    const cpu_usage = Math.floor(Math.random() * 25) + 15; // 15%~40%
+    const ram_usage = Math.floor(Math.random() * 35) + 30; // 30%~65%
+    const network_traffic = (Math.random() * 600 + 50).toFixed(0) + ' GB';
+
+    const assetItem = {
+      id: randomId(),
+      asset_type: typeRaw !== '-' ? typeRaw : '공용 NAS',
+      purchase_corp: randomCorp,
+      asset_code: 'STO-24' + String(storageIndex).padStart(3, '0'),
+      purchase_date: '2022-08',
+      asset_purpose: detailRaw,
+      current_dept: teamRaw !== '-' ? teamRaw : '디자인팀',
+      previous_dept: '-',
+      location: locRaw,
+      manager_primary: mgr1Raw,
+      manager_secondary: mgr2Raw,
+      ip_address: ipRaw !== '-' ? ipRaw : '172.16.42.' + (100 + storageIndex),
+      remote_tool: toolRaw !== '-' ? toolRaw : 'Web GUI',
+      model_name: modelRaw !== '-' ? modelRaw : 'Synology 공용 NAS',
+      os: osRaw !== '-' ? `${osRaw} ${osVerRaw}` : 'DSM 7.x',
+      cpu: cpuRaw,
+      ram: ramRaw,
+      gpu: gpuRaw,
+      ssd_1: ssd1Raw,
+      ssd_2: ssd2Raw,
+      hdd_1: hdd1Raw,
+      hdd_2: hdd2Raw,
+      hdd_3: hdd3Raw,
+      hdd_4: hdd4Raw,
+      monitoring: '비대상',
+      purchase_amount: '4500000',
+      purchase_vendor: '시놀로지 총판',
+      approval_document: '2022_스토리지_도입_' + storageIndex,
+      memo: '스토리지 서버 공유 자산',
+      asset_name: assetNameRaw,
+      mac_address: `00:1A:2B:3C:5F:${storageIndex.toString(16).toUpperCase().padStart(2, '0')}`,
+      hw_status: '운영중',
+      service_type: service_type,
+      is_inactive: is_inactive,
+      volume: hdd1Raw !== '-' ? hdd1Raw : '24TB',
+      cpu_usage: cpu_usage,
+      ram_usage: ram_usage,
+      network_traffic: network_traffic
+    };
+
+    parsedStorages.push(assetItem);
+    storageIndex++;
+  }
+
+  console.log(`Parsed Servers: ${parsedServers.length} units`);
+  console.log(`Parsed Storages: ${parsedStorages.length} units`);
+
+  // 3. 파일 다시 쓰기
+  const newDummyDataFileContent = `import { HardwareAsset, SoftwareAsset, SWUser, HardwareLog } from './excelHandler';
+
+// 유틸리티: 랜덤 문자열
+const randomId = () => Math.random().toString(36).substring(2, 9);
+
+// 유틸리티: 랜덤 년월 (YYYY-MM) (최근 10년)
+const randomPurchaseYM = () => {
+  const currentYear = new Date().getFullYear();
+  const year = currentYear - Math.floor(Math.random() * 10);
+  const month = String(Math.floor(Math.random() * 12) + 1).padStart(2, '0');
+  return \`\${year}-\${month}\`;
+};
+
+// 유틸리티: 랜덤 YYYY-MM-DD
+const randomDateStr = (maxYearsAgo = 10) => {
+  const currentYear = new Date().getFullYear();
+  const year = currentYear - Math.floor(Math.random() * maxYearsAgo);
+  const month = String(Math.floor(Math.random() * 12) + 1).padStart(2, '0');
+  const day = String(Math.floor(Math.random() * 28) + 1).padStart(2, '0');
+  return \`\${year}-\${month}-\${day}\`;
+};
+
+const CORPS = ['한맥', '삼안', '장헌', '장헌산업', 'PTC', '바론', '한라'];
+const getRandomCorp = () => CORPS[Math.floor(Math.random() * CORPS.length)];
+
+// ────────────────────────────────────────────────────────
+// 1. SampleData_PC.xlsx 에서 파싱된 PC 데이터 주입
+// ────────────────────────────────────────────────────────
+export const dummyPCs: any[] = ${JSON.stringify(dummyPCs, null, 2)};
+
+// ────────────────────────────────────────────────────────
+// 2. 기타 자산 더미 데이터 (서버, 스토리지, 소프트웨어 등 - 엑셀 파싱 연동)
+// ────────────────────────────────────────────────────────
+
+export const dummyServers: any[] = ${JSON.stringify(parsedServers, null, 2)};
+
+export const dummyStorages: any[] = ${JSON.stringify(parsedStorages, null, 2)};
+
+export const dummyEquips: any[] = Array.from({ length: 12 }).map((_, i) => ({
+  id: randomId(),
+  asset_type: '전산비품',
+  purchase_corp: getRandomCorp(),
+  asset_code: \`EQ-24\${String(i).padStart(3, '0')}\`,
+  asset_name: \`네트워크 스위치 \${i+1}\`,
+  location: '전산실 랙 1',
+  manager_primary: '네트워크담당자',
+  ip_address: \`192.168.10.\${200 + i}\`,
+  mac_address: \`00:1A:2B:3C:51:\${String(i).padStart(2, '0')}\`,
+  os: 'Cisco IOS',
+  purchase_date: randomPurchaseYM(),
+  purchase_amount: '150000',
+  purchase_vendor: '다나와',
+  approval_document: \`2024_비품구매_\${i}\`,
+  memo: '사내망 확장용',
+  asset_purpose: '네트워크 분배'
+}));
+
+export const dummyMobiles: any[] = Array.from({ length: 15 }).map((_, i) => ({
+  id: randomId(),
+  asset_type: '모바일기기',
+  purchase_corp: getRandomCorp(),
+  asset_code: \`MOB-24\${String(i).padStart(3, '0')}\`,
+  asset_name: \`테스트용 단말기 \${i+1}\`,
+  location: '개발2팀',
+  manager_primary: '테스터',
+  os: i % 2 === 0 ? 'Android 14' : 'iOS 17',
+  purchase_date: randomPurchaseYM(),
+  purchase_amount: '900000',
+  purchase_vendor: '삼성전자/애플',
+  approval_document: \`2024_모바일구매_\${i}\`,
+  memo: '앱 호환성 테스트 전용',
+  asset_purpose: 'QA 테스트',
+  ip_address: \`192.168.1.\${10 + i}\`,
+  mac_address: \`00:1A:2B:3C:50:\${String(i).padStart(2, '0')}\`
+}));
+
+export const dummySubSw: any[] = Array.from({ length: 10 }).map((_, i) => ({
+  id: randomId(),
+  sw_type: '구독SW',
+  sw_field: '업무용/협업',
+  purchase_corp: getRandomCorp(),
+  current_dept: '전사',
+  product_name: \`Microsoft 365 E\${3 + (i%2)}\`,
+  purchase_date: randomDateStr(3),
+  start_date: randomDateStr(1),
+  expired_date: randomDateStr(0),
+  purchase_amount: '150000',
+  asset_count: 50 + i * 5,
+  email_account: \`admin\${i}@hmcorp.com\`,
+  purchase_vendor: '소프트웨어인라이프',
+  memo: '연간 계약 갱신 필요'
+}));
+
+export const dummyPermSw: any[] = Array.from({ length: 5 }).map((_, i) => ({
+  id: randomId(),
+  sw_type: '영구SW',
+  sw_field: '디자인/설계',
+  purchase_corp: getRandomCorp(),
+  current_dept: '디자인팀',
+  product_name: \`AutoCAD 202\${i%4}\`,
+  purchase_date: randomDateStr(5),
+  start_date: randomDateStr(5),
+  expired_date: '2099-12-31',
+  purchase_amount: '3000000',
+  asset_count: 2,
+  email_account: \`design\${i}@hmcorp.com\`,
+  purchase_vendor: '오토데스크 파트너',
+  memo: 'USB 동글키 보관중'
+}));
+
+export const dummyCloud: any[] = Array.from({ length: 5 }).map((_, i) => ({
+  id: randomId(),
+  sw_type: '클라우드',
+  asset_mfr: i % 2 === 0 ? 'AWS' : 'GCP',
+  purchase_corp: getRandomCorp(),
+  current_dept: '개발팀',
+  product_name: \`컴퓨팅 인스턴스 Type \${i}\`,
+  email_account: \`awsadmin\${i}@hmcorp.com\`,
+  purchase_method: '법인카드(신한 1234)',
+  purchase_amount: \`\${500000 + i * 100000}\`,
+  asset_count: 1,
+  purchase_vendor: 'AWS/GCP',
+  memo: '환율 변동에 따라 매월 상이함'
+}));
+
+export const dummyDomain: any[] = Array.from({ length: 5 }).map((_, i) => ({
+  id: randomId(),
+  asset_type: '도메인',
+  purchase_corp: getRandomCorp(),
+  product_name: \`사내 운영 서비스 \${i+1}\`,
+  domain_address: \`service\${i+1}.hmcorp.com\`,
+  start_date: randomDateStr(4),
+  expired_date: randomDateStr(0),
+  purchase_amount: '22000',
+  manager_primary: '인프라팀장',
+  manager_secondary: '인프라담당자',
+  memo: '가비아 자동갱신 설정 완료'
+}));
+
+export const dummySwUsers: any[] = Array.from({ length: 15 }).map((_, i) => ({
+  id: randomId(),
+  sw_id: dummySubSw[0]?.id || randomId(),
+  purchase_corp: getRandomCorp(),
+  current_dept: '경영지원팀',
+  user_current: \`홍길동\${i}\`,
+  memo: \`SW신청서_2400\${i}\`
+}));
+
+export const dummyLogs: any[] = Array.from({ length: 10 }).map((_, i) => ({
+  id: randomId(),
+  assetId: dummyPCs[0]?.id || randomId(),
+  date: randomDateStr(1),
+  details: i % 2 === 0 ? '메모리 추가 증설 (16GB -> 32GB)' : '디스플레이 파손 수리',
+  user: 'IT지원팀',
+  cost: i % 2 === 0 ? 80000 : 150000,
+}));
+`;
+
+  fs.writeFileSync(dummyDataPath, newDummyDataFileContent, 'utf-8');
+  console.log('✅ dummyData.ts file updated successfully with SVR dataset.');
+} catch (e) {
+  console.error('❌ Failed to update dummy data:', e);
+}

server.js

@@ -41,11 +41,19 @@ const pool = mysql.createPool({
         ram_standard VARCHAR(100),
         gpu_standard VARCHAR(100),
         min_score INT DEFAULT 0,
+        required_grade VARCHAR(50) DEFAULT '중급',
         remarks TEXT,
         created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
         updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
       ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
     `);
+    
+    // 테이블이 이미 존재할 경우를 대비하여 required_grade 컬럼 안전 추가
+    try {
+      await connection.query("ALTER TABLE job_spec_standards ADD COLUMN required_grade VARCHAR(50) DEFAULT '중급'");
+    } catch (err) {
+      // 이미 컬럼이 존재하면 에러가 나므로 통과합니다.
+    }
     console.log('✅ job_spec_standards table verification completed.');
   } catch (err) {
     console.error('❌ Failed to verify/create job_spec_standards table:', err);
@@ -586,19 +594,19 @@ app.get('/api/job-specs', async (req, res) => {
 
 // 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;
+  const { id, job_name, cpu_standard, ram_standard, gpu_standard, min_score, required_grade, 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 = ?',
+        'UPDATE job_spec_standards SET job_name = ?, cpu_standard = ?, ram_standard = ?, gpu_standard = ?, min_score = ?, required_grade = ?, remarks = ? WHERE id = ?',
-        [job_name, cpu_standard, ram_standard, gpu_standard, min_score, remarks, id]
+        [job_name, cpu_standard || '', ram_standard || '', gpu_standard || '', min_score || 0, required_grade || '중급', remarks || '', id]
       );
     } else {
       await connection.query(
-        'INSERT INTO job_spec_standards (job_name, cpu_standard, ram_standard, gpu_standard, min_score, remarks) VALUES (?, ?, ?, ?, ?, ?)',
+        'INSERT INTO job_spec_standards (job_name, cpu_standard, ram_standard, gpu_standard, min_score, required_grade, remarks) VALUES (?, ?, ?, ?, ?, ?, ?)',
-        [job_name, cpu_standard, ram_standard, gpu_standard, min_score, remarks]
+        [job_name, cpu_standard || '', ram_standard || '', gpu_standard || '', min_score || 0, required_grade || '중급', remarks || '']
       );
     }
     res.json({ success: true });
@@ -675,41 +683,16 @@ app.delete('/api/system-users/:id', async (req, res) => {
   }
 });
 
-app.post('/api/maps/save', async (req, res) => {
+app.post('/api/maps/save', (req, res) => {
-  let connection;
   try {
     const { path, boxes } = req.body;
     if (!path) return res.status(400).json({ error: 'Path is required' });
-
+    let config = {};
-    // 1. Get old config to track movements
+    if (fs.existsSync('map_config.json')) config = JSON.parse(fs.readFileSync('map_config.json', 'utf8') || '{}');
-    let oldConfig = {};
+    config[path] = boxes;
-    if (fs.existsSync('map_config.json')) {
+    fs.writeFileSync('map_config.json', JSON.stringify(config, null, 2));
-      oldConfig = JSON.parse(fs.readFileSync('map_config.json', 'utf8') || '{}');
+    res.json({ success: true });
-    }
+  } catch (err) { handleError(res, err, 'SAVE MAPS'); }
-    const oldBoxes = oldConfig[path] || [];
-
-    // 2. Save new config to file
-    oldConfig[path] = boxes;
-    fs.writeFileSync('map_config.json', JSON.stringify(oldConfig, null, 2));
-
-    // 3. Sync Database Assets (asset_location table)
-    connection = await pool.getConnection();
-    for (const box of boxes) {
-      if (box.asset_id) {
-        console.log(`Syncing asset ${box.asset_id} to new position: [${box.x}, ${box.y}]`);
-        await connection.query(
-          'UPDATE asset_location SET loc_x = ?, loc_y = ? WHERE asset_id = ? AND is_active = 1',
-          [box.x, box.y, box.asset_id]
-        );
-      }
-    }
-
-    res.json({ success: true, message: 'Map and Database synced successfully' });
-  } catch (err) { 
-    handleError(res, err, 'SAVE MAPS SYNC'); 
-  } finally {
-    if (connection) connection.release();
-  }
 });
 
 // 7. File Upload API (Base64)

src/components/Modal/BaseModal.ts

@@ -9,7 +9,6 @@ export abstract class BaseModal {
   protected title: string;
   protected currentAsset: any | null = null;
   protected isEditMode: boolean = false;
-  protected currentMode: 'view' | 'edit' | 'add' = 'view';
   protected modalEl: HTMLElement | null = null;
   protected formEl: HTMLFormElement | null = null;
 
@@ -54,23 +53,16 @@ export abstract class BaseModal {
    */
   public open(asset: any, mode: 'view' | 'edit' | 'add' = 'view') {
     this.currentAsset = asset;
-    this.currentMode = mode;
     this.isEditMode = (mode === 'add' || mode === 'edit');
     
     // 폼 초기화 추가
     if (this.formEl) this.formEl.reset();
 
-    // fillFormData를 먼저 호출하여 동적 요소들을 생성한 후 잠금 처리
-    this.fillFormData(asset);
     this.setEditLockMode(mode);
+    this.fillFormData(asset);
     
     if (this.modalEl) {
       this.modalEl.classList.remove('hidden');
-      const content = this.modalEl.querySelector('.modal-content');
-      if (content) {
-        if (mode === 'view') content.classList.add('is-view-mode');
-        else content.classList.remove('is-view-mode');
-      }
     }
     
     this.onAfterOpen(asset, mode);
@@ -119,16 +111,9 @@ export function closeModals() {
 }
 
 export function initBaseModal() {
-  // ESC 키로 모든 모달 닫기 (위치보기 팝업이 있으면 그것부터 닫음)
+  // ESC 키로 모든 모달 닫기
   window.addEventListener('keydown', (e) => {
-    if (e.key === 'Escape') {
+    if (e.key === 'Escape') closeModals();
-      const picker = document.querySelector('.image-picker-overlay');
-      if (picker) {
-        picker.remove();
-      } else {
-        closeModals();
-      }
-    }
   });
 
   return { closeAllModals: closeModals };

src/components/Modal/DashboardDetailModal.ts

@@ -4,14 +4,14 @@ import { createIcons, X } from 'lucide';
 
 const DASHBOARD_DETAIL_MODAL_HTML = `
   <div id="dashboard-detail-modal" class="modal-overlay hidden">
-    <div class="modal-content wide">
+    <div class="modal-content wide" style="max-width: 1000px;">
       <div class="modal-header">
-        <h2 id="dashboard-detail-modal-title" class="modal-title">상세 목록</h2>
+        <h2 id="dashboard-detail-modal-title">상세 목록</h2>
         <button id="btn-close-dashboard-detail-modal" class="btn-icon" aria-label="닫기"><i data-lucide="x"></i></button>
       </div>
       <div class="modal-body">
         <div class="table-container">
-          <table>
+          <table style="width:100%;">
             <thead></thead>
             <tbody id="dashboard-detail-tbody"></tbody>
           </table>

src/components/Modal/DomainModal.ts

@@ -2,7 +2,7 @@ import { state, saveAsset, deleteAsset } from '../../core/state';
 import { BaseModal } from './BaseModal';
 import { CORP_LIST } from './SharedData';
 import { generateOptionsHTML, setFieldValue, getFieldValue } from './ModalUtils';
-import { createIcons, X, Save, History, Plus } from 'lucide';
+import { createIcons, X, Save, Database, CalendarClock, Edit2, History, Plus } from 'lucide';
 import { formatExcelDate } from '../../core/excelHandler';
 import { UI_TEXT } from '../../core/schema';
 
@@ -16,11 +16,8 @@ class DomainAssetModal extends BaseModal {
       <div id="domain-asset-modal" class="modal-overlay hidden">
         <div class="modal-content wide">
           <div class="modal-header">
-            <div class="header-left">
+            <h2 id="domain-modal-title">${this.title}</h2>
-              <h2 id="domain-modal-title" class="modal-title">${this.title}</h2>
+            <button id="btn-close-domain-modal" class="btn-icon" aria-label="닫기"><i data-lucide="x"></i></button>
-              <div id="domain-header-identity" class="header-identity"></div>
-            </div>
-            <button id="btn-close-domain-modal" class="btn-icon" aria-label="닫기">&times;</button>
           </div>
           <div class="modal-body">
             <div class="modal-body-split">
@@ -61,7 +58,7 @@ class DomainAssetModal extends BaseModal {
                   </div>
                   <div class="form-group">
                     <label>비용 (연간/월간)</label>
-                    <input type="text" id="domain-price" name="price" oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/\\B(?=(\\d{3})+(?!\\d))/g, ',')" />
+                    <input type="text" id="domain-price" name="price" oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/\\\\B(?=(\\\\d{3})+(?!\\\\d))/g, ',')" />
                   </div>
 
                   <div class="form-section-title">담당자 및 비고</div>
@@ -81,9 +78,9 @@ class DomainAssetModal extends BaseModal {
               </div>
               <div class="modal-history-area">
                 <div class="history-header">
-                  <h3><i data-lucide="history"></i> 변경 이력</h3>
+                  <h3><i data-lucide="history" style="width:16px; height:16px;"></i> 변경 이력</h3>
                   <button type="button" id="btn-add-domain-log" class="btn btn-outline btn-sm">
-                    이력 추가 <i data-lucide="plus"></i>
+                    이력 추가 <i data-lucide="plus" style="width:14px; height:14px;"></i>
                   </button>
                 </div>
                 <div id="domain-history-list" class="history-timeline"></div>
@@ -144,7 +141,7 @@ class DomainAssetModal extends BaseModal {
       }
     });
 
-    createIcons({ icons: { History, Plus, Save, X } });
+    createIcons({ icons: { History, Plus, Save, CalendarClock, Database } });
   }
 
   protected fillFormData(asset: any): void {
@@ -161,7 +158,6 @@ class DomainAssetModal extends BaseModal {
     setFieldValue('domain-remarks', asset.remarks || '');
 
     this.renderHistory(asset.id);
-    this.updateHeaderIdentity(asset);
   }
 
   protected onAfterOpen(asset: any, mode: string): void {
@@ -170,43 +166,23 @@ class DomainAssetModal extends BaseModal {
     
     const deleteBtn = document.getElementById('btn-delete-domain-asset');
     if (deleteBtn) deleteBtn.style.display = (mode === 'add') ? 'none' : 'block';
-    
-    this.updateHeaderIdentity(asset);
-  }
-
-  private updateHeaderIdentity(asset: any) {
-    const container = document.getElementById('domain-header-identity');
-    if (!container) return;
-    
-    if (this.currentMode === 'add') {
-      container.innerHTML = '<span class="badge badge-primary">신규 등록</span>';
-      return;
-    }
-
-    const type = getFieldValue('domain-type') || asset.type || '';
-    const serviceName = getFieldValue('domain-service-name') || asset.service_name || '';
-    const domainName = getFieldValue('domain-name') || asset.domain_name || '';
-
-    container.innerHTML = `
-      <span class="asset-code-title">${serviceName}</span>
-      <span class="service-type-badge">${type}</span>
-      <span class="asset-type-label">${domainName}</span>
-    `;
   }
 
   private renderHistory(assetId: string) {
     const container = document.getElementById('domain-history-list');
     if (!container) return;
-
+    const logs = (state.masterData.logs || []).filter(l => l.assetId === assetId);
-    const logs = (state.masterData.logs || []).filter(l => l.asset_id === assetId);
+    if (logs.length === 0) { container.innerHTML = '<div class="empty-history">이력이 없습니다.</div>'; return; }
-    if (logs.length === 0) {
+    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('');
-      container.innerHTML = '<div style="color:var(--mute); padding:1rem; text-align:center;">이력이 없습니다.</div>';
-    } else {
-      container.innerHTML = logs.map(l => `<div class="history-item"><div class="history-date">${l.log_date || ''}</div><div class="history-user">${l.log_user || '시스템'}</div><div class="history-details">${l.details}</div></div>`).join('');
-    }
   }
 }
 
 export const domainModal = new DomainAssetModal();
-export function initDomainModal(onSave: () => void, closeModals: () => void) { domainModal.init(onSave, closeModals); }
+
-export function openDomainModal(asset: any, mode: 'view' | 'edit' | 'add' = 'view') { domainModal.open(asset, mode); }
+export function initDomainModal(onSave: () => void, closeModals: () => void) {
+  domainModal.init(onSave, closeModals);
+}
+
+export function openDomainModal(asset: any, mode: 'view' | 'edit' | 'add' = 'view') {
+  domainModal.open(asset, mode);
+}

src/components/Modal/JobSpecModal.ts

@@ -29,27 +29,14 @@ class JobSpecModal extends BaseModal {
                 <input type="text" id="job-spec-job-name" name="job_name" placeholder="예: BIM 모델러, 개발자, 엔지니어" required />
               </div>
 
-              <div class="form-group relative">
-                <label>권장 CPU 사양</label>
-                <input type="text" id="job-spec-cpu-standard" name="cpu_standard" placeholder="CPU 검색..." required autocomplete="off" />
-                <div id="job-spec-cpu-autocomplete" class="autocomplete-list hidden"></div>
-              </div>
-
-              <div class="form-group relative">
-                <label>권장 RAM 사양</label>
-                <input type="text" id="job-spec-ram-standard" name="ram_standard" placeholder="RAM 검색..." required autocomplete="off" />
-                <div id="job-spec-ram-autocomplete" class="autocomplete-list hidden"></div>
-              </div>
-
-              <div class="form-group relative">
-                <label>권장 GPU 사양</label>
-                <input type="text" id="job-spec-gpu-standard" name="gpu_standard" placeholder="GPU 검색..." required autocomplete="off" />
-                <div id="job-spec-gpu-autocomplete" class="autocomplete-list hidden"></div>
-              </div>
-
               <div class="form-group">
-                <label>성능 기준 점수 (이상, 자동 계산됨)</label>
+                <label>요구 PC 등급</label>
-                <input type="number" id="job-spec-min-score" name="min_score" placeholder="자동 계산 대기..." required readonly />
+                <select id="job-spec-required-grade" name="required_grade" style="width: 100%; padding: 8px 12px; border: 1px solid var(--border-color, #E2E8F0); border-radius: 6px; background-color: white; font-size: 14px; font-weight: 600; color: #334155;" required>
+                  <option value="최상급">최상급 (85점 이상)</option>
+                  <option value="상급" selected>상급 (70점 이상)</option>
+                  <option value="중급">중급 (40점 이상)</option>
+                  <option value="보급">보급 (20점 이상)</option>
+                </select>
               </div>
 
               <div class="form-group">
@@ -68,36 +55,6 @@ class JobSpecModal extends BaseModal {
           </div>
         </div>
       </div>
-      <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;
-        }
-      </style>
     `;
   }
 
@@ -115,10 +72,7 @@ class JobSpecModal extends BaseModal {
       }
 
       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 requiredGrade = (document.getElementById('job-spec-required-grade') as HTMLSelectElement).value;
-      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) {
@@ -129,10 +83,11 @@ class JobSpecModal extends BaseModal {
       const updated = {
         id: this.currentAsset.id || null,
         job_name: jobName,
-        cpu_standard: cpuStd,
+        cpu_standard: '',
-        ram_standard: ramStd,
+        ram_standard: '',
-        gpu_standard: gpuStd,
+        gpu_standard: '',
-        min_score: minScoreStr !== '' ? parseInt(minScoreStr, 10) : 0,
+        min_score: 0,
+        required_grade: requiredGrade,
         remarks: remarks
       };
 
@@ -156,85 +111,12 @@ class JobSpecModal extends BaseModal {
         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-required-grade', asset.required_grade || '중급');
-    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 || '');
     this.updateHeaderIdentity(asset);
   }
@@ -275,11 +157,11 @@ class JobSpecModal extends BaseModal {
     }
 
     const jobName = asset.job_name || '';
-    const minScore = asset.min_score || 0;
+    const reqGrade = asset.required_grade || '중급';
 
     container.innerHTML = `
       <span class="asset-code-title">${jobName}</span>
-      <span class="service-type-badge">${minScore}점 기준</span>
+      <span class="service-type-badge">${reqGrade} 요구</span>
     `;
   }
 }

src/components/Modal/ModalUtils.ts

@@ -110,45 +110,29 @@ export function setEditLock(
   const generateBtn = options.generateBtnId ? document.getElementById(options.generateBtnId) : null;
   const addLogBtn = options.addLogBtnId ? document.getElementById(options.addLogBtnId) : null;
 
-  if (!form) return;
+  if (!form || !saveBtn || !revertBtn) return;
 
-  const isEdit = (mode === 'add' || mode === 'edit');
+  if (mode === 'add' || mode === 'edit') {
-
-  if (isEdit) {
     // 편집 모드 활성화
     form.classList.remove('is-view-mode');
     form.classList.add('is-edit-mode');
-    if (saveBtn) saveBtn.textContent = (mode === 'add' ? '등록' : '저장');
+    saveBtn.textContent = '저장';
-    if (revertBtn) revertBtn.classList.toggle('hidden', mode === 'add'); 
+    revertBtn.classList.toggle('hidden', mode === 'add'); // 신규 추가 시에는 취소 버튼 숨김
     
-    // 모든 필드 활성화
+    // 번호 생성 버튼은 '추가(add)' 시에만 노출
-    const inputs = form.querySelectorAll('input, select, textarea');
+    if (generateBtn) {
-    inputs.forEach(input => {
+      generateBtn.style.display = mode === 'add' ? 'flex' : 'none';
-      const el = input as HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
+    }
-      // 자산번호 및 ID 필드는 편집 모드에서도 잠금 유지
+    // 내역 추가 버튼 노출
-      if (el.name !== 'asset_code' && !el.id.includes('asset-id') && !el.id.includes('id-hidden')) {
-        el.disabled = false;
-        if ('readOnly' in el) (el as HTMLInputElement).readOnly = false;
-      }
-    });
-
-    if (generateBtn) generateBtn.style.display = (mode === 'add' ? 'flex' : 'none');
     if (addLogBtn) addLogBtn.style.display = 'flex';
   } else {
     // 조회 모드 (잠금)
     form.classList.remove('is-edit-mode');
     form.classList.add('is-view-mode');
-    if (saveBtn) saveBtn.textContent = '수정';
+    saveBtn.textContent = '수정';
-    if (revertBtn) revertBtn.classList.add('hidden');
+    revertBtn.classList.add('hidden');
-    
-    // 모든 필드 잠금
-    const inputs = form.querySelectorAll('input, select, textarea');
-    inputs.forEach(input => {
-      const el = input as HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
-      el.disabled = true;
-      if ('readOnly' in el) (el as HTMLInputElement).readOnly = true;
-    });
     
+    // 조회 모드에서는 버튼들 숨김
     if (generateBtn) generateBtn.style.display = 'none';
     if (addLogBtn) addLogBtn.style.display = 'none';
   }
@@ -185,9 +169,9 @@ export function createModalFrameHTML(
             </div>
             <div class="modal-history-area">
               <div class="history-header">
-                <h3><i data-lucide="history" class="icon-sm"></i> ${options.historyTitle}</h3>
+                <h3><i data-lucide="history" style="width:16px; height:16px;"></i> ${options.historyTitle}</h3>
-                <button type="button" id="btn-add-${idPrefix}-log" class="btn btn-outline btn-sm">
+                <button type="button" id="${options.addLogBtnId}" class="btn btn-outline btn-sm">
-                  내역 추가 <i data-lucide="plus" class="icon-sm"></i>
+                  내역 추가 <i data-lucide="plus" style="width:14px; height:14px;"></i>
                 </button>
               </div>
               <div id="${idPrefix}-history-list" class="history-timeline"></div>

src/components/Modal/PCFlowModal.ts

@@ -61,12 +61,7 @@ export class PCFlowModal {
     this.currentFlowType = 'checkout';
     
     const radioCheckout = document.querySelector('input[name="flow-type"][value="checkout"]') as HTMLInputElement;
-    if (radioCheckout) {
+    if (radioCheckout) radioCheckout.checked = true;
-        radioCheckout.checked = true;
-        document.querySelectorAll('.flow-type-label').forEach(l => {
-            l.classList.toggle('active', l.contains(radioCheckout));
-        });
-    }
 
     // Reset text fields
     const userSearch = document.getElementById('pc-flow-user-search') as HTMLInputElement;
@@ -314,17 +309,21 @@ export class PCFlowModal {
   private renderUserSuggestions(users: any[], container: HTMLElement, onSelect: (user: any) => void) {
     container.innerHTML = '';
     if (users.length === 0) {
-      container.innerHTML = '<div class="autocomplete-item-empty">일치하는 사원이 없습니다.</div>';
+      container.innerHTML = '<div style="padding: 10px; color: var(--text-muted); font-size: 13px;">일치하는 사원이 없습니다.</div>';
       container.classList.remove('hidden');
       return;
     }
 
     users.forEach(u => {
       const item = document.createElement('div');
-      item.className = 'autocomplete-item';
+      item.style.padding = '8px 12px';
+      item.style.cursor = 'pointer';
+      item.style.fontSize = '13px';
+      item.style.borderBottom = '1px solid #F3F4F6';
+      item.className = 'suggestion-item';
       item.innerHTML = `
-        <div class="suggestion-name">${u.user_name}</div>
+        <div style="font-weight: 700; color: var(--text-main);">${u.user_name}</div>
-        <div class="suggestion-meta">
+        <div style="font-size: 11px; color: var(--text-muted); display: flex; gap: 8px;">
           <span>부서: ${u.dept_name}</span>
           <span>|</span>
           <span>사번: ${u.emp_no || '-'}</span>
@@ -339,17 +338,21 @@ export class PCFlowModal {
   private renderPCSuggestions(pcs: any[], container: HTMLElement, onSelect: (pc: any) => void) {
     container.innerHTML = '';
     if (pcs.length === 0) {
-      container.innerHTML = '<div class="autocomplete-item-empty">불출 가능한 대기 PC 재고가 없습니다.</div>';
+      container.innerHTML = '<div style="padding: 10px; color: var(--text-muted); font-size: 13px;">불출 가능한 대기 PC 재고가 없습니다.</div>';
       container.classList.remove('hidden');
       return;
     }
 
     pcs.forEach(p => {
       const item = document.createElement('div');
-      item.className = 'autocomplete-item';
+      item.style.padding = '8px 12px';
+      item.style.cursor = 'pointer';
+      item.style.fontSize = '13px';
+      item.style.borderBottom = '1px solid #F3F4F6';
+      item.className = 'suggestion-item';
       item.innerHTML = `
-        <div class="suggestion-name">${p.asset_code} (${p.model_name || '모델명 없음'})</div>
+        <div style="font-weight: 700; color: var(--primary-color);">${p.asset_code} (${p.model_name || '모델명 없음'})</div>
-        <div class="suggestion-meta">
+        <div style="font-size: 11px; color: var(--text-muted);">
           사양: CPU ${p.cpu || '-'} / RAM ${p.ram || '-'} / 위치: ${p.location || '-'}
         </div>
       `;
@@ -430,14 +433,14 @@ export class PCFlowModal {
       );
 
       if (userPcs.length === 0) {
-        userPcsList.innerHTML = '<div class="empty-list-message">이 사용자가 소유한 PC 자산이 없습니다.</div>';
+        userPcsList.innerHTML = '<div style="font-size: 12px; color: var(--text-muted); padding: 8px 0;">이 사용자가 소유한 PC 자산이 없습니다.</div>';
       } else {
         userPcsList.innerHTML = userPcs.map(p => {
           const isSelected = this.selectedPC && this.selectedPC.id === p.id;
           return `
-            <div class="user-pc-item ${isSelected ? 'selected' : ''}" data-id="${p.id}">
+            <div class="user-pc-item ${isSelected ? 'selected' : ''}" data-id="${p.id}" style="padding: 10px; border: 1px solid ${isSelected ? 'var(--primary-color)' : 'var(--border-color)'}; border-radius: 4px; cursor: pointer; background: ${isSelected ? 'var(--primary-light)' : 'white'}; transition: all 0.2s;">
-              <div class="pc-item-code">${p.asset_code}</div>
+              <div style="font-weight: 700; font-size: 13px; color: ${isSelected ? 'var(--primary-color)' : 'var(--text-main)'};">${p.asset_code}</div>
-              <div class="pc-item-meta">
+              <div style="font-size: 11px; color: var(--text-muted); margin-top: 2px;">
                 ${p.model_name || '모델명 없음'} | CPU: ${p.cpu || '-'} | RAM: ${p.ram || '-'}
               </div>
             </div>
@@ -462,132 +465,159 @@ export class PCFlowModal {
   }
 
   private renderHTML(): string {
+    const overlayStyle = `
+      position: fixed; top: 0; left: 0; right: 0; bottom: 0;
+      background: rgba(0, 0, 0, 0.4); display: flex; align-items: center; justify-content: center;
+      z-index: 1000; transition: opacity 0.3s;
+    `;
+    const contentStyle = `
+      background: white; border-radius: 12px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
+      overflow: hidden; max-height: 90vh; width: 950px; display: flex; flex-direction: column;
+    `;
+    const labelStyle = 'display: block; font-size: 13px; font-weight: 700; color: var(--text-muted); margin-bottom: 8px;';
+    const inputStyle = 'width: 100%; height: 38px; padding: 0 12px; border: 1px solid var(--border-color); border-radius: 4px; font-size: 13px; outline: none; box-sizing: border-box;';
+    const inputWithIconStyle = 'width: 100%; height: 38px; padding: 0 12px 0 36px; border: 1px solid var(--border-color); border-radius: 4px; font-size: 13px; outline: none; box-sizing: border-box;';
+
     return `
-      <div id="pc-flow-modal" class="modal-overlay hidden">
+      <div id="pc-flow-modal" class="modal-overlay hidden" style="${overlayStyle}">
-        <div class="modal-content wide">
+        <div class="modal-content" style="${contentStyle}">
-          <div class="modal-header">
+          
-            <h2 class="modal-title">
+          <div class="modal-header" style="background: var(--primary-color); padding: 16px 24px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-color);">
+            <h2 style="margin: 0; font-size: 18px; font-weight: 800; color: white; display: flex; align-items: center; gap: 8px;">
               <i data-lucide="refresh-cw"></i> PC 이동/반납 (불출/반납/이동)
             </h2>
-            <button id="btn-close-pc-flow-modal" class="btn-icon" aria-label="닫기">&times;</button>
+            <button id="btn-close-pc-flow-modal" class="btn-icon" aria-label="닫기" style="font-size: 28px; color: white; background: none; border: none; cursor: pointer; line-height: 1;">&times;</button>
           </div>
 
-          <div class="modal-body">
+          <div class="modal-body" style="padding: 24px; overflow-y: auto; display: flex; gap: 24px;">
-            <div class="modal-body-split">
+            <!-- 왼쪽 영역: 입력 폼 -->
-              <!-- 왼쪽 영역: 입력 폼 -->
+            <div style="flex: 1.2; display: flex; flex-direction: column; gap: 20px;">
-              <div class="modal-form-area">
-                <div class="grid-form flex-col">
               
-                  <!-- 1. 처리 유형 -->
+              <!-- 1. 처리 유형 -->
-                  <div class="form-group">
+              <div>
-                    <label>1. 처리 유형 선택</label>
+                <label style="${labelStyle}">1. 처리 유형 선택</label>
-                    <div class="view-toggle w-full flex-row">
+                <div style="display: flex; gap: 12px;">
-                      <label class="flow-type-label toggle-btn active flex-1 text-center">
+                  <label class="flow-type-label active" style="flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; border: 1px solid var(--border-color); border-radius: 6px; cursor: pointer; font-size: 14px; font-weight: 600;">
-                        <input type="radio" name="flow-type" value="checkout" checked class="hidden" />
+                    <input type="radio" name="flow-type" value="checkout" checked style="display:none;" />
-                        불출 (지급)
+                    불출 (지급)
-                      </label>
+                  </label>
-                      <label class="flow-type-label toggle-btn flex-1 text-center">
+                  <label class="flow-type-label" style="flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; border: 1px solid var(--border-color); border-radius: 6px; cursor: pointer; font-size: 14px; font-weight: 600;">
-                        <input type="radio" name="flow-type" value="return" class="hidden" />
+                    <input type="radio" name="flow-type" value="return" style="display:none;" />
-                        입고 (반납)
+                    입고 (반납)
-                      </label>
+                  </label>
-                      <label class="flow-type-label toggle-btn flex-1 text-center">
+                  <label class="flow-type-label" style="flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; border: 1px solid var(--border-color); border-radius: 6px; cursor: pointer; font-size: 14px; font-weight: 600;">
-                        <input type="radio" name="flow-type" value="move" class="hidden" />
+                    <input type="radio" name="flow-type" value="move" style="display:none;" />
-                        이동 (이관)
+                    이동 (이관)
-                      </label>
+                  </label>
-                    </div>
-                  </div>
-
-                  <!-- 2. 대상 사용자 검색 -->
-                  <div class="form-group relative">
-                    <label id="user-search-label">2. 대상 사원 검색</label>
-                    <div class="input-with-icon">
-                      <input type="text" id="pc-flow-user-search" placeholder="사원명, 부서, 사번 검색..." />
-                      <i data-lucide="search" class="icon-sm"></i>
-                    </div>
-                    <div id="pc-flow-user-suggestions" class="autocomplete-list hidden"></div>
-                  </div>
-
-                  <!-- 3. 새 인수자 검색 (이동 시 노출) -->
-                  <div id="target-user-search-container" class="form-group hidden relative">
-                    <label>새 인수 사원 검색</label>
-                    <div class="input-with-icon">
-                      <input type="text" id="pc-flow-target-user-search" placeholder="사원명, 부서, 사번 검색..." />
-                      <i data-lucide="search" class="icon-sm"></i>
-                    </div>
-                    <div id="pc-flow-target-user-suggestions" class="autocomplete-list hidden"></div>
-                  </div>
-
-                  <!-- 4. 재고 PC 검색 (불출 시 노출) -->
-                  <div id="stock-pc-search-container" class="form-group relative">
-                    <label>3. 불출할 재고 PC 선택</label>
-                    <div class="input-with-icon">
-                      <input type="text" id="pc-flow-stock-search" placeholder="자산코드 또는 모델명 검색..." />
-                      <i data-lucide="monitor" class="icon-sm"></i>
-                    </div>
-                    <div id="pc-flow-stock-suggestions" class="autocomplete-list hidden"></div>
-                  </div>
-
-                  <!-- 5. 상세 공통 입력 -->
-                  <div class="detail-grid-2col">
-                    <div class="form-group">
-                      <label>처리 일자</label>
-                      <input type="date" id="pc-flow-date" />
-                    </div>
-                    <div class="form-group">
-                      <label>상세 사유</label>
-                      <textarea id="pc-flow-details" rows="2" placeholder="미입력 시 기본 문구로 자동 입력됩니다."></textarea>
-                    </div>
-                  </div>
                 </div>
               </div>
 
-              <!-- 오른쪽 영역: 선택 요약 & 사원 소유 자산 목록 -->
+              <!-- 2. 대상 사용자 검색 -->
-              <div class="modal-history-area">
+              <div style="position: relative;">
-                <div class="history-header">
+                <label id="user-search-label" style="${labelStyle}">2. 대상 사원 검색</label>
-                  <h3>선택 내역 요약</h3>
+                <div style="position: relative; display: flex; align-items: center;">
+                  <input type="text" id="pc-flow-user-search" placeholder="사원명, 부서, 사번 검색..." style="${inputWithIconStyle}" />
+                  <i data-lucide="search" style="position: absolute; left: 10px; width: 16px; height: 16px; color: var(--text-muted);"></i>
                 </div>
+                <div id="pc-flow-user-suggestions" class="hidden" style="position: absolute; top: 100%; left: 0; right: 0; max-height: 200px; overflow-y: auto; background: white; border: 1px solid var(--border-color); border-radius: 4px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); z-index: 1000; margin-top: 4px;"></div>
+              </div>
 
-                <div class="dynamic-row-container">
+              <!-- 3. 새 인수자 검색 (이동 시 노출) -->
-                  <!-- 사원 요약 카드 -->
+              <div id="target-user-search-container" class="hidden" style="position: relative;">
-                  <div id="summary-user-card" class="summary-info-card">
+                <label style="${labelStyle}">새 인수 사원 검색</label>
-                    <div class="detail-label-sm">대상 사원</div>
+                <div style="position: relative; display: flex; align-items: center;">
-                    <div id="summary-user-name" class="detail-value-lg">선택된 사원 없음</div>
+                  <input type="text" id="pc-flow-target-user-search" placeholder="사원명, 부서, 사번 검색..." style="${inputWithIconStyle}" />
-                    <div id="summary-user-dept" class="detail-label-sm">-</div>
+                  <i data-lucide="search" style="position: absolute; left: 10px; width: 16px; height: 16px; color: var(--text-muted);"></i>
-                  </div>
+                </div>
+                <div id="pc-flow-target-user-suggestions" class="hidden" style="position: absolute; top: 100%; left: 0; right: 0; max-height: 200px; overflow-y: auto; background: white; border: 1px solid var(--border-color); border-radius: 4px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); z-index: 1000; margin-top: 4px;"></div>
+              </div>
 
-                  <!-- 인수 사원 요약 카드 (이동 전용) -->
+              <!-- 4. 재고 PC 검색 (불출 시 노출) -->
-                  <div id="summary-target-user-card" class="summary-info-card hidden bg-primary-light">
+              <div id="stock-pc-search-container" style="position: relative;">
-                    <div class="detail-label-sm">새 인수 사원</div>
+                <label style="${labelStyle}">3. 불출할 재고 PC 선택</label>
-                    <div id="summary-target-user-name" class="detail-value-lg">선택된 사원 없음</div>
+                <div style="position: relative; display: flex; align-items: center;">
-                    <div id="summary-target-user-dept" class="detail-label-sm">-</div>
+                  <input type="text" id="pc-flow-stock-search" placeholder="자산코드 또는 모델명 검색..." style="${inputWithIconStyle}" />
-                  </div>
+                  <i data-lucide="monitor" style="position: absolute; left: 10px; width: 16px; height: 16px; color: var(--text-muted);"></i>
+                </div>
+                <div id="pc-flow-stock-suggestions" class="hidden" style="position: absolute; top: 100%; left: 0; right: 0; max-height: 200px; overflow-y: auto; background: white; border: 1px solid var(--border-color); border-radius: 4px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); z-index: 1000; margin-top: 4px;"></div>
+              </div>
 
-                  <!-- 대상 PC 자산 요약 카드 -->
+              <!-- 5. 상세 공통 입력 -->
-                  <div id="summary-pc-card" class="summary-info-card">
+              <div style="display: flex; gap: 16px;">
-                    <div class="detail-label-sm">대상 PC 자산</div>
+                <div style="flex: 1;">
-                    <div id="summary-pc-code" class="detail-value-lg text-success">선택된 PC 없음</div>
+                  <label style="${labelStyle.replace('margin-bottom: 8px;', 'margin-bottom: 6px;')}">처리 일자</label>
-                    <div id="summary-pc-model" class="detail-label-sm">-</div>
+                  <input type="date" id="pc-flow-date" style="${inputStyle}" />
-                  </div>
+                </div>
-
+                <div style="flex: 2;">
-                  <!-- 사용자 보유 PC 목록 선택 (반납/이동 시) -->
+                  <label style="${labelStyle.replace('margin-bottom: 8px;', 'margin-bottom: 6px;')}">상세 사유</label>
-                  <div id="user-pcs-container" class="form-group hidden">
+                  <textarea id="pc-flow-details" rows="2" placeholder="미입력 시 기본 문구로 자동 입력됩니다." style="width: 100%; padding: 10px; border: 1px solid var(--border-color); border-radius: 4px; font-family: inherit; font-size: 13px; resize: none; box-sizing: border-box; outline: none;"></textarea>
-                    <label>사원 보유 PC 선택 (클릭하여 매핑)</label>
-                    <div id="user-pcs-list" class="user-pc-selection-list"></div>
-                  </div>
                 </div>
               </div>
+
             </div>
+
+            <!-- 오른쪽 영역: 선택 요약 & 사원 소유 자산 목록 -->
+            <div style="flex: 0.8; border-left: 1px solid var(--border-color); padding-left: 24px; display: flex; flex-direction: column; gap: 16px;">
+              <h3 style="margin: 0; font-size: 14px; font-weight: 800; border-bottom: 1px solid var(--border-color); padding-bottom: 8px;">선택 내역 요약</h3>
+              
+              <!-- 사원 요약 카드 -->
+              <div id="summary-user-card" style="padding: 12px; background: var(--bg-light); border: 1px solid var(--border-color); border-radius: 6px; display: flex; flex-direction: column; gap: 4px;">
+                <div style="font-size: 11px; color: var(--text-muted);">대상 사원</div>
+                <div id="summary-user-name" style="font-weight: 700; font-size: 14px;">선택된 사원 없음</div>
+                <div id="summary-user-dept" style="font-size: 12px; color: var(--text-muted);">-</div>
+              </div>
+
+              <!-- 인수 사원 요약 카드 (이동 전용) -->
+              <div id="summary-target-user-card" class="summary-card hidden" style="padding: 12px; background: #EEF2F6; border: 1px solid var(--border-color); border-radius: 6px; display: flex; flex-direction: column; gap: 4px;">
+                <div style="font-size: 11px; color: var(--text-muted);">새 인수 사원</div>
+                <div id="summary-target-user-name" style="font-weight: 700; font-size: 14px;">선택된 사원 없음</div>
+                <div id="summary-target-user-dept" style="font-size: 12px; color: var(--text-muted);">-</div>
+              </div>
+
+              <!-- 대상 PC 자산 요약 카드 -->
+              <div id="summary-pc-card" style="padding: 12px; background: var(--bg-light); border: 1px solid var(--border-color); border-radius: 6px; display: flex; flex-direction: column; gap: 4px;">
+                <div style="font-size: 11px; color: var(--text-muted);">대상 PC 자산</div>
+                <div id="summary-pc-code" style="font-weight: 700; font-size: 14px; color: var(--primary-color);">선택된 PC 없음</div>
+                <div id="summary-pc-model" style="font-size: 12px; color: var(--text-muted);">-</div>
+              </div>
+
+              <!-- 사용자 보유 PC 목록 선택 (반납/이동 시) -->
+              <div id="user-pcs-container" class="hidden" style="display: flex; flex-direction: column; gap: 8px;">
+                <div style="font-size: 12px; font-weight: 700; color: var(--text-muted);">사원 보유 PC 선택 (클릭하여 매핑)</div>
+                <div id="user-pcs-list" style="display: flex; flex-direction: column; gap: 8px; max-height: 200px; overflow-y: auto;"></div>
+              </div>
+            </div>
+
           </div>
 
-          <div class="modal-footer">
+          <div class="modal-footer" style="padding: 16px 24px; border-top: 1px solid var(--border-color); display: flex; justify-content: flex-end; gap: 12px; background: var(--bg-light);">
-            <div></div>
+            <button id="btn-cancel-pc-flow-modal" class="btn btn-outline" style="height: 42px;">취소</button>
-            <div class="footer-actions">
+            <button id="btn-submit-pc-flow" class="btn btn-primary" style="height: 42px;">이동/반납 처리 완료</button>
-              <button id="btn-cancel-pc-flow-modal" class="btn btn-outline">취소</button>
-              <button id="btn-submit-pc-flow" class="btn btn-primary">이동/반납 처리 완료</button>
-            </div>
           </div>
+
         </div>
       </div>
+      
+      <style>
+        .flow-type-label {
+          transition: all 0.2s;
+          border-color: var(--border-color);
+          background: white;
+          color: var(--text-muted);
+        }
+        .flow-type-label:hover {
+          border-color: var(--primary-color);
+          color: var(--primary-color);
+        }
+        .flow-type-label.active {
+          border-color: var(--primary-color);
+          background: var(--primary-light);
+          color: var(--primary-color);
+        }
+        .suggestion-item:hover {
+          background-color: var(--primary-light) !important;
+        }
+      </style>
     `;
   }
 }

src/components/Modal/PartsMasterModal.ts

@@ -1,7 +1,7 @@
 import { state, savePartsMaster, deletePartsMaster } from '../../core/state';
 import { BaseModal } from './BaseModal';
 import { generateOptionsHTML, setFieldValue, getFieldValue } from './ModalUtils';
-import { createIcons, X, Save, Plus } from 'lucide';
+import { createIcons, X, Save, Database, Edit2, Plus } from 'lucide';
 import { UI_TEXT } from '../../core/schema';
 
 class PartsMasterModal extends BaseModal {
@@ -10,51 +10,52 @@ class PartsMasterModal extends BaseModal {
   }
 
   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 narrow">
+        <div class="modal-content" style="max-width: 500px; width: 100%;">
           <div class="modal-header">
-            <div class="header-left">
+            <h2 id="parts-master-modal-title" style="margin: 0; font-size: 18px; font-weight: 800; color: white;">${this.title}</h2>
-              <h2 id="parts-master-modal-title" class="modal-title">${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 id="parts-master-header-identity" class="header-identity"></div>
-            </div>
-            <button id="btn-close-parts-master-modal" class="btn-icon" aria-label="닫기">&times;</button>
           </div>
-          <div class="modal-body">
+          <div class="modal-body" style="padding: 24px; overflow-y: auto;">
-            <form id="parts-master-asset-form" class="grid-form vertical-form">
+            <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">
+              <div class="form-group" style="display: flex; flex-direction: column; gap: 6px;">
-                <label>부품 분류</label>
+                <label style="font-size: 11px; font-weight: 700; color: var(--text-muted);">부품 분류</label>
-                <select id="parts-master-category" name="category">
+                <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">
+              <div class="form-group" style="display: flex; flex-direction: column; gap: 6px;">
-                <label>부품 표준 명칭</label>
+                <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 />
+                <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">
+              <div class="form-group" style="display: flex; flex-direction: column; gap: 6px;">
-                <label>성능 등급</label>
+                <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 />
+                <input type="text" id="parts-master-score-tier" name="score_tier" placeholder="예: i7 / S / 최적" required style="${inputStyle} width: 100%;" />
               </div>
 
-              <div class="form-group">
+              <div class="form-group" style="display: flex; flex-direction: column; gap: 6px;">
-                <label>감점 점수 (양수로 입력)</label>
+                <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 />
+                <input type="number" id="parts-master-deduction" name="deduction" placeholder="예: 5" required style="${inputStyle} width: 100%;" />
               </div>
             </form>
           </div>
-          <div class="modal-footer">
+          <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">삭제</button>
+            <button id="btn-delete-parts-master-asset" class="btn btn-outline btn-danger" style="height: 42px;">삭제</button>
-            <div class="footer-actions">
+            <div class="footer-actions" style="display: flex; gap: 8px;">
-              <button id="btn-revert-parts-master-edit" class="btn btn-outline hidden">수정 취소</button>
+              <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">닫기</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">수정</button>
+              <button id="btn-save-parts-master-asset" class="btn btn-primary" style="height: 42px;">수정</button>
             </div>
           </div>
         </div>
@@ -108,13 +109,11 @@ class PartsMasterModal extends BaseModal {
       if (!this.currentAsset || !this.currentAsset.id) return;
       if (!confirm('정말로 이 부품 마스터 정보를 삭제하시겠습니까?\n삭제 시 기존 등록 PC 중 이 부품명을 사용하는 PC의 자동완성 정합성 체크에 영향을 줄 수 있습니다.')) return;
 
-      if (await deletePartsMaster(Number(this.currentAsset.id))) {
+      if (await deletePartsMaster(this.currentAsset.id)) {
         alert('성공적으로 삭제되었습니다.');
         onSave(); this.close(); closeModals();
       }
     });
-    
-    createIcons({ icons: { Plus, X, Save } });
   }
 
   protected fillFormData(asset: any): void {
@@ -123,49 +122,45 @@ class PartsMasterModal extends BaseModal {
     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');
-    this.updateHeaderIdentity(asset);
   }
 
   protected onAfterOpen(asset: any, mode: string): void {
     const titleEl = document.getElementById('parts-master-modal-title');
+
     if (titleEl) {
-      titleEl.textContent = (mode === 'add') ? '신규 부품 마스터 등록' : '부품 마스터 상세 편집';
+      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' || mode === 'edit') {
+    if (mode === 'add') {
-      saveBtn.textContent = (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.updateHeaderIdentity(asset);
-  }
-
-  private updateHeaderIdentity(asset: any) {
-    const container = document.getElementById('parts-master-header-identity');
-    if (!container) return;
-    
-    if (this.currentMode === 'add') {
-      container.innerHTML = '<span class="badge badge-primary">신규 등록</span>';
-      return;
-    }
-
-    const cat = asset.category || '';
-    const name = asset.component_name || '';
-
-    container.innerHTML = `
-      <span class="asset-code-title">${name}</span>
-      <span class="service-type-badge">${cat}</span>
-    `;
   }
 }
 
 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); }
+export function initPartsMasterModal(onSave: () => void, closeModals: () => void) {
+  partsMasterModal.init(onSave, closeModals);
+}
+
+export function openPartsMasterModal(asset: any, mode: 'view' | 'edit' | 'add' = 'view') {
+  partsMasterModal.open(asset, mode);
+}

src/components/Modal/SWModal.ts

@@ -1,7 +1,7 @@
 import { state, saveAsset, deleteAsset } from '../../core/state';
 import { BaseModal } from './BaseModal';
 import { openSwUserModal } from './SWUserModal';
-import { createIcons, History, Plus, X, Save, RotateCcw, Calendar, Users } from 'lucide';
+import { createIcons, History, Plus, X, Save, Edit2, RotateCcw, Calendar, Users } from 'lucide';
 import { CORP_LIST } from './SharedData';
 import { ASSET_SCHEMA, UI_TEXT } from '../../core/schema';
 import { API_BASE_URL } from '../../core/utils';
@@ -22,11 +22,8 @@ class SwAssetModal extends BaseModal {
       <div id="sw-asset-modal" class="modal-overlay hidden">
         <div class="modal-content wide">
           <div class="modal-header">
-            <div class="header-left">
+            <h2 id="sw-modal-title">${this.title}</h2>
-              <h2 id="sw-modal-title" class="modal-title">${this.title}</h2>
+            <button id="btn-close-sw-modal" class="btn-icon" aria-label="닫기"><i data-lucide="x"></i></button>
-              <div id="sw-header-identity" class="header-identity"></div>
-            </div>
-            <button id="btn-close-sw-modal" class="btn-icon" aria-label="닫기">&times;</button>
           </div>
           <div class="modal-body">
             <div class="modal-body-split">
@@ -84,7 +81,7 @@ class SwAssetModal extends BaseModal {
                   </div>
                   <div class="form-group sw-standard-field">
                     <label>${ASSET_SCHEMA.PURCHASE_AMOUNT.ui}</label>
-                    <input type="text" id="sw-금액" name="purchase_amount" oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/\\B(?=(\\d{3})+(?!\\d))/g, ',')" />
+                    <input type="text" id="sw-금액" name="purchase_amount" oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/\\\\B(?=(\\\\d{3})+(?!\\\\d))/g, ',')" />
                   </div>
 
                   <div class="form-group cloud-only">
@@ -103,12 +100,12 @@ class SwAssetModal extends BaseModal {
                   <div class="form-section-title">관리 및 비고</div>
                   <div class="form-group sw-standard-field">
                     <label>${ASSET_SCHEMA.PURCHASE_DATE.ui}</label>
-                    <div class="input-with-btn">
+                    <div style="display:flex; gap:0.25rem; align-items:center; position:relative;">
-                      <input type="text" id="sw-구매일" name="purchase_date" />
+                      <input type="text" id="sw-구매일" name="purchase_date" style="flex:1;" />
-                      <button type="button" class="btn-icon" onclick="const p = document.getElementById('sw-구매일-picker'); p.value = document.getElementById('sw-구매일').value; p.showPicker();">
+                      <button type="button" class="btn-icon" onclick="const p = document.getElementById('sw-구매일-picker'); p.value = document.getElementById('sw-구매일').value; p.showPicker();" style="padding:0.25rem;">
-                        <i data-lucide="calendar"></i>
+                        <i data-lucide="calendar" style="width:18px; height:18px; color:var(--primary-color);"></i>
                       </button>
-                      <input type="date" id="sw-구매일-picker" class="hidden-picker" onchange="document.getElementById('sw-구매일').value = this.value" tabindex="-1" />
+                      <input type="date" id="sw-구매일-picker" style="position:absolute; width:0; height:0; opacity:0; pointer-events:none;" onchange="document.getElementById('sw-구매일').value = this.value" tabindex="-1" />
                     </div>
                   </div>
                   <div class="form-group sw-standard-field">
@@ -129,12 +126,12 @@ class SwAssetModal extends BaseModal {
                   </div>
                   <div class="form-group sw-standard-field" id="sw-expiry-group">
                     <label>${ASSET_SCHEMA.EXPIRED_DATE.ui}</label>
-                    <div class="input-with-btn">
+                    <div style="display:flex; gap:0.25rem; align-items:center; position:relative;">
-                      <input type="text" id="sw-만료일" name="expiry_date" />
+                      <input type="text" id="sw-만료일" name="expiry_date" style="flex:1;" />
-                      <button type="button" class="btn-icon" onclick="const p = document.getElementById('sw-만료일-picker'); p.value = document.getElementById('sw-만료일').value; p.showPicker();">
+                      <button type="button" class="btn-icon" onclick="const p = document.getElementById('sw-만료일-picker'); p.value = document.getElementById('sw-만료일').value; p.showPicker();" style="padding:0.25rem;">
-                        <i data-lucide="calendar"></i>
+                        <i data-lucide="calendar" style="width:18px; height:18px; color:var(--primary-color);"></i>
                       </button>
-                      <input type="date" id="sw-만료일-picker" class="hidden-picker" onchange="document.getElementById('sw-만료일').value = this.value" tabindex="-1" />
+                      <input type="date" id="sw-만료일-picker" style="position:absolute; width:0; height:0; opacity:0; pointer-events:none;" onchange="document.getElementById('sw-만료일').value = this.value" tabindex="-1" />
                     </div>
                   </div>
                   <div class="form-group full-width">
@@ -143,18 +140,18 @@ class SwAssetModal extends BaseModal {
                   </div>
                 </form>
 
-                <div id="sw-user-section" class="user-management-section">
+                <div id="sw-user-section" class="user-management-section" style="margin-top: 2rem; border-top: 1px solid var(--border-color); padding-top: 1.5rem;">
                   <button type="button" id="btn-open-sw-user" class="btn btn-outline btn-sm" title="사용자 관리">
-                    <i data-lucide="users"></i> 사용자 관리
+                    <i data-lucide="users" style="width:16px; height:16px; margin-right:4px;"></i> 사용자 관리
                   </button>
                 </div>
               </div>
 
               <div class="modal-history-area">
-                <div class="history-header">
+                <div class="history-header" style="display:flex; justify-content:space-between; align-items:center;">
-                  <h3><i data-lucide="history"></i> 업데이트 내역</h3>
+                  <h3><i data-lucide="history" style="width:16px; height:16px;"></i> 업데이트 내역</h3>
                   <button type="button" id="btn-open-sw-update" class="btn btn-outline btn-sm">
-                    계약 업데이트 <i data-lucide="rotate-ccw"></i>
+                    계약 업데이트 <i data-lucide="refresh-ccw" style="width:14px; height:14px;"></i>
                   </button>
                 </div>
                 <div id="sw-history-list" class="history-timeline"></div>
@@ -173,24 +170,24 @@ class SwAssetModal extends BaseModal {
       </div>
 
       <!-- 계약 업데이트 서브 모달 -->
-      <div id="sw-update-modal" class="modal-overlay hidden sub-modal">
+      <div id="sw-update-modal" class="modal-overlay hidden" style="z-index: 1100;">
-        <div class="modal-content narrow">
+        <div class="modal-content" style="max-width: 500px;">
           <div class="modal-header">
-            <h2 class="modal-title">계약 업데이트 반영</h2>
+            <h2>계약 업데이트 반영</h2>
-            <button id="btn-close-sw-update" class="btn-icon">&times;</button>
+            <button id="btn-close-sw-update" class="btn-icon"><i data-lucide="x"></i></button>
           </div>
           <div class="modal-body">
-            <div class="grid-form vertical-form">
+            <div class="grid-form" style="grid-template-columns: 1fr;">
               <div class="form-group">
                 <label>업데이트 일자</label>
                 <input type="date" id="sw-update-date" />
               </div>
               <div class="form-group sub-sw-update">
                 <label>새로운 계약 기간</label>
-                <div class="input-with-btn">
+                <div style="display: flex; align-items: center; gap: 0.5rem;">
-                  <input type="text" id="sw-update-start" placeholder="YYYY-MM-DD" />
+                  <input type="text" id="sw-update-start" placeholder="YYYY-MM-DD" style="flex: 1;" />
                   <span>~</span>
-                  <input type="text" id="sw-update-end" placeholder="YYYY-MM-DD" />
+                  <input type="text" id="sw-update-end" placeholder="YYYY-MM-DD" style="flex: 1;" />
                 </div>
               </div>
               <div class="form-group">
@@ -212,15 +209,6 @@ class SwAssetModal extends BaseModal {
           </div>
         </div>
       </div>
-      <style>
-        .hidden-picker {
-          position: absolute;
-          width: 0;
-          height: 0;
-          opacity: 0;
-          pointer-events: none;
-        }
-      </style>
     `;
   }
 
@@ -243,6 +231,7 @@ class SwAssetModal extends BaseModal {
       if (this.currentAsset) openSwUserModal(this.currentAsset);
     });
 
+    // 업데이트 모달 로직
     const subModal = document.getElementById('sw-update-modal')!;
     const closeUpdate = () => subModal.classList.add('hidden');
     document.getElementById('btn-close-sw-update')?.addEventListener('click', closeUpdate);
@@ -333,32 +322,10 @@ class SwAssetModal extends BaseModal {
     }
 
     this.renderHistory(asset.id);
-    this.updateHeaderIdentity(asset);
   }
 
   protected onAfterOpen(asset: any, mode: string): void {
     this.applySwTypeUI(asset.asset_type || asset.type);
-    this.updateHeaderIdentity(asset);
-  }
-
-  private updateHeaderIdentity(asset: any) {
-    const container = document.getElementById('sw-header-identity');
-    if (!container) return;
-    
-    if (this.currentMode === 'add') {
-      container.innerHTML = '<span class="badge badge-primary">신규 등록</span>';
-      return;
-    }
-
-    const type = getFieldValue('sw-asset-type') || asset.asset_type || asset.type || '';
-    const name = getFieldValue('sw-제품명') || asset.product_name || '';
-    const corp = getFieldValue('sw-법인') || asset.purchase_corp || '';
-
-    container.innerHTML = `
-      <span class="asset-code-title">${name}</span>
-      <span class="service-type-badge">${corp}</span>
-      <span class="asset-type-label">${type}</span>
-    `;
   }
 
   private applySwTypeUI(type: string) {
@@ -387,12 +354,18 @@ class SwAssetModal extends BaseModal {
   private renderHistory(swId: string) {
     const container = document.getElementById('sw-history-list');
     if (!container) return;
-    const logs = (state.masterData.logs || []).filter(l => l.asset_id === swId);
+    const logs = (state.masterData.logs || []).filter(l => l.assetId === swId);
     if (logs.length === 0) { container.innerHTML = '<div class="empty-history">수정 이력이 없습니다.</div>'; return; }
-    container.innerHTML = logs.map(l => `<div class="history-item"><div class="history-date">${l.log_date || ''}</div><div class="history-user">${l.log_user || '시스템'}</div><div class="history-details">${l.details}</div></div>`).join('');
+    container.innerHTML = logs.map(l => `<div class=\"history-item\"><div class=\"history-date\">${l.date}</div><div class=\"history-user\">${l.user}</div><div class=\"history-details\">${l.details}</div></div>`).join('');
   }
 }
 
 export const swModal = new SwAssetModal();
-export function initSwModal(onSave: () => void, closeModals: () => void) { swModal.init(onSave, closeModals); }
+
-export function openSwModal(asset: any, mode: 'view' | 'add' | 'edit' = 'view') { swModal.open(asset, mode); }
+export function initSwModal(onSave: () => void, closeModals: () => void) {
+  swModal.init(onSave, closeModals);
+}
+
+export function openSwModal(asset: any, mode: 'view' | 'add' | 'edit' = 'view') {
+  swModal.open(asset, mode);
+}

src/components/Modal/SWUserModal.ts

@@ -16,15 +16,15 @@ class SwUserModal extends BaseModal {
       <div id="sw-user-asset-modal" class="modal-overlay hidden">
         <div class="modal-content wide">
           <div class="modal-header">
-            <h2 id="sw-user-title" class="modal-title">${this.title}</h2>
+            <h2 id="sw-user-title">${this.title}</h2>
-            <button id="btn-close-sw-user-modal" class="btn-icon" aria-label="닫기">&times;</button>
+            <button id="btn-close-sw-user-modal" class="btn-icon"><i data-lucide="x"></i></button>
           </div>
           <div class="modal-body">
             <div class="sw-info-summary" id="sw-user-sw-info"></div>
             
-            <div class="flex justify-between items-center mb-4">
+            <div class="user-list-toolbar" style="display:flex; justify-content:space-between; margin-bottom:1rem; align-items:center;">
-              <h3 class="detail-section-title mb-0">할당된 사용자 목록</h3>
+              <h3 style="font-size:1rem; font-weight:600;">할당된 사용자 목록</h3>
-              <button type="button" id="btn-open-add-user" class="btn btn-primary btn-sm"><i data-lucide="plus" class="icon-sm"></i> 사용자 추가</button>
+              <button type="button" id="btn-open-add-user" class="btn btn-primary btn-sm"><i data-lucide="plus"></i> 사용자 추가</button>
             </div>
 
             <div class="table-container">
@@ -35,9 +35,9 @@ class SwUserModal extends BaseModal {
                     <th>부서</th>
                     <th>직위</th>
                     <th>이름</th>
-                    <th class="text-center">사용기간</th>
+                    <th>사용기간</th>
-                    <th class="text-center">신청서</th>
+                    <th>신청서</th>
-                    <th class="text-center">관리</th>
+                    <th>관리</th>
                   </tr>
                 </thead>
                 <tbody id="sw-user-table-body"></tbody>
@@ -54,14 +54,14 @@ class SwUserModal extends BaseModal {
       </div>
 
       <!-- 사용자 추가/수정 서브 모달 -->
-      <div id="sw-user-edit-modal" class="modal-overlay hidden sub-modal">
+      <div id="sw-user-edit-modal" class="modal-overlay hidden" style="z-index: 1100;">
-        <div class="modal-content narrow">
+        <div class="modal-content" style="width: 400px;">
           <div class="modal-header">
-            <h3 id="sw-user-edit-title" class="modal-title">사용자 정보</h3>
+            <h3 id="sw-user-edit-title">사용자 정보</h3>
-            <button id="btn-close-user-edit" class="btn-icon">&times;</button>
+            <button id="btn-close-user-edit" class="btn-icon"><i data-lucide="x"></i></button>
           </div>
           <div class="modal-body">
-            <form id="sw-user-edit-form" class="grid-form vertical-form">
+            <form id="sw-user-edit-form" class="grid-form" style="grid-template-columns: 1fr;">
               <input type="hidden" id="edit-user-index" value="-1" />
               <div class="form-group">
                 <label>조직</label>
@@ -81,22 +81,22 @@ class SwUserModal extends BaseModal {
               </div>
               <div class="form-group">
                 <label>사용 시작일</label>
-                <div class="input-with-btn">
+                <div style="display:flex; gap:0.25rem; align-items:center; position:relative;">
-                  <input type="text" id="new-user-시작일" />
+                  <input type="text" id="new-user-시작일" style="flex:1;" />
-                  <button type="button" class="btn-icon" onclick="const p = document.getElementById('new-user-시작일-picker'); p.value = document.getElementById('new-user-시작일').value; p.showPicker();">
+                  <button type="button" class="btn-icon" onclick="const p = document.getElementById('new-user-시작일-picker'); p.value = document.getElementById('new-user-시작일').value; p.showPicker();" style="padding:0.25rem;">
-                    <i data-lucide="calendar" class="icon-sm"></i>
+                    <i data-lucide="calendar" style="width:18px; height:18px; color:var(--primary-color);"></i>
                   </button>
-                  <input type="date" id="new-user-시작일-picker" class="hidden-picker" onchange="document.getElementById('new-user-시작일').value = this.value" tabindex="-1" />
+                  <input type="date" id="new-user-시작일-picker" style="position:absolute; width:0; height:0; opacity:0; pointer-events:none;" onchange="document.getElementById('new-user-시작일').value = this.value" tabindex="-1" />
                 </div>
               </div>
               <div class="form-group">
                 <label>사용 종료일</label>
-                <div class="input-with-btn">
+                <div style="display:flex; gap:0.25rem; align-items:center; position:relative;">
-                  <input type="text" id="new-user-종료일" />
+                  <input type="text" id="new-user-종료일" style="flex:1;" />
-                  <button type="button" class="btn-icon" onclick="const p = document.getElementById('new-user-종료일-picker'); p.value = document.getElementById('new-user-종료일').value; p.showPicker();">
+                  <button type="button" class="btn-icon" onclick="const p = document.getElementById('new-user-종료일-picker'); p.value = document.getElementById('new-user-종료일').value; p.showPicker();" style="padding:0.25rem;">
-                    <i data-lucide="calendar" class="icon-sm"></i>
+                    <i data-lucide="calendar" style="width:18px; height:18px; color:var(--primary-color);"></i>
                   </button>
-                  <input type="date" id="new-user-종료일-picker" class="hidden-picker" onchange="document.getElementById('new-user-종료일').value = this.value" tabindex="-1" />
+                  <input type="date" id="new-user-종료일-picker" style="position:absolute; width:0; height:0; opacity:0; pointer-events:none;" onchange="document.getElementById('new-user-종료일').value = this.value" tabindex="-1" />
                 </div>
               </div>
               <div class="form-group">
@@ -111,15 +111,6 @@ class SwUserModal extends BaseModal {
           </div>
         </div>
       </div>
-      <style>
-        .hidden-picker {
-          position: absolute;
-          width: 0;
-          height: 0;
-          opacity: 0;
-          pointer-events: none;
-        }
-      </style>
     `;
   }
 
@@ -149,6 +140,7 @@ class SwUserModal extends BaseModal {
       onSave(); this.close(); closeModals();
     });
 
+    // 닫기 이벤트들 (BaseModal의 공통 버튼 외 추가분)
     document.getElementById('btn-close-sw-user-modal')?.addEventListener('click', () => this.close());
     document.getElementById('btn-cancel-sw-user')?.addEventListener('click', () => this.close());
     
@@ -163,9 +155,9 @@ class SwUserModal extends BaseModal {
   protected fillFormData(asset: any): void {
     const swInfo = document.getElementById('sw-user-sw-info')!;
     swInfo.innerHTML = `
-      <div class="sw-info-header border-b border-hairline pb-4 mb-6">
+      <div style="background:var(--bg-light); padding:1rem; border-radius:6px; margin-bottom:1.5rem;">
-        <div class="detail-label-sm">${asset.purchase_corp || asset.법인 || ''}</div>
+        <div style="font-size:0.8rem; color:var(--text-muted); margin-bottom:0.25rem;">${asset.purchase_corp || asset.법인 || ''}</div>
-        <div class="asset-code-title">${asset.product_name || asset.제품명 || ''}</div>
+        <div style="font-size:1.1rem; font-weight:700; color:var(--primary-color);">${asset.product_name || asset.제품명 || ''}</div>
       </div>
     `;
 
@@ -181,10 +173,9 @@ class SwUserModal extends BaseModal {
 
   private renderUserList() {
     const tbody = document.getElementById('sw-user-table-body')!;
-    if (!tbody) return;
     tbody.innerHTML = '';
     if (this.tempSwUsers.length === 0) {
-      tbody.innerHTML = '<tr><td colspan="7" class="empty-cell text-center p-8">할당된 사용자가 없습니다.</td></tr>';
+      tbody.innerHTML = '<tr><td colspan="7" style="text-align:center; padding:2rem; color:var(--text-muted);">할당된 사용자가 없습니다.</td></tr>';
       return;
     }
 
@@ -195,12 +186,12 @@ class SwUserModal extends BaseModal {
         <td>${user.부서 || ''}</td>
         <td>${user.직위 || ''}</td>
         <td>${user.이름 || ''}</td>
-        <td class="text-center">${user.사용기간 || ''}</td>
+        <td>${user.사용기간 || ''}</td>
-        <td class="text-center">${user.신청서명 ? '<i data-lucide="paperclip" class="text-primary icon-sm"></i>' : '-'}</td>
+        <td style="text-align:center;">${user.신청서명 ? '<i data-lucide="paperclip" class="text-primary"></i>' : '-'}</td>
-        <td class="text-center">
+        <td>
-          <div class="flex gap-2 justify-center items-center">
+          <div style="display:flex; gap:0.5rem;">
             <button class="btn btn-outline btn-sm btn-edit-user" data-idx="${idx}">수정</button>
-            <button class="btn-circle-remove btn-del-user" data-idx="${idx}">&times;</button>
+            <button class="btn btn-outline btn-sm btn-danger btn-del-user" data-idx="${idx}">삭제</button>
           </div>
         </td>
       `;
@@ -266,5 +257,11 @@ class SwUserModal extends BaseModal {
 }
 
 export const swUserModal = new SwUserModal();
-export function initSwUserModal(onSave: () => void, closeModals: () => void) { swUserModal.init(onSave, closeModals); }
+
-export function openSwUserModal(asset: any) { swUserModal.open(asset); }
+export function initSwUserModal(onSave: () => void, closeModals: () => void) {
+  swUserModal.init(onSave, closeModals);
+}
+
+export function openSwUserModal(asset: any) {
+  swUserModal.open(asset);
+}

src/components/Modal/UserModal.ts

@@ -40,8 +40,10 @@ class UserModal extends BaseModal {
               </div>
 
               <div class="form-group">
-                <label>직무 (직급)</label>
+                <label>직무</label>
-                <input type="text" id="user-position-input" name="position" placeholder="예: BIM모델러" required />
+                <select id="user-position-input" name="position" required>
+                  <option value="">직무 선택</option>
+                </select>
               </div>
 
               <div class="form-group">
@@ -82,7 +84,7 @@ class UserModal extends BaseModal {
       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 position = (document.getElementById('user-position-input') as HTMLSelectElement).value.trim();
       const status = (document.getElementById('user-status') as HTMLSelectElement).value;
 
       if (!empNo || !userName || !deptName || !position) {
@@ -124,6 +126,19 @@ class UserModal extends BaseModal {
   }
 
   protected fillFormData(asset: any): void {
+    const positionSelect = document.getElementById('user-position-input') as HTMLSelectElement;
+    if (positionSelect) {
+      positionSelect.innerHTML = '<option value="">직무 선택</option>';
+      if (state.masterData.jobSpecs) {
+        state.masterData.jobSpecs.forEach((spec: any) => {
+          const option = document.createElement('option');
+          option.value = spec.job_name;
+          option.textContent = spec.job_name;
+          positionSelect.appendChild(option);
+        });
+      }
+    }
+
     setFieldValue('user-id', asset.id || '');
     setFieldValue('user-emp-no', asset.emp_no || '');
     setFieldValue('user-name-input', asset.user_name || '');

src/components/Navigation.ts

@@ -24,55 +24,59 @@ const MENU_CONFIG: any = {
 };
 
 export function renderNavigation(onTabChange: (tab: string) => void) {
-  const header = document.querySelector('.main-header') as HTMLElement;
+  const navContainer = document.getElementById('main-nav')!;
-  const headerContainer = document.querySelector('.header-container')!;
-  if (!headerContainer) return;
 
   const render = () => {
-    // 1. 헤더 구조 (Vercel Style: Clean Single Row)
+    navContainer.innerHTML = '';
-    headerContainer.innerHTML = `
-      <div class="brand" id="btn-home-logo" style="cursor: pointer;">
-        <img src="img/image_92.png" class="main-logo" alt="HM Logo" />
-        <h1>한맥자산관리시스템</h1>
-      </div>
     
-      <nav class="integrated-nav" id="main-nav-list"></nav>
+    // 기존 메뉴 렌더링
-
+    (Object.keys(MENU_CONFIG) as Array<keyof typeof MENU_CONFIG>).forEach(catKey => {
-      <div class="header-actions">
-        <div class="role-toggle-wrapper">
-          <span class="role-label user ${state.currentUserRole === 'user' ? 'active' : ''}">실무자</span>
-          <label class="role-toggle">
-            <input type="checkbox" id="role-toggle-checkbox" ${state.currentUserRole === 'admin' ? 'checked' : ''}>
-            <span class="role-slider"></span>
-          </label>
-          <span class="role-label admin ${state.currentUserRole === 'admin' ? 'active' : ''}">관리자</span>
-        </div>
-        <div class="notification-area">
-           <button class="icon-btn" title="알림"><i data-lucide="bell" style="width:18px; height:18px;"></i></button>
-        </div>
-      </div>
-    `;
-
-    const navList = document.getElementById('main-nav-list')!;
-    
-    // 2. GNB 메뉴 렌더링 (Ghost Tab Style)
-    Object.keys(MENU_CONFIG).forEach(catKey => {
       const config = MENU_CONFIG[catKey];
       
+      // 역할에 따라 노출할 서브탭 필터링
       const visibleTabs = config.tabs.filter((tab: string) => {
-        if (state.currentUserRole === 'admin') return tab === '대시보드';
+        if (state.currentUserRole === 'admin') {
-        return tab !== '대시보드';
+          // 관리자(admin)일 경우 대시보드 탭만 노출
+          return tab === '대시보드';
+        } else {
+          // 실무자(user)일 경우 대시보드 제외한 모든 탭 노출
+          return tab !== '대시보드';
+        }
       });
 
-      if (visibleTabs.length === 0) return;
+      // 노출할 서브탭이 없으면 해당 대분류 GNB 메뉴도 렌더링하지 않음
+      if (visibleTabs.length === 0) {
+        return;
+      }
+
+      const isActive = state.activeCategory === catKey;
+
+      const group = document.createElement('div');
+      group.className = `nav-group ${isActive ? 'active is-showing-shelf' : ''}`;
+      
+      const trigger = document.createElement('div');
+      trigger.className = 'gnb-trigger';
+      trigger.textContent = config.label;
+
+      trigger.addEventListener('click', () => {
+        if (state.activeCategory !== catKey) {
+          state.activeCategory = catKey as any;
+          const firstTab = visibleTabs[0] || config.tabs[0];
+          state.activeSubTab = firstTab;
+          render();
+          onTabChange(firstTab);
+        }
+      });
+      group.appendChild(trigger);
+
+      const shelf = document.createElement('div');
+      shelf.className = 'lnb-shelf';
       
       visibleTabs.forEach((tab: string) => {
-        if (tab === '부품 마스터') return;
+        if (tab === '부품 마스터') return; // 메뉴바에서 표시 생략
         const item = document.createElement('div');
-        const isActive = state.activeSubTab === tab;
+        item.className = `lnb-item ${isActive && state.activeSubTab === tab ? 'active' : ''}`;
-        item.className = `gnb-trigger ${isActive ? 'active' : ''}`;
         item.textContent = tab;
-        item.style.fontSize = 'var(--fs-sm)'; // Ensure small but standard font
         
         item.addEventListener('click', (e) => {
           e.stopPropagation();
@@ -81,39 +85,32 @@ export function renderNavigation(onTabChange: (tab: string) => void) {
           render();
           onTabChange(tab);
         });
-        navList.appendChild(item);
+        shelf.appendChild(item);
       });
+      group.appendChild(shelf);
+      navContainer.appendChild(group);
     });
 
-    // 3. 관리자 전용 '관리도구'
+    // ─── '관리자' 메뉴 별도 추가 (GNB 스타일 - 관리자 역할일 때만 노출) ───
     if (state.currentUserRole === 'admin') {
+      const adminGroup = document.createElement('div');
+      adminGroup.className = 'nav-group';
+      
       const adminTrigger = document.createElement('div');
-      adminTrigger.className = 'gnb-trigger admin-trigger';
+      adminTrigger.className = 'gnb-trigger';
-      adminTrigger.innerHTML = '관리도구';
+      adminTrigger.innerHTML = '관리자';
-      adminTrigger.addEventListener('click', () => window.open('/map_editor.html', '_blank'));
+      adminTrigger.style.color = 'var(--text-muted)';
-      navList.appendChild(adminTrigger);
+      adminTrigger.style.borderLeft = '1px solid var(--border-color)';
+      adminTrigger.style.marginLeft = '1rem';
+      adminTrigger.style.paddingLeft = '1.5rem';
+      
+      adminTrigger.addEventListener('click', () => {
+        window.open('/map_editor.html', '_blank');
+      });
+      
+      adminGroup.appendChild(adminTrigger);
+      navContainer.appendChild(adminGroup);
     }
-
-    // 4. 이벤트 바인딩
-    document.getElementById('btn-home-logo')?.addEventListener('click', () => location.reload());
-    
-    const roleToggle = document.getElementById('role-toggle-checkbox') as HTMLInputElement;
-    roleToggle?.addEventListener('change', () => {
-      state.currentUserRole = roleToggle.checked ? 'admin' : 'user';
-      if (state.currentUserRole === 'admin') {
-        state.activeCategory = 'hw';
-        state.activeSubTab = '대시보드';
-      } else {
-        state.activeCategory = 'hw';
-        state.activeSubTab = '서버';
-      }
-      render();
-      onTabChange(state.activeSubTab);
-    });
-
-    // 아이콘 생성
-    // @ts-ignore
-    if (window.lucide) window.lucide.createIcons();
   };
 
   render();

src/core/dummyData.ts

@@ -1,4 +1,4 @@
-import { HardwareAsset, SoftwareAsset, SWUser, HardwareLog } from './types';
+import { HardwareAsset, SoftwareAsset, SWUser, HardwareLog } from './excelHandler';
 
 // 유틸리티: 랜덤 문자열
 const randomId = () => Math.random().toString(36).substring(2, 9);
@@ -10687,9 +10687,9 @@ export const dummySwUsers: any[] = Array.from({ length: 15 }).map((_, i) => ({
 
 export const dummyLogs: any[] = Array.from({ length: 10 }).map((_, i) => ({
   id: randomId(),
-  asset_id: dummyPCs[0]?.id || randomId(),
+  assetId: dummyPCs[0]?.id || randomId(),
-  log_date: randomDateStr(1),
+  date: randomDateStr(1),
   details: i % 2 === 0 ? '메모리 추가 증설 (16GB -> 32GB)' : '디스플레이 파손 수리',
-  log_user: 'IT지원팀',
+  user: 'IT지원팀',
   cost: i % 2 === 0 ? 80000 : 150000,
 }));

src/core/excelHandler.ts

@@ -1,12 +1,63 @@
 import * as XLSX from 'xlsx';
 import { ASSET_SCHEMA } from './schema';
-import { HardwareAsset, SoftwareAsset, SWUser, HardwareLog, MasterAssetData } from './types';
 
 /**
  * ITAM 엑셀 핸들러 (Database Synchronized Edition)
  * 데이터베이스 실제 스키마 컬럼과 엑셀 헤더를 1:1로 일치시킵니다.
  */
 
+export interface HardwareAsset {
+  [key: string]: any;
+  id: string;
+}
+
+export interface SoftwareAsset {
+  [key: string]: any;
+  id: string;
+}
+
+export interface SWUser {
+  id: string;
+  sw_id: string;
+  user_name: string;
+  dept: string;
+  corp: string;
+  [key: string]: any;
+}
+
+export interface HardwareLog {
+  id: string;
+  assetId?: string;
+  asset_id?: string;
+  date?: string;
+  log_date?: string;
+  created_at?: string;
+  details: string;
+  user?: string;
+  log_user?: string;
+  event_type?: string;
+}
+
+export interface MasterAssetData {
+  pc: HardwareAsset[];
+  server: HardwareAsset[];
+  storage: HardwareAsset[];
+  network: HardwareAsset[];
+  equipment: HardwareAsset[];
+  survey: HardwareAsset[];
+  pcParts: HardwareAsset[];
+  swInternal: SoftwareAsset[];
+  swExternal: SoftwareAsset[];
+  cloud: SoftwareAsset[];
+  domain: any[];
+  vip: HardwareAsset[];
+  officeSupplies: HardwareAsset[];
+  cost: any[];
+  swUsers: SWUser[];
+  logs: HardwareLog[];
+  [key: string]: any;
+}
+
 /**
  * DB 컬럼 순서 및 구성 정의 (실제 DB 스키마 dump 기준)
  */

src/core/filterHandler.ts

@@ -15,6 +15,7 @@ export interface FilterOptions {
   showField?: boolean;
   showType?: boolean;
   showStatus?: boolean;
+  showPosition?: boolean;
   extraHTML?: string;
   onFilterChange: (filters: any) => void;
   initialFilters?: any;
@@ -37,9 +38,10 @@ export function renderFilterBar(container: HTMLElement, options: FilterOptions)
     showField = false, 
     showType = false, 
     showStatus = false,
+    showPosition = false,
     extraHTML = '', 
     onFilterChange,
-    initialFilters = { keyword: '', corp: '', dept: '', loc: '', field: '', type: '', status: '' },
+    initialFilters = { keyword: '', corp: '', dept: '', loc: '', field: '', type: '', status: '', position: '' },
     fullList = []
   } = options;
 
@@ -47,10 +49,20 @@ export function renderFilterBar(container: HTMLElement, options: FilterOptions)
 
   // Helper to get unique sorted values
   const getUnique = (key: keyof typeof ASSET_SCHEMA | string) => {
-    const fieldKey = (ASSET_SCHEMA as any)[key]?.key || key;
+    const schemaItem = (ASSET_SCHEMA as any)[key];
-    return Array.from(new Set(fullList.map(item => item[fieldKey] || item[(ASSET_SCHEMA as any)[key]?.db]).filter(Boolean))).sort();
+    const fieldKey = schemaItem ? schemaItem.key : key;
+    const dbKey = schemaItem ? schemaItem.db : null;
+    return Array.from(new Set(fullList.map(item => {
+      const val = item[fieldKey];
+      if (val !== undefined && val !== null) return val;
+      if (dbKey) return item[dbKey];
+      return null;
+    }).filter(Boolean))).sort() as string[];
   };
 
+  const hasDeptName = fullList.some(item => 'dept_name' in item);
+  const deptUniqueKey = hasDeptName ? 'dept_name' : 'CURRENT_DEPT';
+
   container.innerHTML = `
     <div class="search-item flex-1">
       <label>${keywordLabel}</label>
@@ -98,10 +110,18 @@ export function renderFilterBar(container: HTMLElement, options: FilterOptions)
     </div>` : ''}
     ${showDept ? `
     <div class="search-item">
-      <label>${ASSET_SCHEMA.CURRENT_DEPT.ui}</label>
+      <label>조직</label>
       <select id="filter-dept">
         <option value="">전체 조직</option>
-        ${getUnique('CURRENT_DEPT').map(v => `<option value="${v}" ${initialFilters.dept === v ? 'selected' : ''}>${v}</option>`).join('')}
+        ${getUnique(deptUniqueKey).map(v => `<option value="${v}" ${initialFilters.dept === v ? 'selected' : ''}>${v}</option>`).join('')}
+      </select>
+    </div>` : ''}
+    ${showPosition ? `
+    <div class="search-item">
+      <label>직무</label>
+      <select id="filter-position">
+        <option value="">전체 직무</option>
+        ${getUnique('position').map(v => `<option value="${v}" ${initialFilters.position === v ? 'selected' : ''}>${v}</option>`).join('')}
       </select>
     </div>` : ''}
     ${extraHTML}
@@ -120,7 +140,8 @@ export function renderFilterBar(container: HTMLElement, options: FilterOptions)
       loc: (container.querySelector('#filter-loc') as HTMLSelectElement)?.value || '',
       field: (container.querySelector('#filter-field') as HTMLSelectElement)?.value || '',
       type: (container.querySelector('#filter-type') as HTMLSelectElement)?.value || '',
-      status: (container.querySelector('#filter-status') as HTMLSelectElement)?.value || ''
+      status: (container.querySelector('#filter-status') as HTMLSelectElement)?.value || '',
+      position: (container.querySelector('#filter-position') as HTMLSelectElement)?.value || ''
     };
     onFilterChange(filters);
   };
@@ -132,9 +153,10 @@ export function renderFilterBar(container: HTMLElement, options: FilterOptions)
   container.querySelector('#filter-field')?.addEventListener('change', triggerChange);
   container.querySelector('#filter-type')?.addEventListener('change', triggerChange);
   container.querySelector('#filter-status')?.addEventListener('change', triggerChange);
+  container.querySelector('#filter-position')?.addEventListener('change', triggerChange);
 
   container.querySelector('#btn-reset-filters')?.addEventListener('click', () => {
-    ['filter-keyword', 'filter-corp', 'filter-dept', 'filter-loc', 'filter-field', 'filter-type', 'filter-status'].forEach(id => {
+    ['filter-keyword', 'filter-corp', 'filter-dept', 'filter-loc', 'filter-field', 'filter-type', 'filter-status', 'filter-position'].forEach(id => {
       const el = container.querySelector(`#${id}`);
       if (el) (el as any).value = '';
     });
@@ -145,18 +167,37 @@ export function renderFilterBar(container: HTMLElement, options: FilterOptions)
 /**
  * 공통 필터링 로직
  */
-export function applyCommonFilters(list: any[], filters: any, searchKeys: (keyof typeof ASSET_SCHEMA)[]) {
+export function applyCommonFilters(list: any[], filters: any, searchKeys: any[]) {
   return list.filter(item => {
-    const matchKeyword = !filters.keyword || searchKeys.some(key => 
+    // 1. 키워드 검색
-      String(item[ASSET_SCHEMA[key].key] || item[ASSET_SCHEMA[key].db] || '').toLowerCase().includes(filters.keyword)
+    const matchKeyword = !filters.keyword || searchKeys.some(key => {
-    );
+      const schemaItem = (ASSET_SCHEMA as any)[key];
+      if (schemaItem) {
+        return String(item[schemaItem.key] || item[schemaItem.db] || '').toLowerCase().includes(filters.keyword);
+      }
+      return String(item[key] || '').toLowerCase().includes(filters.keyword);
+    });
+
+    // 2. 부서 필터링 (사용자 페이지 dept_name, 자산 페이지 current_dept)
+    let matchDept = true;
+    if (filters.dept) {
+      const itemDept = item.dept_name || item[ASSET_SCHEMA.CURRENT_DEPT.key] || item[ASSET_SCHEMA.CURRENT_DEPT.db];
+      matchDept = itemDept === filters.dept;
+    }
+
+    // 3. 직무 필터링
+    let matchPosition = true;
+    if (filters.position) {
+      matchPosition = item.position === filters.position;
+    }
+
+    // 4. 나머지 필터링
     const matchCorp = !filters.corp || (item[ASSET_SCHEMA.PURCHASE_CORP.key] || item[ASSET_SCHEMA.PURCHASE_CORP.db]) === filters.corp;
-    const matchDept = !filters.dept || (item[ASSET_SCHEMA.CURRENT_DEPT.key] || item[ASSET_SCHEMA.CURRENT_DEPT.db]) === filters.dept;
     const matchLoc = !filters.loc || (item[ASSET_SCHEMA.LOCATION.key] || item[ASSET_SCHEMA.LOCATION.db]) === filters.loc;
     const matchField = !filters.field || (item[ASSET_SCHEMA.SW_FIELD.key] || item[ASSET_SCHEMA.SW_FIELD.db]) === filters.field;
     const matchType = !filters.type || (item[ASSET_SCHEMA.ASSET_TYPE.key] || item[ASSET_SCHEMA.ASSET_TYPE.db]) === filters.type;
     const matchStatus = !filters.status || (item[ASSET_SCHEMA.HW_STATUS.key] || item[ASSET_SCHEMA.HW_STATUS.db]) === filters.status;
 
-    return matchKeyword && matchCorp && matchDept && matchLoc && matchField && matchType && matchStatus;
+    return matchKeyword && matchCorp && matchDept && matchLoc && matchField && matchType && matchStatus && matchPosition;
   });
 }

src/core/state.ts

@@ -1,8 +1,41 @@
-import { HardwareAsset, SoftwareAsset, SWUser, HardwareLog, MasterAssetData, SystemUser } from './types';
+import { HardwareAsset, SoftwareAsset, SWUser, HardwareLog } from './excelHandler';
 import { API_BASE_URL } from './utils';
 import { dummyPCs, dummyServers, dummyStorages, dummyEquips, dummySubSw, dummyPermSw, dummyCloud, dummyDomain, dummySwUsers, dummyLogs } from './dummyData';
 
 // --- State Definitions ---
+export interface MasterAssetData {
+  users: any[];
+  pc: any[];
+  server: any[];
+  storage: any[];
+  network: any[];
+  survey: any[];
+  pcParts: any[];
+  partsMaster: any[];
+  equipment: any[];
+  officeSupplies: any[];
+  swInternal: any[];
+  swExternal: any[];
+  cloud: any[];
+  domain: any[];
+  cost: any[];
+  vip: any[];
+  mobile?: any[]; // Legacy mobile support
+  equip?: any[];  // Backward compat
+  jobSpecs?: any[];
+  
+  // Backward compatibility
+  subSw: any[];
+  permSw: any[];
+
+  swUsers: SWUser[];
+  logs: HardwareLog[];
+  
+  // 통합 배열
+  hw: any[];
+  sw: any[];
+}
+
 export interface AppState {
   activeCategory: 'dashboard' | 'hw' | 'sw' | 'ops' | 'vip' | 'fac' | 'users' | 'etc';
   activeSubTab: string;
@@ -27,15 +60,13 @@ export const state: AppState = {
     survey: [], pcParts: [], partsMaster: [], equipment: [], officeSupplies: [],
     swInternal: [], swExternal: [], cloud: [], domain: [],
     cost: [], vip: [],
+    subSw: [], permSw: [],
     hw: [], sw: [],
     swUsers: [], logs: [],
-    jobSpecs: [],
+    jobSpecs: []
-    mobile: []
   }
 };
 
-(window as any).__itam_state = state;
-
 /**
  * 통합 V2 스키마에 맞춘 데이터 로드
  */
@@ -62,9 +93,9 @@ export async function loadMasterDataFromDB() {
     };
 
     // Mapping for backward compatibility
-    (state.masterData as any).equip = state.masterData.equipment;
+    state.masterData.equip = state.masterData.equipment;
-    (state.masterData as any).subSw = state.masterData.swExternal;
+    state.masterData.subSw = state.masterData.swExternal;
-    (state.masterData as any).permSw = state.masterData.swInternal;
+    state.masterData.permSw = state.masterData.swInternal;
 
     // 하드웨어 통합 (대시보드 호환용)
     state.masterData.hw = [
@@ -235,3 +266,4 @@ export async function deleteJobSpec(id: number) {
   }
   return false;
 }
+

src/core/types.ts

@@ -1,155 +0,0 @@
-/**
- * ITAM Global Type Definitions
- */
-
-export interface BaseAsset {
-  id: string;
-  asset_code?: string;
-  category?: string;
-  asset_type?: string;
-  purchase_corp?: string;
-  purchase_date?: string;
-  purchase_amount?: number | string;
-  purchase_vendor?: string;
-  approval_document?: string;
-  service_type?: string;
-  manager_primary?: string;
-  manager_secondary?: string;
-  location?: string;
-  location_detail?: string;
-  location_photo?: string;
-  loc_x?: number;
-  loc_y?: number;
-  memo?: string;
-  updated_at?: string;
-  created_at?: string;
-}
-
-export interface HardwareAsset extends BaseAsset {
-  hw_status?: string;
-  model_name?: string;
-  asset_name?: string;
-  asset_mfr?: string;
-  current_dept?: string;
-  previous_dept?: string;
-  user_current?: string;
-  emp_no?: string;
-  user_position?: string;
-  previous_user?: string;
-  cpu?: string;
-  ram?: string;
-  gpu?: string;
-  ssd_1?: string;
-  ssd_2?: string;
-  hdd_1?: string;
-  hdd_2?: string;
-  hdd_3?: string;
-  hdd_4?: string;
-  mainboard?: string;
-  os?: string;
-  ip_address?: string;
-  ip_address_2?: string;
-  mac_address?: string;
-  remote_tool?: string;
-  remote_id?: string;
-  remote_pw?: string;
-  monitoring?: string;
-  volume?: string;
-  monitor_inch?: string;
-  asset_count?: number | string;
-  serial_num?: string;
-  // Normalized V3 fields
-  volumes?: any[]; 
-  remotes?: any[];
-}
-
-export interface SoftwareAsset extends BaseAsset {
-  sw_status?: string;
-  sw_field?: string;
-  sw_type?: string;
-  dev_objective?: string;
-  dev_manager?: string;
-  planning_manager?: string;
-  sales_manager?: string;
-  product_name?: string;
-  domain_address?: string;
-  email_account?: string;
-  email_pw?: string;
-  sw_id?: string;
-  sw_pw?: string;
-  purchase_method?: string;
-  asset_purpose?: string;
-  asset_status?: string;
-  start_date?: string;
-  expired_date?: string;
-}
-
-export interface SWUser {
-  id: string;
-  sw_id: string;
-  user_name: string;
-  dept: string;
-  corp: string;
-  emp_no?: string;
-  created_at?: string;
-  [key: string]: any;
-}
-
-export interface HardwareLog {
-  id: string;
-  asset_id: string;
-  log_date: string;
-  log_user: string;
-  event_type: string;
-  details: string;
-  old_dept?: string;
-  new_dept?: string;
-  old_user?: string;
-  new_user?: string;
-  created_at?: string;
-}
-
-export interface SystemUser {
-  id: string;
-  emp_no: string;
-  user_name: string;
-  dept_name: string;
-  position: string;
-  status: string;
-  created_at?: string;
-  updated_at?: string;
-}
-
-export interface PartsMaster {
-  id: number | string;
-  category: string;
-  component_name: string;
-  score_tier: string;
-  deduction: number;
-}
-
-export interface MasterAssetData {
-  users: SystemUser[];
-  pc: HardwareAsset[];
-  server: HardwareAsset[];
-  storage: HardwareAsset[];
-  network: HardwareAsset[];
-  survey: HardwareAsset[];
-  pcParts: HardwareAsset[];
-  partsMaster: PartsMaster[];
-  equipment: HardwareAsset[];
-  officeSupplies: HardwareAsset[];
-  swInternal: SoftwareAsset[];
-  swExternal: SoftwareAsset[];
-  cloud: SoftwareAsset[];
-  domain: SoftwareAsset[];
-  cost: any[];
-  vip: HardwareAsset[];
-  swUsers: SWUser[];
-  logs: HardwareLog[];
-  jobSpecs?: any[];
-  mobile?: HardwareAsset[];
-  // Integrated arrays
-  hw: HardwareAsset[];
-  sw: SoftwareAsset[];
-}

src/core/utils.ts

@@ -242,7 +242,8 @@ export function calculatePcScoreDeductive(cpu: string, ram: string, gpu: string,
     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')
+    gpuUpper.includes('RTX A2000') || gpuUpper.includes('RTX A3000') || gpuUpper.includes('QUADRO') ||
+    gpuUpper.includes('RTX 4060') || gpuUpper.includes('RTX 4050')
   ) {
     gpuDeduction = 5;
   } else if (
@@ -289,10 +290,12 @@ export function calculatePcScoreDeductive(cpu: string, ram: string, gpu: string,
  * 성능 점수 기준 등급 뱃지 메타 정보 가져오기
  */
 export function getPcGrade(score: number, isWin11Incompatible?: boolean): { name: string; class: string; color: string } {
+  // Windows 11 업그레이드 불가 PC는 성능 점수와 무관하게 교체 대상으로 분류
+  if (isWin11Incompatible) return { name: '교체 대상', class: 'badge-danger', color: '#EF4444' };
   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' };
+  if (score >= 20) return { name: '보급', class: 'b-yellow', color: '#F59E0B' };
   return { name: '교체 대상', class: 'badge-danger', color: '#EF4444' };
 }
 

src/main.ts

@@ -19,28 +19,41 @@ import { createIcons, Plus, X, LayoutDashboard, Monitor, Server, Database, Lapto
 
 
 // 화면 갱신 통합 핸들러
-function refreshView(tab?: string) {
+function refreshView() {
   const mainContent = document.getElementById('main-content')!;
   if (!mainContent) return;
 
-  const activeTab = tab || state.activeSubTab;
+  if (state.activeSubTab === '대시보드') {
-
-  if (activeTab === '대시보드') {
     renderDashboard(mainContent);
     return;
   }
 
   // 서버 탭이 아닐 경우 '자산현황(위치)' 뷰 진입 방지 및 강제 리스트 모드 전환
-  if (activeTab !== '서버' && state.viewMode === 'location') {
+  if (state.activeSubTab !== '서버' && state.viewMode === 'location') {
     state.viewMode = 'list';
   }
 
-  const isServerTab = activeTab === '서버';
+  const isServerTab = state.activeSubTab === '서버';
   
   mainContent.innerHTML = `
-    <div id="view-body" class="view-container"></div>
+    <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);
@@ -86,7 +99,6 @@ function initApp() {
     loadMasterDataFromDB().then((success) => {
       if (success) {
         refreshView();
-        initRoleSwitcher(); // [추가] 역할 전환 토글 초기화
       }
     });
   } catch (e) { console.error('❌ Initialization failed:', e); }
@@ -156,6 +168,7 @@ function initRoleSwitcher() {
   if (!checkbox || !userLabel || !adminLabel) return;
 
   checkbox.addEventListener('change', () => {
+    const mainContent = document.getElementById('main-content')!;
     if (checkbox.checked) {
       state.currentUserRole = 'admin';
       userLabel.classList.remove('active');
@@ -165,6 +178,14 @@ function initRoleSwitcher() {
       // 관리자 모드 전환 시 대시보드로 이동
       state.activeCategory = 'hw';
       state.activeSubTab = '대시보드';
+      refreshView();
+      renderNavigation((tab) => {
+        if (tab === '대시보드') {
+          renderDashboard(mainContent);
+        } else {
+          renderSWTable(mainContent);
+        }
+      });
     } else {
       state.currentUserRole = 'user';
       adminLabel.classList.remove('active');
@@ -174,10 +195,15 @@ function initRoleSwitcher() {
       // 실무자 모드 전환 시 서버 목록으로 이동
       state.activeCategory = 'hw';
       state.activeSubTab = '서버';
+      refreshView();
+      renderNavigation((tab) => {
+        if (tab === '대시보드') {
+          renderDashboard(mainContent);
+        } else {
+          renderSWTable(mainContent);
+        }
+      });
     }
-    // 모든 렌더링을 refreshView 하나로 통합하여 규격 유지
-    renderNavigation(() => refreshView());
-    refreshView();
   });
 }
 
@@ -187,19 +213,35 @@ function initRoleSwitcher() {
 function initializeAppDirectly() {
   const loginContainer = document.getElementById('login-container');
   const appLayout = document.getElementById('app-layout');
+  const checkbox = document.getElementById('role-toggle-checkbox') as HTMLInputElement;
+  const userLabel = document.querySelector('.role-label.user');
+  const adminLabel = document.querySelector('.role-label.admin');
 
   // 기본 권한 설정: 실무자 (User)
   state.currentUserRole = 'user';
   state.activeCategory = 'hw';
   state.activeSubTab = '서버'; // 실무자 기본 탭
 
+  // UI 상태 동기화
+  if (checkbox) checkbox.checked = false;
+  if (userLabel) userLabel.classList.add('active');
+  if (adminLabel) adminLabel.classList.remove('active');
+  document.body.classList.remove('admin-mode');
+
   // 화면 전환
   if (loginContainer) loginContainer.style.display = 'none';
   if (appLayout) appLayout.style.display = 'flex';
 
-  // 앱 초기화 및 내비게이션(헤더 포함) 렌더링
+  // 앱 초기화
+  initRoleSwitcher();
   initApp();
-  renderNavigation((tab) => refreshView(tab));
+
+  // 로고 클릭 시 새로고침 (초기 화면 복귀 효과)
+  const brand = document.querySelector('.brand') as HTMLElement;
+  if (brand) {
+    brand.style.cursor = 'pointer';
+    brand.onclick = () => location.reload();
+  }
 }
 
 document.addEventListener('DOMContentLoaded', initializeAppDirectly);

src/styles/common.css

@@ -3,7 +3,7 @@
   --primary: #171717;
   --on-primary: #ffffff;
   --body: #4d4d4d;
-  --mute: #71717a;
+  --mute: #888888;
   --hairline: #ebebeb;
   --hairline-strong: #a1a1a1;
   --canvas: #ffffff;
@@ -31,13 +31,13 @@
   --success: #0070f3;
   --header-height: 64px;
 
-  /* --- Global Typography Scale (No Upper Limit) --- */
+  /* --- Global Typography Scale (Tighter Clamps) --- */
-  --fs-xs: max(10px, 1vmin + 0.1vw);
+  --fs-xs: clamp(10px, 1vmin + 0.1vw, 13px);
-  --fs-sm: max(12px, 1.2vmin + 0.2vw);
+  --fs-sm: clamp(12px, 1.2vmin + 0.2vw, 15px);
-  --fs-base: max(13px, 1.4vmin + 0.2vw);
+  --fs-base: clamp(13px, 1.4vmin + 0.2vw, 16px);
-  --fs-md: max(16px, 2vmin + 0.3vw);
+  --fs-md: clamp(16px, 2vmin + 0.3vw, 24px);
-  --fs-lg: max(20px, 3vmin + 0.4vw);
+  --fs-lg: clamp(20px, 3vmin + 0.4vw, 32px);
-  --fs-xl: max(28px, 5vmin + 0.6vw);
+  --fs-xl: clamp(28px, 5vmin + 0.6vw, 48px);
 
   /* --- Layout Units --- */
   --header-height: 64px;
@@ -296,13 +296,15 @@ input:checked + .role-slider:before {
   font-weight: 600; 
 }
 .badge-primary { background-color: var(--primary); color: var(--on-primary); }
-.badge.b-green   { background-color: #e6f4ea; color: #137333; } /* 운영/중급 */
+
-.badge.b-yellow  { background-color: #fffbeb; color: #b45309; } /* 재고/보급 */
+/* --- Badge Color Variants (성능 등급 등 컬러 뱃지) --- */
-.badge.b-purple  { background-color: #f3e8ff; color: #6b21a8; } /* 수리/최상급 */
+.b-purple  { background-color: #EDE9FE; color: #6D28D9; }   /* 최상급 - 보라 */
-.badge.b-primary { background-color: #e0e7ff; color: #3730a3; } /* GNB/상급 */
+.b-primary { background-color: #E0E7FF; color: #3730A3; }   /* 상급   - 인디고 */
-.badge.badge-danger { background-color: #fce8e6; color: #c5221f; } /* 폐기/교체대상 */
+.b-green   { background-color: #D1FAE5; color: #065F46; }   /* 중급   - 초록 */
-.badge.badge-muted  { background-color: #f1f3f4; color: #5f6368; } /* 폐기 */
+.b-yellow  { background-color: #FEF3C7; color: #B45309; }   /* 보급   - 노랑/주황 */
-.badge.badge-light  { background-color: var(--canvas-soft-2); color: var(--mute); border: 1px solid var(--hairline); } /* 재고기본 */
+.badge-danger  { background-color: #FFE4E6; color: #BE123C; } /* 교체대상 - 빨강 */
+.badge-muted   { background-color: #F1F5F9; color: #64748B; } /* 폐기   - 회색 */
+.badge-light   { background-color: #F8FAFC; color: #94A3B8; } /* 기타   - 연회색 */
 
 /* --- Form Elements Extra --- */
 .input-with-icon {

src/styles/dashboard.css

@@ -331,25 +331,24 @@
 .dashboard-layout-2col {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  gap: 2rem;
+  gap: 0;
   padding: 0 2rem 2rem;
 }
 
 .dashboard-card {
   background: var(--canvas);
-  border: 1px solid var(--hairline);
+  border: none;
-  border-radius: 12px;
+  border-radius: 0;
   padding: 2rem;
   display: flex;
   flex-direction: column;
   gap: 1rem;
-  transition: all 0.2s;
+  transition: all 0.15s ease;
 }
 
 .dashboard-card.clickable:hover {
-  border-color: var(--primary);
+  background-color: var(--canvas-soft-2);
-  box-shadow: 0 12px 30px rgba(0,0,0,0.08);
+  border-color: var(--hairline-strong);
-  transform: translateY(-2px);
 }
 
 .stat-progress-bar {
@@ -502,4 +501,3 @@
     border-bottom: 1px solid var(--hairline);
   }
 }
-}

src/styles/guide.css

@@ -19,8 +19,8 @@
 
 .guide-tab {
   padding: 0.75rem 1.25rem;
-  font-size: 24px;
+  font-size: 18px;
-  font-weight: 700;
+  font-weight: 600;
   color: var(--text-muted);
   cursor: pointer;
   border-bottom: 2px solid transparent;
@@ -72,7 +72,7 @@
 }
 
 .guide-section h3 {
-  font-size: 1.73rem;
+  font-size: 1.3rem;
   padding-bottom: 0.5rem;
   border-bottom: 2px solid var(--primary-color);
   color: var(--primary-color);
@@ -83,7 +83,7 @@
 }
 
 .guide-text {
-  font-size: 24px;
+  font-size: 18px;
   color: var(--text-main);
   line-height: 1.7;
   margin: 0;
@@ -127,8 +127,8 @@
   border-radius: 50%;
   background-color: var(--primary-color);
   color: white;
-  font-size: 23px;
+  font-size: 17px;
-  font-weight: 800;
+  font-weight: 700;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -136,14 +136,14 @@
 }
 
 .flow-step .step-label {
-  font-weight: 800;
+  font-weight: 700;
   color: var(--text-main);
-  font-size: 24px;
+  font-size: 18px;
   display: block;
 }
 
 .flow-step .step-desc {
-  font-size: 23px;
+  font-size: 17px;
   color: var(--text-muted);
   line-height: 1.5;
   margin-top: 4px;
@@ -159,13 +159,13 @@
 .guide-info-table {
   width: 100%;
   border-collapse: collapse;
-  font-size: 24px;
+  font-size: 18px;
 }
 
 .guide-info-table th {
   background: #f8faf9;
   color: var(--primary-color);
-  font-weight: 800;
+  font-weight: 700;
   padding: 0.75rem;
   text-align: left;
   border-bottom: 1px solid var(--border-color);
@@ -182,7 +182,7 @@
   background: var(--primary-light);
   border-left: 4px solid var(--primary-color);
   padding: 1rem;
-  font-size: 24px;
+  font-size: 18px;
   color: var(--primary-color);
   line-height: 1.6;
 }

src/styles/login.css

@@ -36,14 +36,14 @@
 }
 
 .login-header h2 {
-  font-size: 2.33rem;
+  font-size: 1.75rem;
-  font-weight: 900;
+  font-weight: 800;
   color: var(--text-main);
   margin-bottom: 0.5rem;
 }
 
 .login-header p {
-  font-size: 1.25rem;
+  font-size: 0.9375rem;
   color: var(--text-muted);
 }
 
@@ -94,14 +94,14 @@
 }
 
 .role-card h3 {
-  font-size: 1.5rem;
+  font-size: 1.125rem;
-  font-weight: 800;
+  font-weight: 700;
   color: var(--text-main);
   margin-bottom: 0.5rem;
 }
 
 .role-card p {
-  font-size: 1.08rem;
+  font-size: 0.8125rem;
   color: var(--text-muted);
   line-height: 1.4;
 }
@@ -109,7 +109,7 @@
 .login-footer {
   margin-top: 3rem;
   text-align: center;
-  font-size: 1rem;
+  font-size: 0.75rem;
   color: var(--text-muted);
 }
 

src/styles/map-editor.css

@@ -88,54 +88,13 @@
 .box-item { 
   font-family: monospace; 
   font-size: 11px; 
-  padding: 10px 6px; 
+  padding: 6px; 
   border-bottom: 1px solid var(--border-color); 
-  display: flex; 
-  flex-direction: column;
-  gap: 8px;
-}
-
-.box-header {
   display: flex; 
   justify-content: space-between; 
   align-items: center; 
 }
 
-.box-index {
-  font-weight: bold;
-  color: var(--primary-color);
-}
-
-.box-inputs {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 6px;
-}
-
-.input-group {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-}
-
-.input-group label {
-  color: var(--text-muted);
-  width: 12px;
-}
-
-.input-group input {
-  width: 100%;
-  padding: 2px 4px;
-  border: 1px solid var(--border-color);
-  border-radius: 2px;
-  font-size: 10px;
-  outline: none;
-}
-
-.input-group input:focus {
-  border-color: var(--primary-color);
-}
-
 .box-item:hover { background: var(--white); }
 .btn-del { cursor: pointer; color: var(--danger); border: none; background: none; font-size: 16px; padding: 0 5px; }
 

src/styles/table.css

@@ -1,56 +1,128 @@
 /* --- Page Header for Description --- */
 .page-header {
-  padding: 1.5rem 2rem 0.5rem; /* Padding added for better whitespace */
+  padding: 1rem 0 0.2rem 0;
 }
 
 .page-title-group {
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
+  gap: 0.3rem;
 }
 
 .page-title {
-  font-size: var(--fs-lg);
+  font-size: 16px;
-  font-weight: 600;
+  font-weight: 700;
-  color: var(--primary);
+  color: var(--primary-color);
   display: flex;
   align-items: center;
   margin: 0;
-  line-height: 1.1;
+  border-left: 4px solid var(--primary-color);
-  letter-spacing: -0.02em;
+  padding-left: 8px;
+  line-height: 1.2;
 }
 
 .page-description {
-  font-size: var(--fs-base);
+  font-size: 12px;
-  color: var(--mute);
+  color: var(--text-muted);
   margin: 0;
-  line-height: 1.5;
+  line-height: 1.4;
+  opacity: 0.8;
+}
+
+/* --- Table View & Filter Styles --- */
+
+.search-bar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem; /* 간격 축소 및 통일 */
+  padding: 1.2rem 0;
+  border-bottom: 1px solid var(--border-color);
+  align-items: flex-end;
+  margin-bottom: 0.5rem;
+}
+
+.search-item {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+}
+
+.search-item.flex-1 {
+  flex: 1; /* 검색창이 남은 공간을 채우도록 설정 */
+  min-width: 250px;
+}
+
+.search-actions {
+  display: flex;
+  gap: 0.5rem; /* 버튼들 간의 간격 */
+  align-items: center;
+}
+
+.search-actions .btn {
+  height: 38px;
+  padding: 0 1rem;
+}
+
+.search-item label {
+  font-size: 11px;
+  font-weight: 700;
+  color: var(--text-muted);
+}
+
+.search-item input, 
+.search-item select {
+  height: 38px;
+  padding: 0 1rem;
+  border: 1px solid var(--border-color);
+  border-radius: 4px;
+  font-size: 14px;
+  outline: none;
+  background-color: var(--white);
+}
+
+/* 셀렉트 박스 화살표 여백 절대 고정 (수정 금지) */
+.search-item select {
+  padding-right: 2.5rem !important;
+  cursor: pointer;
+}
+
+.search-item input:focus, 
+.search-item select:focus {
+  border-color: var(--primary-color);
+}
+
+/* 필터 초기화 버튼 크기 조정 (입력창 높이 38px에 맞춤) */
+.btn-reset {
+  height: 38px !important;
+  color: var(--text-muted) !important;
+  padding: 0 1.2rem !important;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: 0; /* 불필요한 마진 제거 */
 }
 
-/* --- Table View Styles --- */
 .table-container {
   flex: 1;
-  background-color: var(--canvas);
+  background-color: var(--white);
-  overflow-x: auto;
+  border-top: 1px solid var(--border-color);
-  overflow-y: auto;
+  overflow: auto;
   position: relative;
-  max-width: 100%;
+  -webkit-overflow-scrolling: touch;
 }
 
 table {
   width: 100%;
   border-collapse: separate;
   border-spacing: 0;
-  table-layout: fixed; /* Force fixed layout to prevent horizontal scroll */
+  table-layout: auto;
 }
 
 th, td {
-  padding: 0.8rem 1rem;
+  padding: 0.8rem 1.2rem;
-  border-bottom: 1px solid var(--hairline);
+  border-bottom: 1px solid var(--border-color);
-  text-align: left;
+  text-align: left; /* 기본은 좌측 정렬 */
   white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis; /* Show ... for long text */
 }
 
 thead {
@@ -60,91 +132,93 @@ thead {
 }
 
 th {
-  background-color: var(--canvas-soft) !important;
+  background-color: var(--bg-light) !important;
-  font-size: var(--fs-sm);
+  font-size: 13px;
   font-weight: 600;
-  color: var(--mute);
+  color: var(--text-muted);
-  text-transform: uppercase;
+  position: sticky;
-  letter-spacing: -0.02em;
+  top: 0;
-  box-shadow: inset 0 -1px 0 var(--hairline);
+  z-index: 50;
-  text-align: center; /* Set default header alignment to center */
+  box-shadow: inset 0 1px 0 var(--border-color), inset 0 -1px 0 var(--border-color); /* 상하 테두리 보정 */
+  text-transform: none;
 }
 
 td {
-  font-size: var(--fs-base);
+  font-size: 13px;
-  color: var(--primary);
+  color: var(--text-main);
   font-weight: 400;
-  text-align: left; /* Set default data alignment to left */
 }
 
 tbody tr:hover {
-  background-color: var(--canvas-soft-2);
+  background-color: var(--bg-color);
 }
 
-/* 정렬 클래스 */
+/* 정렬 클래스 강제 적용 */
 .text-center { text-align: center !important; }
 .text-right { text-align: right !important; }
 .text-left { text-align: left !important; }
 
-/* 메모 컬럼 전용 */
+/* 메모 컬럼 전용: 가장 길게 표시되도록 너비 조정 및 줄바꿈 허용 */
 .col-memo {
-  white-space: nowrap !important; /* Keep as one line */
+  width: 20%;
-  overflow: hidden;
+  min-width: 250px;
-  text-overflow: ellipsis;
+  white-space: normal !important;
+  word-break: break-all;
+  line-height: 1.4;
+  text-align: left !important;
+}
+
+.btn-icon {
+  padding: 0.25rem;
+  border: none;
+  background: none;
+  cursor: pointer;
+  color: var(--text-muted);
+  transition: color 0.2s;
+}
+
+.btn-icon:hover {
+  color: var(--primary-color);
+}
+
+.btn-icon svg {
+  width: 16px;
+  height: 16px;
 }
 
 /* --- Table Sorting --- */
 th.sortable {
   cursor: pointer;
   user-select: none;
+  transition: background-color 0.2s;
   position: relative;
-  padding-right: 1.8rem !important;
+  padding-right: 1.8rem !important; /* 아이콘 공간 확보 */
 }
 
 th.sortable:hover {
-  background-color: var(--canvas-soft-2) !important;
+  background-color: #F3F4F6;
-  color: var(--primary);
+  color: var(--primary-color);
 }
 
 th.sortable::after {
   content: '↕';
   position: absolute;
-  right: 0.75rem;
+  right: 0.6rem;
   top: 50%;
   transform: translateY(-50%);
-  font-size: var(--fs-xs);
+  font-size: 11px;
-  opacity: 0.4;
+  opacity: 0.3;
+  transition: all 0.2s;
 }
 
-th.sortable.asc::after { content: '▲'; opacity: 1; color: var(--primary); }
+th.sortable.asc::after {
-th.sortable.desc::after { content: '▼'; opacity: 1; color: var(--primary); }
+  content: '▲';
-
+  opacity: 1;
-/* --- Compact Table (Used in Dashboards/Modals) --- */
+  color: var(--primary-color);
-.compact-table {
-  width: 100%;
-  border-collapse: collapse;
 }
 
-.compact-table th {
+th.sortable.desc::after {
-  padding: 0.75rem 0.5rem;
+  content: '▼';
-  font-size: var(--fs-sm);
+  opacity: 1;
-  font-weight: 600;
+  color: var(--primary-color);
-  color: var(--mute);
-  border-bottom: 1px solid var(--hairline);
-  background: var(--canvas-soft);
-  text-transform: uppercase;
-  letter-spacing: -0.02em;
-}
-
-.compact-table td {
-  padding: 0.75rem 0.5rem;
-  font-size: var(--fs-sm);
-  border-bottom: 1px solid var(--hairline-soft, #f5f5f5);
-  color: var(--primary);
-}
-
-
-.compact-table tr.clickable-row:hover {
-  background: var(--canvas-soft);
-  cursor: pointer;
 }

src/views/Dashboard/SwDashboard.ts

@@ -33,8 +33,8 @@ export function renderSwDashboard(container: HTMLElement) {
   const intPer = intQty > 0 ? Math.round((intUsed/intQty)*100) : 0;
 
   container.innerHTML = `
-    <div class="view-container bg-soft">
+    <div class="view-container" style="background-color: var(--canvas); padding: 1.5rem 0;">
-      <h3 class="dashboard-section-title">소프트웨어 라이선스 현황</h3>
+      <h3 class="dashboard-section-title" style="padding: 0 2rem; margin-bottom: 1rem;">소프트웨어 라이선스 현황</h3>
       
       <div class="dashboard-layout-2col mb-6">
         <div class="dashboard-card clickable" data-action="ext-usage">
@@ -55,7 +55,7 @@ export function renderSwDashboard(container: HTMLElement) {
         </div>
       </div>
 
-      <h3 class="dashboard-section-title">2026년 누적 도입 비용 분석</h3>
+      <h3 class="dashboard-section-title" style="padding: 0 2rem; margin-bottom: 1rem;">2026년 누적 도입 비용 분석</h3>
       
       <div class="dashboard-layout-2col">
         <div class="dashboard-card">

src/views/DashboardView.ts

@@ -3,10 +3,11 @@ import { renderHwDashboard } from './Dashboard/HwDashboard';
 import { renderSwDashboard } from './Dashboard/SwDashboard';
 
 /**
- * 대시보드 렌더링 통합 허브 (Vercel Style Normalized)
+ * 대시보드 렌더링 통합 허브
  */
 export function renderDashboard(mainContent: HTMLElement) {
   if (!mainContent) return;
+  mainContent.innerHTML = '';
 
   // 기존 차트 리소스 해제
   if (state.activeCharts) {
@@ -16,21 +17,11 @@ export function renderDashboard(mainContent: HTMLElement) {
   }
   state.activeCharts = [];
 
-  mainContent.innerHTML = `
-    <div class="view-content-wrapper">
-      <div id="dashboard-scroll-container" class="table-container" style="padding: 0;">
-        <div id="dashboard-inner-content"></div>
-      </div>
-    </div>
-  `;
-
-  const innerContent = document.getElementById('dashboard-inner-content')!;
-
   if (state.activeCategory === 'hw') {
-    renderHwDashboard(innerContent);
+    renderHwDashboard(mainContent);
   } else if (state.activeCategory === 'sw') {
-    renderSwDashboard(innerContent);
+    renderSwDashboard(mainContent);
   } else {
-    innerContent.innerHTML = `<div class="dashboard-section-title" style="padding:2rem;">해당 카테고리의 대시보드는 준비 중입니다.</div>`;
+    mainContent.innerHTML = `<div class="dashboard-section-title" style="padding:2rem;">운영 서비스 대시보드는 준비 중입니다.</div>`;
   }
 }

src/views/List/ListFactory.ts

@@ -153,6 +153,7 @@ export interface ListViewConfig {
     showField?: boolean;
     showType?: boolean;
     showStatus?: boolean;
+    showPosition?: boolean;
   };
   columns: ColumnDef[];
   onRowClick?: (asset: any) => void;
@@ -450,35 +451,63 @@ export function createListView(container: HTMLElement, config: ListViewConfig) {
         });
 
         // DB 기준 사양 데이터 맵핑 (state.masterData.jobSpecs 이용)
-        const jobSpecsMap: Record<string, number> = {};
+        const jobSpecsMap: Record<string, string> = {};
         if (state.masterData.jobSpecs) {
           state.masterData.jobSpecs.forEach((s: any) => {
-            jobSpecsMap[s.job_name] = s.min_score;
+            jobSpecsMap[s.job_name] = s.required_grade || '중급';
           });
         }
 
+        // 사용자 이름 → 세부 직무 맵 생성 (system_users.position 기준)
+        const userPositionMap: Record<string, string> = {};
+        if (state.masterData.users) {
+          state.masterData.users.forEach((u: any) => {
+            if (u.user_name && u.position) {
+              userPositionMap[u.user_name.trim()] = u.position.trim();
+            }
+          });
+        }
+
+        const GRADE_RANK: Record<string, number> = {
+          'premium': 4, '최상급': 4,
+          'high': 3,    '상급': 3,
+          'normal': 2,  '중급': 2,
+          'entry': 1,   '보급': 1,
+          'replace': 0, '교체 대상': 0
+        };
+
         // 기준 대비 사양 부족/오버스펙 분류
         const criticalPcList: any[] = [];
         pcs.forEach((pc: any) => {
-          const job = pc[ASSET_SCHEMA.USER_POSITION.key] || '미분류';
+          const userName = (pc[ASSET_SCHEMA.CURRENT_USER.key] || '').trim();
+          const job = userPositionMap[userName] || pc[ASSET_SCHEMA.USER_POSITION.key] || '미분류';
           const score = pc['_pc_score'];
-          const standardScore = jobSpecsMap[job] !== undefined ? jobSpecsMap[job] : (jobScores[job]?.avg || 0);
+          const requiredGrade = jobSpecsMap[job] || jobSpecsMap[pc[ASSET_SCHEMA.USER_POSITION.key]] || '중급';
           
           const cpu = pc[ASSET_SCHEMA.CPU.key] || '';
           const ram = pc[ASSET_SCHEMA.RAM.key] || '';
           const win11Incompatible = isWindows11Incompatible(cpu, ram);
           
+          let actualGrade = 'replace';
+          if (score >= 85) actualGrade = 'premium';
+          else if (score >= 70) actualGrade = 'high';
+          else if (score >= 40) actualGrade = 'normal';
+          else if (score >= 20) actualGrade = 'entry';
+
+          const reqRank = GRADE_RANK[requiredGrade] !== undefined ? GRADE_RANK[requiredGrade] : 2;
+          const actRank = GRADE_RANK[actualGrade] !== undefined ? GRADE_RANK[actualGrade] : 0;
+
           let isUnder = false;
-          if (standardScore > 0) {
+          if (job !== '재고PC') {
-            if (score < standardScore * 0.6) {
+            if (win11Incompatible) {
               isUnder = true;
               pc['_spec_status'] = '사양 부족';
-            } else if (score > standardScore * 1.5 && !win11Incompatible) {
+            } else if (actRank < reqRank) {
+              isUnder = true;
+              pc['_spec_status'] = '사양 부족';
+            } else if (actRank > reqRank) {
               pc['_spec_status'] = '오버스펙';
               criticalPcList.push(pc);
-            } else if (win11Incompatible) {
-              isUnder = true;
-              pc['_spec_status'] = '사양 부족';
             } else {
               pc['_spec_status'] = '적정';
             }
@@ -496,16 +525,38 @@ export function createListView(container: HTMLElement, config: ListViewConfig) {
           }
         });
 
-        // 정렬: 기준 점수 대비 사양 부족이 심한 순(비율이 낮은 순)으로 정렬
+        // 정렬: 요구 등급 대비 실제 성능이 많이 부족한 순(등급 편차가 큰 순)으로 정렬
         criticalPcList.sort((a: any, b: any) => {
-          const jobA = a[ASSET_SCHEMA.USER_POSITION.key] || '미분류';
+          const userNameA = (a[ASSET_SCHEMA.CURRENT_USER.key] || '').trim();
-          const jobB = b[ASSET_SCHEMA.USER_POSITION.key] || '미분류';
+          const userNameB = (b[ASSET_SCHEMA.CURRENT_USER.key] || '').trim();
-          const stdA = jobSpecsMap[jobA] !== undefined ? jobSpecsMap[jobA] : (jobScores[jobA]?.avg || 0);
+          const jobA = userPositionMap[userNameA] || a[ASSET_SCHEMA.USER_POSITION.key] || '미분류';
-          const stdB = jobSpecsMap[jobB] !== undefined ? jobSpecsMap[jobB] : (jobScores[jobB]?.avg || 0);
+          const jobB = userPositionMap[userNameB] || b[ASSET_SCHEMA.USER_POSITION.key] || '미분류';
           
-          const ratioA = stdA > 0 ? a['_pc_score'] / stdA : 1;
+          const reqA = jobSpecsMap[jobA] || jobSpecsMap[a[ASSET_SCHEMA.USER_POSITION.key]] || '중급';
-          const ratioB = stdB > 0 ? b['_pc_score'] / stdB : 1;
+          const reqB = jobSpecsMap[jobB] || jobSpecsMap[b[ASSET_SCHEMA.USER_POSITION.key]] || '중급';
-          return ratioA - ratioB;
+          
+          const scoreA = a['_pc_score'];
+          const scoreB = b['_pc_score'];
+          
+          let actA = 'replace';
+          if (scoreA >= 85) actA = 'premium';
+          else if (scoreA >= 70) actA = 'high';
+          else if (scoreA >= 40) actA = 'normal';
+          else if (scoreA >= 20) actA = 'entry';
+
+          let actB = 'replace';
+          if (scoreB >= 85) actB = 'premium';
+          else if (scoreB >= 70) actB = 'high';
+          else if (scoreB >= 40) actB = 'normal';
+          else if (scoreB >= 20) actB = 'entry';
+
+          const devA = (GRADE_RANK[reqA] || 2) - (GRADE_RANK[actA] || 0);
+          const devB = (GRADE_RANK[reqB] || 2) - (GRADE_RANK[actB] || 0);
+
+          if (devA !== devB) {
+            return devB - devA; // 편차가 큰 것(더 많이 부족한 것)이 먼저 정렬됨
+          }
+          return scoreA - scoreB; // 편차가 같으면 성능 점수가 낮은 순
         });
 
         if (criticalPcList.length === 0) {
@@ -744,21 +795,12 @@ export function createListView(container: HTMLElement, config: ListViewConfig) {
     let filtered = applyCommonFilters(fullList, currentFilters, config.searchKeys as any[]);
     if (sortState.key) filtered = dynamicSort(filtered, sortState.key, sortState.direction);
     
-    thead.innerHTML = `<tr>${config.columns.map(col => {
+    thead.innerHTML = `<tr>${config.columns.map(col => `<th ${col.sortKey ? `data-sort="${col.sortKey}"` : ''} style="${col.width ? `width:${col.width};` : ''}">${col.header}</th>`).join('')}</tr>`;
-      const isDateCol = col.header.includes('일') || col.header.includes('날짜') || col.header.includes('연월');
-      const alignmentClass = col.align ? `text-${col.align}` : (isDateCol ? 'text-center' : '');
-      return `<th class="${alignmentClass}" ${col.sortKey ? `data-sort="${col.sortKey}"` : ''} style="${col.width ? `width:${col.width};` : ''}">${col.header}</th>`;
-    }).join('')}</tr>`;
     
     tbody.innerHTML = filtered.length === 0 ? `<tr><td colspan="${config.columns.length}" class="text-center empty-cell">${UI_TEXT.MESSAGES.NO_DATA}</td></tr>`
       : filtered.map(asset => `<tr class="asset-row clickable" data-id="${asset.id}">${config.columns.map(col => {
           const isDateCol = col.header.includes('일') || col.header.includes('날짜') || col.header.includes('연월');
-          const alignmentClass = col.align ? `text-${col.align}` : (isDateCol ? 'text-center' : '');
+          return `<td class="${isDateCol ? 'text-center' : ''}">${col.render(asset)}</td>`;
-          const customClass = col.className || '';
-          const rendered = col.render(asset);
-          const rawText = rendered.replace(/<[^>]*>/g, '').trim();
-          const titleAttr = rawText && rawText !== '-' ? `title="${rawText.replace(/"/g, '&quot;')}"` : '';
-          return `<td class="${alignmentClass} ${customClass}" style="${col.width ? `width:${col.width};` : ''}" ${titleAttr}>${rendered}</td>`;
         }).join('')}</tr>`).join('');
     
     tbody.querySelectorAll('.asset-row').forEach((tr, idx) => { tr.addEventListener('click', () => config.onRowClick && config.onRowClick(filtered[idx])); });
@@ -806,7 +848,7 @@ export function createListView(container: HTMLElement, config: ListViewConfig) {
         </button>
       ` : ''}
       <button id="btn-add-asset" class="btn btn-primary">
-        <i data-lucide="plus" class="icon-sm"></i> 자산 추가
+        <i data-lucide="plus" class="icon-sm"></i> ${config.title === '직무별 기준 사양' ? '기준 사양 추가' : (config.title === '부품 마스터' ? '표준 부품 추가' : '자산 추가')}
       </button>
     `;
     

src/views/List/PartsMasterListView.ts

@@ -90,36 +90,35 @@ export function renderPartsMasterList(container: HTMLElement) {
         {
           header: '직무명',
           sortKey: 'job_name',
-          width: '15%',
+          width: '25%',
           render: j => `<strong style="color: var(--primary-color); font-size: 14px;">${formatInline(j.job_name || '-')}</strong>`
         },
         {
-          header: '권장 CPU 사양',
+          header: '요구 PC 등급',
-          sortKey: 'cpu_standard',
+          sortKey: 'required_grade',
-          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%',
+          width: '20%',
-          render: j => `<span style="font-weight: 700;">${j.min_score || 0}점 이상</span>`
+          render: j => {
+            const grade = j.required_grade || '중급';
+            let badgeClass = 'b-green';
+            let style = 'background-color: #10B981; color: white;';
+            if (grade === '최상급') {
+              badgeClass = 'b-purple';
+              style = 'background-color: #7C3AED; color: white;';
+            } else if (grade === '상급') {
+              badgeClass = 'b-primary';
+              style = 'background-color: #4F46E5; color: white;';
+            } else if (grade === '보급') {
+              badgeClass = 'b-yellow';
+              style = 'background-color: #F59E0B; color: white;';
+            }
+            return `<span class="badge ${badgeClass}" style="${style} padding: 4px 10px; font-size: 0.85rem; font-weight: 700;">${grade}</span>`;
+          }
         },
         {
           header: '비고',
           sortKey: 'remarks',
-          width: '20%',
+          width: '50%',
           render: j => formatInline(j.remarks || '-')
         }
       ]
@@ -130,8 +129,8 @@ export function renderPartsMasterList(container: HTMLElement) {
 }
 
 function renderSubTabs(container: HTMLElement) {
-  const header = container.querySelector('.page-header');
+  const searchBar = container.querySelector('.search-bar');
-  if (!header) return;
+  if (!searchBar) return;
 
   // 기존에 생성된 탭 바가 있다면 제거하여 중복 방지 (스타일만 수정하는 최소 침습 방식)
   const existingTabs = container.querySelector('.sub-tab-container');
@@ -139,21 +138,27 @@ function renderSubTabs(container: HTMLElement) {
 
   const tabContainer = document.createElement('div');
   tabContainer.className = 'sub-tab-container';
-  tabContainer.style.cssText = 'display: flex; gap: 1rem; padding: 0 2rem; border-bottom: 1px solid var(--hairline); background: var(--canvas);';
+  tabContainer.style.cssText = 'display: flex; justify-content: space-between; align-items: center; padding: 0 2rem; border-bottom: 1px solid var(--hairline); background: var(--canvas);';
 
   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: 1rem 0.5rem; border: none; background: none; font-size: var(--fs-sm); font-weight: 600; cursor: pointer; color: ${tab1Active ? 'var(--primary)' : 'var(--mute)'}; position: relative; border-bottom: 2px solid ${tab1Active ? 'var(--primary)' : 'transparent'}; margin-bottom: -1px;">
+    <div style="display: flex; gap: 1rem;">
-      부품 표준 등급
+      <button id="tab-parts-master" class="sub-tab-btn ${tab1Active ? 'active' : ''}" style="padding: 1rem 0.5rem; border: none; background: none; font-size: var(--fs-sm); font-weight: 600; cursor: pointer; color: ${tab1Active ? 'var(--primary)' : 'var(--mute)'}; position: relative; border-bottom: 2px solid ${tab1Active ? 'var(--primary)' : 'transparent'}; margin-bottom: -1px;">
-    </button>
+        부품 표준 등급
-    <button id="tab-job-spec" class="sub-tab-btn ${tab2Active ? 'active' : ''}" style="padding: 1rem 0.5rem; border: none; background: none; font-size: var(--fs-sm); font-weight: 600; cursor: pointer; color: ${tab2Active ? 'var(--primary)' : 'var(--mute)'}; position: relative; border-bottom: 2px solid ${tab2Active ? 'var(--primary)' : 'transparent'}; margin-bottom: -1px;">
+      </button>
-      직무별 기준 사양
+      <button id="tab-job-spec" class="sub-tab-btn ${tab2Active ? 'active' : ''}" style="padding: 1rem 0.5rem; border: none; background: none; font-size: var(--fs-sm); font-weight: 600; cursor: pointer; color: ${tab2Active ? 'var(--primary)' : 'var(--mute)'}; position: relative; border-bottom: 2px solid ${tab2Active ? 'var(--primary)' : 'transparent'}; margin-bottom: -1px;">
-    </button>
+        직무별 기준 사양
+      </button>
+    </div>
+    <div style="font-size: 0.8rem; color: #4B5563; font-weight: 700; display: flex; align-items: center; gap: 4px; background: #F3F4F6; padding: 5px 12px; border-radius: 6px; border: 1px dashed #D1D5DB; margin-bottom: 4px;">
+      <span>💡</span>
+      <span>${tab2Active ? '우측 상단의 [기준 사양 추가] 버튼을 누르거나, 테이블의 행을 클릭하여 관리할 수 있습니다.' : '우측 상단의 [표준 부품 추가] 버튼을 누르거나, 테이블의 행을 클릭하여 관리할 수 있습니다.'}</span>
+    </div>
   `;
 
-  header.parentNode!.insertBefore(tabContainer, header.nextSibling);
+  searchBar.parentNode!.insertBefore(tabContainer, searchBar);
 
   const tabPartsMaster = tabContainer.querySelector('#tab-parts-master')!;
   const tabJobSpec = tabContainer.querySelector('#tab-job-spec')!;

src/views/List/ServerListView.ts

@@ -22,11 +22,10 @@ export function renderServerList(container: HTMLElement) {
     onRowClick: (asset) => openHwModal(asset, 'view'),
     columns: [
       { header: ASSET_SCHEMA.CURRENT_DEPT.ui, sortKey: ASSET_SCHEMA.CURRENT_DEPT.key, align: 'center', render: a => a[ASSET_SCHEMA.CURRENT_DEPT.key] || '-' },
-      { header: ASSET_SCHEMA.ASSET_PURPOSE.ui, sortKey: ASSET_SCHEMA.ASSET_PURPOSE.key, align: 'center', width: '15%', render: a => formatInline(a[ASSET_SCHEMA.ASSET_PURPOSE.key] || '-') },
+      { header: ASSET_SCHEMA.ASSET_PURPOSE.ui, sortKey: ASSET_SCHEMA.ASSET_PURPOSE.key, width: '15%', render: a => formatInline(a[ASSET_SCHEMA.ASSET_PURPOSE.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: '모델/메인보드', 
-        align: 'center',
         width: '15%',
         render: a => formatInline(a[ASSET_SCHEMA.MODEL_NAME.key] || a[ASSET_SCHEMA.ASSET_NAME.key] || a[ASSET_SCHEMA.MAINBOARD.key] || '-') 
       },

src/views/List/StorageListView.ts

@@ -21,7 +21,7 @@ export function renderStorageList(container: HTMLElement) {
       { header: ASSET_SCHEMA.CURRENT_USER.ui, sortKey: ASSET_SCHEMA.CURRENT_USER.key, align: 'center', render: a => a[ASSET_SCHEMA.CURRENT_USER.key] || '-' },
       { header: ASSET_SCHEMA.ASSET_TYPE.ui, sortKey: ASSET_SCHEMA.ASSET_TYPE.key, align: 'center', width: '10%', render: a => a[ASSET_SCHEMA.ASSET_TYPE.key] || '-' },
       { header: ASSET_SCHEMA.VOLUME.ui, sortKey: ASSET_SCHEMA.VOLUME.key, align: 'center', render: a => a[ASSET_SCHEMA.VOLUME.key] || '-' },
-      { header: ASSET_SCHEMA.MODEL_NAME.ui, sortKey: ASSET_SCHEMA.MODEL_NAME.key, align: 'center', render: a => formatInline(a[ASSET_SCHEMA.MODEL_NAME.key] || a[ASSET_SCHEMA.ASSET_NAME.key] || '-') },
+      { header: ASSET_SCHEMA.MODEL_NAME.ui, sortKey: ASSET_SCHEMA.MODEL_NAME.key, render: a => formatInline(a[ASSET_SCHEMA.MODEL_NAME.key] || a[ASSET_SCHEMA.ASSET_NAME.key] || '-') },
       { header: ASSET_SCHEMA.SERIAL_NUM.ui, sortKey: ASSET_SCHEMA.SERIAL_NUM.key, align: 'center', render: a => a[ASSET_SCHEMA.SERIAL_NUM.key] || '-' },
       { 
         header: ASSET_SCHEMA.LOCATION.ui, 

src/views/List/UserListView.ts

@@ -9,9 +9,10 @@ export function renderUserList(container: HTMLElement) {
     dataSource: () => state.masterData.users || [],
     searchKeys: ['emp_no', 'user_name', 'dept_name', 'position', 'status'],
     filterOptions: {
-      keywordLabel: '사번/이름/부서/직급 검색',
+      keywordLabel: '사번/이름/조직/직무 검색',
       showCorp: false,
       showDept: true,
+      showPosition: true,
       showType: false
     },
     onRowClick: (user) => openUserModal(user, 'view'),
@@ -38,7 +39,7 @@ export function renderUserList(container: HTMLElement) {
         render: u => formatInline(u.dept_name || '-')
       },
       {
-        header: '직급 (직무)',
+        header: '직무',
         sortKey: 'position',
         align: 'left',
         width: '25%',

src/views/LocationView.ts

@@ -4,11 +4,12 @@ import { ASSET_SCHEMA } from '../core/schema';
 import { LOCATION_DATA, IMAGE_LOCATIONS } from '../components/Modal/SharedData';
 
 /**
- * 위치 중심 자산 현황 뷰 (Vercel Integrated)
+ * 위치 중심 자산 현황 뷰 (Refined)
  */
 export async function renderLocationView(container: HTMLElement) {
   if (!container) return;
 
+  // 로컬 상태 (UI 제어용)
   let currentLoc = '기술개발센터';
   let currentDetail = '서버실';
   let currentPage = 0; 
@@ -25,51 +26,40 @@ export async function renderLocationView(container: HTMLElement) {
                      : [];
     const mapPath = locImages[currentPage] || '';
     
-    // 조회 모드: 설정 파일에 정의된 asset_id를 기준으로 자산 데이터 매핑
+    // 자산이 등록된(좌표가 일치하는) 구역만 필터링하여 표시
     const allBoxes = mapConfig[mapPath] || [];
-    const boxes = allBoxes.filter((box: any) => box.asset_id != null);
+    const boxes = allBoxes.filter((box: any) => 
-
+      state.masterData.hw.some(a => 
-    // 모든 하드웨어 카테고리에서 자산 검색
+        a.location === currentLoc && 
-    const allHwAssets = [
+        a.location_detail === currentDetail && 
-      ...state.masterData.pc,
+        String(a.loc_x) === String(box.x) && 
-      ...state.masterData.server,
+        String(a.loc_y) === String(box.y)
-      ...state.masterData.storage,
+      )
-      ...state.masterData.network,
+    );
-      ...state.masterData.equipment,
-      ...state.masterData.survey,
-      ...state.masterData.officeSupplies,
-      ...state.masterData.pcParts
-    ];
 
     container.innerHTML = `
       <div class="location-view-wrapper">
-        <!-- 상단 통합 바 (Unified Search Bar) -->
+        <!-- 2단계 필터 바 -->
-        <div class="location-filter-bar search-bar">
+        <div class="location-filter-bar">
-          <div class="search-item">
+          <div class="filter-group">
-            <label class="list-view-toggle-label">
-              <input type="checkbox" id="chk-list-view-loc" />
-              목록보기
-            </label>
-          </div>
-          <div class="search-item">
             <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="search-item">
+          <div class="filter-group">
             <label>상세 위치</label>
-            <div class="flex items-center gap-2">
+            <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-group">
+              <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 flex gap-1">
+                <div class="page-btns">
-                  <button id="btn-prev-page" class="btn btn-outline btn-sm" ${currentPage === 0 ? 'disabled' : ''}>이전</button>
+                  <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" ${currentPage === locImages.length - 1 ? '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>
@@ -78,49 +68,49 @@ export async function renderLocationView(container: HTMLElement) {
           </div>
         </div>
 
-        <div class="location-main-content">
+        <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">
+          <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">
+            <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" class="map-image">
+                <img src="${mapPath}" id="main-map-img" style="max-width: 100%; max-height: 100%; object-fit: contain; display: block;">
-                <div id="box-overlay" class="map-overlay">
+                <div id="box-overlay" style="position: absolute; pointer-events: none; transition: none;">
                   ${boxes.map((box: any, idx: number) => {
-                    const asset = allHwAssets.find(a => a.id === box.asset_id);
+                    const name = box.name || `#${idx+1}`;
-                    const name = asset ? ((asset as any).asset_purpose || asset.asset_code) : (box.name || `#${idx+1}`);
-                    // w, h가 없거나 너무 작으면 최소 크기(3%) 보장하여 영역으로 표시
-                    const width = Math.max(parseFloat(box.w || '3'), 3);
-                    const height = Math.max(parseFloat(box.h || '3'), 3);
                     return `
-                    <div class="location-box-area" 
+                    <div class="location-box-point" 
-                         data-asset-id="${box.asset_id}"
                          data-name="${name}"
-                         style="left:${box.x}%; top:${box.y}%; width:${width}%; height:${height}%;
+                         data-x="${box.x}"
-                                border: 2px solid var(--primary-color); background: rgba(30, 81, 73, 0.1); cursor:pointer; pointer-events: auto; position: absolute;">
+                         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 class="no-map-message">해당 위치의 도면이 등록되지 않았습니다.</div>'}
+              ` : '<div style="padding: 5rem; text-align:center; color: #999;">해당 위치의 도면이 등록되지 않았습니다.</div>'}
             </div>
           </div>
 
-          <!-- 상세 정보 섹션 -->
+          <!-- 상세 정보 섹션: 내부 스크롤만 허용 -->
-          <div class="asset-list-section">
+          <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">
+            <div class="section-header" style="flex-shrink: 0; background: #f8fafc; border-bottom: 1px solid var(--border-color); padding: 1rem;">
-               <h4 id="loc-list-title" class="sidebar-title">구역을 선택하세요</h4>
+               <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">
+            <div id="loc-asset-table-container" class="mini-table-wrapper" style="flex: 1; overflow-y: auto; padding: 0;">
-               <div class="empty-state">지도에서 자산 위치를 클릭하세요.</div>
+               <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';
@@ -133,7 +123,7 @@ export async function renderLocationView(container: HTMLElement) {
     if (img) {
       if (img.complete) {
         syncOverlaySize();
-        setTimeout(syncOverlaySize, 50); 
+        setTimeout(syncOverlaySize, 50); // 레이아웃 안정화 대기
       } else {
         img.onload = syncOverlaySize;
       }
@@ -142,6 +132,7 @@ export async function renderLocationView(container: HTMLElement) {
     window.removeEventListener('resize', syncOverlaySize);
     window.addEventListener('resize', syncOverlaySize);
 
+    // 이벤트 바인딩
     const selMain = container.querySelector('#sel-loc-main') as HTMLSelectElement;
     selMain?.addEventListener('change', () => {
       currentLoc = selMain.value;
@@ -160,33 +151,23 @@ export async function renderLocationView(container: HTMLElement) {
     container.querySelector('#btn-prev-page')?.addEventListener('click', () => { currentPage--; render(); });
     container.querySelector('#btn-next-page')?.addEventListener('click', () => { currentPage++; render(); });
 
-    const chkBox = container.querySelector('#chk-list-view-loc') as HTMLInputElement;
+    container.querySelectorAll('.location-box-point').forEach(box => {
-
-    if (chkBox) {
-        chkBox.checked = (state as any).currentViewMode === 'asset';
-        const handleToggle = () => {
-            const isListMode = chkBox.checked;
-            if (isListMode) {
-                state.viewMode = 'list';
-                (state as any).currentViewMode = 'asset';
-            } else {
-                state.viewMode = 'location';
-                (state as any).currentViewMode = 'location';
-            }
-            window.dispatchEvent(new Event('refresh-view'));
-        };
-        chkBox.addEventListener('change', handleToggle);
-    }
-
-    container.querySelectorAll('.location-box-area').forEach(box => {
       box.addEventListener('click', () => {
-        const assetId = box.getAttribute('data-asset-id');
+        const x = box.getAttribute('data-x');
-        if (!assetId) return;
+        const y = box.getAttribute('data-y');
 
-        const targetAsset = allHwAssets.find(a => a.id === assetId);
+        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);
+        if (targetAsset) {
-        container.querySelectorAll('.location-box-area').forEach(b => (b as HTMLElement).style.background = 'rgba(30, 81, 73, 0.1)');
+          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)';
       });
     });
@@ -198,54 +179,64 @@ export async function renderLocationView(container: HTMLElement) {
     
     title.innerHTML = `
       <div class="detail-header-actions">
-        <div class="header-identity">
+        <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="asset-code-title">${asset.asset_code || '미부여'}</span>
+        <span class="detail-header-title">자산 상세 정보</span>
-          <span class="service-type-badge">${asset.service_type || '운영'}</span>
+        <button id="btn-edit-from-loc" class="btn btn-primary btn-sm" style="font-size: 11px; height: 28px;">수정</button>
-          <span class="asset-type-label">${asset.asset_type || 'PC'}</span>
-        </div>
-        <button id="btn-view-from-loc" class="btn btn-primary btn-sm">조회</button>
       </div>
     `;
 
-    const fields = [
+    const renderSection = (title: string, fields: { label: string; value: any }[]) => `
-      { label: ASSET_SCHEMA.CURRENT_DEPT.ui, value: asset.current_dept },
+      <div class="detail-section">
-      { label: ASSET_SCHEMA.HW_STATUS.ui, value: asset.hw_status },
+        <div class="detail-section-title">${title}</div>
-      { label: ASSET_SCHEMA.MANAGER_MAIN.ui, value: asset.manager_primary },
+        <div class="detail-grid">
-      { label: ASSET_SCHEMA.MANAGER_SUB.ui, value: asset.manager_secondary },
-      { label: ASSET_SCHEMA.ASSET_PURPOSE.ui, value: asset.asset_purpose, fullWidth: true },
-      { 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, fullWidth: true },
-      { 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 },
-      { label: ASSET_SCHEMA.MONITORING.ui, value: asset.monitoring },
-      { label: ASSET_SCHEMA.MEMO.ui, value: asset.memo, fullWidth: true }
-    ];
-
-    const sectionsHTML = `
-      <div class="detail-section" style="margin-bottom: 0;">
-        <div class="detail-grid-2col" style="gap: 0.75rem 1rem;">
           ${fields.map(f => `
-            <div class="detail-item ${f.fullWidth ? 'full-width' : ''}">
+            <div class="detail-label">${f.label}</div>
-              <div class="detail-label-sm">${f.label}</div>
+            <div class="detail-value">${f.value || '-'}</div>
-              <div class="detail-value-lg">${f.value || '-'}</div>
-            </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-view-from-loc')?.addEventListener('click', () => {
+    container.querySelector('#btn-back-to-list')?.addEventListener('click', () => {
-      openHwModal(asset, 'view');
+      title.textContent = `📍 구역을 선택하세요`;
+      tableContainer.innerHTML = `<div class="empty-state" style="padding: 3rem 1rem;">지도에서 자산 위치를 클릭하세요.</div>`;
+    });
+
+    container.querySelector('#btn-edit-from-loc')?.addEventListener('click', () => {
+      openHwModal(asset, 'edit');
     });
   };
 

src/views/MapEditor.ts

@@ -18,7 +18,6 @@ export class MapEditor {
   private startY: number = 0;
   private currentBox: HTMLElement | null = null;
   private currentPath: string = '';
-  private assetOptions: {id: string, name: string}[] = [];
 
   constructor() {
     this.container = document.getElementById('container')!;
@@ -34,35 +33,11 @@ export class MapEditor {
   public async init() {
     this.renderFileSidebar();
     await this.loadConfig();
-    await this.loadAssets();
     this.bindEvents();
     this.selectFirstFile();
     createIcons({ icons: { X, Save, Trash2, ChevronLeft, ChevronRight } });
   }
 
-  private async loadAssets() {
-    try {
-      const res = await fetch(`http://${location.hostname}:3000/api/assets/master`);
-      const masterData = await res.json();
-      const allHw = [
-        ...(masterData.pc || []),
-        ...(masterData.server || []),
-        ...(masterData.storage || []),
-        ...(masterData.network || []),
-        ...(masterData.equipment || []),
-        ...(masterData.survey || []),
-        ...(masterData.officeSupplies || []),
-        ...(masterData.pcParts || [])
-      ];
-      this.assetOptions = allHw.map(a => ({
-        id: a.id,
-        name: `[${a.asset_code}] ${a.asset_purpose || a.model_name || a.category}`
-      }));
-    } catch (err) {
-      console.error('Failed to load assets for mapping', err);
-    }
-  }
-
   private renderFileSidebar() {
     let html = '';
     Object.entries(IMAGE_LOCATIONS).forEach(([bldg, details]) => {
@@ -162,8 +137,7 @@ export class MapEditor {
           x: (parseFloat(this.currentBox.style.left) / rect.width * 100).toFixed(2),
           y: (parseFloat(this.currentBox.style.top) / rect.height * 100).toFixed(2),
           w: (width / rect.width * 100).toFixed(2),
-          h: (height / rect.height * 100).toFixed(2),
+          h: (height / rect.height * 100).toFixed(2)
-          asset_id: null
         };
         this.boxes.push(boxData);
         this.render();
@@ -236,63 +210,13 @@ export class MapEditor {
       
       this.wrapper.appendChild(div);
 
-      // Create asset options dropdown
-      let optionsHtml = '<option value="">-- 자산 매핑 안 됨 --</option>';
-      this.assetOptions.forEach(opt => {
-        const selected = box.asset_id === opt.id ? 'selected' : '';
-        optionsHtml += `<option value="${opt.id}" ${selected}>${opt.name}</option>`;
-      });
-
       const item = document.createElement('div');
       item.className = 'box-item';
       item.innerHTML = `
-        <div class="box-header">
+        <span>#${i+1}: [${box.x}, ${box.y}]</span>
-          <span class="box-index">#${i+1}</span>
+        <button class="btn-del" onclick="removeBox(${i})">×</button>
-          <button class="btn-del" onclick="removeBox(${i})">×</button>
-        </div>
-        <div class="box-inputs" style="margin-bottom: 8px;">
-          <select data-index="${i}" data-prop="asset_id" style="width: 100%; padding: 4px;">
-            ${optionsHtml}
-          </select>
-        </div>
-        <div class="box-inputs">
-          <div class="input-group">
-            <label>X</label>
-            <input type="number" step="0.01" value="${box.x}" data-index="${i}" data-prop="x">
-          </div>
-          <div class="input-group">
-            <label>Y</label>
-            <input type="number" step="0.01" value="${box.y}" data-index="${i}" data-prop="y">
-          </div>
-          <div class="input-group">
-            <label>W</label>
-            <input type="number" step="0.01" value="${box.w}" data-index="${i}" data-prop="w">
-          </div>
-          <div class="input-group">
-            <label>H</label>
-            <input type="number" step="0.01" value="${box.h}" data-index="${i}" data-prop="h">
-          </div>
-        </div>
       `;
       this.boxListEl.appendChild(item);
     });
-
-    // Add events to new inputs and selects
-    this.boxListEl.querySelectorAll('input, select').forEach(input => {
-      input.addEventListener('change', (e) => {
-        const target = e.target as HTMLInputElement | HTMLSelectElement;
-        const index = parseInt(target.dataset.index!);
-        const prop = target.dataset.prop!;
-        
-        if (this.boxes[index]) {
-          if (prop === 'asset_id') {
-             this.boxes[index][prop] = target.value || null;
-          } else {
-             this.boxes[index][prop] = parseFloat(target.value).toFixed(2);
-             this.render(); // Re-render to update the map visual size
-          }
-        }
-      });
-    });
   }
 }

src/views/SW_Table.ts

@@ -15,22 +15,18 @@ import { renderGiftList } from './List/GiftListView';
 import { renderFacilityList } from './List/FacilityListView';
 import { renderCostList } from './List/CostListView';
 import { renderUserList } from './List/UserListView';
-import { createIcons, Plus, X, LayoutDashboard, Monitor, Server, Database, Laptop, CalendarClock, Key, Cpu, Layers, Users, Paperclip, Edit2, RefreshCcw, BookOpen, Settings } from 'lucide';
+import { createIcons, Plus, X, LayoutDashboard, Monitor, Server, Database, Laptop, CalendarClock, Key, Cpu, Layers, Users, Paperclip, Edit2, RefreshCcw, Settings } from 'lucide';
 
 /**
- * 자산 목록 테이블 렌더링 통합 허브 (Vercel Style Normalized)
+ * 자산 목록 테이블 렌더링 통합 허브
  */
 export function renderSWTable(mainContent: HTMLElement) {
   if (!mainContent) return;
   console.log(`📂 Rendering Table for: ${state.activeCategory} / ${state.activeSubTab}`);
   
-  mainContent.innerHTML = `
+  mainContent.innerHTML = ''; 
-    <div class="view-content-wrapper">
+  const container = document.createElement('div');
-      <div id="list-view-container" style="flex: 1; display: flex; flex-direction: column; overflow: hidden;"></div>
+  container.className = 'view-container'; 
-    </div>
-  `; 
-
-  const container = document.getElementById('list-view-container')!;
 
   try {
     const tab = state.activeSubTab;
@@ -73,9 +69,11 @@ export function renderSWTable(mainContent: HTMLElement) {
       }
     }
 
-    // 전역 아이콘 초기화
+    mainContent.appendChild(container);
+    
+    // 전역 아이콘 초기화 (한 번 더 실행하여 누락 방지)
     createIcons({
-      icons: { Plus, X, LayoutDashboard, Monitor, Server, Database, Laptop, CalendarClock, Key, Cpu, Layers, Users, Paperclip, Edit2, RefreshCcw, BookOpen, Settings }
+      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);