diff --git a/AGENTS.md b/AGENTS.md index c25e62b4..d4bde23f 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -100,7 +100,10 @@ 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. +- **[CRITICAL IRON RULE] Standardized Form & Filter Control Width Rule**: ALL form & filter controls MUST adhere to central default width tokens (`tokens.css` / `base.css`). Controls MUST NOT stretch to 100% full width inside filter bars unless explicitly grouped in full-width grid layouts: + 1. **Select / Dropdown (`select`, `.p-select`, `.ks-select`)**: Default width `--ks-control-width-select` (`160px`). + 2. **Search Input (`.search-input`)**: Default width `--ks-control-width-search` (`220px`). + 3. **Date Picker (`input[type="date"]`)**: Default width `--ks-control-width-date` (`140px`). - **[CRITICAL IRON RULE] Standardized Grid Row Numbering Rule**: Unless explicitly disabled (`showRowNumber: false`), ALL data grids MUST automatically prepend a pinned left `No.` column rendering 1-indexed sequential row numbers (`node.rowIndex + 1`) centered with `54px` fixed width. - **[CRITICAL IRON RULE] Standardized Grid Theme, Zebra Stripes & Color Palette Rule**: ALL data grids MUST inherit central Theme Color Tokens (`tokens.css`) without ad-hoc inline overrides. Grids MUST enforce: 1. **Header Background**: Premium Header Gray `#f1f5f9` (Dark Mode: `#1e293b`), font-weight: `700`. diff --git a/frontend/current_screen.png b/frontend/current_screen.png index 91d97270..abb60ac8 100644 Binary files a/frontend/current_screen.png and b/frontend/current_screen.png differ diff --git a/frontend/src/design-system/base.css b/frontend/src/design-system/base.css index 9ea5d743..cabf351e 100644 --- a/frontend/src/design-system/base.css +++ b/frontend/src/design-system/base.css @@ -49,6 +49,29 @@ input[type="text"], input[type="number"], input[type="date"], select, textarea, box-sizing: border-box; } +/* Default Width Standards for Form & Filter Controls (기본 넓이 표준 규격) */ +select, .p-select, .p-dropdown, .ks-select, .status-select { + width: var(--ks-control-width-select); + max-width: 100%; +} + +input[type="text"].search-input, .search-input { + width: var(--ks-control-width-search); + max-width: 100%; +} + +input[type="date"] { + width: var(--ks-control-width-date); + max-width: 100%; +} + +.filters, .ks-page__filters form, .ks-page__filters section { + display: flex; + align-items: center; + gap: var(--ks-space-2); + flex-wrap: wrap; +} + button, .p-button, .ks-button { height: var(--ks-control-height) !important; font-size: var(--ks-font-body) !important; diff --git a/frontend/src/design-system/tokens.css b/frontend/src/design-system/tokens.css index b5bcc3a7..3759e150 100644 --- a/frontend/src/design-system/tokens.css +++ b/frontend/src/design-system/tokens.css @@ -57,8 +57,11 @@ --ks-font-caption: 11px; /* Caption / Helper 11px */ --ks-line-caption: 14px; - /* KBX v60 ERP/OMS/WMS Ultra-Dense Control & Layout Heights */ + /* KBX v60 ERP/OMS/WMS Ultra-Dense Control & Layout Heights & Default Widths */ --ks-control-height: 28px; /* ERP/OMS Input Control 28px */ + --ks-control-width-select: 160px; /* Standard Select/Dropdown Default Width 160px */ + --ks-control-width-search: 220px; /* Standard Search Input Default Width 220px */ + --ks-control-width-date: 140px; /* Standard Date Field Default Width 140px */ --ks-grid-row-height: 28px; /* Ultra-Dense Grid Row 28px */ --ks-grid-header-height: 30px; /* Grid Header 30px */ --ks-content-max: 100%; /* Full Screen Utilization */