feat: QR 자산 스캔 점검, 모바일 웹뷰 및 관리자 승인 시스템 구현 (DB 기반 맵 좌표 저장 단일화 포함)

src/components/Modal/HWModal.ts

@@ -11,6 +11,7 @@ import {
 } from './ModalUtils';
 import { CORP_LIST, LOCATION_DATA, CATEGORY_TYPE_MAP, HW_STATUS_LIST, ORG_LIST, IMAGE_LOCATIONS, TYPE_PREFIX_MAP } from './SharedData';
 import { BaseModal } from './BaseModal';
+import { QRPrinter } from '../../core/qr_print';
 
 /**
  * 하드웨어 자산 상세 모달 (Styled Main Edition)
@@ -30,9 +31,10 @@ class HwAssetModal extends BaseModal {
       <div id="hw-asset-modal" class="modal-overlay hidden">
         <div class="modal-content wide">
           <div class="modal-header">
-            <div class="header-left">
-              <h2 id="hw-modal-title" class="modal-title">${this.title}</h2>
-              <div id="hw-header-identity" class="header-identity"></div>
+            <div class="header-left" style="display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;">
+              <h2 id="hw-modal-title" class="modal-title" style="display: none;">${this.title}</h2>
+              <div id="hw-header-identity" class="header-identity" style="display: inline-flex; gap: 0.5rem; align-items: center;"></div>
+              <button id="btn-print-hw-qr" class="btn btn-outline btn-primary hidden" style="padding: 2px 8px; font-size: 11px; height: 22px; margin: 0; line-height: 1; display: inline-flex; align-items: center; justify-content: center; cursor: pointer;">QR 인쇄</button>
             </div>
             <button id="btn-close-hw-modal" class="btn-icon" aria-label="닫기">&times;</button>
           </div>
@@ -264,6 +266,21 @@ class HwAssetModal extends BaseModal {
     const detailSelect = document.getElementById('hw-location_detail') as HTMLSelectElement;
 
     this.fetchMapConfig();
+    
+    const qrPrintBtn = document.getElementById('btn-print-hw-qr');
+    qrPrintBtn?.addEventListener('click', () => {
+      if (this.currentAsset && this.currentAsset.asset_code) {
+        QRPrinter.print([{
+          type: 'asset',
+          code: this.currentAsset.asset_code,
+          title: '[ HM IT ASSET ]',
+          subtitle: this.currentAsset.model_name || this.currentAsset.asset_purpose || this.currentAsset.category || 'IT 자산',
+          dept: this.currentAsset.current_dept || '-',
+          user: this.currentAsset.user_current || '-'
+        }]);
+      }
+    });
+
     this.fetchMasterComponents().then(() => {
         this.bindAutocomplete('hw-cpu', 'hw-cpu-list', 'CPU');
         this.bindAutocomplete('hw-ram', 'hw-ram-list', 'RAM');
@@ -299,7 +316,7 @@ class HwAssetModal extends BaseModal {
       const prefix = TYPE_PREFIX_MAP[cat] || 'ETC';
       const purchaseDate = (document.getElementById('hw-purchase_date') as HTMLInputElement)?.value || '';
       try {
-        const res = await fetch(`http://${location.hostname}:3000/api/generate-asset-code?prefix=${prefix}&purchaseDate=${purchaseDate}`);
+        const res = await fetch(`/api/generate-asset-code?prefix=${prefix}&purchaseDate=${purchaseDate}`);
         const data = await res.json();
         if (data.nextCode) setFieldValue('hw-asset_code', data.nextCode);
       } catch (err) { console.error('코드 생성 실패:', err); }
@@ -317,7 +334,7 @@ class HwAssetModal extends BaseModal {
       const reader = new FileReader();
       reader.onload = async () => {
         try {
-          const res = await fetch(`http://${location.hostname}:3000/api/upload`, {
+          const res = await fetch('/api/upload', {
             method: 'POST',
             headers: { 'Content-Type': 'application/json' },
             body: JSON.stringify({ fileName: file.name, fileData: reader.result })
@@ -326,7 +343,7 @@ class HwAssetModal extends BaseModal {
           if (data.success) {
             setFieldValue('hw-approval_document', data.filePath);
             if (fileLinkContainer) {
-              fileLinkContainer.innerHTML = `<a href="http://${location.hostname}:3000${data.filePath}" target="_blank" class="btn btn-outline btn-sm">[파일 보기]</a>`;
+              fileLinkContainer.innerHTML = `<a href="${data.filePath}" target="_blank" class="btn btn-outline btn-sm">[파일 보기]</a>`;
             }
           }
         } catch (err) { console.error('파일 업로드 실패:', err); alert('파일 업로드 중 오류가 발생했습니다.'); }
@@ -385,7 +402,7 @@ class HwAssetModal extends BaseModal {
         const prefix = TYPE_PREFIX_MAP[cat] || 'ETC';
         const purchaseDate = (document.getElementById('hw-purchase_date') as HTMLInputElement)?.value || '';
         try {
-          const res = await fetch(`http://${location.hostname}:3000/api/generate-asset-code?prefix=${prefix}&purchaseDate=${purchaseDate}`);
+          const res = await fetch(`/api/generate-asset-code?prefix=${prefix}&purchaseDate=${purchaseDate}`);
           const data = await res.json();
           if (data.nextCode) {
             setFieldValue('hw-asset_code', data.nextCode);
@@ -621,7 +638,7 @@ class HwAssetModal extends BaseModal {
     if (docName) docName.textContent = asset.approval_document ? asset.approval_document.split('/').pop() : '파일 선택...';
     const fileLinkContainer = document.getElementById('hw-file-link-container');
     if (fileLinkContainer && asset.approval_document) {
-      fileLinkContainer.innerHTML = `<a href="http://${location.hostname}:3000${asset.approval_document}" target="_blank" class="btn btn-outline btn-sm">[파일 보기]</a>`;
+      fileLinkContainer.innerHTML = `<a href="${asset.approval_document}" target="_blank" class="btn btn-outline btn-sm">[파일 보기]</a>`;
     } else if (fileLinkContainer) {
       fileLinkContainer.innerHTML = '';
     }
@@ -642,6 +659,13 @@ class HwAssetModal extends BaseModal {
   protected onAfterOpen(asset: any, mode: string): void {
     const genBtn = document.getElementById('btn-gen-hw-code');
     if (genBtn) genBtn.style.display = (mode === 'add') ? 'inline-flex' : 'none';
+    
+    const qrBtn = document.getElementById('btn-print-hw-qr');
+    if (qrBtn) {
+      const hasCode = asset && asset.asset_code && asset.asset_code.trim() !== '';
+      qrBtn.classList.toggle('hidden', mode !== 'view' || !hasCode);
+    }
+
     this.toggleFileUploadUI(mode !== 'view');
     this.toggleEditOnlyBtns(mode !== 'view');
     this.updateMapButtonVisibility();

src/components/Navigation.ts

@@ -59,11 +59,15 @@ export function renderNavigation(onTabChange: (tab: string) => void) {
     Object.keys(MENU_CONFIG).forEach(catKey => {
       const config = MENU_CONFIG[catKey];
       
-      const visibleTabs = config.tabs.filter((tab: string) => {
+      let visibleTabs = config.tabs.filter((tab: string) => {
         if (state.currentUserRole === 'admin') return tab === '대시보드';
         return tab !== '대시보드';
       });
 
+      if (state.currentUserRole === 'admin' && catKey === 'hw') {
+        visibleTabs = ['대시보드', '실사 승인'];
+      }
+
       if (visibleTabs.length === 0) return;
 
       visibleTabs.forEach((tab: string) => {

src/core/qr_print.ts

@@ -0,0 +1,250 @@
+
+export interface QRPrintItem {
+  type: 'asset' | 'location';
+  code: string;
+  title: string;          // e.g. "[ HM IT ASSET ]" or "[ HM LOCATION ]"
+  subtitle?: string;      // e.g. "가을-PC(i5-12400F)" or "기술개발센터 서버실"
+  dept?: string;          // e.g. "전산" or "B-03 랙"
+  user?: string;          // e.g. "박노석"
+  date?: string;          // e.g. "2024-08-05"
+}
+
+/**
+ * QR 라벨 인쇄 유틸리티 클래스
+ */
+export class QRPrinter {
+  private static styleId = 'qr-print-style';
+  private static containerId = 'label-print-container';
+
+  /**
+   * 인쇄 전용 CSS 스타일 주입
+   */
+  private static injectStyles() {
+    if (document.getElementById(this.styleId)) return;
+
+    const style = document.createElement('style');
+    style.id = this.styleId;
+    style.innerHTML = `
+      /* 화면에서는 인쇄 컨테이너 숨김 */
+      #${this.containerId} {
+        display: none;
+      }
+
+      @media print {
+        /* 화면 내 모든 요소 숨김 */
+        body > *:not(#${this.containerId}) {
+          display: none !important;
+        }
+
+        /* 인쇄 전용 컨테이너 표시 */
+        #${this.containerId} {
+          display: block !important;
+          position: absolute;
+          left: 0;
+          top: 0;
+          width: 50mm;
+          height: 30mm;
+          margin: 0;
+          padding: 0;
+          box-sizing: border-box;
+          background: #fff;
+        }
+
+        /* 페이지 규격 설정 */
+        @page {
+          size: 50mm 30mm;
+          margin: 0;
+        }
+
+        /* 개별 라벨 스타일 */
+        .print-label-item {
+          display: flex !important;
+          flex-direction: row;
+          width: 50mm;
+          height: 30mm;
+          box-sizing: border-box;
+          padding: 2.5mm;
+          page-break-after: always;
+          font-family: 'Pretendard Variable', sans-serif;
+          color: #000;
+          background: #fff;
+          overflow: hidden;
+        }
+
+        .print-label-item:last-child {
+          page-break-after: avoid;
+        }
+
+        /* 왼쪽 명세 영역 */
+        .label-details {
+          width: 30mm;
+          display: flex;
+          flex-direction: column;
+          justify-content: space-between;
+          font-size: 6.5pt;
+          line-height: 1.25;
+          text-align: left;
+          padding-right: 1mm;
+          word-break: break-all;
+        }
+
+        .label-header {
+          font-size: 7.5pt;
+          font-weight: 800;
+          border-bottom: 0.5px solid #000;
+          padding-bottom: 0.5mm;
+          margin-bottom: 0.5mm;
+          color: #000;
+        }
+
+        .label-row {
+          display: flex;
+          margin-bottom: 0.2mm;
+        }
+
+        .label-row .row-title {
+          font-weight: 700;
+          width: 9.5mm;
+          flex-shrink: 0;
+        }
+
+        .label-row .row-value {
+          flex: 1;
+        }
+
+        /* 오른쪽 QR 영역 */
+        .label-qr-wrapper {
+          width: 15mm;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          align-items: center;
+        }
+
+        .label-qr-canvas {
+          width: 14mm !important;
+          height: 14mm !important;
+          display: block;
+        }
+        
+        .label-qr-code-text {
+          font-size: 5.5pt;
+          font-weight: 700;
+          margin-top: 1mm;
+          text-align: center;
+          width: 15mm;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+      }
+    `;
+    document.head.appendChild(style);
+  }
+
+  /**
+   * 라벨 인쇄 실행
+   */
+  public static async print(items: QRPrintItem[]): Promise<void> {
+    if (items.length === 0) return;
+
+    this.injectStyles();
+
+    // 기존 컨테이너 제거
+    const oldContainer = document.getElementById(this.containerId);
+    if (oldContainer) oldContainer.remove();
+
+    // 새 인쇄 컨테이너 생성
+    const container = document.createElement('div');
+    container.id = this.containerId;
+    document.body.appendChild(container);
+
+    for (let i = 0; i < items.length; i++) {
+      const item = items[i];
+      const labelDiv = document.createElement('div');
+      labelDiv.className = 'print-label-item';
+
+      // QR 접속 URL 정의
+      const paramName = item.type === 'asset' ? 'asset' : 'loc';
+      const qrUrl = `${window.location.origin}/mobile?${paramName}=${encodeURIComponent(item.code)}`;
+
+      // HTML 구성
+      if (item.type === 'asset') {
+        labelDiv.innerHTML = `
+          <div class="label-details">
+            <div class="label-header">${item.title}</div>
+            <div class="label-row">
+              <span class="row-title">자산번호 :</span>
+              <span class="row-value">${item.code}</span>
+            </div>
+            <div class="label-row">
+              <span class="row-title">자 산 명 :</span>
+              <span class="row-value">${item.subtitle || '-'}</span>
+            </div>
+            <div class="label-row">
+              <span class="row-title">부    서 :</span>
+              <span class="row-value">${item.dept || '-'}</span>
+            </div>
+            <div class="label-row">
+              <span class="row-title">사 용 자 :</span>
+              <span class="row-value">${item.user || '-'}</span>
+            </div>
+          </div>
+          <div class="label-qr-wrapper">
+            <canvas class="label-qr-canvas" id="qr-canvas-${i}"></canvas>
+            <div class="label-qr-code-text">${item.code}</div>
+          </div>
+        `;
+      } else {
+        // Location 라벨 레이아웃
+        labelDiv.innerHTML = `
+          <div class="label-details" style="justify-content: center; gap: 1mm;">
+            <div class="label-header">${item.title}</div>
+            <div class="label-row">
+              <span class="row-title">위치코드 :</span>
+              <span class="row-value" style="font-weight: 700;">${item.code}</span>
+            </div>
+            <div class="label-row">
+              <span class="row-title">구    역 :</span>
+              <span class="row-value">${item.subtitle || '-'}</span>
+            </div>
+            <div class="label-row">
+              <span class="row-title">상세위치 :</span>
+              <span class="row-value">${item.dept || '-'}</span>
+            </div>
+          </div>
+          <div class="label-qr-wrapper">
+            <canvas class="label-qr-canvas" id="qr-canvas-${i}"></canvas>
+            <div class="label-qr-code-text">${item.code}</div>
+          </div>
+        `;
+      }
+
+      container.appendChild(labelDiv);
+
+      // QR 코드 렌더링
+      const canvas = document.getElementById(`qr-canvas-${i}`) as HTMLCanvasElement;
+      if (canvas) {
+        const qrLib = (window as any).QRCode;
+        if (qrLib) {
+          await qrLib.toCanvas(canvas, qrUrl, {
+            margin: 0,
+            width: 100,
+            errorCorrectionLevel: 'H'
+          });
+        } else {
+          console.error("QRCode library is not loaded on window.");
+        }
+      }
+    }
+
+    // 약간의 딜레이를 주어 QR 코드가 완전히 렌더링되도록 함
+    setTimeout(() => {
+      window.print();
+      // 인쇄 완료 후 컨테이너 정리
+      window.onafterprint = () => {
+        container.remove();
+      };
+    }, 250);
+  }
+}

