feat. 페이지 호출시 로딩 적용

layers/middleware/pageData.global.ts

@@ -1,9 +1,9 @@
 import { commonFetch } from '#layers/utils/apiUtil'
 import { usePageDataStore } from '#layers/stores/usePageDataStore'
+import { useLoadingStore } from '#layers/stores/useLoadingStore'
 import { useGetGameDomain } from '#layers/composables/useGetGameDomain'
 import { usePathResolver } from '#layers/composables/usePathResolver'
 import type { PageDataResponse } from '#layers/types/api/pageData'
-import type { GameDataValue } from '#layers/types/api/gameData'
 
 export default defineNuxtRouteMiddleware(async (to, _from) => {
   // client에서만 동작되도록 처리
@@ -13,24 +13,25 @@ export default defineNuxtRouteMiddleware(async (to, _from) => {
   const stoveApiBaseUrl = runtimeConfig.public.stoveApiUrl
   const apiUrl = `${stoveApiBaseUrl}/pub-comm/v2.0/template/page`
 
-  const store = usePageDataStore()
-  const gameDomain = useGetGameDomain()
-  const { getPathAfterLanguage } = usePathResolver()
-  const headers = useRequestHeaders()
   const gameDataStore = useGameDataStore()
-  const gameData = gameDataStore.gameData as GameDataValue
+  const pageDataStore = usePageDataStore()
+  const loadingStore = useLoadingStore()
+  const gameDomain = useGetGameDomain()
+  const headers = useRequestHeaders()
+  const { getPathAfterLanguage } = usePathResolver()
+
+  const { gameData } = storeToRefs(gameDataStore)
 
   const langCode = ssrGetFinalLocale(
     to.path,
     headers,
-    gameData?.lang_codes,
-    gameData?.default_lang_code
+    gameData.value?.lang_codes,
+    gameData.value?.default_lang_code
   )
 
   try {
-    
     if (to.path.includes('inspection')) {
-      console.log("🚀 ~ 점검페이지 접근 pageData.global")
+      console.log('🚀 ~ 점검페이지 접근 pageData.global')
       return
     }
 
@@ -42,10 +43,18 @@ export default defineNuxtRouteMiddleware(async (to, _from) => {
     }
 
     // pageUrl이 빈값이거나 null이면 /brand로 리다이렉트
-    if (!pageUrl || pageUrl === '' || pageUrl === '/' || pageUrl === `/${langCode}/`) {
+    if (
+      !pageUrl ||
+      pageUrl === '' ||
+      pageUrl === '/' ||
+      pageUrl === `/${langCode}/`
+    ) {
       return navigateTo(`/${langCode}/brand`, { external: false })
     }
 
+    // 페이지 이동 시 로딩 시작
+    loadingStore.startFullLoading()
+
     const accessToken = csrGetAccessToken()
 
     const headers = {
@@ -54,7 +63,7 @@ export default defineNuxtRouteMiddleware(async (to, _from) => {
 
     // 쿼리스트링에서 f 파라미터 값 추출 (CSR용)
     const fValue = (to.query.f as string) || ''
-    
+
     // 미리보기 API 호출 처리
     let finalGameDomain = gameDomain
     if (fValue === 'preview') {
@@ -71,17 +80,16 @@ export default defineNuxtRouteMiddleware(async (to, _from) => {
     const response = (await commonFetch('GET', apiUrl, {
       headers,
       query: queryParams,
-      loading: true,
     })) as PageDataResponse | null
     console.log('🚀 ~ pageData.global response:', response.value)
 
     // 페이지 접근 권한 설정(로그인 유무)
-    if(response?.value?.is_login_required === 1 && !accessToken) {
+    if (response?.value?.is_login_required === 1 && !accessToken) {
       // 로그인 레이어 팝업 띄워주기
       const nuxtApp = useNuxtApp()
       const modalStore = useModalStore()
       const $i18n = nuxtApp.$i18n as any
-      const {tm} = $i18n
+      const { tm } = $i18n
       modalStore.handleOpenConfirm({
         contentText: tm('Alert_StoveLogin'),
         confirmButtonText: tm('Text_StoveLogin'),
@@ -91,34 +99,37 @@ export default defineNuxtRouteMiddleware(async (to, _from) => {
       })
     }
 
-    if(response?.code === 91003) {
+    if (response?.code === 91003) {
       // return navigateTo(`/${langCode}/error`, { external: false })
       //클릭한 주소는 주소표시줄에 표시하도록 수정
       window.history.replaceState({}, '', to.path)
-      // 뒤로가기 이동 시 이전 페이지로 이동되도록 수정      
-      showError(createError({
-        statusCode: 404,
-        statusMessage: '페이지를 찾을 수 없어요.',
-        fatal: false,                // 즉시 에러 페이지로
-        data: { reason: 'post-not-found' }
-      }))
-
+      // 뒤로가기 이동 시 이전 페이지로 이동되도록 수정
+      showError(
+        createError({
+          statusCode: 404,
+          statusMessage: '페이지를 찾을 수 없어요.',
+          fatal: false, // 즉시 에러 페이지로
+          data: { reason: 'post-not-found' },
+        })
+      )
     }
 
     if (response?.code === 0 && 'value' in response) {
-      store.setPageData(response.value)
+      pageDataStore.setPageData(response.value)
     } else {
-      store.clearPageData()
+      pageDataStore.clearPageData()
     }
   } catch (error) {
     console.error(error)
-    store.clearPageData()
+    pageDataStore.clearPageData()
 
-    showError(createError({
-      statusCode: error.statusCode,
-      statusMessage: error.message,
-      fatal: false,                // 즉시 에러 페이지로
-      data: { reason: 'post-not-found' }
-    }))
+    showError(
+      createError({
+        statusCode: error.statusCode,
+        statusMessage: error.message,
+        fatal: false, // 즉시 에러 페이지로
+        data: { reason: 'post-not-found' },
+      })
+    )
   }
 })