페이지 이동 오버레이 해제 시점 보강

app.vue

@@ -22,25 +22,63 @@ const isSitePageNavigating = ref(false)
 
 if (import.meta.client) {
   const nuxtApp = useNuxtApp()
+  const router = useRouter()
+
+  /** @type {ReturnType<typeof setTimeout> | null} */
+  let hideOverlayTimer = null
+  let navigationOverlayToken = 0
 
   /**
    * 공개 페이지 이동 로딩 오버레이를 표시한다.
    * @returns {void}
    */
   const showSitePageNavigationOverlay = () => {
+    navigationOverlayToken += 1
+    clearTimeout(hideOverlayTimer)
+    hideOverlayTimer = null
     isSitePageNavigating.value = true
   }
 
   /**
-   * 공개 페이지 이동 로딩 오버레이를 숨긴다.
+   * 새 화면이 실제로 그려진 뒤 공개 페이지 이동 로딩 오버레이를 숨긴다.
    * @returns {void}
    */
-  const hideSitePageNavigationOverlay = () => {
+  const scheduleHideSitePageNavigationOverlay = () => {
+    const token = navigationOverlayToken
+
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        hideOverlayTimer = setTimeout(() => {
+          if (token !== navigationOverlayToken) {
+            return
+          }
+
+          isSitePageNavigating.value = false
+          hideOverlayTimer = null
+        }, 120)
+      })
+    })
+  }
+
+  /**
+   * 오류·취소 상황에서 공개 페이지 이동 로딩 오버레이를 즉시 숨긴다.
+   * @returns {void}
+   */
+  const hideSitePageNavigationOverlayImmediately = () => {
+    clearTimeout(hideOverlayTimer)
+    hideOverlayTimer = null
     isSitePageNavigating.value = false
   }
 
+  router.beforeEach((to, from) => {
+    if (to.fullPath !== from.fullPath) {
+      showSitePageNavigationOverlay()
+    }
+  })
+  router.onError(hideSitePageNavigationOverlayImmediately)
   nuxtApp.hook('page:loading:start', showSitePageNavigationOverlay)
-  nuxtApp.hook('page:loading:end', hideSitePageNavigationOverlay)
+  nuxtApp.hook('page:finish', scheduleHideSitePageNavigationOverlay)
+  nuxtApp.hook('app:error', hideSitePageNavigationOverlayImmediately)
 }
 
 useHead(() => ({
@@ -70,7 +108,7 @@ useHead(() => ({
     >
       <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]"
+        class="site-page-loading fixed inset-0 z-[90] grid place-items-center bg-[var(--site-bg)] text-[var(--site-text)]"
         role="status"
         aria-live="polite"
       >