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>