47 lines
1.3 KiB
Vue
47 lines
1.3 KiB
Vue
<script setup lang="ts">
|
|
interface Props {
|
|
error: {
|
|
statusCode: number
|
|
statusMessage: string
|
|
message: string
|
|
}
|
|
}
|
|
|
|
const props = defineProps<Props>()
|
|
|
|
const errorMessages: Record<number, string> = {
|
|
404: '페이지를 찾을 수 없습니다',
|
|
403: '접근 권한이 없습니다',
|
|
500: '서버 오류가 발생했습니다',
|
|
}
|
|
|
|
const errorTitle = computed(
|
|
() => errorMessages[props.error.statusCode] ?? '오류가 발생했습니다'
|
|
)
|
|
|
|
function handleError() {
|
|
clearError({ redirect: '/' })
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="min-h-screen flex items-center justify-center bg-background">
|
|
<div class="text-center px-4">
|
|
<p class="text-8xl font-bold text-muted-foreground/30 mb-4">
|
|
{{ error.statusCode }}
|
|
</p>
|
|
<h1 class="text-2xl font-semibold mb-2">{{ errorTitle }}</h1>
|
|
<p class="text-muted-foreground mb-8 max-w-md mx-auto">
|
|
{{ error.message || error.statusMessage }}
|
|
</p>
|
|
<button
|
|
@click="handleError"
|
|
class="inline-flex items-center gap-2 px-4 py-2 rounded-md bg-primary text-primary-foreground hover:bg-primary/90 transition-colors"
|
|
>
|
|
<Icon name="lucide:arrow-left" class="w-4 h-4" />
|
|
홈으로 돌아가기
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template>
|