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

merge: main 브랜치의 최신 변경 사항 병합 및 충돌 해결

Browse Source
This commit is contained in:
이태훈
2026-04-17 15:37:57 +09:00
parent 54bfb9d482 97478dd9bc
commit 6053c746a3
50 changed files with 8265 additions and 1187 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
backup_refactor/src/components/Modal/BaseModal.ts Normal file
View File

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

109
backup_refactor/src/components/Modal/DashboardDetailModal.ts Normal file
View File

@@ -0,0 +1,109 @@
import { HardwareAsset, SoftwareAsset } from '../../core/excelHandler';
import { state } from '../../core/state';
const DASHBOARD_DETAIL_MODAL_HTML = `
<div id="dashboard-detail-modal" class="modal-overlay hidden">
<div class="modal-content wide" style="max-width: 1000px;">
<div class="modal-header">
<h2 id="dashboard-detail-modal-title">상세 목록</h2>
<button id="btn-close-dashboard-detail-modal" class="btn-icon" aria-label="닫기"><i data-lucide="x"></i></button>
</div>
<div class="modal-body">
<div class="table-container">
<table style="width:100%;">
<thead></thead>
<tbody id="dashboard-detail-tbody"></tbody>
</table>
</div>
</div>
<div class="modal-footer">
<div></div>
<button id="btn-cancel-dashboard-detail-modal" class="btn btn-outline">닫기</button>
</div>
</div>
</div>
`;
export function initDashboardDetailModal() {
if (!document.getElementById('dashboard-detail-modal')) {
document.body.insertAdjacentHTML('beforeend', DASHBOARD_DETAIL_MODAL_HTML);
}
const modal = document.getElementById('dashboard-detail-modal')!;
const closeBtn = document.getElementById('btn-close-dashboard-detail-modal')!;
const cancelBtn = document.getElementById('btn-cancel-dashboard-detail-modal')!;
const closeModal = () => modal.classList.add('hidden');
closeBtn.addEventListener('click', closeModal);
cancelBtn.addEventListener('click', closeModal);
modal.addEventListener('click', (e) => { if (e.target === modal) closeModal(); });
}
export function openDashboardDetail(title: string, list: HardwareAsset[]) {
const modal = document.getElementById('dashboard-detail-modal');
if (!modal) return;
const titleEl = document.getElementById('dashboard-detail-modal-title');
const tbody = document.getElementById('dashboard-detail-tbody');
if (!titleEl || !tbody) return;
const thead = tbody.closest('table')?.querySelector('thead');
if (!thead) return;
titleEl.textContent = title;
thead.innerHTML = `<tr><th>No</th><th>유형</th><th>자산코드</th><th>명칭/모델</th><th>위치</th><th>담당/사용자</th><th>구매일</th><th>금액</th></tr>`;
tbody.innerHTML = '';
if (list.length === 0) {
tbody.innerHTML = `<tr><td colspan="8" style="text-align:center; padding: 2rem;">해당 조건의 자산이 없습니다.</td></tr>`;
} else {
list.forEach((asset, idx) => {
let manager = asset.관리자 || asset.사용자 || asset.담당자_정 || '-';
let name = asset.명칭 || asset.모델명 || '-';
const tr = document.createElement('tr');
tr.innerHTML = `<td>${idx+1}</td><td>${asset.type}</td><td>${asset.자산코드}</td><td>${name}</td><td>${asset.위치||'-'}</td><td>${manager}</td><td>${asset.구매일||'-'}</td><td>${asset.금액||'-'}</td>`;
tbody.appendChild(tr);
});
}
modal.classList.remove('hidden');
}
export function openSwDashboardDetail(title: string, list: SoftwareAsset[]) {
const modal = document.getElementById('dashboard-detail-modal');
if (!modal) return;
const titleEl = document.getElementById('dashboard-detail-modal-title');
const tbody = document.getElementById('dashboard-detail-tbody');
if (!titleEl || !tbody) return;
const thead = tbody.closest('table')?.querySelector('thead');
if (!thead) return;
titleEl.textContent = title;
thead.innerHTML = `<tr><th>No</th><th>유형</th><th>법인</th><th>제품명</th><th>수량</th><th>금액</th></tr>`;
tbody.innerHTML = '';
list.forEach((sw, idx) => {
const tr = document.createElement('tr');
tr.innerHTML = `<td>${idx+1}</td><td>${sw.type}</td><td>${sw.법인}</td><td>${sw.제품명}</td><td>${sw.수량}</td><td>${sw.금액}</td>`;
tbody.appendChild(tr);
});
modal.classList.remove('hidden');
}
export function openSwUsageDetail(title: string, list: SoftwareAsset[]) {
const modal = document.getElementById('dashboard-detail-modal');
if (!modal) return;
const titleEl = document.getElementById('dashboard-detail-modal-title');
const tbody = document.getElementById('dashboard-detail-tbody');
if (!titleEl || !tbody) return;
const thead = tbody.closest('table')?.querySelector('thead');
if (!thead) return;
titleEl.textContent = title;
thead.innerHTML = `<tr><th>No</th><th>법인</th><th>제품명</th><th>수량</th><th>사용중</th><th>사용가능</th></tr>`;
tbody.innerHTML = '';
list.forEach((sw, idx) => {
const assigned = state.masterData.swUsers.filter(u => u.swId === sw.id).length;
const qty = typeof sw.수량 === 'number' ? sw.수량 : parseInt(sw.수량||'0', 10);
const avail = qty - assigned;
const tr = document.createElement('tr');
tr.innerHTML = `<td>${idx+1}</td><td>${sw.법인}</td><td>${sw.제품명}</td><td>${qty}</td><td>${assigned}</td><td>${avail}</td>`;
tbody.appendChild(tr);
});
modal.classList.remove('hidden');
}

335
backup_refactor/src/components/Modal/HWModal.ts Normal file
View File

