Merge pull request #34 from ananjaemin/24-download-page-구조-개편-및-합치기

24 download page 구조 개편 및 합치기

Author: ananjaemin

src/components/common/FileFind/index.tsx

@@ -11,7 +11,7 @@ export const FileFind: React.FC<FileFindProps> = ({ handleChangeFile, fileProps
   <S.FileFindContainer>
     {fileProps.name != '' && fileProps.size != '' && fileProps.fileType != '' ? (
       <S.FileFindTextBox placeholders={false}>
-        {'이름:' + fileProps.name + ' / 크기:' + fileProps.size + ' / 타입:' + fileProps.fileType}
+        {'이름:' + fileProps.Name + ' / 크기:' + fileProps.Size + ' / 타입:' + fileProps.fileType}
       </S.FileFindTextBox>
     ) : (
       <S.FileFindTextBox placeholders={true}>업로드 할 파일을 선택해주세요....</S.FileFindTextBox>

src/hooks/index.ts

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

src/hooks/useDownloadPageNavigate.ts

@@ -0,0 +1,16 @@
+import { useDispatch } from 'react-redux';
+import { useNavigate } from 'react-router-dom';
+import { bindActionCreators } from 'redux';
+
+import { actionCreators } from '../state';
+
+export const useDownloadPageNavigate = (props: any) => {
+  const navigate = useNavigate();
+  const dispatch = useDispatch();
+  const { SetDownloadFileProps } = bindActionCreators(actionCreators, dispatch);
+  const move = () => {
+    SetDownloadFileProps(props);
+    navigate('/download');
+  };
+  return [move];
+};

src/pages/download/index.tsx

@@ -17,9 +17,9 @@ export const DownloadPage: React.FC = () => {
       downloadFileProps.size === null ||
       downloadFileProps.lastModified === null
     ) {
-      navigate(-1);
+      navigate('/');
     }
-  });
+  }, [navigate, downloadFileProps]);
   return (
     <S.DownloadPageContainer>
       <FileBox>
@@ -34,6 +34,27 @@ export const DownloadPage: React.FC = () => {
         >
           <Button click={() => {}} bgColor="var(--color-button-primary)" label="다운로드" />
         </a>
+        <Button
+          click={() => {
+            navigator.clipboard.writeText(``);
+            toast.success('복사 완료', {
+              autoClose: 1000,
+              position: toast.POSITION.BOTTOM_RIGHT,
+            });
+          }}
+          bgColor="var(--color-button-primary)"
+          label="링크복사"
+        />
+        <Button
+          click={() => {
+            toast.success('제작중!', {
+              autoClose: 1000,
+              position: toast.POSITION.BOTTOM_RIGHT,
+            });
+          }}
+          bgColor="var(--color-button-secondary)"
+          label="파일삭제"
+        />
         <Button
           click={() => {
             toast.success('제작중!', {

src/pages/download/styled.ts

@@ -3,6 +3,7 @@ import styled from '@emotion/styled';
 export const DownloadPageContainer = styled.div`
   display: flex;
   flex-direction: column;
+  align-items: center;
   width: 100%;
 `;