From 9375b7fc031dcda03a0505ce4fb7c50a0296e4ab Mon Sep 17 00:00:00 2001 From: anjaemin Date: Tue, 25 Oct 2022 12:42:56 +0900 Subject: [PATCH 1/9] feat: FileListPage init --- src/App.tsx | 3 ++- src/pages/filelist/index.tsx | 5 +++++ src/pages/filelist/styled.ts | 3 +++ src/pages/index.ts | 1 + 4 files changed, 11 insertions(+), 1 deletion(-) create mode 100644 src/pages/filelist/index.tsx create mode 100644 src/pages/filelist/styled.ts diff --git a/src/App.tsx b/src/App.tsx index 9c5da16..5573002 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 } from './pages'; +import { MainPage, SuccessPage, DownloadPage, DeletePage, FileListPage } from './pages'; import { store } from './state/store'; export const App: React.FC = () => ( @@ -40,6 +40,7 @@ export const App: React.FC = () => ( } /> } /> } /> + } /> diff --git a/src/pages/filelist/index.tsx b/src/pages/filelist/index.tsx new file mode 100644 index 0000000..e667cf5 --- /dev/null +++ b/src/pages/filelist/index.tsx @@ -0,0 +1,5 @@ +import React from 'react'; + +import * as S from './styled'; + +export const FileListPage: React.FC = () => ; diff --git a/src/pages/filelist/styled.ts b/src/pages/filelist/styled.ts new file mode 100644 index 0000000..2539bbb --- /dev/null +++ b/src/pages/filelist/styled.ts @@ -0,0 +1,3 @@ +import styled from '@emotion/styled'; + +export const FileListPageContainer = styled.div``; diff --git a/src/pages/index.ts b/src/pages/index.ts index 0ede55f..0986ab2 100644 --- a/src/pages/index.ts +++ b/src/pages/index.ts @@ -2,3 +2,4 @@ export * from './main'; export * from './success'; export * from './download'; export * from './delete'; +export * from './filelist'; From e9940e98f72acb98768cdf370f984f50e0e8a64c Mon Sep 17 00:00:00 2001 From: anjaemin Date: Wed, 26 Oct 2022 06:03:41 +0900 Subject: [PATCH 2/9] =?UTF-8?q?feat:=20FileListBox=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/FileListBox/index.tsx | 16 ++++++++++++++++ src/components/common/FileListBox/styled.ts | 14 ++++++++++++++ src/components/common/index.ts | 1 + 3 files changed, 31 insertions(+) create mode 100644 src/components/common/FileListBox/index.tsx create mode 100644 src/components/common/FileListBox/styled.ts diff --git a/src/components/common/FileListBox/index.tsx b/src/components/common/FileListBox/index.tsx new file mode 100644 index 0000000..63e0640 --- /dev/null +++ b/src/components/common/FileListBox/index.tsx @@ -0,0 +1,16 @@ +import React from 'react'; + +import * as S from './styled'; + +type FileListBoxProps = { + filename: string; + size: string; + LastModified: any; +}; + +export const FileListBox: React.FC = ({ filename, size, LastModified }) => ( + + 파일이름: {filename} / 크기:{size} / 업로드날짜:{LastModified.getFullYear()}- + {LastModified.getMonth() + 1}-{LastModified.getDate()} + +); diff --git a/src/components/common/FileListBox/styled.ts b/src/components/common/FileListBox/styled.ts new file mode 100644 index 0000000..188c4d1 --- /dev/null +++ b/src/components/common/FileListBox/styled.ts @@ -0,0 +1,14 @@ +import styled from '@emotion/styled'; + +export const FileListBoxContainer = styled.div` + background-color: var(--color-backgorund-filelistbox); + color: var(--color-text-filelistbox); + border-radius: 10px; + padding: 1.2rem 1.2rem 1.2rem 1.2rem; + display: flex; + flex-direction: row; + align-items: center; + font-size: 2.2rem; + margin-bottom: 1.5rem; + cursor: pointer; +`; diff --git a/src/components/common/index.ts b/src/components/common/index.ts index 85d260a..45b16e9 100644 --- a/src/components/common/index.ts +++ b/src/components/common/index.ts @@ -5,3 +5,4 @@ export * from './FileFind'; export * from './DownloadCount'; export * from './Navbar'; export * from './Button'; +export * from './FileListBox'; From 587d87c235f20dd250d5a2cbf7f8fc96327d93ae Mon Sep 17 00:00:00 2001 From: anjaemin Date: Wed, 26 Oct 2022 06:04:25 +0900 Subject: [PATCH 3/9] =?UTF-8?q?fix:=20delete=20api=20URL=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/delete/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/delete/index.tsx b/src/pages/delete/index.tsx index 9177184..c64c256 100644 --- a/src/pages/delete/index.tsx +++ b/src/pages/delete/index.tsx @@ -20,7 +20,7 @@ export const DeletePage: React.FC = () => { const deleteFile = async () => { await axios({ method: 'delete', - url: `https://tfb.minpeter.cf/delete/${DeleteFileName}`, + url: `https://tfb.minpeter.cf/del/${DeleteFileName}`, }) .then((res) => { console.log(res); From a6d9e8ab958da09c414cddc7a9a133476ca2fc22 Mon Sep 17 00:00:00 2001 From: anjaemin Date: Wed, 26 Oct 2022 06:05:40 +0900 Subject: [PATCH 4/9] =?UTF-8?q?style:=20color=20=EC=B6=94=EA=B0=80,MainLog?= =?UTF-8?q?oText=20marginTop=20=EC=A1=B0=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/styles/globalStyle.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/styles/globalStyle.ts b/src/styles/globalStyle.ts index aef0a2f..8719a61 100644 --- a/src/styles/globalStyle.ts +++ b/src/styles/globalStyle.ts @@ -6,10 +6,10 @@ export const globalStyle = css` ${reset} :root { - --color-background: #282a3a; --color-text-primary: #ffffff; --color-text-secondary: #25262e; --color-text-placeholder: #757575; + --color-text-filelistbox: #8f95e0; --color-check-true-background: #2ab514; --color-check-true-icon: var(--color-text-primary); @@ -17,8 +17,10 @@ export const globalStyle = css` --color-check-false-icon: #c0c0c0; --color-border: #757bab; + --color-background: #282a3a; --color-background-secondary: var(--color-border); --color-background-tertiary: #2e2836; + --color-backgorund-filelistbox: #373d4a; --color-button-primary: var(--color-border); --color-button-secondary: #aa75ab; @@ -42,6 +44,7 @@ export const globalStyle = css` font-size: 6rem; font-weight: 900; margin: 18px; + margin-top: 50px; color: var(--color-text-primary); } .MainLogoSubText { From c4da33d4f4138d9303a28e7ac1442d47dce2dd91 Mon Sep 17 00:00:00 2001 From: anjaemin Date: Wed, 26 Oct 2022 06:08:14 +0900 Subject: [PATCH 5/9] =?UTF-8?q?feat:=20=ED=8C=8C=EC=9D=BC=EB=AA=85=20?= =?UTF-8?q?=EC=A4=84=EC=9D=B4=EB=8A=94=20utils=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/utils/getShortFileName.ts | 26 ++++++++++++++++++++++++++ src/utils/getShotFileName.ts | 26 ++++++++++++++++++++++++++ src/utils/index.ts | 1 + 3 files changed, 53 insertions(+) create mode 100644 src/utils/getShortFileName.ts create mode 100644 src/utils/getShotFileName.ts diff --git a/src/utils/getShortFileName.ts b/src/utils/getShortFileName.ts new file mode 100644 index 0000000..fb431c9 --- /dev/null +++ b/src/utils/getShortFileName.ts @@ -0,0 +1,26 @@ +const getFileFullName = (fileName: string) => { + var lastDot = fileName.lastIndexOf('.'); + if (lastDot === -1) { + lastDot = fileName.length; + } + const fileFullName = fileName.substring(0, lastDot); + return fileFullName; +}; + +const getFileExtension = (fileName: string) => { + var lastDot = fileName.lastIndexOf('.'); + const fileLength = fileName.length; + const fileExtension = fileName.substring(lastDot + 1, fileLength); + if (lastDot === -1) { + return ''; + } + return '.' + fileExtension; +}; + +export const getShortFileName = (fileName: string) => { + const fileFullName = getFileFullName(fileName); + if (fileFullName.length >= 9) { + return fileFullName.substring(0, 10) + '(...)' + getFileExtension(fileName); + } + return fileName; +}; diff --git a/src/utils/getShotFileName.ts b/src/utils/getShotFileName.ts new file mode 100644 index 0000000..66bec22 --- /dev/null +++ b/src/utils/getShotFileName.ts @@ -0,0 +1,26 @@ +const getFileFullName = (fileName: string) => { + var lastDot = fileName.lastIndexOf('.'); + if (lastDot === -1) { + lastDot = fileName.length; + } + const fileFullName = fileName.substring(0, lastDot); + return fileFullName; +}; + +const getFileExtension = (fileName: string) => { + var lastDot = fileName.lastIndexOf('.'); + const fileLength = fileName.length; + const fileExtension = fileName.substring(lastDot + 1, fileLength); + if (lastDot === -1) { + return ''; + } + return '.' + fileExtension; +}; + +export const getShotFileName = (fileName: string) => { + const fileFullName = getFileFullName(fileName); + if (fileFullName.length >= 9) { + return fileFullName.substring(0, 10) + '(...)' + getFileExtension(fileName); + } + return fileName; +}; diff --git a/src/utils/index.ts b/src/utils/index.ts index 115b7cc..4a734b3 100644 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -1 +1,2 @@ export * from './getFileSize'; +export * from './getShotFileName'; From 17b2ec8b1c95d1f077871d03d96da20dbfe5575b Mon Sep 17 00:00:00 2001 From: anjaemin Date: Wed, 26 Oct 2022 06:08:31 +0900 Subject: [PATCH 6/9] fix: filename --- src/utils/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/utils/index.ts b/src/utils/index.ts index 4a734b3..412bd74 100644 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -1,2 +1,2 @@ export * from './getFileSize'; -export * from './getShotFileName'; +export * from './getShortFileName'; From 746aad17e46a1c3cf6309b72ee3b945f10cd6194 Mon Sep 17 00:00:00 2001 From: anjaemin Date: Wed, 26 Oct 2022 06:09:11 +0900 Subject: [PATCH 7/9] =?UTF-8?q?feat:=20FileList=20Page=20=EA=B5=AC?= =?UTF-8?q?=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/filelist/index.tsx | 39 ++++++++++++++++++++++++++++++++++-- src/pages/filelist/styled.ts | 19 +++++++++++++++++- 2 files changed, 55 insertions(+), 3 deletions(-) diff --git a/src/pages/filelist/index.tsx b/src/pages/filelist/index.tsx index e667cf5..5ce4089 100644 --- a/src/pages/filelist/index.tsx +++ b/src/pages/filelist/index.tsx @@ -1,5 +1,40 @@ -import React from 'react'; +import axios from 'axios'; +import React, { useEffect, useState } from 'react'; +import { FileListBox } from '../../components'; +import { getFileSize, getShortFileName } from '../../utils'; import * as S from './styled'; -export const FileListPage: React.FC = () => ; +export const FileListPage: React.FC = () => { + const [fileList, setFileList] = useState(); + const getFileList = async () => { + await axios({ + method: 'get', + url: 'https://tfb.minpeter.cf/list', + }) + .then((res) => { + setFileList(res.data.list); + }) + .catch((err) => { + console.log(err); + }); + }; + useEffect(() => { + getFileList(); + }, []); + return ( + <> + + {fileList?.map((item, index) => ( + + ))} + + + + ); +}; diff --git a/src/pages/filelist/styled.ts b/src/pages/filelist/styled.ts index 2539bbb..03bdfdf 100644 --- a/src/pages/filelist/styled.ts +++ b/src/pages/filelist/styled.ts @@ -1,3 +1,20 @@ import styled from '@emotion/styled'; -export const FileListPageContainer = styled.div``; +export const FileListPageContainer = styled.div` + max-height: 40rem; + overflow: auto; + display: flex; + flex-direction: column; + align-items: center; + &::-webkit-scrollbar { + display: none; + } +`; + +export const FileListPageBoxShoadow = styled.div` + width: 100%; + height: 6rem; + position: relative; + top: -25px; + background: linear-gradient(180deg, rgba(40, 42, 58, 0) 0%, #282a3a 45.31%); +`; From f4f177da526c7117957fb154590ee671f1877177 Mon Sep 17 00:00:00 2001 From: anjaemin Date: Wed, 26 Oct 2022 09:41:18 +0900 Subject: [PATCH 8/9] =?UTF-8?q?feat:=20SkeletionUI=20Loading=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/pages/filelist/index.tsx | 56 +++++++++++++++++++++++++++++------- src/pages/filelist/styled.ts | 28 ++++++++++++++++++ 2 files changed, 73 insertions(+), 11 deletions(-) diff --git a/src/pages/filelist/index.tsx b/src/pages/filelist/index.tsx index 5ce4089..492d281 100644 --- a/src/pages/filelist/index.tsx +++ b/src/pages/filelist/index.tsx @@ -6,6 +6,8 @@ import { getFileSize, getShortFileName } from '../../utils'; import * as S from './styled'; export const FileListPage: React.FC = () => { + const [loading, setLoading] = useState(true); //loading 확인하고싶으면 false로 바꿔주세요. + const SkeletonUIRandomWidth = ['50', '55', '60', '65', '70', '75', '80']; const [fileList, setFileList] = useState(); const getFileList = async () => { await axios({ @@ -14,6 +16,7 @@ export const FileListPage: React.FC = () => { }) .then((res) => { setFileList(res.data.list); + setLoading(false); }) .catch((err) => { console.log(err); @@ -24,17 +27,48 @@ export const FileListPage: React.FC = () => { }, []); return ( <> - - {fileList?.map((item, index) => ( - - ))} - - + {loading ? ( + <> + + {fileList?.map((item, index) => ( + + ))} + + + + ) : ( + <> + + + + + + + + + + + + )} ); }; diff --git a/src/pages/filelist/styled.ts b/src/pages/filelist/styled.ts index 03bdfdf..aba5772 100644 --- a/src/pages/filelist/styled.ts +++ b/src/pages/filelist/styled.ts @@ -18,3 +18,31 @@ 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 2.5s 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 3214eba34109dff5a4ee5729d62dba8a98360056 Mon Sep 17 00:00:00 2001 From: anjaemin Date: Wed, 26 Oct 2022 09:43:28 +0900 Subject: [PATCH 9/9] =?UTF-8?q?fix:=20=EC=A3=BC=EC=84=9D,=20setLoading=20?= =?UTF-8?q?=EA=B0=92?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/filelist/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/filelist/index.tsx b/src/pages/filelist/index.tsx index 492d281..1b17254 100644 --- a/src/pages/filelist/index.tsx +++ b/src/pages/filelist/index.tsx @@ -6,7 +6,7 @@ import { getFileSize, getShortFileName } from '../../utils'; import * as S from './styled'; export const FileListPage: React.FC = () => { - const [loading, setLoading] = useState(true); //loading 확인하고싶으면 false로 바꿔주세요. + const [loading, setLoading] = useState(false); const SkeletonUIRandomWidth = ['50', '55', '60', '65', '70', '75', '80']; const [fileList, setFileList] = useState(); const getFileList = async () => { @@ -16,7 +16,7 @@ export const FileListPage: React.FC = () => { }) .then((res) => { setFileList(res.data.list); - setLoading(false); + setLoading(true); //loading 확인하고싶으면 false로 바꿔주세요. }) .catch((err) => { console.log(err);