@@ -0,0 +1,335 @@
import { state } from '../../core/state';
import { HardwareAsset } from '../../core/excelHandler';
import { renderTable } from '../../views/AssetTableView';
import { createIcons, Paperclip } from 'lucide';
let currentAsset: HardwareAsset | null = null;
let isEditMode = false;
const HW_MODAL_HTML = `
<div id="hw-asset-modal" class="modal-overlay hidden">
<div class="modal-content wide">
<div class="modal-header">
<h2 id="hw-modal-title">자산 상세 정보</h2>
<button id="btn-close-hw-modal" class="btn-icon" aria-label="닫기"><i data-lucide="x"></i></button>
</div>
<div class="modal-body">
<form id="hw-asset-form" class="grid-form">
<input type="hidden" id="hw-asset-id" />
<input type="hidden" id="hw-asset-type" />
<!-- Group 1: 기본 정보 -->
<div class="form-section-title">기본 정보 (Identity)</div>
<div class="form-group">
<label for="hw-법인">법인</label>
<input type="text" id="hw-법인" required />
</div>
<div class="form-group">
<label for="hw-자산코드">자산번호/코드</label>
<input type="text" id="hw-자산코드" required />
</div>
<div class="form-group server-only">
<label for="hw-용도">용도</label>
<input type="text" id="hw-용도" />
</div>
<div class="form-group server-only">
<label for="hw-상세">상세 내용</label>
<input type="text" id="hw-상세" />
</div>
<div class="form-group non-server">
<label for="hw-명칭">명칭</label>
<input type="text" id="hw-명칭" />
</div>
<div class="form-group full-width server-only">
<label for="hw-비고">비고</label>
<input type="text" id="hw-비고" />
</div>
<!-- Group 2: 네트워크 정보 -->
<div class="form-section-title server-only">네트워크 정보 (Connectivity)</div>
<div class="form-group server-only">
<label for="hw-IP주소">IP 주소 1</label>
<input type="text" id="hw-IP주소" />
</div>
<div class="form-group server-only">
<label for="hw-IP2">IP 주소 2</label>
<input type="text" id="hw-IP2" />
</div>
<div class="form-group server-only">
<label for="hw-원격접속">원격 도구 (Anydesk/Chrome 등)</label>
<input type="text" id="hw-원격접속" />
</div>
<div class="form-group server-only">
<label for="hw-서버ID">서버 ID</label>
<input type="text" id="hw-서버ID" />
</div>
<div class="form-group server-only">
<label for="hw-서버PW">서버 PW</label>
<input type="text" id="hw-서버PW" />
</div>
<div class="form-group non-server" id="hw-IP주소-group">
<label for="hw-IP주소-non-server">IP 주소</label>
<input type="text" id="hw-IP주소-non-server" />
</div>
<!-- Group 3: 시스템 사양 -->
<div class="form-section-title">시스템 사양 (Specifications)</div>
<div class="form-group">
<label for="hw-모델명">모델명</label>
<input type="text" id="hw-모델명" />
</div>
<div class="form-group">
<label for="hw-OS">운영체제 (OS)</label>
<input type="text" id="hw-OS" />
</div>
<div class="form-group">
<label for="hw-CPU">CPU 사양</label>
<input type="text" id="hw-CPU" />
</div>
<div class="form-group">
<label for="hw-RAM">RAM 용량</label>
<input type="text" id="hw-RAM" />
</div>
<div class="form-group">
<label for="hw-SSD1">Storage 1 (SSD/HDD)</label>
<input type="text" id="hw-SSD1" />
</div>
<div class="form-group">
<label for="hw-SSD2">Storage 2 (SSD/HDD)</label>
<input type="text" id="hw-SSD2" />
</div>
<div class="form-group server-only">
<label for="hw-모니터링">모니터링 여부</label>
<input type="text" id="hw-모니터링" />
</div>
<div class="form-group" id="hw-비품유형-group" style="display:none;">
<label for="hw-비품유형">비품유형</label>
<select id="hw-비품유형">
<option value="노트북">노트북</option><option value="태블릿">태블릿</option><option value="휴대폰">휴대폰</option>
</select>
</div>
<div class="form-group full-width non-server">
<label for="hw-HW사양">H/W 사양 상세</label>
<textarea id="hw-HW사양" rows="2"></textarea>
</div>
<!-- Group 4: 관리 및 운영 -->
<div class="form-section-title">관리 및 운영 (Operation)</div>
<div class="form-group">
<label for="hw-위치">설치위치</label>
<input type="text" id="hw-위치" />
</div>
<div class="form-group">
<label for="hw-담당자_정">담당자 (정)</label>
<input type="text" id="hw-담당자_정" />
</div>
<div class="form-group">
<label for="hw-담당자_부">담당자 (부)</label>
<input type="text" id="hw-담당자_부" />
</div>
<div class="form-group non-server">
<label for="hw-구매일">구매일</label>
<input type="text" id="hw-구매일" />
</div>
<div class="form-group non-server">
<label for="hw-금액">금액</label>
<input type="text" id="hw-금액" oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/\\B(?=(\\d{3})+(?!\d))/g, ',')" />
</div>
<div class="form-group full-width">
<label>품의서 (파일 증빙)</label>
<div style="display:flex; align-items:center; gap:0.5rem;">
<input type="file" id="hw-품의서" />
<span id="hw-품의서명" style="font-size:0.75rem; color:var(--text-light)"></span>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button id="btn-delete-hw-asset" class="btn btn-outline btn-danger">삭제</button>
<div class="footer-actions">
<button id="btn-revert-hw-edit" class="btn btn-outline hidden">수정 취소</button>
<button id="btn-cancel-hw-modal" class="btn btn-outline">닫기</button>
<button id="btn-save-hw-asset" class="btn btn-primary">수정</button>
</div>
</div>
</div>
</div>
`;
export function openHwModal(asset: HardwareAsset) {
currentAsset = asset;
isEditMode = false;
const modal = document.getElementById('hw-asset-modal')!;
const form = document.getElementById('hw-asset-form') as HTMLFormElement;
const saveBtn = document.getElementById('btn-save-hw-asset')!;
const revertBtn = document.getElementById('btn-revert-hw-edit')!;
form.reset();
form.classList.remove('is-edit-mode');
form.classList.add('is-view-mode');
saveBtn.textContent = '수정';
revertBtn.classList.add('hidden');
fillHwFormData(asset);
modal.classList.remove('hidden');
createIcons({ icons: { Paperclip } });
}
function fillHwFormData(asset: HardwareAsset) {
(document.getElementById('hw-asset-id') as HTMLInputElement).value = asset.id;
(document.getElementById('hw-asset-type') as HTMLInputElement).value = asset.type;
(document.getElementById('hw-법인') as HTMLInputElement).value = asset.법인;
(document.getElementById('hw-자산코드') as HTMLInputElement).value = asset.자산코드;
(document.getElementById('hw-위치') as HTMLInputElement).value = asset.위치;
(document.getElementById('hw-모델명') as HTMLInputElement).value = asset.모델명 || '';
(document.getElementById('hw-OS') as HTMLInputElement).value = asset.OS || '';
(document.getElementById('hw-CPU') as HTMLInputElement).value = asset.CPU || '';
(document.getElementById('hw-RAM') as HTMLInputElement).value = asset.RAM || '';
(document.getElementById('hw-SSD1') as HTMLInputElement).value = asset.SSD1 || '';
(document.getElementById('hw-SSD2') as HTMLInputElement).value = asset.SSD2 || '';
(document.getElementById('hw-담당자_정') as HTMLInputElement).value = asset.담당자_정 || asset.관리자 || '';
(document.getElementById('hw-담당자_부') as HTMLInputElement).value = asset.담당자_부 || '';
(document.getElementById('hw-품의서명') as HTMLElement).textContent = asset.품의서명 || '';
const serverOnly = document.querySelectorAll('.server-only');
const nonServer = document.querySelectorAll('.non-server');
const equipGroup = document.getElementById('hw-비품유형-group')!;
if (asset.type === '서버') {
serverOnly.forEach(el => (el as HTMLElement).style.display = 'flex');
nonServer.forEach(el => (el as HTMLElement).style.display = 'none');
equipGroup.style.display = 'none';
(document.getElementById('hw-용도') as HTMLInputElement).value = asset.용도 || '';
(document.getElementById('hw-상세') as HTMLInputElement).value = asset.상세 || '';
(document.getElementById('hw-비고') as HTMLInputElement).value = asset.비고 || '';
(document.getElementById('hw-IP주소') as HTMLInputElement).value = asset.IP주소 || '';
(document.getElementById('hw-IP2') as HTMLInputElement).value = (asset as any).IP2 || '';
(document.getElementById('hw-원격접속') as HTMLInputElement).value = asset.원격접속 || '';
(document.getElementById('hw-서버ID') as HTMLInputElement).value = (asset as any).서버ID || '';
(document.getElementById('hw-서버PW') as HTMLInputElement).value = (asset as any).서버PW || '';
(document.getElementById('hw-모니터링') as HTMLInputElement).value = asset.모니터링 || '';
} else {
serverOnly.forEach(el => (el as HTMLElement).style.display = 'none');
nonServer.forEach(el => (el as HTMLElement).style.display = 'flex');
(document.getElementById('hw-명칭') as HTMLInputElement).value = asset.명칭 || '';
(document.getElementById('hw-구매일') as HTMLInputElement).value = asset.구매일 || '';
(document.getElementById('hw-금액') as HTMLInputElement).value = asset.금액 || '';
(document.getElementById('hw-HW사양') as HTMLTextAreaElement).value = asset.HW사양 || '';
(document.getElementById('hw-IP주소-non-server') as HTMLInputElement).value = asset.IP주소 || '';
if (asset.type === '전산비품') {
equipGroup.style.display = 'flex';
(document.getElementById('hw-비품유형') as HTMLSelectElement).value = asset.비품유형 || '노트북';
} else {
equipGroup.style.display = 'none';
}
}
}
export function initHwModal() {
// HTML 주입
if (!document.getElementById('hw-asset-modal')) {
document.body.insertAdjacentHTML('beforeend', HW_MODAL_HTML);
}
const modal = document.getElementById('hw-asset-modal')!;
const form = document.getElementById('hw-asset-form') as HTMLFormElement;
const closeBtn = document.getElementById('btn-close-hw-modal')!;
const cancelBtn = document.getElementById('btn-cancel-hw-modal')!;
const saveBtn = document.getElementById('btn-save-hw-asset')!;
const revertBtn = document.getElementById('btn-revert-hw-edit')!;
const deleteBtn = document.getElementById('btn-delete-hw-asset')!;
const closeModal = () => {
modal.classList.add('hidden');
isEditMode = false;
};
const switchToViewMode = () => {
isEditMode = false;
form.classList.remove('is-edit-mode');
form.classList.add('is-view-mode');
saveBtn.textContent = '수정';
revertBtn.classList.add('hidden');
if (currentAsset) fillHwFormData(currentAsset);
};
closeBtn.addEventListener('click', closeModal);
cancelBtn.addEventListener('click', closeModal);
modal.addEventListener('click', (e) => { if (e.target === modal) closeModal(); });
revertBtn.addEventListener('click', () => { switchToViewMode(); });
saveBtn.addEventListener('click', () => {
if (!currentAsset) return;
if (!isEditMode) {
isEditMode = true;
form.classList.remove('is-view-mode');
form.classList.add('is-edit-mode');
saveBtn.textContent = '저장';
revertBtn.classList.remove('hidden');
return;
}
const assetId = (document.getElementById('hw-asset-id') as HTMLInputElement).value;
const type = (document.getElementById('hw-asset-type') as HTMLInputElement).value;
const updated: HardwareAsset = {
...currentAsset,
법인: (document.getElementById('hw-법인') as HTMLInputElement).value,
자산코드: (document.getElementById('hw-자산코드') as HTMLInputElement).value,
위치: (document.getElementById('hw-위치') as HTMLInputElement).value,
모델명: (document.getElementById('hw-모델명') as HTMLInputElement).value,
OS: (document.getElementById('hw-OS') as HTMLInputElement).value,
CPU: (document.getElementById('hw-CPU') as HTMLInputElement).value,
RAM: (document.getElementById('hw-RAM') as HTMLInputElement).value,
SSD1: (document.getElementById('hw-SSD1') as HTMLInputElement).value,
SSD2: (document.getElementById('hw-SSD2') as HTMLInputElement).value,
담당자_정: (document.getElementById('hw-담당자_정') as HTMLInputElement).value,
관리자: (document.getElementById('hw-담당자_정') as HTMLInputElement).value,
담당자_부: (document.getElementById('hw-담당자_부') as HTMLInputElement).value,
};
if (type === '서버') {
updated.용도 = (document.getElementById('hw-용도') as HTMLInputElement).value;
updated.상세 = (document.getElementById('hw-상세') as HTMLInputElement).value;
updated.비고 = (document.getElementById('hw-비고') as HTMLInputElement).value;
updated.IP주소 = (document.getElementById('hw-IP주소') as HTMLInputElement).value;
(updated as any).IP2 = (document.getElementById('hw-IP2') as HTMLInputElement).value;
updated.원격접속 = (document.getElementById('hw-원격접속') as HTMLInputElement).value;
(updated as any).서버ID = (document.getElementById('hw-서버ID') as HTMLInputElement).value;
(updated as any).서버PW = (document.getElementById('hw-서버PW') as HTMLInputElement).value;
updated.모니터링 = (document.getElementById('hw-모니터링') as HTMLInputElement).value;
} else {
updated.명칭 = (document.getElementById('hw-명칭') as HTMLInputElement).value;
updated.구매일 = (document.getElementById('hw-구매일') as HTMLInputElement).value;
updated.금액 = (document.getElementById('hw-금액') as HTMLInputElement).value;
updated.HW사양 = (document.getElementById('hw-HW사양') as HTMLTextAreaElement).value;
updated.IP주소 = (document.getElementById('hw-IP주소-non-server') as HTMLInputElement).value;
if (type === '전산비품') {
updated.비품유형 = (document.getElementById('hw-비품유형') as HTMLSelectElement).value;
}
}
const idx = state.masterData.hw.findIndex(a => a.id === assetId);
if (idx > -1) {
state.masterData.hw[idx] = updated;
renderTable(document.getElementById('main-content')!);
switchToViewMode();
}
});
deleteBtn.addEventListener('click', () => {
if (!currentAsset) return;
if (confirm('정말로 이 자산을 삭제하시겠습니까?')) {
state.masterData.hw = state.masterData.hw.filter(a => a.id !== currentAsset!.id);
renderTable(document.getElementById('main-content')!);
closeModal();
}
});
}

