95 lines
3.8 KiB
Vue
95 lines
3.8 KiB
Vue
<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> |