refactor: 에러 처리 완료, 페이지 접근 api 미들웨어로 수정

error.vue

@@ -1,14 +1,16 @@
 <template>
-  <div class="min-h-screen flex flex-col bg-[#191919]">
+  <div class="min-h-[100vh] flex flex-col bg-[#F0F0F0] pb-12">
     <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">
+
+    <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 w-[123.2px] h-7">
+        <div class="flex items-center justify-center h-7">
           <img 
             src="/images/common/logo-stove.svg" 
             alt="Stove" 
-            class="w-full h-auto"
+            class="h-full w-auto"
           />
         </div>
 
@@ -24,72 +26,70 @@
           </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 }}
+          <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="errorTitle"></span>
             </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>
+            <p v-dompurify-html="errorMsg" 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 -->
-        <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>
+        <AtomsButton 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" @click="handleError">
+          <span v-dompurify-html="tm('Error_Official_Page')"></span>
+        </AtomsButton>
+              
+        </div>
       </div>
-    </div>
+    </Transition>
   </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)
+interface ErrorProps {
+  error?: {
+    statusCode?: number
+    statusMessage?: string
+    message?: string
+  }
 }
 
-// 에러 상태 코드에 따른 메시지 설정
-const errorTitle = computed(() => {
-  if (props.error?.statusCode === 404) {
-    return '페이지를 찾을 수 없어요.'
+const { tm } = useI18n()
+const props = withDefaults(defineProps<ErrorProps>(), {
+  error: () => ({})
+})
+const nuxtError = useError()
+const currentError = computed(() => props.error || nuxtError.value)
+
+const isLoading = ref(true)
+
+const errorTitle = ref('')
+const errorMsg = ref('')
+
+//error clear 함수 생성 
+
+const handleError = () => clearError({ redirect: '/' })
+
+
+
+// 500 에러 발생 시 /error 페이지로 리다이렉트
+onMounted(() => {
+  const statusCode = currentError.value?.statusCode
+  console.log("🚀 ~ 1111currentError==:", currentError.value?.message)
+  console.log("🚀 ~ 1111statusCode:", statusCode)
+
+  if (statusCode === 500) {
+    errorTitle.value = tm('Error_500_Inconvenience')
+    errorMsg.value = tm('Error_500_Sorry')
+  } else {
+    errorTitle.value = tm('Error_404_Not_Found')
+    errorMsg.value = tm('Error_404_Not_Found2')
   }
-  return '페이지를 찾을 수 없어요.'
+  
+  nextTick(() => {
+    isLoading.value = false
+  })
 })
 
-const errorDescription = computed(() => {
-  if (props.error?.statusCode === 404) {
-    return '주소가 바뀌었거나 잘못 입력된 것 같아요. 주소를 다시 확인해 주세요.'
-  }
-  return '주소가 바뀌었거나 잘못 입력된 것 같아요. 주소를 다시 확인해 주세요.'
-})
-
-definePageMeta({
-  layout: 'only-stove'
-})
-
-
-</script>
-<style scoped>
-/* :deep(.game-wrapper) {
-display: none !important;
-} */
-</style>
+</script>