342
backup_refactor/src/components/Modal/PCModal.ts Normal file
View File

@@ -0,0 +1,342 @@
import { state } from '../../core/state';
import { HardwareAsset, HardwareLog } from '../../core/excelHandler';
import { openModal } from './BaseModal';
const PC_MODAL_HTML = `
<div id="pc-asset-modal" class="modal-overlay hidden">
<div class="modal-content wide">
<div class="modal-header">
<h2 id="pc-modal-title">개인PC 상세 정보</h2>
<button id="btn-close-pc-modal" class="btn-icon" aria-label="닫기"><i data-lucide="x"></i></button>
</div>
<div class="modal-body">
<div class="modal-body-split">
<div class="modal-form-area">
<form id="pc-asset-form" class="grid-form">
<input type="hidden" id="pc-asset-id" />
<input type="hidden" id="pc-asset-type" value="개인PC" />
<div class="form-group">
<label for="pc-법인">법인</label>
<select id="pc-법인" required>
<option value="한맥">한맥 (HM)</option><option value="삼안">삼안 (SM)</option><option value="바론">바론 (BR)</option>
</select>
</div>
<div class="form-group">
<label for="pc-자산코드">자산코드</label>
<input type="text" id="pc-자산코드" placeholder="ex) HM-PC-2018-001" required />
</div>
<div class="form-group">
<label for="pc-사용자">사용자</label>
<input type="text" id="pc-사용자" required />
</div>
<div class="form-group">
<label for="pc-위치">위치</label>
<input type="text" id="pc-위치" />
</div>
<div class="form-group">
<label for="pc-CPU">CPU</label>
<input type="text" id="pc-CPU" />
</div>
<div class="form-group">
<label for="pc-GPU">GPU</label>
<input type="text" id="pc-GPU" />
</div>
<div class="form-group">
<label for="pc-RAM">RAM</label>
<input type="text" id="pc-RAM" />
</div>
<div class="form-group">
<label for="pc-SSD1">SSD1</label>
<input type="text" id="pc-SSD1" />
</div>
<div class="form-group">
<label for="pc-SSD2">SSD2</label>
<input type="text" id="pc-SSD2" />
</div>
<div class="form-group">
<label for="pc-HDD1">HDD1</label>
<input type="text" id="pc-HDD1" />
</div>
<div class="form-group">
<label for="pc-HDD2">HDD2</label>
<input type="text" id="pc-HDD2" />
</div>
<div class="form-group">
<label for="pc-구매일">구매일</label>
<input type="text" id="pc-구매일" placeholder="ex) 2024-01-01" />
</div>
<div class="form-group">
<label for="pc-금액">금액</label>
<input type="text" id="pc-금액" placeholder="ex) 1,000,000" oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/\\B(?=(\\d{3})+(?!\d))/g, ',')" />
</div>
<div class="form-group">
<label for="pc-납품업체">납품업체</label>
<input type="text" id="pc-납품업체" />
</div>
<div class="form-group full-width">
<label>품의서 (파일)</label>
<div style="display:flex; align-items:center; gap:0.5rem;">
<input type="file" id="pc-품의서" />
<span id="pc-품의서명" style="font-size:0.75rem; color:var(--text-light)"></span>
</div>
</div>
</form>
</div>
<div class="modal-history-area">
<div class="history-header">
<h3><i data-lucide="history" style="width:16px; height:16px;"></i> 수정 이력</h3>
</div>
<div id="pc-history-list" class="history-timeline">
<div class="empty-history">이력이 없습니다.</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button id="btn-delete-pc-asset" class="btn btn-outline btn-danger">삭제</button>
<div class="footer-actions">
<button id="btn-revert-pc-edit" class="btn btn-outline hidden">수정 취소</button>
<button id="btn-close-pc-footer" class="btn btn-outline">닫기</button>
<button id="btn-save-pc-asset" class="btn btn-primary">수정</button>
</div>
</div>
</div>
</div>
`;
export function initPcModal(renderContent: () => void, closeModals: () => void) {
if (!document.getElementById('pc-asset-modal')) {
document.body.insertAdjacentHTML('beforeend', PC_MODAL_HTML);
}
const pcForm = document.getElementById('pc-asset-form') as HTMLFormElement;
const btnRevertEdit = document.getElementById('btn-revert-pc-edit') as HTMLButtonElement;
const btnSavePc = document.getElementById('btn-save-pc-asset') as HTMLButtonElement;
const btnDeletePc = document.getElementById('btn-delete-pc-asset') as HTMLButtonElement;
const btnCloseHeader = document.getElementById('btn-close-pc-modal') as HTMLButtonElement;
const btnCloseFooter = document.getElementById('btn-close-pc-footer') as HTMLButtonElement;
let isEditMode = false;
let currentAsset: HardwareAsset | null = null;
const setEditMode = (edit: boolean) => {
isEditMode = edit;
if (edit) {
pcForm.classList.add('is-edit-mode');
pcForm.classList.remove('is-view-mode');
btnSavePc.textContent = '저장';
btnRevertEdit.classList.remove('hidden');
btnCloseFooter.classList.add('hidden');
} else {
pcForm.classList.add('is-view-mode');
pcForm.classList.remove('is-edit-mode');
btnSavePc.textContent = '수정';
btnRevertEdit.classList.add('hidden');
btnCloseFooter.classList.remove('hidden');
if (currentAsset) fillFormData(currentAsset);
}
};
function fillFormData(asset: HardwareAsset) {
(document.getElementById('pc-asset-id') as HTMLInputElement).value = asset.id;
(document.getElementById('pc-법인') as HTMLSelectElement).value = asset.법인;
(document.getElementById('pc-자산코드') as HTMLInputElement).value = asset.자산코드;
(document.getElementById('pc-사용자') as HTMLInputElement).value = asset.사용자 || '';
(document.getElementById('pc-위치') as HTMLInputElement).value = asset.위치 || '';
(document.getElementById('pc-CPU') as HTMLInputElement).value = asset.CPU || '';
(document.getElementById('pc-GPU') as HTMLInputElement).value = asset.GPU || '';
(document.getElementById('pc-RAM') as HTMLInputElement).value = asset.RAM || '';
(document.getElementById('pc-SSD1') as HTMLInputElement).value = asset.SSD1 || '';
(document.getElementById('pc-SSD2') as HTMLInputElement).value = asset.SSD2 || '';
(document.getElementById('pc-HDD1') as HTMLInputElement).value = asset.HDD1 || '';
(document.getElementById('pc-HDD2') as HTMLInputElement).value = asset.HDD2 || '';
(document.getElementById('pc-구매일') as HTMLInputElement).value = asset.구매일 || '';
(document.getElementById('pc-금액') as HTMLInputElement).value = asset.금액 || '';
(document.getElementById('pc-납품업체') as HTMLInputElement).value = asset.납품업체 || '';
(document.getElementById('pc-품의서명') as HTMLElement).innerText = asset.품의서명 ? `첨부: ${asset.품의서명}` : '';
}
btnRevertEdit?.addEventListener('click', () => setEditMode(false));
btnCloseHeader?.addEventListener('click', closeModals);
btnCloseFooter?.addEventListener('click', closeModals);
btnSavePc?.addEventListener('click', (e) => {
e.preventDefault();
if (!isEditMode) {
setEditMode(true);
return;
}
if (!pcForm.checkValidity()) { pcForm.reportValidity(); return; }
// ... (저장 로직 유지)
e.preventDefault();
if (!pcForm.checkValidity()) { pcForm.reportValidity(); return; }
const id = (document.getElementById('pc-asset-id') as HTMLInputElement).value;
const fileInput = document.getElementById('pc-품의서') as HTMLInputElement;
const 품의서명 = fileInput.files && fileInput.files.length > 0 ? fileInput.files[0].name : (document.getElementById('pc-품의서명') as HTMLElement).innerText.replace('첨부: ', '');
const newAsset: HardwareAsset = {
id: id || Math.random().toString(36).substring(2, 9),
type: '개인PC',
법인: (document.getElementById('pc-법인') as HTMLSelectElement).value,
자산코드: (document.getElementById('pc-자산코드') as HTMLInputElement).value,
명칭: '',
위치: (document.getElementById('pc-위치') as HTMLInputElement).value,
관리자: '', IP주소: '', MACaddress: '', HW사양: '', OS: '', 납품업체: (document.getElementById('pc-납품업체') as HTMLInputElement).value,
사용자: (document.getElementById('pc-사용자') as HTMLInputElement).value,
CPU: (document.getElementById('pc-CPU') as HTMLInputElement).value,
GPU: (document.getElementById('pc-GPU') as HTMLInputElement).value,
RAM: (document.getElementById('pc-RAM') as HTMLInputElement).value,
SSD1: (document.getElementById('pc-SSD1') as HTMLInputElement).value,
SSD2: (document.getElementById('pc-SSD2') as HTMLInputElement).value,
HDD1: (document.getElementById('pc-HDD1') as HTMLInputElement).value,
HDD2: (document.getElementById('pc-HDD2') as HTMLInputElement).value,
구매일: (document.getElementById('pc-구매일') as HTMLInputElement).value,
금액: (document.getElementById('pc-금액') as HTMLInputElement).value,
품의서명
};
if (id) {
const idx = state.masterData.hw.findIndex(a => a.id === id);
if(idx !== -1) {
const oldAsset = state.masterData.hw[idx];
const changes = getChangeDetails(oldAsset, newAsset);
if (changes) {
state.masterData.logs.push({
id: Math.random().toString(36).substring(2, 9),
assetId: id,
date: new Date().toLocaleString(),
details: changes,
user: '관리자'
});
}
state.masterData.hw[idx] = newAsset;
}
} else {
state.masterData.hw.push(newAsset);
}
closeModals();
renderContent();
});
btnDeletePc?.addEventListener('click', (e) => {
e.preventDefault();
const id = (document.getElementById('pc-asset-id') as HTMLInputElement).value;
if (confirm('삭제하시겠습니까?')) {
state.masterData.hw = state.masterData.hw.filter(a => a.id !== id);
closeModals();
renderContent();
}
});
}
export function openPcModal(asset?: HardwareAsset) {
const pcForm = document.getElementById('pc-asset-form') as HTMLFormElement;
const deleteBtn = document.getElementById('btn-delete-pc-asset')!;
const historyArea = document.querySelector('.modal-history-area') as HTMLElement;
openModal('pc-asset-modal');
pcForm.reset();
if (asset) {
document.getElementById('pc-modal-title')!.textContent = '개인PC 상세 정보 수정';
deleteBtn.style.display = 'block';
if (historyArea) historyArea.style.display = 'flex';
(document.getElementById('pc-asset-id') as HTMLInputElement).value = asset.id;
(document.getElementById('pc-법인') as HTMLSelectElement).value = asset.법인;
(document.getElementById('pc-자산코드') as HTMLInputElement).value = asset.자산코드;
(document.getElementById('pc-사용자') as HTMLInputElement).value = asset.사용자 || '';
(document.getElementById('pc-위치') as HTMLInputElement).value = asset.위치 || '';
(document.getElementById('pc-CPU') as HTMLInputElement).value = asset.CPU || '';
(document.getElementById('pc-GPU') as HTMLInputElement).value = asset.GPU || '';
(document.getElementById('pc-RAM') as HTMLInputElement).value = asset.RAM || '';
(document.getElementById('pc-SSD1') as HTMLInputElement).value = asset.SSD1 || '';
(document.getElementById('pc-SSD2') as HTMLInputElement).value = asset.SSD2 || '';
(document.getElementById('pc-HDD1') as HTMLInputElement).value = asset.HDD1 || '';
(document.getElementById('pc-HDD2') as HTMLInputElement).value = asset.HDD2 || '';
(document.getElementById('pc-구매일') as HTMLInputElement).value = asset.구매일 || '';
(document.getElementById('pc-금액') as HTMLInputElement).value = asset.금액 || '';
(document.getElementById('pc-납품업체') as HTMLInputElement).value = asset.납품업체 || '';
(document.getElementById('pc-품의서명') as HTMLElement).innerText = asset.품의서명 ? `첨부: ${asset.품의서명}` : '';
renderHistory(asset.id);
} else {
document.getElementById('pc-modal-title')!.textContent = '신규 개인PC 자산 추가';
deleteBtn.style.display = 'none';
if (historyArea) historyArea.style.display = 'none';
(document.getElementById('pc-asset-id') as HTMLInputElement).value = '';
(document.getElementById('pc-법인') as HTMLSelectElement).value = '한맥';
(document.getElementById('pc-품의서명') as HTMLElement).innerText = '';
}
}
function getChangeDetails(oldAsset: HardwareAsset, newAsset: HardwareAsset): string {
const changes: string[] = [];
const fields = [
{ key: '법인', label: '법인' },
{ key: '자산코드', label: '자산코드' },
{ key: '사용자', label: '사용자' },
{ key: '위치', label: '위치' },
{ key: 'CPU', label: 'CPU' },
{ key: 'GPU', label: 'GPU' },
{ key: 'RAM', label: 'RAM' },
{ key: 'SSD1', label: 'SSD1' },
{ key: 'SSD2', label: 'SSD2' },
{ key: 'HDD1', label: 'HDD1' },
{ key: 'HDD2', label: 'HDD2' },
{ key: '구매일', label: '구매일' },
{ key: '금액', label: '금액' },
{ key: '납품업체', label: '납품업체' },
{ key: '품의서명', label: '품의서' },
];
fields.forEach(field => {
const oldVal = (oldAsset as any)[field.key] || '';
const newVal = (newAsset as any)[field.key] || '';
if (oldVal !== newVal) {
changes.push(`${field.label}: ${oldVal || '없음'} → ${newVal || '없음'}`);
}
});
return changes.join('\n');
}
function renderHistory(assetId: string) {
const historyList = document.getElementById('pc-history-list');
if (!historyList) return;
const logs = state.masterData.logs
.filter(l => l.assetId === assetId)
.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());
if (logs.length === 0) {
historyList.innerHTML = '<div class="empty-history">이력이 없습니다.</div>';
return;
}
historyList.innerHTML = logs.map(log => `
<div class="history-item">
<div class="history-date">${log.date}</div>
<div class="history-user">수정자: ${log.user}</div>
<div class="history-details">${log.details.replace(/\\n/g, '<br>')}</div>
</div>
`).join('');
}

