import React, { useCallback, useEffect, useState } from 'react';
import { useDispatch } from 'react-redux';
import Head from 'next/head';
import Router from 'next/router';
import useInput from '../hooks/useInput';
import { Wrapper01, Wrapper02, Box, Ptag, CheckBoxRapper } from '../style/signupSt';
import AppLayout from '../components/AppLayout';
import { SIGNUP_REQUEST } from '../reducers/user';
const Signup = () => {
const dispatch = useDispatch();
// const {} = useSelector((state) => state.user);
const [checkedInputs, setCheckedInputs] = useState([]);
const [nextSignupState, setNextSignupState] = useState(false);
const [nickname, onChangeNickname] = useInput('');
const [email, onChangeEmail] = useInput('');
const [password, onChangePassword] = useInput('');
const [passwordCheck, setPasswordCheck] = useState('');
const [passwordError, setPasswordError] = useState(false);
console.log(checkedInputs);
// 약관동의 절차
const allCheckClick = useCallback((checked) => {
if (checked) {
setCheckedInputs(['ageCheck', 'usingListCheck', 'personalInfoCheck', 'marketingInfoCheck']);
} else {
setCheckedInputs([]);
}
}, []);
const onCheckHandler = useCallback((checked, id) => {
if (checked) {
setCheckedInputs([...checkedInputs, id]);
console.log('체크 반영 완료');
} else {
setCheckedInputs(checkedInputs.filter((el) => el !== id));
console.log('체크 해제 반영 완료');
}
});
const onClickAgree = () => {
if (
checkedInputs.includes('ageCheck') &&
checkedInputs.includes('usingListCheck') &&
checkedInputs.includes('personalInfoCheck')
) {
setNextSignupState(true);
} else {
alert('[필수]약관을 모두 동의 해주셔야 가입절차가 진행됩니다.');
}
};
// 회원가입 정보 입력 절차
const onChangePasswordCheck = useCallback(
(e) => {
setPasswordCheck(e.target.value);
setPasswordError(e.target.value !== password);
},
[password],
);
const onSubmit = useCallback(
(e) => {
e.preventDefault();
console.log(password, passwordCheck);
if (password !== passwordCheck) {
return setPasswordError(true);
}
console.log('server로 보낼 정보: ', email, nickname, password);
dispatch({
type: SIGNUP_REQUEST,
data: { email, nickname, password, passwordCheck },
});
setTimeout(() => {
Router.push('/');
}, 1000);
},
[email, nickname, password, passwordCheck],
);
return (
// 하단의 html
);
};
export default Signup;1. 회원가입 약관 동의 절차
약관의 필수 동의가 하나라도 동의가 되지 않았다면 [필수]약관 동의 알람이 뜬다.
또한 모두 동의를 클릭 시 전체가 체크가 되고 해당 동의된 정보는 dispatch를 통해 서버로 보낼 예정이다.
현재 서버와 데이터가 없으니 console로 보낼 정보가 찍히는지 확인하고 넘어간다.
2. 회원가입 정보 입력
약관의 동의가 모두 이루어지면(nextSignupState: true) 회원가입 정보 입력 페이지로 상태가 변한다.
custom hook 활용 useInput을 통해 email, nickname, password 상태를 바꿔주고 입력된 정보를 onSubmit 할 때
SIGNUP_REQUEST를 dispatch하여 서버에 정보를 보내준다. 일단 console에 보낼 정보가 찍힌다면 넘어간다.
3. 회원가입 정보 입력 패스워드 체크
비밀번호가 일치하지 않으면 경고 문구를 띄워주며 가입하기 절차가 진행되지 않게 한다. 일치하면 data와 함께 요청을 보낸다.
<AppLayout>
<>
<Head>
<title>e도서관 | 회원가입</title>
</Head>
{!nextSignupState ? (
<Box>
<Wrapper01>
<div>
<h1>회원가입</h1>
<h2>환영합니다! e도서관 서비스 이용약관에 동의 해주세요</h2>
<label>
<input
type="checkbox"
id="allCheck"
onChange={(e) => allCheckClick(e.currentTarget.checked)}
checked={checkedInputs.length >= 4 ? true : false}
/>
<p>모두 동의합니다.</p>
</label>
<div>
<CheckBoxRapper>
<div>
<label>
<input
type="checkbox"
id="ageCheck"
onChange={(e) => {
onCheckHandler(e.currentTarget.checked, 'ageCheck');
}}
checked={checkedInputs.includes('ageCheck') ? true : false}
/>
<p>[필수] 만 14세 이상입니다.</p>
</label>
</div>
<div>
<label>
<input
type="checkbox"
id="usingListCheck"
onChange={(e) => {
onCheckHandler(e.currentTarget.checked, 'usingListCheck');
}}
checked={checkedInputs.includes('usingListCheck') ? true : false}
/>
<p>[필수] e도서관 서비스 이용약관 동의</p>
</label>
</div>
<div>
<label>
<input
type="checkbox"
id="personalInfoCheck"
onChange={(e) => {
onCheckHandler(e.currentTarget.checked, 'personalInfoCheck');
}}
checked={checkedInputs.includes('personalInfoCheck') ? true : false}
/>
<p>[필수] 개인정보 수집 및 이용 동의</p>
</label>
</div>
<div>
<label>
<input
type="checkbox"
id="marketingInfoCheck"
onChange={(e) => {
onCheckHandler(e.currentTarget.checked, 'marketingInfoCheck');
}}
checked={checkedInputs.includes('marketingInfoCheck') ? true : false}
/>
<p>[선택] 마케팅 정보 수신에 대한 동의</p>
</label>
</div>
</CheckBoxRapper>
</div>
<Ptag>
<p>만 14세 이상 회원 가입 가능합니다.</p>
</Ptag>
<button onClick={onClickAgree}>
<span>동의하고 진행하기</span>
</button>
</div>
</Wrapper01>
</Box>
) : (
<Box>
<Wrapper02>
<form onSubmit={onSubmit}>
<h1>회원가입</h1>
<h2>환영합니다! e도서관 서비스 이용약관에 동의 해주세요</h2>
<div>
<label htmlFor="user-nickname">닉네임</label>
<br />
<input type="nickname" name="user-nickname" value={nickname} required onChange={onChangeNickname} />
</div>
<div>
<label htmlFor="user-email">이메일</label>
<br />
<input type="email" name="user-email" value={email} required onChange={onChangeEmail} />
</div>
<div>
<label htmlFor="user-password">비밀번호</label>
<br />
<input type="password" name="user-password" value={password} required onChange={onChangePassword} />
</div>
<div>
<label htmlFor="user-password-check">비밀번호 확인</label>
<br />
<input
type="password"
name="user-password-check"
value={passwordCheck}
required
onChange={onChangePasswordCheck}
/>
{passwordError && <p>비밀번호가 일치하지 않습니다.</p>}
<div>
<button type="submit" htmltype="submit">
가입하기
</button>
</div>
</div>
</form>
</Wrapper02>
</Box>
)}
</>
</AppLayout>nextSignupState의 true && false 여하에 따라 redering 해줄 화면을 달리해준다. (삼항연산자 활용)
component를 나누어 import해준 뒤 간략하게 할 수 있지만, 그냥 내가 원하는데로 한번에 그려 넣었다.
또한 해당 페이지는 AppLayout으로 감싸줬기 때문에 공통의 페이지 부분안에 비춰질 것이다.
'e도서관' 카테고리의 다른 글
| [dotenv] 보안을 위한 비밀 key 만들기 (0) | 2022.01.17 |
|---|---|
| Dummy Data로 로그인하기 (0) | 2022.01.14 |