Initial commit: Add project files

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

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+defineProps<{ title: string; subtitle?: string; status?: string; asOf?: string; version?: string; asideWidth?: string }>()
+</script>
+<template>
+  <section class="ks-page" :style="{ '--ks-aside-width': asideWidth ?? '22rem' }">
+    <header class="ks-page__header">
+      <div><h1>{{ title }}</h1><p v-if="subtitle">{{ subtitle }}</p><div class="ks-page__meta"><span v-if="status">상태: {{ status }}</span><span v-if="asOf">As-of: {{ asOf }}</span><span v-if="version">Version: {{ version }}</span></div></div>
+      <div class="ks-page__actions"><slot name="actions" /></div>
+    </header>
+    <div v-if="$slots.summary" class="ks-page__summary"><slot name="summary" /></div>
+    <div v-if="$slots.filters" class="ks-page__filters ks-card"><slot name="filters" /></div>
+    <div class="ks-page__workspace" :class="{ 'has-aside': $slots.aside }">
+      <div class="ks-page__content"><slot /></div>
+      <aside v-if="$slots.aside" class="ks-page__aside"><slot name="aside" /></aside>
+    </div>
+    <footer v-if="$slots.footer" class="ks-page__footer"><slot name="footer" /></footer>
+  </section>
+</template>
+<style scoped>
+.ks-page { max-width: var(--ks-content-max); margin: 0 auto; display: grid; gap: var(--ks-space-4); }
+.ks-page__header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--ks-space-4); }
+h1 { margin: 0; font-size: var(--ks-font-page); line-height: var(--ks-line-page); } p { margin: var(--ks-space-1) 0 0; color: var(--ks-color-neutral-600); }
+.ks-page__meta { display: flex; gap: var(--ks-space-3); flex-wrap: wrap; margin-top: var(--ks-space-2); color: var(--ks-color-neutral-600); font-size: var(--ks-font-caption); }
+.ks-page__summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--ks-space-3); }
+.ks-page__filters { padding: var(--ks-space-3); }
+.ks-page__workspace { min-width: 0; display: grid; gap: var(--ks-space-4); }
+.ks-page__workspace.has-aside { grid-template-columns: minmax(0, 1fr) var(--ks-aside-width); }
+.ks-page__content, .ks-page__aside { min-width: 0; }
+.ks-page__footer { position: sticky; bottom: 0; z-index: 2; display: flex; justify-content: flex-end; gap: var(--ks-space-2); padding: var(--ks-space-3); border: 1px solid var(--ks-color-neutral-200); background: rgb(255 255 255 / 96%); }
+@media (max-width: 1100px) { .ks-page__workspace.has-aside { grid-template-columns: 1fr; } }
+</style>