src/main.ts

@@ -5,6 +5,7 @@ import { renderNavigation } from './components/Navigation';
 import { renderDashboard } from './views/DashboardView';
 import { renderSWTable } from './views/SW_Table';
 import { renderLocationView } from './views/LocationView';
+import { renderAuditApprovalView } from './views/AuditApprovalView';
 import { initBaseModal } from './components/Modal/BaseModal';
 import { initHwModal, openHwModal } from './components/Modal/HWModal';
 import { initSwModal, openSwModal } from './components/Modal/SWModal';
@@ -32,6 +33,11 @@ function refreshView(tab?: string) {
     return;
   }
 
+  if (activeTab === '실사 승인') {
+    renderAuditApprovalView(mainContent);
+    return;
+  }
+
   // 서버 탭이 아닐 경우에는 state.viewMode가 location이더라도 강제로 목록(list) 뷰를 그리도록 함
   // (state.viewMode의 원래 상태는 보존하여, 서버 탭 복귀 시 최근 보던 모드를 유지함)
   const isServerTab = activeTab === '서버';

src/mobile-main.ts

@@ -0,0 +1,180 @@
+// ITAM Mobile Audit Scanner Main Business Logic
+
+const SESSION_LOC_KEY = 'itam_audit_locked_location';
+
+document.addEventListener('DOMContentLoaded', () => {
+  const locDisplay = document.getElementById('loc-display')!;
+  const unlockBtn = document.getElementById('btn-unlock-loc') as HTMLButtonElement;
+  const feedbackEl = document.getElementById('scan-feedback')!;
+  const manualToggleBtn = document.getElementById('btn-toggle-manual')!;
+  const manualForm = document.getElementById('manual-form')!;
+  const manualInput = document.getElementById('manual-code-input') as HTMLInputElement;
+  const manualSubmitBtn = document.getElementById('btn-submit-manual') as HTMLButtonElement;
+
+  let html5QrcodeScanner: any = null;
+
+  // Initialize UI based on current session lock
+  updateLocationUI();
+
+  // Parse URL parameters for immediate processing (convenience for direct QR scans)
+  parseUrlParams();
+
+  // Initialize HTML5 QR Code Scanner
+  initScanner();
+
+  // Bind UI Events
+  unlockBtn.addEventListener('click', () => {
+    sessionStorage.removeItem(SESSION_LOC_KEY);
+    showFeedback('위치 잠금이 해제되었습니다.', 'success');
+    updateLocationUI();
+  });
+
+  manualToggleBtn.addEventListener('click', () => {
+    const isHidden = window.getComputedStyle(manualForm).display === 'none';
+    manualForm.style.display = isHidden ? 'flex' : 'none';
+    manualToggleBtn.textContent = isHidden ? '스캐너 카메라로 스캔하기' : '카메라가 안 되나요? 수동 코드로 입력';
+  });
+
+  manualSubmitBtn.addEventListener('click', () => {
+    const code = manualInput.value.trim();
+    if (!code) return;
+    processScannedCode(code);
+    manualInput.value = '';
+  });
+
+  // --- Core Scanner Functions ---
+
+  function initScanner() {
+    try {
+      // Create Html5Qrcode instance
+      // Using Html5Qrcode directly instead of Html5QrcodeScanner for customized viewport control
+      const html5QrCode = new (window as any).Html5Qrcode("reader");
+      
+      const config = {
+        fps: 10,
+        qrbox: (width: number, height: number) => {
+          const size = Math.min(width, height) * 0.7;
+          return { width: size, height: size };
+        },
+        aspectRatio: 1.0
+      };
+
+      // Start scanning using the rear camera
+      html5QrCode.start(
+        { facingMode: "environment" },
+        config,
+        (decodedText: string) => {
+          processScannedCode(decodedText);
+        },
+        (errorMessage: string) => {
+          // Silent failure during continuous scanning to avoid log flooding
+        }
+      ).catch((err: any) => {
+        console.error("Camera startup failed:", err);
+        showFeedback("카메라 시작 실패: 권한을 허용했는지 확인하세요.", "error");
+      });
+    } catch (e) {
+      console.error("Failed to initialize html5-qrcode:", e);
+      showFeedback("QR 라이브러리 로드 오류", "error");
+    }
+  }
+
+  function processScannedCode(code: string) {
+    // 1. Check if the code is a physical location code
+    if (code.startsWith('LOC-')) {
+      sessionStorage.setItem(SESSION_LOC_KEY, code);
+      showFeedback(`위치 [${code}] 잠금 설정 완료!`, 'success');
+      updateLocationUI();
+      vibrateDevice(100);
+      return;
+    }
+
+    // 2. Otherwise treat it as an asset code
+    const lockedLoc = sessionStorage.getItem(SESSION_LOC_KEY);
+    if (!lockedLoc) {
+      showFeedback('위치 QR 코드를 먼저 스캔하여 잠금을 설정해야 자산을 스캔할 수 있습니다.', 'error');
+      vibrateDevice([100, 50, 100]);
+      return;
+    }
+
+    // Submit matching info to server
+    submitAssetAudit(code, lockedLoc);
+  }
+
+  async function submitAssetAudit(assetCode: string, locationCode: string) {
+    showFeedback(`자산 ${assetCode} 전송 중...`, 'success');
+    
+    try {
+      // Request is sent relative to host, which resolves dynamically through server proxy
+      const res = await fetch('/api/audit/scan', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          asset_code: assetCode,
+          physical_location_code: locationCode
+        })
+      });
+
+      const data = await res.json();
+
+      if (res.ok && data.success) {
+        showFeedback(`자산 [${assetCode}] 실사 전송 성공! (관리자 승인 대기)`, 'success');
+        vibrateDevice([200]);
+      } else {
+        showFeedback(`전송 실패: ${data.error || '알 수 없는 서버 오류'}`, 'error');
+        vibrateDevice([100, 100, 100]);
+      }
+    } catch (err) {
+      console.error("Failed to submit scan:", err);
+      showFeedback('서버 전송 중 통신 네트워크 오류가 발생했습니다.', 'error');
+      vibrateDevice([100, 100, 100]);
+    }
+  }
+
+  function updateLocationUI() {
+    const lockedLoc = sessionStorage.getItem(SESSION_LOC_KEY);
+    if (lockedLoc) {
+      locDisplay.textContent = lockedLoc;
+      locDisplay.className = 'badge-lock';
+      unlockBtn.style.display = 'inline-block';
+    } else {
+      locDisplay.textContent = '위치 QR 코드를 먼저 스캔하세요.';
+      locDisplay.className = 'badge-empty';
+      unlockBtn.style.display = 'none';
+    }
+  }
+
+  function parseUrlParams() {
+    const params = new URLSearchParams(window.location.search);
+    const loc = params.get('loc');
+    const asset = params.get('asset');
+
+    if (loc) {
+      processScannedCode(loc);
+      // Clean query parameters to avoid re-triggering on page refresh
+      window.history.replaceState({}, document.title, window.location.pathname);
+    } else if (asset) {
+      processScannedCode(asset);
+      window.history.replaceState({}, document.title, window.location.pathname);
+    }
+  }
+
+  function showFeedback(msg: string, type: 'success' | 'error') {
+    feedbackEl.textContent = msg;
+    feedbackEl.style.display = 'block';
+    feedbackEl.className = `feedback-message ${type === 'success' ? 'feedback-success' : 'feedback-error'}`;
+    
+    // Auto-hide feedback after 4 seconds
+    setTimeout(() => {
+      if (feedbackEl.textContent === msg) {
+        feedbackEl.style.display = 'none';
+      }
+    }, 4000);
+  }
+
+  function vibrateDevice(pattern: number | number[]) {
+    if ('vibrate' in navigator) {
+      navigator.vibrate(pattern);
+    }
+  }
+});

