사용자 이동과 미디어 선택 개선

app.vue

@@ -18,6 +18,31 @@ const siteAccentStyle = computed(() => ({
   '--site-accent': siteAccentColor.value
 }))
 
+const isSitePageNavigating = ref(false)
+
+if (import.meta.client) {
+  const nuxtApp = useNuxtApp()
+
+  /**
+   * 공개 페이지 이동 로딩 오버레이를 표시한다.
+   * @returns {void}
+   */
+  const showSitePageNavigationOverlay = () => {
+    isSitePageNavigating.value = true
+  }
+
+  /**
+   * 공개 페이지 이동 로딩 오버레이를 숨긴다.
+   * @returns {void}
+   */
+  const hideSitePageNavigationOverlay = () => {
+    isSitePageNavigating.value = false
+  }
+
+  nuxtApp.hook('page:loading:start', showSitePageNavigationOverlay)
+  nuxtApp.hook('page:loading:end', hideSitePageNavigationOverlay)
+}
+
 useHead(() => ({
   titleTemplate: (titleChunk) => titleChunk || appSiteSettings.value.title,
   link: appSiteSettings.value.faviconUrl
@@ -35,8 +60,40 @@ useHead(() => ({
 <template>
   <div class="site-app" :style="siteAccentStyle">
     <NuxtLoadingIndicator :color="siteAccentColor" :height="3" :throttle="80" :duration="5000" />
+    <Transition
+      enter-active-class="transition duration-100 ease-out"
+      enter-from-class="opacity-0"
+      enter-to-class="opacity-100"
+      leave-active-class="transition duration-150 ease-in"
+      leave-from-class="opacity-100"
+      leave-to-class="opacity-0"
+    >
+      <div
+        v-if="isSitePageNavigating"
+        class="site-page-loading fixed inset-0 z-[90] grid place-items-center bg-[var(--site-bg)]/78 text-[var(--site-text)] backdrop-blur-[2px]"
+        role="status"
+        aria-live="polite"
+      >
+        <div class="site-page-loading__panel grid place-items-center gap-3 text-center">
+          <span class="site-page-loading__spinner size-8 rounded-full border-2 border-[var(--site-line)] border-t-[var(--site-accent)]" aria-hidden="true" />
+          <span class="text-xs font-semibold uppercase tracking-[0.18em] opacity-70">Loading</span>
+        </div>
+      </div>
+    </Transition>
     <NuxtLayout>
       <NuxtPage />
     </NuxtLayout>
   </div>
 </template>
+
+<style scoped>
+.site-page-loading__spinner {
+  animation: site-page-loading-spin 0.8s linear infinite;
+}
+
+@keyframes site-page-loading-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+</style>