diff --git a/.env b/.env
index bbf7b16..6475f88 100644
--- a/.env
+++ b/.env
@@ -1,2 +1,4 @@
-PUBLIC_URL=/tempfiles-frontend
-REACT_APP_BACKEND_BASEURL= https://tfb.minpeter.cf
\ No newline at end of file
+PUBLIC_URL= '/'
+REACT_APP_BACKEND_BASEURL=http://localhost:5000
+# dev - http://localhost:5000
+# main - https://tfb.minpeter.cf
\ No newline at end of file
diff --git a/.github/workflows/docker-image.yaml b/.github/workflows/docker-image.yaml
new file mode 100644
index 0000000..5989422
--- /dev/null
+++ b/.github/workflows/docker-image.yaml
@@ -0,0 +1,42 @@
+name: Docker Image CI
+
+on:
+ push:
+ branches: ['main']
+ pull_request:
+ branches: ['main']
+
+jobs:
+ build:
+ runs-on: ubuntu-latest
+
+ steps:
+ - name: Checkout
+ uses: actions/checkout@v3
+
+ - name: Set up Nodejs
+ uses: actions/setup-node@v3
+ with:
+ node-version: 16
+
+ - name: Build
+ run: npm run build
+
+ - name: Set up QEMU
+ uses: docker/setup-qemu-action@v2
+
+ - name: Set up Docker Buildx
+ uses: docker/setup-buildx-action@v2
+
+ - name: Login to Docker Hub
+ uses: docker/login-action@v2
+ with:
+ username: ${{ secrets.DOCKERHUB_USERNAME }}
+ password: ${{ secrets.DOCKERHUB_TOKEN }}
+
+ - name: Build and push
+ uses: docker/build-push-action@v3
+ with:
+ context: .
+ push: true
+ tags: ${{ secrets.DOCKERHUB_USERNAME }}/tempfiles-frontend:latest
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
deleted file mode 100644
index f684450..0000000
--- a/.github/workflows/main.yml
+++ /dev/null
@@ -1,34 +0,0 @@
-name: github pages
-
-on:
- push:
- branches:
- - main
-
-jobs:
- deploy:
- runs-on: ubuntu-18.04
- steps:
- - uses: actions/checkout@v2
-
- - name: Setup Node
- uses: actions/setup-node@v2.1.2
- with:
- node-version: '12.x'
-
- - name: Cache dependencies
- uses: actions/cache@v2
- with:
- path: ~/.npm
- key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
- restore-keys: |
- ${{ runner.os }}-node-
-
- - run: npm ci
- - run: npm run build
-
- - name: Deploy
- uses: peaceiris/actions-gh-pages@v3
- with:
- github_token: ${{ secrets.GITHUB_TOKEN }}
- publish_dir: ./build
diff --git a/Dockerfile b/Dockerfile
new file mode 100644
index 0000000..a86fb23
--- /dev/null
+++ b/Dockerfile
@@ -0,0 +1,7 @@
+FROM nginx:latest
+
+COPY build /usr/share/nginx/html
+
+EXPOSE 80
+
+CMD nginx -g 'daemon off;'
\ No newline at end of file
diff --git a/package.json b/package.json
index 24d7adf..f540005 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
{
"name": "frontend",
"version": "0.1.0",
- "homepage": "https://ananjaemin.github.io/tempfiles-frontend/",
+ "homepage": "https://tempfiles.ml/",
"private": true,
"dependencies": {
"@emotion/react": "^11.10.4",
@@ -58,4 +58,4 @@
"prettier": "^2.7.1",
"react-scripts": "^5.0.1"
}
-}
+}
\ No newline at end of file
diff --git a/src/App.tsx b/src/App.tsx
index 0ba8161..1b8f1c5 100644
--- a/src/App.tsx
+++ b/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 = () => (
}
>
} />
- } />
} />
} />
} />
} />
+ } />
} />
diff --git a/src/assets/lockIcon.svg b/src/assets/lockIcon.svg
new file mode 100644
index 0000000..930c3f5
--- /dev/null
+++ b/src/assets/lockIcon.svg
@@ -0,0 +1,22 @@
+
\ No newline at end of file
diff --git a/src/components/common/Button/styled.ts b/src/components/common/Button/styled.ts
index e166cfa..258c6b6 100644
--- a/src/components/common/Button/styled.ts
+++ b/src/components/common/Button/styled.ts
@@ -2,7 +2,7 @@ import styled from '@emotion/styled';
export const ButtonContainer = styled.input<{ bgColor: string }>`
background-color: ${(props) => props.bgColor};
- border-radius: 8px;
+ border-radius: 0.8rem;
outline: none;
font-size: 2rem;
font-weight: 700;
@@ -10,7 +10,7 @@ export const ButtonContainer = styled.input<{ bgColor: string }>`
height: 6rem;
border: 0;
color: var(--color-text-primary);
- margin: 0px 10px 0px 10px;
+ margin: 0px 1rem 0px 1rem;
`;
ButtonContainer.defaultProps = { type: 'button' };
diff --git a/src/components/common/CheckBox/styled.ts b/src/components/common/CheckBox/styled.ts
index 987f9dd..07eabb4 100644
--- a/src/components/common/CheckBox/styled.ts
+++ b/src/components/common/CheckBox/styled.ts
@@ -3,15 +3,15 @@ import styled from '@emotion/styled';
export const CheckBoxContainer = styled.div`
display: flex;
align-items: center;
- margin-right: 40px;
+ margin-right: 4rem;
`;
export const CheckBoxObject = styled.div<{ isCheck: boolean }>`
width: 2.4rem;
height: 2.4rem;
- padding: 5px;
- margin: 5px 12px 5px 5px;
- border-radius: 3px;
+ padding: 0.5rem;
+ margin: 0.5rem 1.2rem 0.5rem 0.5rem;
+ border-radius: 0.3rem;
background-color: ${(props) =>
props.isCheck ? 'var(--color-check-true-background)' : 'var(--color-check-false-background)'};
`;
diff --git a/src/components/common/FileBox/index.ts b/src/components/common/FileBox/index.ts
new file mode 100644
index 0000000..0450b65
--- /dev/null
+++ b/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: 1rem;
+ padding: 1.2rem 1.2rem 1.2rem 1.2rem;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ font-size: 2.2rem;
+`;
diff --git a/src/components/common/FileFind/index.tsx b/src/components/common/FileFind/index.tsx
index ce39e69..8883216 100644
--- a/src/components/common/FileFind/index.tsx
+++ b/src/components/common/FileFind/index.tsx
@@ -9,13 +9,16 @@ type FileFindProps = {
export const FileFind: React.FC = ({ handleChangeFile, fileProps }) => (
- {fileProps.name != '' && fileProps.size != '' && fileProps.fileType != '' ? (
-
- {'이름:' + fileProps.name + ' / 크기:' + fileProps.size + ' / 타입:' + fileProps.fileType}
-
- ) : (
- 업로드 할 파일을 선택해주세요....
- )}
+
+ {fileProps.filename != '' && fileProps.size != '' && fileProps.fileType != ''
+ ? '이름:' +
+ fileProps.filename +
+ ' / 크기:' +
+ fileProps.size +
+ ' / 타입:' +
+ fileProps.fileType
+ : '업로드 할 파일을 선택해주세요....'}
+
찾아보기
diff --git a/src/components/common/FileFind/styled.ts b/src/components/common/FileFind/styled.ts
index 24ee8cf..f733bcf 100644
--- a/src/components/common/FileFind/styled.ts
+++ b/src/components/common/FileFind/styled.ts
@@ -3,24 +3,22 @@ import styled from '@emotion/styled';
export const FileFindContainer = styled.div`
width: 100%;
display: flex;
- justify-content: space-between;
align-items: center;
- margin-top: 20px;
+ margin-top: 2rem;
`;
-export const FileFindTextBox = styled.div<{ placeholders: boolean }>`
- border: 4px solid var(--color-border);
- border-radius: 10px;
+export const FileFindTextBox = styled.div`
+ border: 0.4rem solid var(--color-border);
+ border-radius: 1rem;
width: 45rem;
height: 4.2rem;
- background-color: var(--color-text-primary);
- color: ${(props) =>
- props.placeholders ? 'var(--color-text-placeholder)' : ' var(--color-text-secondary)'};
+ background-color: var(--color-backgorund-black);
+ color: var(--color-text-placeholder);
display: flex;
align-items: center;
white-space: nowrap;
- padding-left: 12px;
- padding-right: 12px;
+ padding-left: 1.2rem;
+ padding-right: 1.2rem;
font-size: 1.8rem;
font-weight: 700;
overflow: auto;
@@ -36,7 +34,7 @@ export const FileFindButton = styled.label`
display: flex;
align-items: center;
justify-content: center;
- color: var(--color-text-secondary);
+ color: var(--color-text-primary);
font-size: 2rem;
font-weight: 700;
border-radius: 10px;
diff --git a/src/components/common/FileListBox/index.tsx b/src/components/common/FileListBox/index.tsx
index b86b857..21e3624 100644
--- a/src/components/common/FileListBox/index.tsx
+++ b/src/components/common/FileListBox/index.tsx
@@ -1,11 +1,13 @@
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;
};
@@ -13,9 +15,11 @@ export const FileListBox: React.FC = ({
filename,
size,
LastModified,
+ isEncrypted,
click,
}) => (
+ {isEncrypted ? : <>>}
파일이름: {filename} / 크기:{size} / 업로드날짜:{LastModified.year}-{LastModified.month}-
{LastModified.day}
diff --git a/src/components/common/FileListBox/styled.ts b/src/components/common/FileListBox/styled.ts
index ca82e66..5e41a20 100644
--- a/src/components/common/FileListBox/styled.ts
+++ b/src/components/common/FileListBox/styled.ts
@@ -3,11 +3,12 @@ import styled from '@emotion/styled';
export const FileListBoxContainer = styled.div`
background-color: var(--color-backgorund-filelistbox);
color: var(--color-text-tertiary);
- border-radius: 10px;
+ border-radius: 1rem;
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;
diff --git a/src/components/common/Navbar/styled.ts b/src/components/common/Navbar/styled.ts
index 9d71ba8..f8867d1 100644
--- a/src/components/common/Navbar/styled.ts
+++ b/src/components/common/Navbar/styled.ts
@@ -4,7 +4,7 @@ import { Link } from 'react-router-dom';
export const NavbarContainer = styled.nav`
width: 32rem;
min-width: 250px;
- margin: 30px auto 30px auto;
+ margin: 3rem auto 3rem auto;
display: flex;
justify-content: space-between;
z-index: 99;
diff --git a/src/components/common/PasswordInput/index.ts b/src/components/common/PasswordInput/index.ts
index f32d821..c42fcaf 100644
--- a/src/components/common/PasswordInput/index.ts
+++ b/src/components/common/PasswordInput/index.ts
@@ -1,13 +1,18 @@
import styled from '@emotion/styled';
export const PasswordInput = styled.input`
- border: 4px solid var(--color-border);
- border-radius: 10px;
+ border: 0.4rem solid var(--color-border);
+ background-color: var(--color-backgorund-black);
+ color: var(--color-text-placeholder);
+ border-radius: 1rem;
outline: none;
width: 100%;
height: 5rem;
- padding-left: 12px;
+ padding-left: 1.2rem;
font-size: 1.8rem;
font-weight: 700;
- margin-top: 20px;
+ margin-top: 2rem;
+ &::-webkit-input-placeholder {
+ color: var(--color-text-placeholder);
+ }
`;
diff --git a/src/components/common/Progress/styled.ts b/src/components/common/Progress/styled.ts
index b5c3a5a..366c5e5 100644
--- a/src/components/common/Progress/styled.ts
+++ b/src/components/common/Progress/styled.ts
@@ -11,14 +11,14 @@ export const ProgressBar = styled.div<{ width: number }>`
min-width: 70rem;
min-height: 5.6rem;
background: var(--color-backgorund-progressbar);
- border-radius: 15px;
+ border-radius: 1.5rem;
overflow: hidden;
&::before {
content: ' ';
transition: all 1s;
width: ${(props) => props.width}%;
height: auto;
- border-radius: 15px;
+ border-radius: 1.5rem;
background: #373c62;
}
`;
@@ -33,5 +33,5 @@ export const ProgressAnimationBox = styled.div`
width: 20rem;
height: 20rem;
overflow: hidden;
- margin-bottom: 10px;
+ margin-bottom: 1rem;
`;
diff --git a/src/components/common/RangeSlider/index.ts b/src/components/common/RangeSlider/index.ts
index c5e0707..ab8928c 100644
--- a/src/components/common/RangeSlider/index.ts
+++ b/src/components/common/RangeSlider/index.ts
@@ -5,7 +5,7 @@ export const RangeSlider = styled.input`
padding: 0;
width: 100%;
height: 4rem;
- border-radius: 4px;
+ border-radius: 0.4rem;
-webkit-appearance: none;
-moz-appearance: none;
outline: none;
@@ -22,7 +22,7 @@ export const RangeSlider = styled.input`
background-color: var(--color-text-primary);
height: 2rem;
width: 1rem;
- border-radius: 4px;
+ border-radius: 0.4rem;
}
//Firefox
&::-moz-range-thumb {
@@ -31,7 +31,7 @@ export const RangeSlider = styled.input`
background-color: var(--color-text-primary);
height: 2rem;
width: 1rem;
- border-radius: 4px;
+ border-radius: 0.4rem;
}
`;
diff --git a/src/components/common/SkeletonUIBox/index.ts b/src/components/common/SkeletonUIBox/index.ts
index 7ff992b..24ed6c8 100644
--- a/src/components/common/SkeletonUIBox/index.ts
+++ b/src/components/common/SkeletonUIBox/index.ts
@@ -1,8 +1,9 @@
import styled from '@emotion/styled';
+//나중에 loading애니메이션 변수화하기
export const SkeletonUIBox = styled.div<{ randomWitdh: string }>`
display: flex;
background-color: var(--color-backgorund-filelistbox);
- border-radius: 10px;
+ border-radius: 1rem;
margin-bottom: 1.5rem;
min-height: 4.6rem;
min-width: ${(props) => props.randomWitdh}rem;
@@ -12,7 +13,7 @@ export const SkeletonUIBox = styled.div<{ randomWitdh: string }>`
width: 100%;
height: auto;
animation: loading 2s infinite;
- box-shadow: 0 0 30px 30px rgba(255, 255, 255, 0.3);
+ box-shadow: 0 0 3rem 3rem rgba(255, 255, 255, 0.3);
}
@keyframes loading {
0% {
@@ -41,14 +42,14 @@ export const SkeletonUI = styled.div<{
min-height: ${(props) => props.height};
margin: ${(props) => props.margin};
background: var(--color-backgorund-filelistbox);
- border-radius: 10px;
+ border-radius: 1rem;
overflow: hidden;
&::before {
content: ' ';
width: 100%;
height: auto;
animation: loading 2s infinite;
- box-shadow: 0 0 30px 30px rgba(255, 255, 255, 0.3);
+ box-shadow: 0 0 3rem 3rem rgba(255, 255, 255, 0.3);
}
@keyframes loading {
0% {
diff --git a/src/components/common/UpLoadButton/index.ts b/src/components/common/UpLoadButton/index.ts
index 267a12c..652d6b7 100644
--- a/src/components/common/UpLoadButton/index.ts
+++ b/src/components/common/UpLoadButton/index.ts
@@ -2,14 +2,14 @@ import styled from '@emotion/styled';
export const UpLoadButton = styled.input`
outline: none;
- border-radius: 15px;
+ border-radius: 1.5rem;
border: 0;
width: 15rem;
height: 5rem;
font-size: 2rem;
font-weight: 900;
background-color: var(--color-background-secondary);
- margin-top: 30px;
- color: var(--color-text-secondary);
+ margin-top: 3rem;
+ color: var(--color-text-primary);
text-align: center;
`;
diff --git a/src/components/common/index.ts b/src/components/common/index.ts
index bdee441..b95b1f3 100644
--- a/src/components/common/index.ts
+++ b/src/components/common/index.ts
@@ -8,3 +8,4 @@ export * from './Button';
export * from './FileListBox';
export * from './Progress';
export * from './SkeletonUIBox';
+export * from './FileBox';
diff --git a/src/hooks/useDeletePageNavigate.ts b/src/hooks/useDeletePageNavigate.ts
index 1ad4d0d..8f178aa 100644
--- a/src/hooks/useDeletePageNavigate.ts
+++ b/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];
diff --git a/src/pages/api/styled.ts b/src/pages/api/styled.ts
index 51a526a..e1acde6 100644
--- a/src/pages/api/styled.ts
+++ b/src/pages/api/styled.ts
@@ -20,7 +20,7 @@ export const ApiListSection = styled.div`
export const ApiListBox = styled.div`
background-color: var(--color-backgorund-filelistbox);
color: var(--color-text-tertiary);
- border-radius: 10px;
+ border-radius: 1rem;
padding: 2rem 1.4rem 2rem 1.4rem;
margin: 1rem;
display: flex;
diff --git a/src/pages/checkpw/index.tsx b/src/pages/checkpw/index.tsx
new file mode 100644
index 0000000..3247333
--- /dev/null
+++ b/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 (
+
+
+ 파일이름:{checkPasswordFileProps.filename} / 크기:{checkPasswordFileProps.size} / 업로드된
+ 날짜: {year}-{month}-{day}
+
+
+ {
+ setPassword(text.target.value.replace(/(\s*)/g, ''));
+ }}
+ placeholder="비밀번호를 입력해주세요."
+ />
+
+
+
+ );
+};
diff --git a/src/pages/checkpw/styled.ts b/src/pages/checkpw/styled.ts
new file mode 100644
index 0000000..9ca80b4
--- /dev/null
+++ b/src/pages/checkpw/styled.ts
@@ -0,0 +1,29 @@
+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: 0.4rem solid var(--color-border);
+ background-color: var(--color-backgorund-black);
+ color: var(--color-text-placeholder);
+ border-radius: 1rem;
+ outline: none;
+ width: 50rem;
+ height: 6rem;
+ padding-left: 1.2rem;
+ font-size: 1.8rem;
+ font-weight: 700;
+ &::-webkit-input-placeholder {
+ color: var(--color-text-placeholder);
+ }
+`;
diff --git a/src/pages/delete/index.tsx b/src/pages/delete/index.tsx
index bb13254..8b5d30c 100644
--- a/src/pages/delete/index.tsx
+++ b/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 === '') {
- navigate('/');
+ 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);
- navigate(-1);
+ .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,
diff --git a/src/pages/delete/styled.ts b/src/pages/delete/styled.ts
index 5df777d..235f436 100644
--- a/src/pages/delete/styled.ts
+++ b/src/pages/delete/styled.ts
@@ -14,5 +14,5 @@ export const DeletePagePageLabel = styled.div`
font-size: 3rem;
font-weight: 700;
color: var(--color-text-primary);
- margin: 30px;
+ margin: 3rem;
`;
diff --git a/src/pages/download/index.tsx b/src/pages/download/index.tsx
index 5bf111e..96eaef1 100644
--- a/src/pages/download/index.tsx
+++ b/src/pages/download/index.tsx
@@ -3,35 +3,58 @@ 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 { useDeletePageNavigator } from '../../hooks';
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);
+ const [move] = useDeletePageNavigator(downloadFileProps.filename, downloadFileProps.token);
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 (
-
- 파일이름:{downloadFileProps.Name} / 크기:{getFileSize(downloadFileProps.Size)} / 업로드된
- 날짜:
+
+ 파일이름:{downloadFileProps.filename} / 크기:{downloadFileProps.size} / 업로드된 날짜:
{year}-{month}-{day}
-
+
-
+
+