주요 정리 내용: - 핵심 엔진 분리: state, excelHandler 등을 src/core/ 디렉토리로 격리 - 모달 컴포넌트화: index.html의 거대 HTML 구조를 각 모달 TS 파일로 내장 및 동적 주입 - index.html 최적화: 수백 줄의 중복 코드를 제거하여 슬림한 Shell 구조로 변환 - 전역 복구: 병합 과정에서 발생한 한글 인코딩 깨짐 전수 복구 및 빌드 오류 해결 - 경로 정합성: 파일 구조 변경에 따른 모든 import 경로 일괄 업데이트
90 lines
3.6 KiB
TypeScript
90 lines
3.6 KiB
TypeScript
import { state } from './core/state';
|
|
import { renderSidebar } from './components/Sidebar';
|
|
import { renderDashboard } from './views/DashboardView';
|
|
import { renderTable } from './views/AssetTableView';
|
|
import { downloadTemplate, exportToExcel, parseExcel, HardwareAsset } from './core/excelHandler';
|
|
import { initPcModal } from './components/Modal/PCModal';
|
|
import { initHwModal, openHwModal } from './components/Modal/HWModal';
|
|
import { initStorageModal } from './components/Modal/StorageModal';
|
|
import { initSwModal } from './components/Modal/SWModal';
|
|
import { initSwUserModal } from './components/Modal/SWUserModal';
|
|
import { initDashboardDetailModal } from './components/Modal/DashboardDetailModal';
|
|
import { createIcons, Download, Upload, FileSpreadsheet, Plus, X, LayoutDashboard, Monitor, Server, Database, Laptop, CalendarClock, Key, Cpu, Layers, Users, Paperclip, Edit2, History, RefreshCcw } from 'lucide';
|
|
|
|
// --- App Initialization ---
|
|
function initApp() {
|
|
const mainContent = document.getElementById('main-content')!;
|
|
if (!mainContent) return;
|
|
|
|
// 1. 초기 뷰 렌더링 (대시보드)
|
|
renderDashboard(mainContent);
|
|
|
|
// 2. 사이드바 초기화
|
|
renderSidebar((tab) => {
|
|
if (tab === '대시보드') {
|
|
renderDashboard(mainContent);
|
|
document.getElementById('btn-add-asset')?.classList.add('hidden');
|
|
} else {
|
|
renderTable(mainContent);
|
|
document.getElementById('btn-add-asset')?.classList.remove('hidden');
|
|
}
|
|
// 상단 타이틀 업데이트
|
|
const titleEl = document.getElementById('current-tab-title')!;
|
|
if (titleEl) {
|
|
const catName = state.activeCategory === 'hw' ? '하드웨어' : '소프트웨어';
|
|
titleEl.textContent = `${catName} / ${state.activeSubTab}`;
|
|
}
|
|
});
|
|
|
|
// 3. 모달 초기화 (HTML 주입 및 이벤트 바인딩)
|
|
initPcModal(() => renderTable(mainContent), () => {});
|
|
initHwModal();
|
|
initStorageModal(() => renderTable(mainContent), () => {});
|
|
initSwModal(() => renderTable(mainContent), () => {});
|
|
initSwUserModal(() => renderTable(mainContent), () => {});
|
|
initDashboardDetailModal();
|
|
|
|
// 4. 전역 버튼 이벤트 바인딩
|
|
document.getElementById('btn-download-template')?.addEventListener('click', () => downloadTemplate());
|
|
document.getElementById('btn-export-excel')?.addEventListener('click', () => exportToExcel(state.masterData));
|
|
|
|
const uploadInput = document.getElementById('excel-upload') as HTMLInputElement;
|
|
uploadInput?.addEventListener('change', async (e) => {
|
|
const file = (e.target as HTMLInputElement).files?.[0];
|
|
if (file) {
|
|
const data = await parseExcel(file);
|
|
state.masterData = data;
|
|
renderTable(mainContent);
|
|
}
|
|
});
|
|
|
|
document.getElementById('btn-add-asset')?.addEventListener('click', () => {
|
|
if (state.activeSubTab === '서버' || state.activeSubTab === '전산비품' || state.activeSubTab === '스토리지') {
|
|
const newAsset: HardwareAsset = {
|
|
id: Math.random().toString(36).substring(2, 9),
|
|
type: state.activeSubTab,
|
|
법인: '한맥',
|
|
자산코드: '',
|
|
명칭: '',
|
|
위치: '',
|
|
관리자: '',
|
|
IP주소: '',
|
|
MACaddress: '',
|
|
HW사양: '',
|
|
OS: '',
|
|
납품업체: '',
|
|
품의서명: ''
|
|
};
|
|
openHwModal(newAsset);
|
|
}
|
|
});
|
|
|
|
// 전역 아이콘 초기화
|
|
createIcons({
|
|
icons: { Download, Upload, FileSpreadsheet, Plus, X, LayoutDashboard, Monitor, Server, Database, Laptop, CalendarClock, Key, Cpu, Layers, Users, Paperclip, Edit2, History, RefreshCcw }
|
|
});
|
|
}
|
|
|
|
// Start the app
|
|
document.addEventListener('DOMContentLoaded', initApp);
|