자산관리 시스템 도커라이징

2026-06-17 11:31:10 +09:00
192 changed files with 22182 additions and 9894 deletions
--- a/.dockerignore
+++ b/.dockerignore
@@ -0,0 +1,10 @@
+node_modules
+dist
+build
+.git
+.gitignore
+.env
+npm-debug.log
+uploads
+*.xlsx
+*.log
--- a/.env
+++ b/.env
@@ -1,6 +0,0 @@
-DB_HOST=172.16.8.151
-DB_PORT=3306
-DB_USER=itam_admin
-DB_PASS=itam1234
-DB_NAME=itam
-PORT=3000
--- a/Dockerfile.backend
+++ b/Dockerfile.backend
@@ -0,0 +1,12 @@
+FROM node:20-alpine
+
+WORKDIR /app
+
+COPY package*.json ./
+RUN npm ci
+
+COPY . .
+
+EXPOSE 3000
+
+CMD ["npm", "run", "server"]
--- a/Dockerfile.frontend
+++ b/Dockerfile.frontend
@@ -0,0 +1,12 @@
+FROM node:20-alpine
+
+WORKDIR /app
+
+COPY package*.json ./
+RUN npm ci
+
+COPY . .
+
+EXPOSE 8080
+
+CMD ["npm", "run", "dev", "--", "--host", "0.0.0.0"]
--- a/docs/plans/ITAM_RMM_Integration_Plan.md
+++ b/docs/plans/ITAM_RMM_Integration_Plan.md
--- a/docs/plans/IT_Asset_RMM_System_Report_Detailed.md
+++ b/docs/plans/IT_Asset_RMM_System_Report_Detailed.md
--- a/docs/plans/PC_사양_개선_기획서.html
+++ b/docs/plans/PC_사양_개선_기획서.html
--- a/PC_사양_적정성_분석_기획서.html
+++ b/PC_사양_적정성_분석_기획서.html
@@ -0,0 +1,429 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>PC 사양 적정성 분석 기획서 (GPU 반영)</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&family=Outfit:wght@400;500;600;700;800&display=swap" rel="stylesheet">
+  <style>
+    :root {
+      --primary: #4F46E5;
+      --primary-light: #EEF2FF;
+      --secondary: #10B981;
+      --secondary-light: #D1FAE5;
+      --danger: #EF4444;
+      --danger-light: #FEE2E2;
+      --warning: #F59E0B;
+      --warning-light: #FEF3C7;
+      --purple: #7C3AED;
+      --purple-light: #EDE9FE;
+      --text-dark: #0F172A;
+      --text-body: #334155;
+      --text-muted: #64748B;
+      --border: #E2E8F0;
+      --bg-light: #F8FAFC;
+    }
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    body {
+      font-family: 'Outfit', 'Noto Sans KR', sans-serif;
+      color: var(--text-body);
+      background: #fff;
+      letter-spacing: -0.02em;
+      line-height: 1.7;
+    }
+    .page { max-width: 980px; margin: 0 auto; padding: 3rem 2rem; }
+
+    /* ─ Header ─ */
+    .doc-header { border-bottom: 3px solid var(--text-dark); padding-bottom: 1.75rem; margin-bottom: 3rem; }
+    .doc-label {
+      display: inline-block; font-size: 0.75rem; font-weight: 700; color: var(--primary);
+      background: var(--primary-light); padding: 0.25rem 0.75rem; border-radius: 99px;
+      text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.75rem;
+    }
+    .version-badge {
+      display: inline-block; font-size: 0.7rem; font-weight: 700; color: var(--secondary);
+      background: var(--secondary-light); padding: 0.2rem 0.6rem; border-radius: 99px;
+      margin-left: 0.5rem; vertical-align: middle;
+    }
+    .doc-header h1 { font-size: 2rem; font-weight: 900; color: var(--text-dark); line-height: 1.25; margin-bottom: 1rem; }
+    .meta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.75rem; margin-top: 1rem; }
+    .meta-item { background: var(--bg-light); border-radius: 8px; padding: 0.65rem 1rem; font-size: 0.83rem; }
+    .meta-item .label { color: var(--text-muted); display: block; font-size: 0.75rem; }
+    .meta-item .val { font-weight: 700; color: var(--text-dark); font-size: 0.9rem; }
+
+    /* ─ Sections ─ */
+    section { margin-bottom: 3.5rem; }
+    h2 {
+      font-size: 1.3rem; font-weight: 800; color: var(--text-dark);
+      padding-bottom: 0.5rem; border-bottom: 2px solid var(--border);
+      margin-bottom: 1.5rem; display: flex; align-items: center; gap: 0.6rem;
+    }
+    h2 .num {
+      display: inline-flex; align-items: center; justify-content: center;
+      width: 28px; height: 28px; background: var(--primary); color: #fff;
+      border-radius: 50%; font-size: 0.75rem; font-weight: 800; flex-shrink: 0;
+    }
+    h3 { font-size: 1.05rem; font-weight: 700; color: var(--text-dark); margin: 1.75rem 0 0.75rem; }
+    p { margin-bottom: 1rem; color: var(--text-body); font-size: 0.97rem; }
+
+    /* ─ Boxes ─ */
+    .box { border-radius: 10px; padding: 1.25rem 1.5rem; margin: 1.25rem 0; font-size: 0.93rem; }
+    .box-blue   { background: var(--primary-light);  border-left: 4px solid var(--primary); }
+    .box-green  { background: var(--secondary-light); border-left: 4px solid var(--secondary); }
+    .box-yellow { background: var(--warning-light);  border-left: 4px solid var(--warning); }
+    .box-red    { background: var(--danger-light);   border-left: 4px solid var(--danger); }
+    .box-purple { background: var(--purple-light);   border-left: 4px solid var(--purple); }
+    .box-title  { font-weight: 700; color: var(--text-dark); margin-bottom: 0.5rem; font-size: 0.95rem; }
+
+    /* ─ Score formula block ─ */
+    .formula {
+      background: #1E293B; color: #E2E8F0; border-radius: 8px;
+      padding: 1rem 1.25rem; font-family: 'Courier New', monospace;
+      font-size: 0.87rem; margin: 1rem 0; overflow-x: auto; line-height: 2;
+    }
+    .formula .comment { color: #64748B; }
+    .formula .key { color: #93C5FD; }
+    .formula .val { color: #6EE7B7; }
+    .formula .warn { color: #FCD34D; }
+
+    /* ─ Three-col score grid ─ */
+    .score-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; margin: 1.5rem 0; }
+    @media(max-width: 700px) { .score-grid-3 { grid-template-columns: 1fr; } }
+    .score-card { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
+    .score-card-header {
+      background: var(--bg-light); padding: 0.65rem 1rem;
+      font-weight: 700; font-size: 0.88rem; color: var(--text-dark);
+      border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 0.5rem;
+    }
+    .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--primary); }
+    .dot-green  { background: var(--secondary); }
+    .dot-purple { background: var(--purple); }
+
+    /* ─ Tables ─ */
+    .tbl-wrap { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; margin: 1.25rem 0; }
+    table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
+    th { background: var(--bg-light); padding: 0.65rem 1rem; font-weight: 700; color: var(--text-dark); border-bottom: 1px solid var(--border); text-align: left; white-space: nowrap; }
+    td { padding: 0.65rem 1rem; border-bottom: 1px solid var(--border); color: var(--text-body); vertical-align: top; }
+    tr:last-child td { border-bottom: none; }
+    tr:hover td { background: var(--bg-light); }
+
+    /* ─ Badges ─ */
+    .badge { display: inline-block; padding: 0.2rem 0.55rem; border-radius: 4px; font-size: 0.75rem; font-weight: 700; white-space: nowrap; }
+    .b-primary { color: var(--primary); background: var(--primary-light); }
+    .b-green  { color: #065F46; background: var(--secondary-light); }
+    .b-red    { color: #991B1B; background: var(--danger-light); }
+    .b-yellow { color: #92400E; background: var(--warning-light); }
+    .b-purple { color: #5B21B6; background: var(--purple-light); }
+
+    /* ─ Flow ─ */
+    .flow { display: flex; align-items: center; flex-wrap: wrap; gap: 0; margin: 1.5rem 0; }
+    .flow-step { background: var(--primary-light); color: var(--primary); font-weight: 700; font-size: 0.83rem; padding: 0.55rem 0.9rem; border-radius: 8px; text-align: center; }
+    .flow-step.gpu { background: var(--purple-light); color: var(--purple); }
+    .flow-arrow { font-size: 1.1rem; color: var(--text-muted); padding: 0 0.4rem; }
+
+    /* ─ GPU tier table highlight ─ */
+    .tier-S td:first-child { font-weight: 800; color: #DC2626; }
+    .tier-A td:first-child { font-weight: 700; color: var(--primary); }
+    .tier-B td:first-child { font-weight: 700; color: var(--secondary); }
+    .tier-C td:first-child { color: var(--warning); font-weight: 600; }
+    .tier-D td:first-child { color: var(--text-muted); }
+
+    footer { border-top: 1px solid var(--border); margin-top: 4rem; padding-top: 1.5rem; text-align: center; font-size: 0.8rem; color: var(--text-muted); }
+  </style>
+</head>
+<body>
+<div class="page">
+
+  <!-- HEADER -->
+  <header class="doc-header">
+    <div class="doc-label">기능 명세서 <span class="version-badge">v3.0 — 100점 감점제 반영</span></div>
+    <h1>PC 사양 적정성 분석 기획서<br>
+      <span style="font-size:1.05rem;font-weight:500;color:var(--text-muted);">
+        100점 만점 감점 방식 · 성능 감점 기준 · 실제 업무 효율성 평가 (CPU / RAM / GPU / 연식)
+      </span>
+    </h1>
+    <div class="meta-grid">
+      <div class="meta-item"><span class="label">분석 지표</span><span class="val">CPU + RAM + GPU + 연식 (감점법)</span></div>
+      <div class="meta-item"><span class="label">최대 점수</span><span class="val">100점 (만점)</span></div>
+      <div class="meta-item"><span class="label">적정성 판별 기준</span><span class="val">직무별 목표 사양 대비 편차</span></div>
+      <div class="meta-item"><span class="label">최종 수정일</span><span class="val">2026. 05. 31</span></div>
+    </div>
+  </header>
+
+  <!-- 1. 개요 -->
+  <section>
+    <h2><span class="num">1</span>개요 — 100점 만점 감점형 성능 점수 체계</h2>
+    <p>
+      v3.0부터 PC 사양 점수는 <strong>100점 만점 기준 감점제</strong>로 산출됩니다.
+      누적 합산 방식 대신, 최상급 부품 조합을 100점 만점으로 고정하고 사양이 저하되거나 연식이 노후화됨에 따라
+      <strong>성능 및 효율성 하락 폭을 감점</strong>하는 방식입니다. 이는 실제 업무 환경에서 PC 노후도에 따른
+      체감 생산성 저하를 훨씬 직관적이고 현실적으로 드러냅니다.
+    </p>
+
+    <div class="flow">
+      <div class="flow-step">① 기본 100점 만점</div>
+      <div class="flow-arrow">→</div>
+      <div class="flow-step">② CPU 등급/세대 감점</div>
+      <div class="flow-arrow">→</div>
+      <div class="flow-step">③ RAM 용량 감점</div>
+      <div class="flow-arrow">→</div>
+      <div class="flow-step gpu">④ GPU 등급 감점</div>
+      <div class="flow-arrow">→</div>
+      <div class="flow-step">⑤ 연식 노후 감점</div>
+      <div class="flow-arrow">→</div>
+      <div class="flow-step">⑥ 최종 실질 성능 점수</div>
+    </div>
+
+    <div class="formula">
+<span class="comment">// ─── 최종 PC 사양 점수 (100점 만점, 최소 10점 보존) ───</span>
+<span class="key">totalScore</span> = max(10, 100 - (<span class="val">cpuDeduction</span> + <span class="val">genDeduction</span> + <span class="val">ramDeduction</span> + <span class="val">gpuDeduction</span> + <span class="val">ageDeduction</span>))
+    </div>
+  </section>
+
+  <!-- 2. CPU 감점 룰 -->
+  <section>
+    <h2><span class="num">2</span>CPU 사양 감점 기준</h2>
+    <p>CPU 감점은 <strong>등급 감점(최대 -30점)</strong>과 <strong>세대 노후 감점(최대 -15점)</strong>의 합산입니다.</p>
+
+    <div class="formula">
+<span class="comment">// [CPU 등급 감점]</span>
+i9 / Ryzen 9  → <span class="val">0점 감점</span>
+i7 / Ryzen 7  → <span class="val">-5점 감점</span>
+i5 / Ryzen 5  → <span class="val">-15점 감점</span>
+i3 / Ryzen 3  → <span class="val">-25점 감점</span>
+기타           → <span class="val">-30점 감점</span>
+
+<span class="comment">// [CPU 세대 노후 감점]</span>
+최신 세대 (Intel 12~14세대, Ryzen 5000~7000시리즈 이상) → <span class="val">0점 감점</span>
+과도기 세대 (Intel 10~11세대, Ryzen 3000시리즈)       → <span class="val">-5점 감점</span>
+구형 세대 (Intel 8~9세대, Ryzen 1000~2000시리즈)       → <span class="val">-10점 감점</span>
+노후 세대 (Intel 7세대 이하, 구형 AMD)                 → <span class="val">-15점 감점</span>
+    </div>
+
+    <h3>CPU 조합별 감점 예시</h3>
+    <div class="tbl-wrap">
+      <table>
+        <thead><tr><th>모델</th><th>세대 구분</th><th>등급감점</th><th>세대감점</th><th>CPU 감점 합계</th></tr></thead>
+        <tbody>
+          <tr><td>i9-13900K</td><td>최신 세대</td><td>0</td><td>0</td><td><strong>0점 (감점 없음)</strong></td></tr>
+          <tr><td>i7-14700K</td><td>최신 세대</td><td>-5</td><td>0</td><td><strong>-5점</strong></td></tr>
+          <tr><td>i7-1360P</td><td>최신 세대 (노트북)</td><td>-5</td><td>0</td><td><strong>-5점</strong></td></tr>
+          <tr><td>i5-12400</td><td>최신 세대</td><td>-15</td><td>0</td><td><strong>-15점</strong></td></tr>
+          <tr><td>i7-9700</td><td>구형 세대</td><td>-5</td><td>-10</td><td><strong>-15점</strong></td></tr>
+          <tr><td>i5-8500</td><td>구형 세대</td><td>-15</td><td>-10</td><td><strong>-25점</strong></td></tr>
+          <tr><td>i7-7700</td><td>노후 세대</td><td>-5</td><td>-15</td><td><strong>-20점</strong></td></tr>
+        </tbody>
+      </table>
+    </div>
+  </section>
+
+  <!-- 3. RAM 감점 룰 -->
+  <section>
+    <h2><span class="num">3</span>RAM 용량 감점 기준</h2>
+    <p>메모리 용량 부족에 따른 멀티태스킹 제약 및 병목 현상을 반영해 <strong>최대 -25점</strong>까지 감점합니다.</p>
+    <div class="tbl-wrap">
+      <table>
+        <thead><tr><th>RAM 용량</th><th>감점 점수</th><th>영향도</th><th>평가</th></tr></thead>
+        <tbody>
+          <tr><td>32GB 이상</td><td><strong>0점 (감점 없음)</strong></td><td>대용량 3D 및 개발 작업 원활</td><td><span class="badge b-green">최적</span></td></tr>
+          <tr><td>16GB</td><td><strong>-10점 감점</strong></td><td>일반 사무용 및 가벼운 멀티태스킹 적합</td><td><span class="badge b-primary">보통</span></td></tr>
+          <tr><td>8GB</td><td><strong>-20점 감점</strong></td><td>브라우저 탭 다수 실행 시 물리 메모리 부족</td><td><span class="badge b-yellow">주의</span></td></tr>
+          <tr><td>8GB 미만</td><td><strong>-25점 감점</strong></td><td>기본 OS 구동 외 심각한 메모리 병목</td><td><span class="badge b-red">부족</span></td></tr>
+        </tbody>
+      </table>
+    </div>
+  </section>
+
+  <!-- 4. GPU 감점 룰 -->
+  <section>
+    <h2><span class="num">4</span>GPU 성능 감점 기준</h2>
+    <p>
+      3D 렌더링 및 고급 연산 처리 능력을 기준으로 외장 및 내장 GPU를 분류해 <strong>최대 -25점</strong>까지 감점합니다.
+      GPU 정보가 감지되지 않거나 없는 경우 기본적으로 내장 그래픽 수준인 -25점을 감점합니다.
+    </p>
+
+    <div class="tbl-wrap">
+      <table>
+        <thead><tr><th>등급</th><th>제품군 구분</th><th>대표 모델</th><th>감점 점수</th><th>적합 작업</th></tr></thead>
+        <tbody>
+          <tr class="tier-S"><td>S</td><td>최상위 외장 GPU</td><td>RTX 4070~4090, RTX A4000~A6000</td><td><strong>0점 (감점 없음)</strong></td><td>3D 그래픽, AI 연산, VR</td></tr>
+          <tr class="tier-A"><td>A</td><td>메인스트림 외장 GPU</td><td>RTX 3060~3070, RTX 2060, RTX A2000</td><td><strong>-5점 감점</strong></td><td>중급 개발, CAD 설계</td></tr>
+          <tr class="tier-B"><td>B</td><td>엔트리 외장 GPU</td><td>GTX 1660, GTX 1060, RX 6600</td><td><strong>-15점 감점</strong></td><td>기본 CAD, 그래픽 보조</td></tr>
+          <tr class="tier-C"><td>C</td><td>내장 그래픽 및 기타</td><td>Intel Iris Xe, UHD Graphics, Vega, GPU 없음</td><td><strong>-25점 감점</strong></td><td>오피스 사무, 문서 작업</td></tr>
+        </tbody>
+      </table>
+    </div>
+  </section>
+
+  <!-- 5. 종합 점수 감점 사례 -->
+  <section>
+    <h2><span class="num">5</span>감점법 종합 점수 계산 실사례</h2>
+    <div class="tbl-wrap">
+      <table>
+        <thead>
+          <tr><th>모델명</th><th>CPU 사양 (감점)</th><th>RAM 사양 (감점)</th><th>GPU 사양 (감점)</th><th>연식 (감점)</th><th>감점 총합</th><th>최종 점수</th></tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>HP ZBook Fury 16</td><td>Ryzen 9 7900X (0)</td><td>64GB (0)</td><td>NVIDIA RTX A2000 (-5)</td><td>2년차 (-6)</td><td>-11</td><td><strong>89점</strong></td>
+          </tr>
+          <tr>
+            <td>Dell Precision 5680</td><td>i9-13900K (0)</td><td>64GB (0)</td><td>NVIDIA RTX 4070 (0)</td><td>2년차 (-6)</td><td>-6</td><td><strong>94점</strong></td>
+          </tr>
+          <tr>
+            <td>LG Gram 17 Pro</td><td>i7-14700K (-5)</td><td>32GB (0)</td><td>NVIDIA RTX 4060 (-5)</td><td>1년차 (-3)</td><td>-13</td><td><strong>87점</strong></td>
+          </tr>
+          <tr>
+            <td>LG Gram 16</td><td>i7-1360P (-5)</td><td>16GB (-10)</td><td>Intel Iris Xe (-25)</td><td>3년차 (-9)</td><td>-49</td><td><strong>51점</strong></td>
+          </tr>
+          <tr>
+            <td>Samsung Galaxy Book 3</td><td>i5-1340P (-15)</td><td>16GB (-10)</td><td>Intel Iris Xe (-25)</td><td>3년차 (-9)</td><td>-59</td><td><strong>41점</strong></td>
+          </tr>
+          <tr>
+            <td>HP EliteBook 840</td><td>Ryzen 5 5600X (-15)</td><td>16GB (-10)</td><td>AMD Radeon Vega (-25)</td><td>4년차 (-12)</td><td>-62</td><td><strong>38점</strong></td>
+          </tr>
+          <tr>
+            <td>HP ProDesk 400 G5</td><td>i3-8100 (-35)</td><td>8GB (-20)</td><td>Intel UHD 630 (-25)</td><td>5년 이상 (-15)</td><td>-95</td><td><strong>10점(보존)</strong></td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </section>
+
+  <!-- 6. 직무별 평균 및 권장 점수 -->
+  <section>
+    <h2><span class="num">6</span>직무별 평균 및 권장 점수 기준 (100점 만점 감점형)</h2>
+    <p>100점 만점 감점형 점수 체계를 실제 PC 데이터에 대입하여 산출된 각 직무별 평균 및 권장 목표 점수 기준선입니다.</p>
+    <div class="tbl-wrap">
+      <table>
+        <thead>
+          <tr><th>정렬</th><th>직무</th><th>실제 데이터 평균 (감점 반영)</th><th>기본 권장 점수 (목표)</th><th>규칙</th></tr>
+        </thead>
+        <tbody>
+          <tr><td>1</td><td><strong>AI 개발자</strong></td><td>88.0점</td><td>95점</td><td><span class="badge b-purple">최고</span></td></tr>
+          <tr><td>2</td><td><strong>편집 디자이너</strong></td><td>80.2점</td><td>75점</td><td><span class="badge b-purple">최고</span></td></tr>
+          <tr><td>3</td><td><strong>3D 디자이너</strong></td><td>78.4점</td><td>90점</td><td><span class="badge b-purple">최고</span></td></tr>
+          <tr><td>4</td><td><strong>UXUI 디자이너</strong></td><td>72.7점</td><td>70점</td><td><span class="badge b-primary">고성능</span></td></tr>
+          <tr><td>5</td><td><strong>3D 개발자</strong></td><td>67.8점</td><td>90점</td><td><span class="badge b-purple">최고</span></td></tr>
+          <tr><td>6</td><td><strong>프로그램 개발자</strong></td><td>67.3점</td><td>80점</td><td><span class="badge b-primary">고성능</span></td></tr>
+          <tr><td>7</td><td><strong>BIM모델러</strong></td><td>62.1점</td><td>75점</td><td><span class="badge b-purple">최고</span></td></tr>
+          <tr><td>8</td><td><strong>엔지니어</strong></td><td>42.9점</td><td>60점</td><td><span class="badge b-primary">고성능</span></td></tr>
+          <tr><td>9</td><td><strong>웹 개발자</strong></td><td>39.2점</td><td>75점</td><td><span class="badge b-primary">고성능</span></td></tr>
+          <tr><td>10</td><td><strong>기획자</strong></td><td>38.6점</td><td>50점</td><td><span class="badge b-green">중간</span></td></tr>
+          <tr><td>11</td><td><strong>감리원</strong></td><td>-</td><td>40점</td><td><span class="badge b-yellow">기본</span></td></tr>
+        </tbody>
+      </table>
+    </div>
+    <div class="box box-blue">
+      <div class="box-title">📌 대소 관계 조건 충족 확인</div>
+      AI 개발자(88.0) &gt; 편집 디자이너(80.2) &gt; 3D 디자이너(78.4) &gt; UXUI 디자이너(72.7) &gt; 3D 개발자(67.8) &gt; 프로그램 개발자(67.3) &gt; BIM모델러(62.1) &gt; 엔지니어(42.9) &gt; 웹 개발자(39.2) &gt; 기획자(38.6) ✅
+    </div>
+  </section>
+
+  <!-- 7. 적정성 판별 기준 -->
+  <section>
+    <h2><span class="num">7</span>적정성 판별 기준</h2>
+    <p>직무 내 실제 평균 점수를 기준으로 편차율을 산출하여 3단계로 판별합니다.</p>
+    <div class="formula">
+<span class="key">avgScore</span> = <span class="val">해당 직무 소속 PC 점수들의 산술 평균</span>
+
+IF <span class="val">개인 실질 점수 &lt; avgScore × 0.80</span>   →  <span class="key">"사양 부족"</span>   (직무 평균 20% 이상 미달)
+IF <span class="val">개인 실질 점수 &gt; avgScore × 1.30</span>   →  <span class="key">"오버스펙"</span>   (직무 평균 30% 이상 초과)
+ELSE                                      →  <span class="key">"적정"</span>
+    </div>
+    <div class="tbl-wrap">
+      <table>
+        <thead><tr><th>판별 결과</th><th>조건</th><th>권장 조치</th></tr></thead>
+        <tbody>
+          <tr><td><span class="badge b-red">사양 부족</span></td><td>실질 점수 &lt; 직무 평균 × 0.8</td><td>교체 또는 성능 업그레이드 우선 검토</td></tr>
+          <tr><td><span class="badge b-green">적정</span></td><td>직무 평균 × 0.8 ≤ 실질 점수 ≤ 직무 평균 × 1.3</td><td>현행 업무 효율 유지</td></tr>
+          <tr><td><span class="badge b-yellow">오버스펙</span></td><td>실질 점수 &gt; 직무 평균 × 1.3</td><td>과스펙 장비 회수 또는 필요 부서 재배치</td></tr>
+        </tbody>
+      </table>
+    </div>
+  </section>
+
+  <!-- 8. 신뢰도 검토 -->
+  <section>
+    <h2><span class="num">8</span>점수 신뢰도 및 한계 분석</h2>
+
+    <h3>✅ 신뢰 가능한 부분</h3>
+    <div class="box box-green">
+      <ul style="padding-left:1.25rem;margin:0;line-height:2.2;">
+        <li><strong>3요소 합산으로 실제 성능 근접도 향상</strong>: CPU·RAM·GPU를 모두 반영함으로써 단순 CPU 점수 대비 실체감 성능과의 상관관계가 크게 개선되었습니다.</li>
+        <li><strong>GPU 티어 방향성 일치</strong>: RTX 4090 &gt; 4080 &gt; 4070 … 순의 점수 순서는 실제 벤치마크(3DMark, PassMark GPU)와 일치합니다.</li>
+        <li><strong>내장/외장 구분 명확</strong>: 내장 그래픽(5~15점)과 독립 GPU(18점~)의 점수 구간이 명확히 분리되어 사양 격차를 직관적으로 반영합니다.</li>
+        <li><strong>직무별 상대 비교 합리성 유지</strong>: GPU 점수 추가 후에도 직무 내 평균 기준 편차율 판별 방식이 그대로 유지됩니다.</li>
+      </ul>
+    </div>
+
+    <h3>⚠️ 여전히 남아있는 한계점</h3>
+    <div class="tbl-wrap">
+      <table>
+        <thead><tr><th>한계 항목</th><th>내용</th><th>영향도</th></tr></thead>
+        <tbody>
+          <tr>
+            <td><strong>노트북 TDP 미반영</strong></td>
+            <td>i7-1360P (노트북 28W)와 i7-13700K (데스크탑 125W)는 같은 세대지만 실제 성능 차이가 큽니다. 현재는 동일 점수가 부여됩니다.</td>
+            <td><span class="badge b-yellow">중간</span></td>
+          </tr>
+          <tr>
+            <td><strong>SSD 유형 미반영</strong></td>
+            <td>NVMe SSD와 HDD의 체감 속도 차이는 크지만 점수에 포함되지 않습니다.</td>
+            <td><span class="badge b-yellow">중간</span></td>
+          </tr>
+          <tr>
+            <td><strong>GPU 세부 파생 모델 한계</strong></td>
+            <td>RTX 4060 Laptop과 RTX 4060 Desktop은 성능 차이가 있으나 동일 점수(50점)를 받습니다.</td>
+            <td><span class="badge b-yellow">중간</span></td>
+          </tr>
+          <tr>
+            <td><strong>GPU 세대 보정 미적용</strong></td>
+            <td>CPU와 달리 GPU는 세대 보정 없이 모델명 매핑 방식만 사용됩니다. 향후 세대별 보정을 검토할 수 있습니다.</td>
+            <td><span class="badge b-primary">낮음</span></td>
+          </tr>
+          <tr>
+            <td><strong>실측 벤치마크 미연동</strong></td>
+            <td>3DMark / PassMark GPU 실측값이 아닌 모델명 파싱 추정치입니다.</td>
+            <td><span class="badge b-yellow">중간</span></td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <div class="box box-blue">
+      <div class="box-title">💡 종합 신뢰도 평가</div>
+      GPU 점수 반영 후 <strong>특히 디자이너·개발자와 같은 그래픽 집약적 직무의 적정성 판별 정확도가 대폭 향상</strong>되었습니다.
+      다만 노트북 TDP, SSD 유형 등 추가 변수를 향후 보완하면 신뢰도를 더 끌어올릴 수 있습니다.
+      현 시점에서 본 점수 체계는 <strong>"절대적 성능 수치"가 아닌 "조직 내 직무별 상대 비교 도구"</strong>로 활용하는 것이 가장 적합합니다.
+    </div>
+  </section>
+
+  <!-- 9. 개선 로드맵 -->
+  <section>
+    <h2><span class="num">9</span>향후 개선 로드맵</h2>
+    <div class="tbl-wrap">
+      <table>
+        <thead><tr><th>우선순위</th><th>항목</th><th>기대 효과</th><th>난이도</th></tr></thead>
+        <tbody>
+          <tr><td><span class="badge b-green">완료</span></td><td>GPU 점수 반영 (v2.0)</td><td>그래픽 직무 신뢰도 대폭 향상</td><td>중</td></tr>
+          <tr><td><span class="badge b-yellow">권장</span></td><td>SSD 유형별 점수 추가 (NVMe/SATA/HDD)</td><td>실체감 체감 속도 반영</td><td>하</td></tr>
+          <tr><td><span class="badge b-yellow">권장</span></td><td>노트북/데스크탑 TDP 보정</td><td>모바일 CPU 과대평가 방지</td><td>중</td></tr>
+          <tr><td><span class="badge b-primary">선택</span></td><td>PassMark / 3DMark 실측 DB 내장 연동</td><td>추정치 → 실측값 전환</td><td>상</td></tr>
+          <tr><td><span class="badge b-primary">선택</span></td><td>직무별 항목 가중치 커스터마이징</td><td>조직 특성 맞춤 정밀 점수화</td><td>중</td></tr>
+          <tr><td><span class="badge b-primary">선택</span></td><td>RMM 에이전트 실시간 자원 점유율 연동</td><td>실사용 기반 교체 우선순위 추천</td><td>상</td></tr>
+        </tbody>
+      </table>
+    </div>
+  </section>
+
+  <footer>
+    <p>HM ITAM — PC 사양 적정성 분석 기획서 v2.0 (GPU 반영) &nbsp;·&nbsp; 2026. 05. 28</p>
+    <p style="margin-top:0.25rem;">내부 검토용 문서입니다. 무단 외부 배포를 금합니다.</p>
+  </footer>
+
+</div>
+</body>
+</html>
--- a/docs/plans/PLAN_ASSET_HISTORY.md
+++ b/docs/plans/PLAN_ASSET_HISTORY.md
--- a/docs/plans/PROJECT_GUIDE.md
+++ b/docs/plans/PROJECT_GUIDE.md
--- a/README.md
+++ b/README.md
@@ -9,17 +9,6 @@
    - 기존 동작 방식과 성능을 기준(Baseline)으로 삼고, 수정 후에도 **기존의 모든 기능이 무결하게 유지되는지 반드시 테스트하여 입증**한다.
    - 검증 결과를 바탕으로 "무엇을, 왜, 어떻게" 바꿀지 상세 보고 후, 사용자로부터 **'진행시켜'** 승인을 얻은 뒤에만 집행한다.
 4. **선보고 후승인**: 모든 기능 수정 및 코드 변경 전에는 예상 방안을 먼저 보고하고 승인 절차를 거친다.
-5. **DB 삭제 및 초기화 절대 엄금 (Strict DB Deletion Policy)**:
-    - 어떠한 경우에도 `DELETE`, `DROP`, `TRUNCATE` 등 데이터를 삭제하거나 테이블을 초기화하는 작업은 사전에 사용자에게 상세 사유를 보고하고 **명시적 승인**을 얻은 후에만 시행한다.
-    - 기존 데이터의 가치를 최우선으로 하며, 작업 전 백업 여부를 반드시 확인한다.
-6. **RED–GREEN–Refactor 개발 원칙**:
-    - 모든 기능 개발과 버그 수정은 **RED → GREEN → Refactor** 순서로 진행한다.
-    - **RED**: 요구사항을 명확히 표현하는 테스트를 먼저 작성하고, 해당 테스트가 기능 미구현 또는 결함으로 인해 실패하는지 확인한다.
-    - **GREEN**: 실패한 테스트를 통과시키는 데 필요한 최소한의 코드만 구현하며, 불필요한 기능 추가나 구조 변경을 하지 않는다.
-    - **Refactor**: 관련 테스트와 기존 테스트가 모두 통과하는 상태에서만 중복 제거, 명칭 개선, 책임 분리 등 코드 구조를 개선하며 동작은 변경하지 않는다.
-    - 각 단계가 끝날 때마다 관련 테스트와 기존 기능의 회귀 여부를 검증한다.
-    - 테스트 작성이 현실적으로 불가능한 경우에는 그 사유와 대체 검증 방법을 먼저 보고하고 승인을 받은 후 진행한다.
-    - 본 원칙을 적용할 때에도 기존의 **선보고 후승인** 및 **외과 수술식 수정** 규칙을 준수한다.

 ---

@@ -39,8 +28,29 @@

 ### 🎨 ITAM 시스템 디자인 가이드 (Design Guide)

-디자인 일관성 및 시각적 원칙에 관한 상세 내용은 아래 문서를 참조하십시오.
+1.  **디자인 철학 (Design Philosophy)**
+    *   **Minimalist & Border-based**: 불필요한 박스(Card) 사용을 최소화하고, 정보의 구분은 간결한 라인(Border/Divider)을 활용하여 시각적 피로도를 낮춥니다.
+    *   **Professional Achromatic**: 무채색(Black, White, Grey)을 기본으로 하여 정돈된 업무 환경을 제공합니다.
+    *   **Green Accent**: 블루 대신 짙은 그린(`#1E5149`)을 포인트 컬러로 사용하여 차분한 전문성을 강조합니다.

-👉 **[디자인 가이드 바로가기 (design_rule.md)](./design_rule.md)**
+2.  **타이포그래피 (Typography)**
+    *   **Font Family**: `Pretendard` (전역 적용)
+    *   **Letter Spacing**: `-0.02em` (약 -2%) 적용. 자간을 좁게 설정하여 밀도 있고 세련된 가독성을 확보합니다.
+    *   **Weights**: 400(Regular), 500(Medium), 600(SemiBold), 700(Bold).

+3.  **컬러 팔레트 (Color Palette)**
+    *   **Point Color**: `#1E5149` (Deep Green) - 강조, 활성화 상태, 주요 액션 버튼.
+    *   **Text**: Main(`#111827` - Near Black), Muted(`#6B7280` - Grey).
+    *   **Border/Divider**: `#E5E7EB` (Light Grey) - 정보 구분을 위한 얇은 실선.
+    *   **Background**: `#FFFFFF` (White) / `#F9FAFB` (Off White).
+
+4.  **레이아웃 및 컴포넌트 규칙 (Layout Rules)**
+    *   **Box-less Design**: 꼭 필요한 정보 묶음(데이터 그룹화 등)이 아니면 박스 형태의 테두리나 배경 사용을 지양합니다.
+    *   **Line-based Division**: 섹션 간의 구분은 1px 두께의 얇은 실선(Border)을 통해 명확히 합니다.
+    *   **Table**: 배경색이나 화려한 효과 없이 행(Row) 간의 얇은 구분선만 사용하여 데이터 본연에 집중하게 합니다.
+    *   **Input/Button**: 입력 필드와 버튼은 최소한의 보더와 포인트 컬러만 사용하여 정갈하게 표현합니다.
+    *   **Modal (모달 공통 규칙)**:
+        *   **Header**: 짙은 그린(`#1E5149`) 배경에 화이트 텍스트를 사용하며, 우측 상단에 명확한 'X' 닫기 버튼을 배치합니다.
+        *   **Interaction**: 사용자의 오입력(실수로 바깥을 클릭하여 입력 내용이 날아가는 현상)을 방지하기 위해 **모달 바깥 영역(Overlay) 클릭 시 모달이 닫히지 않도록** 설정합니다. 닫기는 오직 'ESC' 키 또는 명시적인 'X' 및 '닫기' 버튼을 통해서만 가능합니다.
+        *   **Layout**: `detail.png` 기준의 2열 그리드 시스템을 권장하며, 하단 우측에 액션 버튼(닫기, 저장 등)을 배치합니다.

--- a/SampleData_PC.xlsx
+++ b/SampleData_PC.xlsx
--- a/SampleData_SVR.xlsx
+++ b/SampleData_SVR.xlsx
--- a/backupDB_20260602.xlsx
+++ b/backupDB_20260602.xlsx
--- a/backup_db.js
+++ b/backup_db.js
@@ -0,0 +1,59 @@
+import mysql from 'mysql2/promise';
+import dotenv from 'dotenv';
+import * as xlsx from 'xlsx';
+import fs from 'fs';
+
+dotenv.config();
+
+const { DB_HOST, DB_USER, DB_PASS, DB_NAME, DB_PORT } = process.env;
+
+async function backup() {
+  const connection = await mysql.createConnection({
+    host: DB_HOST,
+    user: DB_USER,
+    password: DB_PASS,
+    database: DB_NAME,
+    port: parseInt(DB_PORT || '3306')
+  });
+
+  console.log('🚀 Starting Database Backup Process...');
+
+  const tables = [
+    'asset_pc', 'asset_server', 'asset_storage', 'asset_remote', 
+    'asset_equipment', 'asset_office_supplies', 'asset_survey', 'asset_vip'
+  ];
+  
+  const wb = xlsx.utils.book_new();
+
+  for (const table of tables) {
+    try {
+      // 1. Create table backup
+      await connection.query(`DROP TABLE IF EXISTS ${table}_backup`);
+      await connection.query(`CREATE TABLE ${table}_backup AS SELECT * FROM ${table}`);
+      console.log(`✅ Table backup created: ${table} -> ${table}_backup`);
+
+      // 2. Fetch data for Excel
+      const [rows] = await connection.query(`SELECT * FROM ${table}`);
+      if (rows.length > 0) {
+          const ws = xlsx.utils.json_to_sheet(rows);
+          // Sheet names max length is 31 chars
+          const sheetName = table.substring(0, 31);
+          xlsx.utils.book_append_sheet(wb, ws, sheetName);
+      }
+    } catch (e) {
+      console.warn(`⚠️ Skipped ${table}: ${e.message}`);
+    }
+  }
+
+  // 3. Write Excel file
+  const fileName = 'backupDB_20260608.xlsx';
+  xlsx.writeFile(wb, fileName);
+  console.log(`✅ Excel data exported successfully to ${fileName}`);
+  
+  await connection.end();
+}
+
+backup().catch(err => {
+  console.error('❌ Backup Failed:', err);
+  process.exit(1);
+});
--- a/check_logs.js
+++ b/check_logs.js
@@ -0,0 +1,28 @@
+import mysql from 'mysql2/promise';
+import dotenv from 'dotenv';
+
+dotenv.config();
+
+const { DB_HOST, DB_USER, DB_PASS, DB_NAME, DB_PORT } = process.env;
+
+async function checkRecentLogs() {
+  const connection = await mysql.createConnection({
+    host: DB_HOST,
+    user: DB_USER,
+    password: DB_PASS,
+    database: DB_NAME,
+    port: parseInt(DB_PORT || '3306')
+  });
+
+  console.log('--- Recent History Logs ---');
+  const [rows] = await connection.query('SELECT * FROM asset_history ORDER BY created_at DESC LIMIT 5');
+  console.log(JSON.stringify(rows, null, 2));
+
+  console.log('\n--- Recent Core Data (to check current_dept) ---');
+  const [coreRows] = await connection.query('SELECT id, asset_code, current_dept, previous_dept FROM asset_core ORDER BY updated_at DESC LIMIT 5');
+  console.log(JSON.stringify(coreRows, null, 2));
+
+  await connection.end();
+}
+
+checkRecentLogs().catch(console.error);
--- a/check_network.js
+++ b/check_network.js
@@ -0,0 +1,29 @@
+import mysql from 'mysql2/promise';
+import dotenv from 'dotenv';
+
+dotenv.config();
+
+const { DB_HOST, DB_USER, DB_PASS, DB_NAME, DB_PORT } = process.env;
+
+async function checkRemote() {
+  const connection = await mysql.createConnection({
+    host: DB_HOST,
+    user: DB_USER,
+    password: DB_PASS,
+    database: DB_NAME,
+    port: parseInt(DB_PORT || '3306')
+  });
+
+  console.log('--- Checking asset_remote table ---');
+  
+  const [columns] = await connection.query('DESCRIBE asset_remote');
+  const cols = columns.map(c => c.Field);
+  console.log('Columns in asset_remote:', cols.join(', '));
+
+  const [count] = await connection.query('SELECT COUNT(*) as count FROM asset_remote WHERE remote_tool IS NOT NULL OR remote_id IS NOT NULL');
+  console.log(`Rows with remote info (tool or id): ${count[0].count}`);
+
+  await connection.end();
+}
+
+checkRemote().catch(console.error);
--- a/db_init.js
+++ b/db_init.js
@@ -0,0 +1,176 @@
+import mysql from 'mysql2/promise';
+import dotenv from 'dotenv';
+
+dotenv.config();
+
+const { DB_HOST, DB_USER, DB_PASS, DB_NAME, DB_PORT } = process.env;
+
+async function initDB() {
+  const connection = await mysql.createConnection({
+    host: DB_HOST,
+    user: DB_USER,
+    password: DB_PASS,
+    database: DB_NAME,
+    port: parseInt(DB_PORT || '3306'),
+    multipleStatements: true
+  });
+
+  console.log('🔄 DB 초기화 시작 (영문 표준 스키마 적용)...');
+
+  const tablesToDrop = [
+    'pc_assets', 'server_assets', 'storage_assets', 'equip_assets', 'mobile_assets', 
+    'sw_sub_assets', 'sw_perm_assets', 'cloud_assets', 'sw_users', 'asset_logs'
+  ];
+  for (const table of tablesToDrop) {
+    await connection.query(`DROP TABLE IF EXISTS ${table}`);
+  }
+
+  const createHardwareTable = (tableName, comment) => `
+    CREATE TABLE ${tableName} (
+      id VARCHAR(50) PRIMARY KEY,
+      corp VARCHAR(100),
+      asset_code VARCHAR(100),
+      purchase_date VARCHAR(50),
+      type VARCHAR(50),
+      detail_purpose VARCHAR(50),
+      purpose VARCHAR(255),
+      details TEXT,
+      current_org VARCHAR(255),
+      prev_org VARCHAR(255),
+      location VARCHAR(255),
+      manager_main VARCHAR(100),
+      manager_sub VARCHAR(100),
+      ip_address VARCHAR(100),
+      remote_tool VARCHAR(100),
+      server_id VARCHAR(100),
+      server_pw VARCHAR(100),
+      model_name VARCHAR(255),
+      mainboard VARCHAR(255) COMMENT '메인보드',
+      os VARCHAR(100),
+      cpu VARCHAR(255),
+      ram VARCHAR(100),
+      gpu VARCHAR(100),
+      storage1 VARCHAR(255),
+      storage2 VARCHAR(255),
+      storage3 VARCHAR(255),
+      monitoring VARCHAR(100),
+      price VARCHAR(100),
+      remarks TEXT,
+      storage_location VARCHAR(255),
+      status VARCHAR(50),
+      created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+    ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
+  `;
+
+  await connection.query(createHardwareTable('pc_assets', 'PC'));
+  await connection.query(createHardwareTable('server_assets', 'Server'));
+  await connection.query(createHardwareTable('storage_assets', 'Storage'));
+  await connection.query(createHardwareTable('equip_assets', 'Equipment'));
+  await connection.query(createHardwareTable('mobile_assets', 'Mobile'));
+
+  await connection.query(`
+    CREATE TABLE sw_sub_assets (
+      id VARCHAR(50) PRIMARY KEY,
+      corp VARCHAR(100) COMMENT '구매법인',
+      category VARCHAR(100) COMMENT '분야',
+      dept VARCHAR(100) COMMENT '부서',
+      product_name VARCHAR(255) COMMENT '제품명',
+      license_type VARCHAR(100) COMMENT '라이선스 유형',
+      quantity INT COMMENT '수량',
+      price VARCHAR(100) COMMENT '금액',
+      purchase_date VARCHAR(50) COMMENT '구매일',
+      start_date VARCHAR(50) COMMENT '시작일',
+      expiry_date VARCHAR(50) COMMENT '만료일',
+      vendor VARCHAR(255) COMMENT '구매업체',
+      remarks TEXT COMMENT '비고',
+      created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+    ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
+  `);
+
+  await connection.query(`
+    CREATE TABLE sw_perm_assets (
+      id VARCHAR(50) PRIMARY KEY,
+      corp VARCHAR(100) COMMENT '구매법인',
+      category VARCHAR(100) COMMENT '분야',
+      dept VARCHAR(100) COMMENT '부서',
+      product_name VARCHAR(255) COMMENT '제품명',
+      license_key VARCHAR(255) COMMENT '라이선스 키',
+      quantity INT COMMENT '수량',
+      price VARCHAR(100) COMMENT '금액',
+      purchase_date VARCHAR(50) COMMENT '구매일',
+      start_date VARCHAR(50) COMMENT '시작일',
+      expiry_date VARCHAR(50) COMMENT '만료일',
+      vendor VARCHAR(255) COMMENT '구매업체',
+      remarks TEXT COMMENT '비고',
+      created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+    ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
+  `);
+
+  await connection.query(`
+    CREATE TABLE cloud_assets (
+      id VARCHAR(50) PRIMARY KEY,
+      platform_name VARCHAR(100),
+      corp VARCHAR(100),
+      dept VARCHAR(100),
+      product_name VARCHAR(255),
+      account_name VARCHAR(255),
+      pay_method VARCHAR(100),
+      pay_day VARCHAR(50),
+      card_num VARCHAR(100),
+      monthly_fee VARCHAR(100),
+      remarks TEXT,
+      created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+    ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
+  `);
+
+  await connection.query(`
+    CREATE TABLE sw_users (
+      id INT AUTO_INCREMENT PRIMARY KEY,
+      sw_id VARCHAR(50),
+      corp VARCHAR(100),
+      dept VARCHAR(100),
+      position VARCHAR(50),
+      user_name VARCHAR(100),
+      usage_period VARCHAR(100),
+      doc_name VARCHAR(255),
+      created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+    ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
+  `);
+
+  await connection.query(`
+    CREATE TABLE asset_logs (
+      id INT AUTO_INCREMENT PRIMARY KEY,
+      asset_id VARCHAR(50),
+      log_date VARCHAR(50),
+      log_user VARCHAR(100),
+      details TEXT,
+      cost DECIMAL(15,2) DEFAULT 0,
+      created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+    ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
+  `);
+
+  await connection.query(`
+    CREATE TABLE ops_domain_assets (
+      id VARCHAR(50) PRIMARY KEY,
+      type VARCHAR(50) COMMENT '유형',
+      corp VARCHAR(100) COMMENT '법인',
+      service_name VARCHAR(255) COMMENT '서비스명',
+      domain_name VARCHAR(255) COMMENT '관리도메인',
+      start_date VARCHAR(50) COMMENT '시작일',
+      expiry_date VARCHAR(50) COMMENT '만료일',
+      price VARCHAR(100) COMMENT '금액',
+      manager_main VARCHAR(100) COMMENT '담당자',
+      manager_sub VARCHAR(100) COMMENT '담당자(부)',
+      remarks TEXT COMMENT '비고',
+      created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+    ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
+  `);
+
+  console.log('✅ 모든 테이블이 영문 표준 스키마로 재생성되었습니다.');
+  await connection.end();
+}
+
+initDB().catch(err => {
+  console.error('❌ DB 초기화 실패:', err);
+  process.exit(1);
+});
--- a/doc_readme.md
+++ b/doc_readme.md
@@ -0,0 +1,729 @@
+# ITAM 도커라이징 실전 가이드
+
+## 1. 문서 목적
+
+이 문서는 Gitea에 올라가 있는 현재 저장소를 기준으로, 개발 PC에 WSL2와 Ubuntu만 설치되어 있는 상태에서 지금의 Docker 실행 구조를 재현하는 방법을 처음부터 끝까지 설명하는 실전 가이드다.
+
+이 문서는 아래 상황을 가정한다.
+
+1. 소스 코드는 아직 로컬에 없거나, Gitea에서 막 받아올 예정이다.
+2. Windows에는 WSL2와 Ubuntu는 설치되어 있다.
+3. 그 외 Docker 관련 세팅은 아직 안 되어 있을 수 있다.
+4. 최종 목표는 현재 저장소 기준 `frontend + backend + external DB` 구조를 Docker로 재현하는 것이다.
+
+이 문서의 목적은 아래 네 가지다.
+
+1. 현재 시스템 구조와 Docker 구조를 먼저 이해하게 한다.
+2. 기존 파일 중 무엇이 새로 추가되었고 무엇이 수정되었는지 정리한다.
+3. 각 단계별로 정확히 어디에서 명령을 실행해야 하는지 명시한다.
+4. Gitea 소스만 받은 상태에서 지금과 같은 Docker 실행 상태까지 도달하게 한다.
+
+---
+
+## 2. 현재 시스템 구조 개요
+
+## 2.1 애플리케이션 원래 구조
+
+현재 저장소의 본래 실행 구조는 다음과 같다.
+
+1. 프런트엔드: Vite 기반 TypeScript 앱
+2. 백엔드: Express 기반 Node.js API 서버
+3. 데이터베이스: 외부 MySQL 서버
+
+즉, 원래부터 MySQL이 Docker 안에 들어 있던 구조가 아니다.
+
+프런트와 백엔드는 각각 별도 프로세스로 실행되며, 프런트는 `/api` 상대 경로로 백엔드 API를 호출한다.
+
+---
+
+## 2.2 현재 Docker 구조
+
+현재 최종 Docker 구조는 아래와 같다.
+
+1. `frontend` 컨테이너
+2. `backend` 컨테이너
+3. 외부 MySQL DB
+
+즉, 지금은 내부 `db` 컨테이너가 없고, 내부 `db-bootstrap` 컨테이너도 없다.
+
+현재 구조를 문장으로 풀면 다음과 같다.
+
+1. 브라우저는 `http://localhost:8080`으로 `frontend` 컨테이너에 접속한다.
+2. `frontend`는 `/api` 요청을 `backend:3000`으로 프록시한다.
+3. `backend`는 `.env`에 적힌 외부 DB 정보로 외부 MySQL에 직접 접속한다.
+4. 조회 결과 JSON을 프런트가 받아 화면에 렌더링한다.
+
+간단한 흐름은 아래와 같다.
+
+```text
+Browser
+  -> frontend container :8080
+  -> Vite proxy (/api)
+  -> backend container :3000
+  -> external MySQL (.env)
+```
+
+---
+
+## 2.3 왜 이 구조가 맞는가
+
+현재 구조가 적절한 이유는 다음과 같다.
+
+1. 원래 시스템도 외부 MySQL을 쓰는 구조였다.
+2. 지금 목표는 운영형 단일 배포가 아니라 현재 개발형 구조를 Docker로 재현하는 것이다.
+3. 프런트는 Vite dev server 기반이라 운영형 nginx 정적 배포 구조로 억지로 바꾸는 것보다, 현 구조를 유지하는 편이 안전하다.
+4. 실무 표준 관점에서도 앱 컨테이너는 무상태로 유지하고, DB는 외부 인프라를 사용하는 구성이 더 일반적이다.
+
+---
+
+## 3. 이번 도커라이징에서 추가되거나 수정된 파일 정리
+
+아래 파일들은 이번 Docker 재현 구조를 위해 새로 추가되었거나 수정된 핵심 파일이다.
+
+## 3.1 새로 추가된 파일
+
+1. `Dockerfile.frontend`
+2. `Dockerfile.backend`
+3. `.dockerignore`
+4. `docker-compose.yaml`
+5. `start_docker_wsl.ps1`
+6. `stop_docker_wsl.ps1`
+7. `start_docker_wsl.bat`
+8. `stop_docker_wsl.bat`
+9. `docker/mysql/init/README.md`
+10. `docker_task_plan.md`
+11. `doc_readme2.md`
+
+---
+
+## 3.2 기존 파일 중 수정된 핵심 파일
+
+1. `server.js`
+2. `vite.config.ts`
+3. `doc_readme.md`
+
+---
+
+## 3.3 각 파일의 역할
+
+### `Dockerfile.frontend`
+
+역할:
+
+1. 프런트 Vite 개발 서버 이미지를 만든다.
+2. 컨테이너 내부에서 `npm run dev -- --host 0.0.0.0`를 실행한다.
+
+### `Dockerfile.backend`
+
+역할:
+
+1. 백엔드 Express 서버 이미지를 만든다.
+2. 컨테이너 내부에서 `npm run server`를 실행한다.
+
+### `.dockerignore`
+
+역할:
+
+1. `node_modules`, `build`, `.git`, `.env`, `uploads` 같은 불필요한 파일을 Docker build context에서 제외한다.
+
+### `docker-compose.yaml`
+
+역할:
+
+1. `frontend`, `backend` 두 컨테이너를 동시에 띄운다.
+2. `backend`는 `.env`의 외부 DB를 사용한다.
+3. `frontend`는 `backend:3000`으로 프록시한다.
+
+### `start_docker_wsl.ps1`
+
+역할:
+
+1. Windows 경로를 WSL 경로로 안전하게 바꾼다.
+2. WSL 내부 Docker를 사용해 `docker compose up --build -d`를 실행한다.
+3. 한글 경로와 공백 경로에서도 안정적으로 실행되게 한다.
+
+### `stop_docker_wsl.ps1`
+
+역할:
+
+1. 같은 방식으로 WSL 내부에서 `docker compose down`을 실행한다.
+
+### `start_docker_wsl.bat`, `stop_docker_wsl.bat`
+
+역할:
+
+1. PowerShell 스크립트를 쉽게 실행하는 래퍼 역할을 한다.
+
+### `server.js`
+
+중요 수정 사항:
+
+1. `dotenv.config({ override: true })`가 아니라 `dotenv.config()`를 사용한다.
+
+이유:
+
+1. Compose나 실행 환경이 주는 환경변수를 `.env`가 덮어써 버리면 안 된다.
+2. 외부 DB 정보와 포트 설정 등 실행 환경 우선 구조를 유지해야 한다.
+
+### `vite.config.ts`
+
+중요 수정 사항:
+
+1. 프록시 타깃을 고정 `localhost:3000`이 아니라 환경변수 기반으로 받도록 바꿨다.
+
+현재 구조:
+
+```ts
+const proxyTarget = process.env.VITE_DEV_PROXY_TARGET || 'http://localhost:3000';
+```
+
+이유:
+
+1. 로컬에서 직접 프런트를 띄울 때는 `localhost:3000`이 맞다.
+2. Docker 안에서는 `frontend` 컨테이너에서 보는 `localhost`가 백엔드가 아니므로 `backend:3000`을 써야 한다.
+
+---
+
+## 4. 현재 `docker-compose.yaml` 기준 실제 동작 구조
+
+현재 `docker-compose.yaml`은 아래 구조다.
+
+### `backend`
+
+1. `Dockerfile.backend`로 이미지를 빌드한다.
+2. `.env`를 읽는다.
+3. DB 관련 변수는 `${DB_HOST}`, `${DB_PORT}`, `${DB_USER}`, `${DB_PASS}`, `${DB_NAME}`를 그대로 사용한다.
+4. 포트 `3000:3000`으로 노출한다.
+5. `uploads`, `map_config.json`을 마운트한다.
+
+### `frontend`
+
+1. `Dockerfile.frontend`로 이미지를 빌드한다.
+2. `VITE_DEV_PROXY_TARGET: http://backend:3000` 환경변수를 사용한다.
+3. 포트 `8080:8080`으로 노출한다.
+4. 브라우저의 `/api` 요청을 `backend`로 프록시한다.
+
+즉, 현재 Compose는 DB를 띄우지 않고 앱 두 개만 띄운다.
+
+---
+
+## 5. 사전 준비 사항
+
+이 섹션은 Gitea에서 코드를 받기 전 또는 받은 직후에 확인해야 한다.
+
+## 5.1 가정하는 기본 상태
+
+이미 설치되어 있다고 가정하는 것:
+
+1. Windows
+2. WSL2
+3. Ubuntu 배포판
+
+아직 없을 수 있는 것:
+
+1. Docker Desktop 또는 WSL 내부 Docker 사용 환경
+2. Git 클라이언트
+3. 프로젝트 `.env`
+
+---
+
+## 5.2 권장 Docker 실행 방식
+
+현재 저장소 구조상 가장 권장하는 방식은 다음이다.
+
+1. Windows에 Docker Desktop 설치
+2. Docker Desktop에서 WSL2 통합 활성화
+3. Ubuntu WSL 내부에서 `docker` 명령을 사용할 수 있게 한다.
+
+이유:
+
+1. 현재 `start_docker_wsl.ps1`가 WSL 내부의 `docker`를 호출하는 구조다.
+2. 실제 검증도 WSL 내부 Docker 기준으로 이루어졌다.
+
+---
+
+## 5.3 외부 DB 정보 준비
+
+현재 구조는 외부 MySQL을 사용하므로 `.env` 파일이 반드시 필요하다.
+
+최소한 아래 값이 필요하다.
+
+```env
+DB_HOST=<외부 MySQL 호스트>
+DB_PORT=3306
+DB_USER=<외부 MySQL 계정>
+DB_PASS=<외부 MySQL 비밀번호>
+DB_NAME=itam
+```
+
+필요 시 추가 환경변수는 현재 백엔드 코드 기준으로 함께 넣을 수 있다.
+
+---
+
+## 6. Gitea에서 소스 받기
+
+## 6.1 작업 실행 위치
+
+이 단계는 **Windows PowerShell** 또는 **Windows 터미널의 PowerShell**에서 수행한다.
+
+실행 위치 이유:
+
+1. 이후 `start_docker_wsl.ps1`도 Windows PowerShell에서 실행하는 것이 가장 자연스럽다.
+2. 로컬 작업 폴더를 Windows 경로 기준으로 준비할 수 있다.
+
+---
+
+## 6.2 소스 클론
+
+예시:
+
+```powershell
+git clone <Gitea 저장소 URL>
+cd <클론된 저장소 경로>
+```
+
+현재 프로젝트처럼 한글 경로를 사용할 수도 있지만, 가능하면 너무 복잡한 경로는 피하는 것이 좋다.
+
+현재 실제 프로젝트 경로 예시는 아래였다.
+
+```text
+c:\Users\user\Desktop\안건 파일\itam
+```
+
+이 경로도 현재 스크립트로는 동작 가능하다.
+
+---
+
+## 7. Docker 환경 준비
+
+## 7.1 작업 실행 위치
+
+이 단계는 **Windows PowerShell**과 **WSL Ubuntu 터미널**을 둘 다 사용한다.
+
+1. 설치 확인은 Windows PowerShell에서 시작
+2. 실제 Docker 동작 확인은 WSL Ubuntu에서 수행
+
+---
+
+## 7.2 Docker Desktop 설치 여부 확인
+
+**실행 위치: Windows PowerShell**
+
+```powershell
+docker version
+```
+
+만약 여기서 바로 안 잡혀도 현재 프로젝트는 WSL 내부 Docker를 쓰므로, 다음 단계로 넘어가 WSL 내부 확인을 한다.
+
+---
+
+## 7.3 WSL 내부 Docker 확인
+
+**실행 위치: Windows PowerShell**
+
+```powershell
+wsl -l -v
+wsl sh -lc "docker --version"
+```
+
+정상 기대 결과:
+
+1. Ubuntu가 Running 상태
+2. `docker --version`이 정상 출력
+
+만약 `docker --version`이 실패하면, Docker Desktop 설치 및 WSL 통합을 먼저 완료해야 한다.
+
+---
+
+## 8. `.env` 파일 준비
+
+## 8.1 작업 실행 위치
+
+이 단계는 **Windows PowerShell**, **VS Code**, 또는 아무 텍스트 편집기**에서 수행한다.
+
+즉, 프로젝트 루트에 `.env` 파일을 만드는 작업이다.
+
+---
+
+## 8.2 `.env` 작성
+
+프로젝트 루트에 `.env`를 만든다.
+
+예시:
+
+```env
+DB_HOST=your-external-db-host
+DB_PORT=3306
+DB_USER=your-db-user
+DB_PASS=your-db-password
+DB_NAME=itam
+```
+
+주의:
+
+1. 현재 Compose는 내부 DB를 만들지 않는다.
+2. 따라서 이 값이 곧 실제 운영/개발 외부 DB 연결 정보다.
+3. 이 정보가 틀리면 `backend`는 기동해도 API에서 DB 오류가 난다.
+
+---
+
+## 9. 현재 Docker 파일이 어떻게 동작하는지 이해하기
+
+## 9.1 `Dockerfile.frontend`
+
+**확인 위치: 프로젝트 루트 / VS Code**
+
+현재 내용 핵심:
+
+```dockerfile
+FROM node:20-alpine
+WORKDIR /app
+COPY package*.json ./
+RUN npm ci
+COPY . .
+EXPOSE 8080
+CMD ["npm", "run", "dev", "--", "--host", "0.0.0.0"]
+```
+
+의미:
+
+1. Node 20 Alpine 기반
+2. 의존성 설치 후 전체 소스 복사
+3. Vite 개발 서버 실행
+
+---
+
+## 9.2 `Dockerfile.backend`
+
+**확인 위치: 프로젝트 루트 / VS Code**
+
+현재 내용 핵심:
+
+```dockerfile
+FROM node:20-alpine
+WORKDIR /app
+COPY package*.json ./
+RUN npm ci
+COPY . .
+EXPOSE 3000
+CMD ["npm", "run", "server"]
+```
+
+의미:
+
+1. Node 20 Alpine 기반
+2. Express 서버 실행
+
+---
+
+## 9.3 `vite.config.ts`
+
+**확인 위치: 프로젝트 루트 / VS Code**
+
+현재 핵심:
+
+```ts
+const proxyTarget = process.env.VITE_DEV_PROXY_TARGET || 'http://localhost:3000';
+```
+
+그리고 `/api`, `/uploads`가 모두 `proxyTarget`으로 프록시된다.
+
+의미:
+
+1. 로컬 실행 시 기본값은 `localhost:3000`
+2. Docker 실행 시 Compose가 `http://backend:3000`을 주입
+
+이 수정이 있어야 Docker 안에서도 화면에 데이터가 표시된다.
+
+---
+
+## 10. Docker Compose 기동
+
+## 10.1 작업 실행 위치
+
+이 단계는 반드시 **Windows PowerShell**에서 수행하는 것을 권장한다.
+
+이유:
+
+1. `start_docker_wsl.ps1`가 Windows 경로를 받아 WSL 경로로 바꾸는 구조다.
+2. 한글/공백 경로에서 가장 안전하다.
+
+---
+
+## 10.2 권장 기동 방법
+
+**실행 위치: 프로젝트 루트의 Windows PowerShell**
+
+```powershell
+.\start_docker_wsl.ps1
+```
+
+또는
+
+```powershell
+.\start_docker_wsl.bat
+```
+
+이 스크립트는 내부적으로 아래를 수행한다.
+
+1. PowerShell 출력 인코딩을 UTF-8로 설정
+2. 현재 Windows 경로를 WSL 경로로 변환
+3. WSL 동작 확인
+4. WSL 내부 Docker 동작 확인
+5. `docker compose up --build -d` 수행
+
+---
+
+## 10.3 직접 기동이 필요할 때
+
+**실행 위치: WSL Ubuntu 터미널**
+
+직접 실행 예시는 아래와 같다.
+
+```bash
+cd /mnt/c/Users/user/Desktop/안건\ 파일/itam
+docker compose up --build -d
+```
+
+하지만 현재 프로젝트는 한글 경로 이슈가 있었기 때문에, 특별한 이유가 없으면 `start_docker_wsl.ps1`를 우선 사용한다.
+
+---
+
+## 11. 컨테이너 기동 후 검증
+
+## 11.1 컨테이너 상태 확인
+
+**실행 위치: Windows PowerShell**
+
+```powershell
+wsl sh -lc "docker ps -a --format 'table {{.Names}}\t{{.Status}}' | grep itam"
+```
+
+정상 기대 상태:
+
+1. `itam-backend` -> `Up`
+2. `itam-frontend` -> `Up`
+
+현재는 `itam-db`, `itam-db-bootstrap`가 없어야 정상이다.
+
+---
+
+## 11.2 백엔드 API 확인
+
+**실행 위치: Windows PowerShell**
+
+```powershell
+Invoke-WebRequest -Uri http://localhost:3000/api/assets/master -UseBasicParsing | Select-Object -ExpandProperty StatusCode
+```
+
+정상 기대값:
+
+1. `200`
+
+이 검사는 `backend`가 외부 DB에 정상 연결됐는지 보는 가장 직접적인 검사다.
+
+---
+
+## 11.3 프런트 경유 API 확인
+
+**실행 위치: Windows PowerShell**
+
+```powershell
+Invoke-WebRequest -Uri http://localhost:8080/api/assets/master -UseBasicParsing | Select-Object -ExpandProperty StatusCode
+```
+
+정상 기대값:
+
+1. `200`
+
+이 검사는 프런트 프록시가 정상인지 확인한다.
+
+예전에 화면에 데이터가 안 보였던 것은 외부 DB 자체가 아니라, 이 프록시 경로가 잘못돼 있었기 때문이다.
+
+---
+
+## 11.4 브라우저 화면 확인
+
+**실행 위치: 브라우저**
+
+```text
+http://localhost:8080
+```
+
+확인 포인트:
+
+1. 화면이 열리는지
+2. 목록/대시보드/테이블 데이터가 비어 있지 않은지
+3. 모달 진입 시 데이터가 정상적으로 보이는지
+
+---
+
+## 12. 지금 데이터가 표시되는 원리
+
+현재는 내부 DB로 데이터를 옮겨 담지 않는다.
+
+현재 실제 동작 원리는 다음과 같다.
+
+1. 브라우저가 `frontend`에 접속한다.
+2. 프런트가 `/api/...`로 요청한다.
+3. Vite 프록시가 `backend:3000`으로 요청을 넘긴다.
+4. `backend`가 `.env`의 외부 MySQL에 직접 접속한다.
+5. 조회 결과 JSON을 프런트가 받아 화면에 렌더링한다.
+
+즉, 현재는 아래 구조다.
+
+```text
+Browser -> frontend -> backend -> external MySQL
+```
+
+예전 외부 DB 구조에서 화면에 데이터가 안 보였던 이유는 외부 DB 때문이 아니라, 프런트 컨테이너가 `localhost:3000`을 잘못 바라보고 있었기 때문이다.
+
+지금은 `VITE_DEV_PROXY_TARGET: http://backend:3000`으로 수정되어 있기 때문에 정상 표시된다.
+
+---
+
+## 13. 자주 헷갈리는 포인트
+
+## 13.1 현재는 내부 DB 컨테이너가 없다
+
+현재 `docker-compose.yaml`에는 아래가 없다.
+
+1. `db` 서비스
+2. `db-bootstrap` 서비스
+3. `itam_mysql_data` 볼륨
+
+즉, DB는 Docker 스택 밖에 있다.
+
+---
+
+## 13.2 현재는 `.env`가 곧 실제 DB 연결 정보다
+
+현재 `backend`는 아래처럼 Compose에서 그대로 받는다.
+
+1. `DB_HOST: ${DB_HOST}`
+2. `DB_PORT: ${DB_PORT}`
+3. `DB_USER: ${DB_USER}`
+4. `DB_PASS: ${DB_PASS}`
+5. `DB_NAME: ${DB_NAME}`
+
+즉, `.env`를 틀리게 적으면 화면도 데이터가 안 뜬다.
+
+---
+
+## 13.3 `server.js`는 여전히 중요하게 수정된 상태다
+
+현재 `server.js`는 `dotenv.config()`를 사용한다.
+
+이 구조는 이후 Compose나 실행 환경에서 변수를 주입할 때, 애플리케이션이 그 값을 받아들일 수 있게 하기 위해 유지해야 한다.
+
+---
+
+## 14. 스택 중지 방법
+
+## 14.1 작업 실행 위치
+
+**Windows PowerShell / 프로젝트 루트**
+
+---
+
+## 14.2 권장 종료 명령
+
+```powershell
+.\stop_docker_wsl.ps1
+```
+
+또는
+
+```powershell
+.\stop_docker_wsl.bat
+```
+
+이 스크립트는 내부적으로 WSL 경로 변환 후 `docker compose down`을 수행한다.
+
+---
+
+## 15. 장애 발생 시 점검 순서
+
+## 15.1 `frontend` 화면은 뜨는데 데이터가 없을 때
+
+**실행 위치: Windows PowerShell**
+
+먼저 아래 두 API를 분리해서 본다.
+
+```powershell
+Invoke-WebRequest -Uri http://localhost:3000/api/assets/master -UseBasicParsing | Select-Object -ExpandProperty StatusCode
+Invoke-WebRequest -Uri http://localhost:8080/api/assets/master -UseBasicParsing | Select-Object -ExpandProperty StatusCode
+```
+
+판단 기준:
+
+1. `3000`은 200이고 `8080`만 실패 -> 프런트 프록시 문제
+2. 둘 다 실패 -> 백엔드 또는 외부 DB 연결 문제
+
+---
+
+## 15.2 백엔드가 외부 DB에 연결되지 않을 때
+
+**실행 위치: Windows PowerShell**
+
+```powershell
+wsl sh -lc "docker logs --tail=200 itam-backend"
+```
+
+점검 항목:
+
+1. `.env`의 DB 정보가 정확한지
+2. 외부 DB 서버 접근이 가능한지
+3. 계정/비밀번호가 맞는지
+4. 방화벽 또는 네트워크 이슈가 없는지
+
+---
+
+## 15.3 프런트 프록시가 의심될 때
+
+**확인 위치: `vite.config.ts`, `docker-compose.yaml`**
+
+다음 두 설정이 유지되는지 확인한다.
+
+`vite.config.ts`
+
+```ts
+const proxyTarget = process.env.VITE_DEV_PROXY_TARGET || 'http://localhost:3000';
+```
+
+`docker-compose.yaml`
+
+```yaml
+VITE_DEV_PROXY_TARGET: http://backend:3000
+```
+
+이 둘 중 하나라도 바뀌면 Docker 안에서 화면 데이터가 다시 안 보일 수 있다.
+
+---
+
+## 16. 현재 기준 재현 절차 요약
+
+가장 짧게 정리하면 아래 순서다.
+
+1. Gitea에서 소스를 클론한다.
+2. Windows PowerShell에서 프로젝트 루트로 이동한다.
+3. `.env`에 외부 MySQL 정보를 작성한다.
+4. Docker Desktop + WSL 통합 또는 WSL 내부 Docker 사용 가능 상태를 만든다.
+5. `start_docker_wsl.ps1`를 실행한다.
+6. `http://localhost:3000/api/assets/master`가 200인지 확인한다.
+7. `http://localhost:8080/api/assets/master`가 200인지 확인한다.
+8. 브라우저에서 `http://localhost:8080`을 열어 실제 데이터 표시를 확인한다.
+
+---
+
+## 17. 현재 최종 결론
+
+현재 저장소의 도커라이징 구조는 실무 표준에 맞는 `무상태 앱 컨테이너 + 외부 DB` 구조다.
+
+현재 핵심은 아래 세 가지다.
+
+1. `backend`는 외부 MySQL에 직접 연결한다.
+2. `frontend`는 `backend:3000`으로 API 프록시한다.
+3. WSL 경로 변환 스크립트를 통해 Windows 한글 경로에서도 안정적으로 실행한다.
+
+즉, 이 문서대로 진행하면 Gitea 소스만 받은 상태에서 지금과 같은 Docker 실행 구조를 재현할 수 있다.
--- a/doc_readme2.md
+++ b/doc_readme2.md
@@ -0,0 +1,730 @@
+# ITAM 도커라이징 최종 재현 가이드
+
+## 1. 문서 목적
+
+이 문서는 현재 Git 저장소에 올라간 파일만 가지고, 지금과 동일한 수준으로 ITAM 시스템을 도커라이징하고 실행하는 절차를 처음부터 끝까지 정리한 최종 가이드다.
+
+이 문서만 읽어도 아래 목표를 달성할 수 있게 작성한다.
+
+1. 현재 저장소 구조를 이해한다.
+2. 왜 이렇게 도커라이징했는지 판단 근거를 안다.
+3. WSL2 기반으로 실제 스택을 기동한다.
+4. 외부 MySQL에서 내부 MySQL 컨테이너로 초기 데이터를 bootstrap 한다.
+5. 프런트 8080과 백엔드 3000이 모두 정상 동작하는지 검증한다.
+6. 재초기화, 재기동, 장애 확인까지 수행한다.
+
+이 문서는 최종 성공 구조 기준이다. 실패 기록은 `doc_readme.md`를 본다.
+
+---
+
+## 2. 최종 목표 구조
+
+현재 최종 구조는 아래 4개 서비스/역할로 나뉜다.
+
+1. `frontend`: Vite 개발 서버 컨테이너, 포트 8080
+2. `backend`: Express API 서버 컨테이너, 포트 3000
+3. `db`: MySQL 8 컨테이너, 포트 3306
+4. `db-bootstrap`: 외부 MySQL -> 내부 MySQL로 1회성 복제 수행 후 종료되는 도우미 컨테이너
+
+논리 흐름은 다음과 같다.
+
+```text
+브라우저 -> frontend:8080 -> Vite proxy -> backend:3000 -> db:3306
+                                      \
+                                       -> /uploads -> backend 정적 경로
+
+초기 1회 기동 시
+외부 MySQL(.env) -> db-bootstrap -> 내부 MySQL(db)
+```
+
+---
+
+## 3. 왜 이 구조를 선택했는가
+
+이 저장소는 처음부터 운영형 정적 배포 앱이 아니었다. 실제 구조는 다음과 같았다.
+
+1. 프런트는 Vite 개발 서버가 따로 돈다.
+2. 백엔드는 Express API가 따로 돈다.
+3. 프런트는 상대 경로 `/api`를 호출한다.
+4. 백엔드는 프런트의 `dist`를 서빙하지 않는다.
+
+따라서 내일 바로 시연 가능한 수준까지 빠르게 안정화하려면 아래 전략이 가장 맞다.
+
+1. 프런트를 Vite dev server 그대로 컨테이너화한다.
+2. 백엔드를 별도 컨테이너로 유지한다.
+3. DB는 MySQL 8 컨테이너로 묶되, 초기 데이터는 외부 DB에서 복제한다.
+4. 프런트 프록시는 컨테이너 네트워크 서비스명 `backend`로 붙게 한다.
+
+즉, 현재 구조는 "개발형 구조를 Docker로 재현한 시연/개발용 Compose"다.
+
+---
+
+## 4. 저장소 내 최종 관련 파일 목록
+
+현재 도커라이징과 직접 관련된 핵심 파일은 아래와 같다.
+
+1. `.dockerignore`
+2. `Dockerfile.frontend`
+3. `Dockerfile.backend`
+4. `docker-compose.yaml`
+5. `start_docker_wsl.ps1`
+6. `stop_docker_wsl.ps1`
+7. `start_docker_wsl.bat`
+8. `stop_docker_wsl.bat`
+9. `docker/mysql/init/README.md`
+10. `server.js`
+11. `vite.config.ts`
+
+각 파일 역할은 다음과 같다.
+
+### 4.1 `.dockerignore`
+
+Docker build context에서 제외할 파일을 정의한다.
+
+주요 제외 대상은 다음과 같다.
+
+1. `node_modules`
+2. `dist`
+3. `build`
+4. `.git`
+5. `.env`
+6. `uploads`
+7. `*.xlsx`
+8. `*.log`
+
+### 4.2 `Dockerfile.frontend`
+
+프런트 컨테이너 이미지 정의다.
+
+```dockerfile
+FROM node:20-alpine
+
+WORKDIR /app
+
+COPY package*.json ./
+RUN npm ci
+
+COPY . .
+
+EXPOSE 8080
+
+CMD ["npm", "run", "dev", "--", "--host", "0.0.0.0"]
+```
+
+이 이미지는 Vite dev server를 컨테이너에서 띄우기 위한 것이다.
+
+### 4.3 `Dockerfile.backend`
+
+백엔드 컨테이너 이미지 정의다.
+
+```dockerfile
+FROM node:20-alpine
+
+WORKDIR /app
+
+COPY package*.json ./
+RUN npm ci
+
+COPY . .
+
+EXPOSE 3000
+
+CMD ["npm", "run", "server"]
+```
+
+### 4.4 `docker-compose.yaml`
+
+전체 스택의 핵심 파일이다.
+
+현재 최종 구성은 다음 논리를 가진다.
+
+1. `db`는 MySQL 8 내부 DB다.
+2. `db-bootstrap`은 외부 DB 데이터를 내부 DB로 1회 복제한다.
+3. `backend`는 내부 `db`에 붙는다.
+4. `frontend`는 `backend` 서비스명으로 프록시한다.
+
+### 4.5 `start_docker_wsl.ps1`
+
+Windows에서 WSL 경유로 Docker Compose를 안전하게 기동하는 진입점이다.
+
+핵심은 다음 두 가지다.
+
+1. 프로젝트 Windows 경로를 `wslpath`로 WSL 경로로 바꾼다.
+2. 그 경로로 이동한 뒤 `docker compose up --build -d`를 수행한다.
+
+### 4.6 `stop_docker_wsl.ps1`
+
+같은 방식으로 WSL 내부에서 `docker compose down`을 수행해 스택을 안전하게 내린다.
+
+### 4.7 `start_docker_wsl.bat`, `stop_docker_wsl.bat`
+
+더블클릭 또는 간단 실행용 래퍼다. 내부적으로 PowerShell 스크립트를 호출한다.
+
+### 4.8 `server.js`
+
+중요 포인트는 다음 두 가지다.
+
+1. `dotenv.config();`를 사용한다.
+2. `dotenv.config({ override: true })`를 사용하지 않는다.
+
+이 차이로 Compose 환경변수 `DB_HOST=db`가 `.env`보다 우선하도록 보장한다.
+
+### 4.9 `vite.config.ts`
+
+현재 프록시는 환경변수 기반으로 동작한다.
+
+```ts
+const proxyTarget = process.env.VITE_DEV_PROXY_TARGET || 'http://localhost:3000';
+```
+
+로컬 PC에서 직접 Vite를 띄우면 기본값 `http://localhost:3000`을 쓴다.
+컨테이너에서는 Compose가 `http://backend:3000`을 주입한다.
+
+---
+
+## 5. 현재 최종 `docker-compose.yaml` 구조 설명
+
+아래는 실제 동작 관점에서 읽어야 할 핵심 내용이다.
+
+### 5.1 `db` 서비스
+
+역할:
+
+1. 내부 MySQL 데이터 저장소
+2. 앱이 최종적으로 붙는 DB
+
+핵심 설정:
+
+1. 이미지: `mysql:8.0`
+2. DB 이름: `itam`
+3. 앱 계정: `itam_admin`
+4. 데이터 볼륨: `itam_mysql_data`
+5. healthcheck 사용
+
+healthcheck는 `mysqladmin ping`으로 동작하며, `backend`와 `db-bootstrap`은 이 상태를 기다린다.
+
+### 5.2 `db-bootstrap` 서비스
+
+역할:
+
+1. 외부 원본 DB에서 내부 `db`로 초기 데이터 복제
+2. 1회성 작업 후 종료
+
+핵심 포인트:
+
+1. `.env`를 읽어 외부 DB 접속 정보를 가져온다.
+2. 내부 `db`에 `asset_core` 테이블이 이미 존재하면 아무 것도 하지 않고 종료한다.
+3. 그렇지 않으면 `mysqldump | mysql` 파이프라인으로 복제한다.
+4. `restart: "no"` 이므로 정상 종료 후 반복 실행하지 않는다.
+
+또한 source DB와 target DB 변수는 분리돼 있다.
+
+1. source: `SOURCE_DB_*`
+2. target: `TARGET_DB_*`
+
+이 구조로 외부 원본 DB 자격증명과 내부 컨테이너 DB 자격증명이 섞이지 않는다.
+
+### 5.3 `backend` 서비스
+
+역할:
+
+1. Express API 제공
+2. 내부 `db`에 연결
+3. `/uploads` 정적 제공
+
+핵심 포인트:
+
+1. `env_file: .env`를 유지하지만,
+2. Compose `environment`에서 `DB_HOST=db`, `DB_PORT=3306`, `DB_USER=itam_admin`, `DB_PASS=itam1234`, `DB_NAME=itam`를 다시 지정한다.
+3. `depends_on`은 `db` healthy와 `db-bootstrap` 성공 종료를 모두 기다린다.
+
+즉, 백엔드는 DB bootstrap이 끝난 뒤 시작한다.
+
+### 5.4 `frontend` 서비스
+
+역할:
+
+1. Vite dev server 제공
+2. 브라우저 요청 `/api`, `/uploads`를 `backend`로 프록시
+
+핵심 포인트:
+
+1. `VITE_DEV_PROXY_TARGET: http://backend:3000`
+2. `CHOKIDAR_USEPOLLING: "true"`
+3. `npm run dev -- --host 0.0.0.0`
+
+중요한 이유는 컨테이너 안의 `localhost`가 호스트의 `localhost`가 아니기 때문이다.
+
+---
+
+## 6. 사전 준비 조건
+
+이 저장소를 지금처럼 기동하려면 다음 전제가 필요하다.
+
+### 6.1 운영체제와 런타임
+
+1. Windows
+2. WSL2 Ubuntu 설치 및 실행 중
+3. Docker CLI가 WSL 내부에서 동작 가능
+
+권장 확인 명령:
+
+```powershell
+wsl -l -v
+wsl sh -lc "docker --version"
+```
+
+### 6.2 `.env` 파일
+
+현재 최종 구조는 "첫 기동 시 외부 DB에서 내부 DB로 bootstrap" 하는 방식이므로 `.env`가 반드시 필요하다.
+
+최소한 다음 값은 외부 원본 DB를 가리켜야 한다.
+
+```env
+DB_HOST=<external-mysql-host>
+DB_PORT=3306
+DB_USER=<external-db-user>
+DB_PASS=<external-db-password>
+DB_NAME=itam
+```
+
+주의:
+
+1. `.env`는 `db-bootstrap`이 외부 원본 DB에 접속할 때 사용한다.
+2. `backend`는 최종적으로 내부 `db` 컨테이너를 쓰므로, 런타임에서는 Compose `environment`가 우선한다.
+
+### 6.3 한글 경로 주의
+
+현재 프로젝트 경로는 한글과 공백을 포함한다.
+
+```text
+c:\Users\user\Desktop\안건 파일\itam
+```
+
+이 때문에 Docker 관련 명령은 수동으로 경로를 조립하지 말고, `start_docker_wsl.ps1` / `stop_docker_wsl.ps1`을 우선 사용해야 한다.
+
+---
+
+## 7. 첫 기동 절차
+
+이 절차는 "Git에서 소스를 받은 뒤 처음 올리는 경우" 기준이다.
+
+### 7.1 저장소 준비
+
+1. 저장소를 받는다.
+2. `.env`가 올바른 외부 원본 DB를 가리키는지 확인한다.
+3. WSL이 켜져 있는지 확인한다.
+
+### 7.2 권장 실행 방법
+
+Windows PowerShell에서 프로젝트 루트로 이동한 뒤 아래 중 하나를 사용한다.
+
+방법 A:
+
+```powershell
+.\start_docker_wsl.ps1
+```
+
+방법 B:
+
+```powershell
+.\start_docker_wsl.bat
+```
+
+### 7.3 내부 실행 순서
+
+스크립트는 내부적으로 다음 순서로 동작한다.
+
+1. 현재 Windows 경로를 WSL 경로로 변환한다.
+2. WSL 동작 여부를 확인한다.
+3. WSL 내부 Docker 사용 가능 여부를 확인한다.
+4. `docker compose up --build -d`를 수행한다.
+
+### 7.4 기대되는 컨테이너 순서
+
+정상이라면 다음 순서로 올라온다.
+
+1. `itam-db`
+2. `itam-db-bootstrap`
+3. `itam-backend`
+4. `itam-frontend`
+
+`itam-db-bootstrap`은 정상이라면 최종 상태가 `Exited (0)`이어야 한다.
+
+---
+
+## 8. 첫 기동 후 검증 절차
+
+기동 후에는 반드시 아래 검증을 수행한다.
+
+### 8.1 컨테이너 상태 확인
+
+```powershell
+wsl sh -lc "docker ps -a --format 'table {{.Names}}\t{{.Status}}' | grep itam"
+```
+
+정상 기대 상태:
+
+1. `itam-db` -> `Up ... (healthy)`
+2. `itam-db-bootstrap` -> `Exited (0)`
+3. `itam-backend` -> `Up`
+4. `itam-frontend` -> `Up`
+
+### 8.2 백엔드 API 직접 확인
+
+```powershell
+Invoke-WebRequest -Uri http://localhost:3000/api/assets/master -UseBasicParsing | Select-Object -ExpandProperty StatusCode
+```
+
+정상 기대값:
+
+1. `200`
+
+### 8.3 프런트 경유 API 확인
+
+```powershell
+Invoke-WebRequest -Uri http://localhost:8080/api/assets/master -UseBasicParsing | Select-Object -ExpandProperty StatusCode
+```
+
+정상 기대값:
+
+1. `200`
+
+### 8.4 데이터가 실제로 들어왔는지 확인
+
+```powershell
+wsl sh -lc "docker exec itam-db mysql -uitam_admin -pitam1234 -D itam -e 'SHOW TABLES' | head -n 20"
+```
+
+정상이라면 아래와 같은 테이블들이 보여야 한다.
+
+1. `asset_core`
+2. `asset_remote`
+3. `asset_spec`
+4. `asset_location`
+5. `asset_history`
+6. `asset_software_perpetual`
+7. `asset_software_subscription`
+8. `hardware_components_master`
+9. `job_spec_standards`
+
+### 8.5 브라우저 화면 확인
+
+브라우저에서 아래 주소를 연다.
+
+```text
+http://localhost:8080
+```
+
+목록/대시보드 데이터가 보이면 화면까지 정상 연결된 것이다.
+
+---
+
+## 9. 재기동 절차
+
+코드만 수정됐고 DB는 유지하고 싶다면 다음처럼 하면 된다.
+
+### 9.1 스택 종료
+
+```powershell
+.\stop_docker_wsl.ps1
+```
+
+또는
+
+```powershell
+.\stop_docker_wsl.bat
+```
+
+### 9.2 스택 재기동
+
+```powershell
+.\start_docker_wsl.ps1
+```
+
+이 경우 `itam_mysql_data` 볼륨이 유지되므로, `db-bootstrap`은 내부 DB에 `asset_core`가 이미 있음을 감지하고 빠르게 종료한다.
+
+---
+
+## 10. DB를 완전히 다시 초기화하는 절차
+
+외부 원본 DB에서 다시 처음부터 내부 DB를 복제하고 싶다면, MySQL 볼륨을 제거해야 한다.
+
+### 10.1 스택 중지
+
+```powershell
+.\stop_docker_wsl.ps1
+```
+
+### 10.2 MySQL 데이터 볼륨 삭제
+
+```powershell
+wsl sh -lc "docker volume rm -f itam_itam_mysql_data"
+```
+
+### 10.3 다시 시작
+
+```powershell
+.\start_docker_wsl.ps1
+```
+
+이때 `db-bootstrap`이 외부 DB에서 내부 DB로 전체를 다시 복제한다.
+
+---
+
+## 11. 현재 구조에서 꼭 알아야 할 설계 포인트
+
+### 11.1 `server.js`의 `dotenv.config()` 변경 이유
+
+백엔드가 내부 DB로 붙게 하려면 Compose가 준 환경변수가 `.env`보다 우선해야 한다.
+
+만약 아래처럼 `override: true`를 쓰면 안 된다.
+
+```js
+dotenv.config({ override: true });
+```
+
+이렇게 되면 내부 `db`가 아니라 `.env`의 외부 DB로 다시 붙을 수 있다.
+
+현재는 아래가 맞다.
+
+```js
+dotenv.config();
+```
+
+### 11.2 왜 `docker-entrypoint-initdb.d` 기반 dump 파일을 안 쓰는가
+
+처음에는 이 방식을 시도했지만, 실제 데이터의 긴 문자열/깨진 텍스트 때문에 import가 line 97에서 중단됐다.
+
+그래서 현재는 더 안정적인 아래 방식을 쓴다.
+
+1. 외부 DB에서 `mysqldump`
+2. 파이프로 내부 `db`에 즉시 `mysql` import
+
+즉, 파일 중간 생성물을 신뢰하지 않는 구조다.
+
+### 11.3 왜 프런트 프록시 타깃을 환경변수화했는가
+
+로컬 직접 실행과 컨테이너 실행의 네트워크 기준이 다르기 때문이다.
+
+1. 로컬 직접 실행: `localhost:3000`이 맞다.
+2. 컨테이너 내부 실행: `backend:3000`이 맞다.
+
+그래서 `vite.config.ts`는 둘 다 수용할 수 있게 작성됐다.
+
+---
+
+## 12. 문제 발생 시 진단 순서
+
+이 프로젝트에서는 문제를 아래 순서로 자르면 가장 빠르다.
+
+### 12.1 브라우저 화면에 데이터가 없을 때
+
+먼저 다음 둘을 분리해서 본다.
+
+1. `http://localhost:3000/api/assets/master`
+2. `http://localhost:8080/api/assets/master`
+
+판단 기준:
+
+1. `3000`은 200이고 `8080`만 실패면 프런트 프록시 문제다.
+2. 둘 다 실패면 백엔드 또는 DB 문제다.
+
+### 12.2 DB bootstrap이 성공했는지 확인할 때
+
+```powershell
+wsl sh -lc "docker ps -a --format 'table {{.Names}}\t{{.Status}}' | grep itam"
+```
+
+여기서 `itam-db-bootstrap`이 `Exited (0)`인지 본다.
+
+### 12.3 내부 DB에 실제 데이터가 있는지 확인할 때
+
+```powershell
+wsl sh -lc "docker exec itam-db mysql -uitam_admin -pitam1234 -D itam -e 'SHOW TABLES'"
+```
+
+### 12.4 백엔드 로그 확인
+
+```powershell
+wsl sh -lc "docker logs --tail=200 itam-backend"
+```
+
+### 12.5 DB 로그 확인
+
+```powershell
+wsl sh -lc "docker logs --tail=200 itam-db"
+```
+
+### 12.6 프런트 로그 확인
+
+```powershell
+wsl sh -lc "docker logs --tail=200 itam-frontend"
+```
+
+---
+
+## 13. 자주 나올 수 있는 장애와 해석
+
+### 13.1 `docker` 명령이 PowerShell에서 안 보임
+
+의미:
+
+1. Windows 셸이 아니라 WSL에서 Docker를 쓰는 환경이다.
+
+대응:
+
+1. `start_docker_wsl.ps1` 사용
+
+### 13.2 `asset_core` 테이블 없음
+
+의미:
+
+1. 내부 DB 초기화가 안 됐거나 bootstrap이 안 끝났다.
+
+대응:
+
+1. `db-bootstrap` 상태 확인
+2. `.env` 외부 DB 접속 정보 확인
+3. 필요하면 볼륨 삭제 후 재초기화
+
+### 13.3 `3000` API는 되는데 화면은 비어 있음
+
+의미:
+
+1. DB는 정상이고 프런트 프록시 또는 화면 렌더링 문제다.
+
+대응:
+
+1. `8080/api/assets/master` 상태 먼저 확인
+
+### 13.4 `db-bootstrap`가 실패 종료함
+
+의미 후보:
+
+1. `.env` 외부 DB 접속 정보 오류
+2. 외부 DB 네트워크 접근 불가
+3. 외부 계정 권한 문제
+
+대응:
+
+1. `docker logs itam-db-bootstrap` 확인
+
+---
+
+## 14. 현재 최종 검증 완료 상태
+
+이 저장소는 아래 상태까지 검증이 완료됐다.
+
+1. WSL2 Ubuntu에서 Docker 실행 가능
+2. `start_docker_wsl.ps1`로 전체 스택 기동 가능
+3. `db` 컨테이너 healthcheck 통과
+4. `db-bootstrap`가 외부 DB에서 내부 DB로 데이터 복제 후 `Exited (0)` 종료
+5. `backend`가 내부 `db`를 사용해 API 응답 가능
+6. `frontend`가 `backend`를 프록시해 8080 기준 화면/API 동작 가능
+7. 내부 MySQL에 실데이터 적재 확인
+
+즉, 현재 Git에 올라간 상태만으로도 WSL2와 외부 원본 DB 정보만 있으면 지금과 같은 수준의 Docker 실행 재현이 가능하다.
+
+---
+
+## 15. 현재 구조의 한계와 다음 단계
+
+현재 구조는 충분히 시연 가능하고 개발 재현도 가능하지만, 다음은 아직 별도 작업이 필요하다.
+
+1. 운영형 정적 배포 구조 전환
+2. 외부 DB 없이도 완전 독립 실행 가능한 정식 dump/backup 체계
+3. `.env.example` 정리
+4. DB bootstrap 전용 계정/권한 최소화
+5. 장기적으로 `map_config.json` 파일 저장 정책 정리
+
+하지만 "현재 저장소만으로 지금과 같은 Docker 실행 상태 재현"이라는 목표는 이미 충족한다.
+
+---
+
+## 16. 빠른 실행 요약
+
+가장 짧게 요약하면 다음 순서다.
+
+1. `.env`에 외부 원본 MySQL 접속 정보를 넣는다.
+2. WSL2 Ubuntu와 WSL 내부 Docker가 살아 있는지 확인한다.
+3. `start_docker_wsl.ps1`를 실행한다.
+4. `itam-db-bootstrap`가 `Exited (0)`인지 확인한다.
+5. `http://localhost:3000/api/assets/master`와 `http://localhost:8080/api/assets/master`가 모두 200인지 확인한다.
+6. 브라우저에서 `http://localhost:8080`을 열어 데이터가 보이는지 확인한다.
+
+이 순서대로 진행하면 현재 저장소 기준 Dockerized ITAM 시연 환경을 재현할 수 있다.
+
+---
+
+## 17. 2026-06-16 최신 정정
+
+이 문서의 상단 본문은 한동안 사용했던 `내부 db + db-bootstrap` 구조를 기준으로 작성됐다. 하지만 오늘 기준 현재 저장소의 실제 `docker-compose.yaml`은 다시 `무상태 앱 컨테이너 + 외부 DB` 구조로 되돌아가 있다.
+
+따라서 현재 시점의 정답 아키텍처는 아래다.
+
+1. `backend` 컨테이너
+2. `frontend` 컨테이너
+3. 외부 MySQL DB
+
+현재는 더 이상 아래 항목이 없다.
+
+1. `db` 서비스 없음
+2. `db-bootstrap` 서비스 없음
+3. `itam_mysql_data` 볼륨 없음
+
+### 17.1 현재 실제 `docker-compose.yaml` 기준 backend 동작
+
+현재 backend는 `.env`의 외부 DB 접속 정보를 그대로 사용한다.
+
+즉, 아래 환경변수 매핑이 현재 기준이다.
+
+1. `DB_HOST: ${DB_HOST}`
+2. `DB_PORT: ${DB_PORT}`
+3. `DB_USER: ${DB_USER}`
+4. `DB_PASS: ${DB_PASS}`
+5. `DB_NAME: ${DB_NAME}`
+
+`PORT: 3000`만 Compose에서 고정한다.
+
+### 17.2 현재 실제 기동 구조
+
+현재 스택 기동 순서는 단순하다.
+
+1. `backend` 기동
+2. `frontend` 기동
+3. backend는 외부 DB에 직접 접속
+4. frontend는 `http://backend:3000`으로 프록시
+
+즉, 현재는 DB 컨테이너 초기화 단계나 bootstrap 단계가 존재하지 않는다.
+
+### 17.3 현재 기준 첫 실행 체크리스트
+
+오늘 기준으로는 아래 순서가 맞다.
+
+1. `.env`에 외부 DB 접속 정보 입력
+2. `start_docker_wsl.ps1` 또는 `start_docker_wsl.bat` 실행
+3. `http://localhost:3000/api/assets/master`가 200인지 확인
+4. `http://localhost:8080/api/assets/master`가 200인지 확인
+5. 브라우저에서 `http://localhost:8080` 접속 후 데이터 표시 확인
+
+### 17.4 이 문서에서 현재 유효한 부분과 과거 이력 부분
+
+현재도 그대로 유효한 내용은 아래다.
+
+1. WSL2 기반 실행 방식
+2. `start_docker_wsl.ps1` / `stop_docker_wsl.ps1` 사용 방식
+3. `server.js`에서 Compose 환경변수가 `.env`보다 우선되도록 `dotenv.config()`를 유지해야 한다는 점
+4. `vite.config.ts`에서 프록시 타깃을 환경변수화해야 한다는 점
+
+현재는 과거 이력으로만 읽어야 하는 내용은 아래다.
+
+1. 내부 `db` 서비스 설명
+2. `db-bootstrap` 설명
+3. `itam_mysql_data` 볼륨 설명
+4. 내부 DB 재초기화 절차
+5. 내부 테이블 확인 절차
+
+### 17.5 현재 최종 한 줄 요약
+
+오늘 날짜 기준 현재 저장소의 실사용 Compose 구조는 `frontend + backend + external DB`이며, 이전의 내부 DB/bootstrap 구조는 역사적으로 한 번 사용했던 임시 해결책으로만 남아 있다.
--- a/docker-compose.yaml
+++ b/docker-compose.yaml
@@ -0,0 +1,48 @@
+services:
+  backend:
+    build:
+      context: .
+      dockerfile: Dockerfile.backend
+    container_name: itam-backend
+    working_dir: /app
+    env_file:
+      - .env
+    environment:
+      DB_HOST: ${DB_HOST}
+      DB_PORT: ${DB_PORT}
+      DB_USER: ${DB_USER}
+      DB_PASS: ${DB_PASS}
+      DB_NAME: ${DB_NAME}
+      PORT: 3000
+    ports:
+      - "3000:3000"
+    volumes:
+      - ./:/app
+      - backend_node_modules:/app/node_modules
+      - ./uploads:/app/uploads
+      - ./map_config.json:/app/map_config.json
+    command: npm run server
+    restart: unless-stopped
+
+  frontend:
+    build:
+      context: .
+      dockerfile: Dockerfile.frontend
+    container_name: itam-frontend
+    working_dir: /app
+    depends_on:
+      - backend
+    environment:
+      CHOKIDAR_USEPOLLING: "true"
+      VITE_DEV_PROXY_TARGET: http://backend:3000
+    ports:
+      - "8080:8080"
+    volumes:
+      - ./:/app
+      - frontend_node_modules:/app/node_modules
+    command: npm run dev -- --host 0.0.0.0
+    restart: unless-stopped
+
+volumes:
+  backend_node_modules:
+  frontend_node_modules:
--- a/docker/mysql/init/README.md
+++ b/docker/mysql/init/README.md
@@ -0,0 +1,16 @@
+# MySQL init directory
+
+This directory is kept as a legacy hook for file-based MySQL initialization.
+
+Current production path in this repository is not file-based import.
+The live Docker flow uses the `db-bootstrap` service in `docker-compose.yaml` to stream data from the external source DB into the internal `db` container.
+
+Use this directory only if you intentionally switch back to `docker-entrypoint-initdb.d` style initialization.
+
+If you do that, typical naming would be:
+
+- `01_schema.sql`
+- `02_seed.sql`
+- or a single `01_itam_dump.sql`
+
+Remember that files in this directory are executed automatically by the MySQL container only on the first initialization of the data volume.
--- a/docker_task_plan.md
+++ b/docker_task_plan.md
@@ -0,0 +1,330 @@
+# ITAM 도커라이징 작업 태스크 정리
+
+## 1. 문서 목적
+
+이 문서는 ITAM 자산관리 시스템의 도커라이징 작업을 실제 실행 단위로 쪼개서 정리한 태스크 문서다.
+
+이 문서의 목표는 아래와 같다.
+
+1. 내일까지 보여줄 시연 범위를 기준으로 우선순위를 정한다.
+2. 시연용 작업과 운영형 전환 작업을 분리한다.
+3. 개발 담당자가 바로 실행할 수 있는 체크리스트를 제공한다.
+
+관련 배경과 구조 분석은 [doc_readme.md](c:/Users/user/Desktop/안건%20파일/itam/doc_readme.md) 문서를 기준으로 한다.
+
+현재 구현/검증 상태:
+
+- `Dockerfile.frontend` 생성 완료
+- `Dockerfile.backend` 생성 완료
+- `docker-compose.yaml` 생성 완료
+- `.dockerignore` 생성 완료
+- WSL2 Ubuntu에서 `docker compose up --build -d` 검증 완료
+- frontend 8080 응답 확인 완료
+- backend `/api/assets/master` 응답 확인 완료
+- 현재 DB는 external MySQL 기준이며, DB 컨테이너 추가 작업은 다음 단계로 남아 있음
+
+## 2. 이번 작업의 최우선 목표
+
+이번 도커라이징의 1차 목표는 "운영 배포 완료"가 아니라 아래 상태를 재현하는 것이다.
+
+1. frontend 컨테이너가 정상 기동한다.
+2. backend 컨테이너가 정상 기동한다.
+3. backend가 기존 외부 MySQL 또는 MySQL 컨테이너에 정상 연결된다.
+4. 브라우저에서 화면이 열린다.
+5. 핵심 API 호출이 정상 동작한다.
+6. 업로드 저장 경로가 유지된다.
+7. 필요 시 DB까지 함께 포함된 재현 가능한 스택을 제공한다.
+
+## 3. 작업 범위 구분
+
+### 3.1 이번 시연 범위에 포함
+
+- Dockerfile.frontend 초안 작성
+- Dockerfile.backend 초안 작성
+- docker-compose.yaml 작성
+- `.dockerignore` 작성
+- MySQL 컨테이너 추가 설계
+- 초기 SQL dump 또는 init SQL 적재 방식 정의
+- `uploads` 볼륨 처리
+- `map_config.json` 영속성 처리 방식 반영
+- 컨테이너 기동 및 접속 확인
+- 핵심 API 및 화면 확인
+
+### 3.2 이번 시연 범위에서 제외
+
+- DB 전체 마이그레이션 자동화
+- nginx 기반 운영 배포 구조
+- 단일 이미지 운영 구조 전환
+- CI/CD 연계
+
+## 4. 선행 확인 태스크
+
+아래 태스크는 실제 Docker 파일 작성 전에 먼저 확인해야 한다.
+
+### Task 1. 외부 MySQL 접근 가능 여부 확인
+
+- 목적: 컨테이너에서 외부 DB 접속이 가능한지 확인
+- 확인 항목:
+  - DB_HOST 접근 가능 여부
+  - DB_PORT 3306 접속 가능 여부
+  - 계정 권한 정상 여부
+- 완료 기준:
+  - backend 컨테이너 기준 DB 연결 에러가 발생하지 않음
+
+### Task 2. 기준 스키마 상태 확인
+
+- 목적: 현재 앱이 요구하는 테이블 구조가 실제 DB와 맞는지 확인
+- 확인 항목:
+  - `asset_core`
+  - `asset_spec`
+  - `asset_location`
+  - `asset_remote`
+  - `asset_history`
+  - `hardware_components_master`
+  - `job_spec_standards`
+- 완료 기준:
+  - `/api/assets/master` 호출 시 쿼리 에러가 발생하지 않음
+
+### Task 3. 파일 영속성 대상 확인
+
+- 목적: 컨테이너 재시작 이후에도 유지되어야 할 파일/폴더 식별
+- 대상:
+  - `uploads`
+  - `map_config.json`
+- 완료 기준:
+  - 볼륨 설계 대상이 명확하게 문서화됨
+
+### Task 4. DB 기준 데이터 소스 확정
+
+- 목적: MySQL 컨테이너 최초 기동 시 어떤 데이터로 초기화할지 결정
+- 선택지:
+  - 기존 사내 DB에서 추출한 SQL dump 사용
+  - 정리된 스키마 SQL + seed SQL 사용
+  - 수동 import 절차 사용
+- 완료 기준:
+  - `docker/mysql/init` 기준 적재 전략 또는 수동 복원 절차가 확정됨
+
+## 5. 시연용 도커라이징 태스크
+
+### Task 5. 프런트 Dockerfile 작성
+
+- 목적: Vite 개발 서버를 컨테이너에서 구동
+- 작업 내용:
+  - Node 20 계열 이미지 사용
+  - `package*.json` 복사 후 `npm install`
+  - 8080 포트 노출
+  - `npm run dev -- --host 0.0.0.0` 실행
+- 산출물:
+  - `Dockerfile.frontend`
+- 완료 기준:
+  - 컨테이너에서 8080 포트가 정상 listen 상태가 됨
+
+### Task 6. 백엔드 Dockerfile 작성
+
+- 목적: Express API 서버를 컨테이너에서 구동
+- 작업 내용:
+  - Node 20 계열 이미지 사용
+  - `package*.json` 복사 후 `npm install`
+  - 3000 포트 노출
+  - `npm run server` 실행
+- 산출물:
+  - `Dockerfile.backend`
+- 완료 기준:
+  - 컨테이너에서 3000 포트가 정상 listen 상태가 됨
+
+### Task 7. MySQL Docker 구성 추가
+
+- 목적: DB까지 포함한 재현 가능한 스택 구성
+- 작업 내용:
+  - `mysql:8.0` 서비스 정의
+  - `MYSQL_DATABASE`, `MYSQL_USER`, `MYSQL_PASSWORD` 설정
+  - utf8mb4 문자셋 옵션 반영
+  - MySQL 데이터 volume 연결
+  - 초기 SQL 적재용 `docker/mysql/init` 디렉터리 설계
+- 산출물:
+  - `docker-compose.yaml` 내 `db` 서비스 또는 별도 DB compose 확장안
+- 완료 기준:
+  - MySQL 컨테이너가 정상 기동하고 3306 포트에서 응답 가능
+
+### Task 8. backend DB 연결 전환
+
+- 목적: backend가 external MySQL 대신 DB 컨테이너를 바라보도록 변경
+- 작업 내용:
+  - `DB_HOST`를 `db`로 전환
+  - 필요 시 `.env.docker` 또는 compose 내부 환경변수 사용
+  - backend `depends_on`에 db 추가
+- 산출물:
+  - DB 컨테이너용 backend 환경 정의
+- 완료 기준:
+  - backend 로그에서 DB 연결 성공 확인
+
+### Task 9. docker-compose.yaml 확장
+
+- 목적: frontend/backend를 함께 기동
+- 작업 내용:
+  - frontend 서비스 정의
+  - backend 서비스 정의
+  - db 서비스 정의
+  - 포트 매핑 추가
+  - `.env` 또는 docker 전용 환경변수 연결
+  - MySQL 데이터 볼륨 연결
+  - `uploads` 볼륨 연결
+  - `map_config.json` 처리 방식 반영
+- 산출물:
+  - `docker-compose.yaml`
+- 완료 기준:
+  - `docker compose up --build` 한 번으로 세 서비스가 모두 올라옴
+
+### Task 10. `.dockerignore` 작성
+
+- 목적: 불필요한 빌드 컨텍스트 제외
+- 제외 권장 항목:
+  - `node_modules`
+  - `dist`
+  - `build`
+  - `.git`
+  - `uploads`
+  - `*.xlsx`
+- 산출물:
+  - `.dockerignore`
+- 완료 기준:
+  - 이미지 빌드 컨텍스트가 과도하게 커지지 않음
+
+## 6. 시연 검증 태스크
+
+### Task 11. WSL 컨테이너 기동 검증
+
+- 실행 명령:
+
+```bash
+powershell -ExecutionPolicy Bypass -File .\start_docker_wsl.ps1
+```
+
+- 확인 항목:
+  - frontend 로그 에러 여부
+  - backend 로그 에러 여부
+  - db 로그 에러 여부
+  - backend와 db 연결 성공 여부
+- 완료 기준:
+  - 세 컨테이너 모두 종료 없이 유지됨
+
+### Task 12. 웹 접속 검증
+
+- 확인 항목:
+  - `http://localhost:8080` 접속 가능 여부
+  - 첫 화면 로딩 여부
+  - 콘솔 에러 여부
+- 완료 기준:
+  - 브라우저에서 초기 화면이 정상 표시됨
+
+### Task 13. API 검증
+
+- 확인 항목:
+  - `http://localhost:3000/api/assets/master`
+  - 프런트에서 `/api/assets/master` 호출 정상 여부
+- 완료 기준:
+  - 200 응답 또는 정상 데이터 응답 확인
+
+### Task 14. DB 초기 데이터 검증
+
+- 확인 항목:
+  - MySQL 컨테이너 내부에 목표 DB가 생성되었는지
+  - 기준 테이블이 존재하는지
+  - 샘플 데이터 또는 실데이터가 적재되었는지
+- 완료 기준:
+  - backend가 기대하는 최소 테이블과 데이터가 실제로 조회됨
+
+### Task 15. 업로드/파일 저장 검증
+
+- 확인 항목:
+  - `/api/upload` 호출 정상 여부
+  - 업로드 파일이 `uploads`에 실제 저장되는지
+  - `map_config.json` 수정 내용이 유지되는지
+- 완료 기준:
+  - 컨테이너 재시작 후에도 저장 데이터가 유지됨
+
+## 7. 시연 후 후속 태스크
+
+### Task 16. 운영형 프런트 배포 구조 전환
+
+- 목표: Vite dev server 대신 정적 빌드 기반 구조로 전환
+- 후보:
+  - nginx 정적 서빙
+  - Express 정적 서빙
+
+### Task 17. DB 초기화/마이그레이션 전략 통합
+
+- 목표: 기준 스키마와 실행 순서를 단일 정책으로 통일
+- 필요 작업:
+  - 기준 스키마 선정
+  - 초기화 스크립트 확정
+  - 마이그레이션 순서 정의
+
+### Task 18. `.env.example` 및 배포 환경 분리
+
+- 목표: 민감정보를 저장소에서 분리하고 배포별 설정 체계화
+
+### Task 19. 운영 볼륨 및 백업 전략 정리
+
+- 목표: 업로드 파일과 설정 파일, MySQL 데이터의 장기 보존 정책 정리
+
+### Task 20. DB 백업/복원 절차 문서화
+
+- 목표: 컨테이너 DB를 기준으로 dump/restore 절차를 문서화
+
+## 8. 우선순위 정리
+
+### P0: 내일까지 반드시 필요한 작업
+
+1. Task 1. 외부 MySQL 접근 가능 여부 확인
+2. Task 2. 기준 스키마 상태 확인
+3. Task 4. DB 기준 데이터 소스 확정
+4. Task 7. MySQL Docker 구성 추가
+5. Task 8. backend DB 연결 전환
+6. Task 9. docker-compose.yaml 확장
+7. Task 11. WSL 컨테이너 기동 검증
+8. Task 12. 웹 접속 검증
+9. Task 13. API 검증
+10. Task 14. DB 초기 데이터 검증
+
+### P1: 시연 안정화를 위해 권장되는 작업
+
+1. Task 3. 파일 영속성 대상 확인
+2. Task 10. `.dockerignore` 작성
+3. Task 15. 업로드/파일 저장 검증
+
+### P2: 시연 이후 진행할 작업
+
+1. Task 16. 운영형 프런트 배포 구조 전환
+2. Task 17. DB 초기화/마이그레이션 전략 통합
+3. Task 18. `.env.example` 및 배포 환경 분리
+4. Task 19. 운영 볼륨 및 백업 전략 정리
+5. Task 20. DB 백업/복원 절차 문서화
+
+## 9. 개발자용 최종 작업 순서 제안
+
+개발 담당자에게는 아래 순서로 진행하라고 전달하면 된다.
+
+1. 외부 DB 연결 가능 여부부터 확인
+2. 현재 DB 스키마가 앱 요구사항과 맞는지 확인
+3. DB 기준 dump 또는 init SQL 확보
+4. MySQL 컨테이너 구성 추가
+5. backend의 DB 연결 대상을 `db`로 전환
+6. WSL에서 `docker compose config` 확인
+7. WSL에서 컨테이너 기동 테스트
+8. 웹 접속 및 API 확인
+9. 업로드 및 파일 영속성 확인
+10. 시연 완료 후 운영형 구조로 분리 작업 진행
+
+## 10. 완료 판단 기준
+
+이번 도커라이징 1차 작업은 아래 조건을 만족하면 완료로 본다.
+
+1. `docker compose up --build`로 프런트, 백엔드, DB가 모두 기동한다.
+2. 브라우저에서 8080 화면이 열린다.
+3. `/api/assets/master`가 정상 응답한다.
+4. backend가 DB 컨테이너와 정상 연결된다.
+5. DB 초기 테이블과 데이터가 기대 상태로 적재된다.
+6. `uploads`, `map_config.json`, MySQL 데이터가 재시작 후에도 유지된다.
+
+이 문서는 실제 구현 작업의 체크리스트로 사용한다.
--- a/docs/plans/design_rule.md
+++ b/docs/plans/design_rule.md
@@ -1,48 +0,0 @@
-# 🎨 ITAM 시스템 디자인 가이드 (Design Guide)
-
-본 문서는 ITAM(IT Asset Management System)의 시각적 일관성과 사용자 경험을 유지하기 위한 핵심 디자인 원칙을 정의합니다.
-
---
-
-### 1. 디자인 철학 (Design Philosophy)
-*   **Minimalist & Stark**: Vercel 스타일의 극도로 간결하고 현대적인 디자인을 지향합니다.
-*   **Achromatic Base**: 블랙(#171717)과 화이트를 기본으로 하며, 정보의 구분은 얇은 헤어라인(#ebebeb)을 사용합니다.
-*   **Fluid & Responsive**: 고정된 픽셀 대신 화면 크기에 비례하여 UI 밀도가 변하는 유동적 스케일링 시스템을 적용합니다.
-
-### 2. 타이포그래피 및 자간 (Typography & Letter-spacing)
-*   **Font Family**: `Pretendard` 단일 폰트를 사용합니다.
-*   **Letter-spacing**: 모든 텍스트에 `-0.02em` (-2%) 자간을 적용하여 밀도 있는 가독성을 확보합니다.
-*   **Typography Scale**:
-    *   **XS**: `clamp(10px, 1.2vmin + 0.2vw, 15px)` - 보조 텍스트
-    *   **SM**: `clamp(12px, 1.4vmin + 0.3vw, 18px)` - 필터, 일반 라벨, 테이블 헤더
-    *   **Base**: `clamp(14px, 1.6vmin + 0.4vw, 22px)` - 본문, 테이블 데이터
-    *   **MD**: `clamp(18px, 2.5vmin + 0.5vw, 30px)` - 섹션 소제목
-    *   **LG**: `clamp(24px, 4vmin + 0.6vw, 48px)` - 페이지 대제목
-    *   **XL**: `clamp(32px, 6vmin + 0.8vw, 72px)` - 핵심 통계 지표
-*   **Layout Units**:
-    *   **Header Height**: `clamp(50px, 8vmin, 90px)`
-    *   **Base Spacing**: `clamp(0.75rem, 3vmin, 3rem)`
-    *   **Radius**: `clamp(6px, 1.5vmin, 16px)`
-
-### 3. 컬러 팔레트 (Vercel Stark Palette)
-*   **Primary**: `#171717` (Stark Black) - 텍스트, 주요 버튼, 강조 요소.
-*   **Secondary**: `#888888` (Mute) - 보조 텍스트, 비활성 아이콘.
-*   **Border**: `#ebebeb` (Hairline) - 정보 구분선.
-*   **Background**: `#ffffff` (Canvas), `#fafafa` (Soft), `#f5f5f5` (Soft 2).
-*   **Accents**: Blue(`#0070f3`), Orange(`#f5a623`), Danger(`#ee0000`).
-
-### 4. 컴포넌트 및 레이아웃 규칙 (Component Rules)
-*   **Header & Navigation**:
-    *   상단 1열 통합 바 형태를 유지하며, GNB와 LNB를 동일 라인에 배치하여 공간을 효율적으로 사용합니다.
-*   **Unified Filter Bar**:
-    *   검색창과 필터는 상단 타이틀 바로 아래(기존 액션 버튼 라인)까지 올려서 배치합니다.
-    *   **Action Group**: '자산 추가', '부품 마스터' 등의 주요 액션 버튼은 검색창과 같은 라인의 최우측에 정렬합니다.
-*   **Dashboard**:
-    *   **Single-Screen View**: 1920*1080(또는 1920*919) 해상도에서 스크롤 없이 한 화면에 핵심 정보가 모두 보이도록 최적화합니다.
-    *   **Fixed Charts**: 차트 내부 숫자나 요소에 애니메이션(`animation: false`) 및 플로팅 레이블을 배제하여 정적인 안정성을 확보합니다.
-*   **Footer**:
-    *   화면 최하단에 위치하며, 텍스트는 **우측 정렬(Right-aligned)**합니다.
-    *   상단에 1px 헤어라인 구분선을 가집니다.
-*   **Security & UX**:
-    *   **Text Selection**: 사용자의 실수에 의한 UI 드래그 방지를 위해 입력창(`input`, `textarea`)을 제외한 전체 영역의 텍스트 선택을 차단합니다.
-    *   **View Toggle**: '서버' 탭 등 특정 탭에서만 '목록보기' 체크박스를 통해 뷰를 전환하며, 그 외 화면은 리스트 중심의 UI를 제공합니다.
--- a/drop_legacy.js
+++ b/drop_legacy.js
@@ -0,0 +1,44 @@
+import mysql from 'mysql2/promise';
+import dotenv from 'dotenv';
+
+dotenv.config();
+
+const { DB_HOST, DB_USER, DB_PASS, DB_NAME, DB_PORT } = process.env;
+
+async function dropLegacyTables() {
+  const connection = await mysql.createConnection({
+    host: DB_HOST,
+    user: DB_USER,
+    password: DB_PASS,
+    database: DB_NAME,
+    port: parseInt(DB_PORT || '3306')
+  });
+
+  console.log('🧹 Starting cleanup of obsolete legacy backup tables...');
+
+  const tablesToDrop = [
+    'asset_pc', 'asset_pc_backup',
+    'asset_server', 'asset_server_backup',
+    'asset_storage', 'asset_storage_backup',
+    'asset_remote_backup', // IMPORTANT: DO NOT drop asset_remote!
+    'asset_equipment', 'asset_equipment_backup',
+    'asset_office_supplies', 'asset_office_supplies_backup',
+    'asset_survey', 'asset_survey_backup',
+    'asset_vip', 'asset_vip_backup',
+    'asset_pc_parts'
+  ];
+
+  for (const table of tablesToDrop) {
+    try {
+      await connection.query(`DROP TABLE IF EXISTS ${table}`);
+      console.log(`✅ Dropped table: ${table}`);
+    } catch (err) {
+      console.warn(`⚠️ Failed to drop table ${table}: ${err.message}`);
+    }
+  }
+
+  console.log('🎉 Cleanup complete. Database is now lean and mean.');
+  await connection.end();
+}
+
+dropLegacyTables().catch(console.error);
--- a/92.png
+++ b/92.png
--- a/public/img/location_photo/IDC/동관53.png
+++ b/public/img/location_photo/IDC/동관53.png
--- a/public/img/location_photo/IDC/동관54.png
+++ b/public/img/location_photo/IDC/동관54.png
--- a/img/location_photo/IDC/서관202.png
+++ b/img/location_photo/IDC/서관202.png
--- a/public/img/location_photo/IDC/서관203.png
+++ b/public/img/location_photo/IDC/서관203.png
--- a/public/img/location_photo/IDC/서관204.png
+++ b/public/img/location_photo/IDC/서관204.png
--- a/public/img/location_photo/IDC/서관205.png
+++ b/public/img/location_photo/IDC/서관205.png
--- a/public/img/location_photo/기술개발센터/서버실/서버실_1.png
+++ b/public/img/location_photo/기술개발센터/서버실/서버실_1.png
--- a/public/img/location_photo/기술개발센터/서버실/서버실_2.png
+++ b/public/img/location_photo/기술개발센터/서버실/서버실_2.png
--- a/public/img/location_photo/한맥빌딩/MDF실/MDF_1.png
+++ b/public/img/location_photo/한맥빌딩/MDF실/MDF_1.png
--- a/public/img/location_photo/한맥빌딩/MDF실/MDF_2.png
+++ b/public/img/location_photo/한맥빌딩/MDF실/MDF_2.png
--- a/public/img/location_photo/한맥빌딩/MDF실/MDF_3.png
+++ b/public/img/location_photo/한맥빌딩/MDF실/MDF_3.png
--- a/public/img/location_photo/한맥빌딩/MDF실/MDF_4.png
+++ b/public/img/location_photo/한맥빌딩/MDF실/MDF_4.png
--- a/docs/plans/implementation_plan.md
+++ b/docs/plans/implementation_plan.md
--- a/docs/plans/implementation_plan2
+++ b/docs/plans/implementation_plan2
--- a/docs/plans/implementation_plan3
+++ b/docs/plans/implementation_plan3
--- a/index.html
+++ b/index.html
@@ -5,9 +5,15 @@
  <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>
+  <title>ITAM 자산관리 ERP</title>
  <link rel="stylesheet"
    href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css" />
+  <link rel="stylesheet" href="/src/styles/common.css" />
+  <link rel="stylesheet" href="/src/styles/login.css" />
+  <link rel="stylesheet" href="/src/styles/guide.css" />
+  <link rel="stylesheet" href="/src/styles/modal.css" />
+  <link rel="stylesheet" href="/src/styles/dashboard.css" />
+  <link rel="stylesheet" href="/src/styles/table.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>
@@ -19,7 +25,7 @@
      <div class="header-container" id="nav-container">
        <div class="brand">
          <img src="/image 92.png" alt="Logo" class="main-logo" />
-          <h1>한맥자산관리시스템</h1>
+          <h1>자산관리시스템<span class="sub-title">(Digital Asset Control Hub System)</span></h1>
        </div>

        <!-- Navigation (GNB + LNB in same row) -->
@@ -51,7 +57,8 @@

    <!-- Footer -->
    <footer class="main-footer">
-      <p>&copy; 2026 BARON Consultant Co,Ltd. All rights reserved.</p>
+      <div id="secret-cloud-trigger" style="width: 20px; height: 20px; cursor: pointer; opacity: 0.1; background: #000; border-radius: 4px; position: absolute; left: 1rem;"></div>
+      <p>Powered by BARON Consultant Co,Ltd</p>
    </footer>
  </div>

--- 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
@@ -1,4 +0,0 @@
-[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
@@ -1,7 +0,0 @@
-자산번호 : 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
@@ -6,7 +6,7 @@
  <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">
+<body style="margin: 0; display: flex; height: 100vh; overflow: hidden; font-family: sans-serif;">

  <!-- Left: File Selector -->
  <div class="file-sidebar" id="file-sidebar">
@@ -22,7 +22,7 @@

  <!-- Right: Control Panel -->
  <div class="sidebar">
-    <h2>Map Editor <small class="editor-version">v3.0</small></h2>
+    <h2>Map Editor <small style="font-size: 0.6em; color: #888;">v3.0</small></h2>
    <div class="current-path" id="current-path">파일을 선택하세요</div>
    <p>
      드래그하여 구역을 정의하세요. 저장 버튼을 누르면 즉시 시스템에 반영됩니다.
@@ -31,8 +31,8 @@
    <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>
+      <button id="btn-clear-all" class="btn btn-outline" style="height:38px;">전체 삭제</button>
+      <button id="btn-save-server" class="btn btn-primary" style="height:38px;">서버에 즉시 저장</button>
      <div id="save-status"></div>
    </div>
  </div>
--- a/migrate_schema.js
+++ b/migrate_schema.js
@@ -0,0 +1,197 @@
+import mysql from 'mysql2/promise';
+import dotenv from 'dotenv';
+
+dotenv.config();
+
+const { DB_HOST, DB_USER, DB_PASS, DB_NAME, DB_PORT } = process.env;
+
+async function migrateSchema() {
+  const connection = await mysql.createConnection({
+    host: DB_HOST,
+    user: DB_USER,
+    password: DB_PASS,
+    database: DB_NAME,
+    port: parseInt(DB_PORT || '3306')
+  });
+
+  console.log('🚀 Phase 1: Creating Normalized Tables & Migrating Data...');
+
+  try {
+    await connection.query('SET FOREIGN_KEY_CHECKS = 0');
+
+    // --- 1. Drop existing new tables if they exist ---
+    await connection.query('DROP TABLE IF EXISTS asset_core, asset_hardware, asset_location, asset_remote');
+
+    // --- 2. Create New Schema ---
+    await connection.query(`
+      CREATE TABLE asset_core (
+        id VARCHAR(50) PRIMARY KEY,
+        asset_code VARCHAR(100) UNIQUE NOT NULL,
+        category VARCHAR(100),
+        asset_type VARCHAR(100),
+        asset_purpose VARCHAR(255),
+        service_type VARCHAR(50),
+        purchase_corp VARCHAR(100),
+        purchase_date VARCHAR(50),
+        purchase_amount VARCHAR(100),
+        purchase_vendor VARCHAR(255),
+        approval_document VARCHAR(255),
+        memo TEXT,
+        manager_primary VARCHAR(100),
+        manager_secondary VARCHAR(100),
+        current_dept VARCHAR(255),
+        previous_dept VARCHAR(255),
+        user_current VARCHAR(100),
+        previous_user VARCHAR(100),
+        emp_no VARCHAR(20),
+        user_position VARCHAR(50),
+        created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+        updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
+      ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
+    `);
+
+    await connection.query(`
+      CREATE TABLE asset_hardware (
+        id INT AUTO_INCREMENT PRIMARY KEY,
+        asset_id VARCHAR(50) NOT NULL,
+        hw_status VARCHAR(50),
+        model_name VARCHAR(255),
+        mainboard VARCHAR(255),
+        os VARCHAR(100),
+        cpu VARCHAR(255),
+        ram VARCHAR(100),
+        gpu VARCHAR(100),
+        storage1 VARCHAR(255),
+        storage2 VARCHAR(255),
+        storage3 VARCHAR(255),
+        monitoring VARCHAR(100),
+        price VARCHAR(100),
+        volume VARCHAR(100),
+        monitor_inch VARCHAR(50),
+        serial_num VARCHAR(100),
+        FOREIGN KEY (asset_id) REFERENCES asset_core(id) ON DELETE CASCADE
+      ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
+    `);
+
+    await connection.query(`
+      CREATE TABLE asset_location (
+        id INT AUTO_INCREMENT PRIMARY KEY,
+        asset_id VARCHAR(50) NOT NULL,
+        location VARCHAR(255),
+        location_detail VARCHAR(255),
+        location_photo VARCHAR(255),
+        loc_x VARCHAR(20),
+        loc_y VARCHAR(20),
+        is_active BOOLEAN DEFAULT TRUE,
+        created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+        FOREIGN KEY (asset_id) REFERENCES asset_core(id) ON DELETE CASCADE
+      ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
+    `);
+
+    await connection.query(`
+      CREATE TABLE asset_remote (
+        id INT AUTO_INCREMENT PRIMARY KEY,
+        asset_id VARCHAR(50) NOT NULL,
+        ip_address VARCHAR(100),
+        mac_address VARCHAR(100),
+        remote_tool VARCHAR(100),
+        remote_id VARCHAR(100),
+        remote_pw VARCHAR(100),
+        is_active BOOLEAN DEFAULT TRUE,
+        created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+        FOREIGN KEY (asset_id) REFERENCES asset_core(id) ON DELETE CASCADE
+      ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
+    `);
+
+    await connection.query('SET FOREIGN_KEY_CHECKS = 1');
+    console.log('✅ Normalized tables created.');
+
+    // --- 3. Migrate Data from Legacy Tables ---
+    const legacyTables = ['asset_pc', 'asset_server', 'asset_storage', 'asset_remote', 'asset_equipment', 'asset_office_supplies', 'asset_survey', 'asset_vip'];
+    
+    let totalMigrated = 0;
+
+    for (const table of legacyTables) {
+      try {
+        const [rows] = await connection.query(`SELECT * FROM ${table}`);
+        
+        for (const row of rows) {
+          // 3.1 Insert into asset_core
+          await connection.query(`
+            INSERT IGNORE INTO asset_core (
+              id, asset_code, category, asset_type, asset_purpose, service_type, purchase_corp, purchase_date, 
+              purchase_amount, purchase_vendor, approval_document, memo, manager_primary, manager_secondary, 
+              current_dept, previous_dept, user_current, previous_user, emp_no, user_position, created_at
+            ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
+          `, [
+            row.id, row.asset_code, row.category, row.asset_type, row.asset_purpose, row.service_type, 
+            row.purchase_corp, row.purchase_date, row.purchase_amount, row.purchase_vendor, row.approval_document, 
+            row.memo, row.manager_primary, row.manager_secondary, row.current_dept, row.previous_dept, 
+            row.user_current, row.previous_user, row.emp_no, row.user_position, row.created_at
+          ]);
+
+          // 3.2 Insert into asset_hardware (if hardware fields exist)
+          if (row.model_name || row.cpu || row.ram || row.hw_status) {
+              await connection.query(`
+                INSERT INTO asset_hardware (
+                  asset_id, hw_status, model_name, mainboard, os, cpu, ram, gpu, storage1, storage2, storage3, monitoring, price, volume, monitor_inch, serial_num
+                ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
+              `, [
+                row.id, row.hw_status, row.model_name, row.mainboard, row.os, row.cpu, row.ram, row.gpu, 
+                row.ssd_1 || row.hdd_1, row.ssd_2 || row.hdd_2, row.hdd_3, row.monitoring, row.price, 
+                row.volume, row.monitor_inch, row.serial_num
+              ]);
+          }
+
+          // 3.3 Insert into asset_location (if location fields exist)
+          if (row.location || row.location_detail) {
+              await connection.query(`
+                INSERT INTO asset_location (
+                  asset_id, location, location_detail, location_photo, loc_x, loc_y
+                ) VALUES (?, ?, ?, ?, ?, ?)
+              `, [
+                row.id, row.location, row.location_detail, row.location_photo, row.loc_x, row.loc_y
+              ]);
+          }
+
+          // 3.4 Insert into asset_remote (if network fields exist)
+          // Handle primary network interface
+          if (row.ip_address || row.mac_address || row.remote_tool) {
+              await connection.query(`
+                INSERT INTO asset_remote (
+                  asset_id, ip_address, mac_address, remote_tool, remote_id, remote_pw
+                ) VALUES (?, ?, ?, ?, ?, ?)
+              `, [
+                row.id, row.ip_address, row.mac_address, row.remote_tool, row.remote_id, row.remote_pw
+              ]);
+          }
+          
+          // Handle secondary network interface (e.g., from server table) if it exists
+          if (row.ip_address_2 || row.remote_tool_2) {
+              await connection.query(`
+                INSERT INTO asset_remote (
+                  asset_id, ip_address, remote_tool, remote_id, remote_pw
+                ) VALUES (?, ?, ?, ?, ?)
+              `, [
+                row.id, row.ip_address_2, row.remote_tool_2, row.remote_id_2, row.remote_pw_2
+              ]);
+          }
+
+          totalMigrated++;
+        }
+        console.log(`- Migrated ${rows.length} records from ${table}`);
+      } catch (err) {
+        console.warn(`- Skipping legacy table ${table}: ${err.message}`);
+      }
+    }
+
+    console.log(`✅ Phase 1 Data Migration Completed. Total Assets Migrated: ${totalMigrated}`);
+
+  } catch (err) {
+    console.error('❌ Migration Failed:', err);
+  } finally {
+    await connection.end();
+  }
+}
+
+migrateSchema();
--- a/migrate_v2_final.js
+++ b/migrate_v2_final.js
@@ -0,0 +1,212 @@
+import mysql from 'mysql2/promise';
+import dotenv from 'dotenv';
+
+dotenv.config();
+
+const { DB_HOST, DB_USER, DB_PASS, DB_NAME, DB_PORT } = process.env;
+
+async function migrateV2() {
+  const connection = await mysql.createConnection({
+    host: DB_HOST,
+    user: DB_USER,
+    password: DB_PASS,
+    database: DB_NAME,
+    port: parseInt(DB_PORT || '3306')
+  });
+
+  console.log('🚀 Phase 2: Final Migration to Normalized V2 Schema...');
+
+  try {
+    await connection.query('SET FOREIGN_KEY_CHECKS = 0');
+
+    // 1. Create/Enhance Core Tables
+    console.log('1. Creating/Enhancing Tables...');
+
+    await connection.query('DROP TABLE IF EXISTS asset_core, asset_hardware, asset_location, asset_remote');
+
+    await connection.query(`
+      CREATE TABLE asset_core (
+        id VARCHAR(50) PRIMARY KEY,
+        asset_code VARCHAR(100) UNIQUE NOT NULL,
+        category VARCHAR(100),
+        asset_type VARCHAR(100),
+        current_role VARCHAR(50) DEFAULT 'Normal' COMMENT 'Normal, Server, Personal, etc.',
+        asset_purpose VARCHAR(255),
+        service_type VARCHAR(50),
+        purchase_corp VARCHAR(100),
+        purchase_date VARCHAR(50),
+        purchase_amount VARCHAR(100),
+        purchase_vendor VARCHAR(255),
+        approval_document VARCHAR(255),
+        memo TEXT,
+        manager_primary VARCHAR(100),
+        manager_secondary VARCHAR(100),
+        current_dept VARCHAR(255),
+        previous_dept VARCHAR(255),
+        user_current VARCHAR(100),
+        previous_user VARCHAR(100),
+        emp_no VARCHAR(20),
+        user_position VARCHAR(50),
+        created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+        updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
+      ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
+    `);
+
+    await connection.query(`
+      CREATE TABLE asset_hardware (
+        id INT AUTO_INCREMENT PRIMARY KEY,
+        asset_id VARCHAR(50) NOT NULL,
+        hw_status VARCHAR(50),
+        model_name VARCHAR(255),
+        mainboard VARCHAR(255),
+        os VARCHAR(100),
+        cpu VARCHAR(255),
+        ram VARCHAR(100),
+        gpu VARCHAR(100),
+        storage1 VARCHAR(255),
+        storage2 VARCHAR(255),
+        storage3 VARCHAR(255),
+        storage4 VARCHAR(255),
+        monitoring VARCHAR(100),
+        price VARCHAR(100),
+        volume VARCHAR(100),
+        monitor_inch VARCHAR(50),
+        serial_num VARCHAR(100),
+        FOREIGN KEY (asset_id) REFERENCES asset_core(id) ON DELETE CASCADE
+      ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
+    `);
+
+    await connection.query(`
+      CREATE TABLE asset_location (
+        id INT AUTO_INCREMENT PRIMARY KEY,
+        asset_id VARCHAR(50) NOT NULL,
+        location VARCHAR(255),
+        location_detail VARCHAR(255),
+        location_photo VARCHAR(255),
+        loc_x VARCHAR(20),
+        loc_y VARCHAR(20),
+        is_active TINYINT(1) DEFAULT 1,
+        deactivated_at DATETIME NULL,
+        created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+        FOREIGN KEY (asset_id) REFERENCES asset_core(id) ON DELETE CASCADE
+      ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
+    `);
+
+    await connection.query(`
+      CREATE TABLE asset_remote (
+        id INT AUTO_INCREMENT PRIMARY KEY,
+        asset_id VARCHAR(50) NOT NULL,
+        ip_address VARCHAR(100),
+        mac_address VARCHAR(100),
+        remote_tool VARCHAR(100),
+        remote_id VARCHAR(100),
+        remote_pw VARCHAR(100),
+        is_active TINYINT(1) DEFAULT 1,
+        deactivated_at DATETIME NULL,
+        created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+        FOREIGN KEY (asset_id) REFERENCES asset_core(id) ON DELETE CASCADE
+      ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
+    `);
+
+    console.log('✅ V2 Schema tables created.');
+
+    // 2. Migration Logic
+    const legacyTables = [
+      { name: 'asset_pc', defaultRole: 'Personal' },
+      { name: 'asset_server', defaultRole: 'Server' },
+      { name: 'asset_storage', defaultRole: 'Normal' },
+      { name: 'asset_equipment', defaultRole: 'Normal' },
+      { name: 'asset_office_supplies', defaultRole: 'Normal' },
+      { name: 'asset_survey', defaultRole: 'Normal' },
+      { name: 'asset_vip', defaultRole: 'Normal' },
+      { name: 'asset_pc_parts', defaultRole: 'Normal' }
+    ];
+
+    let totalMigrated = 0;
+
+    for (const tableInfo of legacyTables) {
+      const table = tableInfo.name;
+      try {
+        const [rows] = await connection.query(`SELECT * FROM ${table}`);
+        console.log(`- Migrating ${rows.length} records from ${table}...`);
+
+        for (const row of rows) {
+          // 2.1 Insert into asset_core
+          const role = (table === 'asset_pc' && row.asset_type === '서버PC') ? 'Server' : tableInfo.defaultRole;
+          
+          await connection.query(`
+            INSERT IGNORE INTO asset_core (
+              id, asset_code, category, asset_type, current_role, asset_purpose, service_type, purchase_corp, purchase_date, 
+              purchase_amount, purchase_vendor, approval_document, memo, manager_primary, manager_secondary, 
+              current_dept, previous_dept, user_current, previous_user, emp_no, user_position, created_at
+            ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
+          `, [
+            row.id, row.asset_code, row.category, row.asset_type, role, row.asset_purpose, row.service_type, 
+            row.purchase_corp, row.purchase_date, row.purchase_amount, row.purchase_vendor, row.approval_document, 
+            row.memo, row.manager_primary, row.manager_secondary, row.current_dept, row.previous_dept, 
+            row.user_current || row.current_user, row.previous_user, row.emp_no, row.user_position, row.created_at
+          ]);
+
+          // 2.2 Insert into asset_hardware
+          await connection.query(`
+            INSERT INTO asset_hardware (
+              asset_id, hw_status, model_name, mainboard, os, cpu, ram, gpu, storage1, storage2, storage3, storage4, monitoring, price, volume, monitor_inch, serial_num
+            ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
+          `, [
+            row.id, row.hw_status, row.model_name, row.mainboard, row.os, row.cpu, row.ram, row.gpu, 
+            row.ssd_1 || row.storage1, row.ssd_2 || row.storage2, row.hdd_1 || row.storage3, row.hdd_2, row.monitoring, row.price, 
+            row.volume, row.monitor_inch, row.serial_num
+          ]);
+
+          // 2.3 Insert into asset_location
+          if (row.location || row.location_detail) {
+              await connection.query(`
+                INSERT INTO asset_location (
+                  asset_id, location, location_detail, location_photo, loc_x, loc_y, is_active
+                ) VALUES (?, ?, ?, ?, ?, ?, 1)
+              `, [
+                row.id, row.location, row.location_detail, row.location_photo, row.loc_x, row.loc_y
+              ]);
+          }
+
+          // 2.4 Insert into asset_remote
+          // Primary Network
+          if (row.ip_address || row.mac_address || row.remote_tool) {
+              await connection.query(`
+                INSERT INTO asset_remote (
+                  asset_id, ip_address, mac_address, remote_tool, remote_id, remote_pw, is_active
+                ) VALUES (?, ?, ?, ?, ?, ?, 1)
+              `, [
+                row.id, row.ip_address, row.mac_address, row.remote_tool, row.remote_id, row.remote_pw
+              ]);
+          }
+          
+          // Secondary Network (for servers)
+          if (row.ip_address_2 || row.remote_tool_2) {
+              await connection.query(`
+                INSERT INTO asset_remote (
+                  asset_id, ip_address, remote_tool, remote_id, remote_pw, is_active
+                ) VALUES (?, ?, ?, ?, ?, 1)
+              `, [
+                row.id, row.ip_address_2, row.remote_tool_2, row.remote_id_2, row.remote_pw_2
+              ]);
+          }
+
+          totalMigrated++;
+        }
+      } catch (err) {
+        console.warn(`- Skipping table ${table}: ${err.message}`);
+      }
+    }
+
+    await connection.query('SET FOREIGN_KEY_CHECKS = 1');
+    console.log(`✅ Phase 2 Data Migration Completed. Total Assets Migrated: ${totalMigrated}`);
+
+  } catch (err) {
+    console.error('❌ Migration Failed:', err);
+  } finally {
+    await connection.end();
+  }
+}
+
+migrateV2();
--- a/migrate_v4_network.js
+++ b/migrate_v4_network.js
@@ -0,0 +1,73 @@
+import mysql from 'mysql2/promise';
+import dotenv from 'dotenv';
+
+dotenv.config();
+
+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: parseInt(process.env.DB_PORT || '3306'),
+});
+
+async function migrate() {
+    const conn = await pool.getConnection();
+    try {
+        console.log('1. Creating asset_remote_v4 table...');
+        await conn.query(`
+            CREATE TABLE IF NOT EXISTS asset_remote_v4 (
+                id INT AUTO_INCREMENT PRIMARY KEY,
+                asset_id VARCHAR(50) NOT NULL,
+                net_type VARCHAR(20) NOT NULL, /* 'IP' or 'REMOTE' */
+                net_name VARCHAR(100), /* e.g., '기본망', 'AnyDesk' */
+                net_value1 VARCHAR(100), /* IP or ID */
+                net_value2 VARCHAR(100), /* MAC or PW */
+                is_active TINYINT(1) DEFAULT 1,
+                deactivated_at DATETIME NULL,
+                created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+                FOREIGN KEY (asset_id) REFERENCES asset_core(id) ON DELETE CASCADE
+            ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
+        `);
+
+        console.log('2. Migrating data from asset_remote...');
+        const [oldRows] = await conn.query('SELECT * FROM asset_remote WHERE is_active = 1');
+        
+        let ipCount = 0;
+        let remoteCount = 0;
+
+        for (const row of oldRows) {
+            // Migrating IP/MAC
+            if (row.ip_address || row.mac_address) {
+                await conn.query(
+                    'INSERT INTO asset_remote_v4 (asset_id, net_type, net_name, net_value1, net_value2, created_at) VALUES (?, ?, ?, ?, ?, ?)',
+                    [row.asset_id, 'IP', '기본망', row.ip_address, row.mac_address, row.created_at]
+                );
+                ipCount++;
+            }
+            // Migrating Remote
+            if (row.remote_tool || row.remote_id || row.remote_pw) {
+                await conn.query(
+                    'INSERT INTO asset_remote_v4 (asset_id, net_type, net_name, net_value1, net_value2, created_at) VALUES (?, ?, ?, ?, ?, ?)',
+                    [row.asset_id, 'REMOTE', row.remote_tool, row.remote_id, row.remote_pw, row.created_at]
+                );
+                remoteCount++;
+            }
+        }
+        
+        console.log(`Migrated ${ipCount} IP records and ${remoteCount} Remote records.`);
+
+        console.log('3. Renaming tables...');
+        await conn.query('DROP TABLE IF EXISTS asset_remote_legacy');
+        await conn.query('RENAME TABLE asset_remote TO asset_remote_legacy, asset_remote_v4 TO asset_remote;');
+
+        console.log('✅ Migration V4 (Remote) Complete.');
+    } catch (e) {
+        console.error('Migration failed:', e);
+    } finally {
+        conn.release();
+        pool.end();
+    }
+}
+
+migrate();
--- a/migrate_v5_rename_remote.js
+++ b/migrate_v5_rename_remote.js
@@ -0,0 +1,28 @@
+import mysql from 'mysql2/promise';
+import dotenv from 'dotenv';
+
+dotenv.config();
+
+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: parseInt(process.env.DB_PORT || '3306'),
+});
+
+async function migrate() {
+    const conn = await pool.getConnection();
+    try {
+        console.log('1. Renaming asset_network to asset_remote...');
+        await conn.query('RENAME TABLE asset_network TO asset_remote');
+        console.log('✅ Table renamed successfully.');
+    } catch (e) {
+        console.error('Migration failed:', e);
+    } finally {
+        conn.release();
+        pool.end();
+    }
+}
+
+migrate();
--- a/migrate_v6_parts_master.js
+++ b/migrate_v6_parts_master.js
@@ -0,0 +1,195 @@
+import mysql from 'mysql2/promise';
+import dotenv from 'dotenv';
+
+dotenv.config({ override: true });
+
+const { DB_HOST, DB_USER, DB_PASS, DB_NAME, DB_PORT } = process.env;
+
+// 기존의 감점 계산 로직을 그대로 이용해 등급과 감점점수를 도출하는 헬퍼 함수
+function parseCpu(cpu) {
+  if (!cpu) return { tier: '기타', deduction: 30 };
+  const cpuUpper = cpu.toUpperCase().trim();
+  if (cpuUpper === '-' || cpuUpper === '') return { tier: '기타', deduction: 30 };
+
+  let tier = '기타';
+  let deduction = 30;
+
+  if (cpuUpper.includes('I9') || cpuUpper.includes('RYZEN 9') || cpuUpper.includes('RYZEN9')) {
+    tier = 'i9 / Ryzen 9';
+    deduction = 0;
+  } else if (cpuUpper.includes('I7') || cpuUpper.includes('RYZEN 7') || cpuUpper.includes('RYZEN7')) {
+    tier = 'i7 / Ryzen 7';
+    deduction = 5;
+  } else if (cpuUpper.includes('I5') || cpuUpper.includes('RYZEN 5') || cpuUpper.includes('RYZEN5')) {
+    tier = 'i5 / Ryzen 5';
+    deduction = 15;
+  } else if (cpuUpper.includes('I3') || cpuUpper.includes('RYZEN 3') || cpuUpper.includes('RYZEN3')) {
+    tier = 'i3 / Ryzen 3';
+    deduction = 25;
+  }
+
+  // CPU 세대 감점 계산 (최대 -15점)
+  let genDeduction = 0;
+  const intelMatch = cpuUpper.match(/I\d-?(\d+)/);
+  let gen = 0;
+  if (intelMatch && intelMatch[1]) {
+    const numStr = intelMatch[1];
+    if (numStr.length === 5) gen = parseInt(numStr.substring(0, 2), 10);
+    else if (numStr.length === 4) gen = parseInt(numStr.substring(0, 1), 10);
+  }
+
+  const amdMatch = cpuUpper.match(/RYZEN\s?\d\s?-?(\d+)/);
+  let amdGen = 0;
+  if (amdMatch && amdMatch[1] && !intelMatch) {
+    const numStr = amdMatch[1];
+    if (numStr.length === 4) amdGen = parseInt(numStr.substring(0, 1), 10);
+  }
+
+  if (intelMatch) {
+    if (gen >= 12) genDeduction = 0;
+    else if (gen >= 10) genDeduction = 5;
+    else if (gen >= 8) genDeduction = 10;
+    else genDeduction = 15;
+  } else if (amdMatch) {
+    if (amdGen >= 5) genDeduction = 0;
+    else if (amdGen >= 3) genDeduction = 5;
+    else genDeduction = 10;
+  } else {
+    genDeduction = 15;
+  }
+
+  // 최종 등급 감점 + 세대 감점 합산
+  return { tier, deduction: deduction + genDeduction };
+}
+
+function parseGpu(gpu) {
+  if (!gpu) return { tier: 'C', deduction: 25 };
+  const gpuUpper = gpu.toUpperCase().trim();
+  if (gpuUpper === '-' || gpuUpper === '') return { tier: 'C', deduction: 25 };
+
+  if (
+    gpuUpper.includes('RTX 4090') || gpuUpper.includes('RTX 4080') || gpuUpper.includes('RTX 4070') ||
+    gpuUpper.includes('RTX A5000') || gpuUpper.includes('RTX A6000') || gpuUpper.includes('RTX A4000')
+  ) {
+    return { tier: 'S', deduction: 0 };
+  } else if (
+    gpuUpper.includes('RTX 3070') || gpuUpper.includes('RTX 3060') || gpuUpper.includes('RTX 2060') ||
+    gpuUpper.includes('RTX A2000') || gpuUpper.includes('RTX A3000') || gpuUpper.includes('QUADRO')
+  ) {
+    return { tier: 'A', deduction: 5 };
+  } else if (
+    gpuUpper.includes('GTX 1660') || gpuUpper.includes('GTX 1080') || gpuUpper.includes('GTX 1070') ||
+    gpuUpper.includes('GTX 1060') || gpuUpper.includes('RX 6700') || gpuUpper.includes('RX 6600')
+  ) {
+    return { tier: 'B', deduction: 15 };
+  } else {
+    return { tier: 'C', deduction: 25 };
+  }
+}
+
+function parseRam(ram) {
+  if (!ram) return { tier: '부족', deduction: 25 };
+  const ramUpper = ram.toUpperCase().trim();
+  if (ramUpper === '-' || ramUpper === '') return { tier: '부족', deduction: 25 };
+
+  const ramMatch = ramUpper.match(/(\d+)\s*GB/);
+  if (ramMatch && ramMatch[1]) {
+    const ramVal = parseInt(ramMatch[1], 10);
+    if (ramVal >= 32) return { tier: '최적', deduction: 0 };
+    else if (ramVal >= 16) return { tier: '보통', deduction: 10 };
+    else if (ramVal >= 8) return { tier: '주의', deduction: 20 };
+  }
+  return { tier: '부족', deduction: 25 };
+}
+
+async function runMigration() {
+  console.log('🔄 DB 커넥션 연결 중...');
+  const connection = await mysql.createConnection({
+    host: DB_HOST,
+    user: DB_USER,
+    password: DB_PASS,
+    database: DB_NAME,
+    port: parseInt(DB_PORT || '3306')
+  });
+
+  try {
+    console.log('⚙️ 1. hardware_components_master 테이블 생성...');
+    await connection.query('DROP TABLE IF EXISTS hardware_components_master');
+    await connection.query(`
+      CREATE TABLE hardware_components_master (
+        id INT AUTO_INCREMENT PRIMARY KEY,
+        category VARCHAR(50) NOT NULL COMMENT 'CPU, GPU, RAM 등',
+        component_name VARCHAR(255) NOT NULL UNIQUE COMMENT '부품 표준 명칭',
+        score_tier VARCHAR(50) COMMENT '성능 등급',
+        deduction INT DEFAULT 0 COMMENT '감점 점수',
+        created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+      ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
+    `);
+    console.log('✅ 테이블 생성 완료.');
+
+    console.log('🔍 2. 기존 asset_spec 테이블에서 부품명 조회...');
+    const [specRows] = await connection.query('SELECT DISTINCT cpu, ram, gpu FROM asset_spec');
+    
+    const uniqueCpus = new Set();
+    const uniqueGpus = new Set();
+    const uniqueRams = new Set();
+
+    specRows.forEach(row => {
+      if (row.cpu && row.cpu.trim() !== '-' && row.cpu.trim() !== '') uniqueCpus.add(row.cpu.trim());
+      if (row.gpu && row.gpu.trim() !== '-' && row.gpu.trim() !== '') uniqueGpus.add(row.gpu.trim());
+      if (row.ram && row.ram.trim() !== '-' && row.ram.trim() !== '') uniqueRams.add(row.ram.trim());
+    });
+
+    // 만약 데이터가 너무 비어있을 경우를 대비하여 기본 대표 부품 몇 개 추가
+    if (uniqueCpus.size === 0) {
+      ['Intel Core i9-13900K', 'Intel Core i7-14700K', 'Intel Core i5-12400', 'AMD Ryzen 7 7800X3D', 'Intel Core i3-10100'].forEach(c => uniqueCpus.add(c));
+    }
+    if (uniqueGpus.size === 0) {
+      ['NVIDIA GeForce RTX 4090', 'NVIDIA GeForce RTX 4070', 'NVIDIA GeForce RTX 3060', 'Intel Iris Xe Graphics', 'NVIDIA GeForce GTX 1660 Super'].forEach(g => uniqueGpus.add(g));
+    }
+    if (uniqueRams.size === 0) {
+      ['8GB', '16GB', '32GB', '64GB'].forEach(r => uniqueRams.add(r));
+    }
+
+    console.log(`   - 추출된 CPU 개수: ${uniqueCpus.size}`);
+    console.log(`   - 추출된 GPU 개수: ${uniqueGpus.size}`);
+    console.log(`   - 추출된 RAM 개수: ${uniqueRams.size}`);
+
+    console.log('💾 3. 마스터 테이블에 부품 데이터 및 감점 정보 삽입...');
+    
+    // CPU 삽입
+    for (const cpu of uniqueCpus) {
+      const { tier, deduction } = parseCpu(cpu);
+      await connection.query(
+        'INSERT IGNORE INTO hardware_components_master (category, component_name, score_tier, deduction) VALUES (?, ?, ?, ?)',
+        ['CPU', cpu, tier, deduction]
+      );
+    }
+
+    // GPU 삽입
+    for (const gpu of uniqueGpus) {
+      const { tier, deduction } = parseGpu(gpu);
+      await connection.query(
+        'INSERT IGNORE INTO hardware_components_master (category, component_name, score_tier, deduction) VALUES (?, ?, ?, ?)',
+        ['GPU', gpu, tier, deduction]
+      );
+    }
+
+    // RAM 삽입
+    for (const ram of uniqueRams) {
+      const { tier, deduction } = parseRam(ram);
+      await connection.query(
+        'INSERT IGNORE INTO hardware_components_master (category, component_name, score_tier, deduction) VALUES (?, ?, ?, ?)',
+        ['RAM', ram, tier, deduction]
+      );
+    }
+
+    console.log('✅ 마이그레이션이 성공적으로 완료되었습니다!');
+  } catch (error) {
+    console.error('❌ 마이그레이션 오류 발생:', error);
+  } finally {
+    await connection.end();
+  }
+}
+
+runMigration();
--- a/probe_db.js
+++ b/probe_db.js
@@ -0,0 +1,36 @@
+import mysql from 'mysql2/promise';
+import dotenv from 'dotenv';
+
+dotenv.config();
+
+const { DB_HOST, DB_USER, DB_PASS, DB_NAME, DB_PORT } = process.env;
+
+async function probeDB() {
+  const connection = await mysql.createConnection({
+    host: DB_HOST,
+    user: DB_USER,
+    password: DB_PASS,
+    database: DB_NAME,
+    port: parseInt(DB_PORT || '3306')
+  });
+
+  console.log('--- Database Probe Start ---');
+  
+  const [tables] = await connection.query('SHOW TABLES');
+  const tableNames = tables.map(t => Object.values(t)[0]);
+  
+  console.log('Existing Tables:', tableNames);
+
+  for (const table of tableNames) {
+    const [columns] = await connection.query(`DESCRIBE ${table}`);
+    console.log(`\n[Table: ${table}]`);
+    columns.forEach(c => {
+      console.log(`  - ${c.Field} (${c.Type}) ${c.Comment ? '// ' + c.Comment : ''}`);
+    });
+  }
+
+  await connection.end();
+  console.log('\n--- Database Probe End ---');
+}
+
+probeDB().catch(console.error);
--- a/public/img/image_92.png
+++ b/public/img/image_92.png
--- a/public/img/location_photo/IDC/서관202.png
+++ b/public/img/location_photo/IDC/서관202.png
--- a/public/img/location_photo/기술개발센터/센터내부/센터내부.png
+++ b/public/img/location_photo/기술개발센터/센터내부/센터내부.png
--- a/public/img/location_photo/기술개발센터/팀자리/center_chair_map_view_only.html
+++ b/public/img/location_photo/기술개발센터/팀자리/center_chair_map_view_only.html
@@ -1,354 +0,0 @@
-<!DOCTYPE html>
-<html lang="ko">
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Center Chair Map (View Only)</title>
-  <style>
-    :root {
-      --ink: #152330;
-      --muted: #627286;
-      --paper: rgba(255,255,255,0.86);
-      --line: rgba(21,35,48,0.1);
-      --accent: #0f766e;
-      --bg: #edf2f6;
-    }
-    * { box-sizing: border-box; }
-    body {
-      margin: 0;
-      font-family: "IBM Plex Sans KR", "Pretendard", sans-serif;
-      color: var(--ink);
-      background:
-        radial-gradient(circle at top left, rgba(15,118,110,0.11), transparent 22%),
-        linear-gradient(180deg, #f5f8fb 0%, #e8eef3 100%);
-      overflow: hidden;
-    }
-    .page {
-      min-height: 100vh;
-      padding: 0;
-    }
-    .shell {
-      min-height: 100vh;
-    }
-    .panel {
-      border-radius: 0;
-      border: none;
-      background: transparent;
-      backdrop-filter: none;
-      box-shadow: none;
-    }
-    .viewer {
-      position: relative;
-      overflow: hidden;
-      min-height: 100vh;
-    }
-    .viewer-head {
-      position: absolute;
-      top: 16px;
-      left: 16px;
-      z-index: 2;
-      pointer-events: none;
-    }
-    .chip {
-      padding: 10px 12px;
-      border-radius: 16px;
-      background: rgba(255,255,255,0.82);
-      border: 1px solid rgba(255,255,255,0.94);
-      color: var(--muted);
-      font-size: 13px;
-      font-weight: 700;
-      box-shadow: 0 8px 24px rgba(21,35,48,0.08);
-      display: inline-block;
-    }
-    .viewer-actions {
-      position: absolute;
-      left: 16px;
-      top: 64px;
-      z-index: 2;
-    }
-    button {
-      border: none;
-      border-radius: 999px;
-      padding: 10px 14px;
-      font: inherit;
-      font-weight: 700;
-      cursor: pointer;
-      color: white;
-      background: linear-gradient(135deg, #0f766e, #115e59);
-      box-shadow: 0 10px 22px rgba(15,118,110,0.18);
-    }
-    canvas {
-      width: 100vw;
-      height: 100vh;
-      display: block;
-      cursor: grab;
-    }
-    canvas.dragging { cursor: grabbing; }
-  </style>
-</head>
-<body>
-  <div class="page">
-    <div class="shell">
-      <main class="panel viewer">
-        <div class="viewer-head">
-          <div class="chip" id="scale-chip"></div>
-        </div>
-        <div class="viewer-actions">
-          <button type="button" id="fit-btn">전체 맞춤</button>
-        </div>
-        <canvas id="canvas"></canvas>
-      </main>
-    </div>
-  </div>
-  <script src="./center_chair_people_payload.js?v=20260403a"></script>
-  <script>
-    const DATA = window.CHAIR_MAP_DATA;
-    function decodeSegments(base64) {
-      const binary = atob(base64);
-      const bytes = new Uint8Array(binary.length);
-      for (let i = 0; i < binary.length; i += 1) bytes[i] = binary.charCodeAt(i);
-      return new Int32Array(bytes.buffer);
-    }
-    const bgTileRanges = DATA.bgTileRanges;
-    const bgSegValues = decodeSegments(DATA.bgSegsB64);
-    const chairSegValues = decodeSegments(DATA.chairSegsB64);
-    const chairs = DATA.chairs.map(([key, name, kind, start, count]) => ({
-      key, name, kind, start, count
-    }));
-    const meta = DATA.meta;
-    const world = meta.headerBounds;
-    const canvas = document.getElementById("canvas");
-    const ctx = canvas.getContext("2d");
-    const scaleChip = document.getElementById("scale-chip");
-
-    // --- Added for Point Picking & Marker ---
-    const params = new URLSearchParams(window.location.search);
-    let markerX = params.get('markerX') ? parseFloat(params.get('markerX')) : null;
-    let markerY = params.get('markerY') ? parseFloat(params.get('markerY')) : null;
-
-    const chairGeometry = chairs.map((chair) => {
-      let minX = Infinity;
-      let minY = Infinity;
-      let maxX = -Infinity;
-      let maxY = -Infinity;
-      const path = new Path2D();
-      for (let i = chair.start; i < chair.start + chair.count; i += 1) {
-        const offset = i * 4;
-        const x1 = chairSegValues[offset] / 10;
-        const y1 = chairSegValues[offset + 1] / 10;
-        const x2 = chairSegValues[offset + 2] / 10;
-        const y2 = chairSegValues[offset + 3] / 10;
-        path.moveTo(x1, y1);
-        path.lineTo(x2, y2);
-        minX = Math.min(minX, x1, x2);
-        minY = Math.min(minY, y1, y2);
-        maxX = Math.max(maxX, x1, x2);
-        maxY = Math.max(maxY, y1, y2);
-      }
-      return { ...chair, minX, minY, maxX, maxY, path };
-    });
-
-    const camera = { scale: 1, offsetX: 0, offsetY: 0 };
-    let pixelRatio = window.devicePixelRatio || 1;
-    let dragging = false;
-    let dragStart = null;
-    let rafPending = false;
-
-    function resize() {
-      pixelRatio = window.devicePixelRatio || 1;
-      const rect = canvas.getBoundingClientRect();
-      canvas.width = Math.round(rect.width * pixelRatio);
-      canvas.height = Math.round(rect.height * pixelRatio);
-      ctx.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
-      fit();
-    }
-
-    function fit() {
-      const rect = canvas.getBoundingClientRect();
-      const width = world.maxX - world.minX;
-      const height = world.maxY - world.minY;
-      const pad = 36;
-      const scaleX = (rect.width - pad * 2) / width;
-      const scaleY = (rect.height - pad * 2) / height;
-      camera.scale = Math.min(scaleX, scaleY);
-      camera.offsetX = pad - world.minX * camera.scale + (rect.width - pad * 2 - width * camera.scale) / 2;
-      camera.offsetY = pad - world.minY * camera.scale + (rect.height - pad * 2 - height * camera.scale) / 2;
-      requestDraw();
-    }
-
-    function drawGrid(width, height) {
-      ctx.save();
-      ctx.strokeStyle = "rgba(21,35,48,0.05)";
-      ctx.lineWidth = 1;
-      for (let x = 120; x < width; x += 120) {
-        ctx.beginPath();
-        ctx.moveTo(x, 0);
-        ctx.lineTo(x, height);
-        ctx.stroke();
-      }
-      for (let y = 120; y < height; y += 120) {
-        ctx.beginPath();
-        ctx.moveTo(0, y);
-        ctx.lineTo(width, y);
-        ctx.stroke();
-      }
-      ctx.restore();
-    }
-
-    function worldToScreen(x, y) {
-      return {
-        x: x * camera.scale + camera.offsetX,
-        y: (world.maxY - y + world.minY) * camera.scale + camera.offsetY,
-      };
-    }
-
-    function screenToWorld(x, y) {
-      return {
-        x: (x - camera.offsetX) / camera.scale,
-        y: world.maxY + world.minY - (y - camera.offsetY) / camera.scale,
-      };
-    }
-
-    function requestDraw() {
-      if (rafPending) return;
-      rafPending = true;
-      window.requestAnimationFrame(() => {
-        rafPending = false;
-        draw();
-      });
-    }
-
-    function applyWorldTransform() {
-      ctx.setTransform(
-        pixelRatio * camera.scale,
-        0,
-        0,
-        -pixelRatio * camera.scale,
-        pixelRatio * camera.offsetX,
-        pixelRatio * ((world.maxY + world.minY) * camera.scale + camera.offsetY)
-      );
-    }
-
-    function draw() {
-      const rect = canvas.getBoundingClientRect();
-      ctx.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
-      ctx.clearRect(0, 0, rect.width, rect.height);
-      drawGrid(rect.width, rect.height);
-      
-      const viewA = screenToWorld(0, rect.height);
-      const viewB = screenToWorld(rect.width, 0);
-      const viewMinX = Math.min(viewA.x, viewB.x);
-      const viewMaxX = Math.max(viewA.x, viewB.x);
-      const viewMinY = Math.min(viewA.y, viewB.y);
-      const viewMaxY = Math.max(viewA.y, viewB.y);
-
-      ctx.save();
-      applyWorldTransform();
-      ctx.strokeStyle = "rgba(100, 116, 139, 0.28)";
-      ctx.lineWidth = 1 / camera.scale;
-      const tileSize = meta.backgroundTileSize;
-      const tileMinX = Math.floor(viewMinX / tileSize);
-      const tileMaxX = Math.floor(viewMaxX / tileSize);
-      const tileMinY = Math.floor(viewMinY / tileSize);
-      const tileMaxY = Math.floor(viewMaxY / tileSize);
-      
-      for (let tx = tileMinX; tx <= tileMaxX; tx += 1) {
-        for (let ty = tileMinY; ty <= tileMaxY; ty += 1) {
-          const range = bgTileRanges[`${tx},${ty}`];
-          if (!range) continue;
-          const start = range[0];
-          const count = range[1];
-          for (let i = start; i < start + count; i += 1) {
-            const offset = i * 4;
-            const x1 = bgSegValues[offset] / 10;
-            const y1 = bgSegValues[offset + 1] / 10;
-            const x2 = bgSegValues[offset + 2] / 10;
-            const y2 = bgSegValues[offset + 3] / 10;
-            if (Math.max(x1, x2) < viewMinX || Math.min(x1, x2) > viewMaxX ||
-                Math.max(y1, y2) < viewMinY || Math.min(y1, y2) > viewMaxY) continue;
-            ctx.beginPath();
-            ctx.moveTo(x1, y1);
-            ctx.lineTo(x2, y2);
-            ctx.stroke();
-          }
-        }
-      }
-
-      ctx.lineWidth = 1.35 / camera.scale;
-      ctx.lineCap = "round";
-      ctx.lineJoin = "round";
-      ctx.strokeStyle = "rgba(21, 149, 142, 0.8)";
-      for (const chair of chairGeometry) {
-        if (chair.maxX < viewMinX || chair.minX > viewMaxX || chair.maxY < viewMinY || chair.minY > viewMaxY) continue;
-        ctx.stroke(chair.path);
-      }
-
-      // --- Draw Marker ---
-      if (markerX !== null && markerY !== null) {
-        ctx.beginPath();
-        ctx.arc(markerX, markerY, 50 / camera.scale, 0, Math.PI * 2);
-        ctx.fillStyle = "rgba(220, 38, 38, 0.8)";
-        ctx.fill();
-        ctx.strokeStyle = "#fff";
-        ctx.lineWidth = 10 / camera.scale;
-        ctx.stroke();
-      }
-      ctx.restore();
-      scaleChip.textContent = `scale ${camera.scale.toFixed(4)}x`;
-    }
-
-    canvas.addEventListener("pointerdown", (event) => {
-      dragging = true;
-      dragStart = { x: event.clientX, y: event.clientY, offsetX: camera.offsetX, offsetY: camera.offsetY };
-      canvas.classList.add("dragging");
-    });
-    window.addEventListener("pointerup", (event) => {
-      if (dragging && dragStart) {
-        const move = Math.hypot(event.clientX - dragStart.x, event.clientY - dragStart.y);
-        if (move < 4) {
-          const rect = canvas.getBoundingClientRect();
-          const mx = event.clientX - rect.left;
-          const my = event.clientY - rect.top;
-          const worldPos = screenToWorld(mx, my);
-          markerX = worldPos.x;
-          markerY = worldPos.y;
-          requestDraw();
-          
-          // Notify parent window
-          window.parent.postMessage({ 
-            type: 'PICK_LOCATION', 
-            x: markerX.toFixed(2), 
-            y: markerY.toFixed(2) 
-          }, '*');
-        }
-      }
-      dragging = false;
-      dragStart = null;
-      canvas.classList.remove("dragging");
-    });
-    window.addEventListener("pointermove", (event) => {
-      if (dragging && dragStart) {
-        camera.offsetX = dragStart.offsetX + (event.clientX - dragStart.x);
-        camera.offsetY = dragStart.offsetY + (event.clientY - dragStart.y);
-        requestDraw();
-      }
-    });
-    canvas.addEventListener("wheel", (event) => {
-      event.preventDefault();
-      const rect = canvas.getBoundingClientRect();
-      const mx = event.clientX - rect.left;
-      const my = event.clientY - rect.top;
-      const before = screenToWorld(mx, my);
-      const factor = event.deltaY < 0 ? 1.08 : 0.92;
-      camera.scale = Math.max(0.002, Math.min(2, camera.scale * factor));
-      const after = worldToScreen(before.x, before.y);
-      camera.offsetX += mx - after.x;
-      camera.offsetY += my - after.y;
-      requestDraw();
-    }, { passive: false });
-    document.getElementById("fit-btn").addEventListener("click", fit);
-    window.addEventListener("resize", resize);
-    resize();
-  </script>
-</body>
-</html>
--- a/public/img/location_photo/기술개발센터/팀자리/center_chair_people_data.json
+++ b/public/img/location_photo/기술개발센터/팀자리/center_chair_people_data.json
--- a/public/img/location_photo/기술개발센터/팀자리/center_chair_people_map.html
+++ b/public/img/location_photo/기술개발센터/팀자리/center_chair_people_map.html
@@ -1,931 +0,0 @@
-<!DOCTYPE html>
-<html lang="ko">
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>center chair people map</title>
-  <style>
-    :root {
-      --ink: #152330;
-      --muted: #627286;
-      --paper: rgba(255,255,255,0.86);
-      --line: rgba(21,35,48,0.1);
-      --accent: #0f766e;
-      --bg: #edf2f6;
-    }
-    * { box-sizing: border-box; }
-    body {
-      margin: 0;
-      font-family: "IBM Plex Sans KR", "Pretendard", sans-serif;
-      color: var(--ink);
-      background:
-        radial-gradient(circle at top left, rgba(15,118,110,0.11), transparent 22%),
-        linear-gradient(180deg, #f5f8fb 0%, #e8eef3 100%);
-    }
-    .page {
-      min-height: 100vh;
-      padding: 0;
-    }
-    .shell {
-      min-height: 100vh;
-    }
-    .panel {
-      border-radius: 0;
-      border: none;
-      background: transparent;
-      backdrop-filter: none;
-      box-shadow: none;
-    }
-    .actions {
-      display: flex;
-      gap: 8px;
-      flex-wrap: wrap;
-    }
-    button {
-      border: none;
-      border-radius: 999px;
-      padding: 10px 14px;
-      font: inherit;
-      font-weight: 700;
-      cursor: pointer;
-      color: white;
-      background: linear-gradient(135deg, #0f766e, #115e59);
-      box-shadow: 0 10px 22px rgba(15,118,110,0.18);
-    }
-    button.alt {
-      color: var(--ink);
-      background: rgba(255,255,255,0.9);
-      border: 1px solid var(--line);
-      box-shadow: none;
-    }
-    .viewer {
-      position: relative;
-      overflow: hidden;
-      min-height: 100vh;
-    }
-    .viewer-head {
-      position: absolute;
-      top: 16px;
-      left: 16px;
-      right: 16px;
-      z-index: 2;
-      display: flex;
-      justify-content: space-between;
-      gap: 12px;
-      pointer-events: none;
-    }
-    .chip {
-      padding: 10px 12px;
-      border-radius: 16px;
-      background: rgba(255,255,255,0.82);
-      border: 1px solid rgba(255,255,255,0.94);
-      color: var(--muted);
-      font-size: 13px;
-      font-weight: 700;
-      box-shadow: 0 8px 24px rgba(21,35,48,0.08);
-    }
-    .viewer-actions {
-      position: absolute;
-      left: 16px;
-      top: 64px;
-      z-index: 2;
-      display: flex;
-      gap: 8px;
-    }
-    .mapper {
-      position: absolute;
-      top: 76px;
-      left: 50%;
-      transform: translateX(-50%);
-      width: min(94vw, 1320px);
-      max-height: min(56vh, 560px);
-      overflow: hidden;
-      z-index: 4;
-      border-radius: 20px;
-      background: rgba(234, 239, 247, 0.95);
-      border: 1px solid rgba(101, 119, 146, 0.22);
-      box-shadow: 0 18px 36px rgba(15, 23, 42, 0.2);
-      display: flex;
-      flex-direction: column;
-      backdrop-filter: blur(6px);
-    }
-    .hidden-off {
-      display: none !important;
-    }
-    .mapper-head {
-      padding: 10px 14px;
-      border-bottom: 1px solid rgba(101,119,146,0.18);
-      font-size: 12px;
-      color: #51607a;
-      font-weight: 700;
-      line-height: 1.35;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      gap: 10px;
-      background: rgba(255,255,255,0.6);
-    }
-    .mapper-head strong {
-      display: block;
-      color: #17243b;
-      font-size: 20px;
-      margin-bottom: 2px;
-    }
-    .mapper-head .alt {
-      padding: 8px 10px;
-      font-size: 12px;
-      white-space: nowrap;
-    }
-    .org-chart {
-      margin: 0;
-      padding: 14px;
-      overflow: auto;
-      display: grid;
-      gap: 12px;
-    }
-    .org-top {
-      margin: 0 auto;
-      width: min(100%, 420px);
-      border-radius: 14px;
-      overflow: hidden;
-      border: 1px solid rgba(67, 84, 118, 0.25);
-      background: #fff;
-    }
-    .org-top-title {
-      background: #1e2f4d;
-      color: #fff;
-      text-align: center;
-      font-size: 34px;
-      font-weight: 800;
-      line-height: 1.1;
-      padding: 16px 12px;
-      letter-spacing: -0.03em;
-    }
-    .org-top-members {
-      padding: 10px;
-      display: grid;
-      gap: 6px;
-      background: rgba(255,255,255,0.95);
-    }
-    .org-teams {
-      display: grid;
-      grid-template-columns: repeat(7, minmax(160px, 1fr));
-      gap: 10px;
-      align-items: start;
-    }
-    .org-team {
-      border: 1px solid rgba(110, 126, 152, 0.25);
-      border-radius: 10px;
-      overflow: hidden;
-      background: rgba(255,255,255,0.95);
-      min-width: 0;
-    }
-    .org-team h4 {
-      margin: 0;
-      padding: 9px 10px;
-      font-size: 14px;
-      color: #21324e;
-      font-weight: 800;
-      border-bottom: 1px solid rgba(110, 126, 152, 0.2);
-      background: rgba(240, 245, 252, 0.96);
-    }
-    .org-members {
-      padding: 7px;
-      display: grid;
-      gap: 6px;
-    }
-    .org-person {
-      border: 1px solid rgba(116, 133, 161, 0.25);
-      background: rgba(255,255,255,0.95);
-      border-radius: 8px;
-      padding: 6px 8px;
-      cursor: pointer;
-      transition: background 120ms ease, border-color 120ms ease;
-      min-width: 0;
-    }
-    .org-person.active {
-      border-color: rgba(15,118,110,0.6);
-      background: rgba(15,118,110,0.11);
-    }
-    .org-person.assigned {
-      border-color: rgba(37,99,235,0.5);
-      background: rgba(37,99,235,0.1);
-    }
-    .org-person strong {
-      display: block;
-      font-size: 13px;
-      line-height: 1.3;
-      color: #15233a;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-    .org-person small {
-      display: block;
-      color: #5a6a86;
-      font-size: 11px;
-      line-height: 1.25;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-    @media (max-width: 980px) {
-      .mapper {
-        top: 72px;
-        width: min(96vw, 920px);
-        max-height: 58vh;
-      }
-      .viewer-actions {
-        top: 64px;
-        left: 12px;
-        right: 12px;
-        flex-wrap: wrap;
-      }
-      .mapper-head strong {
-        font-size: 16px;
-      }
-      .org-top-title {
-        font-size: 24px;
-      }
-      .org-teams {
-        grid-template-columns: repeat(3, minmax(150px, 1fr));
-      }
-    }
-    canvas {
-      width: 100%;
-      height: 100%;
-      display: block;
-      cursor: grab;
-    }
-    canvas.dragging { cursor: grabbing; }
-    .tooltip {
-      position: absolute;
-      min-width: 170px;
-      padding: 12px 14px;
-      border-radius: 16px;
-      background: rgba(17,24,39,0.94);
-      color: white;
-      pointer-events: none;
-      opacity: 0;
-      transform: translate(12px, 12px);
-      transition: opacity 120ms ease;
-      z-index: 3;
-    }
-    .tooltip.visible { opacity: 1; }
-    .tooltip strong { display: block; margin-bottom: 6px; font-size: 14px; }
-    .tooltip div { font-size: 12px; line-height: 1.45; color: rgba(255,255,255,0.82); }
-  </style>
-</head>
-<body>
-  <div class="page">
-    <div class="shell">
-      <main class="panel viewer">
-        <div class="viewer-head">
-          <div class="chip" id="scale-chip"></div>
-          <div class="chip" id="hover-chip">chair hover: none</div>
-        </div>
-        <div class="viewer-actions">
-          <button type="button" id="fit-btn">전체 맞춤</button>
-          <button type="button" class="alt" id="clear-btn">선택 지우기</button>
-        </div>
-        <aside class="mapper hidden-off">
-          <div class="mapper-head">
-            <div id="mapper-status">
-              <strong>조직 현황</strong>
-              <span>선택 인원 없음</span>
-            </div>
-            <button type="button" class="alt" id="clear-assign-btn">매칭 초기화</button>
-          </div>
-          <div class="org-chart" id="org-chart"></div>
-        </aside>
-        <canvas id="canvas"></canvas>
-        <div class="tooltip" id="tooltip"></div>
-      </main>
-    </div>
-  </div>
-  <script src="./center_chair_people_payload.js?v=20260403a"></script>
-  <script>
-    const DATA = window.CHAIR_MAP_DATA;
-    function decodeSegments(base64) {
-      const binary = atob(base64);
-      const bytes = new Uint8Array(binary.length);
-      for (let i = 0; i < binary.length; i += 1) bytes[i] = binary.charCodeAt(i);
-      return new Int32Array(bytes.buffer);
-    }
-    const bgTileRanges = DATA.bgTileRanges;
-    const bgSegValues = decodeSegments(DATA.bgSegsB64);
-    const chairSegValues = decodeSegments(DATA.chairSegsB64);
-    const chairs = DATA.chairs.map(([key, name, kind, start, count]) => ({
-      key, name, kind, start, count
-    }));
-    const meta = DATA.meta;
-    const world = meta.headerBounds;
-    const canvas = document.getElementById("canvas");
-    const ctx = canvas.getContext("2d");
-    const tooltip = document.getElementById("tooltip");
-    const scaleChip = document.getElementById("scale-chip");
-    const hoverChip = document.getElementById("hover-chip");
-    const STORAGE_KEY = "ptc-chair-selection";
-    const PEOPLE_STORAGE_KEY = "ptc-chair-people";
-    const ASSIGN_STORAGE_KEY = "ptc-chair-assignments";
-    const ACTIVE_PERSON_STORAGE_KEY = "ptc-chair-active-person";
-    const clearAssignBtn = document.getElementById("clear-assign-btn");
-    const orgChartEl = document.getElementById("org-chart");
-    const mapperStatus = document.getElementById("mapper-status");
-    // Prevent stale auto-highlights from previous sessions.
-    localStorage.removeItem(STORAGE_KEY);
-    localStorage.removeItem(ACTIVE_PERSON_STORAGE_KEY);
-    localStorage.removeItem(ASSIGN_STORAGE_KEY);
-    const placed = new Set();
-    let people = JSON.parse(localStorage.getItem(PEOPLE_STORAGE_KEY) || "[]");
-    let chairAssignments = {};
-    let activePersonId = null;
-    const ORG_TEMPLATE = {
-      top: {
-        name: "총괄기획실",
-        count: 53,
-        members: [
-          { name: "장종찬", dept: "총괄기획실", title: "기획실장" },
-          { name: "김원식", dept: "총괄기획실", title: "전무이사" },
-        ],
-      },
-      teams: [
-        { name: "경영기획팀", count: 6, members: ["김우진", "임민정", "국혜린", "최선아", "김윤재", "이미영"] },
-        { name: "인재성장팀", count: 5, members: ["조태희", "최근혜", "류원준", "주안기", "정성호"] },
-        { name: "ERP 기획팀", count: 5, members: ["류호성", "문형식", "최요제", "황대일", "이채봉"] },
-        { name: "디자인기획팀", count: 17, members: ["신혜영", "정은혜", "김태식", "최예은", "채선영", "최영환", "윤봄이", "이예진", "허유나", "마희연", "김수현", "박지영", "권순호", "정두휘", "김정석", "정지윤", "양숙영"] },
-        { name: "기술기획팀", count: 11, members: ["김원기", "홍아름", "이경민", "김혜인", "황동환", "최찬호", "이태훈", "김신지", "조찬영", "김용연", "한치영"] },
-        { name: "협업증진팀", count: 3, members: ["성형일", "박주한", "한승민"] },
-        { name: "솔루션통합팀", count: 4, members: ["권혁진", "염승호", "윤준수", "김지영"] },
-      ],
-    };
-    const chairGeometry = chairs.map((chair) => {
-      let minX = Infinity;
-      let minY = Infinity;
-      let maxX = -Infinity;
-      let maxY = -Infinity;
-      const path = new Path2D();
-      const hitSegments = new Float32Array(chair.count * 4);
-      let segCursor = 0;
-      for (let i = chair.start; i < chair.start + chair.count; i += 1) {
-        const offset = i * 4;
-        const x1 = chairSegValues[offset] / 10;
-        const y1 = chairSegValues[offset + 1] / 10;
-        const x2 = chairSegValues[offset + 2] / 10;
-        const y2 = chairSegValues[offset + 3] / 10;
-        path.moveTo(x1, y1);
-        path.lineTo(x2, y2);
-        hitSegments[segCursor] = x1;
-        hitSegments[segCursor + 1] = y1;
-        hitSegments[segCursor + 2] = x2;
-        hitSegments[segCursor + 3] = y2;
-        segCursor += 4;
-        minX = Math.min(minX, x1, x2);
-        minY = Math.min(minY, y1, y2);
-        maxX = Math.max(maxX, x1, x2);
-        maxY = Math.max(maxY, y1, y2);
-      }
-      return {
-        ...chair,
-        minX,
-        minY,
-        maxX,
-        maxY,
-        area: Math.max(1, (maxX - minX) * (maxY - minY)),
-        path,
-        hitSegments,
-      };
-    });
-    function renumberChairKeys(chairItems) {
-      if (!chairItems.length) return;
-      const heights = chairItems
-        .map((chair) => Math.max(1, chair.maxY - chair.minY))
-        .sort((a, b) => a - b);
-      const medianHeight = heights[Math.floor(heights.length / 2)] || 1;
-      const rowTolerance = Math.max(40, medianHeight * 0.9);
-
-      const sorted = [...chairItems].sort((a, b) => {
-        const ay = (a.minY + a.maxY) * 0.5;
-        const by = (b.minY + b.maxY) * 0.5;
-        if (Math.abs(by - ay) > rowTolerance) return by - ay; // top -> bottom
-        const ax = (a.minX + a.maxX) * 0.5;
-        const bx = (b.minX + b.maxX) * 0.5;
-        return ax - bx; // left -> right
-      });
-
-      sorted.forEach((chair, index) => {
-        chair.key = String(index + 1);
-        chair.seatNo = index + 1;
-      });
-    }
-    renumberChairKeys(chairGeometry);
-    const PICK_GRID_SIZE = 1800;
-    const chairPickGrid = new Map();
-    function pickGridKey(gx, gy) {
-      return `${gx},${gy}`;
-    }
-    chairGeometry.forEach((chair, index) => {
-      const minGX = Math.floor(chair.minX / PICK_GRID_SIZE);
-      const maxGX = Math.floor(chair.maxX / PICK_GRID_SIZE);
-      const minGY = Math.floor(chair.minY / PICK_GRID_SIZE);
-      const maxGY = Math.floor(chair.maxY / PICK_GRID_SIZE);
-      for (let gx = minGX; gx <= maxGX; gx += 1) {
-        for (let gy = minGY; gy <= maxGY; gy += 1) {
-          const key = pickGridKey(gx, gy);
-          if (!chairPickGrid.has(key)) chairPickGrid.set(key, []);
-          chairPickGrid.get(key).push(index);
-        }
-      }
-    });
-
-    const camera = { scale: 1, offsetX: 0, offsetY: 0 };
-    let pixelRatio = window.devicePixelRatio || 1;
-    let pointer = { x: 0, y: 0 };
-    let dragging = false;
-    let dragStart = null;
-    let hovered = null;
-    let rafPending = false;
-
-    function normalizePeople(raw) {
-      return raw
-        .map((person, index) => {
-          if (!person || !person.name) return null;
-          return {
-            id: person.id || `person-${index + 1}`,
-            name: String(person.name).trim(),
-            dept: String(person.dept || "").trim(),
-            title: String(person.title || "").trim(),
-          };
-        })
-        .filter(Boolean);
-    }
-
-    function createTemplatePeople() {
-      const generated = [];
-      let seq = 1;
-      ORG_TEMPLATE.top.members.forEach((member) => {
-        generated.push({
-          id: `org-${seq++}`,
-          name: member.name,
-          dept: member.dept,
-          title: member.title,
-        });
-      });
-      ORG_TEMPLATE.teams.forEach((team) => {
-        team.members.forEach((name) => {
-          generated.push({
-            id: `org-${seq++}`,
-            name,
-            dept: team.name,
-            title: "선임",
-          });
-        });
-      });
-      return generated;
-    }
-
-    people = normalizePeople(people);
-    const templateReady = people.some((person) => person.name === "장종찬" && person.dept === "총괄기획실");
-    if (!templateReady) {
-      people = createTemplatePeople();
-      localStorage.setItem(PEOPLE_STORAGE_KEY, JSON.stringify(people));
-    }
-    const chairKeySet = new Set(chairGeometry.map((chair) => chair.key));
-    chairAssignments = Object.fromEntries(
-      Object.entries(chairAssignments).filter(([chairKey, personId]) => (
-        chairKeySet.has(chairKey) && people.some((person) => person.id === personId)
-      ))
-    );
-    if (activePersonId && !people.some((person) => person.id === activePersonId)) activePersonId = null;
-
-    function persistPeople() {
-      localStorage.setItem(PEOPLE_STORAGE_KEY, JSON.stringify(people));
-    }
-
-    function persistAssignments() {
-      localStorage.setItem(ASSIGN_STORAGE_KEY, JSON.stringify(chairAssignments));
-    }
-
-    function persistActivePerson() {
-      if (!activePersonId) localStorage.removeItem(ACTIVE_PERSON_STORAGE_KEY);
-      else localStorage.setItem(ACTIVE_PERSON_STORAGE_KEY, activePersonId);
-    }
-
-    function assignmentCount() {
-      return Object.keys(chairAssignments).length;
-    }
-
-    function getPersonById(id) {
-      return people.find((person) => person.id === id) || null;
-    }
-
-    function getChairByPerson(personId) {
-      for (const [chairKey, assignedPersonId] of Object.entries(chairAssignments)) {
-        if (assignedPersonId === personId) return chairKey;
-      }
-      return null;
-    }
-
-    function renderPeopleList() {
-      const activePerson = getPersonById(activePersonId);
-      const countText = `${assignmentCount()} / ${people.length} 매칭`;
-      mapperStatus.innerHTML = `<strong>조직 현황</strong><span>${activePerson ? `${activePerson.name} 선택됨` : "선택 인원 없음"} · ${countText}</span>`;
-
-      const findPerson = (dept, name) => people.find((person) => person.dept === dept && person.name === name) || null;
-      const personCard = (person, roleText) => {
-        if (!person) return "";
-        const chairKey = getChairByPerson(person.id);
-        const assignedClass = chairKey ? " assigned" : "";
-        const activeClass = person.id === activePersonId ? " active" : "";
-        return `
-          <article class="org-person${assignedClass}${activeClass}" data-person-id="${person.id}">
-            <strong>${person.name}</strong>
-            <small>${person.title || roleText || "-"}</small>
-            <small>${chairKey ? `좌석 ${chairKey}` : "좌석 미지정"}</small>
-          </article>
-        `;
-      };
-
-      const topHtml = ORG_TEMPLATE.top.members
-        .map((member) => personCard(findPerson(member.dept, member.name), member.title))
-        .join("");
-
-      const teamsHtml = ORG_TEMPLATE.teams.map((team) => {
-        const membersHtml = team.members
-          .map((name) => personCard(findPerson(team.name, name), "선임"))
-          .join("");
-        return `
-          <section class="org-team">
-            <h4>${team.name} (${team.count})</h4>
-            <div class="org-members">${membersHtml}</div>
-          </section>
-        `;
-      }).join("");
-
-      orgChartEl.innerHTML = `
-        <section class="org-top">
-          <div class="org-top-title">${ORG_TEMPLATE.top.name} (${ORG_TEMPLATE.top.count})</div>
-          <div class="org-top-members">${topHtml}</div>
-        </section>
-        <section class="org-teams">${teamsHtml}</section>
-      `;
-    }
-
-    function worldToScreen(x, y) {
-      return {
-        x: x * camera.scale + camera.offsetX,
-        y: (world.maxY - y + world.minY) * camera.scale + camera.offsetY,
-      };
-    }
-
-    function screenToWorld(x, y) {
-      return {
-        x: (x - camera.offsetX) / camera.scale,
-        y: world.maxY + world.minY - (y - camera.offsetY) / camera.scale,
-      };
-    }
-
-    function resize() {
-      pixelRatio = window.devicePixelRatio || 1;
-      const rect = canvas.getBoundingClientRect();
-      canvas.width = Math.round(rect.width * pixelRatio);
-      canvas.height = Math.round(rect.height * pixelRatio);
-      ctx.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
-      fit();
-    }
-
-    function fit() {
-      const rect = canvas.getBoundingClientRect();
-      const width = world.maxX - world.minX;
-      const height = world.maxY - world.minY;
-      const pad = 36;
-      const scaleX = (rect.width - pad * 2) / width;
-      const scaleY = (rect.height - pad * 2) / height;
-      camera.scale = Math.min(scaleX, scaleY);
-      camera.offsetX = pad - world.minX * camera.scale + (rect.width - pad * 2 - width * camera.scale) / 2;
-      camera.offsetY = pad - world.minY * camera.scale + (rect.height - pad * 2 - height * camera.scale) / 2;
-      requestDraw();
-    }
-
-    function drawGrid(width, height) {
-      ctx.save();
-      ctx.strokeStyle = "rgba(21,35,48,0.05)";
-      ctx.lineWidth = 1;
-      for (let x = 120; x < width; x += 120) {
-        ctx.beginPath();
-        ctx.moveTo(x, 0);
-        ctx.lineTo(x, height);
-        ctx.stroke();
-      }
-      for (let y = 120; y < height; y += 120) {
-        ctx.beginPath();
-        ctx.moveTo(0, y);
-        ctx.lineTo(width, y);
-        ctx.stroke();
-      }
-      ctx.restore();
-    }
-
-    function pickChair(screenX, screenY) {
-      const threshold = 12;
-      const pointerWorld = screenToWorld(screenX, screenY);
-      const thresholdWorld = threshold / camera.scale;
-      const thresholdWorldSq = thresholdWorld * thresholdWorld;
-      const minGX = Math.floor((pointerWorld.x - thresholdWorld) / PICK_GRID_SIZE);
-      const maxGX = Math.floor((pointerWorld.x + thresholdWorld) / PICK_GRID_SIZE);
-      const minGY = Math.floor((pointerWorld.y - thresholdWorld) / PICK_GRID_SIZE);
-      const maxGY = Math.floor((pointerWorld.y + thresholdWorld) / PICK_GRID_SIZE);
-      const candidateIndexes = [];
-      const seen = new Set();
-      for (let gx = minGX; gx <= maxGX; gx += 1) {
-        for (let gy = minGY; gy <= maxGY; gy += 1) {
-          const candidates = chairPickGrid.get(pickGridKey(gx, gy));
-          if (!candidates) continue;
-          for (const index of candidates) {
-            if (seen.has(index)) continue;
-            seen.add(index);
-            candidateIndexes.push(index);
-          }
-        }
-      }
-      let best = null;
-      for (const index of candidateIndexes) {
-        const chair = chairGeometry[index];
-        if (
-          pointerWorld.x < chair.minX - thresholdWorld ||
-          pointerWorld.x > chair.maxX + thresholdWorld ||
-          pointerWorld.y < chair.minY - thresholdWorld ||
-          pointerWorld.y > chair.maxY + thresholdWorld
-        ) continue;
-        let distSq = Infinity;
-        for (let i = 0; i < chair.hitSegments.length; i += 4) {
-          const x1 = chair.hitSegments[i];
-          const y1 = chair.hitSegments[i + 1];
-          const x2 = chair.hitSegments[i + 2];
-          const y2 = chair.hitSegments[i + 3];
-          const dx = x2 - x1;
-          const dy = y2 - y1;
-          const len2 = dx * dx + dy * dy;
-          let segDistSq;
-          if (len2 === 0) {
-            const px = pointerWorld.x - x1;
-            const py = pointerWorld.y - y1;
-            segDistSq = px * px + py * py;
-          } else {
-            let t = ((pointerWorld.x - x1) * dx + (pointerWorld.y - y1) * dy) / len2;
-            t = Math.max(0, Math.min(1, t));
-            const lx = x1 + t * dx;
-            const ly = y1 + t * dy;
-            const px = pointerWorld.x - lx;
-            const py = pointerWorld.y - ly;
-            segDistSq = px * px + py * py;
-          }
-          if (segDistSq < distSq) distSq = segDistSq;
-          if (distSq <= thresholdWorldSq * 0.3) break;
-        }
-        if (distSq > thresholdWorldSq) continue;
-        const dist = Math.sqrt(distSq) * camera.scale;
-
-        if (!best) {
-          best = { chair, dist };
-          continue;
-        }
-
-        const distGap = dist - best.dist;
-        if (distGap < -0.75) {
-          best = { chair, dist };
-          continue;
-        }
-
-        if (Math.abs(distGap) <= 2) {
-          const areaGap = chair.area - best.chair.area;
-          if (areaGap < -1) {
-            best = { chair, dist };
-            continue;
-          }
-
-          if (
-            Math.abs(areaGap) <= 1 &&
-            chair.kind === "block" &&
-            best.chair.kind !== "block"
-          ) {
-            best = { chair, dist };
-          }
-        }
-      }
-
-      return best ? best.chair : null;
-    }
-
-    function renderTooltip() {
-      if (!hovered) {
-        tooltip.classList.remove("visible");
-        hoverChip.textContent = "chair hover: none";
-        return;
-      }
-      hoverChip.textContent = `chair hover: ${hovered.name}`;
-      tooltip.innerHTML = `
-        <strong>${hovered.name}</strong>
-        <div>chair key: ${hovered.key}</div>
-        <div>${placed.has(hovered.key) ? "선택됨" : "클릭하면 선택"}</div>
-        <div>${chairAssignments[hovered.key] ? `배치: ${(getPersonById(chairAssignments[hovered.key]) || { name: "알수없음" }).name}` : "배치 인원 없음"}</div>
-      `;
-      tooltip.style.left = `${pointer.x + 14}px`;
-      tooltip.style.top = `${pointer.y + 14}px`;
-      tooltip.classList.add("visible");
-    }
-
-    function requestDraw() {
-      if (rafPending) return;
-      rafPending = true;
-      window.requestAnimationFrame(() => {
-        rafPending = false;
-        draw();
-      });
-    }
-
-    function applyWorldTransform() {
-      ctx.setTransform(
-        pixelRatio * camera.scale,
-        0,
-        0,
-        -pixelRatio * camera.scale,
-        pixelRatio * camera.offsetX,
-        pixelRatio * ((world.maxY + world.minY) * camera.scale + camera.offsetY)
-      );
-    }
-
-    function draw() {
-      const rect = canvas.getBoundingClientRect();
-      ctx.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
-      ctx.clearRect(0, 0, rect.width, rect.height);
-      drawGrid(rect.width, rect.height);
-      const viewA = screenToWorld(0, rect.height);
-      const viewB = screenToWorld(rect.width, 0);
-      const viewMinX = Math.min(viewA.x, viewB.x);
-      const viewMaxX = Math.max(viewA.x, viewB.x);
-      const viewMinY = Math.min(viewA.y, viewB.y);
-      const viewMaxY = Math.max(viewA.y, viewB.y);
-
-      ctx.save();
-      applyWorldTransform();
-      ctx.strokeStyle = "rgba(100, 116, 139, 0.28)";
-      ctx.lineWidth = 1 / camera.scale;
-      const tileSize = meta.backgroundTileSize;
-      const tileMinX = Math.floor(viewMinX / tileSize);
-      const tileMaxX = Math.floor(viewMaxX / tileSize);
-      const tileMinY = Math.floor(viewMinY / tileSize);
-      const tileMaxY = Math.floor(viewMaxY / tileSize);
-      for (let tx = tileMinX; tx <= tileMaxX; tx += 1) {
-        for (let ty = tileMinY; ty <= tileMaxY; ty += 1) {
-          const range = bgTileRanges[`${tx},${ty}`];
-          if (!range) continue;
-          const start = range[0];
-          const count = range[1];
-          for (let i = start; i < start + count; i += 1) {
-            const offset = i * 4;
-            const x1 = bgSegValues[offset] / 10;
-            const y1 = bgSegValues[offset + 1] / 10;
-            const x2 = bgSegValues[offset + 2] / 10;
-            const y2 = bgSegValues[offset + 3] / 10;
-            if (
-              Math.max(x1, x2) < viewMinX ||
-              Math.min(x1, x2) > viewMaxX ||
-              Math.max(y1, y2) < viewMinY ||
-              Math.min(y1, y2) > viewMaxY
-            ) continue;
-            ctx.beginPath();
-            ctx.moveTo(x1, y1);
-            ctx.lineTo(x2, y2);
-            ctx.stroke();
-          }
-        }
-      }
-      ctx.restore();
-
-      hovered = dragging ? null : pickChair(pointer.x, pointer.y);
-
-      ctx.save();
-      applyWorldTransform();
-      ctx.lineWidth = 1.45 / camera.scale;
-      ctx.lineCap = "round";
-      ctx.lineJoin = "round";
-      for (const chair of chairGeometry) {
-        if (chair.maxX < viewMinX || chair.minX > viewMaxX || chair.maxY < viewMinY || chair.minY > viewMaxY) continue;
-        const active = hovered && hovered.key === chair.key;
-        const selected = placed.has(chair.key);
-        const assignedPersonId = chairAssignments[chair.key];
-        const activePersonChair = activePersonId && assignedPersonId === activePersonId;
-        const assigned = Boolean(assignedPersonId);
-        const baseWidth = chair.kind === "block" ? 1.45 : 1.35;
-        ctx.strokeStyle = activePersonChair
-          ? "rgba(234, 179, 8, 1)"
-          : assigned
-            ? "rgba(37, 99, 235, 0.98)"
-            : selected
-              ? "rgba(220, 38, 38, 0.98)"
-              : active
-                ? "rgba(15, 118, 110, 0.98)"
-                : chair.kind === "group"
-                  ? "rgba(16, 134, 149, 0.74)"
-                  : "rgba(21, 149, 142, 0.8)";
-        ctx.lineWidth = (activePersonChair ? 2.8 : assigned ? 2.4 : selected ? 2.6 : active ? 2.1 : baseWidth) / camera.scale;
-        ctx.stroke(chair.path);
-      }
-      ctx.restore();
-
-      scaleChip.textContent = `scale ${camera.scale.toFixed(4)}x`;
-      renderTooltip();
-    }
-
-    function persistPlaced() {
-      localStorage.setItem(STORAGE_KEY, JSON.stringify([...placed]));
-    }
-
-    canvas.addEventListener("pointerdown", (event) => {
-      dragging = true;
-      dragStart = { x: event.clientX, y: event.clientY, offsetX: camera.offsetX, offsetY: camera.offsetY };
-      canvas.classList.add("dragging");
-    });
-
-    window.addEventListener("pointerup", (event) => {
-      if (dragging && dragStart) {
-        const move = Math.hypot(event.clientX - dragStart.x, event.clientY - dragStart.y);
-        if (move < 4) {
-          const rect = canvas.getBoundingClientRect();
-          const picked = pickChair(event.clientX - rect.left, event.clientY - rect.top);
-          if (picked) {
-            if (placed.has(picked.key)) placed.delete(picked.key);
-            else placed.add(picked.key);
-            persistPlaced();
-            if (activePersonId) {
-              const currentChair = getChairByPerson(activePersonId);
-              if (chairAssignments[picked.key] === activePersonId) {
-                delete chairAssignments[picked.key];
-              } else {
-                if (currentChair && currentChair !== picked.key) delete chairAssignments[currentChair];
-                chairAssignments[picked.key] = activePersonId;
-              }
-              persistAssignments();
-              renderPeopleList();
-            }
-          }
-        }
-      }
-      dragging = false;
-      dragStart = null;
-      canvas.classList.remove("dragging");
-      requestDraw();
-    });
-
-    window.addEventListener("pointermove", (event) => {
-      const rect = canvas.getBoundingClientRect();
-      pointer = { x: event.clientX - rect.left, y: event.clientY - rect.top };
-      if (dragging && dragStart) {
-        camera.offsetX = dragStart.offsetX + (event.clientX - dragStart.x);
-        camera.offsetY = dragStart.offsetY + (event.clientY - dragStart.y);
-      }
-      requestDraw();
-    });
-
-    canvas.addEventListener("wheel", (event) => {
-      event.preventDefault();
-      const rect = canvas.getBoundingClientRect();
-      const mx = event.clientX - rect.left;
-      const my = event.clientY - rect.top;
-      const before = screenToWorld(mx, my);
-      const factor = event.deltaY < 0 ? 1.08 : 0.92;
-      camera.scale = Math.max(0.002, Math.min(2, camera.scale * factor));
-      const after = worldToScreen(before.x, before.y);
-      camera.offsetX += mx - after.x;
-      camera.offsetY += my - after.y;
-      requestDraw();
-    }, { passive: false });
-
-    document.getElementById("fit-btn").addEventListener("click", fit);
-    document.getElementById("clear-btn").addEventListener("click", () => {
-      placed.clear();
-      persistPlaced();
-      requestDraw();
-    });
-    clearAssignBtn.addEventListener("click", () => {
-      chairAssignments = {};
-      persistAssignments();
-      renderPeopleList();
-      requestDraw();
-    });
-    orgChartEl.addEventListener("click", (event) => {
-      const item = event.target.closest(".org-person[data-person-id]");
-      if (!item) return;
-      const personId = item.getAttribute("data-person-id");
-      activePersonId = personId === activePersonId ? null : personId;
-      persistActivePerson();
-      renderPeopleList();
-      requestDraw();
-    });
-    window.addEventListener("resize", resize);
-    renderPeopleList();
-    resize();
-  </script>
-</body>
-</html>
--- a/public/img/location_photo/기술개발센터/팀자리/center_chair_people_map_6f.html
+++ b/public/img/location_photo/기술개발센터/팀자리/center_chair_people_map_6f.html
@@ -1,932 +0,0 @@
-<!DOCTYPE html>
-<html lang="ko">
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>center chair people map 6f</title>
-  <style>
-    :root {
-      --ink: #152330;
-      --muted: #627286;
-      --paper: rgba(255,255,255,0.86);
-      --line: rgba(21,35,48,0.1);
-      --accent: #0f766e;
-      --bg: #edf2f6;
-    }
-    * { box-sizing: border-box; }
-    body {
-      margin: 0;
-      font-family: "IBM Plex Sans KR", "Pretendard", sans-serif;
-      color: var(--ink);
-      background:
-        radial-gradient(circle at top left, rgba(15,118,110,0.11), transparent 22%),
-        linear-gradient(180deg, #f5f8fb 0%, #e8eef3 100%);
-    }
-    .page {
-      min-height: 100vh;
-      padding: 0;
-    }
-    .shell {
-      min-height: 100vh;
-    }
-    .panel {
-      border-radius: 0;
-      border: none;
-      background: transparent;
-      backdrop-filter: none;
-      box-shadow: none;
-    }
-    .actions {
-      display: flex;
-      gap: 8px;
-      flex-wrap: wrap;
-    }
-    button {
-      border: none;
-      border-radius: 999px;
-      padding: 10px 14px;
-      font: inherit;
-      font-weight: 700;
-      cursor: pointer;
-      color: white;
-      background: linear-gradient(135deg, #0f766e, #115e59);
-      box-shadow: 0 10px 22px rgba(15,118,110,0.18);
-    }
-    button.alt {
-      color: var(--ink);
-      background: rgba(255,255,255,0.9);
-      border: 1px solid var(--line);
-      box-shadow: none;
-    }
-    .viewer {
-      position: relative;
-      overflow: hidden;
-      min-height: 100vh;
-    }
-    .viewer-head {
-      position: absolute;
-      top: 16px;
-      left: 16px;
-      right: 16px;
-      z-index: 2;
-      display: flex;
-      justify-content: space-between;
-      gap: 12px;
-      pointer-events: none;
-    }
-    .chip {
-      padding: 10px 12px;
-      border-radius: 16px;
-      background: rgba(255,255,255,0.82);
-      border: 1px solid rgba(255,255,255,0.94);
-      color: var(--muted);
-      font-size: 13px;
-      font-weight: 700;
-      box-shadow: 0 8px 24px rgba(21,35,48,0.08);
-    }
-    .viewer-actions {
-      position: absolute;
-      left: 16px;
-      top: 64px;
-      z-index: 2;
-      display: flex;
-      gap: 8px;
-    }
-    .mapper {
-      position: absolute;
-      top: 76px;
-      left: 50%;
-      transform: translateX(-50%);
-      width: min(94vw, 1320px);
-      max-height: min(56vh, 560px);
-      overflow: hidden;
-      z-index: 4;
-      border-radius: 20px;
-      background: rgba(234, 239, 247, 0.95);
-      border: 1px solid rgba(101, 119, 146, 0.22);
-      box-shadow: 0 18px 36px rgba(15, 23, 42, 0.2);
-      display: flex;
-      flex-direction: column;
-      backdrop-filter: blur(6px);
-    }
-    .hidden-off {
-      display: none !important;
-    }
-    .mapper-head {
-      padding: 10px 14px;
-      border-bottom: 1px solid rgba(101,119,146,0.18);
-      font-size: 12px;
-      color: #51607a;
-      font-weight: 700;
-      line-height: 1.35;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      gap: 10px;
-      background: rgba(255,255,255,0.6);
-    }
-    .mapper-head strong {
-      display: block;
-      color: #17243b;
-      font-size: 20px;
-      margin-bottom: 2px;
-    }
-    .mapper-head .alt {
-      padding: 8px 10px;
-      font-size: 12px;
-      white-space: nowrap;
-    }
-    .org-chart {
-      margin: 0;
-      padding: 14px;
-      overflow: auto;
-      display: grid;
-      gap: 12px;
-    }
-    .org-top {
-      margin: 0 auto;
-      width: min(100%, 420px);
-      border-radius: 14px;
-      overflow: hidden;
-      border: 1px solid rgba(67, 84, 118, 0.25);
-      background: #fff;
-    }
-    .org-top-title {
-      background: #1e2f4d;
-      color: #fff;
-      text-align: center;
-      font-size: 34px;
-      font-weight: 800;
-      line-height: 1.1;
-      padding: 16px 12px;
-      letter-spacing: -0.03em;
-    }
-    .org-top-members {
-      padding: 10px;
-      display: grid;
-      gap: 6px;
-      background: rgba(255,255,255,0.95);
-    }
-    .org-teams {
-      display: grid;
-      grid-template-columns: repeat(7, minmax(160px, 1fr));
-      gap: 10px;
-      align-items: start;
-    }
-    .org-team {
-      border: 1px solid rgba(110, 126, 152, 0.25);
-      border-radius: 10px;
-      overflow: hidden;
-      background: rgba(255,255,255,0.95);
-      min-width: 0;
-    }
-    .org-team h4 {
-      margin: 0;
-      padding: 9px 10px;
-      font-size: 14px;
-      color: #21324e;
-      font-weight: 800;
-      border-bottom: 1px solid rgba(110, 126, 152, 0.2);
-      background: rgba(240, 245, 252, 0.96);
-    }
-    .org-members {
-      padding: 7px;
-      display: grid;
-      gap: 6px;
-    }
-    .org-person {
-      border: 1px solid rgba(116, 133, 161, 0.25);
-      background: rgba(255,255,255,0.95);
-      border-radius: 8px;
-      padding: 6px 8px;
-      cursor: pointer;
-      transition: background 120ms ease, border-color 120ms ease;
-      min-width: 0;
-    }
-    .org-person.active {
-      border-color: rgba(15,118,110,0.6);
-      background: rgba(15,118,110,0.11);
-    }
-    .org-person.assigned {
-      border-color: rgba(37,99,235,0.5);
-      background: rgba(37,99,235,0.1);
-    }
-    .org-person strong {
-      display: block;
-      font-size: 13px;
-      line-height: 1.3;
-      color: #15233a;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-    .org-person small {
-      display: block;
-      color: #5a6a86;
-      font-size: 11px;
-      line-height: 1.25;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-    @media (max-width: 980px) {
-      .mapper {
-        top: 72px;
-        width: min(96vw, 920px);
-        max-height: 58vh;
-      }
-      .viewer-actions {
-        top: 64px;
-        left: 12px;
-        right: 12px;
-        flex-wrap: wrap;
-      }
-      .mapper-head strong {
-        font-size: 16px;
-      }
-      .org-top-title {
-        font-size: 24px;
-      }
-      .org-teams {
-        grid-template-columns: repeat(3, minmax(150px, 1fr));
-      }
-    }
-    canvas {
-      width: 100%;
-      height: 100%;
-      display: block;
-      cursor: grab;
-    }
-    canvas.dragging { cursor: grabbing; }
-    .tooltip {
-      position: absolute;
-      min-width: 170px;
-      padding: 12px 14px;
-      border-radius: 16px;
-      background: rgba(17,24,39,0.94);
-      color: white;
-      pointer-events: none;
-      opacity: 0;
-      transform: translate(12px, 12px);
-      transition: opacity 120ms ease;
-      z-index: 3;
-    }
-    .tooltip.visible { opacity: 1; }
-    .tooltip strong { display: block; margin-bottom: 6px; font-size: 14px; }
-    .tooltip div { font-size: 12px; line-height: 1.45; color: rgba(255,255,255,0.82); }
-  </style>
-</head>
-<body>
-  <div class="page">
-    <div class="shell">
-      <main class="panel viewer">
-        <div class="viewer-head">
-          <div class="chip" id="scale-chip"></div>
-          <div class="chip" id="hover-chip">chair hover: none</div>
-        </div>
-        <div class="viewer-actions">
-          <button type="button" id="fit-btn">전체 맞춤</button>
-          <button type="button" class="alt" id="clear-btn">선택 지우기</button>
-        </div>
-        <aside class="mapper hidden-off">
-          <div class="mapper-head">
-            <div id="mapper-status">
-              <strong>조직 현황</strong>
-              <span>선택 인원 없음</span>
-            </div>
-            <button type="button" class="alt" id="clear-assign-btn">매칭 초기화</button>
-          </div>
-          <div class="org-chart" id="org-chart"></div>
-        </aside>
-        <canvas id="canvas"></canvas>
-        <div class="tooltip" id="tooltip"></div>
-      </main>
-    </div>
-  </div>
-  <script src="./center_chair_people_payload_6f.js"></script>
-  <script>
-    const DATA = window.CHAIR_MAP_DATA;
-    function decodeSegments(base64) {
-      const binary = atob(base64);
-      const bytes = new Uint8Array(binary.length);
-      for (let i = 0; i < binary.length; i += 1) bytes[i] = binary.charCodeAt(i);
-      return new Int32Array(bytes.buffer);
-    }
-    const bgTileRanges = DATA.bgTileRanges;
-    const bgSegValues = decodeSegments(DATA.bgSegsB64);
-    const chairSegValues = decodeSegments(DATA.chairSegsB64);
-    const chairs = DATA.chairs.map(([key, name, kind, start, count]) => ({
-      key, name, kind, start, count
-    }));
-    const meta = DATA.meta;
-    const world = meta.headerBounds;
-    const canvas = document.getElementById("canvas");
-    const ctx = canvas.getContext("2d");
-    const tooltip = document.getElementById("tooltip");
-    const scaleChip = document.getElementById("scale-chip");
-    const hoverChip = document.getElementById("hover-chip");
-    const STORAGE_KEY = "ptc-chair-selection";
-    const PEOPLE_STORAGE_KEY = "ptc-chair-people";
-    const ASSIGN_STORAGE_KEY = "ptc-chair-assignments";
-    const ACTIVE_PERSON_STORAGE_KEY = "ptc-chair-active-person";
-    const clearAssignBtn = document.getElementById("clear-assign-btn");
-    const orgChartEl = document.getElementById("org-chart");
-    const mapperStatus = document.getElementById("mapper-status");
-    // Prevent stale auto-highlights from previous sessions.
-    localStorage.removeItem(STORAGE_KEY);
-    localStorage.removeItem(ACTIVE_PERSON_STORAGE_KEY);
-    localStorage.removeItem(ASSIGN_STORAGE_KEY);
-    const placed = new Set();
-    let people = JSON.parse(localStorage.getItem(PEOPLE_STORAGE_KEY) || "[]");
-    let chairAssignments = {};
-    let activePersonId = null;
-    const ORG_TEMPLATE = {
-      top: {
-        name: "총괄기획실",
-        count: 53,
-        members: [
-          { name: "장종찬", dept: "총괄기획실", title: "기획실장" },
-          { name: "김원식", dept: "총괄기획실", title: "전무이사" },
-        ],
-      },
-      teams: [
-        { name: "경영기획팀", count: 6, members: ["김우진", "임민정", "국혜린", "최선아", "김윤재", "이미영"] },
-        { name: "인재성장팀", count: 5, members: ["조태희", "최근혜", "류원준", "주안기", "정성호"] },
-        { name: "ERP 기획팀", count: 5, members: ["류호성", "문형식", "최요제", "황대일", "이채봉"] },
-        { name: "디자인기획팀", count: 17, members: ["신혜영", "정은혜", "김태식", "최예은", "채선영", "최영환", "윤봄이", "이예진", "허유나", "마희연", "김수현", "박지영", "권순호", "정두휘", "김정석", "정지윤", "양숙영"] },
-        { name: "기술기획팀", count: 11, members: ["김원기", "홍아름", "이경민", "김혜인", "황동환", "최찬호", "이태훈", "김신지", "조찬영", "김용연", "한치영"] },
-        { name: "협업증진팀", count: 3, members: ["성형일", "박주한", "한승민"] },
-        { name: "솔루션통합팀", count: 4, members: ["권혁진", "염승호", "윤준수", "김지영"] },
-      ],
-    };
-    const chairGeometry = chairs.map((chair) => {
-      let minX = Infinity;
-      let minY = Infinity;
-      let maxX = -Infinity;
-      let maxY = -Infinity;
-      const path = new Path2D();
-      const hitSegments = new Float32Array(chair.count * 4);
-      let segCursor = 0;
-      for (let i = chair.start; i < chair.start + chair.count; i += 1) {
-        const offset = i * 4;
-        const x1 = chairSegValues[offset] / 10;
-        const y1 = chairSegValues[offset + 1] / 10;
-        const x2 = chairSegValues[offset + 2] / 10;
-        const y2 = chairSegValues[offset + 3] / 10;
-        path.moveTo(x1, y1);
-        path.lineTo(x2, y2);
-        hitSegments[segCursor] = x1;
-        hitSegments[segCursor + 1] = y1;
-        hitSegments[segCursor + 2] = x2;
-        hitSegments[segCursor + 3] = y2;
-        segCursor += 4;
-        minX = Math.min(minX, x1, x2);
-        minY = Math.min(minY, y1, y2);
-        maxX = Math.max(maxX, x1, x2);
-        maxY = Math.max(maxY, y1, y2);
-      }
-      return {
-        ...chair,
-        minX,
-        minY,
-        maxX,
-        maxY,
-        area: Math.max(1, (maxX - minX) * (maxY - minY)),
-        path,
-        hitSegments,
-      };
-    });
-    function renumberChairKeys(chairItems) {
-      if (!chairItems.length) return;
-      const heights = chairItems
-        .map((chair) => Math.max(1, chair.maxY - chair.minY))
-        .sort((a, b) => a - b);
-      const medianHeight = heights[Math.floor(heights.length / 2)] || 1;
-      const rowTolerance = Math.max(40, medianHeight * 0.9);
-
-      const sorted = [...chairItems].sort((a, b) => {
-        const ay = (a.minY + a.maxY) * 0.5;
-        const by = (b.minY + b.maxY) * 0.5;
-        if (Math.abs(by - ay) > rowTolerance) return by - ay; // top -> bottom
-        const ax = (a.minX + a.maxX) * 0.5;
-        const bx = (b.minX + b.maxX) * 0.5;
-        return ax - bx; // left -> right
-      });
-
-      sorted.forEach((chair, index) => {
-        chair.key = String(index + 1);
-        chair.seatNo = index + 1;
-      });
-    }
-    renumberChairKeys(chairGeometry);
-    const PICK_GRID_SIZE = 1800;
-    const chairPickGrid = new Map();
-    function pickGridKey(gx, gy) {
-      return `${gx},${gy}`;
-    }
-    chairGeometry.forEach((chair, index) => {
-      const minGX = Math.floor(chair.minX / PICK_GRID_SIZE);
-      const maxGX = Math.floor(chair.maxX / PICK_GRID_SIZE);
-      const minGY = Math.floor(chair.minY / PICK_GRID_SIZE);
-      const maxGY = Math.floor(chair.maxY / PICK_GRID_SIZE);
-      for (let gx = minGX; gx <= maxGX; gx += 1) {
-        for (let gy = minGY; gy <= maxGY; gy += 1) {
-          const key = pickGridKey(gx, gy);
-          if (!chairPickGrid.has(key)) chairPickGrid.set(key, []);
-          chairPickGrid.get(key).push(index);
-        }
-      }
-    });
-
-    const camera = { scale: 1, offsetX: 0, offsetY: 0 };
-    let pixelRatio = window.devicePixelRatio || 1;
-    let pointer = { x: 0, y: 0 };
-    let dragging = false;
-    let dragStart = null;
-    let hovered = null;
-    let rafPending = false;
-
-    function normalizePeople(raw) {
-      return raw
-        .map((person, index) => {
-          if (!person || !person.name) return null;
-          return {
-            id: person.id || `person-${index + 1}`,
-            name: String(person.name).trim(),
-            dept: String(person.dept || "").trim(),
-            title: String(person.title || "").trim(),
-          };
-        })
-        .filter(Boolean);
-    }
-
-    function createTemplatePeople() {
-      const generated = [];
-      let seq = 1;
-      ORG_TEMPLATE.top.members.forEach((member) => {
-        generated.push({
-          id: `org-${seq++}`,
-          name: member.name,
-          dept: member.dept,
-          title: member.title,
-        });
-      });
-      ORG_TEMPLATE.teams.forEach((team) => {
-        team.members.forEach((name) => {
-          generated.push({
-            id: `org-${seq++}`,
-            name,
-            dept: team.name,
-            title: "선임",
-          });
-        });
-      });
-      return generated;
-    }
-
-    people = normalizePeople(people);
-    const templateReady = people.some((person) => person.name === "장종찬" && person.dept === "총괄기획실");
-    if (!templateReady) {
-      people = createTemplatePeople();
-      localStorage.setItem(PEOPLE_STORAGE_KEY, JSON.stringify(people));
-    }
-    const chairKeySet = new Set(chairGeometry.map((chair) => chair.key));
-    chairAssignments = Object.fromEntries(
-      Object.entries(chairAssignments).filter(([chairKey, personId]) => (
-        chairKeySet.has(chairKey) && people.some((person) => person.id === personId)
-      ))
-    );
-    if (activePersonId && !people.some((person) => person.id === activePersonId)) activePersonId = null;
-
-    function persistPeople() {
-      localStorage.setItem(PEOPLE_STORAGE_KEY, JSON.stringify(people));
-    }
-
-    function persistAssignments() {
-      localStorage.setItem(ASSIGN_STORAGE_KEY, JSON.stringify(chairAssignments));
-    }
-
-    function persistActivePerson() {
-      if (!activePersonId) localStorage.removeItem(ACTIVE_PERSON_STORAGE_KEY);
-      else localStorage.setItem(ACTIVE_PERSON_STORAGE_KEY, activePersonId);
-    }
-
-    function assignmentCount() {
-      return Object.keys(chairAssignments).length;
-    }
-
-    function getPersonById(id) {
-      return people.find((person) => person.id === id) || null;
-    }
-
-    function getChairByPerson(personId) {
-      for (const [chairKey, assignedPersonId] of Object.entries(chairAssignments)) {
-        if (assignedPersonId === personId) return chairKey;
-      }
-      return null;
-    }
-
-    function renderPeopleList() {
-      const activePerson = getPersonById(activePersonId);
-      const countText = `${assignmentCount()} / ${people.length} 매칭`;
-      mapperStatus.innerHTML = `<strong>조직 현황</strong><span>${activePerson ? `${activePerson.name} 선택됨` : "선택 인원 없음"} · ${countText}</span>`;
-
-      const findPerson = (dept, name) => people.find((person) => person.dept === dept && person.name === name) || null;
-      const personCard = (person, roleText) => {
-        if (!person) return "";
-        const chairKey = getChairByPerson(person.id);
-        const assignedClass = chairKey ? " assigned" : "";
-        const activeClass = person.id === activePersonId ? " active" : "";
-        return `
-          <article class="org-person${assignedClass}${activeClass}" data-person-id="${person.id}">
-            <strong>${person.name}</strong>
-            <small>${person.title || roleText || "-"}</small>
-            <small>${chairKey ? `좌석 ${chairKey}` : "좌석 미지정"}</small>
-          </article>
-        `;
-      };
-
-      const topHtml = ORG_TEMPLATE.top.members
-        .map((member) => personCard(findPerson(member.dept, member.name), member.title))
-        .join("");
-
-      const teamsHtml = ORG_TEMPLATE.teams.map((team) => {
-        const membersHtml = team.members
-          .map((name) => personCard(findPerson(team.name, name), "선임"))
-          .join("");
-        return `
-          <section class="org-team">
-            <h4>${team.name} (${team.count})</h4>
-            <div class="org-members">${membersHtml}</div>
-          </section>
-        `;
-      }).join("");
-
-      orgChartEl.innerHTML = `
-        <section class="org-top">
-          <div class="org-top-title">${ORG_TEMPLATE.top.name} (${ORG_TEMPLATE.top.count})</div>
-          <div class="org-top-members">${topHtml}</div>
-        </section>
-        <section class="org-teams">${teamsHtml}</section>
-      `;
-    }
-
-    function worldToScreen(x, y) {
-      return {
-        x: x * camera.scale + camera.offsetX,
-        y: (world.maxY - y + world.minY) * camera.scale + camera.offsetY,
-      };
-    }
-
-    function screenToWorld(x, y) {
-      return {
-        x: (x - camera.offsetX) / camera.scale,
-        y: world.maxY + world.minY - (y - camera.offsetY) / camera.scale,
-      };
-    }
-
-    function resize() {
-      pixelRatio = window.devicePixelRatio || 1;
-      const rect = canvas.getBoundingClientRect();
-      canvas.width = Math.round(rect.width * pixelRatio);
-      canvas.height = Math.round(rect.height * pixelRatio);
-      ctx.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
-      fit();
-    }
-
-    function fit() {
-      const rect = canvas.getBoundingClientRect();
-      const width = world.maxX - world.minX;
-      const height = world.maxY - world.minY;
-      const pad = 36;
-      const scaleX = (rect.width - pad * 2) / width;
-      const scaleY = (rect.height - pad * 2) / height;
-      camera.scale = Math.min(scaleX, scaleY);
-      camera.offsetX = pad - world.minX * camera.scale + (rect.width - pad * 2 - width * camera.scale) / 2;
-      camera.offsetY = pad - world.minY * camera.scale + (rect.height - pad * 2 - height * camera.scale) / 2;
-      requestDraw();
-    }
-
-    function drawGrid(width, height) {
-      ctx.save();
-      ctx.strokeStyle = "rgba(21,35,48,0.05)";
-      ctx.lineWidth = 1;
-      for (let x = 120; x < width; x += 120) {
-        ctx.beginPath();
-        ctx.moveTo(x, 0);
-        ctx.lineTo(x, height);
-        ctx.stroke();
-      }
-      for (let y = 120; y < height; y += 120) {
-        ctx.beginPath();
-        ctx.moveTo(0, y);
-        ctx.lineTo(width, y);
-        ctx.stroke();
-      }
-      ctx.restore();
-    }
-
-    function pickChair(screenX, screenY) {
-      const threshold = 12;
-      const pointerWorld = screenToWorld(screenX, screenY);
-      const thresholdWorld = threshold / camera.scale;
-      const thresholdWorldSq = thresholdWorld * thresholdWorld;
-      const minGX = Math.floor((pointerWorld.x - thresholdWorld) / PICK_GRID_SIZE);
-      const maxGX = Math.floor((pointerWorld.x + thresholdWorld) / PICK_GRID_SIZE);
-      const minGY = Math.floor((pointerWorld.y - thresholdWorld) / PICK_GRID_SIZE);
-      const maxGY = Math.floor((pointerWorld.y + thresholdWorld) / PICK_GRID_SIZE);
-      const candidateIndexes = [];
-      const seen = new Set();
-      for (let gx = minGX; gx <= maxGX; gx += 1) {
-        for (let gy = minGY; gy <= maxGY; gy += 1) {
-          const candidates = chairPickGrid.get(pickGridKey(gx, gy));
-          if (!candidates) continue;
-          for (const index of candidates) {
-            if (seen.has(index)) continue;
-            seen.add(index);
-            candidateIndexes.push(index);
-          }
-        }
-      }
-      let best = null;
-      for (const index of candidateIndexes) {
-        const chair = chairGeometry[index];
-        if (
-          pointerWorld.x < chair.minX - thresholdWorld ||
-          pointerWorld.x > chair.maxX + thresholdWorld ||
-          pointerWorld.y < chair.minY - thresholdWorld ||
-          pointerWorld.y > chair.maxY + thresholdWorld
-        ) continue;
-        let distSq = Infinity;
-        for (let i = 0; i < chair.hitSegments.length; i += 4) {
-          const x1 = chair.hitSegments[i];
-          const y1 = chair.hitSegments[i + 1];
-          const x2 = chair.hitSegments[i + 2];
-          const y2 = chair.hitSegments[i + 3];
-          const dx = x2 - x1;
-          const dy = y2 - y1;
-          const len2 = dx * dx + dy * dy;
-          let segDistSq;
-          if (len2 === 0) {
-            const px = pointerWorld.x - x1;
-            const py = pointerWorld.y - y1;
-            segDistSq = px * px + py * py;
-          } else {
-            let t = ((pointerWorld.x - x1) * dx + (pointerWorld.y - y1) * dy) / len2;
-            t = Math.max(0, Math.min(1, t));
-            const lx = x1 + t * dx;
-            const ly = y1 + t * dy;
-            const px = pointerWorld.x - lx;
-            const py = pointerWorld.y - ly;
-            segDistSq = px * px + py * py;
-          }
-          if (segDistSq < distSq) distSq = segDistSq;
-          if (distSq <= thresholdWorldSq * 0.3) break;
-        }
-        if (distSq > thresholdWorldSq) continue;
-        const dist = Math.sqrt(distSq) * camera.scale;
-
-        if (!best) {
-          best = { chair, dist };
-          continue;
-        }
-
-        const distGap = dist - best.dist;
-        if (distGap < -0.75) {
-          best = { chair, dist };
-          continue;
-        }
-
-        if (Math.abs(distGap) <= 2) {
-          const areaGap = chair.area - best.chair.area;
-          if (areaGap < -1) {
-            best = { chair, dist };
-            continue;
-          }
-
-          if (
-            Math.abs(areaGap) <= 1 &&
-            chair.kind === "block" &&
-            best.chair.kind !== "block"
-          ) {
-            best = { chair, dist };
-          }
-        }
-      }
-
-      return best ? best.chair : null;
-    }
-
-    function renderTooltip() {
-      if (!hovered) {
-        tooltip.classList.remove("visible");
-        hoverChip.textContent = "chair hover: none";
-        return;
-      }
-      hoverChip.textContent = `chair hover: ${hovered.name}`;
-      tooltip.innerHTML = `
-        <strong>${hovered.name}</strong>
-        <div>chair key: ${hovered.key}</div>
-        <div>${placed.has(hovered.key) ? "선택됨" : "클릭하면 선택"}</div>
-        <div>${chairAssignments[hovered.key] ? `배치: ${(getPersonById(chairAssignments[hovered.key]) || { name: "알수없음" }).name}` : "배치 인원 없음"}</div>
-      `;
-      tooltip.style.left = `${pointer.x + 14}px`;
-      tooltip.style.top = `${pointer.y + 14}px`;
-      tooltip.classList.add("visible");
-    }
-
-    function requestDraw() {
-      if (rafPending) return;
-      rafPending = true;
-      window.requestAnimationFrame(() => {
-        rafPending = false;
-        draw();
-      });
-    }
-
-    function applyWorldTransform() {
-      ctx.setTransform(
-        pixelRatio * camera.scale,
-        0,
-        0,
-        -pixelRatio * camera.scale,
-        pixelRatio * camera.offsetX,
-        pixelRatio * ((world.maxY + world.minY) * camera.scale + camera.offsetY)
-      );
-    }
-
-    function draw() {
-      const rect = canvas.getBoundingClientRect();
-      ctx.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
-      ctx.clearRect(0, 0, rect.width, rect.height);
-      drawGrid(rect.width, rect.height);
-      const viewA = screenToWorld(0, rect.height);
-      const viewB = screenToWorld(rect.width, 0);
-      const viewMinX = Math.min(viewA.x, viewB.x);
-      const viewMaxX = Math.max(viewA.x, viewB.x);
-      const viewMinY = Math.min(viewA.y, viewB.y);
-      const viewMaxY = Math.max(viewA.y, viewB.y);
-
-      ctx.save();
-      applyWorldTransform();
-      ctx.strokeStyle = "rgba(100, 116, 139, 0.28)";
-      ctx.lineWidth = 1 / camera.scale;
-      const tileSize = meta.backgroundTileSize;
-      const tileMinX = Math.floor(viewMinX / tileSize);
-      const tileMaxX = Math.floor(viewMaxX / tileSize);
-      const tileMinY = Math.floor(viewMinY / tileSize);
-      const tileMaxY = Math.floor(viewMaxY / tileSize);
-      for (let tx = tileMinX; tx <= tileMaxX; tx += 1) {
-        for (let ty = tileMinY; ty <= tileMaxY; ty += 1) {
-          const range = bgTileRanges[`${tx},${ty}`];
-          if (!range) continue;
-          const start = range[0];
-          const count = range[1];
-          for (let i = start; i < start + count; i += 1) {
-            const offset = i * 4;
-            const x1 = bgSegValues[offset] / 10;
-            const y1 = bgSegValues[offset + 1] / 10;
-            const x2 = bgSegValues[offset + 2] / 10;
-            const y2 = bgSegValues[offset + 3] / 10;
-            if (
-              Math.max(x1, x2) < viewMinX ||
-              Math.min(x1, x2) > viewMaxX ||
-              Math.max(y1, y2) < viewMinY ||
-              Math.min(y1, y2) > viewMaxY
-            ) continue;
-            ctx.beginPath();
-            ctx.moveTo(x1, y1);
-            ctx.lineTo(x2, y2);
-            ctx.stroke();
-          }
-        }
-      }
-      ctx.restore();
-
-      hovered = dragging ? null : pickChair(pointer.x, pointer.y);
-
-      ctx.save();
-      applyWorldTransform();
-      ctx.lineWidth = 1.45 / camera.scale;
-      ctx.lineCap = "round";
-      ctx.lineJoin = "round";
-      for (const chair of chairGeometry) {
-        if (chair.maxX < viewMinX || chair.minX > viewMaxX || chair.maxY < viewMinY || chair.minY > viewMaxY) continue;
-        const active = hovered && hovered.key === chair.key;
-        const selected = placed.has(chair.key);
-        const assignedPersonId = chairAssignments[chair.key];
-        const activePersonChair = activePersonId && assignedPersonId === activePersonId;
-        const assigned = Boolean(assignedPersonId);
-        const baseWidth = chair.kind === "block" ? 1.45 : 1.35;
-        ctx.strokeStyle = activePersonChair
-          ? "rgba(234, 179, 8, 1)"
-          : assigned
-            ? "rgba(37, 99, 235, 0.98)"
-            : selected
-              ? "rgba(220, 38, 38, 0.98)"
-              : active
-                ? "rgba(15, 118, 110, 0.98)"
-                : chair.kind === "group"
-                  ? "rgba(16, 134, 149, 0.74)"
-                  : "rgba(21, 149, 142, 0.8)";
-        ctx.lineWidth = (activePersonChair ? 2.8 : assigned ? 2.4 : selected ? 2.6 : active ? 2.1 : baseWidth) / camera.scale;
-        ctx.stroke(chair.path);
-      }
-      ctx.restore();
-
-      scaleChip.textContent = `scale ${camera.scale.toFixed(4)}x`;
-      renderTooltip();
-    }
-
-    function persistPlaced() {
-      localStorage.setItem(STORAGE_KEY, JSON.stringify([...placed]));
-    }
-
-    canvas.addEventListener("pointerdown", (event) => {
-      dragging = true;
-      dragStart = { x: event.clientX, y: event.clientY, offsetX: camera.offsetX, offsetY: camera.offsetY };
-      canvas.classList.add("dragging");
-    });
-
-    window.addEventListener("pointerup", (event) => {
-      if (dragging && dragStart) {
-        const move = Math.hypot(event.clientX - dragStart.x, event.clientY - dragStart.y);
-        if (move < 4) {
-          const rect = canvas.getBoundingClientRect();
-          const picked = pickChair(event.clientX - rect.left, event.clientY - rect.top);
-          if (picked) {
-            if (placed.has(picked.key)) placed.delete(picked.key);
-            else placed.add(picked.key);
-            persistPlaced();
-            if (activePersonId) {
-              const currentChair = getChairByPerson(activePersonId);
-              if (chairAssignments[picked.key] === activePersonId) {
-                delete chairAssignments[picked.key];
-              } else {
-                if (currentChair && currentChair !== picked.key) delete chairAssignments[currentChair];
-                chairAssignments[picked.key] = activePersonId;
-              }
-              persistAssignments();
-              renderPeopleList();
-            }
-          }
-        }
-      }
-      dragging = false;
-      dragStart = null;
-      canvas.classList.remove("dragging");
-      requestDraw();
-    });
-
-    window.addEventListener("pointermove", (event) => {
-      const rect = canvas.getBoundingClientRect();
-      pointer = { x: event.clientX - rect.left, y: event.clientY - rect.top };
-      if (dragging && dragStart) {
-        camera.offsetX = dragStart.offsetX + (event.clientX - dragStart.x);
-        camera.offsetY = dragStart.offsetY + (event.clientY - dragStart.y);
-      }
-      requestDraw();
-    });
-
-    canvas.addEventListener("wheel", (event) => {
-      event.preventDefault();
-      const rect = canvas.getBoundingClientRect();
-      const mx = event.clientX - rect.left;
-      const my = event.clientY - rect.top;
-      const before = screenToWorld(mx, my);
-      const factor = event.deltaY < 0 ? 1.08 : 0.92;
-      camera.scale = Math.max(0.002, Math.min(2, camera.scale * factor));
-      const after = worldToScreen(before.x, before.y);
-      camera.offsetX += mx - after.x;
-      camera.offsetY += my - after.y;
-      requestDraw();
-    }, { passive: false });
-
-    document.getElementById("fit-btn").addEventListener("click", fit);
-    document.getElementById("clear-btn").addEventListener("click", () => {
-      placed.clear();
-      persistPlaced();
-      requestDraw();
-    });
-    clearAssignBtn.addEventListener("click", () => {
-      chairAssignments = {};
-      persistAssignments();
-      renderPeopleList();
-      requestDraw();
-    });
-    orgChartEl.addEventListener("click", (event) => {
-      const item = event.target.closest(".org-person[data-person-id]");
-      if (!item) return;
-      const personId = item.getAttribute("data-person-id");
-      activePersonId = personId === activePersonId ? null : personId;
-      persistActivePerson();
-      renderPeopleList();
-      requestDraw();
-    });
-    window.addEventListener("resize", resize);
-    renderPeopleList();
-    resize();
-  </script>
-</body>
-</html>
-
--- a/public/img/location_photo/기술개발센터/팀자리/center_chair_people_map_7f.html
+++ b/public/img/location_photo/기술개발센터/팀자리/center_chair_people_map_7f.html
@@ -1,932 +0,0 @@
-<!DOCTYPE html>
-<html lang="ko">
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>center chair people map 7f</title>
-  <style>
-    :root {
-      --ink: #152330;
-      --muted: #627286;
-      --paper: rgba(255,255,255,0.86);
-      --line: rgba(21,35,48,0.1);
-      --accent: #0f766e;
-      --bg: #edf2f6;
-    }
-    * { box-sizing: border-box; }
-    body {
-      margin: 0;
-      font-family: "IBM Plex Sans KR", "Pretendard", sans-serif;
-      color: var(--ink);
-      background:
-        radial-gradient(circle at top left, rgba(15,118,110,0.11), transparent 22%),
-        linear-gradient(180deg, #f5f8fb 0%, #e8eef3 100%);
-    }
-    .page {
-      min-height: 100vh;
-      padding: 0;
-    }
-    .shell {
-      min-height: 100vh;
-    }
-    .panel {
-      border-radius: 0;
-      border: none;
-      background: transparent;
-      backdrop-filter: none;
-      box-shadow: none;
-    }
-    .actions {
-      display: flex;
-      gap: 8px;
-      flex-wrap: wrap;
-    }
-    button {
-      border: none;
-      border-radius: 999px;
-      padding: 10px 14px;
-      font: inherit;
-      font-weight: 700;
-      cursor: pointer;
-      color: white;
-      background: linear-gradient(135deg, #0f766e, #115e59);
-      box-shadow: 0 10px 22px rgba(15,118,110,0.18);
-    }
-    button.alt {
-      color: var(--ink);
-      background: rgba(255,255,255,0.9);
-      border: 1px solid var(--line);
-      box-shadow: none;
-    }
-    .viewer {
-      position: relative;
-      overflow: hidden;
-      min-height: 100vh;
-    }
-    .viewer-head {
-      position: absolute;
-      top: 16px;
-      left: 16px;
-      right: 16px;
-      z-index: 2;
-      display: flex;
-      justify-content: space-between;
-      gap: 12px;
-      pointer-events: none;
-    }
-    .chip {
-      padding: 10px 12px;
-      border-radius: 16px;
-      background: rgba(255,255,255,0.82);
-      border: 1px solid rgba(255,255,255,0.94);
-      color: var(--muted);
-      font-size: 13px;
-      font-weight: 700;
-      box-shadow: 0 8px 24px rgba(21,35,48,0.08);
-    }
-    .viewer-actions {
-      position: absolute;
-      left: 16px;
-      top: 64px;
-      z-index: 2;
-      display: flex;
-      gap: 8px;
-    }
-    .mapper {
-      position: absolute;
-      top: 76px;
-      left: 50%;
-      transform: translateX(-50%);
-      width: min(94vw, 1320px);
-      max-height: min(56vh, 560px);
-      overflow: hidden;
-      z-index: 4;
-      border-radius: 20px;
-      background: rgba(234, 239, 247, 0.95);
-      border: 1px solid rgba(101, 119, 146, 0.22);
-      box-shadow: 0 18px 36px rgba(15, 23, 42, 0.2);
-      display: flex;
-      flex-direction: column;
-      backdrop-filter: blur(6px);
-    }
-    .hidden-off {
-      display: none !important;
-    }
-    .mapper-head {
-      padding: 10px 14px;
-      border-bottom: 1px solid rgba(101,119,146,0.18);
-      font-size: 12px;
-      color: #51607a;
-      font-weight: 700;
-      line-height: 1.35;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      gap: 10px;
-      background: rgba(255,255,255,0.6);
-    }
-    .mapper-head strong {
-      display: block;
-      color: #17243b;
-      font-size: 20px;
-      margin-bottom: 2px;
-    }
-    .mapper-head .alt {
-      padding: 8px 10px;
-      font-size: 12px;
-      white-space: nowrap;
-    }
-    .org-chart {
-      margin: 0;
-      padding: 14px;
-      overflow: auto;
-      display: grid;
-      gap: 12px;
-    }
-    .org-top {
-      margin: 0 auto;
-      width: min(100%, 420px);
-      border-radius: 14px;
-      overflow: hidden;
-      border: 1px solid rgba(67, 84, 118, 0.25);
-      background: #fff;
-    }
-    .org-top-title {
-      background: #1e2f4d;
-      color: #fff;
-      text-align: center;
-      font-size: 34px;
-      font-weight: 800;
-      line-height: 1.1;
-      padding: 16px 12px;
-      letter-spacing: -0.03em;
-    }
-    .org-top-members {
-      padding: 10px;
-      display: grid;
-      gap: 6px;
-      background: rgba(255,255,255,0.95);
-    }
-    .org-teams {
-      display: grid;
-      grid-template-columns: repeat(7, minmax(160px, 1fr));
-      gap: 10px;
-      align-items: start;
-    }
-    .org-team {
-      border: 1px solid rgba(110, 126, 152, 0.25);
-      border-radius: 10px;
-      overflow: hidden;
-      background: rgba(255,255,255,0.95);
-      min-width: 0;
-    }
-    .org-team h4 {
-      margin: 0;
-      padding: 9px 10px;
-      font-size: 14px;
-      color: #21324e;
-      font-weight: 800;
-      border-bottom: 1px solid rgba(110, 126, 152, 0.2);
-      background: rgba(240, 245, 252, 0.96);
-    }
-    .org-members {
-      padding: 7px;
-      display: grid;
-      gap: 6px;
-    }
-    .org-person {
-      border: 1px solid rgba(116, 133, 161, 0.25);
-      background: rgba(255,255,255,0.95);
-      border-radius: 8px;
-      padding: 6px 8px;
-      cursor: pointer;
-      transition: background 120ms ease, border-color 120ms ease;
-      min-width: 0;
-    }
-    .org-person.active {
-      border-color: rgba(15,118,110,0.6);
-      background: rgba(15,118,110,0.11);
-    }
-    .org-person.assigned {
-      border-color: rgba(37,99,235,0.5);
-      background: rgba(37,99,235,0.1);
-    }
-    .org-person strong {
-      display: block;
-      font-size: 13px;
-      line-height: 1.3;
-      color: #15233a;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-    .org-person small {
-      display: block;
-      color: #5a6a86;
-      font-size: 11px;
-      line-height: 1.25;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-    @media (max-width: 980px) {
-      .mapper {
-        top: 72px;
-        width: min(96vw, 920px);
-        max-height: 58vh;
-      }
-      .viewer-actions {
-        top: 64px;
-        left: 12px;
-        right: 12px;
-        flex-wrap: wrap;
-      }
-      .mapper-head strong {
-        font-size: 16px;
-      }
-      .org-top-title {
-        font-size: 24px;
-      }
-      .org-teams {
-        grid-template-columns: repeat(3, minmax(150px, 1fr));
-      }
-    }
-    canvas {
-      width: 100%;
-      height: 100%;
-      display: block;
-      cursor: grab;
-    }
-    canvas.dragging { cursor: grabbing; }
-    .tooltip {
-      position: absolute;
-      min-width: 170px;
-      padding: 12px 14px;
-      border-radius: 16px;
-      background: rgba(17,24,39,0.94);
-      color: white;
-      pointer-events: none;
-      opacity: 0;
-      transform: translate(12px, 12px);
-      transition: opacity 120ms ease;
-      z-index: 3;
-    }
-    .tooltip.visible { opacity: 1; }
-    .tooltip strong { display: block; margin-bottom: 6px; font-size: 14px; }
-    .tooltip div { font-size: 12px; line-height: 1.45; color: rgba(255,255,255,0.82); }
-  </style>
-</head>
-<body>
-  <div class="page">
-    <div class="shell">
-      <main class="panel viewer">
-        <div class="viewer-head">
-          <div class="chip" id="scale-chip"></div>
-          <div class="chip" id="hover-chip">chair hover: none</div>
-        </div>
-        <div class="viewer-actions">
-          <button type="button" id="fit-btn">전체 맞춤</button>
-          <button type="button" class="alt" id="clear-btn">선택 지우기</button>
-        </div>
-        <aside class="mapper hidden-off">
-          <div class="mapper-head">
-            <div id="mapper-status">
-              <strong>조직 현황</strong>
-              <span>선택 인원 없음</span>
-            </div>
-            <button type="button" class="alt" id="clear-assign-btn">매칭 초기화</button>
-          </div>
-          <div class="org-chart" id="org-chart"></div>
-        </aside>
-        <canvas id="canvas"></canvas>
-        <div class="tooltip" id="tooltip"></div>
-      </main>
-    </div>
-  </div>
-  <script src="./center_chair_people_payload_7f.js"></script>
-  <script>
-    const DATA = window.CHAIR_MAP_DATA;
-    function decodeSegments(base64) {
-      const binary = atob(base64);
-      const bytes = new Uint8Array(binary.length);
-      for (let i = 0; i < binary.length; i += 1) bytes[i] = binary.charCodeAt(i);
-      return new Int32Array(bytes.buffer);
-    }
-    const bgTileRanges = DATA.bgTileRanges;
-    const bgSegValues = decodeSegments(DATA.bgSegsB64);
-    const chairSegValues = decodeSegments(DATA.chairSegsB64);
-    const chairs = DATA.chairs.map(([key, name, kind, start, count]) => ({
-      key, name, kind, start, count
-    }));
-    const meta = DATA.meta;
-    const world = meta.headerBounds;
-    const canvas = document.getElementById("canvas");
-    const ctx = canvas.getContext("2d");
-    const tooltip = document.getElementById("tooltip");
-    const scaleChip = document.getElementById("scale-chip");
-    const hoverChip = document.getElementById("hover-chip");
-    const STORAGE_KEY = "ptc-chair-selection";
-    const PEOPLE_STORAGE_KEY = "ptc-chair-people";
-    const ASSIGN_STORAGE_KEY = "ptc-chair-assignments";
-    const ACTIVE_PERSON_STORAGE_KEY = "ptc-chair-active-person";
-    const clearAssignBtn = document.getElementById("clear-assign-btn");
-    const orgChartEl = document.getElementById("org-chart");
-    const mapperStatus = document.getElementById("mapper-status");
-    // Prevent stale auto-highlights from previous sessions.
-    localStorage.removeItem(STORAGE_KEY);
-    localStorage.removeItem(ACTIVE_PERSON_STORAGE_KEY);
-    localStorage.removeItem(ASSIGN_STORAGE_KEY);
-    const placed = new Set();
-    let people = JSON.parse(localStorage.getItem(PEOPLE_STORAGE_KEY) || "[]");
-    let chairAssignments = {};
-    let activePersonId = null;
-    const ORG_TEMPLATE = {
-      top: {
-        name: "총괄기획실",
-        count: 53,
-        members: [
-          { name: "장종찬", dept: "총괄기획실", title: "기획실장" },
-          { name: "김원식", dept: "총괄기획실", title: "전무이사" },
-        ],
-      },
-      teams: [
-        { name: "경영기획팀", count: 6, members: ["김우진", "임민정", "국혜린", "최선아", "김윤재", "이미영"] },
-        { name: "인재성장팀", count: 5, members: ["조태희", "최근혜", "류원준", "주안기", "정성호"] },
-        { name: "ERP 기획팀", count: 5, members: ["류호성", "문형식", "최요제", "황대일", "이채봉"] },
-        { name: "디자인기획팀", count: 17, members: ["신혜영", "정은혜", "김태식", "최예은", "채선영", "최영환", "윤봄이", "이예진", "허유나", "마희연", "김수현", "박지영", "권순호", "정두휘", "김정석", "정지윤", "양숙영"] },
-        { name: "기술기획팀", count: 11, members: ["김원기", "홍아름", "이경민", "김혜인", "황동환", "최찬호", "이태훈", "김신지", "조찬영", "김용연", "한치영"] },
-        { name: "협업증진팀", count: 3, members: ["성형일", "박주한", "한승민"] },
-        { name: "솔루션통합팀", count: 4, members: ["권혁진", "염승호", "윤준수", "김지영"] },
-      ],
-    };
-    const chairGeometry = chairs.map((chair) => {
-      let minX = Infinity;
-      let minY = Infinity;
-      let maxX = -Infinity;
-      let maxY = -Infinity;
-      const path = new Path2D();
-      const hitSegments = new Float32Array(chair.count * 4);
-      let segCursor = 0;
-      for (let i = chair.start; i < chair.start + chair.count; i += 1) {
-        const offset = i * 4;
-        const x1 = chairSegValues[offset] / 10;
-        const y1 = chairSegValues[offset + 1] / 10;
-        const x2 = chairSegValues[offset + 2] / 10;
-        const y2 = chairSegValues[offset + 3] / 10;
-        path.moveTo(x1, y1);
-        path.lineTo(x2, y2);
-        hitSegments[segCursor] = x1;
-        hitSegments[segCursor + 1] = y1;
-        hitSegments[segCursor + 2] = x2;
-        hitSegments[segCursor + 3] = y2;
-        segCursor += 4;
-        minX = Math.min(minX, x1, x2);
-        minY = Math.min(minY, y1, y2);
-        maxX = Math.max(maxX, x1, x2);
-        maxY = Math.max(maxY, y1, y2);
-      }
-      return {
-        ...chair,
-        minX,
-        minY,
-        maxX,
-        maxY,
-        area: Math.max(1, (maxX - minX) * (maxY - minY)),
-        path,
-        hitSegments,
-      };
-    });
-    function renumberChairKeys(chairItems) {
-      if (!chairItems.length) return;
-      const heights = chairItems
-        .map((chair) => Math.max(1, chair.maxY - chair.minY))
-        .sort((a, b) => a - b);
-      const medianHeight = heights[Math.floor(heights.length / 2)] || 1;
-      const rowTolerance = Math.max(40, medianHeight * 0.9);
-
-      const sorted = [...chairItems].sort((a, b) => {
-        const ay = (a.minY + a.maxY) * 0.5;
-        const by = (b.minY + b.maxY) * 0.5;
-        if (Math.abs(by - ay) > rowTolerance) return by - ay; // top -> bottom
-        const ax = (a.minX + a.maxX) * 0.5;
-        const bx = (b.minX + b.maxX) * 0.5;
-        return ax - bx; // left -> right
-      });
-
-      sorted.forEach((chair, index) => {
-        chair.key = String(index + 1);
-        chair.seatNo = index + 1;
-      });
-    }
-    renumberChairKeys(chairGeometry);
-    const PICK_GRID_SIZE = 1800;
-    const chairPickGrid = new Map();
-    function pickGridKey(gx, gy) {
-      return `${gx},${gy}`;
-    }
-    chairGeometry.forEach((chair, index) => {
-      const minGX = Math.floor(chair.minX / PICK_GRID_SIZE);
-      const maxGX = Math.floor(chair.maxX / PICK_GRID_SIZE);
-      const minGY = Math.floor(chair.minY / PICK_GRID_SIZE);
-      const maxGY = Math.floor(chair.maxY / PICK_GRID_SIZE);
-      for (let gx = minGX; gx <= maxGX; gx += 1) {
-        for (let gy = minGY; gy <= maxGY; gy += 1) {
-          const key = pickGridKey(gx, gy);
-          if (!chairPickGrid.has(key)) chairPickGrid.set(key, []);
-          chairPickGrid.get(key).push(index);
-        }
-      }
-    });
-
-    const camera = { scale: 1, offsetX: 0, offsetY: 0 };
-    let pixelRatio = window.devicePixelRatio || 1;
-    let pointer = { x: 0, y: 0 };
-    let dragging = false;
-    let dragStart = null;
-    let hovered = null;
-    let rafPending = false;
-
-    function normalizePeople(raw) {
-      return raw
-        .map((person, index) => {
-          if (!person || !person.name) return null;
-          return {
-            id: person.id || `person-${index + 1}`,
-            name: String(person.name).trim(),
-            dept: String(person.dept || "").trim(),
-            title: String(person.title || "").trim(),
-          };
-        })
-        .filter(Boolean);
-    }
-
-    function createTemplatePeople() {
-      const generated = [];
-      let seq = 1;
-      ORG_TEMPLATE.top.members.forEach((member) => {
-        generated.push({
-          id: `org-${seq++}`,
-          name: member.name,
-          dept: member.dept,
-          title: member.title,
-        });
-      });
-      ORG_TEMPLATE.teams.forEach((team) => {
-        team.members.forEach((name) => {
-          generated.push({
-            id: `org-${seq++}`,
-            name,
-            dept: team.name,
-            title: "선임",
-          });
-        });
-      });
-      return generated;
-    }
-
-    people = normalizePeople(people);
-    const templateReady = people.some((person) => person.name === "장종찬" && person.dept === "총괄기획실");
-    if (!templateReady) {
-      people = createTemplatePeople();
-      localStorage.setItem(PEOPLE_STORAGE_KEY, JSON.stringify(people));
-    }
-    const chairKeySet = new Set(chairGeometry.map((chair) => chair.key));
-    chairAssignments = Object.fromEntries(
-      Object.entries(chairAssignments).filter(([chairKey, personId]) => (
-        chairKeySet.has(chairKey) && people.some((person) => person.id === personId)
-      ))
-    );
-    if (activePersonId && !people.some((person) => person.id === activePersonId)) activePersonId = null;
-
-    function persistPeople() {
-      localStorage.setItem(PEOPLE_STORAGE_KEY, JSON.stringify(people));
-    }
-
-    function persistAssignments() {
-      localStorage.setItem(ASSIGN_STORAGE_KEY, JSON.stringify(chairAssignments));
-    }
-
-    function persistActivePerson() {
-      if (!activePersonId) localStorage.removeItem(ACTIVE_PERSON_STORAGE_KEY);
-      else localStorage.setItem(ACTIVE_PERSON_STORAGE_KEY, activePersonId);
-    }
-
-    function assignmentCount() {
-      return Object.keys(chairAssignments).length;
-    }
-
-    function getPersonById(id) {
-      return people.find((person) => person.id === id) || null;
-    }
-
-    function getChairByPerson(personId) {
-      for (const [chairKey, assignedPersonId] of Object.entries(chairAssignments)) {
-        if (assignedPersonId === personId) return chairKey;
-      }
-      return null;
-    }
-
-    function renderPeopleList() {
-      const activePerson = getPersonById(activePersonId);
-      const countText = `${assignmentCount()} / ${people.length} 매칭`;
-      mapperStatus.innerHTML = `<strong>조직 현황</strong><span>${activePerson ? `${activePerson.name} 선택됨` : "선택 인원 없음"} · ${countText}</span>`;
-
-      const findPerson = (dept, name) => people.find((person) => person.dept === dept && person.name === name) || null;
-      const personCard = (person, roleText) => {
-        if (!person) return "";
-        const chairKey = getChairByPerson(person.id);
-        const assignedClass = chairKey ? " assigned" : "";
-        const activeClass = person.id === activePersonId ? " active" : "";
-        return `
-          <article class="org-person${assignedClass}${activeClass}" data-person-id="${person.id}">
-            <strong>${person.name}</strong>
-            <small>${person.title || roleText || "-"}</small>
-            <small>${chairKey ? `좌석 ${chairKey}` : "좌석 미지정"}</small>
-          </article>
-        `;
-      };
-
-      const topHtml = ORG_TEMPLATE.top.members
-        .map((member) => personCard(findPerson(member.dept, member.name), member.title))
-        .join("");
-
-      const teamsHtml = ORG_TEMPLATE.teams.map((team) => {
-        const membersHtml = team.members
-          .map((name) => personCard(findPerson(team.name, name), "선임"))
-          .join("");
-        return `
-          <section class="org-team">
-            <h4>${team.name} (${team.count})</h4>
-            <div class="org-members">${membersHtml}</div>
-          </section>
-        `;
-      }).join("");
-
-      orgChartEl.innerHTML = `
-        <section class="org-top">
-          <div class="org-top-title">${ORG_TEMPLATE.top.name} (${ORG_TEMPLATE.top.count})</div>
-          <div class="org-top-members">${topHtml}</div>
-        </section>
-        <section class="org-teams">${teamsHtml}</section>
-      `;
-    }
-
-    function worldToScreen(x, y) {
-      return {
-        x: x * camera.scale + camera.offsetX,
-        y: (world.maxY - y + world.minY) * camera.scale + camera.offsetY,
-      };
-    }
-
-    function screenToWorld(x, y) {
-      return {
-        x: (x - camera.offsetX) / camera.scale,
-        y: world.maxY + world.minY - (y - camera.offsetY) / camera.scale,
-      };
-    }
-
-    function resize() {
-      pixelRatio = window.devicePixelRatio || 1;
-      const rect = canvas.getBoundingClientRect();
-      canvas.width = Math.round(rect.width * pixelRatio);
-      canvas.height = Math.round(rect.height * pixelRatio);
-      ctx.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
-      fit();
-    }
-
-    function fit() {
-      const rect = canvas.getBoundingClientRect();
-      const width = world.maxX - world.minX;
-      const height = world.maxY - world.minY;
-      const pad = 36;
-      const scaleX = (rect.width - pad * 2) / width;
-      const scaleY = (rect.height - pad * 2) / height;
-      camera.scale = Math.min(scaleX, scaleY);
-      camera.offsetX = pad - world.minX * camera.scale + (rect.width - pad * 2 - width * camera.scale) / 2;
-      camera.offsetY = pad - world.minY * camera.scale + (rect.height - pad * 2 - height * camera.scale) / 2;
-      requestDraw();
-    }
-
-    function drawGrid(width, height) {
-      ctx.save();
-      ctx.strokeStyle = "rgba(21,35,48,0.05)";
-      ctx.lineWidth = 1;
-      for (let x = 120; x < width; x += 120) {
-        ctx.beginPath();
-        ctx.moveTo(x, 0);
-        ctx.lineTo(x, height);
-        ctx.stroke();
-      }
-      for (let y = 120; y < height; y += 120) {
-        ctx.beginPath();
-        ctx.moveTo(0, y);
-        ctx.lineTo(width, y);
-        ctx.stroke();
-      }
-      ctx.restore();
-    }
-
-    function pickChair(screenX, screenY) {
-      const threshold = 12;
-      const pointerWorld = screenToWorld(screenX, screenY);
-      const thresholdWorld = threshold / camera.scale;
-      const thresholdWorldSq = thresholdWorld * thresholdWorld;
-      const minGX = Math.floor((pointerWorld.x - thresholdWorld) / PICK_GRID_SIZE);
-      const maxGX = Math.floor((pointerWorld.x + thresholdWorld) / PICK_GRID_SIZE);
-      const minGY = Math.floor((pointerWorld.y - thresholdWorld) / PICK_GRID_SIZE);
-      const maxGY = Math.floor((pointerWorld.y + thresholdWorld) / PICK_GRID_SIZE);
-      const candidateIndexes = [];
-      const seen = new Set();
-      for (let gx = minGX; gx <= maxGX; gx += 1) {
-        for (let gy = minGY; gy <= maxGY; gy += 1) {
-          const candidates = chairPickGrid.get(pickGridKey(gx, gy));
-          if (!candidates) continue;
-          for (const index of candidates) {
-            if (seen.has(index)) continue;
-            seen.add(index);
-            candidateIndexes.push(index);
-          }
-        }
-      }
-      let best = null;
-      for (const index of candidateIndexes) {
-        const chair = chairGeometry[index];
-        if (
-          pointerWorld.x < chair.minX - thresholdWorld ||
-          pointerWorld.x > chair.maxX + thresholdWorld ||
-          pointerWorld.y < chair.minY - thresholdWorld ||
-          pointerWorld.y > chair.maxY + thresholdWorld
-        ) continue;
-        let distSq = Infinity;
-        for (let i = 0; i < chair.hitSegments.length; i += 4) {
-          const x1 = chair.hitSegments[i];
-          const y1 = chair.hitSegments[i + 1];
-          const x2 = chair.hitSegments[i + 2];
-          const y2 = chair.hitSegments[i + 3];
-          const dx = x2 - x1;
-          const dy = y2 - y1;
-          const len2 = dx * dx + dy * dy;
-          let segDistSq;
-          if (len2 === 0) {
-            const px = pointerWorld.x - x1;
-            const py = pointerWorld.y - y1;
-            segDistSq = px * px + py * py;
-          } else {
-            let t = ((pointerWorld.x - x1) * dx + (pointerWorld.y - y1) * dy) / len2;
-            t = Math.max(0, Math.min(1, t));
-            const lx = x1 + t * dx;
-            const ly = y1 + t * dy;
-            const px = pointerWorld.x - lx;
-            const py = pointerWorld.y - ly;
-            segDistSq = px * px + py * py;
-          }
-          if (segDistSq < distSq) distSq = segDistSq;
-          if (distSq <= thresholdWorldSq * 0.3) break;
-        }
-        if (distSq > thresholdWorldSq) continue;
-        const dist = Math.sqrt(distSq) * camera.scale;
-
-        if (!best) {
-          best = { chair, dist };
-          continue;
-        }
-
-        const distGap = dist - best.dist;
-        if (distGap < -0.75) {
-          best = { chair, dist };
-          continue;
-        }
-
-        if (Math.abs(distGap) <= 2) {
-          const areaGap = chair.area - best.chair.area;
-          if (areaGap < -1) {
-            best = { chair, dist };
-            continue;
-          }
-
-          if (
-            Math.abs(areaGap) <= 1 &&
-            chair.kind === "block" &&
-            best.chair.kind !== "block"
-          ) {
-            best = { chair, dist };
-          }
-        }
-      }
-
-      return best ? best.chair : null;
-    }
-
-    function renderTooltip() {
-      if (!hovered) {
-        tooltip.classList.remove("visible");
-        hoverChip.textContent = "chair hover: none";
-        return;
-      }
-      hoverChip.textContent = `chair hover: ${hovered.name}`;
-      tooltip.innerHTML = `
-        <strong>${hovered.name}</strong>
-        <div>chair key: ${hovered.key}</div>
-        <div>${placed.has(hovered.key) ? "선택됨" : "클릭하면 선택"}</div>
-        <div>${chairAssignments[hovered.key] ? `배치: ${(getPersonById(chairAssignments[hovered.key]) || { name: "알수없음" }).name}` : "배치 인원 없음"}</div>
-      `;
-      tooltip.style.left = `${pointer.x + 14}px`;
-      tooltip.style.top = `${pointer.y + 14}px`;
-      tooltip.classList.add("visible");
-    }
-
-    function requestDraw() {
-      if (rafPending) return;
-      rafPending = true;
-      window.requestAnimationFrame(() => {
-        rafPending = false;
-        draw();
-      });
-    }
-
-    function applyWorldTransform() {
-      ctx.setTransform(
-        pixelRatio * camera.scale,
-        0,
-        0,
-        -pixelRatio * camera.scale,
-        pixelRatio * camera.offsetX,
-        pixelRatio * ((world.maxY + world.minY) * camera.scale + camera.offsetY)
-      );
-    }
-
-    function draw() {
-      const rect = canvas.getBoundingClientRect();
-      ctx.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
-      ctx.clearRect(0, 0, rect.width, rect.height);
-      drawGrid(rect.width, rect.height);
-      const viewA = screenToWorld(0, rect.height);
-      const viewB = screenToWorld(rect.width, 0);
-      const viewMinX = Math.min(viewA.x, viewB.x);
-      const viewMaxX = Math.max(viewA.x, viewB.x);
-      const viewMinY = Math.min(viewA.y, viewB.y);
-      const viewMaxY = Math.max(viewA.y, viewB.y);
-
-      ctx.save();
-      applyWorldTransform();
-      ctx.strokeStyle = "rgba(100, 116, 139, 0.28)";
-      ctx.lineWidth = 1 / camera.scale;
-      const tileSize = meta.backgroundTileSize;
-      const tileMinX = Math.floor(viewMinX / tileSize);
-      const tileMaxX = Math.floor(viewMaxX / tileSize);
-      const tileMinY = Math.floor(viewMinY / tileSize);
-      const tileMaxY = Math.floor(viewMaxY / tileSize);
-      for (let tx = tileMinX; tx <= tileMaxX; tx += 1) {
-        for (let ty = tileMinY; ty <= tileMaxY; ty += 1) {
-          const range = bgTileRanges[`${tx},${ty}`];
-          if (!range) continue;
-          const start = range[0];
-          const count = range[1];
-          for (let i = start; i < start + count; i += 1) {
-            const offset = i * 4;
-            const x1 = bgSegValues[offset] / 10;
-            const y1 = bgSegValues[offset + 1] / 10;
-            const x2 = bgSegValues[offset + 2] / 10;
-            const y2 = bgSegValues[offset + 3] / 10;
-            if (
-              Math.max(x1, x2) < viewMinX ||
-              Math.min(x1, x2) > viewMaxX ||
-              Math.max(y1, y2) < viewMinY ||
-              Math.min(y1, y2) > viewMaxY
-            ) continue;
-            ctx.beginPath();
-            ctx.moveTo(x1, y1);
-            ctx.lineTo(x2, y2);
-            ctx.stroke();
-          }
-        }
-      }
-      ctx.restore();
-
-      hovered = dragging ? null : pickChair(pointer.x, pointer.y);
-
-      ctx.save();
-      applyWorldTransform();
-      ctx.lineWidth = 1.45 / camera.scale;
-      ctx.lineCap = "round";
-      ctx.lineJoin = "round";
-      for (const chair of chairGeometry) {
-        if (chair.maxX < viewMinX || chair.minX > viewMaxX || chair.maxY < viewMinY || chair.minY > viewMaxY) continue;
-        const active = hovered && hovered.key === chair.key;
-        const selected = placed.has(chair.key);
-        const assignedPersonId = chairAssignments[chair.key];
-        const activePersonChair = activePersonId && assignedPersonId === activePersonId;
-        const assigned = Boolean(assignedPersonId);
-        const baseWidth = chair.kind === "block" ? 1.45 : 1.35;
-        ctx.strokeStyle = activePersonChair
-          ? "rgba(234, 179, 8, 1)"
-          : assigned
-            ? "rgba(37, 99, 235, 0.98)"
-            : selected
-              ? "rgba(220, 38, 38, 0.98)"
-              : active
-                ? "rgba(15, 118, 110, 0.98)"
-                : chair.kind === "group"
-                  ? "rgba(16, 134, 149, 0.74)"
-                  : "rgba(21, 149, 142, 0.8)";
-        ctx.lineWidth = (activePersonChair ? 2.8 : assigned ? 2.4 : selected ? 2.6 : active ? 2.1 : baseWidth) / camera.scale;
-        ctx.stroke(chair.path);
-      }
-      ctx.restore();
-
-      scaleChip.textContent = `scale ${camera.scale.toFixed(4)}x`;
-      renderTooltip();
-    }
-
-    function persistPlaced() {
-      localStorage.setItem(STORAGE_KEY, JSON.stringify([...placed]));
-    }
-
-    canvas.addEventListener("pointerdown", (event) => {
-      dragging = true;
-      dragStart = { x: event.clientX, y: event.clientY, offsetX: camera.offsetX, offsetY: camera.offsetY };
-      canvas.classList.add("dragging");
-    });
-
-    window.addEventListener("pointerup", (event) => {
-      if (dragging && dragStart) {
-        const move = Math.hypot(event.clientX - dragStart.x, event.clientY - dragStart.y);
-        if (move < 4) {
-          const rect = canvas.getBoundingClientRect();
-          const picked = pickChair(event.clientX - rect.left, event.clientY - rect.top);
-          if (picked) {
-            if (placed.has(picked.key)) placed.delete(picked.key);
-            else placed.add(picked.key);
-            persistPlaced();
-            if (activePersonId) {
-              const currentChair = getChairByPerson(activePersonId);
-              if (chairAssignments[picked.key] === activePersonId) {
-                delete chairAssignments[picked.key];
-              } else {
-                if (currentChair && currentChair !== picked.key) delete chairAssignments[currentChair];
-                chairAssignments[picked.key] = activePersonId;
-              }
-              persistAssignments();
-              renderPeopleList();
-            }
-          }
-        }
-      }
-      dragging = false;
-      dragStart = null;
-      canvas.classList.remove("dragging");
-      requestDraw();
-    });
-
-    window.addEventListener("pointermove", (event) => {
-      const rect = canvas.getBoundingClientRect();
-      pointer = { x: event.clientX - rect.left, y: event.clientY - rect.top };
-      if (dragging && dragStart) {
-        camera.offsetX = dragStart.offsetX + (event.clientX - dragStart.x);
-        camera.offsetY = dragStart.offsetY + (event.clientY - dragStart.y);
-      }
-      requestDraw();
-    });
-
-    canvas.addEventListener("wheel", (event) => {
-      event.preventDefault();
-      const rect = canvas.getBoundingClientRect();
-      const mx = event.clientX - rect.left;
-      const my = event.clientY - rect.top;
-      const before = screenToWorld(mx, my);
-      const factor = event.deltaY < 0 ? 1.08 : 0.92;
-      camera.scale = Math.max(0.002, Math.min(2, camera.scale * factor));
-      const after = worldToScreen(before.x, before.y);
-      camera.offsetX += mx - after.x;
-      camera.offsetY += my - after.y;
-      requestDraw();
-    }, { passive: false });
-
-    document.getElementById("fit-btn").addEventListener("click", fit);
-    document.getElementById("clear-btn").addEventListener("click", () => {
-      placed.clear();
-      persistPlaced();
-      requestDraw();
-    });
-    clearAssignBtn.addEventListener("click", () => {
-      chairAssignments = {};
-      persistAssignments();
-      renderPeopleList();
-      requestDraw();
-    });
-    orgChartEl.addEventListener("click", (event) => {
-      const item = event.target.closest(".org-person[data-person-id]");
-      if (!item) return;
-      const personId = item.getAttribute("data-person-id");
-      activePersonId = personId === activePersonId ? null : personId;
-      persistActivePerson();
-      renderPeopleList();
-      requestDraw();
-    });
-    window.addEventListener("resize", resize);
-    renderPeopleList();
-    resize();
-  </script>
-</body>
-</html>
-
--- a/public/img/location_photo/기술개발센터/팀자리/center_chair_people_map_generated.html
+++ b/public/img/location_photo/기술개발센터/팀자리/center_chair_people_map_generated.html
--- a/Show More
+++ b/Show More