style: apply Vercel-inspired responsive UI & fluid scaling

src/views/LocationView.ts

@@ -4,12 +4,11 @@ import { ASSET_SCHEMA } from '../core/schema';
 import { LOCATION_DATA, IMAGE_LOCATIONS } from '../components/Modal/SharedData';
 
 /**
- * 위치 중심 자산 현황 뷰 (Refined)
+ * 위치 중심 자산 현황 뷰 (Vercel Integrated)
  */
 export async function renderLocationView(container: HTMLElement) {
   if (!container) return;
 
-  // 로컬 상태 (UI 제어용)
   let currentLoc = '기술개발센터';
   let currentDetail = '서버실';
   let currentPage = 0; 
@@ -26,7 +25,7 @@ export async function renderLocationView(container: HTMLElement) {
                      : [];
     const mapPath = locImages[currentPage] || '';
     
-    // 자산이 등록된(좌표가 일치하는) 구역만 필터링하여 표시
+    // 자산이 등록된 구역만 필터링
     const allBoxes = mapConfig[mapPath] || [];
     const boxes = allBoxes.filter((box: any) => 
       state.masterData.hw.some(a => 
@@ -39,38 +38,36 @@ export async function renderLocationView(container: HTMLElement) {
 
     container.innerHTML = `
       <div class="location-view-wrapper">
-        <!-- 상단 통합 바 (토글 + 필터) -->
-        <div class="location-filter-bar" style="display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 1.5rem; border-bottom: 1px solid var(--border-color); background: white;">
-          <!-- 좌측: 3-way 토글 -->
-          <div class="view-toggle">
-            <button class="toggle-btn active" data-mode="location">자산 위치</button>
-            <button class="toggle-btn" data-mode="system">운영 현황</button>
-            <button class="toggle-btn" data-mode="asset">자산 목록</button>
-          </div>
-
-          <!-- 우측: 위치 필터 -->
-          <div style="display: flex; align-items: center; gap: 1.5rem;">
-            <div class="filter-group" style="display: flex; align-items: center; gap: 0.75rem;">
-              <label style="font-size: 13px; font-weight: 700; color: var(--text-muted);">건물/위치</label>
-              <select id="sel-loc-main" style="padding: 4px 8px; border: 1px solid var(--border-color); font-family: inherit; font-size: 13px; outline: none; background: #fff; cursor: pointer; border-radius: 4px;">
+        <!-- 상단 통합 바 (Vercel Style) -->
+        <div class="location-filter-bar">
+          <div class="filter-actions-group">
+            <div class="filter-group">
+              <label style="display: flex; align-items: center; gap: 8px; cursor: pointer; text-transform: none; font-weight: 500; color: var(--primary);">
+                <input type="checkbox" id="chk-list-view-loc" style="width: 16px; height: 16px; cursor: pointer;" />
+                목록보기
+              </label>
+            </div>
+            <div class="filter-group">
+              <label>건물/위치</label>
+              <select id="sel-loc-main" class="form-select-sm">
                 ${Object.keys(LOCATION_DATA).map(loc => `<option value="${loc}" ${loc === currentLoc ? 'selected' : ''}>${loc}</option>`).join('')}
               </select>
             </div>
-            <div class="filter-group" style="display: flex; align-items: center; gap: 0.75rem;">
-              <label style="font-size: 13px; font-weight: 700; color: var(--text-muted);">상세 위치</label>
-              <div style="display: flex; align-items: center; gap: 0.5rem;">
-                <select id="sel-loc-detail" style="padding: 4px 8px; border: 1px solid var(--border-color); font-family: inherit; font-size: 13px; outline: none; background: #fff; cursor: pointer; border-radius: 4px;">
+            <div class="filter-group">
+              <label>상세 위치</label>
+              <div class="filter-row">
+                <select id="sel-loc-detail" class="form-select-sm">
                   ${(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" style="display: flex; gap: 4px;">
-                    <button id="btn-prev-page" style="background: none; border: 1px solid var(--border-color); padding: 2px 8px; cursor: pointer; font-size: 12px; border-radius: 4px;" ${currentPage === 0 ? 'disabled' : ''}>이전</button>
-                    <button id="btn-next-page" style="background: none; border: 1px solid var(--border-color); padding: 2px 8px; cursor: pointer; font-size: 12px; border-radius: 4px;" ${currentPage === locImages.length - 1 ? 'disabled' : ''}>다음</button>
+                <div class="map-pagination-group">
+                  <div class="page-btns">
+                    <button id="btn-prev-page" class="btn btn-outline btn-sm" ${currentPage === 0 ? 'disabled' : ''}>이전</button>
+                    <button id="btn-next-page" class="btn btn-outline btn-sm" ${currentPage === locImages.length - 1 ? 'disabled' : ''}>다음</button>
                   </div>
-                  <span class="page-info" style="font-size: 12px; color: var(--text-muted);">(${currentPage + 1} / ${locImages.length})</span>
+                  <span class="page-info">(${currentPage + 1} / ${locImages.length})</span>
                 </div>
                 ` : ''}
               </div>
@@ -79,12 +76,12 @@ export async function renderLocationView(container: HTMLElement) {
         </div>
 
         <div class="location-main-content">
-          <!-- 지도 섹션: Border-only -->
+          <!-- 지도 섹션 -->
           <div class="map-container-section">
-            <div class="map-frame-wrapper" style="position: relative; width: 100%; height: 100%; display: flex; align-items: flex-start; justify-content: center;">
+            <div class="map-frame-wrapper">
               ${mapPath ? `
-                <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;">
+                <img src="${mapPath}" id="main-map-img" class="map-image">
+                <div id="box-overlay" class="map-overlay">
                   ${boxes.map((box: any, idx: number) => {
                     const name = box.name || `#${idx+1}`;
                     return `
@@ -92,22 +89,22 @@ export async function renderLocationView(container: HTMLElement) {
                          data-name="${name}"
                          data-x="${box.x}"
                          data-y="${box.y}"
-                         style="position: absolute; left:${box.x}%; top:${box.y}%; width:${box.w}%; height:${box.h}%;
+                         style="left:${box.x}%; top:${box.y}%; width:${box.w}%; height:${box.h}%;
                                 border: 2px solid var(--primary-color); background: rgba(30, 81, 73, 0.1); cursor:pointer; pointer-events: auto;">
                     </div>
                   `}).join('')}
                 </div>
-              ` : '<div style="padding: 5rem; text-align:center; color: #999;">해당 위치의 도면이 등록되지 않았습니다.</div>'}
+              ` : '<div class="no-map-message">해당 위치의 도면이 등록되지 않았습니다.</div>'}
             </div>
           </div>
 
-          <!-- 상세 정보 섹션: Border-only -->
-          <div class="asset-list-section" style="display: flex; flex-direction: column; height: 100%; overflow: hidden; background: #fff;">
-            <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: 800; color: var(--primary-color);">📍 구역을 선택하세요</h4>
+          <!-- 상세 정보 섹션 -->
+          <div class="asset-list-section">
+            <div class="section-header">
+               <h4 id="loc-list-title" class="sidebar-title">구역을 선택하세요</h4>
             </div>
-            <div id="loc-asset-table-container" class="mini-table-wrapper" style="flex: 1; overflow-y: auto; padding: 0;">
-               <div class="empty-state" style="padding: 3rem 1rem; color: var(--text-muted); text-align: center;">지도에서 자산 위치를 클릭하세요.</div>
+            <div id="loc-asset-table-container" class="mini-table-wrapper">
+               <div class="empty-state">지도에서 자산 위치를 클릭하세요.</div>
             </div>
           </div>
         </div>
@@ -117,25 +114,8 @@ export async function renderLocationView(container: HTMLElement) {
     const syncOverlaySize = () => {
       const img = container.querySelector('#main-map-img') as HTMLImageElement;
       const overlay = container.querySelector('#box-overlay') as HTMLElement;
-      const mainContent = container.querySelector('.location-main-content') as HTMLElement;
 
       if (img && overlay && img.complete) {
-        // 1. 이미지 실제 크기와 가로세로 비율 계산
-        const naturalRatio = img.naturalWidth / img.naturalHeight;
-        
-        // 2. 비율에 따른 동적 레이아웃 조정 (Adaptive Layout)
-        if (naturalRatio < 0.85) {
-          // 세로로 긴 사진: 상세정보를 대폭 넓힘
-          mainContent.style.gridTemplateColumns = '0.9fr 1.1fr';
-        } else if (naturalRatio < 1.25) {
-          // 정사각형에 가까운 사진: 균형 배치
-          mainContent.style.gridTemplateColumns = '1.2fr 1fr';
-        } else {
-          // 가로로 넓은 사진: 지도 중심 (예전 2:1 비율)
-          mainContent.style.gridTemplateColumns = '2fr 1fr';
-        }
-
-        // 3. 오버레이 크기와 위치 동기화
         overlay.style.width = img.clientWidth + 'px';
         overlay.style.height = img.clientHeight + 'px';
         overlay.style.left = img.offsetLeft + 'px';
@@ -156,7 +136,6 @@ export async function renderLocationView(container: HTMLElement) {
     window.removeEventListener('resize', syncOverlaySize);
     window.addEventListener('resize', syncOverlaySize);
 
-    // 이벤트 바인딩
     const selMain = container.querySelector('#sel-loc-main') as HTMLSelectElement;
     selMain?.addEventListener('change', () => {
       currentLoc = selMain.value;
@@ -175,19 +154,23 @@ export async function renderLocationView(container: HTMLElement) {
     container.querySelector('#btn-prev-page')?.addEventListener('click', () => { currentPage--; render(); });
     container.querySelector('#btn-next-page')?.addEventListener('click', () => { currentPage++; render(); });
 
-    // 뷰 모드 전환 이벤트 바인딩 (Unified Logic)
-    container.querySelectorAll('.toggle-btn').forEach(btn => {
-      btn.addEventListener('click', () => {
-        const mode = btn.getAttribute('data-mode');
-        if (mode === 'location') {
-          state.viewMode = 'location';
-        } else {
-          state.viewMode = 'list';
-          (state as any).currentViewMode = mode;
-        }
-        window.dispatchEvent(new Event('refresh-view'));
-      });
-    });
+    const chkBox = container.querySelector('#chk-list-view-loc') as HTMLInputElement;
+
+    if (chkBox) {
+        chkBox.checked = (state as any).currentViewMode === 'asset';
+        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'));
+        };
+        chkBox.addEventListener('change', handleToggle);
+    }
 
     container.querySelectorAll('.location-box-point').forEach(box => {
       box.addEventListener('click', () => {
@@ -201,10 +184,7 @@ export async function renderLocationView(container: HTMLElement) {
           String(a.loc_y) === String(y)
         );
 
-        if (targetAsset) {
-          renderAssetDetail(targetAsset);
-        }
-
+        if (targetAsset) renderAssetDetail(targetAsset);
         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)';
       });
@@ -215,7 +195,6 @@ export async function renderLocationView(container: HTMLElement) {
     const title = container.querySelector('#loc-list-title')!;
     const tableContainer = container.querySelector('#loc-asset-table-container')!;
     
-    // 헤더: 자산상세정보 대신 자산번호 + 구분/유형 배치 (CSS Class 사용)
     title.innerHTML = `
       <div class="detail-header-actions">
         <div class="header-identity">
@@ -227,11 +206,27 @@ export async function renderLocationView(container: HTMLElement) {
       </div>
     `;
 
-    // 섹션 렌더러: 2열 구성 및 폰트 대비 강화 (CSS Class 사용)
-    const renderSection = (title: string, fields: { label: string; value: any; fullWidth?: boolean }[]) => `
-      <div class="detail-section">
-        <div class="detail-section-title">${title}</div>
-        <div class="detail-grid-2col">
+    const fields = [
+      { label: ASSET_SCHEMA.CURRENT_DEPT.ui, value: asset.current_dept },
+      { label: ASSET_SCHEMA.HW_STATUS.ui, value: asset.hw_status },
+      { label: ASSET_SCHEMA.MANAGER_MAIN.ui, value: asset.manager_primary },
+      { label: ASSET_SCHEMA.MANAGER_SUB.ui, value: asset.manager_secondary },
+      { label: ASSET_SCHEMA.ASSET_PURPOSE.ui, value: asset.asset_purpose, fullWidth: true },
+      { label: ASSET_SCHEMA.MODEL_NAME.ui, value: asset.model_name },
+      { label: ASSET_SCHEMA.OS.ui, value: asset.os },
+      { label: ASSET_SCHEMA.CPU.ui, value: asset.cpu },
+      { label: ASSET_SCHEMA.RAM.ui, value: asset.ram },
+      { label: ASSET_SCHEMA.GPU.ui, value: asset.gpu, fullWidth: true },
+      { label: ASSET_SCHEMA.IP_ADDR.ui, value: asset.ip_address },
+      { label: ASSET_SCHEMA.MAC_ADDR.ui, value: asset.mac_address },
+      { label: ASSET_SCHEMA.REMOTE_TOOL.ui, value: asset.remote_tool },
+      { label: ASSET_SCHEMA.MONITORING.ui, value: asset.monitoring },
+      { label: ASSET_SCHEMA.MEMO.ui, value: asset.memo, fullWidth: true }
+    ];
+
+    const sectionsHTML = `
+      <div class="detail-section" style="margin-bottom: 0;">
+        <div class="detail-grid-2col" style="gap: 0.75rem 1rem;">
           ${fields.map(f => `
             <div class="detail-item ${f.fullWidth ? 'full-width' : ''}">
               <div class="detail-label-sm">${f.label}</div>
@@ -242,41 +237,12 @@ export async function renderLocationView(container: HTMLElement) {
       </div>
     `;
 
-    const sectionsHTML = [
-      renderSection('시스템 사양', [
-        { label: ASSET_SCHEMA.MODEL_NAME.ui, value: asset.model_name },
-        { label: ASSET_SCHEMA.OS.ui, value: asset.os },
-        { label: ASSET_SCHEMA.CPU.ui, value: asset.cpu },
-        { label: ASSET_SCHEMA.RAM.ui, value: asset.ram },
-        { label: ASSET_SCHEMA.GPU.ui, value: asset.gpu, fullWidth: true }
-      ]),
-      renderSection('네트워크 및 상태', [
-        { label: ASSET_SCHEMA.IP_ADDR.ui, value: asset.ip_address },
-        { label: ASSET_SCHEMA.MAC_ADDR.ui, value: asset.mac_address },
-        { label: ASSET_SCHEMA.HW_STATUS.ui, value: asset.hw_status },
-        { label: ASSET_SCHEMA.REMOTE_TOOL.ui, value: asset.remote_tool }
-      ]),
-      renderSection('상세 메모리', [
-        { label: ASSET_SCHEMA.MEMO.ui, value: asset.memo, fullWidth: true }
-      ])
-    ].join('');
-
     tableContainer.innerHTML = `
       <div class="asset-detail-sidebar">
         ${sectionsHTML}
       </div>
     `;
 
-    container.querySelector('#btn-back-to-list')?.addEventListener('click', () => {
-      title.innerHTML = `<h4 id="loc-list-title" class="sidebar-title">📍 구역을 선택하세요</h4>`;
-      tableContainer.innerHTML = `<div class="empty-state">지도에서 자산 위치를 클릭하세요.</div>`;
-    });
-
-    container.querySelector('#btn-back-to-list')?.addEventListener('click', () => {
-      title.innerHTML = `<h4 id="loc-list-title" style="margin:0; font-size: 0.95rem; font-weight: 800; color: var(--primary-color);">📍 구역을 선택하세요</h4>`;
-      tableContainer.innerHTML = `<div class="empty-state" style="padding: 3rem 1rem; color: var(--text-muted); text-align: center;">지도에서 자산 위치를 클릭하세요.</div>`;
-    });
-
     container.querySelector('#btn-edit-from-loc')?.addEventListener('click', () => {
       openHwModal(asset, 'edit');
     });