feat: 서버 상세 모달 그룹화 및 전역 UI/UX 통일, 조회/수정 모드 구현
주요 변경 사항: - 서버 자산 상세 정보 4개 그룹(Identity, Connectivity, Specs, Operation)으로 최적화 - 모달 내 조회/수정 모드 전환 및 수정 강조색(#FF3D00) 적용 - 모든 모달의 버튼 사이즈 및 폰트 스타일 가이드 준수 통일 - 수정 취소(Revert) 기능 및 누락된 대시보드 상세 모달 추가 - TypeScript 타입 오류 및 런타임 렌더링 결함 긴급 복구
This commit is contained in:
@@ -1,182 +1,192 @@
|
||||
import { state } from '../../state';
|
||||
import { HardwareAsset } from '../../excelHandler';
|
||||
import { openModal } from './BaseModal';
|
||||
import { renderTable } from '../../views/AssetTableView';
|
||||
import { createIcons, Paperclip } from 'lucide';
|
||||
|
||||
/**
|
||||
* 폼의 모든 입력 필드를 활성화/비활성화 처리
|
||||
*/
|
||||
function setFormReadOnly(form: HTMLFormElement, isReadOnly: boolean) {
|
||||
const inputs = form.querySelectorAll('input, select, textarea');
|
||||
inputs.forEach(input => {
|
||||
if (input.type === 'file') {
|
||||
(input as HTMLElement).style.display = isReadOnly ? 'none' : 'block';
|
||||
return;
|
||||
}
|
||||
|
||||
if (isReadOnly) {
|
||||
(input as HTMLElement).setAttribute('readonly', 'true');
|
||||
if (input.tagName === 'SELECT') (input as HTMLSelectElement).disabled = true;
|
||||
} else {
|
||||
(input as HTMLElement).removeAttribute('readonly');
|
||||
if (input.tagName === 'SELECT') (input as HTMLSelectElement).disabled = false;
|
||||
}
|
||||
});
|
||||
let currentAsset: HardwareAsset | null = null;
|
||||
let isEditMode = false;
|
||||
|
||||
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 } });
|
||||
}
|
||||
|
||||
/**
|
||||
* 하드웨어(서버, 전산비품 등) 모달 초기화 및 로직 제어
|
||||
* 폼 필드에 자산 데이터 채우기
|
||||
*/
|
||||
export function initHWModal(renderContent: () => void, closeModals: () => void) {
|
||||
const hwForm = document.getElementById('hw-asset-form') as HTMLFormElement;
|
||||
const btnSaveHw = document.getElementById('btn-save-hw-asset') as HTMLButtonElement;
|
||||
const btnDeleteHw = document.getElementById('btn-delete-hw-asset') as HTMLButtonElement;
|
||||
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.품의서명 || '';
|
||||
|
||||
// 저장/수정 버튼 통합 이벤트
|
||||
btnSaveHw?.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
const serverOnly = document.querySelectorAll('.server-only');
|
||||
const nonServer = document.querySelectorAll('.non-server');
|
||||
const equipGroup = document.getElementById('hw-비품유형-group')!;
|
||||
|
||||
// 현재 버튼이 '수정' 상태인 경우
|
||||
if (btnSaveHw.textContent === '수정') {
|
||||
setFormReadOnly(hwForm, false);
|
||||
btnSaveHw.textContent = '저장';
|
||||
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() {
|
||||
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;
|
||||
}
|
||||
|
||||
// 현재 버튼이 '저장' 상태인 경우 (실제 저장 로직)
|
||||
if (!hwForm.checkValidity()) { hwForm.reportValidity(); return; }
|
||||
|
||||
const id = (document.getElementById('hw-asset-id') as HTMLInputElement).value;
|
||||
// 실제 저장 로직
|
||||
const assetId = (document.getElementById('hw-asset-id') as HTMLInputElement).value;
|
||||
const type = (document.getElementById('hw-asset-type') as HTMLInputElement).value;
|
||||
const fileInput = document.getElementById('hw-품의서') as HTMLInputElement;
|
||||
const 품의서명 = fileInput.files && fileInput.files.length > 0 ? fileInput.files[0].name : (document.getElementById('hw-품의서명') as HTMLElement).innerText.replace('📎', '');
|
||||
|
||||
const newAsset: HardwareAsset = {
|
||||
id: id || Math.random().toString(36).substring(2, 9),
|
||||
type: type,
|
||||
|
||||
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,
|
||||
관리자: (document.getElementById('hw-담당자_정') as HTMLInputElement).value,
|
||||
담당자_정: (document.getElementById('hw-담당자_정') as HTMLInputElement).value,
|
||||
담당자_부: (document.getElementById('hw-담당자_부') as HTMLInputElement).value,
|
||||
IP주소: (document.getElementById('hw-IP주소') as HTMLInputElement).value,
|
||||
IP2: (document.getElementById('hw-IP2') as HTMLInputElement).value,
|
||||
MACaddress: (document.getElementById('hw-MACaddress') 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,
|
||||
HW사양: (document.getElementById('hw-HW사양') as HTMLTextAreaElement).value,
|
||||
구매일: (document.getElementById('hw-구매일') as HTMLInputElement).value,
|
||||
금액: (document.getElementById('hw-금액') as HTMLInputElement).value,
|
||||
납품업체: (document.getElementById('hw-납품업체') as HTMLInputElement).value,
|
||||
용도: (document.getElementById('hw-용도') as HTMLInputElement).value,
|
||||
상세: (document.getElementById('hw-상세') as HTMLInputElement).value,
|
||||
원격접속: (document.getElementById('hw-원격접속') as HTMLInputElement).value,
|
||||
서버ID: (document.getElementById('hw-서버ID') as HTMLInputElement).value,
|
||||
서버PW: (document.getElementById('hw-서버PW') as HTMLInputElement).value,
|
||||
비고: (document.getElementById('hw-비고') as HTMLInputElement).value,
|
||||
품의서명,
|
||||
비품유형: type === '전산비품' ? (document.getElementById('hw-비품유형') as HTMLSelectElement).value : undefined,
|
||||
storage유형: (document.getElementById('hw-용도') as HTMLInputElement).value
|
||||
담당자_정: (document.getElementById('hw-담당자_정') as HTMLInputElement).value,
|
||||
관리자: (document.getElementById('hw-담당자_정') as HTMLInputElement).value,
|
||||
담당자_부: (document.getElementById('hw-담당자_부') as HTMLInputElement).value,
|
||||
};
|
||||
|
||||
if (id) {
|
||||
const idx = state.masterData.hw.findIndex(a => a.id === id);
|
||||
if(idx !== -1) state.masterData.hw[idx] = newAsset;
|
||||
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 {
|
||||
state.masterData.hw.push(newAsset);
|
||||
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(); // 저장 후 다시 조회 모드로
|
||||
}
|
||||
|
||||
closeModals();
|
||||
renderContent();
|
||||
});
|
||||
|
||||
// 삭제 버튼 이벤트
|
||||
btnDeleteHw?.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
const id = (document.getElementById('hw-asset-id') as HTMLInputElement).value;
|
||||
if (confirm('삭제하시겠습니까?')) {
|
||||
state.masterData.hw = state.masterData.hw.filter(a => a.id !== id);
|
||||
closeModals();
|
||||
renderContent();
|
||||
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();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 하드웨어 상세 모달 열기
|
||||
*/
|
||||
export function openHwModal(asset?: HardwareAsset) {
|
||||
const hwForm = document.getElementById('hw-asset-form') as HTMLFormElement;
|
||||
const deleteBtn = document.getElementById('btn-delete-hw-asset')!;
|
||||
const btnSaveHw = document.getElementById('btn-save-hw-asset') as HTMLButtonElement;
|
||||
const currentType = asset ? asset.type : state.activeSubTab;
|
||||
|
||||
openModal('hw-asset-modal');
|
||||
hwForm.reset();
|
||||
|
||||
// 타입에 따른 필드 노출 제어
|
||||
const serverFields = document.querySelectorAll('.server-only');
|
||||
const nonServerFields = document.querySelectorAll('.non-server');
|
||||
|
||||
if (currentType === '서버') {
|
||||
serverFields.forEach(el => (el as HTMLElement).style.display = 'flex');
|
||||
nonServerFields.forEach(el => (el as HTMLElement).style.display = 'none');
|
||||
} else {
|
||||
serverFields.forEach(el => (el as HTMLElement).style.display = 'none');
|
||||
nonServerFields.forEach(el => (el as HTMLElement).style.display = 'flex');
|
||||
}
|
||||
|
||||
if (asset) {
|
||||
document.getElementById('hw-modal-title')!.textContent = `${currentType} 상세 정보 수정`;
|
||||
deleteBtn.style.display = 'block';
|
||||
btnSaveHw.textContent = '수정';
|
||||
setFormReadOnly(hwForm, true); // 수정 시 초기 상태는 읽기 전용
|
||||
|
||||
(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-담당자_정') as HTMLInputElement).value = asset.담당자_정 || 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.IP2 || '';
|
||||
(document.getElementById('hw-MACaddress') as HTMLInputElement).value = asset.MACaddress || '';
|
||||
(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-HW사양') as HTMLTextAreaElement).value = asset.HW사양 || '';
|
||||
(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.용도 || asset.storage유형 || '';
|
||||
(document.getElementById('hw-상세') as HTMLInputElement).value = asset.상세 || '';
|
||||
(document.getElementById('hw-원격접속') as HTMLInputElement).value = asset.원격접속 || '';
|
||||
(document.getElementById('hw-서버ID') as HTMLInputElement).value = asset.서버ID || '';
|
||||
(document.getElementById('hw-서버PW') as HTMLInputElement).value = asset.서버PW || '';
|
||||
(document.getElementById('hw-비고') as HTMLInputElement).value = asset.비고 || '';
|
||||
(document.getElementById('hw-품의서명') as HTMLElement).innerText = asset.품의서명 ? `📎${asset.품의서명}` : '';
|
||||
|
||||
if (currentType === '전산비품') {
|
||||
(document.getElementById('hw-비품유형') as HTMLSelectElement).value = asset.비품유형 || '노트북';
|
||||
}
|
||||
} else {
|
||||
document.getElementById('hw-modal-title')!.textContent = `새 ${currentType} 자산 추가`;
|
||||
deleteBtn.style.display = 'none';
|
||||
btnSaveHw.textContent = '저장';
|
||||
setFormReadOnly(hwForm, false); // 신규 등록 시 편집 가능 상태
|
||||
|
||||
(document.getElementById('hw-asset-id') as HTMLInputElement).value = '';
|
||||
(document.getElementById('hw-asset-type') as HTMLInputElement).value = currentType;
|
||||
(document.getElementById('hw-품의서명') as HTMLElement).innerText = '';
|
||||
}
|
||||
|
||||
document.getElementById('hw-비품유형-group')!.style.display = (currentType === '전산비품') ? 'block' : 'none';
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user