Merge branch 'origin/QR_setting' into thoon

2026-06-25 11:39:01 +09:00
parent 322a8ae882 0bfff08af6
commit 1ecee53966
66 changed files with 7789 additions and 5427 deletions
--- a/.env
+++ b/.env
@@ -0,0 +1,6 @@
+DB_HOST=172.16.8.151
+DB_PORT=3306
+DB_USER=itam_admin
+DB_PASS=itam1234
+DB_NAME=itam
+PORT=3001
--- a/QR_system.md
+++ b/QR_system.md
@@ -0,0 +1,22 @@
+ 목적
+  - 정기적인 실물자산 점검을 실시하여 시스템 내 자산정보의 정확성을 확보하고,    실제 자산의 위치 및 상태를 체계적으로 파악·관리할 수 있는 관리체계를 구축
+  - QR 스캔 시스템을 통해 자산별 관리 이력 및 관리 책임자 정보를 즉시 확인할 수 있으며,    자산의 이동·변경 이력 추적과 안정적인 운영 관리를 추구
+
+ 구조 구성안
+  A. 실제 위치 정보를 가진 마스터 테이블 구축
+  - 현재 DB의 위치 정보는 건물 및 호수 정보(예: 기술개발센터 / 서버실)와 이미지 파일 내    픽셀 좌표 정보로 관리되고 있으며, 실제 서버가 설치된 랙(Rack) 및 물리적 위치 정보를    관리하는 항목은 존재하지 않음
+  - 이미지 좌표 데이터와 실제 자산 위치 데이터를 연결하는 별도 마스터 테이블을 생성하여,    좌표 정보와 물리적 위치 정보 간 관계 정의 필요
+
+  B. 기존 테이블 개편
+  - 픽셀 좌표 정보는 마스터 테이블에서 통합관리하고, 기존 테이블은 마스터 코드를상속받는 구조로 변경하여 유지 보수성을 확보
+
+ QR코드 정보
+  - 자산 QR : 시스템에 등록된 자산 고유의 자산번호
+  - 위치 QR : 물리적 위치 테이블에 저장된 마스터 코드
+
+ 현장실사 시나리오
+  ① 담당자가 서버 렉 전면에 부착된 위치 QR을 스캔
+  ② 위치 QR에 저장된 주소로 접속하여 세션에 현재 위치를 저장
+  ③ 자산에 부착된 자산 QR을 스캔하여 주소에 접속하게 되면 정보를 매칭하여 API로 전송
+  ④ 결합된 정보를 받아 기존 위치를 확인 혹은 업데이트
+  ⑤ 시스템에서 관리자가 확인하여 승인하게 되면 시스템에도 업데이트 완료
--- a/(2026.06.15).xlsx
+++ b/(2026.06.15).xlsx
--- a/index.html
+++ b/index.html
@@ -1,61 +1,63 @@
-<!DOCTYPE html>
-<html lang="ko">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>한맥가족 자산관리시스템</title>
-  <link rel="stylesheet"
-    href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css" />
-  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script>
-</head>
-
-<body>
-  <div class="app-layout" id="app-layout" style="display: none;">
-    <!-- Single-Line Integrated Header -->
-    <header class="main-header">
-      <div class="header-container" id="nav-container">
-        <div class="brand">
-          <!-- <img src="/image 92.png" alt="Logo" class="main-logo" /> -->
-          <h1>한맥자산관리시스템</h1>
-        </div>
-
-        <!-- Navigation (GNB + LNB in same row) -->
-        <nav class="integrated-nav" id="main-nav">
-          <!-- JS will render main items and sub items here side-by-side -->
-        </nav>
-
-        <div class="header-actions">
-          <div class="role-switcher" id="role-switcher">
-            <span class="role-label user active">실무자</span>
-            <label class="switch">
-              <input type="checkbox" id="role-toggle-checkbox">
-              <span class="slider round"></span>
-            </label>
-            <span class="role-label admin">관리자</span>
-          </div>
-          <button id="btn-admin-page" class="hidden"></button> <!-- JS 호환용 숨김 -->
-          <button id="btn-open-guide-header" class="btn btn-outline" title="프로세스 가이드">
-            <i data-lucide="book-open"></i> 가이드
-          </button>
-        </div>
-      </div>
-    </header>
-
-    <!-- Main Content Area -->
-    <main class="content-area" id="main-content">
-      <!-- Components inject views here -->
-    </main>
-
-    <!-- Footer -->
-    <footer class="main-footer">
-      <p>&copy; 2026 BARON Consultant Co,Ltd. All rights reserved.</p>
-    </footer>
-  </div>
-
-  <!-- All modals are injected dynamically -->
-  <script type="module" src="/src/main.ts"></script>
-</body>
-
+<!DOCTYPE html>
+<html lang="ko">
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>한맥가족 자산관리시스템</title>
+  <link rel="stylesheet"
+    href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css" />
+  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script>
+  <script src="/qrcode.min.js"></script>
+</head>
+
+<body>
+  <div class="app-layout" id="app-layout" style="display: none;">
+    <!-- Single-Line Integrated Header -->
+    <header class="main-header">
+      <div class="header-container" id="nav-container">
+        <div class="brand">
+          <img src="/image 92.png" alt="Logo" class="main-logo" />
+          <h1>한맥자산관리시스템</h1>
+        </div>
+
+        <!-- Navigation (GNB + LNB in same row) -->
+        <nav class="integrated-nav" id="main-nav">
+          <!-- JS will render main items and sub items here side-by-side -->
+        </nav>
+
+        <div class="header-actions">
+          <div class="role-switcher" id="role-switcher">
+            <span class="role-label user active">실무자</span>
+            <label class="switch">
+              <input type="checkbox" id="role-toggle-checkbox">
+              <span class="slider round"></span>
+            </label>
+            <span class="role-label admin">관리자</span>
+          </div>
+          <button id="btn-admin-page" class="hidden"></button> <!-- JS 호환용 숨김 -->
+          <button id="btn-open-guide-header" class="btn btn-outline" title="프로세스 가이드">
+            <i data-lucide="book-open"></i> 가이드
+          </button>
+        </div>
+      </div>
+    </header>
+
+    <!-- Main Content Area -->
+    <main class="content-area" id="main-content">
+      <!-- Components inject views here -->
+    </main>
+
+    <!-- Footer -->
+    <footer class="main-footer">
+      <p>&copy; 2026 BARON Consultant Co,Ltd. All rights reserved.</p>
+    </footer>
+  </div>
+
+  <!-- All modals are injected dynamically -->
+  <script type="module" src="/src/main.ts"></script>
+</body>
+
 </html>
