feat: 대시보드 및 모달 컴포넌트 최적화, 클라우드 자산 뷰 추가

This commit is contained in:
2026-04-21 09:11:56 +09:00
parent c5d7f4cf67
commit 1ace678c09
10 changed files with 769 additions and 39 deletions

View File

@@ -0,0 +1,317 @@
import { state } from '../../core/state';
import { SoftwareAsset } from '../../core/excelHandler';
import { openModal } from './BaseModal';
import { createIcons, Save, X, Edit2, RotateCcw, History, Plus } from 'lucide';
const CLOUD_MODAL_HTML = `
<div id="cloud-asset-modal" class="modal-overlay hidden">
<div class="modal-content wide">
<div class="modal-header">
<h2 id="cloud-modal-title">클라우드 서비스 상세</h2>
<button id="btn-close-cloud-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="cloud-asset-form" class="grid-form">
<input type="hidden" id="cloud-asset-id" />
<div class="form-group"><label>플랫폼명</label><input type="text" id="cloud-플랫폼명" placeholder="예: AWS, Cafe24" required /></div>
<div class="form-group">
<label>담당법인</label>
<select id="cloud-법인" required>
<option value="한맥">한맥</option><option value="삼안">삼안</option><option value="바론">바론</option>
</select>
</div>
<div class="form-group" style="grid-column: span 2;"><label>사용용도(프로젝트/제품명)</label><input type="text" id="cloud-제품명" required /></div>
<div class="form-group"><label>담당부서</label><input type="text" id="cloud-부서" /></div>
<div class="form-group"><label>계정명(이메일)</label><input type="text" id="cloud-계정명" /></div>
<div class="form-group"><label>결제수단</label>
<select id="cloud-결제수단">
<option value="">선택안함</option>
<option value="법인카드">법인카드</option>
<option value="인보이스">인보이스</option>
</select>
</div>
<div class="form-group"><label>연결카드번호(뒷4자리)</label><input type="text" id="cloud-연결카드번호" placeholder="1234" /></div>
<div class="form-group"><label>결제일(기준일)</label><input type="number" min="1" max="31" id="cloud-결제일" placeholder="15" /></div>
<div class="form-group"><label>당월 청구액(원)</label><input type="text" id="cloud-당월청구액" placeholder="0" oninput="this.value = this.value.replace(/[^0-9]/g, '') ? Number(this.value.replace(/[^0-9]/g, '')).toLocaleString() : ''" /></div>
<div class="form-group" style="grid-column: span 2;"><label>비고</label><input type="text" id="cloud-비고" /></div>
</form>
</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-cloud-update" class="btn btn-outline btn-sm"><i data-lucide="plus" style="width:14px;height:14px;"></i> 내역 추가</button>
</div>
<div id="cloud-history-list" class="history-timeline">
<div class="empty-history">내역이 없습니다.</div>
</div>
</div>
</div>
</div>
<div class="modal-footer" style="justify-content: space-between;">
<button id="btn-delete-cloud-asset" class="btn btn-outline btn-danger">삭제</button>
<div class="footer-actions">
<button id="btn-revert-cloud-edit" class="btn btn-outline hidden">취소</button>
<button id="btn-close-cloud-footer" class="btn btn-outline">닫기</button>
<button id="btn-save-cloud-asset" class="btn btn-primary">수정</button>
</div>
</div>
</div>
</div>
<div id="cloud-update-modal" class="modal-overlay hidden" style="z-index: 1100;">
<div class="modal-content" style="max-width: 400px;">
<div class="modal-header">
<h2>클라우드 결제/이력 업데이트</h2>
<button id="btn-close-cloud-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="cloud-update-date" />
</div>
<div class="form-group">
<label>청구 금액(원)</label>
<input type="text" id="cloud-update-cost" oninput="this.value = this.value.replace(/[^0-9]/g, '') ? Number(this.value.replace(/[^0-9]/g, '')).toLocaleString() : ''" placeholder="ex) 150,000" />
</div>
<div class="form-group">
<label>상세 내용 (메모)</label>
<input type="text" id="cloud-update-note" placeholder="예: 트래픽 초과로 인한 요금 증가" />
</div>
</div>
</div>
<div class="modal-footer">
<div></div>
<div class="footer-actions">
<button id="btn-cancel-cloud-update" class="btn btn-outline">취소</button>
<button id="btn-save-cloud-update" class="btn btn-primary">반영하기</button>
</div>
</div>
</div>
</div>
`;
export let currentCloudAsset: SoftwareAsset | null = null;
export let isCloudEditMode = false;
export function setCloudEditMode(edit: boolean) {
isCloudEditMode = edit;
const form = document.getElementById('cloud-asset-form') as HTMLFormElement;
const btnSave = document.getElementById('btn-save-cloud-asset') as HTMLButtonElement;
const btnRevert = document.getElementById('btn-revert-cloud-edit') as HTMLButtonElement;
const btnClose = document.getElementById('btn-close-cloud-footer') as HTMLButtonElement;
if (edit) {
form.classList.add('is-edit-mode');
form.classList.remove('is-view-mode');
btnSave.textContent = '저장';
btnRevert.classList.remove('hidden');
btnClose.classList.add('hidden');
Array.from(form.elements).forEach((el: any) => el.disabled = false);
} else {
form.classList.add('is-view-mode');
form.classList.remove('is-edit-mode');
btnSave.textContent = '수정';
btnRevert.classList.add('hidden');
btnClose.classList.remove('hidden');
Array.from(form.elements).forEach((el: any) => el.disabled = true);
if (currentCloudAsset) fillCloudFormData(currentCloudAsset);
}
}
export function fillCloudFormData(asset: SoftwareAsset) {
(document.getElementById('cloud-asset-id') as HTMLInputElement).value = asset.id;
(document.getElementById('cloud-플랫폼명') as HTMLInputElement).value = asset. || '';
(document.getElementById('cloud-법인') as HTMLSelectElement).value = asset. || '한맥';
(document.getElementById('cloud-제품명') as HTMLInputElement).value = asset. || '';
(document.getElementById('cloud-부서') as HTMLInputElement).value = asset. || '';
(document.getElementById('cloud-계정명') as HTMLInputElement).value = asset. || '';
(document.getElementById('cloud-결제수단') as HTMLSelectElement).value = asset. || '';
(document.getElementById('cloud-연결카드번호') as HTMLInputElement).value = asset. || '';
(document.getElementById('cloud-결제일') as HTMLInputElement).value = asset. || '';
const billing = asset. ? asset..replace(/[^0-9]/g, '') : '';
(document.getElementById('cloud-당월청구액') as HTMLInputElement).value = billing ? Number(billing).toLocaleString() : '';
(document.getElementById('cloud-비고') as HTMLInputElement).value = asset. || '';
document.getElementById('btn-open-cloud-update')!.style.display = 'flex';
renderCloudHistory(asset.id);
}
function renderCloudHistory(assetId: string) {
const historyList = document.getElementById('cloud-history-list');
if (!historyList) return;
if (!state.masterData.logs) state.masterData.logs = [];
const logs = state.masterData.logs
.filter(l => l.assetId === assetId)
.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());
if (logs.length === 0) {
historyList.innerHTML = '<div class="empty-history">업데이트 내역이 없습니다.</div>';
return;
}
historyList.innerHTML = logs.map(log => `
<div class="history-item">
<div class="history-date">${log.date}</div>
<div class="history-user">작업자: ${log.user}</div>
<div class="history-details">${log.details.replace(/\n/g, '<br>')}</div>
</div>
`).join('');
createIcons({ icons: { X, History, Plus } });
}
export function initCloudModal(renderContent: () => void, closeModals: () => void) {
if (!document.getElementById('cloud-asset-modal')) {
document.body.insertAdjacentHTML('beforeend', CLOUD_MODAL_HTML);
}
const form = document.getElementById('cloud-asset-form') as HTMLFormElement;
const btnRevert = document.getElementById('btn-revert-cloud-edit');
const btnSave = document.getElementById('btn-save-cloud-asset');
const btnDelete = document.getElementById('btn-delete-cloud-asset');
document.getElementById('btn-close-cloud-modal')?.addEventListener('click', closeModals);
document.getElementById('btn-close-cloud-footer')?.addEventListener('click', closeModals);
btnRevert?.addEventListener('click', (e) => {
e.preventDefault();
setCloudEditMode(false);
});
btnSave?.addEventListener('click', (e) => {
e.preventDefault();
if (!isCloudEditMode) {
setCloudEditMode(true);
return;
}
if (!form.checkValidity()) { form.reportValidity(); return; }
const id = (document.getElementById('cloud-asset-id') as HTMLInputElement).value;
const billingRaw = (document.getElementById('cloud-당월청구액') as HTMLInputElement).value.replace(/[^0-9]/g, '');
const newAsset: SoftwareAsset = {
id: id || Math.random().toString(36).substring(2, 9),
type: '클라우드',
: (document.getElementById('cloud-플랫폼명') as HTMLInputElement).value,
: (document.getElementById('cloud-법인') as HTMLSelectElement).value,
: (document.getElementById('cloud-제품명') as HTMLInputElement).value,
: (document.getElementById('cloud-부서') as HTMLInputElement).value,
: (document.getElementById('cloud-계정명') as HTMLInputElement).value,
: (document.getElementById('cloud-결제수단') as HTMLSelectElement).value,
: (document.getElementById('cloud-연결카드번호') as HTMLInputElement).value,
: (document.getElementById('cloud-결제일') as HTMLInputElement).value,
당월청구액: billingRaw,
: (document.getElementById('cloud-비고') as HTMLInputElement).value,
: '', : '', 수량: 1, : ''
};
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);
const now = new Date();
state.masterData.logs = state.masterData.logs || [];
state.masterData.logs.push({
id: Math.random().toString(36).substring(2, 9),
assetId: newAsset.id,
date: `${now.getFullYear()}-${String(now.getMonth()+1).padStart(2,'0')}-${String(now.getDate()).padStart(2,'0')}`,
user: '관리자',
details: '신규 등록'
});
}
closeModals();
renderContent();
});
btnDelete?.addEventListener('click', (e) => {
e.preventDefault();
const id = (document.getElementById('cloud-asset-id') as HTMLInputElement).value;
if (confirm('클라우드 자산을 삭제하시겠습니까?')) {
state.masterData.sw = state.masterData.sw.filter(a => a.id !== id);
closeModals();
renderContent();
}
});
// 클라우드 업데이트 (이력) 모달 로직
const updateModal = document.getElementById('cloud-update-modal')!;
document.getElementById('btn-open-cloud-update')?.addEventListener('click', () => {
updateModal.classList.remove('hidden');
(document.getElementById('cloud-update-date') as HTMLInputElement).value = new Date().toISOString().split('T')[0];
(document.getElementById('cloud-update-cost') as HTMLInputElement).value = '';
(document.getElementById('cloud-update-note') as HTMLInputElement).value = '';
});
const closeUpdateModal = () => updateModal.classList.add('hidden');
document.getElementById('btn-close-cloud-update')?.addEventListener('click', closeUpdateModal);
document.getElementById('btn-cancel-cloud-update')?.addEventListener('click', closeUpdateModal);
document.getElementById('btn-save-cloud-update')?.addEventListener('click', () => {
const id = (document.getElementById('cloud-asset-id') as HTMLInputElement).value;
if (!id) return;
const date = (document.getElementById('cloud-update-date') as HTMLInputElement).value;
const costRaw = (document.getElementById('cloud-update-cost') as HTMLInputElement).value.replace(/[^0-9]/g, '');
const note = (document.getElementById('cloud-update-note') as HTMLInputElement).value;
if (!date) return alert('업데이트 일자를 입력하세요.');
let details = '결제/상태 업데이트';
if (costRaw) details += ` (비용: ₩ ${Number(costRaw).toLocaleString()})`;
if (note) details += `\n메모: ${note}`;
state.masterData.logs = state.masterData.logs || [];
state.masterData.logs.push({
id: Math.random().toString(36).substring(2, 9),
assetId: id,
date,
user: '관리자',
details
});
// 금액 업데이트 반영
if (costRaw) {
const idx = state.masterData.sw.findIndex(a => a.id === id);
if (idx !== -1) {
state.masterData.sw[idx]. = costRaw;
(document.getElementById('cloud-당월청구액') as HTMLInputElement).value = Number(costRaw).toLocaleString();
}
}
closeUpdateModal();
renderCloudHistory(id);
renderContent();
});
createIcons({ icons: { Save, X, Edit2, RotateCcw, History, Plus } });
}
export function openCloudModal(asset?: SoftwareAsset) {
currentCloudAsset = asset || null;
const form = document.getElementById('cloud-asset-form') as HTMLFormElement;
const deleteBtn = document.getElementById('btn-delete-cloud-asset')!;
openModal('cloud-asset-modal');
form.reset();
if (asset) {
document.getElementById('cloud-modal-title')!.textContent = '클라우드 서비스 상세';
deleteBtn.style.display = 'block';
fillCloudFormData(asset);
setCloudEditMode(false);
} else {
document.getElementById('cloud-modal-title')!.textContent = '신규 클라우드 서비스 등록';
deleteBtn.style.display = 'none';
(document.getElementById('cloud-asset-id') as HTMLInputElement).value = '';
document.getElementById('btn-open-cloud-update')!.style.display = 'none';
renderCloudHistory('');
setCloudEditMode(true);
}
createIcons({ icons: { History, Plus } });
}

