KArtSell.Aegis/frontend/src/shared/shell/KsAppShell.vue

<script setup lang="ts">
import { onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useLayoutStore } from './layoutStore'
import KsHeader from './KsHeader.vue'
import KsSidebar from './KsSidebar.vue'
import KsFooter from './KsFooter.vue'
import KsNotifications from './KsNotifications.vue'
import KsTabs from './KsTabs.vue'

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}`

      layoutStore.addTab({
        id,
        title,
        path: to.path,
        icon,
      })
    }
  })
})
</script>

<template>
  <div class="ks-app-shell">
    <!-- Skip to main content link (accessibility) -->
    <a href="#main-content" class="ks-skip-link">본문으로 이동</a>

    <!-- Header -->
    <KsHeader
      @toggle-sidebar="layoutStore.toggleSidebar()"
      @toggle-mobile-menu="layoutStore.mobileMenuOpen = !layoutStore.mobileMenuOpen"
    />

    <!-- Tabs (if any tabs are open) -->
    <KsTabs v-if="layoutStore.hasOpenedTabs" />

    <div class="ks-app-shell__container">
      <!-- Sidebar -->
      <KsSidebar
        :collapsed="layoutStore.sidebarCollapsed"
        :mobile-open="layoutStore.mobileMenuOpen"
        @close-mobile="layoutStore.mobileMenuOpen = false"
        @update:collapsed="layoutStore.sidebarCollapsed = $event"
      />

      <!-- Mobile backdrop -->
      <div
        v-if="layoutStore.mobileMenuOpen"
        class="ks-mobile-backdrop"
        @click="layoutStore.mobileMenuOpen = false"
      />

      <!-- Main content with page transition -->
      <main
        id="main-content"
        :class="['ks-app-shell__main', { 'ks-app-shell__main--collapsed': layoutStore.sidebarCollapsed }]"
      >
        <slot />
      </main>
    </div>

    <!-- Footer -->
    <KsFooter />

    <!-- Notifications (toasts) -->
    <KsNotifications />
  </div>
</template>

<style scoped>
.ks-app-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: var(--color-background-primary);
  color: var(--color-text-primary);
}

.ks-skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background-color: var(--color-primary-500);
  color: white;
  padding: var(--spacing-2) var(--spacing-3);
  text-decoration: none;
  z-index: 10000;
  border-radius: 0 0 var(--border-radius-base) 0;
}

.ks-skip-link:focus {
  top: 0;
}

.ks-app-shell__container {
  display: flex;
  flex: 1;
  overflow: hidden;
  position: relative;
}

.ks-app-shell__main {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--spacing-6);
  max-width: 100%;
  scroll-behavior: smooth;
}

.ks-app-shell__main--collapsed {
  /* Sidebar is collapsed, main takes full width */
}

.ks-mobile-backdrop {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  z-index: 99;
  animation: fadeIn var(--transition-base);
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Responsive design */
@media (max-width: 768px) {
  .ks-app-shell__main {
    padding: var(--spacing-4);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ks-app-shell__main {
    scroll-behavior: auto;
  }

  .ks-mobile-backdrop {
    animation: none;
  }
}
</style>