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.
This commit is contained in:
@@ -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)` - 페이지 대제목
|
||||
|
||||
Reference in New Issue
Block a user