style(fe): standardize Tabs bar, Help button badge, and Header Quick Menu dropdown

frontend/src/shared/shell/KsHeader.vue

@@ -32,6 +32,14 @@ const handleSearch = () => {
   }
 }
 
+const onQuickSelect = (event: Event) => {
+  const target = event.target as HTMLSelectElement
+  if (target.value) {
+    router.push(target.value)
+    target.value = ''
+  }
+}
+
 const handleLogout = () => {
   console.log('로그아웃 처리')
   showUserMenu.value = false
@@ -85,23 +93,17 @@ const toggleTheme = () => {
         </div>
       </div>
 
-      <!-- Search bar -->
+      <!-- Quick Menu (빠른 메뉴) -->
-      <div class="ks-header__search">
+      <div class="ks-header__quick-menu" title="자주 찾는 화면 빠른 이동">
-        <input
+        <span class="ks-header__quick-label">⚡ 빠른메뉴:</span>
-          v-model="searchQuery"
+        <select class="ks-header__quick-select" aria-label="빠른 메뉴 이동" @change="onQuickSelect">
-          type="text"
+          <option value="" disabled selected>주요 업무 화면 선택...</option>
-          class="ks-header__search-input"
+          <option value="/model-ops/models-master">📂 트레이딩 모델 마스터</option>
-          placeholder="검색..."
+          <option value="/ops/data-quality">📊 데이터 품질 검증</option>
-          @keyup.enter="handleSearch"
+          <option value="/model-ops/shadow-runs">⚡ Shadow Run 실행/추적</option>
-        />
+          <option value="/approvals/workbench">📝 결재/승인 워크벤치</option>
-        <button
+          <option value="/decisions/sell">📈 매도 의사결정 모니터링</option>
-          type="button"
+        </select>
-          class="ks-header__search-btn"
-          aria-label="검색"
-          @click="handleSearch"
-        >
-          🔍
-        </button>
       </div>
 
       <!-- Right side actions -->
@@ -295,48 +297,39 @@ const toggleTheme = () => {
   color: var(--color-primary-500);
 }
 
-.ks-header__search {
+.ks-header__quick-menu {
   display: flex;
   align-items: center;
+  gap: var(--ks-space-2);
   flex: 1;
-  max-width: 300px;
+  max-width: 380px;
-  background-color: var(--color-background-primary);
-  border: 1px solid var(--color-border-primary);
-  border-radius: var(--border-radius-base);
-  padding: 0 var(--spacing-3);
-  gap: var(--spacing-2);
 }
 
-.ks-header__search-input {
+.ks-header__quick-label {
+  font-size: var(--ks-font-body);
+  font-weight: 700;
+  color: var(--ks-color-action);
+  white-space: nowrap;
+}
+
+.ks-header__quick-select {
   flex: 1;
-  border: none;
+  height: var(--ks-control-height);
-  background: transparent;
+  padding: 0 var(--ks-space-2);
-  outline: none;
+  border: 1px solid var(--ks-color-neutral-300);
-  color: var(--color-text-primary);
+  border-radius: var(--ks-radius-sm);
-  font-size: var(--font-size-sm);
+  background: var(--ks-color-surface);
-  padding: var(--spacing-2) 0;
+  color: var(--ks-color-neutral-900);
-}
+  font-size: var(--ks-font-body);
-
+  font-family: inherit;
-.ks-header__search-input::placeholder {
-  color: var(--color-text-tertiary);
-}
-
-.ks-header__search-btn {
-  background: transparent;
-  border: none;
   cursor: pointer;
-  font-size: 16px;
+  box-sizing: border-box;
-  color: var(--color-primary-500);
+  transition: all 0.15s ease;
-  padding: var(--spacing-1);
-  transition: all var(--transition-base);
 }
 
-.ks-header__search-btn:hover {
+.ks-header__quick-select:hover {
-  color: var(--color-primary-600);
+  border-color: var(--ks-color-action);
-}
+  background: #f8fafc;
-
-.ks-header__search-btn:active {
-  color: var(--color-primary-700);
 }
 
 .ks-header__end {

frontend/src/shared/shell/KsTabs.vue

@@ -126,19 +126,19 @@ const isTabActive = (tabId: string) => activeTabId.value === tabId
 .ks-tabs {
   display: flex;
   align-items: center;
-  height: var(--ks-shell-tabs-height);
+  height: 32px;
-  background-color: var(--ks-color-surface);
+  background-color: #f1f5f9;
-  border-bottom: 1px solid var(--ks-color-border);
+  border-bottom: 1px solid var(--ks-color-neutral-300);
   position: relative;
   overflow: visible;
-  gap: var(--ks-space-2);
+  gap: var(--ks-space-1);
-  padding: 0 var(--ks-space-4);
+  padding: 0 var(--ks-space-2);
   z-index: 50;
 }
 
 .ks-tabs__list {
   display: flex;
-  gap: var(--ks-space-2);
+  gap: 4px;
   flex: 1;
   min-width: 0;
   overflow-x: auto;
@@ -156,29 +156,31 @@ const isTabActive = (tabId: string) => activeTabId.value === tabId
   width: 150px;
   min-width: 150px;
   max-width: 150px;
-  background-color: var(--ks-color-neutral-100);
+  background-color: var(--ks-color-surface);
-  border: 1px solid var(--ks-color-border);
+  border: 1px solid var(--ks-color-neutral-300);
-  border-radius: var(--ks-radius-sm);
+  border-bottom: none;
-  color: var(--ks-color-text-muted);
+  border-radius: 4px 4px 0 0;
+  color: var(--ks-color-neutral-600);
   cursor: pointer;
-  font-size: var(--ks-font-grid);
+  font-size: var(--ks-font-body);
   white-space: nowrap;
   flex-shrink: 0;
   box-sizing: border-box;
-  transition: var(--ks-transition-fast);
+  transition: all 0.15s ease;
 }
 
 .ks-tabs__tab:hover {
-  background-color: var(--ks-color-neutral-200);
+  background-color: #e0f2fe;
-  color: var(--ks-color-text);
+  color: var(--ks-color-neutral-900);
 }
 
 .ks-tabs__tab--active {
-  background-color: var(--ks-color-surface);
+  background-color: #ffffff;
   color: var(--ks-color-action);
   border-color: var(--ks-color-action);
-  box-shadow: var(--ks-shadow-sm);
+  border-top: 2px solid var(--ks-color-action);
-  font-weight: 600;
+  font-weight: 700;
+  box-shadow: 0 -1px 3px rgba(0,0,0,0.05);
 }
 
 .ks-tabs__icon {

frontend/src/shared/ui/layouts/PageLayout.vue

@@ -36,8 +36,26 @@ const showHelp = ref(false)
 .ks-page__title-row { display: flex; align-items: center; gap: var(--ks-space-2); }
 h1 { margin: 0; font-size: var(--ks-font-page); line-height: var(--ks-line-page); font-weight: 700; color: var(--ks-color-neutral-900); }
 .ks-page__subtitle { margin: var(--ks-space-1) 0 0; color: var(--ks-color-neutral-600); font-size: var(--ks-font-body); padding: var(--ks-space-2); background: var(--ks-color-neutral-100); border-radius: var(--ks-radius-sm); border: 1px solid var(--ks-color-neutral-200); }
-.ks-help-btn { border: 1px solid var(--ks-color-neutral-300); background: #fff; border-radius: var(--ks-radius-sm); padding: 1px 6px; font-size: 11px; color: var(--ks-color-neutral-700); cursor: pointer; transition: all 0.15s ease; }
+.ks-help-btn { 
-.ks-help-btn:hover, .ks-help-btn.active { background: var(--ks-color-action); color: #fff; border-color: var(--ks-color-action); }
+  border: 1px solid var(--ks-color-action); 
+  background: #eff6ff; 
+  border-radius: var(--ks-radius-sm); 
+  padding: 2px 8px; 
+  font-size: 11px; 
+  font-weight: 600;
+  color: var(--ks-color-action); 
+  cursor: pointer; 
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  transition: all 0.15s ease; 
+}
+.ks-help-btn:hover, .ks-help-btn.active { 
+  background: var(--ks-color-action); 
+  color: #ffffff; 
+  border-color: var(--ks-color-action); 
+  box-shadow: 0 1px 3px rgba(37, 99, 235, 0.25);
+}
 .ks-page__meta { display: flex; gap: var(--ks-space-3); flex-wrap: wrap; margin-top: 2px; color: var(--ks-color-neutral-600); font-size: var(--ks-font-caption); }
 .ks-page__actions { display: flex; align-items: center; gap: var(--ks-space-2); flex-shrink: 0; }
 .ks-page__summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--ks-space-3); flex-shrink: 0; }