Dev

.env

@@ -1,4 +1,3 @@
-PUBLIC_URL= '/'
 REACT_APP_BACKEND_BASEURL=http://localhost:5000
 # dev - http://localhost:5000
 # main - https://tfb.minpeter.cf

.prettierrc

@@ -1,5 +1,5 @@
 {
-    "singleQuote": true,
-    "trailingComma": "all",
-    "printWidth": 100
-  }
+  "singleQuote": true,
+  "trailingComma": "all",
+  "printWidth": 100
+}

src/components/common/FileListBox/index.tsx

@@ -5,22 +5,24 @@ import * as S from './styled';
 
 type FileListBoxProps = {
   filename: string;
+  fileId: string;
   size: string;
-  LastModified: any;
+  uploadDate: any;
   isEncrypted: boolean;
   click: () => void;
 };
 
 export const FileListBox: React.FC<FileListBoxProps> = ({
   filename,
+  fileId,
   size,
-  LastModified,
+  uploadDate,
   isEncrypted,
   click,
 }) => (
   <S.FileListBoxContainer onClick={click}>
     {isEncrypted ? <LockIcon width={'2.3rem'} style={{ marginRight: '0.5rem' }} /> : <></>}
-    파일이름: {filename} / 크기:{size} / 업로드날짜:{LastModified.year}-{LastModified.month}-
-    {LastModified.day}
+    ID: {fileId} / 파일이름: {filename} / 크기:{size} / 업로드날짜:{uploadDate.year}-
+    {uploadDate.month}-{uploadDate.day}
   </S.FileListBoxContainer>
 );

src/hooks/useDeletePageNavigate.ts

@@ -4,12 +4,12 @@ import { bindActionCreators } from 'redux';
 
 import { actionCreators } from '../state';
 
