4 api page 개발

src/App.tsx

@@ -5,7 +5,7 @@ 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 } from './pages';
 import { store } from './state/store';
 
 export const App: React.FC = () => (
@@ -41,6 +41,7 @@ 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>
     </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

@@ -5,7 +5,7 @@ import * as S from './styled';
 export const Navbar: React.FC = () => (
   <S.NavbarContainer>
     <S.Nav to={'/'}>Upload</S.Nav>
-    <S.Nav to={'/'}>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,71 @@
+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) => {
+      console.log(res.data);
+      setApiInfo(res.data);
+      setTimeout(() => {
+        setLoading(true); //loading 확인하고싶으면 false로 바꿔주세요.
+      }, 1200);
+    });
+  };
+
+  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,4 @@ export * from './success';
 export * from './download';
 export * from './delete';
 export * from './filelist';
+export * from './api';

src/pages/postApi/index.tsx

@@ -0,0 +1,68 @@
+import axios from 'axios';
+import React, { useEffect, useState } from 'react';
+import { useParams } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
+import { toast } from 'react-toastify';
+
+import { Button, SkeletonUI } from '../../components';
+import * as S from './styled';
+
+export const ApiPostPage: React.FC = () => {
+  const [apiInfo, setApiInfo] = useState<any>();
+  const [loading, setLoading] = useState(false);
+  const { urlApi } = useParams<{ urlApi: string }>();
+  const navigate = useNavigate();
+  useEffect(() => {
+    const getUrlApiInfo = async () => {
+      await axios({
+        method: 'get',
+        url: `https://tfb.minpeter.cf/info?api=${urlApi}`,
+      })
+        .then((res) => {
+          if (res.data?.message === 'invalid api name') {
+            navigate('/'); //나중에 404페이지로 이동하게
+          } else {
+            setApiInfo(res.data);
+            setTimeout(() => {
+              setLoading(true); //loading 확인하고싶으면 false로 바꿔주세요.
+            }, 1200);
+          }
+        })
+        .catch((err) => {
+          console.log(err);
+        });
+    };
+    getUrlApiInfo();
+  }, [navigate, urlApi]);
+  return (
+    <>
+      {loading ? (
+        <>
+          <S.ApiBox>
+            {apiInfo?.apiName} / method: {apiInfo?.method}
+          </S.ApiBox>
+          <S.ApiDescText>{apiInfo?.desc}</S.ApiDescText>
+          <S.ApiCommandBox>{apiInfo?.command}</S.ApiCommandBox>
+          <Button
+            click={() => {
+              navigator.clipboard.writeText(apiInfo?.command);
+              toast.success('복사 완료', {
+                autoClose: 1000,
+                position: toast.POSITION.BOTTOM_RIGHT,
+              });
+            }}
+            bgColor="var(--color-button-primary)"
+            label="명령어 복사"
+          />
+        </>
+      ) : (
+        <>
+          <SkeletonUI width="30.8rem" height="6.2rem" margin="1rem" />
+          <SkeletonUI width="38rem" height="2.6rem" margin="1.5rem 1rem 2rem 1rem" />
+          <SkeletonUI width="74rem" height="12rem" margin="1rem 1rem 3rem 1rem" />
+          <SkeletonUI width="14rem" height="6rem" margin="0px" />
+        </>
+      )}
+    </>
+  );
+};