284 lines
13 KiB
TypeScript
284 lines
13 KiB
TypeScript
import { createIcons, BookOpen, X, ChevronDown, ChevronRight, RefreshCw } from 'lucide';
|
|
import { state } from '../core/state';
|
|
|
|
// ─── 자산별 가이드 콘텐츠 정의 (SW_Table 브랜치 전체 복구) ───
|
|
interface GuideTabConfig {
|
|
id: string;
|
|
label: string;
|
|
content: string;
|
|
}
|
|
|
|
const GUIDE_TABS: GuideTabConfig[] = [
|
|
{
|
|
id: 'overview',
|
|
label: '📋 개요',
|
|
content: `
|
|
<section class="guide-section">
|
|
<h3>IT 자산관리 시스템 개요</h3>
|
|
<p class="guide-text">
|
|
HM IT 자산관리 시스템(ITAM)은 기업의 IT 자산을 <strong>도입부터 폐기까지</strong> 전 과정에서 효율적으로 관리하기 위한 통합 플랫폼입니다.<br>
|
|
하드웨어(PC, 서버, 스토리지, 전산비품, 모바일기기)와 소프트웨어(구독SW, 영구SW, 클라우드)를 체계적으로 추적하고 유지보수합니다.
|
|
</p>
|
|
</section>
|
|
|
|
<section class="guide-section">
|
|
<h3>전체 자산관리 프로세스</h3>
|
|
<div class="flow-container">
|
|
<div class="flow-row">
|
|
<div class="flow-step">
|
|
<span class="step-number">1</span>
|
|
<div><span class="step-label">도입/구매</span><p class="step-desc">자산 구매 요청 → 승인 → 발주</p></div>
|
|
</div>
|
|
<span class="flow-arrow-right"><i data-lucide="chevron-right"></i></span>
|
|
<div class="flow-step">
|
|
<span class="step-number">2</span>
|
|
<div><span class="step-label">등록/배정</span><p class="step-desc">자산번호 부여 → 시스템 등록 → 사용자 할당</p></div>
|
|
</div>
|
|
<span class="flow-arrow-right"><i data-lucide="chevron-right"></i></span>
|
|
<div class="flow-step">
|
|
<span class="step-number">3</span>
|
|
<div><span class="step-label">운영/유지</span><p class="step-desc">현황 모니터링 → 점검/수리 → 이력 관리</p></div>
|
|
</div>
|
|
<span class="flow-arrow-right"><i data-lucide="chevron-right"></i></span>
|
|
<div class="flow-step">
|
|
<span class="step-number">4</span>
|
|
<div><span class="step-label">반납/폐기</span><p class="step-desc">자산 회수 → 데이터 소거 → 폐기 처리</p></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="guide-section">
|
|
<h3>시스템 기본 사용방법</h3>
|
|
<table class="guide-info-table">
|
|
<thead><tr><th>기능</th><th>방법</th></tr></thead>
|
|
<tbody>
|
|
<tr><td><strong>자산 조회</strong></td><td>상단 카테고리(하드웨어/소프트웨어) 및 하위 탭 선택 후 데이터 조회</td></tr>
|
|
<tr><td><strong>자산 등록</strong></td><td>[자산 추가] 버튼 클릭 후 상세 정보 입력 및 저장</td></tr>
|
|
<tr><td><strong>정보 수정</strong></td><td>목록 행 클릭 후 나타나는 모달에서 내용 변경 및 저장</td></tr>
|
|
<tr><td><strong>엑셀 업로드</strong></td><td>[업로드] 버튼 선택 후 표준 양식의 .xlsx 파일 선택</td></tr>
|
|
<tr><td><strong>전체 엑셀저장</strong></td><td>[엑셀저장] 버튼 클릭 시 현재 전체 자산 데이터를 Excel로 백업</td></tr>
|
|
<tr><td><strong>표준 양식</strong></td><td>[양식] 버튼 클릭 시 데이터 업로드용 빈 양식 다운로드</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</section>
|
|
`
|
|
},
|
|
{
|
|
id: 'pc',
|
|
label: '💻 개인PC',
|
|
content: `
|
|
<section class="guide-section">
|
|
<h3>개인PC 관리 가이드</h3>
|
|
<p class="guide-text">
|
|
임직원에게 지급되는 데스크톱 및 노트북을 관리합니다. 자산의 지급, 교체, 반납까지의 전체 생애주기를 시스템에서 추적합니다.
|
|
</p>
|
|
</section>
|
|
|
|
<section class="guide-section">
|
|
<h3>관리 프로세스</h3>
|
|
<div class="flow-container">
|
|
<div class="flow-row">
|
|
<div class="flow-step">
|
|
<span class="step-number">1</span>
|
|
<div><span class="step-label">구매 및 입고</span><p class="step-desc">구매 요청 → 발주 → 입고 검수</p></div>
|
|
</div>
|
|
<span class="flow-arrow-right"><i data-lucide="chevron-right"></i></span>
|
|
<div class="flow-step">
|
|
<span class="step-number">2</span>
|
|
<div><span class="step-label">자산 등록</span><p class="step-desc">자산번호 부여, 상세 사양 등록</p></div>
|
|
</div>
|
|
</div>
|
|
<i data-lucide="chevron-down" class="flow-arrow"></i>
|
|
<div class="flow-row">
|
|
<div class="flow-step">
|
|
<span class="step-number">3</span>
|
|
<div><span class="step-label">사용자 지급</span><p class="step-desc">사용자 지정 및 설치위치 기록</p></div>
|
|
</div>
|
|
<span class="flow-arrow-right"><i data-lucide="chevron-right"></i></span>
|
|
<div class="flow-step">
|
|
<span class="step-number">4</span>
|
|
<div><span class="step-label">운영 관리</span><p class="step-desc">보안 점검 및 수리 이력 관리</p></div>
|
|
</div>
|
|
</div>
|
|
<i data-lucide="chevron-down" class="flow-arrow"></i>
|
|
<div class="flow-row">
|
|
<div class="flow-step">
|
|
<span class="step-number">5</span>
|
|
<div><span class="step-label">교체/반납</span><p class="step-desc">장비 회수 및 데이터 소거</p></div>
|
|
</div>
|
|
<span class="flow-arrow-right"><i data-lucide="chevron-right"></i></span>
|
|
<div class="flow-step">
|
|
<span class="step-number">6</span>
|
|
<div><span class="step-label">폐기 처리</span><p class="step-desc">불용 처리 및 매각/폐기 등록</p></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="guide-section">
|
|
<h3>주요 관리 항목</h3>
|
|
<table class="guide-info-table">
|
|
<thead><tr><th>항목</th><th>설명</th><th>관리 주기</th></tr></thead>
|
|
<tbody>
|
|
<tr><td>구매법인</td><td>자산의 소유 법인</td><td>등록 시</td></tr>
|
|
<tr><td>사용자/조직</td><td>실제 사용자 및 소속 부서</td><td>변동 시</td></tr>
|
|
<tr><td>자산번호</td><td>고유 식별 번호 (바코드)</td><td>등록 시</td></tr>
|
|
<tr><td>모델명/사양</td><td>제조사 모델 및 CPU/RAM 등</td><td>등록 시</td></tr>
|
|
<tr><td>도입금액</td><td>구매 비용 (부가세 포함)</td><td>등록 시</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</section>
|
|
|
|
<div class="guide-tip">
|
|
<strong>관리 팁:</strong> 자산 이력에서 '분출'과 '반납' 로그를 꼼꼼히 기록하면 자산의 실제 위치를 정확히 파악할 수 있습니다.
|
|
</div>
|
|
`
|
|
},
|
|
{
|
|
id: 'server',
|
|
label: '🖥️ 서버/스토리지',
|
|
content: `
|
|
<section class="guide-section">
|
|
<h3>인프라 자산 관리 가이드</h3>
|
|
<p class="guide-text">
|
|
서버실 및 IDC에 설치된 물리 서버와 스토리지 장비를 관리합니다. 고가의 자산이므로 담당자(정/부) 지정이 필수입니다.
|
|
</p>
|
|
</section>
|
|
|
|
<section class="guide-section">
|
|
<h3>관리 프로세스</h3>
|
|
<div class="flow-container">
|
|
<div class="flow-row">
|
|
<div class="flow-step">
|
|
<span class="step-number">1</span>
|
|
<div><span class="step-label">도입 계획</span><p class="step-desc">사양 확정 및 구매 승인</p></div>
|
|
</div>
|
|
<span class="flow-arrow-right"><i data-lucide="chevron-right"></i></span>
|
|
<div class="flow-step">
|
|
<span class="step-number">2</span>
|
|
<div><span class="step-label">설치 및 등록</span><p class="step-desc">네트워크 설정 및 자산번호 부여</p></div>
|
|
</div>
|
|
<span class="flow-arrow-right"><i data-lucide="chevron-right"></i></span>
|
|
<div class="flow-step">
|
|
<span class="step-number">3</span>
|
|
<div><span class="step-label">운영 관리</span><p class="step-desc">정기 점검 및 장애 이력 관리</p></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="guide-section">
|
|
<h3>필수 입력 항목</h3>
|
|
<table class="guide-info-table">
|
|
<thead><tr><th>항목</th><th>중요성</th></tr></thead>
|
|
<tbody>
|
|
<tr><td><strong>IP 주소</strong></td><td>서버 접속 및 모니터링을 위한 필수 정보</td></tr>
|
|
<tr><td><strong>설치위치</strong></td><td>IDC 또는 서버실 내의 정확한 랙 위치</td></tr>
|
|
<tr><td><strong>담당자(정/부)</strong></td><td>비상 시 연락 가능한 관리 책임자</td></tr>
|
|
<tr><td><strong>용도/상세</strong></td><td>운영 중인 서비스 및 상세 업무 설명</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</section>
|
|
|
|
<div class="guide-warn">
|
|
<strong>주의 사항:</strong> 서버 자산의 IP가 변경될 경우 시스템에 즉시 반영하여 네트워크 관리 대장과의 정합성을 유지해야 합니다.
|
|
</div>
|
|
`
|
|
},
|
|
{
|
|
id: 'software',
|
|
label: '💾 소프트웨어',
|
|
content: `
|
|
<section class="guide-section">
|
|
<h3>소프트웨어 자산 관리 가이드</h3>
|
|
<p class="guide-text">
|
|
구독형(SaaS) 및 영구형 라이선스를 관리합니다. 불법 소프트웨어 사용 방지와 비용 최적화가 주 목적입니다.
|
|
</p>
|
|
</section>
|
|
|
|
<section class="guide-section">
|
|
<h3>라이선스 관리 포인트</h3>
|
|
<table class="guide-info-table">
|
|
<thead><tr><th>구분</th><th>관리 내용</th></tr></thead>
|
|
<tbody>
|
|
<tr><td><strong>구독형(Sub)</strong></td><td>구독 만료일 도래 전 갱신 여부 결정 및 비용 정산</td></tr>
|
|
<tr><td><strong>영구형(Perm)</strong></td><td>보유 수량 대비 실제 설치 수량 매핑 (초과 사용 금지)</td></tr>
|
|
<tr><td><strong>운영서비스</strong></td><td>도메인, 메일 등 매월 또는 매년 발생하는 비용 추적</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</section>
|
|
|
|
<div class="guide-tip">
|
|
<strong>팁:</strong> 소프트웨어 상세 페이지의 [사용자 할당] 기능을 활용하여 누가 어떤 라이선스를 사용하는지 체계적으로 관리하세요.
|
|
</div>
|
|
`
|
|
}
|
|
];
|
|
|
|
// ─── 가이드 모달 초기화 ───
|
|
export function initGuide() {
|
|
const body = document.body;
|
|
if (document.getElementById('guide-overlay')) return;
|
|
|
|
const overlay = document.createElement('div');
|
|
overlay.className = 'modal-overlay hidden';
|
|
overlay.id = 'guide-overlay';
|
|
|
|
const tabsHtml = GUIDE_TABS.map((tab, i) =>
|
|
`<div class="guide-tab ${i === 0 ? 'active' : ''}" data-guide-tab="${tab.id}">${tab.label}</div>`
|
|
).join('');
|
|
|
|
const panelsHtml = GUIDE_TABS.map((tab, i) =>
|
|
`<div class="guide-tab-panel ${i === 0 ? 'active' : ''}" data-guide-panel="${tab.id}">${tab.content}</div>`
|
|
).join('');
|
|
|
|
overlay.innerHTML = `
|
|
<div class="modal-content wide" id="guide-modal" style="height: 90vh;">
|
|
<div class="modal-header">
|
|
<h2><i data-lucide="book-open"></i> 자산관리 프로세스 가이드 (Standard)</h2>
|
|
<button class="btn-icon" id="btn-close-guide">
|
|
<i data-lucide="x"></i>
|
|
</button>
|
|
</div>
|
|
<div class="guide-tabs-container">
|
|
<div class="guide-tabs">${tabsHtml}</div>
|
|
</div>
|
|
<div class="modal-body" style="padding-top: 0;">
|
|
<div class="guide-body">${panelsHtml}</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
body.appendChild(overlay);
|
|
|
|
const openGuide = () => {
|
|
console.log('📖 Opening Full Guide Modal...');
|
|
overlay.classList.remove('hidden');
|
|
};
|
|
const closeGuide = () => overlay.classList.add('hidden');
|
|
|
|
const triggerBtn = document.getElementById('btn-open-guide-header');
|
|
if (triggerBtn) {
|
|
triggerBtn.addEventListener('click', openGuide);
|
|
}
|
|
|
|
overlay.addEventListener('click', (e) => { if (e.target === overlay) closeGuide(); });
|
|
document.getElementById('btn-close-guide')?.addEventListener('click', closeGuide);
|
|
|
|
const tabs = overlay.querySelectorAll('.guide-tab');
|
|
const panels = overlay.querySelectorAll('.guide-tab-panel');
|
|
|
|
tabs.forEach(tab => {
|
|
tab.addEventListener('click', () => {
|
|
const targetId = tab.getAttribute('data-guide-tab');
|
|
tabs.forEach(t => t.classList.remove('active'));
|
|
panels.forEach(p => p.classList.remove('active'));
|
|
tab.classList.add('active');
|
|
overlay.querySelector(`.guide-tab-panel[data-guide-panel="${targetId}"]`)?.classList.add('active');
|
|
});
|
|
});
|
|
|
|
createIcons({ icons: { BookOpen, X, ChevronDown, ChevronRight, RefreshCw } });
|
|
}
|