[페이지 로딩 처리 추가] 페이지 이동 시 자동으로 로딩 표시 및 DOM 렌더링 완료 후 로딩 종료 기능을 구현하는 플러그인 추가.

plugins/page-loading.client.ts

@@ -0,0 +1,53 @@
+/**
+ * 페이지 이동 시 자동 로딩 처리 플러그인
+ * 모든 페이지 이동에서 GlobalLoading을 자동으로 표시하고
+ * DOM 렌더링 완료 후 자동으로 숨깁니다.
+ */
+export default defineNuxtPlugin(() => {
+  const { startLoading } = useLoading();
+  const router = useRouter();
+
+  let loadingStopFn: (() => void) | null = null;
+  let isNavigating = false;
+
+  // 페이지 이동 시작 시 로딩 시작
+  router.beforeEach((to, from) => {
+    // 같은 페이지 내에서의 이동은 무시
+    if (to.path === from.path) {
+      return;
+    }
+
+    // 이미 로딩 중이면 무시
+    if (isNavigating) {
+      return;
+    }
+
+    isNavigating = true;
+    loadingStopFn = startLoading("페이지를 불러오는 중...");
+  });
+
+  // 페이지 이동 완료 후 로딩 종료
+  router.afterEach(() => {
+    if (!isNavigating || !loadingStopFn) {
+      return;
+    }
+
+    // DOM이 완전히 렌더링된 후 로딩 종료
+    nextTick(() => {
+      setTimeout(() => {
+        loadingStopFn?.();
+        loadingStopFn = null;
+        isNavigating = false;
+      }, 200);
+    });
+  });
+
+  // 에러 발생 시 로딩 강제 종료
+  router.onError(() => {
+    if (loadingStopFn) {
+      loadingStopFn();
+      loadingStopFn = null;
+      isNavigating = false;
+    }
+  });
+});