V13-FE-005: Complete KBX v60 frontend components, T01-T12 screen recipes, and WBS progress tracker

frontend/src/shared/shell/KsAppShell.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import { onMounted, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useLayoutStore } from './layoutStore'
 import KsHeader from './KsHeader.vue'
@@ -12,29 +12,34 @@ const route = useRoute()
 const router = useRouter()
 const layoutStore = useLayoutStore()
 
-// Track route changes to auto-add tabs
-onMounted(() => {
-  router.afterEach((to) => {
-    if (to.path !== '/' && to.path !== '/home') {
-      const title = (to.meta.title as string) || to.path
-      const icon = (to.meta.icon as string) || '📄'
-      const id = `tab-${to.path}`
+const syncRouteTab = (to: { path: string; meta?: Record<string, unknown> }) => {
+  if (to.path !== '/' && to.path !== '/home') {
+    const title = (to.meta?.title as string) || to.path
+    const icon = (to.meta?.icon as string) || '📄'
+    const id = `tab-${to.path}`
 
-      layoutStore.addTab({
-        id,
-        title,
-        path: to.path,
-        icon,
-      })
-    }
-  })
+    layoutStore.addTab({
+      id,
+      title,
+      path: to.path,
+      icon,
+    })
+  }
+}
+
+watch(() => route.path, () => {
+  syncRouteTab(route)
+}, { immediate: true })
+
+onMounted(() => {
+  syncRouteTab(route)
 })
 </script>
 
 <template>
   <div class="ks-app-shell">
     <!-- Skip to main content link (accessibility) -->
-    <a href="#main-content" class="ks-skip-link">본문으로 이동</a>
+    <a href="#ks-main" class="ks-skip ks-skip-link">본문으로 이동</a>
 
     <!-- Header -->
     <KsHeader
@@ -63,9 +68,14 @@ onMounted(() => {
 
       <!-- Main content with page transition -->
       <main
-        id="main-content"
+        id="ks-main"
+        tabindex="-1"
         :class="['ks-app-shell__main', { 'ks-app-shell__main--collapsed': layoutStore.sidebarCollapsed }]"
       >
+        <nav class="ks-breadcrumb" aria-label="현재 위치">
+          <span>K-ArtSell</span> &gt; <span>{{ route.meta.title || route.path }}</span>
+          <span class="ks-env-badge">RESEARCH_CANDIDATE_NOT_PRODUCTION</span>
+        </nav>
         <slot />
       </main>
     </div>

frontend/src/shared/shell/KsHeader.vue

@@ -46,7 +46,7 @@ const toggleTheme = () => {
 </script>
 
 <template>
-  <header class="ks-header">
+  <header class="ks-header ks-global-header">
     <div class="ks-header__content">
       <!-- Logo and menu toggle -->
       <div class="ks-header__start">

frontend/src/shared/shell/KsSidebar.vue

@@ -107,7 +107,7 @@ const sidebarClass = computed(() => ({
 </script>
 
 <template>
-  <aside :class="['ks-sidebar', sidebarClass]">
+  <aside aria-label="주요 메뉴" :class="['ks-sidebar', sidebarClass]">
     <!-- Header with collapse button -->
     <div class="ks-sidebar__header">
       <button

frontend/src/shared/shell/KsTabs.vue

@@ -30,13 +30,17 @@ const isTabActive = (tabId: string) => activeTabId.value === tabId
 </script>
 
 <template>
-  <div class="ks-tabs">
+  <nav class="ks-tabs ks-workspace-tabs" aria-label="열린 업무">
     <div class="ks-tabs__list">
-      <button
+      <div
         v-for="tab in tabs"
         :key="tab.id"
+        role="button"
+        tabindex="0"
         :class="['ks-tabs__tab', { 'ks-tabs__tab--active': isTabActive(tab.id) }]"
         @click="handleTabClick(tab.path)"
+        @keydown.enter="handleTabClick(tab.path)"
+        @keydown.space.prevent="handleTabClick(tab.path)"
       >
         <span class="ks-tabs__icon">{{ tab.icon }}</span>
         <span class="ks-tabs__title">{{ tab.title }}</span>
@@ -48,7 +52,7 @@ const isTabActive = (tabId: string) => activeTabId.value === tabId
         >
           ✕
         </button>
-      </button>
+      </div>
     </div>
 
     <!-- Tab actions -->
@@ -72,7 +76,7 @@ const isTabActive = (tabId: string) => activeTabId.value === tabId
         ✕✕✕
       </button>
     </div>
-  </div>
+  </nav>
 </template>
 
 <style scoped>

frontend/src/shared/shell/layoutStore.ts

@@ -34,7 +34,7 @@ export const useLayoutStore = defineStore('layout', () => {
   // Theme
   const isDarkMode = ref(
     localStorage.getItem('theme') === 'dark' ||
-    window.matchMedia('(prefers-color-scheme: dark)').matches
+    (typeof window !== 'undefined' && typeof window.matchMedia === 'function' && window.matchMedia('(prefers-color-scheme: dark)').matches)
   )
 
   // Save sidebar state

frontend/src/shared/ui/components/KArtsellMetricCard.vue

@@ -0,0 +1,122 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps<{
+  title: string
+  value: string | number
+  unit?: string
+  changeRate?: number
+  status?: 'success' | 'warning' | 'danger' | 'info'
+  subtext?: string
+  trend?: 'up' | 'down' | 'neutral'
+}>()
+
+const statusClass = computed(() => {
+  if (props.status) return `ks-metric-card--${props.status}`
+  if (props.trend === 'up') return 'ks-metric-card--up'
+  if (props.trend === 'down') return 'ks-metric-card--down'
+  return ''
+})
+
+const formattedChangeRate = computed(() => {
+  if (props.changeRate === undefined) return null
+  const prefix = props.changeRate > 0 ? '+' : ''
+  return `${prefix}${props.changeRate.toFixed(2)}%`
+})
+</script>
+
+<template>
+  <div class="ks-metric-card" :class="statusClass">
+    <div class="ks-metric-card__header">
+      <span class="ks-metric-card__title">{{ title }}</span>
+      <span v-if="trend || status" class="ks-metric-card__badge" :class="`ks-badge--${trend || status}`">
+        {{ trend ? (trend === 'up' ? '▲' : trend === 'down' ? '▼' : '-') : status }}
+      </span>
+    </div>
+    
+    <div class="ks-metric-card__body">
+      <div class="ks-metric-card__value-group">
+        <span class="ks-metric-card__value ks-financial-number">{{ value }}</span>
+        <span v-if="unit" class="ks-metric-card__unit">{{ unit }}</span>
+      </div>
+
+      <div v-if="formattedChangeRate || subtext" class="ks-metric-card__footer">
+        <span v-if="formattedChangeRate" class="ks-metric-card__change" :class="changeRate! >= 0 ? 'ks-text-up' : 'ks-text-down'">
+          {{ formattedChangeRate }}
+        </span>
+        <span v-if="subtext" class="ks-metric-card__subtext">{{ subtext }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.ks-metric-card {
+  padding: var(--ks-space-4);
+  background: var(--ks-glass-bg);
+  backdrop-filter: var(--ks-glass-blur);
+  border: 1px solid var(--ks-glass-border);
+  border-radius: var(--ks-radius-lg);
+  box-shadow: var(--ks-shadow-sm);
+  display: flex;
+  flex-direction: column;
+  gap: var(--ks-space-2);
+  transition: transform 0.15s ease, box-shadow 0.15s ease;
+}
+
+.ks-metric-card:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--ks-shadow-md);
+}
+
+.ks-metric-card__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.ks-metric-card__title {
+  font-size: 0.8125rem;
+  font-weight: 500;
+  color: var(--ks-color-text-muted);
+}
+
+.ks-metric-card__badge {
+  font-size: 0.75rem;
+  font-weight: 600;
+  padding: 0.1rem 0.4rem;
+  border-radius: var(--ks-radius-sm);
+}
+
+.ks-badge--up, .ks-badge--success { background: rgba(5, 150, 105, 0.1); color: var(--ks-color-success); }
+.ks-badge--down, .ks-badge--danger { background: rgba(220, 38, 38, 0.1); color: var(--ks-color-danger); }
+.ks-badge--warning { background: rgba(217, 119, 6, 0.1); color: var(--ks-color-warning); }
+
+.ks-metric-card__value-group {
+  display: flex;
+  align-items: baseline;
+  gap: var(--ks-space-1);
+}
+
+.ks-metric-card__value {
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: var(--ks-color-text);
+}
+
+.ks-metric-card__unit {
+  font-size: 0.875rem;
+  color: var(--ks-color-text-muted);
+}
+
+.ks-metric-card__footer {
+  display: flex;
+  align-items: center;
+  gap: var(--ks-space-2);
+  font-size: 0.75rem;
+}
+
+.ks-text-up { color: var(--ks-color-up); font-weight: 600; }
+.ks-text-down { color: var(--ks-color-down); font-weight: 600; }
+.ks-metric-card__subtext { color: var(--ks-color-text-muted); }
+</style>

frontend/src/shared/ui/components/KsButton.vue

@@ -13,6 +13,7 @@ export interface KsButtonProps {
   icon?: string
   iconPosition?: 'left' | 'right'
   ariaLabel?: string
+  severity?: 'primary' | 'secondary' | 'danger' | 'ghost' | 'text' | string
 }
 
 const props = withDefaults(defineProps<KsButtonProps>(), {
@@ -70,13 +71,13 @@ onMounted(() => {
     @click="handleClick"
   >
     <!-- Loading spinner -->
-    <span v-if="loading" class="ks-button__spinner" aria-hidden="true" />
+    <span v-if="loading" class="ks-button__spinner" aria-hidden="true">…</span>
 
     <!-- Icon (left) -->
     <span v-if="icon && iconPosition === 'left'" class="ks-button__icon ks-button__icon--left" v-text="icon" />
 
     <!-- Label -->
-    <span v-if="label" class="ks-button__label">{{ label }}</span>
+    <span v-if="label" class="ks-button__label">{{ label }}<span v-if="loading" class="ks-sr-only">…</span></span>
     <slot v-else />
 
     <!-- Icon (right) -->

frontend/src/shared/ui/components/KsCheckbox.vue

@@ -3,7 +3,7 @@ import { computed, ref } from 'vue'
 
 export interface KsCheckboxProps {
   modelValue: boolean | string[]
-  label: string
+  label?: string
   value?: any
   disabled?: boolean
   readonly?: boolean

frontend/src/shared/ui/components/KsDateField.vue

@@ -3,7 +3,7 @@ import { computed, ref } from 'vue'
 
 export interface KsDateFieldProps {
   modelValue: string | Date | null
-  label: string
+  label?: string
   type?: 'date' | 'datetime' | 'range'
   disabled?: boolean
   readonly?: boolean

frontend/src/shared/ui/components/KsListPage.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps<{
+  title?: string
+  loading?: boolean
+  error?: string
+}>()
+
+defineEmits<{
+  retry: []
+  create: []
+  refresh: []
+}>()
+</script>
+
+<template>
+  <div class="ks-list-page">
+    <div v-if="title" class="ks-list-page__header">
+      <h1 class="ks-list-page__title">{{ title }}</h1>
+      <div class="ks-list-page__actions">
+        <slot name="actions" />
+      </div>
+    </div>
+
+    <div class="ks-list-page__search">
+      <slot name="search" />
+    </div>
+
+    <div class="ks-list-page__content">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.ks-list-page {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ks-space-4);
+}
+
+.ks-list-page__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.ks-list-page__title {
+  font-size: var(--ks-font-page);
+  font-weight: 700;
+  margin: 0;
+}
+
+.ks-list-page__actions {
+  display: flex;
+  gap: var(--ks-space-2);
+}
+
+.ks-list-page__search {
+  padding: var(--ks-space-4);
+  background: var(--ks-color-surface);
+  border: 1px solid var(--ks-color-border);
+  border-radius: var(--ks-radius-md);
+}
+
+.ks-list-page__content {
+  background: var(--ks-color-surface);
+  border: 1px solid var(--ks-color-border);
+  border-radius: var(--ks-radius-md);
+}
+</style>

frontend/src/shared/ui/components/KsNumberField.vue

@@ -3,7 +3,7 @@ import { computed, ref } from 'vue'
 
 export interface KsNumberFieldProps {
   modelValue: number | null
-  label: string
+  label?: string
   type?: 'integer' | 'decimal'
   disabled?: boolean
   readonly?: boolean
@@ -18,6 +18,7 @@ export interface KsNumberFieldProps {
   size?: 'sm' | 'md' | 'lg'
   currency?: string
   decimalPlaces?: number
+  maxFractionDigits?: number
 }
 
 const props = withDefaults(defineProps<KsNumberFieldProps>(), {

frontend/src/shared/ui/components/KsSelect.vue

@@ -10,7 +10,7 @@ export interface SelectOption {
 
 export interface KsSelectProps {
   modelValue: any
-  label: string
+  label?: string
   options: SelectOption[]
   placeholder?: string
   disabled?: boolean

frontend/src/shared/ui/components/KsTextField.vue

@@ -3,7 +3,7 @@ import { computed, ref } from 'vue'
 
 export interface KsTextFieldProps {
   modelValue: string
-  label: string
+  label?: string
   type?: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url'
   placeholder?: string
   disabled?: boolean
@@ -90,7 +90,7 @@ const handleInput = (event: Event) => {
         :autocomplete="autocomplete"
         class="ks-text-field__input"
         :aria-invalid="!!error"
-        :aria-describedby="error || help ? `${id}-hint` : undefined"
+        :aria-describedby="error ? `${id}-message` : (help ? `${id}-hint` : undefined)"
         @input="handleInput"
         @focus="handleFocus"
         @blur="handleBlur"
@@ -103,8 +103,11 @@ const handleInput = (event: Event) => {
     </div>
 
     <!-- Error or help text -->
-    <div v-if="error || help" :id="`${id}-hint`" :class="{ 'ks-text-field__error': error, 'ks-text-field__help': help }">
-      {{ error || help }}
+    <div v-if="error" :id="`${id}-message`" class="ks-text-field__error">
+      {{ error }}
+    </div>
+    <div v-else-if="help" :id="`${id}-hint`" class="ks-text-field__help">
+      {{ help }}
     </div>
   </div>
 </template>