refactor: 프로젝트 정리 및 최적화 (미사용 파일 제거, 코드 중복 제거, 정적 이미지 빌드 경로 수정)

- 미사용 목업 파일(dummyData.ts, realServerData.ts, server_data.json) 및 중복 기획서 제거 - excelHandler.ts 내 미사용 대용량 엑셀 처리 함수들을 삭제하여 xlsx 의존성 제거 및 클라이언트 빌드 크기 최적화 - ListFactory.ts와 utils.ts 간에 중복으로 존재하던 calculatePcScoreDeductive 함수를 하나로 일원화 - 기획서 및 계획 문서들을 docs/plans/ 하위 폴더로 이동하여 프로젝트 루트 정리 - 정적 이미지 폴더(img/)를 public/img/로 이동하여 프로덕션 빌드 시 로고 및 장비 사진 엑박 오류 해결
refactor: CSS 파일 모듈화 및 컴포넌트별 직접 Import 구조 전환 (방안 B)
2026-06-19 15:12:25 +09:00 · 2026-06-19 15:04:36 +09:00 · 2026-06-19 14:55:25 +09:00 · 2026-06-19 13:39:29 +09:00 · 2026-06-18 19:48:23 +09:00 · 2026-06-18 15:56:51 +09:00
63 changed files with 620 additions and 13579 deletions
--- a/PC_사양_적정성_분석_기획서.html
+++ b/PC_사양_적정성_분석_기획서.html
@@ -1,429 +0,0 @@
-<!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/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/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/docs/plans/design_rule.md
+++ b/docs/plans/design_rule.md
--- 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/docs/plans/기능명세서.md
+++ b/docs/plans/기능명세서.md
--- a/index.html
+++ b/index.html
@@ -8,12 +8,6 @@
  <title>한맥가족 자산관리시스템</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>
--- 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 style="margin: 0; display: flex; height: 100vh; overflow: hidden; font-family: sans-serif;">
+<body class="editor-body">

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

  <!-- Right: Control Panel -->
  <div class="sidebar">
-    <h2>Map Editor <small style="font-size: 0.6em; color: #888;">v3.0</small></h2>
+    <h2>Map Editor <small class="editor-version">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" style="height:38px;">전체 삭제</button>
-      <button id="btn-save-server" class="btn btn-primary" style="height:38px;">서버에 즉시 저장</button>
+      <button id="btn-clear-all" class="btn btn-outline">전체 삭제</button>
+      <button id="btn-save-server" class="btn btn-primary">서버에 즉시 저장</button>
      <div id="save-status"></div>
    </div>
  </div>
--- a/public/img/image_92.png
+++ b/public/img/image_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/public/img/location_photo/IDC/서관202.png
+++ b/public/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/기술개발센터/센터내부/센터내부.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
--- 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
--- a/public/img/location_photo/기술개발센터/팀자리/center_chair_people_map_6f.html
+++ b/public/img/location_photo/기술개발센터/팀자리/center_chair_people_map_6f.html
--- a/public/img/location_photo/기술개발센터/팀자리/center_chair_people_map_7f.html
+++ b/public/img/location_photo/기술개발센터/팀자리/center_chair_people_map_7f.html
--- a/public/img/location_photo/기술개발센터/팀자리/center_chair_people_map_generated.html
+++ b/public/img/location_photo/기술개발센터/팀자리/center_chair_people_map_generated.html
--- a/public/img/location_photo/기술개발센터/팀자리/center_chair_people_payload.js
+++ b/public/img/location_photo/기술개발센터/팀자리/center_chair_people_payload.js
--- a/public/img/location_photo/기술개발센터/팀자리/center_chair_people_payload_6f.js
+++ b/public/img/location_photo/기술개발센터/팀자리/center_chair_people_payload_6f.js
--- a/public/img/location_photo/기술개발센터/팀자리/center_chair_people_payload_7f.js
+++ b/public/img/location_photo/기술개발센터/팀자리/center_chair_people_payload_7f.js
--- 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/한맥빌딩/3층.png
+++ b/public/img/location_photo/한맥빌딩/3층.png
--- a/public/img/location_photo/한맥빌딩/4층.png
+++ b/public/img/location_photo/한맥빌딩/4층.png
--- a/public/img/location_photo/한맥빌딩/5층.png
+++ b/public/img/location_photo/한맥빌딩/5층.png
--- a/public/img/location_photo/한맥빌딩/6층.png
+++ b/public/img/location_photo/한맥빌딩/6층.png
--- a/public/img/location_photo/한맥빌딩/7층.png
+++ b/public/img/location_photo/한맥빌딩/7층.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/src/components/Guide.ts
+++ b/src/components/Guide.ts
@@ -1,5 +1,6 @@
 import { createIcons, BookOpen, X, ChevronDown, ChevronRight, RefreshCw } from 'lucide';
 import { state } from '../core/state';
