feat(ui/ux): unify typography to Pretendard and enforce read-only view mode as default

- Set global font-family to Pretendard and letter-spacing to -0.02em. - Standardized table header font-size to var(--fs-sm). - Fixed table clipping and sticky header behavior at 1920x1080. - Implemented dynamic select options in search filters. - Enforced 'view' mode as default for all asset modals (PC, Server, SW, etc.). - Improved Modal logic to ensure all fields (including dynamic rows) are correctly locked. - Updated Location View detail button from 'Edit' to 'View'. - Updated design_rule.md to reflect new typography standards.
2026-06-18 11:13:16 +09:00
parent 2cb4b87c0a
commit 3db05f2939
14 changed files with 143 additions and 99 deletions
--- a/design_rule.md
+++ b/design_rule.md
@@ -9,11 +9,12 @@
 *   **Achromatic Base**: 블랙(#171717)과 화이트를 기본으로 하며, 정보의 구분은 얇은 헤어라인(#ebebeb)을 사용합니다.
 *   **Fluid & Responsive**: 고정된 픽셀 대신 화면 크기에 비례하여 UI 밀도가 변하는 유동적 스케일링 시스템을 적용합니다.

-### 2. 반응형 스케일링 (Fluid Scaling System)
-*   **Core Principle**: 모든 UI 요소는 `vmin`과 `vw` 단위를 조합한 `clamp()` 함수를 통해 화면 크기에 맞춰 동적으로 변화합니다.
+### 2. 타이포그래피 및 자간 (Typography & Letter-spacing)
+*   **Font Family**: `Pretendard` 단일 폰트를 사용합니다.
+*   **Letter-spacing**: 모든 텍스트에 `-0.02em` (-2%) 자간을 적용하여 밀도 있는 가독성을 확보합니다.
 *   **Typography Scale**:
    *   **XS**: `clamp(10px, 1.2vmin + 0.2vw, 15px)` - 보조 텍스트
-    *   **SM**: `clamp(12px, 1.4vmin + 0.3vw, 18px)` - 필터, 일반 라벨
+    *   **SM**: `clamp(12px, 1.4vmin + 0.3vw, 18px)` - 필터, 일반 라벨, 테이블 헤더
    *   **Base**: `clamp(14px, 1.6vmin + 0.4vw, 22px)` - 본문, 테이블 데이터
    *   **MD**: `clamp(18px, 2.5vmin + 0.5vw, 30px)` - 섹션 소제목
    *   **LG**: `clamp(24px, 4vmin + 0.6vw, 48px)` - 페이지 대제목
--- a/src/components/Modal/BaseModal.ts
+++ b/src/components/Modal/BaseModal.ts
@@ -9,6 +9,7 @@ export abstract class BaseModal {
  protected title: string;
  protected currentAsset: any | null = null;
  protected isEditMode: boolean = false;
+  protected currentMode: 'view' | 'edit' | 'add' = 'view';
  protected modalEl: HTMLElement | null = null;
  protected formEl: HTMLFormElement | null = null;

@@ -53,16 +54,23 @@ export abstract class BaseModal {
   */
  public open(asset: any, mode: 'view' | 'edit' | 'add' = 'view') {
    this.currentAsset = asset;
+    this.currentMode = mode;
    this.isEditMode = (mode === 'add' || mode === 'edit');
    
    // 폼 초기화 추가
    if (this.formEl) this.formEl.reset();

-    this.setEditLockMode(mode);
+    // fillFormData를 먼저 호출하여 동적 요소들을 생성한 후 잠금 처리
    this.fillFormData(asset);
+    this.setEditLockMode(mode);
    
    if (this.modalEl) {
      this.modalEl.classList.remove('hidden');
+      const content = this.modalEl.querySelector('.modal-content');
+      if (content) {
+        if (mode === 'view') content.classList.add('is-view-mode');
+        else content.classList.remove('is-view-mode');
+      }
    }
    
    this.onAfterOpen(asset, mode);
--- a/src/components/Modal/HWModal.ts
+++ b/src/components/Modal/HWModal.ts
@@ -237,14 +237,15 @@ class HwAssetModal extends BaseModal {
              </div>
            </div>
          </div>
-          <div class="modal-footer">
-            <button id="btn-delete-hw-asset" class="btn btn-outline btn-danger">삭제</button>
-            <div class="footer-actions">
-              <button id="btn-cancel-hw-modal" class="btn btn-outline">닫기</button>
-              <button id="btn-save-hw-asset" class="btn btn-primary">저장</button>
-            </div>
+        <div class="modal-footer">
+          <button id="btn-delete-hw-asset" class="btn btn-outline btn-danger">삭제</button>
+          <div class="footer-actions">
+            <button id="btn-revert-hw-edit" class="btn btn-outline hidden">수정 취소</button>
+            <button id="btn-cancel-hw-modal" class="btn btn-outline">닫기</button>
+            <button id="btn-save-hw-asset" class="btn btn-primary">저장</button>
          </div>
        </div>
+        </div>
      </div>
      <style>
        .hidden {
@@ -370,6 +371,12 @@ class HwAssetModal extends BaseModal {
    saveBtn.addEventListener('click', async () => {
      if (!this.currentAsset) return;

+      // [추가] 조회 모드인 경우 수정 모드로 전환
+      if (!this.isEditMode) {
+        this.open(this.currentAsset, 'edit');
+        return;
+      }
+
      // 동적 볼륨 데이터 수집
      const vols: any[] = [];
      document.querySelectorAll('#hw-volume-container .volume-row').forEach((row, idx) => {
--- a/src/components/Modal/JobSpecModal.ts
+++ b/src/components/Modal/JobSpecModal.ts
@@ -255,19 +255,13 @@ class JobSpecModal extends BaseModal {
    
    deleteBtn.style.display = (mode === 'add') ? 'none' : 'block';

-    if (mode === 'add') {
-      this.setEditLockMode('edit');
-      this.isEditMode = true;
-      saveBtn.textContent = '등록';
+    if (mode === 'add' || mode === 'edit') {
+      saveBtn.textContent = (mode === 'add') ? '등록' : '저장';
      saveBtn.style.display = 'block';
    } else {
-      this.setEditLockMode('view');
-      this.isEditMode = false;
      saveBtn.textContent = '수정';
      saveBtn.style.display = 'block';
    }
-    
-    this.updateMinScore();
    this.updateHeaderIdentity(asset);
  }

--- a/src/components/Modal/ModalUtils.ts
+++ b/src/components/Modal/ModalUtils.ts
@@ -110,42 +110,43 @@ export function setEditLock(
  const generateBtn = options.generateBtnId ? document.getElementById(options.generateBtnId) : null;
  const addLogBtn = options.addLogBtnId ? document.getElementById(options.addLogBtnId) : null;

-  if (!form || !saveBtn || !revertBtn) return;
+  if (!form) return;

-  if (mode === 'add' || mode === 'edit') {
+  const isEdit = (mode === 'add' || mode === 'edit');
+
+  if (isEdit) {
    // 편집 모드 활성화
    form.classList.remove('is-view-mode');
    form.classList.add('is-edit-mode');
-    saveBtn.textContent = '저장';
-    revertBtn.classList.toggle('hidden', mode === 'add'); 
+    if (saveBtn) saveBtn.textContent = (mode === 'add' ? '등록' : '저장');
+    if (revertBtn) revertBtn.classList.toggle('hidden', mode === 'add'); 
    
    // 모든 필드 활성화
    const inputs = form.querySelectorAll('input, select, textarea');
    inputs.forEach(input => {
      const el = input as HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
-      if (el.name !== 'asset_code' && !el.id.includes('asset-id')) { // 자산번호 등 일부는 편집 모드에서도 잠금 유지
+      // 자산번호 및 ID 필드는 편집 모드에서도 잠금 유지
+      if (el.name !== 'asset_code' && !el.id.includes('asset-id') && !el.id.includes('id-hidden')) {
        el.disabled = false;
        if ('readOnly' in el) (el as HTMLInputElement).readOnly = false;
      }
    });

-    // 번호 생성 버튼은 '추가(add)' 시에만 노출
-    if (generateBtn) {
-      generateBtn.style.display = mode === 'add' ? 'flex' : 'none';
-    }
+    if (generateBtn) generateBtn.style.display = (mode === 'add' ? 'flex' : 'none');
    if (addLogBtn) addLogBtn.style.display = 'flex';
  } else {
    // 조회 모드 (잠금)
    form.classList.remove('is-edit-mode');
    form.classList.add('is-view-mode');
-    saveBtn.textContent = '수정';
-    revertBtn.classList.add('hidden');
+    if (saveBtn) saveBtn.textContent = '수정';
+    if (revertBtn) revertBtn.classList.add('hidden');
    
    // 모든 필드 잠금
    const inputs = form.querySelectorAll('input, select, textarea');
    inputs.forEach(input => {
      const el = input as HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
-      el.disabled = true; // select의 경우 disabled 필요
+      el.disabled = true;
+      if ('readOnly' in el) (el as HTMLInputElement).readOnly = true;
    });

    if (generateBtn) generateBtn.style.display = 'none';
--- a/src/components/Modal/PartsMasterModal.ts
+++ b/src/components/Modal/PartsMasterModal.ts
@@ -137,14 +137,10 @@ class PartsMasterModal extends BaseModal {

    deleteBtn.style.display = (mode === 'add') ? 'none' : 'block';

-    if (mode === 'add') {
-      this.setEditLockMode('edit');
-      this.isEditMode = true;
-      saveBtn.textContent = '등록';
+    if (mode === 'add' || mode === 'edit') {
+      saveBtn.textContent = (mode === 'add') ? '등록' : '저장';
      saveBtn.style.display = 'block';
    } else {
-      this.setEditLockMode('view');
-      this.isEditMode = false;
      saveBtn.textContent = '수정';
      saveBtn.style.display = 'block';
    }
--- a/src/components/Modal/UserModal.ts
+++ b/src/components/Modal/UserModal.ts
@@ -144,14 +144,10 @@ class UserModal extends BaseModal {

    deleteBtn.style.display = (mode === 'add') ? 'none' : 'block';

-    if (mode === 'add') {
-      this.setEditLockMode('edit');
-      this.isEditMode = true;
-      saveBtn.textContent = '등록';
+    if (mode === 'add' || mode === 'edit') {
+      saveBtn.textContent = mode === 'add' ? '등록' : '저장';
      saveBtn.style.display = 'block';
    } else {
-      this.setEditLockMode('view');
-      this.isEditMode = false;
      saveBtn.textContent = '수정';
      saveBtn.style.display = 'block';
    }
--- a/src/core/filterHandler.ts
+++ b/src/core/filterHandler.ts
@@ -18,6 +18,7 @@ export interface FilterOptions {
  extraHTML?: string;
  onFilterChange: (filters: any) => void;
  initialFilters?: any;
+  fullList?: any[]; // For populating dynamic filters
 }

 /**
@@ -38,11 +39,18 @@ export function renderFilterBar(container: HTMLElement, options: FilterOptions)
    showStatus = false,
    extraHTML = '', 
    onFilterChange,
-    initialFilters = { keyword: '', corp: '', dept: '', loc: '', field: '', type: '', status: '' }
+    initialFilters = { keyword: '', corp: '', dept: '', loc: '', field: '', type: '', status: '' },
+    fullList = []
  } = options;

  container.classList.add('search-bar'); // Restored class

+  // Helper to get unique sorted values
+  const getUnique = (key: keyof typeof ASSET_SCHEMA | string) => {
+    const fieldKey = (ASSET_SCHEMA as any)[key]?.key || key;
+    return Array.from(new Set(fullList.map(item => item[fieldKey] || item[(ASSET_SCHEMA as any)[key]?.db]).filter(Boolean))).sort();
+  };
+
  container.innerHTML = `
    <div class="search-item flex-1">
      <label>${keywordLabel}</label>
@@ -53,6 +61,7 @@ export function renderFilterBar(container: HTMLElement, options: FilterOptions)
      <label>${ASSET_SCHEMA.ASSET_TYPE.ui}</label>
      <select id="filter-type">
        <option value="">전체 유형</option>
+        ${getUnique('ASSET_TYPE').map(v => `<option value="${v}" ${initialFilters.type === v ? 'selected' : ''}>${v}</option>`).join('')}
      </select>
    </div>` : ''}
    ${showStatus ? `
@@ -60,6 +69,7 @@ export function renderFilterBar(container: HTMLElement, options: FilterOptions)
      <label>${ASSET_SCHEMA.HW_STATUS.ui}</label>
      <select id="filter-status">
        <option value="">전체 상태</option>
+        ${getUnique('HW_STATUS').map(v => `<option value="${v}" ${initialFilters.status === v ? 'selected' : ''}>${v}</option>`).join('')}
      </select>
    </div>` : ''}
    ${showField ? `
@@ -81,12 +91,18 @@ export function renderFilterBar(container: HTMLElement, options: FilterOptions)
    ${showLoc ? `
    <div class="search-item">
      <label>${ASSET_SCHEMA.LOCATION.ui}</label>
-      <select id="filter-loc"><option value="">전체 위치</option></select>
+      <select id="filter-loc">
+        <option value="">전체 위치</option>
+        ${getUnique('LOCATION').map(v => `<option value="${v}" ${initialFilters.loc === v ? 'selected' : ''}>${v}</option>`).join('')}
+      </select>
    </div>` : ''}
    ${showDept ? `
    <div class="search-item">
      <label>${ASSET_SCHEMA.CURRENT_DEPT.ui}</label>
-      <select id="filter-dept"><option value="">전체 조직</option></select>
+      <select id="filter-dept">
+        <option value="">전체 조직</option>
+        ${getUnique('CURRENT_DEPT').map(v => `<option value="${v}" ${initialFilters.dept === v ? 'selected' : ''}>${v}</option>`).join('')}
+      </select>
    </div>` : ''}
    ${extraHTML}
    <button id="btn-reset-filters" class="btn btn-outline btn-reset">
--- a/src/styles/common.css
+++ b/src/styles/common.css
@@ -52,12 +52,8 @@
  letter-spacing: -0.02em;
 }

-h1, h2, h3, .stat-value {
-  letter-spacing: -0.05em;
-}
-
 body {
-  font-family: 'Inter', 'Geist', 'Pretendard Variable', -apple-system, sans-serif;
+  font-family: 'Pretendard Variable', 'Pretendard', -apple-system, sans-serif;
  color: var(--text-main);
  background-color: var(--bg-color);
  line-height: 1.5;
@@ -140,6 +136,14 @@ input, textarea {
  overflow: hidden;
 }

+.view-content-wrapper {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  width: 100%;
+}
+
 /* --- View Toggle (Vercel Tab Style) --- */
 .view-toggle {
  display: inline-flex;
@@ -499,7 +503,7 @@ input:checked + .role-slider:before {
  font-weight: 600;
  color: var(--mute);
  text-transform: uppercase;
-  letter-spacing: 0.05em;
+  letter-spacing: -0.02em;
 }

 .search-item input, 
@@ -591,7 +595,7 @@ input:checked + .role-slider:before {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--primary);
-  letter-spacing: -0.05em;
+  letter-spacing: -0.02em;
  line-height: 1;
 }

@@ -626,6 +630,6 @@ input:checked + .role-slider:before {

 .main-footer p {
  margin: 0;
-  letter-spacing: 0.02em;
+  letter-spacing: -0.02em;
 }

--- a/src/styles/dashboard.css
+++ b/src/styles/dashboard.css
@@ -4,7 +4,7 @@
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--primary);
-  letter-spacing: -0.05em;
+  letter-spacing: -0.02em;
  margin-bottom: clamp(0.5rem, 1.5vmin, 1.5rem);
  line-height: 1;
 }
@@ -38,7 +38,7 @@
  font-weight: 500;
  color: var(--mute);
  text-transform: uppercase;
-  letter-spacing: 0.1em;
+  letter-spacing: -0.02em;
  margin-bottom: 0.5rem;
 }

@@ -140,10 +140,28 @@
  overflow: hidden;
 }

+.location-filter-bar {
+  /* Inherit from .search-bar in common.css */
+}
+
+.filter-group label {
+  font-size: var(--fs-xs);
+  font-weight: 600;
+  color: var(--mute);
+  text-transform: uppercase;
+  letter-spacing: -0.02em;
+}
+
+.filter-row {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
 .location-main-content {
  flex: 1;
  display: grid;
-  grid-template-columns: 2fr 1fr;
+  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  background: var(--canvas);
  gap: 0;
  padding: 0;
@@ -249,7 +267,7 @@
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--primary);
-  letter-spacing: -0.05em;
+  letter-spacing: -0.02em;
  line-height: 1; /* Reset line-height to prevent baseline shifts */
 }

@@ -290,7 +308,7 @@
  padding-bottom: 8px;
  margin-bottom: 1rem;
  text-transform: uppercase;
-  letter-spacing: 0.1em;
+  letter-spacing: -0.02em;
 }

 .detail-grid-2col {
@@ -353,7 +371,7 @@
  font-weight: 600;
  color: var(--mute);
  text-transform: uppercase;
-  letter-spacing: 0.05em;
+  letter-spacing: -0.02em;
 }

 .dashboard-card .stat-value {
@@ -484,3 +502,4 @@
    border-bottom: 1px solid var(--hairline);
  }
 }
+}
--- a/src/styles/modal.css
+++ b/src/styles/modal.css
@@ -162,7 +162,7 @@
  display: flex;
  align-items: center;
  text-transform: uppercase;
-  letter-spacing: 0.05em;
+  letter-spacing: -0.02em;
 }

 .form-section-title:first-child {
--- a/src/styles/table.css
+++ b/src/styles/table.css
@@ -17,7 +17,7 @@
  align-items: center;
  margin: 0;
  line-height: 1.1;
-  letter-spacing: -0.05em;
+  letter-spacing: -0.02em;
 }

 .page-description {
@@ -31,14 +31,17 @@
 .table-container {
  flex: 1;
  background-color: var(--canvas);
-  overflow: auto;
+  overflow-x: auto;
+  overflow-y: auto;
  position: relative;
+  max-width: 100%;
 }

 table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
+  table-layout: auto;
 }

 th, td {
@@ -56,11 +59,11 @@ thead {

 th {
  background-color: var(--canvas-soft) !important;
-  font-size: var(--fs-xs);
+  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--mute);
  text-transform: uppercase;
-  letter-spacing: 0.05em;
+  letter-spacing: -0.02em;
  box-shadow: inset 0 -1px 0 var(--hairline);
  text-align: center; /* Set default header alignment to center */
 }
@@ -124,13 +127,13 @@ th.sortable.desc::after { content: '▼'; opacity: 1; color: var(--primary); }

 .compact-table th {
  padding: 0.75rem 0.5rem;
-  font-size: var(--fs-xs);
+  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--mute);
  border-bottom: 1px solid var(--hairline);
  background: var(--canvas-soft);
  text-transform: uppercase;
-  letter-spacing: 0.05em;
+  letter-spacing: -0.02em;
 }

 .compact-table td {
--- a/src/views/List/ListFactory.ts
+++ b/src/views/List/ListFactory.ts
@@ -759,7 +759,7 @@ export function createListView(container: HTMLElement, config: ListViewConfig) {
  const switchView = () => {
    contentWrapper.innerHTML = '';
    if ((state as any).currentViewMode === 'asset') {
-      filterBar.style.display = 'flex'; contentWrapper.style.overflowY = 'auto';
+      filterBar.style.display = 'flex'; contentWrapper.style.overflowY = 'hidden';
      contentWrapper.appendChild(tableWrapper); updateTable();
    } else {
      filterBar.style.display = 'none'; contentWrapper.style.overflowY = 'hidden';
@@ -771,6 +771,7 @@ export function createListView(container: HTMLElement, config: ListViewConfig) {
  renderFilterBar(filterBar, {
    ...config.filterOptions, 
    initialFilters: currentFilters,
+    fullList: fullList, // Added for dynamic options
    extraHTML: isServer ? `
      <div class="search-item">
        <label class="list-view-toggle-label">
--- a/src/views/LocationView.ts
+++ b/src/views/LocationView.ts
@@ -38,39 +38,37 @@ export async function renderLocationView(container: HTMLElement) {

    container.innerHTML = `
      <div class="location-view-wrapper">
-        <!-- 상단 통합 바 (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('')}
+        <!-- 상단 통합 바 (Unified Search Bar) -->
+        <div class="location-filter-bar search-bar">
+          <div class="search-item">
+            <label class="list-view-toggle-label">
+              <input type="checkbox" id="chk-list-view-loc" />
+              목록보기
+            </label>
+          </div>
+          <div class="search-item">
+            <label>건물/위치</label>
+            <select id="sel-loc-main">
+              ${Object.keys(LOCATION_DATA).map(loc => `<option value="${loc}" ${loc === currentLoc ? 'selected' : ''}>${loc}</option>`).join('')}
+            </select>
+          </div>
+          <div class="search-item">
+            <label>상세 위치</label>
+            <div class="flex items-center gap-2">
+              <select id="sel-loc-detail">
+                ${(LOCATION_DATA[currentLoc] || []).map(det => `<option value="${det}" ${det === currentDetail ? 'selected' : ''}>${det}</option>`).join('')}
              </select>
-            </div>
-            <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-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">(${currentPage + 1} / ${locImages.length})</span>
+              <!-- 페이지네이션 -->
+              ${locImages.length > 1 ? `
+              <div class="map-pagination-group">
+                <div class="page-btns flex gap-1">
+                  <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">(${currentPage + 1} / ${locImages.length})</span>
              </div>
+              ` : ''}
            </div>
          </div>
        </div>
@@ -202,7 +200,7 @@ export async function renderLocationView(container: HTMLElement) {
          <span class="service-type-badge">${asset.service_type || '운영'}</span>
          <span class="asset-type-label">${asset.asset_type || 'PC'}</span>
        </div>
-        <button id="btn-edit-from-loc" class="btn btn-primary btn-sm">수정</button>
+        <button id="btn-view-from-loc" class="btn btn-primary btn-sm">조회</button>
      </div>
    `;

@@ -243,8 +241,8 @@ export async function renderLocationView(container: HTMLElement) {
      </div>
    `;

-    container.querySelector('#btn-edit-from-loc')?.addEventListener('click', () => {
-      openHwModal(asset, 'edit');
+    container.querySelector('#btn-view-from-loc')?.addEventListener('click', () => {
+      openHwModal(asset, 'view');
    });
  };