Merge pull request #36 from ananjaemin/15-filelist-page-개편-및-다운로드-패스워…

…드-확인

15 filelist page 개편 및 다운로드 패스워드 확인

.env

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

src/App.tsx

@@ -7,12 +7,12 @@ import 'react-toastify/dist/ReactToastify.css';
 import { Navbar } from './components';
 import {
   MainPage,
-  SuccessPage,
   DownloadPage,
   DeletePage,
   FileListPage,
   ApiPage,
   NotFoundPage,
+  CheckPasswordPage,
 } from './pages';
 import { store } from './state/store';
 
@@ -45,11 +45,11 @@ export const App: React.FC = () => (
         }
       >
         <Route index element={<MainPage />} />
-        <Route path="/success" element={<SuccessPage />} />
         <Route path="/download" element={<DownloadPage />} />
         <Route path="/delete" element={<DeletePage />} />
         <Route path="/filelist" element={<FileListPage />} />
         <Route path="/api/*" element={<ApiPage />} />
+        <Route path="/checkpw" element={<CheckPasswordPage />} />
         <Route path="*" element={<NotFoundPage />} />
       </Route>
     </Routes>

src/components/common/FileBox/index.ts

@@ -0,0 +1,12 @@
+import styled from '@emotion/styled';
+
+export const FileBox = styled.div`
+  background-color: var(--color-backgorund-filelistbox);
+  color: var(--color-text-tertiary);
+  border-radius: 10px;
+  padding: 1.2rem 1.2rem 1.2rem 1.2rem;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  font-size: 2.2rem;
+`;

src/components/common/FileFind/index.tsx

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

src/components/common/FileListBox/index.tsx

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

src/components/common/FileListBox/styled.ts

@@ -7,7 +7,8 @@ export const FileListBoxContainer = styled.div`
   padding: 1.2rem 1.2rem 1.2rem 1.2rem;
   display: flex;
   flex-direction: row;
-  align-items: center;
+  justify-content: center;
+  align-items: flex-end;
   font-size: 2.2rem;
   margin-bottom: 1.5rem;
   cursor: pointer;

src/components/common/index.ts

@@ -8,3 +8,4 @@ export * from './Button';
 export * from './FileListBox';
 export * from './Progress';
 export * from './SkeletonUIBox';
+export * from './FileBox';

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/checkpw/index.tsx

@@ -0,0 +1,90 @@
+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 { 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.lastModified);
+  const dispatch = useDispatch();
+  const { SetDownloadFileProps } = bindActionCreators(actionCreators, dispatch);
+
+  const navigate = useNavigate();
+
+  const passwordCheck = async () => {
+    if (password === '') {
+      toast.error('비밀번호를 입력해주세요.', {
+        autoClose: 1000,
+        position: toast.POSITION.BOTTOM_RIGHT,
+      });
+    } else {
+      await axios({
+        method: 'get',
+        url: `${process.env.REACT_APP_BACKEND_BASEURL}/checkpw/${checkPasswordFileProps.filename}?pw=${password}`,
+      })
+        .then((res) => {
+          SetDownloadFileProps({
+            filename: checkPasswordFileProps.filename,
+            size: checkPasswordFileProps.size,
+            lastModified: checkPasswordFileProps.lastModified,
+            token: res.data.token,
+          });
+          navigate('/download');
+          toast.success('통과!', {
+            autoClose: 1000,
+            position: toast.POSITION.BOTTOM_RIGHT,
+          });
+        })
+        .catch((err) => {
+          console.log(err);
+          toast.error('비밀번호를 다시 확인해주세요...', {
+            autoClose: 1000,
+            position: toast.POSITION.BOTTOM_RIGHT,
+          });
+        });
+    }
+  };
+  useEffect(() => {
+    if (
+      checkPasswordFileProps.filename === null ||
+      checkPasswordFileProps.size === null ||
+      checkPasswordFileProps.lastModified === null
+    ) {
+      navigate('/');
+    }
+  });
+  return (
+    <S.CheckPasswordPageContainer>
+      <FileBox>
+        파일이름:{checkPasswordFileProps.filename} / 크기:{checkPasswordFileProps.size} / 업로드된
+        날짜: {year}-{month}-{day}
+      </FileBox>
+      <S.PasswordInputSection>
+        <S.CheckPasswordInput
+          onChange={(text) => {
+            setPassword(text.target.value.replace(/(\s*)/g, ''));
+          }}
+          placeholder="비밀번호를 입력해주세요."
+        />
+
+        <Button
+          click={() => {
+            passwordCheck();
+          }}
+          bgColor="var(--color-button-primary)"
+          label="전송"
+        />
+      </S.PasswordInputSection>
+    </S.CheckPasswordPageContainer>
+  );
+};

src/pages/checkpw/styled.ts

@@ -0,0 +1,24 @@
+import styled from '@emotion/styled';
+
+export const CheckPasswordPageContainer = styled.div`
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  width: 100%;
+`;
+
+export const PasswordInputSection = styled.div`
+  display: flex;
+  margin: 4rem;
+`;
+
+export const CheckPasswordInput = styled.input`
+  border: 4px solid var(--color-border);
+  border-radius: 10px;
+  outline: none;
+  width: 50rem;
+  height: 6rem;
+  padding-left: 12px;
+  font-size: 1.8rem;
+  font-weight: 700;
+`;

src/pages/download/index.tsx

@@ -3,35 +3,59 @@ import { useSelector } from 'react-redux';
 import { useNavigate } from 'react-router-dom';
 import { toast } from 'react-toastify';
 
-import { Button } from '../../components';
+import { Button, FileBox } from '../../components';
 import { RootState } from '../../state/reducers';
-import { getFileSize, getDate } from '../../utils';
+import { getDate } 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 { year, month, day } = getDate(downloadFileProps.lastModified);
   useEffect(() => {
     if (
-      downloadFileProps.Name === null ||
-      downloadFileProps.Size === null ||
-      downloadFileProps.LastModified === null
+      downloadFileProps.filename === null ||
+      downloadFileProps.size === null ||
+      downloadFileProps.lastModified === null
     ) {
-      navigate(-1);
+      navigate('/');
     }
-  });
+  }, [navigate, downloadFileProps]);
   return (
     <S.DownloadPageContainer>
-      <S.DonwloadFileBox>
-        파일이름:{downloadFileProps.Name} / 크기:{getFileSize(downloadFileProps.Size)} / 업로드된
-        날짜:
+      <FileBox>
+        파일이름:{downloadFileProps.filename} / 크기:{downloadFileProps.size} / 업로드된 날짜:
         {year}-{month}-{day}
-      </S.DonwloadFileBox>
+      </FileBox>
       <S.DownloadPageButtonSection>
-        <a href={`${process.env.REACT_APP_BACKEND_BASEURL}/dl/${downloadFileProps.Name}`}>
+        <a
+          href={`${process.env.REACT_APP_BACKEND_BASEURL}/dl/${downloadFileProps.name}${
+            downloadFileProps.token != null ? `?${downloadFileProps.token}` : ''
+          }`}
+        >
           <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%;
 `;
 
@@ -12,14 +13,3 @@ export const DownloadPageButtonSection = styled.div`
   justify-content: center;
   margin-top: 3rem;
 `;
-
-export const DonwloadFileBox = styled.div`
-  background-color: var(--color-backgorund-filelistbox);
-  color: var(--color-text-tertiary);
-  border-radius: 10px;
-  padding: 1.2rem 1.2rem 1.2rem 1.2rem;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  font-size: 2.2rem;
-`;