3 file list page dev

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 = () => (
         <Route path="success" element={<SuccessPage />} />
         <Route path="download" element={<DownloadPage />} />
         <Route path="delete" element={<DeletePage />} />
+        <Route path="filelist" element={<FileListPage />} />
       </Route>
     </Routes>
   </Provider>

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<FileListBoxProps> = ({ filename, size, LastModified }) => (
+  <S.FileListBoxContainer>
+    파일이름: {filename} / 크기:{size} / 업로드날짜:{LastModified.getFullYear()}-
+    {LastModified.getMonth() + 1}-{LastModified.getDate()}
+  </S.FileListBoxContainer>
+);

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;
+`;

src/components/common/index.ts

@@ -5,4 +5,5 @@ export * from './FileFind';
 export * from './DownloadCount';
 export * from './Navbar';
 export * from './Button';
-export * from './Progress';
+export * from './FileListBox';
+export * from './Progress';

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);

src/pages/filelist/index.tsx

@@ -0,0 +1,74 @@
+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 = () => {
+  const [loading, setLoading] = useState(false);
+  const SkeletonUIRandomWidth = ['50', '55', '60', '65', '70', '75', '80'];
+  const [fileList, setFileList] = useState<any[]>();
+  const getFileList = async () => {
+    await axios({
+      method: 'get',
+      url: 'https://tfb.minpeter.cf/list',
+    })
+      .then((res) => {
+        setFileList(res.data.list);
+        setLoading(true); //loading 확인하고싶으면 false로 바꿔주세요.
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  };
+  useEffect(() => {
+    getFileList();
+  }, []);
+  return (
+    <>
+      {loading ? (
+        <>
+          <S.FileListPageContainer>
+            {fileList?.map((item, index) => (
+              <FileListBox
+                key={index}
+                filename={getShortFileName(item.Name)}
+                size={getFileSize(item.Size)}
+                LastModified={new Date(item.LastModified)}
+              />
+            ))}
+          </S.FileListPageContainer>
+          <S.FileListPageBoxShoadow />
+        </>
+      ) : (
+        <>
+          <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)]}
+            />
+          </S.FileListPageContainer>
+          <S.FileListPageBoxShoadow />
+        </>
+      )}
+    </>
+  );
+};

src/pages/filelist/styled.ts

@@ -0,0 +1,48 @@
+import styled from '@emotion/styled';
+
+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%);
+`;
+
+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%);
+    }
+  }
+`;

src/pages/index.ts

@@ -2,3 +2,4 @@ export * from './main';
 export * from './success';
 export * from './download';
 export * from './delete';
+export * from './filelist';

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-backgorund-progressbar: #2d2d2d;
 
@@ -19,8 +19,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;
@@ -44,6 +46,7 @@ export const globalStyle = css`
     font-size: 6rem;
     font-weight: 900;
     margin: 18px;
+    margin-top: 50px;
     color: var(--color-text-primary);
   }
   .MainLogoSubText {

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;
+};

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;
+};

src/utils/index.ts

@@ -1 +1,2 @@
 export * from './getFileSize';
+export * from './getShortFileName';