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