kjh2064/KArtSell.Aegis
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(fe): resolve CSS design token alias mappings and elevate KBX grid layout

Browse Source
This commit is contained in:
김재현
2026-08-15 20:19:07 +09:00
parent 046add28b2
commit b843275126
2 changed files with 233 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/design-system/tokens.css
+38
View File
@@ -74,6 +74,44 @@
--ks-focus-ring-width: 2px;
--ks-focus-ring-offset: 1px;
/* Legacy & Shell Compatible Token Aliases */
--color-background-primary: var(--ks-color-canvas);
--color-background-secondary: var(--ks-color-surface);
--color-background-hover: var(--ks-color-neutral-100);
--color-background-active: var(--ks-color-neutral-200);
--color-text-primary: var(--ks-color-text);
--color-text-secondary: var(--ks-color-text-muted);
--color-border-primary: var(--ks-color-border);
--color-border-secondary: var(--ks-color-border-strong);
--color-primary-100: rgba(37, 99, 235, 0.1);
--color-primary-500: var(--ks-color-action);
--color-primary-600: var(--ks-color-action-hover);
--color-primary-700: #1e40af;
--color-danger-500: var(--ks-color-danger);
--color-danger-600: #b91c1c;
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--spacing-1: var(--ks-space-1);
--spacing-2: var(--ks-space-2);
--spacing-3: var(--ks-space-3);
--spacing-4: var(--ks-space-4);
--spacing-5: 20px;
--spacing-6: var(--ks-space-6);
--border-radius-sm: var(--ks-radius-sm);
--border-radius-base: var(--ks-radius-md);
--border-radius-lg: var(--ks-radius-lg);
--font-size-xs: var(--ks-font-caption);
--font-size-sm: var(--ks-font-grid);
--font-size-base: var(--ks-font-body);
--transition-fast: var(--ks-transition-fast);
--transition-base: var(--ks-transition-smooth);
--transition-normal: var(--ks-transition-smooth);
--shadow-sm: var(--ks-shadow-sm);
--shadow-md: var(--ks-shadow-md);
--shadow-lg: var(--ks-shadow-lg);
/* KBX v60 High-End Elevation & Glassmorphism System */
--ks-shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.05);
--ks-shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
frontend/src/features/home/pages/HomePage.vue
+195 -3
View File
@@ -178,11 +178,14 @@ const handleFilter = (filterKey: string) => {
/* Page Header 48px (§7) */
.kbx-page-header {
height: var(--ks-shell-pageheader-height);
min-height: var(--ks-shell-pageheader-height);
display: flex;
flex-direction: column;
justify-content: center;
border-bottom: 1px solid var(--ks-color-border);
padding: var(--ks-space-2) var(--ks-space-4);
background: var(--ks-color-surface);
border-radius: var(--ks-radius-md);
}
.kbx-page-header__breadcrumb {
@@ -213,14 +216,203 @@ const handleFilter = (filterKey: string) => {
.kbx-badge--info { background: var(--ks-color-neutral-100); color: var(--ks-color-info); }
.kbx-badge--warning { background: var(--ks-color-neutral-100); color: var(--ks-color-warning); }
/* Command Bar 44px */
.kbx-command-bar {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--ks-space-2) var(--ks-space-4);
background: var(--ks-color-surface);
border: 1px solid var(--ks-color-border);
border-radius: var(--ks-radius-md);
gap: var(--ks-space-2);
}
.kbx-command-bar__group {
display: flex;
align-items: center;
gap: var(--ks-space-2);
}
/* Search Panel */
.kbx-search-panel {
background: var(--ks-color-surface);
border: 1px solid var(--ks-color-border);
border-radius: var(--ks-radius-md);
padding: var(--ks-space-3) var(--ks-space-4);
}
.kbx-search-panel__row {
display: flex;
align-items: center;
gap: var(--ks-space-4);
flex-wrap: wrap;
}
.kbx-search-field {
display: flex;
align-items: center;
gap: var(--ks-space-2);
}
.kbx-search-field label {
font-size: var(--ks-font-caption);
font-weight: 600;
color: var(--ks-color-text-muted);
white-space: nowrap;
}
.kbx-input, .kbx-select {
height: var(--ks-control-height);
padding: 0 var(--ks-space-3);
border: 1px solid var(--ks-color-border);
border-radius: var(--ks-radius-sm);
background: var(--ks-color-surface);
font-size: var(--ks-font-body);
}
/* KPI Toolbar Grid */
.kbx-kpi-bar {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: var(--ks-space-3);
}
.kbx-kpi-item {
padding: var(--ks-space-3) var(--ks-space-4);
background: var(--ks-color-surface);
border: 1px solid var(--ks-color-border);
border-radius: var(--ks-radius-md);
cursor: pointer;
transition: var(--ks-transition-smooth);
}
.kbx-kpi-item:hover {
border-color: var(--ks-color-action);
box-shadow: var(--ks-shadow-md);
}
.kbx-kpi-item--active {
border-color: var(--ks-color-action);
background: rgba(37, 99, 235, 0.04);
}
.kbx-kpi-item__label {
font-size: var(--ks-font-caption);
color: var(--ks-color-text-muted);
}
.kbx-kpi-item__count {
font-size: 24px;
font-weight: 700;
color: var(--ks-color-text);
margin-top: 4px;
}
.kbx-kpi-item--warning .kbx-kpi-item__count { color: var(--ks-color-warning); }
.kbx-kpi-item--danger .kbx-kpi-item__count { color: var(--ks-color-danger); }
/* Table Container & Dense Grid */
.kbx-workspace-grid {
background: var(--ks-color-surface);
border: 1px solid var(--ks-color-border);
border-radius: var(--ks-radius-md);
padding: var(--ks-space-4);
}
.kbx-section-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--ks-space-3);
}
.kbx-section-title {
font-size: var(--ks-font-section);
font-weight: 600;
margin: 0;
}
.kbx-section-count {
font-size: var(--ks-font-caption);
color: var(--ks-color-text-muted);
}
.kbx-table-container {
overflow-x: auto;
}
.kbx-grid-table {
width: 100%;
border-collapse: collapse;
font-size: var(--ks-font-grid);
}
.kbx-grid-table th {
height: var(--ks-grid-header-height);
background: var(--ks-color-neutral-100);
border-bottom: 2px solid var(--ks-color-border-strong);
padding: 0 var(--ks-space-3);
text-align: left;
font-weight: 600;
color: var(--ks-color-neutral-800);
}
.kbx-grid-table td {
height: var(--ks-grid-row-height);
border-bottom: 1px solid var(--ks-color-border);
padding: 0 var(--ks-space-3);
}
.kbx-grid-row:hover {
background: var(--ks-color-neutral-50);
}
/* Button & Badge Standards */
.kbx-btn {
height: var(--ks-control-height);
padding: 0 var(--ks-space-3);
border-radius: var(--ks-radius-sm);
font-size: var(--ks-font-body);
font-weight: 500;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--ks-space-1);
border: 1px solid transparent;
text-decoration: none;
transition: var(--ks-transition-fast);
}
.kbx-btn--primary {
background: var(--ks-color-action);
color: var(--ks-color-text-on-dark);
border-color: var(--ks-color-action);
}
.kbx-btn--primary:hover { background: var(--ks-color-action-hover); }
.kbx-status-badge--오류 { background: var(--ks-color-neutral-100); color: var(--ks-color-danger); }
.kbx-status-badge--경고, .kbx-status-badge--대기 { background: var(--ks-color-neutral-100); color: var(--ks-color-warning); }
.kbx-btn--secondary {
background: var(--ks-color-surface);
color: var(--ks-color-text);
border-color: var(--ks-color-border-strong);
}
.kbx-btn--secondary:hover { background: var(--ks-color-neutral-100); }
.kbx-btn--xs {
height: 26px;
padding: 0 8px;
font-size: 12px;
}
.kbx-status-badge {
padding: 2px 6px;
border-radius: var(--ks-radius-sm);
font-size: 12px;
font-weight: 600;
}
.kbx-status-badge--오류 { background: rgba(220, 38, 38, 0.1); color: var(--ks-color-danger); }
.kbx-status-badge--경고, .kbx-status-badge--대기 { background: rgba(217, 119, 6, 0.1); color: var(--ks-color-warning); }
/* Guide Cards Grid */
.kbx-guide-grid {