Merge pull request #125 from CAUCSE/feat/#124

[FEAT] API error boundary

public/.well-known/assetlinks.json

@@ -0,0 +1,8 @@
+[{
+      "relation": ["delegate_permission/common.handle_all_urls"],
+      "target": {
+        "namespace": "android_app",
+        "package_name": "kr.co.causw.twa",
+        "sha256_cert_fingerprints": ["68:47:73:4E:14:52:93:02:99:11:0D:06:6F:4B:C7:24:1A:10:90:11:2C:F7:BA:63:F9:75:37:4D:7C:93:13:6A"]
+      }
+    }]

src/configs/axios.ts

@@ -44,6 +44,7 @@ API.interceptors.response.use(
         response: { data },
         config,
       } = error;
+
       if (
         (!localStorage.getItem(storageRefreshKey) &&
           config.url !== '/api/v1/users/password/find' &&
@@ -92,6 +93,8 @@ API.interceptors.response.use(
       });
     }
 
+    location.href = PAGE_URL.ApiError;
+
     return Promise.reject({
       success: false,
     });

src/configs/path.ts

@@ -7,6 +7,8 @@ export enum PAGE_URL {
   UseTerms = '/auth/useTerms',
   NoPermission = '/auth/noPermission',
 
+  ApiError = '/auth/error',
+
   Home = '/home',
 
   // 동아리

src/pages/auth/AuthPageSwitch.tsx

@@ -1,6 +1,7 @@
 import { Route, Switch } from 'react-router-dom';
 
 import { Admission } from './admission';
+import ApiError from './apiError/ApiErrorPage';
 import { FindPassword } from './findPassword';
 import { NoPermission } from './noPermission';
 import { SignIn } from './signIn';
@@ -17,5 +18,6 @@ export const AuthPageSwitch: React.FC = () => (
     <Route path={PAGE_URL.UseTerms} component={UseTerms} />
     <Route path={PAGE_URL.FindPassword} component={FindPassword} />
     <Route path={PAGE_URL.NoPermission} component={NoPermission} />
+    <Route path={PAGE_URL.ApiError} component={ApiError} />
   </Switch>
 );

src/pages/auth/apiError/ApiErrorPage.tsx

@@ -0,0 +1,45 @@
+import styled from '@emotion/styled';
+import { observer } from 'mobx-react-lite';
+import React from 'react';
+
+import { PageUiStoreImpl } from './ApiErrorPageUiStore';
+
+import { PageBody, PageStoreHOC, Header } from '@/components';
+import { PAGE_URL } from '@/configs/path';
+
+const ApiErrorPage: React.FC = observer(() => {
+  return (
+    <>
+      <Header withBack={PAGE_URL.Home} title="500 Error" />
+      <PageBody>
+        <Wrapper>
+          <img src="/images/mascot-study.png" alt="Api Error Img" />
+          <h4>일시적으로 서비스를 이용할 수 없습니다.</h4>
+          문제가 지속적으로 발생하는 경우 <br />
+          아래 이메일로 문의해주세요.
+          <br />( [email protected] )
+        </Wrapper>
+      </PageBody>
+    </>
+  );
+});
+
+const Wrapper = styled.div`
+  margin: 100px 0 30px;
+  font-size: 12px;
+  //font-weight: bolder;
+  color: #545454;
+  text-align: center;
+
+  > img {
+    margin-bottom: -10px;
+    width: 170px;
+  }
+
+  > h4 {
+    font-size: 16px;
+    margin-bottom: 30px;
+  }
+`;
+
+export default PageStoreHOC(<ApiErrorPage />, { store: PageUiStoreImpl });

src/pages/auth/apiError/ApiErrorPageUiStore.tsx

@@ -0,0 +1,9 @@
+import { makeAutoObservable } from 'mobx';
+
+export class ApiErrorPageUiStore {
+  constructor() {
+    makeAutoObservable(this, {}, { autoBind: true });
+  }
+}
+
+export const PageUiStoreImpl = new ApiErrorPageUiStore();