Taehoon/ITAM
2
0
Fork 0
Code Issues 15 Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
이태훈
2026-04-20 17:56:19 +09:00
parent 5372cda59f
commit 5248b494e9
24 changed files with 5453 additions and 1318 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3889
backup_atam_data.json Normal file
View File

File diff suppressed because it is too large Load Diff

178
db_init.js
View File

@@ -10,50 +10,28 @@ async function initDB() {
host: DB_HOST, host: DB_HOST,
user: DB_USER, user: DB_USER,
password: DB_PASS, 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, id VARCHAR(50) PRIMARY KEY,
corp VARCHAR(100) COMMENT '구매법인', corp VARCHAR(100) COMMENT '구매법인',
asset_code VARCHAR(100) COMMENT '자산번호', asset_code VARCHAR(100) COMMENT '자산번호',
purchase_date VARCHAR(50) COMMENT '구매일자', purchase_date VARCHAR(50) COMMENT '구매일자',
type VARCHAR(50) DEFAULT '물리' COMMENT '물리/가상', type VARCHAR(50) COMMENT '유형',
detail_purpose VARCHAR(50) COMMENT '상세용도',
purpose VARCHAR(255) COMMENT '용도', purpose VARCHAR(255) COMMENT '용도',
details TEXT COMMENT '상세내용', details TEXT COMMENT '상세내용',
current_org VARCHAR(255) COMMENT '현 사용조직', current_org VARCHAR(255) COMMENT '현 사용조직',
@@ -74,122 +52,74 @@ async function initDB() {
storage2 VARCHAR(255), storage2 VARCHAR(255),
storage3 VARCHAR(255), storage3 VARCHAR(255),
monitoring VARCHAR(100), monitoring VARCHAR(100),
price VARCHAR(100) COMMENT '금액',
remarks TEXT, remarks TEXT,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP 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 = ` const createSubSwTable = `
CREATE TABLE IF NOT EXISTS subscription_sw ( CREATE TABLE sw_sub_assets (
id VARCHAR(50) PRIMARY KEY, id VARCHAR(50) PRIMARY KEY,
category VARCHAR(100) COMMENT '분야',
corp 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 created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci; ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
`; `;
// 7. 영구SW 테이블 // 소프트웨어 영구 테이블
const createPermSwTable = ` const createPermSwTable = `
CREATE TABLE IF NOT EXISTS permanent_sw ( CREATE TABLE sw_perm_assets (
id VARCHAR(50) PRIMARY KEY, id VARCHAR(50) PRIMARY KEY,
category VARCHAR(100) COMMENT '분야',
corp 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 created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci; ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
`; `;
// 8. SW 사용자 매핑 테이블 (FK 제약조건 제거하여 유연하게 관리) // 소프트웨어 사용자 매핑 테이블
const createSwUsersTable = ` 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; ) 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(createSubSwTable);
await connection.query(createPermSwTable); await connection.query(createPermSwTable);
await connection.query(createSwUsersTable); await connection.query(createSwUsersTable);
console.log('✅ 6개 전용 테이블 생성 완료!'); console.log('✅ 모든 테이블이 표준화된 스키마로 재생성되었습니다.');
await connection.end(); await connection.end();
console.log('🏁 DB 초기화 프로세스 종료.');
} }
initDB().catch(err => { initDB().catch(err => {

241
server.js
View File

@@ -11,7 +11,6 @@ const PORT = process.env.PORT || 3000;
app.use(cors()); app.use(cors());
app.use(express.json({ limit: '50mb' })); app.use(express.json({ limit: '50mb' }));
// DB 연결 풀 생성
const pool = mysql.createPool({ const pool = mysql.createPool({
host: process.env.DB_HOST, host: process.env.DB_HOST,
user: process.env.DB_USER, user: process.env.DB_USER,
@@ -23,14 +22,14 @@ const pool = mysql.createPool({
queueLimit: 0 queueLimit: 0
}); });
// --- 공통 헬퍼 함수 --- // 공통 배치 저장 로직
async function batchSave(tableName, assets, mapFn) { async function batchSave(tableName, assets, getQuery) {
const connection = await pool.getConnection(); const connection = await pool.getConnection();
try { try {
await connection.beginTransaction(); await connection.beginTransaction();
await connection.query(`DELETE FROM ${tableName}`); await connection.query(`DELETE FROM ${tableName}`);
if (assets.length > 0) { if (assets.length > 0) {
const { sql, values } = mapFn(assets); const { sql, values } = getQuery(assets);
await connection.query(sql, [values]); await connection.query(sql, [values]);
} }
await connection.commit(); 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) => { app.get('/api/pc', async (req, res) => {
try { try {
const [rows] = await pool.query('SELECT * FROM pc_assets'); 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 }); } } catch (err) { res.status(500).json({ error: err.message }); }
}); });
app.post('/api/pc/batch', async (req, res) => { app.post('/api/pc/batch', async (req, res) => {
try { try {
const result = await batchSave('pc_assets', req.body, (assets) => ({ 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); res.json(result);
} catch (err) { res.status(500).json({ error: err.message }); } } catch (err) { res.status(500).json({ error: err.message }); }
}); });
// --- 2. 서버 (Server) API --- // --- 2. 서버 API ---
app.get('/api/server', async (req, res) => { app.get('/api/server', async (req, res) => {
try { try {
const [rows] = await pool.query('SELECT * FROM server_assets'); 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 }); } } catch (err) { res.status(500).json({ error: err.message }); }
}); });
app.post('/api/server/batch', async (req, res) => { app.post('/api/server/batch', async (req, res) => {
try { try {
const result = await batchSave('server_assets', req.body, (assets) => ({ 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); res.json(result);
} catch (err) { res.status(500).json({ error: err.message }); } } catch (err) { res.status(500).json({ error: err.message }); }
}); });
// --- 3. 스토리지 (Storage) API --- // --- 3. 스토리지 API ---
app.get('/api/storage', async (req, res) => { app.get('/api/storage', async (req, res) => {
try { try {
const [rows] = await pool.query('SELECT * FROM storage_assets'); 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 }); } } catch (err) { res.status(500).json({ error: err.message }); }
}); });
app.post('/api/storage/batch', async (req, res) => { app.post('/api/storage/batch', async (req, res) => {
try { try {
const result = await batchSave('storage_assets', req.body, (assets) => ({ 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); res.json(result);
} catch (err) { res.status(500).json({ error: err.message }); } } catch (err) { res.status(500).json({ error: err.message }); }
}); });
// --- 4. 전산비품 (Equipment) API --- // --- 4. 전산비품 API ---
app.get('/api/equip', async (req, res) => { app.get('/api/equip', async (req, res) => {
try { try {
const [rows] = await pool.query('SELECT * FROM equip_assets'); 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 }); } } catch (err) { res.status(500).json({ error: err.message }); }
}); });
app.post('/api/equip/batch', async (req, res) => { app.post('/api/equip/batch', async (req, res) => {
try { try {
const result = await batchSave('equip_assets', req.body, (assets) => ({ 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); res.json(result);
} catch (err) { res.status(500).json({ error: err.message }); } } 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) => { app.get('/api/sw/sub', async (req, res) => {
try { 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 => ({ 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); res.json(mapped);
} catch (err) { res.status(500).json({ error: err.message }); } } 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) => { app.post('/api/sw/sub/batch', async (req, res) => {
try { 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); res.json(result);
} catch (err) { res.status(500).json({ error: err.message }); } } catch (err) { res.status(500).json({ error: err.message }); }
}); });
// --- 6. 영구SW (Permanent) API --- // --- 7. 소프트웨어 영구 API ---
app.get('/api/sw/perm', async (req, res) => { app.get('/api/sw/perm', async (req, res) => {
try { 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 => ({ 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); res.json(mapped);
} catch (err) { res.status(500).json({ error: err.message }); } } 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) => { app.post('/api/sw/perm/batch', async (req, res) => {
try { 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); res.json(result);
} catch (err) { res.status(500).json({ error: err.message }); } } catch (err) { res.status(500).json({ error: err.message }); }
}); });
// --- 7. SW 사용자 (SW Users) API --- // --- 8. 소프트웨어 사용자 관리 API ---
app.get('/api/sw-users', async (req, res) => { app.get('/api/sw-users', async (req, res) => {
try { try {
const [rows] = await pool.query('SELECT * FROM sw_users'); 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 }); } } catch (err) { res.status(500).json({ error: err.message }); }
}); });
app.post('/api/sw-users/batch', async (req, res) => { app.post('/api/sw-users/batch', async (req, res) => {
try { 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 }); } } 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, () => { app.listen(PORT, () => {
console.log(`📡 ITAM Dedicated API Server running on http://localhost:${PORT}`); console.log(`📡 ITAM Dedicated API Server running on http://localhost:${PORT}`);
}); });

450
src/components/Modal/HWModal.ts
View File

@@ -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 { 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 currentAsset: HardwareAsset | null = null;
let isEditMode = false; let isEditMode = false;
@@ -17,15 +28,38 @@ const HW_MODAL_HTML = `
<input type="hidden" id="hw-asset-id" /> <input type="hidden" id="hw-asset-id" />
<input type="hidden" id="hw-asset-type" /> <input type="hidden" id="hw-asset-type" />
<!-- Group 1: 기본 정보 --> <!-- Group 1: 기본 정보 (Identity) -->
<div class="form-section-title">기본 정보 (Identity)</div> <div class="form-section-title">기본 정보 (Identity)</div>
<div class="form-group"> <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>
<div class="form-group"> <div class="form-group">
<label for="hw-자산코드">자산번호/코드</label> <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>
<div class="form-group server-only"> <div class="form-group server-only">
<label for="hw-용도">용도</label> <label for="hw-용도">용도</label>
@@ -35,7 +69,7 @@ const HW_MODAL_HTML = `
<label for="hw-상세">상세 내용</label> <label for="hw-상세">상세 내용</label>
<input type="text" id="hw-상세" /> <input type="text" id="hw-상세" />
</div> </div>
<div class="form-group non-server"> <div class="form-group non-server" id="hw-명칭-group">
<label for="hw-명칭">명칭</label> <label for="hw-명칭">명칭</label>
<input type="text" id="hw-명칭" /> <input type="text" id="hw-명칭" />
</div> </div>
@@ -44,79 +78,83 @@ const HW_MODAL_HTML = `
<input type="text" id="hw-비고" /> <input type="text" id="hw-비고" />
</div> </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> <label for="hw-IP주소">IP 주소 1</label>
<input type="text" id="hw-IP주소" /> <input type="text" id="hw-IP주소" />
</div> </div>
<div class="form-group server-only"> <div class="form-group server-only" id="hw-ip2-group">
<label for="hw-IP2">IP 주소 2</label> <label for="hw-IP2">IP 주소 2</label>
<input type="text" id="hw-IP2" /> <input type="text" id="hw-IP2" />
</div> </div>
<div class="form-group server-only"> <div class="form-group server-only" id="hw-remote-group">
<label for="hw-원격접속">원격 도구 (Anydesk/Chrome 등)</label> <label for="hw-원격접속">원격 도구 (Anydesk/Chrome 등)</label>
<input type="text" id="hw-원격접속" /> <input type="text" id="hw-원격접속" />
</div> </div>
<div class="form-group server-only"> <div class="form-group server-only" id="hw-server-id-group">
<label for="hw-서버ID">서버 ID</label> <label for="hw-서버ID">서버 ID</label>
<input type="text" id="hw-서버ID" /> <input type="text" id="hw-서버ID" />
</div> </div>
<div class="form-group server-only"> <div class="form-group server-only" id="hw-server-pw-group">
<label for="hw-서버PW">서버 PW</label> <label for="hw-서버PW">서버 PW</label>
<input type="text" id="hw-서버PW" /> <input type="text" id="hw-서버PW" />
</div> </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> <label for="hw-IP주소-non-server">IP 주소</label>
<input type="text" id="hw-IP주소-non-server" /> <input type="text" id="hw-IP주소-non-server" />
</div> </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> <label for="hw-모델명">모델명</label>
<input type="text" id="hw-모델명" /> <input type="text" id="hw-모델명" />
</div> </div>
<div class="form-group"> <div class="form-group" id="hw-os-group">
<label for="hw-OS">운영체제 (OS)</label> <label for="hw-OS">운영체제 (OS)</label>
<input type="text" id="hw-OS" /> <input type="text" id="hw-OS" />
</div> </div>
<div class="form-group"> <div class="form-group" id="hw-cpu-group">
<label for="hw-CPU">CPU 사양</label> <label for="hw-CPU">CPU 사양</label>
<input type="text" id="hw-CPU" /> <input type="text" id="hw-CPU" />
</div> </div>
<div class="form-group"> <div class="form-group" id="hw-ram-group">
<label for="hw-RAM">RAM 용량</label> <label for="hw-RAM">RAM 용량</label>
<input type="text" id="hw-RAM" /> <input type="text" id="hw-RAM" />
</div> </div>
<div class="form-group"> <div class="form-group" id="hw-ssd1-group">
<label for="hw-SSD1">Storage 1 (SSD/HDD)</label> <label for="hw-SSD1">Storage 1 (SSD/HDD)</label>
<input type="text" id="hw-SSD1" /> <input type="text" id="hw-SSD1" />
</div> </div>
<div class="form-group"> <div class="form-group" id="hw-ssd2-group">
<label for="hw-SSD2">Storage 2 (SSD/HDD)</label> <label for="hw-SSD2">Storage 2 (SSD/HDD)</label>
<input type="text" id="hw-SSD2" /> <input type="text" id="hw-SSD2" />
</div> </div>
<div class="form-group server-only"> <div class="form-group server-only" id="hw-monitoring-group">
<label for="hw-모니터링">모니터링 여부</label> <label for="hw-모니터링">모니터링 여부</label>
<input type="text" id="hw-모니터링" /> <input type="text" id="hw-모니터링" />
</div> </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> <label for="hw-HW사양">H/W 사양 상세</label>
<textarea id="hw-HW사양" rows="2"></textarea> <textarea id="hw-HW사양" rows="2"></textarea>
</div> </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>
<div class="form-group"> <div class="form-group">
<label for="hw-담당자_정">담당자 (정)</label> <label for="hw-담당자_정">담당자 (정)</label>
@@ -126,13 +164,13 @@ const HW_MODAL_HTML = `
<label for="hw-담당자_부">담당자 (부)</label> <label for="hw-담당자_부">담당자 (부)</label>
<input type="text" id="hw-담당자_부" /> <input type="text" id="hw-담당자_부" />
</div> </div>
<div class="form-group non-server"> <div class="form-group non-server" id="hw-purchase-date-group">
<label for="hw-구매일">구매일</label> <label for="hw-구매일">구매일</label>
<input type="text" id="hw-구매일" /> <input type="text" id="hw-구매일" />
</div> </div>
<div class="form-group non-server"> <div class="form-group non-server" id="hw-price-group">
<label for="hw-금액">금액</label> <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>
<div class="form-group full-width"> <div class="form-group full-width">
<label>품의서 (파일 증빙)</label> <label>품의서 (파일 증빙)</label>
@@ -155,181 +193,275 @@ const HW_MODAL_HTML = `
</div> </div>
`; `;
export function openHwModal(asset: HardwareAsset) { export function openHwModal(asset: HardwareAsset, mode: 'view' | 'add' = 'view') {
currentAsset = asset; currentAsset = asset;
isEditMode = false;
const modal = document.getElementById('hw-asset-modal')!; 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); fillHwFormData(asset);
modal.classList.remove('hidden'); modal.classList.remove('hidden');
applyTypeSpecificUI(asset.type);
createIcons({ icons: { Paperclip } }); 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 serverOnly = document.querySelectorAll('.server-only');
const nonServer = document.querySelectorAll('.non-server'); 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> = {
detailPurpose: document.getElementById('hw-상세용도-group'),
model: document.getElementById('hw-model-group'),
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')
};
// 1. 초기화 (모든 유동 섹션 숨김)
serverOnly.forEach(el => (el as HTMLElement).style.display = 'none');
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'; });
if (groups.type) groups.type.style.display = 'flex';
if (groups.opTitle) groups.opTitle.style.display = 'flex';
// 2. 유형별 정밀 규칙 적용 (사용자 정의 100% 일치)
if (type === '서버') {
serverOnly.forEach(el => (el as HTMLElement).style.display = 'flex'); serverOnly.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 = 'flex');
equipGroup.style.display = 'none'; Object.values(groups).forEach(g => { if (g) g.style.display = 'flex'; });
}
(document.getElementById('hw-용도') as HTMLInputElement).value = asset.용도 || ''; else if (['스토리지', 'NAS', 'DAS'].includes(type)) {
(document.getElementById('hw-상세') as HTMLInputElement).value = asset.상세 || ''; serverOnly.forEach(el => (el as HTMLElement).style.display = 'flex');
(document.getElementById('hw-비고') as HTMLInputElement).value = asset.비고 || ''; locationFields.forEach(el => (el as HTMLElement).style.display = 'flex');
(document.getElementById('hw-구매일') as HTMLInputElement).value = asset.구매일 || ''; if (groups.networkTitle) groups.networkTitle.style.display = 'flex';
(document.getElementById('hw-IP주소') as HTMLInputElement).value = asset.IP주소 || ''; if (groups.ip) groups.ip.style.display = 'flex';
(document.getElementById('hw-IP2') as HTMLInputElement).value = (asset as any).IP2 || ''; if (groups.specTitle) groups.specTitle.style.display = 'flex';
(document.getElementById('hw-원격접속') as HTMLInputElement).value = asset.원격접속 || ''; if (groups.model) groups.model.style.display = 'flex';
(document.getElementById('hw-서버ID') as HTMLInputElement).value = (asset as any).서버ID || ''; if (groups.ssd1) groups.ssd1.style.display = 'flex';
(document.getElementById('hw-서버PW') as HTMLInputElement).value = (asset as any).서버PW || ''; if (groups.ssd2) groups.ssd2.style.display = 'flex';
(document.getElementById('hw-모니터링') as HTMLInputElement).value = asset.모니터링 || ''; }
} else { else if (type === 'PC' || type === '노트북') {
serverOnly.forEach(el => (el as HTMLElement).style.display = 'none'); if (type === 'PC' && groups.detailPurpose) groups.detailPurpose.style.display = 'flex';
nonServer.forEach(el => (el as HTMLElement).style.display = 'flex'); nonServer.forEach(el => (el as HTMLElement).style.display = 'flex');
if (groups.specTitle) groups.specTitle.style.display = 'flex';
(document.getElementById('hw-명칭') as HTMLInputElement).value = asset.명칭 || ''; ['model', 'os', 'cpu', 'ram', 'ssd1', 'ssd2', 'hwSpec', 'ipNonServer'].forEach(k => {
(document.getElementById('hw-구매일') as HTMLInputElement).value = asset.구매일 || ''; if (groups[k]) groups[k]!.style.display = 'flex';
(document.getElementById('hw-금액') as HTMLInputElement).value = asset.금액 || ''; });
(document.getElementById('hw-HW사양') as HTMLTextAreaElement).value = asset.HW사양 || ''; if (type === 'PC' && detailPurpose === '서버') {
(document.getElementById('hw-IP주소-non-server') as HTMLInputElement).value = asset.IP주소 || ''; locationFields.forEach(el => (el as HTMLElement).style.display = 'flex');
if (groups.networkTitle) groups.networkTitle.style.display = 'flex';
if (asset.type === '전산비품') { ['ip', 'ip2', 'remote', 'serverId', 'serverPw', 'monitoring'].forEach(k => {
equipGroup.style.display = 'flex'; if (groups[k]) groups[k]!.style.display = 'flex';
(document.getElementById('hw-비품유형') as HTMLSelectElement).value = asset.비품유형 || '노트북'; });
} else { if (groups.ipNonServer) groups.ipNonServer.style.display = 'none';
equipGroup.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) { export function initHwModal(onSave: () => void, closeModals: () => void) {
// HTML 주입
if (!document.getElementById('hw-asset-modal')) { if (!document.getElementById('hw-asset-modal')) {
document.body.insertAdjacentHTML('beforeend', HW_MODAL_HTML); document.body.insertAdjacentHTML('beforeend', HW_MODAL_HTML);
} }
const modal = document.getElementById('hw-asset-modal')!;
const form = document.getElementById('hw-asset-form') as HTMLFormElement; 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 saveBtn = document.getElementById('btn-save-hw-asset')!;
const revertBtn = document.getElementById('btn-revert-hw-edit')!; const revertBtn = document.getElementById('btn-revert-hw-edit')!;
const deleteBtn = document.getElementById('btn-delete-hw-asset')!; 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; isEditMode = false;
form.classList.remove('is-edit-mode');
form.classList.add('is-view-mode');
saveBtn.textContent = '수정';
revertBtn.classList.add('hidden');
if (currentAsset) fillHwFormData(currentAsset); 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', () => { saveBtn.addEventListener('click', () => {
if (!currentAsset) return; if (!currentAsset) return;
if (!isEditMode) { if (!isEditMode) {
setEditLock('hw-asset-form', 'edit', {
saveBtnId: 'btn-save-hw-asset',
revertBtnId: 'btn-revert-hw-edit'
});
isEditMode = true; isEditMode = true;
form.classList.remove('is-view-mode');
form.classList.add('is-edit-mode');
saveBtn.textContent = '저장';
revertBtn.classList.remove('hidden');
return; 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, ...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 { } 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) { onSave();
state.masterData.hw[idx] = updated; setEditLock('hw-asset-form', 'view', {
onSave(); saveBtnId: 'btn-save-hw-asset',
switchToViewMode(); revertBtnId: 'btn-revert-hw-edit'
} });
isEditMode = false;
}); });
deleteBtn.addEventListener('click', () => { deleteBtn.addEventListener('click', () => {
if (!currentAsset) return; if (!currentAsset) return;
if (confirm('정말로 이 자산을 삭제하시겠습니까?')) { if (confirm('정말로 이 자산을 삭제하시겠습니까?')) {
state.masterData.hw = state.masterData.hw.filter(a => a.id !== currentAsset!.id); deleteHardwareAsset(currentAsset.id);
onSave(); onSave();
closeModal(); closeModals();
} }
}); });
} }

135
src/components/Modal/ModalUtils.ts Normal file
View File

@@ -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');
}
}

462
src/components/Modal/PCModal.ts
View File

@@ -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 = ` const PC_MODAL_HTML = `
<div id="pc-asset-modal" class="modal-overlay hidden"> <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"> <form id="pc-asset-form" class="grid-form">
<input type="hidden" id="pc-asset-id" /> <input type="hidden" id="pc-asset-id" />
<input type="hidden" id="pc-asset-type" value="개인PC" /> <input type="hidden" id="pc-asset-type" value="개인PC" />
<div class="form-section-title">기본 정보 (Identity)</div>
<div class="form-group"> <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> </select>
</div> </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"> <div class="form-group">
<label for="pc-사용자">사용자</label> <label for="pc-사용자">사용자</label>
<input type="text" id="pc-사용자" required /> <input type="text" id="pc-사용자" required />
</div> </div>
<div class="form-group"> <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>
<div class="form-section-title">시스템 사양 (Specifications)</div>
<div class="form-group"> <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" /> <input type="text" id="pc-CPU" />
</div> </div>
<div class="form-group"> <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" /> <input type="text" id="pc-RAM" />
</div> </div>
<div class="form-group"> <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" /> <input type="text" id="pc-SSD1" />
</div> </div>
<div class="form-group"> <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" /> <input type="text" id="pc-SSD2" />
</div> </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>
<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>
<div class="form-group"> <div class="form-group">
<label for="pc-구매일">구매일</label> <label for="pc-구매일">구매일</label>
<input type="text" id="pc-구매일" placeholder="ex) 2024-01-01" /> <input type="text" id="pc-구매일" />
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="pc-금액">금액</label> <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>
<div class="form-group"> <div class="form-group">
<label for="pc-납품업체">납품업체</label> <label for="pc-납품업체">납품업체</label>
<input type="text" id="pc-납품업체" /> <input type="text" id="pc-납품업체" />
</div> </div>
<div class="form-group full-width"> <div class="form-group full-width">
<label>품의서 (파일)</label> <label>품의서 (파일)</label>
<div style="display:flex; align-items:center; gap:0.5rem;"> <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> <button id="btn-delete-pc-asset" class="btn btn-outline btn-danger">삭제</button>
<div class="footer-actions"> <div class="footer-actions">
<button id="btn-revert-pc-edit" class="btn btn-outline hidden">수정 취소</button> <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> <button id="btn-save-pc-asset" class="btn btn-primary">수정</button>
</div> </div>
</div> </div>
@@ -118,211 +146,204 @@ const PC_MODAL_HTML = `
</div> </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')) { if (!document.getElementById('pc-asset-modal')) {
document.body.insertAdjacentHTML('beforeend', PC_MODAL_HTML); document.body.insertAdjacentHTML('beforeend', PC_MODAL_HTML);
} }
const pcForm = document.getElementById('pc-asset-form') as HTMLFormElement; 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');
btnSavePc.textContent = '저장';
btnRevertEdit.classList.remove('hidden');
btnCloseFooter.classList.add('hidden');
} else {
pcForm.classList.add('is-view-mode');
pcForm.classList.remove('is-edit-mode');
btnSavePc.textContent = '수정';
btnRevertEdit.classList.add('hidden');
btnCloseFooter.classList.remove('hidden');
if (currentAsset) fillFormData(currentAsset);
}
};
function fillFormData(asset: HardwareAsset) { bindLocationEvents('pc-위치-빌딩', 'pc-위치-상세', 'pc-위치-기타-group', 'pc-위치-기타');
(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.품의서명}` : '';
}
btnRevertEdit?.addEventListener('click', () => setEditMode(false)); const handleClose = () => { closeModalsCb(); isEditMode = false; };
btnCloseHeader?.addEventListener('click', closeModals); document.getElementById('btn-close-pc-modal')?.addEventListener('click', handleClose);
btnCloseFooter?.addEventListener('click', closeModals); document.getElementById('btn-cancel-pc-modal')?.addEventListener('click', handleClose);
revertBtn?.addEventListener('click', () => {
isEditMode = false;
pcForm.classList.replace('is-edit-mode', 'is-view-mode');
if (saveBtn) saveBtn.textContent = '수정';
revertBtn.classList.add('hidden');
if (currentAsset) fillFormData(currentAsset);
});
btnSavePc?.addEventListener('click', (e) => { saveBtn?.addEventListener('click', () => {
e.preventDefault(); if (!currentAsset) return;
if (!isEditMode) { if (!isEditMode) {
setEditMode(true); isEditMode = true;
pcForm.classList.replace('is-view-mode', 'is-edit-mode');
saveBtn.textContent = '저장';
revertBtn?.classList.remove('hidden');
return; 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('삭제하시겠습니까?')) { 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) { function renderHistory(assetId: string) {
const historyList = document.getElementById('pc-history-list'); const historyList = document.getElementById('pc-history-list');
if (!historyList) return; if (!historyList) return;
const logs = state.masterData.logs const logs = state.masterData.logs
.filter(l => l.assetId === assetId) .filter(l => l.assetId === assetId)
.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime()); .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>'; historyList.innerHTML = '<div class="empty-history">이력이 없습니다.</div>';
return; return;
} }
historyList.innerHTML = logs.map(log => ` historyList.innerHTML = logs.map(log => `
<div class="history-item"> <div class="history-item">
<div class="history-date">${log.date}</div> <div class="history-date">${log.date}</div>
<div class="history-user">수정자: ${log.user}</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> </div>
`).join(''); `).join('');
} }

506
src/components/Modal/SWModal.ts
View File

@@ -1,14 +1,20 @@
import { state } from '../../core/state'; import { state } from '../../core/state';
import { SoftwareAsset } from '../../core/excelHandler'; 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 = ` const SW_MODAL_HTML = `
<div id="sw-asset-modal" class="modal-overlay hidden"> <div id="sw-asset-modal" class="modal-overlay hidden">
<div class="modal-content wide"> <div class="modal-content wide">
<div class="modal-header"> <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>
<div class="modal-body"> <div class="modal-body">
<div class="modal-body-split"> <div class="modal-body-split">
@@ -16,51 +22,47 @@ const SW_MODAL_HTML = `
<form id="sw-asset-form" class="grid-form"> <form id="sw-asset-form" class="grid-form">
<input type="hidden" id="sw-asset-id" /> <input type="hidden" id="sw-asset-id" />
<input type="hidden" id="sw-asset-type" /> <input type="hidden" id="sw-asset-type" />
<div class="form-section-title">기본 정보 (Basic Info)</div>
<div class="form-group"> <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>
<div class="form-group"> <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>
<div class="form-group"> <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>
<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"> <div class="form-group">
<label for="sw-구매일">구매일</label> <label for="sw-구매일">구매일</label>
<input type="date" id="sw-구매일" /> <input type="text" id="sw-구매일" />
</div> </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>
<div class="form-group"> <div class="form-group">
<label for="sw-납품업체">납품업체</label> <label for="sw-납품업체">납품업체</label>
@@ -68,18 +70,28 @@ const SW_MODAL_HTML = `
</div> </div>
<div class="form-group full-width"> <div class="form-group full-width">
<label for="sw-비고">비고</label> <label for="sw-비고">비고</label>
<input type="text" id="sw-비고" /> <textarea id="sw-비고" rows="2"></textarea>
</div> </div>
</form> </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>
<div class="modal-history-area"> <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>
<div id="sw-history-list" class="history-timeline"></div>
</div> </div>
</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> <button id="btn-delete-sw-asset" class="btn btn-outline btn-danger">삭제</button>
<div class="footer-actions"> <div class="footer-actions">
<button id="btn-revert-sw-edit" class="btn btn-outline hidden">수정 취소</button> <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> <button id="btn-save-sw-asset" class="btn btn-primary">수정</button>
</div> </div>
</div> </div>
</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 { } 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 { } 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); 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')) { if (!document.getElementById('sw-asset-modal')) {
document.body.insertAdjacentHTML('beforeend', SW_MODAL_HTML); 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) { if (!isEditMode) {
setEditMode(true); isEditMode = true;
form.classList.replace('is-view-mode', 'is-edit-mode');
saveBtn.textContent = '저장';
revertBtn.classList.remove('hidden');
return; 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 { } 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('삭제하시겠습니까?')) { 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 } });
} }

294
src/components/Modal/SWUserModal.ts
View File

@@ -2,73 +2,68 @@ import { state } from '../../core/state';
import { SoftwareAsset, SWUser } from '../../core/excelHandler'; import { SoftwareAsset, SWUser } from '../../core/excelHandler';
import { openModal } from './BaseModal'; import { openModal } from './BaseModal';
import { createIcons, Edit2, X, Paperclip } from 'lucide'; 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[] = []; let tempSwUsers: SWUser[] = [];
const SW_USER_MODAL_HTML = ` const SW_USER_MODAL_HTML = `
<!-- S/W 할당 사용자 목록 모달 -->
<div id="sw-user-modal" class="modal-overlay hidden"> <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"> <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>
<div class="modal-body"> <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> <button type="button" id="btn-open-add-user" class="btn btn-primary btn-sm"><i data-lucide="plus"></i> 사용자 추가</button>
</div> </div>
<div class="table-container"> <div class="table-container">
<table style="width:100%;"> <table>
<thead> <thead>
<tr> <tr>
<th>법인</th> <th>구매법인</th>
<th>부서/팀</th> <th>부서/팀</th>
<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> </tr>
</thead> </thead>
<tbody id="user-list-body"></tbody> <tbody id="sw-user-table-body"></tbody>
</table> </table>
</div> </div>
</div> </div>
<div class="modal-footer"> <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>
</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"> <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>
<div class="modal-body"> <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"> <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>
<div class="form-group"> <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>
<div class="form-group"> <div class="form-group">
<label>직위</label> <label>직위</label>
@@ -80,156 +75,169 @@ const SW_USER_MODAL_HTML = `
</div> </div>
<div class="form-group"> <div class="form-group">
<label>사용기간</label> <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>
<div class="form-group"> <div class="form-group">
<label>신청서 (증빙파일)</label> <label>신청서 (증빙)</label>
<input type="file" id="new-user-신청서" /> <input type="file" id="new-user-신청서" />
<span id="new-user-신청서명" style="font-size:0.75rem; color:var(--text-muted);"></span>
</div> </div>
</div> </form>
</div> </div>
<div class="modal-footer"> <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> </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() { function renderUserList() {
const tbody = document.getElementById('user-list-body')!; const tbody = document.getElementById('sw-user-table-body')!;
tbody.innerHTML = ''; tbody.innerHTML = '';
if (tempSwUsers.length === 0) { 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; return;
} }
tempSwUsers.forEach((user, idx) => { tempSwUsers.forEach((user, idx) => {
const tr = document.createElement('tr'); 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 = ` 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); tbody.appendChild(tr);
}); });
createIcons({ icons: { Edit2, X, Paperclip } }); // 이벤트 연결
tbody.querySelectorAll('.btn-edit-user').forEach(btn => { tbody.querySelectorAll('.btn-edit-user').forEach(btn => {
btn.addEventListener('click', (e) => { btn.addEventListener('click', (e) => {
const idx = parseInt((e.currentTarget as HTMLElement).getAttribute('data-idx')!); 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) => { btn.addEventListener('click', (e) => {
const idx = parseInt((e.currentTarget as HTMLButtonElement).getAttribute('data-idx')!); const idx = parseInt((e.currentTarget as HTMLElement).getAttribute('data-idx')!);
tempSwUsers.splice(idx, 1); if (confirm('사용자 할당을 삭제하시겠습니까?')) {
renderUserList(); tempSwUsers.splice(idx, 1);
renderUserList();
}
}); });
}); });
createIcons({ icons: { Paperclip } });
}
function openUserEditSubModal(idx: number = -1) {
const subModal = document.getElementById('sw-user-edit-modal')!;
const form = document.getElementById('sw-user-edit-form') as HTMLFormElement;
form.reset();
setFieldValue('edit-user-index', idx);
if (idx > -1) {
const user = tempSwUsers[idx];
setFieldValue('new-user-법인', user.구매법인 || user.법인);
setFieldValue('new-user-부서', user.부서);
setFieldValue('new-user-직위', user.직위);
setFieldValue('new-user-이름', user.이름);
setFieldValue('new-user-사용기간', user.사용기간);
} else {
setFieldValue('new-user-법인', currentSwUserAsset?.법인);
}
subModal.classList.remove('hidden');
}
export function initSwUserModal(onSave: () => void, closeModals: () => void) {
if (!document.getElementById('sw-user-modal')) {
document.body.insertAdjacentHTML('beforeend', SW_USER_MODAL_HTML);
}
const mainSaveBtn = document.getElementById('btn-save-sw-user')!;
const addUserBtn = document.getElementById('btn-open-add-user')!;
const confirmUserBtn = document.getElementById('btn-confirm-user-edit')!;
addUserBtn.addEventListener('click', () => openUserEditSubModal());
confirmUserBtn.addEventListener('click', () => {
saveUserDataToList();
});
mainSaveBtn.addEventListener('click', () => {
if (!currentSwUserAsset) return;
// 전역 상태 업데이트
const existingIdx = state.masterData.swUsers.findIndex(u => u.sw_id === currentSwUserAsset!.id);
const newMapping = {
sw_id: currentSwUserAsset!.id,
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');
});
} }
export function openSwUserModal(asset: SoftwareAsset) { function saveUserDataToList() {
openModal('sw-user-modal'); const idx = parseInt(getFieldValue('edit-user-index'));
currentSwUserAssetId = asset.id; const 신청서Input = document.getElementById('new-user-신청서') as HTMLInputElement;
tempSwUsers = state.masterData.swUsers.filter(u => u.swId === asset.id).map(u => ({...u})); const 신청서명 = 신청서Input.files && 신청서Input.files.length > 0 ? 신청서Input.files[0].name : (idx > -1 ? tempSwUsers[idx].신청서명 : '');
renderUserList();
}
function openUserEditModal(idx: number) { const userData: any = {
const editModal = document.getElementById('sw-user-edit-modal')!; 구매법인: getFieldValue('new-user-법인'),
editModal.classList.remove('hidden'); 부서: getFieldValue('new-user-부서'),
(document.getElementById('edit-user-idx') as HTMLInputElement).value = String(idx); 직위: getFieldValue('new-user-직위'),
이름: getFieldValue('new-user-이름'),
if (idx === -1) { 사용기간: getFieldValue('new-user-사용기간'),
document.getElementById('sw-user-edit-modal-title')!.innerText = '새 사용자 추가';
(document.getElementById('new-user-법인') as HTMLSelectElement).value = '한맥';
(document.getElementById('new-user-부서') as HTMLInputElement).value = '';
(document.getElementById('new-user-팀') as HTMLInputElement).value = '';
(document.getElementById('new-user-직위') as HTMLInputElement).value = '';
(document.getElementById('new-user-이름') as HTMLInputElement).value = '';
(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 = '사용자 정보 수정';
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.신청서명}` : '';
}
}
function saveUserEdit() {
const idx = parseInt((document.getElementById('edit-user-idx') as HTMLInputElement).value);
const 이름 = (document.getElementById('new-user-이름') as HTMLInputElement).value.trim();
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 = {
id: idx === -1 ? Math.random().toString(36).substring(2, 9) : tempSwUsers[idx].id,
swId: currentSwUserAssetId,
법인: (document.getElementById('new-user-법인') as HTMLSelectElement).value,
부서: (document.getElementById('new-user-부서') as HTMLInputElement).value,
팀: (document.getElementById('new-user-팀') as HTMLInputElement).value,
직위: (document.getElementById('new-user-직위') as HTMLInputElement).value,
이름,
사용기간: (document.getElementById('new-user-사용기간') as HTMLInputElement).value,
신청서명 신청서명
}; };

33
src/components/Modal/SharedData.ts Normal file
View File

@@ -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'
};

166
src/components/Modal/StorageModal.ts
View File

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

7
src/components/Navigation.ts
View File

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

46
src/core/state.ts
View File

@@ -6,6 +6,7 @@ export interface MasterAssetData {
server: HardwareAsset[]; server: HardwareAsset[];
storage: HardwareAsset[]; storage: HardwareAsset[];
equip: HardwareAsset[]; equip: HardwareAsset[];
mobile: HardwareAsset[];
subSw: SoftwareAsset[]; subSw: SoftwareAsset[];
permSw: SoftwareAsset[]; permSw: SoftwareAsset[];
swUsers: SWUser[]; swUsers: SWUser[];
@@ -27,6 +28,7 @@ export const state: AppState = {
server: [], server: [],
storage: [], storage: [],
equip: [], equip: [],
mobile: [],
subSw: [], subSw: [],
permSw: [], permSw: [],
swUsers: [], swUsers: [],
@@ -44,6 +46,7 @@ export async function loadMasterDataFromDB() {
{ key: 'server', url: 'http://localhost:3000/api/server' }, { key: 'server', url: 'http://localhost:3000/api/server' },
{ key: 'storage', url: 'http://localhost:3000/api/storage' }, { key: 'storage', url: 'http://localhost:3000/api/storage' },
{ key: 'equip', url: 'http://localhost:3000/api/equip' }, { 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: 'subSw', url: 'http://localhost:3000/api/sw/sub' },
{ key: 'permSw', url: 'http://localhost:3000/api/sw/perm' }, { key: 'permSw', url: 'http://localhost:3000/api/sw/perm' },
{ key: 'swUsers', url: 'http://localhost:3000/api/sw-users' } { key: 'swUsers', url: 'http://localhost:3000/api/sw-users' }
@@ -70,3 +73,46 @@ export async function loadMasterDataFromDB() {
export function updateState(newState: Partial<AppState>) { export function updateState(newState: Partial<AppState>) {
Object.assign(state, newState); 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);
}
});
}

21
src/core/utils.ts
View File

@@ -54,3 +54,24 @@ export function getAssetChanges(oldAsset: any, newAsset: any, fields: {key: stri
}); });
return changes.join('\n'); 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;
});
}

