refactor: csr에러페이지 리다이렉트 추가

2025-11-10 14:59:07 +09:00
parent 6d783c7cc3
commit ceee82268c
4 changed files with 80 additions and 109 deletions
--- a/app/pages/error.vue
+++ b/app/pages/error.vue
@@ -1,95 +0,0 @@
-<template>
-    <div class="min-h-screen flex flex-col bg-[#191919]">
-      <LayoutsStoveHeader />
-      <div class="flex-1 flex items-center justify-center bg-[#F0F0F0] pt-[223px] pb-[223px] px-5 max-[374px]:px-5 md:px-[530px]">
-        <div class="flex flex-col items-center gap-6 w-full max-w-[513px] max-[374px]:max-w-[335px] md:max-w-[860px] py-10 max-[374px]:gap-6 md:gap-6 md:py-20">
-          <!-- Stove Logo -->
-          <div class="flex items-center justify-center w-[123.2px] h-7">
-            <img 
-              src="/images/common/logo-stove.svg" 
-              alt="Stove" 
-              class="w-full h-auto"
-            />
-          </div>
-  
-          <!-- Error Icon and Text -->
-          <div class="flex flex-col items-center gap-4 w-full">
-            <!-- Error Icon -->
-            <div class="flex items-center justify-center">
-              <img 
-                src="/images/common/img_error.png" 
-                alt="Error" 
-                class="w-40 h-40 md:w-60 md:h-60"
-              />
-            </div>
-  
-            <!-- Error Text -->
-            <div class="flex flex-col items-center gap-1 w-full">
-              <h1 class="font-['Spoqa_Han_Sans_Neo',sans-serif] font-medium text-xl md:text-2xl leading-[1.5] md:leading-[1.4166666666666667] tracking-[-0.03em] text-center text-[#1F1F1F] m-0">
-                {{ errorTitle }}
-              </h1>
-              <p class="font-['Spoqa_Han_Sans_Neo',sans-serif] font-normal text-sm md:text-base leading-[1.7142857142857142] md:leading-[1.625] tracking-[-0.03em] text-center text-[#666666] m-0">
-                {{ errorDescription }}
-              </p>
-            </div>
-          </div>
-  
-          <!-- Home Button -->
-          <button 
-            class="flex items-center justify-center font-['Spoqa_Han_Sans_Neo',sans-serif] font-medium text-sm leading-[1.4285714285714286em] tracking-[-0.03em] text-white bg-[#FC4420] border border-black/10 rounded-lg px-10 h-12 cursor-pointer transition-all duration-300 backdrop-blur-[30px] shadow-[0px_0.9131946563720703px_1.4666459560394287px_0px_rgba(0,0,0,0.06),0px_2.194533586502075px_3.5245540142059326px_0px_rgba(0,0,0,0.09)] hover:bg-[#E03D1C] hover:shadow-[0px_0.9131946563720703px_1.4666459560394287px_0px_rgba(0,0,0,0.06),0px_2.194533586502075px_3.5245540142059326px_0px_rgba(0,0,0,0.09),0px_4.1321120262146px_6.636422634124756px_0px_rgba(0,0,0,0.12)] active:translate-y-px"
-            @click="handleGoHome"
-          >
-            {{ homeButtonText }}
-          </button>
-        </div>
-      </div>
-    </div>
-  </template>
-  
-  <script setup lang="ts">
-  import type { NuxtError } from '#app'
-  import { useGameDataStore } from '#layers/stores/useGameDataStore'
-  import { useLocalePath } from '#i18n'
-  
-  const props = defineProps({
-    error: Object as () => NuxtError,
-  })
-  
-  const gameDataStore = useGameDataStore()
-  const { gameData } = storeToRefs(gameDataStore)
-  const localePath = useLocalePath()
-  
-  const gameName = computed(() => gameData.value?.game_name || '게임')
-  const homeButtonText = computed(() => `${gameName.value} 홈페이지 가기`)
-  
-  const handleGoHome = () => {
-    const homePath = localePath('/')
-    navigateTo(homePath)
-  }
-  
-  // 에러 상태 코드에 따른 메시지 설정
-  const errorTitle = computed(() => {
-    if (props.error?.statusCode === 404) {
-      return '페이지를 찾을 수 없어요.'
-    }
-    return '페이지를 찾을 수 없어요.'
-  })
-  
-  const errorDescription = computed(() => {
-    if (props.error?.statusCode === 404) {
-      return '주소가 바뀌었거나 잘못 입력된 것 같아요. 주소를 다시 확인해 주세요.'
-    }
-    return '주소가 바뀌었거나 잘못 입력된 것 같아요. 주소를 다시 확인해 주세요.'
-  })
-
-  definePageMeta({
-    layout: 'only-stove'
-  })
-
-
-</script>
-<style scoped>
-/* :deep(.game-wrapper) {
-  display: none !important;
-} */
-</style>
--- a/app/pages/error/index.vue
+++ b/app/pages/error/index.vue
@@ -0,0 +1,59 @@
+<template>
+  <div class="min-h-[100vh] flex flex-col bg-[#F0F0F0] pb-12">
+    <LayoutsStoveHeader />
+
+    <Transition name="fade">
+      <div v-if="!isLoading" class="flex-1 flex items-center justify-center p-25">
+        <div class="flex flex-col items-center gap-6 w-full">
+        <!-- Stove Logo -->
+        <div class="flex items-center justify-center h-7">
+          <img 
+            src="/images/common/logo-stove.svg" 
+            alt="Stove" 
+            class="h-full w-auto"
+          />
+        </div>
+
+        <!-- Error Icon and Text -->
+        <div class="flex flex-col items-center gap-4 w-full">
+          <!-- Error Icon -->
+          <div class="flex items-center justify-center">
+            <img 
+              src="/images/common/img_error.png" 
+              alt="Error" 
+              class="w-40 h-40 md:w-60 md:h-60"
+            />
+          </div>
+
+          <!-- Error Text -->
+          <div class="flex flex-col items-center gap-2 w-full">
+            <h1 class="font-medium text-xl md:text-2xl leading-[1.5] tracking-[-0.03em] text-center text-[#1F1F1F] m-0">
+              <span v-dompurify-html="tm('Error_404_Not_Found')"></span>
+            </h1>
+            <p v-dompurify-html="tm('Error_404_Not_Found2')" class="font-normal text-sm md:text-base leading-[1.7] md:leading-[1.625] tracking-[-0.03em] text-center text-[#666666] m-0"></p>
+          </div>
+        </div>
+
+        <!-- Home Button -->
+        <AtomsLocaleLink to="/brand" class="flex items-center justify-center font-medium text-sm leading-[1.4] tracking-[-0.03em] text-white bg-[#FC4420] border border-black/10 rounded-lg px-10 h-12 cursor-pointer transition-all duration-300 backdrop-blur-[30px] shadow-[0px_0.9131946563720703px_1.4666459560394287px_0px_rgba(0,0,0,0.06),0px_2.194533586502075px_3.5245540142059326px_0px_rgba(0,0,0,0.09)] hover:bg-[#E03D1C] hover:shadow-[0px_0.9131946563720703px_1.4666459560394287px_0px_rgba(0,0,0,0.06),0px_2.194533586502075px_3.5245540142059326px_0px_rgba(0,0,0,0.09),0px_4.1321120262146px_6.636422634124756px_0px_rgba(0,0,0,0.12)] active:translate-y-px">
+          <span v-dompurify-html="tm('Error_Official_Page')"></span>
+        </AtomsLocaleLink>
+              
+        </div>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<script setup lang="ts">
+const { tm } = useI18n()
+
+const isLoading = ref(true)
+
+onMounted(() => {
+  nextTick(() => {
+    isLoading.value = false
+  })
+})
+
+</script>
--- a/layers/middleware/init.route.global.ts
+++ b/layers/middleware/init.route.global.ts
@@ -9,9 +9,16 @@ export default defineNuxtRouteMiddleware(async (to, _from) => {
  // 현재 경로에서 언어 코드 추출
  // 예: /ko/about/story -> ko
  // 예: /en/test/page -> en
-  const languagePattern = /^\/([a-z]{2})(?:\/|$)/
-  const match = to.path.match(languagePattern)
-  const currentLangCode = match ? match[1] : null
+
+  const gameDataStore = useGameDataStore()
+  const gameData = gameDataStore.gameData as GameDataValue
+  const langCodes = gameData?.lang_codes
+  const currentLangCode = csrGetFinalLocale(to.path, langCodes)
+
+  // const languagePattern = /^\/([a-z]{2})(?:\/|$)/
+  // const match = to.path.match(languagePattern)
+  // const currentLangCode = match ? match[1] : null
+  console.log("🚀 777777 ~ currentLangCode:", currentLangCode)

  //현재 url에서 게임 도메인만 추출
  const currentDomain = window.location.hostname
@@ -27,11 +34,9 @@ export default defineNuxtRouteMiddleware(async (to, _from) => {
  const { getGameDataExternal } = useGetGameDataExternal()
  await getGameDataExternal(req)

-  const gameDataStore = useGameDataStore()
-  const gameData = gameDataStore.gameData as GameDataValue
-  const langCodes = gameData?.lang_codes
+  

-  // 허용된 언어 코드 목록
+  // 허용된 언어 코드 목록≈≈
  const allowedLangCodes = langCodes || []

  // 현재 언어가 허용된 언어 목록에 없으면 에러 페이지로 이동
--- a/layers/middleware/pageData.global.ts
+++ b/layers/middleware/pageData.global.ts
@@ -38,8 +38,13 @@ export default defineNuxtRouteMiddleware(async (to, _from) => {

    const pageUrl = getPathAfterLanguage(to.path)

+    // error 페이지는 API 호출하지 않음
+    if (pageUrl === '/error' || to.path.includes('/error')) {
+      return
+    }
+
    // pageUrl이 빈값이거나 null이면 /brand로 리다이렉트
-    if (!pageUrl || pageUrl === '' || pageUrl === '/') {
+    if (!pageUrl || pageUrl === '' || pageUrl === '/' || pageUrl === `/${langCode}/`) {
      return navigateTo(`/${langCode}/brand`, { replace: true })
    }

@@ -57,12 +62,9 @@ export default defineNuxtRouteMiddleware(async (to, _from) => {
    })) as PageDataResponse | null
    console.log('🚀 ~ response?.code:', response?.code)

-    // if(response?.code === 91003) {
-    //   throw createError({
-    //     statusCode: 404,
-    //     statusMessage: 'Page not found',
-    //   })
-    // }
+    if(response?.code === 91003) {
+      return navigateTo(`/${langCode}/error`, { external: false })
+    }

    if (response?.code === 0 && 'value' in response) {
      store.setPageData(response.value)