140 lines
4.2 KiB
Vue
140 lines
4.2 KiB
Vue
<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="errorTitle"></span>
|
|
</h1>
|
|
<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 -->
|
|
<AtomsButton
|
|
type="action"
|
|
button-size="size-small md:size-large"
|
|
background-color="#FC4420"
|
|
text-color="#FFFFFF"
|
|
@click="handleError"
|
|
>
|
|
<span v-dompurify-html="tm('Error_Official_Page')"></span>
|
|
</AtomsButton>
|
|
</div>
|
|
</div>
|
|
</Transition>
|
|
</div>
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
interface ErrorProps {
|
|
error?: {
|
|
statusCode?: number
|
|
statusMessage?: string
|
|
message?: string
|
|
}
|
|
}
|
|
|
|
const { tm } = useI18n()
|
|
const props = withDefaults(defineProps<ErrorProps>(), {
|
|
error: () => ({})
|
|
})
|
|
const router = useRouter()
|
|
const nuxtError = useError()
|
|
const currentError = computed(() => props.error || nuxtError.value)
|
|
|
|
const isLoading = ref(true)
|
|
|
|
const errorTitle = ref('')
|
|
const errorMsg = ref('')
|
|
|
|
//error clear 함수 생성
|
|
|
|
const localePath = useLocalePath()
|
|
|
|
// const handleError = () => clearError({ redirect: '/' })
|
|
const handleError = () => {
|
|
window.location.href = localePath('/')
|
|
// clearError({ redirect: `${localePath('/brand')}` })
|
|
}
|
|
const handleBack = () => {
|
|
// 에러 상태를 클리어하고 이전 페이지로 이동
|
|
// popstate 이벤트가 이미 발생한 경우이므로 추가 동작 불필요
|
|
// 키보드 백스페이스의 경우에만 명시적으로 뒤로가기 실행
|
|
window.location.href = localePath('/')
|
|
// navigateTo(`${router.currentRoute.value.path}`)
|
|
}
|
|
|
|
|
|
// 500 에러 발생 시 /error 페이지로 리다이렉트
|
|
onMounted(() => {
|
|
console.log("🚀 ~ 1111 handleBack ~ router:", router)
|
|
console.log("🚀 ~ 2222 router.currentRoute.value.path) ~ router:", router.currentRoute.value.path)
|
|
|
|
const statusCode = currentError.value?.statusCode
|
|
console.log("🚀 ~ 2222 currentError==:", currentError.value?.message)
|
|
console.log("🚀 ~ 222222 statusCode:", 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')
|
|
}
|
|
|
|
nextTick(() => {
|
|
isLoading.value = false
|
|
})
|
|
|
|
// 백스페이스 키 처리
|
|
const handleKeydown = (e: KeyboardEvent) => {
|
|
console.log("🚀 ~ handleKeydown ~ e:", e.key)
|
|
if (e.key === 'Backspace' &&
|
|
!['INPUT', 'TEXTAREA'].includes((e.target as HTMLElement).tagName)) {
|
|
e.preventDefault()
|
|
handleBack()
|
|
}
|
|
}
|
|
|
|
// 브라우저 뒤로가기 버튼 처리
|
|
const handlePopState = () => {
|
|
// clearError()
|
|
handleBack()
|
|
}
|
|
|
|
window.addEventListener('keydown', handleKeydown)
|
|
window.addEventListener('popstate', handlePopState)
|
|
|
|
onUnmounted(() => {
|
|
window.removeEventListener('keydown', handleKeydown)
|
|
window.removeEventListener('popstate', handlePopState)
|
|
})
|
|
})
|
|
|
|
</script> |