junh_eee(이준희)
7 months ago
5 changed files with 251 additions and 287 deletions
@ -1,64 +0,0 @@
|
||||
import { sendCrtfyhp } from '@src/redux/features/account/register/registerThunk'; |
||||
import { useSelector } from '@src/redux/store'; |
||||
import { Button, Label, Row, Col, Input } from '@src/components/ui'; |
||||
import { useRef, useState } from 'react'; |
||||
import { CrtfyhpUtil } from '@src/utility/crtfyhpUtil'; |
||||
|
||||
export const ParentsContainer = () => { |
||||
const hookRef = useRef(); |
||||
const { isRunning, isCrtfyhp, counter } = useSelector( |
||||
state => state.crtfyhpState |
||||
); |
||||
|
||||
const [hpno, setHpno] = useState(''); |
||||
|
||||
const handlerChange = e => { |
||||
const { name, value } = e.target; |
||||
|
||||
if (name == 'hpno') { |
||||
const regex = /^[0-9]{0,11}$/; |
||||
if (regex.test(value)) { |
||||
setHpno(value); |
||||
} |
||||
} |
||||
}; |
||||
|
||||
return ( |
||||
<> |
||||
<Row className='input-inline-btn'> |
||||
<Col md='8'> |
||||
<Label className='form-label' for='hpno'> |
||||
휴대폰 번호 |
||||
</Label> |
||||
<Input |
||||
type='number' |
||||
name='hpno' |
||||
id='hpno' |
||||
bsSize='sm' |
||||
value={hpno} |
||||
onChange={handlerChange} |
||||
placeholder='01012345678' |
||||
/> |
||||
</Col> |
||||
<Col md='4' xs='12'> |
||||
<span className={!isRunning || isCrtfyhp ? 'time d-none' : 'time'}> |
||||
남은시간 {counter.min}:{counter.sec} |
||||
</span> |
||||
<Button |
||||
type='button' |
||||
color='secondary' |
||||
onClick={() => hookRef?.current?.handlerSendCrtfyhp({ hpno })} |
||||
> |
||||
<span className='d-sm-inline-block'>인증번호 발송</span> |
||||
</Button> |
||||
</Col> |
||||
</Row> |
||||
<CrtfyhpUtil |
||||
ref={hookRef} |
||||
sendCrtfyhp={sendCrtfyhp} |
||||
modalMessage='이미 가입된 어쩌구 입니다.' |
||||
type='1' |
||||
/> |
||||
</> |
||||
); |
||||
}; |
@ -0,0 +1,219 @@
|
||||
import * as yup from 'yup'; |
||||
import { isObjEmpty } from '@utils'; |
||||
import { useForm } from 'react-hook-form'; |
||||
import { yupResolver } from '@hookform/resolvers/yup'; |
||||
import { |
||||
confirmCrtfyhp, |
||||
sendCrtfyhp |
||||
} from '@src/redux/features/account/register/registerThunk'; |
||||
import { openModal } from '@src/redux/features/comn/message/messageSlice'; |
||||
import { MODAL_CRTFYHP, MODAL_BODY, MODAL_HEADER } from '@src/configs/msgConst'; |
||||
import { createRegister } from '@src/redux/features/account/register/registerThunk'; |
||||
import { |
||||
isSendCrtfyhp, |
||||
isConfirmCrtfyhp |
||||
} from '@src/redux/features/comn/crtfyhp/crtfyhpSlice'; |
||||
import { useRef } from 'react'; |
||||
import { useDispatch, useSelector } from '@src/redux/store'; |
||||
import { AccountRegisterForm } from '@src/components/account/register/AccountRegisterForm'; |
||||
|
||||
export const AccountRegisterFormContainer = ({ |
||||
stepper, |
||||
type, |
||||
movePage, |
||||
setMemberName |
||||
}) => { |
||||
const dispatch = useDispatch(); |
||||
|
||||
const { isCrtfyhp } = useSelector(state => state.crtfyhpState); |
||||
|
||||
// 약관동의 내용
|
||||
const { agreeTerms } = useSelector(state => state.registerState); |
||||
|
||||
// 단순 메시지 표출 모달
|
||||
const handlerOpenModal = (header, body) => { |
||||
dispatch( |
||||
openModal({ |
||||
header: header, |
||||
body: body |
||||
}) |
||||
); |
||||
}; |
||||
|
||||
// 회원가입 폼 유효성 검사
|
||||
const SignupSchema = yup.object().shape({ |
||||
userId: yup.string().trim().required('ID를 입력해 주세요.'), |
||||
// .matches(
|
||||
// /^[a-z]+[a-z0-9]{5,19}$/g,
|
||||
// '4자 이상, 20자 미만 영문자 또는 숫자로 입력해 주세요.'
|
||||
// ),
|
||||
userPswd: yup.string().required('비밀번호를 입력해 주세요.'), |
||||
brthdyDate: yup |
||||
.string() |
||||
.required('생년월일을 입력해 주세요.') |
||||
.matches( |
||||
/^(19[0-9][0-9]|20\d{2})(0[1-9]|1[0-2])(0[1-9]|[1-2][0-9]|3[0-1])$/, |
||||
'올바른 생년월일을 입력해 주세요.' |
||||
), |
||||
memberName: yup |
||||
.string() |
||||
.required('이름을 입력해 주세요.') |
||||
.min(3, '최소 2 자 이상 입력 부탁드립니다.') |
||||
.max(20, '최대 10 자 이하 입력 부탁드립니다.'), |
||||
email: yup.string().required('이메일을 입력해 주세요.'), |
||||
hpno: yup |
||||
.string() |
||||
.required('휴대폰번호를 입력해 주세요.') |
||||
.matches( |
||||
/^(01[0-1])([1-9][0-9]{3})([0-9]{4})$/, |
||||
'올바른 휴대폰번호를 입력해 주세요.' |
||||
), |
||||
// cntryCd: yup.string().required('국가를 선택해 주세요.'),
|
||||
clncd: yup.string().required('국가번호를 선택해 주세요.'), |
||||
userPswd: yup |
||||
.string() |
||||
.required('비밀번호를 입력해 주세요.') |
||||
.matches( |
||||
/^(?=.*[A-Za-z])(?=.*[0-9])(?=.*[@$!%*#?&])[A-Za-z0-9@$!%*#?&]{8,20}$/, |
||||
'8 자 이상, 20 자 미만 영문자/숫자/특수문자(@$!%*#?&) 조합하여 입력해 주세요.' |
||||
), |
||||
confirmUserPaswd: yup |
||||
.string() |
||||
.required('비밀번호 확인을 입력해 주세요.') |
||||
.oneOf([yup.ref('userPswd'), null], '비밀번호가 일치하지 않습니다.') |
||||
}); |
||||
|
||||
const { register, getValues, setValue, errors, handleSubmit } = useForm({ |
||||
defaultValues: { |
||||
userId: '', |
||||
userPswd: '', |
||||
confirmUserPaswd: '', |
||||
cntryCd: 'KOR', |
||||
genderCd: '', |
||||
memberName: '', |
||||
brthdyDate: '', |
||||
email: '', |
||||
hpno: '', |
||||
clncd: '+82', |
||||
crtfyNo: '', |
||||
company: '팔네트웍스', |
||||
trmnlId: 'SANDBOX-001' |
||||
}, |
||||
resolver: yupResolver(SignupSchema) |
||||
}); |
||||
|
||||
// 취소 헨들러
|
||||
const handlerCancel = async () => { |
||||
movePage('/account/login'); |
||||
}; |
||||
|
||||
// 회원가입 버튼 헨들러
|
||||
const onSubmit = async rq => { |
||||
if (isObjEmpty(errors)) { |
||||
if (!isCrtfyhp) { |
||||
handlerOpenModal('회원가입 실패', '휴대폰 인증을 진행해주세요.'); |
||||
return false; |
||||
} |
||||
|
||||
const { payload: data } = await dispatch( |
||||
createRegister({ ...rq, terms: agreeTerms }) |
||||
); |
||||
|
||||
if (data?.errCode === -1) { |
||||
handlerOpenModal( |
||||
'회원가입 실패', |
||||
'동일한 아이디가 존재합니다. 다른 아이디로 가입 신청해주세요.' |
||||
); |
||||
return; |
||||
} else if (data?.errCode === 1) { |
||||
stepper.next(); |
||||
} else { |
||||
handlerOpenModal('회원가입 실패', '회원 가입에 실패하였습니다.'); |
||||
return; |
||||
} |
||||
} |
||||
}; |
||||
|
||||
// 인증번호 인증 헨들러
|
||||
const handlerSmsConfirm = async () => { |
||||
const vData = getValues(); |
||||
|
||||
if (!vData.clncd || !vData.hpno) { |
||||
handlerOpenModal( |
||||
MODAL_HEADER.crtfyhp, |
||||
'휴대폰 번호를' + MODAL_BODY.valid |
||||
); |
||||
|
||||
return false; |
||||
} |
||||
if (!vData.crtfyNo) { |
||||
handlerOpenModal(MODAL_HEADER.crtfyhp, MODAL_CRTFYHP.valid); |
||||
return false; |
||||
} |
||||
|
||||
const { payload: data } = await dispatch( |
||||
confirmCrtfyhp({ hpno: vData.hpno, crtfyNo: vData.crtfyNo }) |
||||
); |
||||
if (!data.result) { |
||||
handlerOpenModal(MODAL_HEADER.crtfyhp, MODAL_CRTFYHP.failed); |
||||
dispatch(isConfirmCrtfyhp(false)); |
||||
return; |
||||
} else { |
||||
handlerOpenModal(MODAL_HEADER.crtfyhp, MODAL_CRTFYHP.confirm); |
||||
dispatch(isSendCrtfyhp(false)); |
||||
dispatch(isConfirmCrtfyhp(true)); |
||||
return; |
||||
} |
||||
}; |
||||
|
||||
let hpno = ''; |
||||
let brthdyDate = ''; |
||||
let trmnlId = ''; |
||||
|
||||
// 회원가입 폼 변경 헨들러
|
||||
const handlerChange = e => { |
||||
const { name, value } = e.target; |
||||
|
||||
if (name === 'company') { |
||||
trmnlId = value; |
||||
setValue('trmnlId', trmnlId); |
||||
} |
||||
|
||||
if (name === 'memberName') { |
||||
setMemberName(value); |
||||
} |
||||
|
||||
if (name === 'brthdyDate') { |
||||
const regex = /^[0-9\b]{0,8}$/; |
||||
|
||||
if (regex.test(value)) { |
||||
brthdyDate = value; |
||||
// setValue(name, value);
|
||||
} else { |
||||
setValue(name, brthdyDate); |
||||
} |
||||
} else if (name === 'hpno') { |
||||
const regex = /^[0-9\b]{0,11}$/; |
||||
|
||||
if (regex.test(value)) { |
||||
hpno = value; |
||||
// setValue(name, value);
|
||||
} else { |
||||
setValue(name, hpno); |
||||
} |
||||
} |
||||
}; |
||||
|
||||
return ( |
||||
<AccountRegisterForm |
||||
errors={errors} |
||||
register={register} |
||||
getValues={getValues} |
||||
onSubmit={onSubmit} |
||||
handleSubmit={handleSubmit} |
||||
handlerCancel={handlerCancel} |
||||
handlerChange={handlerChange} |
||||
handlerSmsConfirm={handlerSmsConfirm} |
||||
/> |
||||
); |
||||
}; |
Loading…
Reference in new issue