[KAN-233] refactor(contract): 에러 페이지 추가

Try-AngIe · Jul 26, 2024 · 05724e5 · 05724e5
1 parent 3cca5b1
commit 05724e5
Show file tree

Hide file tree

Showing 6 changed files with 163 additions and 2 deletions.
diff --git a/client/src/apis/index.js b/client/src/apis/index.js
@@ -86,6 +86,34 @@ export const publicUploadFileAxios = axios.create({
 // );
 
 // // 응답 인터셉터 설정
+
+[publicAxios, publicUploadFileAxios, privateAxios].forEach(instance => {
+  instance.interceptors.response.use(
+    response => response,
+    err => {
+      if (err.response) {
+        switch (err.response.status) {
+          // case 400:
+          //   window.location.href = '/error/badrequest';
+          //   break;
+          case 403:
+            window.location.href = '/error/forbidden';
+            break;
+          case 404:
+            window.location.href = '/error/notfound';
+            break;
+          case 500:
+            window.location.href = '/error/internal';
+            break;
+          default:
+            break;
+        }
+      }
+      return Promise.reject(err);
+    }
+  );
+});
+
 // privateAxios.interceptors.response.use(
 //   response => {
 //     return response;

diff --git a/client/src/pages/utils/error/ForbiddenErrorPage.jsx b/client/src/pages/utils/error/ForbiddenErrorPage.jsx
@@ -0,0 +1,37 @@
+import { Link, useNavigate } from 'react-router-dom';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faArrowLeft, faHome, faLock } from '@fortawesome/free-solid-svg-icons';
+
+const ForbiddenErrorPage = () => {
+  const navigate = useNavigate();
+
+  return (
+    <div className='min-h-screen flex flex-col justify-center items-center px-4'>
+      <div className='max-w-md w-full rounded-lg overflow-hidden'>
+        <div className='p-8'>
+          <div className='text-center'>
+            <h1 className='text-9xl font-bold text-mint mb-4'>403</h1>
+            <p className='text-2xl font-semibold text-gray-700 mb-4'>접근 금지</p>
+            <p className='text-gray-500 mb-8'>죄송합니다. 이 페이지에 접근할 권한이 없습니다.</p>
+          </div>
+          <div className='flex justify-center space-x-4'>
+            <Link
+              to='/'
+              className='flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-mint hover:bg-mint_hover focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-mint'>
+              <FontAwesomeIcon icon={faHome} className='mr-2' />
+              홈으로 가기
+            </Link>
+            <button
+              onClick={() => navigate(-1)}
+              className='flex items-center justify-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-mint'>
+              <FontAwesomeIcon icon={faArrowLeft} className='mr-2' />
+              뒤로가기
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ForbiddenErrorPage;
diff --git a/client/src/pages/utils/error/InternalServerErrorPage.jsx b/client/src/pages/utils/error/InternalServerErrorPage.jsx
@@ -0,0 +1,41 @@
+import { Link, useNavigate } from 'react-router-dom';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faArrowLeft, faHome, faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
+
+const InternalServerErrorPage = () => {
+  const navigate = useNavigate();
+
+  return (
+    <div className='min-h-screen flex flex-col justify-center items-center px-4'>
+      <div className='max-w-md w-full rounded-lg overflow-hidden'>
+        <div className='p-8'>
+          <div className='text-center'>
+            <h1 className='text-9xl font-bold text-mint mb-4'>500</h1>
+            <p className='text-2xl font-semibold text-gray-700 mb-4'>내부 서버 오류</p>
+            <p className='text-gray-500 mb-8'>
+              죄송합니다. 서버에 문제가 발생했습니다.
+              <br />
+              잠시 후 다시 시도해 주세요.
+            </p>
+          </div>
+          <div className='flex justify-center space-x-4'>
+            <Link
+              to='/'
+              className='flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-mint hover:bg-mint_hover focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-mint'>
+              <FontAwesomeIcon icon={faHome} className='mr-2' />
+              홈으로 가기
+            </Link>
+            <button
+              onClick={() => navigate(-1)}
+              className='flex items-center justify-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-mint'>
+              <FontAwesomeIcon icon={faArrowLeft} className='mr-2' />
+              뒤로가기
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default InternalServerErrorPage;
diff --git a/client/src/pages/utils/error/NotFoundPage.jsx b/client/src/pages/utils/error/NotFoundPage.jsx
@@ -0,0 +1,40 @@
+import { Link, useNavigate } from 'react-router-dom';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faArrowLeft, faHome, faSearch } from '@fortawesome/free-solid-svg-icons';
+
+const NotFoundPage = () => {
+  const navigate = useNavigate();
+
+  return (
+    <div className='min-h-screen flex flex-col justify-center items-center px-4'>
+      <div className='max-w-md w-full rounded-lg overflow-hidden'>
+        <div className='p-8'>
+          <div className='text-center'>
+            <h1 className='text-9xl font-bold text-mint mb-4'>404</h1>
+            <p className='text-2xl font-semibold text-gray-700 mb-4'>페이지를 찾을 수 없습니다</p>
+            <p className='text-gray-500 mb-8'>
+              죄송합니다. 요청하신 페이지를 찾을 수 없습니다. URL을 확인하시거나 아래 버튼을
+              사용해주세요.
+            </p>
+          </div>
+          <div className='flex justify-center space-x-4'>
+            <Link
+              to='/'
+              className='flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-mint hover:bg-mint_hover focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-mint'>
+              <FontAwesomeIcon icon={faHome} className='mr-2' />
+              홈으로 가기
+            </Link>
+            <button
+              onClick={() => navigate(-1)}
+              className='flex items-center justify-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-mint'>
+              <FontAwesomeIcon icon={faArrowLeft} className='mr-2' />
+              뒤로가기
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default NotFoundPage;
diff --git a/client/src/pages/vendor/billing/BillingDetailPage.jsx b/client/src/pages/vendor/billing/BillingDetailPage.jsx
@@ -7,7 +7,7 @@ import {
   sendInvoice,
   updateBilling,
   cancelSendInvoice,
-  payBilling,
+  payRealTimeBilling,
   cancelPayBilling,
   getBillingProducts,
 } from '@/apis/billing';
@@ -159,7 +159,7 @@ const BillingDetailPage = () => {
 
   const handlePay = async () => {
     try {
-      await payBilling(billingId);
+      await payRealTimeBilling(billingId);
       alert('청구가 결제되었습니다.');
       fetchBillingDetail();
     } catch (err) {

diff --git a/client/src/routes/root.jsx b/client/src/routes/root.jsx
@@ -6,6 +6,9 @@ import Signup from '@/pages/SignupPage'; // 회원가입
 import VendorIndex from '@/pages/vendor/VenIndexPage'; // 고객 중첩 라우팅
 import MemberIndex from '@/pages/member/MemIndexPage'; // 회원 중첩 라우팅
 import Test from '@/labs/Test';
+import NotFoundPage from '@/pages/utils/error/NotFoundPage';
+import InternalServerErrorPage from '@/pages/utils/error/InternalServerErrorPage';
+import ForbiddenErrorPage from '@/pages/utils/error/ForbiddenErrorPage';
 
 const root = createBrowserRouter([
   {
@@ -34,6 +37,18 @@ const root = createBrowserRouter([
     path: 'test',
     element: <Test />,
   },
+  {
+    path: 'error/notfound',
+    element: <NotFoundPage />,
+  },
+  {
+    path: 'error/interal',
+    element: <InternalServerErrorPage />,
+  },
+  {
+    path: 'error/forbidden',
+    element: <ForbiddenErrorPage />,
+  },
 ]);
 
 export default root;