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.

design_rule.md

@@ -9,11 +9,12 @@
 *   **Achromatic Base**: 블랙(#171717)과 화이트를 기본으로 하며, 정보의 구분은 얇은 헤어라인(#ebebeb)을 사용합니다.
 *   **Fluid & Responsive**: 고정된 픽셀 대신 화면 크기에 비례하여 UI 밀도가 변하는 유동적 스케일링 시스템을 적용합니다.
 
-### 2. 반응형 스케일링 (Fluid Scaling System)
+### 2. 타이포그래피 및 자간 (Typography & Letter-spacing)
-*   **Core Principle**: 모든 UI 요소는 `vmin`과 `vw` 단위를 조합한 `clamp()` 함수를 통해 화면 크기에 맞춰 동적으로 변화합니다.
+*   **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)` - 페이지 대제목

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);

src/components/Modal/HWModal.ts

@@ -237,14 +237,15 @@ class HwAssetModal extends BaseModal {
               </div>
             </div>
           </div>
-          <div class="modal-footer">
+        <div class="modal-footer">
-            <button id="btn-delete-hw-asset" class="btn btn-outline btn-danger">삭제</button>
+          <button id="btn-delete-hw-asset" class="btn btn-outline btn-danger">삭제</button>
-            <div class="footer-actions">
+          <div class="footer-actions">
-              <button id="btn-cancel-hw-modal" class="btn btn-outline">닫기</button>
+            <button id="btn-revert-hw-edit" class="btn btn-outline hidden">수정 취소</button>
-              <button id="btn-save-hw-asset" class="btn btn-primary">저장</button>
+            <button id="btn-cancel-hw-modal" class="btn btn-outline">닫기</button>
-            </div>
+            <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) => {

src/components/Modal/JobSpecModal.ts

@@ -255,19 +255,13 @@ class JobSpecModal extends BaseModal {
     
     deleteBtn.style.display = (mode === 'add') ? 'none' : 'block';
 
-    if (mode === 'add') {
+    if (mode === 'add' || mode === 'edit') {
-      this.setEditLockMode('edit');
+      saveBtn.textContent = (mode === 'add') ? '등록' : '저장';
-      this.isEditMode = true;
-      saveBtn.textContent = '등록';
       saveBtn.style.display = 'block';
     } else {
-      this.setEditLockMode('view');
-      this.isEditMode = false;
       saveBtn.textContent = '수정';
       saveBtn.style.display = 'block';
     }
-    
-    this.updateMinScore();
     this.updateHeaderIdentity(asset);
   }
 

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 = '저장';
+    if (saveBtn) saveBtn.textContent = (mode === 'add' ? '등록' : '저장');
-    revertBtn.classList.toggle('hidden', 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 = '수정';
+    if (saveBtn) saveBtn.textContent = '수정';
-    revertBtn.classList.add('hidden');
+    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';

src/components/Modal/PartsMasterModal.ts

@@ -137,14 +137,10 @@ class PartsMasterModal extends BaseModal {
 
     deleteBtn.style.display = (mode === 'add') ? 'none' : 'block';
 
-    if (mode === 'add') {
+    if (mode === 'add' || mode === 'edit') {
-      this.setEditLockMode('edit');
+      saveBtn.textContent = (mode === 'add') ? '등록' : '저장';
-      this.isEditMode = true;
-      saveBtn.textContent = '등록';
       saveBtn.style.display = 'block';
     } else {
-      this.setEditLockMode('view');
-      this.isEditMode = false;
       saveBtn.textContent = '수정';
       saveBtn.style.display = 'block';
     }

src/components/Modal/UserModal.ts

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

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">

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;
 }
 

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);
   }
 }
+}

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 {

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 {

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">

src/views/LocationView.ts

@@ -38,39 +38,37 @@ export async function renderLocationView(container: HTMLElement) {
 
     container.innerHTML = `
       <div class="location-view-wrapper">
-        <!-- 상단 통합 바 (Vercel Style) -->
+        <!-- 상단 통합 바 (Unified Search Bar) -->
-        <div class="location-filter-bar">
+        <div class="location-filter-bar search-bar">
-          <div class="filter-actions-group">
+          <div class="search-item">
-            <div class="filter-group">
+            <label class="list-view-toggle-label">
-              <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" />
-                <input type="checkbox" id="chk-list-view-loc" style="width: 16px; height: 16px; cursor: pointer;" />
+              목록보기
-                목록보기
+            </label>
-              </label>
+          </div>
-            </div>
+          <div class="search-item">
-            <div class="filter-group">
+            <label>건물/위치</label>
-              <label>건물/위치</label>
+            <select id="sel-loc-main">
-              <select id="sel-loc-main" class="form-select-sm">
+              ${Object.keys(LOCATION_DATA).map(loc => `<option value="${loc}" ${loc === currentLoc ? 'selected' : ''}>${loc}</option>`).join('')}
-                ${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 ? `
+              ${locImages.length > 1 ? `
-                <div class="map-pagination-group">
+              <div class="map-pagination-group">
-                  <div class="page-btns">
+                <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-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>
+                  <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>
-                ` : ''}
+                <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', () => {
+    container.querySelector('#btn-view-from-loc')?.addEventListener('click', () => {
-      openHwModal(asset, 'edit');
+      openHwModal(asset, 'view');
     });
   };