Skip to content

Commit

Permalink
Signup (#12)
Browse files Browse the repository at this point in the history 
* <feat> : 회원가입 페이지 추가

* <feat> : 로고부분 클릭시 메인페이지로 이동 추가와 input 수정

* <feat> : id, email, phoneNumber 체크 기능 추가

* #10 <feat> : 회원가입 페이지 1차 완성

* #10 <feat> : 로그인, 회원가입 로직 완성

* #10 <fix> : 회원가입 버튼 이벤트 수정
  • Loading branch information
@benidene
benidene authored Aug 12, 2023
1 parent aa41ad3 commit d6a0685
Show file tree
Hide file tree
Showing 2 changed files with 64 additions and 58 deletions.
9 changes: 6 additions & 3 deletions src/pages/SignUp/SignUp.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,10 +13,11 @@ function SignUp() {
phoneNumber: '',
phoneNumberCheck: ''
};
const SIGNUP_POST_URL = `${process.env.REACT_APP_URL}/join`;

const SIGNUP_POST_URL = `${process.env.REACT_APP_URL}/member1/join`;
const msg = '모든 칸이 채워져야 합니다.';

const [inputs, onChange, onSubmit, clickCheckId, clickPhoneNumber, clickAuthPhoneNumber] =
const [inputs, onChange, onClick, clickCheckId, clickPhoneNumber, clickAuthPhoneNumber] =
useLoginLogic(
initialInputs,
SIGNUP_POST_URL,
Expand Down Expand Up @@ -113,7 +114,9 @@ function SignUp() {
<AuthButton onClick={clickAuthPhoneNumber}>확인</AuthButton>
</InputBoxDown>
</Container>
<LoginButton type='submit' onSubmit={onSubmit}>

<LoginButton type='submit' onClick={onClick}>

회원가입
</LoginButton>
</Wrapper>
Expand Down
113 changes: 58 additions & 55 deletions src/util/useLoginLogic.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,66 +7,69 @@ import { checkPassword, checkId, checkEmail, checkPhoneNumber } from './checkPas
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 [usableId, setUsableId] = useState(false);
// const [auth, setAuth] = useState(false);

const { setIsLoggedIn, setTokens } = useContext(userContext);

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 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 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 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 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 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 res = await usePost(url, inputs.phoneNumberCheck);
// if (res.status === 400) {
// alert('인증번호가 일치하지않습니다');
// setAuth(false);
// }
// if (res.ok) {
// alert('인증번호 확인되었습니다');
// setAuth(true);
// }
// };

const onSubmit = async (e) => {
const onClick = async (e) => {
e.preventDefault();

const resultId = checkId(inputs.userIdentifier);
if (!resultId) return;
if (
inputs[key1] === '' ||
inputs[key2] === '' ||
Expand All @@ -79,14 +82,14 @@ function useLoginLogic(initialInputs, url, alertMsg, key1, key2, key3, key4, key
alert(alertMsg);
return;
}
if (usableId === false) {
alert('아이디 중복체크 하세요');
return;
}
if (auth === false) {
alert('인증번호를 확인하세요');
return;
}
// if (usableId === false) {
// alert('아이디 중복체크 하세요');
// return;
// }
// if (auth === false) {
// alert('인증번호를 확인하세요');
// return;
// }
const resultId = checkId(inputs.userIdentifier);
if (!resultId) return;
const resultPassword = checkPassword(inputs.password);
Expand Down Expand Up @@ -121,5 +124,5 @@ function useLoginLogic(initialInputs, url, alertMsg, key1, key2, key3, key4, key

return [inputs, onChange, onSubmit, clickCheckId, clickPhoneNumber, clickAuthPhoneNumber];
}

// , clickCheckId, clickPhoneNumber, clickAuthPhoneNumber
export default useLoginLogic;

0 comments on commit d6a0685

Please sign in to comment.