-export const useDeletePageNavigator = (filename: string, token: string) => {
+export const useDeletePageNavigator = (delete_url: string, isEncrypted: boolean, token: string) => {
   const navigate = useNavigate();
   const dispatch = useDispatch();
   const { SetDeleteFileProps } = bindActionCreators(actionCreators, dispatch);
   const move = () => {
-    SetDeleteFileProps({ filename: filename, token: token });
+    SetDeleteFileProps({ delete_url: delete_url, isEncrypted: isEncrypted, token: token });
     navigate('/delete');
   };
   return [move];

src/index.tsx

@@ -9,7 +9,7 @@ import { globalStyle } from './styles';
 
 const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
 root.render(
-  <BrowserRouter basename={process.env.PUBLIC_URL}>
+  <BrowserRouter>
     <Global styles={globalStyle} />
     <App />
   </BrowserRouter>,

src/pages/checkpw/index.tsx

@@ -15,7 +15,7 @@ import * as S from './styled';
 export const CheckPasswordPage: React.FC = () => {
   const checkPasswordFileProps = useSelector((state: RootState) => state.CheckPasswordFileProps);
   const [password, setPassword] = useState('');
-  const { year, month, day } = getDate(checkPasswordFileProps.lastModified);
+  const { year, month, day } = getDate(checkPasswordFileProps.uploadDate);
   const dispatch = useDispatch();
   const { SetDownloadFileProps } = bindActionCreators(actionCreators, dispatch);
 
@@ -30,13 +30,13 @@ export const CheckPasswordPage: React.FC = () => {
     } else {
       await axios({
         method: 'get',
-        url: `${process.env.REACT_APP_BACKEND_BASEURL}/checkpw/${checkPasswordFileProps.filename}?pw=${password}`,
+        url: `${process.env.REACT_APP_BACKEND_BASEURL}/checkpw/${checkPasswordFileProps.fileId}/${checkPasswordFileProps.filename}?pw=${password}`,
       })
         .then((res) => {
           SetDownloadFileProps({
             filename: checkPasswordFileProps.filename,
-            size: checkPasswordFileProps.size,
-            lastModified: checkPasswordFileProps.lastModified,
+            fileId: checkPasswordFileProps.fileId,
+            isEncrypted: checkPasswordFileProps.isEncrypted,
             token: res.data.token,
           });
           navigate('/download');
@@ -55,11 +55,7 @@ export const CheckPasswordPage: React.FC = () => {
     }
   };
   useEffect(() => {
-    if (
-      checkPasswordFileProps.filename === null ||
-      checkPasswordFileProps.size === null ||
-      checkPasswordFileProps.lastModified === null
-    ) {
+    if (checkPasswordFileProps.filename === null || checkPasswordFileProps.fileId === null) {
       navigate('/');
     }
   });

src/pages/delete/index.tsx

@@ -20,8 +20,8 @@ export const DeletePage: React.FC = () => {
   const deleteFile = async () => {
     await axios({
       method: 'delete',
-      url: `${process.env.REACT_APP_BACKEND_BASEURL}/del/${DeleteFileProps.filename}${
-        DeleteFileProps.token != null ? `?token=${DeleteFileProps.token}` : ''
+      url: `${DeleteFileProps.delete_url}${
+        DeleteFileProps.isEncrypted ? `?token=${DeleteFileProps.token}` : ''
       }`,
     })
       .then(() => {

src/pages/download/index.tsx

@@ -1,45 +1,89 @@
-import React, { useEffect } from 'react';
+import axios from 'axios';
+import React, { useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { useNavigate } from 'react-router-dom';
 import { toast } from 'react-toastify';
 
 import { Button, FileBox } from '../../components';
 import { useDeletePageNavigator } from '../../hooks';
 import { RootState } from '../../state/reducers';
-import { getDate } from '../../utils';
+import { getDate, getFileSize } from '../../utils';
 import * as S from './styled';
 
 export const DownloadPage: React.FC = () => {
   const navigate = useNavigate();
   const downloadFileProps: any = useSelector((state: RootState) => state.DownloadFileProps);
-  const { year, month, day } = getDate(downloadFileProps.lastModified);
-  const [move] = useDeletePageNavigator(downloadFileProps.filename, downloadFileProps.token);
+  const [fileProps, setFileProps] = useState({
+    filename: '',
+    // fileId: '',
+    size: '',
+    uploadDate: { year: 0, month: 0, day: 0 },
+    download_url: '',
+    delete_url: '',
+    isEncrypted: false,
+  });
+  const [move] = useDeletePageNavigator(
+    fileProps.delete_url,
+    fileProps.isEncrypted,
+    downloadFileProps.token,
+  );
+
+  //https://github.com/facebook/react/issues/14920
   useEffect(() => {
-    if (
-      downloadFileProps.filename === null ||
-      downloadFileProps.size === null ||
-      downloadFileProps.lastModified === null
-    ) {
+    const getFileProps = async () => {
+      await axios({
+        method: 'get',
+        url: `${process.env.REACT_APP_BACKEND_BASEURL}/file/${downloadFileProps.fileId}/${
+          downloadFileProps.filename
+        }${downloadFileProps.isEncrypted ? `?token=${downloadFileProps.token}` : ''}`,
+      })
+        .then((res) => {
+          setFileProps({
+            filename: res.data.filename,
+            // fileId: res.data.fileId,
+            size: getFileSize(res.data.size),
+            uploadDate: getDate(res.data.uploadDate),
+            download_url: res.data.download_url,
+            delete_url: res.data.delete_url,
+            isEncrypted: res.data.isEncrypted,
+          });
+        })
+        .catch((err) => {
+          navigate(-1);
+          toast.error(`error 문의해주세요. ${err.response.status}`, {
+            autoClose: 1000,
+            position: toast.POSITION.BOTTOM_RIGHT,
+          });
+          console.log(err);
+        });
+    };
+    if (downloadFileProps.filename != null || downloadFileProps.fileId != null) {
+      getFileProps();
+    } else {
       navigate('/');
     }
-  }, [navigate, downloadFileProps]);
+  }, [downloadFileProps, navigate]);
   return (
     <S.DownloadPageContainer>
       <FileBox>
-        파일이름:{downloadFileProps.filename} / 크기:{downloadFileProps.size} / 업로드된 날짜:
-        {year}-{month}-{day}
+        파일이름:{fileProps.filename} / 크기:{fileProps.size} / 업로드된 날짜:
+        {fileProps.uploadDate.year}-{fileProps.uploadDate.month}-{fileProps.uploadDate.day}
       </FileBox>
       <S.DownloadPageButtonSection>
         <a
-          href={`${downloadFileProps.download_url}${
-            downloadFileProps.token != null ? `?${downloadFileProps.token}` : ''
+          href={`${fileProps.download_url}${
+            fileProps.isEncrypted ? `?token=${downloadFileProps.token}` : ''
           }`}
         >
           <Button click={() => {}} bgColor="var(--color-button-primary)" label="다운로드" />
         </a>
         <Button
           click={() => {
-            navigator.clipboard.writeText(``);
+            navigator.clipboard.writeText(
+              `${fileProps.download_url}${
+                fileProps.isEncrypted ? `?token=${downloadFileProps.token}` : ''
+              }`,
+            );
             toast.success('복사 완료', {
               autoClose: 1000,
               position: toast.POSITION.BOTTOM_RIGHT,

src/pages/filelist/index.tsx

@@ -14,7 +14,6 @@ export const FileListPage: React.FC = () => {
   const [loading, setLoading] = useState(false);
   const SkeletonUIRandomWidth = ['50', '55', '60', '65', '70', '75', '80'];
   const dispatch = useDispatch();
-  // eslint-disable-next-line
   const { SetDownloadFileProps, SetCheckPasswordFileProps } = bindActionCreators(
     actionCreators,
     dispatch,
@@ -29,7 +28,7 @@ export const FileListPage: React.FC = () => {
         setFileList(res.data.list); //파일리스트 요소 갯수에 따른 핸들링 추가예정
         setTimeout(() => {
           setLoading(true); //loading 확인하고싶으면 false로 바꿔주세요.
-        }, 1200);
+        }, 1000);
       })
       .catch((err) => {
         console.log(err);
@@ -47,32 +46,29 @@ export const FileListPage: React.FC = () => {
               <FileListBox
                 key={index}
                 filename={getShortFileName(item.filename)}
+                fileId={item.fileId}
                 size={getFileSize(item.size)}
-                LastModified={getDate(item.lastModified)}
+                uploadDate={getDate(item.uploadDate)}
                 isEncrypted={item.isEncrypted}
                 click={() => {
                   if (item.isEncrypted) {
                     SetCheckPasswordFileProps({
                       filename: item.filename,
+                      fileId: item.fileId,
                       size: getFileSize(item.size),
-                      lastModified: item.lastModified,
+                      uploadDate: item.uploadDate,
+                      isEncrypted: item.isEncrypted,
                     });
                     navigate('/checkpw');
                   } else {
                     SetDownloadFileProps({
                       filename: item.filename,
-                      size: getFileSize(item.size),
-                      lastModified: item.lastModified,
+                      fileId: item.fileId,
+                      isEncrypted: item.isEncrypted,
                       token: null,
                     });
                     navigate('/download');
                   }
-                  // SetDownloadFileProps({
-                  //   Name: item.filename,
-                  //   Size: item.size,
-                  //   LastModified: item.lastModified,
-                  //   //passowrd 유무 추가예정
-                  // });
                 }}
               />
             ))}

src/pages/main/index.tsx

@@ -68,25 +68,13 @@ export const MainPage: React.FC = () => {
             autoClose: 3000,
             position: toast.POSITION.BOTTOM_RIGHT,
           });
-          if (res.data.isEncrypted) {
-            SetDownloadFileProps({
-              filename: res.data.filename,
-              size: getFileSize(res.data.size),
-              lastModified: res.data.lastModified,
-              token: res.data.token,
-              download_url: res.data.download_url,
-              //추후에 기한,다운로드횟수 추가예정
-            });
-          } else {
-            SetDownloadFileProps({
-              filename: res.data.filename,
-              size: getFileSize(res.data.size),
-              lastModified: res.data.lastModified,
-              token: null,
-              download_url: res.data.download_url,
-              //추후에 기한,다운로드횟수 추가예정
-            });
-          }
+          SetDownloadFileProps({
+            filename: res.data.filename,
+            fileId: res.data.fileId,
+            token: res.data.isEncrypted ? res.data.token : null,
+            isEncrypted: res.data.isEncrypted,
+            //추후에 기한,다운로드횟수 추가예정
+          });
           navigate('/download');
         })
         .catch((err) => {

src/state/reducers/CheckPasswordFileProps.ts

@@ -2,7 +2,7 @@ import { ActionType } from '../action-types';
 import { Action } from '../actions';
 
 const reducer = (
-  state: any = { filename: null, size: null, lastModified: null },
+  state: any = { filename: null, fileId: null, size: null, uploadDate: null, isEncrypted: null },
   action: Action,
 ): any => {
   switch (action.type) {

src/state/reducers/DeleteFileProps.ts

@@ -2,7 +2,7 @@ import { ActionType } from '../action-types';
 import { Action } from '../actions';
 
 const reducer = (
-  state: any = { filename: null, token: null, delete_url: null },
+  state: any = { token: null, delete_url: null, isEncrypted: null },
   action: Action,
 ): any => {
   switch (action.type) {

src/state/reducers/DownloadFileProps.ts

@@ -2,7 +2,12 @@ import { ActionType } from '../action-types';
 import { Action } from '../actions';
 
 const reducer = (
-  state: any = { filename: null, size: null, lastModified: null, token: null, donwload_url: null },
+  state: any = {
+    filename: null,
+    fileId: null,
+    token: null,
+    isEncrypted: null,
+  },
   action: Action,
 ): any => {
   switch (action.type) {

src/utils/getFileSize.ts

@@ -7,5 +7,5 @@ export const getFileSize = (size: number) => {
     n = n / 1024;
   }
 
-  return n.toFixed(n < 10 && l > 0 ? 1 : 0) + ' ' + units[l];
+  return n.toFixed(n < 10 && l > 0 ? 1 : 0) + units[l];
 };