Merge branch '15-filelist-page-개편-및-다운로드-패스워드-확인' into 24-download-page-구조-개편-및-합치기

Author: ananjaemin

.env

@@ -1,2 +1,4 @@
 PUBLIC_URL=/tempfiles-frontend
-REACT_APP_BACKEND_BASEURL= localhost:5000
+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/assets/lockIcon.svg

@@ -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/FileBox/index.ts

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

@@ -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/FileListBox/styled.ts

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

src/components/common/index.ts

@@ -0,0 +1,35 @@
+import React, { useEffect } from 'react';
+import { useSelector } from 'react-redux';
+import { useDispatch } from 'react-redux';
+import { bindActionCreators } from 'redux';
+
+import { FileBox } from '../../components';
+import { actionCreators } from '../../state';
+import { RootState } from '../../state/reducers';
+import * as S from './styled';
+
+export const CheckPasswordPage: React.FC = () => {
+  const checkPasswordFileProps = useSelector((state: RootState) => state.CheckPasswordFileProps);
+  const { year, month, day } = checkPasswordFileProps.lastModified;
+  const dispatch = useDispatch();
+  // eslint-disable-next-line
+  const { SetDownloadFileProps } = bindActionCreators(actionCreators, dispatch);
+
+  useEffect(() => {});
+  return (
+    <S.CheckPasswordPageContainer>
+      <FileBox>
+        파일이름:{checkPasswordFileProps.filename} / 크기:{checkPasswordFileProps.size} / 업로드된
+        날짜: {year}-{month}-{day}
+      </FileBox>
+      <S.PasswordInputSection>
+        <S.CheckPasswordInput
+          onChange={(text) => {
+            console.log(text);
+          }}
+          placeholder="비밀번호를 입력해주세요."
+        />
+      </S.PasswordInputSection>
+    </S.CheckPasswordPageContainer>
+  );
+};

src/pages/checkpw/index.tsx

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

src/pages/checkpw/styled.ts

@@ -3,33 +3,35 @@ 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 * 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 } = downloadFileProps.lastModified;
   useEffect(() => {
     if (
-      downloadFileProps.Name === null ||
-      downloadFileProps.Size === null ||
-      downloadFileProps.LastModified === null
+      downloadFileProps.filename === null ||
+      downloadFileProps.size === null ||
+      downloadFileProps.lastModified === null
     ) {
       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