+import './guide.css';

 // ─── 자산별 가이드 콘텐츠 정의 (SW_Table 브랜치 전체 복구) ───
 interface GuideTabConfig {
--- a/src/components/Modal/BaseModal.ts
+++ b/src/components/Modal/BaseModal.ts
@@ -1,5 +1,6 @@
 import { createIcons, X } from 'lucide';
 import { setEditLock } from './ModalUtils';
+import './modal.css';

 /**
 * 모든 모달의 공통 기능을 관리하는 베이스 추상 클래스입니다.
--- a/src/components/Modal/modal.css
+++ b/src/components/Modal/modal.css
--- a/src/components/guide.css
+++ b/src/components/guide.css
--- a/src/core/dummyData.ts
+++ b/src/core/dummyData.ts
--- a/src/core/excelHandler.ts
+++ b/src/core/excelHandler.ts
@@ -1,167 +1,7 @@
-import * as XLSX from 'xlsx';
-import { ASSET_SCHEMA } from './schema';
-import { HardwareAsset, SoftwareAsset, SWUser, HardwareLog, MasterAssetData } from './types';
-
 /**
- * ITAM 엑셀 핸들러 (Database Synchronized Edition)
- * 데이터베이스 실제 스키마 컬럼과 엑셀 헤더를 1:1로 일치시킵니다.
+ * ITAM 엑셀 핸들러 (지정 날짜 포맷팅 유틸리티)
 */

-/**
- * DB 컬럼 순서 및 구성 정의 (실제 DB 스키마 dump 기준)
- */
-const DB_MAPPING: Record<string, (keyof typeof ASSET_SCHEMA)[]> = {
-  pc: [
-    'ASSET_TYPE', 'HW_STATUS', 'CURRENT_DEPT', 'PREV_DEPT', 'USER_POSITION',
-    'EMP_NO', 'CURRENT_USER',
-    'CPU', 'RAM', 'GPU', 'SSD1', 'SSD2', 'HDD1', 'HDD2', 'HDD3', 'HDD4', 'MAC_ADDR',
-    'MANAGER_MAIN', 'MANAGER_SUB', 'PURCHASE_CORP', 'PURCHASE_DATE', 'PURCHASE_AMOUNT',
-    'PURCHASE_VENDOR', 'MEMO', 'MAINBOARD'
-  ],
-  server: [
-    'ASSET_TYPE', 'MODEL_NAME', 'ASSET_PURPOSE', 'HW_STATUS',
-    'CURRENT_DEPT', 'CPU', 'RAM', 'GPU', 'SSD1', 'SSD2', 'HDD1', 'HDD2', 'IP_ADDR',
-    'REMOTE_TOOL', 'REMOTE_ID', 'REMOTE_PW', 'LOCATION', 'LOC_DETAIL', 'MANAGER_MAIN',
-    'PURCHASE_CORP', 'PURCHASE_DATE', 'PURCHASE_AMOUNT', 'PURCHASE_VENDOR',
-    'MEMO', 'PREV_DEPT', 'MANAGER_SUB', 'IP_ADDR2', 'MONITORING', 'HDD3', 'HDD4', 'EMP_NO'
-  ],
-  storage: [
-    'ASSET_TYPE', 'HW_STATUS', 'VOLUME', 'MODEL_NAME',
-    'EMP_NO', 'CURRENT_USER',
-    'SERIAL_NUM', 'LOCATION', 'LOC_DETAIL', 'MANAGER_MAIN', 'MANAGER_SUB',
-    'PURCHASE_CORP', 'PURCHASE_DATE', 'PURCHASE_AMOUNT', 'PURCHASE_VENDOR',
-    'MEMO', 'CURRENT_DEPT', 'PREV_DEPT'
-  ],
-  network: [
-    'PURCHASE_CORP', 'HW_STATUS', 'CURRENT_DEPT', 'PREV_DEPT',
-    'EMP_NO', 'CURRENT_USER',
-    'ASSET_TYPE', 'ASSET_MFR', 'MODEL_NAME', 'LOCATION', 'LOC_DETAIL', 'MANAGER_MAIN',
-    'MANAGER_SUB', 'PURCHASE_DATE', 'PURCHASE_AMOUNT', 'PURCHASE_VENDOR', 'MEMO'
-  ],
-  survey: [ // asset_survey (공간정보장비)
-    'HW_STATUS', 'ASSET_NAME', 'LOCATION', 'LOC_DETAIL',
-    'EMP_NO', 'CURRENT_USER',
-    'MANAGER_MAIN', 'MANAGER_SUB', 'PURCHASE_CORP', 'PURCHASE_DATE', 'PURCHASE_AMOUNT',
-    'PURCHASE_VENDOR', 'MEMO'
-  ],
-  pcParts: [
-    'HW_STATUS', 'ASSET_TYPE', 'ASSET_MFR', 'MODEL_NAME', 'VOLUME',
-    'EMP_NO', 'CURRENT_USER',
-    'MONITOR_INCH', 'LOCATION', 'LOC_DETAIL', 'PURCHASE_CORP', 'PURCHASE_DATE',
-    'PURCHASE_AMOUNT', 'PURCHASE_VENDOR', 'MEMO'
-  ],
-  equipment: [
-    'HW_STATUS', 'ASSET_STATUS', 'ASSET_TYPE', 'ASSET_MFR',
-    'EMP_NO', 'CURRENT_USER',
-    'MODEL_NAME', 'LOCATION', 'LOC_DETAIL', 'MANAGER_MAIN', 'MANAGER_SUB',
-    'PURCHASE_CORP', 'PURCHASE_DATE', 'PURCHASE_AMOUNT', 'PURCHASE_VENDOR',
-    'MEMO'
-  ],
-  officeSupplies: [ // asset_office_supplies (시설자산)
-    'HW_STATUS', 'ASSET_TYPE', 'ASSET_MFR', 'MODEL_NAME',
-    'EMP_NO', 'CURRENT_USER',
-    'ASSET_COUNT', 'LOCATION', 'LOC_DETAIL', 'MANAGER_MAIN', 'MANAGER_SUB',
-    'PURCHASE_CORP', 'PURCHASE_DATE', 'PURCHASE_AMOUNT', 'PURCHASE_VENDOR',
-    'MEMO'
-  ],
-  swInternal: [
-    'SW_FIELD', 'DEV_OBJ', 'SW_STATUS', 'SW_TYPE', 'MANAGER_MAIN',
-    'DEV_MGR', 'PLANNING_MGR', 'SALES_MGR', 'PURCHASE_CORP', 'MEMO'
-  ],
-  swExternal: [
-    'PRODUCT_NAME', 'SW_TYPE', 'SW_STATUS', 'SW_FIELD', 'CURRENT_DEPT',
-    'PREV_DEPT', 'MANAGER_MAIN', 'PURCHASE_CORP', 'PURCHASE_DATE', 'PURCHASE_AMOUNT',
-    'PURCHASE_VENDOR', 'EMAIL_ACCOUNT', 'MEMO', 'EMP_NO', 'CURRENT_USER'
-  ],
-  cloud: [
-    'ASSET_PURPOSE', 'PURCHASE_METHOD', 'PURCHASE_VENDOR', 'PURCHASE_CORP',
-    'PURCHASE_DATE', 'PURCHASE_AMOUNT', 'MANAGER_MAIN', 'MANAGER_SUB',
-    'MEMO', 'SW_ID', 'SW_PW'
-  ],
-  domain: [
-    'DOMAIN_ADDR', 'ASSET_PURPOSE', 'PURCHASE_VENDOR', 'ASSET_TYPE',
-    'PURCHASE_CORP', 'PURCHASE_DATE', 'PURCHASE_AMOUNT', 'MANAGER_MAIN', 'MANAGER_SUB',
-    'MEMO'
-  ],
-  cost: [
-    'ASSET_TYPE', 'ASSET_PURPOSE', 'LOCATION', 'LOC_DETAIL', 'MANAGER_MAIN',
-    'MANAGER_SUB', 'PURCHASE_CORP', 'PURCHASE_DATE', 'PURCHASE_AMOUNT', 'PURCHASE_VENDOR',
-    'EMAIL_ACCOUNT', 'EMAIL_PW', 'MEMO', 'EMP_NO', 'CURRENT_USER'
-  ],
-  vip: [ // asset_vip (선물)
-    'ASSET_NAME', 'MODEL_NAME', 'LOCATION', 'LOC_DETAIL',
-    'PURCHASE_CORP', 'PURCHASE_DATE', 'EXPIRED_DATE', 'PURCHASE_VENDOR', 'MEMO'
-  ]
-};
-
-export function downloadTemplate() {
-  const wb = XLSX.utils.book_new();
-  
-  const tabConfigs = [
-    { name: 'PC', key: 'pc' },
-    { name: '서버', key: 'server' },
-    { name: '스토리지', key: 'storage' },
-    { name: '공간정보장비', key: 'survey' },
-    { name: 'PC부품', key: 'pcParts' },
-    { name: '네트워크', key: 'network' },
-    { name: '업무지원장비', key: 'equipment' },
-    { name: '내부SW', key: 'swInternal' },
-    { name: '외부SW', key: 'swExternal' },
-    { name: '클라우드', key: 'cloud' },
-    { name: '도메인', key: 'domain' },
-    { name: '비용관리', key: 'cost' },
-    { name: '선물', key: 'vip' },
-    { name: '시설자산', key: 'officeSupplies' }
-  ];
-
-  tabConfigs.forEach(config => {
-    const keys = DB_MAPPING[config.key];
-    const headers = keys.map(k => ASSET_SCHEMA[k].ui);
-    const ws = XLSX.utils.aoa_to_sheet([headers]);
-    ws['!cols'] = Array(headers.length).fill({ wch: 20 });
-    XLSX.utils.book_append_sheet(wb, ws, config.name);
-  });
-
-  XLSX.writeFile(wb, 'itam_template_db_aligned.xlsx');
-}
-
-export function exportToExcel(masterData: MasterAssetData) {
-  const wb = XLSX.utils.book_new();
-  
-  const exportConfigs = [
-    { name: 'PC', list: masterData.pc, key: 'pc' },
-    { name: '서버', list: masterData.server, key: 'server' },
-    { name: '스토리지', list: masterData.storage, key: 'storage' },
-    { name: '공간정보장비', list: masterData.survey || [], key: 'survey' },
-    { name: 'PC부품', list: masterData.pcParts || [], key: 'pcParts' },
-    { name: '네트워크', list: masterData.network || [], key: 'network' },
-    { name: '업무지원장비', list: masterData.equipment || [], key: 'equipment' },
-    { name: '내부SW', list: masterData.swInternal, key: 'swInternal' },
-    { name: '외부SW', list: masterData.swExternal, key: 'swExternal' },
-    { name: '클라우드', list: masterData.cloud || [], key: 'cloud' },
-    { name: '도메인', list: masterData.domain || [], key: 'domain' },
-    { name: '비용관리', list: masterData.cost || [], key: 'cost' },
-    { name: '선물', list: masterData.vip || [], key: 'vip' },
-    { name: '시설자산', list: masterData.officeSupplies || [], key: 'officeSupplies' }
-  ];
-
-  exportConfigs.forEach(config => {
-    const schemaKeys = DB_MAPPING[config.key];
-    const headers = schemaKeys.map(k => ASSET_SCHEMA[k].ui);
-    const rows = config.list.map(asset => 
-      schemaKeys.map(k => {
-        const dbField = ASSET_SCHEMA[k].db;
-        return asset[dbField] || asset[ASSET_SCHEMA[k].key] || '';
-      })
-    );
-    
-    const ws = XLSX.utils.aoa_to_sheet([headers, ...rows]);
-    XLSX.utils.book_append_sheet(wb, ws, config.name);
-  });
-
-  XLSX.writeFile(wb, `itam_export_${new Date().toISOString().split('T')[0]}.xlsx`);
-}
-
 export function formatExcelDate(val: any): string {
  if (!val) return '';
  if (typeof val === 'number') {
@@ -173,54 +13,3 @@ export function formatExcelDate(val: any): string {
  }
  return String(val);
 }
-
-export async function parseExcel(file: File): Promise<any> {
-  return new Promise((resolve, reject) => {
-    const reader = new FileReader();
-    reader.onload = (e) => {
-      try {
-        const workbook = XLSX.read(e.target?.result, { type: 'array' });
-        const parsedData: any = {};
-        
-        workbook.SheetNames.forEach(sheetName => {
-          const ws = workbook.Sheets[sheetName];
-          const rows = XLSX.utils.sheet_to_json(ws, { defval: "" }) as any[];
-          const list: any[] = [];
-
-          rows.forEach(r => {
-            const data: any = { id: Math.random().toString(36).substring(2, 9) };
-            
-            // Set default category based on sheet name
-            data['category'] = sheetName;
-            
-            Object.keys(r).forEach(label => {
-              const schemaEntry = Object.values(ASSET_SCHEMA).find(s => s.ui === label);
-              const key = schemaEntry ? schemaEntry.db : label;
-              let val = r[label];
-              
-              if (label.includes('일자') || label.includes('연월') || label.includes('만료일') || label.includes('시작일')) {
-                val = formatExcelDate(val);
-              }
-              data[key] = val;
-            });
-
-            list.push(data);
-          });
-          
-          // Sheet Name Mapping back to state keys
-          const nameMap: Record<string, string> = {
-            'PC': 'pc', '서버': 'server', '스토리지': 'storage', '공간정보장비': 'survey',
-            'PC부품': 'pcParts', '네트워크': 'network', '업무지원장비': 'equipment',
-            '내부SW': 'swInternal', '외부SW': 'swExternal', '클라우드': 'cloud',
-            '도메인': 'domain', '비용관리': 'cost', '선물': 'vip', '시설자산': 'officeSupplies'
-          };
-          
-          const stateKey = nameMap[sheetName] || sheetName;
-          if (list.length > 0) parsedData[stateKey] = list;
-        });
-        resolve(parsedData);
-      } catch (err) { reject(err); }
-    };
-    reader.readAsArrayBuffer(file);
-  });
-}
--- a/src/core/realServerData.ts
+++ b/src/core/realServerData.ts
--- a/src/core/state.ts
+++ b/src/core/state.ts
@@ -1,6 +1,5 @@
 import { HardwareAsset, SoftwareAsset, SWUser, HardwareLog, MasterAssetData, SystemUser } from './types';
 import { API_BASE_URL } from './utils';
-import { dummyPCs, dummyServers, dummyStorages, dummyEquips, dummySubSw, dummyPermSw, dummyCloud, dummyDomain, dummySwUsers, dummyLogs } from './dummyData';

 // --- State Definitions ---
 export interface AppState {
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,3 +1,5 @@
+import './styles/common.css';
+import './styles/login.css';
 import { state, loadMasterDataFromDB, saveAsset } from './core/state';
 import { renderNavigation } from './components/Navigation';
 import { renderDashboard } from './views/DashboardView';
@@ -30,19 +32,17 @@ function refreshView(tab?: string) {
    return;
  }

-  // 서버 탭이 아닐 경우 '자산현황(위치)' 뷰 진입 방지 및 강제 리스트 모드 전환
-  if (activeTab !== '서버' && state.viewMode === 'location') {
-    state.viewMode = 'list';
-  }
-
+  // 서버 탭이 아닐 경우에는 state.viewMode가 location이더라도 강제로 목록(list) 뷰를 그리도록 함
+  // (state.viewMode의 원래 상태는 보존하여, 서버 탭 복귀 시 최근 보던 모드를 유지함)
  const isServerTab = activeTab === '서버';
+  const effectiveViewMode = isServerTab ? state.viewMode : 'list';
  
  mainContent.innerHTML = `
    <div id="view-body" class="view-container"></div>
  `;

  const viewBody = document.getElementById('view-body')!;
-  if (state.viewMode === 'location') {
+  if (effectiveViewMode === 'location') {
    renderLocationView(viewBody);
  } else {
    renderSWTable(viewBody);    // 리스트 형식
--- a/src/map-editor-main.ts
+++ b/src/map-editor-main.ts
@@ -1,5 +1,5 @@
 import './styles/common.css';
-import './styles/map-editor.css';
+import './views/map-editor.css';
 import { MapEditor } from './views/MapEditor';

 document.addEventListener('DOMContentLoaded', () => {
--- a/src/server_data.json
+++ b/src/server_data.json
@@ -1,13 +0,0 @@
-[
-  {
-    "법인": "(주)회사1",
-    "자산코드": "ASSET-100",
-    "명칭": "서버 모델A",
-    "위치": "본사 1층",
-    "관리자": "관리자A",
-    "IP주소": "192.168.0.1",
-    "MACaddress": "00:00:00:00:00:01",
-    "HW사양": "Core i7, 16GB RAM",
-    "OS": "Windows 10"
-  }
-]
--- a/src/views/Dashboard/HwDashboard.ts
+++ b/src/views/Dashboard/HwDashboard.ts
--- a/src/views/Dashboard/dashboard.css
+++ b/src/views/Dashboard/dashboard.css
--- a/src/views/DashboardView.ts
+++ b/src/views/DashboardView.ts
@@ -1,6 +1,7 @@
 import { state } from '../core/state';
 import { renderHwDashboard } from './Dashboard/HwDashboard';
 import { renderSwDashboard } from './Dashboard/SwDashboard';
+import './Dashboard/dashboard.css';

 /**
 * 대시보드 렌더링 통합 허브 (Vercel Style Normalized)
--- a/src/views/List/ListFactory.ts
+++ b/src/views/List/ListFactory.ts
@@ -1,137 +1,14 @@
 import { ASSET_SCHEMA, UI_TEXT } from '../../core/schema';
-import { dynamicSort, renderPageHeader, calculateAssetAge, formatInline, isWindows11Incompatible } from '../../core/utils';
+import { dynamicSort, renderPageHeader, calculateAssetAge, formatInline, isWindows11Incompatible, calculatePcScoreDeductive } from '../../core/utils';
 import { setupTableSorting, SortState } from '../../core/tableHandler';
 import { renderFilterBar, applyCommonFilters } from '../../core/filterHandler';
 import { state } from '../../core/state';
 import { IMAGE_LOCATIONS } from '../../components/Modal/SharedData';
+import './table.css';

 declare var Chart: any;
 let pcFlowChartInstance: any = null;

-// ─── 100점 만점 감점형 성능 점수 계산 (CPU + RAM + GPU + 연식) ───
-function calculatePcScoreDeductive(cpu: string, ram: string, gpu: string, purchaseDate: string): number {
-  let score = 100;
-  if (!cpu) cpu = '';
-  if (!ram) ram = '';
-  if (!gpu) gpu = '';
-
-  const cpuUpper = cpu.toUpperCase();
-  const ramUpper = ram.toUpperCase();
-  const gpuUpper = gpu.toUpperCase();
-
-  // 1. CPU 등급 감점 (최대 -30점)
-  let cpuDeduction = 0;
-  if (cpuUpper.includes('I9') || cpuUpper.includes('RYZEN 9') || cpuUpper.includes('RYZEN9')) {
-    cpuDeduction = 0;
-  } else if (cpuUpper.includes('I7') || cpuUpper.includes('RYZEN 7') || cpuUpper.includes('RYZEN7')) {
-    cpuDeduction = 5;
-  } else if (cpuUpper.includes('I5') || cpuUpper.includes('RYZEN 5') || cpuUpper.includes('RYZEN5')) {
-    cpuDeduction = 15;
-  } else if (cpuUpper.includes('I3') || cpuUpper.includes('RYZEN 3') || cpuUpper.includes('RYZEN3')) {
-    cpuDeduction = 25;
-  } else {
-    cpuDeduction = 30;
-  }
-  score -= cpuDeduction;
-
-  // 2. 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;
-  }
-  score -= genDeduction;
-
-  // 3. RAM 용량 감점 (최대 -25점)
-  const ramMatch = ramUpper.match(/(\d+)\s*GB/);
-  let ramDeduction = 25;
-  if (ramMatch && ramMatch[1]) {
-    const ramVal = parseInt(ramMatch[1], 10);
-    if (ramVal >= 32) ramDeduction = 0;
-    else if (ramVal >= 16) ramDeduction = 10;
-    else if (ramVal >= 8) ramDeduction = 20;
-    else ramDeduction = 25;
-  }
-  score -= ramDeduction;
-
-  // 4. GPU 성능 감점 (최대 -25점)
-  let gpuDeduction = 25;
-  if (!gpuUpper || gpuUpper === '-' || gpuUpper.trim() === '') {
-    gpuDeduction = 25;
-  } else if (
-    gpuUpper.includes('RTX 4090') || gpuUpper.includes('RTX 4080') || gpuUpper.includes('RTX 4070') ||
-    gpuUpper.includes('RTX 3090') || gpuUpper.includes('RTX 3080') ||
-    gpuUpper.includes('RTX A5000') || gpuUpper.includes('RTX A6000') || gpuUpper.includes('RTX A4000')
-  ) {
-    gpuDeduction = 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')
-  ) {
-    gpuDeduction = 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')
-  ) {
-    gpuDeduction = 15;
-  } else {
-    gpuDeduction = 25;
-  }
-  score -= gpuDeduction;
-
-  // 5. 연식(노후도) 감점 (최대 -15점)
-  let age = 0;
-  if (purchaseDate && purchaseDate !== '-') {
-    let normalized = purchaseDate.replace(/\./g, '-').trim();
-    if (/^\d{6}$/.test(normalized)) {
-      normalized = `${normalized.substring(0, 4)}-${normalized.substring(4, 6)}`;
-    }
-    const purchase = new Date(normalized);
-    if (!isNaN(purchase.getTime())) {
-      // 2026년 5월 31일 기준 경과연수 계산
-      const mockToday = new Date('2026-05-31');
-      const diffMs = mockToday.getTime() - purchase.getTime();
-      age = diffMs / (1000 * 60 * 60 * 24 * 365.25);
-      age = Math.max(0, parseFloat(age.toFixed(1)));
-    }
-  }
-
-  let ageDeduction = 0;
-  if (age < 1) ageDeduction = 0;
-  else if (age < 2) ageDeduction = 3;
-  else if (age < 3) ageDeduction = 6;
-  else if (age < 4) ageDeduction = 9;
-  else if (age < 5) ageDeduction = 12;
-  else ageDeduction = 15;
-
-  score -= ageDeduction;
-
-  return Math.max(10, score);
-}
-
 export interface ColumnDef {
  header: string;           
  sortKey?: string;         
@@ -153,6 +30,7 @@ export interface ListViewConfig {
    showField?: boolean;
    showType?: boolean;
    showStatus?: boolean;
+    showPosition?: boolean;
  };
  columns: ColumnDef[];
  onRowClick?: (asset: any) => void;
@@ -176,11 +54,7 @@ export function createListView(container: HTMLElement, config: ListViewConfig) {
  }
  let currentFilters: any = (state as any).listFilters[filterKey];
  
-  // 서버 탭이 아닐 경우 '자산 현황' 뷰 진입 방지 및 강제 'asset' 모드 (PC 탭은 자산 현황 숨김)
  const isServer = config.title === '서버';
-  if (!isServer) {
-    (state as any).currentViewMode = 'asset';
-  }

  // 1. 컨텐츠 영역 생성 (먼저 생성하여 참조 가능하게 함)
  const contentWrapper = document.createElement('div');
@@ -450,35 +324,63 @@ export function createListView(container: HTMLElement, config: ListViewConfig) {
        });

        // DB 기준 사양 데이터 맵핑 (state.masterData.jobSpecs 이용)
-        const jobSpecsMap: Record<string, number> = {};
+        const jobSpecsMap: Record<string, string> = {};
        if (state.masterData.jobSpecs) {
          state.masterData.jobSpecs.forEach((s: any) => {
-            jobSpecsMap[s.job_name] = s.min_score;
+            jobSpecsMap[s.job_name] = s.required_grade || '중급';
          });
        }

+        // 사용자 이름 → 세부 직무 맵 생성 (system_users.position 기준)
+        const userPositionMap: Record<string, string> = {};
+        if (state.masterData.users) {
+          state.masterData.users.forEach((u: any) => {
+            if (u.user_name && u.position) {
+              userPositionMap[u.user_name.trim()] = u.position.trim();
+            }
+          });
+        }
+
+        const GRADE_RANK: Record<string, number> = {
+          'premium': 4, '최상급': 4,
+          'high': 3,    '상급': 3,
+          'normal': 2,  '중급': 2,
+          'entry': 1,   '보급': 1,
+          'replace': 0, '교체 대상': 0
+        };
+
        // 기준 대비 사양 부족/오버스펙 분류
        const criticalPcList: any[] = [];
        pcs.forEach((pc: any) => {
-          const job = pc[ASSET_SCHEMA.USER_POSITION.key] || '미분류';
+          const userName = (pc[ASSET_SCHEMA.CURRENT_USER.key] || '').trim();
+          const job = userPositionMap[userName] || pc[ASSET_SCHEMA.USER_POSITION.key] || '미분류';
          const score = pc['_pc_score'];
-          const standardScore = jobSpecsMap[job] !== undefined ? jobSpecsMap[job] : (jobScores[job]?.avg || 0);
+          const requiredGrade = jobSpecsMap[job] || jobSpecsMap[pc[ASSET_SCHEMA.USER_POSITION.key]] || '중급';
          
          const cpu = pc[ASSET_SCHEMA.CPU.key] || '';
          const ram = pc[ASSET_SCHEMA.RAM.key] || '';
          const win11Incompatible = isWindows11Incompatible(cpu, ram);
          
+          let actualGrade = 'replace';
+          if (score >= 85) actualGrade = 'premium';
+          else if (score >= 70) actualGrade = 'high';
+          else if (score >= 40) actualGrade = 'normal';
+          else if (score >= 20) actualGrade = 'entry';
+
+          const reqRank = GRADE_RANK[requiredGrade] !== undefined ? GRADE_RANK[requiredGrade] : 2;
+          const actRank = GRADE_RANK[actualGrade] !== undefined ? GRADE_RANK[actualGrade] : 0;
+
          let isUnder = false;
-          if (standardScore > 0) {
-            if (score < standardScore * 0.6) {
+          if (job !== '재고PC') {
+            if (win11Incompatible) {
              isUnder = true;
              pc['_spec_status'] = '사양 부족';
-            } else if (score > standardScore * 1.5 && !win11Incompatible) {
+            } else if (actRank < reqRank) {
+              isUnder = true;
+              pc['_spec_status'] = '사양 부족';
+            } else if (actRank > reqRank) {
              pc['_spec_status'] = '오버스펙';
              criticalPcList.push(pc);
-            } else if (win11Incompatible) {
-              isUnder = true;
-              pc['_spec_status'] = '사양 부족';
            } else {
              pc['_spec_status'] = '적정';
            }
@@ -496,16 +398,38 @@ export function createListView(container: HTMLElement, config: ListViewConfig) {
          }
        });

-        // 정렬: 기준 점수 대비 사양 부족이 심한 순(비율이 낮은 순)으로 정렬
+        // 정렬: 요구 등급 대비 실제 성능이 많이 부족한 순(등급 편차가 큰 순)으로 정렬
        criticalPcList.sort((a: any, b: any) => {
-          const jobA = a[ASSET_SCHEMA.USER_POSITION.key] || '미분류';
-          const jobB = b[ASSET_SCHEMA.USER_POSITION.key] || '미분류';
-          const stdA = jobSpecsMap[jobA] !== undefined ? jobSpecsMap[jobA] : (jobScores[jobA]?.avg || 0);
-          const stdB = jobSpecsMap[jobB] !== undefined ? jobSpecsMap[jobB] : (jobScores[jobB]?.avg || 0);
+          const userNameA = (a[ASSET_SCHEMA.CURRENT_USER.key] || '').trim();
+          const userNameB = (b[ASSET_SCHEMA.CURRENT_USER.key] || '').trim();
+          const jobA = userPositionMap[userNameA] || a[ASSET_SCHEMA.USER_POSITION.key] || '미분류';
+          const jobB = userPositionMap[userNameB] || b[ASSET_SCHEMA.USER_POSITION.key] || '미분류';
          
-          const ratioA = stdA > 0 ? a['_pc_score'] / stdA : 1;
-          const ratioB = stdB > 0 ? b['_pc_score'] / stdB : 1;
-          return ratioA - ratioB;
+          const reqA = jobSpecsMap[jobA] || jobSpecsMap[a[ASSET_SCHEMA.USER_POSITION.key]] || '중급';
+          const reqB = jobSpecsMap[jobB] || jobSpecsMap[b[ASSET_SCHEMA.USER_POSITION.key]] || '중급';
+          
+          const scoreA = a['_pc_score'];
+          const scoreB = b['_pc_score'];
+          
+          let actA = 'replace';
+          if (scoreA >= 85) actA = 'premium';
+          else if (scoreA >= 70) actA = 'high';
+          else if (scoreA >= 40) actA = 'normal';
+          else if (scoreA >= 20) actA = 'entry';
+
+          let actB = 'replace';
+          if (scoreB >= 85) actB = 'premium';
+          else if (scoreB >= 70) actB = 'high';
+          else if (scoreB >= 40) actB = 'normal';
+          else if (scoreB >= 20) actB = 'entry';
+
+          const devA = (GRADE_RANK[reqA] || 2) - (GRADE_RANK[actA] || 0);
+          const devB = (GRADE_RANK[reqB] || 2) - (GRADE_RANK[actB] || 0);
+
+          if (devA !== devB) {
+            return devB - devA; // 편차가 큰 것(더 많이 부족한 것)이 먼저 정렬됨
+          }
+          return scoreA - scoreB; // 편차가 같으면 성능 점수가 낮은 순
        });

        if (criticalPcList.length === 0) {
@@ -709,7 +633,6 @@ export function createListView(container: HTMLElement, config: ListViewConfig) {
                <td class="text-center">${asset[ASSET_SCHEMA.LOC_DETAIL.key] || '-'}</td>
              </tr>`;
            }).join('');
-
        tbody.querySelectorAll('.mini-row').forEach(row => {
          row.addEventListener('click', () => {
            tbody.querySelectorAll('.mini-row').forEach(r => r.classList.remove('active'));
@@ -767,7 +690,8 @@ export function createListView(container: HTMLElement, config: ListViewConfig) {

  const switchView = () => {
    contentWrapper.innerHTML = '';
-    if ((state as any).currentViewMode === 'asset') {
+    const isAssetMode = !isServer || state.viewMode === 'list';
+    if (isAssetMode) {
      filterBar.style.display = 'flex'; contentWrapper.style.overflowY = 'hidden';
      contentWrapper.appendChild(tableWrapper); updateTable();
    } else {
@@ -784,7 +708,7 @@ export function createListView(container: HTMLElement, config: ListViewConfig) {
    extraHTML: isServer ? `
      <div class="search-item">
        <label class="list-view-toggle-label">
-          <input type="checkbox" id="chk-list-view" ${(state as any).currentViewMode === 'asset' ? 'checked' : ''} />
+          <input type="checkbox" id="chk-list-view" ${state.viewMode === 'list' ? 'checked' : ''} />
          목록보기
        </label>
      </div>
@@ -806,7 +730,7 @@ export function createListView(container: HTMLElement, config: ListViewConfig) {
        </button>
      ` : ''}
      <button id="btn-add-asset" class="btn btn-primary">
-        <i data-lucide="plus" class="icon-sm"></i> 자산 추가
+        <i data-lucide="plus" class="icon-sm"></i> ${config.title === '직무별 기준 사양' ? '기준 사양 추가' : (config.title === '부품 마스터' ? '표준 부품 추가' : '자산 추가')}
      </button>
    `;
    
@@ -828,13 +752,11 @@ export function createListView(container: HTMLElement, config: ListViewConfig) {
    const chkBox = filterBar.querySelector('#chk-list-view') as HTMLInputElement;
    
    const handleToggle = () => {
-        const isListMode = (state as any).currentViewMode === 'asset';
+        const isListMode = chkBox.checked;
        if (isListMode) {
-            state.viewMode = 'location';
-            (state as any).currentViewMode = 'location';
-        } else {
            state.viewMode = 'list';
-            (state as any).currentViewMode = 'asset';
+        } else {
+            state.viewMode = 'location';
        }
        window.dispatchEvent(new Event('refresh-view'));
    };
--- a/src/views/List/table.css
+++ b/src/views/List/table.css
--- a/src/views/LocationView.ts
+++ b/src/views/LocationView.ts
@@ -163,15 +163,13 @@ export async function renderLocationView(container: HTMLElement) {
    const chkBox = container.querySelector('#chk-list-view-loc') as HTMLInputElement;

    if (chkBox) {
-        chkBox.checked = (state as any).currentViewMode === 'asset';
+        chkBox.checked = state.viewMode === 'list';
        const handleToggle = () => {
            const isListMode = chkBox.checked;
            if (isListMode) {
                state.viewMode = 'list';
-                (state as any).currentViewMode = 'asset';
            } else {
                state.viewMode = 'location';
-                (state as any).currentViewMode = 'location';
            }
            window.dispatchEvent(new Event('refresh-view'));
        };
--- a/src/views/MapEditor.ts
+++ b/src/views/MapEditor.ts
@@ -250,8 +250,8 @@ export class MapEditor {
          <span class="box-index">#${i+1}</span>
          <button class="btn-del" onclick="removeBox(${i})">×</button>
        </div>
-        <div class="box-inputs" style="margin-bottom: 8px;">
-          <select data-index="${i}" data-prop="asset_id" style="width: 100%; padding: 4px;">
+        <div class="box-inputs margin-bottom">
+          <select data-index="${i}" data-prop="asset_id">
            ${optionsHtml}
          </select>
        </div>
--- a/src/styles/map-editor.css
+++ b/src/styles/map-editor.css
@@ -12,8 +12,8 @@
 .folder-item { 
  padding: 10px 15px; 
  background: var(--bg-light); 
-  font-weight: bold; 
-  font-size: 13px; 
+  font-weight: 700; 
+  font-size: var(--fs-base); 
  border-bottom: 1px solid var(--border-color); 
  color: var(--primary-color); 
 }
@@ -21,13 +21,13 @@
 .file-item { 
  padding: 8px 25px; 
  cursor: pointer; 
-  font-size: 12px; 
+  font-size: var(--fs-sm); 
  border-bottom: 1px solid var(--bg-color); 
  transition: background 0.2s; 
 }

 .file-item:hover { background: var(--bg-light); }
-.file-item.active { background: var(--primary-color); color: var(--white); font-weight: bold; }
+.file-item.active { background: var(--primary-color); color: var(--white); font-weight: 700; }

 /* Center: Editor Area */
 .editor-container { 
@@ -70,10 +70,10 @@
  box-shadow: -5px 0 15px rgba(0,0,0,0.05); 
 }

-.sidebar h2 { margin-top: 0; color: var(--primary-color); font-size: 1.2rem; }
-.sidebar p { font-size: 0.85rem; color: var(--text-muted); line-height: 1.4; margin-bottom: 20px; }
+.sidebar h2 { margin-top: 0; color: var(--primary-color); font-size: var(--fs-lg); font-weight: 600; }
+.sidebar p { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.4; margin-bottom: 20px; }

-.current-path { font-size: 11px; color: var(--text-muted); margin-bottom: 10px; word-break: break-all; font-family: monospace; }
+.current-path { font-size: var(--fs-xs); color: var(--text-muted); margin-bottom: 10px; word-break: break-all; font-family: monospace; }

 .box-list { 
  flex: 1; 
@@ -87,7 +87,7 @@

 .box-item { 
  font-family: monospace; 
-  font-size: 11px; 
+  font-size: var(--fs-xs); 
  padding: 10px 6px; 
  border-bottom: 1px solid var(--border-color); 
  display: flex; 
@@ -102,7 +102,7 @@
 }

 .box-index {
-  font-weight: bold;
+  font-weight: 700;
  color: var(--primary-color);
 }

@@ -128,7 +128,7 @@
  padding: 2px 4px;
  border: 1px solid var(--border-color);
  border-radius: 2px;
-  font-size: 10px;
+  font-size: var(--fs-xs);
  outline: none;
 }

@@ -137,7 +137,7 @@
 }

 .box-item:hover { background: var(--white); }
-.btn-del { cursor: pointer; color: var(--danger); border: none; background: none; font-size: 16px; padding: 0 5px; }
+.btn-del { cursor: pointer; color: var(--danger); border: none; background: none; font-size: var(--fs-md); padding: 0 5px; }

 .actions { display: flex; flex-direction: column; gap: 8px; }

@@ -174,8 +174,8 @@
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
-  font-size: 10px;
-  font-weight: bold;
+  font-size: var(--fs-xs);
+  font-weight: 700;
  color: var(--primary-color);
  pointer-events: none;
  white-space: nowrap;
@@ -192,9 +192,45 @@

 #save-status { 
  margin-top: 8px; 
-  font-size: 11px; 
+  font-size: var(--fs-xs); 
  color: var(--success); 
  text-align: center; 
-  font-weight: bold; 
+  font-weight: 700; 
  height: 14px; 
 }
+
+/* Editor Body & Layout Overrides */
+.editor-body {
+  margin: 0;
+  display: flex;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.editor-version {
+  font-size: var(--fs-xs);
+  color: var(--text-muted);
+}
+
+.actions .btn {
+  height: 38px;
+}
+
+/* Box Item Dropdown Inputs */
+.box-inputs.margin-bottom {
+  margin-bottom: 8px;
+}
+
+.box-inputs select {
+  width: 100%;
+  padding: 4px;
+  border: 1px solid var(--border-color);
+  border-radius: 4px;
+  font-size: var(--fs-xs);
+  background-color: var(--canvas);
+  color: var(--text-main);
+  outline: none;
+}
+.box-inputs select:focus {
+  border-color: var(--primary-color);
+}
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,4 +1,5 @@
 import { defineConfig } from 'vite';
+import { resolve } from 'path';

 export default defineConfig({
  server: {
@@ -15,4 +16,12 @@ export default defineConfig({
      }
    }
  },
+  build: {
+    rollupOptions: {
+      input: {
+        main: resolve(__dirname, 'index.html'),
+        map_editor: resolve(__dirname, 'map_editor.html'),
+      }
+    }
+  }
 });
Author	SHA1	Message	Date
Taehoon	af578a63bc	refactor: 프로젝트 정리 및 최적화 (미사용 파일 제거, 코드 중복 제거, 정적 이미지 빌드 경로 수정) - 미사용 목업 파일(dummyData.ts, realServerData.ts, server_data.json) 및 중복 기획서 제거 - excelHandler.ts 내 미사용 대용량 엑셀 처리 함수들을 삭제하여 xlsx 의존성 제거 및 클라이언트 빌드 크기 최적화 - ListFactory.ts와 utils.ts 간에 중복으로 존재하던 calculatePcScoreDeductive 함수를 하나로 일원화 - 기획서 및 계획 문서들을 docs/plans/ 하위 폴더로 이동하여 프로젝트 루트 정리 - 정적 이미지 폴더(img/)를 public/img/로 이동하여 프로덕션 빌드 시 로고 및 장비 사진 엑박 오류 해결	2026-06-19 15:12:25 +09:00
Taehoon	e8bc42e5de	refactor: CSS 파일 모듈화 및 컴포넌트별 직접 Import 구조 전환 (방안 B) - HTML 내 CSS link 태그들을 삭제하고, 각 TS 진입점 파일에서 CSS 파일을 직접 import하도록 연동 - 스타일 파일들을 각 컴포넌트/뷰 디렉토리 옆으로 이동 배치 (Co-location) - guide.css, modal.css, dashboard.css, table.css, map-editor.css 이동 및 경로 갱신 - 디자인 시스템(common.css) 및 로그인 스타일(login.css)은 전역 배치 유지하고 main.ts에서 통합 임포트	2026-06-19 15:04:36 +09:00
Taehoon	587e92a7da	feat: 서버 탭 전환 시 뷰 모드 유지 및 대시보드/맵 에디터 스타일 표준화 - 서버 탭 복귀 시 최근 선택한 뷰 모드(목록/위치) 상태 유지 및 currentViewMode 상태 일원화 - 개인PC 대시보드 및 맵 에디터의 인라인 CSS 스타일을 공통 CSS 및 변수 클래스로 분리 및 가독성 개선 - Vite 멀티페이지 빌드 설정(vite.config.ts) 추가	2026-06-19 14:55:25 +09:00
Taehoon	c6515c1b5d	merge: 공동작업자 HW_Dashboard 브랜치 병합 (대시보드 UI 및 가독성 개선 사항 병합)	2026-06-19 13:39:29 +09:00
JooWangi	f656f0a439	fix: 대시보드 사양 적정성 직무 매핑 수정 (system_users.position 우선 참조) - HwDashboard: asset_core.user_position 대신 system_users.user_name -> position 으로 세부 직무 조회 - ListFactory: 동일하게 세부 직무명 우선 참조 - 미니 모달 조직(직무) 컬럼: _resolved_position 사용으로 정확한 직무명 표시 - 수정된 필드명: u.name -> u.user_name (system_users 실제 컬럼명 반영) - 예) 디자이너(3D, 영상) 직군이 최상급 기준으로 올바르게 판정됨	2026-06-18 19:48:23 +09:00
JooWangi	1d32a0350b	feat: 등급별 자산 종합 현황 및 사양 적정성 분석 레이아웃 5:5 콤팩트 최적화	2026-06-18 15:56:51 +09:00
JooWangi	abc531a41e	Design: 대시보드 하단 표 세로비율 확장 및 스크롤바 제거	2026-06-17 09:28:06 +09:00
JooWangi	8451101325	Style: 대시보드 UI 프리미엄 리스타일링 및 카드 구조 도입	2026-06-17 09:25:16 +09:00
JooWangi	3e69e74bc9	Feat: 통합 사양 적정성 인라인 바 그래프 및 대시보드 레이아웃 개편	2026-06-17 09:22:31 +09:00