From 3c98555700ae0266e763c9c0be5b0270841d7aca Mon Sep 17 00:00:00 2001 From: anjaemin Date: Mon, 31 Oct 2022 16:01:39 +0900 Subject: [PATCH 01/12] fix: color --- src/components/common/FileListBox/styled.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/common/FileListBox/styled.ts b/src/components/common/FileListBox/styled.ts index 188c4d1..ca82e66 100644 --- a/src/components/common/FileListBox/styled.ts +++ b/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; From 67b85064c5d71c1878ffd6d88eed2645e45157a2 Mon Sep 17 00:00:00 2001 From: anjaemin Date: Mon, 31 Oct 2022 16:02:30 +0900 Subject: [PATCH 02/12] =?UTF-8?q?feat:=20apiPage=20=EC=9D=B4=EB=8F=99,z-in?= =?UTF-8?q?dex?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/Navbar/index.tsx | 13 +------------ src/components/common/Navbar/styled.ts | 1 + 2 files changed, 2 insertions(+), 12 deletions(-) diff --git a/src/components/common/Navbar/index.tsx b/src/components/common/Navbar/index.tsx index 158854f..199306c 100644 --- a/src/components/common/Navbar/index.tsx +++ b/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 = () => ( Upload - { - toast.success('제작중!', { - autoClose: 1000, - position: toast.POSITION.BOTTOM_RIGHT, - }); - }} - > - API - + API File list ); diff --git a/src/components/common/Navbar/styled.ts b/src/components/common/Navbar/styled.ts index 7fdbdc1..9d71ba8 100644 --- a/src/components/common/Navbar/styled.ts +++ b/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)` From 301cb5788f09ddfdeda8ce2d7044fdc951b1380e Mon Sep 17 00:00:00 2001 From: anjaemin Date: Mon, 31 Oct 2022 16:03:39 +0900 Subject: [PATCH 03/12] fix: css variables color name --- src/styles/globalStyle.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/globalStyle.ts b/src/styles/globalStyle.ts index 862dcc3..d6508c6 100644 --- a/src/styles/globalStyle.ts +++ b/src/styles/globalStyle.ts @@ -8,8 +8,8 @@ export const globalStyle = css` :root { --color-text-primary: #ffffff; --color-text-secondary: #25262e; + --color-text-tertiary: #8f95e0; --color-text-placeholder: #757575; - --color-text-filelistbox: #8f95e0; --color-backgorund-progressbar: #2d2d2d; From a6c9fa49e7b5bba331cd92718eb8693c74f99594 Mon Sep 17 00:00:00 2001 From: anjaemin Date: Mon, 31 Oct 2022 16:04:13 +0900 Subject: [PATCH 04/12] =?UTF-8?q?feat:=20Route=20ApiPage=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/App.tsx b/src/App.tsx index 1b6594e..1673556 100644 --- a/src/App.tsx +++ b/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 = () => ( } /> } /> } /> + } /> From 9d7d64a1e815c5d246922f37b1df296c304921ad Mon Sep 17 00:00:00 2001 From: anjaemin Date: Mon, 31 Oct 2022 16:04:50 +0900 Subject: [PATCH 05/12] =?UTF-8?q?feat:=20apiPage=20=EA=B8=B0=EB=B3=B8?= =?UTF-8?q?=EA=B5=AC=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/api/index.tsx | 40 +++++++++++++++++++++++++++++++++++ src/pages/api/styled.ts | 46 +++++++++++++++++++++++++++++++++++++++++ src/pages/index.ts | 1 + 3 files changed, 87 insertions(+) create mode 100644 src/pages/api/index.tsx create mode 100644 src/pages/api/styled.ts diff --git a/src/pages/api/index.tsx b/src/pages/api/index.tsx new file mode 100644 index 0000000..4000c34 --- /dev/null +++ b/src/pages/api/index.tsx @@ -0,0 +1,40 @@ +import axios from 'axios'; +import React, { useState, useEffect } from 'react'; + +import * as S from './styled'; + +export const ApiPage: React.FC = () => { + const [loading, setLoading] = useState(false); + const [apiInfo, setApiInfo] = useState(); + const getApiInfo = async () => { + await axios({ + method: 'get', + url: 'https://tfb.minpeter.cf/info', + }).then((res) => { + setApiInfo(res.data); + setLoading(true); + }); + }; + useEffect(() => { + getApiInfo(); + }, []); + return ( + <> + {loading ? ( + <> + + API handlers + + {apiInfo?.map((item, index) => ( + https://tfb.minpeter.cf{item.apiName} + ))} + + + + + ) : ( + <> + )} + + ); +}; diff --git a/src/pages/api/styled.ts b/src/pages/api/styled.ts new file mode 100644 index 0000000..738b8d9 --- /dev/null +++ b/src/pages/api/styled.ts @@ -0,0 +1,46 @@ +import styled from '@emotion/styled'; + +export const ApiPageContainer = styled.div` + display: flex; + align-items: center; + flex-direction: column; +`; + +export const ApiPageText = styled.div` + font-size: 4rem; + font-weight: 700; + margin: 1rem; +`; + +export const ApiListSection = styled.div` + overflow-y: auto; + display: flex; + flex-direction: column; + align-items: center; + max-height: 30rem; + &::-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%); +`; diff --git a/src/pages/index.ts b/src/pages/index.ts index 0986ab2..499af21 100644 --- a/src/pages/index.ts +++ b/src/pages/index.ts @@ -3,3 +3,4 @@ export * from './success'; export * from './download'; export * from './delete'; export * from './filelist'; +export * from './api'; From 284638b068d03308527e473f23bbfa02a21f1034 Mon Sep 17 00:00:00 2001 From: anjaemin Date: Mon, 31 Oct 2022 16:05:11 +0900 Subject: [PATCH 06/12] fix: color --- src/pages/download/styled.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/download/styled.ts b/src/pages/download/styled.ts index 0e7cf2d..b035ca7 100644 --- a/src/pages/download/styled.ts +++ b/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; From a5eaae185fbef88d1ea3f1294012b8b17fd34fc3 Mon Sep 17 00:00:00 2001 From: anjaemin Date: Mon, 31 Oct 2022 16:41:30 +0900 Subject: [PATCH 07/12] =?UTF-8?q?feat:=20SkeletonUIBox=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/SkeletonUIBox/index.ts | 34 ++++++++++++++++++++ src/components/common/index.ts | 1 + 2 files changed, 35 insertions(+) create mode 100644 src/components/common/SkeletonUIBox/index.ts diff --git a/src/components/common/SkeletonUIBox/index.ts b/src/components/common/SkeletonUIBox/index.ts new file mode 100644 index 0000000..dbf31d7 --- /dev/null +++ b/src/components/common/SkeletonUIBox/index.ts @@ -0,0 +1,34 @@ +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; +`; diff --git a/src/components/common/index.ts b/src/components/common/index.ts index 1c2559f..bdee441 100644 --- a/src/components/common/index.ts +++ b/src/components/common/index.ts @@ -7,3 +7,4 @@ export * from './Navbar'; export * from './Button'; export * from './FileListBox'; export * from './Progress'; +export * from './SkeletonUIBox'; From 720e64f5f91e1426641fe64342d4d57df2e8390f Mon Sep 17 00:00:00 2001 From: anjaemin Date: Tue, 1 Nov 2022 08:53:39 +0900 Subject: [PATCH 08/12] feat: Skeleton UI --- src/pages/api/index.tsx | 47 +++++++++++++++++++++--------------- src/pages/filelist/index.tsx | 32 +++++++----------------- src/pages/filelist/styled.ts | 28 --------------------- 3 files changed, 37 insertions(+), 70 deletions(-) diff --git a/src/pages/api/index.tsx b/src/pages/api/index.tsx index 4000c34..1f09dc7 100644 --- a/src/pages/api/index.tsx +++ b/src/pages/api/index.tsx @@ -1,40 +1,49 @@ import axios from 'axios'; import React, { useState, useEffect } from 'react'; +import { SkeletonUIApiBox } from '../../components'; import * as S from './styled'; export const ApiPage: React.FC = () => { const [loading, setLoading] = useState(false); const [apiInfo, setApiInfo] = useState(); + const SkeletonUIRandomWidth = ['40', '50', '55', '45']; const getApiInfo = async () => { await axios({ - method: 'get', + method: 'GET', url: 'https://tfb.minpeter.cf/info', }).then((res) => { setApiInfo(res.data); - setLoading(true); + setTimeout(() => { + setLoading(true); //loading 확인하고싶으면 false로 바꿔주세요. + }, 1200); }); }; + useEffect(() => { getApiInfo(); }, []); + return ( - <> - {loading ? ( - <> - - API handlers - - {apiInfo?.map((item, index) => ( - https://tfb.minpeter.cf{item.apiName} - ))} - - - - - ) : ( - <> - )} - + + API handlers + + {loading ? ( + <> + {apiInfo?.map((item, index) => ( + https://tfb.minpeter.cf{item.apiName} + ))} + + ) : ( + <> + + + + + + )} + + + ); }; diff --git a/src/pages/filelist/index.tsx b/src/pages/filelist/index.tsx index 1dd8db8..09bc3ab 100644 --- a/src/pages/filelist/index.tsx +++ b/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 = () => { ) : ( <> - - - - - - - + + + + + + + diff --git a/src/pages/filelist/styled.ts b/src/pages/filelist/styled.ts index 77f8d8e..03bdfdf 100644 --- a/src/pages/filelist/styled.ts +++ b/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%); - } - } -`; From 975d04d398560275ba1bc0510fee9338b14fdcee Mon Sep 17 00:00:00 2001 From: anjaemin Date: Wed, 2 Nov 2022 09:39:27 +0900 Subject: [PATCH 09/12] =?UTF-8?q?feat:=20SkeletionUI=20component=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/SkeletonUIBox/index.ts | 34 ++++++++++++++++++-- 1 file changed, 32 insertions(+), 2 deletions(-) diff --git a/src/components/common/SkeletonUIBox/index.ts b/src/components/common/SkeletonUIBox/index.ts index dbf31d7..7ff992b 100644 --- a/src/components/common/SkeletonUIBox/index.ts +++ b/src/components/common/SkeletonUIBox/index.ts @@ -1,5 +1,4 @@ import styled from '@emotion/styled'; - export const SkeletonUIBox = styled.div<{ randomWitdh: string }>` display: flex; background-color: var(--color-backgorund-filelistbox); @@ -27,8 +26,39 @@ export const SkeletonUIBox = styled.div<{ randomWitdh: string }>` } } `; - 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%); + } + } +`; From 30dfea030b1a71fb9ad3cb4c27de762c643ed393 Mon Sep 17 00:00:00 2001 From: anjaemin Date: Wed, 2 Nov 2022 09:40:13 +0900 Subject: [PATCH 10/12] =?UTF-8?q?feat:=20Api=20Post=20Page=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.tsx | 2 +- src/pages/api/index.tsx | 60 ++++++++++++++++++++++++++++------------- src/pages/api/styled.ts | 8 +----- 3 files changed, 43 insertions(+), 27 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 1673556..beaac78 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -41,7 +41,7 @@ export const App: React.FC = () => ( } /> } /> } /> - } /> + } /> diff --git a/src/pages/api/index.tsx b/src/pages/api/index.tsx index 1f09dc7..05ed1a1 100644 --- a/src/pages/api/index.tsx +++ b/src/pages/api/index.tsx @@ -1,7 +1,9 @@ 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 = () => { @@ -10,9 +12,10 @@ export const ApiPage: React.FC = () => { const SkeletonUIRandomWidth = ['40', '50', '55', '45']; const getApiInfo = async () => { await axios({ - method: 'GET', + method: 'get', url: 'https://tfb.minpeter.cf/info', }).then((res) => { + console.log(res.data); setApiInfo(res.data); setTimeout(() => { setLoading(true); //loading 확인하고싶으면 false로 바꿔주세요. @@ -26,24 +29,43 @@ export const ApiPage: React.FC = () => { return ( - API handlers - - {loading ? ( - <> - {apiInfo?.map((item, index) => ( - https://tfb.minpeter.cf{item.apiName} - ))} - - ) : ( - <> - - - - - - )} - - + + + + {loading ? ( + <> + {apiInfo?.map((item, index) => ( + + {item.apiUrl} + + ))} + + ) : ( + <> + + + + + + )} + + + + } + /> + } /> + ); }; diff --git a/src/pages/api/styled.ts b/src/pages/api/styled.ts index 738b8d9..51a526a 100644 --- a/src/pages/api/styled.ts +++ b/src/pages/api/styled.ts @@ -6,18 +6,12 @@ export const ApiPageContainer = styled.div` flex-direction: column; `; -export const ApiPageText = styled.div` - font-size: 4rem; - font-weight: 700; - margin: 1rem; -`; - export const ApiListSection = styled.div` overflow-y: auto; display: flex; flex-direction: column; align-items: center; - max-height: 30rem; + max-height: 40rem; &::-webkit-scrollbar { display: none; } From b3d9df4495be31c202f0f06b0fcd70769aabe323 Mon Sep 17 00:00:00 2001 From: anjaemin Date: Wed, 2 Nov 2022 09:40:35 +0900 Subject: [PATCH 11/12] feat: color --- src/styles/globalStyle.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/styles/globalStyle.ts b/src/styles/globalStyle.ts index d6508c6..36f4957 100644 --- a/src/styles/globalStyle.ts +++ b/src/styles/globalStyle.ts @@ -22,6 +22,7 @@ export const globalStyle = css` --color-background: #282a3a; --color-background-secondary: var(--color-border); --color-background-tertiary: #2e2836; + --color-background-apicommand: #373c62cc; --color-backgorund-filelistbox: #373d4a; --color-button-primary: var(--color-border); From 2c02dc5b87197eb771bd90577b29644258c54936 Mon Sep 17 00:00:00 2001 From: anjaemin Date: Wed, 2 Nov 2022 09:41:00 +0900 Subject: [PATCH 12/12] =?UTF-8?q?feat:=20postApiPage=20=EC=B6=94=EA=B0=80:?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/postApi/index.tsx | 68 +++++++++++++++++++++++++++++++++++++ src/pages/postApi/styled.ts | 30 ++++++++++++++++ 2 files changed, 98 insertions(+) create mode 100644 src/pages/postApi/index.tsx create mode 100644 src/pages/postApi/styled.ts diff --git a/src/pages/postApi/index.tsx b/src/pages/postApi/index.tsx new file mode 100644 index 0000000..000dc17 --- /dev/null +++ b/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(); + 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 ? ( + <> + + {apiInfo?.apiName} / method: {apiInfo?.method} + + {apiInfo?.desc} + {apiInfo?.command} +