Merge pull request #20 from ananjaemin/17-404오류-page-제작

17 404오류 page 제작

src/App.tsx

@@ -5,7 +5,15 @@ import { ToastContainer } from 'react-toastify';
 
 import 'react-toastify/dist/ReactToastify.css';
 import { Navbar } from './components';
-import { MainPage, SuccessPage, DownloadPage, DeletePage, FileListPage, ApiPage } from './pages';
+import {
+  MainPage,
+  SuccessPage,
+  DownloadPage,
+  DeletePage,
+  FileListPage,
+  ApiPage,
+  NotFoundPage,
+} from './pages';
 import { store } from './state/store';
 
 export const App: React.FC = () => (
@@ -42,6 +50,7 @@ export const App: React.FC = () => (
         <Route path="/delete" element={<DeletePage />} />
         <Route path="/filelist" element={<FileListPage />} />
         <Route path="/api/*" element={<ApiPage />} />
+        <Route path="*" element={<NotFoundPage />} />
       </Route>
     </Routes>
   </Provider>

src/pages/api/index.tsx

@@ -14,13 +14,16 @@ export const ApiPage: React.FC = () => {
     await axios({
       method: 'get',
       url: 'https://tfb.minpeter.cf/info',
-    }).then((res) => {
-      console.log(res.data);
-      setApiInfo(res.data);
-      setTimeout(() => {
-        setLoading(true); //loading 확인하고싶으면 false로 바꿔주세요.
-      }, 1200);
-    });
+    })
+      .then((res) => {
+        setApiInfo(res.data);
+        setTimeout(() => {
+          setLoading(true); //loading 확인하고싶으면 false로 바꿔주세요.
+        }, 1200);
+      })
+      .catch((err) => {
+        console.log(err);
+      });
   };
 
   useEffect(() => {

src/pages/index.ts

@@ -4,3 +4,4 @@ export * from './download';
 export * from './delete';
 export * from './filelist';
 export * from './api';
+export * from './notfound';

src/pages/notfound/index.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+import * as S from './styled';
+
+export const NotFoundPage: React.FC = () => <S.NotFoundPage>404</S.NotFoundPage>;

src/pages/notfound/styled.ts

@@ -0,0 +1,3 @@
+import styled from '@emotion/styled';
+
+export const NotFoundPage = styled.div``;

src/pages/postApi/index.tsx

@@ -20,7 +20,7 @@ export const ApiPostPage: React.FC = () => {
       })
         .then((res) => {
           if (res.data?.message === 'invalid api name') {
-            navigate('/'); //나중에 404페이지로 이동하게
+            navigate('/404'); //나중에 404페이지로 이동하게
           } else {
             setApiInfo(res.data);
             setTimeout(() => {