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/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 {