From 72d0da03831cc30437a362063962c811cdbdac74 Mon Sep 17 00:00:00 2001 From: kjh2064 Date: Sat, 15 Aug 2026 21:47:32 +0900 Subject: [PATCH] style(fe): enforce global design tokens for grid density, font scale and component heights in tokens.css and base.css --- AGENTS.md | 3 +++ frontend/src/design-system/base.css | 28 +++++++++++++++++++++++++++ frontend/src/design-system/tokens.css | 5 +++-- 3 files changed, 34 insertions(+), 2 deletions(-) diff --git a/AGENTS.md b/AGENTS.md index 303d4a70..6e1c712a 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -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 `

데이터가 없습니다

` 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 diff --git a/frontend/src/design-system/base.css b/frontend/src/design-system/base.css index 93ea45de..e24f22db 100644 --- a/frontend/src/design-system/base.css +++ b/frontend/src/design-system/base.css @@ -38,3 +38,31 @@ a { color: var(--ks-color-action); } .ks-inline { display: flex; align-items: center; gap: var(--ks-space-2); flex-wrap: wrap; } .ks-muted { color: var(--ks-color-text-muted); } .ks-danger-text { color: var(--ks-color-danger); } + +/* Global Ultra-Dense Form Control & Button Density Standardization (전역 통일 규격) */ +input[type="text"], input[type="number"], input[type="date"], select, .p-inputtext, .p-select, .p-dropdown { + height: var(--ks-control-height) !important; + font-size: var(--ks-font-body) !important; + padding: 0 var(--ks-space-2) !important; + border-radius: var(--ks-radius-sm) !important; + border-color: var(--ks-color-border) !important; +} + +button, .p-button { + height: var(--ks-control-height) !important; + font-size: var(--ks-font-body) !important; + padding: 0 var(--ks-space-3) !important; + border-radius: var(--ks-radius-sm) !important; +} + +.p-button-sm { + height: 24px !important; + font-size: var(--ks-font-caption) !important; + padding: 0 var(--ks-space-2) !important; +} + +.p-button-lg { + height: 32px !important; + font-size: var(--ks-font-section) !important; + padding: 0 var(--ks-space-4) !important; +} diff --git a/frontend/src/design-system/tokens.css b/frontend/src/design-system/tokens.css index e63af086..22b7b468 100644 --- a/frontend/src/design-system/tokens.css +++ b/frontend/src/design-system/tokens.css @@ -181,17 +181,18 @@ } /* AG Grid Global Theme & Density Standardization Rule (AG Grid 통일 규격) */ -.ag-theme-quartz, .ag-theme-alpine { +.ag-theme-quartz, .ag-theme-alpine, [class*="ag-theme-"], .ag-root-wrapper { --ag-grid-size: 3px !important; --ag-list-item-height: 28px !important; --ag-header-height: 30px !important; --ag-row-height: 28px !important; --ag-font-size: var(--ks-font-grid) !important; - --ag-font-family: var(--ks-font-family-base) !important; + --ag-font-family: Inter, Pretendard, system-ui, -apple-system, sans-serif !important; --ag-border-color: var(--ks-color-border) !important; --ag-header-background-color: var(--ks-color-canvas) !important; --ag-row-hover-color: var(--ks-color-neutral-100) !important; --ag-selected-row-background-color: rgba(59, 130, 246, 0.1) !important; + font-size: var(--ks-font-grid) !important; } /* Raw Table Standard Grid Class for legacy fallback tables */