From a636095c82e678ead662c3c87679f2b2227c1ba8 Mon Sep 17 00:00:00 2001 From: benidene Date: Thu, 24 Aug 2023 19:11:24 +0900 Subject: [PATCH] =?UTF-8?q?#10=20=20:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8?= =?UTF-8?q?=20=ED=9A=8C=EC=9B=90=EA=B0=80=EC=9E=85=20=EB=A1=9C=EC=A7=81=20?= =?UTF-8?q?=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/util/useLoginLogic.js | 92 +++------------------------ src/util/useSignupLogic.js | 125 +++++++++++++++++++++++++++++++++++++ 2 files changed, 134 insertions(+), 83 deletions(-) create mode 100644 src/util/useSignupLogic.js diff --git a/src/util/useLoginLogic.js b/src/util/useLoginLogic.js index c2aa1cd..e5f4225 100644 --- a/src/util/useLoginLogic.js +++ b/src/util/useLoginLogic.js @@ -2,118 +2,44 @@ import { useState, useContext } from 'react'; import { useNavigate } from 'react-router-dom'; import { userContext } from '../App'; import { usePost } from './api'; -import { checkPassword, checkId, checkEmail, checkPhoneNumber } from './checkPassword'; +import { checkId, checkPassword } from './checkPassword'; -function useLoginLogic(initialInputs, url, alertMsg, key1, key2, key3, key4, key5, key6, key7) { +function useLoginLogic(initialInputs, url, alertMsg, key1, key2) { const navigate = useNavigate(); const [inputs, setInputs] = useState(initialInputs); - // const [usableId, setUsableId] = useState(false); - // const [auth, setAuth] = useState(false); - const { setIsLoggedIn, setTokens } = useContext(userContext); + const { setIsLoggedIn, setTokens } = useContext(userContext); // 토큰 로그인 문제시 setTokens 삭제 const onChange = (e) => { const { name, value } = e.target; setInputs({ ...inputs, [name]: value }); }; - // const clickCheckId = async (e) => { - // e.preventDefault(); - // const resultId = checkId(inputs.userIdentifier); - // if (!resultId) return; - - // const res = await usePost(url, inputs.userIdentifier); - // if (res.status === 400) { - // alert('이미 사용중인 아이디입니다'); - // setUsableId(false); - // } - // if (res.ok) { - // alert('사용 가능한 아이디입니다'); - // setUsableId(true); - // } - // }; - - // const clickPhoneNumber = async (e) => { - // e.preventDefault(); - // const resultPhoneNumber = checkPhoneNumber(inputs.phoneNumber); - // if (!resultPhoneNumber) return; - - // const res = await usePost(url, inputs.phoneNumber); - // if (res.status === 400) { - // alert('인증번호가 발송되지 않았습니다'); - // } - // if (res.ok) { - // alert('인증번호 발송되었습니다'); - // } - // }; - - // const clickAuthPhoneNumber = async (e) => { - // e.preventDefault(); - // if (inputs.phoneNumberCheck === '') { - // alert('인증번호를 입력하시오'); - // return; - // } - - // const res = await usePost(url, inputs.phoneNumberCheck); - // if (res.status === 400) { - // alert('인증번호가 일치하지않습니다'); - // setAuth(false); - // } - // if (res.ok) { - // alert('인증번호 확인되었습니다'); - // setAuth(true); - // } - // }; - const onClick = async (e) => { e.preventDefault(); - if ( - inputs[key1] === '' || - inputs[key2] === '' || - inputs[key3] === '' || - inputs[key4] === '' || - inputs[key5] === '' || - inputs[key6] == '' || - inputs[key7] == '' - ) { + if (inputs[key1] === '' || inputs[key2] === '') { alert(alertMsg); return; } - // if (usableId === false) { - // alert('아이디 중복체크 하세요'); - // return; - // } - // if (auth === false) { - // alert('인증번호를 확인하세요'); - // return; - // } const resultId = checkId(inputs.userIdentifier); if (!resultId) return; const resultPassword = checkPassword(inputs.password); if (!resultPassword) return; - const resultEmail = checkEmail(inputs.email); - if (!resultEmail) return; - const resultPhoneNumber = checkPhoneNumber(inputs.phoneNumber); - if (!resultPhoneNumber) return; - - const isSame = inputs.password === inputs.passwordCheck; - if (!isSame) { - alert('비밀번호가 다릅니다'); - return; - } const res = await usePost(url, inputs); - const accessToken = res.headers.get('Authorization'); - const refreshToken = res.headers.get('Refresh'); + const accessToken = res.headers.get('Authorization'); // 토큰 로그인 문제시 주석 처리 + const refreshToken = res.headers.get('Refresh'); // 토큰 로그인 문제시 주석 처리 if (!res) { // 에러 처리 로직 + console.log('login failed'); return; } if (res.ok) { setTokens({ + // 토큰 로그인 문제시 주석 처리 accessToken, refreshToken - }); + }); // 토큰 로그인 문제시 주석 처리 setIsLoggedIn(true); navigate('/'); } diff --git a/src/util/useSignupLogic.js b/src/util/useSignupLogic.js new file mode 100644 index 0000000..50d5e7c --- /dev/null +++ b/src/util/useSignupLogic.js @@ -0,0 +1,125 @@ +import { useState, useContext } from 'react'; +import { useNavigate } from 'react-router-dom'; +import { userContext } from '../App'; +import { usePost } from './api'; +import { checkId, checkPassword, checkEmail, checkPhoneNumber } from './checkPassword'; + +function useLoginLogic(initialInputs, url, alertMsg, key1, key2, key3, key4, key5, key6, key7) { + const navigate = useNavigate(); + const [inputs, setInputs] = useState(initialInputs); + // const [usableId, setUsableId] = useState(false); + // const [auth, setAuth] = useState(false); + const { setIsLoggedIn, setTokens } = useContext(userContext); // 토큰 회원가입 문제시 setTokens 삭제 + + const onChange = (e) => { + const { name, value } = e.target; + setInputs({ ...inputs, [name]: value }); + }; + + // const clickCheckId = async (e) => { + // e.preventDefault(); + // const resultId = checkId(inputs.userIdentifier); + // if (!resultId) return; + + // const res = await usePost(url, inputs.userIdentifier); + // if (res.status === 400) { + // alert('이미 사용중인 아이디입니다'); + // setUsableId(false); + // } + // if (res.ok) { + // alert('사용 가능한 아이디입니다'); + // setUsableId(true); + // } + // }; + + // const clickPhoneNumber = async (e) => { + // e.preventDefault(); + // const resultPhoneNumber = checkPhoneNumber(inputs.phoneNumber); + // if (!resultPhoneNumber) return; + + // const res = await usePost(url, inputs.phoneNumber); + // if (res.status === 400) { + // alert('인증번호가 발송되지 않았습니다'); + // } + // if (res.ok) { + // alert('인증번호 발송되었습니다'); + // } + // }; + + // const clickAuthPhoneNumber = async (e) => { + // e.preventDefault(); + // if (inputs.phoneNumberCheck === '') { + // alert('인증번호를 입력하시오'); + // return; + // } + + // const res = await usePost(url, inputs.phoneNumberCheck); + // if (res.status === 400) { + // alert('인증번호가 일치하지않습니다'); + // setAuth(false); + // } + // if (res.ok) { + // alert('인증번호 확인되었습니다'); + // setAuth(true); + // } + // }; + + const onClick = async (e) => { + e.preventDefault(); + + if ( + inputs[key1] === '' || + inputs[key2] === '' || + inputs[key3] === '' || + inputs[key4] === '' || + inputs[key5] === '' || + inputs[key6] == '' || + inputs[key7] == '' + ) { + alert(alertMsg); + return; + } + // if (usableId === false) { + // alert('아이디 중복체크 하세요'); + // return; + // } + // if (auth === false) { + // alert('인증번호를 확인하세요'); + // return; + // } + const resultId = checkId(inputs.userIdentifier); + if (!resultId) return; + const resultPassword = checkPassword(inputs.password); + if (!resultPassword) return; + const resultEmail = checkEmail(inputs.email); + if (!resultEmail) return; + const resultPhoneNumber = checkPhoneNumber(inputs.phoneNumber); + if (!resultPhoneNumber) return; + + const isSame = inputs.password === inputs.passwordCheck; + if (!isSame) { + alert('비밀번호가 다릅니다'); + return; + } + + const res = await usePost(url, inputs); + const accessToken = res.headers.get('Authorization'); // 토큰 회원가입 문제시 주석 처리 + const refreshToken = res.headers.get('Refresh'); // 토큰 회원가입 문제시 주석 처리 + if (!res) { + // 에러 처리 로직 + return; + } + if (res.ok) { + // 토큰 회원가입 문제시 setTokens 주석 처리 (117줄까지) + setTokens({ + accessToken, + refreshToken + }); + setIsLoggedIn(true); + navigate('/'); + } + }; + + return [inputs, onChange, onClick]; +} +export default useLoginLogic;