diff --git a/src/assets/css/custom.css b/src/assets/css/custom.css
index ce45116..2b7f205 100644
--- a/src/assets/css/custom.css
+++ b/src/assets/css/custom.css
@@ -785,3 +785,7 @@ background-size: 75% auto;
.pal-modal-body{padding:0;}
.pal-modal-body .pal-card-box + .pal-card-box{margin-top:0;}
+
+/*그리드 로딩*/
+.grid-loading{width:100%;height:100%;position: absolute;background:rgba(35, 41, 58, 0.7);z-index:999;display:flex;align-items:center;justify-content: center;text-align:center;}
+.grid-loading span{display:block;font-weight:500;margin-top:4px;}
\ No newline at end of file
diff --git a/src/components/account/find/AccountFindPassword.js b/src/components/account/find/AccountFindPassword.js
index f70eae5..b8cda68 100644
--- a/src/components/account/find/AccountFindPassword.js
+++ b/src/components/account/find/AccountFindPassword.js
@@ -333,7 +333,12 @@ export const AccountFindPassword = props => {
-
+ {/*
*/}
+
+
+
diff --git a/src/components/account/find/AccountFindUserId.js b/src/components/account/find/AccountFindUserId.js
index b4c4000..38af87b 100644
--- a/src/components/account/find/AccountFindUserId.js
+++ b/src/components/account/find/AccountFindUserId.js
@@ -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 => {
+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,80 +62,85 @@ 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);
}
setIsRunning(true);
setIsCrtfy(false);
-
+
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 (
<>
-
+
{
-
-
+
+ {/* */}
+
+
+
@@ -278,14 +309,12 @@ export const AccountFindUserId = props => {
value={inputHpno}
onChange={handlerChange}
/>
-
+
-
-
+
+
@@ -298,29 +327,23 @@ export const AccountFindUserId = props => {
name='crtfyhpNo'
placeholder='인증번호 입력'
value={inputCrtfy}
- onChange={handlerChange}
- {...sendCount > 0 ?
- {}
- :
- {disabled: true}
- }
+ onChange={handlerChange}
+ {...(sendCount > 0 ? {} : { disabled: true })}
/>
남은시간 {minutes_Counter}:{seconds_Counter}
-
+
-
-
+ {...(isRunning ? {} : { disabled: true })}
+ >
+ 인증번호 확인
+
+