62 파일별 다운로드 페이지 라우팅

src/App.tsx

@@ -49,7 +49,7 @@ export const App: React.FC = () => (
         <Route path="/delete" element={<DeletePage />} />
         <Route path="/filelist" element={<FileListPage />} />
         <Route path="/api/*" element={<ApiPage />} />
-        <Route path="/checkpw" element={<CheckPasswordPage />} />
+        <Route path="/checkpw/:checkfileid" element={<CheckPasswordPage />} />
         <Route path="*" element={<NotFoundPage />} />
       </Route>
     </Routes>

src/pages/checkpw/index.tsx

@@ -1,21 +1,25 @@
 import axios from 'axios';
 import React, { useEffect, useState } from 'react';
-import { useSelector } from 'react-redux';
 import { useDispatch } from 'react-redux';
 import { useNavigate } from 'react-router-dom';
+import { useParams } from 'react-router-dom';
 import { toast } from 'react-toastify';
 import { bindActionCreators } from 'redux';
 
 import { FileBox, Button } from '../../components';
 import { actionCreators } from '../../state';
-import { RootState } from '../../state/reducers';
 import { getDate } from '../../utils';
 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.uploadDate);
+  const { checkfileid } = useParams<{ checkfileid: string }>();
+  const [fileProps, setFileProps] = useState({
+    filename: '',
+    size: '',
+    uploadDate: { year: 0, month: 0, day: 0 },
+  });
+  // const { year, month, day } = getDate(checkPasswordFileProps.uploadDate);
   const dispatch = useDispatch();
   const { SetDownloadFileProps } = bindActionCreators(actionCreators, dispatch);
 
