diff --git a/.env b/.env new file mode 100644 index 0000000..84f1df7 --- /dev/null +++ b/.env @@ -0,0 +1,6 @@ +DB_HOST=127.0.0.1 +DB_PORT=3306 +DB_USER=itam_admin +DB_PASS=itam1234 +DB_NAME=itam +PORT=3000 \ No newline at end of file diff --git a/PLAN_ASSET_HISTORY.md b/PLAN_ASSET_HISTORY.md new file mode 100644 index 0000000..a9f1065 --- /dev/null +++ b/PLAN_ASSET_HISTORY.md @@ -0,0 +1,60 @@ +# 자산 이력 누적 관리 시스템 (Cumulative Asset History System) 구현 계획 + +본 문서는 자산의 라이프사이클(조직, 사용자, 용도, 상태 변동)을 체계적으로 추적하고 누적 관리하기 위한 기술적 설계 및 단계별 구현 계획을 담고 있습니다. + +## 1. 목적 +- 자산 정보 수정 시 중요 변경 사항을 자동으로 감지하여 이력(Log)화 +- 과거부터 현재까지의 변동 사항을 타임라인 형태로 시각화하여 자산 흐름 파악 +- 데이터 정합성을 위해 서버 측에서 변경 전/후 스냅샷 비교 방식 채택 + +## 2. 관리 대상 이력 (Watch Fields) +다음 항목의 변경이 발생할 경우 이력을 자동 생성합니다. +1. **조직 변동**: `current_dept` (현 사용조직) ↔ `previous_dept` 업데이트 포함 +2. **사용자 변동**: `user_current` (현 사용자) ↔ `previous_user` 업데이트 포함 +3. **용도 변경**: `asset_type`, `current_role` (예: 개인PC -> 공용PC) +4. **상태 변경**: `hw_status` (예: 운영 -> 수리, 재고 -> 폐기 등) + +## 3. 기술 설계 (Technical Design) + +### A. 데이터베이스 (DB) +- **대상 테이블**: `asset_history` +- **컬럼 구조 활용 및 보완**: + - `asset_id`: 대상 자산 식별자 + - `event_type`: 변경 유형 (DEPT_CHANGE, USER_CHANGE, ROLE_CHANGE, STATUS_CHANGE) + - `details`: "상태 변경: 운영 -> 수리" 와 같이 읽기 쉬운 문자열 저장 + - `cost`: 관련 비용 발생 시 기록 (수리비 등) + - `log_user`: 변경을 수행한 작업자 + - `log_date`: 변경 발생 일시 + +### B. 백엔드 (Server-side Logic) +- **위치**: `server.js` 의 `POST /api/asset/:category/save` 엔드포인트 +- **동작 흐름**: + 1. **Snapshot**: 인서트/업데이트 수행 전, 기존 DB의 데이터를 `SELECT`하여 메모리에 저장. + 2. **Comparison**: 요청된 신규 데이터와 기존 데이터를 필드별로 대조. + 3. **Auto-logging**: 변경점이 발견되면 `asset_history` 테이블에 즉시 인서트. + 4. **Transaction**: 모든 로그 생성이 자산 저장과 하나의 트랜잭션으로 묶여야 함. + +### C. 프론트엔드 (UI/UX) +- **위치**: `HWModal.ts` 우측 `modal-history-area` +- **개선 사항**: + - `renderHistory()` 함수를 고도화하여 이벤트 타입별 아이콘/컬러 적용. + - "이전 값 ➔ 이후 값" 형태의 직관적인 레이아웃 도입. + - 스크롤을 통한 무제한 누적 이력 조회 지원. + +## 4. 단계별 구현 로직 + +### 1단계: 서버 로직 고도화 +- `server.js`에 비교 함수(`compareAndLog`) 구현. +- 각 자산 카테고리별 저장 로직에 비교 로직 삽입. + +### 2단계: DB 데이터 마이그레이션 (필요시) +- 기존 자산의 `current_dept` 등을 `previous_dept`로 밀어내는 로직 점검. + +### 3단계: UI 타임라인 렌더링 개선 +- `modal.css`에 이력 전용 스타일(이벤트 뱃지 등) 추가. +- `HWModal.ts`에서 최신 로그를 실시간으로 다시 불러오는 로직 확인. + +## 5. 검증 계획 +- **자동 감지 테스트**: 상태 변경 후 저장 시 우측 이력에 즉시 한 줄이 추가되는지 확인. +- **다중 변경 테스트**: 조직과 사용자를 동시에 변경했을 때 두 개의 로그가 생성되는지 확인. +- **데이터 무결성**: 수정을 취소하거나 저장 실패 시 로그가 남지 않는지(Transaction) 확인. diff --git a/backup_db.js b/backup_db.js new file mode 100644 index 0000000..2687b14 --- /dev/null +++ b/backup_db.js @@ -0,0 +1,59 @@ +import mysql from 'mysql2/promise'; +import dotenv from 'dotenv'; +import * as xlsx from 'xlsx'; +import fs from 'fs'; + +dotenv.config(); + +const { DB_HOST, DB_USER, DB_PASS, DB_NAME, DB_PORT } = process.env; + +async function backup() { + const connection = await mysql.createConnection({ + host: DB_HOST, + user: DB_USER, + password: DB_PASS, + database: DB_NAME, + port: parseInt(DB_PORT || '3306') + }); + + console.log('🚀 Starting Database Backup Process...'); + + const tables = [ + 'asset_pc', 'asset_server', 'asset_storage', 'asset_remote', + 'asset_equipment', 'asset_office_supplies', 'asset_survey', 'asset_vip' + ]; + + const wb = xlsx.utils.book_new(); + + for (const table of tables) { + try { + // 1. Create table backup + await connection.query(`DROP TABLE IF EXISTS ${table}_backup`); + await connection.query(`CREATE TABLE ${table}_backup AS SELECT * FROM ${table}`); + console.log(`✅ Table backup created: ${table} -> ${table}_backup`); + + // 2. Fetch data for Excel + const [rows] = await connection.query(`SELECT * FROM ${table}`); + if (rows.length > 0) { + const ws = xlsx.utils.json_to_sheet(rows); + // Sheet names max length is 31 chars + const sheetName = table.substring(0, 31); + xlsx.utils.book_append_sheet(wb, ws, sheetName); + } + } catch (e) { + console.warn(`⚠️ Skipped ${table}: ${e.message}`); + } + } + + // 3. Write Excel file + const fileName = 'backupDB_20260608.xlsx'; + xlsx.writeFile(wb, fileName); + console.log(`✅ Excel data exported successfully to ${fileName}`); + + await connection.end(); +} + +backup().catch(err => { + console.error('❌ Backup Failed:', err); + process.exit(1); +}); diff --git a/check_logs.js b/check_logs.js new file mode 100644 index 0000000..d14cdb7 --- /dev/null +++ b/check_logs.js @@ -0,0 +1,28 @@ +import mysql from 'mysql2/promise'; +import dotenv from 'dotenv'; + +dotenv.config(); + +const { DB_HOST, DB_USER, DB_PASS, DB_NAME, DB_PORT } = process.env; + +async function checkRecentLogs() { + const connection = await mysql.createConnection({ + host: DB_HOST, + user: DB_USER, + password: DB_PASS, + database: DB_NAME, + port: parseInt(DB_PORT || '3306') + }); + + console.log('--- Recent History Logs ---'); + const [rows] = await connection.query('SELECT * FROM asset_history ORDER BY created_at DESC LIMIT 5'); + console.log(JSON.stringify(rows, null, 2)); + + console.log('\n--- Recent Core Data (to check current_dept) ---'); + const [coreRows] = await connection.query('SELECT id, asset_code, current_dept, previous_dept FROM asset_core ORDER BY updated_at DESC LIMIT 5'); + console.log(JSON.stringify(coreRows, null, 2)); + + await connection.end(); +} + +checkRecentLogs().catch(console.error); diff --git a/check_network.js b/check_network.js new file mode 100644 index 0000000..85228d4 --- /dev/null +++ b/check_network.js @@ -0,0 +1,29 @@ +import mysql from 'mysql2/promise'; +import dotenv from 'dotenv'; + +dotenv.config(); + +const { DB_HOST, DB_USER, DB_PASS, DB_NAME, DB_PORT } = process.env; + +async function checkRemote() { + const connection = await mysql.createConnection({ + host: DB_HOST, + user: DB_USER, + password: DB_PASS, + database: DB_NAME, + port: parseInt(DB_PORT || '3306') + }); + + console.log('--- Checking asset_remote table ---'); + + const [columns] = await connection.query('DESCRIBE asset_remote'); + const cols = columns.map(c => c.Field); + console.log('Columns in asset_remote:', cols.join(', ')); + + const [count] = await connection.query('SELECT COUNT(*) as count FROM asset_remote WHERE remote_tool IS NOT NULL OR remote_id IS NOT NULL'); + console.log(`Rows with remote info (tool or id): ${count[0].count}`); + + await connection.end(); +} + +checkRemote().catch(console.error); diff --git a/drop_legacy.js b/drop_legacy.js new file mode 100644 index 0000000..c4b6ad5 --- /dev/null +++ b/drop_legacy.js @@ -0,0 +1,44 @@ +import mysql from 'mysql2/promise'; +import dotenv from 'dotenv'; + +dotenv.config(); + +const { DB_HOST, DB_USER, DB_PASS, DB_NAME, DB_PORT } = process.env; + +async function dropLegacyTables() { + const connection = await mysql.createConnection({ + host: DB_HOST, + user: DB_USER, + password: DB_PASS, + database: DB_NAME, + port: parseInt(DB_PORT || '3306') + }); + + console.log('🧹 Starting cleanup of obsolete legacy backup tables...'); + + const tablesToDrop = [ + 'asset_pc', 'asset_pc_backup', + 'asset_server', 'asset_server_backup', + 'asset_storage', 'asset_storage_backup', + 'asset_remote_backup', // IMPORTANT: DO NOT drop asset_remote! + 'asset_equipment', 'asset_equipment_backup', + 'asset_office_supplies', 'asset_office_supplies_backup', + 'asset_survey', 'asset_survey_backup', + 'asset_vip', 'asset_vip_backup', + 'asset_pc_parts' + ]; + + for (const table of tablesToDrop) { + try { + await connection.query(`DROP TABLE IF EXISTS ${table}`); + console.log(`✅ Dropped table: ${table}`); + } catch (err) { + console.warn(`⚠️ Failed to drop table ${table}: ${err.message}`); + } + } + + console.log('🎉 Cleanup complete. Database is now lean and mean.'); + await connection.end(); +} + +dropLegacyTables().catch(console.error); diff --git a/migrate_schema.js b/migrate_schema.js new file mode 100644 index 0000000..4cd295c --- /dev/null +++ b/migrate_schema.js @@ -0,0 +1,197 @@ +import mysql from 'mysql2/promise'; +import dotenv from 'dotenv'; + +dotenv.config(); + +const { DB_HOST, DB_USER, DB_PASS, DB_NAME, DB_PORT } = process.env; + +async function migrateSchema() { + const connection = await mysql.createConnection({ + host: DB_HOST, + user: DB_USER, + password: DB_PASS, + database: DB_NAME, + port: parseInt(DB_PORT || '3306') + }); + + console.log('🚀 Phase 1: Creating Normalized Tables & Migrating Data...'); + + try { + await connection.query('SET FOREIGN_KEY_CHECKS = 0'); + + // --- 1. Drop existing new tables if they exist --- + await connection.query('DROP TABLE IF EXISTS asset_core, asset_hardware, asset_location, asset_remote'); + + // --- 2. Create New Schema --- + await connection.query(` + CREATE TABLE asset_core ( + id VARCHAR(50) PRIMARY KEY, + asset_code VARCHAR(100) UNIQUE NOT NULL, + category VARCHAR(100), + asset_type VARCHAR(100), + asset_purpose VARCHAR(255), + service_type VARCHAR(50), + purchase_corp VARCHAR(100), + purchase_date VARCHAR(50), + purchase_amount VARCHAR(100), + purchase_vendor VARCHAR(255), + approval_document VARCHAR(255), + memo TEXT, + manager_primary VARCHAR(100), + manager_secondary VARCHAR(100), + current_dept VARCHAR(255), + previous_dept VARCHAR(255), + user_current VARCHAR(100), + previous_user VARCHAR(100), + emp_no VARCHAR(20), + user_position VARCHAR(50), + created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP, + updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP + ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4; + `); + + await connection.query(` + CREATE TABLE asset_hardware ( + id INT AUTO_INCREMENT PRIMARY KEY, + asset_id VARCHAR(50) NOT NULL, + hw_status VARCHAR(50), + model_name VARCHAR(255), + mainboard VARCHAR(255), + os VARCHAR(100), + cpu VARCHAR(255), + ram VARCHAR(100), + gpu VARCHAR(100), + storage1 VARCHAR(255), + storage2 VARCHAR(255), + storage3 VARCHAR(255), + monitoring VARCHAR(100), + price VARCHAR(100), + volume VARCHAR(100), + monitor_inch VARCHAR(50), + serial_num VARCHAR(100), + FOREIGN KEY (asset_id) REFERENCES asset_core(id) ON DELETE CASCADE + ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4; + `); + + await connection.query(` + CREATE TABLE asset_location ( + id INT AUTO_INCREMENT PRIMARY KEY, + asset_id VARCHAR(50) NOT NULL, + location VARCHAR(255), + location_detail VARCHAR(255), + location_photo VARCHAR(255), + loc_x VARCHAR(20), + loc_y VARCHAR(20), + is_active BOOLEAN DEFAULT TRUE, + created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP, + FOREIGN KEY (asset_id) REFERENCES asset_core(id) ON DELETE CASCADE + ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4; + `); + + await connection.query(` + CREATE TABLE asset_remote ( + id INT AUTO_INCREMENT PRIMARY KEY, + asset_id VARCHAR(50) NOT NULL, + ip_address VARCHAR(100), + mac_address VARCHAR(100), + remote_tool VARCHAR(100), + remote_id VARCHAR(100), + remote_pw VARCHAR(100), + is_active BOOLEAN DEFAULT TRUE, + created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP, + FOREIGN KEY (asset_id) REFERENCES asset_core(id) ON DELETE CASCADE + ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4; + `); + + await connection.query('SET FOREIGN_KEY_CHECKS = 1'); + console.log('✅ Normalized tables created.'); + + // --- 3. Migrate Data from Legacy Tables --- + const legacyTables = ['asset_pc', 'asset_server', 'asset_storage', 'asset_remote', 'asset_equipment', 'asset_office_supplies', 'asset_survey', 'asset_vip']; + + let totalMigrated = 0; + + for (const table of legacyTables) { + try { + const [rows] = await connection.query(`SELECT * FROM ${table}`); + + for (const row of rows) { + // 3.1 Insert into asset_core + await connection.query(` + INSERT IGNORE INTO asset_core ( + id, asset_code, category, asset_type, asset_purpose, service_type, purchase_corp, purchase_date, + purchase_amount, purchase_vendor, approval_document, memo, manager_primary, manager_secondary, + current_dept, previous_dept, user_current, previous_user, emp_no, user_position, created_at + ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?) + `, [ + row.id, row.asset_code, row.category, row.asset_type, row.asset_purpose, row.service_type, + row.purchase_corp, row.purchase_date, row.purchase_amount, row.purchase_vendor, row.approval_document, + row.memo, row.manager_primary, row.manager_secondary, row.current_dept, row.previous_dept, + row.user_current, row.previous_user, row.emp_no, row.user_position, row.created_at + ]); + + // 3.2 Insert into asset_hardware (if hardware fields exist) + if (row.model_name || row.cpu || row.ram || row.hw_status) { + await connection.query(` + INSERT INTO asset_hardware ( + asset_id, hw_status, model_name, mainboard, os, cpu, ram, gpu, storage1, storage2, storage3, monitoring, price, volume, monitor_inch, serial_num + ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?) + `, [ + row.id, row.hw_status, row.model_name, row.mainboard, row.os, row.cpu, row.ram, row.gpu, + row.ssd_1 || row.hdd_1, row.ssd_2 || row.hdd_2, row.hdd_3, row.monitoring, row.price, + row.volume, row.monitor_inch, row.serial_num + ]); + } + + // 3.3 Insert into asset_location (if location fields exist) + if (row.location || row.location_detail) { + await connection.query(` + INSERT INTO asset_location ( + asset_id, location, location_detail, location_photo, loc_x, loc_y + ) VALUES (?, ?, ?, ?, ?, ?) + `, [ + row.id, row.location, row.location_detail, row.location_photo, row.loc_x, row.loc_y + ]); + } + + // 3.4 Insert into asset_remote (if network fields exist) + // Handle primary network interface + if (row.ip_address || row.mac_address || row.remote_tool) { + await connection.query(` + INSERT INTO asset_remote ( + asset_id, ip_address, mac_address, remote_tool, remote_id, remote_pw + ) VALUES (?, ?, ?, ?, ?, ?) + `, [ + row.id, row.ip_address, row.mac_address, row.remote_tool, row.remote_id, row.remote_pw + ]); + } + + // Handle secondary network interface (e.g., from server table) if it exists + if (row.ip_address_2 || row.remote_tool_2) { + await connection.query(` + INSERT INTO asset_remote ( + asset_id, ip_address, remote_tool, remote_id, remote_pw + ) VALUES (?, ?, ?, ?, ?) + `, [ + row.id, row.ip_address_2, row.remote_tool_2, row.remote_id_2, row.remote_pw_2 + ]); + } + + totalMigrated++; + } + console.log(`- Migrated ${rows.length} records from ${table}`); + } catch (err) { + console.warn(`- Skipping legacy table ${table}: ${err.message}`); + } + } + + console.log(`✅ Phase 1 Data Migration Completed. Total Assets Migrated: ${totalMigrated}`); + + } catch (err) { + console.error('❌ Migration Failed:', err); + } finally { + await connection.end(); + } +} + +migrateSchema(); diff --git a/migrate_v2_final.js b/migrate_v2_final.js new file mode 100644 index 0000000..53f0c5f --- /dev/null +++ b/migrate_v2_final.js @@ -0,0 +1,212 @@ +import mysql from 'mysql2/promise'; +import dotenv from 'dotenv'; + +dotenv.config(); + +const { DB_HOST, DB_USER, DB_PASS, DB_NAME, DB_PORT } = process.env; + +async function migrateV2() { + const connection = await mysql.createConnection({ + host: DB_HOST, + user: DB_USER, + password: DB_PASS, + database: DB_NAME, + port: parseInt(DB_PORT || '3306') + }); + + console.log('🚀 Phase 2: Final Migration to Normalized V2 Schema...'); + + try { + await connection.query('SET FOREIGN_KEY_CHECKS = 0'); + + // 1. Create/Enhance Core Tables + console.log('1. Creating/Enhancing Tables...'); + + await connection.query('DROP TABLE IF EXISTS asset_core, asset_hardware, asset_location, asset_remote'); + + await connection.query(` + CREATE TABLE asset_core ( + id VARCHAR(50) PRIMARY KEY, + asset_code VARCHAR(100) UNIQUE NOT NULL, + category VARCHAR(100), + asset_type VARCHAR(100), + current_role VARCHAR(50) DEFAULT 'Normal' COMMENT 'Normal, Server, Personal, etc.', + asset_purpose VARCHAR(255), + service_type VARCHAR(50), + purchase_corp VARCHAR(100), + purchase_date VARCHAR(50), + purchase_amount VARCHAR(100), + purchase_vendor VARCHAR(255), + approval_document VARCHAR(255), + memo TEXT, + manager_primary VARCHAR(100), + manager_secondary VARCHAR(100), + current_dept VARCHAR(255), + previous_dept VARCHAR(255), + user_current VARCHAR(100), + previous_user VARCHAR(100), + emp_no VARCHAR(20), + user_position VARCHAR(50), + created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP, + updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP + ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4; + `); + + await connection.query(` + CREATE TABLE asset_hardware ( + id INT AUTO_INCREMENT PRIMARY KEY, + asset_id VARCHAR(50) NOT NULL, + hw_status VARCHAR(50), + model_name VARCHAR(255), + mainboard VARCHAR(255), + os VARCHAR(100), + cpu VARCHAR(255), + ram VARCHAR(100), + gpu VARCHAR(100), + storage1 VARCHAR(255), + storage2 VARCHAR(255), + storage3 VARCHAR(255), + storage4 VARCHAR(255), + monitoring VARCHAR(100), + price VARCHAR(100), + volume VARCHAR(100), + monitor_inch VARCHAR(50), + serial_num VARCHAR(100), + FOREIGN KEY (asset_id) REFERENCES asset_core(id) ON DELETE CASCADE + ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4; + `); + + await connection.query(` + CREATE TABLE asset_location ( + id INT AUTO_INCREMENT PRIMARY KEY, + asset_id VARCHAR(50) NOT NULL, + location VARCHAR(255), + location_detail VARCHAR(255), + location_photo VARCHAR(255), + loc_x VARCHAR(20), + loc_y VARCHAR(20), + is_active TINYINT(1) DEFAULT 1, + deactivated_at DATETIME NULL, + created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP, + FOREIGN KEY (asset_id) REFERENCES asset_core(id) ON DELETE CASCADE + ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4; + `); + + await connection.query(` + CREATE TABLE asset_remote ( + id INT AUTO_INCREMENT PRIMARY KEY, + asset_id VARCHAR(50) NOT NULL, + ip_address VARCHAR(100), + mac_address VARCHAR(100), + remote_tool VARCHAR(100), + remote_id VARCHAR(100), + remote_pw VARCHAR(100), + is_active TINYINT(1) DEFAULT 1, + deactivated_at DATETIME NULL, + created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP, + FOREIGN KEY (asset_id) REFERENCES asset_core(id) ON DELETE CASCADE + ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4; + `); + + console.log('✅ V2 Schema tables created.'); + + // 2. Migration Logic + const legacyTables = [ + { name: 'asset_pc', defaultRole: 'Personal' }, + { name: 'asset_server', defaultRole: 'Server' }, + { name: 'asset_storage', defaultRole: 'Normal' }, + { name: 'asset_equipment', defaultRole: 'Normal' }, + { name: 'asset_office_supplies', defaultRole: 'Normal' }, + { name: 'asset_survey', defaultRole: 'Normal' }, + { name: 'asset_vip', defaultRole: 'Normal' }, + { name: 'asset_pc_parts', defaultRole: 'Normal' } + ]; + + let totalMigrated = 0; + + for (const tableInfo of legacyTables) { + const table = tableInfo.name; + try { + const [rows] = await connection.query(`SELECT * FROM ${table}`); + console.log(`- Migrating ${rows.length} records from ${table}...`); + + for (const row of rows) { + // 2.1 Insert into asset_core + const role = (table === 'asset_pc' && row.asset_type === '서버PC') ? 'Server' : tableInfo.defaultRole; + + await connection.query(` + INSERT IGNORE INTO asset_core ( + id, asset_code, category, asset_type, current_role, asset_purpose, service_type, purchase_corp, purchase_date, + purchase_amount, purchase_vendor, approval_document, memo, manager_primary, manager_secondary, + current_dept, previous_dept, user_current, previous_user, emp_no, user_position, created_at + ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?) + `, [ + row.id, row.asset_code, row.category, row.asset_type, role, row.asset_purpose, row.service_type, + row.purchase_corp, row.purchase_date, row.purchase_amount, row.purchase_vendor, row.approval_document, + row.memo, row.manager_primary, row.manager_secondary, row.current_dept, row.previous_dept, + row.user_current || row.current_user, row.previous_user, row.emp_no, row.user_position, row.created_at + ]); + + // 2.2 Insert into asset_hardware + await connection.query(` + INSERT INTO asset_hardware ( + asset_id, hw_status, model_name, mainboard, os, cpu, ram, gpu, storage1, storage2, storage3, storage4, monitoring, price, volume, monitor_inch, serial_num + ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?) + `, [ + row.id, row.hw_status, row.model_name, row.mainboard, row.os, row.cpu, row.ram, row.gpu, + row.ssd_1 || row.storage1, row.ssd_2 || row.storage2, row.hdd_1 || row.storage3, row.hdd_2, row.monitoring, row.price, + row.volume, row.monitor_inch, row.serial_num + ]); + + // 2.3 Insert into asset_location + if (row.location || row.location_detail) { + await connection.query(` + INSERT INTO asset_location ( + asset_id, location, location_detail, location_photo, loc_x, loc_y, is_active + ) VALUES (?, ?, ?, ?, ?, ?, 1) + `, [ + row.id, row.location, row.location_detail, row.location_photo, row.loc_x, row.loc_y + ]); + } + + // 2.4 Insert into asset_remote + // Primary Network + if (row.ip_address || row.mac_address || row.remote_tool) { + await connection.query(` + INSERT INTO asset_remote ( + asset_id, ip_address, mac_address, remote_tool, remote_id, remote_pw, is_active + ) VALUES (?, ?, ?, ?, ?, ?, 1) + `, [ + row.id, row.ip_address, row.mac_address, row.remote_tool, row.remote_id, row.remote_pw + ]); + } + + // Secondary Network (for servers) + if (row.ip_address_2 || row.remote_tool_2) { + await connection.query(` + INSERT INTO asset_remote ( + asset_id, ip_address, remote_tool, remote_id, remote_pw, is_active + ) VALUES (?, ?, ?, ?, ?, 1) + `, [ + row.id, row.ip_address_2, row.remote_tool_2, row.remote_id_2, row.remote_pw_2 + ]); + } + + totalMigrated++; + } + } catch (err) { + console.warn(`- Skipping table ${table}: ${err.message}`); + } + } + + await connection.query('SET FOREIGN_KEY_CHECKS = 1'); + console.log(`✅ Phase 2 Data Migration Completed. Total Assets Migrated: ${totalMigrated}`); + + } catch (err) { + console.error('❌ Migration Failed:', err); + } finally { + await connection.end(); + } +} + +migrateV2(); diff --git a/migrate_v4_network.js b/migrate_v4_network.js new file mode 100644 index 0000000..e61dbb8 --- /dev/null +++ b/migrate_v4_network.js @@ -0,0 +1,73 @@ +import mysql from 'mysql2/promise'; +import dotenv from 'dotenv'; + +dotenv.config(); + +const pool = mysql.createPool({ + host: process.env.DB_HOST, + user: process.env.DB_USER, + password: process.env.DB_PASS, + database: process.env.DB_NAME, + port: parseInt(process.env.DB_PORT || '3306'), +}); + +async function migrate() { + const conn = await pool.getConnection(); + try { + console.log('1. Creating asset_remote_v4 table...'); + await conn.query(` + CREATE TABLE IF NOT EXISTS asset_remote_v4 ( + id INT AUTO_INCREMENT PRIMARY KEY, + asset_id VARCHAR(50) NOT NULL, + net_type VARCHAR(20) NOT NULL, /* 'IP' or 'REMOTE' */ + net_name VARCHAR(100), /* e.g., '기본망', 'AnyDesk' */ + net_value1 VARCHAR(100), /* IP or ID */ + net_value2 VARCHAR(100), /* MAC or PW */ + is_active TINYINT(1) DEFAULT 1, + deactivated_at DATETIME NULL, + created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP, + FOREIGN KEY (asset_id) REFERENCES asset_core(id) ON DELETE CASCADE + ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4; + `); + + console.log('2. Migrating data from asset_remote...'); + const [oldRows] = await conn.query('SELECT * FROM asset_remote WHERE is_active = 1'); + + let ipCount = 0; + let remoteCount = 0; + + for (const row of oldRows) { + // Migrating IP/MAC + if (row.ip_address || row.mac_address) { + await conn.query( + 'INSERT INTO asset_remote_v4 (asset_id, net_type, net_name, net_value1, net_value2, created_at) VALUES (?, ?, ?, ?, ?, ?)', + [row.asset_id, 'IP', '기본망', row.ip_address, row.mac_address, row.created_at] + ); + ipCount++; + } + // Migrating Remote + if (row.remote_tool || row.remote_id || row.remote_pw) { + await conn.query( + 'INSERT INTO asset_remote_v4 (asset_id, net_type, net_name, net_value1, net_value2, created_at) VALUES (?, ?, ?, ?, ?, ?)', + [row.asset_id, 'REMOTE', row.remote_tool, row.remote_id, row.remote_pw, row.created_at] + ); + remoteCount++; + } + } + + console.log(`Migrated ${ipCount} IP records and ${remoteCount} Remote records.`); + + console.log('3. Renaming tables...'); + await conn.query('DROP TABLE IF EXISTS asset_remote_legacy'); + await conn.query('RENAME TABLE asset_remote TO asset_remote_legacy, asset_remote_v4 TO asset_remote;'); + + console.log('✅ Migration V4 (Remote) Complete.'); + } catch (e) { + console.error('Migration failed:', e); + } finally { + conn.release(); + pool.end(); + } +} + +migrate(); \ No newline at end of file diff --git a/migrate_v5_rename_remote.js b/migrate_v5_rename_remote.js new file mode 100644 index 0000000..2902006 --- /dev/null +++ b/migrate_v5_rename_remote.js @@ -0,0 +1,28 @@ +import mysql from 'mysql2/promise'; +import dotenv from 'dotenv'; + +dotenv.config(); + +const pool = mysql.createPool({ + host: process.env.DB_HOST, + user: process.env.DB_USER, + password: process.env.DB_PASS, + database: process.env.DB_NAME, + port: parseInt(process.env.DB_PORT || '3306'), +}); + +async function migrate() { + const conn = await pool.getConnection(); + try { + console.log('1. Renaming asset_network to asset_remote...'); + await conn.query('RENAME TABLE asset_network TO asset_remote'); + console.log('✅ Table renamed successfully.'); + } catch (e) { + console.error('Migration failed:', e); + } finally { + conn.release(); + pool.end(); + } +} + +migrate(); diff --git a/probe_db.js b/probe_db.js new file mode 100644 index 0000000..777b08f --- /dev/null +++ b/probe_db.js @@ -0,0 +1,36 @@ +import mysql from 'mysql2/promise'; +import dotenv from 'dotenv'; + +dotenv.config(); + +const { DB_HOST, DB_USER, DB_PASS, DB_NAME, DB_PORT } = process.env; + +async function probeDB() { + const connection = await mysql.createConnection({ + host: DB_HOST, + user: DB_USER, + password: DB_PASS, + database: DB_NAME, + port: parseInt(DB_PORT || '3306') + }); + + console.log('--- Database Probe Start ---'); + + const [tables] = await connection.query('SHOW TABLES'); + const tableNames = tables.map(t => Object.values(t)[0]); + + console.log('Existing Tables:', tableNames); + + for (const table of tableNames) { + const [columns] = await connection.query(`DESCRIBE ${table}`); + console.log(`\n[Table: ${table}]`); + columns.forEach(c => { + console.log(` - ${c.Field} (${c.Type}) ${c.Comment ? '// ' + c.Comment : ''}`); + }); + } + + await connection.end(); + console.log('\n--- Database Probe End ---'); +} + +probeDB().catch(console.error); diff --git a/server.js b/server.js index eaf8c23..c19e733 100644 --- a/server.js +++ b/server.js @@ -4,7 +4,7 @@ import cors from 'cors'; import dotenv from 'dotenv'; import fs from 'fs'; -dotenv.config(); +dotenv.config({ override: true }); const app = express(); app.use(cors()); @@ -39,7 +39,7 @@ const CATEGORY_TABLE_MAP = { pc: 'asset_pc', server: 'asset_server', storage: 'asset_storage', - network: 'asset_network', + network: 'asset_remote', equipment: 'asset_equipment', officeSupplies: 'asset_office_supplies', survey: 'asset_survey', @@ -53,7 +53,7 @@ const CATEGORY_TABLE_MAP = { }; const ASSET_TABLES = [ - 'asset_pc', 'asset_server', 'asset_storage', 'asset_network', + 'asset_pc', 'asset_server', 'asset_storage', 'asset_remote', 'asset_equipment', 'asset_office_supplies', 'asset_survey', 'asset_vip' ]; @@ -116,7 +116,10 @@ app.get('/api/assets/master', async (req, res) => { s.hw_status, s.model_name, s.mainboard, s.os, s.cpu, s.ram, s.gpu, s.monitoring, s.price, s.monitor_inch, s.serial_num, l.location, l.location_detail, l.location_photo, l.loc_x, l.loc_y, - n.ip_address, n.mac_address, n.remote_tool, n.remote_id, n.remote_pw, + ( + SELECT JSON_ARRAYAGG(JSON_OBJECT('type', net_type, 'name', net_name, 'val1', net_value1, 'val2', net_value2)) + FROM asset_remote WHERE asset_id = c.id AND is_active = 1 + ) as remotes, ( SELECT JSON_ARRAYAGG(JSON_OBJECT('type', disk_type, 'capacity', capacity, 'unit', unit, 'slot', slot_no)) FROM asset_volume WHERE asset_id = c.id @@ -128,11 +131,6 @@ app.get('/api/assets/master', async (req, res) => { WHERE asset_id = c.id AND is_active = 1 ORDER BY created_at DESC LIMIT 1 ) - LEFT JOIN asset_network n ON n.id = ( - SELECT id FROM asset_network - WHERE asset_id = c.id AND is_active = 1 - ORDER BY created_at DESC LIMIT 1 - ) `); const catMap = { @@ -173,6 +171,86 @@ app.post('/api/asset/:category/save', async (req, res) => { connection = await pool.getConnection(); await connection.beginTransaction(); + // 3.0 History Tracking & Auto Field Update + const [oldCoreRows] = await connection.query('SELECT * FROM asset_core WHERE id = ?', [asset.id]); + const [oldSpecRows] = await connection.query('SELECT * FROM asset_spec WHERE asset_id = ?', [asset.id]); + const oldCore = oldCoreRows[0] || {}; + const oldSpec = oldSpecRows[0] || {}; + + console.log(`🔍 [History Check] ID: ${asset.id}`); + console.log(` - Dept: [${oldCore.current_dept}] -> [${asset.current_dept}]`); + console.log(` - User: [${oldCore.user_current}] -> [${asset.user_current}]`); + + const historyLogs = []; + const logDate = new Date().toISOString().split('T')[0]; // YYYY-MM-DD + const logUser = '관리자'; + + // 조직 변동 감지 (null/undefined/empty string 세이프 처리) + const oldDept = oldCore.current_dept || ''; + const newDept = asset.current_dept || ''; + if (newDept !== '' && oldDept !== newDept) { + asset.previous_dept = oldDept; + historyLogs.push({ + event_type: 'DEPT_CHANGE', + old_dept: oldDept || null, + new_dept: newDept, + details: `[조직 변동] ${oldDept || '(없음)'} -> ${newDept}` + }); + } + + // 사용자 변동 감지 + const oldUser = oldCore.user_current || ''; + const newUser = asset.user_current || ''; + if (newUser !== '' && oldUser !== newUser) { + asset.previous_user = oldUser; + historyLogs.push({ + event_type: 'USER_CHANGE', + old_user: oldUser || null, + new_user: newUser, + details: `[사용자 변동] ${oldUser || '(없음)'} -> ${newUser}` + }); + } + + // 유형/용도 변경 감지 + const oldType = oldCore.asset_type || ''; + const newType = asset.asset_type || ''; + if (newType !== '' && oldType !== newType) { + historyLogs.push({ + event_type: 'ROLE_CHANGE', + details: `[유형 변경] ${oldType || '(없음)'} -> ${newType}` + }); + } + + const oldRole = oldCore.current_role || ''; + const newRole = asset.current_role || ''; + if (newRole !== '' && oldRole !== newRole) { + historyLogs.push({ + event_type: 'ROLE_CHANGE', + details: `[용도 변경] ${oldRole || '(없음)'} -> ${newRole}` + }); + } + + // 상태 변경 감지 + const oldStatus = oldSpec.hw_status || ''; + const newStatus = asset.hw_status || ''; + if (newStatus !== '' && oldStatus !== newStatus) { + historyLogs.push({ + event_type: 'STATUS_CHANGE', + details: `[상태 변경] ${oldStatus || '(없음)'} -> ${newStatus}` + }); + } + + console.log(` - Logs Generated: ${historyLogs.length}`); + + // 로그 일괄 삽입 + for (const log of historyLogs) { + await connection.query( + `INSERT INTO asset_history (asset_id, event_type, old_dept, new_dept, old_user, new_user, details, log_date, log_user) + VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)`, + [asset.id, log.event_type, log.old_dept || null, log.new_dept || null, log.old_user || null, log.new_user || null, log.details, logDate, logUser] + ); + } + // 3.1 asset_core const coreFields = ['id', 'asset_code', 'category', 'asset_type', 'current_role', 'asset_purpose', 'service_type', 'purchase_corp', 'purchase_date', 'purchase_amount', 'purchase_vendor', 'approval_document', 'memo', 'manager_primary', 'manager_secondary', 'current_dept', 'previous_dept', 'user_current', 'previous_user', 'emp_no', 'user_position']; const coreData = {}; @@ -224,14 +302,36 @@ app.post('/api/asset/:category/save', async (req, res) => { } } - // 3.5 asset_network - if (asset.ip_address || asset.mac_address || asset.remote_tool) { - const [netActive] = await connection.query('SELECT * FROM asset_network WHERE asset_id = ? AND is_active = 1', [asset.id]); - const isChanged = netActive.length === 0 || netActive[0].ip_address !== asset.ip_address || netActive[0].mac_address !== asset.mac_address || netActive[0].remote_tool !== asset.remote_tool || netActive[0].remote_id !== asset.remote_id || netActive[0].remote_pw !== asset.remote_pw; - if (isChanged) { - await connection.query('UPDATE asset_network SET is_active = 0, deactivated_at = NOW() WHERE asset_id = ? AND is_active = 1', [asset.id]); - await connection.query(`INSERT INTO asset_network (asset_id, ip_address, mac_address, remote_tool, remote_id, remote_pw, is_active) VALUES (?, ?, ?, ?, ?, ?, 1)`, - [asset.id, asset.ip_address, asset.mac_address, asset.remote_tool, asset.remote_id, asset.remote_pw]); + // 3.5 asset_remote (Dynamic Array Logic) + if (asset.remotes) { + try { + let nets = typeof asset.remotes === 'string' ? JSON.parse(asset.remotes) : asset.remotes; + if (Array.isArray(nets)) { + await connection.query('UPDATE asset_remote SET is_active = 0, deactivated_at = NOW() WHERE asset_id = ? AND is_active = 1', [asset.id]); + for (const n of nets) { + if (n.type) { + await connection.query( + 'INSERT INTO asset_remote (asset_id, net_type, net_name, net_value1, net_value2, is_active) VALUES (?, ?, ?, ?, ?, 1)', + [asset.id, n.type, n.name || '', n.val1 || '', n.val2 || ''] + ); + } + } + } + } catch(e) { console.error('Remote data parse error', e); } + } else { + // Fallback for UI that hasn't sent the networks array yet + if (asset.ip_address || asset.mac_address || asset.remote_tool) { + const [netActive] = await connection.query('SELECT * FROM asset_remote WHERE asset_id = ? AND is_active = 1', [asset.id]); + const isChanged = netActive.length === 0 || netActive[0].net_value1 !== asset.ip_address || netActive[0].net_value2 !== asset.mac_address || netActive[0].net_name !== asset.remote_tool; + if (isChanged) { + await connection.query('UPDATE asset_remote SET is_active = 0, deactivated_at = NOW() WHERE asset_id = ? AND is_active = 1', [asset.id]); + if (asset.ip_address || asset.mac_address) { + await connection.query('INSERT INTO asset_remote (asset_id, net_type, net_name, net_value1, net_value2, is_active) VALUES (?, ?, ?, ?, ?, 1)', [asset.id, 'IP', '기본망', asset.ip_address, asset.mac_address]); + } + if (asset.remote_tool || asset.remote_id || asset.remote_pw) { + await connection.query('INSERT INTO asset_remote (asset_id, net_type, net_name, net_value1, net_value2, is_active) VALUES (?, ?, ?, ?, ?, 1)', [asset.id, 'REMOTE', asset.remote_tool, asset.remote_id, asset.remote_pw]); + } + } } } @@ -338,7 +438,7 @@ app.delete('/api/asset/:category/:id', async (req, res) => { try { const connection = await pool.getConnection(); - // For asset_core, ON DELETE CASCADE will handle spec, location, network, volume + // For asset_core, ON DELETE CASCADE will handle spec, location, remote, volume await connection.query(`DELETE FROM ${table} WHERE id = ?`, [id]); connection.release(); console.log(`🗑️ [ASSET DELETE] Category: ${category}, ID: ${id}`); diff --git a/src/components/Modal/BaseModal.ts b/src/components/Modal/BaseModal.ts index bbf6efb..09645ea 100644 --- a/src/components/Modal/BaseModal.ts +++ b/src/components/Modal/BaseModal.ts @@ -55,6 +55,9 @@ export abstract class BaseModal { this.currentAsset = asset; this.isEditMode = (mode === 'add' || mode === 'edit'); + // 폼 초기화 추가 + if (this.formEl) this.formEl.reset(); + this.setEditLockMode(mode); this.fillFormData(asset); diff --git a/src/components/Modal/HWModal.ts b/src/components/Modal/HWModal.ts index 9cd7916..42fb2f2 100644 --- a/src/components/Modal/HWModal.ts +++ b/src/components/Modal/HWModal.ts @@ -35,8 +35,9 @@ class HwAssetModal extends BaseModal {
+ - +
기본 관리 정보
@@ -66,6 +67,17 @@ class HwAssetModal extends BaseModal {
+
+ + +
+
+ + +
${generateOptionsHTML(ORG_LIST)}
-
+
+
+ + +
@@ -92,17 +108,13 @@ class HwAssetModal extends BaseModal {
-
- - -
- -
시스템 사양 및 네트워크
+ +
시스템 사양 정보
@@ -135,58 +147,33 @@ class HwAssetModal extends BaseModal {
+
+ + +
- + +
디스크(용량) 정보
- - + +
-
- - -
-
- - -
-
- - -
-
- - -
-
- - + +
네트워크 및 원격 접속 정보
+
+
+ + +
+
- -
원격 접속 정보
-
- - -
-
- - -
-
- - -
-
- - -
- - +
설치 위치
@@ -202,7 +189,7 @@ class HwAssetModal extends BaseModal {
- +
구매 및 증빙 정보
@@ -325,15 +312,16 @@ class HwAssetModal extends BaseModal { }); revertBtn.addEventListener('click', () => { + this.isEditMode = false; this.setEditLockMode('view'); if (this.currentAsset) this.fillFormData(this.currentAsset); this.updateMapButtonVisibility(); this.toggleEditOnlyBtns(false); }); - // 동적 볼륨 추가 기능 연결 - const btnAddVolume = document.getElementById('btn-add-volume')!; - btnAddVolume.addEventListener('click', () => this.addVolumeRow()); + // 동적 기능 이벤트 연결 + document.getElementById('btn-add-volume')?.addEventListener('click', () => this.addVolumeRow()); + document.getElementById('btn-add-remote-info')?.addEventListener('click', () => this.addRemoteInfoRow()); const fileInput = document.getElementById('hw-approval_document_file') as HTMLInputElement; const fileNameDisplay = document.getElementById('hw-file-name-display'); @@ -374,7 +362,7 @@ class HwAssetModal extends BaseModal { return; } - // 동적 볼륨 데이터 수집 및 배열 생성 + // 동적 볼륨 데이터 수집 const vols: any[] = []; document.querySelectorAll('#hw-volume-container .volume-row').forEach((row, idx) => { const type = (row.querySelector('.vol-type') as HTMLSelectElement).value; @@ -384,6 +372,24 @@ class HwAssetModal extends BaseModal { }); setFieldValue('hw-volumes-data', JSON.stringify(vols)); + // 동적 네트워크/원격 데이터 수집 + const nets: any[] = []; + document.querySelectorAll('#hw-remote-info-container .remote-info-row').forEach(row => { + const type = (row.querySelector('.ri-type') as HTMLSelectElement).value; + const val1 = (row.querySelector('.ri-val1') as HTMLInputElement).value; + + if (type === 'IP' && val1) { + const tool = (row.querySelector('.ri-tool') as HTMLSelectElement)?.value || ''; + const id = (row.querySelector('.ri-id') as HTMLInputElement)?.value || ''; + const pw = (row.querySelector('.ri-pw') as HTMLInputElement)?.value || ''; + const val2Str = (id || pw) ? JSON.stringify({ id, pw }) : ''; + nets.push({ type: 'IP', name: tool, val1: val1, val2: val2Str }); + } else if (type === 'MAC' && val1) { + nets.push({ type: 'MAC', name: 'MAC 주소', val1: val1, val2: '' }); + } + }); + setFieldValue('hw-remotes-data', JSON.stringify(nets)); + const formData = new FormData(this.formEl!); const updated = { ...this.currentAsset }; formData.forEach((value, key) => { if (key !== 'id') updated[key] = value; }); @@ -399,15 +405,10 @@ class HwAssetModal extends BaseModal { private addVolumeRow(vol: any = { type: 'SSD', capacity: '', unit: 'GB' }) { const container = document.getElementById('hw-volume-container'); if (!container) return; - const row = document.createElement('div'); - row.style.display = 'flex'; - row.style.gap = '8px'; - row.style.alignItems = 'center'; row.className = 'volume-row'; - + row.style.display = 'flex'; row.style.gap = '8px'; row.style.alignItems = 'center'; const inputStyle = 'height: 38px !important; box-sizing: border-box !important; font-size: 13px; margin: 0; padding: 0 8px;'; - row.innerHTML = ` - - + + `; + row.querySelector('.btn-remove-row')?.addEventListener('click', () => row.remove()); + container.appendChild(row); + } + + private addRemoteInfoRow(info: any = { type: 'IP', name: '원격접속', val1: '', val2: '' }) { + const container = document.getElementById('hw-remote-info-container'); + if (!container) return; + + // Parse val2 (which contains JSON with id and pw if type is IP) + let parsedId = ''; + let parsedPw = ''; + if (info.type === 'IP' && info.val2) { + try { + const parsed = typeof info.val2 === 'string' ? JSON.parse(info.val2) : info.val2; + parsedId = parsed.id || ''; + parsedPw = parsed.pw || ''; + } catch (e) { + // Legacy fallback if val2 was just a simple string + parsedId = info.val2; + } + } + + const row = document.createElement('div'); + row.className = 'remote-info-row'; + + // First Line: Type & Address + const line1 = document.createElement('div'); + line1.className = 'ri-line'; + line1.innerHTML = ` + + + `; - row.querySelector('.btn-remove-vol')?.addEventListener('click', () => row.remove()); + // Second Line: Tool & Credentials (Only for IP) + const line2 = document.createElement('div'); + line2.className = 'ri-line ri-cred-line'; + line2.style.display = info.type === 'IP' ? 'flex' : 'none'; + line2.innerHTML = ` +
+ + + +
+ `; + + row.appendChild(line1); + row.appendChild(line2); + + // Toggle logic + const typeSelect = row.querySelector('.ri-type') as HTMLSelectElement; + typeSelect.addEventListener('change', (e) => { + const isIP = (e.target as HTMLSelectElement).value === 'IP'; + line2.style.display = isIP ? 'flex' : 'none'; + if (!isIP) { + (row.querySelector('.ri-id') as HTMLInputElement).value = ''; + (row.querySelector('.ri-pw') as HTMLInputElement).value = ''; + } + }); + + row.querySelector('.btn-remove-row')?.addEventListener('click', () => row.remove()); container.appendChild(row); } private toggleEditOnlyBtns(isEdit: boolean) { - const addBtn = document.getElementById('btn-add-volume'); - if (addBtn) addBtn.style.display = isEdit ? 'inline-flex' : 'none'; + ['btn-add-volume', 'btn-add-remote-info'].forEach(id => { + const btn = document.getElementById(id); + if (btn) btn.style.display = isEdit ? 'inline-flex' : 'none'; + }); document.querySelectorAll('.edit-only-btn').forEach(btn => { (btn as HTMLElement).style.display = isEdit ? 'inline-flex' : 'none'; }); + + // 동적 생성된 필드들 (볼륨/원격정보)의 상태 일괄 토글 + const containers = ['#hw-volume-container', '#hw-remote-info-container']; + containers.forEach(selector => { + document.querySelectorAll(`${selector} input`).forEach(input => { + if (isEdit) input.removeAttribute('readonly'); + else input.setAttribute('readonly', 'true'); + }); + document.querySelectorAll(`${selector} select`).forEach(select => { + if (isEdit) select.removeAttribute('disabled'); + else select.setAttribute('disabled', 'true'); + }); + }); } protected fillFormData(asset: any): void { @@ -444,6 +526,8 @@ class HwAssetModal extends BaseModal { if (typeSelect) typeSelect.innerHTML = types.length > 0 ? generateOptionsHTML(types, asset.asset_type, true) : ''; setFieldValue('hw-asset_type', asset.asset_type || ''); setFieldValue('hw-hw_status', asset.hw_status || '운영'); + setFieldValue('hw-service_type', asset.service_type || '외부'); + setFieldValue('hw-asset_purpose', asset.asset_purpose || ''); setFieldValue('hw-current_dept', asset.current_dept || ''); setFieldValue('hw-manager_primary', asset.manager_primary || ''); setFieldValue('hw-manager_secondary', asset.manager_secondary || ''); @@ -458,23 +542,40 @@ class HwAssetModal extends BaseModal { setFieldValue('hw-gpu', asset.gpu || ''); setFieldValue('hw-mainboard', asset.mainboard || ''); - // 동적 볼륨 렌더링 초기화 및 생성 + // 동적 볼륨 렌더링 const volumeContainer = document.getElementById('hw-volume-container'); - if (volumeContainer) { - volumeContainer.innerHTML = ''; - let vols = []; + if (volumeContainer) volumeContainer.innerHTML = ''; + let vols = []; + try { vols = asset.volumes ? (typeof asset.volumes === 'string' ? JSON.parse(asset.volumes) : asset.volumes) : []; } catch(e) {} + vols.forEach((v: any) => this.addVolumeRow(v)); + + // 통합 원격 접속 정보 렌더링 초기화 및 생성 + const remoteInfoContainer = document.getElementById('hw-remote-info-container'); + if (remoteInfoContainer) { + remoteInfoContainer.innerHTML = ''; + let nets = []; try { - vols = asset.volumes ? (typeof asset.volumes === 'string' ? JSON.parse(asset.volumes) : asset.volumes) : []; + nets = asset.remotes ? (typeof asset.remotes === 'string' ? JSON.parse(asset.remotes) : asset.remotes) : []; } catch(e) {} - vols.forEach((v: any) => this.addVolumeRow(v)); + + // Fallback: 서버에서 배열을 안 줬지만 기존 평탄화 데이터가 있는 경우 + if (nets.length === 0 && (asset.ip_address || asset.mac_address || asset.remote_tool || asset.remote_id)) { + if (asset.ip_address) { + const tool = asset.remote_tool || '원격접속'; + const creds = (asset.remote_id || asset.remote_pw) ? JSON.stringify({ id: asset.remote_id || '', pw: asset.remote_pw || '' }) : ''; + nets.push({ type: 'IP', name: tool, val1: asset.ip_address, val2: creds }); + } + if (asset.mac_address) { + nets.push({ type: 'MAC', name: 'MAC 주소', val1: asset.mac_address, val2: '' }); + } + if (!asset.ip_address && (asset.remote_tool || asset.remote_id)) { + const creds = JSON.stringify({ id: asset.remote_id || '', pw: asset.remote_pw || '' }); + nets.push({ type: 'IP', name: asset.remote_tool || '기타', val1: '', val2: creds }); + } + } + nets.forEach((n: any) => this.addRemoteInfoRow(n)); } - setFieldValue('hw-ip_address', asset.ip_address || ''); - setFieldValue('hw-ip_address_2', asset.ip_address_2 || ''); - setFieldValue('hw-mac_address', asset.mac_address || ''); - setFieldValue('hw-remote_tool', asset.remote_tool || ''); - setFieldValue('hw-remote_id', asset.remote_id || ''); - setFieldValue('hw-remote_pw', asset.remote_pw || ''); setFieldValue('hw-monitoring', asset.monitoring || '비대상'); setFieldValue('hw-serial_num', asset.serial_num || ''); setFieldValue('hw-monitor_inch', asset.monitor_inch || ''); @@ -484,6 +585,7 @@ class HwAssetModal extends BaseModal { setFieldValue('hw-purchase_vendor', asset.purchase_vendor || ''); setFieldValue('hw-purchase_amount', asset.purchase_amount || ''); setFieldValue('hw-approval_document', asset.approval_document || ''); + const docName = document.getElementById('hw-file-name-display'); if (docName) docName.textContent = asset.approval_document ? asset.approval_document.split('/').pop() : '파일 선택...'; const fileLinkContainer = document.getElementById('hw-file-link-container'); @@ -492,6 +594,7 @@ class HwAssetModal extends BaseModal { } else if (fileLinkContainer) { fileLinkContainer.innerHTML = ''; } + setFieldValue('hw-memo', asset.memo || ''); setFieldValue('hw-location_detail', asset.location_detail || ''); setFieldValue('hw-loc_x', asset.loc_x || ''); @@ -520,32 +623,18 @@ class HwAssetModal extends BaseModal { const category = (document.getElementById('hw-category') as HTMLSelectElement)?.value || ''; const type = (document.getElementById('hw-asset_type') as HTMLSelectElement)?.value || ''; - // 인프라 장비 (서버, 저장매체, 네트워크, 보안장비, 공간정보장비, 서버PC) const infraCategories = ['서버', '저장매체', '네트워크', '보안장비', '공간정보장비']; const isInfra = infraCategories.includes(category) || type.includes('서버') || type.includes('저장시스템'); - - // 개인 장비 (PC, 노트북, 모바일, 태블릿) - '서버PC'는 제외 const personalCategories = ['PC', '노트북', '모바일', '태블릿']; const isPersonal = (personalCategories.includes(category) || type.includes('개인PC') || type.includes('노트북')) && !type.includes('서버PC'); - - // 시스템 사양 (PC, 서버 등) const specCategories = ['PC', '서버', '노트북', '스토리지', '워크스테이션']; const hasSpec = specCategories.includes(category) || type.includes('서버PC'); - - // 네트워크 정보 (IP/MAC) const noNetCategories = ['저장매체', '네트워크', '공간정보장비', 'PC부품', '사무가구']; const showNet = (isInfra || isPersonal) && !noNetCategories.includes(category); - - // 시리얼 번호 const hasSN = !['사무가구', 'PC부품'].includes(category); - - // 수량/용량 전용 (부품) const isParts = ['PC부품', '사무가구'].includes(category); - - // 원격 접속 (서버 전용) const showRemote = category === '서버' || type.includes('서버'); - // JS에서 display: block 강제 대신 빈 문자열 할당하여 네이티브 CSS flex 활용 document.querySelectorAll('.remote-section, .remote-field, .monitoring-field').forEach(el => (el as HTMLElement).style.display = showRemote ? '' : 'none'); document.querySelectorAll('.net-only').forEach(el => (el as HTMLElement).style.display = showNet ? '' : 'none'); document.querySelectorAll('.spec-only').forEach(el => (el as HTMLElement).style.display = hasSpec ? '' : 'none'); @@ -658,9 +747,51 @@ class HwAssetModal extends BaseModal { private renderHistory(assetId: string) { const container = document.getElementById('hw-history-list'); if (!container) return; - const logs = (state.masterData.logs || []).filter(l => l.assetId === assetId); - if (logs.length === 0) { container.innerHTML = '
이력이 없습니다.
'; return; } - container.innerHTML = logs.map(l => `
${l.date}
${l.user}
${l.details}
`).join(''); + + // state.masterData.logs에서 해당 자산의 이력 필터링 (최신순) + const logs = (state.masterData.logs || []) + .filter(l => l.asset_id === assetId) + .sort((a, b) => new Date(b.created_at || b.log_date).getTime() - new Date(a.created_at || a.log_date).getTime()); + + if (logs.length === 0) { + container.innerHTML = '
기록된 변동 이력이 없습니다.
'; + return; + } + + container.innerHTML = logs.map(l => { + let eventTag = '기타'; + let tagClass = 'tag-default'; + let itemClass = ''; + + switch(l.event_type) { + case 'DEPT_CHANGE': + eventTag = '조직'; tagClass = 'tag-dept'; itemClass = 'evt-dept'; + break; + case 'USER_CHANGE': + eventTag = '사용자'; tagClass = 'tag-user'; itemClass = 'evt-user'; + break; + case 'ROLE_CHANGE': + eventTag = '용도'; tagClass = 'tag-role'; itemClass = 'evt-role'; + break; + case 'STATUS_CHANGE': + eventTag = '상태'; tagClass = 'tag-status'; itemClass = 'evt-status'; + break; + } + + // 화살표 기호(➔)를 사용하여 변경 사항 강조 + const formattedDetails = (l.details || '').replace(' -> ', ' ➔ '); + + return ` +
+
+ ${eventTag} + ${l.log_date || ''} +
+ ${l.log_user || '시스템'} +
${formattedDetails}
+
+ `; + }).join(''); } private getCategoryKey(asset: any): string { diff --git a/src/core/schema.ts b/src/core/schema.ts index ba4ed39..67c6126 100644 --- a/src/core/schema.ts +++ b/src/core/schema.ts @@ -17,6 +17,7 @@ export const ASSET_SCHEMA = { PURCHASE_AMOUNT:{ key: 'purchase_amount', db: 'purchase_amount', ui: '구매금액' }, PURCHASE_VENDOR:{ key: 'purchase_vendor', db: 'purchase_vendor', ui: '구매업체' }, APPROVAL_DOC: { key: 'approval_document', db: 'approval_document', ui: '품의서' }, + SERVICE_TYPE: { key: 'service_type', db: 'service_type', ui: '서비스 구분' }, MANAGER_MAIN: { key: 'manager_primary', db: 'manager_primary', ui: '담당자(정)' }, MANAGER_SUB: { key: 'manager_secondary', db: 'manager_secondary', ui: '담당자(부)' }, LOCATION: { key: 'location', db: 'location', ui: '자산위치' }, diff --git a/src/core/state.ts b/src/core/state.ts index ced6c95..1a9ffcd 100644 --- a/src/core/state.ts +++ b/src/core/state.ts @@ -37,6 +37,7 @@ export interface MasterAssetData { export interface AppState { activeCategory: 'dashboard' | 'hw' | 'sw' | 'ops' | 'vip' | 'fac' | 'users' | 'etc'; activeSubTab: string; + viewMode: 'location' | 'legacy' | 'list'; masterData: MasterAssetData; activeCharts: any[]; currentUserRole: 'admin' | 'user'; @@ -46,6 +47,7 @@ export interface AppState { export const state: AppState = { activeCategory: 'hw', activeSubTab: '대시보드', + viewMode: 'location', activeCharts: [], currentUserRole: 'user', masterData: { diff --git a/src/core/utils.ts b/src/core/utils.ts index 030b2d1..469fce2 100644 --- a/src/core/utils.ts +++ b/src/core/utils.ts @@ -1,6 +1,6 @@ import { PAGE_DESCRIPTIONS } from './schema'; -export const API_BASE_URL = `http://${location.hostname}:3000`; +export const API_BASE_URL = ''; /** * ITAM 공통 유틸리티 함수 diff --git a/src/main.ts b/src/main.ts index 900d4c6..3529ebd 100644 --- a/src/main.ts +++ b/src/main.ts @@ -2,6 +2,7 @@ import { state, loadMasterDataFromDB, saveAsset } from './core/state'; import { renderNavigation } from './components/Navigation'; import { renderDashboard } from './views/DashboardView'; import { renderSWTable } from './views/SW_Table'; +import { renderLocationView } from './views/LocationView'; import { initBaseModal } from './components/Modal/BaseModal'; import { initHwModal, openHwModal } from './components/Modal/HWModal'; import { initSwModal, openSwModal } from './components/Modal/SWModal'; @@ -12,52 +13,48 @@ import { initGuide } from './components/Guide'; import { pcFlowModal } from './components/Modal/PCFlowModal'; import { createIcons, Plus, X, LayoutDashboard, Monitor, Server, Database, Laptop, CalendarClock, Key, Cpu, Layers, Users, Paperclip, Edit2, History, RefreshCcw, BookOpen, Settings } from 'lucide'; -async function apiBatchSave(url: string, data: any[], label: string) { - try { - const response = await fetch(url, { - method: 'POST', - headers: { 'Content-Type': 'application/json' }, - body: JSON.stringify(data) - }); - if (!response.ok) throw new Error(`${label} DB 저장 실패`); - console.log(`✅ ${label} DB 저장 완료`); - } catch (err) { - console.error(`❌ ${label} DB 저장 오류:`, err); - alert(`${label} 저장 중 오류가 발생했습니다: ${(err as any).message}`); - } -} - -const savePcToDB = () => apiBatchSave(`http://${location.hostname}:3000/api/pc/batch`, state.masterData.pc, '개인PC'); -const saveServerToDB = () => apiBatchSave(`http://${location.hostname}:3000/api/server/batch`, state.masterData.server, '서버'); -const saveStorageToDB = () => apiBatchSave(`http://${location.hostname}:3000/api/storage/batch`, state.masterData.storage, '스토리지'); -const saveNetworkToDB = () => apiBatchSave(`http://${location.hostname}:3000/api/network/batch`, state.masterData.network, '네트워크'); -const saveEquipToDB = () => apiBatchSave(`http://${location.hostname}:3000/api/equipment/batch`, state.masterData.equipment, '업무지원장비'); -const saveSwInternalToDB = () => apiBatchSave(`http://${location.hostname}:3000/api/swInternal/batch`, state.masterData.swInternal, '내부SW'); -const saveSwExternalToDB = () => apiBatchSave(`http://${location.hostname}:3000/api/swExternal/batch`, state.masterData.swExternal, '외부SW'); -const saveCloudToDB = () => apiBatchSave(`http://${location.hostname}:3000/api/cloud/batch`, state.masterData.cloud, '클라우드'); -const saveSwUsersToDB = () => apiBatchSave(`http://${location.hostname}:3000/api/swUsers/batch`, state.masterData.swUsers, 'SW사용자'); -const saveLogsToDB = () => apiBatchSave(`http://${location.hostname}:3000/api/logs/batch`, state.masterData.logs, '자산 로그'); -const saveUsersToDB = () => apiBatchSave(`http://${location.hostname}:3000/api/users/batch`, state.masterData.users, '사용자마스터'); // 화면 갱신 통합 핸들러 function refreshView() { const mainContent = document.getElementById('main-content')!; if (!mainContent) return; + + // 서버 탭이 아닐 경우 '자산현황(위치)' 뷰 진입 방지 및 강제 리스트 모드 전환 + if (state.activeSubTab !== '서버' && state.viewMode === 'location') { + state.viewMode = 'list'; + } + + const isServerTab = state.activeSubTab === '서버'; - if (state.activeSubTab === '대시보드') { - renderDashboard(mainContent); + mainContent.innerHTML = ` +
+
+ + +
+
+
+ `; + + // 이벤트 바인딩 + mainContent.querySelectorAll('.mode-toggle-btn').forEach(btn => { + btn.addEventListener('click', () => { + const mode = (btn as HTMLElement).getAttribute('data-mode') as any; + state.viewMode = mode; + refreshView(); + }); + }); + + const viewBody = document.getElementById('view-body')!; + if (state.viewMode === 'location') { + renderLocationView(viewBody); } else { - renderSWTable(mainContent); + renderSWTable(viewBody); // 리스트 형식 } } -// 통합 저장 및 갱신 -async function saveAllDataToDB() { - await Promise.all([ - savePcToDB(), saveServerToDB(), saveStorageToDB(), saveNetworkToDB(), - saveEquipToDB(), saveSwInternalToDB(), saveSwExternalToDB(), - saveCloudToDB(), saveSwUsersToDB(), saveLogsToDB(), saveUsersToDB() - ]); +// 통합 갱신 (저장은 이미 개별 모달에서 처리됨) +async function refreshAllData() { await loadMasterDataFromDB(); refreshView(); } @@ -71,21 +68,15 @@ function initApp() { try { renderNavigation((tab) => { - if (tab === '대시보드') { - renderDashboard(mainContent); - } else { - renderSWTable(mainContent); - } + refreshView(); }); - initHwModal(() => saveAllDataToDB(), closeAllModals); - initSwModal(() => saveAllDataToDB(), closeAllModals); + initHwModal(() => refreshAllData(), closeAllModals); + initSwModal(() => refreshAllData(), closeAllModals); initSwUserModal(() => { - saveSwUsersToDB().then(() => { loadMasterDataFromDB().then(() => refreshView()); - }); }, closeAllModals); - initDomainModal(() => saveAllDataToDB(), closeAllModals); + initDomainModal(() => refreshAllData(), closeAllModals); initDashboardDetailModal(); initGuide(); diff --git a/src/styles/dashboard.css b/src/styles/dashboard.css index 838964b..c13ef87 100644 --- a/src/styles/dashboard.css +++ b/src/styles/dashboard.css @@ -170,6 +170,26 @@ cursor: not-allowed; } +.page-info { + font-size: 0.75rem; + color: var(--text-muted); + font-weight: 600; +} + +.page-btns button { + padding: 0.3rem 0.75rem; + border: 1px solid var(--border-color); + background: var(--white); + border-radius: 4px; + font-size: 0.75rem; + cursor: pointer; +} + +.page-btns button:disabled { + opacity: 0.5; + cursor: not-allowed; +} + .slider-indicator { font-weight: 700; color: var(--text-muted); @@ -198,3 +218,305 @@ flex-direction: column; box-sizing: border-box; } + +/* --- Location View Styles --- */ +.location-layout { + display: grid; + grid-template-columns: 1.2fr 1fr; + gap: 2rem; + height: calc(100vh - 180px); +} + +.map-section, .asset-section { + display: flex; + flex-direction: column; +} + +.section-title { + font-size: 1.125rem; + font-weight: 700; + margin-bottom: 1rem; + color: var(--text-main); + display: flex; + align-items: center; +} + +.map-wrapper { + flex: 1; + background: #f8fafc; + box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05); +} + +.location-box { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); + user-select: none; +} + +.location-box:hover { + background: rgba(30, 81, 73, 0.2) !important; + transform: scale(1.02); + z-index: 10; +} + +.location-box:active { + transform: scale(0.98); +} + +.asset-section .table-container { + flex: 1; + overflow-y: auto; +} + +.status-tag { + display: inline-block; + padding: 0.25rem 0.625rem; + border-radius: 9999px; + font-size: 0.75rem; + font-weight: 600; + background: #ecfdf5; + color: #059669; + border: 1px solid #d1fae5; +} + +.view-toggle-btn:hover { + border-color: var(--primary-color) !important; + color: var(--primary-color) !important; +} + +.view-toggle-btn.active:hover { + color: white !important; +} + +/* --- View Toggle Header --- */ +.view-header { + padding: 0.5rem 1.5rem; + background: var(--white); + border-bottom: 1px solid var(--border-color); + display: flex; + align-items: center; + justify-content: flex-start; + gap: 1rem; +} + +.view-toggle-container { + display: flex; + background: #f1f5f9; + padding: 0.25rem; + border-radius: 8px; + gap: 0.25rem; +} + +.mode-toggle-btn { + padding: 0.5rem 1rem; + border: none; + background: transparent; + border-radius: 6px; + font-size: 0.8125rem; + font-weight: 600; + color: var(--text-muted); + cursor: pointer; + transition: all 0.2s ease; +} + +.mode-toggle-btn:hover { + color: var(--text-main); +} + +.mode-toggle-btn.active { + background: var(--white); + color: var(--primary-color); + box-shadow: 0 1px 3px rgba(0,0,0,0.1); +} + +/* --- Enhanced Location View --- */ +.location-view-wrapper { + display: flex; + flex-direction: column; + height: calc(100vh - 120px); +} + +.location-filter-bar { + padding: 1rem 1.5rem; + background: var(--white); + border-bottom: 1px solid var(--border-color); + display: flex; + align-items: center; + gap: 2rem; +} + +.filter-group { + display: flex; + align-items: center; + gap: 0.75rem; +} + +.filter-group label { + font-size: 0.8125rem; + font-weight: 700; + color: var(--text-main); +} + +.filter-group select { + padding: 0.4rem 0.75rem; + border: 1px solid var(--border-color); + border-radius: 6px; + font-size: 0.8125rem; + color: var(--text-main); + background: var(--white); + min-width: 140px; +} + +.map-pagination { + margin-left: auto; + display: flex; + align-items: center; + gap: 1rem; +} + +.location-main-content { + flex: 1; + display: grid; + grid-template-columns: 1.4fr 1fr; + gap: 1.5rem; + padding: 1.5rem; + overflow: hidden; +} + +.map-container-section { + display: flex; + flex-direction: column; + overflow: auto; +} + +.location-box-point { + display: flex; + align-items: center; + justify-content: center; + transition: all 0.2s ease; +} + +.box-label-text { + font-size: 0.65rem; + font-weight: 800; + color: var(--primary-color); + pointer-events: none; + text-shadow: 0 0 2px white; +} + +.asset-list-section { + background: var(--white); + border-radius: 12px; + border: 1px solid var(--border-color); + display: flex; + flex-direction: column; + overflow: hidden; +} + +.asset-list-section .section-header { + padding: 1rem 1.25rem; + border-bottom: 1px solid var(--border-color); + background: #f8fafc; +} + +.asset-list-section h4 { + margin: 0; + font-size: 0.9375rem; + color: var(--text-main); +} + +.mini-table-wrapper { + flex: 1; + overflow-y: auto; +} + +.compact-table { + width: 100%; + border-collapse: collapse; +} + +.compact-table th { + position: sticky; + top: 0; + background: var(--white); + padding: 0.75rem 1rem; + text-align: left; + font-size: 0.75rem; + font-weight: 700; + color: var(--text-muted); + border-bottom: 1px solid var(--border-color); +} + +.compact-table td { + padding: 0.75rem 1rem; + font-size: 0.8125rem; + border-bottom: 1px solid #f1f5f9; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 150px; +} + +.compact-table tr.clickable-row:hover { + background: #f1f5f9; + cursor: pointer; +} + +/* --- Asset Detail Sidebar (LocationView) --- */ +.asset-detail-sidebar { + padding-top: 1rem; + background: var(--white); + height: 100%; + overflow-y: auto; +} + +.detail-section { + margin-bottom: 20px; + padding: 0 1.25rem; +} + +.detail-section-title { + font-size: 13px; + font-weight: 700; + color: var(--primary-color); + border-bottom: 1px solid var(--border-color); + padding-bottom: 6px; + margin-bottom: 12px; +} + +.detail-grid { + display: grid; + grid-template-columns: repeat(2, minmax(80px, auto) 1fr); + gap: 8px 16px; +} + +.detail-label { + font-size: 12px; + color: var(--text-muted); + font-weight: 600; + display: flex; + align-items: center; +} + +.detail-value { + font-size: 14px; + color: var(--text-main); + font-weight: 500; + word-break: break-all; + display: flex; + align-items: center; +} + +.detail-header-actions { + display: flex; + align-items: center; + gap: 8px; + width: 100%; +} + +.detail-header-title { + flex: 1; + font-size: 0.95rem; + font-weight: 700; +>>>>>>> origin/main +} diff --git a/src/styles/modal.css b/src/styles/modal.css index 7caa832..02dcf28 100644 --- a/src/styles/modal.css +++ b/src/styles/modal.css @@ -379,16 +379,21 @@ flex: 1; overflow-y: auto; max-height: 500px; - padding-right: 0.5rem; + padding-right: 8px; + margin-top: 8px; } .history-item { position: relative; - padding-left: 1.25rem; - padding-bottom: 1.5rem; + padding-left: 20px; + padding-bottom: 20px; border-left: 2px solid var(--border-color); } +.history-item:last-child { + border-left: 2px solid transparent; +} + .history-item::before { content: ''; position: absolute; @@ -399,34 +404,68 @@ border-radius: 50%; background-color: var(--white); border: 2px solid var(--primary-color); + z-index: 1; } -.history-item:last-child { - border-left: 2px solid transparent; +/* Event Specific Markers */ +.history-item.evt-dept::before { border-color: #3b82f6; } +.history-item.evt-user::before { border-color: #8b5cf6; } +.history-item.evt-role::before { border-color: #10b981; } +.history-item.evt-status::before { border-color: #f59e0b; } + +.history-header-row { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 4px; } .history-date { - font-size: 1.05rem; + font-size: 11px; color: var(--text-muted); font-weight: 500; - margin-bottom: 0.25rem; } +.history-tag { + font-size: 10px; + font-weight: 700; + padding: 2px 6px; + border-radius: 10px; + text-transform: uppercase; +} + +.tag-dept { background: #eff6ff; color: #3b82f6; } +.tag-user { background: #f5f3ff; color: #8b5cf6; } +.tag-role { background: #ecfdf5; color: #10b981; } +.tag-status { background: #fffbeb; color: #f59e0b; } +.tag-default { background: #f3f4f6; color: #6b7280; } + .history-user { - font-size: 1.05rem; + font-size: 11px; font-weight: 600; - color: var(--primary-color); - margin-bottom: 0.25rem; + color: var(--text-main); + margin-bottom: 6px; + display: block; } .history-details { - font-size: 1.1rem; + font-size: 12.5px; color: var(--text-main); - line-height: 1.4; - white-space: pre-wrap; + line-height: 1.5; + background: #f8fafc; + padding: 8px 10px; + border-radius: 6px; + border: 1px solid #f1f5f9; word-break: break-all; } +.history-arrow { + display: inline-block; + margin: 0 4px; + color: var(--text-muted); + font-weight: 400; +} + .empty-history { padding: 2rem 0; text-align: center; @@ -691,3 +730,100 @@ .location-detail-container select { flex: 1; } + +/* Dynamic Remote Info Row */ +.remote-info-row { + display: flex; + flex-direction: column; + gap: 8px; + padding: 8px 0; + border-bottom: 1px dashed var(--border-color); +} + +.remote-info-row:last-child { + border-bottom: none; +} + +.ri-line { + display: flex; + gap: 8px; + align-items: center; +} + +.ri-line select, +.ri-line input { + height: 38px; + box-sizing: border-box; + font-size: 13px; + padding: 0 10px; + border: 1px solid var(--border-color); + border-radius: 4px; + outline: none; + background-color: var(--white); + color: var(--text-main); + transition: border-color 0.2s; +} + +.ri-line select:disabled, +.ri-line input[readonly] { + background-color: var(--bg-muted); + border-color: transparent; + cursor: default; +} + +.ri-line select:focus, +.ri-line input:focus { + border-color: var(--primary-color); + box-shadow: 0 0 0 2px rgba(30, 81, 73, 0.1); +} + +.ri-type, .ri-tool { + width: 110px; + flex-shrink: 0; +} + +.ri-val1, .ri-id, .ri-pw { + flex: 1; + min-width: 0; +} + +.ri-remove-btn { + height: 38px; + width: 38px; + padding: 0; + color: #E11D48; + border: 1px solid #E11D48; + background: transparent; + border-radius: 4px; + cursor: pointer; + flex-shrink: 0; + display: inline-flex; + align-items: center; + justify-content: center; + font-size: 18px; + transition: all 0.2s; +} + +.ri-remove-btn:hover { + background-color: #FFF1F2; +} + +.ri-spacer { + width: 46px; /* 38px btn + 8px gap */ + flex-shrink: 0; +} + +.ri-connector { + width: 24px; + height: 24px; + border-left: 1.5px solid #94a3b8; + border-bottom: 1.5px solid #94a3b8; + margin-top: -24px; + margin-left: 12px; + border-bottom-left-radius: 6px; + flex-shrink: 0; +} + +.ri-cred-line { + margin-top: -4px; +} diff --git a/src/views/List/ListFactory.ts b/src/views/List/ListFactory.ts index 4580972..8f346c4 100644 --- a/src/views/List/ListFactory.ts +++ b/src/views/List/ListFactory.ts @@ -167,8 +167,13 @@ export function createListView(container: HTMLElement, config: ListViewConfig) { let sortState: SortState = config.persistentSortState || { key: '', direction: 'asc' }; let currentFilters: any = { keyword: '', corp: '', dept: '', loc: '', field: '', type: '' }; - // 강제로 기본 뷰 모드를 'system' (자산 현황)으로 설정 - (state as any).currentViewMode = 'system'; + // 서버 탭이 아닐 경우 '자산 현황(대시보드)' 뷰 진입 방지 및 강제 'asset' 모드 + const isServer = config.title === '서버'; + if (!isServer) { + (state as any).currentViewMode = 'asset'; + } else if (!(state as any).currentViewMode) { + (state as any).currentViewMode = 'system'; + } // 2. 뷰 전환 토글 버튼 생성 (명칭 변경) const toggleWrapper = document.createElement('div'); @@ -177,7 +182,7 @@ export function createListView(container: HTMLElement, config: ListViewConfig) { const showPcFlowBtn = config.title === 'PC'; toggleWrapper.innerHTML = `
-
+
diff --git a/src/views/List/PcListView.ts b/src/views/List/PcListView.ts index 83c6fa0..e51d260 100644 --- a/src/views/List/PcListView.ts +++ b/src/views/List/PcListView.ts @@ -5,43 +5,10 @@ import { ASSET_SCHEMA } from '../../core/schema'; import { createListView } from './ListFactory'; export function renderPcList(container: HTMLElement) { - createListView(container, { - title: 'PC', - dataSource: () => sortAssets((state.masterData.pc || []).filter((a: any) => a.asset_type !== '서버PC')), - searchKeys: ['CURRENT_DEPT', 'CURRENT_USER', 'MODEL_NAME', 'MAC_ADDR', 'MANAGER_MAIN', 'ASSET_TYPE'], - filterOptions: { - keywordLabel: `통합 검색 (${ASSET_SCHEMA.MODEL_NAME.ui}/${ASSET_SCHEMA.MANAGER_MAIN.ui}/${ASSET_SCHEMA.CURRENT_USER.ui})`, - showLoc: true, - showDept: true, - showType: true - }, - onRowClick: (asset) => openHwModal(asset, 'view'), - columns: [ - { header: ASSET_SCHEMA.CURRENT_USER.ui, sortKey: ASSET_SCHEMA.CURRENT_USER.key, align: 'center', render: a => a[ASSET_SCHEMA.CURRENT_USER.key] || '-' }, - { header: ASSET_SCHEMA.ASSET_TYPE.ui, sortKey: ASSET_SCHEMA.ASSET_TYPE.key, align: 'center', width: '10%', render: a => a[ASSET_SCHEMA.ASSET_TYPE.key] || '-' }, - { header: ASSET_SCHEMA.CPU.ui, sortKey: ASSET_SCHEMA.CPU.key, align: 'center', render: a => a[ASSET_SCHEMA.CPU.key] || '' }, - { header: ASSET_SCHEMA.MAINBOARD.ui, sortKey: ASSET_SCHEMA.MAINBOARD.key, align: 'center', render: a => a[ASSET_SCHEMA.MAINBOARD.key] || '-' }, - { header: ASSET_SCHEMA.RAM.ui, sortKey: ASSET_SCHEMA.RAM.key, align: 'center', render: a => a[ASSET_SCHEMA.RAM.key] || '' }, - { header: ASSET_SCHEMA.GPU.ui, sortKey: ASSET_SCHEMA.GPU.key, align: 'center', render: a => a[ASSET_SCHEMA.GPU.key] || '-' }, - { - header: 'SSD', - align: 'center', - width: '8%', - render: a => [a[ASSET_SCHEMA.SSD1.key], a[ASSET_SCHEMA.SSD2.key]].filter(Boolean).join(' / ') || '-' - }, - { - header: 'HDD', - align: 'center', - width: '12%', - render: a => [a[ASSET_SCHEMA.HDD1.key], a[ASSET_SCHEMA.HDD2.key], a[ASSET_SCHEMA.HDD3.key], a[ASSET_SCHEMA.HDD4.key]].filter(Boolean).join(' / ') || '-' - }, - { - header: ASSET_SCHEMA.MAC_ADDR.ui, - sortKey: ASSET_SCHEMA.MAC_ADDR.key, - align: 'center', - render: a => `${a[ASSET_SCHEMA.MAC_ADDR.key] || '-'}` - }, - { header: ASSET_SCHEMA.MEMO.ui, sortKey: ASSET_SCHEMA.MEMO.key, className: 'col-memo', width: '30%', render: a => formatInline(a[ASSET_SCHEMA.MEMO.key] || '-') } - ] - }); + container.innerHTML = ` +
+
PC 관리
+

해당 페이지는 다른 작업자에 의해 개발 중입니다.

+
+ `; } diff --git a/src/views/LocationView.ts b/src/views/LocationView.ts new file mode 100644 index 0000000..9ade3c6 --- /dev/null +++ b/src/views/LocationView.ts @@ -0,0 +1,244 @@ +import { state } from '../core/state'; +import { openHwModal } from '../components/Modal/HWModal'; +import { ASSET_SCHEMA } from '../core/schema'; +import { LOCATION_DATA, IMAGE_LOCATIONS } from '../components/Modal/SharedData'; + +/** + * 위치 중심 자산 현황 뷰 (Refined) + */ +export async function renderLocationView(container: HTMLElement) { + if (!container) return; + + // 로컬 상태 (UI 제어용) + let currentLoc = '기술개발센터'; + let currentDetail = '서버실'; + let currentPage = 0; + let mapConfig: any = {}; + + try { + const res = await fetch('/api/maps'); + mapConfig = await res.json(); + } catch (err) { console.error('Failed to load map config', err); } + + const render = () => { + const locImages = (IMAGE_LOCATIONS[currentLoc] && IMAGE_LOCATIONS[currentLoc][currentDetail]) + ? IMAGE_LOCATIONS[currentLoc][currentDetail] + : []; + const mapPath = locImages[currentPage] || ''; + + // 자산이 등록된(좌표가 일치하는) 구역만 필터링하여 표시 + const allBoxes = mapConfig[mapPath] || []; + const boxes = allBoxes.filter((box: any) => + state.masterData.hw.some(a => + a.location === currentLoc && + a.location_detail === currentDetail && + String(a.loc_x) === String(box.x) && + String(a.loc_y) === String(box.y) + ) + ); + + container.innerHTML = ` +
+ +
+
+ + +
+
+ +
+ + + + ${locImages.length > 1 ? ` +
+
+ + +
+ (${currentPage + 1} / ${locImages.length}) +
+ ` : ''} +
+
+
+ +
+ +
+
+ ${mapPath ? ` + +
+ ${boxes.map((box: any, idx: number) => { + const name = box.name || `#${idx+1}`; + return ` +
+
+ `}).join('')} +
+ ` : '
해당 위치의 도면이 등록되지 않았습니다.
'} +
+
+ + +
+
+

📍 구역을 선택하세요

+
+
+
지도에서 자산 위치를 클릭하세요.
+
+
+
+
+

* 지도 위의 구역을 클릭하면 자산 상세 정보가 표시됩니다.

+
+
+ `; + + // 이미지 로드 및 윈도우 리사이즈 시 오버레이 크기와 위치를 이미지에 정확히 맞춤 + const syncOverlaySize = () => { + const img = container.querySelector('#main-map-img') as HTMLImageElement; + const overlay = container.querySelector('#box-overlay') as HTMLElement; + if (img && overlay && img.complete) { + overlay.style.width = img.clientWidth + 'px'; + overlay.style.height = img.clientHeight + 'px'; + overlay.style.left = img.offsetLeft + 'px'; + overlay.style.top = img.offsetTop + 'px'; + } + }; + + const img = container.querySelector('#main-map-img') as HTMLImageElement; + if (img) { + if (img.complete) { + syncOverlaySize(); + setTimeout(syncOverlaySize, 50); // 레이아웃 안정화 대기 + } else { + img.onload = syncOverlaySize; + } + } + + window.removeEventListener('resize', syncOverlaySize); + window.addEventListener('resize', syncOverlaySize); + + // 이벤트 바인딩 + const selMain = container.querySelector('#sel-loc-main') as HTMLSelectElement; + selMain?.addEventListener('change', () => { + currentLoc = selMain.value; + currentDetail = LOCATION_DATA[currentLoc][0]; + currentPage = 0; + render(); + }); + + const selDetail = container.querySelector('#sel-loc-detail') as HTMLSelectElement; + selDetail?.addEventListener('change', () => { + currentDetail = selDetail.value; + currentPage = 0; + render(); + }); + + container.querySelector('#btn-prev-page')?.addEventListener('click', () => { currentPage--; render(); }); + container.querySelector('#btn-next-page')?.addEventListener('click', () => { currentPage++; render(); }); + + container.querySelectorAll('.location-box-point').forEach(box => { + box.addEventListener('click', () => { + const x = box.getAttribute('data-x'); + const y = box.getAttribute('data-y'); + + const targetAsset = state.masterData.hw.find(a => + a.location === currentLoc && + a.location_detail === currentDetail && + String(a.loc_x) === String(x) && + String(a.loc_y) === String(y) + ); + + if (targetAsset) { + renderAssetDetail(targetAsset); + } + + container.querySelectorAll('.location-box-point').forEach(b => (b as HTMLElement).style.background = 'rgba(30, 81, 73, 0.1)'); + (box as HTMLElement).style.background = 'rgba(30, 81, 73, 0.4)'; + }); + }); + }; + + const renderAssetDetail = (asset: any) => { + const title = container.querySelector('#loc-list-title')!; + const tableContainer = container.querySelector('#loc-asset-table-container')!; + + title.innerHTML = ` +
+ + 자산 상세 정보 + +
+ `; + + const renderSection = (title: string, fields: { label: string; value: any }[]) => ` +
+
${title}
+
+ ${fields.map(f => ` +
${f.label}
+
${f.value || '-'}
+ `).join('')} +
+
+ `; + + const sectionsHTML = [ + renderSection('기본 관리 정보', [ + { label: ASSET_SCHEMA.ASSET_CODE.ui, value: asset.asset_code }, + { label: ASSET_SCHEMA.PURCHASE_CORP.ui, value: asset.purchase_corp }, + { label: ASSET_SCHEMA.CATEGORY.ui, value: asset.category }, + { label: ASSET_SCHEMA.ASSET_TYPE.ui, value: asset.asset_type }, + { label: ASSET_SCHEMA.HW_STATUS.ui, value: asset.hw_status } + ]), + renderSection('시스템 사양', [ + { label: ASSET_SCHEMA.MODEL_NAME.ui, value: asset.model_name }, + { label: ASSET_SCHEMA.OS.ui, value: asset.os }, + { label: ASSET_SCHEMA.CPU.ui, value: asset.cpu }, + { label: ASSET_SCHEMA.RAM.ui, value: asset.ram }, + { label: ASSET_SCHEMA.GPU.ui, value: asset.gpu } + ]), + renderSection('네트워크 정보', [ + { label: ASSET_SCHEMA.IP_ADDR.ui, value: asset.ip_address }, + { label: ASSET_SCHEMA.MAC_ADDR.ui, value: asset.mac_address }, + { label: ASSET_SCHEMA.REMOTE_TOOL.ui, value: asset.remote_tool } + ]), + renderSection('구매 및 기타', [ + { label: ASSET_SCHEMA.PURCHASE_DATE.ui, value: asset.purchase_date }, + { label: ASSET_SCHEMA.PURCHASE_AMOUNT.ui, value: asset.purchase_amount ? `${Number(asset.purchase_amount).toLocaleString()}원` : '-' }, + { label: ASSET_SCHEMA.MEMO.ui, value: asset.memo } + ]) + ].join(''); + + tableContainer.innerHTML = ` +
+ ${sectionsHTML} +
+ `; + + container.querySelector('#btn-back-to-list')?.addEventListener('click', () => { + title.textContent = `📍 구역을 선택하세요`; + tableContainer.innerHTML = `
지도에서 자산 위치를 클릭하세요.
`; + }); + + container.querySelector('#btn-edit-from-loc')?.addEventListener('click', () => { + openHwModal(asset, 'edit'); + }); + }; + + render(); +} diff --git a/test_data_generator.js b/test_data_generator.js new file mode 100644 index 0000000..f2513d0 --- /dev/null +++ b/test_data_generator.js @@ -0,0 +1,71 @@ +import mysql from 'mysql2/promise'; +import dotenv from 'dotenv'; +import crypto from 'crypto'; + +dotenv.config(); + +const { DB_HOST, DB_USER, DB_PASS, DB_NAME, DB_PORT } = process.env; + +const CATEGORIES = ['PC', '서버', '노트북', '모니터', '업무지원장비']; +const DEPTS = ['기술개발센터', '총괄기획실', '한맥', '삼안', '장헌', '한라']; +const USERS = ['홍길동', '김철수', '이영희', '박지성', '손흥민', '봉준호', '싸이']; +const STATUSES = ['운영', '재고', '수리', '폐기', '기타']; +const CORPS = ['한맥', '삼안', '장헌', '한라', 'PTC', '바론']; + +async function generateTestData() { + const connection = await mysql.createConnection({ + host: DB_HOST, + user: DB_USER, + password: DB_PASS, + database: DB_NAME, + port: parseInt(DB_PORT || '3306') + }); + + console.log('🚀 무작위 테스트 데이터 생성을 시작합니다 (Crypto UUID 방식)...'); + + for (let i = 1; i <= 20; i++) { + const category = CATEGORIES[Math.floor(Math.random() * CATEGORIES.length)]; + const dept = DEPTS[Math.floor(Math.random() * DEPTS.length)]; + const user = USERS[Math.floor(Math.random() * USERS.length)]; + const status = STATUSES[Math.floor(Math.random() * STATUSES.length)]; + const corp = CORPS[Math.floor(Math.random() * CORPS.length)]; + + // Crypto UUID 생성 + const id = crypto.randomUUID(); + const assetCode = `TEST-${Date.now().toString().slice(-6)}-${String(i).padStart(3, '0')}`; + + try { + // 1. asset_core 삽입 (id 수동 지정) + await connection.query( + `INSERT INTO asset_core + (id, asset_code, category, asset_type, purchase_corp, current_dept, user_current, purchase_date, service_type) + VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)`, + [id, assetCode, category, category, corp, dept, user, '2026-06-10', '내부'] + ); + + // 2. asset_spec 삽입 + await connection.query( + `INSERT INTO asset_spec + (asset_id, hw_status, model_name, cpu, ram) + VALUES (?, ?, ?, ?, ?)`, + [id, status, `${category} Model ${i}`, 'Intel i7', '16GB'] + ); + + // 3. 초기 이력 삽입 + await connection.query( + `INSERT INTO asset_history (asset_id, event_type, details, log_date, log_user) + VALUES (?, ?, ?, ?, ?)`, + [id, 'STATUS_CHANGE', `[최초 등록] 테스트 데이터 생성 (${status})`, '2026-06-10', '시스템'] + ); + + console.log(`✅ 생성 완료: ${assetCode} (${category} / ${dept} / ${user})`); + } catch (err) { + console.error(`❌ 생성 실패 (${i}):`, err.message); + } + } + + await connection.end(); + console.log('\n✨ 20개의 테스트 데이터 생성이 완료되었습니다.'); +} + +generateTestData().catch(console.error); diff --git a/vite.config.ts b/vite.config.ts index 3d35e2a..56b1c1c 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -4,5 +4,15 @@ export default defineConfig({ server: { port: 8080, host: true, // Listen on all local IPs + proxy: { + '/api': { + target: 'http://localhost:3000', + changeOrigin: true, + }, + '/uploads': { + target: 'http://localhost:3000', + changeOrigin: true, + } + } }, });