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

src/App.tsx

@@ -45,7 +45,7 @@ export const App: React.FC = () => (
         }
       >
         <Route index element={<MainPage />} />
-        <Route path="/download" element={<DownloadPage />} />
+        <Route path="/download/:fileid" element={<DownloadPage />} />
         <Route path="/delete" element={<DeletePage />} />
         <Route path="/filelist" element={<FileListPage />} />
         <Route path="/api/*" element={<ApiPage />} />

src/pages/download/index.tsx

@@ -2,6 +2,7 @@ import axios from 'axios';
 import React, { useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { useNavigate } from 'react-router-dom';
+import { useParams } from 'react-router-dom';
 import { toast } from 'react-toastify';
 
 import { Button, FileBox, SkeletonUI } from '../../components';
@@ -14,6 +15,7 @@ export const DownloadPage: React.FC = () => {
   const navigate = useNavigate();
   const downloadFileProps: any = useSelector((state: RootState) => state.DownloadFileProps);
   const [loading, setLoading] = useState(true);
+  const { fileid } = useParams<{ fileid: string }>();
   const [fileProps, setFileProps] = useState({
     filename: '',
     // fileId: '',
@@ -34,7 +36,7 @@ export const DownloadPage: React.FC = () => {
     const getFileProps = async () => {
       await axios({
         method: 'get',
-        url: `${process.env.REACT_APP_BACKEND_BASEURL}/file/${downloadFileProps.fileId}${
+        url: `${process.env.REACT_APP_BACKEND_BASEURL}/file/${fileid}${
           downloadFileProps.isEncrypted ? `?token=${downloadFileProps.token}` : ''
         }`,
       })
@@ -51,20 +53,22 @@ export const DownloadPage: React.FC = () => {
           });
         })
         .catch((err) => {
-          navigate(-1);
-          toast.error(`error 문의해주세요. ${err.response.status}`, {
-            autoClose: 1000,
-            position: toast.POSITION.BOTTOM_RIGHT,
-          });
-          console.log(err);
+          navigate('/');
+          if (err.response.status != 401) {
+            toast.error(`error 문의해주세요. ${err.response.status}`, {
+              autoClose: 1000,
+              position: toast.POSITION.BOTTOM_RIGHT,
+            });
+          } else {
+            toast.error(`잘못된 링크입니다`, {
+              autoClose: 1000,
+              position: toast.POSITION.BOTTOM_RIGHT,
+            });
+          }
         });
     };
-    if (downloadFileProps.fileId != null) {
-      getFileProps();
-    } else {
-      navigate('/');
-    }
-  }, [downloadFileProps, navigate]);
+    getFileProps();
+  }, [downloadFileProps, navigate, fileid]);
   return (
     <S.DownloadPageContainer>
       {!loading ? (

src/pages/filelist/index.tsx

@@ -62,12 +62,11 @@ export const FileListPage: React.FC = () => {
                     navigate('/checkpw');
                   } else {
                     SetDownloadFileProps({
-                      filename: item.filename,
                       fileId: item.fileId,
                       isEncrypted: item.isEncrypted,
                       token: null,
                     });
-                    navigate('/download');
+                    navigate(`/download/${item.fileId}`);
                   }
                 }}
               />

src/pages/main/index.tsx

@@ -69,13 +69,12 @@ export const MainPage: React.FC = () => {
             position: toast.POSITION.BOTTOM_RIGHT,
           });
           SetDownloadFileProps({
-            filename: res.data.filename,
             fileId: res.data.fileId,
             token: res.data.isEncrypted ? res.data.token : null,
             isEncrypted: res.data.isEncrypted,
             //추후에 기한,다운로드횟수 추가예정
           });
-          navigate('/download');
+          navigate(`/download/${res.data.fileId}`);
         })
         .catch((err) => {
           console.log(err);