에러메시지지

public/css/custom.css

@@ -1,6 +1,70 @@
 /* 여기에 light css 작성  */
 
-
+/* 에러페이지 */
+/* 전체 화면을 덮는 스타일 */
+.error-page {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background: #fff;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  color: #000;
+  font-family: 'Poppins', sans-serif;
+  z-index: 9999 !important;
+}
+/* 오류 메시지 컨텐츠 */
+.error-content {
+  text-align: center;
+  animation: fadeIn 0.8s ease-in-out;
+}
+/* 에러 이미지 */
+.error-image {
+  width: 280px; /* 이미지 크기 */
+  margin-bottom: 20px;
+}
+/* 에러 코드 스타일 */
+.error-content h1 {
+  font-size: 6rem;
+  font-weight: bold;
+  color: #ff8c00; /* 오렌지 */
+  text-shadow: 2px 2px 8px rgba(255, 140, 0, 0.3);
+  margin-bottom: 60px;
+}
+/* 홈으로 돌아가기 버튼 */
+.home-btn {
+  display: inline-block;
+  padding: 10px 28px;
+  font-size: 1rem;
+  font-weight: bold;
+  text-decoration: none;
+  color: #fff;
+  background: rgba(105, 108, 255, 0.9);
+  border-radius: 30px;
+  transition: 0.3s ease-in-out;
+  box-shadow: 0 4px 15px rgba(105, 108, 255, 0.5);
+}
+/* 버튼 호버 효과 */
+.home-btn:hover {
+  background: linear-gradient(90deg, orange, #ff8c00);
+  box-shadow: 0 0 20px rgba(255, 140, 0, 1);
+  transform: scale(1.05);
+}
+/* 페이드 인 애니메이션 */
+@keyframes fadeIn {
+  from {
+      opacity: 0;
+      transform: translateY(-10px);
+  }
+  to {
+      opacity: 1;
+      transform: translateY(0);
+  }
+}
 /* 휴가 */
 
 .fc-daygrid-event {

src/common/axios-interceptor.js

@@ -51,6 +51,10 @@ $api.interceptors.response.use(
         // 오류 응답 처리
         if (error.response) {
             switch (error.response.status) {
+                case 400:
+                    toastStore.onToast('잘못된 요청입니다.', 'e');
+                    router.push('/error/400'); // 🚀 400 에러 발생 시 자동 이동
+                    break;
                 case 401:
                     if (!error.config.headers.isLogin) {
                         // toastStore.onToast('인증이 필요합니다.', 'e');
@@ -62,9 +66,11 @@ $api.interceptors.response.use(
                     break;
                 case 404:
                     toastStore.onToast('요청한 페이지를 찾을 수 없습니다.', 'e');
+                    router.push('/error/404');
                     break;
                 case 500:
                     toastStore.onToast('서버 오류가 발생했습니다.', 'e');
+                    router.push('/error/500');
                     break;
                 default:
                     toastStore.onToast('알 수 없는 오류가 발생했습니다.', 'e');

src/router/index.js

@@ -89,10 +89,12 @@ const routes = [
         component: () => import('@v/admin/TheAuthorization.vue'),
         meta: { requiresAuth: true }
     },
+    { path: "/error/400", name: "Error400", component: () => import('@v/error/Error400.vue') },
+    { path: "/error/500", name: "Error500", component: () => import('@v/error/Error500.vue') },
     {
         path: "/:anything(.*)",
-        component: () => import('@v/ErrorPage.vue'),
-    }
+        name: "Error404", component: () => import('@v/error/Error404.vue')
+    },
 ];
 
 const router = createRouter({
@@ -126,4 +128,21 @@ router.beforeEach(async (to, from, next) => {
     next();
 });
 
+import axios from 'axios';
+
+axios.interceptors.response.use(
+    response => response,
+    error => {
+        const status = error.response?.status;
+
+        if (status === 400) {
+            router.push({ name: 'Error400' });
+        } else if (status === 500) {
+            router.push({ name: 'Error500' });
+        }
+
+        return Promise.reject(error);
+    }
+);
+
 export default router

src/views/ErrorPage.vue

@@ -1,13 +0,0 @@
-<template>
-    Error
-</template>
-
-<script>
-export default {
-
-}
-</script>
-
-<style>
-
-</style>

src/views/error/Error400.vue

@@ -0,0 +1,12 @@
+<template>
+    <div class="error-container">
+        <div class="error-content">
+            <img src="/img/illustrations/page-misc-error-dark.png" alt="Error Illustration" class="error-image" />
+            <h1>400</h1>
+            <RouterLink to="/" class="home-btn">홈으로 돌아가기</RouterLink>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+</style>

src/views/error/Error404.vue

@@ -0,0 +1,13 @@
+<template>
+    <div class="error-page">
+        <div class="error-content">
+            <img src="/img/illustrations/page-misc-error-light.png" alt="Error Illustration" class="error-image" />
+            <h1>404</h1>
+            <RouterLink to="/" class="home-btn">홈으로 돌아가기</RouterLink>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+
+</style>

src/views/error/Error500.vue

@@ -0,0 +1,16 @@
+<template>
+    <div class="error-page">
+        <div class="error-content">
+            <img src="/img/illustrations/page-misc-error-dark.png" alt="Error Illustration" class="error-image" />
+            <h1>500</h1>
+            <RouterLink to="/" class="home-btn">HOME</RouterLink>
+        </div>
+    </div>
+</template>
+
+<script setup>
+</script>
+
+<style scoped>
+
+</style>