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="비밀번호를 입력해주세요." + /> + +