릴리스: v0.1.52 프리뷰 전용화와 썸네일 자동 생성

frontend/src/App.vue

@@ -10,6 +10,7 @@ const router = useRouter()
 const auth = useAuthStore()
 const { toasts, dismissToast } = useToast()
 const isAdmin = computed(() => !!auth.user?.isAdmin)
+const isPreviewMode = computed(() => route.query.preview === '1')
 const avatarUrl = computed(() => {
   if (!auth.user?.avatarSrc) return ''
   return toApiUrl(auth.user.avatarSrc)
@@ -57,7 +58,7 @@ async function logout() {
 
 <template>
   <div class="app-shell">
-    <header class="app-header">
+    <header v-if="!isPreviewMode" class="app-header">
       <div class="brand" @click="$router.push('/')">
         <span class="brand__title">Tier Maker</span>
         <span class="brand__sub">by zenn</span>
@@ -81,10 +82,10 @@ async function logout() {
         </div>
       </nav>
     </header>
-    <main class="app-main">
+    <main class="app-main" :class="{ 'app-main--preview': isPreviewMode }">
       <RouterView />
     </main>
-    <div class="toastStack" aria-live="polite" aria-atomic="true">
+    <div class="toastStack" :class="{ 'toastStack--preview': isPreviewMode }" aria-live="polite" aria-atomic="true">
       <div v-for="item in toasts" :key="item.id" class="toast" :class="[`toast--${item.type}`, { 'toast--closing': item.isClosing }]">
         <div class="toast__body">
           <div class="toast__message">{{ item.message }}</div>
@@ -158,6 +159,10 @@ async function logout() {
   width: 100%;
   box-sizing: border-box;
 }
+.app-main--preview {
+  padding: 0;
+  min-height: 100vh;
+}
 
 .user {
   position: relative;
@@ -219,6 +224,9 @@ async function logout() {
   gap: 10px;
   width: min(360px, calc(100vw - 24px));
 }
+.toastStack--preview {
+  top: 12px;
+}
 .toast {
   display: flex;
   gap: 12px;