fix: LocationView 레이아웃 안정화 및 UI 개선

- 페이지네이션 버튼을 상세위치 옆으로 이동\n- 지도 이미지 밀림 현상 방지를 위한 정렬 방식 수정 및 동기화 로직 보강\n- 상단 메뉴에서 구버전 현황 버튼 제거

src/main.ts

@@ -52,7 +52,6 @@ function refreshView() {
     <div class="view-header">
       <div class="view-toggle-container">
         <button class="mode-toggle-btn ${state.viewMode === 'location' ? 'active' : ''}" data-mode="location">자산현황(위치)</button>
-        <button class="mode-toggle-btn ${state.viewMode === 'legacy' ? 'active' : ''}" data-mode="legacy">자산현황(구버전)</button>
         <button class="mode-toggle-btn ${state.viewMode === 'list' ? 'active' : ''}" data-mode="list">자산목록</button>
       </div>
     </div>
@@ -60,7 +59,7 @@ function refreshView() {
   `;
 
   // 이벤트 바인딩
-  mainContent.querySelectorAll('.mode-toggle-btn').forEach(btn => {
+  mainContent.querySelectorAll('.mode-toggle-btn').forEach(btn => {      
     btn.addEventListener('click', () => {
       const mode = (btn as HTMLElement).getAttribute('data-mode') as any;
       state.viewMode = mode;
@@ -71,12 +70,10 @@ function refreshView() {
   const viewBody = document.getElementById('view-body')!;
   if (state.viewMode === 'location') {
     renderLocationView(viewBody);
-  } else if (state.viewMode === 'legacy') {
-    renderDashboard(viewBody); // 통계/차트
   } else {
     renderSWTable(viewBody);    // 리스트 형식
   }
-}
+  }
 
 // 통합 저장 및 갱신
 async function saveAllDataToDB() {

src/views/LocationView.ts

@@ -49,29 +49,32 @@ export async function renderLocationView(container: HTMLElement) {
           </div>
           <div class="filter-group">
             <label>상세 위치</label>
-            <select id="sel-loc-detail">
-              ${(LOCATION_DATA[currentLoc] || []).map(det => `<option value="${det}" ${det === currentDetail ? 'selected' : ''}>${det}</option>`).join('')}
-            </select>
-          </div>
-          
-          ${locImages.length > 1 ? `
-          <div class="map-pagination">
-            <span class="page-info">사진: ${currentPage + 1} / ${locImages.length}</span>
-            <div class="page-btns">
-              <button id="btn-prev-page" ${currentPage === 0 ? 'disabled' : ''}>이전</button>
-              <button id="btn-next-page" ${currentPage === locImages.length - 1 ? 'disabled' : ''}>다음</button>
+            <div style="display: flex; align-items: center; gap: 0.5rem;">
+              <select id="sel-loc-detail">
+                ${(LOCATION_DATA[currentLoc] || []).map(det => `<option value="${det}" ${det === currentDetail ? 'selected' : ''}>${det}</option>`).join('')}
+              </select>
+
+              <!-- 페이지네이션을 상세 위치 바로 옆으로 이동 -->
+              ${locImages.length > 1 ? `
+              <div class="map-pagination" style="margin-left: 0; padding-left: 0.5rem; border-left: 1px solid var(--border-color); display: flex; align-items: center; gap: 0.5rem;">
+                <div class="page-btns">
+                  <button id="btn-prev-page" class="btn btn-outline btn-sm" style="height: 28px; padding: 0 8px;" ${currentPage === 0 ? 'disabled' : ''}>이전</button>
+                  <button id="btn-next-page" class="btn btn-outline btn-sm" style="height: 28px; padding: 0 8px;" ${currentPage === locImages.length - 1 ? 'disabled' : ''}>다음</button>
+                </div>
+                <span class="page-info">(${currentPage + 1} / ${locImages.length})</span>
+              </div>
+              ` : ''}
             </div>
           </div>
-          ` : ''}
         </div>
 
-        <div class="location-main-content" style="grid-template-columns: 1.2fr 1fr; gap: 1rem; padding: 1rem;">
-          <!-- 지도 섹션 -->
-          <div class="map-container-section">
-            <div class="map-frame-wrapper" style="position: relative; display: inline-block; width: 100%; background: #f1f5f9; border-radius: 8px; border: 1px solid var(--border-color); overflow: hidden;">
+        <div class="location-main-content" style="height: calc(100vh - 180px); align-items: stretch; gap: 1rem; padding: 1rem; overflow: hidden; display: grid; grid-template-columns: 1.4fr 1fr;">
+          <!-- 지도 섹션: 상단 고정 정렬로 밀림 방지 -->
+          <div class="map-container-section" style="position: relative; overflow: hidden; border-radius: 8px; border: 1px solid var(--border-color); background: #f1f5f9; display: flex; align-items: flex-start; justify-content: center;">
+            <div class="map-frame-wrapper" style="position: relative; width: 100%; height: 100%; display: flex; align-items: flex-start; justify-content: center;">
               ${mapPath ? `
-                <img src="${mapPath}" id="main-map-img" style="width: 100%; display: block; height: auto;">
-                <div id="box-overlay" style="position: absolute; top:0; left:0; width:100%; height:100%; pointer-events: none;">
+                <img src="${mapPath}" id="main-map-img" style="max-width: 100%; max-height: 100%; object-fit: contain; display: block;">
+                <div id="box-overlay" style="position: absolute; pointer-events: none; transition: none;">
                   ${boxes.map((box: any, idx: number) => {
                     const name = box.name || `#${idx+1}`;
                     return `
@@ -86,32 +89,48 @@ export async function renderLocationView(container: HTMLElement) {
                 </div>
               ` : '<div style="padding: 5rem; text-align:center; color: #999;">해당 위치의 도면이 등록되지 않았습니다.</div>'}
             </div>
-            <p style="margin-top:0.5rem; font-size:0.75rem; color:var(--text-muted);">* 지도 위의 구역을 클릭하면 자산 상세 정보가 표시됩니다.</p>
           </div>
 
-          <!-- 리스트(상세) 섹션 -->
-          <div class="asset-list-section">
-            <div class="section-header">
-               <h4 id="loc-list-title">📍 구역을 선택하세요</h4>
+          <!-- 상세 정보 섹션: 내부 스크롤만 허용 -->
+          <div class="asset-list-section" style="display: flex; flex-direction: column; height: 100%; overflow: hidden; background: #fff; border-radius: 8px; border: 1px solid var(--border-color);">
+            <div class="section-header" style="flex-shrink: 0; background: #f8fafc; border-bottom: 1px solid var(--border-color); padding: 1rem;">
+               <h4 id="loc-list-title" style="margin:0; font-size: 0.95rem; font-weight: 700;">📍 구역을 선택하세요</h4>
             </div>
-            <div id="loc-asset-table-container" class="mini-table-wrapper">
-               <div class="empty-state">지도에서 자산 위치를 클릭하세요.</div>
+            <div id="loc-asset-table-container" class="mini-table-wrapper" style="flex: 1; overflow-y: auto; padding: 0;">
+               <div class="empty-state" style="padding: 3rem 1rem;">지도에서 자산 위치를 클릭하세요.</div>
             </div>
           </div>
         </div>
+        <div style="padding: 0 1.5rem 0.5rem; flex-shrink: 0;">
+          <p style="font-size:0.75rem; color:var(--text-muted); margin: 0;">* 지도 위의 구역을 클릭하면 자산 상세 정보가 표시됩니다.</p>
+        </div>
       </div>
     `;
 
-    // 이미지 로드 후 오버레이 크기 재조정 (좌표 밀림 방지)
+    // 이미지 로드 및 윈도우 리사이즈 시 오버레이 크기와 위치를 이미지에 정확히 맞춤
+    const syncOverlaySize = () => {
+      const img = container.querySelector('#main-map-img') as HTMLImageElement;
+      const overlay = container.querySelector('#box-overlay') as HTMLElement;
+      if (img && overlay && img.complete) {
+        overlay.style.width = img.clientWidth + 'px';
+        overlay.style.height = img.clientHeight + 'px';
+        overlay.style.left = img.offsetLeft + 'px';
+        overlay.style.top = img.offsetTop + 'px';
+      }
+    };
+
     const img = container.querySelector('#main-map-img') as HTMLImageElement;
     if (img) {
-      img.onload = () => {
-         const overlay = container.querySelector('#box-overlay') as HTMLElement;
-         if (overlay) {
-           overlay.style.height = img.offsetHeight + 'px';
-         }
-      };
+      if (img.complete) {
+        syncOverlaySize();
+        setTimeout(syncOverlaySize, 50); // 레이아웃 안정화 대기
+      } else {
+        img.onload = syncOverlaySize;
+      }
     }
+    
+    window.removeEventListener('resize', syncOverlaySize);
+    window.addEventListener('resize', syncOverlaySize);
 
     // 이벤트 바인딩
     const selMain = container.querySelector('#sel-loc-main') as HTMLSelectElement;
@@ -137,7 +156,6 @@ export async function renderLocationView(container: HTMLElement) {
         const x = box.getAttribute('data-x');
         const y = box.getAttribute('data-y');
 
-        // 좌표 및 위치 정보를 기반으로 정확한 자산 1개 찾기
         const targetAsset = state.masterData.hw.find(a => 
           a.location === currentLoc && 
           a.location_detail === currentDetail && 
@@ -149,7 +167,7 @@ export async function renderLocationView(container: HTMLElement) {
           renderAssetDetail(targetAsset);
         }
 
-        container.querySelectorAll('.location-box-point').forEach(b => (b as HTMLElement).style.background = 'rgba(30, 81, 81, 0.1)');
+        container.querySelectorAll('.location-box-point').forEach(b => (b as HTMLElement).style.background = 'rgba(30, 81, 73, 0.1)');
         (box as HTMLElement).style.background = 'rgba(30, 81, 73, 0.4)';
       });
     });
@@ -166,20 +184,18 @@ export async function renderLocationView(container: HTMLElement) {
       </div>
     `;
 
-    // 섹션별 렌더링 함수
     const renderSection = (title: string, fields: { label: string; value: any }[]) => `
-      <div class="detail-section" style="margin-bottom: 20px;">
+      <div class="detail-section" style="margin-bottom: 20px; padding: 0 1rem;">
         <div style="font-size: 12px; font-weight: 700; color: var(--primary-color); border-bottom: 1px solid var(--border-color); padding-bottom: 6px; margin-bottom: 10px;">${title}</div>
         <div style="display: grid; grid-template-columns: 100px 1fr; gap: 8px 12px;">
           ${fields.map(f => `
             <div style="font-size: 12px; color: var(--text-muted);">${f.label}</div>
-            <div style="font-size: 12px; color: var(--text-main); font-weight: 500;">${f.value || '-'}</div>
+            <div style="font-size: 12px; color: var(--text-main); font-weight: 500; word-break: break-all;">${f.value || '-'}</div>
           `).join('')}
         </div>
       </div>
     `;
 
-    // 하드웨어 정보 구성
     const sectionsHTML = [
       renderSection('기본 관리 정보', [
         { label: ASSET_SCHEMA.ASSET_CODE.ui, value: asset.asset_code },
@@ -208,25 +224,20 @@ export async function renderLocationView(container: HTMLElement) {
     ].join('');
 
     tableContainer.innerHTML = `
-      <div class="asset-detail-sidebar" style="padding: 1rem; background: #fff; border-radius: 4px; border: 1px solid var(--border-color); max-height: 600px; overflow-y: auto;">
+      <div class="asset-detail-sidebar" style="padding-top: 1rem; background: #fff; max-height: 100%; overflow-y: auto;">
         ${sectionsHTML}
       </div>
     `;
 
-    // 뒤로가기 버튼: 목록 대신 초기 상태로 리셋
     container.querySelector('#btn-back-to-list')?.addEventListener('click', () => {
       title.textContent = `📍 구역을 선택하세요`;
-      tableContainer.innerHTML = `<div class="empty-state">지도에서 자산 위치를 클릭하세요.</div>`;
+      tableContainer.innerHTML = `<div class="empty-state" style="padding: 3rem 1rem;">지도에서 자산 위치를 클릭하세요.</div>`;
     });
 
-    // 수정 버튼 (기존 모달 활용)
     container.querySelector('#btn-edit-from-loc')?.addEventListener('click', () => {
       openHwModal(asset, 'edit');
     });
   };
 
-  // showAssets 함수 제거 (목록 표시 불필요)
-
-
   render();
 }