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

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

src/components/Modal/PCModal.ts

@@ -1,23 +1,143 @@
-import { state } from '../../state';
-import { HardwareAsset, HardwareLog } from '../../excelHandler';
+import { state } from '../../core/state';
+import { HardwareAsset, HardwareLog } from '../../core/excelHandler';
 import { openModal } from './BaseModal';
 
-/**
- * 개인PC 모달 초기화 및 로직 제어
- */
+const PC_MODAL_HTML = `
+  <div id="pc-asset-modal" class="modal-overlay hidden">
+    <div class="modal-content wide">
+      <div class="modal-header">
+        <h2 id="pc-modal-title">개인PC 상세 정보</h2>
+        <button id="btn-close-pc-modal" class="btn-icon" aria-label="닫기"><i data-lucide="x"></i></button>
+      </div>
+      <div class="modal-body">
+        <div class="modal-body-split">
+          <div class="modal-form-area">
+            <form id="pc-asset-form" class="grid-form">
+              <input type="hidden" id="pc-asset-id" />
+              <input type="hidden" id="pc-asset-type" value="개인PC" />
+              <div class="form-group">
+                <label for="pc-법인">법인</label>
+                <select id="pc-법인" required>
+                  <option value="한맥">한맥 (HM)</option><option value="삼안">삼안 (SM)</option><option value="바론">바론 (BR)</option>
+                </select>
+              </div>
+              
+              <div class="form-group">
+                <label for="pc-자산코드">자산코드</label>
+                <input type="text" id="pc-자산코드" placeholder="ex) HM-PC-2018-001" required />
+              </div>
+              
+              <div class="form-group">
+                <label for="pc-사용자">사용자</label>
+                <input type="text" id="pc-사용자" required />
+              </div>
+              
+              <div class="form-group">
+                <label for="pc-위치">위치</label>
+                <input type="text" id="pc-위치" />
+              </div>
+
+              <div class="form-group">
+                <label for="pc-CPU">CPU</label>
+                <input type="text" id="pc-CPU" />
+              </div>
+
+              <div class="form-group">
+                <label for="pc-GPU">GPU</label>
+                <input type="text" id="pc-GPU" />
+              </div>
+
+              <div class="form-group">
+                <label for="pc-RAM">RAM</label>
+                <input type="text" id="pc-RAM" />
+              </div>
+
+              <div class="form-group">
+                <label for="pc-SSD1">SSD1</label>
+                <input type="text" id="pc-SSD1" />
+              </div>
+
+              <div class="form-group">
+                <label for="pc-SSD2">SSD2</label>
+                <input type="text" id="pc-SSD2" />
+              </div>
+
+              <div class="form-group">
+                <label for="pc-HDD1">HDD1</label>
+                <input type="text" id="pc-HDD1" />
+              </div>
+
+              <div class="form-group">
+                <label for="pc-HDD2">HDD2</label>
+                <input type="text" id="pc-HDD2" />
+              </div>
+
+              <div class="form-group">
+                <label for="pc-구매일">구매일</label>
+                <input type="text" id="pc-구매일" placeholder="ex) 2024-01-01" />
+              </div>
+
+              <div class="form-group">
+                <label for="pc-금액">금액</label>
+                <input type="text" id="pc-금액" placeholder="ex) 1,000,000" oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/\\B(?=(\\d{3})+(?!\d))/g, ',')" />
+              </div>
+
+              <div class="form-group">
+                <label for="pc-납품업체">납품업체</label>
+                <input type="text" id="pc-납품업체" />
+              </div>
+
+              <div class="form-group full-width">
+                <label>품의서 (파일)</label>
+                <div style="display:flex; align-items:center; gap:0.5rem;">
+                  <input type="file" id="pc-품의서" />
+                  <span id="pc-품의서명" style="font-size:0.75rem; color:var(--text-light)"></span>
+                </div>
+              </div>
+            </form>
+          </div>
+          <div class="modal-history-area">
+            <div class="history-header">
+              <h3><i data-lucide="history" style="width:16px; height:16px;"></i> 수정 이력</h3>
+            </div>
+            <div id="pc-history-list" class="history-timeline">
+              <div class="empty-history">이력이 없습니다.</div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="modal-footer">
+        <button id="btn-delete-pc-asset" class="btn btn-outline btn-danger">삭제</button>
+        <div class="footer-actions">
+          <button id="btn-cancel-pc-modal" class="btn btn-outline">취소</button>
+          <button id="btn-save-pc-asset" class="btn btn-primary">저장</button>
+        </div>
+      </div>
+    </div>
+  </div>
+`;
+
 export function initPcModal(renderContent: () => void, closeModals: () => void) {
+  if (!document.getElementById('pc-asset-modal')) {
+    document.body.insertAdjacentHTML('beforeend', PC_MODAL_HTML);
+  }
+
   const pcForm = document.getElementById('pc-asset-form') as HTMLFormElement;
   const btnSavePc = document.getElementById('btn-save-pc-asset') as HTMLButtonElement;
   const btnDeletePc = document.getElementById('btn-delete-pc-asset') as HTMLButtonElement;
+  const btnCancelPc = document.getElementById('btn-cancel-pc-modal') as HTMLButtonElement;
+  const btnClosePc = document.getElementById('btn-close-pc-modal') as HTMLButtonElement;
+
+  btnCancelPc?.addEventListener('click', closeModals);
+  btnClosePc?.addEventListener('click', closeModals);
 
-  // 저장 버튼 이벤트
   btnSavePc?.addEventListener('click', (e) => {
     e.preventDefault();
     if (!pcForm.checkValidity()) { pcForm.reportValidity(); return; }
     
     const id = (document.getElementById('pc-asset-id') as HTMLInputElement).value;
     const fileInput = document.getElementById('pc-품의서') as HTMLInputElement;
-    const 품의서명 = fileInput.files && fileInput.files.length > 0 ? fileInput.files[0].name : (document.getElementById('pc-품의서명') as HTMLElement).innerText.replace('📎', '');
+    const 품의서명 = fileInput.files && fileInput.files.length > 0 ? fileInput.files[0].name : (document.getElementById('pc-품의서명') as HTMLElement).innerText.replace('첨부: ', '');
 
     const newAsset: HardwareAsset = {
       id: id || Math.random().toString(36).substring(2, 9),
@@ -26,11 +146,7 @@ export function initPcModal(renderContent: () => void, closeModals: () => void)
       자산코드: (document.getElementById('pc-자산코드') as HTMLInputElement).value,
       명칭: '',
       위치: (document.getElementById('pc-위치') as HTMLInputElement).value,
-      관리자: '',
-      IP주소: '',
-      MACaddress: '',
-      HW사양: '',
-      OS: '',
+      관리자: '', IP주소: '', MACaddress: '', HW사양: '', OS: '', 납품업체: (document.getElementById('pc-납품업체') as HTMLInputElement).value,
       사용자: (document.getElementById('pc-사용자') as HTMLInputElement).value,
       CPU: (document.getElementById('pc-CPU') as HTMLInputElement).value,
       GPU: (document.getElementById('pc-GPU') as HTMLInputElement).value,
@@ -41,7 +157,6 @@ export function initPcModal(renderContent: () => void, closeModals: () => void)
       HDD2: (document.getElementById('pc-HDD2') as HTMLInputElement).value,
       구매일: (document.getElementById('pc-구매일') as HTMLInputElement).value,
       금액: (document.getElementById('pc-금액') as HTMLInputElement).value,
-      납품업체: (document.getElementById('pc-납품업체') as HTMLInputElement).value,
       품의서명
     };
 
@@ -50,22 +165,15 @@ export function initPcModal(renderContent: () => void, closeModals: () => void)
       if(idx !== -1) {
         const oldAsset = state.masterData.hw[idx];
         const changes = getChangeDetails(oldAsset, newAsset);
-        
         if (changes) {
-          // 로그인 기능이 없으므로 '관리자'가 로그인한 것으로 가정
-          const modifier = '관리자'; 
-          
-          const log: HardwareLog = {
+          state.masterData.logs.push({
             id: Math.random().toString(36).substring(2, 9),
             assetId: id,
             date: new Date().toLocaleString(),
             details: changes,
-            user: modifier
-          };
-          
-          state.masterData.logs.push(log);
+            user: '관리자'
+          });
         }
-        
         state.masterData.hw[idx] = newAsset;
       }
     } else {
@@ -76,22 +184,17 @@ export function initPcModal(renderContent: () => void, closeModals: () => void)
     renderContent();
   });
 
-  // 삭제 버튼 이벤트
   btnDeletePc?.addEventListener('click', (e) => {
     e.preventDefault();
     const id = (document.getElementById('pc-asset-id') as HTMLInputElement).value;
     if (confirm('삭제하시겠습니까?')) {
       state.masterData.hw = state.masterData.hw.filter(a => a.id !== id);
-      // 관련 로그도 삭제할지 여부는 정책에 따라 (여기서는 유지)
       closeModals();
       renderContent();
     }
   });
 }
 