--- a/label/DevExpress.Data.v14.1.dll
+++ b/label/DevExpress.Data.v14.1.dll
--- a/label/DevExpress.Printing.v14.1.Core.dll
+++ b/label/DevExpress.Printing.v14.1.Core.dll
--- a/label/DevExpress.Utils.v14.1.dll
+++ b/label/DevExpress.Utils.v14.1.dll
--- a/label/DevExpress.XtraEditors.v14.1.dll
+++ b/label/DevExpress.XtraEditors.v14.1.dll
--- a/label/DevExpress.XtraGrid.v14.1.dll
+++ b/label/DevExpress.XtraGrid.v14.1.dll
--- a/label/DevExpress.XtraLayout.v14.1.dll
+++ b/label/DevExpress.XtraLayout.v14.1.dll
--- a/label/DevExpress.XtraPrinting.v14.1.dll
+++ b/label/DevExpress.XtraPrinting.v14.1.dll
--- a/label/LabelPrinter.exe
+++ b/label/LabelPrinter.exe
--- a/label/Newtonsoft.Json.dll
+++ b/label/Newtonsoft.Json.dll
--- a/label/WebQuery.dll
+++ b/label/WebQuery.dll
--- a/label/config.ini
+++ b/label/config.ini
@@ -0,0 +1,4 @@
+[PRINT]
+FONT=8
+LEFT=143
+TOP=40
--- a/label/de/DevExpress.Data.v14.1.resources.dll
+++ b/label/de/DevExpress.Data.v14.1.resources.dll
--- a/label/de/DevExpress.Printing.v14.1.Core.resources.dll
+++ b/label/de/DevExpress.Printing.v14.1.Core.resources.dll
--- a/label/de/DevExpress.Utils.v14.1.resources.dll
+++ b/label/de/DevExpress.Utils.v14.1.resources.dll
--- a/label/de/DevExpress.XtraEditors.v14.1.resources.dll
+++ b/label/de/DevExpress.XtraEditors.v14.1.resources.dll
--- a/label/de/DevExpress.XtraGrid.v14.1.resources.dll
+++ b/label/de/DevExpress.XtraGrid.v14.1.resources.dll
--- a/label/de/DevExpress.XtraLayout.v14.1.resources.dll
+++ b/label/de/DevExpress.XtraLayout.v14.1.resources.dll
--- a/label/de/DevExpress.XtraPrinting.v14.1.resources.dll
+++ b/label/de/DevExpress.XtraPrinting.v14.1.resources.dll
--- a/label/es/DevExpress.Data.v14.1.resources.dll
+++ b/label/es/DevExpress.Data.v14.1.resources.dll
--- a/label/es/DevExpress.Printing.v14.1.Core.resources.dll
+++ b/label/es/DevExpress.Printing.v14.1.Core.resources.dll
--- a/label/es/DevExpress.Utils.v14.1.resources.dll
+++ b/label/es/DevExpress.Utils.v14.1.resources.dll
--- a/label/es/DevExpress.XtraEditors.v14.1.resources.dll
+++ b/label/es/DevExpress.XtraEditors.v14.1.resources.dll
--- a/label/es/DevExpress.XtraGrid.v14.1.resources.dll
+++ b/label/es/DevExpress.XtraGrid.v14.1.resources.dll
--- a/label/es/DevExpress.XtraLayout.v14.1.resources.dll
+++ b/label/es/DevExpress.XtraLayout.v14.1.resources.dll
--- a/label/es/DevExpress.XtraPrinting.v14.1.resources.dll
+++ b/label/es/DevExpress.XtraPrinting.v14.1.resources.dll
--- a/label/ja/DevExpress.Data.v14.1.resources.dll
+++ b/label/ja/DevExpress.Data.v14.1.resources.dll
--- a/label/ja/DevExpress.Printing.v14.1.Core.resources.dll
+++ b/label/ja/DevExpress.Printing.v14.1.Core.resources.dll
--- a/label/ja/DevExpress.Utils.v14.1.resources.dll
+++ b/label/ja/DevExpress.Utils.v14.1.resources.dll
--- a/label/ja/DevExpress.XtraEditors.v14.1.resources.dll
+++ b/label/ja/DevExpress.XtraEditors.v14.1.resources.dll
--- a/label/ja/DevExpress.XtraGrid.v14.1.resources.dll
+++ b/label/ja/DevExpress.XtraGrid.v14.1.resources.dll
--- a/label/ja/DevExpress.XtraLayout.v14.1.resources.dll
+++ b/label/ja/DevExpress.XtraLayout.v14.1.resources.dll
--- a/label/ja/DevExpress.XtraPrinting.v14.1.resources.dll
+++ b/label/ja/DevExpress.XtraPrinting.v14.1.resources.dll
--- a/label/ru/DevExpress.Data.v14.1.resources.dll
+++ b/label/ru/DevExpress.Data.v14.1.resources.dll
--- a/label/ru/DevExpress.Printing.v14.1.Core.resources.dll
+++ b/label/ru/DevExpress.Printing.v14.1.Core.resources.dll
--- a/label/ru/DevExpress.Utils.v14.1.resources.dll
+++ b/label/ru/DevExpress.Utils.v14.1.resources.dll
--- a/label/ru/DevExpress.XtraEditors.v14.1.resources.dll
+++ b/label/ru/DevExpress.XtraEditors.v14.1.resources.dll
--- a/label/ru/DevExpress.XtraGrid.v14.1.resources.dll
+++ b/label/ru/DevExpress.XtraGrid.v14.1.resources.dll
--- a/label/ru/DevExpress.XtraLayout.v14.1.resources.dll
+++ b/label/ru/DevExpress.XtraLayout.v14.1.resources.dll
--- a/label/ru/DevExpress.XtraPrinting.v14.1.resources.dll
+++ b/label/ru/DevExpress.XtraPrinting.v14.1.resources.dll
--- a/label/tmp/file_1.txt
+++ b/label/tmp/file_1.txt
@@ -0,0 +1,7 @@
+자산번호 : 210312
+자산명   : 가을-PC(i5-12400F)
+공급사   : (주)가을디에스
+자산위치 : 지반부
+관리부서 : 전산
+사용자   : 박노석
+취득일자 : 2024-08-05
--- a/label/tmp/file_1.txt
+++ b/label/tmp/file_1.txt
--- a/map_config.json
+++ b/map_config.json
--- a/map_editor.html
+++ b/map_editor.html
@@ -1,42 +1,44 @@
-<!DOCTYPE html>
-<html lang="ko">
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>ITAM Map Coordinate Editor v3.0</title>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css" />
-</head>
-<body class="editor-body">
-
-  <!-- Left: File Selector -->
-  <div class="file-sidebar" id="file-sidebar">
-    <!-- Rendered by MapEditor.ts -->
-  </div>
-
-  <!-- Center: Main Editor -->
-  <div class="editor-container" id="container">
-    <div class="img-wrapper" id="wrapper">
-      <img src="" id="target-img" alt="Map Image">
-    </div>
-  </div>
-
-  <!-- Right: Control Panel -->
-  <div class="sidebar">
-    <h2>Map Editor <small class="editor-version">v3.0</small></h2>
-    <div class="current-path" id="current-path">파일을 선택하세요</div>
-    <p>
-      드래그하여 구역을 정의하세요. 저장 버튼을 누르면 즉시 시스템에 반영됩니다.
-    </p>
-
-    <div class="box-list" id="box-list"></div>
-
-    <div class="actions">
-      <button id="btn-clear-all" class="btn btn-outline">전체 삭제</button>
-      <button id="btn-save-server" class="btn btn-primary">서버에 즉시 저장</button>
-      <div id="save-status"></div>
-    </div>
-  </div>
-
-  <script type="module" src="/src/map-editor-main.ts"></script>
-</body>
-</html>
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>ITAM Map Coordinate Editor v3.0</title>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css" />
+  <script src="/qrcode.min.js"></script>
+</head>
+<body class="editor-body">
+
+  <!-- Left: File Selector -->
+  <div class="file-sidebar" id="file-sidebar">
+    <!-- Rendered by MapEditor.ts -->
+  </div>
+
+  <!-- Center: Main Editor -->
+  <div class="editor-container" id="container">
+    <div class="img-wrapper" id="wrapper">
+      <img src="" id="target-img" alt="Map Image">
+    </div>
+  </div>
+
+  <!-- Right: Control Panel -->
+  <div class="sidebar">
+    <h2>Map Editor <small class="editor-version">v3.0</small></h2>
+    <div class="current-path" id="current-path">파일을 선택하세요</div>
+    <p>
+      드래그하여 구역을 정의하세요. 저장 버튼을 누르면 즉시 시스템에 반영됩니다.
+    </p>
+
+    <div class="box-list" id="box-list"></div>
+
+    <div class="actions" style="display: flex; flex-direction: column; gap: 0.5rem;">
+      <button id="btn-clear-all" class="btn btn-outline">전체 삭제</button>
+      <button id="btn-print-map-qrs" class="btn btn-outline btn-primary">이 도면 QR 일괄인쇄</button>
+      <button id="btn-save-server" class="btn btn-primary">서버에 즉시 저장</button>
+      <div id="save-status"></div>
+    </div>
+  </div>
+
+  <script type="module" src="/src/map-editor-main.ts"></script>
+</body>
+</html>
--- a/mobile.html
+++ b/mobile.html
@@ -0,0 +1,299 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <title>ITAM 모바일 실사 점검</title>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css" />
+  <script src="https://unpkg.com/html5-qrcode@2.3.8/html5-qrcode.min.js"></script>
+  <style>
+    :root {
+      --bg: #09090b;
+      --card: #18181b;
+      --card-border: #27272a;
+      --primary: #3b82f6;
+      --primary-hover: #2563eb;
+      --success: #10b981;
+      --danger: #ef4444;
+      --text: #f4f4f5;
+      --text-muted: #a1a1aa;
+      --font-family: 'Pretendard Variable', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
+    }
+
+    * {
+      box-sizing: border-box;
+      margin: 0;
+      padding: 0;
+      font-family: var(--font-family);
+    }
+
+    body {
+      background-color: var(--bg);
+      color: var(--text);
+      display: flex;
+      flex-direction: column;
+      height: 100vh;
+      overflow: hidden;
+    }
+
+    header {
+      background-color: var(--card);
+      border-bottom: 1px solid var(--card-border);
+      padding: 1rem;
+      text-align: center;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      flex-shrink: 0;
+    }
+
+    header h1 {
+      font-size: 1.1rem;
+      font-weight: 700;
+      background: linear-gradient(135deg, #60a5fa, #3b82f6);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+
+    .status-dot {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      background-color: var(--success);
+      box-shadow: 0 0 8px var(--success);
+    }
+
+    main {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      padding: 1rem;
+      gap: 1rem;
+      overflow-y: auto;
+      align-items: center;
+      justify-content: center;
+    }
+
+    /* Scanner Viewport */
+    .scanner-container {
+      width: 100%;
+      max-width: 400px;
+      aspect-ratio: 1;
+      border-radius: 16px;
+      overflow: hidden;
+      border: 2px dashed var(--card-border);
+      position: relative;
+      background-color: #000;
+    }
+
+    #reader {
+      width: 100% !important;
+      height: 100% !important;
+      border: none !important;
+    }
+
+    #reader video {
+      object-fit: cover !important;
+      width: 100% !important;
+      height: 100% !important;
+    }
+
+    /* Scan Laser Line Animation */
+    .scan-laser {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 2px;
+      background: linear-gradient(to right, transparent, var(--primary), transparent);
+      animation: scan 2s linear infinite;
+      z-index: 10;
+      pointer-events: none;
+    }
+
+    @keyframes scan {
+      0% { top: 0%; }
+      50% { top: 100%; }
+      100% { top: 0%; }
+    }
+
+    /* Bottom Info Card */
+    .info-panel {
+      width: 100%;
+      max-width: 400px;
+      background-color: var(--card);
+      border: 1px solid var(--card-border);
+      border-radius: 16px;
+      padding: 1rem;
+      display: flex;
+      flex-direction: column;
+      gap: 0.75rem;
+      flex-shrink: 0;
+    }
+
+    .info-section {
+      display: flex;
+      flex-direction: column;
+      gap: 0.25rem;
+    }
+
+    .info-label {
+      font-size: 0.75rem;
+      font-weight: 600;
+      color: var(--text-muted);
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+    }
+
+    .info-value {
+      font-size: 0.95rem;
+      font-weight: 700;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 0.5rem;
+      min-height: 24px;
+    }
+
+    .badge-lock {
+      background-color: rgba(59, 130, 246, 0.15);
+      color: var(--primary);
+      padding: 0.25rem 0.5rem;
+      border-radius: 6px;
+      font-size: 0.8rem;
+      border: 1px solid rgba(59, 130, 246, 0.3);
+      font-weight: 700;
+    }
+
+    .badge-empty {
+      color: var(--text-muted);
+      font-weight: 400;
+      font-style: italic;
+    }
+
+    .btn-action {
+      background-color: var(--primary);
+      color: var(--text);
+      border: none;
+      padding: 0.5rem 1rem;
+      border-radius: 8px;
+      font-size: 0.85rem;
+      font-weight: 600;
+      cursor: pointer;
+      transition: background-color 0.2s;
+    }
+
+    .btn-action:hover {
+      background-color: var(--primary-hover);
+    }
+
+    .btn-action.btn-danger {
+      background-color: rgba(239, 68, 68, 0.15);
+      color: var(--danger);
+      border: 1px solid rgba(239, 68, 68, 0.3);
+    }
+
+    .btn-action.btn-danger:hover {
+      background-color: rgba(239, 68, 68, 0.25);
+    }
+
+    /* Manual Input Section */
+    .manual-toggle {
+      text-align: center;
+      font-size: 0.8rem;
+      color: var(--primary);
+      cursor: pointer;
+      text-decoration: underline;
+    }
+
+    .manual-form {
+      display: none;
+      flex-direction: column;
+      gap: 0.5rem;
+      width: 100%;
+    }
+
+    .input-field {
+      width: 100%;
+      background-color: var(--bg);
+      border: 1px solid var(--card-border);
+      border-radius: 8px;
+      color: var(--text);
+      padding: 0.5rem;
+      font-size: 0.9rem;
+    }
+
+    .input-field:focus {
+      outline: 1px solid var(--primary);
+    }
+
+    /* Feedbacks Overlay */
+    .feedback-message {
+      text-align: center;
+      padding: 0.5rem;
+      border-radius: 8px;
+      font-size: 0.85rem;
+      display: none;
+      animation: fadeIn 0.3s;
+    }
+
+    @keyframes fadeIn {
+      from { opacity: 0; transform: translateY(5px); }
+      to { opacity: 1; transform: translateY(0); }
+    }
+
+    .feedback-success {
+      background-color: rgba(16, 185, 129, 0.15);
+      color: var(--success);
+      border: 1px solid rgba(16, 185, 129, 0.3);
+    }
+
+    .feedback-error {
+      background-color: rgba(239, 68, 68, 0.15);
+      color: var(--danger);
+      border: 1px solid rgba(239, 68, 68, 0.3);
+    }
+  </style>
+</head>
+<body>
+
+  <header>
+    <h1>ITAM 모바일 실사</h1>
+    <div class="status-dot"></div>
+  </header>
+
+  <main>
+    <div class="scanner-container">
+      <div id="reader"></div>
+      <div class="scan-laser"></div>
+    </div>
+
+    <div class="info-panel">
+      <!-- 1. 위치 락 정보 -->
+      <div class="info-section">
+        <span class="info-label">현재 점검 위치 (Location)</span>
+        <div class="info-value">
+          <span id="loc-display" class="badge-empty">위치 QR 코드를 먼저 스캔하세요.</span>
+          <button id="btn-unlock-loc" class="btn-action btn-danger" style="display: none;">해제</button>
+        </div>
+      </div>
+
+      <hr style="border: 0; border-top: 1px solid var(--card-border); margin: 0.25rem 0;" />
+
+      <!-- 2. 자산 스캔 결과 및 피드백 -->
+      <div id="scan-feedback" class="feedback-message"></div>
+
+      <!-- 3. 수동 입력 토글 및 양식 -->
+      <div class="info-section">
+        <span id="btn-toggle-manual" class="manual-toggle">카메라가 안 되나요? 수동 코드로 입력</span>
+        <div id="manual-form" class="manual-form">
+          <input type="text" id="manual-code-input" class="input-field" placeholder="위치 또는 자산 코드 입력" />
+          <button id="btn-submit-manual" class="btn-action w-full">입력 확인</button>
+        </div>
+      </div>
+    </div>
+  </main>
+
+  <script type="module" src="/src/mobile-main.ts"></script>
+</body>
+</html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,26 +1,28 @@
-{
-  "name": "hm-itam",
-  "private": true,
-  "version": "0.0.0",
-  "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "build": "tsc && vite build",
-    "preview": "vite preview",
-    "server": "node server.js",
-    "db-init": "node db_init.js"
-  },
-  "devDependencies": {
-    "typescript": "^5.2.2",
-    "vite": "^5.2.0"
-  },
-  "dependencies": {
-    "cors": "^2.8.6",
-    "dotenv": "^17.4.2",
-    "express": "^5.2.1",
-    "iconv-lite": "^0.7.2",
-    "lucide": "^0.364.0",
-    "mysql2": "^3.22.1",
-    "xlsx": "^0.18.5"
-  }
-}
+{
+  "name": "hm-itam",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "server": "node server.js",
+    "db-init": "node db_init.js"
+  },
+  "devDependencies": {
+    "@types/qrcode": "^1.5.6",
+    "typescript": "^5.2.2",
+    "vite": "^5.2.0"
+  },
+  "dependencies": {
+    "cors": "^2.8.6",
+    "dotenv": "^17.4.2",
+    "express": "^5.2.1",
+    "iconv-lite": "^0.7.2",
+    "lucide": "^0.364.0",
+    "mysql2": "^3.22.1",
+    "qrcode": "^1.5.4",
+    "xlsx": "^0.18.5"
+  }
+}
--- a/public/qrcode.min.js
+++ b/public/qrcode.min.js
--- a/scratch/db_migrate.cjs
+++ b/scratch/db_migrate.cjs
@@ -0,0 +1,189 @@
+const mysql = require('mysql2/promise');
+const fs = require('fs');
+require('dotenv').config();
+
+function getCleanMapKey(path) {
+  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) {
+  if (path.includes('IDC')) return 'IDC';
+  if (path.includes('한맥빌딩')) return '한맥빌딩';
+  if (path.includes('기술개발센터')) return '기술개발센터';
+  return '기타';
+}
+
+function getLocationDetail(path, idx) {
+  let clean = path.replace('img/location_photo/', '').replace('.png', '');
+  let parts = clean.split('/');
+  let lastPart = parts[parts.length - 1]; // e.g. "서관205", "MDF_1", "서버실_1"
+  return `${lastPart} 구역 자리 #${idx + 1}`;
+}
+
+async function main() {
+  console.log('🏁 Starting DB migration...');
+
+  const pool = mysql.createPool({
+    host: process.env.DB_HOST,
+    user: process.env.DB_USER,
+    password: process.env.DB_PASS,
+    database: process.env.DB_NAME,
+    port: process.env.DB_PORT
+  });
+
+  const connection = await pool.getConnection();
+
+  try {
+    // 1. Create physical_locations table
+    console.log('⏳ Creating physical_locations table...');
+    await connection.query(`
+      CREATE TABLE IF NOT EXISTS physical_locations (
+          location_code VARCHAR(50) NOT NULL COMMENT '위치 식별 코드 (예: LOC-IDC-W205-001)',
+          location_name VARCHAR(100) NOT NULL COMMENT '물리 위치 대분류 (예: IDC 서관)',
+          location_detail VARCHAR(100) NOT NULL COMMENT '상세 위치/랙 번호 (예: 205호 1번 랙)',
+          map_image VARCHAR(150) NOT NULL COMMENT '해당 도면 파일 경로 (예: img/location_photo/IDC/서관205.png)',
+          map_x DECIMAL(5,2) NOT NULL COMMENT '도면 내 X 백분율 좌표',
+          map_y DECIMAL(5,2) NOT NULL COMMENT '도면 내 Y 백분율 좌표',
+          map_w DECIMAL(5,2) NOT NULL DEFAULT 4.00 COMMENT '도면 내 박스 너비(%)',
+          map_h DECIMAL(5,2) NOT NULL DEFAULT 4.00 COMMENT '도면 내 박스 높이(%)',
+          created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+          PRIMARY KEY (location_code)
+      ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;
+    `);
+    console.log('✅ physical_locations table ready.');
+
+    // 2. Create asset_audit_pending table
+    console.log('⏳ Creating asset_audit_pending table...');
+    await connection.query(`
+      CREATE TABLE IF NOT EXISTS asset_audit_pending (
+          id INT AUTO_INCREMENT PRIMARY KEY,
+          asset_code VARCHAR(50) NOT NULL COMMENT '스캔된 자산 고유번호 (예: server_1779761946023_14)',
+          physical_location_code VARCHAR(50) NOT NULL COMMENT '스캔된 위치 마스터 코드 (예: LOC-IDC-W205-001)',
+          status VARCHAR(20) NOT NULL DEFAULT 'PENDING' COMMENT '상태: PENDING(대기), APPROVED(승인), REJECTED(반려)',
+          scanned_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+          processed_at TIMESTAMP NULL COMMENT '승인/반려 처리 일시',
+          processed_by VARCHAR(50) NULL COMMENT '처리한 관리자',
+          CONSTRAINT fk_audit_physical FOREIGN KEY (physical_location_code) REFERENCES physical_locations(location_code)
+      ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;
+    `);
+    console.log('✅ asset_audit_pending table ready.');
+
+    // 3. Add physical_location_code to asset_location
+    console.log('⏳ Checking physical_location_code column in asset_location...');
+    const [cols] = await connection.query('DESCRIBE asset_location');
+    const hasCol = cols.some(c => c.Field === 'physical_location_code');
+    if (!hasCol) {
+      await connection.query(`
+        ALTER TABLE asset_location 
+          ADD COLUMN physical_location_code VARCHAR(50) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL COMMENT 'physical_locations의 location_code FK'
+      `);
+      console.log('✅ physical_location_code column added with utf8mb4_unicode_ci collation.');
+    } else {
+      console.log('ℹ️ physical_location_code column already exists. Enforcing collation...');
+      await connection.query(`
+        ALTER TABLE asset_location 
+          MODIFY COLUMN physical_location_code VARCHAR(50) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL COMMENT 'physical_locations의 location_code FK'
+      `);
+      console.log('✅ physical_location_code column collation enforced.');
+    }
+
+    // Add constraint if not exists
+    console.log('⏳ Checking foreign key constraint fk_asset_loc_physical...');
+    const [constraints] = await connection.query(`
+      SELECT CONSTRAINT_NAME 
+      FROM INFORMATION_SCHEMA.KEY_COLUMN_USAGE 
+      WHERE TABLE_NAME = 'asset_location' 
+        AND CONSTRAINT_NAME = 'fk_asset_loc_physical'
+        AND TABLE_SCHEMA = DATABASE()
+    `);
+
+    if (constraints.length === 0) {
+      console.log('⏳ Adding foreign key constraint...');
+      await connection.query(`
+        ALTER TABLE asset_location
+          ADD CONSTRAINT fk_asset_loc_physical 
+          FOREIGN KEY (physical_location_code) REFERENCES physical_locations(location_code)
+      `);
+      console.log('✅ Foreign key constraint added.');
+    } else {
+      console.log('ℹ️ Foreign key constraint already exists.');
+    }
+
+    // 4. Load map_config.json and migrate
+    console.log('⏳ Migrating map_config.json data to physical_locations...');
+    if (fs.existsSync('map_config.json')) {
+      const mapConfig = JSON.parse(fs.readFileSync('map_config.json', 'utf8') || '{}');
+      let insertCount = 0;
+      let syncCount = 0;
+
+      for (const [mapPath, boxes] of Object.entries(mapConfig)) {
+        const cleanKey = getCleanMapKey(mapPath);
+        const locName = getLocationName(mapPath);
+
+        for (let i = 0; i < boxes.length; i++) {
+          const box = boxes[i];
+          const padIdx = String(i + 1).padStart(3, '0');
+          const locCode = `LOC-${cleanKey}-${padIdx}`;
+          const locDetail = getLocationDetail(mapPath, i);
+
+          const bx = parseFloat(box.x);
+          const by = parseFloat(box.y);
+          const bw = parseFloat(box.w || 4.00);
+          const bh = parseFloat(box.h || 4.00);
+
+          // Insert into physical_locations (ignore if duplicate)
+          await connection.query(`
+            INSERT INTO physical_locations 
+              (location_code, location_name, location_detail, map_image, map_x, map_y, map_w, map_h)
+            VALUES (?, ?, ?, ?, ?, ?, ?, ?)
+            ON DUPLICATE KEY UPDATE 
+              location_name = VALUES(location_name),
+              location_detail = VALUES(location_detail),
+              map_image = VALUES(map_image),
+              map_x = VALUES(map_x),
+              map_y = VALUES(map_y),
+              map_w = VALUES(map_w),
+              map_h = VALUES(map_h)
+          `, [locCode, locName, locDetail, mapPath, bx, by, bw, bh]);
+          
+          insertCount++;
+
+          // Sync database asset if box.asset_id exists
+          if (box.asset_id) {
+            const [rows] = await connection.query(
+              'SELECT id FROM asset_location WHERE asset_id = ? AND is_active = 1',
+              [box.asset_id]
+            );
+            if (rows.length > 0) {
+              await connection.query(
+                'UPDATE asset_location SET physical_location_code = ? WHERE asset_id = ? AND is_active = 1',
+                [locCode, box.asset_id]
+              );
+              syncCount++;
+            }
+          }
+        }
+      }
+      console.log(`✅ Migrated ${insertCount} physical locations and synced ${syncCount} existing assets.`);
+    } else {
+      console.log('⚠️ map_config.json not found, skipping initial migration.');
+    }
+
+    console.log('🎉 DB Migration successfully completed!');
+  } catch (err) {
+    console.error('❌ Migration failed:', err);
+    throw err;
+  } finally {
+    connection.release();
+    await pool.end();
+  }
+}
+
+main().catch(err => {
+  process.exit(1);
+});
--- a/scratch/test_audit.cjs
+++ b/scratch/test_audit.cjs
@@ -0,0 +1,231 @@
+const assert = require('assert');
+const http = require('http');
+const mysql = require('mysql2/promise');
+require('dotenv').config();
+
+const BASE_URL = 'http://localhost:3001';
+
+function request(method, path, body = null) {
+  return new Promise((resolve, reject) => {
+    const url = `${BASE_URL}${path}`;
+    const options = {
+      method: method,
+      headers: {
+        'Content-Type': 'application/json'
+      }
+    };
+    const req = http.request(url, options, (res) => {
+      let data = '';
+      res.on('data', (chunk) => { data += chunk; });
+      res.on('end', () => {
+        try {
+          const parsed = JSON.parse(data);
+          resolve({ status: res.statusCode, body: parsed });
+        } catch (e) {
+          resolve({ status: res.statusCode, body: data });
+        }
+      });
+    });
+    req.on('error', (err) => reject(err));
+    if (body) {
+      req.write(JSON.stringify(body));
+    }
+    req.end();
+  });
+}
+
+async function runTests() {
+  console.log('🧪 Starting Audit TDD Tests...');
+  const pool = mysql.createPool({
+    host: process.env.DB_HOST,
+    user: process.env.DB_USER,
+    password: process.env.DB_PASS,
+    database: process.env.DB_NAME,
+    port: process.env.DB_PORT
+  });
+
+  const connection = await pool.getConnection();
+
+  try {
+    // Clean up any test records
+    console.log('🧹 Cleaning up test records...');
+    await connection.query("DELETE FROM asset_audit_pending WHERE asset_code LIKE 'TEST-ASSET-%'");
+    
+    // Check if test assets exist in asset_core & asset_location
+    // We will use an existing asset or insert a dummy test asset
+    const [testAssets] = await connection.query("SELECT id FROM asset_core WHERE asset_code = 'TEST-ASSET-001'");
+    let testAssetId;
+    if (testAssets.length === 0) {
+      console.log('⏳ Inserting dummy test asset...');
+      testAssetId = 'test_asset_uuid_123456';
+      await connection.query(`
+        INSERT INTO asset_core (id, asset_code, category, asset_type, asset_purpose)
+        VALUES (?, 'TEST-ASSET-001', 'server', 'Server', 'TDD Test Server')
+      `, [testAssetId]);
+      await connection.query(`
+        INSERT INTO asset_location (asset_id, location, location_detail, location_photo, loc_x, loc_y, is_active)
+        VALUES (?, 'Initial Location', 'Initial Detail', 'initial.png', '10.00', '10.00', 1)
+      `, [testAssetId]);
+    } else {
+      testAssetId = testAssets[0].id;
+    }
+
+    // 1. Test GET /api/physical-locations
+    console.log('👉 Test 1: GET /api/physical-locations');
+    const res1 = await request('GET', '/api/physical-locations');
+    assert.strictEqual(res1.status, 200, 'GET /api/physical-locations should return 200');
+    assert(Array.isArray(res1.body), 'Response should be an array of physical locations');
+    assert(res1.body.length > 0, 'Should return at least one physical location');
+    console.log(`✅ Test 1 Passed: Found ${res1.body.length} physical locations.`);
+
+    const sampleLocation = res1.body[0].location_code;
+
+    // 2. Test POST /api/audit/scan
+    console.log(`👉 Test 2: POST /api/audit/scan (Location: ${sampleLocation}, Asset: TEST-ASSET-001)`);
+    const res2 = await request('POST', '/api/audit/scan', {
+      asset_code: 'TEST-ASSET-001',
+      physical_location_code: sampleLocation
+    });
+    assert.strictEqual(res2.status, 200, 'POST /api/audit/scan should return 200');
+    assert.strictEqual(res2.body.success, true, 'Response success should be true');
+    assert(res2.body.pending_id, 'Response should contain pending_id');
+    console.log(`✅ Test 2 Passed: Pending scan registered with ID: ${res2.body.pending_id}`);
+    
+    const pendingId = res2.body.pending_id;
+
+    // 3. Test GET /api/audit/pending
+    console.log('👉 Test 3: GET /api/audit/pending');
+    const res3 = await request('GET', '/api/audit/pending');
+    assert.strictEqual(res3.status, 200, 'GET /api/audit/pending should return 200');
+    assert(Array.isArray(res3.body), 'Response should be an array');
+    const pendingItem = res3.body.find(item => item.id === pendingId);
+    assert(pendingItem, 'Pending list should contain the newly registered scan');
+    assert.strictEqual(pendingItem.asset_code, 'TEST-ASSET-001', 'Asset code should match');
+    assert.strictEqual(pendingItem.physical_location_code, sampleLocation, 'Location code should match');
+    assert.strictEqual(pendingItem.status, 'PENDING', 'Status should be PENDING');
+    console.log('✅ Test 3 Passed: Newly registered scan found in pending list with correct details.');
+
+    // 4. Test POST /api/audit/approve
+    console.log(`👉 Test 4: POST /api/audit/approve (Pending ID: ${pendingId})`);
+    const res4 = await request('POST', '/api/audit/approve', {
+      pending_ids: [pendingId],
+      processed_by: 'TDD-TESTER'
+    });
+    assert.strictEqual(res4.status, 200, 'POST /api/audit/approve should return 200');
+    assert.strictEqual(res4.body.success, true, 'Response success should be true');
+    console.log('✅ Test 4 Passed: Audit approved.');
+
+    // Verify database updates
+    console.log('🔍 Verifying updates in database...');
+    const [pendingCheck] = await connection.query(
+      'SELECT status, processed_by FROM asset_audit_pending WHERE id = ?', 
+      [pendingId]
+    );
+    assert.strictEqual(pendingCheck[0].status, 'APPROVED', 'Pending record status should be APPROVED');
+    assert.strictEqual(pendingCheck[0].processed_by, 'TDD-TESTER', 'Processed by should match');
+
+    const [locationCheck] = await connection.query(
+      'SELECT physical_location_code, location_photo, loc_x, loc_y FROM asset_location WHERE asset_id = ? AND is_active = 1',
+      [testAssetId]
+    );
+    const [physLoc] = await connection.query(
+      'SELECT map_image, map_x, map_y FROM physical_locations WHERE location_code = ?',
+      [sampleLocation]
+    );
+    assert.strictEqual(locationCheck[0].physical_location_code, sampleLocation, 'Asset location code should be updated');
+    assert.strictEqual(locationCheck[0].location_photo, physLoc[0].map_image, 'Asset map_image should be updated');
+    assert.strictEqual(parseFloat(locationCheck[0].loc_x).toFixed(2), parseFloat(physLoc[0].map_x).toFixed(2), 'Asset map_x should be updated');
+    assert.strictEqual(parseFloat(locationCheck[0].loc_y).toFixed(2), parseFloat(physLoc[0].map_y).toFixed(2), 'Asset map_y should be updated');
+    console.log('✅ Database verification passed: Asset location and map coordinates updated successfully!');
+
+    // 5. Test GET /api/maps (Before modification)
+    console.log('👉 Test 5: GET /api/maps');
+    const res5 = await request('GET', '/api/maps');
+    assert.strictEqual(res5.status, 200, 'GET /api/maps should return 200');
+    assert(typeof res5.body === 'object' && res5.body !== null, 'Response should be a map config object');
+    console.log('✅ Test 5 Passed: GET /api/maps returned valid object.');
+
+    // 6. Test POST /api/maps/save
+    console.log('👉 Test 6: POST /api/maps/save');
+    const testMapPath = 'img/location_photo/TDD_TEST_MAP.png';
+    const testBoxes = [
+      {
+        x: '30.50',
+        y: '40.25',
+        w: '10.00',
+        h: '12.00',
+        asset_id: testAssetId
+      },
+      {
+        x: '50.00',
+        y: '60.00',
+        w: '5.00',
+        h: '5.00',
+        asset_id: null
+      }
+    ];
+
+    const res6 = await request('POST', '/api/maps/save', {
+      path: testMapPath,
+      boxes: testBoxes
+    });
+    assert.strictEqual(res6.status, 200, 'POST /api/maps/save should return 200');
+    assert.strictEqual(res6.body.success, true, 'Save should be successful');
+    console.log('✅ Test 6 Passed: Map coordinate save triggered successfully.');
+
+    // Verify DB update directly for physical_locations
+    console.log('🔍 Verifying physical_locations update in database...');
+    const [physLocCheck] = await connection.query(
+      'SELECT location_code, map_x, map_y, map_w, map_h FROM physical_locations WHERE map_image = ? ORDER BY location_code',
+      [testMapPath]
+    );
+    assert.strictEqual(physLocCheck.length, 2, 'Should create 2 physical locations for the test map');
+    
+    // First location has asset_id mapped
+    assert.strictEqual(parseFloat(physLocCheck[0].map_x).toFixed(2), '30.50', 'First location X coord match');
+    assert.strictEqual(parseFloat(physLocCheck[0].map_y).toFixed(2), '40.25', 'First location Y coord match');
+    assert.strictEqual(parseFloat(physLocCheck[0].map_w).toFixed(2), '10.00', 'First location W size match');
+    assert.strictEqual(parseFloat(physLocCheck[0].map_h).toFixed(2), '12.00', 'First location H size match');
+    
+    // Asset location coordinates sync check
+    console.log('🔍 Verifying asset_location coordination sync in database...');
+    const [assetLocSyncCheck] = await connection.query(
+      'SELECT loc_x, loc_y, physical_location_code FROM asset_location WHERE asset_id = ? AND is_active = 1',
+      [testAssetId]
+    );
+    assert(assetLocSyncCheck.length > 0, 'Asset location should be active');
+    assert.strictEqual(parseFloat(assetLocSyncCheck[0].loc_x).toFixed(2), '30.50', 'Asset location X should sync');
+    assert.strictEqual(parseFloat(assetLocSyncCheck[0].loc_y).toFixed(2), '40.25', 'Asset location Y should sync');
+    assert.strictEqual(assetLocSyncCheck[0].physical_location_code, physLocCheck[0].location_code, 'Physical location code should match');
+    console.log('✅ DB Verification for save: physical_locations and asset_location coordinates synced.');
+
+    // 7. Test GET /api/maps (After modification)
+    console.log('👉 Test 7: GET /api/maps (After saving)');
+    const res7 = await request('GET', '/api/maps');
+    assert.strictEqual(res7.status, 200, 'GET /api/maps should return 200');
+    assert(res7.body[testMapPath], 'Returned config should contain the newly saved test map');
+    const savedBoxes = res7.body[testMapPath];
+    assert.strictEqual(savedBoxes.length, 2, 'Saved boxes count match');
+    assert.strictEqual(savedBoxes[0].asset_id, testAssetId, 'First box asset_id match');
+    assert.strictEqual(savedBoxes[0].x, '30.50', 'First box X match');
+    assert.strictEqual(savedBoxes[1].asset_id, null, 'Second box asset_id is null');
+    console.log('✅ Test 7 Passed: GET /api/maps returned updated configuration.');
+
+    // Clean up
+    console.log('🧹 Cleaning up test assets...');
+    await connection.query("DELETE FROM asset_audit_pending WHERE asset_code = 'TEST-ASSET-001'");
+    await connection.query("DELETE FROM asset_location WHERE asset_id = ?", [testAssetId]);
+    await connection.query("DELETE FROM asset_core WHERE id = ?", [testAssetId]);
+    await connection.query("DELETE FROM physical_locations WHERE map_image = ?", [testMapPath]);
+
+    console.log('🎉 All TDD tests passed successfully!');
+  } catch (err) {
+    console.error('❌ TDD Test Suite Failed:', err.message);
+    throw err;
+  } finally {
+    connection.release();
+    await pool.end();
+  }
+}
+
+runTests().catch(() => process.exit(1));
--- a/server.js
+++ b/server.js
--- a/src/components/Modal/HWModal.ts
+++ b/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,11 @@ 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>
+              <span id="hw-modal-audit-approved-badge" style="display: none; align-items: center; background-color: rgba(16, 185, 129, 0.08); color: #059669; border: 1px solid rgba(16, 185, 129, 0.18); padding: 1px 6px; border-radius: 4px; font-size: 10px; font-weight: 600; height: 20px; line-height: 1; vertical-align: middle; white-space: nowrap; margin-left: 4px;">승인완료</span>
            </div>
            <button id="btn-close-hw-modal" class="btn-icon" aria-label="닫기">&times;</button>
          </div>
