diff --git a/src/components/account/find/AccountFindPassword.js b/src/components/account/find/AccountFindPassword.js index 4569bf45..d236f4b1 100644 --- a/src/components/account/find/AccountFindPassword.js +++ b/src/components/account/find/AccountFindPassword.js @@ -22,13 +22,16 @@ import { updatePwAction } from '../../../modules/account/find/actions/findAction export const AccountFindPassword = props => { const dispatch = useDispatch(); + // 탭 상태 const [activeTab, setActiveTab] = useState('2'); // ** Function to toggle tabs const toggle = tab => setActiveTab(tab); //modal const [confirmModal, setConfirmModal] = useState(false); + // 비밀번호 변경 모달 const [saveModal, setSaveModal] = useState(false); + // 모달 관련 설정 const [modal, setModal] = useState({ isOpen: false, title: '', diff --git a/src/components/account/find/AccountFindTab.js b/src/components/account/find/AccountFindTab.js index d1e6bde9..b8a53b70 100644 --- a/src/components/account/find/AccountFindTab.js +++ b/src/components/account/find/AccountFindTab.js @@ -16,15 +16,18 @@ import { AccountFindPasswordContainer } from '../../../containers/account/find/A import { useHistory } from 'react-router-dom'; export const AccountFindTab = props => { + // 탭 상태 const [activeTab, setActiveTab] = useState('2'); const history = useHistory(); + // 탭 변경 헨들러 const toggle = tab => setActiveTab(tab); // const toggle = tab => { // if (activeTab !== tab) setActiveTab(tab); // }; + // 닫기 버튼 헨들러 const handlerClose = () => { history.push(`/account/login`); }; diff --git a/src/components/account/find/AccountFindUserId.js b/src/components/account/find/AccountFindUserId.js index 8855bb4d..2ed14772 100644 --- a/src/components/account/find/AccountFindUserId.js +++ b/src/components/account/find/AccountFindUserId.js @@ -23,6 +23,7 @@ import { findAPI } from '../../../modules/account/find/apis/findApi'; export const AccountFindUserId = props => { const dispatch = useDispatch(); + // 탭 상태 const [activeTab, setActiveTab] = useState('2'); // ** Function to toggle tabs @@ -30,6 +31,7 @@ export const AccountFindUserId = props => { //modal const [confirmModal, setConfirmModal] = useState(false); + // 모달 관련 설정 const [modal, setModal] = useState({ isOpen: false, title: '', @@ -55,6 +57,7 @@ export const AccountFindUserId = props => { const [sendCount, setSendCount] = useState(0); const [isCrtfy, setIsCrtfy] = useState(false); + // 타이머 시작 && 언마운트 종료 useEffect(() => { setIsRunning(true); if (isRunning) clearInterval(timer); @@ -64,6 +67,7 @@ export const AccountFindUserId = props => { }; }, []); + // 인증번호 발송 헨들러 const handlerSend = async () => { if (!inputName) { setModal({ @@ -126,6 +130,7 @@ export const AccountFindUserId = props => { } }; + // 타이머 시작 const timeStart = () => { if (isRunning) { clearInterval(timer); @@ -138,6 +143,7 @@ export const AccountFindUserId = props => { timerStart(180); }; + // 타이머 시작 헨들러 const timerStart = count => { let minutes, seconds; diff --git a/src/components/account/login/AccountLogin.js b/src/components/account/login/AccountLogin.js index 2e39f9b9..b3c4c625 100644 --- a/src/components/account/login/AccountLogin.js +++ b/src/components/account/login/AccountLogin.js @@ -18,8 +18,10 @@ import kacLogo from '../../../assets/images/logo/kac_logo.svg'; export const AccountLogin = ({ props }) => { const dispatch = useDispatch(); + // 로그인 결과 const { isLogin, message } = useSelector(state => state.authState); + // 로그인 폼 const [loginForm, setLoginForm] = useState({ userId: 'palnet', userPswd: '' @@ -32,6 +34,7 @@ export const AccountLogin = ({ props }) => { desc: '' }); + // 로그인 폼 변경 헨들러 const handelrChange = e => { const { name, value } = e.target; setLoginForm({ @@ -40,12 +43,14 @@ export const AccountLogin = ({ props }) => { }); }; + // 엔터키 이벤트 const onKeyPress = e => { if (e.key == 'Enter') { handelrLogin(); } }; + // 로그인 버튼 헨들러 const handelrLogin = () => { if (!loginForm.userId) { setModal({ @@ -66,6 +71,7 @@ export const AccountLogin = ({ props }) => { dispatch(Actions.login.request(loginForm)); }; + // 로그인 실패 모달 useEffect(() => { if (message) { setModal({ @@ -76,6 +82,7 @@ export const AccountLogin = ({ props }) => { } }, [message]); + // 로그인 성공시 메인화면으로 이동 useEffect(() => { if (isLogin) { // props.history.push('/'); diff --git a/src/components/account/mypage/AccountMypagePwForm.js b/src/components/account/mypage/AccountMypagePwForm.js index 32ac5b66..2f45f294 100644 --- a/src/components/account/mypage/AccountMypagePwForm.js +++ b/src/components/account/mypage/AccountMypagePwForm.js @@ -22,22 +22,30 @@ import { useHistory } from 'react-router-dom'; import { ErrorModal } from '../../modal/ErrorModal'; const AccountMypagePwForm = ({ activeTab }) => { + // 비밀번호 확인 결과 const { result } = useSelector(state => state.UserPageState); + // 기존 비밀번호 const [userPswd, setuserPswd] = useState(''); + // 새로운 비밀번호 const [inputs, setInputs] = useState({ newPswd: '', newPswdConfirm: '' }); + // 새로운 비밀번호 구조 분해 할당 const { newPswd, newPswdConfirm } = inputs; + // 결과 확인 상태 const [resultOk, setresultOk] = useState(true); + // 버튼 확인 상태 const [btnOk, setbtnOk] = useState(false); + // 모달 상태 const [modal, setModal] = useState({ isOpen: false, title: '', desc: '' }); + // 비밀번호 확인 결과 헨들러 useEffect(() => { if (result) { if (result.errorCode) { @@ -50,6 +58,7 @@ const AccountMypagePwForm = ({ activeTab }) => { } }, [result]); + // 탭 변경시 초기화 useEffect(() => { setresultOk(true); setbtnOk(false); @@ -59,15 +68,18 @@ const AccountMypagePwForm = ({ activeTab }) => { const history = useHistory(); + // 기존 비밀번호 변경 헨들러 const onChange = e => { setuserPswd(e.target.value); }; + // 엔터키 이벤트 const onKeyPress = e => { if (e.key == 'Enter') { pwok(); } }; + // 인풋 변경 이벤트 const onChanges = e => { const { value, name } = e.target; setInputs({ diff --git a/src/components/account/register/AccountRegister.js b/src/components/account/register/AccountRegister.js index ff6e725a..96c9c80f 100644 --- a/src/components/account/register/AccountRegister.js +++ b/src/components/account/register/AccountRegister.js @@ -7,13 +7,19 @@ import '../../../assets/css/custom.css'; import { AccountRegisterComplete } from './AccountRegisterComplete'; export const AccountRegister = ({ props }) => { + // step const [stepper, setStepper] = useState(null); + // 회원명 const [memberName, setMemberName] = useState(); + + // 참조값 const ref = useRef(null); + // 페이지 이동 const movePage = url => { props.history.push(url); }; + // 약관 동의 const steps = [ { id: 'account-term', diff --git a/src/components/account/register/AccountRegisterComplete.js b/src/components/account/register/AccountRegisterComplete.js index 30c86a67..edab7a9e 100644 --- a/src/components/account/register/AccountRegisterComplete.js +++ b/src/components/account/register/AccountRegisterComplete.js @@ -8,6 +8,7 @@ export const AccountRegisterComplete = ({ movePage, memberName }) => { + // 페이지 이동 const handlerLogin = () => { movePage('/account/login'); }; diff --git a/src/components/account/register/AccountRegisterForm.js b/src/components/account/register/AccountRegisterForm.js index 020426fb..a0332bb4 100644 --- a/src/components/account/register/AccountRegisterForm.js +++ b/src/components/account/register/AccountRegisterForm.js @@ -28,13 +28,21 @@ export const AccountRegisterForm = ({ testName, setMemberName }) => { + // 약관동의 내용 const { agreeTerms } = useSelector(state => state.accountState); + // 분단위 카운터 const [minutes_Counter, setMinutes_Counter] = useState('03'); + // 초단위 카운터 const [seconds_Counter, setSeconds_Counter] = useState('00'); + // 타이머 const [timer, setTimer] = useState(null); + // 타이머 시작 여부 const [isRunning, setIsRunning] = useState(false); + // 인증번호 발송 횟수 const [sendCount, setSendCount] = useState(0); + // 인증번호 발송 여부 const [isCrtfy, setIsCrtfy] = useState(false); + // 모달 상태 const [modal, setModal] = useState({ isOpen: false, title: '', @@ -42,6 +50,7 @@ export const AccountRegisterForm = ({ }); const dispatch = useDispatch(); + // 타이머 시작 const timerStart = count => { let minutes, seconds; @@ -70,6 +79,7 @@ export const AccountRegisterForm = ({ }; }; + // 인증번호 발송하기 헨들러 const handlerSmsSend = async () => { const vData = getValues(); @@ -132,6 +142,7 @@ export const AccountRegisterForm = ({ // handlerSmsSend(); }; + // 인증번호 인증 헨들러 useEffect(() => { if (isRunning) { clearInterval(timer); @@ -144,6 +155,7 @@ export const AccountRegisterForm = ({ }; }, []); + // 회원가입 폼 유효성 검사 const SignupSchema = yup.object().shape({ userId: yup.string().trim().required('ID를 입력해 주세요.'), // .matches( @@ -206,10 +218,12 @@ export const AccountRegisterForm = ({ resolver: yupResolver(SignupSchema) }); + // 취소 헨들러 const handlerCancel = async () => { movePage('/account/login'); }; + // 회원가입 버튼 헨들러 const onSubmit = async data => { if (isObjEmpty(errors)) { if (!isCrtfy) { @@ -250,6 +264,7 @@ export const AccountRegisterForm = ({ } }; + // 인증번호 인증 헨들러 const handlerSmsConfirm = async () => { const vData = getValues(); @@ -288,6 +303,8 @@ export const AccountRegisterForm = ({ let hpno = ''; let brthdyDate = ''; let trmnlId = ''; + + // 회원가입 폼 변경 헨들러 const onChangeHandler = e => { const { name, value } = e.target; diff --git a/src/components/account/register/AccountRegisterTerm.js b/src/components/account/register/AccountRegisterTerm.js index 731865dd..0805d89e 100644 --- a/src/components/account/register/AccountRegisterTerm.js +++ b/src/components/account/register/AccountRegisterTerm.js @@ -14,8 +14,9 @@ import { useDispatch, useSelector } from 'react-redux'; import * as Actions from '../../../modules/account/register/actions/accountAction'; export const AccountRegisterTerm = ({ stepper, type, movePage }) => { + // 약관 목록 const { termsList } = useSelector(state => state.accountState); - + // 약관 동의 데이터 const [termChecked, setTermCheckd] = useState({ privacy: false, privacyId: '', @@ -23,14 +24,18 @@ export const AccountRegisterTerm = ({ stepper, type, movePage }) => { serviceId: '', all: false }); + // 모달 상태 const [openModal, setOpenModal] = useState(false); const dispatch = useDispatch(); + // 약관 동의 const [terms, setTerms] = useState({}); + // 취소 버튼 헨들러 const handlerCancel = () => { movePage('/account/login'); }; + // 약관 목록 조회 useEffect(() => { dispatch( Actions.termsList.request({ @@ -41,6 +46,7 @@ export const AccountRegisterTerm = ({ stepper, type, movePage }) => { ); }, []); + // 약관 목록 조회 결과 useEffect(() => { if (termsList?.length > 0) { let termObject = { @@ -67,6 +73,7 @@ export const AccountRegisterTerm = ({ stepper, type, movePage }) => { } }, [termsList]); + // 다음 버튼 헨들러 const handlerNext = () => { let agreeTerms = []; if (!termChecked.privacy || !termChecked.service) { @@ -101,6 +108,7 @@ export const AccountRegisterTerm = ({ stepper, type, movePage }) => { stepper.next(); }; + // 약관 동의 체크 const handlerChecked = type => { if (type === 'all') { const checked = !termChecked.all; diff --git a/src/containers/account/find/AccounFindTabContainer.js b/src/containers/account/find/AccounFindTabContainer.js index 210e2b0e..d93cc7e3 100644 --- a/src/containers/account/find/AccounFindTabContainer.js +++ b/src/containers/account/find/AccounFindTabContainer.js @@ -1,16 +1,17 @@ -import { AccountFindTab } from "../../../components/account/find/AccountFindTab"; +import { AccountFindTab } from '../../../components/account/find/AccountFindTab'; import loginImg from '../../../assets/images/login01.png'; -import { Button } from 'reactstrap' +import { Button } from 'reactstrap'; import '../../../assets/css/custom.css'; -import { useHistory } from 'react-router-dom' +import { useHistory } from 'react-router-dom'; import kacLogo from '../../../assets/images/logo/kac_logo.svg'; export const AccountFindTabContainer = () => { const history = useHistory(); + // 회원가입 바로가기 const handlerRegister = () => { - history.push(`/account/register`) - } + history.push(`/account/register`); + }; return ( <> @@ -23,19 +24,15 @@ export const AccountFindTabContainer = () => { */}
- +
- + 회원가입 바로가기
- ); };