45
src/main.ts
View File

@@ -2,11 +2,10 @@ import { state, loadMasterDataFromDB } from './core/state';
import { renderNavigation } from './components/Navigation'; import { renderNavigation } from './components/Navigation';
import { renderDashboard } from './views/DashboardView'; import { renderDashboard } from './views/DashboardView';
import { renderTable } from './views/AssetTableView'; 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 { initBaseModal } from './components/Modal/BaseModal';
import { initPcModal } from './components/Modal/PCModal'; import { initPcModal } from './components/Modal/PCModal';
import { initHwModal, openHwModal } from './components/Modal/HWModal'; import { initHwModal, openHwModal } from './components/Modal/HWModal';
import { initStorageModal } from './components/Modal/StorageModal';
import { initSwModal } from './components/Modal/SWModal'; import { initSwModal } from './components/Modal/SWModal';
import { initSwUserModal } from './components/Modal/SWUserModal'; import { initSwUserModal } from './components/Modal/SWUserModal';
import { initDashboardDetailModal } from './components/Modal/DashboardDetailModal'; 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 saveServerToDB = () => apiBatchSave('http://localhost:3000/api/server/batch', state.masterData.server, '서버');
const saveStorageToDB = () => apiBatchSave('http://localhost:3000/api/storage/batch', state.masterData.storage, '스토리지'); 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 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 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 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사용자'); 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 --- // --- App Initialization ---
function initApp() { function initApp() {
console.log('🚀 ITAM Dedicated System Initializing...'); console.log('🚀 ITAM Dedicated System Initializing...');
@@ -49,15 +60,10 @@ function initApp() {
else renderTable(mainContent); 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(() => { initSwModal(() => {
if (state.activeSubTab === '구독SW') saveSubSwToDB(); if (state.activeSubTab === '구독SW') saveSubSwToDB();
else savePermSwToDB(); else savePermSwToDB();
@@ -86,9 +92,8 @@ function initApp() {
if (file) { if (file) {
const data = await parseExcel(file); const data = await parseExcel(file);
state.masterData = data; state.masterData = data;
// 엑셀 업로드 시 모든 카테고리 병렬 덮어쓰기
await Promise.all([ await Promise.all([
savePcToDB(), saveServerToDB(), saveStorageToDB(), saveEquipToDB(), saveAllHardwareToDB(),
saveSubSwToDB(), savePermSwToDB(), saveSwUsersToDB() saveSubSwToDB(), savePermSwToDB(), saveSwUsersToDB()
]); ]);
renderTable(mainContent); renderTable(mainContent);
@@ -96,13 +101,13 @@ function initApp() {
}); });
document.getElementById('btn-add-asset')?.addEventListener('click', () => { document.getElementById('btn-add-asset')?.addEventListener('click', () => {
if (state.activeSubTab === '서버' || state.activeSubTab === '전산비품' || state.activeSubTab === '스토리지') { const defaultType = state.activeSubTab === '대시보드' ? '' : state.activeSubTab;
openHwModal({ openHwModal({
id: Math.random().toString(36).substring(2, 9), 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({ createIcons({

30
src/styles/modal.css
View File

@@ -103,13 +103,21 @@
.grid-form.is-view-mode input, .grid-form.is-view-mode input,
.grid-form.is-view-mode select, .grid-form.is-view-mode select,
.grid-form.is-view-mode textarea { .grid-form.is-view-mode textarea {
border-color: transparent !important; border: none !important;
background-color: transparent !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, .grid-form.is-edit-mode input,
@@ -119,6 +127,16 @@
border: 1px solid var(--border-color); 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 input:focus,
.grid-form.is-edit-mode select:focus, .grid-form.is-edit-mode select:focus,
.grid-form.is-edit-mode textarea:focus { .grid-form.is-edit-mode textarea:focus {

2
src/views/AssetTableView.ts
View File

@@ -3,6 +3,7 @@ import { renderPcList } from './List/PcListView';
import { renderServerList } from './List/ServerListView'; import { renderServerList } from './List/ServerListView';
import { renderStorageList } from './List/StorageListView'; import { renderStorageList } from './List/StorageListView';
import { renderEquipmentList } from './List/EquipmentListView'; import { renderEquipmentList } from './List/EquipmentListView';
import { renderMobileList } from './List/MobileListView';
import { renderSwList } from './List/SwListView'; 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'; 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 === '서버') renderServerList(container);
else if (tab === '스토리지') renderStorageList(container); else if (tab === '스토리지') renderStorageList(container);
else if (tab === '전산비품') renderEquipmentList(container); else if (tab === '전산비품') renderEquipmentList(container);
else if (tab === '모바일기기') renderMobileList(container);
else { else {
container.innerHTML = `<div style="padding:2rem; color:var(--text-muted);">"${tab}" 탭에 대한 하드웨어 리스트 뷰가 정의되지 않았습니다.</div>`; container.innerHTML = `<div style="padding:2rem; color:var(--text-muted);">"${tab}" 탭에 대한 하드웨어 리스트 뷰가 정의되지 않았습니다.</div>`;
} }

2
src/views/Dashboard/HwDashboard.ts
View File

@@ -50,7 +50,7 @@ export function renderHwDashboard(container: HTMLElement) {
<canvas id="chart-hw-types"></canvas> <canvas id="chart-hw-types"></canvas>
</div> </div>
<div class="dashboard-card"> <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> <canvas id="chart-hw-corps"></canvas>
</div> </div>
</div> </div>

2
src/views/Dashboard/SwDashboard.ts
View File

@@ -92,7 +92,7 @@ export function renderSwDashboard(container: HTMLElement) {
<h3 class="dashboard-section-title">${currentYear}년 도입 비용 분석</h3> <h3 class="dashboard-section-title">${currentYear}년 도입 비용 분석</h3>
<div class="dashboard-layout-2col"> <div class="dashboard-layout-2col">
<div class="dashboard-card"> <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> <canvas id="chart-sw-corp"></canvas>
</div> </div>
<div class="dashboard-card"> <div class="dashboard-card">

20
src/views/List/EquipmentListView.ts
View File

@@ -1,10 +1,10 @@
import { state } from '../../core/state'; import { state } from '../../core/state';
import { openHwModal } from '../../components/Modal/HWModal'; import { openHwModal } from '../../components/Modal/HWModal';
import { formatInline } from '../../core/utils'; import { formatInline, sortAssets } from '../../core/utils';
import { createIcons, RefreshCcw } from 'lucide'; import { createIcons, RefreshCcw } from 'lucide';
export function renderEquipmentList(container: HTMLElement) { export function renderEquipmentList(container: HTMLElement) {
const fullList = state.masterData.equip; const fullList = sortAssets(state.masterData.equip);
const filterBar = document.createElement('div'); const filterBar = document.createElement('div');
filterBar.className = 'search-bar'; filterBar.className = 'search-bar';
@@ -16,7 +16,7 @@ export function renderEquipmentList(container: HTMLElement) {
<input type="text" id="filter-keyword" placeholder="검색어를 입력하세요..." autocomplete="off"> <input type="text" id="filter-keyword" placeholder="검색어를 입력하세요..." autocomplete="off">
</div> </div>
<div class="search-item"> <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> <select id="filter-corp"><option value="">전체 법인</option>${corps.map(c => `<option value="${c}">${c}</option>`).join('')}</select>
</div> </div>
<button id="btn-reset-filters" class="btn btn-outline btn-reset"> <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'); const tableWrapper = document.createElement('div');
tableWrapper.className = 'table-container'; tableWrapper.className = 'table-container';
const table = document.createElement('table'); 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); tableWrapper.appendChild(table);
container.appendChild(tableWrapper); container.appendChild(tableWrapper);
@@ -42,7 +42,7 @@ export function renderEquipmentList(container: HTMLElement) {
const corp = corpSelect ? corpSelect.value : ''; const corp = corpSelect ? corpSelect.value : '';
const filtered = fullList.filter(asset => { 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; const matchCorp = !corp || asset.법인 === corp;
return matchKeyword && matchCorp; return matchKeyword && matchCorp;
}); });
@@ -59,16 +59,16 @@ export function renderEquipmentList(container: HTMLElement) {
tr.innerHTML = ` tr.innerHTML = `
<td>${idx+1}</td> <td>${idx+1}</td>
<td>${asset.법인}</td> <td>${asset.법인}</td>
<td>${asset.비품유형||'-'}</td> <td>${asset.현사용조직||''}</td>
<td>${asset.type}</td>
<td>${asset.자산코드}</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>${asset.금액||''}</td> <td>${asset.금액||''}</td>
<td><button class="btn btn-outline btn-sm">수정</button></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); tbody.appendChild(tr);
}); });
}; };

85
src/views/List/MobileListView.ts Normal file
View File

@@ -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();
}

20
src/views/List/PcListView.ts
View File

@@ -1,10 +1,10 @@
import { state } from '../../core/state'; import { state } from '../../core/state';
import { openPcModal } from '../../components/Modal/PCModal'; import { openPcModal } from '../../components/Modal/PCModal';
import { formatInline } from '../../core/utils'; import { formatInline, sortAssets } from '../../core/utils';
import { createIcons, Paperclip, RefreshCcw } from 'lucide'; import { createIcons, Paperclip, RefreshCcw } from 'lucide';
export function renderPcList(container: HTMLElement) { export function renderPcList(container: HTMLElement) {
const fullList = state.masterData.pc; const fullList = sortAssets(state.masterData.pc);
const filterBar = document.createElement('div'); const filterBar = document.createElement('div');
filterBar.className = 'search-bar'; filterBar.className = 'search-bar';
@@ -16,11 +16,8 @@ export function renderPcList(container: HTMLElement) {
<input type="text" id="filter-keyword" placeholder="검색어를 입력하세요..." autocomplete="off"> <input type="text" id="filter-keyword" placeholder="검색어를 입력하세요..." autocomplete="off">
</div> </div>
<div class="search-item"> <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> </div>
<button id="btn-reset-filters" class="btn btn-outline btn-reset"> <button id="btn-reset-filters" class="btn btn-outline btn-reset">
<i data-lucide="refresh-ccw"></i> 필터 초기화 <i data-lucide="refresh-ccw"></i> 필터 초기화
@@ -31,7 +28,7 @@ export function renderPcList(container: HTMLElement) {
const tableWrapper = document.createElement('div'); const tableWrapper = document.createElement('div');
tableWrapper.className = 'table-container'; tableWrapper.className = 'table-container';
const table = document.createElement('table'); 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); tableWrapper.appendChild(table);
container.appendChild(tableWrapper); container.appendChild(tableWrapper);
@@ -46,14 +43,14 @@ export function renderPcList(container: HTMLElement) {
const corp = corpSelect ? corpSelect.value : ''; const corp = corpSelect ? corpSelect.value : '';
const filtered = fullList.filter(asset => { 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; const matchCorp = !corp || asset.법인 === corp;
return matchKeyword && matchCorp; return matchKeyword && matchCorp;
}); });
tbody.innerHTML = ''; tbody.innerHTML = '';
if (filtered.length === 0) { 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; return;
} }
@@ -65,6 +62,7 @@ export function renderPcList(container: HTMLElement) {
tr.innerHTML = ` tr.innerHTML = `
<td>${idx+1}</td> <td>${idx+1}</td>
<td>${asset.법인}</td> <td>${asset.법인}</td>
<td>${asset.현사용조직||''}</td>
<td>${asset.자산코드}</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 style="text-align:center;">${asset.품의서명 ? '<i data-lucide="paperclip" class="text-primary"></i>' : '-'}</td>
<td><button class="btn btn-outline btn-sm">수정</button></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); tbody.appendChild(tr);
}); });
createIcons({ icons: { Paperclip } }); createIcons({ icons: { Paperclip } });

6
src/views/List/ServerListView.ts
View File

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

47
src/views/List/StorageListView.ts
View File

@@ -1,24 +1,29 @@
import { state } from '../../core/state'; 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'; import { createIcons, RefreshCcw } from 'lucide';
export function renderStorageList(container: HTMLElement) { export function renderStorageList(container: HTMLElement) {
const fullList = state.masterData.storage; const fullList = sortAssets(state.masterData.storage);
const filterBar = document.createElement('div'); const filterBar = document.createElement('div');
filterBar.className = 'search-bar'; filterBar.className = 'search-bar';
const corps = Array.from(new Set(fullList.map(a => a.법인))).filter(Boolean).sort(); 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 = ` filterBar.innerHTML = `
<div class="search-item flex-1"> <div class="search-item flex-1">
<label>통합 검색 (자산코드/명칭/모델명)</label> <label>통합 검색 (자산번호/조직/모델명)</label>
<input type="text" id="filter-keyword" placeholder="검색어를 입력하세요..." autocomplete="off"> <input type="text" id="filter-keyword" placeholder="검색어를 입력하세요..." autocomplete="off">
</div> </div>
<div class="search-item"> <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> <select id="filter-corp"><option value="">전체 법인</option>${corps.map(c => `<option value="${c}">${c}</option>`).join('')}</select>
</div> </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"> <button id="btn-reset-filters" class="btn btn-outline btn-reset">
<i data-lucide="refresh-ccw"></i> 필터 초기화 <i data-lucide="refresh-ccw"></i> 필터 초기화
</button> </button>
@@ -28,7 +33,7 @@ export function renderStorageList(container: HTMLElement) {
const tableWrapper = document.createElement('div'); const tableWrapper = document.createElement('div');
tableWrapper.className = 'table-container'; tableWrapper.className = 'table-container';
const table = document.createElement('table'); 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); tableWrapper.appendChild(table);
container.appendChild(tableWrapper); container.appendChild(tableWrapper);
@@ -37,14 +42,17 @@ export function renderStorageList(container: HTMLElement) {
const updateTable = () => { const updateTable = () => {
const keywordInput = document.getElementById('filter-keyword') as HTMLInputElement; const keywordInput = document.getElementById('filter-keyword') as HTMLInputElement;
const corpSelect = document.getElementById('filter-corp') as HTMLSelectElement; 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 keyword = keywordInput ? keywordInput.value.toLowerCase().trim() : '';
const corp = corpSelect ? corpSelect.value : ''; const corp = corpSelect ? corpSelect.value : '';
const orgUnit = orgSelect ? orgSelect.value : '';
const filtered = fullList.filter(asset => { 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; const matchCorp = !corp || asset.법인 === corp;
return matchKeyword && matchCorp; const matchOrg = !orgUnit || asset.현사용조직 === orgUnit;
return matchKeyword && matchCorp && matchOrg;
}); });
tbody.innerHTML = ''; tbody.innerHTML = '';
@@ -56,29 +64,38 @@ export function renderStorageList(container: HTMLElement) {
filtered.forEach((asset, idx) => { filtered.forEach((asset, idx) => {
const tr = document.createElement('tr'); const tr = document.createElement('tr');
tr.style.cursor = 'pointer'; 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 = ` tr.innerHTML = `
<td>${idx+1}</td> <td>${idx+1}</td>
<td>${asset.법인}</td> <td>${asset.법인}</td>
<td>${asset.storage유형||''}</td> <td>${asset.현사용조직||''}</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>${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> <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); tbody.appendChild(tr);
}); });
}; };
document.getElementById('filter-keyword')?.addEventListener('input', updateTable); document.getElementById('filter-keyword')?.addEventListener('input', updateTable);
document.getElementById('filter-corp')?.addEventListener('change', 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('btn-reset-filters')?.addEventListener('click', () => {
(document.getElementById('filter-keyword') as HTMLInputElement).value = ''; (document.getElementById('filter-keyword') as HTMLInputElement).value = '';
(document.getElementById('filter-corp') as HTMLSelectElement).value = ''; (document.getElementById('filter-corp') as HTMLSelectElement).value = '';
(document.getElementById('filter-org-unit') as HTMLSelectElement).value = '';
updateTable(); updateTable();
}); });

36
src/views/List/SwListView.ts
View File

@@ -1,11 +1,14 @@
import { state } from '../../core/state'; import { state } from '../../core/state';
import { openSwModal } from '../../components/Modal/SWModal'; import { openSwModal } from '../../components/Modal/SWModal';
import { openSwUserModal } from '../../components/Modal/SWUserModal'; 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'; import { createIcons, Edit2, Users, RefreshCcw } from 'lucide';
export function renderSwList(container: HTMLElement) { export function renderSwList(container: HTMLElement) {
const isSub = state.activeSubTab === '구독SW'; 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'); const filterBar = document.createElement('div');
filterBar.className = 'search-bar'; filterBar.className = 'search-bar';
@@ -25,11 +28,8 @@ export function renderSwList(container: HTMLElement) {
</select> </select>
</div> </div>
<div class="search-item"> <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> </div>
<button id="btn-reset-filters" class="btn btn-outline btn-reset"> <button id="btn-reset-filters" class="btn btn-outline btn-reset">
<i data-lucide="refresh-ccw"></i> 필터 초기화 <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;">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> <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) => { 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 qty = typeof asset.수량 === 'number' ? asset.수량 : parseInt(asset.수량||'0', 10);
const avail = qty - assigned; const avail = qty - assigned;
@@ -100,22 +100,14 @@ export function renderSwList(container: HTMLElement) {
const endDate = new Date(endDateStr); const endDate = new Date(endDateStr);
if (!isNaN(endDate.getTime())) { if (!isNaN(endDate.getTime())) {
endDate.setHours(23, 59, 59, 999); endDate.setHours(23, 59, 59, 999);
if (endDate < new Date()) { if (endDate < new Date()) isExpired = true;
isExpired = true;
}
} }
} }
if (isExpired) { 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>`;
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>`;
} 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>`;
}
} else { } else {
if (asset.유지보수여부) { 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>`;
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 {
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'); 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); }); tr.querySelector('.btn-users')?.addEventListener('click', (e) => { e.stopPropagation(); openSwUserModal(asset); });
tbody.appendChild(tr); tbody.appendChild(tr);
}); });
createIcons({ icons: { Edit2, Users } }); createIcons({ icons: { Edit2, Users, RefreshCcw } });
}; };
document.getElementById('filter-keyword')?.addEventListener('input', updateTable); document.getElementById('filter-keyword')?.addEventListener('input', updateTable);