Merge remote-tracking branch 'origin/main' into ux_setting

src/components/Modal/BaseModal.ts

@@ -55,6 +55,9 @@ export abstract class BaseModal {
     this.currentAsset = asset;
     this.isEditMode = (mode === 'add' || mode === 'edit');
     
+    // 폼 초기화 추가
+    if (this.formEl) this.formEl.reset();
+
     this.setEditLockMode(mode);
     this.fillFormData(asset);
     

src/components/Modal/HWModal.ts

@@ -1,5 +1,6 @@
 import { state, saveAsset, deleteAsset } from '../../core/state';
 import { ASSET_SCHEMA, UI_TEXT } from '../../core/schema';
+import { calculatePcScoreDeductive, getPcGrade } from '../../core/utils';
 import { 
   generateOptionsHTML, 
   setFieldValue, 
@@ -13,6 +14,7 @@ import { BaseModal } from './BaseModal';
 
 class HwAssetModal extends BaseModal {
   private dynamicMapConfig: Record<string, any[]> = {};
+  private masterComponents: any[] = [];
 
   constructor() {
     super('hw', '자산 상세 정보');
@@ -20,6 +22,39 @@ class HwAssetModal extends BaseModal {
 
   protected renderFrameHTML(): string {
     return `
+      <style>
+        .autocomplete-list {
+          position: absolute;
+          top: 100%;
+          left: 0;
+          right: 0;
+          max-height: 150px;
+          overflow-y: auto;
+          background-color: white;
+          border: 1px solid var(--border-color, #E2E8F0);
+          border-top: none;
+          border-radius: 0 0 4px 4px;
+          z-index: 1000;
+          box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+        }
+        .autocomplete-item {
+          padding: 8px 12px;
+          font-size: 13px;
+          color: #334155;
+          cursor: pointer;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+        .autocomplete-item:hover {
+          background-color: #F1F5F9;
+          color: #1E5149;
+          font-weight: 600;
+        }
+        .hidden {
+          display: none !important;
+        }
+      </style>
       <div id="hw-asset-modal" class="modal-overlay hidden">
         <div class="modal-content wide">
           <div class="modal-header">
@@ -63,6 +98,17 @@ class HwAssetModal extends BaseModal {
                     <label>${ASSET_SCHEMA.HW_STATUS.ui}</label>
                     <select id="hw-hw_status" name="hw_status">${generateOptionsHTML(HW_STATUS_LIST)}</select>
                   </div>
+                  <div class="form-group">
+                    <label>${ASSET_SCHEMA.SERVICE_TYPE.ui}</label>
+                    <select id="hw-service_type" name="service_type" style="${inputStyle}">
+                      <option value="외부">외부</option>
+                      <option value="내부">내부</option>
+                    </select>
+                  </div>
+                  <div class="form-group full-width" style="grid-column: span 2;">
+                    <label>${ASSET_SCHEMA.ASSET_PURPOSE.ui}</label>
+                    <input type="text" id="hw-asset_purpose" name="asset_purpose" placeholder="자산의 용도를 입력하세요" style="${inputStyle} width: 100%;" />
+                  </div>
                   <div class="form-group infra-only monitoring-field">
                     <label>${ASSET_SCHEMA.MONITORING.ui}</label>
                     <select id="hw-monitoring" name="monitoring">
@@ -72,15 +118,19 @@ class HwAssetModal extends BaseModal {
                   </div>
 
                   <!-- [SECTION 2] 조직 및 사용자 정보 -->
-                  <div class="form-section-title org-user-section">사용자 및 조직 정보</div>
-                  <div class="form-group org-user-field">
+                  <div class="form-section-title" style="margin-top: 24px; margin-bottom: 12px;">사용자 및 조직 정보</div>
+                  <div class="form-group">
                     <label>${ASSET_SCHEMA.CURRENT_DEPT.ui}</label>
                     <select id="hw-current_dept" name="current_dept">${generateOptionsHTML(ORG_LIST)}</select>
                   </div>
-                  <div class="form-group org-user-field">
+                  <div class="form-group">
                     <label>${ASSET_SCHEMA.MANAGER_MAIN.ui}</label>
                     <input type="text" id="hw-manager_primary" name="manager_primary" />
                   </div>
+                  <div class="form-group">
+                    <label>${ASSET_SCHEMA.MANAGER_SUB.ui}</label>
+                    <input type="text" id="hw-manager_secondary" name="manager_secondary" style="${inputStyle}" />
+                  </div>
                   <div class="form-group personal-only">
                     <label>${ASSET_SCHEMA.CURRENT_USER.ui}</label>
                     <input type="text" id="hw-user_current" name="user_current" />
@@ -89,10 +139,6 @@ class HwAssetModal extends BaseModal {
                     <label>${ASSET_SCHEMA.USER_POSITION.ui}</label>
                     <input type="text" id="hw-user_position" name="user_position" />
                   </div>
-                  <div class="form-group">
-                    <label>${ASSET_SCHEMA.MANAGER_SUB.ui}</label>
-                    <input type="text" id="hw-manager_secondary" name="manager_secondary" />
-                  </div>
                   <div class="form-group personal-only">
                     <label>${ASSET_SCHEMA.PREV_USER.ui}</label>
                     <input type="text" id="hw-previous_user" name="previous_user" />
@@ -116,22 +162,31 @@ class HwAssetModal extends BaseModal {
                     <label>${ASSET_SCHEMA.OS.ui}</label>
                     <input type="text" id="hw-os" name="os" />
                   </div>
-                  <div class="form-group spec-only">
+                  <div class="form-group spec-only" style="position: relative;">
                     <label>${ASSET_SCHEMA.CPU.ui}</label>
-                    <input type="text" id="hw-cpu" name="cpu" />
+                    <input type="text" id="hw-cpu" name="cpu" autocomplete="off" placeholder="CPU 부품 검색..." style="${inputStyle}" />
+                    <div id="hw-cpu-autocomplete" class="autocomplete-list hidden"></div>
                   </div>
-                  <div class="form-group spec-only">
+                  <div class="form-group spec-only" style="position: relative;">
                     <label>${ASSET_SCHEMA.RAM.ui}</label>
-                    <input type="text" id="hw-ram" name="ram" />
+                    <input type="text" id="hw-ram" name="ram" autocomplete="off" placeholder="RAM 부품 검색..." style="${inputStyle}" />
+                    <div id="hw-ram-autocomplete" class="autocomplete-list hidden"></div>
                   </div>
-                  <div class="form-group spec-only">
+                  <div class="form-group spec-only" style="position: relative;">
                     <label>${ASSET_SCHEMA.GPU.ui}</label>
-                    <input type="text" id="hw-gpu" name="gpu" />
+                    <input type="text" id="hw-gpu" name="gpu" autocomplete="off" placeholder="GPU 부품 검색..." style="${inputStyle}" />
+                    <div id="hw-gpu-autocomplete" class="autocomplete-list hidden"></div>
                   </div>
                   <div class="form-group spec-only">
                     <label>${ASSET_SCHEMA.MAINBOARD.ui}</label>
                     <input type="text" id="hw-mainboard" name="mainboard" />
                   </div>
+                  <div class="form-group spec-only">
+                    <label>성능 등급</label>
+                    <div id="hw-pc-grade-container" style="display: flex; align-items: center; height: 38px;">
+                      <span class="badge b-yellow" id="hw-pc-grade-badge">-</span>
+                    </div>
+                  </div>
                   <div class="form-group monitor-only">
                     <label>${ASSET_SCHEMA.MONITOR_INCH.ui}</label>
                     <input type="text" id="hw-monitor_inch" name="monitor_inch" />
@@ -242,6 +297,18 @@ class HwAssetModal extends BaseModal {
     bindLocationEvents('hw-bldg-select', 'hw-location_detail', '', '');
     applyDateMask(document.getElementById('hw-purchase_date') as HTMLInputElement);
 
+    this.fetchMasterComponents().then(() => {
+      this.bindAutocomplete('hw-cpu', 'hw-cpu-autocomplete', 'CPU');
+      this.bindAutocomplete('hw-ram', 'hw-ram-autocomplete', 'RAM');
+      this.bindAutocomplete('hw-gpu', 'hw-gpu-autocomplete', 'GPU');
+    });
+
+    const specInputs = ['hw-cpu', 'hw-ram', 'hw-gpu', 'hw-purchase_date'];
+    specInputs.forEach(id => {
+      document.getElementById(id)?.addEventListener('input', () => this.updatePcGradeBadge());
+      document.getElementById(id)?.addEventListener('change', () => this.updatePcGradeBadge());
+    });
+
     categorySelect.addEventListener('change', () => {
       const types = CATEGORY_TYPE_MAP[categorySelect.value] || [];
       typeSelect.innerHTML = types.length > 0 ? generateOptionsHTML(types, '', true) : '<option value="">구분을 먼저 선택하세요</option>';
@@ -253,10 +320,21 @@ class HwAssetModal extends BaseModal {
     });
 
     document.getElementById('btn-gen-hw-code')?.addEventListener('click', async () => {
+      const type = typeSelect.value;
       const cat = categorySelect.value;
-      if (!cat) { alert('구분을 먼저 선택해주세요.'); return; }
-      const prefix = TYPE_PREFIX_MAP[cat] || 'ETC';
-      const purchaseDate = (document.getElementById('hw-purchase_date') as HTMLInputElement)?.value || '';
+      if (!type) { alert('유형을 먼저 선택해주세요.'); return; }
+      
+      const purchaseDateEl = document.getElementById('hw-purchase_date') as HTMLInputElement;
+      const purchaseDate = purchaseDateEl?.value || '';
+
+      if (!purchaseDate) {
+        alert('구매일자를 먼저 입력해야 자산번호 생성이 가능합니다.');
+        purchaseDateEl?.focus();
+        return;
+      }
+      
+      // 유형 기반 매핑 우선, 없으면 구분 기반, 그래도 없으면 ETC
+      const prefix = TYPE_PREFIX_MAP[type] || TYPE_PREFIX_MAP[cat] || 'ETC';
       try {
         const res = await fetch(`http://${location.hostname}:3000/api/generate-asset-code?prefix=${prefix}&purchaseDate=${purchaseDate}`);
         const data = await res.json();
@@ -297,6 +375,7 @@ class HwAssetModal extends BaseModal {
     });
 
     revertBtn.addEventListener('click', () => {
+      this.isEditMode = false;
       this.setEditLockMode('view');
       if (this.currentAsset) this.fillFormData(this.currentAsset);
       this.updateMapButtonVisibility();
@@ -346,6 +425,35 @@ class HwAssetModal extends BaseModal {
         return;
       }
 
+      // CPU, RAM, GPU 마스터 테이블 기반 유효성 검사 (완전 강제 방식)
+      const category = categorySelect.value;
+      const type = typeSelect.value;
+      const specCategories = ['PC', '서버', '노트북', '스토리지', '워크스테이션'];
+      const hasSpec = specCategories.includes(category) || type.includes('서버PC');
+
+      if (hasSpec) {
+        const cpuVal = (document.getElementById('hw-cpu') as HTMLInputElement)?.value || '';
+        const ramVal = (document.getElementById('hw-ram') as HTMLInputElement)?.value || '';
+        const gpuVal = (document.getElementById('hw-gpu') as HTMLInputElement)?.value || '';
+
+        const cpuMaster = this.masterComponents.filter(c => c.category === 'CPU').map(c => c.component_name);
+        const ramMaster = this.masterComponents.filter(c => c.category === 'RAM').map(c => c.component_name);
+        const gpuMaster = this.masterComponents.filter(c => c.category === 'GPU').map(c => c.component_name);
+
+        if (cpuVal && !cpuMaster.includes(cpuVal)) {
+          alert(`[입력 오류] '${cpuVal}'은(는) 마스터 테이블에 존재하지 않는 CPU 부품명입니다. 자동완성 추천 목록에서 올바른 부품명을 골라 선택해 주세요.`);
+          return;
+        }
+        if (ramVal && !ramMaster.includes(ramVal)) {
+          alert(`[입력 오류] '${ramVal}'은(는) 마스터 테이블에 존재하지 않는 RAM 부품명입니다. 자동완성 추천 목록에서 올바른 부품명을 골라 선택해 주세요.`);
+          return;
+        }
+        if (gpuVal && !gpuMaster.includes(gpuVal)) {
+          alert(`[입력 오류] '${gpuVal}'은(는) 마스터 테이블에 존재하지 않는 GPU 부품명입니다. 자동완성 추천 목록에서 올바른 부품명을 골라 선택해 주세요.`);
+          return;
+        }
+      }
+
       // 동적 볼륨 데이터 수집
       const vols: any[] = [];
       document.querySelectorAll('#hw-volume-container .volume-row').forEach((row, idx) => {
@@ -389,25 +497,24 @@ class HwAssetModal extends BaseModal {
   private addVolumeRow(vol: any = { type: 'SSD', capacity: '', unit: 'GB' }) {
     const container = document.getElementById('hw-volume-container');
     if (!container) return;
-
     const row = document.createElement('div');
     row.className = 'volume-row';
-    
+    row.style.display = 'flex'; row.style.gap = '8px'; row.style.alignItems = 'center';
+    const inputStyle = 'height: 38px !important; box-sizing: border-box !important; font-size: 13px; margin: 0; padding: 0 8px;';
     row.innerHTML = `
       <select class="vol-type" ${!this.isEditMode ? 'disabled' : ''}>
         <option value="SSD" ${vol.type === 'SSD' ? 'selected' : ''}>SSD</option>
         <option value="HDD" ${vol.type === 'HDD' ? 'selected' : ''}>HDD</option>
         <option value="NVMe" ${vol.type === 'NVMe' ? 'selected' : ''}>NVMe</option>
       </select>
-      <input type="number" class="vol-cap" value="${vol.capacity || ''}" placeholder="용량" ${!this.isEditMode ? 'readonly' : ''} />
-      <select class="vol-unit" ${!this.isEditMode ? 'disabled' : ''}>
+      <input type="number" class="vol-cap" value="${vol.capacity || ''}" placeholder="용량" style="${inputStyle} flex: 1;" ${!this.isEditMode ? 'readonly' : ''} />
+      <select class="vol-unit" style="${inputStyle} width: 60px;" ${!this.isEditMode ? 'disabled' : ''}>
         <option value="GB" ${vol.unit === 'GB' ? 'selected' : ''}>GB</option>
         <option value="TB" ${vol.unit === 'TB' ? 'selected' : ''}>TB</option>
       </select>
-      <button type="button" class="btn btn-outline btn-remove-vol edit-only-btn" style="display: ${this.isEditMode ? 'inline-flex' : 'none'};">&times;</button>
+      <button type="button" class="btn btn-outline btn-remove-row edit-only-btn" style="height: 38px !important; padding: 0 12px; color: #E11D48; border-color: #E11D48; display: ${this.isEditMode ? 'inline-flex' : 'none'};">&times;</button>
     `;
-
-    row.querySelector('.btn-remove-vol')?.addEventListener('click', () => row.remove());
+    row.querySelector('.btn-remove-row')?.addEventListener('click', () => row.remove());
     container.appendChild(row);
   }
 
@@ -512,6 +619,8 @@ class HwAssetModal extends BaseModal {
     if (typeSelect) typeSelect.innerHTML = types.length > 0 ? generateOptionsHTML(types, asset.asset_type, true) : '<option value="">구분을 먼저 선택하세요</option>';
     setFieldValue('hw-asset_type', asset.asset_type || '');
     setFieldValue('hw-hw_status', asset.hw_status || '운영');
+    setFieldValue('hw-service_type', asset.service_type || '외부');
+    setFieldValue('hw-asset_purpose', asset.asset_purpose || '');
     setFieldValue('hw-current_dept', asset.current_dept || '');
     setFieldValue('hw-manager_primary', asset.manager_primary || '');
     setFieldValue('hw-manager_secondary', asset.manager_secondary || '');
@@ -526,16 +635,12 @@ class HwAssetModal extends BaseModal {
     setFieldValue('hw-gpu', asset.gpu || '');
     setFieldValue('hw-mainboard', asset.mainboard || '');
     
-    // 동적 볼륨 렌더링 초기화 및 생성
+    // 동적 볼륨 렌더링
     const volumeContainer = document.getElementById('hw-volume-container');
-    if (volumeContainer) {
-        volumeContainer.innerHTML = '';
-        let vols = [];
-        try {
-            vols = asset.volumes ? (typeof asset.volumes === 'string' ? JSON.parse(asset.volumes) : asset.volumes) : [];
-        } catch(e) {}
-        vols.forEach((v: any) => this.addVolumeRow(v));
-    }
+    if (volumeContainer) volumeContainer.innerHTML = '';
+    let vols = [];
+    try { vols = asset.volumes ? (typeof asset.volumes === 'string' ? JSON.parse(asset.volumes) : asset.volumes) : []; } catch(e) {}
+    vols.forEach((v: any) => this.addVolumeRow(v));
 
     // 통합 원격 접속 정보 렌더링 초기화 및 생성
     const remoteInfoContainer = document.getElementById('hw-remote-info-container');
@@ -573,6 +678,7 @@ class HwAssetModal extends BaseModal {
     setFieldValue('hw-purchase_vendor', asset.purchase_vendor || '');
     setFieldValue('hw-purchase_amount', asset.purchase_amount || '');
     setFieldValue('hw-approval_document', asset.approval_document || '');
+    
     const docName = document.getElementById('hw-file-name-display');
     if (docName) docName.textContent = asset.approval_document ? asset.approval_document.split('/').pop() : '파일 선택...';
     const fileLinkContainer = document.getElementById('hw-file-link-container');
@@ -581,6 +687,7 @@ class HwAssetModal extends BaseModal {
     } else if (fileLinkContainer) {
       fileLinkContainer.innerHTML = '';
     }
+    
     setFieldValue('hw-memo', asset.memo || '');
     setFieldValue('hw-location_detail', asset.location_detail || '');
     setFieldValue('hw-loc_x', asset.loc_x || '');
@@ -589,6 +696,7 @@ class HwAssetModal extends BaseModal {
     parseAndSetLocation(asset.location || '', asset.location_detail || '', 'hw-bldg-select', 'hw-location_detail');
     this.renderHistory(asset.id);
     this.applyRoleVisibility();
+    this.updatePcGradeBadge();
   }
 
   protected onAfterOpen(asset: any, mode: string): void {
@@ -676,29 +784,110 @@ class HwAssetModal extends BaseModal {
     overlay.className = 'image-picker-overlay';
     const renderContent = () => {
       const imgPath = imagePaths[currentIdx];
-      const digitalMap = this.generateDynamicSVG(imgPath);
+      const isMulti = imagePaths.length > 1;
+      const isHtmlMap = imgPath.toLowerCase().endsWith('.html');
+      const digitalMap = isHtmlMap ? '' : this.generateDynamicSVG(imgPath);
+      
       overlay.innerHTML = `
-        <div class="image-picker-header"><h3>${title}</h3><button class="btn-close-picker" style="background:none; border:none; color:white; font-size:24px; cursor:pointer;">&times;</button></div>
-        <div class="image-picker-content"><div class="layout-map-container" id="picker-container"><img src="${imgPath}" class="layout-map-img" /><div id="picker-marker" class="layout-marker hidden"></div><div class="digital-overlay-layer">${digitalMap}</div></div></div>
+        <div class="image-picker-header">
+          <h3>${title} ${isMulti ? `(${currentIdx + 1}/${imagePaths.length})` : ''}</h3>
+          <button class="btn-close-picker" style="background:none; border:none; color:white; font-size:24px; cursor:pointer;">&times;</button>
+        </div>
+        <div class="image-picker-content">
+          ${isMulti ? `
+            <div class="picker-nav prev ${currentIdx === 0 ? 'disabled' : ''}" style="position: absolute; left: 10px; top: 50%; transform: translateY(-50%); z-index: 100; cursor: pointer; background: rgba(0,0,0,0.5); color: white; padding: 20px 10px; border-radius: 5px; font-size: 24px; user-select: none;">◀</div>
+            <div class="picker-nav next ${currentIdx === imagePaths.length - 1 ? 'disabled' : ''}" style="position: absolute; right: 10px; top: 50%; transform: translateY(-50%); z-index: 100; cursor: pointer; background: rgba(0,0,0,0.5); color: white; padding: 20px 10px; border-radius: 5px; font-size: 24px; user-select: none;">▶</div>
+          ` : ''}
+          <div class="layout-map-container" id="picker-container">
+            ${isHtmlMap 
+              ? `<iframe src="${imgPath}" style="width:100%; height:100%; border:none; display:block;"></iframe>`
+              : `<img src="${imgPath}" class="layout-map-img" /><div id="picker-marker" class="layout-marker hidden"></div><div class="digital-overlay-layer">${digitalMap}</div>`
+            }
+          </div>
+        </div>
         <div class="image-picker-footer"><button id="btn-picker-cancel" class="btn btn-outline" style="color:white; border-color:white;">취소</button><button id="btn-picker-save" class="btn btn-primary">위치 확정</button></div>`;
+      
       let selectedX = ''; let selectedY = '';
-      const container = overlay.querySelector('#picker-container') as HTMLElement;
-      const marker = overlay.querySelector('#picker-marker') as HTMLElement;
-      container.addEventListener('click', (e) => {
-        const rect = container.getBoundingClientRect();
-        const x = ((e.clientX - rect.left) / rect.width) * 100;
-        const y = ((e.clientY - rect.top) / rect.height) * 100;
-        selectedX = x.toFixed(2); selectedY = y.toFixed(2);
-        marker.style.left = `${selectedX}%`; marker.style.top = `${selectedY}%`; marker.classList.remove('hidden');
-      });
-      overlay.querySelector('.btn-close-picker')?.addEventListener('click', () => overlay.remove());
-      overlay.querySelector('#btn-picker-cancel')?.addEventListener('click', () => overlay.remove());
-      overlay.querySelector('#btn-picker-save')?.addEventListener('click', () => {
-        if (!selectedX || !selectedY) { alert('위치를 선택해주세요.'); return; }
-        setFieldValue('hw-loc_x', selectedX); setFieldValue('hw-loc_y', selectedY);
-        setFieldValue('hw-location_photo', imagePaths[currentIdx]);
-        this.updateMapButtonVisibility(); overlay.remove();
-      });
+
+      if (isMulti) {
+        overlay.querySelector('.picker-nav.prev')?.addEventListener('click', (e) => { e.stopPropagation(); if (currentIdx > 0) { currentIdx--; renderContent(); } });
+        overlay.querySelector('.picker-nav.next')?.addEventListener('click', (e) => { e.stopPropagation(); if (currentIdx < imagePaths.length - 1) { currentIdx++; renderContent(); } });
+      }
+
+      if (isHtmlMap) {
+        // HTML 지도 메시지 리스너
+        const handleMessage = (e: MessageEvent) => {
+          if (e.data.type === 'PICK_LOCATION') {
+            selectedX = e.data.x;
+            selectedY = e.data.y;
+          }
+        };
+        window.addEventListener('message', handleMessage);
+        overlay.querySelector('.btn-close-picker')?.addEventListener('click', () => { window.removeEventListener('message', handleMessage); overlay.remove(); });
+        overlay.querySelector('#btn-picker-cancel')?.addEventListener('click', () => { window.removeEventListener('message', handleMessage); overlay.remove(); });
+        overlay.querySelector('#btn-picker-save')?.addEventListener('click', () => {
+          if (!selectedX || !selectedY) { alert('위치를 선택해주세요.'); return; }
+          setFieldValue('hw-loc_x', selectedX); setFieldValue('hw-loc_y', selectedY);
+          setFieldValue('hw-location_photo', imagePaths[currentIdx]);
+          this.updateMapButtonVisibility(); 
+          window.removeEventListener('message', handleMessage);
+          overlay.remove();
+        });
+      } else {
+        const container = overlay.querySelector('#picker-container') as HTMLElement;
+        const marker = overlay.querySelector('#picker-marker') as HTMLElement;
+        container.addEventListener('click', (e) => {
+          const rectBound = container.getBoundingClientRect();
+          const clickX = ((e.clientX - rectBound.left) / rectBound.width) * 100;
+          const clickY = ((e.clientY - rectBound.top) / rectBound.height) * 100;
+          
+          let snapped = false;
+          overlay.querySelectorAll('rect').forEach(rect => {
+            const rx = parseFloat(rect.getAttribute('x') || '0');
+            const ry = parseFloat(rect.getAttribute('y') || '0');
+            const rw = parseFloat(rect.getAttribute('width') || '0');
+            const rh = parseFloat(rect.getAttribute('height') || '0');
+
+            if (clickX >= rx && clickX <= rx + rw && clickY >= ry && clickY <= ry + rh) {
+              overlay.querySelectorAll('rect').forEach(r => {
+                  r.style.fill = 'rgba(30,81,73,0.05)'; 
+                  r.style.stroke = 'rgba(30,81,73,0.2)'; 
+                  r.style.strokeWidth = '0.2';
+              });
+              rect.style.fill = 'rgba(255, 61, 0, 0.4)';
+              rect.style.stroke = '#FF3D00';
+              rect.style.strokeWidth = '0.8';
+
+              selectedX = rx.toFixed(2);
+              selectedY = ry.toFixed(2);
+              
+              marker.style.left = `${rx + rw/2}%`;
+              marker.style.top = `${ry + rh/2}%`;
+              marker.classList.remove('hidden');
+              snapped = true;
+            }
+          });
+
+          if (!snapped) {
+              selectedX = '';
+              selectedY = '';
+              marker.classList.add('hidden');
+              overlay.querySelectorAll('rect').forEach(r => {
+                  r.style.fill = 'rgba(30,81,73,0.05)'; 
+                  r.style.stroke = 'rgba(30,81,73,0.2)'; 
+                  r.style.strokeWidth = '0.2';
+              });
+          }
+        });
+        overlay.querySelector('.btn-close-picker')?.addEventListener('click', () => overlay.remove());
+        overlay.querySelector('#btn-picker-cancel')?.addEventListener('click', () => overlay.remove());
+        overlay.querySelector('#btn-picker-save')?.addEventListener('click', () => {
+          if (!selectedX || !selectedY) { alert('위치를 선택해주세요.'); return; }
+          setFieldValue('hw-loc_x', selectedX); setFieldValue('hw-loc_y', selectedY);
+          setFieldValue('hw-location_photo', imagePaths[currentIdx]);
+          this.updateMapButtonVisibility(); overlay.remove();
+        });
+      }
     };
     renderContent(); document.body.appendChild(overlay);
   }
@@ -706,13 +895,26 @@ class HwAssetModal extends BaseModal {
   private openImagePreview(imagePath: string, title: string, x: string, y: string) {
     const overlay = document.createElement('div');
     overlay.className = 'image-picker-overlay';
-    const digitalMap = this.generateDynamicSVG(imagePath);
+    const isHtmlMap = imagePath.toLowerCase().endsWith('.html');
+    const digitalMap = isHtmlMap ? '' : this.generateDynamicSVG(imagePath);
+    
+    // HTML 지도인 경우 좌표를 쿼리 파라미터로 전달
+    const finalPath = isHtmlMap ? `${imagePath}?markerX=${x}&markerY=${y}` : imagePath;
+
     overlay.innerHTML = `
       <div class="image-picker-header"><h3>${title}</h3><button class="btn-close-picker" style="background:none; border:none; color:white; font-size:24px; cursor:pointer;">&times;</button></div>
-      <div class="image-picker-content"><div class="layout-map-container readonly"><img src="${imagePath}" class="layout-map-img" /><div id="preview-marker" class="layout-marker pulse-marker" style="left:${x}%; top:${y}%;"></div><div class="digital-overlay-layer">${digitalMap}</div></div></div>
+      <div class="image-picker-content">
+        <div class="layout-map-container readonly">
+          ${isHtmlMap 
+            ? `<iframe src="${finalPath}" style="width:100%; height:100%; border:none; display:block;"></iframe>`
+            : `<img src="${imagePath}" class="layout-map-img" /><div id="preview-marker" class="layout-marker pulse-marker" style="left:${x}%; top:${y}%;"></div><div class="digital-overlay-layer">${digitalMap}</div>`
+          }
+        </div>
+      </div>
       <div class="image-picker-footer"><button id="btn-preview-close" class="btn btn-primary">확인</button></div>`;
+    
     document.body.appendChild(overlay);
-    if (digitalMap) {
+    if (!isHtmlMap && digitalMap) {
       const curX = parseFloat(x || '0'); const curY = parseFloat(y || '0');
       overlay.querySelectorAll('rect').forEach(rect => {
         const sx = parseFloat(rect.getAttribute('x') || '0');
@@ -733,9 +935,51 @@ class HwAssetModal extends BaseModal {
   private renderHistory(assetId: string) {
     const container = document.getElementById('hw-history-list');
     if (!container) return;
-    const logs = (state.masterData.logs || []).filter(l => l.assetId === assetId);
-    if (logs.length === 0) { container.innerHTML = '<div class="empty-history">이력이 없습니다.</div>'; return; }
-    container.innerHTML = logs.map(l => `<div class="history-item"><div class="history-date">${l.date}</div><div class="history-user">${l.user}</div><div class="history-details">${l.details}</div></div>`).join('');
+    
+    // state.masterData.logs에서 해당 자산의 이력 필터링 (최신순)
+    const logs = (state.masterData.logs || [])
+      .filter(l => l.asset_id === assetId)
+      .sort((a, b) => new Date(b.created_at || b.log_date || '').getTime() - new Date(a.created_at || a.log_date || '').getTime());
+
+    if (logs.length === 0) { 
+      container.innerHTML = '<div class="empty-history">기록된 변동 이력이 없습니다.</div>'; 
+      return; 
+    }
+
+    container.innerHTML = logs.map(l => {
+      let eventTag = '기타';
+      let tagClass = 'tag-default';
+      let itemClass = '';
+
+      switch(l.event_type) {
+        case 'DEPT_CHANGE': 
+          eventTag = '조직'; tagClass = 'tag-dept'; itemClass = 'evt-dept'; 
+          break;
+        case 'USER_CHANGE': 
+          eventTag = '사용자'; tagClass = 'tag-user'; itemClass = 'evt-user'; 
+          break;
+        case 'ROLE_CHANGE': 
+          eventTag = '용도'; tagClass = 'tag-role'; itemClass = 'evt-role'; 
+          break;
+        case 'STATUS_CHANGE': 
+          eventTag = '상태'; tagClass = 'tag-status'; itemClass = 'evt-status'; 
+          break;
+      }
+
+      // 화살표 기호(➔)를 사용하여 변경 사항 강조
+      const formattedDetails = (l.details || '').replace(' -> ', ' <span class="history-arrow">➔</span> ');
+
+      return `
+        <div class="history-item ${itemClass}">
+          <div class="history-header-row">
+            <span class="history-tag ${tagClass}">${eventTag}</span>
+            <span class="history-date">${l.log_date || ''}</span>
+          </div>
+          <span class="history-user">${l.log_user || '시스템'}</span>
+          <div class="history-details">${formattedDetails}</div>
+        </div>
+      `;
+    }).join('');
   }
 
   private getCategoryKey(asset: any): string {
@@ -750,6 +994,77 @@ class HwAssetModal extends BaseModal {
     if (cat === 'PC부품') return 'pcParts';
     return (cat === 'PC' || code.startsWith('PC')) ? 'pc' : 'officeSupplies';
   }
+
+  private async fetchMasterComponents(): Promise<void> {
+    try {
+      const res = await fetch(`http://${location.hostname}:3000/api/hardware-components`);
+      this.masterComponents = await res.json();
+    } catch (err) {
+      console.error('Failed to fetch master components:', err);
+    }
+  }
+
+  private bindAutocomplete(inputId: string, autocompleteId: string, category: string) {
+    const input = document.getElementById(inputId) as HTMLInputElement;
+    const list = document.getElementById(autocompleteId) as HTMLDivElement;
+    if (!input || !list) return;
+
+    const showList = (filterText: string = '') => {
+      if (!this.isEditMode) return;
+      const items = this.masterComponents.filter(c => c.category === category);
+      const filtered = filterText 
+        ? items.filter(c => c.component_name.toLowerCase().includes(filterText.toLowerCase()))
+        : items;
+
+      if (filtered.length === 0) {
+        list.innerHTML = '<div class="autocomplete-item" style="color: #94a3b8; cursor: default;">검색 결과 없음</div>';
+      } else {
+        list.innerHTML = filtered.map(c => `<div class="autocomplete-item" data-val="${c.component_name}">${c.component_name}</div>`).join('');
+      }
+      list.classList.remove('hidden');
+    };
+
+    input.addEventListener('focus', () => {
+      showList(input.value);
+    });
+
+    input.addEventListener('input', () => {
+      showList(input.value);
+    });
+
+    // 아이템 클릭 이벤트 위임
+    list.addEventListener('mousedown', (e) => {
+      const item = (e.target as HTMLElement).closest('.autocomplete-item');
+      if (item && item.getAttribute('data-val')) {
+        input.value = item.getAttribute('data-val') || '';
+        list.classList.add('hidden');
+        this.updatePcGradeBadge(); // 뱃지 즉시 업데이트
+      }
+    });
+
+    // 아웃사이드 클릭 시 닫기
+    document.addEventListener('mousedown', (e) => {
+      if (e.target !== input && !list.contains(e.target as Node)) {
+        list.classList.add('hidden');
+      }
+    });
+  }
+
+  private updatePcGradeBadge(): void {
+    const cpu = (document.getElementById('hw-cpu') as HTMLInputElement)?.value || '';
+    const ram = (document.getElementById('hw-ram') as HTMLInputElement)?.value || '';
+    const gpu = (document.getElementById('hw-gpu') as HTMLInputElement)?.value || '';
+    const date = (document.getElementById('hw-purchase_date') as HTMLInputElement)?.value || '';
+
+    const score = calculatePcScoreDeductive(cpu, ram, gpu, date);
+    const grade = getPcGrade(score);
+
+    const badge = document.getElementById('hw-pc-grade-badge');
+    if (badge) {
+      badge.textContent = `${grade.name} (${score}점)`;
+      badge.className = `badge ${grade.class}`;
+    }
+  }
 }
 
 export const hwModal = new HwAssetModal();

src/components/Modal/PCFlowModal.ts

@@ -0,0 +1,625 @@
+import { state, loadMasterDataFromDB } from '../../core/state';
+import { createIcons, Search, Monitor, RefreshCw } from 'lucide';
+import { API_BASE_URL } from '../../core/utils';
+
+export class PCFlowModal {
+  private static instance: PCFlowModal | null = null;
+  
+  private modalEl: HTMLElement | null = null;
+  private currentFlowType: 'checkout' | 'return' | 'move' = 'checkout';
+  
+  // Selected state
+  private selectedUser: any = null;
+  private selectedTargetUser: any = null;
+  private selectedPC: any = null;
+
+  private constructor() {}
+
+  public static getInstance(): PCFlowModal {
+    if (!PCFlowModal.instance) {
+      PCFlowModal.instance = new PCFlowModal();
+    }
+    return PCFlowModal.instance;
+  }
+
+  public init(onSave: () => void) {
+    if (document.getElementById('pc-flow-modal')) return;
+
+    // Inject HTML
+    document.body.insertAdjacentHTML('beforeend', this.renderHTML());
+
+    this.modalEl = document.getElementById('pc-flow-modal');
+    this.setupEventListeners(onSave);
+    
+    // Set default date to today
+    const dateInput = document.getElementById('pc-flow-date') as HTMLInputElement;
+    if (dateInput) {
+      dateInput.value = new Date().toISOString().split('T')[0];
+    }
+
+    createIcons({ icons: { Search, Monitor, RefreshCw } });
+  }
+
+  public open() {
+    this.resetState();
+    if (this.modalEl) {
+      this.modalEl.classList.remove('hidden');
+    }
+    this.updateUI();
+  }
+
+  public close() {
+    if (this.modalEl) {
+      this.modalEl.classList.add('hidden');
+    }
+  }
+
+  private resetState() {
+    this.selectedUser = null;
+    this.selectedTargetUser = null;
+    this.selectedPC = null;
+    this.currentFlowType = 'checkout';
+    
+    const radioCheckout = document.querySelector('input[name="flow-type"][value="checkout"]') as HTMLInputElement;
+    if (radioCheckout) radioCheckout.checked = true;
+
+    // Reset text fields
+    const userSearch = document.getElementById('pc-flow-user-search') as HTMLInputElement;
+    if (userSearch) userSearch.value = '';
+    
+    const targetUserSearch = document.getElementById('pc-flow-target-user-search') as HTMLInputElement;
+    if (targetUserSearch) targetUserSearch.value = '';
+
+    const stockSearch = document.getElementById('pc-flow-stock-search') as HTMLInputElement;
+    if (stockSearch) stockSearch.value = '';
+
+    const details = document.getElementById('pc-flow-details') as HTMLTextAreaElement;
+    if (details) details.value = '';
+  }
+
+  private setupEventListeners(onSave: () => void) {
+    const btnClose = document.getElementById('btn-close-pc-flow-modal');
+    const btnCancel = document.getElementById('btn-cancel-pc-flow-modal');
+    const btnSubmit = document.getElementById('btn-submit-pc-flow');
+
+    btnClose?.addEventListener('click', () => this.close());
+    btnCancel?.addEventListener('click', () => this.close());
+
+    // Flow Type Radio Buttons
+    const labels = document.querySelectorAll('.flow-type-label');
+    labels.forEach(label => {
+      const radio = label.querySelector('input[name="flow-type"]') as HTMLInputElement;
+      label.addEventListener('click', () => {
+        labels.forEach(l => l.classList.remove('active'));
+        label.classList.add('active');
+        radio.checked = true;
+        this.currentFlowType = radio.value as any;
+        
+        // Reset selected PC when switching flow types
+        this.selectedPC = null;
+        this.updateUI();
+      });
+    });
+
+    // 1. Source User Autocomplete Search
+    const userSearch = document.getElementById('pc-flow-user-search') as HTMLInputElement;
+    const userSuggestions = document.getElementById('pc-flow-user-suggestions')!;
+    
+    userSearch?.addEventListener('input', () => {
+      const query = userSearch.value.trim().toLowerCase();
+      if (!query) {
+        userSuggestions.classList.add('hidden');
+        return;
+      }
+      
+      const users = state.masterData.users || [];
+      const filtered = users.filter((u: any) => 
+        (u.user_name && u.user_name.toLowerCase().includes(query)) ||
+        (u.dept_name && u.dept_name.toLowerCase().includes(query)) ||
+        (u.emp_no && u.emp_no.toString().includes(query))
+      );
+
+      const uniqueFiltered: any[] = [];
+      const seen = new Set();
+      filtered.forEach((u: any) => {
+        const key = u.emp_no || u.user_name;
+        if (!seen.has(key)) {
+          seen.add(key);
+          uniqueFiltered.push(u);
+        }
+      });
+
+      this.renderUserSuggestions(uniqueFiltered, userSuggestions, (user) => {
+        this.selectedUser = user;
+        userSearch.value = `${user.user_name} (${user.dept_name} / 사번:${user.emp_no || '-'})`;
+        userSuggestions.classList.add('hidden');
+        
+        // Automatically populate details if return or move
+        if (this.currentFlowType === 'return' || this.currentFlowType === 'move') {
+          this.selectedPC = null; // Reset selection
+        }
+        this.updateUI();
+      });
+    });
+
+    // Close suggestion overlays on clicking outside
+    document.addEventListener('click', (e) => {
+      const target = e.target as HTMLElement;
+      if (!target.closest('#pc-flow-user-search') && !target.closest('#pc-flow-user-suggestions')) {
+        userSuggestions.classList.add('hidden');
+      }
+      if (!target.closest('#pc-flow-target-user-search') && !target.closest('#pc-flow-target-user-suggestions')) {
+        const targetSuggestions = document.getElementById('pc-flow-target-user-suggestions');
+        targetSuggestions?.classList.add('hidden');
+      }
+      if (!target.closest('#pc-flow-stock-search') && !target.closest('#pc-flow-stock-suggestions')) {
+        const stockSuggestions = document.getElementById('pc-flow-stock-suggestions');
+        stockSuggestions?.classList.add('hidden');
+      }
+    });
+
+    // 2. Target User Autocomplete Search (For Moves)
+    const targetUserSearch = document.getElementById('pc-flow-target-user-search') as HTMLInputElement;
+    const targetSuggestions = document.getElementById('pc-flow-target-user-suggestions')!;
+    
+    targetUserSearch?.addEventListener('input', () => {
+      const query = targetUserSearch.value.trim().toLowerCase();
+      if (!query) {
+        targetSuggestions.classList.add('hidden');
+        return;
+      }
+      
+      const users = state.masterData.users || [];
+      const filtered = users.filter((u: any) => 
+        (u.user_name && u.user_name.toLowerCase().includes(query)) ||
+        (u.dept_name && u.dept_name.toLowerCase().includes(query)) ||
+        (u.emp_no && u.emp_no.toString().includes(query))
+      );
+
+      const uniqueFiltered: any[] = [];
+      const seen = new Set();
+      filtered.forEach((u: any) => {
+        const key = u.emp_no || u.user_name;
+        if (!seen.has(key)) {
+          seen.add(key);
+          uniqueFiltered.push(u);
+        }
+      });
+
+      this.renderUserSuggestions(uniqueFiltered, targetSuggestions, (user) => {
+        this.selectedTargetUser = user;
+        targetUserSearch.value = `${user.user_name} (${user.dept_name} / 사번:${user.emp_no || '-'})`;
+        targetSuggestions.classList.add('hidden');
+        this.updateUI();
+      });
+    });
+
+    // 3. Stock PC Autocomplete Search (For Checkout)
+    const stockSearch = document.getElementById('pc-flow-stock-search') as HTMLInputElement;
+    const stockSuggestions = document.getElementById('pc-flow-stock-suggestions')!;
+    
+    const showStockSuggestions = () => {
+      const query = stockSearch.value.trim().toLowerCase();
+
+      // Filter available PCs (category PC, status '대기', '미할당', or '재고')
+      const pcs = state.masterData.pc || [];
+      const filtered = pcs.filter((p: any) => {
+        const status = (p.hw_status || '').trim();
+        const matchesQuery = !query || 
+          (p.asset_code && p.asset_code.toLowerCase().includes(query)) ||
+          (p.model_name && p.model_name.toLowerCase().includes(query)) ||
+          (p.cpu && p.cpu.toLowerCase().includes(query));
+        
+        return (status === '대기' || status === '미할당' || status === '재고') && matchesQuery;
+      });
+
+      this.renderPCSuggestions(filtered, stockSuggestions, (pc) => {
+        this.selectedPC = pc;
+        stockSearch.value = `${pc.asset_code} - ${pc.model_name}`;
+        stockSuggestions.classList.add('hidden');
+        this.updateUI();
+      });
+    };
+
+    stockSearch?.addEventListener('input', showStockSuggestions);
+    stockSearch?.addEventListener('focus', showStockSuggestions);
+    stockSearch?.addEventListener('click', showStockSuggestions);
+
+    // 4. Submit Transaction
+    btnSubmit?.addEventListener('click', async () => {
+      if (!this.validateInputs()) return;
+
+      const dateVal = (document.getElementById('pc-flow-date') as HTMLInputElement).value;
+      const detailsVal = (document.getElementById('pc-flow-details') as HTMLTextAreaElement).value.trim();
+      const loginUser = state.currentUserRole === 'admin' ? '관리자' : '실무담당자';
+
+      // Build Details Message as JSON
+      const logData = {
+        type: this.currentFlowType,
+        user: this.selectedUser ? this.selectedUser.user_name : '',
+        dept: this.selectedUser ? this.selectedUser.dept_name : '',
+        targetUser: this.selectedTargetUser ? this.selectedTargetUser.user_name : '',
+        targetDept: this.selectedTargetUser ? this.selectedTargetUser.dept_name : '',
+        assetCode: this.selectedPC ? this.selectedPC.asset_code : '',
+        memo: detailsVal
+      };
+      const finalDetails = JSON.stringify(logData);
+
+      const payload: any = {
+        action: this.currentFlowType,
+        assetId: this.selectedPC.id,
+        date: dateVal,
+        details: finalDetails,
+        manager: loginUser
+      };
+
+      if (this.currentFlowType === 'checkout') {
+        payload.userName = this.selectedUser.user_name;
+        payload.dept = this.selectedUser.dept_name;
+        payload.empNo = this.selectedUser.emp_no;
+        payload.position = this.selectedUser.position || '사원';
+      } else if (this.currentFlowType === 'move') {
+        payload.userName = this.selectedTargetUser.user_name;
+        payload.dept = this.selectedTargetUser.dept_name;
+        payload.empNo = this.selectedTargetUser.emp_no;
+        payload.position = this.selectedTargetUser.position || '사원';
+      }
+
+      try {
+        const response = await fetch(`${API_BASE_URL}/api/pc/flow`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(payload)
+        });
+
+        if (response.ok) {
+          alert('PC 이동/반납 처리가 완료되었습니다.');
+          this.close();
+          onSave(); // Refresh views
+        } else {
+          const errData = await response.json();
+          alert(`오류 발생: ${errData.error || '처리 실패'}`);
+        }
+      } catch (err) {
+        console.error('API Error:', err);
+        alert('서버 전송 중 오류가 발생했습니다.');
+      }
+    });
+  }
+
+  private validateInputs(): boolean {
+    if (this.currentFlowType === 'checkout') {
+      if (!this.selectedUser) { alert('대상 사원을 선택해주세요.'); return false; }
+      if (!this.selectedPC) { alert('불출할 재고 PC를 선택해주세요.'); return false; }
+    } else if (this.currentFlowType === 'return') {
+      if (!this.selectedUser) { alert('반납 대상 사원을 선택해주세요.'); return false; }
+      if (!this.selectedPC) { alert('반납할 PC 자산을 선택해주세요.'); return false; }
+    } else if (this.currentFlowType === 'move') {
+      if (!this.selectedUser) { alert('인계 사원을 선택해주세요.'); return false; }
+      if (!this.selectedPC) { alert('이동할 PC 자산을 선택해주세요.'); return false; }
+      if (!this.selectedTargetUser) { alert('인수 사원을 선택해주세요.'); return false; }
+      if (this.selectedUser.emp_no === this.selectedTargetUser.emp_no) {
+        alert('인계자와 인수자는 동일할 수 없습니다.');
+        return false;
+      }
+    }
+    return true;
+  }
+
+  private renderUserSuggestions(users: any[], container: HTMLElement, onSelect: (user: any) => void) {
+    container.innerHTML = '';
+    if (users.length === 0) {
+      container.innerHTML = '<div style="padding: 10px; color: var(--text-muted); font-size: 13px;">일치하는 사원이 없습니다.</div>';
+      container.classList.remove('hidden');
+      return;
+    }
+
+    users.forEach(u => {
+      const item = document.createElement('div');
+      item.style.padding = '8px 12px';
+      item.style.cursor = 'pointer';
+      item.style.fontSize = '13px';
+      item.style.borderBottom = '1px solid #F3F4F6';
+      item.className = 'suggestion-item';
+      item.innerHTML = `
+        <div style="font-weight: 700; color: var(--text-main);">${u.user_name}</div>
+        <div style="font-size: 11px; color: var(--text-muted); display: flex; gap: 8px;">
+          <span>부서: ${u.dept_name}</span>
+          <span>|</span>
+          <span>사번: ${u.emp_no || '-'}</span>
+        </div>
+      `;
+      item.addEventListener('click', () => onSelect(u));
+      container.appendChild(item);
+    });
+    container.classList.remove('hidden');
+  }
+
+  private renderPCSuggestions(pcs: any[], container: HTMLElement, onSelect: (pc: any) => void) {
+    container.innerHTML = '';
+    if (pcs.length === 0) {
+      container.innerHTML = '<div style="padding: 10px; color: var(--text-muted); font-size: 13px;">불출 가능한 대기 PC 재고가 없습니다.</div>';
+      container.classList.remove('hidden');
+      return;
+    }
+
+    pcs.forEach(p => {
+      const item = document.createElement('div');
+      item.style.padding = '8px 12px';
+      item.style.cursor = 'pointer';
+      item.style.fontSize = '13px';
+      item.style.borderBottom = '1px solid #F3F4F6';
+      item.className = 'suggestion-item';
+      item.innerHTML = `
+        <div style="font-weight: 700; color: var(--primary-color);">${p.asset_code} (${p.model_name || '모델명 없음'})</div>
+        <div style="font-size: 11px; color: var(--text-muted);">
+          사양: CPU ${p.cpu || '-'} / RAM ${p.ram || '-'} / 위치: ${p.location || '-'}
+        </div>
+      `;
+      item.addEventListener('click', () => onSelect(p));
+      container.appendChild(item);
+    });
+    container.classList.remove('hidden');
+  }
+
+  private updateUI() {
+    // 1. Hide/Show dynamic sections based on flow type
+    const stockContainer = document.getElementById('stock-pc-search-container')!;
+    const targetUserContainer = document.getElementById('target-user-search-container')!;
+    const userPcsContainer = document.getElementById('user-pcs-container')!;
+    const labelStep2 = document.getElementById('user-search-label')!;
+
+    if (this.currentFlowType === 'checkout') {
+      stockContainer.classList.remove('hidden');
+      targetUserContainer.classList.add('hidden');
+      userPcsContainer.classList.add('hidden');
+      labelStep2.textContent = '2. 불출 대상 사원 검색';
+    } else if (this.currentFlowType === 'return') {
+      stockContainer.classList.add('hidden');
+      targetUserContainer.classList.add('hidden');
+      userPcsContainer.classList.remove('hidden');
+      labelStep2.textContent = '2. 반납 대상 사원 검색';
+    } else if (this.currentFlowType === 'move') {
+      stockContainer.classList.add('hidden');
+      targetUserContainer.classList.remove('hidden');
+      userPcsContainer.classList.remove('hidden');
+      labelStep2.textContent = '2. 인계 사원 검색';
+    }
+
+    // 2. Update summary panels on the right
+    const summaryUserName = document.getElementById('summary-user-name')!;
+    const summaryUserDept = document.getElementById('summary-user-dept')!;
+    if (this.selectedUser) {
+      summaryUserName.textContent = this.selectedUser.user_name;
+      summaryUserDept.textContent = `${this.selectedUser.dept_name} / 사번: ${this.selectedUser.emp_no || '-'}`;
+    } else {
+      summaryUserName.textContent = '선택된 사원 없음';
+      summaryUserDept.textContent = '-';
+    }
+
+    const summaryTargetCard = document.getElementById('summary-target-user-card')!;
+    const summaryTargetUserName = document.getElementById('summary-target-user-name')!;
+    const summaryTargetUserDept = document.getElementById('summary-target-user-dept')!;
+    if (this.currentFlowType === 'move') {
+      summaryTargetCard.classList.remove('hidden');
+      if (this.selectedTargetUser) {
+        summaryTargetUserName.textContent = this.selectedTargetUser.user_name;
+        summaryTargetUserDept.textContent = `${this.selectedTargetUser.dept_name} / 사번: ${this.selectedTargetUser.emp_no || '-'}`;
+      } else {
+        summaryTargetUserName.textContent = '선택된 사원 없음';
+        summaryTargetUserDept.textContent = '-';
+      }
+    } else {
+      summaryTargetCard.classList.add('hidden');
+    }
+
+    const summaryPcCode = document.getElementById('summary-pc-code')!;
+    const summaryPcModel = document.getElementById('summary-pc-model')!;
+    if (this.selectedPC) {
+      summaryPcCode.textContent = this.selectedPC.asset_code;
+      summaryPcModel.textContent = `${this.selectedPC.model_name || '모델명 없음'} (${this.selectedPC.cpu || '-'} / ${this.selectedPC.ram || '-'})`;
+    } else {
+      summaryPcCode.textContent = '선택된 PC 없음';
+      summaryPcModel.textContent = '-';
+    }
+
+    // 3. Render user's active PCs list on the right (For Return & Move)
+    const userPcsList = document.getElementById('user-pcs-list')!;
+    if (this.selectedUser && (this.currentFlowType === 'return' || this.currentFlowType === 'move')) {
+      const allPcs = state.masterData.pc || [];
+      const userPcs = allPcs.filter((p: any) => 
+        (p.emp_no && p.emp_no.toString() === this.selectedUser.emp_no?.toString()) ||
+        (p.user_current && p.user_current === this.selectedUser.user_name)
+      );
+
+      if (userPcs.length === 0) {
+        userPcsList.innerHTML = '<div style="font-size: 12px; color: var(--text-muted); padding: 8px 0;">이 사용자가 소유한 PC 자산이 없습니다.</div>';
+      } else {
+        userPcsList.innerHTML = userPcs.map(p => {
+          const isSelected = this.selectedPC && this.selectedPC.id === p.id;
+          return `
+            <div class="user-pc-item ${isSelected ? 'selected' : ''}" data-id="${p.id}" style="padding: 10px; border: 1px solid ${isSelected ? 'var(--primary-color)' : 'var(--border-color)'}; border-radius: 4px; cursor: pointer; background: ${isSelected ? 'var(--primary-light)' : 'white'}; transition: all 0.2s;">
+              <div style="font-weight: 700; font-size: 13px; color: ${isSelected ? 'var(--primary-color)' : 'var(--text-main)'};">${p.asset_code}</div>
+              <div style="font-size: 11px; color: var(--text-muted); margin-top: 2px;">
+                ${p.model_name || '모델명 없음'} | CPU: ${p.cpu || '-'} | RAM: ${p.ram || '-'}
+              </div>
+            </div>
+          `;
+        }).join('');
+
+        // Bind clicks to list items
+        userPcsList.querySelectorAll('.user-pc-item').forEach(item => {
+          item.addEventListener('click', () => {
+            const pcId = item.getAttribute('data-id');
+            const foundPC = userPcs.find(p => p.id === pcId);
+            if (foundPC) {
+              this.selectedPC = foundPC;
+              this.updateUI();
+            }
+          });
+        });
+      }
+    } else {
+      userPcsList.innerHTML = '';
+    }
+  }
+
+  private renderHTML(): string {
+    const overlayStyle = `
+      position: fixed; top: 0; left: 0; right: 0; bottom: 0;
+      background: rgba(0, 0, 0, 0.4); display: flex; align-items: center; justify-content: center;
+      z-index: 1000; transition: opacity 0.3s;
+    `;
+    const contentStyle = `
+      background: white; border-radius: 12px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
+      overflow: hidden; max-height: 90vh; width: 950px; display: flex; flex-direction: column;
+    `;
+    const labelStyle = 'display: block; font-size: 13px; font-weight: 700; color: var(--text-muted); margin-bottom: 8px;';
+    const inputStyle = 'width: 100%; height: 38px; padding: 0 12px; border: 1px solid var(--border-color); border-radius: 4px; font-size: 13px; outline: none; box-sizing: border-box;';
+    const inputWithIconStyle = 'width: 100%; height: 38px; padding: 0 12px 0 36px; border: 1px solid var(--border-color); border-radius: 4px; font-size: 13px; outline: none; box-sizing: border-box;';
+
+    return `
+      <div id="pc-flow-modal" class="modal-overlay hidden" style="${overlayStyle}">
+        <div class="modal-content" style="${contentStyle}">
+          
+          <div class="modal-header" style="background: var(--primary-color); padding: 16px 24px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-color);">
+            <h2 style="margin: 0; font-size: 18px; font-weight: 800; color: white; display: flex; align-items: center; gap: 8px;">
+              <i data-lucide="refresh-cw"></i> PC 이동/반납 (불출/반납/이동)
+            </h2>
+            <button id="btn-close-pc-flow-modal" class="btn-icon" aria-label="닫기" style="font-size: 28px; color: white; background: none; border: none; cursor: pointer; line-height: 1;">&times;</button>
+          </div>
+
+          <div class="modal-body" style="padding: 24px; overflow-y: auto; display: flex; gap: 24px;">
+            <!-- 왼쪽 영역: 입력 폼 -->
+            <div style="flex: 1.2; display: flex; flex-direction: column; gap: 20px;">
+              
+              <!-- 1. 처리 유형 -->
+              <div>
+                <label style="${labelStyle}">1. 처리 유형 선택</label>
+                <div style="display: flex; gap: 12px;">
+                  <label class="flow-type-label active" style="flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; border: 1px solid var(--border-color); border-radius: 6px; cursor: pointer; font-size: 14px; font-weight: 600;">
+                    <input type="radio" name="flow-type" value="checkout" checked style="display:none;" />
+                    불출 (지급)
+                  </label>
+                  <label class="flow-type-label" style="flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; border: 1px solid var(--border-color); border-radius: 6px; cursor: pointer; font-size: 14px; font-weight: 600;">
+                    <input type="radio" name="flow-type" value="return" style="display:none;" />
+                    입고 (반납)
+                  </label>
+                  <label class="flow-type-label" style="flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; border: 1px solid var(--border-color); border-radius: 6px; cursor: pointer; font-size: 14px; font-weight: 600;">
+                    <input type="radio" name="flow-type" value="move" style="display:none;" />
+                    이동 (이관)
+                  </label>
+                </div>
+              </div>
+
+              <!-- 2. 대상 사용자 검색 -->
+              <div style="position: relative;">
+                <label id="user-search-label" style="${labelStyle}">2. 대상 사원 검색</label>
+                <div style="position: relative; display: flex; align-items: center;">
+                  <input type="text" id="pc-flow-user-search" placeholder="사원명, 부서, 사번 검색..." style="${inputWithIconStyle}" />
+                  <i data-lucide="search" style="position: absolute; left: 10px; width: 16px; height: 16px; color: var(--text-muted);"></i>
+                </div>
+                <div id="pc-flow-user-suggestions" class="hidden" style="position: absolute; top: 100%; left: 0; right: 0; max-height: 200px; overflow-y: auto; background: white; border: 1px solid var(--border-color); border-radius: 4px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); z-index: 1000; margin-top: 4px;"></div>
+              </div>
+
+              <!-- 3. 새 인수자 검색 (이동 시 노출) -->
+              <div id="target-user-search-container" class="hidden" style="position: relative;">
+                <label style="${labelStyle}">새 인수 사원 검색</label>
+                <div style="position: relative; display: flex; align-items: center;">
+                  <input type="text" id="pc-flow-target-user-search" placeholder="사원명, 부서, 사번 검색..." style="${inputWithIconStyle}" />
+                  <i data-lucide="search" style="position: absolute; left: 10px; width: 16px; height: 16px; color: var(--text-muted);"></i>
+                </div>
+                <div id="pc-flow-target-user-suggestions" class="hidden" style="position: absolute; top: 100%; left: 0; right: 0; max-height: 200px; overflow-y: auto; background: white; border: 1px solid var(--border-color); border-radius: 4px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); z-index: 1000; margin-top: 4px;"></div>
+              </div>
+
+              <!-- 4. 재고 PC 검색 (불출 시 노출) -->
+              <div id="stock-pc-search-container" style="position: relative;">
+                <label style="${labelStyle}">3. 불출할 재고 PC 선택</label>
+                <div style="position: relative; display: flex; align-items: center;">
+                  <input type="text" id="pc-flow-stock-search" placeholder="자산코드 또는 모델명 검색..." style="${inputWithIconStyle}" />
+                  <i data-lucide="monitor" style="position: absolute; left: 10px; width: 16px; height: 16px; color: var(--text-muted);"></i>
+                </div>
+                <div id="pc-flow-stock-suggestions" class="hidden" style="position: absolute; top: 100%; left: 0; right: 0; max-height: 200px; overflow-y: auto; background: white; border: 1px solid var(--border-color); border-radius: 4px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); z-index: 1000; margin-top: 4px;"></div>
+              </div>
+
+              <!-- 5. 상세 공통 입력 -->
+              <div style="display: flex; gap: 16px;">
+                <div style="flex: 1;">
+                  <label style="${labelStyle.replace('margin-bottom: 8px;', 'margin-bottom: 6px;')}">처리 일자</label>
+                  <input type="date" id="pc-flow-date" style="${inputStyle}" />
+                </div>
+                <div style="flex: 2;">
+                  <label style="${labelStyle.replace('margin-bottom: 8px;', 'margin-bottom: 6px;')}">상세 사유</label>
+                  <textarea id="pc-flow-details" rows="2" placeholder="미입력 시 기본 문구로 자동 입력됩니다." style="width: 100%; padding: 10px; border: 1px solid var(--border-color); border-radius: 4px; font-family: inherit; font-size: 13px; resize: none; box-sizing: border-box; outline: none;"></textarea>
+                </div>
+              </div>
+
+            </div>
+
+            <!-- 오른쪽 영역: 선택 요약 & 사원 소유 자산 목록 -->
+            <div style="flex: 0.8; border-left: 1px solid var(--border-color); padding-left: 24px; display: flex; flex-direction: column; gap: 16px;">
+              <h3 style="margin: 0; font-size: 14px; font-weight: 800; border-bottom: 1px solid var(--border-color); padding-bottom: 8px;">선택 내역 요약</h3>
+              
+              <!-- 사원 요약 카드 -->
+              <div id="summary-user-card" style="padding: 12px; background: var(--bg-light); border: 1px solid var(--border-color); border-radius: 6px; display: flex; flex-direction: column; gap: 4px;">
+                <div style="font-size: 11px; color: var(--text-muted);">대상 사원</div>
+                <div id="summary-user-name" style="font-weight: 700; font-size: 14px;">선택된 사원 없음</div>
+                <div id="summary-user-dept" style="font-size: 12px; color: var(--text-muted);">-</div>
+              </div>
+
+              <!-- 인수 사원 요약 카드 (이동 전용) -->
+              <div id="summary-target-user-card" class="summary-card hidden" style="padding: 12px; background: #EEF2F6; border: 1px solid var(--border-color); border-radius: 6px; display: flex; flex-direction: column; gap: 4px;">
+                <div style="font-size: 11px; color: var(--text-muted);">새 인수 사원</div>
+                <div id="summary-target-user-name" style="font-weight: 700; font-size: 14px;">선택된 사원 없음</div>
+                <div id="summary-target-user-dept" style="font-size: 12px; color: var(--text-muted);">-</div>
+              </div>
+
+              <!-- 대상 PC 자산 요약 카드 -->
+              <div id="summary-pc-card" style="padding: 12px; background: var(--bg-light); border: 1px solid var(--border-color); border-radius: 6px; display: flex; flex-direction: column; gap: 4px;">
+                <div style="font-size: 11px; color: var(--text-muted);">대상 PC 자산</div>
+                <div id="summary-pc-code" style="font-weight: 700; font-size: 14px; color: var(--primary-color);">선택된 PC 없음</div>
+                <div id="summary-pc-model" style="font-size: 12px; color: var(--text-muted);">-</div>
+              </div>
+
+              <!-- 사용자 보유 PC 목록 선택 (반납/이동 시) -->
+              <div id="user-pcs-container" class="hidden" style="display: flex; flex-direction: column; gap: 8px;">
+                <div style="font-size: 12px; font-weight: 700; color: var(--text-muted);">사원 보유 PC 선택 (클릭하여 매핑)</div>
+                <div id="user-pcs-list" style="display: flex; flex-direction: column; gap: 8px; max-height: 200px; overflow-y: auto;"></div>
+              </div>
+            </div>
+
+          </div>
+
+          <div class="modal-footer" style="padding: 16px 24px; border-top: 1px solid var(--border-color); display: flex; justify-content: flex-end; gap: 12px; background: var(--bg-light);">
+            <button id="btn-cancel-pc-flow-modal" class="btn btn-outline" style="height: 42px;">취소</button>
+            <button id="btn-submit-pc-flow" class="btn btn-primary" style="height: 42px;">이동/반납 처리 완료</button>
+          </div>
+
+        </div>
+      </div>
+      
+      <style>
+        .flow-type-label {
+          transition: all 0.2s;
+          border-color: var(--border-color);
+          background: white;
+          color: var(--text-muted);
+        }
+        .flow-type-label:hover {
+          border-color: var(--primary-color);
+          color: var(--primary-color);
+        }
+        .flow-type-label.active {
+          border-color: var(--primary-color);
+          background: var(--primary-light);
+          color: var(--primary-color);
+        }
+        .suggestion-item:hover {
+          background-color: var(--primary-light) !important;
+        }
+      </style>
+    `;
+  }
+}
+
+export const pcFlowModal = PCFlowModal.getInstance();

src/components/Modal/PartsMasterModal.ts

@@ -0,0 +1,166 @@
+import { state, savePartsMaster, deletePartsMaster } from '../../core/state';
+import { BaseModal } from './BaseModal';
+import { generateOptionsHTML, setFieldValue, getFieldValue } from './ModalUtils';
+import { createIcons, X, Save, Database, Edit2, Plus } from 'lucide';
+import { UI_TEXT } from '../../core/schema';
+
+class PartsMasterModal extends BaseModal {
+  constructor() {
+    super('parts-master', '부품 표준 정보');
+  }
+
+  protected renderFrameHTML(): string {
+    const sharedStyle = 'height: 38px !important; box-sizing: border-box !important; font-size: 13px; margin: 0;';
+    const inputStyle = sharedStyle;
+    const selectStyle = sharedStyle;
+
+    return `
+      <div id="parts-master-asset-modal" class="modal-overlay hidden">
+        <div class="modal-content" style="max-width: 500px; width: 100%;">
+          <div class="modal-header">
+            <h2 id="parts-master-modal-title" style="margin: 0; font-size: 18px; font-weight: 800; color: white;">${this.title}</h2>
+            <button id="btn-close-parts-master-modal" class="btn-icon" aria-label="닫기" style="font-size: 28px; color: white; background: none; border: none; cursor: pointer; line-height: 1;">&times;</button>
+          </div>
+          <div class="modal-body" style="padding: 24px; overflow-y: auto;">
+            <form id="parts-master-asset-form" class="grid-form" style="display: flex; flex-direction: column; gap: 16px;">
+              <input type="hidden" id="parts-master-id" name="id" />
+              
+              <div class="form-group" style="display: flex; flex-direction: column; gap: 6px;">
+                <label style="font-size: 11px; font-weight: 700; color: var(--text-muted);">부품 분류</label>
+                <select id="parts-master-category" name="category" style="${selectStyle}">
+                  <option value="CPU">CPU</option>
+                  <option value="GPU">GPU</option>
+                  <option value="RAM">RAM</option>
+                </select>
+              </div>
+
+              <div class="form-group" style="display: flex; flex-direction: column; gap: 6px;">
+                <label style="font-size: 11px; font-weight: 700; color: var(--text-muted);">부품 표준 명칭</label>
+                <input type="text" id="parts-master-component-name" name="component_name" placeholder="예: Intel Core i7-14700K" required style="${inputStyle} width: 100%;" />
+              </div>
+
+              <div class="form-group" style="display: flex; flex-direction: column; gap: 6px;">
+                <label style="font-size: 11px; font-weight: 700; color: var(--text-muted);">성능 등급</label>
+                <input type="text" id="parts-master-score-tier" name="score_tier" placeholder="예: i7 / S / 최적" required style="${inputStyle} width: 100%;" />
+              </div>
+
+              <div class="form-group" style="display: flex; flex-direction: column; gap: 6px;">
+                <label style="font-size: 11px; font-weight: 700; color: var(--text-muted);">감점 점수 (양수로 입력)</label>
+                <input type="number" id="parts-master-deduction" name="deduction" placeholder="예: 5" required style="${inputStyle} width: 100%;" />
+              </div>
+            </form>
+          </div>
+          <div class="modal-footer" style="display: flex; justify-content: space-between; align-items: center; padding: 16px 24px; background: #f8fafc; border-top: 1px solid var(--border-color);">
+            <button id="btn-delete-parts-master-asset" class="btn btn-outline btn-danger" style="height: 42px;">삭제</button>
+            <div class="footer-actions" style="display: flex; gap: 8px;">
+              <button id="btn-revert-parts-master-edit" class="btn btn-outline hidden" style="height: 42px;">수정 취소</button>
+              <button id="btn-cancel-parts-master-modal" class="btn btn-outline" style="height: 42px;">닫기</button>
+              <button id="btn-save-parts-master-asset" class="btn btn-primary" style="height: 42px;">수정</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  protected initChildLogic(onSave: () => void, closeModals: () => void): void {
+    const saveBtn = document.getElementById('btn-save-parts-master-asset')!;
+    const revertBtn = document.getElementById('btn-revert-parts-master-edit')!;
+    const deleteBtn = document.getElementById('btn-delete-parts-master-asset')!;
+
+    saveBtn.addEventListener('click', async () => {
+      if (!this.currentAsset) return;
+      if (!this.isEditMode) {
+        this.setEditLockMode('edit');
+        this.isEditMode = true;
+        return;
+      }
+
+      const category = (document.getElementById('parts-master-category') as HTMLSelectElement).value;
+      const compName = (document.getElementById('parts-master-component-name') as HTMLInputElement).value.trim();
+      const tier = (document.getElementById('parts-master-score-tier') as HTMLInputElement).value.trim();
+      const deductStr = (document.getElementById('parts-master-deduction') as HTMLInputElement).value;
+
+      if (!compName || !tier || deductStr === '') {
+        alert('모든 필드를 올바르게 입력해 주세요.');
+        return;
+      }
+
+      const updated = {
+        id: this.currentAsset.id || null,
+        category,
+        component_name: compName,
+        score_tier: tier,
+        deduction: parseInt(deductStr, 10)
+      };
+
+      if (await savePartsMaster(updated)) {
+        alert(UI_TEXT.MESSAGES.SAVE_SUCCESS);
+        onSave(); this.close(); closeModals();
+      }
+    });
+
+    revertBtn.addEventListener('click', () => {
+      this.setEditLockMode('view');
+      if (this.currentAsset) this.fillFormData(this.currentAsset);
+    });
+
+    deleteBtn.addEventListener('click', async () => {
+      if (!this.currentAsset || !this.currentAsset.id) return;
+      if (!confirm('정말로 이 부품 마스터 정보를 삭제하시겠습니까?\n삭제 시 기존 등록 PC 중 이 부품명을 사용하는 PC의 자동완성 정합성 체크에 영향을 줄 수 있습니다.')) return;
+
+      if (await deletePartsMaster(this.currentAsset.id)) {
+        alert('성공적으로 삭제되었습니다.');
+        onSave(); this.close(); closeModals();
+      }
+    });
+  }
+
+  protected fillFormData(asset: any): void {
+    setFieldValue('parts-master-id', asset.id || '');
+    setFieldValue('parts-master-category', asset.category || 'CPU');
+    setFieldValue('parts-master-component-name', asset.component_name || '');
+    setFieldValue('parts-master-score-tier', asset.score_tier || '');
+    setFieldValue('parts-master-deduction', asset.deduction !== undefined ? asset.deduction.toString() : '0');
+  }
+
+  protected onAfterOpen(asset: any, mode: string): void {
+    const titleEl = document.getElementById('parts-master-modal-title');
+
+    if (titleEl) {
+      if (mode === 'add') {
+        titleEl.textContent = '신규 부품 마스터 등록';
+      } else {
+        titleEl.textContent = '부품 마스터 상세 편집';
+      }
+    }
+
+    const deleteBtn = document.getElementById('btn-delete-parts-master-asset')!;
+    const saveBtn = document.getElementById('btn-save-parts-master-asset')!;
+    
+    // 추가 모드일 때는 삭제 버튼 숨김
+    deleteBtn.style.display = (mode === 'add') ? 'none' : 'block';
+
+    if (mode === 'add') {
+      this.setEditLockMode('edit');
+      this.isEditMode = true;
+      saveBtn.textContent = '등록';
+      saveBtn.style.display = 'block';
+    } else {
+      this.setEditLockMode('view');
+      this.isEditMode = false;
+      saveBtn.textContent = '수정';
+      saveBtn.style.display = 'block';
+    }
+  }
+}
+
+export const partsMasterModal = new PartsMasterModal();
+
+export function initPartsMasterModal(onSave: () => void, closeModals: () => void) {
+  partsMasterModal.init(onSave, closeModals);
+}
+
+export function openPartsMasterModal(asset: any, mode: 'view' | 'edit' | 'add' = 'view') {
+  partsMasterModal.open(asset, mode);
+}

src/components/Modal/SharedData.ts

@@ -3,7 +3,7 @@
  */
 
 // 구매법인 목록
-export const CORP_LIST = ['한맥', '삼안', '장헌', '한라', 'PTC', '바론'];
+export const CORP_LIST = ['한맥', '삼안', 'PTC', '바론'];
 
 // 사용조직 목록
 export const ORG_LIST = ['한맥', '삼안', '장헌', '한라', 'PTC', '기술개발센터', '총괄기획실'];
@@ -30,7 +30,7 @@ export const CATEGORY_TYPE_MAP: Record<string, string[]> = {
 // 설치위치 종속성 데이터
 export const LOCATION_DATA: Record<string, string[]> = {
   '한맥빌딩': ['MDF실', '1층', '2층', '3층', '4층', '5층', '6층', '7층', '파고라'],
-  '기술개발센터': ['서버실', 'BLUE ZONE', 'GREEN ZONE', 'ORANGE ZONE', '회의실2', '회의실3', '회의실5', '회의실6', '회의실7', '사이니지룸'],
+  '기술개발센터': ['서버실', '센터내부'],
   '유니온빌딩': ['4층', '5층', '6층'],
   '뉴코아빌딩': ['4층', '6층', '7층'],
   'IDC': ['서관202', '서관203', '서관204', '서관205', '동관53', '동관54']
@@ -60,10 +60,17 @@ export const IMAGE_LOCATIONS: Record<string, Record<string, string[]>> = {
     '서버실': [
       'img/location_photo/기술개발센터/서버실/서버실_1.png',
       'img/location_photo/기술개발센터/서버실/서버실_2.png'
-    ]
+    ],
+    '센터내부': ['img/location_photo/기술개발센터/센터내부/센터내부.png']
   },
   '한맥빌딩': {
-    '7층': ['img/location_photo/한맥빌딩/7층_로비.png'],
+    '1층': ['img/location_photo/한맥빌딩/1층.png'],
+    '2층': ['img/location_photo/한맥빌딩/2층.png'],
+    '3층': ['img/location_photo/한맥빌딩/3층.png'],
+    '4층': ['img/location_photo/한맥빌딩/4층.png'],
+    '5층': ['img/location_photo/한맥빌딩/5층.png'],
+    '6층': ['img/location_photo/한맥빌딩/6층.png'],
+    '7층': ['img/location_photo/한맥빌딩/7층.png'],
     'MDF실': [
       'img/location_photo/한맥빌딩/MDF실/MDF_1.png',
       'img/location_photo/한맥빌딩/MDF실/MDF_2.png',

src/components/Modal/UserModal.ts

@@ -0,0 +1,171 @@
+import { state, saveSystemUser, deleteSystemUser } from '../../core/state';
+import { BaseModal } from './BaseModal';
+import { setFieldValue } from './ModalUtils';
+import { createIcons, X, Save } from 'lucide';
+import { UI_TEXT } from '../../core/schema';
+
+class UserModal extends BaseModal {
+  constructor() {
+    super('user', '임직원 정보');
+  }
+
+  protected renderFrameHTML(): string {
+    const sharedStyle = 'height: 38px !important; box-sizing: border-box !important; font-size: 13px; margin: 0;';
+    const inputStyle = sharedStyle;
+
+    return `
+      <div id="user-asset-modal" class="modal-overlay hidden">
+        <div class="modal-content" style="max-width: 500px; width: 100%;">
+          <div class="modal-header">
+            <h2 id="user-modal-title" style="margin: 0; font-size: 18px; font-weight: 800; color: white;">\${this.title}</h2>
+            <button id="btn-close-user-modal" class="btn-icon" aria-label="닫기" style="font-size: 28px; color: white; background: none; border: none; cursor: pointer; line-height: 1;">&times;</button>
+          </div>
+          <div class="modal-body" style="padding: 24px; overflow-y: auto;">
+            <form id="user-asset-form" class="grid-form" style="display: flex; flex-direction: column; gap: 16px;">
+              <input type="hidden" id="user-id" name="id" />
+              
+              <div class="form-group" style="display: flex; flex-direction: column; gap: 6px;">
+                <label style="font-size: 11px; font-weight: 700; color: var(--text-muted);">사번</label>
+                <input type="text" id="user-emp-no" name="emp_no" placeholder="예: HM202601" required style="\${inputStyle} width: 100%;" />
+              </div>
+
+              <div class="form-group" style="display: flex; flex-direction: column; gap: 6px;">
+                <label style="font-size: 11px; font-weight: 700; color: var(--text-muted);">사용자명</label>
+                <input type="text" id="user-name-input" name="user_name" placeholder="예: 홍길동" required style="\${inputStyle} width: 100%;" />
+              </div>
+
+              <div class="form-group" style="display: flex; flex-direction: column; gap: 6px;">
+                <label style="font-size: 11px; font-weight: 700; color: var(--text-muted);">사용조직 (부서)</label>
+                <input type="text" id="user-dept" name="dept_name" placeholder="예: 기술개발센터" required style="\${inputStyle} width: 100%;" />
+              </div>
+
+              <div class="form-group" style="display: flex; flex-direction: column; gap: 6px;">
+                <label style="font-size: 11px; font-weight: 700; color: var(--text-muted);">직무 (직급)</label>
+                <input type="text" id="user-position-input" name="position" placeholder="예: BIM모델러" required style="\${inputStyle} width: 100%;" />
+              </div>
+
+              <div class="form-group" style="display: flex; flex-direction: column; gap: 6px;">
+                <label style="font-size: 11px; font-weight: 700; color: var(--text-muted);">상태</label>
+                <select id="user-status" name="status" style="\${sharedStyle}">
+                  <option value="재직">재직</option>
+                  <option value="퇴직">퇴직</option>
+                </select>
+              </div>
+            </form>
+          </div>
+          <div class="modal-footer" style="display: flex; justify-content: space-between; align-items: center; padding: 16px 24px; background: #f8fafc; border-top: 1px solid var(--border-color);">
+            <button id="btn-delete-user-asset" class="btn btn-outline btn-danger" style="height: 42px;">삭제</button>
+            <div class="footer-actions" style="display: flex; gap: 8px;">
+              <button id="btn-revert-user-edit" class="btn btn-outline hidden" style="height: 42px;">수정 취소</button>
+              <button id="btn-cancel-user-modal" class="btn btn-outline" style="height: 42px;">닫기</button>
+              <button id="btn-save-user-asset" class="btn btn-primary" style="height: 42px;">수정</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  protected initChildLogic(onSave: () => void, closeModals: () => void): void {
+    const saveBtn = document.getElementById('btn-save-user-asset')!;
+    const revertBtn = document.getElementById('btn-revert-user-edit')!;
+    const deleteBtn = document.getElementById('btn-delete-user-asset')!;
+
+    saveBtn.addEventListener('click', async () => {
+      if (!this.currentAsset) return;
+      if (!this.isEditMode) {
+        this.setEditLockMode('edit');
+        this.isEditMode = true;
+        return;
+      }
+
+      const empNo = (document.getElementById('user-emp-no') as HTMLInputElement).value.trim();
+      const userName = (document.getElementById('user-name-input') as HTMLInputElement).value.trim();
+      const deptName = (document.getElementById('user-dept') as HTMLInputElement).value.trim();
+      const position = (document.getElementById('user-position-input') as HTMLInputElement).value.trim();
+      const status = (document.getElementById('user-status') as HTMLSelectElement).value;
+
+      if (!empNo || !userName || !deptName || !position) {
+        alert('모든 필수 입력 필드를 채워주세요.');
+        return;
+      }
+
+      const updated = {
+        id: this.currentAsset.id || null,
+        emp_no: empNo,
+        user_name: userName,
+        dept_name: deptName,
+        position: position,
+        status: status
+      };
+
+      if (await saveSystemUser(updated)) {
+        alert(UI_TEXT.MESSAGES.SAVE_SUCCESS);
+        onSave(); this.close(); closeModals();
+      }
+    });
+
+    revertBtn.addEventListener('click', () => {
+      this.setEditLockMode('view');
+      if (this.currentAsset) this.fillFormData(this.currentAsset);
+    });
+
+    deleteBtn.addEventListener('click', async () => {
+      if (!this.currentAsset || !this.currentAsset.id) return;
+      if (!confirm('정말로 이 임직원 정보를 삭제하시겠습니까?')) return;
+
+      if (await deleteSystemUser(this.currentAsset.id)) {
+        alert('성공적으로 삭제되었습니다.');
+        onSave(); this.close(); closeModals();
+      }
+    });
+  }
+
+  protected fillFormData(asset: any): void {
+    setFieldValue('user-id', asset.id || '');
+    setFieldValue('user-emp-no', asset.emp_no || '');
+    setFieldValue('user-name-input', asset.user_name || '');
+    setFieldValue('user-dept', asset.dept_name || '');
+    setFieldValue('user-position-input', asset.position || '');
+    setFieldValue('user-status', asset.status || '재직');
+  }
+
+  protected onAfterOpen(asset: any, mode: string): void {
+    const titleEl = document.getElementById('user-modal-title');
+
+    if (titleEl) {
+      if (mode === 'add') {
+        titleEl.textContent = '신규 임직원 등록';
+      } else {
+        titleEl.textContent = '임직원 정보 수정';
+      }
+    }
+
+    const deleteBtn = document.getElementById('btn-delete-user-asset')!;
+    const saveBtn = document.getElementById('btn-save-user-asset')!;
+    
+    deleteBtn.style.display = (mode === 'add') ? 'none' : 'block';
+
+    if (mode === 'add') {
+      this.setEditLockMode('edit');
+      this.isEditMode = true;
+      saveBtn.textContent = '등록';
+      saveBtn.style.display = 'block';
+    } else {
+      this.setEditLockMode('view');
+      this.isEditMode = false;
+      saveBtn.textContent = '수정';
+      saveBtn.style.display = 'block';
+    }
+  }
+}
+
+export const userModal = new UserModal();
+
+export function initUserModal(onSave: () => void, closeModals: () => void) {
+  userModal.init(onSave, closeModals);
+}
+
+export function openUserModal(asset: any, mode: 'view' | 'edit' | 'add' = 'view') {
+  userModal.open(asset, mode);
+}

src/components/Navigation.ts

@@ -3,7 +3,7 @@ import { state } from '../core/state';
 const MENU_CONFIG: any = {
   hw: {
     label: '하드웨어',
-    tabs: ['서버', 'PC', '스토리지', '공간정보장비', 'PC부품', '네트워크', '업무지원장비']
+    tabs: ['대시보드', '서버', 'PC', '스토리지', '공간정보장비', 'PC부품', '부품 마스터', '네트워크', '업무지원장비']
   },
   sw: {
     label: '소프트웨어',
@@ -11,7 +11,7 @@ const MENU_CONFIG: any = {
   },
   ops: {
     label: '운영지원',
-    tabs: ['클라우드', '도메인', '비용관리']
+    tabs: ['클라우드', '도메인', '비용관리', '사용자']
   },
   vip: {
     label: '내빈/외빈',
@@ -32,6 +32,23 @@ export function renderNavigation(onTabChange: (tab: string) => void) {
     // 기존 메뉴 렌더링
     (Object.keys(MENU_CONFIG) as Array<keyof typeof MENU_CONFIG>).forEach(catKey => {
       const config = MENU_CONFIG[catKey];
+      
+      // 역할에 따라 노출할 서브탭 필터링
+      const visibleTabs = config.tabs.filter((tab: string) => {
+        if (state.currentUserRole === 'admin') {
+          // 관리자(admin)일 경우 대시보드 탭만 노출
+          return tab === '대시보드';
+        } else {
+          // 실무자(user)일 경우 대시보드 제외한 모든 탭 노출
+          return tab !== '대시보드';
+        }
+      });
+
+      // 노출할 서브탭이 없으면 해당 대분류 GNB 메뉴도 렌더링하지 않음
+      if (visibleTabs.length === 0) {
+        return;
+      }
+
       const isActive = state.activeCategory === catKey;
 
       const group = document.createElement('div');
@@ -40,11 +57,11 @@ export function renderNavigation(onTabChange: (tab: string) => void) {
       const trigger = document.createElement('div');
       trigger.className = 'gnb-trigger';
       trigger.textContent = config.label;
-      
+
       trigger.addEventListener('click', () => {
         if (state.activeCategory !== catKey) {
           state.activeCategory = catKey as any;
-          const firstTab = config.tabs[0];
+          const firstTab = visibleTabs[0] || config.tabs[0];
           state.activeSubTab = firstTab;
           render();
           onTabChange(firstTab);
@@ -55,7 +72,8 @@ export function renderNavigation(onTabChange: (tab: string) => void) {
       const shelf = document.createElement('div');
       shelf.className = 'lnb-shelf';
       
-      config.tabs.forEach((tab: string) => {
+      visibleTabs.forEach((tab: string) => {
+        if (tab === '부품 마스터') return; // 메뉴바에서 표시 생략
         const item = document.createElement('div');
         item.className = `lnb-item ${isActive && state.activeSubTab === tab ? 'active' : ''}`;
         item.textContent = tab;
@@ -73,20 +91,26 @@ export function renderNavigation(onTabChange: (tab: string) => void) {
       navContainer.appendChild(group);
     });
 
-    // ─── '관리자' 메뉴 별도 추가 (GNB 스타일) ───
-    const adminGroup = document.createElement('div');
-    adminGroup.className = 'nav-group';
-    
-    const adminTrigger = document.createElement('div');
-    adminTrigger.className = 'gnb-trigger admin-trigger';
-    adminTrigger.innerHTML = '관리자';
-    
-    adminTrigger.addEventListener('click', () => {
-      window.open('/map_editor.html', '_blank');
-    });
-    
-    adminGroup.appendChild(adminTrigger);
-    navContainer.appendChild(adminGroup);
+    // ─── '관리자' 메뉴 별도 추가 (GNB 스타일 - 관리자 역할일 때만 노출) ───
+    if (state.currentUserRole === 'admin') {
+      const adminGroup = document.createElement('div');
+      adminGroup.className = 'nav-group';
+      
+      const adminTrigger = document.createElement('div');
+      adminTrigger.className = 'gnb-trigger';
+      adminTrigger.innerHTML = '관리자';
+      adminTrigger.style.color = 'var(--text-muted)';
+      adminTrigger.style.borderLeft = '1px solid var(--border-color)';
+      adminTrigger.style.marginLeft = '1rem';
+      adminTrigger.style.paddingLeft = '1.5rem';
+      
+      adminTrigger.addEventListener('click', () => {
+        window.open('/map_editor.html', '_blank');
+      });
+      
+      adminGroup.appendChild(adminTrigger);
+      navContainer.appendChild(adminGroup);
+    }
   };
 
   render();