src/views/AuditApprovalView.ts

@@ -0,0 +1,427 @@
+import { state, loadMasterDataFromDB } from '../core/state';
+import { openHwModal } from '../components/Modal/HWModal';
+
+/**
+ * 실사 점검 승인 대시보드 뷰 (Vercel Style Clean layout)
+ */
+export async function renderAuditApprovalView(container: HTMLElement) {
+  if (!container) return;
+
+  // 1. CSS Stylesheet Injection
+  const styleId = 'audit-approval-view-style';
+  if (!document.getElementById(styleId)) {
+    const style = document.createElement('style');
+    style.id = styleId;
+    style.innerHTML = `
+      .audit-container {
+        display: flex;
+        flex-direction: column;
+        height: calc(100vh - var(--header-height) - 48px);
+        background-color: var(--canvas);
+        color: var(--text-main);
+        padding: 1.5rem;
+        box-sizing: border-box;
+      }
+
+      .audit-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 1rem;
+        flex-shrink: 0;
+      }
+
+      .audit-title-area {
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+      }
+
+      .audit-title {
+        font-size: 1.25rem;
+        font-weight: 700;
+      }
+
+      .audit-badge {
+        background-color: var(--primary-soft);
+        color: var(--primary);
+        font-size: 0.75rem;
+        font-weight: 700;
+        padding: 0.15rem 0.5rem;
+        border-radius: 9999px;
+        border: 1px solid rgba(59, 130, 246, 0.2);
+      }
+
+      .audit-actions {
+        display: flex;
+        gap: 0.5rem;
+      }
+
+      .audit-btn {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0.4rem 0.8rem;
+        font-size: 0.8rem;
+        font-weight: 600;
+        border-radius: 8px;
+        cursor: pointer;
+        transition: all 0.2s;
+        border: 1px solid var(--hairline);
+        background-color: var(--canvas-soft);
+        color: var(--text-main);
+      }
+
+      .audit-btn:hover {
+        background-color: var(--canvas-soft-2);
+      }
+
+      .audit-btn-primary {
+        background-color: var(--primary);
+        color: #fff;
+        border-color: var(--primary);
+      }
+
+      .audit-btn-primary:hover {
+        background-color: var(--primary-hover);
+      }
+
+      .audit-btn-danger {
+        background-color: rgba(239, 68, 68, 0.1);
+        color: var(--danger);
+        border-color: rgba(239, 68, 68, 0.2);
+      }
+
+      .audit-btn-danger:hover {
+        background-color: rgba(239, 68, 68, 0.2);
+      }
+
+      /* Data Table Custom Vercel layout */
+      .audit-table-wrapper {
+        flex: 1;
+        overflow: auto;
+        border: 1px solid var(--hairline);
+        border-radius: 12px;
+        background-color: var(--canvas-soft);
+      }
+
+      .audit-table {
+        width: 100%;
+        border-collapse: collapse;
+        text-align: left;
+        font-size: 0.825rem;
+      }
+
+      .audit-table th {
+        background-color: var(--canvas-soft-2);
+        color: var(--text-muted);
+        font-weight: 600;
+        padding: 0.6rem 0.8rem;
+        border-bottom: 1px solid var(--hairline);
+        position: sticky;
+        top: 0;
+        z-index: 10;
+        font-size: 0.75rem;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+      }
+
+      .audit-table td {
+        padding: 0.75rem 0.8rem;
+        border-bottom: 1px solid var(--hairline);
+        vertical-align: middle;
+      }
+
+      .audit-table tr:last-child td {
+        border-bottom: none;
+      }
+
+      .audit-table tr:hover td {
+        background-color: var(--canvas-soft-2);
+      }
+
+      .audit-checkbox {
+        width: 15px;
+        height: 15px;
+        cursor: pointer;
+        accent-color: var(--primary);
+      }
+
+      .link-asset-code {
+        color: var(--primary);
+        text-decoration: underline;
+        font-weight: 700;
+        cursor: pointer;
+      }
+
+      .link-asset-code:hover {
+        color: var(--primary-hover);
+      }
+
+      .location-badge-diff {
+        background-color: rgba(245, 158, 11, 0.12);
+        color: #d97706;
+        border: 1px solid rgba(245, 158, 11, 0.25);
+        padding: 0.15rem 0.4rem;
+        border-radius: 4px;
+        font-size: 0.75rem;
+        font-weight: 600;
+        display: inline-block;
+      }
+
+      .location-badge-same {
+        background-color: rgba(16, 185, 129, 0.08);
+        color: #059669;
+        border: 1px solid rgba(16, 185, 129, 0.18);
+        padding: 0.15rem 0.4rem;
+        border-radius: 4px;
+        font-size: 0.75rem;
+        font-weight: 600;
+        display: inline-block;
+      }
+
+      /* Empty State Illustration Layout */
+      .audit-empty-state {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        padding: 3rem;
+        gap: 1rem;
+        height: 100%;
+        color: var(--text-muted);
+      }
+
+      .audit-empty-icon {
+        font-size: 3rem;
+        color: var(--hairline);
+      }
+    `;
+    document.head.appendChild(style);
+  }
+
+  let pendingData: any[] = [];
+
+  // Function to load data and render layout
+  async function loadAndRender() {
+    try {
+      container.innerHTML = `
+        <div class="audit-container">
+          <div class="audit-header">
+            <div class="audit-title-area">
+              <span class="audit-title">실사 점검 승인 관리</span>
+              <span id="audit-count-badge" class="audit-badge">조회 중...</span>
+            </div>
+            <div class="audit-actions">
+              <button id="btn-audit-refresh" class="audit-btn"><i data-lucide="refresh-ccw" style="width:14px; height:14px; margin-right:4px;"></i> 새로고침</button>
+              <button id="btn-audit-reject" class="audit-btn audit-btn-danger" disabled>선택 반려</button>
+              <button id="btn-audit-approve" class="audit-btn audit-btn-primary" disabled>선택 승인</button>
+            </div>
+          </div>
+          <div id="audit-content-area" class="audit-table-wrapper">
+            <div style="padding: 2rem; text-align: center; color: var(--text-muted);">실사 내역을 불러오고 있습니다...</div>
+          </div>
+        </div>
+      `;
+
+      bindHeaderEvents();
+      await fetchPendingList();
+    } catch (err) {
+      console.error('Failed to init audit view:', err);
+    }
+  }
+
+  async function fetchPendingList() {
+    try {
+      const res = await fetch('/api/audit/pending');
+      pendingData = await res.json();
+      renderTable();
+    } catch (err) {
+      console.error('Failed to fetch pending audits:', err);
+      const contentArea = document.getElementById('audit-content-area')!;
+      contentArea.innerHTML = `<div style="padding: 3rem; text-align: center; color: var(--danger); font-weight: 600;">데이터를 불러오는 중 네트워크 에러가 발생했습니다.</div>`;
+    }
+  }
+
+  function renderTable() {
+    const badge = document.getElementById('audit-count-badge')!;
+    badge.textContent = `대기 ${pendingData.length}건`;
+
+    const contentArea = document.getElementById('audit-content-area')!;
+    if (pendingData.length === 0) {
+      contentArea.innerHTML = `
+        <div class="audit-empty-state">
+          <div class="audit-empty-icon">✓</div>
+          <div style="font-size: 1.05rem; font-weight: 700; color: var(--text-main);">대기 중인 실사 내역이 없습니다</div>
+          <div style="font-size: 0.8rem;">현장에서 스캐너로 자산을 스캔하면 실시간으로 여기에 등록됩니다.</div>
+        </div>
+      `;
+      updateActionButtons();
+      return;
+    }
+
+    let tbodyRows = '';
+    pendingData.forEach((row, i) => {
+      // Format scanned date
+      const dateStr = new Date(row.scanned_at).toLocaleString('ko-KR');
+
+      // Check if location actually changed
+      const oldLocFull = row.old_location ? `${row.old_location} ${row.old_location_detail || ''}`.trim() : '미배치';
+      const newLocFull = `${row.location_name} ${row.location_detail || ''}`.trim();
+      const isDiff = oldLocFull !== newLocFull;
+
+      tbodyRows += `
+        <tr>
+          <td style="width: 40px; text-align: center;">
+            <input type="checkbox" class="audit-checkbox row-select" data-id="${row.id}" />
+          </td>
+          <td>
+            <span class="link-asset-code" data-index="${i}">${row.asset_code}</span>
+          </td>
+          <td>${row.asset_purpose || '-'}</td>
+          <td><span class="badge" style="font-size: 11px;">${row.asset_type || 'IT자산'}</span></td>
+          <td><span style="color: var(--text-muted);">${oldLocFull}</span></td>
+          <td>
+            <span class="${isDiff ? 'location-badge-diff' : 'location-badge-same'}">${newLocFull}</span>
+          </td>
+          <td style="color: var(--text-muted); font-size: 11px;">${dateStr}</td>
+        </tr>
+      `;
+    });
+
+    contentArea.innerHTML = `
+      <table class="audit-table">
+        <thead>
+          <tr>
+            <th style="width: 40px; text-align: center;">
+              <input type="checkbox" class="audit-checkbox" id="chk-audit-all" />
+            </th>
+            <th>자산번호</th>
+            <th>자산용도</th>
+            <th>자산유형</th>
+            <th>기존 위치</th>
+            <th>실사 위치</th>
+            <th>스캔 일시</th>
+          </tr>
+        </thead>
+        <tbody>
+          ${tbodyRows}
+        </tbody>
+      </table>
+    `;
+
+    bindTableEvents();
+    updateActionButtons();
+  }
+
+  function bindHeaderEvents() {
+    document.getElementById('btn-audit-refresh')?.addEventListener('click', () => fetchPendingList());
+
+    document.getElementById('btn-audit-approve')?.addEventListener('click', () => handleAction('approve'));
+    document.getElementById('btn-audit-reject')?.addEventListener('click', () => handleAction('reject'));
+  }
+
+  function bindTableEvents() {
+    // Select All Checkbox
+    const selectAllChk = document.getElementById('chk-audit-all') as HTMLInputElement;
+    const rowCheckboxes = document.querySelectorAll('.row-select') as NodeListOf<HTMLInputElement>;
+
+    selectAllChk?.addEventListener('change', () => {
+      rowCheckboxes.forEach(chk => {
+        chk.checked = selectAllChk.checked;
+      });
+      updateActionButtons();
+    });
+
+    rowCheckboxes.forEach(chk => {
+      chk.addEventListener('change', () => {
+        updateActionButtons();
+        // Sync selectAll checkbox state
+        const allChecked = Array.from(rowCheckboxes).every(c => c.checked);
+        if (selectAllChk) selectAllChk.checked = allChecked;
+      });
+    });
+
+    // Asset Detail Modal linkage
+    const assetLinks = document.querySelectorAll('.link-asset-code');
+    assetLinks.forEach(link => {
+      link.addEventListener('click', (e) => {
+        const idx = parseInt((e.target as HTMLElement).dataset.index!);
+        const row = pendingData[idx];
+        if (!row) return;
+
+        // Compile master array from state data to find full asset object
+        const allHwAssets = [
+          ...(state.masterData.pc || []),
+          ...(state.masterData.server || []),
+          ...(state.masterData.storage || []),
+          ...(state.masterData.network || []),
+          ...(state.masterData.equipment || []),
+          ...(state.masterData.survey || []),
+          ...(state.masterData.officeSupplies || []),
+          ...(state.masterData.pcParts || [])
+        ];
+
+        const targetAsset = allHwAssets.find(a => a.asset_code === row.asset_code);
+        if (targetAsset) {
+          openHwModal(targetAsset, 'view');
+        } else {
+          alert(`자산 코드 [${row.asset_code}] 에 매칭되는 마스터 데이터가 존재하지 않습니다.`);
+        }
+      });
+    });
+  }
+
+  function updateActionButtons() {
+    const selected = document.querySelectorAll('.row-select:checked');
+    const approveBtn = document.getElementById('btn-audit-approve') as HTMLButtonElement;
+    const rejectBtn = document.getElementById('btn-audit-reject') as HTMLButtonElement;
+
+    if (approveBtn && rejectBtn) {
+      const isDisabled = selected.length === 0;
+      approveBtn.disabled = isDisabled;
+      rejectBtn.disabled = isDisabled;
+      
+      approveBtn.textContent = `선택 승인 (${selected.length})`;
+      rejectBtn.textContent = `선택 반려 (${selected.length})`;
+    }
+  }
+
+  async function handleAction(actionType: 'approve' | 'reject') {
+    const selected = document.querySelectorAll('.row-select:checked') as NodeListOf<HTMLInputElement>;
+    const ids = Array.from(selected).map(chk => parseInt(chk.dataset.id!));
+    if (ids.length === 0) return;
+
+    const actionText = actionType === 'approve' ? '승인' : '반려';
+    if (!confirm(`선택한 ${ids.length}건의 실사 내역을 최종 ${actionText} 처리할까요?`)) return;
+
+    const endpoint = actionType === 'approve' ? '/api/audit/approve' : '/api/audit/reject';
+    
+    try {
+      const res = await fetch(endpoint, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          pending_ids: ids,
+          processed_by: 'ADMIN'
+        })
+      });
+
+      const data = await res.json();
+      if (res.ok && data.success) {
+        alert(`성공적으로 ${actionText} 완료되었습니다.`);
+        // Reload dashboard state to sync map_config/db coordinates changes
+        await loadMasterDataFromDB();
+        await fetchPendingList();
+      } else {
+        alert(`${actionText} 실패: ${data.error || '알 수 없는 서버 오류'}`);
+      }
+    } catch (err) {
+      console.error(`Failed to trigger audit ${actionType}:`, err);
+      alert(`네트워크 통신 오류로 ${actionText} 처리가 실패했습니다.`);
+    }
+  }
+
+  // Run initial loading
+  await loadAndRender();
+}

