feat(map): implement robust ID-based asset mapping and fix UI rendering inconsistencies

- Migrated map mapping from fuzzy coordinates to precise asset_id tracking - Updated MapEditor to allow explicit asset assignment via dropdown - Fixed LocationView rendering logic to search across all hardware categories - Standardized map indicators to always render as areas (boxes) with minimum size - Restored stable CSS max-height for detail modal photos to prevent clipping - Synced MapEditor saves directly to database via asset_id
2026-06-18 19:49:15 +09:00
parent e77c4854cb
commit aab1f91d3d
5 changed files with 350 additions and 355 deletions
--- a/src/core/state.ts
+++ b/src/core/state.ts
@@ -24,7 +24,7 @@ export const state: AppState = {
  masterData: {
    users: [],
    pc: [], server: [], storage: [], network: [],
-    survey: [], pcParts: [], partsMaster: [], equipment: [], officeSupplies: [],
+    survey: [], pcParts: [], partsMaster: [], equipment: [], officeSupplies: [], 
    swInternal: [], swExternal: [], cloud: [], domain: [],
    cost: [], vip: [],
    hw: [], sw: [],
@@ -34,6 +34,8 @@ export const state: AppState = {
  }
 };

+(window as any).__itam_state = state;
+
 /**
 * 통합 V2 스키마에 맞춘 데이터 로드
 */
--- a/src/views/LocationView.ts
+++ b/src/views/LocationView.ts
@@ -25,16 +25,21 @@ export async function renderLocationView(container: HTMLElement) {
                     : [];
    const mapPath = locImages[currentPage] || '';
    
-    // 조회 모드: 자산이 등록된 구역만 필터링하여 노출
+    // 조회 모드: 설정 파일에 정의된 asset_id를 기준으로 자산 데이터 매핑
    const allBoxes = mapConfig[mapPath] || [];
-    const boxes = allBoxes.filter((box: any) => 
-      state.masterData.hw.some(a => 
-        a.location === currentLoc && 
-        a.location_detail === currentDetail && 
-        String(a.loc_x) === String(box.x) && 
-        String(a.loc_y) === String(box.y)
-      )
-    );
+    const boxes = allBoxes.filter((box: any) => box.asset_id != null);
+
+    // 모든 하드웨어 카테고리에서 자산 검색
+    const allHwAssets = [
+      ...state.masterData.pc,
+      ...state.masterData.server,
+      ...state.masterData.storage,
+      ...state.masterData.network,
+      ...state.masterData.equipment,
+      ...state.masterData.survey,
+      ...state.masterData.officeSupplies,
+      ...state.masterData.pcParts
+    ];

    container.innerHTML = `
      <div class="location-view-wrapper">
@@ -81,14 +86,17 @@ export async function renderLocationView(container: HTMLElement) {
                <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}`;
+                    const asset = allHwAssets.find(a => a.id === box.asset_id);
+                    const name = asset ? (asset.asset_purpose || asset.asset_code) : (box.name || `#${idx+1}`);
+                    // w, h가 없거나 너무 작으면 최소 크기(3%) 보장하여 영역으로 표시
+                    const width = Math.max(parseFloat(box.w || '3'), 3);
+                    const height = Math.max(parseFloat(box.h || '3'), 3);
                    return `
-                    <div class="location-box-point" 
+                    <div class="location-box-area" 
+                         data-asset-id="${box.asset_id}"
                         data-name="${name}"
-                         data-x="${box.x}"
-                         data-y="${box.y}"
-                         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;">
+                         style="left:${box.x}%; top:${box.y}%; width:${width}%; height:${height}%;
+                                border: 2px solid var(--primary-color); background: rgba(30, 81, 73, 0.1); cursor:pointer; pointer-events: auto; position: absolute;">
                    </div>
                  `}).join('')}
                </div>
@@ -170,20 +178,15 @@ export async function renderLocationView(container: HTMLElement) {
        chkBox.addEventListener('change', handleToggle);
    }

