From 07939093dcad91e4282fd8b9d56b6ef5064e8915 Mon Sep 17 00:00:00 2001 From: anjaemin Date: Tue, 29 Nov 2022 13:36:54 +0900 Subject: [PATCH 1/8] =?UTF-8?q?=EC=95=84=20=EA=B7=80=EC=B0=AE=EB=8B=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .env | 4 +- .../index.tsx | 2 +- .../common/DownLoadCountSlider/styled.ts | 5 +++ src/components/common/DownloadCount/styled.ts | 3 -- src/components/common/RangeSlider/index.ts | 37 +++++++------------ src/components/common/index.ts | 2 +- src/pages/main/index.tsx | 26 ++++++------- src/styles/globalStyle.ts | 4 ++ 8 files changed, 39 insertions(+), 44 deletions(-) rename src/components/common/{DownloadCount => DownLoadCountSlider}/index.tsx (85%) create mode 100644 src/components/common/DownLoadCountSlider/styled.ts delete mode 100644 src/components/common/DownloadCount/styled.ts diff --git a/.env b/.env index cee2e3e..1157ee1 100644 --- a/.env +++ b/.env @@ -1,3 +1,3 @@ -REACT_APP_BACKEND_BASEURL=https://api.tempfiles.ml +REACT_APP_BACKEND_BASEURL=http://localhost:5000 # dev - http://localhost:5000 -# main - https://tfb.minpeter.cf +# main - https://api.tempfiles.ml diff --git a/src/components/common/DownloadCount/index.tsx b/src/components/common/DownLoadCountSlider/index.tsx similarity index 85% rename from src/components/common/DownloadCount/index.tsx rename to src/components/common/DownLoadCountSlider/index.tsx index ff293d0..164b928 100644 --- a/src/components/common/DownloadCount/index.tsx +++ b/src/components/common/DownLoadCountSlider/index.tsx @@ -3,7 +3,7 @@ import React from 'react'; import { RangeSlider } from '../RangeSlider'; import * as S from './styled'; -export const DownLoadCount: React.FC = () => ( +export const DownLoadCountSlider: React.FC = () => ( { { - setRetentionPeriod(false); - toast.success('제작중!', { - autoClose: 1000, - position: toast.POSITION.BOTTOM_RIGHT, - }); + setRetentionPeriod(!retentionPeriod); }} isCheck={retentionPeriod} label={'유지기간'} /> { - setDownloadCount(false); - toast.success('제작중!', { - autoClose: 1000, - position: toast.POSITION.BOTTOM_RIGHT, - }); + setDownloadCount(!downloadCount); }} isCheck={downloadCount} label={'다운로드 횟수'} @@ -137,15 +136,14 @@ export const MainPage: React.FC = () => { label={'비밀번호'} /> - {passwordBoolean ? ( + {downloadCount && } + {passwordBoolean && ( { setPassword(text.target.value.replace(/(\s*)/g, '')); }} placeholder="비밀번호를 입력해주세요." /> - ) : ( - <> )} diff --git a/src/styles/globalStyle.ts b/src/styles/globalStyle.ts index 5a8f153..f74dc44 100644 --- a/src/styles/globalStyle.ts +++ b/src/styles/globalStyle.ts @@ -30,6 +30,10 @@ export const globalStyle = css` --color-button-primary: var(--color-border); --color-button-secondary: #aa75ab; + --color-slider-thumb: var(--color-text-primary); + --color-slider-upper: #757bab; + --color-slider-lower: #2e2836; + --small-mobile-breakpoint: 575px; --mobile-breakpoint: 767px; --tablet-breakpoint: 991px; From 4a1696d5fd070484cca4633e94385a29cf7a117d Mon Sep 17 00:00:00 2001 From: anjaemin Date: Sat, 3 Dec 2022 18:52:47 +0900 Subject: [PATCH 2/8] feat: DownloadCountSlider components add --- src/components/common/index.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/common/index.ts b/src/components/common/index.ts index 840fdd6..a337104 100644 --- a/src/components/common/index.ts +++ b/src/components/common/index.ts @@ -2,10 +2,11 @@ export * from './CheckBox'; export * from './PasswordInput'; export * from './UpLoadButton'; export * from './FileFind'; -export * from './DownLoadCountSlider'; +export * from './DownloadCountSlider'; export * from './Navbar'; export * from './Button'; export * from './FileListBox'; export * from './Progress'; export * from './SkeletonUIBox'; export * from './FileBox'; +export * from './ExpireTime'; From 3847aff041eb41a5e727be8b09f1ee374c59c107 Mon Sep 17 00:00:00 2001 From: anjaemin Date: Sat, 3 Dec 2022 18:53:20 +0900 Subject: [PATCH 3/8] feat: RangeSlider components add --- src/components/common/RangeSlider/index.ts | 13 ++----------- 1 file changed, 2 insertions(+), 11 deletions(-) diff --git a/src/components/common/RangeSlider/index.ts b/src/components/common/RangeSlider/index.ts index 1729aab..fa1dc7d 100644 --- a/src/components/common/RangeSlider/index.ts +++ b/src/components/common/RangeSlider/index.ts @@ -6,24 +6,15 @@ export const RangeSlider = styled.input` height: 4rem; border-radius: 8px; background: var(--color-backgorund-black); + outline: none; &::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 3.9rem; height: 4rem; background: var(--color-background-secondary); - border-radius: 12px; + border-radius: 8px; } - /* &::-webkit-fill-upper { - -webkit-appearance: none; - appearance: none; - background: var(--color-slider-upper); - } - &::-webkit-fill-lower { - -webkit-appearance: none; - appearance: none; - background: var(--color-slider-lower); - } */ `; RangeSlider.defaultProps = { type: 'range' }; From dcdfab1f268ba35b0e512e528bf64c83ac64e6a9 Mon Sep 17 00:00:00 2001 From: anjaemin Date: Sat, 3 Dec 2022 18:53:55 +0900 Subject: [PATCH 4/8] feat: ExpireTime component add --- src/components/common/ExpireTime/index.tsx | 42 ++++++++++++++++++++++ src/components/common/ExpireTime/styled.ts | 36 +++++++++++++++++++ 2 files changed, 78 insertions(+) create mode 100644 src/components/common/ExpireTime/index.tsx create mode 100644 src/components/common/ExpireTime/styled.ts diff --git a/src/components/common/ExpireTime/index.tsx b/src/components/common/ExpireTime/index.tsx new file mode 100644 index 0000000..7706a55 --- /dev/null +++ b/src/components/common/ExpireTime/index.tsx @@ -0,0 +1,42 @@ +import React from 'react'; + +import * as S from './styled'; + +type ExpireTimeProps = { + expireTimePlusButton: string[]; + time: { day: number; hour: number; minute: number }; + expireTime: number; + setExpireTime: (expireTime: number) => void; +}; + +export const ExpireTime: React.FC = ({ + expireTimePlusButton, + setExpireTime, + expireTime, + time, +}) => ( + + + {time.day}일 {time.hour}시간 {time.minute}분 + +
+ {expireTimePlusButton.map((i) => ( + { + const item = + i.split(i.replace(/[^0-9]/g, ''))[1] === '시간' + ? Number(i.replace(/[^0-9]/g, '')) * 60 + : i.split(i.replace(/[^0-9]/g, ''))[1] === '일' + ? Number(i.replace(/[^0-9]/g, '')) * 1440 + : Number(i.replace(/[^0-9]/g, '')); + setExpireTime(expireTime + item); + }} + > + +{i} + + ))} +
+ +); +//i.replace(/[^0-9]/g, '') diff --git a/src/components/common/ExpireTime/styled.ts b/src/components/common/ExpireTime/styled.ts new file mode 100644 index 0000000..e8b6b7d --- /dev/null +++ b/src/components/common/ExpireTime/styled.ts @@ -0,0 +1,36 @@ +import styled from '@emotion/styled'; + +export const ExpireTimeContainer = styled.div` + width: 100%; + display: flex; + justify-content: space-between; + align-items: center; + margin-top: 2rem; +`; + +export const ExpireTimeText = styled.div` + flex: 1 1 auto; + height: 4rem; + display: flex; + align-items: center; + justify-content: center; + font-size: 2rem; + font-weight: 700; + border-radius: 8px; + background: var(--color-backgorund-black); +`; + +export const ExpireTimeButton = styled.div` + padding: 0 1rem 0 1rem; + margin: 0 0.5rem 0 0.5rem; + font-size: 1.6rem; + font-weight: 600; + color: var(--color-text-primary); + height: 4rem; + display: flex; + align-items: center; + justify-content: center; + background-color: var(--color-background-secondary); + border-radius: 0.8rem; + cursor: pointer; +`; From 80c36c9d709efa2818bb6a956533f255ecacf417 Mon Sep 17 00:00:00 2001 From: anjaemin Date: Sat, 3 Dec 2022 18:56:30 +0900 Subject: [PATCH 5/8] feat: DownloadCountSlider components add --- src/components/common/DownLoadCountSlider/index.tsx | 13 +++++++++++-- src/components/common/DownLoadCountSlider/styled.ts | 9 +++++++++ 2 files changed, 20 insertions(+), 2 deletions(-) diff --git a/src/components/common/DownLoadCountSlider/index.tsx b/src/components/common/DownLoadCountSlider/index.tsx index 164b928..aa976c8 100644 --- a/src/components/common/DownLoadCountSlider/index.tsx +++ b/src/components/common/DownLoadCountSlider/index.tsx @@ -3,13 +3,22 @@ import React from 'react'; import { RangeSlider } from '../RangeSlider'; import * as S from './styled'; -export const DownLoadCountSlider: React.FC = () => ( +type DownloadCountSliderProps = { + downloadCount: number; + setDownloadCount: any; +}; + +export const DownloadCountSlider: React.FC = ({ + downloadCount, + setDownloadCount, +}) => ( + - 다운로드 횟수 - {downloadCount}번 console.log(event.target.value)} + onChange={(event) => setDownloadCount(event.target.value)} step={1} /> diff --git a/src/components/common/DownLoadCountSlider/styled.ts b/src/components/common/DownLoadCountSlider/styled.ts index 258b64f..808b0b3 100644 --- a/src/components/common/DownLoadCountSlider/styled.ts +++ b/src/components/common/DownLoadCountSlider/styled.ts @@ -2,4 +2,13 @@ import styled from '@emotion/styled'; export const DownloadCountContainer = styled.div` width: 100%; + display: flex; + flex-direction: column; + margin-top: 2rem; +`; + +export const SectionText = styled.div` + color: var(--color-text-primary); + font-weight: 600; + margin-bottom: 0.5rem; `; From 7f40db95d77b7263c05f2d0f4b93b8fd11398e8b Mon Sep 17 00:00:00 2001 From: anjaemin Date: Sat, 3 Dec 2022 18:57:51 +0900 Subject: [PATCH 6/8] fix: delete_url not found --- src/pages/delete/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/delete/index.tsx b/src/pages/delete/index.tsx index 52b0c72..299aa88 100644 --- a/src/pages/delete/index.tsx +++ b/src/pages/delete/index.tsx @@ -20,7 +20,7 @@ export const DeletePage: React.FC = () => { const deleteFile = async () => { await axios({ method: 'delete', - url: `${DeleteFileProps.delete_url}${ + url: `${process.env.REACT_APP_BACKEND_BASEURL}${DeleteFileProps.delete_url}${ DeleteFileProps.isEncrypted ? `?token=${DeleteFileProps.token}` : '' }`, }) From f057e02dac5c82cab0e18eda2ffd5cd961ea496a Mon Sep 17 00:00:00 2001 From: anjaemin Date: Sat, 3 Dec 2022 18:58:51 +0900 Subject: [PATCH 7/8] feat: show ExpireTime & downloadCount --- src/pages/download/index.tsx | 12 ++++++++++-- src/pages/download/styled.ts | 7 +++++++ 2 files changed, 17 insertions(+), 2 deletions(-) diff --git a/src/pages/download/index.tsx b/src/pages/download/index.tsx index 734f498..fdbba3b 100644 --- a/src/pages/download/index.tsx +++ b/src/pages/download/index.tsx @@ -8,7 +8,7 @@ import { toast } from 'react-toastify'; import { Button, FileBox, SkeletonUI } from '../../components'; import { useDeletePageNavigator } from '../../hooks'; import { RootState } from '../../state/reducers'; -import { getDate, getFileSize } from '../../utils'; +import { getDate, getFileSize, getExpireTime } from '../../utils'; import * as S from './styled'; export const DownloadPage: React.FC = () => { @@ -24,6 +24,8 @@ export const DownloadPage: React.FC = () => { download_url: '', delete_url: '', isEncrypted: false, + downloadCount: 0, + expireTime: { day: 0, hour: 0, minute: 0 }, }); const [move] = useDeletePageNavigator( fileProps.delete_url, @@ -53,6 +55,8 @@ export const DownloadPage: React.FC = () => { download_url: res.data.download_url, delete_url: res.data.delete_url, isEncrypted: res.data.isEncrypted, + downloadCount: res.data.downloadLimit - res.data.downloadCount, + expireTime: getExpireTime(res.data.expireTime), }); } }) @@ -81,9 +85,13 @@ export const DownloadPage: React.FC = () => { 파일이름:{fileProps.filename} / 크기:{fileProps.size} / 업로드된 날짜: {fileProps.uploadDate.year}-{fileProps.uploadDate.month}-{fileProps.uploadDate.day} + + 만료까지 {fileProps.expireTime.day}일 {fileProps.expireTime.hour}시간{' '} + {fileProps.expireTime.minute}분 / {fileProps.downloadCount}회 남았습니다. + diff --git a/src/pages/download/styled.ts b/src/pages/download/styled.ts index 54ad386..8293d46 100644 --- a/src/pages/download/styled.ts +++ b/src/pages/download/styled.ts @@ -13,3 +13,10 @@ export const DownloadPageButtonSection = styled.div` justify-content: center; margin-top: 3rem; `; + +export const DownloadFileStatusText = styled.div` + color: var(--color-text-primary); + font-size: 2rem; + font-weight: 600; + margin-top: 3rem; +`; From a93c74dcb2a35d06aea44657b6bdc8634675b64b Mon Sep 17 00:00:00 2001 From: anjaemin Date: Sat, 3 Dec 2022 19:00:52 +0900 Subject: [PATCH 8/8] feat: ExpireTime & DownloadCount add --- src/pages/main/index.tsx | 39 ++++++++++++++++++++++++++++++--------- src/utils/getDate.ts | 37 +++++++++++++++++++++++++++++++++++++ 2 files changed, 67 insertions(+), 9 deletions(-) diff --git a/src/pages/main/index.tsx b/src/pages/main/index.tsx index 95b8d87..99e7d57 100644 --- a/src/pages/main/index.tsx +++ b/src/pages/main/index.tsx @@ -11,10 +11,11 @@ import { UpLoadButton, FileFind, Progress, - DownLoadCountSlider, + DownloadCountSlider, + ExpireTime, } from '../../components'; import { actionCreators } from '../../state'; -import { getFileSize } from '../../utils'; +import { getFileSize, getTime } from '../../utils'; import * as S from './styled'; export const MainPage: React.FC = () => { @@ -24,11 +25,14 @@ export const MainPage: React.FC = () => { const [progressValue, setProgressValue] = useState(0); const [progressStateText, setProgressStateText] = useState('uploading'); - const [retentionPeriod, setRetentionPeriod] = useState(false); - const [downloadCount, setDownloadCount] = useState(false); + const [expireTimeBoolean, setExpireTimeBoolean] = useState(false); + const [downloadCountBoolean, setDownloadCountBoolean] = useState(false); const [passwordBoolean, setPasswordBoolean] = useState(false); + const [expireTime, setExpireTime] = useState(1); + const [downloadCount, setDownloadCount] = useState(100); const [password, setPassword] = useState(''); + const [fileProps, setFileProps] = useState({ filename: '', size: '', @@ -63,7 +67,10 @@ export const MainPage: React.FC = () => { data: formdata, headers: { 'Content-Type': 'multipart/form-data', + 'X-Download-Limit': downloadCountBoolean ? downloadCount : 100, + 'X-Time-Limit': expireTimeBoolean ? expireTime : 180, }, + withCredentials: true, onUploadProgress(progress) { setUploading(false); setProgressValue(Math.floor((progress.loaded / progress.total) * 100)); @@ -118,16 +125,17 @@ export const MainPage: React.FC = () => { { - setRetentionPeriod(!retentionPeriod); + setExpireTimeBoolean(!expireTimeBoolean); }} - isCheck={retentionPeriod} + isCheck={expireTimeBoolean} label={'유지기간'} /> { - setDownloadCount(!downloadCount); + setDownloadCountBoolean(!downloadCountBoolean); + setDownloadCount(1); }} - isCheck={downloadCount} + isCheck={downloadCountBoolean} label={'다운로드 횟수'} /> { label={'비밀번호'} /> - {downloadCount && } + {expireTimeBoolean && ( + + )} + {downloadCountBoolean && ( + + )} {passwordBoolean && ( { diff --git a/src/utils/getDate.ts b/src/utils/getDate.ts index 8bd3546..d5dbd03 100644 --- a/src/utils/getDate.ts +++ b/src/utils/getDate.ts @@ -1,4 +1,41 @@ +const today = new Date(); + export const getDate = (date: string) => { const NewDate = date.split('T')[0].split('-'); return { year: Number(NewDate[0]), month: Number(NewDate[1]), day: Number(NewDate[2]) }; }; + +export const getExpireTime = (date: string) => { + const expireTime = new Date(date); + const differenceTime = expireTime.getTime() - today.getTime(); + const differenceTimeDay = + differenceTime / (1000 * 60 * 60 * 24) <= 0 ? differenceTime / (1000 * 60 * 60 * 24) : 0; + let differenceTimeHour = differenceTime / (1000 * 60 * 60); + while (true) { + differenceTimeHour %= 24; + if (differenceTimeHour <= 24) { + break; + } + } + let differenceTimeMinute = differenceTime / (1000 * 60); + while (true) { + differenceTimeMinute %= 60; + if (differenceTimeMinute <= 60) { + break; + } + } + return { + day: Math.floor(differenceTimeDay), + hour: Math.floor(differenceTimeHour), + minute: Math.floor(differenceTimeMinute), + }; +}; + +export const getTime = (minute: number) => ({ + day: Math.floor(minute / 1440), + hour: + Math.floor(minute / 60) % Math.floor(minute % 1440) >= 0 + ? Math.floor(Math.floor(minute % 1440) / 60) + : Math.floor(minute / 60), + minute: minute % Math.floor(minute / 60) >= 0 ? Math.floor(minute % 60) : minute, +});