222
backup_refactor/src/components/Modal/SWModal.ts Normal file
View File

@@ -0,0 +1,222 @@
import { state } from '../../core/state';
import { SoftwareAsset } from '../../core/excelHandler';
import { openModal } from './BaseModal';
const SW_MODAL_HTML = `
<div id="sw-asset-modal" class="modal-overlay hidden">
<div class="modal-content">
<div class="modal-header">
<h2 id="sw-modal-title">S/W 상세 정보</h2>
<button id="btn-close-sw-modal" class="btn-icon" aria-label="닫기"><i data-lucide="x"></i></button>
</div>
<div class="modal-body">
<form id="sw-asset-form" class="grid-form">
<input type="hidden" id="sw-asset-id" />
<input type="hidden" id="sw-asset-type" />
<div class="form-group">
<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>
<option value="한맥">한맥 (HM)</option>
<option value="삼안 (SM)">삼안 (SM)</option>
<option value="바론 (BR)">바론 (BR)</option>
</select>
</div>
<div class="form-group">
<label for="sw-부서">부서</label>
<input type="text" id="sw-부서" placeholder="ex) 경영지원팀" required />
</div>
<div class="form-group">
<label for="sw-제품명">제품명</label>
<input type="text" id="sw-제품명" required />
</div>
<div class="form-group">
<label for="sw-구매일">구매일</label>
<input type="text" id="sw-구매일" placeholder="ex) 2024-01-01" />
</div>
<div class="form-group" id="sw-구독일-group">
<label for="sw-구독일">구독일(시작~끝)</label>
<input type="text" id="sw-구독일" placeholder="ex) 2024-01-01 ~ 2024-12-31" />
</div>
<div class="form-group" id="sw-유지보수-group" style="display:none;">
<label for="sw-유지보수여부">유지보수 여부</label>
<label style="display:flex; align-items:center; gap:0.5rem; height: 38px; cursor: pointer;">
<input type="checkbox" id="sw-유지보수여부" /> 대상 여부
</label>
</div>
<div class="form-group">
<label for="sw-금액">금액</label>
<input type="text" id="sw-금액" placeholder="ex) 1,000,000" oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/\\B(?=(\\d{3})+(?!\d))/g, ',')" />
</div>
<div class="form-group">
<label for="sw-수량">수량 (보유량)</label>
<input type="number" id="sw-수량" min="1" value="1" />
</div>
<div class="form-group">
<label for="sw-계정명">계정명</label>
<input type="text" id="sw-계정명" />
</div>
<div class="form-group">
<label for="sw-납품업체">납품업체</label>
<input type="text" id="sw-납품업체" />
</div>
<div class="form-group">
<label for="sw-비고">비고</label>
<input type="text" id="sw-비고" />
</div>
</form>
</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-close-sw-footer" class="btn btn-outline">닫기</button>
<button id="btn-save-sw-asset" class="btn btn-primary">수정</button>
</div>
</div>
</div>
</div>
`;
export function initSwModal(renderContent: () => void, closeModals: () => void) {
if (!document.getElementById('sw-asset-modal')) {
document.body.insertAdjacentHTML('beforeend', SW_MODAL_HTML);
}
const swForm = document.getElementById('sw-asset-form') as HTMLFormElement;
const btnRevertEdit = document.getElementById('btn-revert-sw-edit') as HTMLButtonElement;
const btnSaveSw = document.getElementById('btn-save-sw-asset') as HTMLButtonElement;
const btnDeleteSw = document.getElementById('btn-delete-sw-asset') as HTMLButtonElement;
const btnCloseHeader = document.getElementById('btn-close-sw-modal') as HTMLButtonElement;
const btnCloseFooter = document.getElementById('btn-close-sw-footer') as HTMLButtonElement;
let isEditMode = false;
let currentAsset: SoftwareAsset | null = null;
const setEditMode = (edit: boolean) => {
isEditMode = edit;
if (edit) {
swForm.classList.add('is-edit-mode');
swForm.classList.remove('is-view-mode');
btnSaveSw.textContent = '저장';
btnRevertEdit.classList.remove('hidden');
btnCloseFooter.classList.add('hidden');
} else {
swForm.classList.add('is-view-mode');
swForm.classList.remove('is-edit-mode');
btnSaveSw.textContent = '수정';
btnRevertEdit.classList.add('hidden');
btnCloseFooter.classList.remove('hidden');
if (currentAsset) fillFormData(currentAsset);
}
};
function fillFormData(asset: SoftwareAsset) {
(document.getElementById('sw-asset-id') as HTMLInputElement).value = asset.id;
(document.getElementById('sw-asset-type') as HTMLInputElement).value = asset.type;
(document.getElementById('sw-분야') as HTMLSelectElement).value = asset.분야 || '업무공통';
(document.getElementById('sw-법인') as HTMLSelectElement).value = asset.법인;
(document.getElementById('sw-부서') as HTMLInputElement).value = asset.부서 || '';
(document.getElementById('sw-제품명') as HTMLInputElement).value = asset.제품명;
(document.getElementById('sw-구매일') as HTMLInputElement).value = asset.구매일 || '';
(document.getElementById('sw-구독일') as HTMLInputElement).value = asset.구독일 || '';
(document.getElementById('sw-유지보수여부') as HTMLInputElement).checked = !!asset.유지보수여부;
(document.getElementById('sw-금액') as HTMLInputElement).value = asset.금액 || '';
(document.getElementById('sw-수량') as HTMLInputElement).value = String(asset.수량);
(document.getElementById('sw-계정명') as HTMLInputElement).value = asset.계정명 || '';
(document.getElementById('sw-납품업체') as HTMLInputElement).value = asset.납품업체 || '';
(document.getElementById('sw-비고') as HTMLInputElement).value = asset.비고 || '';
}
btnRevertEdit?.addEventListener('click', () => setEditMode(false));
btnCloseHeader?.addEventListener('click', closeModals);
btnCloseFooter?.addEventListener('click', closeModals);
btnSaveSw?.addEventListener('click', (e) => {
e.preventDefault();
if (!isEditMode) {
setEditMode(true);
return;
}
if (!swForm.checkValidity()) { swForm.reportValidity(); return; }
const id = (document.getElementById('sw-asset-id') as HTMLInputElement).value;
const newAsset: SoftwareAsset = {
id: id || Math.random().toString(36).substring(2, 9),
type: (document.getElementById('sw-asset-type') as HTMLInputElement).value,
분야: (document.getElementById('sw-분야') as HTMLSelectElement).value,
법인: (document.getElementById('sw-법인') as HTMLSelectElement).value,
부서: (document.getElementById('sw-부서') as HTMLInputElement).value,
제품명: (document.getElementById('sw-제품명') as HTMLInputElement).value,
구매일: (document.getElementById('sw-구매일') as HTMLInputElement).value,
구독일: (document.getElementById('sw-구독일') as HTMLInputElement).value,
유지보수여부: (document.getElementById('sw-유지보수여부') as HTMLInputElement).checked,
금액: (document.getElementById('sw-금액') as HTMLInputElement).value,
수량: parseInt((document.getElementById('sw-수량') as HTMLInputElement).value || '1', 10),
계정명: (document.getElementById('sw-계정명') as HTMLInputElement).value,
납품업체: (document.getElementById('sw-납품업체') as HTMLInputElement).value,
비고: (document.getElementById('sw-비고') as HTMLInputElement).value,
};
if (id) {
const idx = state.masterData.sw.findIndex(a => a.id === id);
if(idx !== -1) state.masterData.sw[idx] = newAsset;
} else {
state.masterData.sw.push(newAsset);
}
closeModals();
renderContent();
});
btnDeleteSw?.addEventListener('click', (e) => {
e.preventDefault();
const id = (document.getElementById('sw-asset-id') as HTMLInputElement).value;
if (confirm('삭제하시겠습니까?')) {
state.masterData.sw = state.masterData.sw.filter(a => a.id !== id);
closeModals();
renderContent();
}
});
}
export function openSwModal(asset?: SoftwareAsset) {
currentAsset = asset || null;
const swForm = document.getElementById('sw-asset-form') as HTMLFormElement;
const deleteBtn = document.getElementById('btn-delete-sw-asset')!;
openModal('sw-asset-modal');
swForm.reset();
const subGroup = document.getElementById('sw-구독일-group')!;
const permGroup = document.getElementById('sw-유지보수-group')!;
if (state.activeSubTab === '구독SW') {
subGroup.style.display = 'flex';
permGroup.style.display = 'none';
} else {
subGroup.style.display = 'none';
permGroup.style.display = 'flex';
}
if (asset) {
document.getElementById('sw-modal-title')!.textContent = `${state.activeSubTab} 상세 정보 수정`;
deleteBtn.style.display = 'block';
fillFormData(asset);
setEditMode(false);
} else {
document.getElementById('sw-modal-title')!.textContent = `신규 ${state.activeSubTab} 자산 추가`;
deleteBtn.style.display = 'none';
(document.getElementById('sw-asset-id') as HTMLInputElement).value = '';
(document.getElementById('sw-asset-type') as HTMLInputElement).value = state.activeSubTab;
setEditMode(true);
}
}