-    container.querySelectorAll('.location-box-point').forEach(box => {
+    container.querySelectorAll('.location-box-area').forEach(box => {
      box.addEventListener('click', () => {
-        const x = box.getAttribute('data-x');
-        const y = box.getAttribute('data-y');
+        const assetId = box.getAttribute('data-asset-id');
+        if (!assetId) return;

-        const targetAsset = state.masterData.hw.find(a => 
-          a.location === currentLoc && 
-          a.location_detail === currentDetail && 
-          String(a.loc_x) === String(x) && 
-          String(a.loc_y) === String(y)
-        );
+        const targetAsset = allHwAssets.find(a => a.id === assetId);

        if (targetAsset) renderAssetDetail(targetAsset);
-        container.querySelectorAll('.location-box-point').forEach(b => (b as HTMLElement).style.background = 'rgba(30, 81, 73, 0.1)');
+        container.querySelectorAll('.location-box-area').forEach(b => (b as HTMLElement).style.background = 'rgba(30, 81, 73, 0.1)');
        (box as HTMLElement).style.background = 'rgba(30, 81, 73, 0.4)';
      });
    });
--- a/src/views/MapEditor.ts
+++ b/src/views/MapEditor.ts
@@ -18,6 +18,7 @@ export class MapEditor {
  private startY: number = 0;
  private currentBox: HTMLElement | null = null;
  private currentPath: string = '';
+  private assetOptions: {id: string, name: string}[] = [];

  constructor() {
    this.container = document.getElementById('container')!;
@@ -33,11 +34,35 @@ export class MapEditor {
  public async init() {
    this.renderFileSidebar();
    await this.loadConfig();
+    await this.loadAssets();
    this.bindEvents();
    this.selectFirstFile();
    createIcons({ icons: { X, Save, Trash2, ChevronLeft, ChevronRight } });
  }

+  private async loadAssets() {
+    try {
+      const res = await fetch(`http://${location.hostname}:3000/api/assets/master`);
+      const masterData = await res.json();
+      const allHw = [
+        ...(masterData.pc || []),
+        ...(masterData.server || []),
+        ...(masterData.storage || []),
+        ...(masterData.network || []),
+        ...(masterData.equipment || []),
+        ...(masterData.survey || []),
+        ...(masterData.officeSupplies || []),
+        ...(masterData.pcParts || [])
+      ];
+      this.assetOptions = allHw.map(a => ({
+        id: a.id,
+        name: `[${a.asset_code}] ${a.asset_purpose || a.model_name || a.category}`
+      }));
+    } catch (err) {
+      console.error('Failed to load assets for mapping', err);
+    }
+  }
+
  private renderFileSidebar() {
    let html = '';
    Object.entries(IMAGE_LOCATIONS).forEach(([bldg, details]) => {
@@ -137,7 +162,8 @@ export class MapEditor {
          x: (parseFloat(this.currentBox.style.left) / rect.width * 100).toFixed(2),
          y: (parseFloat(this.currentBox.style.top) / rect.height * 100).toFixed(2),
          w: (width / rect.width * 100).toFixed(2),
-          h: (height / rect.height * 100).toFixed(2)
+          h: (height / rect.height * 100).toFixed(2),
+          asset_id: null
        };
        this.boxes.push(boxData);
        this.render();
@@ -210,6 +236,13 @@ export class MapEditor {
      
      this.wrapper.appendChild(div);

+      // Create asset options dropdown
+      let optionsHtml = '<option value="">-- 자산 매핑 안 됨 --</option>';
+      this.assetOptions.forEach(opt => {
+        const selected = box.asset_id === opt.id ? 'selected' : '';
+        optionsHtml += `<option value="${opt.id}" ${selected}>${opt.name}</option>`;
+      });
+
      const item = document.createElement('div');
      item.className = 'box-item';
      item.innerHTML = `
@@ -217,6 +250,11 @@ 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;">
+            ${optionsHtml}
+          </select>
+        </div>
        <div class="box-inputs">
          <div class="input-group">
            <label>X</label>
@@ -239,17 +277,20 @@ export class MapEditor {
      this.boxListEl.appendChild(item);
    });

-    // Add events to new inputs
-    this.boxListEl.querySelectorAll('input').forEach(input => {
+    // Add events to new inputs and selects
+    this.boxListEl.querySelectorAll('input, select').forEach(input => {
      input.addEventListener('change', (e) => {
-        const target = e.target as HTMLInputElement;
+        const target = e.target as HTMLInputElement | HTMLSelectElement;
        const index = parseInt(target.dataset.index!);
        const prop = target.dataset.prop!;
-        const val = parseFloat(target.value).toFixed(2);
        
        if (this.boxes[index]) {
-          this.boxes[index][prop] = val;
-          this.render(); // Re-render to update the map and sync other inputs
+          if (prop === 'asset_id') {
+             this.boxes[index][prop] = target.value || null;
+          } else {
+             this.boxes[index][prop] = parseFloat(target.value).toFixed(2);
+             this.render(); // Re-render to update the map visual size
+          }
        }
      });
    });