Dev

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 } from './pages';
+import {
+  MainPage,
+  SuccessPage,
+  DownloadPage,
+  DeletePage,
+  FileListPage,
+  ApiPage,
+  NotFoundPage,
+} from './pages';
 import { store } from './state/store';
 
 export const App: React.FC = () => (
@@ -41,6 +49,8 @@ export const App: React.FC = () => (
         <Route path="/download" element={<DownloadPage />} />
         <Route path="/delete" element={<DeletePage />} />
         <Route path="/filelist" element={<FileListPage />} />
+        <Route path="/api/*" element={<ApiPage />} />
+        <Route path="*" element={<NotFoundPage />} />
       </Route>
     </Routes>
   </Provider>

src/components/common/FileListBox/styled.ts

@@ -2,7 +2,7 @@ import styled from '@emotion/styled';
 
 export const FileListBoxContainer = styled.div`
   background-color: var(--color-backgorund-filelistbox);
-  color: var(--color-text-filelistbox);
+  color: var(--color-text-tertiary);
   border-radius: 10px;
   padding: 1.2rem 1.2rem 1.2rem 1.2rem;
   display: flex;

src/components/common/Navbar/index.tsx

@@ -1,22 +1,11 @@
 import React from 'react';
-import { toast } from 'react-toastify';
 
 import * as S from './styled';
 
 export const Navbar: React.FC = () => (
   <S.NavbarContainer>
     <S.Nav to={'/'}>Upload</S.Nav>
-    <S.Nav
-      to={'/'}
-      onClick={() => {
-        toast.success('제작중!', {
-          autoClose: 1000,
-          position: toast.POSITION.BOTTOM_RIGHT,
-        });
-      }}
-    >
-      API
-    </S.Nav>
+    <S.Nav to={'/api'}>API</S.Nav>
     <S.Nav to={'/filelist'}>File list</S.Nav>
   </S.NavbarContainer>
 );

src/components/common/Navbar/styled.ts

@@ -7,6 +7,7 @@ export const NavbarContainer = styled.nav`
   margin: 30px auto 30px auto;
   display: flex;
   justify-content: space-between;
+  z-index: 99;
 `;
 
 export const Nav = styled(Link)`

src/components/common/SkeletonUIBox/index.ts

@@ -0,0 +1,64 @@
+import styled from '@emotion/styled';
+export const SkeletonUIBox = styled.div<{ randomWitdh: string }>`
+  display: flex;
+  background-color: var(--color-backgorund-filelistbox);
+  border-radius: 10px;
+  margin-bottom: 1.5rem;
+  min-height: 4.6rem;
+  min-width: ${(props) => props.randomWitdh}rem;
+  overflow: hidden;
+  &::before {
+    content: ' ';
+    width: 100%;
+    height: auto;
+    animation: loading 2s infinite;
+    box-shadow: 0 0 30px 30px rgba(255, 255, 255, 0.3);
+  }
+  @keyframes loading {
+    0% {
+      transform: translateX(-50%);
+    }
+    50% {
+      transform: translateX(100%);
+    }
+    100% {
+      transform: translate(200%);
+    }
+  }
+`;
+export const SkeletonUIApiBox = styled(SkeletonUIBox)`
+  min-height: 6.2rem;
+  margin: 1rem;
+`;
+
+export const SkeletonUI = styled.div<{
+  width: string;
+  height: string;
+  margin: string;
+}>`
+  display: flex;
+  min-width: ${(props) => props.width};
+  min-height: ${(props) => props.height};
+  margin: ${(props) => props.margin};
+  background: var(--color-backgorund-filelistbox);
+  border-radius: 10px;
+  overflow: hidden;
+  &::before {
+    content: ' ';
+    width: 100%;
+    height: auto;
+    animation: loading 2s infinite;
+    box-shadow: 0 0 30px 30px rgba(255, 255, 255, 0.3);
+  }
+  @keyframes loading {
+    0% {
+      transform: translateX(-50%);
+    }
+    50% {
+      transform: translateX(100%);
+    }
+    100% {
+      transform: translate(200%);
+    }
+  }
+`;

src/components/common/index.ts

@@ -7,3 +7,4 @@ export * from './Navbar';
 export * from './Button';
 export * from './FileListBox';
 export * from './Progress';
+export * from './SkeletonUIBox';

src/pages/api/index.tsx

@@ -0,0 +1,74 @@
+import axios from 'axios';
+import React, { useState, useEffect } from 'react';
+import { Route, Routes, Link } from 'react-router-dom';
+
+import { SkeletonUIApiBox } from '../../components';
+import { ApiPostPage } from '../postApi';
+import * as S from './styled';
+
+export const ApiPage: React.FC = () => {
+  const [loading, setLoading] = useState(false);
+  const [apiInfo, setApiInfo] = useState<any[]>();
+  const SkeletonUIRandomWidth = ['40', '50', '55', '45'];
+  const getApiInfo = async () => {
+    await axios({
+      method: 'get',
+      url: 'https://tfb.minpeter.cf/info',
+    })
+      .then((res) => {
+        setApiInfo(res.data);
+        setTimeout(() => {
+          setLoading(true); //loading 확인하고싶으면 false로 바꿔주세요.
+        }, 1200);
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  };
+
+  useEffect(() => {
+    getApiInfo();
+  }, []);
+
+  return (
+    <S.ApiPageContainer>
+      <Routes>
+        <Route
+          path="/"
+          element={
+            <>
+              <S.ApiListSection>
+                {loading ? (
+                  <>
+                    {apiInfo?.map((item, index) => (
+                      <Link key={index} to={item.apiHandler} style={{ textDecoration: 'none' }}>
+                        <S.ApiListBox>{item.apiUrl}</S.ApiListBox>
+                      </Link>
+                    ))}
+                  </>
+                ) : (
+                  <>
+                    <SkeletonUIApiBox
+                      randomWitdh={SkeletonUIRandomWidth[Math.floor(Math.random() * 4)]}
+                    />
+                    <SkeletonUIApiBox
+                      randomWitdh={SkeletonUIRandomWidth[Math.floor(Math.random() * 4)]}
+                    />
+                    <SkeletonUIApiBox
+                      randomWitdh={SkeletonUIRandomWidth[Math.floor(Math.random() * 4)]}
+                    />
+                    <SkeletonUIApiBox
+                      randomWitdh={SkeletonUIRandomWidth[Math.floor(Math.random() * 4)]}
+                    />
+                  </>
+                )}
+              </S.ApiListSection>
+              <S.ApiListSectionShadow />
+            </>
+          }
+        />
+        <Route path=":urlApi" element={<ApiPostPage />} />
+      </Routes>
+    </S.ApiPageContainer>
+  );
+};

src/pages/api/styled.ts

@@ -0,0 +1,40 @@
+import styled from '@emotion/styled';
+
+export const ApiPageContainer = styled.div`
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+`;
+
+export const ApiListSection = styled.div`
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  max-height: 40rem;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+`;
+
+export const ApiListBox = styled.div`
+  background-color: var(--color-backgorund-filelistbox);
+  color: var(--color-text-tertiary);
+  border-radius: 10px;
+  padding: 2rem 1.4rem 2rem 1.4rem;
+  margin: 1rem;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  font-size: 2.2rem;
+  font-weight: 700;
+  cursor: pointer;
+`;
+
+export const ApiListSectionShadow = styled.div`
+  width: 100%;
+  height: 6rem;
+  position: relative;
+  top: -25px;
+  background: linear-gradient(180deg, rgba(40, 42, 58, 0) 0%, #282a3a 45.31%);
+`;

src/pages/download/styled.ts

@@ -15,7 +15,7 @@ export const DownloadPageButtonSection = styled.div`
 
 export const DonwloadFileBox = styled.div`
   background-color: var(--color-backgorund-filelistbox);
-  color: var(--color-text-filelistbox);
+  color: var(--color-text-tertiary);
   border-radius: 10px;
   padding: 1.2rem 1.2rem 1.2rem 1.2rem;
   display: flex;

src/pages/filelist/index.tsx

@@ -4,7 +4,7 @@ import { useDispatch } from 'react-redux';
 import { useNavigate } from 'react-router-dom';
 import { bindActionCreators } from 'redux';
 
-import { FileListBox } from '../../components';
+import { FileListBox, SkeletonUIBox } from '../../components';
 import { actionCreators } from '../../state';
 import { getFileSize, getShortFileName, getDate } from '../../utils';
 import * as S from './styled';
@@ -25,7 +25,7 @@ export const FileListPage: React.FC = () => {
         setFileList(res.data.list); //파일리스트 요소 갯수에 따른 핸들링 추가예정
         setTimeout(() => {
           setLoading(true); //loading 확인하고싶으면 false로 바꿔주세요.
-        }, 1500);
+        }, 1200);
       })
       .catch((err) => {
         console.log(err);
@@ -62,27 +62,13 @@ export const FileListPage: React.FC = () => {
       ) : (
         <>
           <S.FileListPageContainer>
-            <S.FileListSkeletonUI
-              randomWitdh={SkeletonUIRandomWidth[Math.floor(Math.random() * 6)]}
-            />
-            <S.FileListSkeletonUI
-              randomWitdh={SkeletonUIRandomWidth[Math.floor(Math.random() * 6)]}
-            />
-            <S.FileListSkeletonUI
-              randomWitdh={SkeletonUIRandomWidth[Math.floor(Math.random() * 6)]}
-            />
-            <S.FileListSkeletonUI
-              randomWitdh={SkeletonUIRandomWidth[Math.floor(Math.random() * 6)]}
-            />
-            <S.FileListSkeletonUI
-              randomWitdh={SkeletonUIRandomWidth[Math.floor(Math.random() * 6)]}
-            />
-            <S.FileListSkeletonUI
-              randomWitdh={SkeletonUIRandomWidth[Math.floor(Math.random() * 6)]}
-            />
-            <S.FileListSkeletonUI
-              randomWitdh={SkeletonUIRandomWidth[Math.floor(Math.random() * 6)]}
-            />
+            <SkeletonUIBox randomWitdh={SkeletonUIRandomWidth[Math.floor(Math.random() * 6)]} />
+            <SkeletonUIBox randomWitdh={SkeletonUIRandomWidth[Math.floor(Math.random() * 6)]} />
+            <SkeletonUIBox randomWitdh={SkeletonUIRandomWidth[Math.floor(Math.random() * 6)]} />
+            <SkeletonUIBox randomWitdh={SkeletonUIRandomWidth[Math.floor(Math.random() * 6)]} />
+            <SkeletonUIBox randomWitdh={SkeletonUIRandomWidth[Math.floor(Math.random() * 6)]} />
+            <SkeletonUIBox randomWitdh={SkeletonUIRandomWidth[Math.floor(Math.random() * 6)]} />
+            <SkeletonUIBox randomWitdh={SkeletonUIRandomWidth[Math.floor(Math.random() * 6)]} />
           </S.FileListPageContainer>
           <S.FileListPageBoxShoadow />
         </>

src/pages/filelist/styled.ts

@@ -18,31 +18,3 @@ export const FileListPageBoxShoadow = styled.div`
   top: -25px;
   background: linear-gradient(180deg, rgba(40, 42, 58, 0) 0%, #282a3a 45.31%);
 `;
-
-export const FileListSkeletonUI = styled.div<{ randomWitdh: string }>`
-  display: flex;
-  background-color: var(--color-backgorund-filelistbox);
-  border-radius: 10px;
-  margin-bottom: 1.5rem;
-  min-height: 4.6rem;
-  min-width: ${(props) => props.randomWitdh}rem;
-  overflow: hidden;
-  &::before {
-    content: ' ';
-    width: 100%;
-    height: auto;
-    animation: loading 2s infinite;
-    box-shadow: 0 0 30px 30px rgba(255, 255, 255, 0.3);
-  }
-  @keyframes loading {
-    0% {
-      transform: translateX(-50%);
-    }
-    50% {
-      transform: translateX(100%);
-    }
-    100% {
-      transform: translate(200%);
-    }
-  }
-`;

src/pages/index.ts

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