refactor: 프로젝트 구조 최적화 및 컴포넌트 기반 모달 시스템 도입

주요 정리 내용:
- 핵심 엔진 분리: state, excelHandler 등을 src/core/ 디렉토리로 격리
- 모달 컴포넌트화: index.html의 거대 HTML 구조를 각 모달 TS 파일로 내장 및 동적 주입
- index.html 최적화: 수백 줄의 중복 코드를 제거하여 슬림한 Shell 구조로 변환
- 전역 복구: 병합 과정에서 발생한 한글 인코딩 깨짐 전수 복구 및 빌드 오류 해결
- 경로 정합성: 파일 구조 변경에 따른 모든 import 경로 일괄 업데이트

src/components/Modal/HWModal.ts

@@ -1,14 +1,164 @@
-import { state } from '../../state';
-import { HardwareAsset } from '../../excelHandler';
+import { state } from '../../core/state';
+import { HardwareAsset } from '../../core/excelHandler';
 import { renderTable } from '../../views/AssetTableView';
 import { createIcons, Paperclip } from 'lucide';
 
 let currentAsset: HardwareAsset | null = null;
 let isEditMode = false;
 
+const HW_MODAL_HTML = `
+  <div id="hw-asset-modal" class="modal-overlay hidden">
+    <div class="modal-content wide">
+      <div class="modal-header">
+        <h2 id="hw-modal-title">자산 상세 정보</h2>
+        <button id="btn-close-hw-modal" class="btn-icon" aria-label="닫기"><i data-lucide="x"></i></button>
+      </div>
+      <div class="modal-body">
+        <form id="hw-asset-form" class="grid-form">
+          <input type="hidden" id="hw-asset-id" />
+          <input type="hidden" id="hw-asset-type" />
+
+          <!-- Group 1: 기본 정보 -->
+          <div class="form-section-title">기본 정보 (Identity)</div>
+          <div class="form-group">
+            <label for="hw-법인">법인</label>
+            <input type="text" id="hw-법인" required />
+          </div>
+          <div class="form-group">
+            <label for="hw-자산코드">자산번호/코드</label>
+            <input type="text" id="hw-자산코드" required />
+          </div>
+          <div class="form-group server-only">
+            <label for="hw-용도">용도</label>
+            <input type="text" id="hw-용도" />
+          </div>
+          <div class="form-group server-only">
+            <label for="hw-상세">상세 내용</label>
+            <input type="text" id="hw-상세" />
+          </div>
+          <div class="form-group non-server">
+            <label for="hw-명칭">명칭</label>
+            <input type="text" id="hw-명칭" />
+          </div>
+          <div class="form-group full-width server-only">
+            <label for="hw-비고">비고</label>
+            <input type="text" id="hw-비고" />
+          </div>
+
+          <!-- Group 2: 네트워크 정보 -->
+          <div class="form-section-title server-only">네트워크 정보 (Connectivity)</div>
+          <div class="form-group server-only">
+            <label for="hw-IP주소">IP 주소 1</label>
+            <input type="text" id="hw-IP주소" />
+          </div>
+          <div class="form-group server-only">
+            <label for="hw-IP2">IP 주소 2</label>
+            <input type="text" id="hw-IP2" />
+          </div>
+          <div class="form-group server-only">
+            <label for="hw-원격접속">원격 도구 (Anydesk/Chrome 등)</label>
+            <input type="text" id="hw-원격접속" />
+          </div>
+          <div class="form-group server-only">
+            <label for="hw-서버ID">서버 ID</label>
+            <input type="text" id="hw-서버ID" />
+          </div>
+          <div class="form-group server-only">
+            <label for="hw-서버PW">서버 PW</label>
+            <input type="text" id="hw-서버PW" />
+          </div>
+          <div class="form-group non-server" id="hw-IP주소-group">
+            <label for="hw-IP주소-non-server">IP 주소</label>
+            <input type="text" id="hw-IP주소-non-server" />
+          </div>
+
+          <!-- Group 3: 시스템 사양 -->
+          <div class="form-section-title">시스템 사양 (Specifications)</div>
+          <div class="form-group">
+            <label for="hw-모델명">모델명</label>
+            <input type="text" id="hw-모델명" />
+          </div>
+          <div class="form-group">
+            <label for="hw-OS">운영체제 (OS)</label>
+            <input type="text" id="hw-OS" />
+          </div>
+          <div class="form-group">
+            <label for="hw-CPU">CPU 사양</label>
+            <input type="text" id="hw-CPU" />
+          </div>
+          <div class="form-group">
+            <label for="hw-RAM">RAM 용량</label>
+            <input type="text" id="hw-RAM" />
+          </div>
+          <div class="form-group">
+            <label for="hw-SSD1">Storage 1 (SSD/HDD)</label>
+            <input type="text" id="hw-SSD1" />
+          </div>
+          <div class="form-group">
+            <label for="hw-SSD2">Storage 2 (SSD/HDD)</label>
+            <input type="text" id="hw-SSD2" />
+          </div>
+          <div class="form-group server-only">
+            <label for="hw-모니터링">모니터링 여부</label>
+            <input type="text" id="hw-모니터링" />
+          </div>
+          <div class="form-group" id="hw-비품유형-group" style="display:none;">
+            <label for="hw-비품유형">비품유형</label>
+            <select id="hw-비품유형">
+              <option value="노트북">노트북</option><option value="태블릿">태블릿</option><option value="휴대폰">휴대폰</option>
+            </select>
+          </div>
+          <div class="form-group full-width non-server">
+            <label for="hw-HW사양">H/W 사양 상세</label>
+            <textarea id="hw-HW사양" rows="2"></textarea>
+          </div>
+
+          <!-- Group 4: 관리 및 운영 -->
+          <div class="form-section-title">관리 및 운영 (Operation)</div>
+          <div class="form-group">
+            <label for="hw-위치">설치위치</label>
+            <input type="text" id="hw-위치" />
+          </div>
+          <div class="form-group">
+            <label for="hw-담당자_정">담당자 (정)</label>
+            <input type="text" id="hw-담당자_정" />
+          </div>
+          <div class="form-group">
+            <label for="hw-담당자_부">담당자 (부)</label>
+            <input type="text" id="hw-담당자_부" />
+          </div>
+          <div class="form-group non-server">
+            <label for="hw-구매일">구매일</label>
+            <input type="text" id="hw-구매일" />
+          </div>
+          <div class="form-group non-server">
+            <label for="hw-금액">금액</label>
+            <input type="text" id="hw-금액" oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/\\B(?=(\\d{3})+(?!\d))/g, ',')" />
+          </div>
+          <div class="form-group full-width">
+            <label>품의서 (파일 증빙)</label>
+            <div style="display:flex; align-items:center; gap:0.5rem;">
+              <input type="file" id="hw-품의서" />
+              <span id="hw-품의서명" style="font-size:0.75rem; color:var(--text-light)"></span>
+            </div>
+          </div>
+        </form>
+      </div>
+      <div class="modal-footer">
+        <button id="btn-delete-hw-asset" class="btn btn-outline btn-danger">삭제</button>
+        <div class="footer-actions">
+          <button id="btn-revert-hw-edit" class="btn btn-outline hidden">수정 취소</button>
+          <button id="btn-cancel-hw-modal" class="btn btn-outline">닫기</button>
+          <button id="btn-save-hw-asset" class="btn btn-primary">수정</button>
+        </div>
+      </div>
+    </div>
+  </div>
+`;
+
 export function openHwModal(asset: HardwareAsset) {
   currentAsset = asset;
-  isEditMode = false; // 항상 조회 모드로 시작
+  isEditMode = false; 
   
   const modal = document.getElementById('hw-asset-modal')!;
   const form = document.getElementById('hw-asset-form') as HTMLFormElement;
@@ -19,18 +169,14 @@ export function openHwModal(asset: HardwareAsset) {
   form.classList.remove('is-edit-mode');
   form.classList.add('is-view-mode');
   saveBtn.textContent = '수정'; 
-  revertBtn.classList.add('hidden'); // 조회 모드에서는 숨김
+  revertBtn.classList.add('hidden'); 
   
-  // 데이터 채우기 함수 호출 (수정 취소 시에도 재사용)
   fillHwFormData(asset);
 
   modal.classList.remove('hidden');
   createIcons({ icons: { Paperclip } });
 }
 
-/**
- * 폼 필드에 자산 데이터 채우기
- */
 function fillHwFormData(asset: HardwareAsset) {
   (document.getElementById('hw-asset-id') as HTMLInputElement).value = asset.id;
   (document.getElementById('hw-asset-type') as HTMLInputElement).value = asset.type;
@@ -85,6 +231,11 @@ function fillHwFormData(asset: HardwareAsset) {
 }
 
 export function initHwModal() {
+  // HTML 주입
+  if (!document.getElementById('hw-asset-modal')) {
+    document.body.insertAdjacentHTML('beforeend', HW_MODAL_HTML);
+  }
+
   const modal = document.getElementById('hw-asset-modal')!;
   const form = document.getElementById('hw-asset-form') as HTMLFormElement;
   const closeBtn = document.getElementById('btn-close-hw-modal')!;
@@ -104,20 +255,13 @@ export function initHwModal() {
     form.classList.add('is-view-mode');
     saveBtn.textContent = '수정';
     revertBtn.classList.add('hidden');
-    if (currentAsset) fillHwFormData(currentAsset); // 원래 데이터로 복구
+    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();
-  });
+  modal.addEventListener('click', (e) => { if (e.target === modal) closeModal(); });
+  revertBtn.addEventListener('click', () => { switchToViewMode(); });
 
   saveBtn.addEventListener('click', () => {
     if (!currentAsset) return;
@@ -127,11 +271,10 @@ export function initHwModal() {
       form.classList.remove('is-view-mode');
       form.classList.add('is-edit-mode');
       saveBtn.textContent = '저장';
-      revertBtn.classList.remove('hidden'); // 수정 모드에서 취소 버튼 표시
+      revertBtn.classList.remove('hidden'); 
       return;
     }
     
-    // 실제 저장 로직
     const assetId = (document.getElementById('hw-asset-id') as HTMLInputElement).value;
     const type = (document.getElementById('hw-asset-type') as HTMLInputElement).value;
     
@@ -177,7 +320,7 @@ export function initHwModal() {
     if (idx > -1) {
       state.masterData.hw[idx] = updated;
       renderTable(document.getElementById('main-content')!);
-      switchToViewMode(); // 저장 후 다시 조회 모드로
+      switchToViewMode(); 
     }
   });