From 9453db3f9fa0ea6e57e9c44d435d0d41fc4b6990 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EB=B0=95=EC=83=81=ED=98=84?= <gus516@palnet.co.kr>
Date: Wed, 13 Dec 2023 14:06:18 +0900
Subject: [PATCH] =?UTF-8?q?=ED=9A=8C=EC=9B=90=20=EA=B4=80=EB=A0=A8=20?=
 =?UTF-8?q?=EC=A3=BC=EC=84=9D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../account/find/AccountFindPassword.js       |  3 +++
 src/components/account/find/AccountFindTab.js |  3 +++
 .../account/find/AccountFindUserId.js         |  6 ++++++
 src/components/account/login/AccountLogin.js  |  7 +++++++
 .../account/mypage/AccountMypagePwForm.js     | 12 ++++++++++++
 .../account/register/AccountRegister.js       |  6 ++++++
 .../register/AccountRegisterComplete.js       |  1 +
 .../account/register/AccountRegisterForm.js   | 17 +++++++++++++++++
 .../account/register/AccountRegisterTerm.js   | 10 +++++++++-
 .../account/find/AccounFindTabContainer.js    | 19 ++++++++-----------
 10 files changed, 72 insertions(+), 12 deletions(-)

diff --git a/src/components/account/find/AccountFindPassword.js b/src/components/account/find/AccountFindPassword.js
index 4569bf4..d236f4b 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 d1e6bde..b8a53b7 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 8855bb4..2ed1477 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 2e39f9b..b3c4c62 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 32ac5b6..2f45f29 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 ff6e725..96c9c80 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 30c86a6..edab7a9 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 020426f..a0332bb 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 731865d..0805d89 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 210e2b0..d93cc7e 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 = () => {
         </div> */}
         <div className='login-form info-search'>
           <div className='pal-card'>
-            <AccountFindTab  />
+            <AccountFindTab />
           </div>
           <div className='user-search-link'>
-            <Button.Ripple
-              color='flat-warning'
-              onClick={handlerRegister}
-            >
+            <Button.Ripple color='flat-warning' onClick={handlerRegister}>
               회원가입 바로가기
             </Button.Ripple>
           </div>
         </div>
       </div>
     </>
-    
   );
 };