From 4a3d881455359a8f8fb491d53d8df567c6562b46 Mon Sep 17 00:00:00 2001 From: kjh2064 Date: Sat, 15 Aug 2026 20:21:55 +0900 Subject: [PATCH] fix(fe): fix sidebar router links, shrink header height to 44px, and refine workspace tabs UI --- frontend/src/shared/shell/KsHeader.vue | 2 +- frontend/src/shared/shell/KsSidebar.vue | 48 ++++++++++++++----------- frontend/src/shared/shell/KsTabs.vue | 46 ++++++++++++------------ 3 files changed, 52 insertions(+), 44 deletions(-) diff --git a/frontend/src/shared/shell/KsHeader.vue b/frontend/src/shared/shell/KsHeader.vue index 1a669cd3..e527a69b 100644 --- a/frontend/src/shared/shell/KsHeader.vue +++ b/frontend/src/shared/shell/KsHeader.vue @@ -201,7 +201,7 @@ const toggleTheme = () => { display: flex; align-items: center; justify-content: space-between; - height: 64px; + height: 44px; max-width: 100%; margin: 0 auto; padding: 0 var(--spacing-4); diff --git a/frontend/src/shared/shell/KsSidebar.vue b/frontend/src/shared/shell/KsSidebar.vue index 91545344..32b46d82 100644 --- a/frontend/src/shared/shell/KsSidebar.vue +++ b/frontend/src/shared/shell/KsSidebar.vue @@ -28,53 +28,59 @@ const expandedSections = ref(new Set()) const menuItems: MenuItem[] = [ { id: 'dashboard', - label: '대시보드', + label: '대시보드 (홈)', icon: '📊', - path: '/', + path: '/home', }, { id: 'shadow-run', label: 'Shadow Run', icon: '⚡', - path: '/shadow-run/queue', + path: '/model-ops/shadow-run-jobs', children: [ - { id: 'sr-queue', label: '작업 큐', icon: '📋', path: '/shadow-run/queue' }, - { id: 'sr-history', label: '실행 이력', icon: '📜', path: '/shadow-run/history' }, - { id: 'sr-settings', label: '설정', icon: '⚙️', path: '/shadow-run/settings' }, + { id: 'sr-queue', label: '작업 큐', icon: '📋', path: '/model-ops/shadow-run-jobs' }, + { id: 'sr-history', label: '실행 검증', icon: '📜', path: '/model-ops/shadow-runs' }, + { id: 'sr-settings', label: '데이터 품질', icon: '⚙️', path: '/ops/data-quality' }, ], }, { id: 'models', - label: '모델', + label: '모델 관리', icon: '🤖', - path: '/models/list', + path: '/model-ops/models-master', children: [ - { id: 'models-list', label: '모델 목록', icon: '📂', path: '/models/list' }, - { id: 'models-detail', label: '상세 분석', icon: '🔍', path: '/models/detail' }, - { id: 'models-compare', label: '비교 분석', icon: '⚖️', path: '/models/compare' }, + { id: 'models-list', label: '모델 마스터-상세', icon: '📂', path: '/model-ops/models-master' }, + { id: 'models-ops', label: '모델 버전 거버넌스', icon: '🔍', path: '/ops/model-operations' }, + { id: 'models-compare', label: '모델 관리', icon: '⚖️', path: '/model-ops/models' }, ], }, { id: 'approval', - label: '승인', + label: '승인 워크벤치', icon: '✅', - path: '/approval/queue', + path: '/governance/approvals', children: [ - { id: 'apr-queue', label: '승인 큐', icon: '📋', path: '/approval/queue' }, - { id: 'apr-history', label: '승인 이력', icon: '✔️', path: '/approval/history' }, + { id: 'apr-queue', label: '승인 큐', icon: '📋', path: '/governance/approvals' }, + { id: 'apr-sell', label: '매도 의사결정', icon: '💵', path: '/research/sell-decision' }, ], }, { - id: 'reports', - label: '보고서', + id: 'portfolio', + label: '포트폴리오', icon: '📈', - path: '/reports/daily', + path: '/portfolio/risk', children: [ - { id: 'rep-daily', label: '일일 보고서', icon: '📄', path: '/reports/daily' }, - { id: 'rep-weekly', label: '주간 보고서', icon: '📋', path: '/reports/weekly' }, - { id: 'rep-export', label: '내보내기', icon: '💾', path: '/reports/export' }, + { id: 'port-risk', label: '리스크 대시보드', icon: '🛡️', path: '/portfolio/risk' }, + { id: 'port-rebalance', label: '리밸런싱 제안', icon: '⚖️', path: '/portfolio/rebalance' }, + { id: 'market-data', label: '시장 데이터 수집', icon: '💾', path: '/ops/market-data-ingestion' }, ], }, + { + id: 'ui-catalog', + label: 'UI 컴포넌트 갤러리', + icon: '🎨', + path: '/internal/ui-standard', + }, ] const isActive = (path: string) => route.path === path diff --git a/frontend/src/shared/shell/KsTabs.vue b/frontend/src/shared/shell/KsTabs.vue index 48217f8e..ce87aa64 100644 --- a/frontend/src/shared/shell/KsTabs.vue +++ b/frontend/src/shared/shell/KsTabs.vue @@ -83,52 +83,54 @@ const isTabActive = (tabId: string) => activeTabId.value === tabId .ks-tabs { display: flex; align-items: center; - height: 44px; - background-color: var(--color-background-primary); - border-bottom: 1px solid var(--color-border-primary); + height: var(--ks-shell-tabs-height); + background-color: var(--ks-color-surface); + border-bottom: 1px solid var(--ks-color-border); overflow-x: auto; overflow-y: hidden; - gap: var(--spacing-2); - padding: 0 var(--spacing-3); + gap: var(--ks-space-2); + padding: 0 var(--ks-space-4); } .ks-tabs__list { display: flex; - gap: var(--spacing-2); + gap: var(--ks-space-2); flex: 1; min-width: 0; overflow-x: auto; scroll-behavior: smooth; + align-items: center; + height: 100%; } .ks-tabs__tab { display: flex; align-items: center; - gap: var(--spacing-2); - padding: var(--spacing-1) var(--spacing-3); - background-color: var(--color-background-secondary); - border: 1px solid var(--color-border-primary); - border-radius: var(--border-radius-base) var(--border-radius-base) 0 0; - color: var(--color-text-secondary); + gap: var(--ks-space-2); + padding: 0 var(--ks-space-3); + height: 32px; + background-color: var(--ks-color-neutral-100); + border: 1px solid var(--ks-color-border); + border-radius: var(--ks-radius-sm); + color: var(--ks-color-text-muted); cursor: pointer; - font-size: var(--font-size-sm); + font-size: var(--ks-font-grid); white-space: nowrap; flex-shrink: 0; - transition: all var(--transition-base); - border-bottom: 2px solid transparent; + transition: var(--ks-transition-fast); } .ks-tabs__tab:hover { - background-color: var(--color-background-hover); - color: var(--color-text-primary); + background-color: var(--ks-color-neutral-200); + color: var(--ks-color-text); } .ks-tabs__tab--active { - background-color: var(--color-background-primary); - color: var(--color-text-primary); - border-color: var(--color-border-secondary) var(--color-border-secondary) var(--color-background-primary) var(--color-border-secondary); - border-bottom-color: var(--color-primary-500); - font-weight: var(--font-weight-semibold); + background-color: var(--ks-color-surface); + color: var(--ks-color-action); + border-color: var(--ks-color-action); + box-shadow: var(--ks-shadow-sm); + font-weight: 600; } .ks-tabs__icon {