-/**
- * 개인PC 상세 모달 열기
- */
 export function openPcModal(asset?: HardwareAsset) {
   const pcForm = document.getElementById('pc-asset-form') as HTMLFormElement;
   const deleteBtn = document.getElementById('btn-delete-pc-asset')!;
@@ -118,15 +221,15 @@ export function openPcModal(asset?: HardwareAsset) {
     (document.getElementById('pc-HDD1') as HTMLInputElement).value = asset.HDD1 || '';
     (document.getElementById('pc-HDD2') as HTMLInputElement).value = asset.HDD2 || '';
     (document.getElementById('pc-구매일') as HTMLInputElement).value = asset.구매일 || '';
-    (document.getElementById('pc-금액') as HTMLInputElement).value = asset.금액 ? asset.금액.replace(/,/g, '').replace(/\B(?=(\d{3})+(?!\d))/g, ',') : '';
+    (document.getElementById('pc-금액') as HTMLInputElement).value = asset.금액 || '';
     (document.getElementById('pc-납품업체') as HTMLInputElement).value = asset.납품업체 || '';
-    (document.getElementById('pc-품의서명') as HTMLElement).innerText = asset.품의서명 ? `📎${asset.품의서명}` : '';
+    (document.getElementById('pc-품의서명') as HTMLElement).innerText = asset.품의서명 ? `첨부: ${asset.품의서명}` : '';
     
     renderHistory(asset.id);
   } else {
-    document.getElementById('pc-modal-title')!.textContent = '새 개인PC 자산 추가';
+    document.getElementById('pc-modal-title')!.textContent = '신규 개인PC 자산 추가';
     deleteBtn.style.display = 'none';
-    if (historyArea) historyArea.style.display = 'none'; // 신규 시 이력 숨김
+    if (historyArea) historyArea.style.display = 'none';
     
     (document.getElementById('pc-asset-id') as HTMLInputElement).value = '';
     (document.getElementById('pc-법인') as HTMLSelectElement).value = '한맥';
@@ -134,9 +237,6 @@ export function openPcModal(asset?: HardwareAsset) {
   }
 }
 
-/**
- * 변경 사항 감지 및 문자열 생성
- */
 function getChangeDetails(oldAsset: HardwareAsset, newAsset: HardwareAsset): string {
   const changes: string[] = [];
   const fields = [
@@ -160,18 +260,13 @@ function getChangeDetails(oldAsset: HardwareAsset, newAsset: HardwareAsset): str
   fields.forEach(field => {
     const oldVal = (oldAsset as any)[field.key] || '';
     const newVal = (newAsset as any)[field.key] || '';
-    
     if (oldVal !== newVal) {
       changes.push(`${field.label}: ${oldVal || '없음'} → ${newVal || '없음'}`);
     }
   });
-
   return changes.join('\n');
 }
 
-/**
- * 이력 리스트 렌더링
- */
 function renderHistory(assetId: string) {
   const historyList = document.getElementById('pc-history-list');
   if (!historyList) return;
@@ -189,7 +284,7 @@ function renderHistory(assetId: string) {
     <div class="history-item">
       <div class="history-date">${log.date}</div>
       <div class="history-user">수정자: ${log.user}</div>
-      <div class="history-details">${log.details.replace(/\n/g, '<br>')}</div>
+      <div class="history-details">${log.details.replace(/\\n/g, '<br>')}</div>
     </div>
   `).join('');
 }