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

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

pull/2/head
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
Split 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'>
<Col md='3' xs='12'>
<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>
</Col>
<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 classnames from 'classnames';
import { yupResolver } from '@hookform/resolvers/yup';
import { useState, useEffect, useMemo } from 'react'
import { useForm } from 'react-hook-form';
import { useState, useEffect, useMemo } from 'react';
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,
Modal, ModalHeader, ModalBody, ModalFooter, FormFeedback } from 'reactstrap'
import { User, Info, CreditCard, Lock, Check, X } from 'react-feather'
import {
Form,
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 { 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 { findAPI } from '../../../modules/account/find/apis/findApi';
export const AccountFindUserId = props => {
const dispatch = useDispatch();
const [activeTab, setActiveTab] = useState('2')
const [activeTab, setActiveTab] = useState('2');
// ** Function to toggle tabs
const toggle = tab => setActiveTab(tab)
const toggle = tab => setActiveTab(tab);
//modal
const [confirmModal, setConfirmModal] = useState(false)
const [confirmModal, setConfirmModal] = useState(false);
const [modal, setModal] = useState({
isOpen: false,
title: '',
desc: '',
color: ''
})
});
//state값
const { idResult, userId, pwResult, udResult } = useSelector(state => state.findState);
const { idResult, userId, pwResult, udResult } = useSelector(
state => state.findState
);
//param으로 넘기기 위한 값
const [inputName, setInputName] = useState('');
@ -47,71 +62,76 @@ export const AccountFindUserId = props => {
const [isCrtfy, setIsCrtfy] = useState(false);
useEffect(() => {
if(isRunning) clearInterval(timer);
return () => { clearInterval(timer); }
if (isRunning) clearInterval(timer);
return () => {
clearInterval(timer);
};
}, []);
const handlerSend = async() => {
if(!inputName) {
const handlerSend = async () => {
if (!inputName) {
setModal({
isOpen: true,
title: '인증번호 발송',
desc: '이름을 입력해 주세요.',
color: 'modal-danger'
})
});
return;
}
if(!inputHpno) {
if (!inputHpno) {
setModal({
isOpen: true,
title: '인증번호 발송',
desc: '휴대폰 번호를 입력해 주세요.',
color: 'modal-danger'
})
});
return;
}
if(sendCount >= 3) {
if (sendCount >= 3) {
setModal({
isOpen: true,
title: '인증번호 발송',
desc: '인증번호가 발송은 3회까지만 가능합니다.',
color: 'modal-danger'
})
});
return;
}
if(inputHpno.length < 11) {
if (inputHpno.length < 11) {
setModal({
isOpen: true,
title: '인증번호 발송',
desc: '올바른 번호를 입력해 주세요.',
color: 'modal-danger'
})
});
return;
}
const res = await findAPI.sendForId({memberName: inputName, hpno: inputHpno});
if(res?.data.code === -1) {
const res = await findAPI.sendForId({
memberName: inputName,
hpno: inputHpno
});
if (res?.data.code === -1) {
setModal({
isOpen: true,
title: '인증번호 발송',
desc: '가입되지 않은 회원정보입니다. 다시 확인해 주세요.',
color: 'modal-danger'
})
} else if(res?.data.code === 0) {
});
} else if (res?.data.code === 0) {
setModal({
isOpen: true,
title: '인증번호 발송',
desc: '인증번호가 발송되었습니다.',
color: 'modal-primary'
})
});
timeStart();
}
}
};
const timeStart = () => {
if(isRunning) {
if (isRunning) {
clearInterval(timer);
}
@ -120,7 +140,7 @@ export const AccountFindUserId = props => {
setSendCount(sendCount + 1);
timerStart(180);
}
};
const timerStart = count => {
let minutes, seconds;
@ -145,7 +165,7 @@ export const AccountFindUserId = props => {
title: '인증번호 만료',
desc: '인증번호가 만료되었습니다.',
color: 'modal-danger'
})
});
}
}, 1000);
@ -153,42 +173,42 @@ export const AccountFindUserId = props => {
return () => {
clearInterval(timer);
}
}
};
};
const handlerConfirm = async() => {
if(!inputHpno) {
const handlerConfirm = async () => {
if (!inputHpno) {
setModal({
isOpen: true,
title: '인증번호 인증',
desc: '휴대폰 번호를 입력해 주세요.',
color: 'modal-danger'
})
});
return;
}
if(!inputName) {
if (!inputName) {
setModal({
isOpen: true,
title: '인증번호 인증',
desc: '이름을 입력해 주세요.',
color: 'modal-danger'
})
});
return;
}
if(!inputCrtfy) {
if (!inputCrtfy) {
setModal({
isOpen: true,
title: '인증번호 인증',
desc: '인증번호를 입력해 주세요.',
color: 'modal-danger'
})
});
return;
}
const res = await accountApi.crtfyhpConfirm(inputHpno, inputCrtfy);
if(!res.data.result) {
if (!res.data.result) {
setModal({
isOpen: true,
title: '인증번호 인증',
@ -206,50 +226,51 @@ export const AccountFindUserId = props => {
setIsCrtfy(true);
setIsRunning(false);
}
}
};
let memberName = '';
let hpno = '';
let crtfyhp = '';
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}$/;
if(regex.test(value)) {
if (regex.test(value)) {
memberName = value;
setInputName(memberName)
setInputName(memberName);
}
} else if(name == 'hpno') {
} else if (name == 'hpno') {
const regex = /^[0-9]{0,11}$/;
if(regex.test(value)) {
if (regex.test(value)) {
hpno = value;
setInputHpno(hpno)
setInputHpno(hpno);
}
} else if(name == 'crtfyhpNo') {
} else if (name == 'crtfyhpNo') {
const regex = /^[0-9]{0,6}$/;
if(regex.test(value)) {
if (regex.test(value)) {
crtfyhp = value;
setInputCrtfy(crtfyhp)
}
setInputCrtfy(crtfyhp);
}
}
};
//모든 인증 완료 후 확인버튼
const handlerFindId = () => {
dispatch(findUserIdAction.request({memberName: inputName, hpno: inputHpno}));
dispatch(
findUserIdAction.request({ memberName: inputName, hpno: inputHpno })
);
setConfirmModal(!confirmModal);
}
};
return(
return (
<>
<TabPane tabId='1'>
<FormGroup className='form-label-group position-relative has-icon-left'>
<InputGroup className=''>
<InputGroupAddon addonType='prepend'>
<InputGroupText>
<User size={14}/>
<User size={14} />
</InputGroupText>
</InputGroupAddon>
<Input
@ -265,8 +286,18 @@ export const AccountFindUserId = props => {
<FormGroup>
<div className='input-btn'>
<Col md='3' xs='12'>
<Input type='select' id='cntryCd' name='cntryCd' placeholder='+(국가번호)'>
<option>+82</option>
<Input
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>
</Col>
<Col md='6' xs='12'>
@ -280,11 +311,9 @@ export const AccountFindUserId = props => {
/>
</Col>
<Col md='3' xs='12'>
<Button
color='primary'
type='button'
onClick={handlerSend}
>인증번호 발송</Button>
<Button color='primary' type='button' onClick={handlerSend}>
인증번호 발송
</Button>
</Col>
</div>
</FormGroup>
@ -299,11 +328,7 @@ export const AccountFindUserId = props => {
placeholder='인증번호 입력'
value={inputCrtfy}
onChange={handlerChange}
{...sendCount > 0 ?
{}
:
{disabled: true}
}
{...(sendCount > 0 ? {} : { disabled: true })}
/>
<span className={!isRunning || isCrtfy ? 'time d-none' : 'time'}>
남은시간 {minutes_Counter}:{seconds_Counter}
@ -314,12 +339,10 @@ export const AccountFindUserId = props => {
color='primary'
type='button'
onClick={handlerConfirm}
{ ...isRunning ?
{}
:
{disabled: true}
}
>인증번호 확인</Button>
{...(isRunning ? {} : { disabled: true })}
>
인증번호 확인
</Button>
</Col>
</div>
</FormGroup>
@ -336,12 +359,10 @@ export const AccountFindUserId = props => {
color='primary'
type='button'
onClick={handlerFindId}
{...isCrtfy ?
{}
:
{disabled: true}
}
>확인</Button>
{...(isCrtfy ? {} : { disabled: true })}
>
확인
</Button>
<Modal
isOpen={confirmModal}
@ -353,7 +374,12 @@ export const AccountFindUserId = props => {
아이디 확인
</ModalHeader>
<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> 입니다. */}
</ModalBody>
<ModalFooter>
@ -362,7 +388,6 @@ export const AccountFindUserId = props => {
</Button>{' '}
</ModalFooter>
</Modal>
</div>
</FormGroup>
@ -389,8 +414,7 @@ export const AccountFindUserId = props => {
</ModalFooter>
</Modal>
</div>
</TabPane>
</>
)
}
);
};

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

@ -447,7 +447,11 @@ export const AccountRegisterForm = ({
'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>
{errors && errors.clncd && (
<FormFeedback>{errors.clncd.message}</FormFeedback>

Write Preview
Loading…
Cancel
Save