refactor: standardize modal system, unify hardware DB schemas, and implement automatic asset reclassification

db_init.js

@@ -10,50 +10,28 @@ async function initDB() {
     host: DB_HOST,
     user: DB_USER,
     password: DB_PASS,
-    port: parseInt(DB_PORT || '3306')
+    database: DB_NAME,
+    port: parseInt(DB_PORT || '3306'),
+    multipleStatements: true
   });
 
-  console.log('🚀 DB 초기화 시작...');
+  console.log('🔄 DB 초기화 시작 (표준화 스키마 적용)...');
 
-  // 1. 데이터베이스 생성
+  // 기존 테이블 삭제
-  await connection.query(`CREATE DATABASE IF NOT EXISTS ${DB_NAME};`);
+  const tablesToDrop = ['pc_assets', 'server_assets', 'storage_assets', 'equip_assets', 'mobile_assets', 'sw_sub_assets', 'sw_perm_assets', 'sw_users'];
-  await connection.query(`USE ${DB_NAME};`);
+  for (const table of tablesToDrop) {
-  console.log(`✅ 데이터베이스 생성 완료: ${DB_NAME}`);
+    await connection.query(`DROP TABLE IF EXISTS ${table}`);
+  }
 
-  // 2. 개인PC 테이블
+  // 공통 하드웨어 테이블 생성 함수
-  const createPcTable = `
+  const createHardwareTable = (tableName, comment) => `
-    CREATE TABLE IF NOT EXISTS pc_assets (
+    CREATE TABLE ${tableName} (
-      id VARCHAR(50) PRIMARY KEY,
-      corp VARCHAR(100) COMMENT '구매법인',
-      asset_code VARCHAR(100) COMMENT '자산번호/코드',
-      user VARCHAR(100) COMMENT '사용자',
-      location VARCHAR(255) COMMENT '설치위치',
-      cpu VARCHAR(255),
-      gpu VARCHAR(255),
-      ram VARCHAR(100),
-      ssd1 VARCHAR(100),
-      ssd2 VARCHAR(100),
-      hdd1 VARCHAR(100),
-      hdd2 VARCHAR(100),
-      ip_address VARCHAR(100),
-      hw_spec TEXT COMMENT 'HW사양 상세',
-      purchase_date VARCHAR(50),
-      price VARCHAR(100),
-      vendor VARCHAR(255),
-      doc_name VARCHAR(255),
-      remarks TEXT,
-      created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
-    ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
-  `;
-
-  // 3. 서버 테이블
-  const createServerTable = `
-    CREATE TABLE IF NOT EXISTS server_assets (
       id VARCHAR(50) PRIMARY KEY,
       corp VARCHAR(100) COMMENT '구매법인',
       asset_code VARCHAR(100) COMMENT '자산번호',
       purchase_date VARCHAR(50) COMMENT '구매일자',
-      type VARCHAR(50) DEFAULT '물리' COMMENT '물리/가상',
+      type VARCHAR(50) COMMENT '유형',
+      detail_purpose VARCHAR(50) COMMENT '상세용도',
       purpose VARCHAR(255) COMMENT '용도',
       details TEXT COMMENT '상세내용',
       current_org VARCHAR(255) COMMENT '현 사용조직',
@@ -74,122 +52,74 @@ async function initDB() {
       storage2 VARCHAR(255),
       storage3 VARCHAR(255),
       monitoring VARCHAR(100),
+      price VARCHAR(100) COMMENT '금액',
       remarks TEXT,
       created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
-    ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
+    ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci COMMENT='${comment}';
   `;
 
-  // 4. 스토리지 테이블
+  await connection.query(createHardwareTable('pc_assets', '개인PC 자산'));
-  const createStorageTable = `
+  await connection.query(createHardwareTable('server_assets', '서버 자산'));
-    CREATE TABLE IF NOT EXISTS storage_assets (
+  await connection.query(createHardwareTable('storage_assets', '스토리지 자산'));
-      id VARCHAR(50) PRIMARY KEY,
+  await connection.query(createHardwareTable('equip_assets', '전산비품 자산'));
-      corp VARCHAR(100) COMMENT '구매법인',
+  await connection.query(createHardwareTable('mobile_assets', '모바일기기 자산'));
-      type VARCHAR(50) COMMENT '유형',
-      asset_code VARCHAR(100) COMMENT '자산코드',
-      asset_name VARCHAR(255) COMMENT '명칭',
-      location VARCHAR(255) COMMENT '설치위치',
-      model_name VARCHAR(255),
-      capacity VARCHAR(100) COMMENT '용량',
-      manager_main VARCHAR(100) COMMENT '담당자(정)',
-      manager_sub VARCHAR(100) COMMENT '담당자(부)',
-      ip_address VARCHAR(100),
-      mac_address VARCHAR(100),
-      purchase_date VARCHAR(50),
-      price VARCHAR(100),
-      vendor VARCHAR(255),
-      doc_name VARCHAR(255),
-      remarks TEXT,
-      created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
-    ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
-  `;
 
-  // 5. 전산비품 테이블
+  // 소프트웨어 구독 테이블
-  const createEquipTable = `
-    CREATE TABLE IF NOT EXISTS equip_assets (
-      id VARCHAR(50) PRIMARY KEY,
-      corp VARCHAR(100) COMMENT '구매법인',
-      type VARCHAR(50) COMMENT '비품유형',
-      asset_code VARCHAR(100) COMMENT '자산코드',
-      asset_name VARCHAR(255) COMMENT '명칭',
-      location VARCHAR(255) COMMENT '설치위치',
-      manager VARCHAR(100) COMMENT '관리자',
-      ip_address VARCHAR(100),
-      mac_address VARCHAR(100),
-      hw_spec TEXT,
-      os VARCHAR(100),
-      purchase_date VARCHAR(50),
-      price VARCHAR(100),
-      vendor VARCHAR(255),
-      doc_name VARCHAR(255),
-      remarks TEXT,
-      created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
-    ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
-  `;
-
-  // 6. 구독SW 테이블
   const createSubSwTable = `
-    CREATE TABLE IF NOT EXISTS subscription_sw (
+    CREATE TABLE sw_sub_assets (
       id VARCHAR(50) PRIMARY KEY,
-      category VARCHAR(100) COMMENT '분야',
       corp VARCHAR(100) COMMENT '구매법인',
-      dept VARCHAR(100) COMMENT '부서',
+      asset_code VARCHAR(100) COMMENT '자산번호',
-      product_name VARCHAR(255) NOT NULL,
+      product_name VARCHAR(255) COMMENT '제품명',
-      purchase_date VARCHAR(50),
+      license_type VARCHAR(100) COMMENT '라이선스 유형',
-      subscription_date VARCHAR(50),
+      quantity INT COMMENT '수량',
-      price VARCHAR(100),
+      price VARCHAR(100) COMMENT '금액',
-      quantity INT DEFAULT 1,
+      purchase_date VARCHAR(50) COMMENT '구매일',
-      account_id VARCHAR(255) COMMENT '계정명',
+      expiry_date VARCHAR(50) COMMENT '만료일',
-      vendor VARCHAR(255),
+      vendor VARCHAR(255) COMMENT '납품업체',
-      remarks TEXT,
+      remarks TEXT COMMENT '비고',
       created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
     ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
   `;
 
-  // 7. 영구SW 테이블
+  // 소프트웨어 영구 테이블
   const createPermSwTable = `
-    CREATE TABLE IF NOT EXISTS permanent_sw (
+    CREATE TABLE sw_perm_assets (
       id VARCHAR(50) PRIMARY KEY,
-      category VARCHAR(100) COMMENT '분야',
       corp VARCHAR(100) COMMENT '구매법인',
-      dept VARCHAR(100) COMMENT '부서',
+      asset_code VARCHAR(100) COMMENT '자산번호',
-      product_name VARCHAR(255) NOT NULL,
+      product_name VARCHAR(255) COMMENT '제품명',
-      purchase_date VARCHAR(50),
+      license_key VARCHAR(255) COMMENT '라이선스 키',
-      maintenance_status TINYINT(1) DEFAULT 0,
+      quantity INT COMMENT '수량',
-      price VARCHAR(100),
+      price VARCHAR(100) COMMENT '금액',
-      quantity INT DEFAULT 1,
+      purchase_date VARCHAR(50) COMMENT '구매일',
-      account_id VARCHAR(255) COMMENT '계정명',
+      vendor VARCHAR(255) COMMENT '납품업체',
-      vendor VARCHAR(255),
+      remarks TEXT COMMENT '비고',
-      remarks TEXT,
       created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
     ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
   `;
 
-  // 8. SW 사용자 매핑 테이블 (FK 제약조건 제거하여 유연하게 관리)
+  // 소프트웨어 사용자 매핑 테이블
   const createSwUsersTable = `
-    CREATE TABLE IF NOT EXISTS sw_users (
+    CREATE TABLE sw_users (
-      id VARCHAR(50) PRIMARY KEY,
+      id INT AUTO_INCREMENT PRIMARY KEY,
-      sw_id VARCHAR(50),
+      sw_id VARCHAR(50) COMMENT 'SW 자산 ID',
-      corp VARCHAR(100),
+      corp VARCHAR(100) COMMENT '법인',
-      dept VARCHAR(100),
+      dept VARCHAR(100) COMMENT '부서',
-      team VARCHAR(100),
+      position VARCHAR(50) COMMENT '직위',
-      position VARCHAR(50),
+      user_name VARCHAR(100) COMMENT '이름',
-      name VARCHAR(100),
+      usage_period VARCHAR(100) COMMENT '사용기간',
-      usage_period VARCHAR(100),
+      doc_name VARCHAR(255) COMMENT '신청서명',
-      doc_name VARCHAR(255)
+      created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
     ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
   `;
 
-  await connection.query(createPcTable);
-  await connection.query(createServerTable);
-  await connection.query(createStorageTable);
-  await connection.query(createEquipTable);
   await connection.query(createSubSwTable);
   await connection.query(createPermSwTable);
   await connection.query(createSwUsersTable);
 
-  console.log('✅ 6개 전용 테이블 생성 완료!');
+  console.log('✅ 모든 테이블이 표준화된 스키마로 재생성되었습니다.');
   await connection.end();
-  console.log('🏁 DB 초기화 프로세스 종료.');
 }
 
 initDB().catch(err => {

server.js

@@ -11,7 +11,6 @@ const PORT = process.env.PORT || 3000;
 app.use(cors());
 app.use(express.json({ limit: '50mb' }));
 
-// DB 연결 풀 생성
 const pool = mysql.createPool({
   host: process.env.DB_HOST,
   user: process.env.DB_USER,
@@ -23,14 +22,14 @@ const pool = mysql.createPool({
   queueLimit: 0
 });
 
-// --- 공통 헬퍼 함수 ---
+// 공통 배치 저장 로직
-async function batchSave(tableName, assets, mapFn) {
+async function batchSave(tableName, assets, getQuery) {
   const connection = await pool.getConnection();
   try {
     await connection.beginTransaction();
     await connection.query(`DELETE FROM ${tableName}`);
     if (assets.length > 0) {
-      const { sql, values } = mapFn(assets);
+      const { sql, values } = getQuery(assets);
       await connection.query(sql, [values]);
     }
     await connection.commit();
@@ -43,111 +42,173 @@ async function batchSave(tableName, assets, mapFn) {
   }
 }
 
-// --- 1. 개인PC (PC) API ---
+// 공통 하드웨어 매핑 함수
+const mapHardware = (r, defaultType) => ({
+  id: r.id,
+  법인: r.corp,
+  자산코드: r.asset_code,
+  구매일: r.purchase_date,
+  purchase_date: r.purchase_date,
+  type: r.type || defaultType,
+  상세용도: r.detail_purpose,
+  detail_purpose: r.detail_purpose,
+  용도: r.purpose,
+  purpose: r.purpose,
+  상세: r.details,
+  details: r.details,
+  현사용조직: r.current_org,
+  current_org: r.current_org,
+  이전사용조직: r.prev_org,
+  prev_org: r.prev_org,
+  위치: r.location,
+  location: r.location,
+  담당자_정: r.manager_main,
+  manager_main: r.manager_main,
+  담당자_부: r.manager_sub,
+  manager_sub: r.manager_sub,
+  IP주소: r.ip_address,
+  ip_address: r.ip_address,
+  원격접속: r.remote_tool,
+  remote_tool: r.remote_tool,
+  서버ID: r.server_id,
+  server_id: r.server_id,
+  서버PW: r.server_pw,
+  server_pw: r.server_pw,
+  모델명: r.model_name,
+  model_name: r.model_name,
+  OS: r.os,
+  os: r.os,
+  CPU: r.cpu,
+  cpu: r.cpu,
+  RAM: r.ram,
+  ram: r.ram,
+  GPU: r.gpu,
+  gpu: r.gpu,
+  SSD1: r.storage1,
+  storage1: r.storage1,
+  SSD2: r.storage2,
+  storage2: r.storage2,
+  HDD1: r.storage3,
+  storage3: r.storage3,
+  모니터링: r.monitoring,
+  monitoring: r.monitoring,
+  금액: r.price,
+  price: r.price,
+  비고: r.remarks,
+  remarks: r.remarks
+});
+
+// 공통 하드웨어 저장 값 생성 함수
+const getHardwareValues = (a) => [
+  a.id, a.법인||'', a.자산코드||'', a.구매일||'', a.type||'', a.상세용도||'', a.용도||'', a.상세||'', a.현사용조직||'', a.이전사용조직||'', a.위치||'',
+  a.담당자_정||'', a.담당자_부||'', a.IP주소||'', a.원격접속||'', a.서버ID||'', a.서버PW||'', a.모델명||'', a.OS||'', a.CPU||'', a.RAM||'', a.GPU||'',
+  a.SSD1||'', a.SSD2||'', a.HDD1||'', a.모니터링||'', a.금액||'', a.비고||''
+];
+
+const hardwareInsertSQL = (table) => `
+  INSERT INTO ${table} 
+  (id, corp, asset_code, purchase_date, type, detail_purpose, purpose, details, current_org, prev_org, location, manager_main, manager_sub, ip_address, remote_tool, server_id, server_pw, model_name, os, cpu, ram, gpu, storage1, storage2, storage3, monitoring, price, remarks) 
+  VALUES ?
+`;
+
+// --- 1. 개인PC API ---
 app.get('/api/pc', async (req, res) => {
   try {
     const [rows] = await pool.query('SELECT * FROM pc_assets');
-    const mapped = rows.map(r => ({
+    res.json(rows.map(r => mapHardware(r, 'PC')));
-      id: r.id, type: '개인PC', 법인: r.corp, 자산코드: r.asset_code, 사용자: r.user, 위치: r.location,
-      CPU: r.cpu, GPU: r.gpu, RAM: r.ram, SSD1: r.ssd1, SSD2: r.ssd2, HDD1: r.hdd1, HDD2: r.hdd2,
-      IP주소: r.ip_address, HW사양: r.hw_spec, 구매일: r.purchase_date, 금액: r.price,
-      납품업체: r.vendor, 품의서명: r.doc_name, 비고: r.remarks
-    }));
-    res.json(mapped);
   } catch (err) { res.status(500).json({ error: err.message }); }
 });
 
 app.post('/api/pc/batch', async (req, res) => {
   try {
     const result = await batchSave('pc_assets', req.body, (assets) => ({
-      sql: `INSERT INTO pc_assets (id, corp, asset_code, user, location, cpu, gpu, ram, ssd1, ssd2, hdd1, hdd2, ip_address, hw_spec, purchase_date, price, vendor, doc_name, remarks) VALUES ?`,
+      sql: hardwareInsertSQL('pc_assets'),
-      values: assets.map(a => [a.id, a.법인||'', a.자산코드||'', a.사용자||'', a.위치||'', a.CPU||'', a.GPU||'', a.RAM||'', a.SSD1||'', a.SSD2||'', a.HDD1||'', a.HDD2||'', a.IP주소||'', a.HW사양||'', a.구매일||'', a.금액||'', a.납품업체||'', a.품의서명||'', a.비고||''])
+      values: assets.map(getHardwareValues)
     }));
     res.json(result);
   } catch (err) { res.status(500).json({ error: err.message }); }
 });
 
-// --- 2. 서버 (Server) API ---
+// --- 2. 서버 API ---
 app.get('/api/server', async (req, res) => {
   try {
     const [rows] = await pool.query('SELECT * FROM server_assets');
-    const mapped = rows.map(r => ({
+    res.json(rows.map(r => mapHardware(r, '서버')));
-      id: r.id, type: '서버', 법인: r.corp, 자산코드: r.asset_code, 구매일: r.purchase_date, storage유형: r.type, 
-      용도: r.purpose, 상세: r.details, 현사용조직: r.current_org, 이전사용조직: r.prev_org, 위치: r.location,
-      담당자_정: r.manager_main, 담당자_부: r.manager_sub, IP주소: r.ip_address, 원격접속: r.remote_tool,
-      서버ID: r.server_id, 서버PW: r.server_pw, 모델명: r.model_name, OS: r.os, CPU: r.cpu, RAM: r.ram, GPU: r.gpu,
-      SSD1: r.storage1, SSD2: r.storage2, HDD1: r.storage3, 모니터링: r.monitoring, 비고: r.remarks
-    }));
-    res.json(mapped);
   } catch (err) { res.status(500).json({ error: err.message }); }
 });
 
 app.post('/api/server/batch', async (req, res) => {
   try {
     const result = await batchSave('server_assets', req.body, (assets) => ({
-      sql: `INSERT INTO server_assets (id, corp, asset_code, purchase_date, type, purpose, details, current_org, prev_org, location, manager_main, manager_sub, ip_address, remote_tool, server_id, server_pw, model_name, os, cpu, ram, gpu, storage1, storage2, storage3, monitoring, remarks) VALUES ?`,
+      sql: hardwareInsertSQL('server_assets'),
-      values: assets.map(a => [a.id, a.법인||'', a.자산코드||'', a.구매일||'', a.storage유형||'물리', a.용도||'', a.상세||'', a.현사용조직||'', a.이전사용조직||'', a.위치||'', a.담당자_정||'', a.담당자_부||'', a.IP주소||'', a.원격접속||'', a.서버ID||'', a.서버PW||'', a.모델명||'', a.OS||'', a.CPU||'', a.RAM||'', a.GPU||'', a.SSD1||'', a.SSD2||'', a.HDD1||'', a.모니터링||'', a.비고||''])
+      values: assets.map(getHardwareValues)
     }));
     res.json(result);
   } catch (err) { res.status(500).json({ error: err.message }); }
 });
 
-// --- 3. 스토리지 (Storage) API ---
+// --- 3. 스토리지 API ---
 app.get('/api/storage', async (req, res) => {
   try {
     const [rows] = await pool.query('SELECT * FROM storage_assets');
-    const mapped = rows.map(r => ({
+    res.json(rows.map(r => mapHardware(r, '스토리지')));
-      id: r.id, type: '스토리지', 법인: r.corp, storage유형: r.type, 자산코드: r.asset_code, 명칭: r.asset_name,
-      위치: r.location, 모델명: r.model_name, 용량: r.capacity, 담당자_정: r.manager_main, 담당자_부: r.manager_sub,
-      IP주소: r.ip_address, MACaddress: r.mac_address, 구매일: r.purchase_date, 금액: r.price,
-      납품업체: r.vendor, 품의서명: r.doc_name, 비고: r.remarks
-    }));
-    res.json(mapped);
   } catch (err) { res.status(500).json({ error: err.message }); }
 });
 
 app.post('/api/storage/batch', async (req, res) => {
   try {
     const result = await batchSave('storage_assets', req.body, (assets) => ({
-      sql: `INSERT INTO storage_assets (id, corp, type, asset_code, asset_name, location, model_name, capacity, manager_main, manager_sub, ip_address, mac_address, purchase_date, price, vendor, doc_name, remarks) VALUES ?`,
+      sql: hardwareInsertSQL('storage_assets'),
-      values: assets.map(a => [a.id, a.법인||'', a.storage유형||'', a.자산코드||'', a.명칭||'', a.위치||'', a.모델명||'', a.용량||'', a.담당자_정||'', a.담당자_부||'', a.IP주소||'', a.MACaddress||'', a.구매일||'', a.금액||'', a.납품업체||'', a.품의서명||'', a.비고||''])
+      values: assets.map(getHardwareValues)
     }));
     res.json(result);
   } catch (err) { res.status(500).json({ error: err.message }); }
 });
 
-// --- 4. 전산비품 (Equipment) API ---
+// --- 4. 전산비품 API ---
 app.get('/api/equip', async (req, res) => {
   try {
     const [rows] = await pool.query('SELECT * FROM equip_assets');
-    const mapped = rows.map(r => ({
+    res.json(rows.map(r => mapHardware(r, '전산비품')));
-      id: r.id, type: '전산비품', 법인: r.corp, 비품유형: r.type, 자산코드: r.asset_code, 명칭: r.asset_name,
-      위치: r.location, 관리자: r.manager, IP주소: r.ip_address, MACaddress: r.mac_address,
-      HW사양: r.hw_spec, OS: r.os, 구매일: r.purchase_date, 금액: r.price,
-      납품업체: r.vendor, 품의서명: r.doc_name, 비고: r.remarks
-    }));
-    res.json(mapped);
   } catch (err) { res.status(500).json({ error: err.message }); }
 });
 
 app.post('/api/equip/batch', async (req, res) => {
   try {
     const result = await batchSave('equip_assets', req.body, (assets) => ({
-      sql: `INSERT INTO equip_assets (id, corp, type, asset_code, asset_name, location, manager, ip_address, mac_address, hw_spec, os, purchase_date, price, vendor, doc_name, remarks) VALUES ?`,
+      sql: hardwareInsertSQL('equip_assets'),
-      values: assets.map(a => [a.id, a.법인||'', a.비품유형||'', a.자산코드||'', a.명칭||'', a.위치||'', a.관리자||'', a.IP주소||'', a.MACaddress||'', a.HW사양||'', a.OS||'', a.구매일||'', a.금액||'', a.납품업체||'', a.품의서명||'', a.비고||''])
+      values: assets.map(getHardwareValues)
     }));
     res.json(result);
   } catch (err) { res.status(500).json({ error: err.message }); }
 });
 
-// --- 5. 구독SW (Subscription) API ---
+// --- 5. 모바일기기 API ---
+app.get('/api/mobile', async (req, res) => {
+  try {
+    const [rows] = await pool.query('SELECT * FROM mobile_assets');
+    res.json(rows.map(r => mapHardware(r, '모바일기기')));
+  } catch (err) { res.status(500).json({ error: err.message }); }
+});
+
+app.post('/api/mobile/batch', async (req, res) => {
+  try {
+    const result = await batchSave('mobile_assets', req.body, (assets) => ({
+      sql: hardwareInsertSQL('mobile_assets'),
+      values: assets.map(getHardwareValues)
+    }));
+    res.json(result);
+  } catch (err) { res.status(500).json({ error: err.message }); }
+});
+
+// --- 6. 소프트웨어 구독 API ---
 app.get('/api/sw/sub', async (req, res) => {
   try {
-    const [rows] = await pool.query('SELECT * FROM subscription_sw');
+    const [rows] = await pool.query('SELECT * FROM sw_sub_assets');
     const mapped = rows.map(r => ({
-      id: r.id, type: '구독SW', 분야: r.category, 법인: r.corp, 부서: r.dept, 제품명: r.product_name,
+      id: r.id, type: '구독SW', 법인: r.corp, 자산번호: r.asset_code, 제품명: r.product_name,
-      구매일: r.purchase_date, 구독일: r.subscription_date, 금액: r.price, 수량: r.quantity,
+      라이선스유형: r.license_type, 수량: r.quantity, 금액: r.price, 구매일: r.purchase_date,
-      계정명: r.account_id, 납품업체: r.vendor, 비고: r.remarks
+      만료일: r.expiry_date, 납품업체: r.vendor, 비고: r.remarks
     }));
     res.json(mapped);
   } catch (err) { res.status(500).json({ error: err.message }); }
@@ -155,22 +216,22 @@ app.get('/api/sw/sub', async (req, res) => {
 
 app.post('/api/sw/sub/batch', async (req, res) => {
   try {
-    const result = await batchSave('subscription_sw', req.body, (assets) => ({
+    const result = await batchSave('sw_sub_assets', req.body, (assets) => ({
-      sql: `INSERT INTO subscription_sw (id, category, corp, dept, product_name, purchase_date, subscription_date, price, quantity, account_id, vendor, remarks) VALUES ?`,
+      sql: `INSERT INTO sw_sub_assets (id, corp, asset_code, product_name, license_type, quantity, price, purchase_date, expiry_date, vendor, remarks) VALUES ?`,
-      values: assets.map(a => [a.id, a.분야||'', a.법인||'', a.부서||'', a.제품명||'', a.구매일||'', a.구독일||'', a.금액||'', a.수량||1, a.계정명||'', a.납품업체||'', a.비고||''])
+      values: assets.map(a => [a.id, a.법인||'', a.자산번호||'', a.제품명||'', a.라이선스유형||'', a.수량||0, a.금액||'', a.구매일||'', a.만료일||'', a.납품업체||'', a.비고||''])
     }));
     res.json(result);
   } catch (err) { res.status(500).json({ error: err.message }); }
 });
 
-// --- 6. 영구SW (Permanent) API ---
+// --- 7. 소프트웨어 영구 API ---
 app.get('/api/sw/perm', async (req, res) => {
   try {
-    const [rows] = await pool.query('SELECT * FROM permanent_sw');
+    const [rows] = await pool.query('SELECT * FROM sw_perm_assets');
     const mapped = rows.map(r => ({
-      id: r.id, type: '영구SW', 분야: r.category, 법인: r.corp, 부서: r.dept, 제품명: r.product_name,
+      id: r.id, type: '영구SW', 법인: r.corp, 자산번호: r.asset_code, 제품명: r.product_name,
-      구매일: r.purchase_date, 유지보수여부: !!r.maintenance_status, 금액: r.price, 수량: r.quantity,
+      라이선스키: r.license_key, 수량: r.quantity, 금액: r.price, 구매일: r.purchase_date,
-      계정명: r.account_id, 납품업체: r.vendor, 비고: r.remarks
+      납품업체: r.vendor, 비고: r.remarks
     }));
     res.json(mapped);
   } catch (err) { res.status(500).json({ error: err.message }); }
@@ -178,35 +239,75 @@ app.get('/api/sw/perm', async (req, res) => {
 
 app.post('/api/sw/perm/batch', async (req, res) => {
   try {
-    const result = await batchSave('permanent_sw', req.body, (assets) => ({
+    const result = await batchSave('sw_perm_assets', req.body, (assets) => ({
-      sql: `INSERT INTO permanent_sw (id, category, corp, dept, product_name, purchase_date, maintenance_status, price, quantity, account_id, vendor, remarks) VALUES ?`,
+      sql: `INSERT INTO sw_perm_assets (id, corp, asset_code, product_name, license_key, quantity, price, purchase_date, vendor, remarks) VALUES ?`,
-      values: assets.map(a => [a.id, a.분야||'', a.법인||'', a.부서||'', a.제품명||'', a.구매일||'', a.유지보수여부?1:0, a.금액||'', a.수량||1, a.계정명||'', a.납품업체||'', a.비고||''])
+      values: assets.map(a => [a.id, a.법인||'', a.자산번호||'', a.제품명||'', a.라이선스키||'', a.수량||0, a.금액||'', a.구매일||'', a.납품업체||'', a.비고||''])
     }));
     res.json(result);
   } catch (err) { res.status(500).json({ error: err.message }); }
 });
 
-// --- 7. SW 사용자 (SW Users) API ---
+// --- 8. 소프트웨어 사용자 관리 API ---
 app.get('/api/sw-users', async (req, res) => {
   try {
     const [rows] = await pool.query('SELECT * FROM sw_users');
-    const mapped = rows.map(r => ({
+    const result = rows.map(u => ({
-      id: r.id, swId: r.sw_id, 법인: r.corp, 부서: r.dept, 팀: r.team, 직위: r.position, 이름: r.name, 사용기간: r.usage_period, 신청서명: r.doc_name
+      sw_id: u.sw_id,
+      userData: [u.corp||'', u.dept||'', u.position||'', u.user_name||'', u.usage_period||'', u.doc_name||'']
     }));
-    res.json(mapped);
+    res.json(result);
   } catch (err) { res.status(500).json({ error: err.message }); }
 });
 
 app.post('/api/sw-users/batch', async (req, res) => {
   try {
-    const result = await batchSave('sw_users', req.body, (users) => ({
+    const connection = await pool.getConnection();
-      sql: `INSERT INTO sw_users (id, sw_id, corp, dept, team, position, name, usage_period, doc_name) VALUES ?`,
+    await connection.beginTransaction();
-      values: users.map(u => [u.id, u.swId, u.법인||'', u.부서||'', u.팀||'', u.직위||'', u.이름||'', u.사용기간||'', u.신청서명||''])
+    await connection.query('DELETE FROM sw_users');
-    }));
+    const allUsers = req.body;
-    res.json(result);
+    if (allUsers.length > 0) {
+      const values = allUsers.flatMap(item => 
+        item.userDataList.map(u => [item.sw_id, u.구매법인||u.법인||'', u.부서||'', u.직위||'', u.이름||'', u.사용기간||'', u.신청서명||''])
+      );
+      if (values.length > 0) {
+        await connection.query('INSERT INTO sw_users (sw_id, corp, dept, position, user_name, usage_period, doc_name) VALUES ?', [values]);
+      }
+    }
+    await connection.commit();
+    connection.release();
+    res.json({ success: true });
   } catch (err) { res.status(500).json({ error: err.message }); }
 });
 
+// 자산번호 자동 생성 API
+app.get('/api/generate-asset-code', async (req, res) => {
+  const { prefix } = req.query;
+  if (!prefix) return res.status(400).json({ error: 'Prefix is required' });
+
+  try {
+    const tables = ['server_assets', 'pc_assets', 'storage_assets', 'equip_assets', 'mobile_assets'];
+    let maxNum = 0;
+
+    for (const table of tables) {
+      const [rows] = await pool.query(
+        `SELECT asset_code as 자산코드 FROM ${table} WHERE asset_code LIKE ? ORDER BY asset_code DESC LIMIT 1`,
+        [`${prefix}%`]
+      );
+      
+      if (rows.length > 0) {
+        const lastCode = rows[0].자산코드;
+        const lastNum = parseInt(lastCode.split('-').pop() || '0');
+        if (lastNum > maxNum) maxNum = lastNum;
+      }
+    }
+
+    const nextNum = String(maxNum + 1).padStart(3, '0');
+    res.json({ nextCode: `${prefix}${nextNum}` });
+  } catch (err) {
+    res.status(500).json({ error: err.message });
+  }
+});
+
 app.listen(PORT, () => {
   console.log(`📡 ITAM Dedicated API Server running on http://localhost:${PORT}`);
 });

src/components/Modal/HWModal.ts

@@ -1,6 +1,17 @@
-import { state } from '../../core/state';
+import { state, saveHardwareAsset, deleteHardwareAsset } from '../../core/state';
-import { HardwareAsset } from '../../core/excelHandler';
+import { HardwareAsset, MasterAssetData } from '../../core/excelHandler';
+import { openModal, closeModals } from './BaseModal';
 import { createIcons, Paperclip } from 'lucide';
+import { CORP_LIST, ORG_LIST, HW_TYPE_LIST, LOCATION_DATA, TYPE_PREFIX_MAP } from './SharedData';
+import { 
+  generateOptionsHTML, 
+  setFieldValue, 
+  getFieldValue, 
+  parseAndSetLocation, 
+  bindLocationEvents, 
+  getCombinedLocation,
+  setEditLock
+} from './ModalUtils';
 
 let currentAsset: HardwareAsset | null = null;
 let isEditMode = false;
@@ -17,15 +28,38 @@ const HW_MODAL_HTML = `
           <input type="hidden" id="hw-asset-id" />
           <input type="hidden" id="hw-asset-type" />
 
-          <!-- Group 1: 기본 정보 -->
+          <!-- Group 1: 기본 정보 (Identity) -->
           <div class="form-section-title">기본 정보 (Identity)</div>
           <div class="form-group">
-            <label for="hw-법인">법인</label>
+            <label for="hw-법인">구매법인</label>
-            <input type="text" id="hw-법인" required />
+            <select id="hw-법인" required>${generateOptionsHTML(CORP_LIST)}</select>
           </div>
           <div class="form-group">
             <label for="hw-자산코드">자산번호/코드</label>
-            <input type="text" id="hw-자산코드" required />
+            <div style="display:flex; gap:0.5rem;">
+              <input type="text" id="hw-자산코드" readonly placeholder="번호 생성을 클릭하세요" required />
+              <button type="button" id="btn-generate-hw-code" class="btn btn-outline" style="white-space:nowrap; padding:0 10px; font-size:0.8rem;">번호 생성</button>
+            </div>
+          </div>
+          <div class="form-group">
+            <label for="hw-현사용조직">현 사용조직</label>
+            <select id="hw-현사용조직">${generateOptionsHTML(ORG_LIST)}</select>
+          </div>
+          <div class="form-group" id="hw-이전사용조직-group">
+            <label for="hw-이전사용조직">이전 사용조직</label>
+            <input type="text" id="hw-이전사용조직" readonly />
+          </div>
+          <div class="form-group" id="hw-유형-group">
+            <label for="hw-유형">유형</label>
+            <select id="hw-유형">${generateOptionsHTML(HW_TYPE_LIST)}</select>
+          </div>
+          <div class="form-group" id="hw-상세용도-group" style="display:none;">
+            <label for="hw-상세용도">상세용도</label>
+            <select id="hw-상세용도">
+              <option value="">선택</option>
+              <option value="서버">서버</option>
+              <option value="개인PC">개인PC</option>
+            </select>
           </div>
           <div class="form-group server-only">
             <label for="hw-용도">용도</label>
@@ -35,7 +69,7 @@ const HW_MODAL_HTML = `
             <label for="hw-상세">상세 내용</label>
             <input type="text" id="hw-상세" />
           </div>
-          <div class="form-group non-server">
+          <div class="form-group non-server" id="hw-명칭-group">
             <label for="hw-명칭">명칭</label>
             <input type="text" id="hw-명칭" />
           </div>
@@ -44,79 +78,83 @@ const HW_MODAL_HTML = `
             <input type="text" id="hw-비고" />
           </div>
 
-          <!-- Group 2: 네트워크 정보 -->
+          <!-- Group 2: 네트워크 정보 (Connectivity) -->
-          <div class="form-section-title server-only">네트워크 정보 (Connectivity)</div>
+          <div class="form-section-title server-only" id="hw-network-title">네트워크 정보 (Connectivity)</div>
-          <div class="form-group server-only">
+          <div class="form-group server-only" id="hw-ip-group">
             <label for="hw-IP주소">IP 주소 1</label>
             <input type="text" id="hw-IP주소" />
           </div>
-          <div class="form-group server-only">
+          <div class="form-group server-only" id="hw-ip2-group">
             <label for="hw-IP2">IP 주소 2</label>
             <input type="text" id="hw-IP2" />
           </div>
-          <div class="form-group server-only">
+          <div class="form-group server-only" id="hw-remote-group">
             <label for="hw-원격접속">원격 도구 (Anydesk/Chrome 등)</label>
             <input type="text" id="hw-원격접속" />
           </div>
-          <div class="form-group server-only">
+          <div class="form-group server-only" id="hw-server-id-group">
             <label for="hw-서버ID">서버 ID</label>
             <input type="text" id="hw-서버ID" />
           </div>
-          <div class="form-group server-only">
+          <div class="form-group server-only" id="hw-server-pw-group">
             <label for="hw-서버PW">서버 PW</label>
             <input type="text" id="hw-서버PW" />
           </div>
-          <div class="form-group non-server" id="hw-IP주소-group">
+          <div class="form-group non-server" id="hw-ip-non-server-group">
             <label for="hw-IP주소-non-server">IP 주소</label>
             <input type="text" id="hw-IP주소-non-server" />
           </div>
 
-          <!-- Group 3: 시스템 사양 -->
+          <!-- Group 3: 시스템 사양 (Specifications) -->
-          <div class="form-section-title">시스템 사양 (Specifications)</div>
+          <div class="form-section-title" id="hw-spec-title">시스템 사양 (Specifications)</div>
-          <div class="form-group">
+          <div class="form-group" id="hw-model-group">
             <label for="hw-모델명">모델명</label>
             <input type="text" id="hw-모델명" />
           </div>
-          <div class="form-group">
+          <div class="form-group" id="hw-os-group">
             <label for="hw-OS">운영체제 (OS)</label>
             <input type="text" id="hw-OS" />
           </div>
-          <div class="form-group">
+          <div class="form-group" id="hw-cpu-group">
             <label for="hw-CPU">CPU 사양</label>
             <input type="text" id="hw-CPU" />
           </div>
-          <div class="form-group">
+          <div class="form-group" id="hw-ram-group">
             <label for="hw-RAM">RAM 용량</label>
             <input type="text" id="hw-RAM" />
           </div>
-          <div class="form-group">
+          <div class="form-group" id="hw-ssd1-group">
             <label for="hw-SSD1">Storage 1 (SSD/HDD)</label>
             <input type="text" id="hw-SSD1" />
           </div>
-          <div class="form-group">
+          <div class="form-group" id="hw-ssd2-group">
             <label for="hw-SSD2">Storage 2 (SSD/HDD)</label>
             <input type="text" id="hw-SSD2" />
           </div>
-          <div class="form-group server-only">
+          <div class="form-group server-only" id="hw-monitoring-group">
             <label for="hw-모니터링">모니터링 여부</label>
             <input type="text" id="hw-모니터링" />
           </div>
-          <div class="form-group" id="hw-비품유형-group" style="display:none;">
+          <div class="form-group full-width non-server" id="hw-hwspec-group">
-            <label for="hw-비품유형">비품유형</label>
-            <select id="hw-비품유형">
-              <option value="노트북">노트북</option><option value="태블릿">태블릿</option><option value="휴대폰">휴대폰</option>
-            </select>
-          </div>
-          <div class="form-group full-width non-server">
             <label for="hw-HW사양">H/W 사양 상세</label>
             <textarea id="hw-HW사양" rows="2"></textarea>
           </div>
 
-          <!-- Group 4: 관리 및 운영 -->
+          <!-- Group 4: 관리 및 운영 (Operation) -->
-          <div class="form-section-title">관리 및 운영 (Operation)</div>
+          <div class="form-section-title" id="hw-op-title">관리 및 운영 (Operation)</div>
-          <div class="form-group">
+          <div class="form-group hw-location-field">
-            <label for="hw-위치">설치위치</label>
+            <label for="hw-위치-빌딩">설치위치 (건물)</label>
-            <input type="text" id="hw-위치" />
+            <select id="hw-위치-빌딩">${generateOptionsHTML(Object.keys(LOCATION_DATA))}</select>
+          </div>
+          <div class="form-group hw-location-field">
+            <label for="hw-위치-상세">상세 위치</label>
+            <select id="hw-위치-상세">
+              <option value="">건물을 먼저 선택하세요</option>
+            </select>
+          </div>
+          <div class="form-group" id="hw-위치-기타-group" style="display:none;">
+            <label for="hw-위치-기타">직접 입력 (기타)</label>
+            <input type="text" id="hw-위치-기타" placeholder="상세 위치를 입력하세요" />
           </div>
           <div class="form-group">
             <label for="hw-담당자_정">담당자 (정)</label>
@@ -126,13 +164,13 @@ const HW_MODAL_HTML = `
             <label for="hw-담당자_부">담당자 (부)</label>
             <input type="text" id="hw-담당자_부" />
           </div>
-          <div class="form-group non-server">
+          <div class="form-group non-server" id="hw-purchase-date-group">
             <label for="hw-구매일">구매일</label>
             <input type="text" id="hw-구매일" />
           </div>
-          <div class="form-group non-server">
+          <div class="form-group non-server" id="hw-price-group">
             <label for="hw-금액">금액</label>
-            <input type="text" id="hw-금액" oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/\\B(?=(\\d{3})+(?!\d))/g, ',')" />
+            <input type="text" id="hw-금액" oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/\\\\B(?=(\\\\d{3})+(?!\d))/g, ',')" />
           </div>
           <div class="form-group full-width">
             <label>품의서 (파일 증빙)</label>
@@ -155,181 +193,275 @@ const HW_MODAL_HTML = `
   </div>
 `;
 
-export function openHwModal(asset: HardwareAsset) {
+export function openHwModal(asset: HardwareAsset, mode: 'view' | 'add' = 'view') {
   currentAsset = asset;
-  isEditMode = false; 
-  
   const modal = document.getElementById('hw-asset-modal')!;
-  const form = document.getElementById('hw-asset-form') as HTMLFormElement;
-  const saveBtn = document.getElementById('btn-save-hw-asset')!;
-  const revertBtn = document.getElementById('btn-revert-hw-edit')!;
   
-  form.reset();
+  // 1. 잠금 상태 통합 제어 (데이터 유무가 아닌 호출 mode에만 의존)
-  form.classList.remove('is-edit-mode');
+  setEditLock('hw-asset-form', mode, {
-  form.classList.add('is-view-mode');
+    saveBtnId: 'btn-save-hw-asset',
-  saveBtn.textContent = '수정'; 
+    revertBtnId: 'btn-revert-hw-edit',
-  revertBtn.classList.add('hidden'); 
+    generateBtnId: 'btn-generate-hw-code'
+  });
 
+  isEditMode = (mode === 'add');
+  
+  // 2. 데이터 바인딩
   fillHwFormData(asset);
 
   modal.classList.remove('hidden');
+  applyTypeSpecificUI(asset.type);
   createIcons({ icons: { Paperclip } });
 }
 
-function fillHwFormData(asset: HardwareAsset) {
+function applyTypeSpecificUI(type: string) {
-  (document.getElementById('hw-asset-id') as HTMLInputElement).value = asset.id;
+  const detailPurpose = getFieldValue('hw-상세용도');
-  (document.getElementById('hw-asset-type') as HTMLInputElement).value = asset.type;
+  const form = document.getElementById('hw-asset-form') as HTMLFormElement;
-  (document.getElementById('hw-법인') as HTMLInputElement).value = asset.법인;
+  if (!form) return;
-  (document.getElementById('hw-자산코드') as HTMLInputElement).value = asset.자산코드;
-  (document.getElementById('hw-위치') as HTMLInputElement).value = asset.위치;
-  (document.getElementById('hw-모델명') as HTMLInputElement).value = asset.모델명 || '';
-  (document.getElementById('hw-OS') as HTMLInputElement).value = asset.OS || '';
-  (document.getElementById('hw-CPU') as HTMLInputElement).value = asset.CPU || '';
-  (document.getElementById('hw-RAM') as HTMLInputElement).value = asset.RAM || '';
-  (document.getElementById('hw-SSD1') as HTMLInputElement).value = asset.SSD1 || '';
-  (document.getElementById('hw-SSD2') as HTMLInputElement).value = asset.SSD2 || '';
-  (document.getElementById('hw-담당자_정') as HTMLInputElement).value = asset.담당자_정 || asset.관리자 || '';
-  (document.getElementById('hw-담당자_부') as HTMLInputElement).value = asset.담당자_부 || '';
-  (document.getElementById('hw-품의서명') as HTMLElement).textContent = asset.품의서명 || '';
 
   const serverOnly = document.querySelectorAll('.server-only');
   const nonServer = document.querySelectorAll('.non-server');
-  const equipGroup = document.getElementById('hw-비품유형-group')!;
+  const locationFields = document.querySelectorAll('.hw-location-field');
   
-  if (asset.type === '서버') {
+  const groups: Record<string, HTMLElement | null> = {
-    serverOnly.forEach(el => (el as HTMLElement).style.display = 'flex');
+    detailPurpose: document.getElementById('hw-상세용도-group'),
-    nonServer.forEach(el => (el as HTMLElement).style.display = 'none');
+    model: document.getElementById('hw-model-group'),
-    equipGroup.style.display = 'none';
+    ip: document.getElementById('hw-ip-group'),
+    ip2: document.getElementById('hw-ip2-group'),
+    remote: document.getElementById('hw-remote-group'),
+    os: document.getElementById('hw-os-group'),
+    cpu: document.getElementById('hw-cpu-group'),
+    ram: document.getElementById('hw-ram-group'),
+    ssd1: document.getElementById('hw-ssd1-group'),
+    ssd2: document.getElementById('hw-ssd2-group'),
+    monitoring: document.getElementById('hw-monitoring-group'),
+    serverId: document.getElementById('hw-server-id-group'),
+    serverPw: document.getElementById('hw-server-pw-group'),
+    hwSpec: document.getElementById('hw-hwspec-group'),
+    ipNonServer: document.getElementById('hw-ip-non-server-group'),
+    type: document.getElementById('hw-유형-group'),
+    networkTitle: document.getElementById('hw-network-title'),
+    specTitle: document.getElementById('hw-spec-title'),
+    opTitle: document.getElementById('hw-op-title')
+  };
 
-    (document.getElementById('hw-용도') as HTMLInputElement).value = asset.용도 || '';
+  // 1. 초기화 (모든 유동 섹션 숨김)
-    (document.getElementById('hw-상세') as HTMLInputElement).value = asset.상세 || '';
-    (document.getElementById('hw-비고') as HTMLInputElement).value = asset.비고 || '';
-    (document.getElementById('hw-구매일') as HTMLInputElement).value = asset.구매일 || '';
-    (document.getElementById('hw-IP주소') as HTMLInputElement).value = asset.IP주소 || '';
-    (document.getElementById('hw-IP2') as HTMLInputElement).value = (asset as any).IP2 || '';
-    (document.getElementById('hw-원격접속') as HTMLInputElement).value = asset.원격접속 || '';
-    (document.getElementById('hw-서버ID') as HTMLInputElement).value = (asset as any).서버ID || '';
-    (document.getElementById('hw-서버PW') as HTMLInputElement).value = (asset as any).서버PW || '';
-    (document.getElementById('hw-모니터링') as HTMLInputElement).value = asset.모니터링 || '';
-  } else {
   serverOnly.forEach(el => (el as HTMLElement).style.display = 'none');
-    nonServer.forEach(el => (el as HTMLElement).style.display = 'flex');
+  nonServer.forEach(el => (el as HTMLElement).style.display = 'none');
+  locationFields.forEach(el => (el as HTMLElement).style.display = 'none');
+  Object.values(groups).forEach(g => { if (g) g.style.display = 'none'; });
   
-    (document.getElementById('hw-명칭') as HTMLInputElement).value = asset.명칭 || '';
+  if (groups.type) groups.type.style.display = 'flex';
-    (document.getElementById('hw-구매일') as HTMLInputElement).value = asset.구매일 || '';
+  if (groups.opTitle) groups.opTitle.style.display = 'flex';
-    (document.getElementById('hw-금액') as HTMLInputElement).value = asset.금액 || '';
-    (document.getElementById('hw-HW사양') as HTMLTextAreaElement).value = asset.HW사양 || '';
-    (document.getElementById('hw-IP주소-non-server') as HTMLInputElement).value = asset.IP주소 || '';
 
-    if (asset.type === '전산비품') {
+  // 2. 유형별 정밀 규칙 적용 (사용자 정의 100% 일치)
-      equipGroup.style.display = 'flex';
+  if (type === '서버') {
-      (document.getElementById('hw-비품유형') as HTMLSelectElement).value = asset.비품유형 || '노트북';
+    serverOnly.forEach(el => (el as HTMLElement).style.display = 'flex');
-    } else {
+    locationFields.forEach(el => (el as HTMLElement).style.display = 'flex');
-      equipGroup.style.display = 'none';
+    Object.values(groups).forEach(g => { if (g) g.style.display = 'flex'; });
   } 
+  else if (['스토리지', 'NAS', 'DAS'].includes(type)) {
+    serverOnly.forEach(el => (el as HTMLElement).style.display = 'flex');
+    locationFields.forEach(el => (el as HTMLElement).style.display = 'flex');
+    if (groups.networkTitle) groups.networkTitle.style.display = 'flex';
+    if (groups.ip) groups.ip.style.display = 'flex';
+    if (groups.specTitle) groups.specTitle.style.display = 'flex';
+    if (groups.model) groups.model.style.display = 'flex';
+    if (groups.ssd1) groups.ssd1.style.display = 'flex';
+    if (groups.ssd2) groups.ssd2.style.display = 'flex';
+  }
+  else if (type === 'PC' || type === '노트북') {
+    if (type === 'PC' && groups.detailPurpose) groups.detailPurpose.style.display = 'flex';
+    nonServer.forEach(el => (el as HTMLElement).style.display = 'flex');
+    if (groups.specTitle) groups.specTitle.style.display = 'flex';
+    ['model', 'os', 'cpu', 'ram', 'ssd1', 'ssd2', 'hwSpec', 'ipNonServer'].forEach(k => {
+      if (groups[k]) groups[k]!.style.display = 'flex';
+    });
+    if (type === 'PC' && detailPurpose === '서버') {
+      locationFields.forEach(el => (el as HTMLElement).style.display = 'flex');
+      if (groups.networkTitle) groups.networkTitle.style.display = 'flex';
+      ['ip', 'ip2', 'remote', 'serverId', 'serverPw', 'monitoring'].forEach(k => {
+        if (groups[k]) groups[k]!.style.display = 'flex';
+      });
+      if (groups.ipNonServer) groups.ipNonServer.style.display = 'none';
+    }
+  }
+  else if (['CPU', 'GPU', '모바일'].includes(type)) {
+    if (groups.specTitle) groups.specTitle.style.display = 'flex';
+    if (groups.model) groups.model.style.display = 'flex';
+  }
+  else if (type === 'RAM') {
+    if (groups.specTitle) groups.specTitle.style.display = 'flex';
+    if (groups.ram) groups.ram.style.display = 'flex';
+  }
+  else if (type === 'HDD') {
+    if (groups.specTitle) groups.specTitle.style.display = 'flex';
+    if (groups.ssd1) groups.ssd1.style.display = 'flex';
+  }
+  else if (type === '태블릿') {
+    if (groups.specTitle) groups.specTitle.style.display = 'flex';
+    if (groups.model) groups.model.style.display = 'flex';
+    if (groups.ssd1) groups.ssd1.style.display = 'flex';
+  }
+}
+
+function fillHwFormData(asset: HardwareAsset) {
+  setFieldValue('hw-asset-id', asset.id);
+  setFieldValue('hw-asset-type', asset.type);
+  setFieldValue('hw-법인', asset.법인);
+  setFieldValue('hw-자산코드', asset.자산코드);
+  setFieldValue('hw-현사용조직', asset.현사용조직);
+  setFieldValue('hw-이전사용조직', asset.이전사용조직);
+  setFieldValue('hw-상세용도', (asset as any).상세용도);
+
+  parseAndSetLocation(asset.위치, 'hw-위치-빌딩', 'hw-위치-상세', 'hw-위치-기타-group', 'hw-위치-기타');
+
+  setFieldValue('hw-모델명', asset.모델명);
+  setFieldValue('hw-OS', asset.OS);
+  setFieldValue('hw-CPU', asset.CPU);
+  setFieldValue('hw-RAM', asset.RAM);
+  setFieldValue('hw-SSD1', asset.SSD1);
+  setFieldValue('hw-SSD2', asset.SSD2);
+  setFieldValue('hw-담당자_정', asset.담당자_정 || asset.관리자);
+  setFieldValue('hw-담당자_부', asset.담당자_부);
+
+  const isServerGrade = asset.type === '서버' || (asset as any).상세용도 === '서버' || asset.type === '스토리지' || ['NAS', 'DAS'].includes(asset.type);
+
+  if (isServerGrade) {
+    setFieldValue('hw-용도', asset.용도 || (asset as any).purpose);
+    setFieldValue('hw-상세', asset.상세 || (asset as any).details);
+    setFieldValue('hw-비고', asset.비고 || (asset as any).remarks);
+    setFieldValue('hw-구매일', asset.구매일 || (asset as any).purchase_date);
+    setFieldValue('hw-유형', asset.storage유형 || asset.type);
+    setFieldValue('hw-IP주소', asset.IP주소 || (asset as any).ip_address);
+    setFieldValue('hw-IP2', (asset as any).IP2 || (asset as any).ip_address_2);
+    setFieldValue('hw-원격접속', asset.원격접속 || (asset as any).remote_tool);
+    setFieldValue('hw-서버ID', (asset as any).서버ID || (asset as any).server_id);
+    setFieldValue('hw-서버PW', (asset as any).서버PW || (asset as any).server_pw);
+    setFieldValue('hw-모니터링', asset.모니터링 || (asset as any).monitoring);
+  } else {
+    setFieldValue('hw-명칭', asset.명칭 || asset.모델명);
+    setFieldValue('hw-구매일', asset.구매일 || (asset as any).purchase_date);
+    setFieldValue('hw-금액', asset.금액 || (asset as any).price);
+    setFieldValue('hw-HW사양', asset.HW사양 || asset.상세 || (asset as any).details);
+    setFieldValue('hw-IP주소-non-server', asset.IP주소 || (asset as any).ip_address);
   }
 }
 
 export function initHwModal(onSave: () => void, closeModals: () => void) {
-  // HTML 주입
   if (!document.getElementById('hw-asset-modal')) {
     document.body.insertAdjacentHTML('beforeend', HW_MODAL_HTML);
   }
 
-  const modal = document.getElementById('hw-asset-modal')!;
   const form = document.getElementById('hw-asset-form') as HTMLFormElement;
-  const closeBtn = document.getElementById('btn-close-hw-modal')!;
-  const cancelBtn = document.getElementById('btn-cancel-hw-modal')!;
   const saveBtn = document.getElementById('btn-save-hw-asset')!;
   const revertBtn = document.getElementById('btn-revert-hw-edit')!;
   const deleteBtn = document.getElementById('btn-delete-hw-asset')!;
+  const typeSelect = document.getElementById('hw-유형') as HTMLSelectElement;
+  const detailPurposeSelect = document.getElementById('hw-상세용도') as HTMLSelectElement;
   
-  const closeModal = () => {
+  [typeSelect, detailPurposeSelect].forEach(el => {
-    closeModals();
+    el?.addEventListener('change', () => applyTypeSpecificUI(typeSelect.value));
-    isEditMode = false;
+  });
-  };
 
-  const switchToViewMode = () => {
+  bindLocationEvents('hw-위치-빌딩', 'hw-위치-상세', 'hw-위치-기타-group', 'hw-위치-기타');
+
+  const closeModalAction = () => { closeModals(); isEditMode = false; };
+  document.getElementById('btn-close-hw-modal')?.addEventListener('click', closeModalAction);
+  document.getElementById('btn-cancel-hw-modal')?.addEventListener('click', closeModalAction);
+  
+  revertBtn.addEventListener('click', () => {
+    setEditLock('hw-asset-form', 'view', {
+      saveBtnId: 'btn-save-hw-asset',
+      revertBtnId: 'btn-revert-hw-edit',
+      generateBtnId: 'btn-generate-hw-code'
+    });
     isEditMode = false;
-    form.classList.remove('is-edit-mode');
-    form.classList.add('is-view-mode');
-    saveBtn.textContent = '수정';
-    revertBtn.classList.add('hidden');
     if (currentAsset) fillHwFormData(currentAsset);
-  };
+  });
 
-  closeBtn.addEventListener('click', closeModal);
+  document.getElementById('btn-generate-hw-code')?.addEventListener('click', async () => {
-  cancelBtn.addEventListener('click', closeModal);
+    const typeValue = typeSelect.value;
-  modal.addEventListener('click', (e) => { if (e.target === modal) closeModal(); });
+    const purchaseDate = getFieldValue('hw-구매일');
-  revertBtn.addEventListener('click', () => { switchToViewMode(); });
+    const typeCode = TYPE_PREFIX_MAP[typeValue] || 'ETC';
+    const dateStr = purchaseDate.replace(/[^0-9]/g, '');
+    if (dateStr.length < 4) { alert('올바른 구매일(연월)을 입력해주세요.'); return; }
+    const prefix = `${typeCode}-${dateStr.substring(2, 6)}-`;
+    try {
+      const res = await fetch(`http://localhost:3000/api/generate-asset-code?prefix=${prefix}`);
+      const data = await res.json();
+      if (data.nextCode) setFieldValue('hw-자산코드', data.nextCode);
+    } catch (err) { alert('자산번호 생성에 실패했습니다.'); }
+  });
 
   saveBtn.addEventListener('click', () => {
     if (!currentAsset) return;
-
     if (!isEditMode) {
+      setEditLock('hw-asset-form', 'edit', {
+        saveBtnId: 'btn-save-hw-asset',
+        revertBtnId: 'btn-revert-hw-edit'
+      });
       isEditMode = true;
-      form.classList.remove('is-view-mode');
-      form.classList.add('is-edit-mode');
-      saveBtn.textContent = '저장';
-      revertBtn.classList.remove('hidden'); 
       return;
     }
     
-    const assetId = (document.getElementById('hw-asset-id') as HTMLInputElement).value;
+    const type = typeSelect.value;
-    const type = (document.getElementById('hw-asset-type') as HTMLInputElement).value;
+    const detailPurpose = detailPurposeSelect.value;
 
-    const updated: HardwareAsset = {
+    const updated: any = {
       ...currentAsset,
-      법인: (document.getElementById('hw-법인') as HTMLInputElement).value,
+      법인: getFieldValue('hw-법인'),
-      자산코드: (document.getElementById('hw-자산코드') as HTMLInputElement).value,
+      자산코드: getFieldValue('hw-자산코드'),
-      위치: (document.getElementById('hw-위치') as HTMLInputElement).value,
+      현사용조직: getFieldValue('hw-현사용조직'),
-      모델명: (document.getElementById('hw-모델명') as HTMLInputElement).value,
+      이전사용조직: getFieldValue('hw-이전사용조직'),
-      OS: (document.getElementById('hw-OS') as HTMLInputElement).value,
+      위치: getCombinedLocation('hw-위치-빌딩', 'hw-위치-상세', 'hw-위치-기타'),
-      CPU: (document.getElementById('hw-CPU') as HTMLInputElement).value,
+      모델명: getFieldValue('hw-모델명'),
-      RAM: (document.getElementById('hw-RAM') as HTMLInputElement).value,
+      OS: getFieldValue('hw-OS'),
-      SSD1: (document.getElementById('hw-SSD1') as HTMLInputElement).value,
+      CPU: getFieldValue('hw-CPU'),
-      SSD2: (document.getElementById('hw-SSD2') as HTMLInputElement).value,
+      RAM: getFieldValue('hw-RAM'),
-      담당자_정: (document.getElementById('hw-담당자_정') as HTMLInputElement).value,
+      SSD1: getFieldValue('hw-SSD1'),
-      관리자: (document.getElementById('hw-담당자_정') as HTMLInputElement).value,
+      SSD2: getFieldValue('hw-SSD2'),
-      담당자_부: (document.getElementById('hw-담당자_부') as HTMLInputElement).value,
+      담당자_정: getFieldValue('hw-담당자_정'),
+      관리자: getFieldValue('hw-담당자_정'),
+      담당자_부: getFieldValue('hw-담당자_부'),
+      type: type,
+      상세용도: detailPurpose
     };
 
-    if (type === '서버') {
+    if (type === '서버' || (type === 'PC' && detailPurpose === '서버') || ['스토리지', 'NAS', 'DAS'].includes(type)) {
-      updated.용도 = (document.getElementById('hw-용도') as HTMLInputElement).value;
+      updated.용도 = getFieldValue('hw-용도');
-      updated.상세 = (document.getElementById('hw-상세') as HTMLInputElement).value;
+      updated.상세 = getFieldValue('hw-상세');
-      updated.비고 = (document.getElementById('hw-비고') as HTMLInputElement).value;
+      updated.비고 = getFieldValue('hw-비고');
-      updated.IP주소 = (document.getElementById('hw-IP주소') as HTMLInputElement).value;
+      updated.storage유형 = type;
-      (updated as any).IP2 = (document.getElementById('hw-IP2') as HTMLInputElement).value;
+      updated.IP주소 = getFieldValue('hw-IP주소');
-      updated.원격접속 = (document.getElementById('hw-원격접속') as HTMLInputElement).value;
+      updated.IP2 = getFieldValue('hw-IP2');
-      (updated as any).서버ID = (document.getElementById('hw-서버ID') as HTMLInputElement).value;
+      updated.원격접속 = getFieldValue('hw-원격접속');
-      (updated as any).서버PW = (document.getElementById('hw-서버PW') as HTMLInputElement).value;
+      updated.서버ID = getFieldValue('hw-서버ID');
-      updated.모니터링 = (document.getElementById('hw-모니터링') as HTMLInputElement).value;
+      updated.서버PW = getFieldValue('hw-서버PW');
+      updated.모니터링 = getFieldValue('hw-모니터링');
     } else {
-      updated.명칭 = (document.getElementById('hw-명칭') as HTMLInputElement).value;
+      updated.명칭 = getFieldValue('hw-명칭');
-      updated.구매일 = (document.getElementById('hw-구매일') as HTMLInputElement).value;
+      updated.구매일 = getFieldValue('hw-구매일');
-      updated.금액 = (document.getElementById('hw-금액') as HTMLInputElement).value;
+      updated.금액 = getFieldValue('hw-금액');
-      updated.HW사양 = (document.getElementById('hw-HW사양') as HTMLTextAreaElement).value;
+      updated.HW사양 = getFieldValue('hw-HW사양');
-      updated.IP주소 = (document.getElementById('hw-IP주소-non-server') as HTMLInputElement).value;
+      updated.IP주소 = getFieldValue('hw-IP주소-non-server');
-      
-      if (type === '전산비품') {
-        updated.비품유형 = (document.getElementById('hw-비품유형') as HTMLSelectElement).value;
-      }
     }
 
-    const idx = state.masterData.hw.findIndex(a => a.id === assetId);
+    saveHardwareAsset(updated);
-    if (idx > -1) {
-      state.masterData.hw[idx] = updated;
     onSave();
-      switchToViewMode(); 
+    setEditLock('hw-asset-form', 'view', {
-    }
+      saveBtnId: 'btn-save-hw-asset',
+      revertBtnId: 'btn-revert-hw-edit'
+    });
+    isEditMode = false;
   });
 
   deleteBtn.addEventListener('click', () => {
     if (!currentAsset) return;
     if (confirm('정말로 이 자산을 삭제하시겠습니까?')) {
-      state.masterData.hw = state.masterData.hw.filter(a => a.id !== currentAsset!.id);
+      deleteHardwareAsset(currentAsset.id);
       onSave();
-      closeModal();
+      closeModals();
     }
   });
 }

src/components/Modal/ModalUtils.ts

@@ -0,0 +1,135 @@
+import { LOCATION_DATA } from './SharedData';
+
+/**
+ * 모달 조작 및 UI 생성을 위한 공통 유틸리티
+ */
+
+// 1. Select 박스의 Option HTML 생성
+export function generateOptionsHTML(list: string[], defaultValue: string = '', includeSelectHint: boolean = true): string {
+  let html = includeSelectHint ? '<option value="">선택</option>' : '';
+  html += list.map(item => `<option value="${item}" ${item === defaultValue ? 'selected' : ''}>${item}</option>`).join('');
+  return html;
+}
+
+// 2. 안전하게 폼 필드 값 설정 (Null 에러 방지)
+export function setFieldValue(id: string, value: any) {
+  const el = document.getElementById(id) as HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
+  if (el) {
+    el.value = value || '';
+  }
+}
+
+// 3. 안전하게 폼 필드 값 읽기
+export function getFieldValue(id: string): string {
+  const el = document.getElementById(id) as HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
+  return el ? el.value : '';
+}
+
+// 4. 위치 정보 파싱 및 UI 세팅
+export function parseAndSetLocation(locationStr: string, bldgId: string, detailId: string, etcGroupId: string, etcInputId: string) {
+  const bldgSelect = document.getElementById(bldgId) as HTMLSelectElement;
+  const detailSelect = document.getElementById(detailId) as HTMLSelectElement;
+  const etcGroup = document.getElementById(etcGroupId);
+  const etcInput = document.getElementById(etcInputId) as HTMLInputElement;
+
+  if (!bldgSelect || !detailSelect) return;
+
+  // 초기화
+  bldgSelect.value = '';
+  detailSelect.innerHTML = '<option value="">선택</option>';
+  if (etcGroup) etcGroup.style.display = 'none';
+
+  if (!locationStr) return;
+
+  const parts = locationStr.split(' ');
+  const bldg = parts[0];
+  
+  if (LOCATION_DATA[bldg]) {
+    bldgSelect.value = bldg;
+    // 상세 목록 갱신
+    detailSelect.innerHTML = generateOptionsHTML(LOCATION_DATA[bldg]);
+    
+    const detail = parts[1];
+    if (detail) {
+      detailSelect.value = detail;
+      if (detail === '기타' && etcGroup && etcInput) {
+        etcGroup.style.display = 'flex';
+        etcInput.value = parts.slice(2).join(' ');
+      }
+    }
+  }
+}
+
+// 5. 위치 종속성(Cascade) 이벤트 바인딩
+export function bindLocationEvents(bldgId: string, detailId: string, etcGroupId: string, etcInputId: string) {
+  const bldgSelect = document.getElementById(bldgId) as HTMLSelectElement;
+  const detailSelect = document.getElementById(detailId) as HTMLSelectElement;
+  const etcGroup = document.getElementById(etcGroupId);
+  const etcInput = document.getElementById(etcInputId) as HTMLInputElement;
+
+  if (!bldgSelect || !detailSelect) return;
+
+  bldgSelect.addEventListener('change', () => {
+    const bldg = bldgSelect.value;
+    detailSelect.innerHTML = generateOptionsHTML(LOCATION_DATA[bldg] || []);
+    if (etcGroup) etcGroup.style.display = 'none';
+    if (etcInput) etcInput.value = '';
+  });
+
+  detailSelect.addEventListener('change', () => {
+    if (etcGroup) {
+      etcGroup.style.display = detailSelect.value === '기타' ? 'flex' : 'none';
+    }
+  });
+}
+
+// 6. 위치 문자열 조합 (저장용)
+export function getCombinedLocation(bldgId: string, detailId: string, etcInputId: string): string {
+  const bldg = getFieldValue(bldgId);
+  const detail = getFieldValue(detailId);
+  const etc = getFieldValue(etcInputId);
+  
+  let combined = bldg;
+  if (detail) combined += ` ${detail}`;
+  if (detail === '기타' && etc) combined += ` ${etc}`;
+  
+  return combined.trim();
+}
+
+// 7. 조회/수정 모드 UI 통합 제어
+export function setEditLock(
+  formId: string, 
+  mode: 'view' | 'add' | 'edit', 
+  options: { 
+    saveBtnId: string, 
+    revertBtnId: string, 
+    generateBtnId?: string 
+  }
+) {
+  const form = document.getElementById(formId) as HTMLFormElement;
+  const saveBtn = document.getElementById(options.saveBtnId);
+  const revertBtn = document.getElementById(options.revertBtnId);
+  const generateBtn = options.generateBtnId ? document.getElementById(options.generateBtnId) : null;
+
+  if (!form || !saveBtn || !revertBtn) return;
+
+  if (mode === 'add' || mode === 'edit') {
+    // 편집 모드 활성화
+    form.classList.remove('is-view-mode');
+    form.classList.add('is-edit-mode');
+    saveBtn.textContent = '저장';
+    revertBtn.classList.toggle('hidden', mode === 'add'); // 신규 추가 시에는 취소 버튼 숨김 (닫기가 대신함)
+    
+    // 번호 생성 버튼은 '추가' 시에만 노출
+    if (generateBtn) generateBtn.classList.toggle('hidden', mode !== 'add');
+  } else {
+    // 조회 모드 (잠금)
+    form.classList.remove('is-edit-mode');
+    form.classList.add('is-view-mode');
+    saveBtn.textContent = '수정';
+    revertBtn.classList.add('hidden');
+    
+    // 조회 모드에서는 번호 생성 버튼 무조건 숨김
+    if (generateBtn) generateBtn.classList.add('hidden');
+  }
+}

src/components/Modal/PCModal.ts

@@ -1,6 +1,19 @@
-import { state } from '../../core/state';
+import { state, saveHardwareAsset, deleteHardwareAsset } from '../../core/state';
-import { HardwareAsset, HardwareLog } from '../../core/excelHandler';
+import { HardwareAsset } from '../../core/excelHandler';
-import { openModal } from './BaseModal';
+import { openModal, closeModals } from './BaseModal';
+import { createIcons, History, X, Paperclip } from 'lucide';
+import { CORP_LIST, ORG_LIST, HW_TYPE_LIST, LOCATION_DATA } from './SharedData';
+import { 
+  generateOptionsHTML, 
+  setFieldValue, 
+  getFieldValue, 
+  parseAndSetLocation, 
+  bindLocationEvents, 
+  getCombinedLocation 
+} from './ModalUtils';
+
+let currentAsset: HardwareAsset | null = null;
+let isEditMode = false;
 
 const PC_MODAL_HTML = `
   <div id="pc-asset-modal" class="modal-overlay hidden">
@@ -15,78 +28,93 @@ const PC_MODAL_HTML = `
             <form id="pc-asset-form" class="grid-form">
               <input type="hidden" id="pc-asset-id" />
               <input type="hidden" id="pc-asset-type" value="개인PC" />
+
+              <div class="form-section-title">기본 정보 (Identity)</div>
               <div class="form-group">
-                <label for="pc-법인">법인</label>
+                <label for="pc-법인">구매법인</label>
-                <select id="pc-법인" required>
+                <select id="pc-법인" required>${generateOptionsHTML(CORP_LIST)}</select>
-                  <option value="한맥">한맥 (HM)</option><option value="삼안">삼안 (SM)</option><option value="바론">바론 (BR)</option>
+              </div>
+              <div class="form-group">
+                <label for="pc-자산코드">자산번호/코드</label>
+                <input type="text" id="pc-자산코드" readonly placeholder="자동 생성됩니다" required />
+              </div>
+              <div class="form-group">
+                <label for="pc-유형">유형</label>
+                <select id="pc-유형">${generateOptionsHTML(HW_TYPE_LIST)}</select>
+              </div>
+              <div class="form-group">
+                <label for="pc-상세용도">상세용도</label>
+                <select id="pc-상세용도">
+                  <option value="개인PC">개인PC</option>
+                  <option value="서버">서버</option>
                 </select>
               </div>
-              
-              <div class="form-group">
-                <label for="pc-자산코드">자산코드</label>
-                <input type="text" id="pc-자산코드" placeholder="ex) HM-PC-2018-001" required />
-              </div>
-              
               <div class="form-group">
                 <label for="pc-사용자">사용자</label>
                 <input type="text" id="pc-사용자" required />
               </div>
-              
               <div class="form-group">
-                <label for="pc-위치">위치</label>
+                <label for="pc-현사용조직">현 사용조직</label>
-                <input type="text" id="pc-위치" />
+                <select id="pc-현사용조직">${generateOptionsHTML(ORG_LIST)}</select>
+              </div>
+              <div class="form-group" id="pc-이전사용조직-group">
+                <label for="pc-이전사용조직">이전 사용조직</label>
+                <input type="text" id="pc-이전사용조직" readonly />
               </div>
 
+              <div class="form-section-title">시스템 사양 (Specifications)</div>
               <div class="form-group">
-                <label for="pc-CPU">CPU</label>
+                <label for="pc-모델명">모델명</label>
+                <input type="text" id="pc-모델명" />
+              </div>
+              <div class="form-group">
+                <label for="pc-OS">운영체제 (OS)</label>
+                <input type="text" id="pc-OS" />
+              </div>
+              <div class="form-group">
+                <label for="pc-CPU">CPU 사양</label>
                 <input type="text" id="pc-CPU" />
               </div>
-
               <div class="form-group">
-                <label for="pc-GPU">GPU</label>
+                <label for="pc-RAM">RAM 용량</label>
-                <input type="text" id="pc-GPU" />
-              </div>
-
-              <div class="form-group">
-                <label for="pc-RAM">RAM</label>
                 <input type="text" id="pc-RAM" />
               </div>
-
               <div class="form-group">
-                <label for="pc-SSD1">SSD1</label>
+                <label for="pc-SSD1">Storage 1 (SSD/HDD)</label>
                 <input type="text" id="pc-SSD1" />
               </div>
-
               <div class="form-group">
-                <label for="pc-SSD2">SSD2</label>
+                <label for="pc-SSD2">Storage 2 (SSD/HDD)</label>
                 <input type="text" id="pc-SSD2" />
               </div>
 
-              <div class="form-group">
+              <div class="form-section-title" id="pc-location-title">관리 및 운영 (Operation)</div>
-                <label for="pc-HDD1">HDD1</label>
+              <div class="form-group pc-location-field">
-                <input type="text" id="pc-HDD1" />
+                <label for="pc-위치-빌딩">설치위치 (건물)</label>
+                <select id="pc-위치-빌딩">${generateOptionsHTML(Object.keys(LOCATION_DATA))}</select>
               </div>
-
+              <div class="form-group pc-location-field">
-              <div class="form-group">
+                <label for="pc-위치-상세">상세 위치</label>
-                <label for="pc-HDD2">HDD2</label>
+                <select id="pc-위치-상세">
-                <input type="text" id="pc-HDD2" />
+                  <option value="">건물을 먼저 선택하세요</option>
+                </select>
+              </div>
+              <div class="form-group" id="pc-위치-기타-group" style="display:none;">
+                <label for="pc-위치-기타">직접 입력 (기타)</label>
+                <input type="text" id="pc-위치-기타" />
               </div>
-
               <div class="form-group">
                 <label for="pc-구매일">구매일</label>
-                <input type="text" id="pc-구매일" placeholder="ex) 2024-01-01" />
+                <input type="text" id="pc-구매일" />
               </div>
-
               <div class="form-group">
                 <label for="pc-금액">금액</label>
-                <input type="text" id="pc-금액" placeholder="ex) 1,000,000" oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/\\B(?=(\\d{3})+(?!\d))/g, ',')" />
+                <input type="text" id="pc-금액" oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/\\\\B(?=(\\\\d{3})+(?!\d))/g, ',')" />
               </div>
-
               <div class="form-group">
                 <label for="pc-납품업체">납품업체</label>
                 <input type="text" id="pc-납품업체" />
               </div>
-
               <div class="form-group full-width">
                 <label>품의서 (파일)</label>
                 <div style="display:flex; align-items:center; gap:0.5rem;">
@@ -110,7 +138,7 @@ const PC_MODAL_HTML = `
         <button id="btn-delete-pc-asset" class="btn btn-outline btn-danger">삭제</button>
         <div class="footer-actions">
           <button id="btn-revert-pc-edit" class="btn btn-outline hidden">수정 취소</button>
-          <button id="btn-close-pc-footer" class="btn btn-outline">닫기</button>
+          <button id="btn-cancel-pc-modal" class="btn btn-outline">닫기</button>
           <button id="btn-save-pc-asset" class="btn btn-primary">수정</button>
         </div>
       </div>
@@ -118,211 +146,204 @@ const PC_MODAL_HTML = `
   </div>
 `;
 
-export function initPcModal(renderContent: () => void, closeModals: () => void) {
+export function openPcModal(asset: HardwareAsset, mode: 'view' | 'add' = 'view') {
+  currentAsset = asset;
+  const modal = document.getElementById('pc-asset-modal');
+  if (!modal) return;
+  
+  const form = document.getElementById('pc-asset-form') as HTMLFormElement;
+  const saveBtn = document.getElementById('btn-save-pc-asset')!;
+  const revertBtn = document.getElementById('btn-revert-pc-edit')!;
+  
+  if (form) form.reset();
+  
+  if (mode === 'add') {
+    isEditMode = true;
+    if (form) {
+      form.classList.remove('is-view-mode');
+      form.classList.add('is-edit-mode');
+    }
+    saveBtn.textContent = '저장';
+    revertBtn.classList.add('hidden'); 
+    const prevOrgGroup = document.getElementById('pc-이전사용조직-group');
+    if (prevOrgGroup) prevOrgGroup.style.display = 'none';
+  } else {
+    isEditMode = false; 
+    if (form) {
+      form.classList.remove('is-edit-mode');
+      form.classList.add('is-view-mode');
+    }
+    saveBtn.textContent = '수정'; 
+    revertBtn.classList.add('hidden'); 
+    const prevOrgGroup = document.getElementById('pc-이전사용조직-group');
+    if (prevOrgGroup) prevOrgGroup.style.display = 'flex';
+  }
+  
+  fillFormData(asset);
+  renderHistory(asset.id);
+  
+  modal.classList.remove('hidden');
+  applyPcTypeSpecificUI();
+  createIcons({ icons: { X, History, Paperclip } });
+}
+
+function applyPcTypeSpecificUI() {
+  const type = getFieldValue('pc-유형');
+  const detailPurpose = getFieldValue('pc-상세용도');
+
+  const modelGroup = document.getElementById('pc-모델명')?.closest('.form-group') as HTMLElement;
+  const osGroup = document.getElementById('pc-OS')?.closest('.form-group') as HTMLElement;
+  const cpuGroup = document.getElementById('pc-CPU')?.closest('.form-group') as HTMLElement;
+  const ramGroup = document.getElementById('pc-RAM')?.closest('.form-group') as HTMLElement;
+  const ssd1Group = document.getElementById('pc-SSD1')?.closest('.form-group') as HTMLElement;
+  const ssd2Group = document.getElementById('pc-SSD2')?.closest('.form-group') as HTMLElement;
+  const locationFields = document.querySelectorAll('.pc-location-field');
+  const etcGroup = document.getElementById('pc-위치-기타-group');
+
+  // 초기화 (숨김)
+  [modelGroup, osGroup, cpuGroup, ramGroup, ssd1Group, ssd2Group].forEach(g => { if(g) g.style.display = 'none'; });
+  locationFields.forEach(el => (el as HTMLElement).style.display = 'none');
+  if (etcGroup) etcGroup.style.display = 'none';
+
+  if (type === '서버') {
+    [modelGroup, osGroup, cpuGroup, ramGroup, ssd1Group, ssd2Group].forEach(g => { if(g) g.style.display = 'flex'; });
+    locationFields.forEach(el => (el as HTMLElement).style.display = 'flex');
+  } 
+  else if (['스토리지', 'NAS', 'DAS'].includes(type)) {
+    [modelGroup, ssd1Group, ssd2Group].forEach(g => { if(g) g.style.display = 'flex'; });
+    locationFields.forEach(el => (el as HTMLElement).style.display = 'flex');
+  }
+  else if (type === 'PC' || type === '노트북') {
+    [modelGroup, osGroup, cpuGroup, ramGroup, ssd1Group, ssd2Group].forEach(g => { if(g) g.style.display = 'flex'; });
+    if (detailPurpose === '서버') {
+      locationFields.forEach(el => (el as HTMLElement).style.display = 'flex');
+    }
+  }
+  else if (['CPU', 'GPU', '모바일'].includes(type)) {
+    if (modelGroup) modelGroup.style.display = 'flex';
+  }
+  else if (type === 'RAM') {
+    if (ramGroup) ramGroup.style.display = 'flex';
+  }
+  else if (type === 'HDD') {
+    if (ssd1Group) ssd1Group.style.display = 'flex';
+  }
+  else if (type === '태블릿') {
+    if (modelGroup) modelGroup.style.display = 'flex';
+    if (ssd1Group) ssd1Group.style.display = 'flex';
+  }
+}
+
+function fillFormData(asset: HardwareAsset) {
+  setFieldValue('pc-asset-id', asset.id);
+  setFieldValue('pc-법인', asset.법인);
+  setFieldValue('pc-자산코드', asset.자산코드);
+  setFieldValue('pc-유형', asset.type);
+  setFieldValue('pc-사용자', asset.사용자);
+  setFieldValue('pc-현사용조직', asset.현사용조직);
+  setFieldValue('pc-이전사용조직', asset.이전사용조직);
+  setFieldValue('pc-상세용도', (asset as any).상세용도);
+
+  parseAndSetLocation(asset.위치, 'pc-위치-빌딩', 'pc-위치-상세', 'pc-위치-기타-group', 'pc-위치-기타');
+
+  setFieldValue('pc-모델명', asset.모델명);
+  setFieldValue('pc-OS', asset.OS);
+  setFieldValue('pc-CPU', asset.CPU);
+  setFieldValue('pc-RAM', asset.RAM);
+  setFieldValue('pc-SSD1', asset.SSD1);
+  setFieldValue('pc-SSD2', asset.SSD2);
+  setFieldValue('pc-구매일', asset.구매일);
+  setFieldValue('pc-금액', asset.금액);
+  setFieldValue('pc-납품업체', asset.납품업체);
+  setFieldValue('pc-품의서명', asset.품의서명);
+}
+
+export function initPcModal(onSave: () => void, closeModalsCb: () => void) {
   if (!document.getElementById('pc-asset-modal')) {
     document.body.insertAdjacentHTML('beforeend', PC_MODAL_HTML);
   }
 
   const pcForm = document.getElementById('pc-asset-form') as HTMLFormElement;
-  const btnRevertEdit = document.getElementById('btn-revert-pc-edit') as HTMLButtonElement;
+  const saveBtn = document.getElementById('btn-save-pc-asset');
-  const btnSavePc = document.getElementById('btn-save-pc-asset') as HTMLButtonElement;
+  const revertBtn = document.getElementById('btn-revert-pc-edit');
-  const btnDeletePc = document.getElementById('btn-delete-pc-asset') as HTMLButtonElement;
+  const deleteBtn = document.getElementById('btn-delete-pc-asset');
-  const btnCloseHeader = document.getElementById('btn-close-pc-modal') as HTMLButtonElement;
-  const btnCloseFooter = document.getElementById('btn-close-pc-footer') as HTMLButtonElement;
 
-  let isEditMode = false;
+  // 유형 및 상세용도 리스너
-  let currentAsset: HardwareAsset | null = null;
+  const typeSelect = document.getElementById('pc-유형') as HTMLSelectElement;
+  const detailPurposeSelect = document.getElementById('pc-상세용도') as HTMLSelectElement;
   
-  const setEditMode = (edit: boolean) => {
+  [typeSelect, detailPurposeSelect].forEach(el => {
-    isEditMode = edit;
+    el?.addEventListener('change', () => applyPcTypeSpecificUI());
-    if (edit) {
+  });
-      pcForm.classList.add('is-edit-mode');
+
-      pcForm.classList.remove('is-view-mode');
+  bindLocationEvents('pc-위치-빌딩', 'pc-위치-상세', 'pc-위치-기타-group', 'pc-위치-기타');
-      btnSavePc.textContent = '저장';
+
-      btnRevertEdit.classList.remove('hidden');
+  const handleClose = () => { closeModalsCb(); isEditMode = false; };
-      btnCloseFooter.classList.add('hidden');
+  document.getElementById('btn-close-pc-modal')?.addEventListener('click', handleClose);
-    } else {
+  document.getElementById('btn-cancel-pc-modal')?.addEventListener('click', handleClose);
-      pcForm.classList.add('is-view-mode');
+  revertBtn?.addEventListener('click', () => {
-      pcForm.classList.remove('is-edit-mode');
+    isEditMode = false;
-      btnSavePc.textContent = '수정';
+    pcForm.classList.replace('is-edit-mode', 'is-view-mode');
-      btnRevertEdit.classList.add('hidden');
+    if (saveBtn) saveBtn.textContent = '수정';
-      btnCloseFooter.classList.remove('hidden');
+    revertBtn.classList.add('hidden');
     if (currentAsset) fillFormData(currentAsset);
-    }
+  });
-  };
 
-  function fillFormData(asset: HardwareAsset) {
+  saveBtn?.addEventListener('click', () => {
-    (document.getElementById('pc-asset-id') as HTMLInputElement).value = asset.id;
+    if (!currentAsset) return;
-    (document.getElementById('pc-법인') as HTMLSelectElement).value = asset.법인;
-    (document.getElementById('pc-자산코드') as HTMLInputElement).value = asset.자산코드;
-    (document.getElementById('pc-사용자') as HTMLInputElement).value = asset.사용자 || '';
-    (document.getElementById('pc-위치') as HTMLInputElement).value = asset.위치 || '';
-    (document.getElementById('pc-CPU') as HTMLInputElement).value = asset.CPU || '';
-    (document.getElementById('pc-GPU') as HTMLInputElement).value = asset.GPU || '';
-    (document.getElementById('pc-RAM') as HTMLInputElement).value = asset.RAM || '';
-    (document.getElementById('pc-SSD1') as HTMLInputElement).value = asset.SSD1 || '';
-    (document.getElementById('pc-SSD2') as HTMLInputElement).value = asset.SSD2 || '';
-    (document.getElementById('pc-HDD1') as HTMLInputElement).value = asset.HDD1 || '';
-    (document.getElementById('pc-HDD2') as HTMLInputElement).value = asset.HDD2 || '';
-    (document.getElementById('pc-구매일') as HTMLInputElement).value = asset.구매일 || '';
-    (document.getElementById('pc-금액') as HTMLInputElement).value = asset.금액 || '';
-    (document.getElementById('pc-납품업체') as HTMLInputElement).value = asset.납품업체 || '';
-    (document.getElementById('pc-품의서명') as HTMLElement).innerText = asset.품의서명 ? `첨부: ${asset.품의서명}` : '';
-  }
-
-  btnRevertEdit?.addEventListener('click', () => setEditMode(false));
-  btnCloseHeader?.addEventListener('click', closeModals);
-  btnCloseFooter?.addEventListener('click', closeModals);
-
-  btnSavePc?.addEventListener('click', (e) => {
-    e.preventDefault();
     if (!isEditMode) {
-      setEditMode(true);
+      isEditMode = true;
+      pcForm.classList.replace('is-view-mode', 'is-edit-mode');
+      saveBtn.textContent = '저장';
+      revertBtn?.classList.remove('hidden');
       return;
     }
 
-    if (!pcForm.checkValidity()) { pcForm.reportValidity(); return; }
+    const type = getFieldValue('pc-유형');
+    const detailPurpose = getFieldValue('pc-상세용도');
 
-    // ... (저장 로직 유지)
+    const updated: any = {
-    e.preventDefault();
+      ...currentAsset,
-    if (!pcForm.checkValidity()) { pcForm.reportValidity(); return; }
+      법인: getFieldValue('pc-법인'),
-    
+      자산코드: getFieldValue('pc-자산코드'),
-    const id = (document.getElementById('pc-asset-id') as HTMLInputElement).value;
+      현사용조직: getFieldValue('pc-현사용조직'),
-    const fileInput = document.getElementById('pc-품의서') as HTMLInputElement;
+      이전사용조직: getFieldValue('pc-이전사용조직'),
-    const 품의서명 = fileInput.files && fileInput.files.length > 0 ? fileInput.files[0].name : (document.getElementById('pc-품의서명') as HTMLElement).innerText.replace('첨부: ', '');
+      사용자: getFieldValue('pc-사용자'),
-
+      상세용도: detailPurpose,
-    const newAsset: HardwareAsset = {
+      위치: getCombinedLocation('pc-위치-빌딩', 'pc-위치-상세', 'pc-위치-기타'),
-      id: id || Math.random().toString(36).substring(2, 9),
+      모델명: getFieldValue('pc-모델명'),
-      type: '개인PC',
+      OS: getFieldValue('pc-OS'),
-      법인: (document.getElementById('pc-법인') as HTMLSelectElement).value,
+      CPU: getFieldValue('pc-CPU'),
-      자산코드: (document.getElementById('pc-자산코드') as HTMLInputElement).value,
+      RAM: getFieldValue('pc-RAM'),
-      명칭: '',
+      SSD1: getFieldValue('pc-SSD1'),
-      위치: (document.getElementById('pc-위치') as HTMLInputElement).value,
+      SSD2: getFieldValue('pc-SSD2'),
-      관리자: '', IP주소: '', MACaddress: '', HW사양: '', OS: '', 납품업체: (document.getElementById('pc-납품업체') as HTMLInputElement).value,
+      구매일: getFieldValue('pc-구매일'),
-      사용자: (document.getElementById('pc-사용자') as HTMLInputElement).value,
+      금액: getFieldValue('pc-금액'),
-      CPU: (document.getElementById('pc-CPU') as HTMLInputElement).value,
+      납품업체: getFieldValue('pc-납품업체'),
-      GPU: (document.getElementById('pc-GPU') as HTMLInputElement).value,
+      type: type || 'PC'
-      RAM: (document.getElementById('pc-RAM') as HTMLInputElement).value,
-      SSD1: (document.getElementById('pc-SSD1') as HTMLInputElement).value,
-      SSD2: (document.getElementById('pc-SSD2') as HTMLInputElement).value,
-      HDD1: (document.getElementById('pc-HDD1') as HTMLInputElement).value,
-      HDD2: (document.getElementById('pc-HDD2') as HTMLInputElement).value,
-      구매일: (document.getElementById('pc-구매일') as HTMLInputElement).value,
-      금액: (document.getElementById('pc-금액') as HTMLInputElement).value,
-      품의서명
     };
 
-    if (id) {
+    saveHardwareAsset(updated);
-      const idx = state.masterData.hw.findIndex(a => a.id === id);
+    onSave();
-      if(idx !== -1) {
+    isEditMode = false;
-        const oldAsset = state.masterData.hw[idx];
+    pcForm.classList.replace('is-edit-mode', 'is-view-mode');
-        const changes = getChangeDetails(oldAsset, newAsset);
+    saveBtn.textContent = '수정';
-        if (changes) {
+    revertBtn?.classList.add('hidden');
-          state.masterData.logs.push({
-            id: Math.random().toString(36).substring(2, 9),
-            assetId: id,
-            date: new Date().toLocaleString(),
-            details: changes,
-            user: '관리자'
-          });
-        }
-        state.masterData.hw[idx] = newAsset;
-      }
-    } else {
-      state.masterData.hw.push(newAsset);
-    }
-    
-    closeModals();
-    renderContent();
   });
 
-  btnDeletePc?.addEventListener('click', (e) => {
+  deleteBtn?.addEventListener('click', () => {
-    e.preventDefault();
+    if (!currentAsset) return;
-    const id = (document.getElementById('pc-asset-id') as HTMLInputElement).value;
     if (confirm('삭제하시겠습니까?')) {
-      state.masterData.hw = state.masterData.hw.filter(a => a.id !== id);
+      deleteHardwareAsset(currentAsset.id);
-      closeModals();
+      onSave();
-      renderContent();
+      handleClose();
     }
   });
 }
 
-export function openPcModal(asset?: HardwareAsset) {
-  const pcForm = document.getElementById('pc-asset-form') as HTMLFormElement;
-  const deleteBtn = document.getElementById('btn-delete-pc-asset')!;
-  const historyArea = document.querySelector('.modal-history-area') as HTMLElement;
-  
-  openModal('pc-asset-modal');
-  pcForm.reset();
-  
-  if (asset) {
-    document.getElementById('pc-modal-title')!.textContent = '개인PC 상세 정보 수정';
-    deleteBtn.style.display = 'block';
-    if (historyArea) historyArea.style.display = 'flex';
-    
-    (document.getElementById('pc-asset-id') as HTMLInputElement).value = asset.id;
-    (document.getElementById('pc-법인') as HTMLSelectElement).value = asset.법인;
-    (document.getElementById('pc-자산코드') as HTMLInputElement).value = asset.자산코드;
-    (document.getElementById('pc-사용자') as HTMLInputElement).value = asset.사용자 || '';
-    (document.getElementById('pc-위치') as HTMLInputElement).value = asset.위치 || '';
-    (document.getElementById('pc-CPU') as HTMLInputElement).value = asset.CPU || '';
-    (document.getElementById('pc-GPU') as HTMLInputElement).value = asset.GPU || '';
-    (document.getElementById('pc-RAM') as HTMLInputElement).value = asset.RAM || '';
-    (document.getElementById('pc-SSD1') as HTMLInputElement).value = asset.SSD1 || '';
-    (document.getElementById('pc-SSD2') as HTMLInputElement).value = asset.SSD2 || '';
-    (document.getElementById('pc-HDD1') as HTMLInputElement).value = asset.HDD1 || '';
-    (document.getElementById('pc-HDD2') as HTMLInputElement).value = asset.HDD2 || '';
-    (document.getElementById('pc-구매일') as HTMLInputElement).value = asset.구매일 || '';
-    (document.getElementById('pc-금액') as HTMLInputElement).value = asset.금액 || '';
-    (document.getElementById('pc-납품업체') as HTMLInputElement).value = asset.납품업체 || '';
-    (document.getElementById('pc-품의서명') as HTMLElement).innerText = asset.품의서명 ? `첨부: ${asset.품의서명}` : '';
-    
-    renderHistory(asset.id);
-  } else {
-    document.getElementById('pc-modal-title')!.textContent = '신규 개인PC 자산 추가';
-    deleteBtn.style.display = 'none';
-    if (historyArea) historyArea.style.display = 'none';
-    
-    (document.getElementById('pc-asset-id') as HTMLInputElement).value = '';
-    (document.getElementById('pc-법인') as HTMLSelectElement).value = '한맥';
-    (document.getElementById('pc-품의서명') as HTMLElement).innerText = '';
-  }
-}
-
-function getChangeDetails(oldAsset: HardwareAsset, newAsset: HardwareAsset): string {
-  const changes: string[] = [];
-  const fields = [
-    { key: '법인', label: '법인' },
-    { key: '자산코드', label: '자산코드' },
-    { key: '사용자', label: '사용자' },
-    { key: '위치', label: '위치' },
-    { key: 'CPU', label: 'CPU' },
-    { key: 'GPU', label: 'GPU' },
-    { key: 'RAM', label: 'RAM' },
-    { key: 'SSD1', label: 'SSD1' },
-    { key: 'SSD2', label: 'SSD2' },
-    { key: 'HDD1', label: 'HDD1' },
-    { key: 'HDD2', label: 'HDD2' },
-    { key: '구매일', label: '구매일' },
-    { key: '금액', label: '금액' },
-    { key: '납품업체', label: '납품업체' },
-    { key: '품의서명', label: '품의서' },
-  ];
-
-  fields.forEach(field => {
-    const oldVal = (oldAsset as any)[field.key] || '';
-    const newVal = (newAsset as any)[field.key] || '';
-    if (oldVal !== newVal) {
-      changes.push(`${field.label}: ${oldVal || '없음'} → ${newVal || '없음'}`);
-    }
-  });
-  return changes.join('\n');
-}
-
 function renderHistory(assetId: string) {
   const historyList = document.getElementById('pc-history-list');
   if (!historyList) return;
-
   const logs = state.masterData.logs
     .filter(l => l.assetId === assetId)
     .sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());
@@ -331,12 +352,11 @@ function renderHistory(assetId: string) {
     historyList.innerHTML = '<div class="empty-history">이력이 없습니다.</div>';
     return;
   }
-
   historyList.innerHTML = logs.map(log => `
     <div class="history-item">
       <div class="history-date">${log.date}</div>
       <div class="history-user">수정자: ${log.user}</div>
-      <div class="history-details">${log.details.replace(/\\n/g, '<br>')}</div>
+      <div class="history-details">${log.details.replace(/\n/g, '<br>')}</div>
     </div>
   `).join('');
 }

src/components/Modal/SWModal.ts

@@ -1,14 +1,20 @@
 import { state } from '../../core/state';
 import { SoftwareAsset } from '../../core/excelHandler';
-import { openModal } from './BaseModal';
+import { openModal, closeModals } from './BaseModal';
-import { createIcons, X, History, Plus } from 'lucide';
+import { openSwUserModal } from './SWUserModal';
+import { createIcons, History, Plus, X } from 'lucide';
+import { CORP_LIST } from './SharedData';
+import { generateOptionsHTML, setFieldValue, getFieldValue } from './ModalUtils';
+
+let currentSwAsset: SoftwareAsset | null = null;
+let isEditMode = false;
 
 const SW_MODAL_HTML = `
   <div id="sw-asset-modal" class="modal-overlay hidden">
     <div class="modal-content wide">
       <div class="modal-header">
-        <h2 id="sw-modal-title">S/W 상세 정보</h2>
+        <h2 id="sw-modal-title">소프트웨어 상세 정보</h2>
-        <button id="btn-close-sw-modal" class="btn-icon" aria-label="닫기"><i data-lucide="x"></i></button>
+        <button id="btn-close-sw-modal" class="btn-icon"><i data-lucide="x"></i></button>
       </div>
       <div class="modal-body">
         <div class="modal-body-split">
@@ -16,51 +22,47 @@ const SW_MODAL_HTML = `
             <form id="sw-asset-form" class="grid-form">
               <input type="hidden" id="sw-asset-id" />
               <input type="hidden" id="sw-asset-type" />
+
+              <div class="form-section-title">기본 정보 (Basic Info)</div>
               <div class="form-group">
-                <label for="sw-분야">분야</label>
+                <label for="sw-법인">구매법인</label>
-                <select id="sw-분야" required>
+                <select id="sw-법인" required>${generateOptionsHTML(CORP_LIST)}</select>
-                  <option value="업무공통">업무공통</option><option value="개발S/W">개발S/W</option><option value="디자인">디자인</option><option value="설계S/W">설계S/W</option>
-                </select>
               </div>
               <div class="form-group">
-                <label for="sw-법인">법인</label>
+                <label for="sw-자산번호">자산번호</label>
-                <select id="sw-법인" required>
+                <input type="text" id="sw-자산번호" readonly required />
-                  <option value="한맥">한맥 (HM)</option><option value="삼안 (SM)">삼안 (SM)</option><option value="바론 (BR)">바론 (BR)</option>
+              </div>
-                </select>
+              <div class="form-group full-width">
+                <label for="sw-제품명">제품명</label>
+                <input type="text" id="sw-제품명" required />
+              </div>
+
+              <div class="form-section-title">라이선스 정보 (License)</div>
+              <div class="form-group" id="sw-license-type-group">
+                <label for="sw-라이선스유형">라이선스 유형</label>
+                <input type="text" id="sw-라이선스유형" />
+              </div>
+              <div class="form-group" id="sw-license-key-group">
+                <label for="sw-라이선스키">라이선스 키</label>
+                <input type="text" id="sw-라이선스키" />
               </div>
               <div class="form-group">
-                <label for="sw-부서">부서</label>
+                <label for="sw-수량">보유 수량</label>
-                <input type="text" id="sw-부서" placeholder="ex) 경영지원팀" required />
+                <input type="number" id="sw-수량" min="0" />
               </div>
+              <div class="form-group">
+                <label for="sw-금액">도입 금액</label>
+                <input type="text" id="sw-금액" oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/\\\\B(?=(\\\\d{3})+(?!\d))/g, ',')" />
+              </div>
+
+              <div class="form-section-title">구매 및 계약 (Purchase)</div>
               <div class="form-group">
                 <label for="sw-구매일">구매일</label>
-                <input type="date" id="sw-구매일" />
+                <input type="text" id="sw-구매일" />
               </div>
-              <div class="form-group" id="sw-구독일-group" style="grid-column: span 2;">
+              <div class="form-group" id="sw-expiry-group">
-                <label>구독 기간</label>
+                <label for="sw-만료일">만료일 (구독)</label>
-                <div style="display: flex; align-items: center; gap: 0.5rem;">
+                <input type="text" id="sw-만료일" />
-                  <input type="date" id="sw-구독일-시작" style="flex: 1;" />
-                  <span>~</span>
-                  <input type="date" id="sw-구독일-종료" style="flex: 1;" />
-                </div>
-              </div>
-              <div class="form-group" id="sw-유지보수-group" style="display:none;">
-                <label for="sw-유지보수여부">유지보수 여부</label>
-                <label style="display:flex; align-items:center; gap:0.5rem; height: 38px; cursor: pointer;">
-                  <input type="checkbox" id="sw-유지보수여부" /> 대상 여부
-                </label>
-              </div>
-              <div class="form-group">
-                <label for="sw-금액">금액</label>
-                <input type="text" id="sw-금액" oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/\\B(?=(\\d{3})+(?!\d))/g, ',')" />
-              </div>
-              <div class="form-group">
-                <label for="sw-수량">수량 (보유량)</label>
-                <input type="number" id="sw-수량" min="1" value="1" />
-              </div>
-              <div class="form-group">
-                <label for="sw-계정명">계정명</label>
-                <input type="text" id="sw-계정명" />
               </div>
               <div class="form-group">
                 <label for="sw-납품업체">납품업체</label>
@@ -68,18 +70,28 @@ const SW_MODAL_HTML = `
               </div>
               <div class="form-group full-width">
                 <label for="sw-비고">비고</label>
-                <input type="text" id="sw-비고" />
+                <textarea id="sw-비고" rows="2"></textarea>
               </div>
             </form>
+
+            <div class="user-management-section" style="margin-top: 2rem;">
+              <div class="section-header" style="display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem;">
+                <h3 style="font-size:1rem; font-weight:600;">사용자 할당 현황</h3>
+                <button type="button" id="btn-open-sw-update" class="btn btn-outline btn-sm">
+                   할당 관리 <i data-lucide="plus" style="width:14px; height:14px;"></i>
+                </button>
               </div>
+              <div id="sw-assigned-users-summary" class="user-summary-grid">
+                <!-- User summary list -->
+              </div>
+            </div>
+          </div>
+
           <div class="modal-history-area">
-            <div class="history-header" style="display:flex; justify-content:space-between; align-items:center;">
+            <div class="history-header">
-              <h3><i data-lucide="history" style="width:16px; height:16px;"></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="plus" style="width:14px;height:14px;"></i> 업데이트 추가</button>
-            </div>
-            <div id="sw-history-list" class="history-timeline">
-              <div class="empty-history">내역이 없습니다.</div>
             </div>
+            <div id="sw-history-list" class="history-timeline"></div>
           </div>
         </div>
       </div>
@@ -87,319 +99,177 @@ const SW_MODAL_HTML = `
         <button id="btn-delete-sw-asset" class="btn btn-outline btn-danger">삭제</button>
         <div class="footer-actions">
           <button id="btn-revert-sw-edit" class="btn btn-outline hidden">수정 취소</button>
-          <button id="btn-close-sw-footer" class="btn btn-outline">닫기</button>
+          <button id="btn-cancel-sw-modal" class="btn btn-outline">닫기</button>
           <button id="btn-save-sw-asset" class="btn btn-primary">수정</button>
         </div>
       </div>
     </div>
   </div>
-
-  <div id="sw-update-modal" class="modal-overlay hidden" style="z-index: 1100;">
-    <div class="modal-content" style="max-width: 400px;">
-      <div class="modal-header">
-        <h2>계약 업데이트 반영</h2>
-        <button id="btn-close-sw-update" class="btn-icon"><i data-lucide="x"></i></button>
-      </div>
-      <div class="modal-body">
-        <div class="grid-form" style="grid-template-columns: 1fr;">
-          <div class="form-group">
-            <label>업데이트 일자</label>
-            <input type="date" id="sw-update-date" />
-          </div>
-          <div class="form-group sub-sw-update">
-            <label>새로운 구독 기간</label>
-            <div style="display: flex; align-items: center; gap: 0.5rem;">
-              <input type="date" id="sw-update-start" style="flex: 1;" />
-              <span>~</span>
-              <input type="date" id="sw-update-end" style="flex: 1;" />
-            </div>
-          </div>
-          <div class="form-group perm-sw-update" style="display:none;">
-            <label>유지보수 체결 (상태 연동)</label>
-            <label style="display:flex; align-items:center; gap:0.5rem; height: 38px; cursor: pointer;">
-              <input type="checkbox" id="sw-update-maintenance" /> 유효 상태로 갱신
-            </label>
-          </div>
-          <div class="form-group">
-            <label>발생 비용</label>
-            <input type="text" id="sw-update-cost" oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/\\B(?=(\\d{3})+(?!\d))/g, ',')" placeholder="ex) 500,000" />
-          </div>
-          <div class="form-group">
-            <label>상세 내용 (메모)</label>
-            <input type="text" id="sw-update-note" placeholder="예: 25년도 구독 연장 결제 완료" />
-          </div>
-        </div>
-      </div>
-      <div class="modal-footer">
-        <div></div>
-        <div class="footer-actions">
-          <button id="btn-cancel-sw-update" class="btn btn-outline">취소</button>
-          <button id="btn-save-sw-update" class="btn btn-primary">반영하기</button>
-        </div>
-      </div>
-    </div>
-  </div>
 `;
 
-export let currentAsset: SoftwareAsset | null = null;
+function fillSwFormData(asset: SoftwareAsset) {
-export let isEditMode = false;
+  setFieldValue('sw-asset-id', asset.id);
+  setFieldValue('sw-asset-type', asset.type);
+  setFieldValue('sw-법인', asset.법인);
+  setFieldValue('sw-자산번호', asset.자산번호);
+  setFieldValue('sw-제품명', asset.제품명);
+  setFieldValue('sw-수량', asset.수량);
+  setFieldValue('sw-금액', asset.금액);
+  setFieldValue('sw-구매일', asset.구매일);
+  setFieldValue('sw-납품업체', asset.납품업체);
+  setFieldValue('sw-비고', asset.비고);
 
-export function setEditMode(edit: boolean) {
+  const type = asset.type;
-  isEditMode = edit;
+  const keyGroup = document.getElementById('sw-license-key-group');
-  const swForm = document.getElementById('sw-asset-form') as HTMLFormElement;
+  const typeGroup = document.getElementById('sw-license-type-group');
-  const btnSaveSw = document.getElementById('btn-save-sw-asset') as HTMLButtonElement;
+  const expiryGroup = document.getElementById('sw-expiry-group');
-  const btnRevertEdit = document.getElementById('btn-revert-sw-edit') as HTMLButtonElement;
-  const btnCloseFooter = document.getElementById('btn-close-sw-footer') as HTMLButtonElement;
 
-  if (edit) {
+  if (type === '구독SW') {
-    swForm.classList.add('is-edit-mode');
+    if (keyGroup) keyGroup.style.display = 'none';
-    swForm.classList.remove('is-view-mode');
+    if (typeGroup) typeGroup.style.display = 'flex';
-    btnSaveSw.textContent = '저장';
+    if (expiryGroup) expiryGroup.style.display = 'flex';
-    btnRevertEdit.classList.remove('hidden');
+    setFieldValue('sw-라이선스유형', (asset as any).라이선스유형);
-    btnCloseFooter.classList.add('hidden');
+    setFieldValue('sw-만료일', (asset as any).만료일);
   } else {
-    swForm.classList.add('is-view-mode');
+    if (keyGroup) keyGroup.style.display = 'flex';
-    swForm.classList.remove('is-edit-mode');
+    if (typeGroup) typeGroup.style.display = 'none';
-    btnSaveSw.textContent = '수정';
+    if (expiryGroup) expiryGroup.style.display = 'none';
-    btnRevertEdit.classList.add('hidden');
+    setFieldValue('sw-라이선스키', (asset as any).라이선스키);
-    btnCloseFooter.classList.remove('hidden');
-    if (currentAsset) fillFormData(currentAsset);
   }
+
+  renderUserSummary(asset.id);
 }
 
-export function fillFormData(asset: SoftwareAsset) {
+function renderUserSummary(swId: string) {
-  (document.getElementById('sw-asset-id') as HTMLInputElement).value = asset.id;
+  const container = document.getElementById('sw-assigned-users-summary');
-  (document.getElementById('sw-asset-type') as HTMLInputElement).value = asset.type;
+  if (!container) return;
-  (document.getElementById('sw-분야') as HTMLSelectElement).value = asset.분야 || '업무공통';
+  const users = state.masterData.swUsers.find(u => u.sw_id === swId);
-  (document.getElementById('sw-법인') as HTMLSelectElement).value = asset.법인;
+  if (!users || !users.userData || users.userData.length === 0) {
-  (document.getElementById('sw-부서') as HTMLInputElement).value = asset.부서 || '';
+    container.innerHTML = '<div class="empty-summary">할당된 사용자가 없습니다.</div>';
-  (document.getElementById('sw-제품명') as HTMLInputElement).value = asset.제품명;
+    return;
-  (document.getElementById('sw-구매일') as HTMLInputElement).value = asset.구매일 || '';
+  }
+  container.innerHTML = users.userData.map(u => `
+    <div class="user-badge-item">
+      <span class="u-name">${u[3]}</span>
+      <span class="u-dept">${u[1]}</span>
+    </div>
+  `).join('');
+}
 
-  if (asset.구독일) {
+export function openSwModal(asset: SoftwareAsset) {
-    const parts = asset.구독일.split('~');
+  currentSwAsset = asset;
-    (document.getElementById('sw-구독일-시작') as HTMLInputElement).value = parts[0]?.trim() || '';
+  const modal = document.getElementById('sw-asset-modal')!;
-    (document.getElementById('sw-구독일-종료') as HTMLInputElement).value = parts[1]?.trim() || '';
+  const form = document.getElementById('sw-asset-form') as HTMLFormElement;
+  const saveBtn = document.getElementById('btn-save-sw-asset')!;
+  const revertBtn = document.getElementById('btn-revert-sw-edit')!;
+  
+  form.reset();
+  const isNew = !asset.자산번호;
+
+  if (isNew) {
+    isEditMode = true;
+    form.classList.remove('is-view-mode');
+    form.classList.add('is-edit-mode');
+    saveBtn.textContent = '저장';
+    revertBtn.classList.add('hidden');
   } else {
-    (document.getElementById('sw-구독일-시작') as HTMLInputElement).value = '';
+    isEditMode = false;
-    (document.getElementById('sw-구독일-종료') as HTMLInputElement).value = '';
+    form.classList.remove('is-edit-mode');
+    form.classList.add('is-view-mode');
+    saveBtn.textContent = '수정';
+    revertBtn.classList.add('hidden');
   }
 
-  (document.getElementById('sw-유지보수여부') as HTMLInputElement).checked = !!asset.유지보수여부;
+  fillSwFormData(asset);
-  (document.getElementById('sw-금액') as HTMLInputElement).value = asset.금액 || '';
-  (document.getElementById('sw-수량') as HTMLInputElement).value = String(asset.수량);
-  (document.getElementById('sw-계정명') as HTMLInputElement).value = asset.계정명 || '';
-  (document.getElementById('sw-납품업체') as HTMLInputElement).value = asset.납품업체 || '';
-  (document.getElementById('sw-비고') as HTMLInputElement).value = asset.비고 || '';
-
-  document.getElementById('btn-open-sw-update')!.style.display = 'flex';
   renderSwHistory(asset.id);
+  modal.classList.remove('hidden');
+  createIcons({ icons: { X, History, Plus } });
 }
 
-export function initSwModal(renderContent: () => void, closeModals: () => void) {
+export function initSwModal(onSave: () => void, closeModals: () => void) {
   if (!document.getElementById('sw-asset-modal')) {
     document.body.insertAdjacentHTML('beforeend', SW_MODAL_HTML);
   }
 
-  const swForm = document.getElementById('sw-asset-form') as HTMLFormElement;
+  const form = document.getElementById('sw-asset-form') as HTMLFormElement;
-  const btnRevertEdit = document.getElementById('btn-revert-sw-edit') as HTMLButtonElement;
+  const saveBtn = document.getElementById('btn-save-sw-asset')!;
-  const btnSaveSw = document.getElementById('btn-save-sw-asset') as HTMLButtonElement;
+  const revertBtn = document.getElementById('btn-revert-sw-edit')!;
-  const btnDeleteSw = document.getElementById('btn-delete-sw-asset') as HTMLButtonElement;
+  const deleteBtn = document.getElementById('btn-delete-sw-asset')!;
-  const btnCloseHeader = document.getElementById('btn-close-sw-modal') as HTMLButtonElement;
+  const userUpdateBtn = document.getElementById('btn-open-sw-update')!;
-  const btnCloseFooter = document.getElementById('btn-close-sw-footer') as HTMLButtonElement;
 
-  btnRevertEdit?.addEventListener('click', () => setEditMode(false));
+  const closeModalAction = () => { closeModals(); isEditMode = false; };
-  btnCloseHeader?.addEventListener('click', closeModals);
+  document.getElementById('btn-close-sw-modal')?.addEventListener('click', closeModalAction);
-  btnCloseFooter?.addEventListener('click', closeModals);
+  document.getElementById('btn-cancel-sw-modal')?.addEventListener('click', closeModalAction);
 
-  btnSaveSw?.addEventListener('click', (e) => {
+  revertBtn.addEventListener('click', () => {
-    e.preventDefault();
+    isEditMode = false;
+    form.classList.replace('is-edit-mode', 'is-view-mode');
+    saveBtn.textContent = '수정';
+    revertBtn.classList.add('hidden');
+    if (currentSwAsset) fillSwFormData(currentSwAsset);
+  });
+
+  saveBtn.addEventListener('click', () => {
+    if (!currentSwAsset) return;
     if (!isEditMode) {
-      setEditMode(true);
+      isEditMode = true;
+      form.classList.replace('is-view-mode', 'is-edit-mode');
+      saveBtn.textContent = '저장';
+      revertBtn.classList.remove('hidden');
       return;
     }
 
-    if (!swForm.checkValidity()) { swForm.reportValidity(); return; }
+    const type = getFieldValue('sw-asset-type');
-    
+    const updated: any = {
-    const id = (document.getElementById('sw-asset-id') as HTMLInputElement).value;
+      ...currentSwAsset,
-    const start = (document.getElementById('sw-구독일-시작') as HTMLInputElement).value;
+      법인: getFieldValue('sw-법인'),
-    const end = (document.getElementById('sw-구독일-종료') as HTMLInputElement).value;
+      자산번호: getFieldValue('sw-자산번호'),
-    const 구독일Str = (start || end) ? `${start || ''} ~ ${end || ''}` : '';
+      제품명: getFieldValue('sw-제품명'),
-
+      수량: parseInt(getFieldValue('sw-수량') || '0'),
-    const newAsset: SoftwareAsset = {
+      금액: getFieldValue('sw-금액'),
-      id: id || Math.random().toString(36).substring(2, 9),
+      구매일: getFieldValue('sw-구매일'),
-      type: (document.getElementById('sw-asset-type') as HTMLInputElement).value,
+      납품업체: getFieldValue('sw-납품업체'),
-      분야: (document.getElementById('sw-분야') as HTMLSelectElement).value,
+      비고: getFieldValue('sw-비고'),
-      법인: (document.getElementById('sw-법인') as HTMLSelectElement).value,
+      type: type
-      부서: (document.getElementById('sw-부서') as HTMLInputElement).value,
-      제품명: (document.getElementById('sw-제품명') as HTMLInputElement).value,
-      구매일: (document.getElementById('sw-구매일') as HTMLInputElement).value,
-      구독일: 구독일Str,
-      유지보수여부: (document.getElementById('sw-유지보수여부') as HTMLInputElement).checked,
-      금액: (document.getElementById('sw-금액') as HTMLInputElement).value,
-      수량: parseInt((document.getElementById('sw-수량') as HTMLInputElement).value || '1', 10),
-      계정명: (document.getElementById('sw-계정명') as HTMLInputElement).value,
-      납품업체: (document.getElementById('sw-납품업체') as HTMLInputElement).value,
-      비고: (document.getElementById('sw-비고') as HTMLInputElement).value,
     };
 
-    if (id) {
+    if (type === '구독SW') {
-      const idx = state.masterData.sw.findIndex(a => a.id === id);
+      updated.라이선스유형 = getFieldValue('sw-라이선스유형');
-      if(idx !== -1) state.masterData.sw[idx] = newAsset;
+      updated.만료일 = getFieldValue('sw-만료일');
     } else {
-      state.masterData.sw.push(newAsset);
+      updated.라이선스키 = getFieldValue('sw-라이선스키');
     }
 
-    closeModals();
+    const targetList = type === '구독SW' ? state.masterData.subSw : state.masterData.permSw;
-    renderContent();
+    const idx = targetList.findIndex(a => a.id === updated.id);
+    if (idx > -1) targetList[idx] = updated;
+    else targetList.push(updated);
+
+    onSave();
+    isEditMode = false;
+    form.classList.replace('is-edit-mode', 'is-view-mode');
+    saveBtn.textContent = '수정';
+    revertBtn.classList.add('hidden');
   });
 
-  btnDeleteSw?.addEventListener('click', (e) => {
+  deleteBtn.addEventListener('click', () => {
-    e.preventDefault();
+    if (!currentSwAsset) return;
-    const id = (document.getElementById('sw-asset-id') as HTMLInputElement).value;
     if (confirm('삭제하시겠습니까?')) {
-      state.masterData.sw = state.masterData.sw.filter(a => a.id !== id);
+      const type = currentSwAsset.type;
-      closeModals();
+      if (type === '구독SW') state.masterData.subSw = state.masterData.subSw.filter(a => a.id !== currentSwAsset!.id);
-      renderContent();
+      else state.masterData.permSw = state.masterData.permSw.filter(a => a.id !== currentSwAsset!.id);
+      onSave();
+      closeModalAction();
     }
   });
 
-  // Update Sub-modal integration
+  userUpdateBtn.addEventListener('click', () => {
-  const subModal = document.getElementById('sw-update-modal')!;
+    if (currentSwAsset) openSwUserModal(currentSwAsset);
-  const btnOpenUpdate = document.getElementById('btn-open-sw-update')!;
-  const btnCloseUpdate = document.getElementById('btn-close-sw-update')!;
-  const btnCancelUpdate = document.getElementById('btn-cancel-sw-update')!;
-  const btnSaveUpdate = document.getElementById('btn-save-sw-update')!;
-
-  const closeUpdateModal = () => subModal.classList.add('hidden');
-  btnCloseUpdate?.addEventListener('click', closeUpdateModal);
-  btnCancelUpdate?.addEventListener('click', closeUpdateModal);
-
-  btnOpenUpdate?.addEventListener('click', (e) => {
-    e.preventDefault();
-    const isSub = (document.getElementById('sw-asset-type') as HTMLInputElement).value === '구독SW';
-    subModal.classList.remove('hidden');
-    
-    // Set default values
-    (document.getElementById('sw-update-date') as HTMLInputElement).value = new Date().toISOString().substring(0, 10);
-    (document.getElementById('sw-update-start') as HTMLInputElement).value = '';
-    (document.getElementById('sw-update-end') as HTMLInputElement).value = '';
-    (document.getElementById('sw-update-cost') as HTMLInputElement).value = '';
-    (document.getElementById('sw-update-note') as HTMLInputElement).value = '';
-
-    if (isSub) {
-      document.querySelector('.sub-sw-update')!.setAttribute('style', 'display:flex; flex-direction:column;');
-      document.querySelector('.perm-sw-update')!.setAttribute('style', 'display:none');
-    } else {
-      document.querySelector('.sub-sw-update')!.setAttribute('style', 'display:none');
-      document.querySelector('.perm-sw-update')!.setAttribute('style', 'display:flex; flex-direction:column;');
-      (document.getElementById('sw-update-maintenance') as HTMLInputElement).checked = (document.getElementById('sw-유지보수여부') as HTMLInputElement).checked;
-    }
-  });
-
-  btnSaveUpdate?.addEventListener('click', (e) => {
-    e.preventDefault();
-    const id = (document.getElementById('sw-asset-id') as HTMLInputElement).value;
-    if (!id) { alert('자산이 저장되지 않았습니다. 메인 폼을 먼저 저장해주세요.'); return; }
-    
-    const isSub = (document.getElementById('sw-asset-type') as HTMLInputElement).value === '구독SW';
-    const date = (document.getElementById('sw-update-date') as HTMLInputElement).value;
-    const start = (document.getElementById('sw-update-start') as HTMLInputElement).value;
-    const end = (document.getElementById('sw-update-end') as HTMLInputElement).value;
-    const maintenance = (document.getElementById('sw-update-maintenance') as HTMLInputElement).checked;
-    const cost = (document.getElementById('sw-update-cost') as HTMLInputElement).value;
-    const note = (document.getElementById('sw-update-note') as HTMLInputElement).value;
-
-    const periodStr = (start || end) ? `${start || ''} ~ ${end || ''}` : '';
-
-    let details = `[업데이트] ${note || (isSub ? '구독 갱신' : '유지보수 계약')}\n`;
-    if (cost) details += `발생 비용: ${cost}원\n`;
-
-    if (isSub) {
-      if (periodStr) details += `구독 변경: -> ${periodStr}\n`;
-      // Always update main fields if period is provided
-      if (periodStr) {
-        (document.getElementById('sw-구독일-시작') as HTMLInputElement).value = start;
-        (document.getElementById('sw-구독일-종료') as HTMLInputElement).value = end;
-      }
-    } else {
-      details += `유지보수 상태: -> ${maintenance ? '유효' : '없음'}\n`;
-      (document.getElementById('sw-유지보수여부') as HTMLInputElement).checked = maintenance;
-    }
-    
-    if (cost) (document.getElementById('sw-금액') as HTMLInputElement).value = cost;
-
-    state.masterData.logs.push({
-      id: Math.random().toString(36).substring(2, 9),
-      assetId: id,
-      date,
-      details,
-      user: '관리자'
-    });
-
-    closeUpdateModal();
-    renderSwHistory(id);
-    
-    // 메인 테이블 리렌더링도 트리거 (뒤에 보일 수 있게)
-    renderContent();
   });
 }
 
-function renderSwHistory(assetId: string) {
+function renderSwHistory(swId: string) {
-  const historyList = document.getElementById('sw-history-list');
+  const container = document.getElementById('sw-history-list');
-  if (!historyList) return;
+  if (!container) return;
-
+  container.innerHTML = '<div class="empty-history">이력이 없습니다.</div>';
-  const logs = state.masterData.logs
-    .filter(l => l.assetId === assetId)
-    .sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());
-
-  if (logs.length === 0) {
-    historyList.innerHTML = '<div class="empty-history">업데이트 내역이 없습니다.</div>';
-    return;
-  }
-
-  historyList.innerHTML = logs.map(log => `
-    <div class="history-item">
-      <div class="history-date">${log.date}</div>
-      <div class="history-user">작업자: ${log.user}</div>
-      <div class="history-details">${log.details.replace(/\\n/g, '<br>')}</div>
-    </div>
-  `).join('');
-  createIcons({ icons: { X, History, Plus } });
-}
-
-export function openSwModal(asset?: SoftwareAsset) {
-  currentAsset = asset || null;
-  const swForm = document.getElementById('sw-asset-form') as HTMLFormElement;
-  const deleteBtn = document.getElementById('btn-delete-sw-asset')!;
-  
-  openModal('sw-asset-modal');
-  swForm.reset();
-
-  const subGroup = document.getElementById('sw-구독일-group')!;
-  const permGroup = document.getElementById('sw-유지보수-group')!;
-  if (state.activeSubTab === '구독SW') {
-    subGroup.style.display = 'flex';
-    permGroup.style.display = 'none';
-  } else {
-    subGroup.style.display = 'none';
-    permGroup.style.display = 'flex';
-  }
-
-  if (asset) {
-    document.getElementById('sw-modal-title')!.textContent = `${state.activeSubTab} 상세 정보 수정`;
-    deleteBtn.style.display = 'block';
-    fillFormData(asset);
-    setEditMode(false);
-  } else {
-    document.getElementById('sw-modal-title')!.textContent = `신규 ${state.activeSubTab} 자산 추가`;
-    deleteBtn.style.display = 'none';
-    (document.getElementById('sw-asset-id') as HTMLInputElement).value = '';
-    (document.getElementById('sw-asset-type') as HTMLInputElement).value = state.activeSubTab;
-    document.getElementById('btn-open-sw-update')!.style.display = 'none';
-    renderSwHistory('');
-    setEditMode(true);
-  }
-  
-  createIcons({ icons: { X, History, Plus } });
 }

src/components/Modal/SWUserModal.ts

@@ -2,73 +2,68 @@ import { state } from '../../core/state';
 import { SoftwareAsset, SWUser } from '../../core/excelHandler';
 import { openModal } from './BaseModal';
 import { createIcons, Edit2, X, Paperclip } from 'lucide';
+import { CORP_LIST, ORG_LIST } from './SharedData';
+import { generateOptionsHTML, setFieldValue, getFieldValue } from './ModalUtils';
 
-let currentSwUserAssetId: string = '';
+let currentSwUserAsset: SoftwareAsset | null = null;
 let tempSwUsers: SWUser[] = [];
 
 const SW_USER_MODAL_HTML = `
-  <!-- S/W 할당 사용자 목록 모달 -->
   <div id="sw-user-modal" class="modal-overlay hidden">
-    <div class="modal-content" style="max-width: 800px;">
+    <div class="modal-content wide">
       <div class="modal-header">
-        <h2 id="sw-user-modal-title">S/W 할당 사용자 목록</h2>
+        <h2 id="sw-user-title">소프트웨어 사용자 관리</h2>
-        <button id="btn-close-sw-user-modal" class="btn-icon" aria-label="닫기"><i data-lucide="x"></i></button>
+        <button id="btn-close-sw-user-modal" class="btn-icon"><i data-lucide="x"></i></button>
       </div>
       <div class="modal-body">
-        <input type="hidden" id="sw-user-asset-id" />
+        <div class="sw-info-summary" id="sw-user-sw-info"></div>
-        <div style="text-align: right; margin-bottom: 0.75rem;">
+        
+        <div class="user-list-toolbar" style="display:flex; justify-content:space-between; margin-bottom:1rem; align-items:center;">
+          <h3 style="font-size:1rem; font-weight:600;">할당된 사용자 목록</h3>
           <button type="button" id="btn-open-add-user" class="btn btn-primary btn-sm"><i data-lucide="plus"></i> 사용자 추가</button>
         </div>
+
         <div class="table-container">
-          <table style="width:100%;">
+          <table>
             <thead>
               <tr>
-                <th>법인</th>
+                <th>구매법인</th>
                 <th>부서/팀</th>
                 <th>직위</th>
                 <th>이름</th>
                 <th>사용기간</th>
-                <th>증빙</th>
+                <th>신청서</th>
-                <th style="text-align:center;">관리</th>
+                <th>관리</th>
               </tr>
             </thead>
-            <tbody id="user-list-body"></tbody>
+            <tbody id="sw-user-table-body"></tbody>
           </table>
         </div>
       </div>
       <div class="modal-footer">
-        <div></div>
+        <button id="btn-cancel-sw-user" class="btn btn-outline">취소</button>
-        <div class="footer-actions">
+        <button id="btn-save-sw-user" class="btn btn-primary">저장</button>
-          <button id="btn-save-sw-user-mapping" class="btn btn-primary">변경사항 저장</button>
-          <button id="btn-cancel-sw-user-modal" class="btn btn-outline">닫기</button>
-        </div>
       </div>
     </div>
   </div>
 
   <!-- 사용자 추가/수정 서브 모달 -->
-  <div id="sw-user-edit-modal" class="modal-overlay hidden" style="z-index: 1100;">
+  <div id="sw-user-edit-modal" class="modal-overlay hidden" style="z-index:1100;">
-    <div class="modal-content" style="max-width: 500px;">
+    <div class="modal-content" style="width:400px;">
       <div class="modal-header">
-        <h2 id="sw-user-edit-modal-title">사용자 정보</h2>
+        <h3 id="sw-user-edit-title">사용자 정보</h3>
-        <button id="btn-close-sw-user-edit" class="btn-icon"><i data-lucide="x"></i></button>
+        <button id="btn-close-user-edit" class="btn-icon"><i data-lucide="x"></i></button>
       </div>
       <div class="modal-body">
-        <input type="hidden" id="edit-user-idx" />
+        <form id="sw-user-edit-form" class="grid-form" style="grid-template-columns: 1fr;">
-        <div class="grid-form" style="grid-template-columns: 1fr;">
+          <input type="hidden" id="edit-user-index" value="-1" />
           <div class="form-group">
-            <label>법인</label>
+            <label>구매법인</label>
-            <select id="new-user-법인">
+            <select id="new-user-법인">${generateOptionsHTML(CORP_LIST)}</select>
-              <option value="한맥">한맥</option><option value="삼안">삼안</option><option value="바론">바론</option>
-            </select>
           </div>
           <div class="form-group">
-            <label>부서</label>
+            <label>부서/팀</label>
-            <input type="text" id="new-user-부서" />
+            <select id="new-user-부서">${generateOptionsHTML(ORG_LIST)}</select>
-          </div>
-          <div class="form-group">
-            <label>팀</label>
-            <input type="text" id="new-user-팀" />
           </div>
           <div class="form-group">
             <label>직위</label>
@@ -80,156 +75,169 @@ const SW_USER_MODAL_HTML = `
           </div>
           <div class="form-group">
             <label>사용기간</label>
-            <input type="text" id="new-user-사용기간" placeholder="ex) 2024.01 ~ 2024.12" />
+            <input type="text" id="new-user-사용기간" placeholder="ex) 2024-01-01 ~ 2024-12-31" />
           </div>
           <div class="form-group">
-            <label>신청서 (증빙파일)</label>
+            <label>신청서 (증빙)</label>
             <input type="file" id="new-user-신청서" />
-            <span id="new-user-신청서명" style="font-size:0.75rem; color:var(--text-muted);"></span>
-          </div>
           </div>
+        </form>
       </div>
       <div class="modal-footer">
-        <button id="btn-cancel-sw-user-edit" class="btn btn-outline">취소</button>
+        <button id="btn-close-user-sub" class="btn btn-outline">취소</button>
-        <button id="btn-save-edit-user" class="btn btn-primary">확인</button>
+        <button id="btn-confirm-user-edit" class="btn btn-primary">확인</button>
       </div>
     </div>
   </div>
 `;
 
-export function initSwUserModal(renderContent: () => void, closeModals: () => void) {
+export function openSwUserModal(asset: SoftwareAsset) {
-  if (!document.getElementById('sw-user-modal')) {
+  currentSwUserAsset = asset;
-    document.body.insertAdjacentHTML('beforeend', SW_USER_MODAL_HTML);
+  const modal = document.getElementById('sw-user-modal')!;
-  }
   
-  const btnOpenAddUser = document.getElementById('btn-open-add-user');
+  const swInfo = document.getElementById('sw-user-sw-info')!;
-  const btnSaveEditUser = document.getElementById('btn-save-edit-user');
+  swInfo.innerHTML = `
-  const btnSaveSwUserMapping = document.getElementById('btn-save-sw-user-mapping');
+    <div style="background:var(--bg-light); padding:1rem; border-radius:6px; margin-bottom:1.5rem;">
-  const btnCancelUserEdit = document.getElementById('btn-cancel-sw-user-edit');
+      <div style="font-size:0.8rem; color:var(--text-muted); margin-bottom:0.25rem;">${asset.법인} | ${asset.자산번호}</div>
-  const btnCloseUserEdit = document.getElementById('btn-close-sw-user-edit');
+      <div style="font-size:1.1rem; font-weight:700; color:var(--primary-color);">${asset.제품명}</div>
-  const btnCancelUserModal = document.getElementById('btn-cancel-sw-user-modal');
+    </div>
-  const btnCloseUserModal = document.getElementById('btn-close-sw-user-modal');
+  `;
 
-  btnOpenAddUser?.addEventListener('click', () => openUserEditModal(-1));
+  // 기존 사용자 데이터 복사 (원본 보호를 위해 temp 사용)
-  btnSaveEditUser?.addEventListener('click', () => saveUserEdit());
+  const existingMapping = state.masterData.swUsers.find(u => u.sw_id === asset.id);
+  tempSwUsers = existingMapping ? JSON.parse(JSON.stringify(existingMapping.userDataList || [])) : [];
   
-  btnSaveSwUserMapping?.addEventListener('click', () => {
+  renderUserList();
-    state.masterData.swUsers = state.masterData.swUsers.filter(u => u.swId !== currentSwUserAssetId);
+  modal.classList.remove('hidden');
-    state.masterData.swUsers.push(...tempSwUsers);
+  createIcons({ icons: { Edit2, X, Paperclip } });
-    closeModals();
-    renderContent();
-  });
-
-  btnCancelUserEdit?.addEventListener('click', () => document.getElementById('sw-user-edit-modal')?.classList.add('hidden'));
-  btnCloseUserEdit?.addEventListener('click', () => document.getElementById('sw-user-edit-modal')?.classList.add('hidden'));
-  btnCancelUserModal?.addEventListener('click', closeModals);
-  btnCloseUserModal?.addEventListener('click', closeModals);
 }
 
 function renderUserList() {
-  const tbody = document.getElementById('user-list-body')!;
+  const tbody = document.getElementById('sw-user-table-body')!;
   tbody.innerHTML = '';
+  
   if (tempSwUsers.length === 0) {
-    tbody.innerHTML = '<tr><td colspan="7" style="padding: 2rem; text-align: center; color: var(--text-muted);">할당된 사용자가 없습니다.</td></tr>';
+    tbody.innerHTML = '<tr><td colspan="7" style="text-align:center; padding:2rem; color:var(--text-muted);">할당된 사용자가 없습니다.</td></tr>';
     return;
   }
 
   tempSwUsers.forEach((user, idx) => {
     const tr = document.createElement('tr');
-    const deptTeam = [user.부서, user.팀].filter(Boolean).join(' / ') || '-';
-    const attachIcon = user.신청서명 ? `<i data-lucide="paperclip" class="text-primary" style="width:16px; height:16px;" title="${user.신청서명}"></i>` : '-';
-    
     tr.innerHTML = `
-      <td>${user.법인}</td>
+      <td>${user.구매법인 || user.법인 || ''}</td>
-      <td>${deptTeam}</td>
+      <td>${user.부서 || ''}</td>
-      <td>${user.직위 || '-'}</td>
+      <td>${user.직위 || ''}</td>
-      <td><strong>${user.이름}</strong></td>
+      <td>${user.이름 || ''}</td>
-      <td style="text-align:center;">${user.사용기간 || '-'}</td>
+      <td>${user.사용기간 || ''}</td>
-      <td style="text-align:center;">${attachIcon}</td>
+      <td style="text-align:center;">${user.신청서명 ? '<i data-lucide="paperclip" class="text-primary"></i>' : '-'}</td>
-      <td style="text-align:center;">
+      <td>
-        <button type="button" class="btn-icon btn-edit-user" data-idx="${idx}" style="color: var(--primary-color);"><i data-lucide="edit-2" style="width:14px; height:14px;"></i></button>
+        <div style="display:flex; gap:0.5rem;">
-        <button type="button" class="btn-icon btn-remove-user" data-idx="${idx}" style="color: var(--danger);"><i data-lucide="x" style="width:14px; height:14px;"></i></button>
+          <button class="btn btn-outline btn-sm btn-edit-user" data-idx="${idx}">수정</button>
-      </td>
+          <button class="btn btn-outline btn-sm btn-danger btn-del-user" data-idx="${idx}">삭제</button>
+        </div>
       `;
     tbody.appendChild(tr);
   });
 
-  createIcons({ icons: { Edit2, X, Paperclip } });
+  // 이벤트 연결
-  
   tbody.querySelectorAll('.btn-edit-user').forEach(btn => {
     btn.addEventListener('click', (e) => {
       const idx = parseInt((e.currentTarget as HTMLElement).getAttribute('data-idx')!);
-      openUserEditModal(idx);
+      openUserEditSubModal(idx);
     });
   });
 
-  tbody.querySelectorAll('.btn-remove-user').forEach(btn => {
+  tbody.querySelectorAll('.btn-del-user').forEach(btn => {
     btn.addEventListener('click', (e) => {
-      const idx = parseInt((e.currentTarget as HTMLButtonElement).getAttribute('data-idx')!);
+      const idx = parseInt((e.currentTarget as HTMLElement).getAttribute('data-idx')!);
+      if (confirm('사용자 할당을 삭제하시겠습니까?')) {
         tempSwUsers.splice(idx, 1);
         renderUserList();
+      }
     });
   });
+
+  createIcons({ icons: { Paperclip } });
 }
 
-export function openSwUserModal(asset: SoftwareAsset) {
+function openUserEditSubModal(idx: number = -1) {
-  openModal('sw-user-modal');
+  const subModal = document.getElementById('sw-user-edit-modal')!;
-  currentSwUserAssetId = asset.id;
+  const form = document.getElementById('sw-user-edit-form') as HTMLFormElement;
-  tempSwUsers = state.masterData.swUsers.filter(u => u.swId === asset.id).map(u => ({...u}));
+  form.reset();
-  renderUserList();
-}
   
-function openUserEditModal(idx: number) {
+  setFieldValue('edit-user-index', idx);
-  const editModal = document.getElementById('sw-user-edit-modal')!;
-  editModal.classList.remove('hidden');
-  (document.getElementById('edit-user-idx') as HTMLInputElement).value = String(idx);
   
-  if (idx === -1) {
+  if (idx > -1) {
-    document.getElementById('sw-user-edit-modal-title')!.innerText = '새 사용자 추가';
+    const user = tempSwUsers[idx];
-    (document.getElementById('new-user-법인') as HTMLSelectElement).value = '한맥';
+    setFieldValue('new-user-법인', user.구매법인 || user.법인);
-    (document.getElementById('new-user-부서') as HTMLInputElement).value = '';
+    setFieldValue('new-user-부서', user.부서);
-    (document.getElementById('new-user-팀') as HTMLInputElement).value = '';
+    setFieldValue('new-user-직위', user.직위);
-    (document.getElementById('new-user-직위') as HTMLInputElement).value = '';
+    setFieldValue('new-user-이름', user.이름);
-    (document.getElementById('new-user-이름') as HTMLInputElement).value = '';
+    setFieldValue('new-user-사용기간', user.사용기간);
-    (document.getElementById('new-user-사용기간') as HTMLInputElement).value = '';
-    (document.getElementById('new-user-신청서') as HTMLInputElement).value = '';
-    document.getElementById('new-user-신청서명')!.innerText = '';
   } else {
-    document.getElementById('sw-user-edit-modal-title')!.innerText = '사용자 정보 수정';
+    setFieldValue('new-user-법인', currentSwUserAsset?.법인);
-    const u = tempSwUsers[idx];
-    (document.getElementById('new-user-법인') as HTMLSelectElement).value = u.법인;
-    (document.getElementById('new-user-부서') as HTMLInputElement).value = u.부서;
-    (document.getElementById('new-user-팀') as HTMLInputElement).value = u.팀;
-    (document.getElementById('new-user-직위') as HTMLInputElement).value = u.직위;
-    (document.getElementById('new-user-이름') as HTMLInputElement).value = u.이름;
-    (document.getElementById('new-user-사용기간') as HTMLInputElement).value = u.사용기간;
-    (document.getElementById('new-user-신청서') as HTMLInputElement).value = '';
-    document.getElementById('new-user-신청서명')!.innerText = u.신청서명 ? `첨부: ${u.신청서명}` : '';
   }
+
+  subModal.classList.remove('hidden');
 }
 
-function saveUserEdit() {
+export function initSwUserModal(onSave: () => void, closeModals: () => void) {
-  const idx = parseInt((document.getElementById('edit-user-idx') as HTMLInputElement).value);
+  if (!document.getElementById('sw-user-modal')) {
-  const 이름 = (document.getElementById('new-user-이름') as HTMLInputElement).value.trim();
+    document.body.insertAdjacentHTML('beforeend', SW_USER_MODAL_HTML);
-  if (!이름) { alert('이름을 입력해주세요.'); return; }
-
-  const fileInput = document.getElementById('new-user-신청서') as HTMLInputElement;
-  let 신청서명 = '';
-  if (fileInput.files && fileInput.files.length > 0) {
-    신청서명 = fileInput.files[0].name;
-  } else if (idx !== -1) {
-    신청서명 = tempSwUsers[idx].신청서명;
   }
 
-  const userData: SWUser = {
+  const mainSaveBtn = document.getElementById('btn-save-sw-user')!;
-    id: idx === -1 ? Math.random().toString(36).substring(2, 9) : tempSwUsers[idx].id,
+  const addUserBtn = document.getElementById('btn-open-add-user')!;
-    swId: currentSwUserAssetId,
+  const confirmUserBtn = document.getElementById('btn-confirm-user-edit')!;
-    법인: (document.getElementById('new-user-법인') as HTMLSelectElement).value,
+
-    부서: (document.getElementById('new-user-부서') as HTMLInputElement).value,
+  addUserBtn.addEventListener('click', () => openUserEditSubModal());
-    팀: (document.getElementById('new-user-팀') as HTMLInputElement).value,
+
-    직위: (document.getElementById('new-user-직위') as HTMLInputElement).value,
+  confirmUserBtn.addEventListener('click', () => {
-    이름,
+    saveUserDataToList();
-    사용기간: (document.getElementById('new-user-사용기간') as HTMLInputElement).value,
+  });
+
+  mainSaveBtn.addEventListener('click', () => {
+    if (!currentSwUserAsset) return;
+    
+    // 전역 상태 업데이트
+    const existingIdx = state.masterData.swUsers.findIndex(u => u.sw_id === currentSwUserAsset!.id);
+    const newMapping = {
+      sw_id: currentSwUserAsset!.id,
+      userDataList: tempSwUsers
+    };
+
+    if (existingIdx > -1) state.masterData.swUsers[existingIdx] = newMapping as any;
+    else state.masterData.swUsers.push(newMapping as any);
+
+    onSave();
+    document.getElementById('sw-user-modal')?.classList.add('hidden');
+  });
+
+  document.getElementById('btn-close-sw-user-modal')?.addEventListener('click', () => {
+    document.getElementById('sw-user-modal')?.classList.add('hidden');
+  });
+  document.getElementById('btn-cancel-sw-user')?.addEventListener('click', () => {
+    document.getElementById('sw-user-modal')?.classList.add('hidden');
+  });
+  document.getElementById('btn-close-user-edit')?.addEventListener('click', () => {
+    document.getElementById('sw-user-edit-modal')?.classList.add('hidden');
+  });
+  document.getElementById('btn-close-user-sub')?.addEventListener('click', () => {
+    document.getElementById('sw-user-edit-modal')?.classList.add('hidden');
+  });
+}
+
+function saveUserDataToList() {
+  const idx = parseInt(getFieldValue('edit-user-index'));
+  const 신청서Input = document.getElementById('new-user-신청서') as HTMLInputElement;
+  const 신청서명 = 신청서Input.files && 신청서Input.files.length > 0 ? 신청서Input.files[0].name : (idx > -1 ? tempSwUsers[idx].신청서명 : '');
+
+  const userData: any = {
+    구매법인: getFieldValue('new-user-법인'),
+    부서: getFieldValue('new-user-부서'),
+    직위: getFieldValue('new-user-직위'),
+    이름: getFieldValue('new-user-이름'),
+    사용기간: getFieldValue('new-user-사용기간'),
     신청서명
   };
   

src/components/Modal/SharedData.ts

@@ -0,0 +1,33 @@
+/**
+ * 모든 모달에서 공통으로 사용하는 리스트 데이터 및 설정
+ */
+
+// 구매법인 목록
+export const CORP_LIST = ['한맥', '삼안', '장헌', '한라', 'PTC', '바론'];
+
+// 사용조직 목록
+export const ORG_LIST = ['한맥', '삼안', '장헌', '한라', 'PTC', '기술개발센터', '총괄기획실'];
+
+// 하드웨어 자산 유형 목록
+export const HW_TYPE_LIST = [
+  '서버', 'PC', '스토리지', 'NAS', 'DAS', 
+  'CPU', 'HDD', 'RAM', 'GPU', 
+  '모바일', '노트북', '태블릿'
+];
+
+// 설치위치 종속성 데이터
+export const LOCATION_DATA: Record<string, string[]> = {
+  '한맥빌딩': ['MDF실', '1층', '2층', '3층', '4층', '5층', '6층', '7층', '파고라'],
+  '기술개발센터': ['서버실', '기타'],
+  '유니온빌딩': ['4층', '5층', '6층'],
+  '뉴코아빌딩': ['4층', '6층', '7층'],
+  'IDC': ['서관202', '서관203', '서관204', '서관205', '동관53', '동관54']
+};
+
+// 유형별 자산번호 접두사(Prefix) 매핑
+export const TYPE_PREFIX_MAP: Record<string, string> = {
+  '서버': 'SVR', 'PC': 'PC', 'NAS': 'NAS', 'DAS': 'DAS', '스토리지': 'STO', 
+  'CPU': 'CPU', 'HDD': 'HDD', 'RAM': 'RAM', 'GPU': 'GPU',
+  '모바일': 'MOB', '노트북': 'PC', '태블릿': 'TAB',
+  '개인PC': 'PC', '모바일기기': 'MOB'
+};

src/components/Modal/StorageModal.ts

@@ -1,166 +0,0 @@
-import { state } from '../../core/state';
-import { HardwareAsset } from '../../core/excelHandler';
-import { openModal } from './BaseModal';
-
-const STORAGE_MODAL_HTML = `
-  <div id="storage-asset-modal" class="modal-overlay hidden">
-    <div class="modal-content">
-      <div class="modal-header">
-        <h2 id="storage-modal-title">스토리지 상세 정보</h2>
-        <button id="btn-close-storage-modal" class="btn-icon" aria-label="닫기"><i data-lucide="x"></i></button>
-      </div>
-      <div class="modal-body">
-        <form id="storage-asset-form" class="grid-form">
-          <input type="hidden" id="storage-asset-id" />
-          <input type="hidden" id="storage-asset-type" value="스토리지" />
-          <div class="form-group"><label for="storage-법인">법인</label><input type="text" id="storage-법인" required /></div>
-          <div class="form-group"><label for="storage-유형">유형</label><input type="text" id="storage-유형" required /></div>
-          <div class="form-group"><label for="storage-자산코드">자산코드</label><input type="text" id="storage-자산코드" required /></div>
-          <div class="form-group"><label for="storage-명칭">명칭</label><input type="text" id="storage-명칭" required /></div>
-          <div class="form-group"><label for="storage-위치">위치</label><input type="text" id="storage-위치" /></div>
-          <div class="form-group"><label for="storage-모델명">모델명</label><input type="text" id="storage-모델명" /></div>
-          <div class="form-group"><label for="storage-용량">용량</label><input type="text" id="storage-용량" /></div>
-          <div class="form-group"><label for="storage-담당자_정">담당자(정)</label><input type="text" id="storage-담당자_정" /></div>
-          <div class="form-group"><label for="storage-IP주소">IP주소</label><input type="text" id="storage-IP주소" /></div>
-          <div class="form-group"><label for="storage-구매일">구매일</label><input type="text" id="storage-구매일" /></div>
-          <div class="form-group"><label for="storage-금액">금액</label><input type="text" id="storage-금액" oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/\\B(?=(\\d{3})+(?!\d))/g, ',')" /></div>
-        </form>
-      </div>
-      <div class="modal-footer">
-        <button id="btn-delete-storage-asset" class="btn btn-outline btn-danger">삭제</button>
-        <div class="footer-actions">
-          <button id="btn-revert-storage-edit" class="btn btn-outline hidden">수정 취소</button>
-          <button id="btn-close-storage-footer" class="btn btn-outline">닫기</button>
-          <button id="btn-save-storage-asset" class="btn btn-primary">수정</button>
-        </div>
-      </div>
-    </div>
-  </div>
-`;
-
-export let currentAsset: HardwareAsset | null = null;
-export let isEditMode = false;
-
-export function setEditMode(edit: boolean) {
-  isEditMode = edit;
-  const storageForm = document.getElementById('storage-asset-form') as HTMLFormElement;
-  const btnSaveStorage = document.getElementById('btn-save-storage-asset') as HTMLButtonElement;
-  const btnRevertEdit = document.getElementById('btn-revert-storage-edit') as HTMLButtonElement;
-  const btnCloseFooter = document.getElementById('btn-close-storage-footer') as HTMLButtonElement;
-
-  if (edit) {
-    storageForm.classList.add('is-edit-mode');
-    storageForm.classList.remove('is-view-mode');
-    btnSaveStorage.textContent = '저장';
-    btnRevertEdit.classList.remove('hidden');
-    btnCloseFooter.classList.add('hidden');
-  } else {
-    storageForm.classList.add('is-view-mode');
-    storageForm.classList.remove('is-edit-mode');
-    btnSaveStorage.textContent = '수정';
-    btnRevertEdit.classList.add('hidden');
-    btnCloseFooter.classList.remove('hidden');
-    if (currentAsset) fillFormData(currentAsset);
-  }
-}
-
-export function fillFormData(asset: HardwareAsset) {
-  (document.getElementById('storage-asset-id') as HTMLInputElement).value = asset.id;
-  (document.getElementById('storage-법인') as HTMLInputElement).value = asset.법인;
-  (document.getElementById('storage-유형') as HTMLInputElement).value = asset.storage유형 || 'NAS';
-  (document.getElementById('storage-자산코드') as HTMLInputElement).value = asset.자산코드;
-  (document.getElementById('storage-명칭') as HTMLInputElement).value = asset.명칭;
-  (document.getElementById('storage-위치') as HTMLInputElement).value = asset.위치 || '';
-  (document.getElementById('storage-모델명') as HTMLInputElement).value = asset.모델명 || '';
-  (document.getElementById('storage-용량') as HTMLInputElement).value = asset.용량 || '';
-  (document.getElementById('storage-담당자_정') as HTMLInputElement).value = asset.담당자_정 || '';
-  (document.getElementById('storage-IP주소') as HTMLInputElement).value = asset.IP주소 || '';
-  (document.getElementById('storage-구매일') as HTMLInputElement).value = asset.구매일 || '';
-  (document.getElementById('storage-금액') as HTMLInputElement).value = asset.금액 || '';
-}
-
-export function initStorageModal(renderContent: () => void, closeModals: () => void) {
-  if (!document.getElementById('storage-asset-modal')) {
-    document.body.insertAdjacentHTML('beforeend', STORAGE_MODAL_HTML);
-  }
-
-  const storageForm = document.getElementById('storage-asset-form') as HTMLFormElement;
-  const btnRevertEdit = document.getElementById('btn-revert-storage-edit') as HTMLButtonElement;
-  const btnSaveStorage = document.getElementById('btn-save-storage-asset') as HTMLButtonElement;
-  const btnDeleteStorage = document.getElementById('btn-delete-storage-asset') as HTMLButtonElement;
-  const btnCloseHeader = document.getElementById('btn-close-storage-modal') as HTMLButtonElement;
-  const btnCloseFooter = document.getElementById('btn-close-storage-footer') as HTMLButtonElement;
-
-  btnRevertEdit?.addEventListener('click', () => setEditMode(false));
-  btnCloseHeader?.addEventListener('click', closeModals);
-  btnCloseFooter?.addEventListener('click', closeModals);
-
-  btnSaveStorage?.addEventListener('click', (e) => {
-    e.preventDefault();
-    if (!isEditMode) {
-      setEditMode(true);
-      return;
-    }
-    
-    if (!storageForm.checkValidity()) { storageForm.reportValidity(); return; }
-    
-    const id = (document.getElementById('storage-asset-id') as HTMLInputElement).value;
-    const newAsset: HardwareAsset = {
-      id: id || Math.random().toString(36).substring(2, 9),
-      type: '스토리지',
-      법인: (document.getElementById('storage-법인') as HTMLInputElement).value,
-      storage유형: (document.getElementById('storage-유형') as HTMLInputElement).value,
-      자산코드: (document.getElementById('storage-자산코드') as HTMLInputElement).value,
-      명칭: (document.getElementById('storage-명칭') as HTMLInputElement).value,
-      위치: (document.getElementById('storage-위치') as HTMLInputElement).value,
-      모델명: (document.getElementById('storage-모델명') as HTMLInputElement).value,
-      용량: (document.getElementById('storage-용량') as HTMLInputElement).value,
-      담당자_정: (document.getElementById('storage-담당자_정') as HTMLInputElement).value,
-      IP주소: (document.getElementById('storage-IP주소') as HTMLInputElement).value,
-      구매일: (document.getElementById('storage-구매일') as HTMLInputElement).value,
-      금액: (document.getElementById('storage-금액') as HTMLInputElement).value,
-      관리자: '', MACaddress: '', HW사양: '', OS: '', 납품업체: '', 품의서명: ''
-    };
-
-    if (id) {
-      const idx = state.masterData.hw.findIndex(a => a.id === id);
-      if(idx !== -1) state.masterData.hw[idx] = newAsset;
-    } else {
-      state.masterData.hw.push(newAsset);
-    }
-    
-    closeModals();
-    renderContent();
-  });
-
-  btnDeleteStorage?.addEventListener('click', (e) => {
-    e.preventDefault();
-    const id = (document.getElementById('storage-asset-id') as HTMLInputElement).value;
-    if (confirm('삭제하시겠습니까?')) {
-      state.masterData.hw = state.masterData.hw.filter(a => a.id !== id);
-      closeModals();
-      renderContent();
-    }
-  });
-}
-
-export function openStorageModal(asset?: HardwareAsset) {
-  currentAsset = asset || null;
-  const storageForm = document.getElementById('storage-asset-form') as HTMLFormElement;
-  const deleteBtn = document.getElementById('btn-delete-storage-asset')!;
-  
-  openModal('storage-asset-modal');
-  storageForm.reset();
-  
-  if (asset) {
-    document.getElementById('storage-modal-title')!.textContent = '스토리지 상세 정보 수정';
-    deleteBtn.style.display = 'block';
-    fillFormData(asset);
-    setEditMode(false);
-  } else {
-    document.getElementById('storage-modal-title')!.textContent = '신규 스토리지 자산 추가';
-    deleteBtn.style.display = 'none';
-    (document.getElementById('storage-asset-id') as HTMLInputElement).value = '';
-    setEditMode(true);
-  }
-}

src/components/Navigation.ts

@@ -3,7 +3,7 @@ import { state } from '../core/state';
 const MENU_CONFIG = {
   hw: {
     label: '하드웨어',
-    tabs: ['대시보드', '개인PC', '서버', '스토리지', '전산비품']
+    tabs: ['대시보드', '개인PC', '서버', '스토리지', '전산비품', '모바일기기']
   },
   sw: {
     label: '소프트웨어',
@@ -38,7 +38,7 @@ export function renderNavigation(onTabChange: (tab: string) => void) {
         if (state.activeCategory !== catKey) {
           state.activeCategory = catKey;
           state.activeSubTab = '대시보드';
-          if (btnAddAsset) btnAddAsset.classList.add('hidden');
+          if (btnAddAsset) btnAddAsset.classList.remove('hidden');
           render();
           onTabChange('대시보드');
         }
@@ -60,8 +60,7 @@ export function renderNavigation(onTabChange: (tab: string) => void) {
           state.activeSubTab = tab;
           
           if (btnAddAsset) {
-            if (tab === '대시보드') btnAddAsset.classList.add('hidden');
+            btnAddAsset.classList.remove('hidden');
-            else btnAddAsset.classList.remove('hidden');
           }
           
           render();

src/core/state.ts

@@ -6,6 +6,7 @@ export interface MasterAssetData {
   server: HardwareAsset[];
   storage: HardwareAsset[];
   equip: HardwareAsset[];
+  mobile: HardwareAsset[];
   subSw: SoftwareAsset[];
   permSw: SoftwareAsset[];
   swUsers: SWUser[];
@@ -27,6 +28,7 @@ export const state: AppState = {
     server: [],
     storage: [],
     equip: [],
+    mobile: [],
     subSw: [],
     permSw: [],
     swUsers: [],
@@ -44,6 +46,7 @@ export async function loadMasterDataFromDB() {
       { key: 'server', url: 'http://localhost:3000/api/server' },
       { key: 'storage', url: 'http://localhost:3000/api/storage' },
       { key: 'equip', url: 'http://localhost:3000/api/equip' },
+      { key: 'mobile', url: 'http://localhost:3000/api/mobile' },
       { key: 'subSw', url: 'http://localhost:3000/api/sw/sub' },
       { key: 'permSw', url: 'http://localhost:3000/api/sw/perm' },
       { key: 'swUsers', url: 'http://localhost:3000/api/sw-users' }
@@ -70,3 +73,46 @@ export async function loadMasterDataFromDB() {
 export function updateState(newState: Partial<AppState>) {
   Object.assign(state, newState);
 }
+
+/**
+ * 하드웨어 자산 통합 저장 (자동 카테고리 분류)
+ */
+export function saveHardwareAsset(updatedAsset: HardwareAsset) {
+  const { type } = updatedAsset;
+  const detailPurpose = (updatedAsset as any).상세용도 || '';
+
+  // 1. 타겟 카테고리 결정
+  let targetKey: keyof MasterAssetData = 'equip';
+  if (type === '서버' || (type === 'PC' && detailPurpose === '서버')) targetKey = 'server';
+  else if (['NAS', 'DAS', '스토리지'].includes(type)) targetKey = 'storage';
+  else if (['CPU', 'GPU', 'RAM', 'HDD'].includes(type)) targetKey = 'equip';
+  else if (['모바일', '태블릿', '노트북'].includes(type)) targetKey = 'mobile';
+  else if (type === 'PC' && detailPurpose === '개인PC') targetKey = 'pc';
+
+  // 2. 모든 카테고리에서 기존 ID 자산 삭제 (이동 가능성 대비)
+  const hwKeys: (keyof MasterAssetData)[] = ['pc', 'server', 'storage', 'equip', 'mobile'];
+  hwKeys.forEach(key => {
+    const arr = state.masterData[key] as HardwareAsset[];
+    if (Array.isArray(arr)) {
+      const idx = arr.findIndex(a => a.id === updatedAsset.id);
+      if (idx > -1) arr.splice(idx, 1);
+    }
+  });
+
+  // 3. 새로운 타겟 카테고리에 추가
+  (state.masterData[targetKey] as HardwareAsset[]).push(updatedAsset);
+}
+
+/**
+ * 하드웨어 자산 통합 삭제
+ */
+export function deleteHardwareAsset(assetId: string) {
+  const hwKeys: (keyof MasterAssetData)[] = ['pc', 'server', 'storage', 'equip', 'mobile'];
+  hwKeys.forEach(key => {
+    const arr = state.masterData[key] as HardwareAsset[];
+    if (Array.isArray(arr)) {
+      const idx = arr.findIndex(a => a.id === assetId);
+      if (idx > -1) arr.splice(idx, 1);
+    }
+  });
+}

src/core/utils.ts

@@ -54,3 +54,24 @@ export function getAssetChanges(oldAsset: any, newAsset: any, fields: {key: stri
   });
   return changes.join('\n');
 }
+
+/**
+ * 자산 목록 정렬 (방안 C: 구매법인별 -> 자산번호 순)
+ */
+export function sortAssets<T>(list: T[]): T[] {
+  return [...list].sort((a: any, b: any) => {
+    // 1순위: 구매법인 (한글 가나다순)
+    const corpA = String(a.법인 || '').trim();
+    const corpB = String(b.법인 || '').trim();
+    if (corpA < corpB) return -1;
+    if (corpA > corpB) return 1;
+
+    // 2순위: 자산번호 (영문/숫자순)
+    const codeA = String(a.자산코드 || a.자산번호 || '').trim();
+    const codeB = String(b.자산코드 || b.자산번호 || '').trim();
+    if (codeA < codeB) return -1;
+    if (codeA > codeB) return 1;
+
+    return 0;
+  });
+}

src/main.ts

@@ -2,11 +2,10 @@ import { state, loadMasterDataFromDB } from './core/state';
 import { renderNavigation } from './components/Navigation';
 import { renderDashboard } from './views/DashboardView';
 import { renderTable } from './views/AssetTableView';
-import { downloadTemplate, exportToExcel, parseExcel, HardwareAsset, SoftwareAsset, SWUser } from './core/excelHandler';
+import { downloadTemplate, exportToExcel, parseExcel } from './core/excelHandler';
 import { initBaseModal } from './components/Modal/BaseModal';
 import { initPcModal } from './components/Modal/PCModal';
 import { initHwModal, openHwModal } from './components/Modal/HWModal';
-import { initStorageModal } from './components/Modal/StorageModal';
 import { initSwModal } from './components/Modal/SWModal';
 import { initSwUserModal } from './components/Modal/SWUserModal';
 import { initDashboardDetailModal } from './components/Modal/DashboardDetailModal';
@@ -31,10 +30,22 @@ const savePcToDB = () => apiBatchSave('http://localhost:3000/api/pc/batch', stat
 const saveServerToDB = () => apiBatchSave('http://localhost:3000/api/server/batch', state.masterData.server, '서버');
 const saveStorageToDB = () => apiBatchSave('http://localhost:3000/api/storage/batch', state.masterData.storage, '스토리지');
 const saveEquipToDB = () => apiBatchSave('http://localhost:3000/api/equip/batch', state.masterData.equip, '전산비품');
+const saveMobileToDB = () => apiBatchSave('http://localhost:3000/api/mobile/batch', state.masterData.mobile, '모바일기기');
 const saveSubSwToDB = () => apiBatchSave('http://localhost:3000/api/sw/sub/batch', state.masterData.subSw, '구독SW');
 const savePermSwToDB = () => apiBatchSave('http://localhost:3000/api/sw/perm/batch', state.masterData.permSw, '영구SW');
 const saveSwUsersToDB = () => apiBatchSave('http://localhost:3000/api/sw-users/batch', state.masterData.swUsers, 'SW사용자');
 
+// 모든 하드웨어 DB 동기화
+async function saveAllHardwareToDB() {
+  await Promise.all([
+    savePcToDB(),
+    saveServerToDB(),
+    saveStorageToDB(),
+    saveEquipToDB(),
+    saveMobileToDB()
+  ]);
+}
+
 // --- App Initialization ---
 function initApp() {
   console.log('🚀 ITAM Dedicated System Initializing...');
@@ -49,15 +60,10 @@ function initApp() {
       else renderTable(mainContent);
     });
 
-    // 각 모달 초기화 시 해당 카테고리의 저장 API만 호출하도록 콜백 연결
+    // 하드웨어 모달은 통합 저장 로직 사용 (유형 변경 시 카테고리 이동 대응)
-    initPcModal(() => { savePcToDB(); renderTable(mainContent); }, closeAllModals);
+    initPcModal(() => { saveAllHardwareToDB(); renderTable(mainContent); }, closeAllModals);
-    initHwModal(() => {
+    initHwModal(() => { saveAllHardwareToDB(); renderTable(mainContent); }, closeAllModals); 
-      if (state.activeSubTab === '서버') saveServerToDB();
+
-      else if (state.activeSubTab === '스토리지') saveStorageToDB();
-      else if (state.activeSubTab === '전산비품') saveEquipToDB();
-      renderTable(mainContent);
-    }, closeAllModals); 
-    initStorageModal(() => { saveStorageToDB(); renderTable(mainContent); }, closeAllModals);
     initSwModal(() => {
       if (state.activeSubTab === '구독SW') saveSubSwToDB();
       else savePermSwToDB();
@@ -86,9 +92,8 @@ function initApp() {
     if (file) {
       const data = await parseExcel(file);
       state.masterData = data;
-      // 엑셀 업로드 시 모든 카테고리 병렬 덮어쓰기
       await Promise.all([
-        savePcToDB(), saveServerToDB(), saveStorageToDB(), saveEquipToDB(),
+        saveAllHardwareToDB(),
         saveSubSwToDB(), savePermSwToDB(), saveSwUsersToDB()
       ]);
       renderTable(mainContent);
@@ -96,13 +101,13 @@ function initApp() {
   });
 
   document.getElementById('btn-add-asset')?.addEventListener('click', () => {
-    if (state.activeSubTab === '서버' || state.activeSubTab === '전산비품' || state.activeSubTab === '스토리지') {
+    const defaultType = state.activeSubTab === '대시보드' ? '' : state.activeSubTab;
     openHwModal({
       id: Math.random().toString(36).substring(2, 9),
-        type: state.activeSubTab,
+      type: defaultType,
-        법인: '한맥', 자산코드: '', 명칭: '', 위치: '', 관리자: '', IP주소: '', MACaddress: '', HW사양: '', OS: '', 납품업체: '', 품의서명: ''
+      법인: '', 자산코드: '', 명칭: '', 위치: '', 관리자: '', IP주소: '', MACaddress: '', HW사양: '', OS: '', 납품업체: '', 품의서명: '', 현사용조직: '', 이전사용조직: '',
-      } as any);
+      용도: '', 상세: '', 비고: '', storage유형: defaultType, 모델명: '', CPU: '', RAM: '', SSD1: '', SSD2: '', HDD1: '', 모니터링: ''
-    }
+    } as any, 'add');
   });
 
   createIcons({

src/styles/modal.css

@@ -103,13 +103,21 @@
 .grid-form.is-view-mode input,
 .grid-form.is-view-mode select,
 .grid-form.is-view-mode textarea {
-  border-color: transparent !important;
+  border: none !important;
   background-color: transparent !important;
-  padding-left: 0;
+  padding-left: 0 !important;
-  padding-right: 0;
+  padding-right: 0 !important;
-  pointer-events: none;
+  pointer-events: none !important;
-  color: var(--text-main);
+  color: var(--text-main) !important;
-  font-weight: 500;
+  font-weight: 500 !important;
+  appearance: none !important;
+  -webkit-appearance: none !important;
+  -moz-appearance: none !important;
+  box-shadow: none !important;
+}
+
+.grid-form.is-view-mode select::-ms-expand {
+  display: none !important;
 }
 
 .grid-form.is-edit-mode input,
@@ -119,6 +127,16 @@
   border: 1px solid var(--border-color);
 }
 
+/* 수동 수정 불가 필드 (자산번호 등) 전용 스타일 */
+.grid-form input[readonly] {
+  border-color: transparent !important;
+  background-color: transparent !important;
+  pointer-events: none !important;
+  color: var(--text-main) !important;
+  font-weight: 500 !important;
+  cursor: default;
+}
+
 .grid-form.is-edit-mode input:focus,
 .grid-form.is-edit-mode select:focus,
 .grid-form.is-edit-mode textarea:focus {

src/views/AssetTableView.ts

@@ -3,6 +3,7 @@ import { renderPcList } from './List/PcListView';
 import { renderServerList } from './List/ServerListView';
 import { renderStorageList } from './List/StorageListView';
 import { renderEquipmentList } from './List/EquipmentListView';
+import { renderMobileList } from './List/MobileListView';
 import { renderSwList } from './List/SwListView';
 import { createIcons, Download, Upload, FileSpreadsheet, Plus, X, LayoutDashboard, Monitor, Server, Database, Laptop, CalendarClock, Key, Cpu, Layers, Users, Paperclip, Edit2, RefreshCcw } from 'lucide';
 
@@ -25,6 +26,7 @@ export function renderTable(mainContent: HTMLElement) {
       else if (tab === '서버') renderServerList(container);
       else if (tab === '스토리지') renderStorageList(container);
       else if (tab === '전산비품') renderEquipmentList(container);
+      else if (tab === '모바일기기') renderMobileList(container);
       else {
         container.innerHTML = `<div style="padding:2rem; color:var(--text-muted);">"${tab}" 탭에 대한 하드웨어 리스트 뷰가 정의되지 않았습니다.</div>`;
       }

src/views/Dashboard/HwDashboard.ts

@@ -50,7 +50,7 @@ export function renderHwDashboard(container: HTMLElement) {
           <canvas id="chart-hw-types"></canvas>
         </div>
         <div class="dashboard-card">
-          <h4 style="margin-bottom:1rem; font-size:0.9rem; color:var(--text-muted);">법인별 자산 분포</h4>
+          <h4 style="margin-bottom:1rem; font-size:0.9rem; color:var(--text-muted);">구매법인별 자산 분포</h4>
           <canvas id="chart-hw-corps"></canvas>
         </div>
       </div>

src/views/Dashboard/SwDashboard.ts

@@ -92,7 +92,7 @@ export function renderSwDashboard(container: HTMLElement) {
       <h3 class="dashboard-section-title">${currentYear}년 도입 비용 분석</h3>
       <div class="dashboard-layout-2col">
         <div class="dashboard-card">
-          <h4 style="margin-bottom:1rem; font-size:0.9rem; color:var(--text-muted);">법인별 도입 금액 (원)</h4>
+          <h4 style="margin-bottom:1rem; font-size:0.9rem; color:var(--text-muted);">구매법인별 도입 금액 (원)</h4>
           <canvas id="chart-sw-corp"></canvas>
         </div>
         <div class="dashboard-card">

src/views/List/EquipmentListView.ts

@@ -1,10 +1,10 @@
 import { state } from '../../core/state';
 import { openHwModal } from '../../components/Modal/HWModal';
-import { formatInline } from '../../core/utils';
+import { formatInline, sortAssets } from '../../core/utils';
 import { createIcons, RefreshCcw } from 'lucide';
 
 export function renderEquipmentList(container: HTMLElement) {
-  const fullList = state.masterData.equip;
+  const fullList = sortAssets(state.masterData.equip);
   
   const filterBar = document.createElement('div');
   filterBar.className = 'search-bar';
@@ -16,7 +16,7 @@ export function renderEquipmentList(container: HTMLElement) {
       <input type="text" id="filter-keyword" placeholder="검색어를 입력하세요..." autocomplete="off">
     </div>
     <div class="search-item">
-      <label>법인</label>
+      <label>구매법인</label>
       <select id="filter-corp"><option value="">전체 법인</option>${corps.map(c => `<option value="${c}">${c}</option>`).join('')}</select>
     </div>
     <button id="btn-reset-filters" class="btn btn-outline btn-reset">
@@ -28,7 +28,7 @@ export function renderEquipmentList(container: HTMLElement) {
   const tableWrapper = document.createElement('div');
   tableWrapper.className = 'table-container';
   const table = document.createElement('table');
-  table.innerHTML = `<thead><tr><th>No</th><th>법인</th><th>유형</th><th>자산코드</th><th>명칭</th><th>위치</th><th>관리자</th><th>구매일</th><th>금액</th><th>관리</th></tr></thead><tbody id="dynamic-tbody"></tbody>`;
+  table.innerHTML = `<thead><tr><th>No</th><th>구매법인</th><th>현 사용조직</th><th>유형</th><th>자산번호</th><th>모델명</th><th>관리자</th><th>구매일</th><th>금액</th><th>관리</th></tr></thead><tbody id="dynamic-tbody"></tbody>`;
   
   tableWrapper.appendChild(table);
   container.appendChild(tableWrapper);
@@ -42,7 +42,7 @@ export function renderEquipmentList(container: HTMLElement) {
     const corp = corpSelect ? corpSelect.value : '';
 
     const filtered = fullList.filter(asset => {
-      const matchKeyword = !keyword || String(asset.자산코드||'').toLowerCase().includes(keyword) || String(asset.명칭||'').toLowerCase().includes(keyword);
+      const matchKeyword = !keyword || String(asset.자산코드||'').toLowerCase().includes(keyword) || String(asset.모델명||'').toLowerCase().includes(keyword) || String(asset.현사용조직||'').toLowerCase().includes(keyword);
       const matchCorp = !corp || asset.법인 === corp;
       return matchKeyword && matchCorp;
     });
@@ -59,16 +59,16 @@ export function renderEquipmentList(container: HTMLElement) {
       tr.innerHTML = `
         <td>${idx+1}</td>
         <td>${asset.법인}</td>
-        <td>${asset.비품유형||'-'}</td>
+        <td>${asset.현사용조직||''}</td>
+        <td>${asset.type}</td>
         <td>${asset.자산코드}</td>
-        <td>${formatInline(asset.명칭)}</td>
+        <td>${formatInline(asset.모델명)}</td>
-        <td>${formatInline(asset.위치)}</td>
+        <td>${formatInline(asset.담당자_정 || asset.관리자)}</td>
-        <td>${formatInline(asset.관리자)}</td>
         <td>${asset.구매일||''}</td>
         <td>${asset.금액||''}</td>
         <td><button class="btn btn-outline btn-sm">수정</button></td>
       `;
-      tr.addEventListener('click', (e) => { if (!(e.target as HTMLElement).closest('button')) openHwModal(asset); });
+      tr.addEventListener('click', (e) => { if (!(e.target as HTMLElement).closest('button')) openHwModal(asset, 'view'); });
       tbody.appendChild(tr);
     });
   };

src/views/List/MobileListView.ts

@@ -0,0 +1,85 @@
+import { state } from '../../core/state';
+import { openHwModal } from '../../components/Modal/HWModal';
+import { formatInline, sortAssets } from '../../core/utils';
+import { createIcons, RefreshCcw } from 'lucide';
+
+export function renderMobileList(container: HTMLElement) {
+  const fullList = sortAssets(state.masterData.mobile);
+  
+  const filterBar = document.createElement('div');
+  filterBar.className = 'search-bar';
+  const corps = Array.from(new Set(fullList.map(a => a.법인))).filter(Boolean).sort();
+
+  filterBar.innerHTML = `
+    <div class="search-item flex-1">
+      <label>통합 검색 (자산코드/명칭)</label>
+      <input type="text" id="filter-keyword" placeholder="검색어를 입력하세요..." autocomplete="off">
+    </div>
+    <div class="search-item">
+      <label>구매법인</label>
+      <select id="filter-corp"><option value="">전체 법인</option>${corps.map(c => `<option value="${c}">${c}</option>`).join('')}</select>
+    </div>
+    <button id="btn-reset-filters" class="btn btn-outline btn-reset">
+      <i data-lucide="refresh-ccw"></i> 필터 초기화
+    </button>
+  `;
+  container.appendChild(filterBar);
+
+  const tableWrapper = document.createElement('div');
+  tableWrapper.className = 'table-container';
+  const table = document.createElement('table');
+  table.innerHTML = `<thead><tr><th>No</th><th>구매법인</th><th>현 사용조직</th><th>유형</th><th>자산번호</th><th>모델명</th><th>관리자</th><th>구매일</th><th>금액</th><th>관리</th></tr></thead><tbody id="dynamic-tbody"></tbody>`;
+  
+  tableWrapper.appendChild(table);
+  container.appendChild(tableWrapper);
+  const tbody = table.querySelector('tbody')!;
+
+  const updateTable = () => {
+    const keywordInput = document.getElementById('filter-keyword') as HTMLInputElement;
+    const corpSelect = document.getElementById('filter-corp') as HTMLSelectElement;
+
+    const keyword = keywordInput ? keywordInput.value.toLowerCase().trim() : '';
+    const corp = corpSelect ? corpSelect.value : '';
+
+    const filtered = fullList.filter(asset => {
+      const matchKeyword = !keyword || String(asset.자산코드||'').toLowerCase().includes(keyword) || String(asset.모델명||'').toLowerCase().includes(keyword) || String(asset.현사용조직||'').toLowerCase().includes(keyword);
+      const matchCorp = !corp || asset.법인 === corp;
+      return matchKeyword && matchCorp;
+    });
+
+    tbody.innerHTML = '';
+    if (filtered.length === 0) {
+      tbody.innerHTML = `<tr><td colspan="10" style="text-align:center; padding: 3rem; color: var(--text-muted);">검색 결과가 없습니다.</td></tr>`;
+      return;
+    }
+
+    filtered.forEach((asset, idx) => {
+      const tr = document.createElement('tr');
+      tr.style.cursor = 'pointer';
+      tr.innerHTML = `
+        <td>${idx+1}</td>
+        <td>${asset.법인}</td>
+        <td>${asset.현사용조직||''}</td>
+        <td>${asset.type}</td>
+        <td>${asset.자산코드}</td>
+        <td>${formatInline(asset.모델명)}</td>
+        <td>${formatInline(asset.담당자_정 || asset.관리자)}</td>
+        <td>${asset.구매일||''}</td>
+        <td>${asset.금액||''}</td>
+        <td><button class="btn btn-outline btn-sm">수정</button></td>
+      `;
+      tr.addEventListener('click', (e) => { if (!(e.target as HTMLElement).closest('button')) openHwModal(asset, 'view'); });
+      tbody.appendChild(tr);
+    });
+  };
+
+  document.getElementById('filter-keyword')?.addEventListener('input', updateTable);
+  document.getElementById('filter-corp')?.addEventListener('change', updateTable);
+  document.getElementById('btn-reset-filters')?.addEventListener('click', () => {
+    (document.getElementById('filter-keyword') as HTMLInputElement).value = '';
+    (document.getElementById('filter-corp') as HTMLSelectElement).value = '';
+    updateTable();
+  });
+
+  updateTable();
+}

src/views/List/PcListView.ts

@@ -1,10 +1,10 @@
 import { state } from '../../core/state';
 import { openPcModal } from '../../components/Modal/PCModal';
-import { formatInline } from '../../core/utils';
+import { formatInline, sortAssets } from '../../core/utils';
 import { createIcons, Paperclip, RefreshCcw } from 'lucide';
 
 export function renderPcList(container: HTMLElement) {
-  const fullList = state.masterData.pc;
+  const fullList = sortAssets(state.masterData.pc);
   
   const filterBar = document.createElement('div');
   filterBar.className = 'search-bar';
@@ -16,11 +16,8 @@ export function renderPcList(container: HTMLElement) {
       <input type="text" id="filter-keyword" placeholder="검색어를 입력하세요..." autocomplete="off">
     </div>
     <div class="search-item">
-      <label>법인</label>
+      <label>구매법인</label>
-      <select id="filter-corp">
+      <select id="filter-corp"><option value="">전체 법인</option>${corps.map(c => `<option value="${c}">${c}</option>`).join('')}</select>
-        <option value="">전체 법인</option>
-        ${corps.map(c => `<option value="${c}">${c}</option>`).join('')}
-      </select>
     </div>
     <button id="btn-reset-filters" class="btn btn-outline btn-reset">
       <i data-lucide="refresh-ccw"></i> 필터 초기화
@@ -31,7 +28,7 @@ export function renderPcList(container: HTMLElement) {
   const tableWrapper = document.createElement('div');
   tableWrapper.className = 'table-container';
   const table = document.createElement('table');
-  table.innerHTML = `<thead><tr><th>No</th><th>법인</th><th>자산코드</th><th>사용자</th><th>위치</th><th>CPU</th><th>RAM</th><th>Storage</th><th>구매일</th><th>금액</th><th>품의서</th><th>관리</th></tr></thead><tbody id="dynamic-tbody"></tbody>`;
+  table.innerHTML = `<thead><tr><th>No</th><th>구매법인</th><th>현 사용조직</th><th>자산코드</th><th>사용자</th><th>위치</th><th>CPU</th><th>RAM</th><th>Storage</th><th>구매일</th><th>금액</th><th>품의서</th><th>관리</th></tr></thead><tbody id="dynamic-tbody"></tbody>`;
   
   tableWrapper.appendChild(table);
   container.appendChild(tableWrapper);
@@ -46,14 +43,14 @@ export function renderPcList(container: HTMLElement) {
     const corp = corpSelect ? corpSelect.value : '';
 
     const filtered = fullList.filter(asset => {
-      const matchKeyword = !keyword || String(asset.자산코드||'').toLowerCase().includes(keyword) || String(asset.사용자||'').toLowerCase().includes(keyword);
+      const matchKeyword = !keyword || String(asset.자산코드||'').toLowerCase().includes(keyword) || String(asset.사용자||'').toLowerCase().includes(keyword) || String(asset.현사용조직||'').toLowerCase().includes(keyword);
       const matchCorp = !corp || asset.법인 === corp;
       return matchKeyword && matchCorp;
     });
 
     tbody.innerHTML = '';
     if (filtered.length === 0) {
-      tbody.innerHTML = `<tr><td colspan="12" style="text-align:center; padding: 3rem; color: var(--text-muted);">검색 결과가 없습니다.</td></tr>`;
+      tbody.innerHTML = `<tr><td colspan="13" style="text-align:center; padding: 3rem; color: var(--text-muted);">검색 결과가 없습니다.</td></tr>`;
       return;
     }
 
@@ -65,6 +62,7 @@ export function renderPcList(container: HTMLElement) {
       tr.innerHTML = `
         <td>${idx+1}</td>
         <td>${asset.법인}</td>
+        <td>${asset.현사용조직||''}</td>
         <td>${asset.자산코드}</td>
         <td>${asset.사용자||''}</td>
         <td>${asset.위치||''}</td>
@@ -76,7 +74,7 @@ export function renderPcList(container: HTMLElement) {
         <td style="text-align:center;">${asset.품의서명 ? '<i data-lucide="paperclip" class="text-primary"></i>' : '-'}</td>
         <td><button class="btn btn-outline btn-sm">수정</button></td>
       `;
-      tr.addEventListener('click', (e) => { if (!(e.target as HTMLElement).closest('button')) openPcModal(asset); });
+      tr.addEventListener('click', (e) => { if (!(e.target as HTMLElement).closest('button')) openPcModal(asset, 'view'); });
       tbody.appendChild(tr);
     });
     createIcons({ icons: { Paperclip } });

src/views/List/ServerListView.ts

@@ -1,10 +1,10 @@
 import { state } from '../../core/state';
 import { openHwModal } from '../../components/Modal/HWModal';
-import { formatInline, createBadge } from '../../core/utils';
+import { formatInline, createBadge, sortAssets } from '../../core/utils';
 import { createIcons, RefreshCcw } from 'lucide';
 
 export function renderServerList(container: HTMLElement) {
-  const fullList = state.masterData.server;
+  const fullList = sortAssets(state.masterData.server);
   
   const filterBar = document.createElement('div');
   filterBar.className = 'search-bar';
@@ -89,7 +89,7 @@ export function renderServerList(container: HTMLElement) {
         <td>${formatInline(storage)}</td>
         <td><button class="btn btn-outline btn-sm">수정</button></td>
       `;
-      tr.addEventListener('click', (e) => { if (!(e.target as HTMLElement).closest('button')) openHwModal(asset); });
+      tr.addEventListener('click', (e) => { if (!(e.target as HTMLElement).closest('button')) openHwModal(asset, 'view'); });
       tbody.appendChild(tr);
     });
   };

src/views/List/StorageListView.ts

@@ -1,24 +1,29 @@
 import { state } from '../../core/state';
-import { openStorageModal } from '../../components/Modal/StorageModal';
+import { openHwModal } from '../../components/Modal/HWModal';
-import { formatInline } from '../../core/utils';
+import { formatInline, createBadge, sortAssets } from '../../core/utils';
 import { createIcons, RefreshCcw } from 'lucide';
 
 export function renderStorageList(container: HTMLElement) {
-  const fullList = state.masterData.storage;
+  const fullList = sortAssets(state.masterData.storage);
   
   const filterBar = document.createElement('div');
   filterBar.className = 'search-bar';
   const corps = Array.from(new Set(fullList.map(a => a.법인))).filter(Boolean).sort();
+  const orgUnits = Array.from(new Set(fullList.map(a => a.현사용조직))).filter(Boolean).sort();
 
   filterBar.innerHTML = `
     <div class="search-item flex-1">
-      <label>통합 검색 (자산코드/명칭/모델명)</label>
+      <label>통합 검색 (자산번호/조직/모델명)</label>
       <input type="text" id="filter-keyword" placeholder="검색어를 입력하세요..." autocomplete="off">
     </div>
     <div class="search-item">
-      <label>법인</label>
+      <label>구매법인</label>
       <select id="filter-corp"><option value="">전체 법인</option>${corps.map(c => `<option value="${c}">${c}</option>`).join('')}</select>
     </div>
+    <div class="search-item">
+      <label>현 사용조직</label>
+      <select id="filter-org-unit"><option value="">전체 조직</option>${orgUnits.map(o => `<option value="${o}">${o}</option>`).join('')}</select>
+    </div>
     <button id="btn-reset-filters" class="btn btn-outline btn-reset">
       <i data-lucide="refresh-ccw"></i> 필터 초기화
     </button>
@@ -28,7 +33,7 @@ export function renderStorageList(container: HTMLElement) {
   const tableWrapper = document.createElement('div');
   tableWrapper.className = 'table-container';
   const table = document.createElement('table');
-  table.innerHTML = `<thead><tr><th>No</th><th>법인</th><th>유형</th><th>자산코드</th><th>명칭</th><th>위치</th><th>모델명</th><th>용량</th><th>IP주소</th><th>구매일</th><th>관리</th></tr></thead><tbody id="dynamic-tbody"></tbody>`;
+  table.innerHTML = `<thead><tr><th>No</th><th>구매법인</th><th>현 사용조직</th><th>자산번호</th><th>용도</th><th>상세</th><th>설치위치</th><th>담당자</th><th>모델명</th><th>Storage</th><th>관리</th></tr></thead><tbody id="dynamic-tbody"></tbody>`;
   
   tableWrapper.appendChild(table);
   container.appendChild(tableWrapper);
@@ -37,14 +42,17 @@ export function renderStorageList(container: HTMLElement) {
   const updateTable = () => {
     const keywordInput = document.getElementById('filter-keyword') as HTMLInputElement;
     const corpSelect = document.getElementById('filter-corp') as HTMLSelectElement;
+    const orgSelect = document.getElementById('filter-org-unit') as HTMLSelectElement;
 
     const keyword = keywordInput ? keywordInput.value.toLowerCase().trim() : '';
     const corp = corpSelect ? corpSelect.value : '';
+    const orgUnit = orgSelect ? orgSelect.value : '';
 
     const filtered = fullList.filter(asset => {
-      const matchKeyword = !keyword || String(asset.자산코드||'').toLowerCase().includes(keyword) || String(asset.명칭||'').toLowerCase().includes(keyword) || String(asset.모델명||'').toLowerCase().includes(keyword);
+      const matchKeyword = !keyword || String(asset.자산코드||'').toLowerCase().includes(keyword) || String(asset.현사용조직||'').toLowerCase().includes(keyword) || String(asset.모델명||'').toLowerCase().includes(keyword);
       const matchCorp = !corp || asset.법인 === corp;
-      return matchKeyword && matchCorp;
+      const matchOrg = !orgUnit || asset.현사용조직 === orgUnit;
+      return matchKeyword && matchCorp && matchOrg;
     });
 
     tbody.innerHTML = '';
@@ -56,29 +64,38 @@ export function renderStorageList(container: HTMLElement) {
     filtered.forEach((asset, idx) => {
       const tr = document.createElement('tr');
       tr.style.cursor = 'pointer';
+      
+      const mainManager = asset.담당자_정 || asset.관리자 || '';
+      const subManager = asset.담당자_부 || '';
+      const managerHtml = [mainManager ? `${createBadge('정', '#1E5149')} ${mainManager}` : '', subManager ? `${createBadge('부', '#9CA3AF')} ${subManager}` : ''].filter(v => v !== '').join(' / ');
+      
+      const storage = [asset.SSD1, asset.SSD2, asset.용량].filter(v => v).join(' / ');
+
       tr.innerHTML = `
         <td>${idx+1}</td>
         <td>${asset.법인}</td>
-        <td>${asset.storage유형||''}</td>
+        <td>${asset.현사용조직||''}</td>
         <td>${asset.자산코드}</td>
-        <td>${formatInline(asset.명칭)}</td>
+        <td>${formatInline(asset.용도)}</td>
+        <td>${formatInline(asset.상세)}</td>
         <td>${formatInline(asset.위치)}</td>
-        <td>${formatInline(asset.모델명)}</td>
+        <td>${managerHtml}</td>
-        <td>${asset.용량||''}</td>
+        <td>${asset.모델명||''}</td>
-        <td>${asset.IP주소||''}</td>
+        <td>${formatInline(storage)}</td>
-        <td>${asset.구매일||''}</td>
         <td><button class="btn btn-outline btn-sm">수정</button></td>
       `;
-      tr.addEventListener('click', (e) => { if (!(e.target as HTMLElement).closest('button')) openStorageModal(asset); });
+      tr.addEventListener('click', (e) => { if (!(e.target as HTMLElement).closest('button')) openHwModal(asset, 'view'); });
       tbody.appendChild(tr);
     });
   };
 
   document.getElementById('filter-keyword')?.addEventListener('input', updateTable);
   document.getElementById('filter-corp')?.addEventListener('change', updateTable);
+  document.getElementById('filter-org-unit')?.addEventListener('change', updateTable);
   document.getElementById('btn-reset-filters')?.addEventListener('click', () => {
     (document.getElementById('filter-keyword') as HTMLInputElement).value = '';
     (document.getElementById('filter-corp') as HTMLSelectElement).value = '';
+    (document.getElementById('filter-org-unit') as HTMLSelectElement).value = '';
     updateTable();
   });
 

src/views/List/SwListView.ts

@@ -1,11 +1,14 @@
 import { state } from '../../core/state';
 import { openSwModal } from '../../components/Modal/SWModal';
 import { openSwUserModal } from '../../components/Modal/SWUserModal';
+import { sortAssets } from '../../core/utils';
+import { CORP_LIST } from '../../components/Modal/SharedData';
+import { generateOptionsHTML } from '../../components/Modal/ModalUtils';
 import { createIcons, Edit2, Users, RefreshCcw } from 'lucide';
 
 export function renderSwList(container: HTMLElement) {
   const isSub = state.activeSubTab === '구독SW';
-  const fullList = isSub ? state.masterData.subSw : state.masterData.permSw;
+  const fullList = sortAssets(isSub ? state.masterData.subSw : state.masterData.permSw);
   
   const filterBar = document.createElement('div');
   filterBar.className = 'search-bar';
@@ -25,11 +28,8 @@ export function renderSwList(container: HTMLElement) {
       </select>
     </div>
     <div class="search-item">
-      <label>법인</label>
+      <label>구매법인</label>
-      <select id="filter-corp">
+      <select id="filter-corp">${generateOptionsHTML(CORP_LIST, '', true)}</select>
-        <option value="">전체 법인</option>
-        <option value="한맥">한맥</option><option value="삼안">삼안</option><option value="바론">바론</option>
-      </select>
     </div>
     <button id="btn-reset-filters" class="btn btn-outline btn-reset">
       <i data-lucide="refresh-ccw"></i> 필터 초기화
@@ -46,7 +46,7 @@ export function renderSwList(container: HTMLElement) {
         <th style="text-align:center;">No.</th>
         <th style="text-align:center;">상태</th>
         <th style="text-align:center;">분야</th>
-        <th style="text-align:center;">법인</th>
+        <th style="text-align:center;">구매법인</th>
         <th style="text-align:center;">부서</th>
         <th style="text-align:center;">제품명</th>
         <th style="text-align:center;">구매일</th>
@@ -87,7 +87,7 @@ export function renderSwList(container: HTMLElement) {
     }
 
     filtered.forEach((asset, idx) => {
-      const assigned = state.masterData.swUsers.filter(u => u.swId === asset.id).length;
+      const assigned = state.masterData.swUsers.filter(u => u.sw_id === asset.id).length;
       const qty = typeof asset.수량 === 'number' ? asset.수량 : parseInt(asset.수량||'0', 10);
       const avail = qty - assigned;
       
@@ -100,22 +100,14 @@ export function renderSwList(container: HTMLElement) {
           const endDate = new Date(endDateStr);
           if (!isNaN(endDate.getTime())) {
             endDate.setHours(23, 59, 59, 999);
-            if (endDate < new Date()) {
+            if (endDate < new Date()) isExpired = true;
-              isExpired = true;
           }
         }
-        }
+        if (isExpired) statusHtml = `<span style="background: var(--danger, #ef4444); color: white; padding: 2px 6px; border-radius: 4px; font-size: 0.75rem; font-weight: bold; white-space: nowrap;">만료</span>`;
-        if (isExpired) {
+        else statusHtml = `<span style="background: var(--primary-color, #1E5149); color: white; padding: 2px 6px; border-radius: 4px; font-size: 0.75rem; font-weight: bold; white-space: nowrap;">사용중</span>`;
-          statusHtml = `<span style="background: var(--danger, #ef4444); color: white; padding: 2px 6px; border-radius: 4px; font-size: 0.75rem; font-weight: bold; white-space: nowrap;">만료</span>`;
       } else {
-          statusHtml = `<span style="background: var(--primary-color, #1E5149); color: white; padding: 2px 6px; border-radius: 4px; font-size: 0.75rem; font-weight: bold; white-space: nowrap;">사용중</span>`;
+        if (asset.유지보수여부) statusHtml = `<span style="background: #3b82f6; color: white; padding: 2px 6px; border-radius: 4px; font-size: 0.75rem; font-weight: bold; white-space: nowrap;">유효</span>`;
-        }
+        else statusHtml = `<span style="background: #6b7280; color: white; padding: 2px 6px; border-radius: 4px; font-size: 0.75rem; font-weight: bold; white-space: nowrap;">없음</span>`;
-      } else {
-        if (asset.유지보수여부) {
-          statusHtml = `<span style="background: #3b82f6; color: white; padding: 2px 6px; border-radius: 4px; font-size: 0.75rem; font-weight: bold; white-space: nowrap;">유효</span>`;
-        } else {
-          statusHtml = `<span style="background: #6b7280; color: white; padding: 2px 6px; border-radius: 4px; font-size: 0.75rem; font-weight: bold; white-space: nowrap;">없음</span>`;
-        }
       }
 
       const tr = document.createElement('tr');
@@ -144,7 +136,7 @@ export function renderSwList(container: HTMLElement) {
       tr.querySelector('.btn-users')?.addEventListener('click', (e) => { e.stopPropagation(); openSwUserModal(asset); });
       tbody.appendChild(tr);
     });
-    createIcons({ icons: { Edit2, Users } });
+    createIcons({ icons: { Edit2, Users, RefreshCcw } });
   };
 
   document.getElementById('filter-keyword')?.addEventListener('input', updateTable);