diff --git a/design_rule.md b/design_rule.md index 9f1db35..dbc3313 100644 --- 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)` - 페이지 대제목 diff --git a/src/components/Modal/BaseModal.ts b/src/components/Modal/BaseModal.ts index fd221dd..4ff7e1b 100644 --- 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); diff --git a/src/components/Modal/HWModal.ts b/src/components/Modal/HWModal.ts index b958867..655eaf9 100644 --- a/src/components/Modal/HWModal.ts +++ b/src/components/Modal/HWModal.ts @@ -237,14 +237,15 @@ class HwAssetModal extends BaseModal { -