junh_eee(이준희)
7 months ago
7 changed files with 213 additions and 268 deletions
@ -1,13 +1,157 @@
|
||||
import { AccountFindUserId } from "../../../components/account/find/AccountFindUserId" |
||||
import { useDispatch, useSelector } from '@src/redux/store'; |
||||
import { AccountFindUserId } from '../../../components/account/find/AccountFindUserId'; |
||||
import { useEffect, useState } from 'react'; |
||||
|
||||
export const AccountFindUserIdContainer = props => { |
||||
import { |
||||
Modal, |
||||
ModalHeader, |
||||
ModalBody, |
||||
ModalFooter, |
||||
Button |
||||
} from '@component/ui'; |
||||
import { MODAL_BODY, MODAL_CRTFYHP, MODAL_HEADER } from '@src/configs/msgConst'; |
||||
import { |
||||
isConfirmCrtfyhp, |
||||
isSendCrtfyhp |
||||
} from '@src/redux/features/comn/crtfyhp/crtfyhpSlice'; |
||||
import { confirmCrtfyhp } from '@src/redux/features/account/register/registerThunk'; |
||||
import { findUserId } from '@src/redux/features/account/find/findThunk'; |
||||
|
||||
return( |
||||
export const AccountFindUserIdContainer = ({ |
||||
handlerClose, |
||||
handlerOpenModal |
||||
}) => { |
||||
const dispatch = useDispatch(); |
||||
|
||||
const [activeTab, setActiveTab] = useState('2'); |
||||
|
||||
const [confirmModal, setConfirmModal] = useState(false); |
||||
|
||||
const { userId } = useSelector(state => state.findState); |
||||
|
||||
const [crtfyNo, setCrtfyNo] = useState(''); |
||||
const [rq, setRq] = useState({ |
||||
memberName: '', |
||||
hpno: '' |
||||
}); |
||||
|
||||
// 휴대폰 번호 제외한 유효성 검사
|
||||
const handlerValidCheck = () => { |
||||
if (!rq.memberName) { |
||||
handlerOpenModal(MODAL_HEADER.crtfyhp, '이름을' + MODAL_BODY.valid); |
||||
return; |
||||
} |
||||
}; |
||||
|
||||
// 인증번호 인증
|
||||
const handlerConfirm = async () => { |
||||
if (!rq.hpno || rq.hpno === '') { |
||||
handlerOpenModal( |
||||
MODAL_HEADER.crtfyhp, |
||||
'휴대폰 번호를' + MODAL_BODY.valid |
||||
); |
||||
return; |
||||
} |
||||
|
||||
if (!rq.memberName) { |
||||
handlerOpenModal(MODAL_HEADER.crtfyhp, '이름을' + MODAL_BODY.valid); |
||||
return; |
||||
} |
||||
|
||||
if (!crtfyNo) { |
||||
handlerOpenModal(MODAL_HEADER.crtfyhp, MODAL_CRTFYHP.valid); |
||||
return; |
||||
} |
||||
|
||||
const { payload: data } = await dispatch( |
||||
confirmCrtfyhp({ hpno: rq.hpno, crtfyNo: crtfyNo }) |
||||
); |
||||
|
||||
if (!data.result) { |
||||
handlerOpenModal(MODAL_HEADER.crtfyhp, MODAL_CRTFYHP.failed); |
||||
return; |
||||
} else { |
||||
handlerOpenModal(MODAL_HEADER.crtfyhp, MODAL_CRTFYHP.confirm); |
||||
dispatch(isSendCrtfyhp(false)); |
||||
dispatch(isConfirmCrtfyhp(true)); |
||||
} |
||||
}; |
||||
|
||||
// onChange
|
||||
let memberName = ''; |
||||
let hpno = ''; |
||||
let crtfyhp = ''; |
||||
const handlerChange = e => { |
||||
const { name, value } = e.target; |
||||
|
||||
if (name == 'memberName') { |
||||
const regex = /^[ㄱ-ㅎ|ㅏ-ㅣ|가-힣|a-z|A-Z]{0,10}$/; |
||||
if (regex.test(value)) { |
||||
memberName = value; |
||||
setRq(prev => ({ |
||||
...prev, |
||||
memberName: memberName |
||||
})); |
||||
} |
||||
} else if (name == 'hpno') { |
||||
const regex = /^[0-9]{0,11}$/; |
||||
if (regex.test(value)) { |
||||
hpno = value; |
||||
setRq(prev => ({ |
||||
...prev, |
||||
hpno: hpno |
||||
})); |
||||
} |
||||
} else if (name == 'crtfyhpNo') { |
||||
const regex = /^[0-9]{0,6}$/; |
||||
if (regex.test(value)) { |
||||
crtfyhp = value; |
||||
setCrtfyNo(crtfyhp); |
||||
} |
||||
} |
||||
}; |
||||
|
||||
//모든 인증 완료 후 확인버튼
|
||||
const handlerFindId = () => { |
||||
dispatch(findUserId({ memberName: rq.memberName, hpno: rq.hpno })); |
||||
setConfirmModal(!confirmModal); |
||||
}; |
||||
|
||||
const toggle = tab => { |
||||
setActiveTab(tab); |
||||
}; |
||||
|
||||
return ( |
||||
<> |
||||
<AccountFindUserId |
||||
handlerClose={props.handlerClose} |
||||
rq={rq} |
||||
crtfyNo={crtfyNo} |
||||
handlerClose={handlerClose} |
||||
handlerChange={handlerChange} |
||||
handlerFindId={handlerFindId} |
||||
handlerConfirm={handlerConfirm} |
||||
handlerValidCheck={handlerValidCheck} |
||||
/> |
||||
<Modal |
||||
isOpen={confirmModal} |
||||
toggle={() => setConfirmModal(!confirmModal)} |
||||
modalClassName='modal-primary' |
||||
className='modal-dialog-centered' |
||||
> |
||||
<ModalHeader toggle={() => setConfirmModal(!confirmModal)}> |
||||
아이디 확인 |
||||
</ModalHeader> |
||||
<ModalBody> |
||||
회원님의 아이디는 |
||||
<br /> |
||||
<span className='user-search-id'>{userId}</span> 입니다. |
||||
</ModalBody> |
||||
<ModalFooter> |
||||
<Button color='primary' onClick={handlerClose}> |
||||
로그인 |
||||
</Button>{' '} |
||||
</ModalFooter> |
||||
</Modal> |
||||
</> |
||||
) |
||||
} |
||||
); |
||||
}; |
||||
|
||||
Loading…
Reference in new issue