pav
/
pav-home
9
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

회원가입 / 비밀번호 찾기 - 국가코드 추가

feature/auth
junh_eee(이준희) 2 years ago
parent
a1cb57a5a8
commit
3f18266da1
3 changed files with 153 additions and 120 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 7
      src/components/account/find/AccountFindPassword.js
  2. 204
      src/components/account/find/AccountFindUserId.js
  3. 6
      src/components/account/register/AccountRegisterForm.js

7
src/components/account/find/AccountFindPassword.js
Unescape View File

@ -333,7 +333,12 @@ export const AccountFindPassword = props => {
<div className='input-btn'> <div className='input-btn'>
<Col md='3' xs='12'> <Col md='3' xs='12'>
<Input type='select' placeholder='+(국가번호)'> <Input type='select' placeholder='+(국가번호)'>
<option>+82</option> {/* <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'>

204
src/components/account/find/AccountFindUserId.js
Unescape View File

@ -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('');
@ -47,71 +62,76 @@ export const AccountFindUserId = props => {
const [isCrtfy, setIsCrtfy] = useState(false); const [isCrtfy, setIsCrtfy] = useState(false);
useEffect(() => { useEffect(() => {
if(isRunning) clearInterval(timer); if (isRunning) clearInterval(timer);
return () => { clearInterval(timer); } return () => {
clearInterval(timer);
};
}, []); }, []);
const handlerSend = async() => { const handlerSend = async () => {
if(!inputName) { if (!inputName) {
setModal({ setModal({
isOpen: true, isOpen: true,
title: '인증번호 발송', title: '인증번호 발송',
desc: '이름을 입력해 주세요.', desc: '이름을 입력해 주세요.',
color: 'modal-danger' color: 'modal-danger'
}) });
return; return;
} }
if(!inputHpno) { if (!inputHpno) {
setModal({ setModal({
isOpen: true, isOpen: true,
title: '인증번호 발송', title: '인증번호 발송',
desc: '휴대폰 번호를 입력해 주세요.', desc: '휴대폰 번호를 입력해 주세요.',
color: 'modal-danger' color: 'modal-danger'
}) });
return; return;
} }
if(sendCount >= 3) { if (sendCount >= 3) {
setModal({ setModal({
isOpen: true, isOpen: true,
title: '인증번호 발송', title: '인증번호 발송',
desc: '인증번호가 발송은 3회까지만 가능합니다.', desc: '인증번호가 발송은 3회까지만 가능합니다.',
color: 'modal-danger' color: 'modal-danger'
}) });
return; return;
} }
if(inputHpno.length < 11) { if (inputHpno.length < 11) {
setModal({ setModal({
isOpen: true, isOpen: true,
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({
if(res?.data.code === -1) { memberName: inputName,
hpno: inputHpno
});
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) {
clearInterval(timer); clearInterval(timer);
} }
@ -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,42 +173,42 @@ export const AccountFindUserId = props => {
return () => { return () => {
clearInterval(timer); clearInterval(timer);
} };
} };
const handlerConfirm = async() => { const handlerConfirm = async () => {
if(!inputHpno) { if (!inputHpno) {
setModal({ setModal({
isOpen: true, isOpen: true,
title: '인증번호 인증', title: '인증번호 인증',
desc: '휴대폰 번호를 입력해 주세요.', desc: '휴대폰 번호를 입력해 주세요.',
color: 'modal-danger' color: 'modal-danger'
}) });
return; return;
} }
if(!inputName) { if (!inputName) {
setModal({ setModal({
isOpen: true, isOpen: true,
title: '인증번호 인증', title: '인증번호 인증',
desc: '이름을 입력해 주세요.', desc: '이름을 입력해 주세요.',
color: 'modal-danger' color: 'modal-danger'
}) });
return; return;
} }
if(!inputCrtfy) { if (!inputCrtfy) {
setModal({ setModal({
isOpen: true, isOpen: true,
title: '인증번호 인증', title: '인증번호 인증',
desc: '인증번호를 입력해 주세요.', desc: '인증번호를 입력해 주세요.',
color: 'modal-danger' color: 'modal-danger'
}) });
return; return;
} }
const res = await accountApi.crtfyhpConfirm(inputHpno, inputCrtfy); const res = await accountApi.crtfyhpConfirm(inputHpno, inputCrtfy);
if(!res.data.result) { if (!res.data.result) {
setModal({ setModal({
isOpen: true, isOpen: true,
title: '인증번호 인증', title: '인증번호 인증',
@ -206,50 +226,51 @@ export const AccountFindUserId = props => {
setIsCrtfy(true); setIsCrtfy(true);
setIsRunning(false); setIsRunning(false);
} }
} };
let memberName = ''; let memberName = '';
let hpno = ''; let hpno = '';
let crtfyhp = ''; let crtfyhp = '';
const handlerChange = e => { const handlerChange = e => {
const {name, value} = e.target; const { name, value } = e.target;
if(name == 'memberName') { if (name == 'memberName') {
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 (
<> <>
<TabPane tabId='1'> <TabPane tabId='1'>
<FormGroup className='form-label-group position-relative has-icon-left'> <FormGroup className='form-label-group position-relative has-icon-left'>
<InputGroup className=''> <InputGroup className=''>
<InputGroupAddon addonType='prepend'> <InputGroupAddon addonType='prepend'>
<InputGroupText> <InputGroupText>
<User size={14}/> <User size={14} />
</InputGroupText> </InputGroupText>
</InputGroupAddon> </InputGroupAddon>
<Input <Input
@ -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>
</> </>
) );
} };

6
src/components/account/register/AccountRegisterForm.js
Unescape View File

@ -447,7 +447,11 @@ export const AccountRegisterForm = ({
'is-invalid': errors.clncd 'is-invalid': errors.clncd
})} })}
> >
<option value={'+82'}>대한민국(+82)</option> <option value={'+81'}>일본(+81)</option>
<option value={'+82'} selected>
대한민국(+82)
</option>
<option value={'+86'}>중국(+86)</option>
</Input> </Input>
{errors && errors.clncd && ( {errors && errors.clncd && (
<FormFeedback>{errors.clncd.message}</FormFeedback> <FormFeedback>{errors.clncd.message}</FormFeedback>

Write Preview
Loading…
Cancel
Save