@@ -264,6 +267,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');
@@ -318,7 +336,7 @@ class HwAssetModal extends BaseModal {
      const reader = new FileReader();
      reader.onload = async () => {
        try {
-          const res = await fetch(`/api/upload`, {
+          const res = await fetch('/api/upload', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ fileName: file.name, fileData: reader.result })
@@ -644,6 +662,19 @@ 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);
+    }
+
+    const approvedBadge = document.getElementById('hw-modal-audit-approved-badge');
+    if (approvedBadge) {
+      const isApproved = asset && asset.is_audit_approved;
+      approvedBadge.style.display = (mode === 'view' && isApproved) ? 'inline-flex' : 'none';
+    }
+
    this.toggleFileUploadUI(mode !== 'view');
    this.toggleEditOnlyBtns(mode !== 'view');
    this.updateMapButtonVisibility();
--- a/src/components/Navigation.ts
+++ b/src/components/Navigation.ts
@@ -1,120 +1,124 @@
-import { state } from '../core/state';
-
-const MENU_CONFIG: any = {
-  hw: {
-    label: '하드웨어',
-    tabs: ['대시보드', '서버', 'PC', '스토리지', '공간정보장비', 'PC부품', '부품 마스터', '네트워크', '업무지원장비']
-  },
-  sw: {
-    label: '소프트웨어',
-    tabs: ['외부SW', '내부SW']
-  },
-  ops: {
-    label: '운영지원',
-    tabs: ['클라우드', '도메인', '비용관리', '사용자']
-  },
-  vip: {
-    label: '내빈/외빈',
-    tabs: ['선물']
-  },
-  fac: {
-    label: '시설자산',
-    tabs: ['사무가구']
-  }
-};
-
-export function renderNavigation(onTabChange: (tab: string) => void) {
-  const header = document.querySelector('.main-header') as HTMLElement;
-  const headerContainer = document.querySelector('.header-container')!;
-  if (!headerContainer) return;
-
-  const render = () => {
-    // 1. 헤더 구조 (Vercel Style: Clean Single Row)
-    headerContainer.innerHTML = `
-      <div class="brand" id="btn-home-logo" style="cursor: pointer;">
-        <img src="img/image_92.png" class="main-logo" alt="HM Logo" />
-        <h1>한맥자산관리시스템</h1>
-      </div>
-      
-      <nav class="integrated-nav" id="main-nav-list"></nav>
-
-      <div class="header-actions">
-        <div class="role-toggle-wrapper">
-          <span class="role-label user ${state.currentUserRole === 'user' ? 'active' : ''}">실무자</span>
-          <label class="role-toggle">
-            <input type="checkbox" id="role-toggle-checkbox" ${state.currentUserRole === 'admin' ? 'checked' : ''}>
-            <span class="role-slider"></span>
-          </label>
-          <span class="role-label admin ${state.currentUserRole === 'admin' ? 'active' : ''}">관리자</span>
-        </div>
-        <div class="notification-area">
-           <button class="icon-btn" title="알림"><i data-lucide="bell" style="width:18px; height:18px;"></i></button>
-        </div>
-      </div>
-    `;
-
-    const navList = document.getElementById('main-nav-list')!;
-    
-    // 2. GNB 메뉴 렌더링 (Ghost Tab Style)
-    Object.keys(MENU_CONFIG).forEach(catKey => {
-      const config = MENU_CONFIG[catKey];
-      
-      const visibleTabs = config.tabs.filter((tab: string) => {
-        if (state.currentUserRole === 'admin') return tab === '대시보드';
-        return tab !== '대시보드';
-      });
-
-      if (visibleTabs.length === 0) return;
-
-      visibleTabs.forEach((tab: string) => {
-        if (tab === '부품 마스터') return;
-        const item = document.createElement('div');
-        const isActive = state.activeSubTab === tab;
-        item.className = `gnb-trigger ${isActive ? 'active' : ''}`;
-        item.textContent = tab;
-        item.style.fontSize = 'var(--fs-sm)'; // Ensure small but standard font
-        
-        item.addEventListener('click', (e) => {
-          e.stopPropagation();
-          state.activeCategory = catKey as any;
-          state.activeSubTab = tab;
-          render(); 
-          onTabChange(tab);
-        });
-        navList.appendChild(item);
-      });
-    });
-
-    // 3. 관리자 전용 '관리도구'
-    if (state.currentUserRole === 'admin') {
-      const adminTrigger = document.createElement('div');
-      adminTrigger.className = 'gnb-trigger admin-trigger';
-      adminTrigger.innerHTML = '관리도구';
-      adminTrigger.addEventListener('click', () => window.open('/map_editor.html', '_blank'));
-      navList.appendChild(adminTrigger);
-    }
-
-    // 4. 이벤트 바인딩
-    document.getElementById('btn-home-logo')?.addEventListener('click', () => location.reload());
-    
-    const roleToggle = document.getElementById('role-toggle-checkbox') as HTMLInputElement;
-    roleToggle?.addEventListener('change', () => {
-      state.currentUserRole = roleToggle.checked ? 'admin' : 'user';
-      if (state.currentUserRole === 'admin') {
-        state.activeCategory = 'hw';
-        state.activeSubTab = '대시보드';
-      } else {
-        state.activeCategory = 'hw';
-        state.activeSubTab = '서버';
-      }
-      render();
-      onTabChange(state.activeSubTab);
-    });
-
-    // 아이콘 생성
-    // @ts-ignore
-    if (window.lucide) window.lucide.createIcons();
-  };
-
-  render();
-}
+import { state } from '../core/state';
+
+const MENU_CONFIG: any = {
+  hw: {
+    label: '하드웨어',
+    tabs: ['대시보드', '서버', 'PC', '스토리지', '공간정보장비', 'PC부품', '부품 마스터', '네트워크', '업무지원장비']
+  },
+  sw: {
+    label: '소프트웨어',
+    tabs: ['외부SW', '내부SW']
+  },
+  ops: {
+    label: '운영지원',
+    tabs: ['클라우드', '도메인', '비용관리', '사용자']
+  },
+  vip: {
+    label: '내빈/외빈',
+    tabs: ['선물']
+  },
+  fac: {
+    label: '시설자산',
+    tabs: ['사무가구']
+  }
+};
+
+export function renderNavigation(onTabChange: (tab: string) => void) {
+  const header = document.querySelector('.main-header') as HTMLElement;
+  const headerContainer = document.querySelector('.header-container')!;
+  if (!headerContainer) return;
+
+  const render = () => {
+    // 1. 헤더 구조 (Vercel Style: Clean Single Row)
+    headerContainer.innerHTML = `
+      <div class="brand" id="btn-home-logo" style="cursor: pointer;">
+        <img src="img/image_92.png" class="main-logo" alt="HM Logo" />
+        <h1>한맥자산관리시스템</h1>
+      </div>
+      
+      <nav class="integrated-nav" id="main-nav-list"></nav>
+
+      <div class="header-actions">
+        <div class="role-toggle-wrapper">
+          <span class="role-label user ${state.currentUserRole === 'user' ? 'active' : ''}">실무자</span>
+          <label class="role-toggle">
+            <input type="checkbox" id="role-toggle-checkbox" ${state.currentUserRole === 'admin' ? 'checked' : ''}>
+            <span class="role-slider"></span>
+          </label>
+          <span class="role-label admin ${state.currentUserRole === 'admin' ? 'active' : ''}">관리자</span>
+        </div>
+        <div class="notification-area">
+           <button class="icon-btn" title="알림"><i data-lucide="bell" style="width:18px; height:18px;"></i></button>
+        </div>
+      </div>
+    `;
+
+    const navList = document.getElementById('main-nav-list')!;
+    
+    // 2. GNB 메뉴 렌더링 (Ghost Tab Style)
+    Object.keys(MENU_CONFIG).forEach(catKey => {
+      const config = MENU_CONFIG[catKey];
+      
+      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) => {
+        if (tab === '부품 마스터') return;
+        const item = document.createElement('div');
+        const isActive = state.activeSubTab === tab;
+        item.className = `gnb-trigger ${isActive ? 'active' : ''}`;
+        item.textContent = tab;
+        item.style.fontSize = 'var(--fs-sm)'; // Ensure small but standard font
+        
+        item.addEventListener('click', (e) => {
+          e.stopPropagation();
+          state.activeCategory = catKey as any;
+          state.activeSubTab = tab;
+          render(); 
+          onTabChange(tab);
+        });
+        navList.appendChild(item);
+      });
+    });
+
+    // 3. 관리자 전용 '관리도구'
+    if (state.currentUserRole === 'admin') {
+      const adminTrigger = document.createElement('div');
+      adminTrigger.className = 'gnb-trigger admin-trigger';
+      adminTrigger.innerHTML = '관리도구';
+      adminTrigger.addEventListener('click', () => window.open('/map_editor.html', '_blank'));
+      navList.appendChild(adminTrigger);
+    }
+
+    // 4. 이벤트 바인딩
+    document.getElementById('btn-home-logo')?.addEventListener('click', () => location.reload());
+    
+    const roleToggle = document.getElementById('role-toggle-checkbox') as HTMLInputElement;
+    roleToggle?.addEventListener('change', () => {
+      state.currentUserRole = roleToggle.checked ? 'admin' : 'user';
+      if (state.currentUserRole === 'admin') {
+        state.activeCategory = 'hw';
+        state.activeSubTab = '대시보드';
+      } else {
+        state.activeCategory = 'hw';
+        state.activeSubTab = '서버';
+      }
+      render();
+      onTabChange(state.activeSubTab);
+    });
+
+    // 아이콘 생성
+    // @ts-ignore
+    if (window.lucide) window.lucide.createIcons();
+  };
+
+  render();
+}
--- a/src/core/qr_print.ts
+++ b/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);
+  }
+}
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,205 +1,211 @@
-import './styles/common.css';
-import './styles/login.css';
-import { state, loadMasterDataFromDB, saveAsset } from './core/state';
-import { renderNavigation } from './components/Navigation';
-import { renderDashboard } from './views/DashboardView';
-import { renderSWTable } from './views/SW_Table';
-import { renderLocationView } from './views/LocationView';
-import { initBaseModal } from './components/Modal/BaseModal';
-import { initHwModal, openHwModal } from './components/Modal/HWModal';
-import { initSwModal, openSwModal } from './components/Modal/SWModal';
-import { initSwUserModal } from './components/Modal/SWUserModal';
-import { initDomainModal, openDomainModal } from './components/Modal/DomainModal';
-import { initPartsMasterModal, openPartsMasterModal } from './components/Modal/PartsMasterModal';
-import { initJobSpecModal, openJobSpecModal } from './components/Modal/JobSpecModal';
-import { initUserModal, openUserModal } from './components/Modal/UserModal';
-import { activePartsMasterSubTab } from './views/List/PartsMasterListView';
-import { initDashboardDetailModal } from './components/Modal/DashboardDetailModal';
-import { initGuide } from './components/Guide';
-import { pcFlowModal } from './components/Modal/PCFlowModal';
-import { createIcons, Plus, X, LayoutDashboard, Monitor, Server, Database, Laptop, CalendarClock, Key, Cpu, Layers, Users, Paperclip, Edit2, History, RefreshCcw, BookOpen, Settings } from 'lucide';
-
-
-// 화면 갱신 통합 핸들러
-function refreshView(tab?: string) {
-  const mainContent = document.getElementById('main-content')!;
-  if (!mainContent) return;
-
-  const activeTab = tab || state.activeSubTab;
-
-  if (activeTab === '대시보드') {
-    renderDashboard(mainContent);
-    return;
-  }
-
-  // 서버 탭이 아닐 경우에는 state.viewMode가 location이더라도 강제로 목록(list) 뷰를 그리도록 함
-  // (state.viewMode의 원래 상태는 보존하여, 서버 탭 복귀 시 최근 보던 모드를 유지함)
-  const isServerTab = activeTab === '서버';
-  const effectiveViewMode = isServerTab ? state.viewMode : 'list';
-  
-  mainContent.innerHTML = `
-    <div id="view-body" class="view-container"></div>
-  `;
-
-  const viewBody = document.getElementById('view-body')!;
-  if (effectiveViewMode === 'location') {
-    renderLocationView(viewBody);
-  } else {
-    renderSWTable(viewBody);    // 리스트 형식
-  }
-}
-
-// 통합 갱신 (저장은 이미 개별 모달에서 처리됨)
-async function refreshAllData() {
-    await loadMasterDataFromDB();
-    refreshView();
-}
-
-// --- App Initialization ---
-function initApp() {
-  const mainContent = document.getElementById('main-content')!;
-  if (!mainContent) return;
-
-  const { closeAllModals } = initBaseModal(); 
-
-  try {
-    renderNavigation((tab) => {
-      refreshView();
-    });
-
-    initHwModal(() => refreshAllData(), closeAllModals);
-    initSwModal(() => refreshAllData(), closeAllModals);
-    initSwUserModal(() => { 
-        loadMasterDataFromDB().then(() => refreshView());
-    }, closeAllModals);
-    initDomainModal(() => refreshAllData(), closeAllModals);
-    initPartsMasterModal(() => refreshAllData(), closeAllModals);
-    initJobSpecModal(() => refreshAllData(), closeAllModals);
-    initUserModal(() => refreshAllData(), closeAllModals);
-    
-    initDashboardDetailModal();
-    initGuide();
-    pcFlowModal.init(() => {
-      loadMasterDataFromDB().then(() => refreshView());
-    });
-
-    loadMasterDataFromDB().then((success) => {
-      if (success) {
-        refreshView();
-        initRoleSwitcher(); // [추가] 역할 전환 토글 초기화
-      }
-    });
-  } catch (e) { console.error('❌ Initialization failed:', e); }
-
-  console.log('🚀 ITAM App Multi-Table Optimized');
-
-  // --- 통합 이벤트 위임 (Dynamic Elements 지원) ---
-  document.addEventListener('click', (e) => {
-    const target = e.target as HTMLElement;
-    
-    // 자산 추가
-    if (target.closest('#btn-add-asset')) {
-      const tab = state.activeSubTab;
-      const cat = state.activeCategory;
-      const newId = Math.random().toString(36).substring(2, 9);
-      
-      if (cat === 'hw') {
-        if (tab === '부품 마스터') {
-          if (activePartsMasterSubTab === 'job-spec') {
-            openJobSpecModal({ id: '' } as any, 'add');
-          } else {
-            openPartsMasterModal({ id: '' } as any, 'add');
-          }
-        } else {
-          openHwModal({ id: newId, asset_code: '', category: tab } as any, 'add');
-        }
-      } else if (cat === 'sw') {
-        const swType = tab === '외부SW' ? '외부SW' : (tab === '내부SW' ? '내부SW' : '외부SW');
-        openSwModal({ id: newId, asset_type: swType } as any, 'add');
-      } else if (cat === 'ops') {
-        if (tab === '도메인') openDomainModal(null);
-        else if (tab === '사용자') openUserModal({ id: '' }, 'add');
-      }
-      return;
-    }
-
-    // 부품 마스터 탭으로 바로가기 연동
-    if (target.closest('#btn-goto-parts-master')) {
-      state.activeCategory = 'hw';
-      state.activeSubTab = '부품 마스터';
-      renderNavigation((tab) => { refreshView(); });
-      refreshView();
-      return;
-    }
-
-    // PC 이동/반납 모달 열기
-    if (target.closest('#btn-pc-flow')) {
-      pcFlowModal.open();
-      return;
-    }
-  });
-
-  createIcons({
-    icons: { Plus, X, LayoutDashboard, Monitor, Server, Database, Laptop, CalendarClock, Key, Cpu, Layers, Users, Paperclip, Edit2, History, RefreshCcw, BookOpen, Settings }
-  });
-  window.addEventListener('refresh-view', () => refreshView());
-}
-
-/**
- * 헤더 역할 전환 토글 로직
- */
-function initRoleSwitcher() {
-  const checkbox = document.getElementById('role-toggle-checkbox') as HTMLInputElement;
-  const userLabel = document.querySelector('.role-label.user');
-  const adminLabel = document.querySelector('.role-label.admin');
-
-  if (!checkbox || !userLabel || !adminLabel) return;
-
-  checkbox.addEventListener('change', () => {
-    if (checkbox.checked) {
-      state.currentUserRole = 'admin';
-      userLabel.classList.remove('active');
-      adminLabel.classList.add('active');
-      document.body.classList.add('admin-mode');
-      
-      // 관리자 모드 전환 시 대시보드로 이동
-      state.activeCategory = 'hw';
-      state.activeSubTab = '대시보드';
-    } else {
-      state.currentUserRole = 'user';
-      adminLabel.classList.remove('active');
-      userLabel.classList.add('active');
-      document.body.classList.remove('admin-mode');
-      
-      // 실무자 모드 전환 시 서버 목록으로 이동
-      state.activeCategory = 'hw';
-      state.activeSubTab = '서버';
-    }
-    // 모든 렌더링을 refreshView 하나로 통합하여 규격 유지
-    renderNavigation(() => refreshView());
-    refreshView();
-  });
-}
-
-/**
- * 앱 초기화 (로그인 과정 없이 즉시 시작)
- */
-function initializeAppDirectly() {
-  const loginContainer = document.getElementById('login-container');
-  const appLayout = document.getElementById('app-layout');
-
-  // 기본 권한 설정: 실무자 (User)
-  state.currentUserRole = 'user';
-  state.activeCategory = 'hw';
-  state.activeSubTab = '서버'; // 실무자 기본 탭
-
-  // 화면 전환
-  if (loginContainer) loginContainer.style.display = 'none';
-  if (appLayout) appLayout.style.display = 'flex';
-
-  // 앱 초기화 및 내비게이션(헤더 포함) 렌더링
-  initApp();
-  renderNavigation((tab) => refreshView(tab));
-}
-
-document.addEventListener('DOMContentLoaded', initializeAppDirectly);
+import './styles/common.css';
+import './styles/login.css';
+import { state, loadMasterDataFromDB, saveAsset } from './core/state';
+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';
+import { initSwUserModal } from './components/Modal/SWUserModal';
+import { initDomainModal, openDomainModal } from './components/Modal/DomainModal';
+import { initPartsMasterModal, openPartsMasterModal } from './components/Modal/PartsMasterModal';
+import { initJobSpecModal, openJobSpecModal } from './components/Modal/JobSpecModal';
+import { initUserModal, openUserModal } from './components/Modal/UserModal';
+import { activePartsMasterSubTab } from './views/List/PartsMasterListView';
+import { initDashboardDetailModal } from './components/Modal/DashboardDetailModal';
+import { initGuide } from './components/Guide';
+import { pcFlowModal } from './components/Modal/PCFlowModal';
+import { createIcons, Plus, X, LayoutDashboard, Monitor, Server, Database, Laptop, CalendarClock, Key, Cpu, Layers, Users, Paperclip, Edit2, History, RefreshCcw, BookOpen, Settings } from 'lucide';
+
+
+// 화면 갱신 통합 핸들러
+function refreshView(tab?: string) {
+  const mainContent = document.getElementById('main-content')!;
+  if (!mainContent) return;
+
+  const activeTab = tab || state.activeSubTab;
+
+  if (activeTab === '대시보드') {
+    renderDashboard(mainContent);
+    return;
+  }
+
+  if (activeTab === '실사 승인') {
+    renderAuditApprovalView(mainContent);
+    return;
+  }
+
+  // 서버 탭이 아닐 경우에는 state.viewMode가 location이더라도 강제로 목록(list) 뷰를 그리도록 함
+  // (state.viewMode의 원래 상태는 보존하여, 서버 탭 복귀 시 최근 보던 모드를 유지함)
+  const isServerTab = activeTab === '서버';
+  const effectiveViewMode = isServerTab ? state.viewMode : 'list';
+  
+  mainContent.innerHTML = `
+    <div id="view-body" class="view-container"></div>
+  `;
+
+  const viewBody = document.getElementById('view-body')!;
+  if (effectiveViewMode === 'location') {
+    renderLocationView(viewBody);
+  } else {
+    renderSWTable(viewBody);    // 리스트 형식
+  }
+}
+
+// 통합 갱신 (저장은 이미 개별 모달에서 처리됨)
+async function refreshAllData() {
+    await loadMasterDataFromDB();
+    refreshView();
+}
+
+// --- App Initialization ---
+function initApp() {
+  const mainContent = document.getElementById('main-content')!;
+  if (!mainContent) return;
+
+  const { closeAllModals } = initBaseModal(); 
+
+  try {
+    renderNavigation((tab) => {
+      refreshView();
+    });
+
+    initHwModal(() => refreshAllData(), closeAllModals);
+    initSwModal(() => refreshAllData(), closeAllModals);
+    initSwUserModal(() => { 
+        loadMasterDataFromDB().then(() => refreshView());
+    }, closeAllModals);
+    initDomainModal(() => refreshAllData(), closeAllModals);
+    initPartsMasterModal(() => refreshAllData(), closeAllModals);
+    initJobSpecModal(() => refreshAllData(), closeAllModals);
+    initUserModal(() => refreshAllData(), closeAllModals);
+    
+    initDashboardDetailModal();
+    initGuide();
+    pcFlowModal.init(() => {
+      loadMasterDataFromDB().then(() => refreshView());
+    });
+
+    loadMasterDataFromDB().then((success) => {
+      if (success) {
+        refreshView();
+        initRoleSwitcher(); // [추가] 역할 전환 토글 초기화
+      }
+    });
+  } catch (e) { console.error('❌ Initialization failed:', e); }
+
+  console.log('🚀 ITAM App Multi-Table Optimized');
+
+  // --- 통합 이벤트 위임 (Dynamic Elements 지원) ---
+  document.addEventListener('click', (e) => {
+    const target = e.target as HTMLElement;
+    
+    // 자산 추가
+    if (target.closest('#btn-add-asset')) {
+      const tab = state.activeSubTab;
+      const cat = state.activeCategory;
+      const newId = Math.random().toString(36).substring(2, 9);
+      
+      if (cat === 'hw') {
+        if (tab === '부품 마스터') {
+          if (activePartsMasterSubTab === 'job-spec') {
+            openJobSpecModal({ id: '' } as any, 'add');
+          } else {
+            openPartsMasterModal({ id: '' } as any, 'add');
+          }
+        } else {
+          openHwModal({ id: newId, asset_code: '', category: tab } as any, 'add');
+        }
+      } else if (cat === 'sw') {
+        const swType = tab === '외부SW' ? '외부SW' : (tab === '내부SW' ? '내부SW' : '외부SW');
+        openSwModal({ id: newId, asset_type: swType } as any, 'add');
+      } else if (cat === 'ops') {
+        if (tab === '도메인') openDomainModal(null);
+        else if (tab === '사용자') openUserModal({ id: '' }, 'add');
+      }
+      return;
+    }
+
+    // 부품 마스터 탭으로 바로가기 연동
+    if (target.closest('#btn-goto-parts-master')) {
+      state.activeCategory = 'hw';
+      state.activeSubTab = '부품 마스터';
+      renderNavigation((tab) => { refreshView(); });
+      refreshView();
+      return;
+    }
+
+    // PC 이동/반납 모달 열기
+    if (target.closest('#btn-pc-flow')) {
+      pcFlowModal.open();
+      return;
+    }
+  });
+
+  createIcons({
+    icons: { Plus, X, LayoutDashboard, Monitor, Server, Database, Laptop, CalendarClock, Key, Cpu, Layers, Users, Paperclip, Edit2, History, RefreshCcw, BookOpen, Settings }
+  });
+  window.addEventListener('refresh-view', () => refreshView());
+}
+
+/**
+ * 헤더 역할 전환 토글 로직
+ */
+function initRoleSwitcher() {
+  const checkbox = document.getElementById('role-toggle-checkbox') as HTMLInputElement;
+  const userLabel = document.querySelector('.role-label.user');
+  const adminLabel = document.querySelector('.role-label.admin');
+
+  if (!checkbox || !userLabel || !adminLabel) return;
+
+  checkbox.addEventListener('change', () => {
+    if (checkbox.checked) {
+      state.currentUserRole = 'admin';
+      userLabel.classList.remove('active');
+      adminLabel.classList.add('active');
+      document.body.classList.add('admin-mode');
+      
+      // 관리자 모드 전환 시 대시보드로 이동
+      state.activeCategory = 'hw';
+      state.activeSubTab = '대시보드';
+    } else {
+      state.currentUserRole = 'user';
+      adminLabel.classList.remove('active');
+      userLabel.classList.add('active');
+      document.body.classList.remove('admin-mode');
+      
+      // 실무자 모드 전환 시 서버 목록으로 이동
+      state.activeCategory = 'hw';
+      state.activeSubTab = '서버';
+    }
+    // 모든 렌더링을 refreshView 하나로 통합하여 규격 유지
+    renderNavigation(() => refreshView());
+    refreshView();
+  });
+}
+
+/**
+ * 앱 초기화 (로그인 과정 없이 즉시 시작)
+ */
+function initializeAppDirectly() {
+  const loginContainer = document.getElementById('login-container');
+  const appLayout = document.getElementById('app-layout');
+
+  // 기본 권한 설정: 실무자 (User)
+  state.currentUserRole = 'user';
+  state.activeCategory = 'hw';
+  state.activeSubTab = '서버'; // 실무자 기본 탭
+
+  // 화면 전환
+  if (loginContainer) loginContainer.style.display = 'none';
+  if (appLayout) appLayout.style.display = 'flex';
+
+  // 앱 초기화 및 내비게이션(헤더 포함) 렌더링
+  initApp();
+  renderNavigation((tab) => refreshView(tab));
+}
+
+document.addEventListener('DOMContentLoaded', initializeAppDirectly);
--- a/src/mobile-main.ts
+++ b/src/mobile-main.ts
@@ -0,0 +1,183 @@
+// 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(rawCode: string) {
+    // QR 코드 인쇄 폼 등으로 인한 개행 문자(\r, \n) 및 모든 공백 문자(\s)를 제거
+    const code = rawCode.replace(/[\r\n]/g, '').replace(/\s+/g, '').trim();
+
+    // 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);
+    }
+  }
+});
--- a/src/views/AuditApprovalView.ts
+++ b/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();
+}
--- a/src/views/List/ListFactory.ts
+++ b/src/views/List/ListFactory.ts
--- a/src/views/LocationView.ts
+++ b/src/views/LocationView.ts
@@ -1,291 +1,294 @@
-import { state } from '../core/state';
-import { openHwModal } from '../components/Modal/HWModal';
-import { ASSET_SCHEMA } from '../core/schema';
-import { LOCATION_DATA, IMAGE_LOCATIONS } from '../components/Modal/SharedData';
-
-/**
- * 위치 중심 자산 현황 뷰 (Vercel Integrated)
- */
-export async function renderLocationView(container: HTMLElement) {
-  if (!container) return;
-
-  let currentLoc = '기술개발센터';
-  let currentDetail = '서버실';
-  let currentPage = 0; 
-  let mapConfig: any = {};
-
-  try {
-    const res = await fetch('/api/maps');
-    mapConfig = await res.json();
-  } catch (err) { console.error('Failed to load map config', err); }
-
-  const render = () => {
-    const locImages = (IMAGE_LOCATIONS[currentLoc] && IMAGE_LOCATIONS[currentLoc][currentDetail]) 
-                     ? IMAGE_LOCATIONS[currentLoc][currentDetail] 
-                     : [];
-    const mapPath = locImages[currentPage] || '';
-    
-    // 모든 하드웨어 카테고리에서 자산 검색
-    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
-    ];
-
-    // map_config.json에 설정된 모든 박스를 복사해서 작업용으로 사용
-    const tempBoxes = (mapConfig[mapPath] || []).map((b: any) => ({ ...b }));
-
-    // DB 데이터에서 현재 지도(mapPath) 및 위치와 좌표 정보(loc_x, loc_y)가 일치하는 자산 추출
-    allHwAssets.forEach((asset: any) => {
-      const photoPath = asset.location_photo || asset.loc_img || '';
-      const hasCoords = asset.loc_x != null && asset.loc_y != null && asset.loc_x !== '' && asset.loc_y !== '' && asset.loc_x !== 'null' && asset.loc_y !== 'null';
-      
-      if (hasCoords && photoPath.trim() === mapPath.trim()) {
-        const ax = parseFloat(asset.loc_x);
-        const ay = parseFloat(asset.loc_y);
-
-        // map_config.json에서 읽어온 박스들 중 x, y 좌표가 일치하는 빈 박스가 있는지 찾음 (오차범위 0.1 고려)
-        const matchedBox = tempBoxes.find((b: any) => {
-          const bx = parseFloat(b.x);
-          const by = parseFloat(b.y);
-          return Math.abs(bx - ax) < 0.1 && Math.abs(by - ay) < 0.1;
-        });
-
-        if (matchedBox) {
-          // 이미 매칭된 박스가 존재하고 asset_id가 비어있다면 해당 박스에 asset_id를 주입
-          if (matchedBox.asset_id == null) {
-            matchedBox.asset_id = asset.id;
-          }
-        } else {
-          // 일치하는 기존 박스가 없을 때만 4x4 크기의 임시 박스로 동적 생성
-          const alreadyMatched = tempBoxes.some((b: any) => b.asset_id === asset.id);
-          if (!alreadyMatched) {
-            tempBoxes.push({
-              asset_id: asset.id,
-              x: asset.loc_x,
-              y: asset.loc_y,
-              w: '4',
-              h: '4',
-              name: asset.asset_purpose || asset.asset_code || '미지정 자산'
-            });
-          }
-        }
-      }
-    });
-
-    // 최종적으로 asset_id가 null이 아닌(자산이 정상 매핑되거나 갱신된) 박스들만 남겨서 렌더링
-    const boxes = tempBoxes.filter((b: any) => b.asset_id != null);
-
-    container.innerHTML = `
-      <div class="location-view-wrapper">
-        <!-- 상단 통합 바 (Unified Search Bar) -->
-        <div class="location-filter-bar search-bar">
-          <div class="search-item">
-            <label class="list-view-toggle-label">
-              <input type="checkbox" id="chk-list-view-loc" />
-              목록보기
-            </label>
-          </div>
-          <div class="search-item">
-            <label>건물/위치</label>
-            <select id="sel-loc-main">
-              ${Object.keys(LOCATION_DATA).map(loc => `<option value="${loc}" ${loc === currentLoc ? 'selected' : ''}>${loc}</option>`).join('')}
-            </select>
-          </div>
-          <div class="search-item">
-            <label>상세 위치</label>
-            <div class="flex items-center gap-2">
-              <select id="sel-loc-detail">
-                ${(LOCATION_DATA[currentLoc] || []).map(det => `<option value="${det}" ${det === currentDetail ? 'selected' : ''}>${det}</option>`).join('')}
-              </select>
-
-              <!-- 페이지네이션 -->
-              ${locImages.length > 1 ? `
-              <div class="map-pagination-group">
-                <div class="page-btns flex gap-1">
-                  <button id="btn-prev-page" class="btn btn-outline btn-sm" ${currentPage === 0 ? 'disabled' : ''}>이전</button>
-                  <button id="btn-next-page" class="btn btn-outline btn-sm" ${currentPage === locImages.length - 1 ? 'disabled' : ''}>다음</button>
-                </div>
-                <span class="page-info">(${currentPage + 1} / ${locImages.length})</span>
-              </div>
-              ` : ''}
-            </div>
-          </div>
-        </div>
-
-        <div class="location-main-content">
-          <!-- 지도 섹션 -->
-          <div class="map-container-section">
-            <div class="map-frame-wrapper">
-              ${mapPath ? `
-                <img src="${mapPath}" id="main-map-img" class="map-image">
-                <div id="box-overlay" class="map-overlay">
-                  ${boxes.map((box: any, idx: number) => {
-                    const asset = allHwAssets.find(a => a.id === box.asset_id);
-                    const name = asset ? ((asset as any).asset_purpose || asset.asset_code) : (box.name || `#${idx+1}`);
-                    // w, h가 없거나 너무 작으면 최소 크기(3%) 보장하여 영역으로 표시
-                    const width = Math.max(parseFloat(box.w || '3'), 3);
-                    const height = Math.max(parseFloat(box.h || '3'), 3);
-                    return `
-                    <div class="location-box-area" 
-                         data-asset-id="${box.asset_id}"
-                         data-name="${name}"
-                         style="left:${box.x}%; top:${box.y}%; width:${width}%; height:${height}%;
-                                border: 2px solid var(--primary-color); background: rgba(30, 81, 73, 0.1); cursor:pointer; pointer-events: auto; position: absolute;">
-                    </div>
-                  `}).join('')}
-                </div>
-              ` : '<div class="no-map-message">해당 위치의 도면이 등록되지 않았습니다.</div>'}
-            </div>
-          </div>
-
-          <!-- 상세 정보 섹션 -->
-          <div class="asset-list-section">
-            <div class="section-header">
-               <h4 id="loc-list-title" class="sidebar-title">구역을 선택하세요</h4>
-            </div>
-            <div id="loc-asset-table-container" class="mini-table-wrapper">
-               <div class="empty-state">지도에서 자산 위치를 클릭하세요.</div>
-            </div>
-          </div>
-        </div>
-      </div>
-    `;
-
-    const syncOverlaySize = () => {
-      const img = container.querySelector('#main-map-img') as HTMLImageElement;
-      const overlay = container.querySelector('#box-overlay') as HTMLElement;
-
-      if (img && overlay && img.complete) {
-        overlay.style.width = img.clientWidth + 'px';
-        overlay.style.height = img.clientHeight + 'px';
-        overlay.style.left = img.offsetLeft + 'px';
-        overlay.style.top = img.offsetTop + 'px';
-      }
-    };
-
-    const img = container.querySelector('#main-map-img') as HTMLImageElement;
-    if (img) {
-      if (img.complete) {
-        syncOverlaySize();
-        setTimeout(syncOverlaySize, 50); 
-      } else {
-        img.onload = syncOverlaySize;
-      }
-    }
-    
-    window.removeEventListener('resize', syncOverlaySize);
-    window.addEventListener('resize', syncOverlaySize);
-
-    const selMain = container.querySelector('#sel-loc-main') as HTMLSelectElement;
-    selMain?.addEventListener('change', () => {
-      currentLoc = selMain.value;
-      currentDetail = LOCATION_DATA[currentLoc][0];
-      currentPage = 0;
-      render();
-    });
-
-    const selDetail = container.querySelector('#sel-loc-detail') as HTMLSelectElement;
-    selDetail?.addEventListener('change', () => {
-      currentDetail = selDetail.value;
-      currentPage = 0;
-      render();
-    });
-
-    container.querySelector('#btn-prev-page')?.addEventListener('click', () => { currentPage--; render(); });
-    container.querySelector('#btn-next-page')?.addEventListener('click', () => { currentPage++; render(); });
-
-    const chkBox = container.querySelector('#chk-list-view-loc') as HTMLInputElement;
-
-    if (chkBox) {
-        chkBox.checked = state.viewMode === 'list';
-        const handleToggle = () => {
-            const isListMode = chkBox.checked;
-            if (isListMode) {
-                state.viewMode = 'list';
-            } else {
-                state.viewMode = 'location';
-            }
-            window.dispatchEvent(new Event('refresh-view'));
-        };
-        chkBox.addEventListener('change', handleToggle);
-    }
-
-    container.querySelectorAll('.location-box-area').forEach(box => {
-      box.addEventListener('click', () => {
-        const assetId = box.getAttribute('data-asset-id');
-        if (!assetId) return;
-
-        const targetAsset = allHwAssets.find(a => a.id === assetId);
-
-        if (targetAsset) renderAssetDetail(targetAsset);
-        container.querySelectorAll('.location-box-area').forEach(b => (b as HTMLElement).style.background = 'rgba(30, 81, 73, 0.1)');
-        (box as HTMLElement).style.background = 'rgba(30, 81, 73, 0.4)';
-      });
-    });
-  };
-
-  const renderAssetDetail = (asset: any) => {
-    const title = container.querySelector('#loc-list-title')!;
-    const tableContainer = container.querySelector('#loc-asset-table-container')!;
-    
-    title.innerHTML = `
-      <div class="detail-header-actions">
-        <div class="header-identity">
-          <span class="asset-code-title">${asset.asset_code || '미부여'}</span>
-          <span class="service-type-badge">${asset.service_type || '운영'}</span>
-          <span class="asset-type-label">${asset.asset_type || 'PC'}</span>
-        </div>
-        <button id="btn-view-from-loc" class="btn btn-primary btn-sm">조회</button>
-      </div>
-    `;
-
-    const fields = [
-      { label: ASSET_SCHEMA.CURRENT_DEPT.ui, value: asset.current_dept },
-      { label: ASSET_SCHEMA.HW_STATUS.ui, value: asset.hw_status },
-      { label: ASSET_SCHEMA.MANAGER_MAIN.ui, value: asset.manager_primary },
-      { label: ASSET_SCHEMA.MANAGER_SUB.ui, value: asset.manager_secondary },
-      { label: ASSET_SCHEMA.ASSET_PURPOSE.ui, value: asset.asset_purpose, fullWidth: true },
-      { label: ASSET_SCHEMA.MODEL_NAME.ui, value: asset.model_name },
-      { label: ASSET_SCHEMA.OS.ui, value: asset.os },
-      { label: ASSET_SCHEMA.CPU.ui, value: asset.cpu },
-      { label: ASSET_SCHEMA.RAM.ui, value: asset.ram },
-      { label: ASSET_SCHEMA.GPU.ui, value: asset.gpu, fullWidth: true },
-      { label: ASSET_SCHEMA.IP_ADDR.ui, value: asset.ip_address },
-      { label: ASSET_SCHEMA.MAC_ADDR.ui, value: asset.mac_address },
-      { label: ASSET_SCHEMA.REMOTE_TOOL.ui, value: asset.remote_tool },
-      { label: ASSET_SCHEMA.MONITORING.ui, value: asset.monitoring },
-      { label: ASSET_SCHEMA.MEMO.ui, value: asset.memo, fullWidth: true }
-    ];
-
-    const sectionsHTML = `
-      <div class="detail-section" style="margin-bottom: 0;">
-        <div class="detail-grid-2col" style="gap: 0.75rem 1rem;">
-          ${fields.map(f => `
-            <div class="detail-item ${f.fullWidth ? 'full-width' : ''}">
-              <div class="detail-label-sm">${f.label}</div>
-              <div class="detail-value-lg">${f.value || '-'}</div>
-            </div>
-          `).join('')}
-        </div>
-      </div>
-    `;
-
-    tableContainer.innerHTML = `
-      <div class="asset-detail-sidebar">
-        ${sectionsHTML}
-      </div>
-    `;
-
-    container.querySelector('#btn-view-from-loc')?.addEventListener('click', () => {
-      openHwModal(asset, 'view');
-    });
-  };
-
-  render();
-}
+import { state } from '../core/state';
+import { openHwModal } from '../components/Modal/HWModal';
+import { ASSET_SCHEMA } from '../core/schema';
+import { LOCATION_DATA, IMAGE_LOCATIONS } from '../components/Modal/SharedData';
+
+/**
+ * 위치 중심 자산 현황 뷰 (Vercel Integrated)
+ */
+export async function renderLocationView(container: HTMLElement) {
+  if (!container) return;
+
+  let currentLoc = '기술개발센터';
+  let currentDetail = '서버실';
+  let currentPage = 0; 
+  let mapConfig: any = {};
+
+  try {
+    const res = await fetch('/api/maps');
+    mapConfig = await res.json();
+  } catch (err) { console.error('Failed to load map config', err); }
+
+  const render = () => {
+    const locImages = (IMAGE_LOCATIONS[currentLoc] && IMAGE_LOCATIONS[currentLoc][currentDetail]) 
+                     ? IMAGE_LOCATIONS[currentLoc][currentDetail] 
+                     : [];
+    const mapPath = locImages[currentPage] || '';
+    
+    // 모든 하드웨어 카테고리에서 자산 검색
+    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
+    ];
+
+    // map_config.json에 설정된 모든 박스를 복사해서 작업용으로 사용
+    const tempBoxes = (mapConfig[mapPath] || []).map((b: any) => ({ ...b }));
+
+    // DB 데이터에서 현재 지도(mapPath) 및 위치와 좌표 정보(loc_x, loc_y)가 일치하는 자산 추출
+    allHwAssets.forEach((asset: any) => {
+      const photoPath = asset.location_photo || asset.loc_img || '';
+      const hasCoords = asset.loc_x != null && asset.loc_y != null && asset.loc_x !== '' && asset.loc_y !== '' && asset.loc_x !== 'null' && asset.loc_y !== 'null';
+      
+      if (hasCoords && photoPath.trim() === mapPath.trim()) {
+        const ax = parseFloat(asset.loc_x);
+        const ay = parseFloat(asset.loc_y);
+
+        // map_config.json에서 읽어온 박스들 중 x, y 좌표가 일치하는 빈 박스가 있는지 찾음 (오차범위 0.1 고려)
+        const matchedBox = tempBoxes.find((b: any) => {
+          const bx = parseFloat(b.x);
+          const by = parseFloat(b.y);
+          return Math.abs(bx - ax) < 0.1 && Math.abs(by - ay) < 0.1;
+        });
+
+        if (matchedBox) {
+          // 이미 매칭된 박스가 존재하고 asset_id가 비어있다면 해당 박스에 asset_id를 주입
+          if (matchedBox.asset_id == null) {
+            matchedBox.asset_id = asset.id;
+          }
+        } else {
+          // 일치하는 기존 박스가 없을 때만 4x4 크기의 임시 박스로 동적 생성
+          const alreadyMatched = tempBoxes.some((b: any) => b.asset_id === asset.id);
+          if (!alreadyMatched) {
+            tempBoxes.push({
+              asset_id: asset.id,
+              x: asset.loc_x,
+              y: asset.loc_y,
+              w: '4',
+              h: '4',
+              name: asset.asset_purpose || asset.asset_code || '미지정 자산'
+            });
+          }
+        }
+      }
+    });
+
+    // 최종적으로 asset_id가 null이 아닌(자산이 정상 매핑되거나 갱신된) 박스들만 남겨서 렌더링
+    const boxes = tempBoxes.filter((b: any) => b.asset_id != null);
+
+    container.innerHTML = `
+      <div class="location-view-wrapper">
+        <!-- 상단 통합 바 (Unified Search Bar) -->
+        <div class="location-filter-bar search-bar">
+          <div class="search-item">
+            <label class="list-view-toggle-label">
+              <input type="checkbox" id="chk-list-view-loc" />
+              목록보기
+            </label>
+          </div>
+          <div class="search-item">
+            <label>건물/위치</label>
+            <select id="sel-loc-main">
+              ${Object.keys(LOCATION_DATA).map(loc => `<option value="${loc}" ${loc === currentLoc ? 'selected' : ''}>${loc}</option>`).join('')}
+            </select>
+          </div>
+          <div class="search-item">
+            <label>상세 위치</label>
+            <div class="flex items-center gap-2">
+              <select id="sel-loc-detail">
+                ${(LOCATION_DATA[currentLoc] || []).map(det => `<option value="${det}" ${det === currentDetail ? 'selected' : ''}>${det}</option>`).join('')}
+              </select>
+
+              <!-- 페이지네이션 -->
+              ${locImages.length > 1 ? `
+              <div class="map-pagination-group">
+                <div class="page-btns flex gap-1">
+                  <button id="btn-prev-page" class="btn btn-outline btn-sm" ${currentPage === 0 ? 'disabled' : ''}>이전</button>
+                  <button id="btn-next-page" class="btn btn-outline btn-sm" ${currentPage === locImages.length - 1 ? 'disabled' : ''}>다음</button>
+                </div>
+                <span class="page-info">(${currentPage + 1} / ${locImages.length})</span>
+              </div>
+              ` : ''}
+            </div>
+          </div>
+        </div>
+
+        <div class="location-main-content">
+          <!-- 지도 섹션 -->
+          <div class="map-container-section">
+            <div class="map-frame-wrapper">
+              ${mapPath ? `
+                <img src="${mapPath}" id="main-map-img" class="map-image">
+                <div id="box-overlay" class="map-overlay">
+                  ${boxes.map((box: any, idx: number) => {
+                    const asset = allHwAssets.find(a => a.id === box.asset_id);
+                    const name = asset ? ((asset as any).asset_purpose || asset.asset_code) : (box.name || `#${idx+1}`);
+                    // w, h가 없거나 너무 작으면 최소 크기(3%) 보장하여 영역으로 표시
+                    const width = Math.max(parseFloat(box.w || '3'), 3);
+                    const height = Math.max(parseFloat(box.h || '3'), 3);
+                    return `
+                    <div class="location-box-area" 
+                         data-asset-id="${box.asset_id}"
+                         data-name="${name}"
+                         style="left:${box.x}%; top:${box.y}%; width:${width}%; height:${height}%;
+                                border: 2px solid var(--primary-color); background: rgba(30, 81, 73, 0.1); cursor:pointer; pointer-events: auto; position: absolute;">
+                    </div>
+                  `}).join('')}
+                </div>
+              ` : '<div class="no-map-message">해당 위치의 도면이 등록되지 않았습니다.</div>'}
+            </div>
+          </div>
+
+          <!-- 상세 정보 섹션 -->
+          <div class="asset-list-section">
+            <div class="section-header">
+               <h4 id="loc-list-title" class="sidebar-title">구역을 선택하세요</h4>
+            </div>
+            <div id="loc-asset-table-container" class="mini-table-wrapper">
+               <div class="empty-state">지도에서 자산 위치를 클릭하세요.</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+
+    const syncOverlaySize = () => {
+      const img = container.querySelector('#main-map-img') as HTMLImageElement;
+      const overlay = container.querySelector('#box-overlay') as HTMLElement;
+
+      if (img && overlay && img.complete) {
+        overlay.style.width = img.clientWidth + 'px';
+        overlay.style.height = img.clientHeight + 'px';
+        overlay.style.left = img.offsetLeft + 'px';
+        overlay.style.top = img.offsetTop + 'px';
+      }
+    };
+
+    const img = container.querySelector('#main-map-img') as HTMLImageElement;
+    if (img) {
+      if (img.complete) {
+        syncOverlaySize();
+        setTimeout(syncOverlaySize, 50); 
+      } else {
+        img.onload = syncOverlaySize;
+      }
+    }
+    
+    window.removeEventListener('resize', syncOverlaySize);
+    window.addEventListener('resize', syncOverlaySize);
+
+    const selMain = container.querySelector('#sel-loc-main') as HTMLSelectElement;
+    selMain?.addEventListener('change', () => {
+      currentLoc = selMain.value;
+      currentDetail = LOCATION_DATA[currentLoc][0];
+      currentPage = 0;
+      render();
+    });
+
+    const selDetail = container.querySelector('#sel-loc-detail') as HTMLSelectElement;
+    selDetail?.addEventListener('change', () => {
+      currentDetail = selDetail.value;
+      currentPage = 0;
+      render();
+    });
+
+    container.querySelector('#btn-prev-page')?.addEventListener('click', () => { currentPage--; render(); });
+    container.querySelector('#btn-next-page')?.addEventListener('click', () => { currentPage++; render(); });
+
+    const chkBox = container.querySelector('#chk-list-view-loc') as HTMLInputElement;
+
+    if (chkBox) {
+        chkBox.checked = state.viewMode === 'list';
+        const handleToggle = () => {
+            const isListMode = chkBox.checked;
+            if (isListMode) {
+                state.viewMode = 'list';
+            } else {
+                state.viewMode = 'location';
+            }
+            window.dispatchEvent(new Event('refresh-view'));
+        };
+        chkBox.addEventListener('change', handleToggle);
+    }
+
+    container.querySelectorAll('.location-box-area').forEach(box => {
+      box.addEventListener('click', () => {
+        const assetId = box.getAttribute('data-asset-id');
+        if (!assetId) return;
+
+        const targetAsset = allHwAssets.find(a => a.id === assetId);
+
+        if (targetAsset) renderAssetDetail(targetAsset);
+        container.querySelectorAll('.location-box-area').forEach(b => (b as HTMLElement).style.background = 'rgba(30, 81, 73, 0.1)');
+        (box as HTMLElement).style.background = 'rgba(30, 81, 73, 0.4)';
+      });
+    });
+  };
+
+  const renderAssetDetail = (asset: any) => {
+    const title = container.querySelector('#loc-list-title')!;
+    const tableContainer = container.querySelector('#loc-asset-table-container')!;
+    
+    title.innerHTML = `
+      <div class="detail-header-actions">
+        <div class="header-identity">
+          <span class="asset-code-title">${asset.asset_code || '미부여'}</span>
+          <span class="service-type-badge">${asset.service_type || '운영'}</span>
+          <span class="asset-type-label">${asset.asset_type || 'PC'}</span>
+        </div>
+        <div style="display: inline-flex; align-items: center; gap: 0.5rem;">
+          ${asset.is_audit_approved ? `<span style="display: inline-flex; align-items: center; background-color: rgba(16, 185, 129, 0.08); color: #059669; border: 1px solid rgba(16, 185, 129, 0.18); padding: 2px 6px; border-radius: 4px; font-size: 10px; font-weight: 600; height: 18px; line-height: 1; white-space: nowrap; vertical-align: middle;">승인완료</span>` : ''}
+          <button id="btn-view-from-loc" class="btn btn-primary btn-sm">조회</button>
+        </div>
+      </div>
+    `;
+
+    const fields = [
+      { label: ASSET_SCHEMA.CURRENT_DEPT.ui, value: asset.current_dept },
+      { label: ASSET_SCHEMA.HW_STATUS.ui, value: asset.hw_status },
+      { label: ASSET_SCHEMA.MANAGER_MAIN.ui, value: asset.manager_primary },
+      { label: ASSET_SCHEMA.MANAGER_SUB.ui, value: asset.manager_secondary },
+      { label: ASSET_SCHEMA.ASSET_PURPOSE.ui, value: asset.asset_purpose, fullWidth: true },
+      { label: ASSET_SCHEMA.MODEL_NAME.ui, value: asset.model_name },
+      { label: ASSET_SCHEMA.OS.ui, value: asset.os },
+      { label: ASSET_SCHEMA.CPU.ui, value: asset.cpu },
+      { label: ASSET_SCHEMA.RAM.ui, value: asset.ram },
+      { label: ASSET_SCHEMA.GPU.ui, value: asset.gpu, fullWidth: true },
+      { label: ASSET_SCHEMA.IP_ADDR.ui, value: asset.ip_address },
+      { label: ASSET_SCHEMA.MAC_ADDR.ui, value: asset.mac_address },
+      { label: ASSET_SCHEMA.REMOTE_TOOL.ui, value: asset.remote_tool },
+      { label: ASSET_SCHEMA.MONITORING.ui, value: asset.monitoring },
+      { label: ASSET_SCHEMA.MEMO.ui, value: asset.memo, fullWidth: true }
+    ];
+
+    const sectionsHTML = `
+      <div class="detail-section" style="margin-bottom: 0;">
+        <div class="detail-grid-2col" style="gap: 0.75rem 1rem;">
+          ${fields.map(f => `
+            <div class="detail-item ${f.fullWidth ? 'full-width' : ''}">
+              <div class="detail-label-sm">${f.label}</div>
+              <div class="detail-value-lg">${f.value || '-'}</div>
+            </div>
+          `).join('')}
+        </div>
+      </div>
+    `;
+
+    tableContainer.innerHTML = `
+      <div class="asset-detail-sidebar">
+        ${sectionsHTML}
+      </div>
+    `;
+
+    container.querySelector('#btn-view-from-loc')?.addEventListener('click', () => {
+      openHwModal(asset, 'view');
+    });
+  };
+
+  render();
+}
--- a/src/views/MapEditor.ts
+++ b/src/views/MapEditor.ts
@@ -1,299 +1,367 @@
-import { IMAGE_LOCATIONS } from '../components/Modal/SharedData';
-import { API_BASE_URL } from '../core/utils';
-import { createIcons, X, Save, Trash2, ChevronLeft, ChevronRight } from 'lucide';
-
-export class MapEditor {
-  private container: HTMLElement;
-  private wrapper: HTMLElement;
-  private img: HTMLImageElement;
-  private boxListEl: HTMLElement;
-  private pathLabel: HTMLElement;
-  private statusEl: HTMLElement;
-  private saveBtn: HTMLButtonElement;
-  private fileSidebar: HTMLElement;
-
-  private allMapConfig: Record<string, any[]> = {};
-  private boxes: any[] = [];
-  private isDrawing: boolean = false;
-  private startX: number = 0;
-  private startY: number = 0;
-  private currentBox: HTMLElement | null = null;
-  private currentPath: string = '';
-  private assetOptions: {id: string, name: string}[] = [];
-
-  constructor() {
-    this.container = document.getElementById('container')!;
-    this.wrapper = document.getElementById('wrapper')!;
-    this.img = document.getElementById('target-img') as HTMLImageElement;
-    this.boxListEl = document.getElementById('box-list')!;
-    this.pathLabel = document.getElementById('current-path')!;
-    this.statusEl = document.getElementById('save-status')!;
-    this.saveBtn = document.getElementById('btn-save-server') as HTMLButtonElement;
-    this.fileSidebar = document.getElementById('file-sidebar')!;
-  }
-
-  public async init() {
-    this.renderFileSidebar();
-    await this.loadConfig();
-    await this.loadAssets();
-    this.bindEvents();
-    this.selectFirstFile();
-    createIcons({ icons: { X, Save, Trash2, ChevronLeft, ChevronRight } });
-  }
-
-  private async loadAssets() {
-    try {
-      const res = await fetch(`/api/assets/master`);
-      const masterData = await res.json();
-      const allHw = [
-        ...(masterData.pc || []),
-        ...(masterData.server || []),
-        ...(masterData.storage || []),
-        ...(masterData.network || []),
-        ...(masterData.equipment || []),
-        ...(masterData.survey || []),
-        ...(masterData.officeSupplies || []),
-        ...(masterData.pcParts || [])
-      ];
-      this.assetOptions = allHw.map(a => ({
-        id: a.id,
-        name: `[${a.asset_code}] ${a.asset_purpose || a.model_name || a.category}`
-      }));
-    } catch (err) {
-      console.error('Failed to load assets for mapping', err);
-    }
-  }
-
-  private renderFileSidebar() {
-    let html = '';
-    Object.entries(IMAGE_LOCATIONS).forEach(([bldg, details]) => {
-      html += `<div class="folder-item">${bldg}</div>`;
-      Object.entries(details).forEach(([detail, paths]) => {
-        paths.forEach(path => {
-          const fileName = path.split('/').pop() || path;
-          html += `<div class="file-item" data-path="${path}">${fileName}</div>`;
-        });
-      });
-    });
-    this.fileSidebar.innerHTML = html;
-
-    this.fileSidebar.querySelectorAll('.file-item').forEach(item => {
-      item.addEventListener('click', () => {
-        this.fileSidebar.querySelectorAll('.file-item').forEach(i => i.classList.remove('active'));
-        item.classList.add('active');
-        this.renderCurrentFile();
-      });
-    });
-  }
-
-  private selectFirstFile() {
-    const firstItem = this.fileSidebar.querySelector('.file-item') as HTMLElement;
-    if (firstItem) {
-      firstItem.classList.add('active');
-      this.renderCurrentFile();
-    }
-  }
-
-  private async loadConfig() {
-    try {
-      const res = await fetch(`${API_BASE_URL}/api/maps`);
-      this.allMapConfig = await res.json();
-    } catch (err) {
-      console.error('Failed to load config:', err);
-    }
-  }
-
-  private renderCurrentFile() {
-    const activeItem = this.fileSidebar.querySelector('.file-item.active') as HTMLElement;
-    if (!activeItem) return;
-
-    this.currentPath = activeItem.dataset.path || '';
-    this.boxes = this.allMapConfig[this.currentPath] || [];
-    this.pathLabel.textContent = this.currentPath;
-    this.img.src = this.currentPath;
-    this.render();
-  }
-
-  private bindEvents() {
-    this.wrapper.addEventListener('mousedown', (e) => {
-      if (e.button !== 0) return;
-      this.isDrawing = true;
-      const rect = this.wrapper.getBoundingClientRect();
-      this.startX = e.clientX - rect.left;
-      this.startY = e.clientY - rect.top;
-
-      this.currentBox = document.createElement('div');
-      this.currentBox.className = 'draw-box';
-      this.currentBox.style.left = this.startX + 'px';
-      this.currentBox.style.top = this.startY + 'px';
-      
-      const label = document.createElement('div');
-      label.className = 'box-label';
-      label.textContent = '#' + (this.boxes.length + 1);
-      this.currentBox.appendChild(label);
-      
-      this.wrapper.appendChild(this.currentBox);
-    });
-
-    window.addEventListener('mousemove', (e) => {
-      if (!this.isDrawing || !this.currentBox) return;
-      const rect = this.wrapper.getBoundingClientRect();
-      const currentX = Math.max(0, Math.min(e.clientX - rect.left, rect.width));
-      const currentY = Math.max(0, Math.min(e.clientY - rect.top, rect.height));
-
-      const width = currentX - this.startX;
-      const height = currentY - this.startY;
-
-      this.currentBox.style.width = Math.abs(width) + 'px';
-      this.currentBox.style.height = Math.abs(height) + 'px';
-      this.currentBox.style.left = (width > 0 ? this.startX : currentX) + 'px';
-      this.currentBox.style.top = (height > 0 ? this.startY : currentY) + 'px';
-    });
-
-    window.addEventListener('mouseup', () => {
-      if (!this.isDrawing || !this.currentBox) return;
-      this.isDrawing = false;
-      
-      const width = parseFloat(this.currentBox.style.width);
-      const height = parseFloat(this.currentBox.style.height);
-
-      if (width > 3 && height > 3) {
-        const rect = this.wrapper.getBoundingClientRect();
-        const boxData = {
-          x: (parseFloat(this.currentBox.style.left) / rect.width * 100).toFixed(2),
-          y: (parseFloat(this.currentBox.style.top) / rect.height * 100).toFixed(2),
-          w: (width / rect.width * 100).toFixed(2),
-          h: (height / rect.height * 100).toFixed(2),
-          asset_id: null
-        };
-        this.boxes.push(boxData);
-        this.render();
-      }
-      
-      this.currentBox.remove();
-      this.currentBox = null;
-    });
-
-    (window as any).removeBox = (index: number) => {
-      this.boxes.splice(index, 1);
-      this.render();
-    };
-
-    document.getElementById('btn-clear-all')?.addEventListener('click', () => {
-      if(confirm('모든 박스를 삭제할까요?')) {
-        this.boxes = [];
-        this.render();
-      }
-    });
-
-    document.getElementById('btn-save-server')?.addEventListener('click', () => this.saveToServer());
-  }
-
-  private async saveToServer() {
-    if (!this.currentPath) return;
-    
-    try {
-      this.saveBtn.disabled = true;
-      this.saveBtn.textContent = '저장 중...';
-      
-      const res = await fetch(`${API_BASE_URL}/api/maps/save`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ path: this.currentPath, boxes: this.boxes })
-      });
-
-      if (res.ok) {
-        this.allMapConfig[this.currentPath] = [...this.boxes];
-        this.statusEl.textContent = '✅ 서버 저장 완료 (' + new Date().toLocaleTimeString() + ')';
-        setTimeout(() => this.statusEl.textContent = '', 3000);
-      } else {
-        alert('저장 실패!');
-      }
-    } catch (err) {
-      alert('서버 연결 오류!');
-    } finally {
-      this.saveBtn.disabled = false;
-      this.saveBtn.textContent = '서버에 즉시 저장';
-    }
-  }
-
-  private render() {
-    this.boxListEl.innerHTML = '';
-    const oldBoxes = this.wrapper.querySelectorAll('.placed-box');
-    oldBoxes.forEach(b => b.remove());
-
-    this.boxes.forEach((box, i) => {
-      const div = document.createElement('div');
-      div.className = 'placed-box';
-      div.style.left = box.x + '%';
-      div.style.top = box.y + '%';
-      div.style.width = box.w + '%';
-      div.style.height = box.h + '%';
-      
-      const label = document.createElement('div');
-      label.className = 'box-label';
-      label.textContent = '#' + (i + 1);
-      div.appendChild(label);
-      
-      this.wrapper.appendChild(div);
-
-      // Create asset options dropdown
-      let optionsHtml = '<option value="">-- 자산 매핑 안 됨 --</option>';
-      this.assetOptions.forEach(opt => {
-        const selected = box.asset_id === opt.id ? 'selected' : '';
-        optionsHtml += `<option value="${opt.id}" ${selected}>${opt.name}</option>`;
-      });
-
-      const item = document.createElement('div');
-      item.className = 'box-item';
-      item.innerHTML = `
-        <div class="box-header">
-          <span class="box-index">#${i+1}</span>
-          <button class="btn-del" onclick="removeBox(${i})">×</button>
-        </div>
-        <div class="box-inputs margin-bottom">
-          <select data-index="${i}" data-prop="asset_id">
-            ${optionsHtml}
-          </select>
-        </div>
-        <div class="box-inputs">
-          <div class="input-group">
-            <label>X</label>
-            <input type="number" step="0.01" value="${box.x}" data-index="${i}" data-prop="x">
-          </div>
-          <div class="input-group">
-            <label>Y</label>
-            <input type="number" step="0.01" value="${box.y}" data-index="${i}" data-prop="y">
-          </div>
-          <div class="input-group">
-            <label>W</label>
-            <input type="number" step="0.01" value="${box.w}" data-index="${i}" data-prop="w">
-          </div>
-          <div class="input-group">
-            <label>H</label>
-            <input type="number" step="0.01" value="${box.h}" data-index="${i}" data-prop="h">
-          </div>
-        </div>
-      `;
-      this.boxListEl.appendChild(item);
-    });
-
-    // Add events to new inputs and selects
-    this.boxListEl.querySelectorAll('input, select').forEach(input => {
-      input.addEventListener('change', (e) => {
-        const target = e.target as HTMLInputElement | HTMLSelectElement;
-        const index = parseInt(target.dataset.index!);
-        const prop = target.dataset.prop!;
-        
-        if (this.boxes[index]) {
-          if (prop === 'asset_id') {
-             this.boxes[index][prop] = target.value || null;
-          } else {
-             this.boxes[index][prop] = parseFloat(target.value).toFixed(2);
-             this.render(); // Re-render to update the map visual size
-          }
-        }
-      });
-    });
-  }
-}
+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;
+  private wrapper: HTMLElement;
+  private img: HTMLImageElement;
+  private boxListEl: HTMLElement;
+  private pathLabel: HTMLElement;
+  private statusEl: HTMLElement;
+  private saveBtn: HTMLButtonElement;
+  private fileSidebar: HTMLElement;
+
+  private allMapConfig: Record<string, any[]> = {};
+  private boxes: any[] = [];
+  private isDrawing: boolean = false;
+  private startX: number = 0;
+  private startY: number = 0;
+  private currentBox: HTMLElement | null = null;
+  private currentPath: string = '';
+  private assetOptions: {id: string, name: string}[] = [];
+
+  constructor() {
+    this.container = document.getElementById('container')!;
+    this.wrapper = document.getElementById('wrapper')!;
+    this.img = document.getElementById('target-img') as HTMLImageElement;
+    this.boxListEl = document.getElementById('box-list')!;
+    this.pathLabel = document.getElementById('current-path')!;
+    this.statusEl = document.getElementById('save-status')!;
+    this.saveBtn = document.getElementById('btn-save-server') as HTMLButtonElement;
+    this.fileSidebar = document.getElementById('file-sidebar')!;
+  }
+
+  public async init() {
+    this.renderFileSidebar();
+    await this.loadConfig();
+    await this.loadAssets();
+    this.bindEvents();
+    this.selectFirstFile();
+    createIcons({ icons: { X, Save, Trash2, ChevronLeft, ChevronRight } });
+  }
+
+  private async loadAssets() {
+    try {
+      const res = await fetch('/api/assets/master');
+      const masterData = await res.json();
+      const allHw = [
+        ...(masterData.pc || []),
+        ...(masterData.server || []),
+        ...(masterData.storage || []),
+        ...(masterData.network || []),
+        ...(masterData.equipment || []),
+        ...(masterData.survey || []),
+        ...(masterData.officeSupplies || []),
+        ...(masterData.pcParts || [])
+      ];
+      this.assetOptions = allHw.map(a => ({
+        id: a.id,
+        name: `[${a.asset_code}] ${a.asset_purpose || a.model_name || a.category}`
+      }));
+    } catch (err) {
+      console.error('Failed to load assets for mapping', err);
+    }
+  }
+
+  private renderFileSidebar() {
+    let html = '';
+    Object.entries(IMAGE_LOCATIONS).forEach(([bldg, details]) => {
+      html += `<div class="folder-item">${bldg}</div>`;
+      Object.entries(details).forEach(([detail, paths]) => {
+        paths.forEach(path => {
+          const fileName = path.split('/').pop() || path;
+          html += `<div class="file-item" data-path="${path}">${fileName}</div>`;
+        });
+      });
+    });
+    this.fileSidebar.innerHTML = html;
+
+    this.fileSidebar.querySelectorAll('.file-item').forEach(item => {
+      item.addEventListener('click', () => {
+        this.fileSidebar.querySelectorAll('.file-item').forEach(i => i.classList.remove('active'));
+        item.classList.add('active');
+        this.renderCurrentFile();
+      });
+    });
+  }
+
+  private selectFirstFile() {
+    const firstItem = this.fileSidebar.querySelector('.file-item') as HTMLElement;
+    if (firstItem) {
+      firstItem.classList.add('active');
+      this.renderCurrentFile();
+    }
+  }
+
+  private async loadConfig() {
+    try {
+      const res = await fetch('/api/maps');
+      this.allMapConfig = await res.json();
+    } catch (err) {
+      console.error('Failed to load config:', err);
+    }
+  }
+
+  private renderCurrentFile() {
+    const activeItem = this.fileSidebar.querySelector('.file-item.active') as HTMLElement;
+    if (!activeItem) return;
+
+    this.currentPath = activeItem.dataset.path || '';
+    this.boxes = this.allMapConfig[this.currentPath] || [];
+    this.pathLabel.textContent = this.currentPath;
+    this.img.src = this.currentPath;
+    this.render();
+  }
+
+  private bindEvents() {
+    this.wrapper.addEventListener('mousedown', (e) => {
+      if (e.button !== 0) return;
+      this.isDrawing = true;
+      const rect = this.wrapper.getBoundingClientRect();
+      this.startX = e.clientX - rect.left;
+      this.startY = e.clientY - rect.top;
+
+      this.currentBox = document.createElement('div');
+      this.currentBox.className = 'draw-box';
+      this.currentBox.style.left = this.startX + 'px';
+      this.currentBox.style.top = this.startY + 'px';
+      
+      const label = document.createElement('div');
+      label.className = 'box-label';
+      label.textContent = '#' + (this.boxes.length + 1);
+      this.currentBox.appendChild(label);
+      
+      this.wrapper.appendChild(this.currentBox);
+    });
+
+    window.addEventListener('mousemove', (e) => {
+      if (!this.isDrawing || !this.currentBox) return;
+      const rect = this.wrapper.getBoundingClientRect();
+      const currentX = Math.max(0, Math.min(e.clientX - rect.left, rect.width));
+      const currentY = Math.max(0, Math.min(e.clientY - rect.top, rect.height));
+
+      const width = currentX - this.startX;
+      const height = currentY - this.startY;
+
+      this.currentBox.style.width = Math.abs(width) + 'px';
+      this.currentBox.style.height = Math.abs(height) + 'px';
+      this.currentBox.style.left = (width > 0 ? this.startX : currentX) + 'px';
+      this.currentBox.style.top = (height > 0 ? this.startY : currentY) + 'px';
+    });
+
+    window.addEventListener('mouseup', () => {
+      if (!this.isDrawing || !this.currentBox) return;
+      this.isDrawing = false;
+      
+      const width = parseFloat(this.currentBox.style.width);
+      const height = parseFloat(this.currentBox.style.height);
+
+      if (width > 3 && height > 3) {
+        const rect = this.wrapper.getBoundingClientRect();
+        const boxData = {
+          x: (parseFloat(this.currentBox.style.left) / rect.width * 100).toFixed(2),
+          y: (parseFloat(this.currentBox.style.top) / rect.height * 100).toFixed(2),
+          w: (width / rect.width * 100).toFixed(2),
+          h: (height / rect.height * 100).toFixed(2),
+          asset_id: null
+        };
+        this.boxes.push(boxData);
+        this.render();
+      }
+      
+      this.currentBox.remove();
+      this.currentBox = null;
+    });
+
+    (window as any).removeBox = (index: number) => {
+      this.boxes.splice(index, 1);
+      this.render();
+    };
+
+    document.getElementById('btn-clear-all')?.addEventListener('click', () => {
+      if(confirm('모든 박스를 삭제할까요?')) {
+        this.boxes = [];
+        this.render();
+      }
+    });
+
+    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());
+  }
+
+  private async saveToServer() {
+    if (!this.currentPath) return;
+    
+    try {
+      this.saveBtn.disabled = true;
+      this.saveBtn.textContent = '저장 중...';
+      
+      const res = await fetch('/api/maps/save', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ path: this.currentPath, boxes: this.boxes })
+      });
+
+      if (res.ok) {
+        this.allMapConfig[this.currentPath] = [...this.boxes];
+        this.statusEl.textContent = '✅ 서버 저장 완료 (' + new Date().toLocaleTimeString() + ')';
+        setTimeout(() => this.statusEl.textContent = '', 3000);
+      } else {
+        alert('저장 실패!');
+      }
+    } catch (err) {
+      alert('서버 연결 오류!');
+    } finally {
+      this.saveBtn.disabled = false;
+      this.saveBtn.textContent = '서버에 즉시 저장';
+    }
+  }
+
+  private render() {
+    this.boxListEl.innerHTML = '';
+    const oldBoxes = this.wrapper.querySelectorAll('.placed-box');
+    oldBoxes.forEach(b => b.remove());
+
+    this.boxes.forEach((box, i) => {
+      const div = document.createElement('div');
+      div.className = 'placed-box';
+      div.style.left = box.x + '%';
+      div.style.top = box.y + '%';
+      div.style.width = box.w + '%';
+      div.style.height = box.h + '%';
+      
+      const label = document.createElement('div');
+      label.className = 'box-label';
+      label.textContent = '#' + (i + 1);
+      div.appendChild(label);
+      
+      this.wrapper.appendChild(div);
+
+      // Create asset options dropdown
+      let optionsHtml = '<option value="">-- 자산 매핑 안 됨 --</option>';
+      this.assetOptions.forEach(opt => {
+        const selected = box.asset_id === opt.id ? 'selected' : '';
+        optionsHtml += `<option value="${opt.id}" ${selected}>${opt.name}</option>`;
+      });
+
+      const item = document.createElement('div');
+      item.className = 'box-item';
+      item.innerHTML = `
+        <div class="box-header">
+          <span class="box-index">#${i+1}</span>
+          <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">
+            ${optionsHtml}
+          </select>
+        </div>
+        <div class="box-inputs">
+          <div class="input-group">
+            <label>X</label>
+            <input type="number" step="0.01" value="${box.x}" data-index="${i}" data-prop="x">
+          </div>
+          <div class="input-group">
+            <label>Y</label>
+            <input type="number" step="0.01" value="${box.y}" data-index="${i}" data-prop="y">
+          </div>
+          <div class="input-group">
+            <label>W</label>
+            <input type="number" step="0.01" value="${box.w}" data-index="${i}" data-prop="w">
+          </div>
+          <div class="input-group">
+            <label>H</label>
+            <input type="number" step="0.01" value="${box.h}" data-index="${i}" data-prop="h">
+          </div>
+        </div>
+      `;
+      this.boxListEl.appendChild(item);
+    });
+
+    // Add events to new inputs and selects
+    this.boxListEl.querySelectorAll('input, select').forEach(input => {
+      input.addEventListener('change', (e) => {
+        const target = e.target as HTMLInputElement | HTMLSelectElement;
+        const index = parseInt(target.dataset.index!);
+        const prop = target.dataset.prop!;
+        
+        if (this.boxes[index]) {
+          if (prop === 'asset_id') {
+             this.boxes[index][prop] = target.value || null;
+          } else {
+             this.boxes[index][prop] = parseFloat(target.value).toFixed(2);
+             this.render(); // Re-render to update the map visual size
+          }
+        }
+      });
+    });
+
+    (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}`;
+}
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,12 +1,15 @@
-import { defineConfig } from 'vite';
+import { defineConfig, loadEnv } from 'vite';
 import { resolve } from 'path';

-const proxyTarget = process.env.VITE_DEV_PROXY_TARGET || 'http://localhost:3000';
+const env = loadEnv('', process.cwd(), '');
+const backendPort = env.PORT || '3001';
+const proxyTarget = process.env.VITE_DEV_PROXY_TARGET || `http://localhost:${backendPort}`;

 export default defineConfig({
  server: {
    port: 8080,
    host: true, // Listen on all local IPs
+    allowedHosts: true,
    proxy: {
      '/api': {
        target: proxyTarget,
@@ -23,6 +26,7 @@ export default defineConfig({
      input: {
        main: resolve(__dirname, 'index.html'),
        map_editor: resolve(__dirname, 'map_editor.html'),
+        mobile: resolve(__dirname, 'mobile.html'),
      }
    }
  }
--- a/~$backupDB_20260602.xlsx
+++ b/~$backupDB_20260602.xlsx
--- a/(20260615).xlsx
+++ b/(20260615).xlsx