27 delete page 구조 개편

src/hooks/index.ts

@@ -1,2 +1 @@
 export * from './useDeletePageNavigate';
-export * from './useDownloadPageNavigate';

src/hooks/useDeletePageNavigate.ts

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

src/pages/delete/index.tsx

@@ -10,28 +10,28 @@ import * as S from './styled';
 
 export const DeletePage: React.FC = () => {
   const navigate = useNavigate();
-  const DeleteFileName = useSelector((state: RootState) => state.DeleteFileName);
+  const DeleteFileProps = useSelector((state: RootState) => state.DeleteFileName);
   useEffect(() => {
-    if (DeleteFileName === '') {
+    if (DeleteFileProps.filename === null) {
       navigate(-1);
     }
   });
 
   const deleteFile = async () => {
     await axios({
       method: 'delete',
-      url: `${process.env.REACT_APP_BACKEND_BASEURL}/del/${DeleteFileName}`,
+      url: `${process.env.REACT_APP_BACKEND_BASEURL}/del/${DeleteFileProps.filename}${
+        DeleteFileProps.token != null ? `?token=${DeleteFileProps.token}` : ''
+      }`,
     })
-      .then((res) => {
-        console.log(res);
+      .then(() => {
         navigate('/');
         toast.success('삭제 완료', {
           autoClose: 3000,
           position: toast.POSITION.BOTTOM_RIGHT,
         });
       })
       .catch((err) => {
-        console.log(err);
         toast.error(`삭제 실패 ${err.response.status}`, {
           autoClose: 3000,
           position: toast.POSITION.BOTTOM_RIGHT,

src/pages/download/index.tsx

@@ -4,6 +4,7 @@ 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 * as S from './styled';
@@ -12,6 +13,7 @@ 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);
   useEffect(() => {
     if (
       downloadFileProps.filename === null ||
@@ -48,10 +50,7 @@ export const DownloadPage: React.FC = () => {
         />
         <Button
           click={() => {
-            toast.success('제작중!', {
-              autoClose: 1000,
-              position: toast.POSITION.BOTTOM_RIGHT,
-            });
+            move();
           }}
           bgColor="var(--color-button-secondary)"
           label="파일삭제"

src/state/action-types/index.ts

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

src/state/actions-creators/index.ts

@@ -3,10 +3,10 @@ import { Dispatch } from 'redux';
 import { ActionType } from '../action-types';
 import { Action } from '../actions';
 
-export const SetDeleteFileName = (name: string) => (dispatch: Dispatch<Action>) => {
+export const SetDeleteFileProps = (props: any) => (dispatch: Dispatch<Action>) => {
   dispatch({
-    type: ActionType.DeleteFileName,
-    name: name,
+    type: ActionType.DeleteFileProps,
+    props: props,
   });
 };
 

src/state/actions/index.ts

@@ -1,8 +1,8 @@
 import { ActionType } from '../action-types';
 
 interface DeleteFileProps {
-  type: ActionType.DeleteFileName;
-  name: string;
+  type: ActionType.DeleteFileProps;
+  props: any;
 }
 
 interface DownloadFileProps {

src/state/reducers/DeleteFileName.ts → src/state/reducers/DeleteFileProps.ts

@@ -1,10 +1,10 @@
 import { ActionType } from '../action-types';
 import { Action } from '../actions';
 
-const reducer = (state: string = '', action: Action): string => {
+const reducer = (state: any = { filename: null, token: null }, action: Action): any => {
   switch (action.type) {
-    case ActionType.DeleteFileName:
-      return action.name;
+    case ActionType.DeleteFileProps:
+      return action.props;
     default:
       return state;
   }

src/state/reducers/index.ts

@@ -1,7 +1,7 @@
 import { combineReducers } from 'redux';
 
 import CheckPasswordFileProps from './CheckPasswordFileProps';
-import DeleteFileName from './DeleteFileName';
+import DeleteFileName from './DeleteFileProps';
 import DownloadFileProps from './DownloadFileProps';
 
 const reducers = combineReducers({