11 Commits

Author SHA1 Message Date
d711af7f69 feat: 엑셀 양식 고도화 및 DB/UI 연동 최적화 (드롭다운, 상세위치, 데이터 정합성)
1. exceljs 도입: 엑셀 파일 내 실제 드롭다운(건물-상세위치 연동) 구현\n2. 업로드 프리뷰: 위치/상세위치 Select Box 전환 및 실시간 동기화\n3. DB 마이그레이션: user_name, mainboard, detail_location 컬럼 자동화\n4. 양식 보강: 시트별 커스텀 유형 적용 및 누락 필드(모델명, 담당자 부, 용도/상세 등) 추가\n5. UI 개선: 편집 폰트 색상(#FF3D00) 고정 및 지능형 레드 박스 강조 로직 적용
2026-04-24 15:35:59 +09:00
ab0d25b827 docs: Add branch difference summaries for Gitea issues 2026-04-23 20:44:47 +09:00
d7af75976e fix: Use absolute API paths in upload modal and fix cloud endpoint 2026-04-23 20:34:56 +09:00
dde3aefaac fix: Ensure upload preview modal opens and add debug logs 2026-04-23 20:28:05 +09:00
1fbd297988 feat: Add bulk asset code generation in upload review modal 2026-04-23 20:25:58 +09:00
4b5e25fd3f feat: Implement Excel bulk upload with review modal and domain support 2026-04-23 20:14:51 +09:00
367f72673d feat: 운영 서비스 도메인 관리 기능 추가 및 UI 간격 조정 2026-04-23 20:06:56 +09:00
9fcecd4bf5 feat: 소프트웨어 자산 관리 기능 고도화 및 대시보드 누적 비용 분석 기능 추가 2026-04-23 19:47:07 +09:00
d125de1902 fix: SW modal type switching now works dynamically like HW modal (hidden input ID collision resolved) 2026-04-23 18:53:10 +09:00
d8a0c47fb3 fix: restore Cloud tab under SW menu, change date fields to yyyy-mm-dd, add start_date field 2026-04-23 18:40:58 +09:00
4b88ac01a4 fix: resolve all TypeScript build errors after Setting branch merge 2026-04-23 18:36:33 +09:00
28 changed files with 2703 additions and 653 deletions

58
branch_diff_issues.md Normal file
View File

@@ -0,0 +1,58 @@
# ITAM 프로젝트 브랜치별 변경 사항 및 이슈 정리
본 문서는 `setting` 브랜치를 기준으로 `SW_Table`, `Operation_Table`, `Upload` 브랜치의 주요 변경 사항을 정리한 내용입니다. Gitea 이슈 등록 시 참고하시기 바랍니다.
---
## 1. [SW_Table] 소프트웨어 자산 관리 고도화 및 대시보드 강화
**제목:** `[SW_Table] 소프트웨어 자산 관리 고도화 및 대시보드 강화`
### 주요 변경 사항
- **SW 상세 모달 리팩토링**
- 구독형, 영구형, 클라우드 자산 유형에 따른 동적 필드 전환 기능 구현
- 자산 유형 명칭 일원화 및 필드 매핑 로직 개선
- **데이터 표준화 및 확장**
- 시작일/만료일 'yyyy-mm-dd' 형식 통일 및 데이터 일관성 확보
- 클라우드 자산 통합 관리 및 관련 스키마 확장
- **대시보드 분석 기능 강화**
- 월별 누적 비용 분석 그래프 도입
- 카테고리별 자산 보유 현황 및 비용 통계 시각화 고도화
- **사용자 관리 개선**
- SW 사용자 할당 및 이력 관리 기능 강화 (`SWUserModal` 도입)
---
## 2. [Operation_Table] 운영 서비스 도메인 관리 모듈 및 UI 최적화
**제목:** `[Operation_Table] 운영 서비스 도메인 관리 모듈 및 UI 최적화`
### 주요 변경 사항
- **도메인 관리 모듈 신규 도입**
- `ops_domain_assets` 테이블 신규 생성 및 서버 API 연동
- 유형(호스팅/SSL/도메인/네임서버), 법인, 서비스명, 관리도메인 등 상세 필드 관리
- **도메인 전용 UI 구현**
- 도메인 전용 등록/수정 모달 및 리스트 뷰 인터페이스 구축
- **사용자 경험(UX) 및 스타일 최적화**
- 상단바와 본문 사이 간격 조정 (여백 최적화)
- 전역 스타일 가이드에 맞춘 UI 레이아웃 정밀 조정
- **기능 통합**
- SW_Table의 모든 고도화 사항을 포함하여 운영 환경에 맞춰 통합 완료
---
## 3. [Upload] 엑셀 대량 업로드 워크플로우 및 자산코드 자동 생성
**제목:** `[Upload] 엑셀 대량 업로드 워크플로우 및 자산코드 자동 생성`
### 주요 변경 사항
- **통합 엑셀 업로드 시스템**
- 9개 자산 카테고리(HW, SW, 클라우드, 도메인)를 아우르는 통합 엑셀 양식 파싱 엔진 구현
- **업로드 데이터 검토 프로세스 (`UploadPreviewModal`)**
- 업로드 전 데이터를 미리 확인하고 검증할 수 있는 중간 검토 모달 도입
- 시트별 데이터 요약 및 상세 내역 확인 기능 제공
- **자산코드 일괄 생성 기능**
- 하드웨어 자산 대상, 카테고리별 접두사 및 구매연월 기반 자동 번호 부여 시스템 구축
- 서버 API와 연동된 중복 방지 및 자동 증분 로직 적용
- **안정성 및 네트워크 최적화**
- 대량 데이터 처리를 위한 배치 저장 API(Port 3000) 연동 및 절대 경로 통신 적용

View File

@@ -37,6 +37,7 @@ async function initDB() {
details TEXT, details TEXT,
current_org VARCHAR(255), current_org VARCHAR(255),
prev_org VARCHAR(255), prev_org VARCHAR(255),
user_name VARCHAR(100) COMMENT '사용자',
location VARCHAR(255), location VARCHAR(255),
manager_main VARCHAR(100), manager_main VARCHAR(100),
manager_sub VARCHAR(100), manager_sub VARCHAR(100),
@@ -99,6 +100,7 @@ async function initDB() {
price VARCHAR(100) COMMENT '금액', price VARCHAR(100) COMMENT '금액',
purchase_date VARCHAR(50) COMMENT '구매일', purchase_date VARCHAR(50) COMMENT '구매일',
start_date VARCHAR(50) COMMENT '시작일', start_date VARCHAR(50) COMMENT '시작일',
expiry_date VARCHAR(50) COMMENT '만료일',
vendor VARCHAR(255) COMMENT '납품업체', vendor VARCHAR(255) COMMENT '납품업체',
remarks TEXT COMMENT '비고', remarks TEXT COMMENT '비고',
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
@@ -138,11 +140,29 @@ async function initDB() {
await connection.query(` await connection.query(`
CREATE TABLE asset_logs ( CREATE TABLE asset_logs (
id VARCHAR(50) PRIMARY KEY, id INT AUTO_INCREMENT PRIMARY KEY,
asset_id VARCHAR(50), asset_id VARCHAR(50),
log_date VARCHAR(50), log_date VARCHAR(50),
log_user VARCHAR(100), log_user VARCHAR(100),
details TEXT, details TEXT,
cost DECIMAL(15,2) DEFAULT 0,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
`);
await connection.query(`
CREATE TABLE ops_domain_assets (
id VARCHAR(50) PRIMARY KEY,
type VARCHAR(50) COMMENT '유형',
corp VARCHAR(100) COMMENT '법인',
service_name VARCHAR(255) COMMENT '서비스명',
domain_name VARCHAR(255) COMMENT '관리도메인',
start_date VARCHAR(50) COMMENT '시작일',
expiry_date VARCHAR(50) COMMENT '만료일',
price VARCHAR(100) COMMENT '금액',
manager_main VARCHAR(100) COMMENT '담당자',
manager_sub VARCHAR(100) COMMENT '담당자(부)',
remarks TEXT COMMENT '비고',
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4; ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
`); `);

962
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@@ -17,6 +17,7 @@
"dependencies": { "dependencies": {
"cors": "^2.8.6", "cors": "^2.8.6",
"dotenv": "^17.4.2", "dotenv": "^17.4.2",
"exceljs": "^4.4.0",
"express": "^5.2.1", "express": "^5.2.1",
"lucide": "^0.364.0", "lucide": "^0.364.0",
"mysql2": "^3.22.1", "mysql2": "^3.22.1",

302
server.js
View File

@@ -26,69 +26,76 @@ const pool = mysql.createPool({
async function ensureTables() { async function ensureTables() {
const connection = await pool.getConnection(); const connection = await pool.getConnection();
try { try {
await connection.query(` // 1. 기본 테이블 생성
CREATE TABLE IF NOT EXISTS cloud_assets (
id VARCHAR(50) PRIMARY KEY,
platform_name VARCHAR(100),
corp VARCHAR(100),
dept VARCHAR(100),
product_name VARCHAR(255),
account_name VARCHAR(255),
pay_method VARCHAR(100),
pay_day VARCHAR(50),
card_num VARCHAR(100),
monthly_fee VARCHAR(100),
remarks TEXT,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
`);
await connection.query(`
CREATE TABLE IF NOT EXISTS asset_logs (
id VARCHAR(50) PRIMARY KEY,
asset_id VARCHAR(50),
log_date VARCHAR(50),
log_user VARCHAR(100),
details TEXT,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
`);
await connection.query(` await connection.query(`
CREATE TABLE IF NOT EXISTS pc_assets ( CREATE TABLE IF NOT EXISTS pc_assets (
id VARCHAR(50) PRIMARY KEY, corp VARCHAR(100), asset_code VARCHAR(100), purchase_date VARCHAR(50), id VARCHAR(50) PRIMARY KEY, corp VARCHAR(100), asset_code VARCHAR(100), purchase_date VARCHAR(50),
type VARCHAR(50), detail_purpose VARCHAR(100), purpose VARCHAR(255), details TEXT, type VARCHAR(50), detail_purpose VARCHAR(100), purpose VARCHAR(255), details TEXT,
current_org VARCHAR(100), prev_org VARCHAR(100), location VARCHAR(255), current_org VARCHAR(100), prev_org VARCHAR(100), user_name VARCHAR(100), location VARCHAR(255), detail_location VARCHAR(255),
manager_main VARCHAR(100), manager_sub VARCHAR(100), ip_address VARCHAR(50), manager_main VARCHAR(100), manager_sub VARCHAR(100), ip_address VARCHAR(100),
remote_tool VARCHAR(100), server_id VARCHAR(100), server_pw VARCHAR(100), remote_tool VARCHAR(100), server_id VARCHAR(100), server_pw VARCHAR(100),
model_name VARCHAR(255), mainboard VARCHAR(255), os VARCHAR(100), cpu VARCHAR(100), ram VARCHAR(100), gpu VARCHAR(100), model_name VARCHAR(255), mainboard VARCHAR(255), os VARCHAR(100), cpu VARCHAR(255), ram VARCHAR(100), gpu VARCHAR(100),
storage1 VARCHAR(100), storage2 VARCHAR(100), storage3 VARCHAR(100), monitoring VARCHAR(100), price VARCHAR(100), remarks TEXT, storage1 VARCHAR(255), storage2 VARCHAR(255), storage3 VARCHAR(255), monitoring VARCHAR(100), price VARCHAR(100), remarks TEXT,
storage_location VARCHAR(255), status VARCHAR(50) storage_location VARCHAR(255), status VARCHAR(50)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4; ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
`); `);
// 다른 하드웨어 테이블들도 동일한 스키마로 생성 (서버, 스토리지, 비품, 모바일)
// 2. 누락된 컬럼 강제 추가 (Migration)
const tables = ['pc_assets', 'server_assets', 'storage_assets', 'equip_assets', 'mobile_assets'];
for (const table of tables) {
const [userCols] = await connection.query(`SHOW COLUMNS FROM ${table} LIKE 'user_name'`);
if (userCols.length === 0) await connection.query(`ALTER TABLE ${table} ADD COLUMN user_name VARCHAR(100) AFTER prev_org`);
const [mbCols] = await connection.query(`SHOW COLUMNS FROM ${table} LIKE 'mainboard'`);
if (mbCols.length === 0) await connection.query(`ALTER TABLE ${table} ADD COLUMN mainboard VARCHAR(255) AFTER model_name`);
const [dlCols] = await connection.query(`SHOW COLUMNS FROM ${table} LIKE 'detail_location'`);
if (dlCols.length === 0) await connection.query(`ALTER TABLE ${table} ADD COLUMN detail_location VARCHAR(255) AFTER location`);
}
// 다른 하드웨어 테이블들도 동일한 스키마로 보장
for (const table of ['server_assets', 'storage_assets', 'equip_assets', 'mobile_assets']) { for (const table of ['server_assets', 'storage_assets', 'equip_assets', 'mobile_assets']) {
await connection.query(`CREATE TABLE IF NOT EXISTS ${table} LIKE pc_assets`); await connection.query(`CREATE TABLE IF NOT EXISTS ${table} LIKE pc_assets`);
} }
await connection.query(`
CREATE TABLE IF NOT EXISTS cloud_assets (
id VARCHAR(50) PRIMARY KEY, platform_name VARCHAR(100), corp VARCHAR(100), dept VARCHAR(100), product_name VARCHAR(255),
account_name VARCHAR(255), pay_method VARCHAR(100), pay_day VARCHAR(50), card_num VARCHAR(100), monthly_fee VARCHAR(100),
remarks TEXT, created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
`);
await connection.query(`
CREATE TABLE IF NOT EXISTS asset_logs (
id INT AUTO_INCREMENT PRIMARY KEY, asset_id VARCHAR(50), log_date VARCHAR(50),
log_user VARCHAR(100), details TEXT, cost DECIMAL(15,2) DEFAULT 0, created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
`);
await connection.query(` await connection.query(`
CREATE TABLE IF NOT EXISTS sw_sub_assets ( CREATE TABLE IF NOT EXISTS sw_sub_assets (
id VARCHAR(50) PRIMARY KEY, corp VARCHAR(100), asset_code VARCHAR(100), id VARCHAR(50) PRIMARY KEY, corp VARCHAR(100), category VARCHAR(100), dept VARCHAR(100), product_name VARCHAR(255),
category VARCHAR(100), dept VARCHAR(100), product_name VARCHAR(255),
license_type VARCHAR(100), quantity INT, price VARCHAR(100), purchase_date VARCHAR(50), license_type VARCHAR(100), quantity INT, price VARCHAR(100), purchase_date VARCHAR(50),
start_date VARCHAR(50), expiry_date VARCHAR(50), vendor VARCHAR(100), remarks TEXT start_date VARCHAR(50), expiry_date VARCHAR(50), vendor VARCHAR(255), remarks TEXT, created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4; ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
`); `);
await connection.query(` await connection.query(`
CREATE TABLE IF NOT EXISTS sw_perm_assets ( CREATE TABLE IF NOT EXISTS sw_perm_assets (
id VARCHAR(50) PRIMARY KEY, corp VARCHAR(100), asset_code VARCHAR(100), id VARCHAR(50) PRIMARY KEY, corp VARCHAR(100), category VARCHAR(100), dept VARCHAR(100), product_name VARCHAR(255),
category VARCHAR(100), dept VARCHAR(100), product_name VARCHAR(255),
license_key VARCHAR(255), quantity INT, price VARCHAR(100), purchase_date VARCHAR(50), license_key VARCHAR(255), quantity INT, price VARCHAR(100), purchase_date VARCHAR(50),
start_date VARCHAR(50), vendor VARCHAR(100), remarks TEXT start_date VARCHAR(50), expiry_date VARCHAR(50), vendor VARCHAR(255), remarks TEXT, created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4; ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
`); `);
await connection.query(` await connection.query(`
CREATE TABLE IF NOT EXISTS sw_users ( CREATE TABLE IF NOT EXISTS sw_users (
id INT AUTO_INCREMENT PRIMARY KEY, sw_id VARCHAR(50), corp VARCHAR(100), dept VARCHAR(100), id INT AUTO_INCREMENT PRIMARY KEY, sw_id VARCHAR(50), corp VARCHAR(100), dept VARCHAR(100),
position VARCHAR(100), user_name VARCHAR(100), usage_period VARCHAR(255), doc_name VARCHAR(255) position VARCHAR(50), user_name VARCHAR(100), usage_period VARCHAR(100), doc_name VARCHAR(255), created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
`);
await connection.query(`
CREATE TABLE IF NOT EXISTS ops_domain_assets (
id VARCHAR(50) PRIMARY KEY, type VARCHAR(50), corp VARCHAR(100), service_name VARCHAR(255), domain_name VARCHAR(255),
start_date VARCHAR(50), expiry_date VARCHAR(50), price VARCHAR(100), manager_main VARCHAR(100),
manager_sub VARCHAR(100), remarks TEXT, created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4; ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
`); `);
@@ -98,6 +105,39 @@ async function ensureTables() {
} }
} }
// 하드웨어 쿼리 헬퍼 (detail_location 추가)
const hardwareInsertSQL = (table) => `
INSERT INTO ${table} (
id, corp, asset_code, purchase_date, type, detail_purpose, purpose, details,
current_org, prev_org, user_name, location, detail_location, manager_main, manager_sub, ip_address,
remote_tool, server_id, server_pw, model_name, mainboard, os, cpu, ram, gpu,
storage1, storage2, storage3, monitoring, price, remarks,
storage_location, status
) VALUES ?
`;
const getHardwareValues = (a) => [
a.id, a.법인||'', a.자산코드||'', a.구매연월||'', a.type||'', a.상세용도||'', a.용도||'', a.상세||'',
a.현사용조직||'', a.이전사용조직||'', a.사용자||'', a.위치||'', a.상세위치||'', a.담당자_정||'', a.담당자_부||'', a.IP주소||'',
a.원격접속||'', a.서버ID||'', a.서버PW||'', a.모델명||'', a.메인보드||'', a.OS||'', a.CPU||'', a.RAM||'', a.GPU||'',
a.SSD1||'', a.SSD2||'', a.HDD1||'', a.모니터링||'', a.금액||'', a.비고||'',
a.보관위치||'', a.현재상태||''
];
const mapHardware = (r, defaultType) => {
const type = r.type || defaultType;
return {
id: r.id, 법인: r.corp, 자산코드: r.asset_code, 구매연월: r.purchase_date, 구매일: r.purchase_date,
type: type, 상세용도: (type !== '개인PC' && !r.detail_purpose) ? type : r.detail_purpose,
용도: r.purpose, 상세: r.details, 사용자: r.user_name, 현사용조직: r.current_org,
이전사용조직: r.prev_org, 위치: r.location, 상세위치: r.detail_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, 메인보드: r.mainboard, OS: r.os, CPU: r.cpu, RAM: r.ram, GPU: r.gpu,
SSD1: r.storage1, SSD2: r.storage2, HDD1: r.storage3, 모니터링: r.monitoring, 금액: r.price,
비고: r.remarks, 보관위치: r.storage_location, 현재상태: r.status
};
};
// 공통 배치 저장 로직 // 공통 배치 저장 로직
async function batchSave(tableName, assets, getQuery) { async function batchSave(tableName, assets, getQuery) {
const connection = await pool.getConnection(); const connection = await pool.getConnection();
@@ -118,76 +158,13 @@ async function batchSave(tableName, assets, getQuery) {
} }
} }
// 하드웨어 쿼리 헬퍼 // --- API 라우트 ---
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, mainboard, os, cpu, ram, gpu,
storage1, storage2, storage3, monitoring, price, remarks,
storage_location, status
) VALUES ?
`;
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.메인보드||'', a.OS||'', a.CPU||'', a.RAM||'', a.GPU||'',
a.SSD1||'', a.SSD2||'', a.HDD1||'', a.모니터링||'', a.금액||'', a.비고||'',
a.보관위치||'', a.현재상태||''
];
const mapHardware = (r, defaultType) => {
const type = r.type || defaultType;
return {
id: r.id,
법인: r.corp,
자산코드: r.asset_code,
구매연월: r.purchase_date,
구매일: r.purchase_date,
type: type,
상세용도: (type !== '개인PC' && !r.detail_purpose) ? type : r.detail_purpose,
용도: 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,
메인보드: r.mainboard,
OS: r.os,
CPU: r.cpu,
RAM: r.ram,
GPU: r.gpu,
SSD1: r.storage1,
SSD2: r.storage2,
HDD1: r.storage3,
모니터링: r.monitoring,
금액: r.price,
비고: r.remarks,
보관위치: r.storage_location,
현재상태: r.status
};
};
// --- API 라우트 정의 ---
// 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');
console.log('🔍 DB Raw Rows (PC):', rows.length, 'items found.');
if (rows.length > 0) console.log('🔍 First row sample:', rows[0]);
res.json(rows.map(r => mapHardware(r, '개인PC'))); res.json(rows.map(r => mapHardware(r, '개인PC')));
} catch (err) { } catch (err) { res.status(500).json({ error: err.message }); }
console.error('❌ DB Query Error (PC):', err.message);
res.status(500).json({ error: err.message });
}
}); });
app.post('/api/pc/batch', async (req, res) => { app.post('/api/pc/batch', async (req, res) => {
@@ -200,7 +177,6 @@ app.post('/api/pc/batch', async (req, res) => {
} catch (err) { res.status(500).json({ error: err.message }); } } catch (err) { res.status(500).json({ error: err.message }); }
}); });
// 서버 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');
@@ -218,7 +194,6 @@ app.post('/api/server/batch', async (req, res) => {
} catch (err) { res.status(500).json({ error: err.message }); } } catch (err) { res.status(500).json({ error: err.message }); }
}); });
// 스토리지 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');
@@ -236,7 +211,6 @@ app.post('/api/storage/batch', async (req, res) => {
} catch (err) { res.status(500).json({ error: err.message }); } } catch (err) { res.status(500).json({ error: err.message }); }
}); });
// 전산비품 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');
@@ -254,7 +228,6 @@ app.post('/api/equip/batch', async (req, res) => {
} catch (err) { res.status(500).json({ error: err.message }); } } catch (err) { res.status(500).json({ error: err.message }); }
}); });
// 모바일 API
app.get('/api/mobile', async (req, res) => { app.get('/api/mobile', async (req, res) => {
try { try {
const [rows] = await pool.query('SELECT * FROM mobile_assets'); const [rows] = await pool.query('SELECT * FROM mobile_assets');
@@ -272,69 +245,44 @@ app.post('/api/mobile/batch', async (req, res) => {
} catch (err) { res.status(500).json({ error: err.message }); } } catch (err) { res.status(500).json({ error: err.message }); }
}); });
// 구독 SW 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 sw_sub_assets'); const [rows] = await pool.query('SELECT * FROM sw_sub_assets');
res.json(rows.map(r => ({ res.json(rows.map(r => ({ id: r.id, type: '구독SW', 법인: r.corp, 분야: r.category, 부서: r.dept, 제품명: r.product_name, 라이선스유형: r.license_type, 수량: r.quantity, 금액: r.price, 구매일: r.purchase_date, 시작일: r.start_date, 만료일: r.expiry_date, 납품업체: r.vendor, 비고: r.remarks })));
id: r.id, type: '구독SW', 법인: r.corp, 자산번호: r.asset_code,
분야: r.category, 부서: r.dept, 제품명: r.product_name,
라이선스유형: r.license_type, 수량: r.quantity, 금액: r.price,
구매일: r.purchase_date, 시작일: r.start_date, 만료일: r.expiry_date,
납품업체: r.vendor, 비고: r.remarks
})));
} catch (err) { res.status(500).json({ error: err.message }); } } catch (err) { res.status(500).json({ error: err.message }); }
}); });
app.post('/api/sw/sub/batch', async (req, res) => { app.post('/api/sw/sub/batch', async (req, res) => {
try { try {
const result = await batchSave('sw_sub_assets', req.body, (assets) => ({ const result = await batchSave('sw_sub_assets', req.body, (assets) => ({
sql: `INSERT INTO sw_sub_assets (id, corp, asset_code, category, dept, product_name, license_type, quantity, price, purchase_date, start_date, expiry_date, vendor, remarks) VALUES ?`, sql: `INSERT INTO sw_sub_assets (id, corp, category, dept, product_name, license_type, quantity, price, purchase_date, start_date, expiry_date, vendor, remarks) VALUES ?`,
values: assets.map(a => [ values: assets.map(a => [a.id, a.법인||'', a.분야||'', a.부서||'', a.제품명||'', a.라이선스유형||'', a.수량||0, a.금액||'', a.구매일||'', a.시작일||'', a.만료일||'', a.납품업체||'', a.비고||''])
a.id, a.법인||'', a.자산번호||'', a.분야||'', a.부서||'', a.제품명||'',
a.라이선스유형||'', a.수량||0, a.금액||'', 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 }); }
}); });
// 영구 SW 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 sw_perm_assets'); const [rows] = await pool.query('SELECT * FROM sw_perm_assets');
res.json(rows.map(r => ({ res.json(rows.map(r => ({ id: r.id, type: '영구SW', 법인: r.corp, 분야: r.category, 부서: r.dept, 제품명: r.product_name, 라이선스키: r.license_key, 수량: r.quantity, 금액: r.price, 구매일: r.purchase_date, 시작일: r.start_date, 만료일: r.expiry_date, 납품업체: r.vendor, 비고: r.remarks })));
id: r.id, type: '영구SW', 법인: r.corp, 자산번호: r.asset_code,
분야: r.category, 부서: r.dept, 제품명: r.product_name,
라이선스키: r.license_key, 수량: r.quantity, 금액: r.price,
구매일: r.purchase_date, 시작일: r.start_date,
납품업체: r.vendor, 비고: r.remarks
})));
} catch (err) { res.status(500).json({ error: err.message }); } } catch (err) { res.status(500).json({ error: err.message }); }
}); });
app.post('/api/sw/perm/batch', async (req, res) => { app.post('/api/sw/perm/batch', async (req, res) => {
try { try {
const result = await batchSave('sw_perm_assets', req.body, (assets) => ({ const result = await batchSave('sw_perm_assets', req.body, (assets) => ({
sql: `INSERT INTO sw_perm_assets (id, corp, asset_code, category, dept, product_name, license_key, quantity, price, purchase_date, start_date, vendor, remarks) VALUES ?`, sql: `INSERT INTO sw_perm_assets (id, corp, category, dept, product_name, license_key, quantity, price, purchase_date, start_date, expiry_date, vendor, remarks) VALUES ?`,
values: assets.map(a => [ values: assets.map(a => [a.id, a.법인||'', a.분야||'', a.부서||'', a.제품명||'', a.라이선스키||'', a.수량||0, a.금액||'', a.구매일||'', a.시작일||'', a.만료일||'', a.납품업체||'', a.비고||''])
a.id, a.법인||'', a.자산번호||'', 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 }); }
}); });
// 클라우드 API
app.get('/api/cloud', async (req, res) => { app.get('/api/cloud', async (req, res) => {
try { try {
const [rows] = await pool.query('SELECT * FROM cloud_assets'); const [rows] = await pool.query('SELECT * FROM cloud_assets');
res.json(rows.map(r => ({ res.json(rows.map(r => ({ id: r.id, type: '클라우드', 플랫폼명: r.platform_name, 법인: r.corp, 부서: r.dept, 제품명: r.product_name, 계정명: r.account_name, 결제수단: r.pay_method, 결제일: r.pay_day, 연결카드번호: r.card_num, 당월청구액: r.monthly_fee, 비고: r.remarks })));
id: r.id, type: '클라우드', 플랫폼명: r.platform_name, 법인: r.corp, 부서: r.dept,
제품명: r.product_name, 계정명: r.account_name, 결제수단: r.pay_method,
결제일: r.pay_day, 연결카드번호: r.card_num, 당월청구액: r.monthly_fee, 비고: r.remarks
})));
} catch (err) { res.status(500).json({ error: err.message }); } } catch (err) { res.status(500).json({ error: err.message }); }
}); });
@@ -348,27 +296,13 @@ app.post('/api/cloud/batch', async (req, res) => {
} catch (err) { res.status(500).json({ error: err.message }); } } catch (err) { res.status(500).json({ error: err.message }); }
}); });
// 로그 API
app.get('/api/logs', async (req, res) => { app.get('/api/logs', async (req, res) => {
try { try {
const [rows] = await pool.query('SELECT * FROM asset_logs ORDER BY log_date DESC'); const [rows] = await pool.query('SELECT * FROM asset_logs ORDER BY log_date DESC');
res.json(rows.map(r => ({ res.json(rows.map(r => ({ id: r.id, assetId: r.asset_id, date: r.log_date, user: r.log_user, details: r.details, cost: r.cost })));
id: r.id, assetId: r.asset_id, date: r.log_date, user: r.log_user, details: r.details
})));
} catch (err) { res.status(500).json({ error: err.message }); } } catch (err) { res.status(500).json({ error: err.message }); }
}); });
app.post('/api/logs/batch', async (req, res) => {
try {
const result = await batchSave('asset_logs', req.body, (assets) => ({
sql: `INSERT INTO asset_logs (id, asset_id, log_date, log_user, details) VALUES ?`,
values: assets.map(a => [a.id, a.assetId||'', a.date||'', a.user||'', a.details||''])
}));
res.json(result);
} catch (err) { res.status(500).json({ error: err.message }); }
});
// SW 사용자 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');
@@ -388,52 +322,44 @@ app.post('/api/sw-users/batch', async (req, res) => {
await connection.query('DELETE FROM sw_users'); await connection.query('DELETE FROM sw_users');
const allUsers = req.body; const allUsers = req.body;
if (allUsers.length > 0) { if (allUsers.length > 0) {
const values = allUsers.flatMap(item => const values = allUsers.flatMap(item => (item.userData || []).map(u => [item.sw_id, u[0], u[1], u[2], u[3], u[4], u[5]]));
(item.userData || []).map(u => [item.sw_id, u[0], u[1], u[2], u[3], u[4], u[5]]) if (values.length > 0) await connection.query('INSERT INTO sw_users (sw_id, corp, dept, position, user_name, usage_period, doc_name) VALUES ?', [values]);
);
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 });
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/ops/domain', async (req, res) => {
app.get('/api/generate-asset-code', async (req, res) => { try {
const { prefix } = req.query; const [rows] = await pool.query('SELECT * FROM ops_domain_assets ORDER BY created_at DESC');
if (!prefix) return res.status(400).json({ error: 'Prefix is required' }); res.json(rows);
} catch (err) { res.status(500).json({ error: err.message }); }
});
app.post('/api/ops/domain/batch', async (req, res) => {
try {
const result = await batchSave('ops_domain_assets', req.body, (assets) => ({
sql: `INSERT INTO ops_domain_assets (id, type, corp, service_name, domain_name, start_date, expiry_date, price, manager_main, manager_sub, remarks) VALUES ?`,
values: assets.map(a => [a.id, a.type||'', a.corp||'', a.service_name||'', a.domain_name||'', a.start_date||'', a.expiry_date||'', a.price||'', a.manager_main||'', a.manager_sub||'', a.remarks||''])
}));
res.json(result);
} catch (err) { res.status(500).json({ error: err.message }); }
});
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 { try {
const tables = ['pc_assets', 'server_assets', 'storage_assets', 'equip_assets', 'mobile_assets']; const tables = ['pc_assets', 'server_assets', 'storage_assets', 'equip_assets', 'mobile_assets'];
let maxNum = 0; let maxNum = 0;
for (const table of tables) { for (const table of tables) {
const [rows] = await pool.query( const [rows] = await pool.query(`SELECT asset_code FROM ${table} WHERE asset_code LIKE ?`, [`${prefix}%`]);
`SELECT asset_code FROM ${table} WHERE asset_code LIKE ?`, rows.forEach(r => { const numPart = r.asset_code.replace(prefix, ''); const num = parseInt(numPart); if (!isNaN(num) && num > maxNum) maxNum = num; });
[`${prefix}%`]
);
rows.forEach(r => {
const numPart = r.asset_code.replace(prefix, '');
const num = parseInt(numPart);
if (!isNaN(num) && num > maxNum) maxNum = num;
});
} }
const nextNum = (maxNum + 1).toString().padStart(4, '0'); const nextNum = (maxNum + 1).toString().padStart(4, '0');
res.json({ nextCode: `${prefix}${nextNum}` }); res.json({ nextCode: `${prefix}${nextNum}` });
} catch (err) { } catch (err) { res.status(500).json({ error: err.message }); }
res.status(500).json({ error: err.message });
}
}); });
// 초기화 및 서버 기동
ensureTables().then(() => { ensureTables().then(() => {
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}`); }).catch(err => { console.error('❌ Failed to start server:', err); });
});
}).catch(err => {
console.error('❌ Failed to start server:', err);
});

View File

@@ -1,26 +1,26 @@
/** /**
* 모든 모달의 공통 기능 (닫기, ESC 처리, 배경 클릭 등)을 관리하는 베이스 모듈입니다. * 모든 모달의 공통 기능 (닫기, ESC 처리, 배경 클릭 등)을 관리하는 베이스 모듈입니다.
*/ */
export function initBaseModal() { export function closeModals() {
const closeAllModals = () => {
const modals = document.querySelectorAll('.modal-overlay'); const modals = document.querySelectorAll('.modal-overlay');
modals.forEach(modal => modal.classList.add('hidden')); modals.forEach(modal => modal.classList.add('hidden'));
}; }
export function initBaseModal() {
// ESC 키로 닫기 // ESC 키로 닫기
window.addEventListener('keydown', (e) => { window.addEventListener('keydown', (e) => {
if (e.key === 'Escape') closeAllModals(); if (e.key === 'Escape') closeModals();
}); });
// 배경(Overlay) 클릭 시 닫기 (동적 생성된 모달 대응을 위해 이벤트 위임 고려 가능하나 일단 단순 구현) // 배경(Overlay) 클릭 시 닫기
document.addEventListener('click', (e) => { document.addEventListener('click', (e) => {
const target = e.target as HTMLElement; const target = e.target as HTMLElement;
if (target.classList.contains('modal-overlay')) { if (target.classList.contains('modal-overlay')) {
closeAllModals(); closeModals();
} }
}); });
return { closeAllModals }; return { closeAllModals: closeModals };
} }
/** /**

View File

@@ -98,7 +98,7 @@ export function openSwUsageDetail(title: string, list: SoftwareAsset[]) {
thead.innerHTML = `<tr><th>No</th><th>법인</th><th>제품명</th><th>수량</th><th>사용중</th><th>사용가능</th></tr>`; thead.innerHTML = `<tr><th>No</th><th>법인</th><th>제품명</th><th>수량</th><th>사용중</th><th>사용가능</th></tr>`;
tbody.innerHTML = ''; tbody.innerHTML = '';
list.forEach((sw, idx) => { list.forEach((sw, idx) => {
const assigned = state.masterData.swUsers.filter(u => u.swId === sw.id).length; const assigned = state.masterData.swUsers.filter(u => u.sw_id === sw.id).length;
const tr = document.createElement('tr'); const tr = document.createElement('tr');
tr.innerHTML = `<td>${idx+1}</td><td>${sw.}</td><td>${sw.}</td><td>${sw.}</td><td>${assigned}</td><td>${Number(sw.) - assigned}</td>`; tr.innerHTML = `<td>${idx+1}</td><td>${sw.}</td><td>${sw.}</td><td>${sw.}</td><td>${assigned}</td><td>${Number(sw.) - assigned}</td>`;
tbody.appendChild(tr); tbody.appendChild(tr);

View File

@@ -0,0 +1,192 @@
import { state } from '../../core/state';
import { closeModals, openModal } from './BaseModal';
import { CORP_LIST } from './SharedData';
import { generateOptionsHTML } from './ModalUtils';
import { createIcons, X, Save, Database, CalendarClock, Edit2 } from 'lucide';
let currentItem: any = null;
const DOMAIN_MODAL_HTML = `
<div id="domain-asset-modal" class="modal-overlay hidden">
<div class="modal-content wide">
<div class="modal-header">
<h2 id="domain-modal-title">도메인 정보</h2>
<div style="display:flex; gap:0.5rem; align-items:center;">
<button id="btn-close-domain-modal" class="btn-icon"><i data-lucide="x"></i></button>
</div>
</div>
<div class="modal-body">
<div class="modal-form-area">
<form id="domain-asset-form" class="grid-form">
<!-- Group 1: 기본 정보 (Service Identity) -->
<div class="form-section-title" style="display:flex; align-items:center; gap:0.5rem;">
<i data-lucide="database" style="width:16px; height:16px; color:var(--primary-color);"></i>
기본 정보 (Identity)
</div>
<div class="form-group">
<label class="required">유형</label>
<select id="domain-type" required>
<option value="호스팅">호스팅</option>
<option value="SSL">SSL</option>
<option value="도메인">도메인</option>
<option value="네임서버">네임서버</option>
</select>
</div>
<div class="form-group">
<label class="required">법인</label>
<select id="domain-corp" required>
${generateOptionsHTML(CORP_LIST)}
</select>
</div>
<div class="form-group">
<label class="required">서비스명</label>
<input type="text" id="domain-service-name" placeholder="예: 그룹웨어, 홈페이지" required>
</div>
<div class="form-group">
<label class="required">관리도메인</label>
<input type="text" id="domain-name" placeholder="예: hmac.kr" required>
</div>
<!-- Group 2: 계약 및 담당 정보 (Contract & Manager) -->
<div class="form-section-title" style="display:flex; align-items:center; gap:0.5rem; margin-top:1.5rem;">
<i data-lucide="calendar-clock" style="width:16px; height:16px; color:var(--primary-color);"></i>
계약 및 담당 정보
</div>
<div class="form-group">
<label>계약 시작일</label>
<input type="date" id="domain-start-date">
</div>
<div class="form-group">
<label>계약 만료일</label>
<input type="date" id="domain-expiry-date">
</div>
<div class="form-group">
<label>도입 금액</label>
<input type="text" id="domain-price" oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/\\B(?=(\\d{3})+(?!\\d))/g, ',')" placeholder="0">
</div>
<div class="form-group">
<label>담당자</label>
<input type="text" id="domain-manager-main">
</div>
<div class="form-group">
<label>담당자(부)</label>
<input type="text" id="domain-manager-sub">
</div>
<!-- Group 3: 기타 (Additional) -->
<div class="form-section-title" style="display:flex; align-items:center; gap:0.5rem; margin-top:1.5rem;">
<i data-lucide="edit-2" style="width:16px; height:16px; color:var(--primary-color);"></i>
기타 사항
</div>
<div class="form-group full-width">
<label>비고</label>
<textarea id="domain-remarks" rows="3" style="width:100%; border:1px solid var(--border-color); border-radius:4px; padding:0.625rem;"></textarea>
</div>
</form>
</div>
</div>
<div class="modal-footer">
<button id="btn-cancel-domain" class="btn btn-outline">취소</button>
<button id="btn-save-domain" class="btn btn-primary"><i data-lucide="save"></i> 저장하기</button>
</div>
</div>
</div>
`;
export function initDomainModal() {
if (!document.getElementById('domain-asset-modal')) {
document.body.insertAdjacentHTML('beforeend', DOMAIN_MODAL_HTML);
}
const modal = document.getElementById('domain-asset-modal')!;
document.getElementById('btn-close-domain-modal')?.addEventListener('click', () => closeModals());
document.getElementById('btn-cancel-domain')?.addEventListener('click', () => closeModals());
document.getElementById('btn-save-domain')?.addEventListener('click', () => saveDomain());
}
export function openDomainModal(item: any = null) {
currentItem = item;
const isEdit = !!item;
const titleEl = document.getElementById('domain-modal-title');
if (titleEl) titleEl.textContent = isEdit ? '도메인 정보 수정' : '신규 도메인 등록';
const setVal = (id: string, val: any) => {
const el = document.getElementById(id) as HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
if (el) el.value = val || '';
};
setVal('domain-type', item?.type || '호스팅');
setVal('domain-corp', item?.corp || '');
setVal('domain-service-name', item?.service_name || '');
setVal('domain-name', item?.domain_name || '');
setVal('domain-start-date', item?.start_date || '');
setVal('domain-expiry-date', item?.expiry_date || '');
setVal('domain-price', item?.price || '');
setVal('domain-manager-main', item?.manager_main || '');
setVal('domain-manager-sub', item?.manager_sub || '');
setVal('domain-remarks', item?.remarks || '');
openModal('domain-asset-modal');
createIcons({ icons: { X, Save, Database, CalendarClock, Edit2 } });
}
async function saveDomain() {
const getVal = (id: string) => (document.getElementById(id) as HTMLInputElement)?.value || '';
const newDomain = {
id: currentItem ? currentItem.id : `DOM-${Date.now()}`,
type: getVal('domain-type'),
corp: getVal('domain-corp'),
service_name: getVal('domain-service-name'),
domain_name: getVal('domain-name'),
start_date: getVal('domain-start-date'),
expiry_date: getVal('domain-expiry-date'),
price: getVal('domain-price'),
manager_main: getVal('domain-manager-main'),
manager_sub: getVal('domain-manager-sub'),
remarks: getVal('domain-remarks')
};
if (!newDomain.service_name || !newDomain.domain_name) {
alert('서비스명과 관리도메인은 필수 입력 사항입니다.');
return;
}
if (currentItem) {
const idx = state.masterData.domain.findIndex(d => d.id === currentItem.id);
if (idx > -1) state.masterData.domain[idx] = newDomain;
} else {
state.masterData.domain.push(newDomain);
}
try {
const response = await fetch(`http://${location.hostname}:3000/api/ops/domain/batch`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(state.masterData.domain)
});
if (response.ok) {
// alert('성공적으로 저장되었습니다.');
closeModals();
window.dispatchEvent(new CustomEvent('refresh-view'));
} else {
throw new Error('DB 저장 실패');
}
} catch (err) {
console.error(err);
alert('저장 중 오류가 발생했습니다.');
}
}

View File

@@ -1,6 +1,6 @@
import { state, saveHardwareAsset, deleteHardwareAsset } from '../../core/state'; import { state, saveHardwareAsset, deleteHardwareAsset } from '../../core/state';
import { HardwareAsset } from '../../core/excelHandler'; import { HardwareAsset } from '../../core/excelHandler';
import { closeModals } from './BaseModal'; import { openModal } from './BaseModal';
import { ASSET_SCHEMA, UI_TEXT } from '../../core/schema'; import { ASSET_SCHEMA, UI_TEXT } from '../../core/schema';
import { createIcons, History, Plus, X, Save, Edit2, RotateCcw, Paperclip } from 'lucide'; import { createIcons, History, Plus, X, Save, Edit2, RotateCcw, Paperclip } from 'lucide';
import { CORP_LIST, ORG_LIST, HW_TYPE_LIST, LOCATION_DATA, TYPE_PREFIX_MAP } from './SharedData'; import { CORP_LIST, ORG_LIST, HW_TYPE_LIST, LOCATION_DATA, TYPE_PREFIX_MAP } from './SharedData';
@@ -383,11 +383,10 @@ export function initHwModal(onSave: () => void, closeModalsCb: () => void) {
{ key: ASSET_SCHEMA.MODEL.key, label: ASSET_SCHEMA.MODEL.ui } { key: ASSET_SCHEMA.MODEL.key, label: ASSET_SCHEMA.MODEL.ui }
]; ];
const isNewAsset = !currentAsset || !currentAsset.; if (!currentAsset || !currentAsset.) {
if (isNewAsset) {
diffLogs.push('자산 신규 등록'); diffLogs.push('자산 신규 등록');
} else { } else {
const asset = currentAsset!;
const newIp = String(getFieldValue('hw-IP주소') || getFieldValue('hw-IP주소-non-server') || '').trim(); const newIp = String(getFieldValue('hw-IP주소') || getFieldValue('hw-IP주소-non-server') || '').trim();
const newLocation = String(isOpType ? extracted[ASSET_SCHEMA.STORE_LOC.key] : getCombinedLocation('hw-위치-빌딩', 'hw-위치-상세', 'hw-위치-기타') || '').trim(); const newLocation = String(isOpType ? extracted[ASSET_SCHEMA.STORE_LOC.key] : getCombinedLocation('hw-위치-빌딩', 'hw-위치-상세', 'hw-위치-기타') || '').trim();
@@ -396,19 +395,19 @@ export function initHwModal(onSave: () => void, closeModalsCb: () => void) {
let newVal = ''; let newVal = '';
if (f.key === ASSET_SCHEMA.IP_ADDR.key) { if (f.key === ASSET_SCHEMA.IP_ADDR.key) {
oldVal = String(currentAsset[ASSET_SCHEMA.IP_ADDR.key] || '').trim(); oldVal = String(asset[ASSET_SCHEMA.IP_ADDR.key] || '').trim();
newVal = newIp; newVal = newIp;
} else if (f.key === ASSET_SCHEMA.LOCATION.key) { } else if (f.key === ASSET_SCHEMA.LOCATION.key) {
oldVal = String(currentAsset[ASSET_SCHEMA.LOCATION.key] || '').trim(); oldVal = String(asset[ASSET_SCHEMA.LOCATION.key] || '').trim();
newVal = newLocation; newVal = newLocation;
} else if (f.key === ASSET_SCHEMA.MANAGER_MAIN.key) { } else if (f.key === ASSET_SCHEMA.MANAGER_MAIN.key) {
oldVal = String(currentAsset[ASSET_SCHEMA.MANAGER_MAIN.key] || '').trim(); oldVal = String(asset[ASSET_SCHEMA.MANAGER_MAIN.key] || '').trim();
newVal = String(extracted[ASSET_SCHEMA.MANAGER_MAIN.key] || '').trim(); newVal = String(extracted[ASSET_SCHEMA.MANAGER_MAIN.key] || '').trim();
} else if (f.key === '상세용도') { } else if (f.key === '상세용도') {
oldVal = String(currentAsset. || '').trim(); oldVal = String(asset. || '').trim();
newVal = String((extracted.type !== 'PC' && extracted.type !== '개인PC') ? extracted.type : (extracted. || '')).trim(); newVal = String((extracted.type !== 'PC' && extracted.type !== '개인PC') ? extracted.type : (extracted. || '')).trim();
} else { } else {
oldVal = String((currentAsset as any)[f.key] || '').trim(); oldVal = String((asset as any)[f.key] || '').trim();
newVal = String(extracted[f.key] || '').trim(); newVal = String(extracted[f.key] || '').trim();
} }

View File

@@ -166,7 +166,7 @@ export function createModalFrameHTML(
<div class="modal-form-area"> <div class="modal-form-area">
<form id="${idPrefix}-asset-form" class="grid-form"> <form id="${idPrefix}-asset-form" class="grid-form">
<input type="hidden" id="${idPrefix}-asset-id" /> <input type="hidden" id="${idPrefix}-asset-id" />
<input type="hidden" id="${idPrefix}-asset-type" /> <input type="hidden" id="${idPrefix}-asset-type-hidden" />
${formContent} ${formContent}
</form> </form>
</div> </div>
@@ -211,3 +211,35 @@ export function autoExtractForm(idPrefix: string, fieldMap: Record<string, strin
return result; return result;
} }
/**
* 10. 날짜 자동 마스킹 및 포커스 제어 (Auto-jump)
*/
export function applyDateMask(el: HTMLInputElement) {
if (!el) return;
el.placeholder = 'YYYY-MM-DD';
el.maxLength = 10;
el.addEventListener('input', (e) => {
let value = el.value.replace(/[^0-9]/g, ''); // 숫자만 남김
let result = '';
if (value.length <= 4) {
result = value;
} else if (value.length <= 6) {
result = value.substring(0, 4) + '-' + value.substring(4);
} else {
result = value.substring(0, 4) + '-' + value.substring(4, 6) + '-' + value.substring(6, 10);
}
el.value = result;
});
// 엔터 키나 입력 완료 시 유효성 검사 (선택 사항)
el.addEventListener('blur', () => {
const val = el.value;
if (val && !/^\d{4}-\d{2}-\d{2}$/.test(val)) {
// 형식이 맞지 않으면 경고 효과 등을 줄 수 있음
}
});
}

View File

@@ -1,49 +1,34 @@
import { state } from '../../core/state'; import { state } from '../../core/state';
import { SoftwareAsset } from '../../core/excelHandler'; import { SoftwareAsset } from '../../core/excelHandler';
import { closeModals } from './BaseModal'; import { openModal, closeModals } from './BaseModal';
import { openSwUserModal } from './SWUserModal'; import { openSwUserModal } from './SWUserModal';
import { ASSET_SCHEMA, UI_TEXT } from '../../core/schema'; import { createIcons, History, Plus, X, Save, Edit2, RotateCcw, Calendar } from 'lucide';
import { createIcons, History, Plus, X, Save, Edit2, RotateCcw } from 'lucide';
import { CORP_LIST } from './SharedData'; import { CORP_LIST } from './SharedData';
import { import {
generateOptionsHTML, generateOptionsHTML,
setFieldValue, setFieldValue,
getFieldValue, getFieldValue,
setEditLock, setEditLock,
createModalFrameHTML, applyDateMask
autoFillForm,
autoExtractForm
} from './ModalUtils'; } from './ModalUtils';
let currentSwAsset: SoftwareAsset | null = null; let currentSwAsset: SoftwareAsset | null = null;
let isEditMode = false; let isEditMode = false;
/** const SW_MODAL_HTML = `
* 소프트웨어 필드 매핑 (통합 스키마 기반) <div id="sw-asset-modal" class="modal-overlay hidden">
* 소프트웨어는 자산번호를 사용하지 않으므로 제거함 <div class="modal-content wide">
*/ <div class="modal-header">
const SW_FIELD_MAP: Record<string, string> = { <h2 id="sw-modal-title">소프트웨어 상세 정보</h2>
'법인': ASSET_SCHEMA.CORP.key, <button id="btn-close-sw-modal" class="btn-icon" aria-label="닫기"><i data-lucide="x"></i></button>
'제품명': ASSET_SCHEMA.PRODUCT.key, </div>
'수량': ASSET_SCHEMA.QTY.key, <div class="modal-body">
'금액': ASSET_SCHEMA.PRICE.key, <div class="modal-body-split">
'구매일': ASSET_SCHEMA.PURCHASE_YM.key, <div class="modal-form-area">
'납품업체': ASSET_SCHEMA.VENDOR.key, <form id="sw-asset-form" class="grid-form">
'비고': ASSET_SCHEMA.REMARKS.key, <input type="hidden" id="sw-asset-id" />
'플랫폼명': ASSET_SCHEMA.PLATFORM.key,
'부서': '부서',
'계정명': ASSET_SCHEMA.ACCOUNT.key,
'결제수단': ASSET_SCHEMA.PAY_METHOD.key,
'연결카드번호': ASSET_SCHEMA.CARD_NUM.key,
'결제일': ASSET_SCHEMA.PAY_DAY.key,
'당월청구액': ASSET_SCHEMA.BILLING.key,
'라이선스유형': ASSET_SCHEMA.LICENSE_TYPE.key,
'만료일': ASSET_SCHEMA.EXPIRY.key,
'라이선스키': ASSET_SCHEMA.LICENSE_KEY.key
};
const SW_FORM_HTML = ` <!-- Group 1: 기본 정보 (Identity) -->
<!-- Group 1: 기본 정보 -->
<div class="form-section-title">기본 정보 (Identity)</div> <div class="form-section-title">기본 정보 (Identity)</div>
<div class="form-group"> <div class="form-group">
<label for="sw-asset-type">자산 유형</label> <label for="sw-asset-type">자산 유형</label>
@@ -54,78 +39,192 @@ const SW_FORM_HTML = `
</select> </select>
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="sw-법인">${ASSET_SCHEMA.CORP.ui}</label> <label for="sw-분야">분야</label>
<select id="sw-분야" required>
<option value="업무공통">업무공통</option>
<option value="개발S/W">개발S/W</option>
<option value="디자인">디자인</option>
<option value="설계S/W">설계S/W</option>
</select>
</div>
<div class="form-group">
<label for="sw-법인">법인</label>
<select id="sw-법인" required>${generateOptionsHTML(CORP_LIST)}</select> <select id="sw-법인" required>${generateOptionsHTML(CORP_LIST)}</select>
</div> </div>
<div class="form-group full-width"> <div class="form-group full-width">
<label for="sw-제품명">${ASSET_SCHEMA.PRODUCT.ui}</label> <label for="sw-제품명">제품명 / 서비스명</label>
<input type="text" id="sw-제품명" required /> <input type="text" id="sw-제품명" required />
</div> </div>
<div class="form-group cloud-only"><label for="sw-플랫폼명">${ASSET_SCHEMA.PLATFORM.ui}</label><input type="text" id="sw-플랫폼명" placeholder="예: AWS, Cafe24" /></div> <div class="form-group cloud-only">
<div class="form-group cloud-only"><label for="sw-부서">담당부서</label><input type="text" id="sw-부서" /></div> <label for="sw-플랫폼명">플랫폼명</label>
<input type="text" id="sw-플랫폼명" placeholder="예: AWS, Cafe24" />
<!-- Group 2: 라이선스 및 계약 --> </div>
<div class="form-section-title">라이선스 및 계약 정보</div> <div class="form-group">
<div class="form-group sw-standard-field" id="sw-license-type-group"><label for="sw-라이선스유형">${ASSET_SCHEMA.LICENSE_TYPE.ui}</label><input type="text" id="sw-라이선스유형" /></div> <label for="sw-부서">조직 / 부서</label>
<div class="form-group sw-standard-field" id="sw-license-key-group"><label for="sw-라이선스키">${ASSET_SCHEMA.LICENSE_KEY.ui}</label><input type="text" id="sw-라이선스키" /></div> <input type="text" id="sw-부서" />
<div class="form-group sw-standard-field"><label for="sw-수량">${ASSET_SCHEMA.QTY.ui}</label><input type="number" id="sw-수량" min="0" /></div> </div>
<div class="form-group sw-standard-field"><label for="sw-금액">${ASSET_SCHEMA.PRICE.ui}</label><input type="text" id="sw-금액" oninput="this.value=this.value.replace(/[^0-9]/g,'').replace(/\\\\B(?=(\\\\d{3})+(?!\\\\d))/g,',')" /></div>
<!-- Group 2: 라이선스 및 계약 (License/Contract) -->
<div class="form-group cloud-only"><label for="sw-계정명">${ASSET_SCHEMA.ACCOUNT.ui}</label><input type="text" id="sw-계정명" /></div> <div class="form-section-title">라이선스 및 계약 정보</div>
<div class="form-group cloud-only"><label for="sw-결제수단">${ASSET_SCHEMA.PAY_METHOD.ui}</label><select id="sw-결제수단"><option value="">선택안함</option><option value="법인카드">법인카드</option><option value="인보이스">인보이스</option></select></div> <div class="form-group sw-standard-field">
<div class="form-group cloud-only"><label for="sw-연결카드번호">${ASSET_SCHEMA.CARD_NUM.ui}</label><input type="text" id="sw-연결카드번호" maxlength="4" /></div> <label for="sw-수량">보유 수량</label>
<div class="form-group cloud-only"><label for="sw-결제일">${ASSET_SCHEMA.PAY_DAY.ui}</label><input type="number" id="sw-결제일" min="1" max="31" /></div> <input type="number" id="sw-수량" min="0" />
<div class="form-group cloud-only"><label for="sw-당월청구액">${ASSET_SCHEMA.BILLING.ui}</label><input type="text" id="sw-당월청구액" oninput="this.value=this.value.replace(/[^0-9]/g,'').replace(/\\\\B(?=(\\\\d{3})+(?!\\\\d))/g,',')" /></div> </div>
<div class="form-group sw-standard-field">
<!-- Group 4: 관리 정보 --> <label for="sw-금액">도입 금액</label>
<div class="form-section-title">관리 및 비고</div> <input type="text" id="sw-금액" oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/\\B(?=(\\d{3})+(?!\\d))/g, ',')" />
<div class="form-group sw-standard-field"><label for="sw-구매일">${ASSET_SCHEMA.PURCHASE_YM.ui}</label><input type="text" id="sw-구매일" placeholder="YYYYMM" maxlength="6" /></div> </div>
<div class="form-group sw-standard-field" id="sw-expiry-group"><label for="sw-만료일">${ASSET_SCHEMA.EXPIRY.ui}</label><input type="text" id="sw-만료일" /></div>
<div class="form-group sw-standard-field"><label for="sw-납품업체">${ASSET_SCHEMA.VENDOR.ui}</label><input type="text" id="sw-납품업체" /></div> <!-- Group 3: 클라우드 전용 정보 (Cloud Specific) -->
<div class="form-group full-width"><label for="sw-비고">${ASSET_SCHEMA.REMARKS.ui}</label><textarea id="hw-비고" rows="2"></textarea></div> <div class="form-group cloud-only">
<label for="sw-계정명">계정명 (이메일)</label>
<div id="sw-user-section" class="user-management-section" style="margin-top: 2rem;"> <input type="text" id="sw-계정명" />
<div class="section-header" style="display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem;"> </div>
<h3 style="font-size:1rem; font-weight:600;">사용자 할당 현황</h3> <div class="form-group cloud-only">
<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> <label for="sw-결제수단">결제수단</label>
<select id="sw-결제수단">
<option value="">선택안함</option>
<option value="법인카드">법인카드</option>
<option value="인보이스">인보이스</option>
</select>
</div>
<div class="form-group cloud-only">
<label for="sw-연결카드번호">연결카드번호(뒷4자리)</label>
<input type="text" id="sw-연결카드번호" maxlength="4" />
</div>
<div class="form-group cloud-only">
<label for="sw-결제일">결제일 (기준일)</label>
<input type="number" id="sw-결제일" min="1" max="31" />
</div>
<div class="form-group cloud-only">
<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>
<!-- Group 4: 관리 정보 (Management) -->
<div class="form-section-title">관리 및 비고</div>
<div class="form-group sw-standard-field">
<label for="sw-구매일">구매일</label>
<div style="display:flex; gap:0.25rem; align-items:center; position:relative;">
<input type="text" id="sw-구매일" style="flex:1;" />
<button type="button" class="btn-icon" onclick="const p = document.getElementById('sw-구매일-picker'); p.value = document.getElementById('sw-구매일').value; p.showPicker();" style="padding:0.25rem;">
<i data-lucide="calendar" style="width:18px; height:18px; color:var(--primary-color);"></i>
</button>
<input type="date" id="sw-구매일-picker" style="position:absolute; width:0; height:0; opacity:0; pointer-events:none;" onchange="document.getElementById('sw-구매일').value = this.value" tabindex="-1" />
</div>
</div>
<div class="form-group sw-standard-field">
<label for="sw-납품업체">납품업체</label>
<input type="text" id="sw-납품업체" />
</div>
<div class="form-group sw-standard-field">
<label for="sw-시작일">시작일 (구독/유지보수)</label>
<div style="display:flex; gap:0.25rem; align-items:center; position:relative;">
<input type="text" id="sw-시작일" style="flex:1;" />
<button type="button" class="btn-icon" onclick="const p = document.getElementById('sw-시작일-picker'); p.value = document.getElementById('sw-시작일').value; p.showPicker();" style="padding:0.25rem;">
<i data-lucide="calendar" style="width:18px; height:18px; color:var(--primary-color);"></i>
</button>
<input type="date" id="sw-시작일-picker" style="position:absolute; width:0; height:0; opacity:0; pointer-events:none;" onchange="document.getElementById('sw-시작일').value = this.value" tabindex="-1" />
</div>
</div>
<div class="form-group sw-standard-field" id="sw-expiry-group">
<label for="sw-만료일">만료일 (종료일)</label>
<div style="display:flex; gap:0.25rem; align-items:center; position:relative;">
<input type="text" id="sw-만료일" style="flex:1;" />
<button type="button" class="btn-icon" onclick="const p = document.getElementById('sw-만료일-picker'); p.value = document.getElementById('sw-만료일').value; p.showPicker();" style="padding:0.25rem;">
<i data-lucide="calendar" style="width:18px; height:18px; color:var(--primary-color);"></i>
</button>
<input type="date" id="sw-만료일-picker" style="position:absolute; width:0; height:0; opacity:0; pointer-events:none;" onchange="document.getElementById('sw-만료일').value = this.value" tabindex="-1" />
</div>
</div>
<div class="form-group full-width">
<label for="sw-비고">비고</label>
<textarea id="sw-비고" rows="2"></textarea>
</div>
</form>
<div id="sw-user-section" class="user-management-section" style="margin-top: 2rem; border-top: 1px solid var(--border-color); padding-top: 1.5rem;">
<button type="button" id="btn-open-sw-user" class="btn btn-outline btn-sm" title="사용자 관리">
<i data-lucide="users" style="width:16px; height:16px; margin-right:4px;"></i> 사용자 관리
</button>
</div>
</div>
<div class="modal-history-area">
<div class="history-header" style="display:flex; justify-content:space-between; align-items:center;">
<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="refresh-ccw" style="width:14px; height:14px;"></i>
</button>
</div>
<div id="sw-history-list" class="history-timeline"></div>
</div>
</div>
</div>
<div class="modal-footer">
<button id="btn-delete-sw-asset" class="btn btn-outline btn-danger">삭제</button>
<div class="footer-actions">
<button id="btn-revert-sw-edit" class="btn btn-outline hidden">수정 취소</button>
<button id="btn-cancel-sw-modal" class="btn btn-outline">닫기</button>
<button id="btn-save-sw-asset" class="btn btn-primary">수정</button>
</div>
</div>
</div>
</div>
<!-- 계약/유지보수 기간 갱신 및 업데이트 모달 -->
<div id="sw-update-modal" class="modal-overlay hidden" style="z-index: 1100;">
<div class="modal-content" style="max-width: 500px;">
<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="text" id="sw-update-start" placeholder="YYYY-MM-DD" style="flex: 1;" />
<span>~</span>
<input type="text" id="sw-update-end" placeholder="YYYY-MM-DD" 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, '') ? Number(this.value.replace(/[^0-9]/g, '')).toLocaleString() : ''" 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>
<div id="sw-assigned-users-summary" class="user-summary-grid"></div>
</div> </div>
`; `;
function renderSwHistory(swId: string) {
const container = document.getElementById('sw-history-list');
if (!container) return;
const logs = (state.masterData.logs || []).filter(l => l.assetId === swId).sort((a,b) => new Date(b.date).getTime() - new Date(a.date).getTime());
if (logs.length === 0) { container.innerHTML = '<div class="empty-history">수정 이력이 없습니다.</div>'; return; }
container.innerHTML = logs.map(l => `
<div class="history-item">
<div class="history-date">${l.date}</div>
<div class="history-user">${l.user}</div>
<div class="history-details">${l.details.replace(/\n/g, '<br>')}</div>
</div>
`).join('');
}
function renderUserSummary(swId: string) {
const container = document.getElementById('sw-assigned-users-summary');
if (!container) return;
const userMapping = state.masterData.swUsers.find(u => u.sw_id === swId);
if (!userMapping || !userMapping.userData || userMapping.userData.length === 0) {
container.innerHTML = '<div class="empty-summary">할당된 사용자가 없습니다.</div>';
return;
}
container.innerHTML = userMapping.userData.map(u => `
<div class="user-badge-item"><span class="u-name">${u[3] || '이름없음'}</span><span class="u-dept">${u[1] || '부서없음'}</span></div>
`).join('');
}
function applySwTypeUI(type: string) { function applySwTypeUI(type: string) {
const cloudFields = document.querySelectorAll('.cloud-only'); const cloudFields = document.querySelectorAll('.cloud-only');
const swFields = document.querySelectorAll('.sw-standard-field'); const swFields = document.querySelectorAll('.sw-standard-field');
const userSection = document.getElementById('sw-user-section'); const userSection = document.getElementById('sw-user-section');
const keyGroup = document.getElementById('sw-license-key-group');
const typeGroup = document.getElementById('sw-license-type-group');
const expiryGroup = document.getElementById('sw-expiry-group'); const expiryGroup = document.getElementById('sw-expiry-group');
if (type === '클라우드') { if (type === '클라우드') {
@@ -136,52 +235,83 @@ function applySwTypeUI(type: string) {
cloudFields.forEach(el => (el as HTMLElement).style.display = 'none'); cloudFields.forEach(el => (el as HTMLElement).style.display = 'none');
swFields.forEach(el => (el as HTMLElement).style.display = 'flex'); swFields.forEach(el => (el as HTMLElement).style.display = 'flex');
if (userSection) userSection.style.display = 'block'; if (userSection) userSection.style.display = 'block';
if (type === '구독SW') {
if (keyGroup) keyGroup.style.display = 'none'; if (type === '구독SW' || type === '영구SW') {
if (typeGroup) typeGroup.style.display = 'flex';
if (expiryGroup) expiryGroup.style.display = 'flex'; if (expiryGroup) expiryGroup.style.display = 'flex';
} else if (type === '영구SW') {
if (keyGroup) keyGroup.style.display = 'flex';
if (typeGroup) typeGroup.style.display = 'none';
if (expiryGroup) expiryGroup.style.display = 'none'; // 영구는 유지보수 기간이 비고에 들어가는 경우가 많아 만료일 숨김 처리
} }
} }
} }
export function openSwModal(asset: SoftwareAsset, mode: 'view' | 'add' = 'view') { function fillSwFormData(asset: SoftwareAsset) {
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. || '');
setFieldValue('sw-납품업체', asset. || '');
setFieldValue('sw-비고', asset. || '');
if (asset.type === '클라우드') {
setFieldValue('sw-플랫폼명', (asset as any). || '');
setFieldValue('sw-계정명', (asset as any). || '');
setFieldValue('sw-결제수단', (asset as any). || '');
setFieldValue('sw-연결카드번호', (asset as any). || '');
setFieldValue('sw-결제일', (asset as any). || '');
setFieldValue('sw-당월청구액', (asset as any). || '');
} else if (asset.type === '구독SW' || asset.type === '영구SW') {
setFieldValue('sw-만료일', (asset as any). || '');
}
renderSwHistory(asset.id);
}
function renderSwHistory(swId: string) {
const container = document.getElementById('sw-history-list');
if (!container) return;
const logs = (state.masterData.logs || []).filter(l => l.assetId === swId);
if (logs.length === 0) {
container.innerHTML = '<div class="empty-history">수정 이력이 없습니다.</div>';
return;
}
container.innerHTML = logs.map(l => `
<div class="history-item">
<div class="history-date">${l.date}</div>
<div class="history-user">${l.user}</div>
<div class="history-details">${l.details}</div>
</div>
`).join('');
}
export function openSwModal(asset: SoftwareAsset, mode: 'view' | 'add' | 'edit' = 'view') {
currentSwAsset = asset; currentSwAsset = asset;
const modal = document.getElementById('sw-asset-modal')!; const modal = document.getElementById('sw-asset-modal')!;
// 수정 잠금 상태 제어
setEditLock('sw-asset-form', mode, { setEditLock('sw-asset-form', mode, {
saveBtnId: 'btn-save-sw-asset', saveBtnId: 'btn-save-sw-asset',
revertBtnId: 'btn-revert-sw-edit', revertBtnId: 'btn-revert-sw-edit'
addLogBtnId: 'btn-add-sw-log'
}); });
isEditMode = (mode === 'add');
autoFillForm('sw', asset, SW_FIELD_MAP); isEditMode = (mode === 'add' || mode === 'edit');
fillSwFormData(asset);
applySwTypeUI(asset.type); applySwTypeUI(asset.type);
renderUserSummary(asset.id);
renderSwHistory(asset.id);
modal.classList.remove('hidden'); modal.classList.remove('hidden');
createIcons({ icons: { X, History, Plus } }); createIcons({ icons: { X, History, Plus } });
} }
export function initSwModal(onSave: () => void, closeModalsCb: () => void) { export function initSwModal(onSave: () => void, closeModals: () => void) {
if (!document.getElementById('sw-asset-modal')) { if (!document.getElementById('sw-asset-modal')) {
const html = createModalFrameHTML('sw', '소프트웨어 상세 정보', SW_FORM_HTML, { document.body.insertAdjacentHTML('beforeend', SW_MODAL_HTML);
historyTitle: '업데이트 내역',
addLogBtnId: 'btn-add-sw-log'
});
document.body.insertAdjacentHTML('beforeend', html);
const logModalHTML = `
<div id="sw-log-modal" class="modal-overlay hidden" style="z-index: 1100;">
<div class="modal-content" style="max-width: 400px;">
<div class="modal-header"><h2>${UI_TEXT.ACTION.HISTORY_ADD}</h2><button id="btn-close-sw-log" 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="new-log-date" /></div><div class="form-group"><label>상세 내용</label><textarea id="new-log-details" rows="3"></textarea></div></div></div>
<div class="modal-footer"><div></div><div class="footer-actions"><button id="btn-cancel-sw-log" class="btn btn-outline">${UI_TEXT.ACTION.CANCEL}</button><button id="btn-confirm-sw-log" class="btn btn-primary">추가</button></div></div>
</div>
</div>
`;
document.body.insertAdjacentHTML('beforeend', logModalHTML);
} }
const form = document.getElementById('sw-asset-form') as HTMLFormElement; const form = document.getElementById('sw-asset-form') as HTMLFormElement;
@@ -189,33 +319,31 @@ export function initSwModal(onSave: () => void, closeModalsCb: () => void) {
const revertBtn = document.getElementById('btn-revert-sw-edit')!; const revertBtn = document.getElementById('btn-revert-sw-edit')!;
const deleteBtn = document.getElementById('btn-delete-sw-asset')!; const deleteBtn = document.getElementById('btn-delete-sw-asset')!;
const userAssignBtn = document.getElementById('btn-open-sw-user')!; const userAssignBtn = document.getElementById('btn-open-sw-user')!;
const userUpdateBtn = document.getElementById('btn-open-sw-update')!; const btnOpenUpdate = document.getElementById('btn-open-sw-update')!;
const logAddBtn = document.getElementById('btn-add-sw-log')!;
const logModal = document.getElementById('sw-log-modal')!;
const typeSelect = document.getElementById('sw-asset-type') as HTMLSelectElement; const typeSelect = document.getElementById('sw-asset-type') as HTMLSelectElement;
typeSelect?.addEventListener('change', () => { typeSelect?.addEventListener('change', () => {
applySwTypeUI(typeSelect.value); applySwTypeUI(typeSelect.value);
}); });
const closeModalAction = () => { closeModalsCb(); isEditMode = false; }; // 날짜 스마트 마스킹 적용
['sw-구매일', 'sw-시작일', 'sw-만료일', 'sw-update-start', 'sw-update-end'].forEach(id => {
applyDateMask(document.getElementById(id) as HTMLInputElement);
});
createIcons({ icons: { Calendar } });
const closeModalAction = () => { closeModals(); isEditMode = false; };
document.getElementById('btn-close-sw-modal')?.addEventListener('click', closeModalAction); document.getElementById('btn-close-sw-modal')?.addEventListener('click', closeModalAction);
document.getElementById('btn-cancel-sw-modal')?.addEventListener('click', closeModalAction); document.getElementById('btn-cancel-sw-modal')?.addEventListener('click', closeModalAction);
revertBtn.addEventListener('click', () => { revertBtn.addEventListener('click', () => {
setEditLock('sw-asset-form', 'view', { setEditLock('sw-asset-form', 'view', {
saveBtnId: 'btn-save-sw-asset', saveBtnId: 'btn-save-sw-asset',
revertBtnId: 'btn-revert-sw-edit', revertBtnId: 'btn-revert-sw-edit'
addLogBtnId: 'btn-add-sw-log'
}); });
isEditMode = false; isEditMode = false;
if (currentSwAsset) openSwModal(currentSwAsset, 'view'); if (currentSwAsset) fillSwFormData(currentSwAsset);
});
// YYYYMM 입력 제한 로직 (숫자 6자리)
document.getElementById('sw-구매일')?.addEventListener('input', (e) => {
const target = e.target as HTMLInputElement;
target.value = target.value.replace(/[^0-9]/g, '').substring(0, 6);
}); });
saveBtn.addEventListener('click', () => { saveBtn.addEventListener('click', () => {
@@ -223,17 +351,39 @@ export function initSwModal(onSave: () => void, closeModalsCb: () => void) {
if (!isEditMode) { if (!isEditMode) {
setEditLock('sw-asset-form', 'edit', { setEditLock('sw-asset-form', 'edit', {
saveBtnId: 'btn-save-sw-asset', saveBtnId: 'btn-save-sw-asset',
revertBtnId: 'btn-revert-sw-edit', revertBtnId: 'btn-revert-sw-edit'
addLogBtnId: 'btn-add-hw-log'
}); });
isEditMode = true; isEditMode = true;
return; return;
} }
const extracted = autoExtractForm('sw', SW_FIELD_MAP);
const updated = { ...currentSwAsset, ...extracted, 수량: parseInt(extracted[ASSET_SCHEMA.QTY.key] || '0') };
const type = getFieldValue('sw-asset-type') || currentSwAsset.type; const type = getFieldValue('sw-asset-type');
updated.type = type; const updated: any = {
...currentSwAsset,
분야: getFieldValue('sw-분야'),
법인: getFieldValue('sw-법인'),
부서: getFieldValue('sw-부서'),
제품명: getFieldValue('sw-제품명'),
수량: parseInt(getFieldValue('sw-수량') || '0'),
금액: getFieldValue('sw-금액'),
구매일: getFieldValue('sw-구매일'),
시작일: getFieldValue('sw-시작일'),
납품업체: getFieldValue('sw-납품업체'),
비고: getFieldValue('sw-비고'),
type: type
};
if (type === '클라우드') {
updated. = getFieldValue('sw-플랫폼명');
updated. = getFieldValue('sw-계정명');
updated. = getFieldValue('sw-결제수단');
updated. = getFieldValue('sw-연결카드번호');
updated. = getFieldValue('sw-결제일');
updated. = getFieldValue('sw-당월청구액').replace(/,/g, '');
} else if (type === '구독SW' || type === '영구SW') {
updated. = getFieldValue('sw-만료일');
}
// 데이터 저장 로직 (state 업데이트) // 데이터 저장 로직 (state 업데이트)
const oldType = currentSwAsset.type; const oldType = currentSwAsset.type;
@@ -249,44 +399,104 @@ export function initSwModal(onSave: () => void, closeModalsCb: () => void) {
let targetList: SoftwareAsset[] = []; let targetList: SoftwareAsset[] = [];
if (newType === '구독SW') targetList = state.masterData.subSw; if (newType === '구독SW') targetList = state.masterData.subSw;
else if (newType === '영구SW') targetList = state.masterData.permSw; else if (newType === '영구SW') targetList = state.masterData.permSw;
else targetList = (state.masterData as any).cloud || []; else if (newType === '클라우드') targetList = state.masterData.cloud;
const idx = targetList.findIndex(a => a.id === updated.id); const idx = targetList.findIndex(a => a.id === updated.id);
if (idx > -1) targetList[idx] = updated; else targetList.push(updated); if (idx > -1) targetList[idx] = updated;
else targetList.push(updated);
onSave(); onSave();
setEditLock('sw-asset-form', 'view', { closeModalAction();
saveBtnId: 'btn-save-sw-asset',
revertBtnId: 'btn-revert-sw-edit',
addLogBtnId: 'btn-add-sw-log'
});
isEditMode = false;
}); });
deleteBtn.addEventListener('click', () => { deleteBtn.addEventListener('click', () => {
if (currentSwAsset && confirm(UI_TEXT.MESSAGES.CONFIRM_DELETE)) { if (!currentSwAsset) return;
if (confirm('삭제하시겠습니까?')) {
const type = currentSwAsset.type; const type = currentSwAsset.type;
if (type === '구독SW') state.masterData.subSw = state.masterData.subSw.filter(a => a.id !== currentSwAsset!.id); if (type === '구독SW') state.masterData.subSw = state.masterData.subSw.filter(a => a.id !== currentSwAsset!.id);
else if (type === '영구SW') state.masterData.permSw = state.masterData.permSw.filter(a => a.id !== currentSwAsset!.id); else if (type === '영구SW') state.masterData.permSw = state.masterData.permSw.filter(a => a.id !== currentSwAsset!.id);
onSave(); closeModalAction(); else if (type === '클라우드') state.masterData.cloud = state.masterData.cloud.filter(a => a.id !== currentSwAsset!.id);
onSave();
closeModalAction();
} }
}); });
userUpdateBtn.addEventListener('click', () => { if (currentSwAsset) openSwUserModal(currentSwAsset); }); userAssignBtn.addEventListener('click', () => {
logAddBtn.addEventListener('click', () => { if (currentSwAsset) openSwUserModal(currentSwAsset);
logModal.classList.remove('hidden');
(document.getElementById('new-log-date') as HTMLInputElement).value = new Date().toISOString().split('T')[0];
(document.getElementById('new-log-details') as HTMLTextAreaElement).value = '';
}); });
document.getElementById('btn-close-sw-log')?.addEventListener('click', () => logModal.classList.add('hidden'));
document.getElementById('btn-cancel-sw-log')?.addEventListener('click', () => logModal.classList.add('hidden')); // 자산 업데이트(계약 갱신) 모달 로직
document.getElementById('btn-confirm-sw-log')?.addEventListener('click', () => { const subModal = document.getElementById('sw-update-modal')!;
if (!currentSwAsset) return; const btnCloseUpdate = document.getElementById('btn-close-sw-update')!;
const date = (document.getElementById('new-log-date') as HTMLInputElement).value; const btnCancelUpdate = document.getElementById('btn-cancel-sw-update')!;
const details = (document.getElementById('new-log-details') as HTMLTextAreaElement).value; const btnSaveUpdate = document.getElementById('btn-save-sw-update')!;
if (!date || !details) return;
state.masterData.logs = state.masterData.logs || []; const closeUpdateModal = () => subModal.classList.add('hidden');
state.masterData.logs.push({ id: Math.random().toString(36).substring(2, 9), assetId: currentSwAsset.id, date, user: '담당자', details }); btnCloseUpdate?.addEventListener('click', closeUpdateModal);
logModal.classList.add('hidden'); renderSwHistory(currentSwAsset.id); btnCancelUpdate?.addEventListener('click', closeUpdateModal);
btnOpenUpdate?.addEventListener('click', (e) => {
e.preventDefault();
if (!isEditMode) {
alert('자산을 수정 모드로 변경한 후 업데이트를 진행해주세요.');
return;
}
subModal.classList.remove('hidden');
(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 = '';
document.querySelector('.sub-sw-update')!.setAttribute('style', 'display:flex; flex-direction:column;');
document.querySelector('.perm-sw-update')!.setAttribute('style', 'display:none');
});
btnSaveUpdate?.addEventListener('click', (e) => {
e.preventDefault();
const isSub = getFieldValue('sw-asset-type') === '구독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 || '계약 갱신'}\n`;
if (cost) details += `비용 추가: ${cost}\n`;
if (periodStr) details += `계약 변경: -> ${periodStr}\n`;
// 메인 폼에 시작일 만료일 자동 세팅
if (start) setFieldValue('sw-시작일', start);
if (end) setFieldValue('sw-만료일', end);
// 금액 갱신 (선택사항)
if (cost) {
if (getFieldValue('sw-asset-type') === '클라우드') {
setFieldValue('sw-당월청구액', cost);
} else {
setFieldValue('sw-금액', cost);
}
}
// 이력 탭 갱신 (메모리상)
if (!state.masterData.logs) state.masterData.logs = [];
state.masterData.logs.push({
id: Math.random().toString(36).substring(2, 9),
assetId: currentSwAsset ? currentSwAsset.id : 'NEW',
date,
details,
cost: cost ? Number(String(cost).replace(/,/g, '')) : 0,
user: '관리자'
});
closeUpdateModal();
renderSwHistory(currentSwAsset ? currentSwAsset.id : '');
onSave(); // 로그 즉시 저장
}); });
} }

View File

@@ -1,12 +1,12 @@
import { state } from '../../core/state'; 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, Calendar } from 'lucide';
import { CORP_LIST, ORG_LIST } from './SharedData'; import { CORP_LIST, ORG_LIST } from './SharedData';
import { generateOptionsHTML, setFieldValue, getFieldValue } from './ModalUtils'; import { generateOptionsHTML, setFieldValue, getFieldValue, applyDateMask } from './ModalUtils';
let currentSwUserAsset: SoftwareAsset | null = null; let currentSwUserAsset: SoftwareAsset | null = null;
let tempSwUsers: SWUser[] = []; let tempSwUsers: any[] = [];
const SW_USER_MODAL_HTML = ` const SW_USER_MODAL_HTML = `
<div id="sw-user-modal" class="modal-overlay hidden"> <div id="sw-user-modal" class="modal-overlay hidden">
@@ -28,6 +28,7 @@ const SW_USER_MODAL_HTML = `
<thead> <thead>
<tr> <tr>
<th>조직</th> <th>조직</th>
<th>부서</th>
<th>직위</th> <th>직위</th>
<th>이름</th> <th>이름</th>
<th>사용기간</th> <th>사용기간</th>
@@ -58,7 +59,11 @@ const SW_USER_MODAL_HTML = `
<input type="hidden" id="edit-user-index" value="-1" /> <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-부서">${generateOptionsHTML(ORG_LIST)}</select> <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>
@@ -69,8 +74,24 @@ const SW_USER_MODAL_HTML = `
<input type="text" id="new-user-이름" required /> <input type="text" id="new-user-이름" required />
</div> </div>
<div class="form-group"> <div class="form-group">
<label>사용기간</label> <label>사용 시작일</label>
<input type="text" id="new-user-사용기간" placeholder="ex) 2024-01-01 ~ 2024-12-31" /> <div style="display:flex; gap:0.25rem; align-items:center; position:relative;">
<input type="text" id="new-user-시작일" style="flex:1;" />
<button type="button" class="btn-icon" onclick="const p = document.getElementById('new-user-시작일-picker'); p.value = document.getElementById('new-user-시작일').value; p.showPicker();" style="padding:0.25rem;">
<i data-lucide="calendar" style="width:18px; height:18px; color:var(--primary-color);"></i>
</button>
<input type="date" id="new-user-시작일-picker" style="position:absolute; width:0; height:0; opacity:0; pointer-events:none;" onchange="document.getElementById('new-user-시작일').value = this.value" tabindex="-1" />
</div>
</div>
<div class="form-group">
<label>사용 종료일</label>
<div style="display:flex; gap:0.25rem; align-items:center; position:relative;">
<input type="text" id="new-user-종료일" style="flex:1;" />
<button type="button" class="btn-icon" onclick="const p = document.getElementById('new-user-종료일-picker'); p.value = document.getElementById('new-user-종료일').value; p.showPicker();" style="padding:0.25rem;">
<i data-lucide="calendar" style="width:18px; height:18px; color:var(--primary-color);"></i>
</button>
<input type="date" id="new-user-종료일-picker" style="position:absolute; width:0; height:0; opacity:0; pointer-events:none;" onchange="document.getElementById('new-user-종료일').value = this.value" tabindex="-1" />
</div>
</div> </div>
<div class="form-group"> <div class="form-group">
<label>신청서 (증빙)</label> <label>신청서 (증빙)</label>
@@ -93,14 +114,16 @@ export function openSwUserModal(asset: SoftwareAsset) {
const swInfo = document.getElementById('sw-user-sw-info')!; const swInfo = document.getElementById('sw-user-sw-info')!;
swInfo.innerHTML = ` swInfo.innerHTML = `
<div style="background:var(--bg-light); padding:1rem; border-radius:6px; margin-bottom:1.5rem;"> <div style="background:var(--bg-light); padding:1rem; border-radius:6px; margin-bottom:1.5rem;">
<div style="font-size:0.8rem; color:var(--text-muted); margin-bottom:0.25rem;">${asset.} | ${asset.}</div> <div style="font-size:0.8rem; color:var(--text-muted); margin-bottom:0.25rem;">${asset.}</div>
<div style="font-size:1.1rem; font-weight:700; color:var(--primary-color);">${asset.}</div> <div style="font-size:1.1rem; font-weight:700; color:var(--primary-color);">${asset.}</div>
</div> </div>
`; `;
// 기존 사용자 데이터 복사 (원본 보호를 위해 temp 사용) // 기존 사용자 데이터 복사 (원본 보호를 위해 temp 사용)
const existingMapping = state.masterData.swUsers.find(u => u.sw_id === asset.id); const existingMapping = state.masterData.swUsers.find(u => u.sw_id === asset.id);
tempSwUsers = existingMapping ? JSON.parse(JSON.stringify(existingMapping.userDataList || [])) : []; tempSwUsers = existingMapping ? (existingMapping.userData || []).map((u: any) => ({
조직: u[0], 부서: u[1], 직위: u[2], 이름: u[3], 사용기간: u[4], 신청서명: u[5]
})) : [];
renderUserList(); renderUserList();
modal.classList.remove('hidden'); modal.classList.remove('hidden');
@@ -119,7 +142,7 @@ function renderUserList() {
tempSwUsers.forEach((user, idx) => { tempSwUsers.forEach((user, idx) => {
const tr = document.createElement('tr'); const tr = document.createElement('tr');
tr.innerHTML = ` tr.innerHTML = `
<td>${user. || ''}</td>
<td>${user. || ''}</td> <td>${user. || ''}</td>
<td>${user. || ''}</td> <td>${user. || ''}</td>
<td>${user. || ''}</td> <td>${user. || ''}</td>
@@ -164,10 +187,20 @@ function openUserEditSubModal(idx: number = -1) {
if (idx > -1) { if (idx > -1) {
const user = tempSwUsers[idx]; const user = tempSwUsers[idx];
setFieldValue('new-user-조직', user.);
setFieldValue('new-user-부서', user.); setFieldValue('new-user-부서', user.);
setFieldValue('new-user-직위', user.); setFieldValue('new-user-직위', user.);
setFieldValue('new-user-이름', user.); setFieldValue('new-user-이름', user.);
setFieldValue('new-user-사용기간', user.);
// 사용기간 파싱 (yyyy-mm-dd ~ yyyy-mm-dd)
if (user. && user..includes('~')) {
const parts = user..split('~');
setFieldValue('new-user-시작일', parts[0].trim());
setFieldValue('new-user-종료일', parts[1].trim());
} else {
setFieldValue('new-user-시작일', '');
setFieldValue('new-user-종료일', '');
}
} }
subModal.classList.remove('hidden'); subModal.classList.remove('hidden');
@@ -182,6 +215,12 @@ export function initSwUserModal(onSave: () => void, closeModals: () => void) {
const addUserBtn = document.getElementById('btn-open-add-user')!; const addUserBtn = document.getElementById('btn-open-add-user')!;
const confirmUserBtn = document.getElementById('btn-confirm-user-edit')!; const confirmUserBtn = document.getElementById('btn-confirm-user-edit')!;
['new-user-시작일', 'new-user-종료일'].forEach(id => {
applyDateMask(document.getElementById(id) as HTMLInputElement);
});
createIcons({ icons: { Calendar } });
addUserBtn.addEventListener('click', () => openUserEditSubModal()); addUserBtn.addEventListener('click', () => openUserEditSubModal());
confirmUserBtn.addEventListener('click', () => { confirmUserBtn.addEventListener('click', () => {
@@ -195,7 +234,7 @@ export function initSwUserModal(onSave: () => void, closeModals: () => void) {
const existingIdx = state.masterData.swUsers.findIndex(u => u.sw_id === currentSwUserAsset!.id); const existingIdx = state.masterData.swUsers.findIndex(u => u.sw_id === currentSwUserAsset!.id);
const newMapping = { const newMapping = {
sw_id: currentSwUserAsset!.id, sw_id: currentSwUserAsset!.id,
userData: tempSwUsers.map(u => ['', u., u., u., u., u.]) userData: tempSwUsers.map(u => [u., u., u., u., u., u.])
}; };
if (existingIdx > -1) state.masterData.swUsers[existingIdx] = newMapping as any; if (existingIdx > -1) state.masterData.swUsers[existingIdx] = newMapping as any;
@@ -225,11 +264,11 @@ function saveUserDataToList() {
const = Input.files && Input.files.length > 0 ? Input.files[0].name : (idx > -1 ? tempSwUsers[idx]. : ''); const = Input.files && Input.files.length > 0 ? Input.files[0].name : (idx > -1 ? tempSwUsers[idx]. : '');
const userData: any = { const userData: any = {
조직: getFieldValue('new-user-조직'),
부서: getFieldValue('new-user-부서'), 부서: getFieldValue('new-user-부서'),
직위: getFieldValue('new-user-직위'), 직위: getFieldValue('new-user-직위'),
이름: getFieldValue('new-user-이름'), 이름: getFieldValue('new-user-이름'),
사용기간: getFieldValue('new-user-사용기간'), : `${getFieldValue('new-user-시작일')} ~ ${getFieldValue('new-user-종료일')}`,
}; };

View File

@@ -0,0 +1,323 @@
import { openModal, closeModals } from './BaseModal';
import { createIcons, X, Check, Database, Save, FileSpreadsheet, Layers, RefreshCcw } from 'lucide';
import { state, loadMasterDataFromDB } from '../../core/state';
import { TYPE_PREFIX_MAP, LOCATION_DATA } from './SharedData';
import { ASSET_SCHEMA } from '../../core/schema';
let parsedData: any = null;
let currentTab: string = '';
let onSuccessCallback: (() => void) | null = null;
let hasAttemptedBulkGenerate: boolean = false;
const UPLOAD_PREVIEW_MODAL_HTML = `
<div id="upload-preview-modal" class="modal-overlay hidden">
<div class="modal-content wide" style="width: 95vw; max-width: 1500px; height: 90vh; display: flex; flex-direction: column;">
<div class="modal-header">
<div style="display:flex; align-items:center; gap:0.75rem;">
<div style="background:rgba(255,255,255,0.2); padding:0.5rem; border-radius:8px;">
<i data-lucide="file-spreadsheet" style="width:20px; height:20px; color:white;"></i>
</div>
<div>
<h2 id="upload-preview-title" style="color:white;">데이터 업로드 최종 검토</h2>
<p style="font-size:12px; color:rgba(255,255,255,0.8); margin-top:2px;">수정 가능한 텍스트는 <span style="color:#ff3d00; font-weight:700;">다홍색(#FF3D00)</span>으로 표시됩니다.</p>
</div>
</div>
<button id="btn-close-upload-preview" class="btn-icon" style="color:white;"><i data-lucide="x"></i></button>
</div>
<div class="modal-body" style="display:flex; padding:0; overflow:hidden; flex: 1;">
<div id="upload-tab-sidebar" style="width:200px; border-right:1px solid var(--border-color); background:#fafafa; padding:1.5rem 1rem; overflow-y:auto; flex-shrink: 0;">
<div style="font-size:11px; font-weight:700; color:var(--text-muted); text-transform:uppercase; margin-bottom:1rem; letter-spacing:0.05em;">카테고리</div>
<div id="upload-tabs-container" style="display:flex; flex-direction:column; gap:0.4rem;"></div>
</div>
<div style="flex:1; display:flex; flex-direction:column; background:white; overflow:hidden;">
<div id="upload-preview-stats" style="padding:1rem 1.5rem; border-bottom:1px solid var(--border-color); display:flex; justify-content:space-between; align-items:center; background:white;">
<div style="display:flex; align-items:center; gap:0.5rem;">
<span id="current-tab-name" style="font-weight:700; font-size:16px;">선택된 탭 없음</span>
<span id="current-tab-count" class="badge badge-primary">0건</span>
<button id="btn-bulk-generate-codes" class="btn btn-outline btn-sm hidden" style="margin-left:1rem; height:28px; font-size:12px; padding:0 0.75rem;">
<i data-lucide="refresh-ccw" style="width:14px; height:14px; margin-right:4px;"></i> 자산코드 일괄 생성
</button>
</div>
<div id="upload-warning-text" style="font-size:12px; color:#dc2626; font-weight:600; display:none;">
* 자산번호가 누락된 항목이 있습니다. 일괄 생성을 눌러주세요.
</div>
</div>
<div id="upload-preview-table-wrapper" style="flex:1; overflow:auto; padding:0;"></div>
</div>
</div>
<div class="modal-footer" style="background:#f9fafb; border-top:1px solid var(--border-color); flex-shrink: 0;">
<div style="display:flex; gap:0.75rem; width:100%; justify-content:flex-end;">
<button id="btn-cancel-upload" class="btn btn-outline" style="height:40px; padding:0 1.5rem;">취소</button>
<button id="btn-confirm-upload" class="btn btn-primary" style="height:40px; padding:0 2rem;">
<i data-lucide="save"></i> 최종 데이터 저장하기
</button>
</div>
</div>
</div>
</div>
`;
export function initUploadPreviewModal(onSuccess?: () => void) {
if (onSuccess) onSuccessCallback = onSuccess;
if (!document.getElementById('upload-preview-modal')) {
document.body.insertAdjacentHTML('beforeend', UPLOAD_PREVIEW_MODAL_HTML);
}
document.getElementById('btn-close-upload-preview')?.addEventListener('click', closeModals);
document.getElementById('btn-cancel-upload')?.addEventListener('click', closeModals);
document.getElementById('btn-confirm-upload')?.addEventListener('click', () => confirmUpload());
document.getElementById('btn-bulk-generate-codes')?.addEventListener('click', () => generateBulkCodes());
}
export function openUploadPreview(data: any) {
parsedData = data;
hasAttemptedBulkGenerate = false;
const tabNames = Object.keys(data);
if (tabNames.length === 0) { alert('업로드할 데이터가 없습니다.'); return; }
currentTab = tabNames[0];
renderTabs();
renderCurrentTable();
openModal('upload-preview-modal');
createIcons({ icons: { X, Check, Database, Save, FileSpreadsheet, Layers, RefreshCcw } });
}
function renderTabs() {
const container = document.getElementById('upload-tabs-container');
if (!container) return;
container.innerHTML = '';
Object.keys(parsedData).forEach(tab => {
const btn = document.createElement('div');
btn.className = `upload-tab-btn ${tab === currentTab ? 'active' : ''}`;
btn.style.cssText = `
padding: 0.6rem 0.8rem; border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: 500;
display: flex; justify-content: space-between; align-items: center; transition: all 0.2s;
background: ${tab === currentTab ? 'white' : 'transparent'};
color: ${tab === currentTab ? 'var(--primary-color)' : 'var(--text-main)'};
box-shadow: ${tab === currentTab ? '0 2px 4px rgba(0,0,0,0.05)' : 'none'};
border: 1px solid ${tab === currentTab ? 'var(--border-color)' : 'transparent'};
`;
btn.innerHTML = `<span>${tab}</span><span style="font-size:11px; opacity:0.6;">${parsedData[tab].length}</span>`;
btn.onclick = () => { syncCurrentDataFromDOM(); currentTab = tab; renderTabs(); renderCurrentTable(); };
container.appendChild(btn);
});
}
function renderCurrentTable() {
const tableWrapper = document.getElementById('upload-preview-table-wrapper');
const tabNameEl = document.getElementById('current-tab-name');
const tabCountEl = document.getElementById('current-tab-count');
const warningText = document.getElementById('upload-warning-text');
if (!tableWrapper || !tabNameEl || !tabCountEl) return;
const data = parsedData[currentTab];
tabNameEl.textContent = currentTab;
tabCountEl.textContent = `${data.length}`;
const generateBtn = document.getElementById('btn-bulk-generate-codes');
const isHwTab = ['개인PC', '서버', '스토리지', '전산비품', '모바일기기'].includes(currentTab);
if (generateBtn) { isHwTab ? generateBtn.classList.remove('hidden') : generateBtn.classList.add('hidden'); }
if (!data || data.length === 0) {
tableWrapper.innerHTML = '<div style="padding:4rem; text-align:center; color:var(--text-muted);">표시할 데이터가 없습니다.</div>';
return;
}
const rawHeaders = Object.keys(data[0]).filter(k => k !== 'id' && k !== 'type' && k !== '상세용도');
const headerMap: Record<string, string> = {};
Object.values(ASSET_SCHEMA).forEach(item => { headerMap[item.key] = item.ui; });
const centerCols = ['No.', '구매법인', '자산번호', '현 사용조직', '설치위치', '보관위치', '상세위치', '담당자', '구매연월', '현재상태'];
const locations = Object.keys(LOCATION_DATA);
let hasAnyMissingCode = false;
let tableHTML = `
<table class="preview-table" id="upload-data-table" style="width:100%; border-collapse:collapse; min-width:max-content; table-layout:auto;">
<thead style="position:sticky; top:0; z-index:10; background:#f8fafc; box-shadow:0 1px 0 var(--border-color);">
<tr>
<th style="padding:0.8rem 1rem; text-align:center; font-size:12px; border-bottom:1px solid var(--border-color); width:50px; background:#FAFAFA;">No.</th>
${rawHeaders.map(h => {
const label = headerMap[h] || h;
const isCenter = centerCols.includes(label);
return `<th data-key="${h}" style="padding:0.8rem 1rem; text-align:${isCenter ? 'center' : 'left'}; font-size:12px; border-bottom:1px solid var(--border-color); color:var(--text-muted); font-weight:600; background:#FAFAFA;">${label}</th>`;
}).join('')}
</tr>
</thead>
<tbody>
${data.map((row: any, idx: number) => {
const isCodeMissing = isHwTab && !row[ASSET_SCHEMA.ASSET_CODE.key];
if (isCodeMissing) hasAnyMissingCode = true;
const showRedBox = hasAttemptedBulkGenerate && isCodeMissing;
const trStyle = showRedBox ? 'outline: 2px solid #ff3d00; outline-offset: -2px; background: #fff5f2;' : 'border-bottom:1px solid #f1f5f9;';
return `
<tr data-id="${row.id}" style="${trStyle}">
<td style="padding:0.8rem 1rem; text-align:center; font-size:13px; color:var(--text-muted); background:#fafafa;">${idx + 1}</td>
${rawHeaders.map(h => {
const label = headerMap[h] || h;
const isCenter = centerCols.includes(label);
const isCodeCol = h === ASSET_SCHEMA.ASSET_CODE.key;
const isLocCol = h === ASSET_SCHEMA.LOCATION.key || h === ASSET_SCHEMA.STORE_LOC.key;
const isDetailLocCol = h === ASSET_SCHEMA.DETAIL_LOCATION.key;
const fontColor = isCodeCol ? '#111111' : '#ff3d00';
if (isLocCol) {
return `
<td style="padding:0; min-width:120px; border-right:1px solid #f8fafc;">
<select class="preview-select loc-select" data-key="${h}" style="width:100%; height:36px; border:none; background:transparent; padding:0 0.5rem; font-size:13px; color:#ff3d00; font-weight:600; outline:none; cursor:pointer;">
<option value="">선택</option>
${locations.map(loc => `<option value="${loc}" ${String(row[h]||'').trim() === loc ? 'selected' : ''}>${loc}</option>`).join('')}
</select>
</td>
`;
} else if (isDetailLocCol) {
const parentLocKey = row[ASSET_SCHEMA.LOCATION.key] ? ASSET_SCHEMA.LOCATION.key : ASSET_SCHEMA.STORE_LOC.key;
const currentLoc = String(row[parentLocKey] || '').trim();
const subLocs = LOCATION_DATA[currentLoc] || [];
return `
<td style="padding:0; min-width:120px; border-right:1px solid #f8fafc;">
<select class="preview-select detail-select" data-key="${h}" style="width:100%; height:36px; border:none; background:transparent; padding:0 0.5rem; font-size:13px; color:#ff3d00; font-weight:600; outline:none; cursor:pointer;">
<option value=""></option>
${subLocs.map(sl => `<option value="${sl}" ${String(row[h]||'').trim() === sl ? 'selected' : ''}>${sl}</option>`).join('')}
${(row[h] && !subLocs.includes(String(row[h]).trim())) ? `<option value="${row[h]}" selected>${row[h]}</option>` : ''}
</select>
</td>
`;
} else {
return `<td contenteditable="${!isCodeCol}" data-key="${h}" style="padding:0.8rem 1rem; font-size:13px; text-align:${isCenter ? 'center' : 'left'}; outline:none; color: ${fontColor} !important; border-right:1px solid #f8fafc;">${row[h] || ''}</td>`;
}
}).join('')}
</tr>
`;
}).join('')}
</tbody>
</table>
`;
tableWrapper.innerHTML = tableHTML;
if (warningText) warningText.style.display = (hasAttemptedBulkGenerate && hasAnyMissingCode) ? 'block' : 'none';
// ─── 드롭다운 실시간 연동 이벤트 ───
tableWrapper.querySelectorAll('.loc-select').forEach(sel => {
sel.addEventListener('change', (e) => {
const target = e.target as HTMLSelectElement;
const tr = target.closest('tr')!;
const detailSel = tr.querySelector('.detail-select') as HTMLSelectElement;
if (detailSel) {
const subLocs = LOCATION_DATA[target.value] || [];
detailSel.innerHTML = '<option value="">선택</option>' + subLocs.map(sl => `<option value="${sl}">${sl}</option>`).join('');
// 데이터 객체도 즉시 동기화
syncCurrentDataFromDOM();
}
});
});
// 편집 포커스 스타일
tableWrapper.querySelectorAll('td[contenteditable="true"]').forEach(td => {
td.addEventListener('focus', () => (td as HTMLElement).style.background = '#fff8f6');
td.addEventListener('blur', () => (td as HTMLElement).style.background = 'transparent');
});
}
function syncCurrentDataFromDOM() {
const table = document.getElementById('upload-data-table') as HTMLTableElement;
if (!table) return;
const rows = table.querySelectorAll('tbody tr');
const data = parsedData[currentTab];
rows.forEach((tr) => {
const asset = data.find((a: any) => a.id === tr.getAttribute('data-id'));
if (asset) {
tr.querySelectorAll('td[contenteditable="true"]').forEach(td => {
const key = td.getAttribute('data-key')!;
asset[key] = td.textContent?.trim() || '';
});
tr.querySelectorAll('select.preview-select').forEach(sel => {
const key = sel.getAttribute('data-key')!;
asset[key] = (sel as HTMLSelectElement).value;
});
}
});
}
async function confirmUpload() {
syncCurrentDataFromDOM();
const tabNames = Object.keys(parsedData);
const hwTabs = ['개인PC', '서버', '스토리지', '전산비품', '모바일기기'];
for (const tab of tabNames) {
if (hwTabs.includes(tab)) {
const missingCodeRows = parsedData[tab].filter((r: any) => !r[ASSET_SCHEMA.ASSET_CODE.key]);
if (missingCodeRows.length > 0) {
alert(`[${tab}] 카테고리에 자산번호가 누락된 항목이 있습니다.\n번호를 생성하거나 수정한 후 다시 시도해주세요.`);
hasAttemptedBulkGenerate = true;
renderCurrentTable();
return;
}
}
}
const confirmBtn = document.getElementById('btn-confirm-upload') as HTMLButtonElement;
if (confirmBtn) { confirmBtn.disabled = true; confirmBtn.innerHTML = '저장 중...'; }
try {
let successCount = 0;
const API_BASE = `http://${location.hostname}:3000`;
for (const tab of tabNames) {
const data = parsedData[tab];
let endpoint = '';
if (tab === '개인PC') endpoint = `${API_BASE}/api/pc/batch`;
else if (tab === '서버') endpoint = `${API_BASE}/api/server/batch`;
else if (tab === '스토리지') endpoint = `${API_BASE}/api/storage/batch`;
else if (tab === '전산비품') endpoint = `${API_BASE}/api/equip/batch`;
else if (tab === '모바일기기') endpoint = `${API_BASE}/api/mobile/batch`;
else if (tab === '구독SW') endpoint = `${API_BASE}/api/sw/sub/batch`;
else if (tab === '영구SW') endpoint = `${API_BASE}/api/sw/perm/batch`;
else if (tab === '클라우드') endpoint = `${API_BASE}/api/cloud/batch`;
else if (tab === '도메인') endpoint = `${API_BASE}/api/ops/domain/batch`;
if (endpoint) {
const response = await fetch(endpoint, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(data) });
if (response.ok) successCount++;
}
}
if (successCount > 0) { if (onSuccessCallback) onSuccessCallback(); closeModals(); alert(`${successCount}개 카테고리의 데이터가 성공적으로 업로드되었습니다.`); }
else { alert('데이터 업로드에 실패했습니다.'); }
} catch (err) { alert('업로드 중 오류가 발생했습니다.'); }
finally { if (confirmBtn) { confirmBtn.disabled = false; confirmBtn.innerHTML = '<i data-lucide="save"></i> 최종 데이터 저장하기'; createIcons({ icons: { Save } }); } }
}
async function generateBulkCodes() {
syncCurrentDataFromDOM();
const data = parsedData[currentTab];
if (!data) return;
hasAttemptedBulkGenerate = true;
const generateBtn = document.getElementById('btn-bulk-generate-codes') as HTMLButtonElement;
if (generateBtn) { generateBtn.disabled = true; generateBtn.innerHTML = '생성 중...'; }
try {
const rowsToProcess = data.filter((r: any) => !r[ASSET_SCHEMA.ASSET_CODE.key]);
if (rowsToProcess.length === 0) { alert('이미 모든 항목에 자산코드가 부여되어 있습니다.'); return; }
const groups: Record<string, any[]> = {};
rowsToProcess.forEach((r: any) => {
const type = r. || r. || r.type || 'ETC';
const typeCode = TYPE_PREFIX_MAP[type] || 'ETC';
const purchaseYM = String(r[ASSET_SCHEMA.PURCHASE_YM.key] || '').replace(/[^0-9]/g, '');
if (purchaseYM.length < 6) return;
const prefix = `${typeCode}-${purchaseYM.substring(0, 6)}-`;
if (!groups[prefix]) groups[prefix] = [];
groups[prefix].push(r);
});
for (const prefix in groups) {
const rows = groups[prefix];
const res = await fetch(`http://${location.hostname}:3000/api/generate-asset-code?prefix=${prefix}`);
const result = await res.json();
if (result.nextCode) {
let baseNum = parseInt(result.nextCode.replace(prefix, ''));
rows.forEach((r, idx) => { r[ASSET_SCHEMA.ASSET_CODE.key] = `${prefix}${(baseNum + idx).toString().padStart(4, '0')}`; });
}
}
renderCurrentTable();
alert('자산코드 생성이 완료되었습니다.');
} catch (err) { alert('자산코드 생성 중 오류가 발생했습니다.'); }
finally { if (generateBtn) { generateBtn.disabled = false; generateBtn.innerHTML = '<i data-lucide="refresh-ccw"></i> 자산코드 일괄 생성'; createIcons({ icons: { RefreshCcw } }); } }
}

View File

@@ -7,7 +7,7 @@ const MENU_CONFIG = {
}, },
sw: { sw: {
label: '소프트웨어', label: '소프트웨어',
tabs: ['대시보드', '구독SW', '영구SW'] tabs: ['대시보드', '구독SW', '영구SW', '클라우드']
}, },
ops: { ops: {
label: '운영 서비스', label: '운영 서비스',

View File

@@ -1,74 +1,42 @@
import * as XLSX from 'xlsx'; import * as XLSX from 'xlsx';
import ExcelJS from 'exceljs';
import { ASSET_SCHEMA } from './schema';
import { LOCATION_DATA, CORP_LIST, ORG_LIST, HW_TYPE_LIST } from '../components/Modal/SharedData';
export interface HardwareAsset { export interface HardwareAsset {
[key: string]: any;
id: string; id: string;
type: string; // '개인PC', '서버', '스토리지', '전산비품', '모바일기기' type: string;
법인: string; 법인: string;
자산코드: string; 자산코드: string;
사용자: string;
명칭: string; 명칭: string;
위치: string; 위치: string;
상세위치: string;
관리자: string; 관리자: string;
IP주소: string; IP주소: string;
IP2?: string;
MACaddress: string; MACaddress: string;
HW사양: string; HW사양: string;
OS: string; OS: string;
사용자?: string;
CPU?: string;
GPU?: string;
RAM?: string;
SSD1?: string;
SSD2?: string;
HDD1?: string;
HDD2?: string;
storage유형?: string;
비품유형?: string;
모델명?: string;
용량?: string;
담당자_정?: string;
담당자_부?: string;
구매연월?: string;
금액?: string; 금액?: string;
납품업체: string; 납품업체: string;
품의서명: string; 품의서명: string;
용도?: string;
상세?: string;
원격접속?: string;
서버ID?: string;
서버PW?: string;
모니터링?: string;
비고?: string; 비고?: string;
현사용조직?: string;
이전사용조직?: string;
상세용도?: string;
메인보드?: string;
보관위치?: string;
현재상태?: string;
} }
export interface SoftwareAsset { export interface SoftwareAsset {
[key: string]: any;
id: string; id: string;
type: string; // '구독SW', '영구SW', '클라우드' type: string;
분야?: string; 분야?: string;
법인: string; 법인: string;
부서?: string; 부서?: string;
제품명: string; 제품명: string;
구매연월: string;
구독일?: string;
만료일?: string;
라이선스유형?: string;
라이선스키?: string;
유지보수여부?: boolean;
금액: string; 금액: string;
수량: number; 수량: number;
계정명: string; 계정명: string;
납품업체: string; 납품업체: string;
비고: string; 비고: string;
플랫폼명?: string;
결제수단?: string;
결제일?: string;
연결카드번호?: string;
당월청구액?: string;
} }
export interface SWUser { export interface SWUser {
@@ -90,6 +58,7 @@ export interface HardwareLog {
date: string; date: string;
details: string; details: string;
user: string; user: string;
cost?: number;
} }
export interface MasterAssetData { export interface MasterAssetData {
@@ -100,94 +69,271 @@ export interface MasterAssetData {
mobile: HardwareAsset[]; mobile: HardwareAsset[];
subSw: SoftwareAsset[]; subSw: SoftwareAsset[];
permSw: SoftwareAsset[]; permSw: SoftwareAsset[];
swUsers: any[]; // { sw_id, userData: [] } 형태로 처리 cloud: SoftwareAsset[];
domain?: any[];
hw: HardwareAsset[];
sw: SoftwareAsset[];
swUsers: SWUser[];
logs: HardwareLog[]; logs: HardwareLog[];
} }
const HW_TABS = ['개인PC', '서버', '스토리지', '전산비품', '모바일기기']; const PC_HEADERS = [
const SW_TABS = ['구독SW', '영구SW', '클라우드']; ASSET_SCHEMA.CORP.ui, ASSET_SCHEMA.ASSET_CODE.ui, ASSET_SCHEMA.USER.ui, ASSET_SCHEMA.ORG.ui,
ASSET_SCHEMA.MAINBOARD.ui, ASSET_SCHEMA.OS.ui, ASSET_SCHEMA.CPU.ui, 'GPU', ASSET_SCHEMA.RAM.ui,
ASSET_SCHEMA.STORAGE1.ui, ASSET_SCHEMA.STORAGE2.ui, ASSET_SCHEMA.STORAGE3.ui,
ASSET_SCHEMA.IP_ADDR.ui, ASSET_SCHEMA.MANAGER_MAIN.ui, ASSET_SCHEMA.MANAGER_SUB.ui,
ASSET_SCHEMA.PURCHASE_YM.ui, ASSET_SCHEMA.PRICE.ui, ASSET_SCHEMA.VENDOR.ui, ASSET_SCHEMA.DOC_NAME.ui, ASSET_SCHEMA.REMARKS.ui
];
const PC_HEADERS = ['법인', '자산코드', '사용자', '위치', '모델명', '메인보드', 'CPU', 'GPU', 'RAM', 'SSD1', 'SSD2', 'HDD1', 'HDD2', 'IP주소', 'HW사양', '구매연월', '금액', '납품업체', '품의서명', '비고']; const BASE_HW_HEADERS = [
const SERVER_HEADERS = ['구매법인', '자산번호', '구매연월', '유형', '용도', '상세내용', '현사용조직', '이전사용조직', '설치위치', '담당자(정)', '담당자(부)', 'IP 주소 1', 'IP 주소 2', '원격도구', '서버 ID', '서버 PW', '모델명', 'OS', 'CPU', 'RAM', 'GPU', 'Storage 1', 'Storage 2', 'Storage 3', '모니터링', '비고']; ASSET_SCHEMA.CORP.ui, '유형', ASSET_SCHEMA.ASSET_CODE.ui, ASSET_SCHEMA.PURCHASE_YM.ui,
const STORAGE_HEADERS = ['구매법인', '유형', '자산코드', '명칭', '위치', '모델명', '용량', '담당자(정)', '담당자(부)', 'IP주소', 'MAC주소', '구매연월', '금액', '납품업체', '품의서명', '비고']; ASSET_SCHEMA.ORG.ui, ASSET_SCHEMA.LOCATION.ui, ASSET_SCHEMA.DETAIL_LOCATION.ui,
const EQUIP_HEADERS = ['구매법인', '비품유형', '자산코드', '명칭', '위치', '관리자', 'IP주소', 'MACaddress', 'HW사양', 'OS', '구매연월', '금액', '납품업체', '품의서명', '비고']; ASSET_SCHEMA.PURPOSE.ui, ASSET_SCHEMA.DETAILS.ui, // 용도, 상세 추가
const MOBILE_HEADERS = ['구매법인', '자산코드', '명칭', '위치', '관리자', '기기유형', 'OS', '구매연월', '금액', '납품업체', '품의서명', '비고']; ASSET_SCHEMA.MANAGER_MAIN.ui, ASSET_SCHEMA.MANAGER_SUB.ui,
ASSET_SCHEMA.MODEL.ui, ASSET_SCHEMA.OS.ui, ASSET_SCHEMA.CPU.ui, ASSET_SCHEMA.RAM.ui, 'GPU',
ASSET_SCHEMA.STORAGE1.ui, ASSET_SCHEMA.STORAGE2.ui, ASSET_SCHEMA.STORAGE3.ui,
ASSET_SCHEMA.IP_ADDR.ui, ASSET_SCHEMA.IP_ADDR2.ui, '원격도구', '서버ID', '서버PW', ASSET_SCHEMA.MONITORING.ui, ASSET_SCHEMA.REMARKS.ui
];
const SUB_SW_HEADERS = ['ID', '분야', '법인', '부서', '제품명', '구매연월', '만료일', '라이선스유형', '금액', '수량', '계정명', '납품업체', '비고']; const SERVER_HEADERS = [...BASE_HW_HEADERS];
const PERM_SW_HEADERS = ['ID', '분야', '법인', '부서', '제품명', '구매연월', '라이선스키', '금액', '수량', '계정명', '납품업체', '비고']; const STORAGE_HEADERS = [...BASE_HW_HEADERS];
const CLOUD_HEADERS = ['ID', '플랫폼명', '법인', '부서', '사용용도(제품명)', '계정명', '결제수단', '결제일', '연결카드번호', '당월청구액', '비고'];
// 1. 전산비품/모바일기기: 현 사용조직 추가
const EQUIP_HEADERS = [
ASSET_SCHEMA.CORP.ui, '유형', ASSET_SCHEMA.ASSET_CODE.ui, ASSET_SCHEMA.MODEL.ui,
ASSET_SCHEMA.ORG.ui, // 현 사용조직 추가
ASSET_SCHEMA.STORE_LOC.ui, ASSET_SCHEMA.DETAIL_LOCATION.ui,
ASSET_SCHEMA.MANAGER_MAIN.ui, ASSET_SCHEMA.MANAGER_SUB.ui,
ASSET_SCHEMA.PURCHASE_YM.ui, ASSET_SCHEMA.PRICE.ui, ASSET_SCHEMA.REMARKS.ui
];
const MOBILE_HEADERS = [...EQUIP_HEADERS];
const SUB_SW_HEADERS = ['분야', ASSET_SCHEMA.CORP.ui, ASSET_SCHEMA.PRODUCT.ui, '부서', ASSET_SCHEMA.QTY.ui, ASSET_SCHEMA.PRICE.ui, ASSET_SCHEMA.PURCHASE_YM.ui, '시작일', ASSET_SCHEMA.EXPIRY.ui, ASSET_SCHEMA.VENDOR.ui, ASSET_SCHEMA.REMARKS.ui];
const PERM_SW_HEADERS = ['분야', ASSET_SCHEMA.CORP.ui, ASSET_SCHEMA.PRODUCT.ui, '부서', ASSET_SCHEMA.QTY.ui, ASSET_SCHEMA.PRICE.ui, ASSET_SCHEMA.PURCHASE_YM.ui, '시작일', ASSET_SCHEMA.LICENSE_KEY.ui, ASSET_SCHEMA.VENDOR.ui, ASSET_SCHEMA.REMARKS.ui];
const CLOUD_HEADERS = [ASSET_SCHEMA.PLATFORM.ui, ASSET_SCHEMA.CORP.ui, ASSET_SCHEMA.PRODUCT.ui, '부서', ASSET_SCHEMA.ACCOUNT.ui, ASSET_SCHEMA.PAY_METHOD.ui, ASSET_SCHEMA.PAY_DAY.ui, ASSET_SCHEMA.CARD_NUM.ui, ASSET_SCHEMA.BILLING.ui, ASSET_SCHEMA.REMARKS.ui];
const DOMAIN_HEADERS = ['유형', ASSET_SCHEMA.CORP.ui, '서비스명', '관리도메인', '시작일', '만료일', ASSET_SCHEMA.PRICE.ui, '담당자', '담당자(부)', ASSET_SCHEMA.REMARKS.ui];
/**
* 엑셀 양식 다운로드
*/
export async function downloadTemplate() {
const workbook = new ExcelJS.Workbook();
const refSheet = workbook.addWorksheet('RefData');
const buildings = Object.keys(LOCATION_DATA);
const corps = CORP_LIST;
const orgs = ORG_LIST;
const typeLists = {
server: ['서버', 'PC'],
storage: ['스토리지', 'NAS', 'DAS'],
equip: ['CPU', 'GPU', 'HDD'],
mobile: ['태블릿', '모바일', '노트북']
};
refSheet.getColumn(1).values = ['CorpList', ...corps];
refSheet.getColumn(2).values = ['OrgList', ...orgs];
refSheet.getColumn(3).values = ['LocList', ...buildings];
refSheet.getColumn(4).values = ['ServerTypes', ...typeLists.server];
refSheet.getColumn(5).values = ['StorageTypes', ...typeLists.storage];
refSheet.getColumn(6).values = ['EquipTypes', ...typeLists.equip];
refSheet.getColumn(7).values = ['MobileTypes', ...typeLists.mobile];
workbook.definedNames.add('RefData!$A$2:$A$' + (corps.length + 1), 'CorpList');
workbook.definedNames.add('RefData!$B$2:$B$' + (orgs.length + 1), 'OrgList');
workbook.definedNames.add('RefData!$C$2:$C$' + (buildings.length + 1), 'LocList');
workbook.definedNames.add('RefData!$D$2:$D$' + (typeLists.server.length + 1), 'ServerTypes');
workbook.definedNames.add('RefData!$E$2:$E$' + (typeLists.storage.length + 1), 'StorageTypes');
workbook.definedNames.add('RefData!$F$2:$F$' + (typeLists.equip.length + 1), 'EquipTypes');
workbook.definedNames.add('RefData!$G$2:$G$' + (typeLists.mobile.length + 1), 'MobileTypes');
buildings.forEach((building, idx) => {
const colIdx = 8 + idx;
const subLocs = LOCATION_DATA[building];
const column = refSheet.getColumn(colIdx);
column.values = [building, ...subLocs];
const safeName = building.replace(/\s/g, '_');
workbook.definedNames.add(`RefData!$${column.letter}$2:$${column.letter}$${subLocs.length + 1}`, safeName);
});
export function downloadTemplate() {
const wb = XLSX.utils.book_new();
const tabConfigs = [ const tabConfigs = [
{ name: '개인PC', headers: PC_HEADERS }, { name: '개인PC', headers: PC_HEADERS, typeRef: '' },
{ name: '서버', headers: SERVER_HEADERS }, { name: '서버', headers: SERVER_HEADERS, typeRef: 'ServerTypes' },
{ name: '스토리지', headers: STORAGE_HEADERS }, { name: '스토리지', headers: STORAGE_HEADERS, typeRef: 'StorageTypes' },
{ name: '전산비품', headers: EQUIP_HEADERS }, { name: '전산비품', headers: EQUIP_HEADERS, typeRef: 'EquipTypes' },
{ name: '모바일기기', headers: MOBILE_HEADERS } { name: '모바일기기', headers: MOBILE_HEADERS, typeRef: 'MobileTypes' },
{ name: '구독SW', headers: SUB_SW_HEADERS, typeRef: '' },
{ name: '영구SW', headers: PERM_SW_HEADERS, typeRef: '' },
{ name: '클라우드', headers: CLOUD_HEADERS, typeRef: '' },
{ name: '도메인', headers: DOMAIN_HEADERS, typeRef: '' }
]; ];
tabConfigs.forEach(config => { tabConfigs.forEach(config => {
const ws = XLSX.utils.aoa_to_sheet([config.headers]); const sheet = workbook.addWorksheet(config.name);
ws['!cols'] = Array(config.headers.length).fill({ wch: 18 }); sheet.getRow(1).values = config.headers;
XLSX.utils.book_append_sheet(wb, ws, config.name); sheet.getRow(1).font = { bold: true };
sheet.getRow(1).fill = { type: 'pattern', pattern: 'solid', fgColor: { argb: 'FFE9EEED' } };
const rowCount = 200;
const codeIdx = config.headers.indexOf(ASSET_SCHEMA.ASSET_CODE.ui) + 1;
if (codeIdx > 0) sheet.getColumn(codeIdx).hidden = true;
config.headers.forEach((header, hIdx) => {
const colNum = hIdx + 1;
const isFreeTextGroup = (config.name === '전산비품' || config.name === '모바일기기');
for (let r = 2; r <= rowCount; r++) {
const cell = sheet.getCell(r, colNum);
if (header === ASSET_SCHEMA.CORP.ui) {
cell.dataValidation = { type: 'list', allowBlank: true, formulae: ['CorpList'] };
} else if (header === ASSET_SCHEMA.ORG.ui) {
cell.dataValidation = { type: 'list', allowBlank: true, formulae: ['OrgList'] };
} else if ((header === ASSET_SCHEMA.LOCATION.ui || header === ASSET_SCHEMA.STORE_LOC.ui) && !isFreeTextGroup) {
cell.dataValidation = { type: 'list', allowBlank: true, formulae: ['LocList'] };
} else if (header === ASSET_SCHEMA.DETAIL_LOCATION.ui && !isFreeTextGroup) {
const parentColIdx = config.headers.indexOf(ASSET_SCHEMA.LOCATION.ui) + 1 || config.headers.indexOf(ASSET_SCHEMA.STORE_LOC.ui) + 1;
if (parentColIdx > 0) {
const parentLetter = sheet.getColumn(parentColIdx).letter;
cell.dataValidation = { type: 'list', allowBlank: true, formulae: [`=INDIRECT(SUBSTITUTE(${parentLetter}${r}," ","_"))`] };
}
} else if (header === '유형' && config.typeRef) {
cell.dataValidation = { type: 'list', allowBlank: true, formulae: [config.typeRef] };
}
}
});
sheet.columns.forEach(col => { col.width = col.hidden ? 0 : 18; });
}); });
SW_TABS.forEach(tab => { refSheet.state = 'veryHidden';
let hd = tab === '구독SW' ? SUB_SW_HEADERS : (tab === '클라우드' ? CLOUD_HEADERS : PERM_SW_HEADERS); const buffer = await workbook.xlsx.writeBuffer();
const ws = XLSX.utils.aoa_to_sheet([hd]); const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
ws['!cols'] = Array(hd.length).fill({ wch: 18 }); const url = window.URL.createObjectURL(blob);
XLSX.utils.book_append_sheet(wb, ws, tab); const a = document.createElement('a');
}); a.href = url;
a.download = `ITAM_Standard_Template_${new Date().toISOString().split('T')[0]}.xlsx`;
XLSX.writeFile(wb, 'itam_assets_template_full.xlsx'); a.click();
window.URL.revokeObjectURL(url);
} }
export function exportToExcel(masterData: MasterAssetData) { export function exportToExcel(masterData: MasterAssetData) {
const wb = XLSX.utils.book_new(); const wb = XLSX.utils.book_new();
const getVal = (obj: any, schemaItem: any) => obj[schemaItem.key] || '';
const exportMap = [ const exportMap = [
{ tab: '개인PC', list: masterData.pc, headers: PC_HEADERS, map: (a: any) => [a., a., 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., a.] }, {
{ tab: '서버', list: masterData.server, headers: SERVER_HEADERS, map: (a: any) => [a., a., a.||a., a.storage유형 || '물리', a., a., a., a., a., a._정, a._부, a.IP주소, a.IP2, a., a.ID, a.PW, a., a.OS, a.CPU, a.RAM, a.GPU, a.SSD1, a.SSD2, a.HDD1, a., a.] }, tab: '개인PC', list: masterData.pc, headers: PC_HEADERS,
{ tab: '스토리지', list: masterData.storage, headers: STORAGE_HEADERS, map: (a: any) => [a., a.storage유형, a., a., a., a., a., a._정, a._부, a.IP주소, a.MACaddress, a.||a., a., a., a., a.] }, map: (a: any) => [
{ tab: '전산비품', list: masterData.equip, headers: EQUIP_HEADERS, map: (a: any) => [a., a., a., a., a., a., a.IP주소, a.MACaddress, a.HW사양, a.OS, a.||a., a., a., a., a.] }, getVal(a, ASSET_SCHEMA.CORP), getVal(a, ASSET_SCHEMA.ASSET_CODE), getVal(a, ASSET_SCHEMA.USER), getVal(a, ASSET_SCHEMA.ORG),
{ tab: '모바일기기', list: masterData.mobile, headers: MOBILE_HEADERS, map: (a: any) => [a., a., a., a., a., a.type, a.OS, a.||a., a., a., a., a.] }, getVal(a, ASSET_SCHEMA.MAINBOARD), getVal(a, ASSET_SCHEMA.OS), getVal(a, ASSET_SCHEMA.CPU), a.GPU, getVal(a, ASSET_SCHEMA.RAM),
{ tab: '구독SW', list: masterData.subSw, headers: SUB_SW_HEADERS, map: (a: any) => [a.id, a., a., a., a., a.||a., a., a., a., a., a., a., a.] }, getVal(a, ASSET_SCHEMA.STORAGE1), getVal(a, ASSET_SCHEMA.STORAGE2), getVal(a, ASSET_SCHEMA.STORAGE3),
{ tab: '영구SW', list: masterData.permSw, headers: PERM_SW_HEADERS, map: (a: any) => [a.id, a., a., a., a., a.||a., a., a., a., a., a., a.] } getVal(a, ASSET_SCHEMA.IP_ADDR), getVal(a, ASSET_SCHEMA.MANAGER_MAIN), getVal(a, ASSET_SCHEMA.MANAGER_SUB),
getVal(a, ASSET_SCHEMA.PURCHASE_YM), getVal(a, ASSET_SCHEMA.PRICE), getVal(a, ASSET_SCHEMA.VENDOR), getVal(a, ASSET_SCHEMA.DOC_NAME), getVal(a, ASSET_SCHEMA.REMARKS)
]
},
{
tab: '서버', list: masterData.server, headers: SERVER_HEADERS,
map: (a: any) => [
getVal(a, ASSET_SCHEMA.CORP), a.type, getVal(a, ASSET_SCHEMA.ASSET_CODE), getVal(a, ASSET_SCHEMA.PURCHASE_YM), getVal(a, ASSET_SCHEMA.ORG),
getVal(a, ASSET_SCHEMA.LOCATION), getVal(a, ASSET_SCHEMA.DETAIL_LOCATION), getVal(a, ASSET_SCHEMA.MANAGER_MAIN), getVal(a, ASSET_SCHEMA.MANAGER_SUB), getVal(a, ASSET_SCHEMA.MODEL),
getVal(a, ASSET_SCHEMA.OS), getVal(a, ASSET_SCHEMA.CPU), getVal(a, ASSET_SCHEMA.RAM), a.GPU, getVal(a, ASSET_SCHEMA.STORAGE1),
getVal(a, ASSET_SCHEMA.STORAGE2), getVal(a, ASSET_SCHEMA.STORAGE3), getVal(a, ASSET_SCHEMA.IP_ADDR), getVal(a, ASSET_SCHEMA.IP_ADDR2),
a., a.ID, a.PW, getVal(a, ASSET_SCHEMA.MONITORING), getVal(a, ASSET_SCHEMA.REMARKS)
]
},
{ tab: '스토리지', list: masterData.storage, headers: STORAGE_HEADERS, map: (a: any) => [getVal(a, ASSET_SCHEMA.CORP), a.type, getVal(a, ASSET_SCHEMA.ASSET_CODE), getVal(a, ASSET_SCHEMA.ORG), getVal(a, ASSET_SCHEMA.LOCATION), getVal(a, ASSET_SCHEMA.DETAIL_LOCATION), getVal(a, ASSET_SCHEMA.MANAGER_MAIN), getVal(a, ASSET_SCHEMA.MANAGER_SUB), getVal(a, ASSET_SCHEMA.MODEL), a., getVal(a, ASSET_SCHEMA.IP_ADDR), getVal(a, ASSET_SCHEMA.PURCHASE_YM), getVal(a, ASSET_SCHEMA.PRICE), getVal(a, ASSET_SCHEMA.REMARKS)] },
{ tab: '전산비품', list: masterData.equip, headers: EQUIP_HEADERS, map: (a: any) => [getVal(a, ASSET_SCHEMA.CORP), a.type, getVal(a, ASSET_SCHEMA.ASSET_CODE), getVal(a, ASSET_SCHEMA.MODEL), getVal(a, ASSET_SCHEMA.ORG), getVal(a, ASSET_SCHEMA.STORE_LOC), getVal(a, ASSET_SCHEMA.DETAIL_LOCATION), getVal(a, ASSET_SCHEMA.MANAGER_MAIN), getVal(a, ASSET_SCHEMA.MANAGER_SUB), getVal(a, ASSET_SCHEMA.PURCHASE_YM), getVal(a, ASSET_SCHEMA.PRICE), getVal(a, ASSET_SCHEMA.REMARKS)] },
{ tab: '모바일기기', list: masterData.mobile, headers: MOBILE_HEADERS, map: (a: any) => [getVal(a, ASSET_SCHEMA.CORP), a.type, getVal(a, ASSET_SCHEMA.ASSET_CODE), getVal(a, ASSET_SCHEMA.MODEL), getVal(a, ASSET_SCHEMA.ORG), getVal(a, ASSET_SCHEMA.STORE_LOC), getVal(a, ASSET_SCHEMA.DETAIL_LOCATION), getVal(a, ASSET_SCHEMA.MANAGER_MAIN), getVal(a, ASSET_SCHEMA.MANAGER_SUB), getVal(a, ASSET_SCHEMA.PURCHASE_YM), getVal(a, ASSET_SCHEMA.PRICE), getVal(a, ASSET_SCHEMA.REMARKS)] },
{ tab: '구독SW', list: masterData.subSw, headers: SUB_SW_HEADERS, map: (a: any) => [a., getVal(a, ASSET_SCHEMA.CORP), getVal(a, ASSET_SCHEMA.PRODUCT), a., getVal(a, ASSET_SCHEMA.QTY), getVal(a, ASSET_SCHEMA.PRICE), getVal(a, ASSET_SCHEMA.PURCHASE_YM), a., getVal(a, ASSET_SCHEMA.EXPIRY), getVal(a, ASSET_SCHEMA.VENDOR), getVal(a, ASSET_SCHEMA.REMARKS)] },
{ tab: '영구SW', list: masterData.permSw, headers: PERM_SW_HEADERS, map: (a: any) => [a., getVal(a, ASSET_SCHEMA.CORP), getVal(a, ASSET_SCHEMA.PRODUCT), a., getVal(a, ASSET_SCHEMA.QTY), getVal(a, ASSET_SCHEMA.PRICE), getVal(a, ASSET_SCHEMA.PURCHASE_YM), a., getVal(a, ASSET_SCHEMA.LICENSE_KEY), getVal(a, ASSET_SCHEMA.VENDOR), getVal(a, ASSET_SCHEMA.REMARKS)] },
{ tab: '클라우드', list: masterData.cloud, headers: CLOUD_HEADERS, map: (a: any) => [getVal(a, ASSET_SCHEMA.PLATFORM), getVal(a, ASSET_SCHEMA.CORP), getVal(a, ASSET_SCHEMA.PRODUCT), a., getVal(a, ASSET_SCHEMA.ACCOUNT), getVal(a, ASSET_SCHEMA.PAY_METHOD), getVal(a, ASSET_SCHEMA.PAY_DAY), getVal(a, ASSET_SCHEMA.CARD_NUM), getVal(a, ASSET_SCHEMA.BILLING), getVal(a, ASSET_SCHEMA.REMARKS)] },
{ tab: '도메인', list: masterData.domain || [], headers: DOMAIN_HEADERS, map: (a: any) => [a.type, a.corp, a.service_name, a.domain_name, a.start_date, a.expiry_date, a.price, a.manager_main, a.manager_sub, a.remarks] }
]; ];
exportMap.forEach(m => { exportMap.forEach(m => {
const ws = XLSX.utils.aoa_to_sheet([m.headers, ...m.list.map(m.map)]); const ws = XLSX.utils.aoa_to_sheet([m.headers, ...m.list.map(m.map)]);
XLSX.utils.book_append_sheet(wb, ws, m.tab); XLSX.utils.book_append_sheet(wb, ws, m.tab);
}); });
XLSX.writeFile(wb, `itam_master_full_${new Date().toISOString().split('T')[0]}.xlsx`); XLSX.writeFile(wb, `itam_master_${new Date().toISOString().split('T')[0]}.xlsx`);
} }
export async function parseExcel(file: File): Promise<MasterAssetData> { export async function parseExcel(file: File): Promise<any> {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
const reader = new FileReader(); const reader = new FileReader();
reader.onload = (e) => { reader.onload = (e) => {
try { try {
const workbook = XLSX.read(e.target?.result, { type: 'binary' }); const workbook = XLSX.read(e.target?.result, { type: 'binary' });
const data: MasterAssetData = { pc: [], server: [], storage: [], equip: [], mobile: [], subSw: [], permSw: [], swUsers: [], logs: [] }; const parsedData: any = {};
workbook.SheetNames.forEach(sheetName => { workbook.SheetNames.forEach(sheetName => {
if (sheetName === 'RefData') return;
const rows = XLSX.utils.sheet_to_json(workbook.Sheets[sheetName]) as any[]; const rows = XLSX.utils.sheet_to_json(workbook.Sheets[sheetName]) as any[];
const list: any[] = [];
rows.forEach(r => {
const common = { id: Math.random().toString(36).substring(2, 9) };
const mapVal = (schemaItem: any) => r[schemaItem.ui] || '';
if (sheetName === '개인PC') { if (sheetName === '개인PC') {
rows.forEach(r => data.pc.push({ id: Math.random().toString(36).substring(2, 9), type: '개인PC', 법인: r['법인']||'', 자산코드: r['자산코드']||'', 사용자: r['사용자']||'', 위치: r['위치']||'', 모델명: r['모델명']||'', 메인보드: r['메인보드']||'', CPU: r['CPU']||'', GPU: r['GPU']||'', RAM: r['RAM']||'', SSD1: r['SSD1']||'', SSD2: r['SSD2']||'', HDD1: r['HDD1']||'', HDD2: r['HDD2']||'', IP주소: r['IP주소']||'', HW사양: r['HW사양']||'', 구매일: r['구매일']||r['구매연월']||'', 금액: r['금액']||'', 납품업체: r['납품업체']||'', 품의서명: r['품의서명']||'', 비고: r['비고']||'', : '', MACaddress: '', OS: '', : '' })); list.push({
} else if (sheetName === '서버') { ...common, type: 'PC', : '개인PC',
rows.forEach(r => data.server.push({ id: Math.random().toString(36).substring(2, 9), type: '서버', 법인: r['구매법인']||r['법인']||'', 자산코드: r['자산번호']||r['자산코드']||'', 구매연월: r['구매연월']||r['구매일자']||r['구매일']||'', storage유형: r['유형']||'물리', 용도: r['용도']||'', 상세: r['상세내용']||'', 현사용조직: r['현사용조직']||'', 이전사용조직: r['이전사용조직']||'', 위치: r['설치위치']||r['위치']||'', 담당자_정: r['담당자(정)']||'', 담당자_부: r['담당자(부)']||'', IP주소: r['IP 주소 1']||r['IP주소']||'', IP2: r['IP 주소 2']||'', 원격접속: r['원격도구']||r['원격접속']||'', 서버ID: r['서버 ID']||r['서버ID']||'', 서버PW: r['서버 PW']||r['서버PW']||'', 모델명: r['모델명']||'', OS: r['OS']||'', CPU: r['CPU']||'', RAM: r['RAM']||'', GPU: r['GPU']||'', SSD1: r['Storage 1']||r['SSD1']||'', SSD2: r['Storage 2']||r['SSD2']||'', HDD1: r['Storage 3']||r['HDD1']||'', 모니터링: r['모니터링']||'', 비고: r['비고']||'', : '', : '', MACaddress: '', HW사양: '', : '', : '', : '' })); [ASSET_SCHEMA.CORP.key]: mapVal(ASSET_SCHEMA.CORP),
} else if (sheetName === '스토리지') { [ASSET_SCHEMA.ASSET_CODE.key]: mapVal(ASSET_SCHEMA.ASSET_CODE),
rows.forEach(r => data.storage.push({ id: Math.random().toString(36).substring(2, 9), type: '스토리지', 법인: r['구매법인']||r['법인']||'', storage유형: r['유형']||'', 자산코드: r['자산코드']||'', 명칭: r['명칭']||'', 위치: r['위치']||'', 모델명: r['모델명']||'', 용량: r['용량']||'', 담당자_정: r['담당자(정)']||'', 담당자_부: r['담당자(부)']||'', IP주소: r['IP주소']||'', MACaddress: r['MAC주소']||'', 구매연월: r['구매연월']||r['구매일']||'', 금액: r['금액']||'', 납품업체: r['납품업체']||'', 품의서명: r['품의서명']||'', 비고: r['비고']||'', HW사양: '', OS: '', : '' })); [ASSET_SCHEMA.USER.key]: mapVal(ASSET_SCHEMA.USER),
} else if (sheetName === '전산비품') { [ASSET_SCHEMA.ORG.key]: mapVal(ASSET_SCHEMA.ORG),
rows.forEach(r => data.equip.push({ id: Math.random().toString(36).substring(2, 9), type: '전산비품', 법인: r['구매법인']||r['법인']||'', 비품유형: r['비품유형']||r['유형']||'', 자산코드: r['자산코드']||'', 명칭: r['명칭']||'', 위치: r['위치']||'', 관리자: r['관리자']||'', IP주소: r['IP주소']||'', MACaddress: r['MACaddress']||'', HW사양: r['HW사양']||'', OS: r['OS']||'', 구매연월: r['구매연월']||r['구매일']||'', 금액: r['금액']||'', 납품업체: r['납품업체']||'', 품의서명: r['품의서명']||'', 비고: r['비고']||'' })); [ASSET_SCHEMA.MAINBOARD.key]: mapVal(ASSET_SCHEMA.MAINBOARD),
} else if (sheetName === '모바일기기') { [ASSET_SCHEMA.OS.key]: mapVal(ASSET_SCHEMA.OS),
rows.forEach(r => data.mobile.push({ id: Math.random().toString(36).substring(2, 9), type: '모바일기기', 법인: r['구매법인']||r['법인']||'', 자산코드: r['자산코드']||'', 명칭: r['명칭']||'', 위치: r['위치']||'', 관리자: r['관리자']||'', OS: r['OS']||'', 구매연월: r['구매연월']||r['구매일']||'', 금액: r['금액']||'', 납품업체: r['납품업체']||'', 품의서명: r['품의서명']||'', 비고: r['비고']||'', IP주소: '', MACaddress: '', HW사양: '' })); [ASSET_SCHEMA.CPU.key]: mapVal(ASSET_SCHEMA.CPU),
GPU: r['GPU'] || '',
[ASSET_SCHEMA.RAM.key]: mapVal(ASSET_SCHEMA.RAM),
[ASSET_SCHEMA.STORAGE1.key]: mapVal(ASSET_SCHEMA.STORAGE1),
[ASSET_SCHEMA.STORAGE2.key]: mapVal(ASSET_SCHEMA.STORAGE2),
[ASSET_SCHEMA.STORAGE3.key]: mapVal(ASSET_SCHEMA.STORAGE3),
[ASSET_SCHEMA.IP_ADDR.key]: mapVal(ASSET_SCHEMA.IP_ADDR),
[ASSET_SCHEMA.MANAGER_MAIN.key]: mapVal(ASSET_SCHEMA.MANAGER_MAIN),
[ASSET_SCHEMA.MANAGER_SUB.key]: mapVal(ASSET_SCHEMA.MANAGER_SUB),
[ASSET_SCHEMA.PURCHASE_YM.key]: mapVal(ASSET_SCHEMA.PURCHASE_YM),
[ASSET_SCHEMA.PRICE.key]: mapVal(ASSET_SCHEMA.PRICE),
[ASSET_SCHEMA.VENDOR.key]: mapVal(ASSET_SCHEMA.VENDOR),
[ASSET_SCHEMA.DOC_NAME.key]: mapVal(ASSET_SCHEMA.DOC_NAME),
[ASSET_SCHEMA.REMARKS.key]: mapVal(ASSET_SCHEMA.REMARKS)
});
} else if (['서버', '스토리지', '전산비품', '모바일기기'].includes(sheetName)) {
const typeValue = r['유형'] || sheetName;
list.push({
...common,
type: typeValue,
상세용도: sheetName === '서버' ? '서버' : typeValue,
[ASSET_SCHEMA.CORP.key]: mapVal(ASSET_SCHEMA.CORP),
[ASSET_SCHEMA.ASSET_CODE.key]: mapVal(ASSET_SCHEMA.ASSET_CODE),
[ASSET_SCHEMA.PURCHASE_YM.key]: mapVal(ASSET_SCHEMA.PURCHASE_YM),
[ASSET_SCHEMA.ORG.key]: mapVal(ASSET_SCHEMA.ORG),
[ASSET_SCHEMA.LOCATION.key]: mapVal(ASSET_SCHEMA.LOCATION) || r[ASSET_SCHEMA.STORE_LOC.ui] || '',
[ASSET_SCHEMA.DETAIL_LOCATION.key]: mapVal(ASSET_SCHEMA.DETAIL_LOCATION),
[ASSET_SCHEMA.MANAGER_MAIN.key]: mapVal(ASSET_SCHEMA.MANAGER_MAIN),
[ASSET_SCHEMA.MANAGER_SUB.key]: mapVal(ASSET_SCHEMA.MANAGER_SUB),
[ASSET_SCHEMA.IP_ADDR.key]: mapVal(ASSET_SCHEMA.IP_ADDR),
[ASSET_SCHEMA.IP_ADDR2.key]: mapVal(ASSET_SCHEMA.IP_ADDR2),
원격접속: r['원격도구'] || '', 서버ID: r['서버ID'] || '', 서버PW: r['서버PW'] || '',
[ASSET_SCHEMA.MODEL.key]: mapVal(ASSET_SCHEMA.MODEL),
[ASSET_SCHEMA.OS.key]: mapVal(ASSET_SCHEMA.OS),
[ASSET_SCHEMA.CPU.key]: mapVal(ASSET_SCHEMA.CPU),
[ASSET_SCHEMA.RAM.key]: mapVal(ASSET_SCHEMA.RAM),
GPU: r['GPU'] || '',
[ASSET_SCHEMA.STORAGE1.key]: mapVal(ASSET_SCHEMA.STORAGE1),
[ASSET_SCHEMA.STORAGE2.key]: mapVal(ASSET_SCHEMA.STORAGE2),
[ASSET_SCHEMA.STORAGE3.key]: mapVal(ASSET_SCHEMA.STORAGE3),
[ASSET_SCHEMA.MONITORING.key]: mapVal(ASSET_SCHEMA.MONITORING),
[ASSET_SCHEMA.REMARKS.key]: mapVal(ASSET_SCHEMA.REMARKS)
});
} else if (sheetName === '구독SW') { } else if (sheetName === '구독SW') {
rows.forEach(r => data.subSw.push({ id: r['ID']||Math.random().toString(36).substring(2, 9), type: '구독SW', 분야: r['분야']||'', 법인: r['법인']||'', 부서: r['부서']||'', 제품명: r['제품명']||'', 구매연월: r['구매연월']||r['구매일']||'', 만료일: r['만료일']||'', 라이선스유형: r['라이선스유형']||'', 금액: r['금액']||'', 수량: parseInt(r['수량']||'1'), 계정명: r['계정명']||'', 납품업체: r['납품업체']||'', 비고: r['비고']||'' })); list.push({ ...common, type: '구독SW', 분야: r['분야'] || '', [ASSET_SCHEMA.CORP.key]: mapVal(ASSET_SCHEMA.CORP), [ASSET_SCHEMA.PRODUCT.key]: mapVal(ASSET_SCHEMA.PRODUCT), 부서: r['부서'] || '', [ASSET_SCHEMA.QTY.key]: mapVal(ASSET_SCHEMA.QTY), [ASSET_SCHEMA.PRICE.key]: mapVal(ASSET_SCHEMA.PRICE), [ASSET_SCHEMA.PURCHASE_YM.key]: mapVal(ASSET_SCHEMA.PURCHASE_YM), 시작일: r['시작일'] || '', [ASSET_SCHEMA.VENDOR.key]: mapVal(ASSET_SCHEMA.VENDOR), [ASSET_SCHEMA.EXPIRY.key]: mapVal(ASSET_SCHEMA.EXPIRY), [ASSET_SCHEMA.REMARKS.key]: mapVal(ASSET_SCHEMA.REMARKS) });
} else if (sheetName === '영구SW') { } else if (sheetName === '영구SW') {
rows.forEach(r => data.permSw.push({ id: r['ID']||Math.random().toString(36).substring(2, 9), type: '영구SW', 분야: r['분야']||'', 법인: r['법인']||'', 부서: r['부서']||'', 제품명: r['제품명']||'', 구매연월: r['구매연월']||r['구매일']||'', 라이선스키: r['라이선스키']||'', 금액: r['금액']||'', 수량: parseInt(r['수량']||'1'), 계정명: r['계정명']||'', 납품업체: r['납품업체']||'', 비고: r['비고']||'' })); list.push({ ...common, type: '영구SW', 분야: r['분야'] || '', [ASSET_SCHEMA.CORP.key]: mapVal(ASSET_SCHEMA.CORP), [ASSET_SCHEMA.PRODUCT.key]: mapVal(ASSET_SCHEMA.PRODUCT), 부서: r['부서'] || '', [ASSET_SCHEMA.QTY.key]: mapVal(ASSET_SCHEMA.QTY), [ASSET_SCHEMA.PRICE.key]: mapVal(ASSET_SCHEMA.PRICE), [ASSET_SCHEMA.PURCHASE_YM.key]: mapVal(ASSET_SCHEMA.PURCHASE_YM), 시작일: r['시작일'] || '', [ASSET_SCHEMA.VENDOR.key]: mapVal(ASSET_SCHEMA.VENDOR), [ASSET_SCHEMA.LICENSE_KEY.key]: mapVal(ASSET_SCHEMA.LICENSE_KEY), [ASSET_SCHEMA.REMARKS.key]: mapVal(ASSET_SCHEMA.REMARKS) });
} else if (sheetName === '클라우드') {
list.push({ ...common, type: '클라우드', [ASSET_SCHEMA.PLATFORM.key]: mapVal(ASSET_SCHEMA.PLATFORM), [ASSET_SCHEMA.CORP.key]: mapVal(ASSET_SCHEMA.CORP), [ASSET_SCHEMA.PRODUCT.key]: mapVal(ASSET_SCHEMA.PRODUCT), 부서: r['부서'] || '', [ASSET_SCHEMA.ACCOUNT.key]: mapVal(ASSET_SCHEMA.ACCOUNT), [ASSET_SCHEMA.PAY_METHOD.key]: mapVal(ASSET_SCHEMA.PAY_METHOD), [ASSET_SCHEMA.PAY_DAY.key]: mapVal(ASSET_SCHEMA.PAY_DAY), [ASSET_SCHEMA.CARD_NUM.key]: mapVal(ASSET_SCHEMA.CARD_NUM), [ASSET_SCHEMA.BILLING.key]: mapVal(ASSET_SCHEMA.BILLING), [ASSET_SCHEMA.REMARKS.key]: mapVal(ASSET_SCHEMA.REMARKS) });
} else if (sheetName === '도메인') {
list.push({ ...common, type: r['유형']||'도메인', corp: r['법인']||'', service_name: r['서비스명']||'', domain_name: r['관리도메인']||'', start_date: r['시작일']||'', expiry_date: r['만료일']||'', price: r['금액']||'', manager_main: r['담당자']||'', manager_sub: r['담당자(부)']||'', remarks: r['비고']||'' });
} }
}); });
resolve(data); if (list.length > 0) parsedData[sheetName] = list;
});
resolve(parsedData);
} catch (err) { reject(err); } } catch (err) { reject(err); }
}; };
reader.readAsBinaryString(file); reader.readAsBinaryString(file);

View File

@@ -13,9 +13,13 @@ export const ASSET_SCHEMA = {
CORP: { key: '법인', db: 'corp', ui: '구매법인' }, CORP: { key: '법인', db: 'corp', ui: '구매법인' },
ASSET_CODE: { key: '자산코드', db: 'asset_code', ui: '자산번호' }, ASSET_CODE: { key: '자산코드', db: 'asset_code', ui: '자산번호' },
PURCHASE_YM: { key: '구매연월', db: 'purchase_date', ui: '구매연월' }, PURCHASE_YM: { key: '구매연월', db: 'purchase_date', ui: '구매연월' },
START_DATE: { key: '시작일', db: 'start_date', ui: '시작일' },
ORG: { key: '현사용조직', db: 'current_org', ui: '현 사용조직' }, ORG: { key: '현사용조직', db: 'current_org', ui: '현 사용조직' },
PREV_ORG: { key: '이전사용조직', db: 'prev_org', ui: '이전 사용조직' }, PREV_ORG: { key: '이전사용조직', db: 'prev_org', ui: '이전 사용조직' },
LOCATION: { key: '위치', db: 'location', ui: '설치위치' }, LOCATION: { key: '위치', db: 'location', ui: '설치위치' },
DETAIL_LOCATION:{ key: '상세위치', db: 'detail_location', ui: '상세위치' },
PURPOSE: { key: '용도', db: 'purpose', ui: '용도' },
DETAILS: { key: '상세', db: 'details', ui: '상세' },
MANAGER_MAIN: { key: '담당자_정', db: 'manager_main', ui: '담당자' }, MANAGER_MAIN: { key: '담당자_정', db: 'manager_main', ui: '담당자' },
MANAGER_SUB: { key: '담당자_부', db: 'manager_sub', ui: '담당자(부)' }, MANAGER_SUB: { key: '담당자_부', db: 'manager_sub', ui: '담당자(부)' },
PRICE: { key: '금액', db: 'price', ui: '도입금액' }, PRICE: { key: '금액', db: 'price', ui: '도입금액' },
@@ -24,7 +28,7 @@ export const ASSET_SCHEMA = {
REMARKS: { key: '비고', db: 'remarks', ui: '비고' }, REMARKS: { key: '비고', db: 'remarks', ui: '비고' },
// ─── 하드웨어 상세 (Hardware) ─── // ─── 하드웨어 상세 (Hardware) ───
USER: { key: '사용자', db: 'purpose', ui: '사용자' }, USER: { key: '사용자', db: 'user_name', ui: '사용자' },
MODEL: { key: '모델명', db: 'model_name', ui: '모델명' }, MODEL: { key: '모델명', db: 'model_name', ui: '모델명' },
MAINBOARD: { key: '메인보드', db: 'mainboard', ui: '메인보드' }, MAINBOARD: { key: '메인보드', db: 'mainboard', ui: '메인보드' },
OS: { key: 'OS', db: 'os', ui: '운영체제' }, OS: { key: 'OS', db: 'os', ui: '운영체제' },
@@ -32,11 +36,13 @@ export const ASSET_SCHEMA = {
RAM: { key: 'RAM', db: 'ram', ui: 'RAM' }, RAM: { key: 'RAM', db: 'ram', ui: 'RAM' },
STORAGE1: { key: 'SSD1', db: 'storage1', ui: 'Storage 1' }, STORAGE1: { key: 'SSD1', db: 'storage1', ui: 'Storage 1' },
STORAGE2: { key: 'SSD2', db: 'storage2', ui: 'Storage 2' }, STORAGE2: { key: 'SSD2', db: 'storage2', ui: 'Storage 2' },
STORAGE3: { key: 'HDD1', db: 'storage3', ui: 'Storage 3' },
IP_ADDR: { key: 'IP주소', db: 'ip_address', ui: 'IP 주소 1' }, IP_ADDR: { key: 'IP주소', db: 'ip_address', ui: 'IP 주소 1' },
IP_ADDR2: { key: 'IP2', db: 'ip2', ui: 'IP 주소 2' }, IP_ADDR2: { key: 'IP2', db: 'ip2', ui: 'IP 주소 2' },
MAC_ADDR: { key: 'MACaddress', db: 'mac_address', ui: 'MAC 주소' }, MAC_ADDR: { key: 'MACaddress', db: 'mac_address', ui: 'MAC 주소' },
STATUS: { key: '현재상태', db: 'status', ui: '현재상태' }, STATUS: { key: '현재상태', db: 'status', ui: '현재상태' },
STORE_LOC: { key: '보관위치', db: 'storage_location',ui: '보관위치' }, STORE_LOC: { key: '보관위치', db: 'storage_location',ui: '보관위치' },
MONITORING: { key: '모니터링', db: 'monitoring', ui: '모니터링' },
// ─── 소프트웨어/클라우드 상세 (SW/Cloud) ─── // ─── 소프트웨어/클라우드 상세 (SW/Cloud) ───
PRODUCT: { key: '제품명', db: 'product_name', ui: '제품/서비스명' }, PRODUCT: { key: '제품명', db: 'product_name', ui: '제품/서비스명' },

View File

@@ -12,6 +12,7 @@ export interface MasterAssetData {
cloud: SoftwareAsset[]; // 클라우드 배열 추가 cloud: SoftwareAsset[]; // 클라우드 배열 추가
swUsers: SWUser[]; swUsers: SWUser[];
logs: HardwareLog[]; logs: HardwareLog[];
domain: any[];
// 동료 코드 호환용 통합 배열 (프론트엔드 로직용) // 동료 코드 호환용 통합 배열 (프론트엔드 로직용)
hw: HardwareAsset[]; hw: HardwareAsset[];
@@ -19,9 +20,10 @@ export interface MasterAssetData {
} }
export interface AppState { export interface AppState {
activeCategory: 'dashboard' | 'hw' | 'sw'; activeCategory: 'dashboard' | 'hw' | 'sw' | 'ops';
activeSubTab: string; // '대시보드', '개인PC', '서버', '스토리지', '전산비품', '구독SW', '영구SW', '클라우드' activeSubTab: string; // '대시보드', '개인PC', '서버', '스토리지', '전산비품', '구독SW', '영구SW', '클라우드'
masterData: MasterAssetData; masterData: MasterAssetData;
activeCharts?: any[];
} }
// 초기 상태 // 초기 상태
@@ -40,7 +42,8 @@ export const state: AppState = {
hw: [], // 호환용 hw: [], // 호환용
sw: [], // 호환용 sw: [], // 호환용
swUsers: [], swUsers: [],
logs: [] logs: [],
domain: []
} }
}; };
@@ -50,16 +53,17 @@ export const state: AppState = {
export async function loadMasterDataFromDB() { export async function loadMasterDataFromDB() {
try { try {
const endpoints = [ const endpoints = [
{ key: 'pc', url: 'http://172.16.40.100:3000/api/pc' }, { key: 'pc', url: `http://${location.hostname}:3000/api/pc` },
{ key: 'server', url: 'http://172.16.40.100:3000/api/server' }, { key: 'server', url: `http://${location.hostname}:3000/api/server` },
{ key: 'storage', url: 'http://172.16.40.100:3000/api/storage' }, { key: 'storage', url: `http://${location.hostname}:3000/api/storage` },
{ key: 'equip', url: 'http://172.16.40.100:3000/api/equip' }, { key: 'equip', url: `http://${location.hostname}:3000/api/equip` },
{ key: 'mobile', url: 'http://172.16.40.100:3000/api/mobile' }, { key: 'mobile', url: `http://${location.hostname}:3000/api/mobile` },
{ key: 'subSw', url: 'http://172.16.40.100:3000/api/sw/sub' }, { key: 'subSw', url: `http://${location.hostname}:3000/api/sw/sub` },
{ key: 'permSw', url: 'http://172.16.40.100:3000/api/sw/perm' }, { key: 'permSw', url: `http://${location.hostname}:3000/api/sw/perm` },
{ key: 'cloud', url: 'http://172.16.40.100:3000/api/cloud' }, { key: 'cloud', url: `http://${location.hostname}:3000/api/cloud` },
{ key: 'swUsers', url: 'http://172.16.40.100:3000/api/sw-users' }, { key: 'domain', url: `http://${location.hostname}:3000/api/ops/domain` },
{ key: 'logs', url: 'http://172.16.40.100:3000/api/logs' } { key: 'swUsers', url: `http://${location.hostname}:3000/api/sw-users` },
{ key: 'logs', url: `http://${location.hostname}:3000/api/logs` }
]; ];
const results = await Promise.all(endpoints.map(e => fetch(e.url))); const results = await Promise.all(endpoints.map(e => fetch(e.url)));
@@ -194,7 +198,7 @@ export function deleteHardwareAsset(assetId: string) {
*/ */
export async function saveSoftwareAsset(asset: SoftwareAsset) { export async function saveSoftwareAsset(asset: SoftwareAsset) {
try { try {
const response = await fetch('http://172.16.40.100:3000/api/software/save', { const response = await fetch(`http://${location.hostname}:3000/api/software/save`, {
method: 'POST', method: 'POST',
headers: { 'Content-Type': 'application/json' }, headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(asset) body: JSON.stringify(asset)
@@ -223,7 +227,7 @@ export async function saveSoftwareAsset(asset: SoftwareAsset) {
*/ */
export async function deleteSoftwareAsset(type: string, id: string) { export async function deleteSoftwareAsset(type: string, id: string) {
try { try {
const response = await fetch(`http://172.16.40.100:3000/api/asset/${type}/${id}`, { const response = await fetch(`http://${location.hostname}:3000/api/asset/${type}/${id}`, {
method: 'DELETE' method: 'DELETE'
}); });

View File

@@ -7,6 +7,8 @@ import { initBaseModal } from './components/Modal/BaseModal';
import { initHwModal, openHwModal } from './components/Modal/HWModal'; import { initHwModal, openHwModal } from './components/Modal/HWModal';
import { initSwModal, openSwModal } from './components/Modal/SWModal'; import { initSwModal, openSwModal } from './components/Modal/SWModal';
import { initSwUserModal } from './components/Modal/SWUserModal'; import { initSwUserModal } from './components/Modal/SWUserModal';
import { initDomainModal, openDomainModal } from './components/Modal/DomainModal';
import { initUploadPreviewModal, openUploadPreview } from './components/Modal/UploadPreviewModal';
import { initDashboardDetailModal } from './components/Modal/DashboardDetailModal'; import { initDashboardDetailModal } from './components/Modal/DashboardDetailModal';
import { initGuide } from './components/Guide'; import { initGuide } from './components/Guide';
import { createIcons, Download, Upload, FileSpreadsheet, Plus, X, LayoutDashboard, Monitor, Server, Database, Laptop, CalendarClock, Key, Cpu, Layers, Users, Paperclip, Edit2, History, RefreshCcw, BookOpen, Settings } from 'lucide'; import { createIcons, Download, Upload, FileSpreadsheet, Plus, X, LayoutDashboard, Monitor, Server, Database, Laptop, CalendarClock, Key, Cpu, Layers, Users, Paperclip, Edit2, History, RefreshCcw, BookOpen, Settings } from 'lucide';
@@ -26,19 +28,20 @@ async function apiBatchSave(url: string, data: any[], label: string) {
console.log(`${label} DB 저장 완료`); console.log(`${label} DB 저장 완료`);
} catch (err) { } catch (err) {
console.error(`${label} DB 저장 오류:`, err); console.error(`${label} DB 저장 오류:`, err);
alert(`${label} 저장 중 오류가 발생했습니다: ${err.message}`); alert(`${label} 저장 중 오류가 발생했습니다: ${(err as any).message}`);
} }
} }
const savePcToDB = () => apiBatchSave('http://172.16.40.100:3000/api/pc/batch', state.masterData.pc, '개인PC'); const savePcToDB = () => apiBatchSave(`http://${location.hostname}:3000/api/pc/batch`, state.masterData.pc, '개인PC');
const saveServerToDB = () => apiBatchSave('http://172.16.40.100:3000/api/server/batch', state.masterData.server, '서버'); const saveServerToDB = () => apiBatchSave(`http://${location.hostname}:3000/api/server/batch`, state.masterData.server, '서버');
const saveStorageToDB = () => apiBatchSave('http://172.16.40.100:3000/api/storage/batch', state.masterData.storage, '스토리지'); const saveStorageToDB = () => apiBatchSave(`http://${location.hostname}:3000/api/storage/batch`, state.masterData.storage, '스토리지');
const saveEquipToDB = () => apiBatchSave('http://172.16.40.100:3000/api/equip/batch', state.masterData.equip, '전산비품'); const saveEquipToDB = () => apiBatchSave(`http://${location.hostname}:3000/api/equip/batch`, state.masterData.equip, '전산비품');
const saveMobileToDB = () => apiBatchSave('http://172.16.40.100:3000/api/mobile/batch', state.masterData.mobile, '모바일기기'); const saveMobileToDB = () => apiBatchSave(`http://${location.hostname}:3000/api/mobile/batch`, state.masterData.mobile, '모바일기기');
const saveSubSwToDB = () => apiBatchSave('http://172.16.40.100:3000/api/sw/sub/batch', state.masterData.subSw, '구독SW'); const saveSubSwToDB = () => apiBatchSave(`http://${location.hostname}:3000/api/sw/sub/batch`, state.masterData.subSw, '구독SW');
const savePermSwToDB = () => apiBatchSave('http://172.16.40.100:3000/api/sw/perm/batch', state.masterData.permSw, '영구SW'); const savePermSwToDB = () => apiBatchSave(`http://${location.hostname}:3000/api/sw/perm/batch`, state.masterData.permSw, '영구SW');
const saveCloudToDB = () => apiBatchSave('http://172.16.40.100:3000/api/cloud/batch', state.masterData.cloud, '클라우드'); const saveCloudToDB = () => apiBatchSave(`http://${location.hostname}:3000/api/cloud/batch`, state.masterData.cloud, '클라우드');
const saveSwUsersToDB = () => apiBatchSave('http://172.16.40.100:3000/api/sw-users/batch', state.masterData.swUsers, 'SW사용자'); const saveSwUsersToDB = () => apiBatchSave(`http://${location.hostname}:3000/api/sw-users/batch`, state.masterData.swUsers, 'SW사용자');
const saveLogsToDB = () => apiBatchSave(`http://${location.hostname}:3000/api/logs/batch`, state.masterData.logs, '자산 로그');
// 화면 갱신 통합 핸들러 (대시보드 vs 리스트) // 화면 갱신 통합 핸들러 (대시보드 vs 리스트)
function refreshView() { function refreshView() {
@@ -59,7 +62,8 @@ async function saveAllHardwareToDB() {
saveServerToDB(), saveServerToDB(),
saveStorageToDB(), saveStorageToDB(),
saveEquipToDB(), saveEquipToDB(),
saveMobileToDB() saveMobileToDB(),
saveLogsToDB()
]); ]);
await loadMasterDataFromDB(); await loadMasterDataFromDB();
refreshView(); refreshView();
@@ -71,7 +75,8 @@ async function saveAllSoftwareToDB() {
saveSubSwToDB(), saveSubSwToDB(),
savePermSwToDB(), savePermSwToDB(),
saveCloudToDB(), saveCloudToDB(),
saveSwUsersToDB() saveSwUsersToDB(),
saveLogsToDB()
]); ]);
// 저장 후 최신 데이터 다시 로드 (정합성) // 저장 후 최신 데이터 다시 로드 (정합성)
await loadMasterDataFromDB(); await loadMasterDataFromDB();
@@ -106,6 +111,11 @@ function initApp() {
}, closeAllModals); }, closeAllModals);
initDashboardDetailModal(); initDashboardDetailModal();
initDomainModal();
initUploadPreviewModal(async () => {
await loadMasterDataFromDB();
refreshView();
});
initGuide(); initGuide();
// DB 데이터 로드 및 초기 화면 렌더링 // DB 데이터 로드 및 초기 화면 렌더링
@@ -116,6 +126,8 @@ function initApp() {
}); });
} catch (e) { console.error('❌ Initialization failed:', e); } } catch (e) { console.error('❌ Initialization failed:', e); }
console.log('🚀 ITAM App Version 2.1.0 Loaded');
// 버튼 이벤트 바인딩 // 버튼 이벤트 바인딩
document.getElementById('btn-download-template')?.addEventListener('click', () => downloadTemplate()); document.getElementById('btn-download-template')?.addEventListener('click', () => downloadTemplate());
document.getElementById('btn-export-excel')?.addEventListener('click', () => exportToExcel(state.masterData)); document.getElementById('btn-export-excel')?.addEventListener('click', () => exportToExcel(state.masterData));
@@ -124,10 +136,17 @@ function initApp() {
uploadInput?.addEventListener('change', async (e) => { uploadInput?.addEventListener('change', async (e) => {
const file = (e.target as HTMLInputElement).files?.[0]; const file = (e.target as HTMLInputElement).files?.[0];
if (file) { if (file) {
console.log('📂 File selected:', file.name);
try {
const data = await parseExcel(file); const data = await parseExcel(file);
state.masterData = data; console.log('📊 Parsed data keys:', Object.keys(data));
await Promise.all([saveAllHardwareToDB(), saveAllSoftwareToDB()]); openUploadPreview(data);
handleTabChange(state.activeSubTab); // Clear input so same file can be selected again
uploadInput.value = '';
} catch (err) {
alert('엑셀 파일을 읽는 중 오류가 발생했습니다.');
console.error(err);
}
} }
}); });
@@ -139,6 +158,8 @@ function initApp() {
openHwModal({ id: Math.random().toString(36).substring(2, 9), type: defaultType, : '한맥', : '', : '', : '', MACaddress: '', HW사양: '', OS: '', : '', : '' } as any, 'add'); openHwModal({ id: Math.random().toString(36).substring(2, 9), type: defaultType, : '한맥', : '', : '', : '', MACaddress: '', HW사양: '', OS: '', : '', : '' } as any, 'add');
} else if (cat === 'sw') { } else if (cat === 'sw') {
openSwModal({ id: Math.random().toString(36).substring(2, 9), type: tab === '대시보드' ? '구독SW' : tab, : '', : '', 수량: 1, : '', : '', : '', : '한맥' } as any, 'add'); openSwModal({ id: Math.random().toString(36).substring(2, 9), type: tab === '대시보드' ? '구독SW' : tab, : '', : '', 수량: 1, : '', : '', : '', : '한맥' } as any, 'add');
} else if (cat === 'ops') {
if (tab === '도메인') openDomainModal(null);
} }
}); });

View File

@@ -269,8 +269,7 @@ body {
/* --- Layout Frame --- */ /* --- Layout Frame --- */
.content-area { .content-area {
flex: 1; flex: 1;
padding: 0 2rem; padding: 1.25rem 2rem 0; /* 상단 여백 1.25rem 추가 */
/* 좌우 여백만 유지 */
overflow: hidden; overflow: hidden;
/* 전체 스크롤 차단 */ /* 전체 스크롤 차단 */
display: flex; display: flex;

View File

@@ -77,10 +77,10 @@ export function renderHwDashboard(container: HTMLElement) {
</div> </div>
<div class="dashboard-card stat-card"> <div class="dashboard-card stat-card">
<div class="stat-label">최신 도입 모델 (${latestYear}년)</div> <div class="stat-label">최신 도입 모델 (${latestYear}년)</div>
<div class="stat-value" style="font-size: 1.25rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;" title="${latestAsset?. || '정보 없음'}"> <div class="stat-value" style="font-size: 1.25rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;" title="${(latestAsset as any)?. || '정보 없음'}">
${latestAsset?. || '정보 없음'} ${(latestAsset as any)?. || '정보 없음'}
</div> </div>
<div class="stat-footer">가장 최근 자산번호: ${latestAsset?. || '-'}</div> <div class="stat-footer">가장 최근 자산번호: ${(latestAsset as any)?. || '-'}</div>
</div> </div>
</div> </div>

View File

@@ -9,6 +9,10 @@ export function renderSwDashboard(container: HTMLElement) {
let subQty = 0, subUsed = 0, subExp = 0, subTotal = 0; let subQty = 0, subUsed = 0, subExp = 0, subTotal = 0;
let permQty = 0, permUsed = 0, permExp = 0, permTotal = 0; let permQty = 0, permUsed = 0, permExp = 0, permTotal = 0;
let subCost2026 = 0;
let permCost2026 = 0;
let cloudCost2026 = 0;
const currentYear = new Date().getFullYear(); const currentYear = new Date().getFullYear();
const corps = ['한맥', '삼안', '바론']; const corps = ['한맥', '삼안', '바론'];
@@ -19,7 +23,7 @@ export function renderSwDashboard(container: HTMLElement) {
categories.forEach(c => costByCat[c] = 0); categories.forEach(c => costByCat[c] = 0);
// 통합 SW 데이터 // 통합 SW 데이터
const allSw = [...state.masterData.subSw, ...state.masterData.permSw]; const allSw = [...state.masterData.subSw, ...state.masterData.permSw, ...state.masterData.cloud];
allSw.forEach(sw => { allSw.forEach(sw => {
const userMapping = state.masterData.swUsers.find(u => u.sw_id === sw.id); const userMapping = state.masterData.swUsers.find(u => u.sw_id === sw.id);
@@ -36,12 +40,35 @@ export function renderSwDashboard(container: HTMLElement) {
if (isSWExpiring(sw)) permExp++; if (isSWExpiring(sw)) permExp++;
} }
if (sw. && sw..startsWith(String(currentYear))) { // 초기 도입 비용 (2026년 구매건)
if (sw. && sw..startsWith('2026')) {
if (sw.type === '구독SW') subCost2026 += price;
else if (sw.type === '영구SW') permCost2026 += price;
else if (sw.type === '클라우드') cloudCost2026 += price;
if (costByCorp[sw.] !== undefined) costByCorp[sw.] += price; if (costByCorp[sw.] !== undefined) costByCorp[sw.] += price;
if (sw. && costByCat[sw.] !== undefined) costByCat[sw.] += price; if (sw. && costByCat[sw.] !== undefined) costByCat[sw.] += price;
} }
}); });
// 누적 추가 비용 집계 (2026년 계약 업데이트 로그 기반)
if (state.masterData.logs) {
state.masterData.logs.forEach(log => {
if (log.date && log.date.startsWith('2026') && log.cost) {
const asset = allSw.find(a => a.id === log.assetId);
if (asset) {
const cost = Number(log.cost) || 0;
if (asset.type === '구독SW') subCost2026 += cost;
else if (asset.type === '영구SW') permCost2026 += cost;
else if (asset.type === '클라우드') cloudCost2026 += cost;
if (costByCorp[asset.] !== undefined) costByCorp[asset.] += cost;
if (asset. && costByCat[asset.] !== undefined) costByCat[asset.] += cost;
}
}
});
}
const subPer = subQty > 0 ? Math.round((subUsed/subQty)*100) : 0; const subPer = subQty > 0 ? Math.round((subUsed/subQty)*100) : 0;
const permPer = permQty > 0 ? Math.round((permUsed/permQty)*100) : 0; const permPer = permQty > 0 ? Math.round((permUsed/permQty)*100) : 0;
const subExpPer = subTotal > 0 ? Math.round((subExp/subTotal)*100) : 0; const subExpPer = subTotal > 0 ? Math.round((subExp/subTotal)*100) : 0;
@@ -95,42 +122,32 @@ export function renderSwDashboard(container: HTMLElement) {
</div> </div>
</div> </div>
<h3 class="dashboard-section-title">${currentYear} 도입 비용 분석</h3> <h3 class="dashboard-section-title">2026년 누적 도입 비용 분석</h3>
<div class="dashboard-layout-2col">
<div class="dashboard-card"> <div style="display:grid; grid-template-columns: repeat(3, 1fr); gap:1.5rem; margin-bottom:1.5rem;">
<h4 style="margin-bottom:1rem; font-size:0.9rem; color:var(--text-muted);">구매법인별 도입 금액 (원)</h4> <div class="dashboard-card" style="min-height:auto;">
<canvas id="chart-sw-corp"></canvas> <span style="font-size:1rem; font-weight:700; color:var(--text-main);">구독 SW 누적 비용 (2026)</span>
<div style="font-size: 0.8125rem; color:var(--text-muted); margin-bottom: 1rem;">갱신 및 추가 비용 합계</div>
<div style="font-size: 2rem; font-weight:700; color:var(--dash-primary);">₩ ${subCost2026.toLocaleString()}</div>
<div style="width: 100%; height: 4px; background-color: var(--primary-color); border-radius: 2px; margin-top: 0.5rem;"></div>
</div> </div>
<div class="dashboard-card"> <div class="dashboard-card" style="min-height:auto;">
<h4 style="margin-bottom:1rem; font-size:0.9rem; color:var(--text-muted);">분야별 도입 금액 (원)</h4> <span style="font-size:1rem; font-weight:700; color:var(--text-main);">영구 SW 누적 비용 (2026)</span>
<canvas id="chart-sw-cat"></canvas> <div style="font-size: 0.8125rem; color:var(--text-muted); margin-bottom: 1rem;">유지보수 및 신규 도입 합계</div>
<div style="font-size: 2rem; font-weight:700; color:#3b82f6;">₩ ${permCost2026.toLocaleString()}</div>
<div style="width: 100%; height: 4px; background-color: #3b82f6; border-radius: 2px; margin-top: 0.5rem;"></div>
</div>
<div class="dashboard-card" style="min-height:auto;">
<span style="font-size:1rem; font-weight:700; color:var(--text-main);">클라우드 누적 비용 (2026)</span>
<div style="font-size: 0.8125rem; color:var(--text-muted); margin-bottom: 1rem;">월별 청구액 누적 합계</div>
<div style="font-size: 2rem; font-weight:700; color:#f59e0b;">₩ ${cloudCost2026.toLocaleString()}</div>
<div style="width: 100%; height: 4px; background-color: #f59e0b; border-radius: 2px; margin-top: 0.5rem;"></div>
</div> </div>
</div> </div>
</div> </div>
`; `;
setTimeout(() => {
if (typeof Chart === 'undefined') return;
const ctxCorp = (document.getElementById('chart-sw-corp') as HTMLCanvasElement)?.getContext('2d');
if (ctxCorp) {
new Chart(ctxCorp, {
type: 'bar',
data: { labels: corps, datasets: [{ data: corps.map(c => costByCorp[c]), backgroundColor: 'rgba(30, 81, 73, 0.8)', borderRadius: 4 }] },
options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } } }
});
}
const ctxCat = (document.getElementById('chart-sw-cat') as HTMLCanvasElement)?.getContext('2d');
if (ctxCat) {
new Chart(ctxCat, {
type: 'bar',
data: { labels: categories, datasets: [{ data: categories.map(c => costByCat[c]), backgroundColor: 'rgba(59, 130, 246, 0.8)', borderRadius: 4 }] },
options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } } }
});
}
}, 100);
container.querySelector('[data-action="sub-usage"]')?.addEventListener('click', () => openSwUsageDetail('구독 소프트웨어 사용 목록', state.masterData.subSw)); container.querySelector('[data-action="sub-usage"]')?.addEventListener('click', () => openSwUsageDetail('구독 소프트웨어 사용 목록', state.masterData.subSw));
container.querySelector('[data-action="perm-usage"]')?.addEventListener('click', () => openSwUsageDetail('영구 소프트웨어 사용 목록', state.masterData.permSw)); container.querySelector('[data-action="perm-usage"]')?.addEventListener('click', () => openSwUsageDetail('영구 소프트웨어 사용 목록', state.masterData.permSw));
container.querySelector('[data-action="sub-exp"]')?.addEventListener('click', () => openSwDashboardDetail('구독 SW 만료 예정 목록', state.masterData.subSw.filter(sw => isSWExpiring(sw)))); container.querySelector('[data-action="sub-exp"]')?.addEventListener('click', () => openSwDashboardDetail('구독 SW 만료 예정 목록', state.masterData.subSw.filter(sw => isSWExpiring(sw))));

View File

@@ -11,7 +11,7 @@ export function renderDashboard(mainContent: HTMLElement) {
// 기존 차트 리소스 해제 // 기존 차트 리소스 해제
if (state.activeCharts) { if (state.activeCharts) {
state.activeCharts.forEach(c => { state.activeCharts.forEach((c: any) => {
if (c && typeof c.destroy === 'function') c.destroy(); if (c && typeof c.destroy === 'function') c.destroy();
}); });
} }

View File

@@ -98,7 +98,7 @@ export function renderCloudList(container: HTMLElement) {
<td>${asset[ASSET_SCHEMA.ACCOUNT.key]||''}</td> <td>${asset[ASSET_SCHEMA.ACCOUNT.key]||''}</td>
<td class="text-center">${paymentBadge}</td> <td class="text-center">${paymentBadge}</td>
<td class="text-center">${asset[ASSET_SCHEMA.PAY_DAY.key] ? asset[ASSET_SCHEMA.PAY_DAY.key] + '일' : ''}</td> <td class="text-center">${asset[ASSET_SCHEMA.PAY_DAY.key] ? asset[ASSET_SCHEMA.PAY_DAY.key] + '일' : ''}</td>
<td class="text-right" style="font-weight:600;">₩ ${asset[ASSET_SCHEMA.BILLING.key] ? Number(asset[ASSET_SCHEMA.BILLING.key]).toLocaleString() : '0'}</td> <td class="text-right" style="font-weight:600;">₩ ${asset[ASSET_SCHEMA.BILLING.key] ? Number(String(asset[ASSET_SCHEMA.BILLING.key]).replace(/,/g, '')).toLocaleString() : '0'}</td>
<td>${asset[ASSET_SCHEMA.REMARKS.key]||''}</td> <td>${asset[ASSET_SCHEMA.REMARKS.key]||''}</td>
`; `;

View File

@@ -0,0 +1,74 @@
import { state } from '../../core/state';
import { formatPrice } from '../../core/utils';
import { createIcons, Plus, Edit2, Trash2 } from 'lucide';
import { openDomainModal } from '../../components/Modal/DomainModal';
export function renderDomainList(container: HTMLElement) {
container.innerHTML = '';
const header = document.createElement('div');
header.className = 'list-header';
header.innerHTML = `
<div class="list-title-area">
<h2 class="list-title">도메인 관리</h2>
</div>
`;
container.appendChild(header);
const tableWrapper = document.createElement('div');
tableWrapper.className = 'table-container';
const table = document.createElement('table');
table.innerHTML = `
<thead>
<tr>
<th style="text-align:center; width:50px;">No.</th>
<th style="text-align:center;">유형</th>
<th style="text-align:center;">법인</th>
<th style="text-align:left;">서비스명</th>
<th style="text-align:left;">관리도메인</th>
<th style="text-align:center;">시작일</th>
<th style="text-align:center;">만료일</th>
<th style="text-align:right;">금액</th>
<th style="text-align:center;">담당자</th>
<th style="text-align:center;">담당자(부)</th>
<th style="text-align:left;">비고</th>
</tr>
</thead>
<tbody>
${state.masterData.domain.length === 0 ? `
<tr>
<td colspan="11" style="text-align:center; padding: 3rem; color: var(--text-muted);">등록된 도메인 정보가 없습니다.</td>
</tr>
` : state.masterData.domain.map((item, idx) => `
<tr class="domain-row" data-id="${item.id}" style="cursor:pointer;">
<td style="text-align:center;">${idx + 1}</td>
<td style="text-align:center;"><span class="badge badge-${item.type}">${item.type}</span></td>
<td style="text-align:center;">${item.corp || ''}</td>
<td>${item.service_name || ''}</td>
<td>${item.domain_name || ''}</td>
<td style="text-align:center;">${item.start_date || ''}</td>
<td style="text-align:center;">${item.expiry_date || ''}</td>
<td style="text-align:right;">${formatPrice(item.price)}</td>
<td style="text-align:center;">${item.manager_main || ''}</td>
<td style="text-align:center;">${item.manager_sub || ''}</td>
<td class="text-truncate" style="max-width:200px;">${item.remarks || ''}</td>
</tr>
`).join('')}
</tbody>
`;
tableWrapper.appendChild(table);
container.appendChild(tableWrapper);
// 이벤트 바인딩
table.querySelectorAll('.domain-row').forEach(row => {
row.addEventListener('click', () => {
const id = row.getAttribute('data-id');
const item = state.masterData.domain.find(d => d.id === id);
if (item) openDomainModal(item);
});
});
createIcons({ icons: { Plus, Edit2, Trash2 } });
}

View File

@@ -6,7 +6,7 @@ import { createIcons, Paperclip, RefreshCcw } from 'lucide';
/** /**
* PC 자산 목록 뷰 * PC 자산 목록 뷰
* 담당자(부) 추가 및 정렬 보정 * 설치위치 컬럼 제거
*/ */
export function renderPcList(container: HTMLElement) { export function renderPcList(container: HTMLElement) {
const fullList = sortAssets(state.masterData.pc); const fullList = sortAssets(state.masterData.pc);
@@ -37,20 +37,19 @@ export function renderPcList(container: HTMLElement) {
table.innerHTML = ` table.innerHTML = `
<thead> <thead>
<tr> <tr>
<th style="text-align:center;">No</th> <th class="text-center">No</th>
<th style="text-align:center;">${ASSET_SCHEMA.CORP.ui}</th> <th class="text-center">${ASSET_SCHEMA.CORP.ui}</th>
<th style="text-align:center;">${ASSET_SCHEMA.ORG.ui}</th> <th class="text-center">${ASSET_SCHEMA.ORG.ui}</th>
<th style="text-align:center;">${ASSET_SCHEMA.ASSET_CODE.ui}</th> <th class="text-center">${ASSET_SCHEMA.ASSET_CODE.ui}</th>
<th style="text-align:center;">${ASSET_SCHEMA.USER.ui}</th> <th class="text-center">${ASSET_SCHEMA.USER.ui}</th>
<th style="text-align:center;">${ASSET_SCHEMA.LOCATION.ui}</th> <th class="text-center">담당자(정/부)</th>
<th style="text-align:center;">담당자(정/부)</th> <th class="text-center">${ASSET_SCHEMA.MAINBOARD.ui}</th>
<th style="text-align:center;">${ASSET_SCHEMA.MAINBOARD.ui}</th> <th class="text-center">${ASSET_SCHEMA.CPU.ui}</th>
<th style="text-align:center;">${ASSET_SCHEMA.CPU.ui}</th> <th class="text-center">${ASSET_SCHEMA.RAM.ui}</th>
<th style="text-align:center;">${ASSET_SCHEMA.RAM.ui}</th> <th class="text-center">Storage</th>
<th style="text-align:center;">Storage</th> <th class="text-center">${ASSET_SCHEMA.PURCHASE_YM.ui}</th>
<th style="text-align:center;">${ASSET_SCHEMA.PURCHASE_YM.ui}</th> <th class="text-center">${ASSET_SCHEMA.PRICE.ui}</th>
<th style="text-align:center;">${ASSET_SCHEMA.PRICE.ui}</th> <th class="text-center">${ASSET_SCHEMA.DOC_NAME.ui}</th>
<th style="text-align:center;">${ASSET_SCHEMA.DOC_NAME.ui}</th>
</tr> </tr>
</thead> </thead>
<tbody id="dynamic-tbody"></tbody> <tbody id="dynamic-tbody"></tbody>
@@ -63,7 +62,6 @@ export function renderPcList(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 keyword = keywordInput ? keywordInput.value.toLowerCase().trim() : ''; const keyword = keywordInput ? keywordInput.value.toLowerCase().trim() : '';
const corp = corpSelect ? corpSelect.value : ''; const corp = corpSelect ? corpSelect.value : '';
@@ -79,7 +77,7 @@ export function renderPcList(container: HTMLElement) {
tbody.innerHTML = ''; tbody.innerHTML = '';
if (filtered.length === 0) { if (filtered.length === 0) {
tbody.innerHTML = `<tr><td colspan="14" style="text-align:center; padding: 3rem; color: var(--text-muted);">${UI_TEXT.MESSAGES.NO_DATA}</td></tr>`; tbody.innerHTML = `<tr><td colspan="13" class="text-center" style="padding: 3rem; color: var(--text-muted);">${UI_TEXT.MESSAGES.NO_DATA}</td></tr>`;
return; return;
} }
@@ -88,7 +86,6 @@ export function renderPcList(container: HTMLElement) {
tr.style.cursor = 'pointer'; tr.style.cursor = 'pointer';
const storage = [asset[ASSET_SCHEMA.STORAGE1.key], asset[ASSET_SCHEMA.STORAGE2.key]].filter(v => v).join(' / '); const storage = [asset[ASSET_SCHEMA.STORAGE1.key], asset[ASSET_SCHEMA.STORAGE2.key]].filter(v => v).join(' / ');
const mainManager = asset[ASSET_SCHEMA.MANAGER_MAIN.key] || ''; const mainManager = asset[ASSET_SCHEMA.MANAGER_MAIN.key] || '';
const subManager = asset[ASSET_SCHEMA.MANAGER_SUB.key] || ''; const subManager = asset[ASSET_SCHEMA.MANAGER_SUB.key] || '';
const managerHtml = [ const managerHtml = [
@@ -97,20 +94,19 @@ export function renderPcList(container: HTMLElement) {
].filter(v => v !== '').join(' / '); ].filter(v => v !== '').join(' / ');
tr.innerHTML = ` tr.innerHTML = `
<td style="text-align:center;">${idx+1}</td> <td class="text-center">${idx+1}</td>
<td style="text-align:center;">${asset[ASSET_SCHEMA.CORP.key]}</td> <td class="text-center">${asset[ASSET_SCHEMA.CORP.key]}</td>
<td style="text-align:center;">${asset[ASSET_SCHEMA.ORG.key]||'-'}</td> <td class="text-center">${asset[ASSET_SCHEMA.ORG.key]||'-'}</td>
<td style="text-align:center;">${asset[ASSET_SCHEMA.ASSET_CODE.key]}</td> <td class="text-center">${asset[ASSET_SCHEMA.ASSET_CODE.key]}</td>
<td style="text-align:center;">${asset[ASSET_SCHEMA.USER.key]||''}</td> <td class="text-center">${asset[ASSET_SCHEMA.USER.key]||''}</td>
<td style="text-align:center;">${asset[ASSET_SCHEMA.LOCATION.key]||''}</td> <td class="text-center">${managerHtml || '-'}</td>
<td style="text-align:center;">${managerHtml || '-'}</td> <td class="text-center">${asset[ASSET_SCHEMA.MAINBOARD.key]||'-'}</td>
<td style="text-align:center;">${asset[ASSET_SCHEMA.MAINBOARD.key]||'-'}</td> <td class="text-center">${asset[ASSET_SCHEMA.CPU.key]||''}</td>
<td style="text-align:center;">${asset[ASSET_SCHEMA.CPU.key]||''}</td> <td class="text-center">${asset[ASSET_SCHEMA.RAM.key]||''}</td>
<td style="text-align:center;">${asset[ASSET_SCHEMA.RAM.key]||''}</td> <td class="text-center">${formatInline(storage)}</td>
<td style="text-align:center;">${formatInline(storage)}</td> <td class="text-center">${asset[ASSET_SCHEMA.PURCHASE_YM.key] || ''}</td>
<td style="text-align:center;">${asset[ASSET_SCHEMA.PURCHASE_YM.key] || ''}</td> <td class="text-right">${Number(asset[ASSET_SCHEMA.PRICE.key]||0).toLocaleString()}</td>
<td style="text-align:right;">${Number(asset[ASSET_SCHEMA.PRICE.key]||0).toLocaleString()}</td> <td class="text-center">${asset[ASSET_SCHEMA.DOC_NAME.key] ? '<i data-lucide="paperclip" class="text-primary"></i>' : '-'}</td>
<td style="text-align:center;">${asset[ASSET_SCHEMA.DOC_NAME.key] ? '<i data-lucide="paperclip" class="text-primary"></i>' : '-'}</td>
`; `;
tr.addEventListener('click', () => openHwModal(asset, 'view')); tr.addEventListener('click', () => openHwModal(asset, 'view'));
tbody.appendChild(tr); tbody.appendChild(tr);

View File

@@ -14,8 +14,8 @@ export function renderStorageList(container: HTMLElement) {
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[ASSET_SCHEMA.CORP.key]))).filter(Boolean).sort(); const corps = Array.from(new Set(fullList.map(a => (a as any)[ASSET_SCHEMA.CORP.key]))).filter(Boolean).sort();
const orgUnits = Array.from(new Set(fullList.map(a => a[ASSET_SCHEMA.ORG.key]))).filter(Boolean).sort(); const orgUnits = Array.from(new Set(fullList.map(a => (a as any)[ASSET_SCHEMA.ORG.key]))).filter(Boolean).sort();
filterBar.innerHTML = ` filterBar.innerHTML = `
<div class="search-item flex-1"> <div class="search-item flex-1">
@@ -70,10 +70,10 @@ export function renderStorageList(container: HTMLElement) {
const filtered = fullList.filter(asset => { const filtered = fullList.filter(asset => {
const matchKeyword = !keyword || const matchKeyword = !keyword ||
String(asset[ASSET_SCHEMA.ASSET_CODE.key]||'').toLowerCase().includes(keyword) || String((asset as any)[ASSET_SCHEMA.ASSET_CODE.key]||'').toLowerCase().includes(keyword) ||
String(asset[ASSET_SCHEMA.ORG.key]||'').toLowerCase().includes(keyword); String((asset as any)[ASSET_SCHEMA.ORG.key]||'').toLowerCase().includes(keyword);
const matchCorp = !corp || asset[ASSET_SCHEMA.CORP.key] === corp; const matchCorp = !corp || (asset as any)[ASSET_SCHEMA.CORP.key] === corp;
const matchOrg = !orgUnit || asset[ASSET_SCHEMA.ORG.key] === orgUnit; const matchOrg = !orgUnit || (asset as any)[ASSET_SCHEMA.ORG.key] === orgUnit;
return matchKeyword && matchCorp && matchOrg; return matchKeyword && matchCorp && matchOrg;
}); });
@@ -87,8 +87,8 @@ export function renderStorageList(container: HTMLElement) {
const tr = document.createElement('tr'); const tr = document.createElement('tr');
tr.style.cursor = 'pointer'; tr.style.cursor = 'pointer';
const mainManager = asset[ASSET_SCHEMA.MANAGER_MAIN.key] || ''; const mainManager = (asset as any)[ASSET_SCHEMA.MANAGER_MAIN.key] || '';
const subManager = asset[ASSET_SCHEMA.MANAGER_SUB.key] || ''; const subManager = (asset as any)[ASSET_SCHEMA.MANAGER_SUB.key] || '';
const managerHtml = [ const managerHtml = [
mainManager ? `${createBadge('정', 'primary')} ${mainManager}` : '', mainManager ? `${createBadge('정', 'primary')} ${mainManager}` : '',
subManager ? `${createBadge('부', 'muted')} ${subManager}` : '' subManager ? `${createBadge('부', 'muted')} ${subManager}` : ''
@@ -96,12 +96,12 @@ export function renderStorageList(container: HTMLElement) {
tr.innerHTML = ` tr.innerHTML = `
<td class="text-center">${idx+1}</td> <td class="text-center">${idx+1}</td>
<td class="text-center">${asset[ASSET_SCHEMA.CORP.key]}</td> <td class="text-center">${(asset as any)[ASSET_SCHEMA.CORP.key]}</td>
<td class="text-center">${asset[ASSET_SCHEMA.ORG.key]||'-'}</td> <td class="text-center">${(asset as any)[ASSET_SCHEMA.ORG.key]||'-'}</td>
<td class="text-center">${asset[ASSET_SCHEMA.ASSET_CODE.key]}</td> <td class="text-center">${(asset as any)[ASSET_SCHEMA.ASSET_CODE.key]}</td>
<td>${formatInline(asset.)}</td> <td>${formatInline(asset.)}</td>
<td>${formatInline(asset.)}</td> <td>${formatInline(asset.)}</td>
<td class="text-center">${formatInline(asset[ASSET_SCHEMA.LOCATION.key])}</td> <td class="text-center">${formatInline((asset as any)[ASSET_SCHEMA.LOCATION.key])}</td>
<td class="text-center">${managerHtml || '-'}</td> <td class="text-center">${managerHtml || '-'}</td>
`; `;
tr.addEventListener('click', () => openHwModal(asset, 'view')); tr.addEventListener('click', () => openHwModal(asset, 'view'));

View File

@@ -1,14 +1,11 @@
import { state } from '../../core/state'; import { state } from '../../core/state';
import { openSwModal } from '../../components/Modal/SWModal'; import { openSwModal } from '../../components/Modal/SWModal';
import { sortAssets } from '../../core/utils'; import { openSwUserModal } from '../../components/Modal/SWUserModal';
import { sortAssets, formatPrice } from '../../core/utils';
import { CORP_LIST } from '../../components/Modal/SharedData'; import { CORP_LIST } from '../../components/Modal/SharedData';
import { generateOptionsHTML } from '../../components/Modal/ModalUtils'; import { generateOptionsHTML } from '../../components/Modal/ModalUtils';
import { ASSET_SCHEMA, UI_TEXT } from '../../core/schema'; import { createIcons, Edit2, Users, RefreshCcw } from 'lucide';
import { createIcons, 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 = sortAssets(isSub ? state.masterData.subSw : state.masterData.permSw); const fullList = sortAssets(isSub ? state.masterData.subSw : state.masterData.permSw);
@@ -17,7 +14,7 @@ export function renderSwList(container: HTMLElement) {
filterBar.className = 'search-bar'; filterBar.className = 'search-bar';
filterBar.innerHTML = ` filterBar.innerHTML = `
<div class="search-item flex-1"> <div class="search-item flex-1">
<label>통합 검색 (${ASSET_SCHEMA.PRODUCT.ui}/부서)</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">
@@ -31,11 +28,11 @@ export function renderSwList(container: HTMLElement) {
</select> </select>
</div> </div>
<div class="search-item"> <div class="search-item">
<label>${ASSET_SCHEMA.CORP.ui}</label> <label>법인</label>
<select id="filter-corp">${generateOptionsHTML(CORP_LIST, '', true)}</select> <select id="filter-corp">${generateOptionsHTML(CORP_LIST, '', true)}</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> ${UI_TEXT.ACTION.RESET_FILTER} <i data-lucide="refresh-ccw"></i> 필터 초기화
</button> </button>
`; `;
container.appendChild(filterBar); container.appendChild(filterBar);
@@ -49,14 +46,16 @@ 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;">${ASSET_SCHEMA.CORP.ui}</th> <th style="text-align:center;">법인</th>
<th style="text-align:center;">부서</th> <th style="text-align:center;">부서</th>
<th style="text-align:center;">${ASSET_SCHEMA.PRODUCT.ui}</th> <th style="text-align:center;">제품명</th>
<th style="text-align:center;">${ASSET_SCHEMA.PURCHASE_YM.ui}</th> <th style="text-align:center;">구매일</th>
${isSub ? `<th style="text-align:center;">${ASSET_SCHEMA.EXPIRY.ui}</th>` : ''} <th style="text-align:center;">시작일</th>
<th style="text-align:center;">${ASSET_SCHEMA.PRICE.ui}</th> <th style="text-align:center;">만료일</th>
<th style="text-align:center;">${ASSET_SCHEMA.QTY.ui}</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>
</tr> </tr>
</thead> </thead>
<tbody id="dynamic-tbody"></tbody> <tbody id="dynamic-tbody"></tbody>
@@ -76,38 +75,49 @@ export function renderSwList(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 || (asset[ASSET_SCHEMA.PRODUCT.key] || '').toLowerCase().includes(keyword) || (asset. || '').toLowerCase().includes(keyword); const matchKeyword = !keyword || (asset. || '').toLowerCase().includes(keyword) || (asset. || '').toLowerCase().includes(keyword);
const matchField = !field || asset. === field; const matchField = !field || asset. === field;
const matchCorp = !corp || asset[ASSET_SCHEMA.CORP.key] === corp; const matchCorp = !corp || asset. === corp;
return matchKeyword && matchField && matchCorp; return matchKeyword && matchField && matchCorp;
}); });
tbody.innerHTML = ''; tbody.innerHTML = '';
if (filtered.length === 0) { if (filtered.length === 0) {
tbody.innerHTML = `<tr><td colspan="${isSub ? 11 : 10}" style="text-align:center; padding: 3rem; color: var(--text-muted);">${UI_TEXT.MESSAGES.NO_DATA}</td></tr>`; tbody.innerHTML = `<tr><td colspan="13" style="text-align:center; padding: 3rem; color: var(--text-muted);">검색 결과가 없습니다.</td></tr>`;
return; return;
} }
filtered.forEach((asset, idx) => { filtered.forEach((asset, idx) => {
const assigned = state.masterData.swUsers.filter(u => u.sw_id === asset.id).length; const assigned = state.masterData.swUsers.filter(u => u.sw_id === asset.id).length;
const qty = typeof asset[ASSET_SCHEMA.QTY.key] === 'number' ? asset[ASSET_SCHEMA.QTY.key] : parseInt(asset[ASSET_SCHEMA.QTY.key]||'0', 10); const qty = typeof asset. === 'number' ? asset.수량 : parseInt(asset.||'0', 10);
const avail = qty - assigned; const avail = qty - assigned;
let statusBadge = ''; let statusHtml = '';
if (isSub) { if (isSub) {
let isExpired = false; let isExpired = false;
if (asset[ASSET_SCHEMA.EXPIRY.key]) { if (asset.) {
const parts = asset[ASSET_SCHEMA.EXPIRY.key].split('~'); const endDateStr = asset..replace(/\./g, '-');
const endDateStr = parts[parts.length - 1].trim().replace(/\./g, '-');
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()) isExpired = true; if (endDate < new Date()) isExpired = true;
} }
} }
statusBadge = isExpired ? `<span class="badge badge-danger">만료</span>` : `<span class="badge badge-primary">사용중</span>`; 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>`;
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 {
statusBadge = asset. ? `<span class="badge badge-success">유효</span>` : `<span class="badge badge-muted">없음</span>`; let isMaintenance = false;
if (asset. && asset.) {
const startDate = new Date(asset..replace(/\./g, '-'));
const endDate = new Date(asset..replace(/\./g, '-'));
const today = new Date();
if (!isNaN(startDate.getTime()) && !isNaN(endDate.getTime())) {
endDate.setHours(23, 59, 59, 999);
if (today >= startDate && today <= endDate) isMaintenance = true;
}
}
if (isMaintenance) statusHtml = `<span style="background: #3b82f6; color: white; padding: 2px 6px; border-radius: 4px; font-size: 0.75rem; font-weight: bold; white-space: nowrap;">유지보수</span>`;
else statusHtml = `<span style="background: #6b7280; color: white; padding: 2px 6px; border-radius: 4px; font-size: 0.75rem; font-weight: bold; white-space: nowrap;">보유중</span>`;
} }
const tr = document.createElement('tr'); const tr = document.createElement('tr');
@@ -115,22 +125,36 @@ export function renderSwList(container: HTMLElement) {
tr.innerHTML = ` tr.innerHTML = `
<td style="text-align:center;">${idx+1}</td> <td style="text-align:center;">${idx+1}</td>
<td style="text-align:center;">${statusBadge}</td> <td style="text-align:center;">${statusHtml}</td>
<td style="text-align:center;">${asset.||''}</td> <td>${asset.||''}</td>
<td style="text-align:center;">${asset[ASSET_SCHEMA.CORP.key]}</td> <td>${asset.}</td>
<td style="text-align:center;">${asset.||''}</td> <td>${asset.||''}</td>
<td>${asset[ASSET_SCHEMA.PRODUCT.key]}</td> <td>${asset.}</td>
<td style="text-align:center;">${asset[ASSET_SCHEMA.PURCHASE_YM.key]||''}</td> <td style="text-align:center;">${asset.||''}</td>
${isSub ? `<td style="text-align:center;">${asset[ASSET_SCHEMA.EXPIRY.key]||''}</td>` : ''} <td style="text-align:center;">${asset.||''}</td>
<td style="text-align:right;">${Number(asset[ASSET_SCHEMA.PRICE.key]||0).toLocaleString()}</td> <td style="text-align:center;">${asset.||''}</td>
<td style="text-align:right;">${formatPrice(asset.)}</td>
<td style="text-align:center;">${qty}</td> <td style="text-align:center;">${qty}</td>
<td style="text-align:center;"><strong style="color: ${avail > 0 ? 'var(--primary-color)' : 'var(--danger)'}">${avail}</strong></td> <td style="text-align:center;"><strong style="color: ${avail > 0 ? 'var(--primary-color)' : 'var(--danger)'}">${avail}</strong></td>
<td style="text-align:center;">
<button class="btn-icon btn-user-mgmt" title="사용자 관리" style="margin: 0 auto; color: var(--primary-color);">
<i data-lucide="users" style="width:18px; height:18px;"></i>
</button>
</td>
`; `;
tr.addEventListener('click', () => openSwModal(asset, 'view')); const userBtn = tr.querySelector('.btn-user-mgmt');
userBtn?.addEventListener('click', (e) => {
e.stopPropagation();
openSwUserModal(asset);
});
tr.addEventListener('click', (e) => {
openSwModal(asset, 'view');
});
tbody.appendChild(tr); tbody.appendChild(tr);
}); });
createIcons({ icons: { RefreshCcw } }); createIcons({ icons: { Edit2, Users, RefreshCcw } });
}; };
document.getElementById('filter-keyword')?.addEventListener('input', updateTable); document.getElementById('filter-keyword')?.addEventListener('input', updateTable);

View File

@@ -6,6 +6,7 @@ import { renderEquipmentList } from './List/EquipmentListView';
import { renderMobileList } from './List/MobileListView'; import { renderMobileList } from './List/MobileListView';
import { renderSwList } from './List/SwListView'; import { renderSwList } from './List/SwListView';
import { renderCloudList } from './List/CloudListView'; import { renderCloudList } from './List/CloudListView';
import { renderDomainList } from './List/DomainListView';
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';
/** /**
@@ -34,15 +35,15 @@ export function renderSWTable(mainContent: HTMLElement) {
} else if (state.activeCategory === 'sw') { } else if (state.activeCategory === 'sw') {
if (tab === '구독SW' || tab === '영구SW') { if (tab === '구독SW' || tab === '영구SW') {
renderSwList(container); renderSwList(container);
} else if (tab === '클라우드') {
renderCloudList(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>`;
} }
} else if (state.activeCategory === 'ops') { } else if (state.activeCategory === 'ops') {
// 운영 서비스 관련 탭 처리 if (tab === '도메인') renderDomainList(container);
if (['도메인', '메일', '메신저', '청구비용'].includes(tab)) { else {
renderCloudList(container); // 일단 클라우드 리스트로 공통 처리 container.innerHTML = `<div style="padding:2rem; color:var(--text-muted); text-align:center; margin-top:3rem;">운영 서비스(${tab}) 관리 기능은 현재 준비 중입니다.</div>`;
} else {
container.innerHTML = `<div style="padding:2rem; color:var(--text-muted);">"${tab}" 탭에 대한 운영 서비스 뷰가 정의되지 않았습니다.</div>`;
} }
} }