style(fe): enforce global design tokens for grid density, font scale and component heights in tokens.css and base.css

This commit is contained in:
2026-08-15 21:47:32 +09:00
parent db3865cb6c
commit 72d0da0383
3 changed files with 34 additions and 2 deletions
+3
View File
@@ -100,6 +100,7 @@ All work in this repository MUST follow `docs/CURRENT/WBS_EXECUTION_PROCEDURES.m
3. **Multi-Selection Batch Toolbar (Grid Top/Bottom Selection Bar)**: Activated conditionally upon multi-row selection for **Bulk Actions** (e.g., `선택 일괄 승인(3)`, `선택 일괄 삭제`).
- **[CRITICAL IRON RULE] Standardized Loading Skeleton Rule**: ALL screen-level and section-level data loading MUST render animated `SkeletonLoader` (shimmer mode) matching the expected layout (e.g. `skeletonType="table"` for grids, `skeletonType="card"` for forms/summaries) through `QueryStateBoundary`/`StandardScreenBoundary`. Static text ("불러오는 중...") or empty screen placeholders during loading states are STRICTLY PROHIBITED.
- **[CRITICAL IRON RULE] Standardized Empty Data State Rule**: When zero records or empty dataset states occur, ALL grids, lists, and summary cards MUST render standard `EmptyStatePlaceholder` component (`📭` icon, clear title, descriptive helper text, and optional recovery action button). Blank white spaces or plain `<p>데이터가 없습니다</p>` text tags are STRICTLY PROHIBITED.
- **[CRITICAL IRON RULE] Standardized UI Component Scale & Density Rule**: ALL UI components (grids, inputs, buttons, select, date fields, cards) MUST strictly inherit central Design System Tokens (`tokens.css` / `base.css`). Custom inline height/font overrides are STRICTLY PROHIBITED. Grid header height (`30px`), row height (`28px`), control height (`28px`), and grid font size (`12px`) MUST be universally uniform across all screens.
## v16.0 Gitea API & CI/CD Automation
@@ -362,6 +363,7 @@ Every task — code change, refactor, new feature, tooling, infrastructure — m
- [ ] **Button Standard (UI):** 상단 툴바(배치/등록), 행별 작업(수정/상세), 다중선택(일괄), 폼 푸터(취소/저장) 버튼 배치가 규칙 매트릭스를 따르는가?
- [ ] **Skeleton Loading (UI):** 로딩 상태 시 텍스트 대신 레이아웃에 반응하는 shimmer 스켈레톤(SkeletonLoader)이 제대로 노출되는가?
- [ ] **Empty State (UI):** 데이터 0건 또는 조회 결과가 없을 시 표준 EmptyStatePlaceholder(아이콘+설명+조치버튼)가 노출되는가?
- [ ] **Component Scale (UI):** 입력폼, 그리드, 버튼, 선택상자 높이/폰트가 중앙 토큰(`tokens.css`) 규격(헤더 30px, 행 28px, 컨트롤 28px, 폰트 12px)을 따르는가?
### Anti-Patterns (금지)
@@ -370,6 +372,7 @@ Every task — code change, refactor, new feature, tooling, infrastructure — m
- ❌ "버튼 위치 난잡 배치" → 상단 우측(페이지/배치), 행 내부(개별 CRUD), 선택바(일괄), 폼 푸터(저장/취소) 표준 무시 금지
- ❌ "로딩 시 '불러오는 중...' 텍스트 방치" → 반드시 레이아웃 맞춤형 애니메이션 스켈레톤(SkeletonLoader) 적용 필수
- ❌ "데이터 0건 시 빈 흰색 공간 방치" → 반드시 표준 EmptyStatePlaceholder 컴포넌트 렌더링 필수
- ❌ "개별 인라인 height/font style 난립" → 반드시 중앙 tokens.css / base.css 디자인 토큰 상속 필수
- ❌ "혹시 필요할까봐 추상화" → Necessity-driven만
- ❌ SELECT * / Generic Repository → Explicit columns, explicit logic
- ❌ "이건 작은 변경이라 테스트 스킵" → 모든 경로 characterize