src/views/List/ListFactory.ts

@@ -77,7 +77,7 @@ export function createListView(container: HTMLElement, config: ListViewConfig) {
 
   const fetchMapConfig = async () => {
     try {
-      const res = await fetch(`http://${location.hostname}:3000/api/maps`);
+      const res = await fetch('/api/maps');
       dynamicMapConfig = await res.json();
     } catch (err) { console.error('Failed to fetch map config:', err); }
   };

src/views/MapEditor.ts

@@ -1,5 +1,6 @@
 import { IMAGE_LOCATIONS } from '../components/Modal/SharedData';
 import { createIcons, X, Save, Trash2, ChevronLeft, ChevronRight } from 'lucide';
+import { QRPrinter } from '../core/qr_print';
 
 export class MapEditor {
   private container: HTMLElement;
@@ -42,7 +43,7 @@ export class MapEditor {
 
   private async loadAssets() {
     try {
-      const res = await fetch(`http://${location.hostname}:3000/api/assets/master`);
+      const res = await fetch('/api/assets/master');
       const masterData = await res.json();
       const allHw = [
         ...(masterData.pc || []),
@@ -95,7 +96,7 @@ export class MapEditor {
 
   private async loadConfig() {
     try {
-      const res = await fetch(`http://${location.hostname}:3000/api/maps`);
+      const res = await fetch('/api/maps');
       this.allMapConfig = await res.json();
     } catch (err) {
       console.error('Failed to load config:', err);
@@ -185,6 +186,30 @@ export class MapEditor {
       }
     });
 
+    document.getElementById('btn-print-map-qrs')?.addEventListener('click', () => {
+      if (this.boxes.length === 0) {
+        alert('인쇄할 구역이 없습니다.');
+        return;
+      }
+      const cleanKey = getCleanMapKey(this.currentPath);
+      const locName = getLocationName(this.currentPath);
+      
+      const items = this.boxes.map((box, index) => {
+        const padIdx = String(index + 1).padStart(3, '0');
+        const locCode = `LOC-${cleanKey}-${padIdx}`;
+        const locDetail = getLocationDetail(this.currentPath, index);
+        return {
+          type: 'location' as const,
+          code: locCode,
+          title: '[ HM LOCATION ]',
+          subtitle: locName,
+          dept: locDetail
+        };
+      });
+
+      QRPrinter.print(items);
+    });
+
     document.getElementById('btn-save-server')?.addEventListener('click', () => this.saveToServer());
   }
 
@@ -195,7 +220,7 @@ export class MapEditor {
       this.saveBtn.disabled = true;
       this.saveBtn.textContent = '저장 중...';
       
-      const res = await fetch(`http://${location.hostname}:3000/api/maps/save`, {
+      const res = await fetch('/api/maps/save', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({ path: this.currentPath, boxes: this.boxes })
@@ -248,7 +273,10 @@ export class MapEditor {
       item.innerHTML = `
         <div class="box-header">
           <span class="box-index">#${i+1}</span>
-          <button class="btn-del" onclick="removeBox(${i})">×</button>
+          <div style="display: flex; gap: 0.5rem; align-items: center;">
+            <button class="btn btn-outline btn-sm" onclick="printBoxQR(${i})" style="padding: 2px 6px; font-size: 11px; margin: 0; cursor: pointer;">QR</button>
+            <button class="btn-del" onclick="removeBox(${i})">×</button>
+          </div>
         </div>
         <div class="box-inputs margin-bottom">
           <select data-index="${i}" data-prop="asset_id">
@@ -294,5 +322,46 @@ export class MapEditor {
         }
       });
     });
+
+    (window as any).printBoxQR = (index: number) => {
+      const box = this.boxes[index];
+      if (!box) return;
+      const cleanKey = getCleanMapKey(this.currentPath);
+      const padIdx = String(index + 1).padStart(3, '0');
+      const locCode = `LOC-${cleanKey}-${padIdx}`;
+      const locDetail = getLocationDetail(this.currentPath, index);
+      const locName = getLocationName(this.currentPath);
+
+      QRPrinter.print([{
+        type: 'location',
+        code: locCode,
+        title: '[ HM LOCATION ]',
+        subtitle: locName,
+        dept: locDetail
+      }]);
+    };
   }
 }
+
+function getCleanMapKey(path: string) {
+  let clean = path.replace('img/location_photo/', '').replace('.png', '');
+  clean = clean.replace('서관', 'W').replace('동관', 'E');
+  clean = clean.replace('한맥빌딩/MDF실/MDF_', 'HAN-MDF-');
+  clean = clean.replace('기술개발센터/서버실/서버실_', 'DEV-SVR-');
+  clean = clean.replace(/\//g, '-');
+  return clean;
+}
+
+function getLocationName(path: string) {
+  if (path.includes('IDC')) return 'IDC';
+  if (path.includes('한맥빌딩')) return '한맥빌딩';
+  if (path.includes('기술개발센터')) return '기술개발센터';
+  return '기타';
+}
+
+function getLocationDetail(path: string, idx: number) {
+  let clean = path.replace('img/location_photo/', '').replace('.png', '');
+  let parts = clean.split('/');
+  let lastPart = parts[parts.length - 1];
+  return `${lastPart} 구역 자리 #${idx + 1}`;
+}