Feature/에러 핸들링

package.json

@@ -34,6 +34,7 @@
     "next": "15.5.9",
     "react": "19.1.0",
     "react-dom": "19.1.0",
+    "react-hot-toast": "^2.6.0",
     "zustand": "^5.0.9"
   },
   "devDependencies": {

src/lib/services/servicesClient.ts

@@ -1,4 +1,5 @@
 import axios, { AxiosError, AxiosResponse } from 'axios';
+import toast from 'react-hot-toast';
 
 import useAuthStore from '@/stores/useAuthStore';
 import { ErrorResponse } from '@/types/api/apiError';
@@ -19,10 +20,10 @@ const onError = (error: AxiosError<ErrorResponse>): Promise<ErrorResponse> => {
   const res = error.response;
 
   if (res?.data) {
-    // 추후에 에러 처리 작업 진행 예정
+    toast.error(res.data.message ?? '잠시후에 다시 시도해주세요');
     return Promise.reject(error);
   }
-
+  toast.error('서버 장애 : 잠시후에 다시 시도해주세요');
   return Promise.reject(error);
 };
 

src/pages/404.page.style.ts

@@ -0,0 +1,46 @@
+import styled from '@emotion/styled';
+
+import { colors } from '@/styles/colors';
+
+export const Container = styled.section`
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  min-height: calc(100vh - 80px);
+  padding: 40px 20px;
+  text-align: center;
+`;
+
+export const Title = styled.h1`
+  margin: 0;
+  font-size: 72px;
+`;
+
+export const Subtitle = styled.h2`
+  font-size: 24px;
+`;
+
+export const Description = styled.p`
+  margin-bottom: 20px;
+  font-size: 16px;
+`;
+
+export const HomeButton = styled.button`
+  padding: 12px 20px;
+  font-size: 16px;
+  font-weight: 700;
+  color: ${colors.white};
+  cursor: pointer;
+  background-color: #ea3c12;
+  border: none;
+  border-radius: 8px;
+  transition: 0.2s;
+
+  &:hover {
+    opacity: 0.9;
+    transform: translateY(-2px);
+  }
+`;

src/pages/404.page.tsx

@@ -0,0 +1,29 @@
+import { useRouter } from 'next/router';
+
+import { STORE_ROUTES } from '@/constants/routes';
+
+import * as S from './404.page.style';
+
+const NotFoundPage = () => {
+  const router = useRouter();
+
+  const handleGoHome = () => {
+    router.replace(STORE_ROUTES.ROOT);
+  };
+
+  return (
+    <S.Container>
+      <S.Title>404</S.Title>
+      <S.Subtitle>페이지를 찾을 수 없습니다</S.Subtitle>
+      <S.Description>
+        입력하신 주소가 잘못되었거나
+        <br /> 페이지가 이동되었을 수 있어요.
+      </S.Description>
+      <S.HomeButton type="button" onClick={handleGoHome}>
+        홈으로 돌아가기
+      </S.HomeButton>
+    </S.Container>
+  );
+};
+
+export default NotFoundPage;

src/pages/_app.page.tsx

@@ -2,6 +2,7 @@ import type { AppProps } from 'next/app';
 
 import { NextPage } from 'next';
 import { ReactElement, ReactNode } from 'react';
+import { Toaster } from 'react-hot-toast';
 
 import DefaultLayout from '@/components/layout/DefaultLayout';
 import { GlobalStyle } from '@/styles/GlobalStyle';
@@ -22,6 +23,7 @@ const App = ({ Component, pageProps }: AppPropsWithLayout) => {
     <>
       <GlobalStyle />
       <Component {...pageProps} />
+      <Toaster />
     </>
   );
 };