46 lines
1.7 KiB
Vue
46 lines
1.7 KiB
Vue
<script setup>
|
|
const error = useError()
|
|
|
|
const statusCode = computed(() => Number(error.value?.statusCode || 500))
|
|
const isNotFound = computed(() => statusCode.value === 404)
|
|
const pageTitle = computed(() => (isNotFound.value ? '페이지를 찾을 수 없습니다' : '오류가 발생했습니다'))
|
|
const pageDescription = computed(() => (
|
|
isNotFound.value
|
|
? '요청한 주소가 없거나 공개되지 않은 페이지입니다.'
|
|
: '잠시 후 다시 시도해 주세요.'
|
|
))
|
|
|
|
useHead(() => ({
|
|
title: pageTitle.value
|
|
}))
|
|
|
|
/**
|
|
* 오류 상태를 정리하고 홈으로 이동한다.
|
|
* @returns {Promise<void>} 이동 처리
|
|
*/
|
|
const goHome = () => clearError({ redirect: '/' })
|
|
</script>
|
|
|
|
<template>
|
|
<main class="error-page min-h-screen bg-[var(--site-bg)] px-5 py-12 text-[var(--site-text)]">
|
|
<section class="error-page__panel mx-auto flex min-h-[calc(100vh-6rem)] max-w-3xl flex-col items-start justify-center">
|
|
<p class="error-page__code text-sm font-semibold uppercase tracking-[0.12em] text-[var(--site-muted)]">
|
|
{{ statusCode }}
|
|
</p>
|
|
<h1 class="error-page__title mt-4 text-4xl font-bold tracking-tight md:text-6xl">
|
|
{{ pageTitle }}
|
|
</h1>
|
|
<p class="error-page__description mt-5 max-w-xl text-base leading-7 text-[var(--site-muted)] md:text-lg">
|
|
{{ pageDescription }}
|
|
</p>
|
|
<button
|
|
class="error-page__home-button mt-8 inline-flex h-11 items-center justify-center rounded-md bg-[var(--site-text)] px-5 text-sm font-semibold text-[var(--site-bg)] transition hover:opacity-85"
|
|
type="button"
|
|
@click="goHome"
|
|
>
|
|
홈으로 이동
|
|
</button>
|
|
</section>
|
|
</main>
|
|
</template>
|