feat: implement unified schema mapper, enhance UI/UX with responsive design, and optimize asset log logic

src/components/Guide.ts

@@ -1,6 +1,7 @@
 import { createIcons, BookOpen, X, ChevronDown, ChevronRight, RefreshCw } from 'lucide';
+import { state } from '../core/state';
 
-// ─── 자산별 가이드 콘텐츠 정의 ───
+// ─── 자산별 가이드 콘텐츠 정의 (SW_Table 브랜치 전체 복구) ───
 interface GuideTabConfig {
   id: string;
   label: string;
@@ -46,6 +47,21 @@ const GUIDE_TABS: GuideTabConfig[] = [
           </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>
     `
   },
   {
@@ -55,7 +71,7 @@ const GUIDE_TABS: GuideTabConfig[] = [
       <section class="guide-section">
         <h3>개인PC 관리 가이드</h3>
         <p class="guide-text">
-          개인PC는 임직원에게 지급되는 데스크톱 및 노트북을 관리합니다. 자산의 지급, 교체, 반납까지의 전체 생애주기를 시스템에서 추적합니다.
+          임직원에게 지급되는 데스크톱 및 노트북을 관리합니다. 자산의 지급, 교체, 반납까지의 전체 생애주기를 시스템에서 추적합니다.
         </p>
       </section>
 
@@ -70,33 +86,63 @@ const GUIDE_TABS: GuideTabConfig[] = [
             <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">자산코드 부여, 사양(CPU/RAM/Storage) 등록</p></div>
+              <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="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">OS 업데이트, 보안 점검, 품의서 관리</p></div>
+              <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: '🖥️ 서버',
+    label: '🖥️ 서버/스토리지',
     content: `
       <section class="guide-section">
-        <h3>서버 관리 가이드</h3>
+        <h3>인프라 자산 관리 가이드</h3>
         <p class="guide-text">
-          물리 서버와 가상 서버를 포함한 서버급 자산을 관리합니다. 안정적인 서비스 운영을 위해 체계적인 관리가 필요합니다.
+          서버실 및 IDC에 설치된 물리 서버와 스토리지 장비를 관리합니다. 고가의 자산이므로 담당자(정/부) 지정이 필수입니다.
         </p>
       </section>
 
@@ -106,21 +152,66 @@ const GUIDE_TABS: GuideTabConfig[] = [
           <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="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="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="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>
     `
   }
 ];
@@ -131,7 +222,7 @@ export function initGuide() {
   if (document.getElementById('guide-overlay')) return;
 
   const overlay = document.createElement('div');
-  overlay.className = 'guide-overlay';
+  overlay.className = 'modal-overlay hidden';
   overlay.id = 'guide-overlay';
 
   const tabsHtml = GUIDE_TABS.map((tab, i) =>
@@ -143,32 +234,33 @@ export function initGuide() {
   ).join('');
 
   overlay.innerHTML = `
-    <div class="guide-modal" id="guide-modal">
-      <div class="guide-header">
-        <h2><i data-lucide="book-open"></i> IT 자산관리 프로세스 가이드</h2>
-        <button class="btn-close-guide" id="btn-close-guide">
+    <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">${tabsHtml}</div>
-      <div class="guide-body">${panelsHtml}</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 Guide Modal...');
-    overlay.classList.add('active');
+    console.log('📖 Opening Full Guide Modal...');
+    overlay.classList.remove('hidden');
   };
-  const closeGuide = () => overlay.classList.remove('active');
+  const closeGuide = () => overlay.classList.add('hidden');
 
   const triggerBtn = document.getElementById('btn-open-guide-header');
   if (triggerBtn) {
-    console.log('✅ Guide trigger button found and bound.');
     triggerBtn.addEventListener('click', openGuide);
-  } else {
-    console.warn('⚠️ Guide trigger button (#btn-open-guide-header) not found in DOM.');
   }
 
   overlay.addEventListener('click', (e) => { if (e.target === overlay) closeGuide(); });
@@ -187,5 +279,5 @@ export function initGuide() {
     });
   });
 
-  createIcons({ icons: { BookOpen, X, ChevronDown, ChevronRight, RefreshCw }, nameAttr: 'data-lucide' });
+  createIcons({ icons: { BookOpen, X, ChevronDown, ChevronRight, RefreshCw } });
 }