|
|
@ -1,37 +1,52 @@ |
|
|
|
import * as yup from 'yup'; |
|
|
|
import { useState, useEffect, useMemo } from 'react'; |
|
|
|
import classnames from 'classnames'; |
|
|
|
|
|
|
|
import { yupResolver } from '@hookform/resolvers/yup'; |
|
|
|
|
|
|
|
import { useState, useEffect, useMemo } from 'react' |
|
|
|
|
|
|
|
import { useForm } from 'react-hook-form'; |
|
|
|
|
|
|
|
import { useDispatch, useSelector } from 'react-redux'; |
|
|
|
import { useDispatch, useSelector } from 'react-redux'; |
|
|
|
|
|
|
|
|
|
|
|
import { Form, InputGroup, InputGroupAddon, InputGroupText, Card, CardBody, Row, Col, Nav, NavItem, NavLink, TabContent, TabPane, Alert, FormGroup, Input, Label, Button, |
|
|
|
import { |
|
|
|
Modal, ModalHeader, ModalBody, ModalFooter, FormFeedback } from 'reactstrap' |
|
|
|
Form, |
|
|
|
import { User, Info, CreditCard, Lock, Check, X } from 'react-feather' |
|
|
|
InputGroup, |
|
|
|
|
|
|
|
InputGroupAddon, |
|
|
|
|
|
|
|
InputGroupText, |
|
|
|
|
|
|
|
Col, |
|
|
|
|
|
|
|
TabPane, |
|
|
|
|
|
|
|
FormGroup, |
|
|
|
|
|
|
|
Input, |
|
|
|
|
|
|
|
Button, |
|
|
|
|
|
|
|
Modal, |
|
|
|
|
|
|
|
ModalHeader, |
|
|
|
|
|
|
|
ModalBody, |
|
|
|
|
|
|
|
ModalFooter, |
|
|
|
|
|
|
|
FormFeedback |
|
|
|
|
|
|
|
} from 'reactstrap'; |
|
|
|
|
|
|
|
import { User } from 'react-feather'; |
|
|
|
|
|
|
|
|
|
|
|
import '../../../assets/css/custom.css'; |
|
|
|
import '../../../assets/css/custom.css'; |
|
|
|
import { findUserIdAction, sendForIdAction } from '../../../modules/account/find/actions/findAction'; |
|
|
|
import { |
|
|
|
|
|
|
|
findUserIdAction, |
|
|
|
|
|
|
|
sendForIdAction |
|
|
|
|
|
|
|
} from '../../../modules/account/find/actions/findAction'; |
|
|
|
import { accountApi } from '../../../modules/account/register/apis/accountApi'; |
|
|
|
import { accountApi } from '../../../modules/account/register/apis/accountApi'; |
|
|
|
import { findAPI } from '../../../modules/account/find/apis/findApi'; |
|
|
|
import { findAPI } from '../../../modules/account/find/apis/findApi'; |
|
|
|
|
|
|
|
|
|
|
|
export const AccountFindUserId = props => { |
|
|
|
export const AccountFindUserId = props => { |
|
|
|
const dispatch = useDispatch(); |
|
|
|
const dispatch = useDispatch(); |
|
|
|
const [activeTab, setActiveTab] = useState('2') |
|
|
|
const [activeTab, setActiveTab] = useState('2'); |
|
|
|
|
|
|
|
|
|
|
|
// ** Function to toggle tabs
|
|
|
|
// ** Function to toggle tabs
|
|
|
|
const toggle = tab => setActiveTab(tab) |
|
|
|
const toggle = tab => setActiveTab(tab); |
|
|
|
|
|
|
|
|
|
|
|
//modal
|
|
|
|
//modal
|
|
|
|
const [confirmModal, setConfirmModal] = useState(false) |
|
|
|
const [confirmModal, setConfirmModal] = useState(false); |
|
|
|
const [modal, setModal] = useState({ |
|
|
|
const [modal, setModal] = useState({ |
|
|
|
isOpen: false, |
|
|
|
isOpen: false, |
|
|
|
title: '', |
|
|
|
title: '', |
|
|
|
desc: '', |
|
|
|
desc: '', |
|
|
|
color: '' |
|
|
|
color: '' |
|
|
|
}) |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
//state값
|
|
|
|
//state값
|
|
|
|
const { idResult, userId, pwResult, udResult } = useSelector(state => state.findState); |
|
|
|
const { idResult, userId, pwResult, udResult } = useSelector( |
|
|
|
|
|
|
|
state => state.findState |
|
|
|
|
|
|
|
); |
|
|
|
|
|
|
|
|
|
|
|
//param으로 넘기기 위한 값
|
|
|
|
//param으로 넘기기 위한 값
|
|
|
|
const [inputName, setInputName] = useState(''); |
|
|
|
const [inputName, setInputName] = useState(''); |
|
|
@ -48,7 +63,9 @@ export const AccountFindUserId = props => { |
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
useEffect(() => { |
|
|
|
if (isRunning) clearInterval(timer); |
|
|
|
if (isRunning) clearInterval(timer); |
|
|
|
return () => { clearInterval(timer); } |
|
|
|
return () => { |
|
|
|
|
|
|
|
clearInterval(timer); |
|
|
|
|
|
|
|
}; |
|
|
|
}, []); |
|
|
|
}, []); |
|
|
|
|
|
|
|
|
|
|
|
const handlerSend = async () => { |
|
|
|
const handlerSend = async () => { |
|
|
@ -58,7 +75,7 @@ export const AccountFindUserId = props => { |
|
|
|
title: '인증번호 발송', |
|
|
|
title: '인증번호 발송', |
|
|
|
desc: '이름을 입력해 주세요.', |
|
|
|
desc: '이름을 입력해 주세요.', |
|
|
|
color: 'modal-danger' |
|
|
|
color: 'modal-danger' |
|
|
|
}) |
|
|
|
}); |
|
|
|
return; |
|
|
|
return; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
@ -68,7 +85,7 @@ export const AccountFindUserId = props => { |
|
|
|
title: '인증번호 발송', |
|
|
|
title: '인증번호 발송', |
|
|
|
desc: '휴대폰 번호를 입력해 주세요.', |
|
|
|
desc: '휴대폰 번호를 입력해 주세요.', |
|
|
|
color: 'modal-danger' |
|
|
|
color: 'modal-danger' |
|
|
|
}) |
|
|
|
}); |
|
|
|
return; |
|
|
|
return; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
@ -78,7 +95,7 @@ export const AccountFindUserId = props => { |
|
|
|
title: '인증번호 발송', |
|
|
|
title: '인증번호 발송', |
|
|
|
desc: '인증번호가 발송은 3회까지만 가능합니다.', |
|
|
|
desc: '인증번호가 발송은 3회까지만 가능합니다.', |
|
|
|
color: 'modal-danger' |
|
|
|
color: 'modal-danger' |
|
|
|
}) |
|
|
|
}); |
|
|
|
return; |
|
|
|
return; |
|
|
|
} |
|
|
|
} |
|
|
|
if (inputHpno.length < 11) { |
|
|
|
if (inputHpno.length < 11) { |
|
|
@ -87,28 +104,31 @@ export const AccountFindUserId = props => { |
|
|
|
title: '인증번호 발송', |
|
|
|
title: '인증번호 발송', |
|
|
|
desc: '올바른 번호를 입력해 주세요.', |
|
|
|
desc: '올바른 번호를 입력해 주세요.', |
|
|
|
color: 'modal-danger' |
|
|
|
color: 'modal-danger' |
|
|
|
}) |
|
|
|
}); |
|
|
|
return; |
|
|
|
return; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
const res = await findAPI.sendForId({memberName: inputName, hpno: inputHpno}); |
|
|
|
const res = await findAPI.sendForId({ |
|
|
|
|
|
|
|
memberName: inputName, |
|
|
|
|
|
|
|
hpno: inputHpno |
|
|
|
|
|
|
|
}); |
|
|
|
if (res?.data.code === -1) { |
|
|
|
if (res?.data.code === -1) { |
|
|
|
setModal({ |
|
|
|
setModal({ |
|
|
|
isOpen: true, |
|
|
|
isOpen: true, |
|
|
|
title: '인증번호 발송', |
|
|
|
title: '인증번호 발송', |
|
|
|
desc: '가입되지 않은 회원정보입니다. 다시 확인해 주세요.', |
|
|
|
desc: '가입되지 않은 회원정보입니다. 다시 확인해 주세요.', |
|
|
|
color: 'modal-danger' |
|
|
|
color: 'modal-danger' |
|
|
|
}) |
|
|
|
}); |
|
|
|
} else if (res?.data.code === 0) { |
|
|
|
} else if (res?.data.code === 0) { |
|
|
|
setModal({ |
|
|
|
setModal({ |
|
|
|
isOpen: true, |
|
|
|
isOpen: true, |
|
|
|
title: '인증번호 발송', |
|
|
|
title: '인증번호 발송', |
|
|
|
desc: '인증번호가 발송되었습니다.', |
|
|
|
desc: '인증번호가 발송되었습니다.', |
|
|
|
color: 'modal-primary' |
|
|
|
color: 'modal-primary' |
|
|
|
}) |
|
|
|
}); |
|
|
|
timeStart(); |
|
|
|
timeStart(); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
const timeStart = () => { |
|
|
|
const timeStart = () => { |
|
|
|
if (isRunning) { |
|
|
|
if (isRunning) { |
|
|
@ -120,7 +140,7 @@ export const AccountFindUserId = props => { |
|
|
|
|
|
|
|
|
|
|
|
setSendCount(sendCount + 1); |
|
|
|
setSendCount(sendCount + 1); |
|
|
|
timerStart(180); |
|
|
|
timerStart(180); |
|
|
|
} |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
const timerStart = count => { |
|
|
|
const timerStart = count => { |
|
|
|
let minutes, seconds; |
|
|
|
let minutes, seconds; |
|
|
@ -145,7 +165,7 @@ export const AccountFindUserId = props => { |
|
|
|
title: '인증번호 만료', |
|
|
|
title: '인증번호 만료', |
|
|
|
desc: '인증번호가 만료되었습니다.', |
|
|
|
desc: '인증번호가 만료되었습니다.', |
|
|
|
color: 'modal-danger' |
|
|
|
color: 'modal-danger' |
|
|
|
}) |
|
|
|
}); |
|
|
|
} |
|
|
|
} |
|
|
|
}, 1000); |
|
|
|
}, 1000); |
|
|
|
|
|
|
|
|
|
|
@ -153,8 +173,8 @@ export const AccountFindUserId = props => { |
|
|
|
|
|
|
|
|
|
|
|
return () => { |
|
|
|
return () => { |
|
|
|
clearInterval(timer); |
|
|
|
clearInterval(timer); |
|
|
|
} |
|
|
|
}; |
|
|
|
} |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
const handlerConfirm = async () => { |
|
|
|
const handlerConfirm = async () => { |
|
|
|
if (!inputHpno) { |
|
|
|
if (!inputHpno) { |
|
|
@ -163,7 +183,7 @@ export const AccountFindUserId = props => { |
|
|
|
title: '인증번호 인증', |
|
|
|
title: '인증번호 인증', |
|
|
|
desc: '휴대폰 번호를 입력해 주세요.', |
|
|
|
desc: '휴대폰 번호를 입력해 주세요.', |
|
|
|
color: 'modal-danger' |
|
|
|
color: 'modal-danger' |
|
|
|
}) |
|
|
|
}); |
|
|
|
return; |
|
|
|
return; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
@ -173,7 +193,7 @@ export const AccountFindUserId = props => { |
|
|
|
title: '인증번호 인증', |
|
|
|
title: '인증번호 인증', |
|
|
|
desc: '이름을 입력해 주세요.', |
|
|
|
desc: '이름을 입력해 주세요.', |
|
|
|
color: 'modal-danger' |
|
|
|
color: 'modal-danger' |
|
|
|
}) |
|
|
|
}); |
|
|
|
return; |
|
|
|
return; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
@ -183,7 +203,7 @@ export const AccountFindUserId = props => { |
|
|
|
title: '인증번호 인증', |
|
|
|
title: '인증번호 인증', |
|
|
|
desc: '인증번호를 입력해 주세요.', |
|
|
|
desc: '인증번호를 입력해 주세요.', |
|
|
|
color: 'modal-danger' |
|
|
|
color: 'modal-danger' |
|
|
|
}) |
|
|
|
}); |
|
|
|
return; |
|
|
|
return; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
@ -206,7 +226,7 @@ export const AccountFindUserId = props => { |
|
|
|
setIsCrtfy(true); |
|
|
|
setIsCrtfy(true); |
|
|
|
setIsRunning(false); |
|
|
|
setIsRunning(false); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
let memberName = ''; |
|
|
|
let memberName = ''; |
|
|
|
let hpno = ''; |
|
|
|
let hpno = ''; |
|
|
@ -218,29 +238,30 @@ export const AccountFindUserId = props => { |
|
|
|
const regex = /^[ㄱ-ㅎ|ㅏ-ㅣ|가-힣|a-z]{0,10}$/; |
|
|
|
const regex = /^[ㄱ-ㅎ|ㅏ-ㅣ|가-힣|a-z]{0,10}$/; |
|
|
|
if (regex.test(value)) { |
|
|
|
if (regex.test(value)) { |
|
|
|
memberName = value; |
|
|
|
memberName = value; |
|
|
|
setInputName(memberName) |
|
|
|
setInputName(memberName); |
|
|
|
} |
|
|
|
} |
|
|
|
} else if (name == 'hpno') { |
|
|
|
} else if (name == 'hpno') { |
|
|
|
const regex = /^[0-9]{0,11}$/; |
|
|
|
const regex = /^[0-9]{0,11}$/; |
|
|
|
if (regex.test(value)) { |
|
|
|
if (regex.test(value)) { |
|
|
|
hpno = value; |
|
|
|
hpno = value; |
|
|
|
setInputHpno(hpno) |
|
|
|
setInputHpno(hpno); |
|
|
|
} |
|
|
|
} |
|
|
|
} else if (name == 'crtfyhpNo') { |
|
|
|
} else if (name == 'crtfyhpNo') { |
|
|
|
const regex = /^[0-9]{0,6}$/; |
|
|
|
const regex = /^[0-9]{0,6}$/; |
|
|
|
if (regex.test(value)) { |
|
|
|
if (regex.test(value)) { |
|
|
|
crtfyhp = value; |
|
|
|
crtfyhp = value; |
|
|
|
setInputCrtfy(crtfyhp) |
|
|
|
setInputCrtfy(crtfyhp); |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
//모든 인증 완료 후 확인버튼
|
|
|
|
//모든 인증 완료 후 확인버튼
|
|
|
|
const handlerFindId = () => { |
|
|
|
const handlerFindId = () => { |
|
|
|
dispatch(findUserIdAction.request({memberName: inputName, hpno: inputHpno})); |
|
|
|
dispatch( |
|
|
|
|
|
|
|
findUserIdAction.request({ memberName: inputName, hpno: inputHpno }) |
|
|
|
|
|
|
|
); |
|
|
|
setConfirmModal(!confirmModal); |
|
|
|
setConfirmModal(!confirmModal); |
|
|
|
} |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
return ( |
|
|
|
<> |
|
|
|
<> |
|
|
@ -265,8 +286,18 @@ export const AccountFindUserId = props => { |
|
|
|
<FormGroup> |
|
|
|
<FormGroup> |
|
|
|
<div className='input-btn'> |
|
|
|
<div className='input-btn'> |
|
|
|
<Col md='3' xs='12'> |
|
|
|
<Col md='3' xs='12'> |
|
|
|
<Input type='select' id='cntryCd' name='cntryCd' placeholder='+(국가번호)'> |
|
|
|
<Input |
|
|
|
<option>+82</option> |
|
|
|
type='select' |
|
|
|
|
|
|
|
id='cntryCd' |
|
|
|
|
|
|
|
name='cntryCd' |
|
|
|
|
|
|
|
placeholder='+(국가번호)' |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
{/* <option>+82</option> */} |
|
|
|
|
|
|
|
<option value={'+81'}>일본(+81)</option> |
|
|
|
|
|
|
|
<option value={'+82'} selected> |
|
|
|
|
|
|
|
대한민국(+82) |
|
|
|
|
|
|
|
</option> |
|
|
|
|
|
|
|
<option value={'+86'}>중국(+86)</option> |
|
|
|
</Input> |
|
|
|
</Input> |
|
|
|
</Col> |
|
|
|
</Col> |
|
|
|
<Col md='6' xs='12'> |
|
|
|
<Col md='6' xs='12'> |
|
|
@ -280,11 +311,9 @@ export const AccountFindUserId = props => { |
|
|
|
/> |
|
|
|
/> |
|
|
|
</Col> |
|
|
|
</Col> |
|
|
|
<Col md='3' xs='12'> |
|
|
|
<Col md='3' xs='12'> |
|
|
|
<Button |
|
|
|
<Button color='primary' type='button' onClick={handlerSend}> |
|
|
|
color='primary' |
|
|
|
인증번호 발송 |
|
|
|
type='button' |
|
|
|
</Button> |
|
|
|
onClick={handlerSend} |
|
|
|
|
|
|
|
>인증번호 발송</Button> |
|
|
|
|
|
|
|
</Col> |
|
|
|
</Col> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</FormGroup> |
|
|
|
</FormGroup> |
|
|
@ -299,11 +328,7 @@ export const AccountFindUserId = props => { |
|
|
|
placeholder='인증번호 입력' |
|
|
|
placeholder='인증번호 입력' |
|
|
|
value={inputCrtfy} |
|
|
|
value={inputCrtfy} |
|
|
|
onChange={handlerChange} |
|
|
|
onChange={handlerChange} |
|
|
|
{...sendCount > 0 ?
|
|
|
|
{...(sendCount > 0 ? {} : { disabled: true })} |
|
|
|
{} |
|
|
|
|
|
|
|
: |
|
|
|
|
|
|
|
{disabled: true} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
/> |
|
|
|
/> |
|
|
|
<span className={!isRunning || isCrtfy ? 'time d-none' : 'time'}> |
|
|
|
<span className={!isRunning || isCrtfy ? 'time d-none' : 'time'}> |
|
|
|
남은시간 {minutes_Counter}:{seconds_Counter} |
|
|
|
남은시간 {minutes_Counter}:{seconds_Counter} |
|
|
@ -314,12 +339,10 @@ export const AccountFindUserId = props => { |
|
|
|
color='primary' |
|
|
|
color='primary' |
|
|
|
type='button' |
|
|
|
type='button' |
|
|
|
onClick={handlerConfirm} |
|
|
|
onClick={handlerConfirm} |
|
|
|
{ ...isRunning ?
|
|
|
|
{...(isRunning ? {} : { disabled: true })} |
|
|
|
{} |
|
|
|
> |
|
|
|
: |
|
|
|
인증번호 확인 |
|
|
|
{disabled: true} |
|
|
|
</Button> |
|
|
|
} |
|
|
|
|
|
|
|
>인증번호 확인</Button> |
|
|
|
|
|
|
|
</Col> |
|
|
|
</Col> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</FormGroup> |
|
|
|
</FormGroup> |
|
|
@ -336,12 +359,10 @@ export const AccountFindUserId = props => { |
|
|
|
color='primary' |
|
|
|
color='primary' |
|
|
|
type='button' |
|
|
|
type='button' |
|
|
|
onClick={handlerFindId} |
|
|
|
onClick={handlerFindId} |
|
|
|
{...isCrtfy ? |
|
|
|
{...(isCrtfy ? {} : { disabled: true })} |
|
|
|
{} |
|
|
|
> |
|
|
|
: |
|
|
|
확인 |
|
|
|
{disabled: true} |
|
|
|
</Button> |
|
|
|
} |
|
|
|
|
|
|
|
>확인</Button> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<Modal |
|
|
|
<Modal |
|
|
|
isOpen={confirmModal} |
|
|
|
isOpen={confirmModal} |
|
|
@ -353,7 +374,12 @@ export const AccountFindUserId = props => { |
|
|
|
아이디 확인 |
|
|
|
아이디 확인 |
|
|
|
</ModalHeader> |
|
|
|
</ModalHeader> |
|
|
|
<ModalBody> |
|
|
|
<ModalBody> |
|
|
|
회원님의 아이디는<br/><span className='user-search-id'>{userId?.data.userId}</span> 입니다. |
|
|
|
회원님의 아이디는 |
|
|
|
|
|
|
|
<br /> |
|
|
|
|
|
|
|
<span className='user-search-id'> |
|
|
|
|
|
|
|
{userId?.data.userId} |
|
|
|
|
|
|
|
</span>{' '} |
|
|
|
|
|
|
|
입니다. |
|
|
|
{/* 회원님의 아이디는<br/><span className='user-search-id'>{result?.data.userId}</span> 입니다. */} |
|
|
|
{/* 회원님의 아이디는<br/><span className='user-search-id'>{result?.data.userId}</span> 입니다. */} |
|
|
|
</ModalBody> |
|
|
|
</ModalBody> |
|
|
|
<ModalFooter> |
|
|
|
<ModalFooter> |
|
|
@ -362,7 +388,6 @@ export const AccountFindUserId = props => { |
|
|
|
</Button>{' '} |
|
|
|
</Button>{' '} |
|
|
|
</ModalFooter> |
|
|
|
</ModalFooter> |
|
|
|
</Modal> |
|
|
|
</Modal> |
|
|
|
|
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</FormGroup> |
|
|
|
</FormGroup> |
|
|
|
|
|
|
|
|
|
|
@ -389,8 +414,7 @@ export const AccountFindUserId = props => { |
|
|
|
</ModalFooter> |
|
|
|
</ModalFooter> |
|
|
|
</Modal> |
|
|
|
</Modal> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
</TabPane> |
|
|
|
</TabPane> |
|
|
|
</> |
|
|
|
</> |
|
|
|
) |
|
|
|
); |
|
|
|
} |
|
|
|
}; |
|
|
|