241
backup_refactor/src/components/Modal/SWUserModal.ts Normal file
View File

@@ -0,0 +1,241 @@
import { state } from '../../core/state';
import { SoftwareAsset, SWUser } from '../../core/excelHandler';
import { openModal } from './BaseModal';
import { createIcons, Edit2, X, Paperclip } from 'lucide';
let currentSwUserAssetId: string = '';
let tempSwUsers: SWUser[] = [];
const SW_USER_MODAL_HTML = `
<!-- S/W 할당 사용자 목록 모달 -->
<div id="sw-user-modal" class="modal-overlay hidden">
<div class="modal-content" style="max-width: 800px;">
<div class="modal-header">
<h2 id="sw-user-modal-title">S/W 할당 사용자 목록</h2>
<button id="btn-close-sw-user-modal" class="btn-icon" aria-label="닫기"><i data-lucide="x"></i></button>
</div>
<div class="modal-body">
<input type="hidden" id="sw-user-asset-id" />
<div style="text-align: right; margin-bottom: 0.75rem;">
<button type="button" id="btn-open-add-user" class="btn btn-primary btn-sm"><i data-lucide="plus"></i> 사용자 추가</button>
</div>
<div class="table-container">
<table style="width:100%;">
<thead>
<tr>
<th>법인</th>
<th>부서/팀</th>
<th>직위</th>
<th>이름</th>
<th>사용기간</th>
<th>증빙</th>
<th style="text-align:center;">관리</th>
</tr>
</thead>
<tbody id="user-list-body"></tbody>
</table>
</div>
</div>
<div class="modal-footer">
<div></div>
<div class="footer-actions">
<button id="btn-save-sw-user-mapping" class="btn btn-primary">변경사항 저장</button>
<button id="btn-cancel-sw-user-modal" class="btn btn-outline">닫기</button>
</div>
</div>
</div>
</div>
<!-- 사용자 추가/수정 서브 모달 -->
<div id="sw-user-edit-modal" class="modal-overlay hidden" style="z-index: 1100;">
<div class="modal-content" style="max-width: 500px;">
<div class="modal-header">
<h2 id="sw-user-edit-modal-title">사용자 정보</h2>
<button id="btn-close-sw-user-edit" class="btn-icon"><i data-lucide="x"></i></button>
</div>
<div class="modal-body">
<input type="hidden" id="edit-user-idx" />
<div class="grid-form" style="grid-template-columns: 1fr;">
<div class="form-group">
<label>법인</label>
<select id="new-user-법인">
<option value="한맥">한맥</option><option value="삼안">삼안</option><option value="바론">바론</option>
</select>
</div>
<div class="form-group">
<label>부서</label>
<input type="text" id="new-user-부서" />
</div>
<div class="form-group">
<label>팀</label>
<input type="text" id="new-user-팀" />
</div>
<div class="form-group">
<label>직위</label>
<input type="text" id="new-user-직위" />
</div>
<div class="form-group">
<label>이름</label>
<input type="text" id="new-user-이름" required />
</div>
<div class="form-group">
<label>사용기간</label>
<input type="text" id="new-user-사용기간" placeholder="ex) 2024.01 ~ 2024.12" />
</div>
<div class="form-group">
<label>신청서 (증빙파일)</label>
<input type="file" id="new-user-신청서" />
<span id="new-user-신청서명" style="font-size:0.75rem; color:var(--text-muted);"></span>
</div>
</div>
</div>
<div class="modal-footer">
<button id="btn-cancel-sw-user-edit" class="btn btn-outline">취소</button>
<button id="btn-save-edit-user" class="btn btn-primary">확인</button>
</div>
</div>
</div>
`;
export function initSwUserModal(renderContent: () => void, closeModals: () => void) {
if (!document.getElementById('sw-user-modal')) {
document.body.insertAdjacentHTML('beforeend', SW_USER_MODAL_HTML);
}
const btnOpenAddUser = document.getElementById('btn-open-add-user');
const btnSaveEditUser = document.getElementById('btn-save-edit-user');
const btnSaveSwUserMapping = document.getElementById('btn-save-sw-user-mapping');
const btnCancelUserEdit = document.getElementById('btn-cancel-sw-user-edit');
const btnCloseUserEdit = document.getElementById('btn-close-sw-user-edit');
const btnCancelUserModal = document.getElementById('btn-cancel-sw-user-modal');
const btnCloseUserModal = document.getElementById('btn-close-sw-user-modal');
btnOpenAddUser?.addEventListener('click', () => openUserEditModal(-1));
btnSaveEditUser?.addEventListener('click', () => saveUserEdit());
btnSaveSwUserMapping?.addEventListener('click', () => {
state.masterData.swUsers = state.masterData.swUsers.filter(u => u.swId !== currentSwUserAssetId);
state.masterData.swUsers.push(...tempSwUsers);
document.getElementById('sw-user-modal')?.classList.add('hidden');
renderContent();
});
btnCancelUserEdit?.addEventListener('click', () => document.getElementById('sw-user-edit-modal')?.classList.add('hidden'));
btnCloseUserEdit?.addEventListener('click', () => document.getElementById('sw-user-edit-modal')?.classList.add('hidden'));
btnCancelUserModal?.addEventListener('click', () => document.getElementById('sw-user-modal')?.classList.add('hidden'));
btnCloseUserModal?.addEventListener('click', () => document.getElementById('sw-user-modal')?.classList.add('hidden'));
}
function renderUserList() {
const tbody = document.getElementById('user-list-body')!;
tbody.innerHTML = '';
if (tempSwUsers.length === 0) {
tbody.innerHTML = '<tr><td colspan="7" style="padding: 2rem; text-align: center; color: var(--text-muted);">할당된 사용자가 없습니다.</td></tr>';
return;
}
tempSwUsers.forEach((user, idx) => {
const tr = document.createElement('tr');
const deptTeam = [user.부서, user.팀].filter(Boolean).join(' / ') || '-';
const attachIcon = user.신청서명 ? `<i data-lucide="paperclip" class="text-primary" style="width:16px; height:16px;" title="${user.신청서명}"></i>` : '-';
tr.innerHTML = `
<td>${user.법인}</td>
<td>${deptTeam}</td>
<td>${user.직위 || '-'}</td>
<td><strong>${user.이름}</strong></td>
<td style="text-align:center;">${user.사용기간 || '-'}</td>
<td style="text-align:center;">${attachIcon}</td>
<td style="text-align:center;">
<button type="button" class="btn-icon btn-edit-user" data-idx="${idx}" style="color: var(--primary-color);"><i data-lucide="edit-2" style="width:14px; height:14px;"></i></button>
<button type="button" class="btn-icon btn-remove-user" data-idx="${idx}" style="color: var(--danger);"><i data-lucide="x" style="width:14px; height:14px;"></i></button>
</td>
`;
tbody.appendChild(tr);
});
createIcons({ icons: { Edit2, X, Paperclip } });
tbody.querySelectorAll('.btn-edit-user').forEach(btn => {
btn.addEventListener('click', (e) => {
const idx = parseInt((e.currentTarget as HTMLElement).getAttribute('data-idx')!);
openUserEditModal(idx);
});
});
tbody.querySelectorAll('.btn-remove-user').forEach(btn => {
btn.addEventListener('click', (e) => {
const idx = parseInt((e.currentTarget as HTMLButtonElement).getAttribute('data-idx')!);
tempSwUsers.splice(idx, 1);
renderUserList();
});
});
}
export function openSwUserModal(asset: SoftwareAsset) {
openModal('sw-user-modal');
currentSwUserAssetId = asset.id;
tempSwUsers = state.masterData.swUsers.filter(u => u.swId === asset.id).map(u => ({...u}));
renderUserList();
}
function openUserEditModal(idx: number) {
const editModal = document.getElementById('sw-user-edit-modal')!;
editModal.classList.remove('hidden');
(document.getElementById('edit-user-idx') as HTMLInputElement).value = String(idx);
if (idx === -1) {
document.getElementById('sw-user-edit-modal-title')!.innerText = '새 사용자 추가';
(document.getElementById('new-user-법인') as HTMLSelectElement).value = '한맥';
(document.getElementById('new-user-부서') as HTMLInputElement).value = '';
(document.getElementById('new-user-팀') as HTMLInputElement).value = '';
(document.getElementById('new-user-직위') as HTMLInputElement).value = '';
(document.getElementById('new-user-이름') as HTMLInputElement).value = '';
(document.getElementById('new-user-사용기간') as HTMLInputElement).value = '';
(document.getElementById('new-user-신청서') as HTMLInputElement).value = '';
document.getElementById('new-user-신청서명')!.innerText = '';
} else {
document.getElementById('sw-user-edit-modal-title')!.innerText = '사용자 정보 수정';
const u = tempSwUsers[idx];
(document.getElementById('new-user-법인') as HTMLSelectElement).value = u.법인;
(document.getElementById('new-user-부서') as HTMLInputElement).value = u.부서;
(document.getElementById('new-user-팀') as HTMLInputElement).value = u.팀;
(document.getElementById('new-user-직위') as HTMLInputElement).value = u.직위;
(document.getElementById('new-user-이름') as HTMLInputElement).value = u.이름;
(document.getElementById('new-user-사용기간') as HTMLInputElement).value = u.사용기간;
(document.getElementById('new-user-신청서') as HTMLInputElement).value = '';
document.getElementById('new-user-신청서명')!.innerText = u.신청서명 ? `첨부: ${u.신청서명}` : '';
}
}
function saveUserEdit() {
const idx = parseInt((document.getElementById('edit-user-idx') as HTMLInputElement).value);
const 이름 = (document.getElementById('new-user-이름') as HTMLInputElement).value.trim();
if (!이름) { alert('이름을 입력해주세요.'); return; }
const fileInput = document.getElementById('new-user-신청서') as HTMLInputElement;
let 신청서명 = '';
if (fileInput.files && fileInput.files.length > 0) {
신청서명 = fileInput.files[0].name;
} else if (idx !== -1) {
신청서명 = tempSwUsers[idx].신청서명;
}
const userData: SWUser = {
id: idx === -1 ? Math.random().toString(36).substring(2, 9) : tempSwUsers[idx].id,
swId: currentSwUserAssetId,
법인: (document.getElementById('new-user-법인') as HTMLSelectElement).value,
부서: (document.getElementById('new-user-부서') as HTMLInputElement).value,
팀: (document.getElementById('new-user-팀') as HTMLInputElement).value,
직위: (document.getElementById('new-user-직위') as HTMLInputElement).value,
이름,
사용기간: (document.getElementById('new-user-사용기간') as HTMLInputElement).value,
신청서명
};
if (idx === -1) tempSwUsers.push(userData);
else tempSwUsers[idx] = userData;
document.getElementById('sw-user-edit-modal')?.classList.add('hidden');
renderUserList();
}

