사이트 코드와 홈페이지 위젯 추가 v1.5.34

error.vue

@@ -0,0 +1,45 @@
+<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>