diff --git a/package.json b/package.json index f540005..ba43964 100644 --- a/package.json +++ b/package.json @@ -30,7 +30,8 @@ "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject", - "deploy": "gh-pages -d build" + "deploy": "gh-pages -d build", + "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0" }, "eslintConfig": { "extends": [ diff --git a/src/pages/checkpw/index.tsx b/src/pages/checkpw/index.tsx index 2bad809..e7b63a3 100644 --- a/src/pages/checkpw/index.tsx +++ b/src/pages/checkpw/index.tsx @@ -6,6 +6,8 @@ import { useParams } from 'react-router-dom'; import { toast } from 'react-toastify'; import { bindActionCreators } from 'redux'; +import { ReactComponent as EyeIcon } from '../../assets/Eye.svg'; +import { ReactComponent as EyeHiddenIcon } from '../../assets/EyeHidden.svg'; import { FileBox, Button, SkeletonUI } from '../../components'; import { actionCreators } from '../../state'; import { getDate, getFileSize } from '../../utils'; @@ -14,13 +16,14 @@ import * as S from './styled'; export const CheckPasswordPage: React.FC = () => { const [password, setPassword] = useState(''); const [loading, setLoading] = useState(true); + const [passwordFilter, setPasswordFilter] = useState(true); const { checkfileid } = useParams<{ checkfileid: string }>(); const [fileProps, setFileProps] = useState({ filename: '', size: '', uploadDate: { year: 0, month: 0, day: 0 }, }); - // const { year, month, day } = getDate(checkPasswordFileProps.uploadDate); + const dispatch = useDispatch(); const { SetDownloadFileProps } = bindActionCreators(actionCreators, dispatch); @@ -33,67 +36,63 @@ export const CheckPasswordPage: React.FC = () => { position: toast.POSITION.BOTTOM_RIGHT, }); } else { - await axios({ - method: 'get', - url: `${process.env.REACT_APP_BACKEND_BASEURL}/checkpw/${checkfileid}?pw=${password}`, - }) - .then((res) => { - SetDownloadFileProps({ - isEncrypted: true, - token: res.data.token, - }); - navigate(`/download/${checkfileid}`); - toast.success('통과!', { - autoClose: 1000, - position: toast.POSITION.BOTTOM_RIGHT, - }); - }) - .catch((err) => { - console.log(err); - setPassword(''); - toast.error('비밀번호를 다시 확인해주세요...', { - autoClose: 1000, - position: toast.POSITION.BOTTOM_RIGHT, - }); + try { + const res = await axios.get( + `${process.env.REACT_APP_BACKEND_BASEURL}/checkpw/${checkfileid}?pw=${password}`, + ); + SetDownloadFileProps({ + isEncrypted: true, + token: res.data.token, + }); + navigate(`/download/${checkfileid}`); + toast.success('통과!', { + autoClose: 1000, + position: toast.POSITION.BOTTOM_RIGHT, }); + } catch (err) { + console.log(err); + setPassword(''); + toast.error('비밀번호를 다시 확인해주세요...', { + autoClose: 1000, + position: toast.POSITION.BOTTOM_RIGHT, + }); + } } }; useEffect(() => { const getFileProps = async () => { - await axios({ - method: 'get', - url: `${process.env.REACT_APP_BACKEND_BASEURL}/file/${checkfileid}`, - }) - .then((res) => { - setLoading(false); - setFileProps({ - filename: res.data.filename, - size: getFileSize(res.data.size), - uploadDate: getDate(res.data.uploadDate), - }); - }) - .catch((err) => { - console.log(err); - navigate('/'); - toast.error('error 문의해주세요...', { - autoClose: 1000, - position: toast.POSITION.BOTTOM_RIGHT, - }); + try { + const res = await axios.get(`${process.env.REACT_APP_BACKEND_BASEURL}/file/${checkfileid}`); + setLoading(false); + setFileProps({ + filename: res.data.filename, + size: getFileSize(res.data.size), + uploadDate: getDate(res.data.uploadDate), + }); + } catch (err) { + console.log(err); + navigate('/'); + toast.error('error 문의해주세요...', { + autoClose: 1000, + position: toast.POSITION.BOTTOM_RIGHT, }); + } }; getFileProps(); }, [checkfileid, navigate]); + return ( {!loading ? ( <> - 파일이름:{fileProps.filename} / 크기:{fileProps.size} / 업로드된 날짜:{' '} + 파일이름: {fileProps.filename} / 크기: {fileProps.size} / 업로드된 날짜:{' '} {fileProps.uploadDate.year}-{fileProps.uploadDate.month}-{fileProps.uploadDate.day} { if (e.key === 'Enter') { @@ -105,7 +104,20 @@ export const CheckPasswordPage: React.FC = () => { }} placeholder="비밀번호를 입력해주세요." /> - + setPasswordFilter(!passwordFilter)} + style={{ + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + width: '3.5rem', + height: '3.5rem', + marginLeft: '44rem', + backgroundColor: 'var(--color-background-black)', + }} + > + {passwordFilter ? : } +