161
backup_refactor/src/components/Modal/StorageModal.ts Normal file
View File

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

80
backup_refactor/src/components/Navigation.ts Normal file
View File

@@ -0,0 +1,80 @@
import { state } from '../core/state';
const MENU_CONFIG = {
hw: {
label: '하드웨어',
tabs: ['대시보드', '개인PC', '서버', '스토리지', '전산비품']
},
sw: {
label: '소프트웨어',
tabs: ['대시보드', '구독SW', '영구SW']
},
ops: {
label: '운영 서비스',
tabs: ['대시보드', '서비스현황', '백업관리', '보안점검']
}
};
export function renderNavigation(onTabChange: (tab: string) => void) {
const navContainer = document.getElementById('main-nav')!;
const btnAddAsset = document.getElementById('btn-add-asset') as HTMLButtonElement;
const render = () => {
navContainer.innerHTML = '';
(Object.keys(MENU_CONFIG) as Array<keyof typeof MENU_CONFIG>).forEach(catKey => {
const config = MENU_CONFIG[catKey];
const isActive = state.activeCategory === catKey;
const group = document.createElement('div');
group.className = `nav-group ${isActive ? 'active is-showing-shelf' : ''}`;
// 메인 카테고리 트리거
const trigger = document.createElement('div');
trigger.className = 'gnb-trigger';
trigger.textContent = config.label;
trigger.addEventListener('click', () => {
if (state.activeCategory !== catKey) {
state.activeCategory = catKey;
state.activeSubTab = '대시보드';
if (btnAddAsset) btnAddAsset.classList.add('hidden');
render();
onTabChange('대시보드');
}
});
group.appendChild(trigger);
// 하위 탭 선반 (Shelf)
const shelf = document.createElement('div');
shelf.className = 'lnb-shelf';
config.tabs.forEach(tab => {
const item = document.createElement('div');
item.className = `lnb-item ${isActive && state.activeSubTab === tab ? 'active' : ''}`;
item.textContent = tab;
item.addEventListener('click', (e) => {
e.stopPropagation();
state.activeCategory = catKey;
state.activeSubTab = tab;
if (btnAddAsset) {
if (tab === '대시보드') btnAddAsset.classList.add('hidden');
else btnAddAsset.classList.remove('hidden');
}
render();
onTabChange(tab);
});
shelf.appendChild(item);
});
group.appendChild(shelf);
// 마우스 오버 시 다른 그룹의 선반은 가리고 내 것만 보여주는 스타일은 CSS에서 처리함
navContainer.appendChild(group);
});
};
render();
}