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