@@ -30,15 +34,14 @@ export const CheckPasswordPage: React.FC = () => {
     } else {
       await axios({
         method: 'get',
-        url: `${process.env.REACT_APP_BACKEND_BASEURL}/checkpw/${checkPasswordFileProps.fileId}?pw=${password}`,
+        url: `${process.env.REACT_APP_BACKEND_BASEURL}/checkpw/${checkfileid}?pw=${password}`,
       })
         .then((res) => {
           SetDownloadFileProps({
-            fileId: checkPasswordFileProps.fileId,
-            isEncrypted: checkPasswordFileProps.isEncrypted,
+            isEncrypted: true,
             token: res.data.token,
           });
-          navigate('/download');
+          navigate(`/download/${checkfileid}`);
           toast.success('통과!', {
             autoClose: 1000,
             position: toast.POSITION.BOTTOM_RIGHT,
@@ -54,15 +57,34 @@ export const CheckPasswordPage: React.FC = () => {
     }
   };
   useEffect(() => {
-    if (checkPasswordFileProps.filename === null || checkPasswordFileProps.fileId === null) {
-      navigate('/');
-    }
+    const getFileProps = async () => {
+      await axios({
+        method: 'get',
+        url: `${process.env.REACT_APP_BACKEND_BASEURL}/file/${checkfileid}`,
+      })
+        .then((res) => {
+          setFileProps({
+            filename: res.data.filename,
+            size: res.data.size,
+            uploadDate: getDate(res.data.uploadDate),
+          });
+        })
+        .catch((err) => {
+          console.log(err);
+          navigate('/');
+          toast.error('error 문의해주세요...', {
+            autoClose: 1000,
+            position: toast.POSITION.BOTTOM_RIGHT,
+          });
+        });
+    };
+    getFileProps();
   });
   return (
     <S.CheckPasswordPageContainer>
       <FileBox>
-        파일이름:{checkPasswordFileProps.filename} / 크기:{checkPasswordFileProps.size} / 업로드된
-        날짜: {year}-{month}-{day}
+        파일이름:{fileProps.filename} / 크기:{fileProps.size} / 업로드된 날짜:{' '}
+        {fileProps.uploadDate.year}-{fileProps.uploadDate.month}-{fileProps.uploadDate.day}
       </FileBox>
       <S.PasswordInputSection>
         <S.CheckPasswordInput

src/pages/download/index.tsx

@@ -37,20 +37,24 @@ export const DownloadPage: React.FC = () => {
       await axios({
         method: 'get',
         url: `${process.env.REACT_APP_BACKEND_BASEURL}/file/${fileid}${
-          downloadFileProps.isEncrypted ? `?token=${downloadFileProps.token}` : ''
+          downloadFileProps.isEncrypted ? `?token=${downloadFileProps.token}` : ``
         }`,
       })
         .then((res) => {
           setLoading(false);
-          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,
-          });
+          if (res.data.isEncrypted && !res.data.provide_token) {
+            navigate(`/checkpw/${fileid}`);
+          } else {
+            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('/');
@@ -87,11 +91,7 @@ export const DownloadPage: React.FC = () => {
             </a>
             <Button
               click={() => {
-                navigator.clipboard.writeText(
-                  `${fileProps.download_url}${
-                    fileProps.isEncrypted ? `?token=${downloadFileProps.token}` : ''
-                  }`,
-                );
+                navigator.clipboard.writeText(window.location.href);
                 toast.success('복사 완료', {
                   autoClose: 1000,
                   position: toast.POSITION.BOTTOM_RIGHT,

src/pages/filelist/index.tsx

@@ -14,10 +14,7 @@ export const FileListPage: React.FC = () => {
   const [loading, setLoading] = useState(false);
   const SkeletonUIRandomWidth = ['50', '55', '60', '65', '70', '75', '80'];
   const dispatch = useDispatch();
-  const { SetDownloadFileProps, SetCheckPasswordFileProps } = bindActionCreators(
-    actionCreators,
-    dispatch,
-  );
+  const { SetDownloadFileProps } = bindActionCreators(actionCreators, dispatch);
   const [fileList, setFileList] = useState<any[]>();
   const getFileList = async () => {
     await axios({
@@ -52,14 +49,7 @@ export const FileListPage: React.FC = () => {
                 isEncrypted={item.isEncrypted}
                 click={() => {
                   if (item.isEncrypted) {
-                    SetCheckPasswordFileProps({
-                      filename: item.filename,
-                      fileId: item.fileId,
-                      size: getFileSize(item.size),
-                      uploadDate: item.uploadDate,
-                      isEncrypted: item.isEncrypted,
-                    });
-                    navigate('/checkpw');
+                    navigate(`/checkpw/${item.fileId}`);
                   } else {
                     SetDownloadFileProps({
                       fileId: item.fileId,

src/state/action-types/index.ts

@@ -1,5 +1,4 @@
 export enum ActionType {
   DeleteFileProps = 'DeleteFileProps',
   DownloadFileProps = 'DownloadFileProps',
-  CheckPasswordFileProps = 'CheckPasswordFileProps',
 }

src/state/actions-creators/index.ts

@@ -16,10 +16,3 @@ export const SetDownloadFileProps = (props: any) => (dispatch: Dispatch<Action>)
     props: props,
   });
 };
-
-export const SetCheckPasswordFileProps = (props: any) => (dispatch: Dispatch<Action>) => {
-  dispatch({
-    type: ActionType.CheckPasswordFileProps,
-    props: props,
-  });
-};

src/state/actions/index.ts

@@ -10,8 +10,4 @@ interface DownloadFileProps {
   props: any;
 }
 
-interface CheckPasswordFileProps {
-  type: ActionType.CheckPasswordFileProps;
-  props: any;
-}
-export type Action = DeleteFileProps | DownloadFileProps | CheckPasswordFileProps;
+export type Action = DeleteFileProps | DownloadFileProps;

src/state/reducers/DownloadFileProps.ts

@@ -3,7 +3,6 @@ import { Action } from '../actions';
 
 const reducer = (
   state: any = {
-    fileId: null,
     token: null,
     isEncrypted: null,
   },

src/state/reducers/index.ts

@@ -1,13 +1,11 @@
 import { combineReducers } from 'redux';
 
-import CheckPasswordFileProps from './CheckPasswordFileProps';
 import DeleteFileName from './DeleteFileProps';
 import DownloadFileProps from './DownloadFileProps';
 
 const reducers = combineReducers({
   DeleteFileName: DeleteFileName,
   DownloadFileProps: DownloadFileProps,
-  CheckPasswordFileProps: CheckPasswordFileProps,
 });
 
 export default reducers;