View File

@@ -99,11 +99,34 @@ export function openSwUsageDetail(title: string, list: SoftwareAsset[]) {
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>`;
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);
});
modal.classList.remove('hidden');
}
export function openCloudDashboardDetail(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 = '';
if (list.length === 0) {
tbody.innerHTML = `<tr><td colspan="6" style="text-align:center; padding: 2rem;">해당 내역이 없습니다.</td></tr>`;
} else {
list.forEach((sw, idx) => {
const priceStr = sw. ? Number(sw..replace(/[^0-9]/g, '')).toLocaleString() : '0';
const tr = document.createElement('tr');
tr.innerHTML = `<td>${idx+1}</td><td>${sw.||'-'}</td><td>${sw.||'-'}</td><td>${sw.||'-'}</td><td>${sw. ? sw. + '일' : '-'}</td><td>₩ ${priceStr}</td>`;
tbody.appendChild(tr);
});
}
modal.classList.remove('hidden');
}

View File

@@ -25,7 +25,7 @@ const SW_MODAL_HTML = `
<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>
<option value="한맥">한맥</option><option value="삼안">삼안</option><option value="바론">바론</option>
</select>
</div>
<div class="form-group">
@@ -52,7 +52,7 @@ const SW_MODAL_HTML = `
</div>
<div class="form-group">
<label for="sw-금액">금액</label>
<input type="text" id="sw-금액" oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/\\B(?=(\\d{3})+(?!\d))/g, ',')" />
<input type="text" id="sw-금액" oninput="this.value = this.value.replace(/[^0-9]/g, '') ? Number(this.value.replace(/[^0-9]/g, '')).toLocaleString() : ''" />
</div>
<div class="form-group">
<label for="sw-수량">수량 (보유량)</label>
@@ -122,7 +122,7 @@ const SW_MODAL_HTML = `
</div>
<div class="form-group">
<label>발생 비용</label>
<input type="text" id="sw-update-cost" oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/\\B(?=(\\d{3})+(?!\d))/g, ',')" placeholder="ex) 500,000" />
<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>
@@ -157,12 +157,14 @@ export function setEditMode(edit: boolean) {
btnSaveSw.textContent = '저장';
btnRevertEdit.classList.remove('hidden');
btnCloseFooter.classList.add('hidden');
Array.from(swForm.elements).forEach((el: any) => el.disabled = false);
} else {
swForm.classList.add('is-view-mode');
swForm.classList.remove('is-edit-mode');
btnSaveSw.textContent = '수정';
btnRevertEdit.classList.add('hidden');
btnCloseFooter.classList.remove('hidden');
Array.from(swForm.elements).forEach((el: any) => el.disabled = true);
if (currentAsset) fillFormData(currentAsset);
}
}
@@ -248,6 +250,16 @@ export function initSwModal(renderContent: () => void, closeModals: () => void)
if(idx !== -1) state.masterData.sw[idx] = newAsset;
} else {
state.masterData.sw.push(newAsset);
const now = new Date();
state.masterData.logs = state.masterData.logs || [];
state.masterData.logs.push({
id: Math.random().toString(36).substring(2, 9),
assetId: newAsset.id,
date: `${now.getFullYear()}-${String(now.getMonth()+1).padStart(2,'0')}-${String(now.getDate()).padStart(2,'0')}`,
user: '관리자',
details: '신규 등록'
});
}
closeModals();
@@ -348,6 +360,7 @@ export function initSwModal(renderContent: () => void, closeModals: () => void)
function renderSwHistory(assetId: string) {
const historyList = document.getElementById('sw-history-list');
if (!historyList) return;
if (!state.masterData.logs) state.masterData.logs = [];
const logs = state.masterData.logs
.filter(l => l.assetId === assetId)