refactor: 별도의 파일에 있던 이벤트핸들러 index.js로 이동

src/pages/AddPages/AddCompletePage/CardNicknameForm/index.js

@@ -1,7 +1,7 @@
 import { useRef, useEffect } from 'react';
 import { useHistory } from 'react-router-dom';
 import { Button, Form, Input } from '../../../../components';
-import { handleNicknameInputChange, handleNicknameSubmit } from './handler';
+import { MAX_NICKNAME_LENGTH, ROUTE } from '../../../../constants';
 
 export const CardNicknameForm = (props) => {
   const { cardInfo, setCardInfo, initialNickname, addCardInfoToList } = props;
@@ -34,3 +34,14 @@ export const CardNicknameForm = (props) => {
     </Form>
   );
 };
+
+function handleNicknameInputChange({ e, setNickname }) {
+  const slicedInputValue = e.target.value.slice(0, MAX_NICKNAME_LENGTH);
+  setNickname(slicedInputValue);
+}
+
+function handleNicknameSubmit({ e, cardInfo, addCardInfoToList, history }) {
+  e.preventDefault();
+  addCardInfoToList(cardInfo);
+  history.push(ROUTE.HOME);
+}

src/pages/AddPages/AddFormPage/CardCompanySelectModal/index.js

@@ -1,6 +1,5 @@
 /* eslint-disable react/no-array-index-key */
 import { Button, Label, Modal } from '../../../../components';
-import { handleCardCompanySelect, handleDimmedAreaClick } from './handler';
 import { CARD_COMPANY_LIST } from '../../../../constants';
 
 export const CardCompanySelectModal = ({ isOpen, setCardInfo, setIsModalOpen }) => {
@@ -38,3 +37,20 @@ function CardCompanyItem({ company, setCardInfo, setIsModalOpen }) {
     </li>
   );
 }
+
+function handleCardCompanySelect({ e, setCardInfo, setIsModalOpen }) {
+  const name = e.target.name;
+  const color = e.target.style.backgroundColor;
+
+  setCardInfo((prevState) => ({ ...prevState, company: { name, color } }));
+  setIsModalOpen(false);
+}
+
+function handleDimmedAreaClick({ e, setIsModalOpen }) {
+  const Modal = e.currentTarget;
+  const ModalViewPort = Modal.firstChild;
+
+  if (e.target === Modal || e.target === ModalViewPort) {
+    setIsModalOpen(false);
+  }
+}

src/pages/AddPages/AddFormPage/CardInfoForm/ExpirationDateInput/index.js

@@ -1,7 +1,6 @@
 import { useRef, forwardRef } from 'react';
 import { Container, Input, Label, Text } from '../../../../../components';
-import { handleExpirationDateInputChange } from './handler';
-import { MONTH, YEAR } from '../../../../../constants';
+import { MONTH, YEAR, EXPIRATION_DATE_LENGTH } from '../../../../../constants';
 
 export const ExpirationDateInput = forwardRef((props, monthRef) => {
   const { expirationDate, setExpirationDate, ownerNameInputRef } = props;
@@ -39,4 +38,15 @@ export const ExpirationDateInput = forwardRef((props, monthRef) => {
   );
 });
 
+function handleExpirationDateInputChange(props) {
+  const { e, expirationDate, setExpirationDate, nextRef } = props;
+  const inputName = e.target.name;
+  const slicedInputValue = e.target.value.slice(0, EXPIRATION_DATE_LENGTH[inputName]);
+
+  if (slicedInputValue.length === EXPIRATION_DATE_LENGTH[inputName]) {
+    nextRef[inputName]?.current.focus();
+  }
+  setExpirationDate({ ...expirationDate, [inputName]: slicedInputValue });
+}
+
 ExpirationDateInput.displayName = 'ExpirationDateInput';

src/pages/AddPages/AddFormPage/CardInfoForm/OwnerNameInput/index.js

@@ -1,6 +1,5 @@
 import { forwardRef } from 'react';
 import { Input, Label, Text } from '../../../../../components';
-import { handleOwnerNameInputChange, handleOwnerNameInputBlur } from './handler';
 import { MAX_OWNER_NAME_LENGTH } from '../../../../../constants';
 
 export const OwnerNameInput = forwardRef((props, ref) => {
@@ -27,4 +26,18 @@ export const OwnerNameInput = forwardRef((props, ref) => {
   );
 });
 
+const regExpOnlyAlphabet = /[^a-zA-Z ]+/g;
+
+function handleOwnerNameInputChange(props) {
+  const { e, setOwnerName } = props;
+  const inputValue = e.target.value;
+  const inputValueOnlyAlphabet = inputValue.replace(regExpOnlyAlphabet, '');
+
+  setOwnerName(inputValueOnlyAlphabet.toUpperCase());
+}
+
+export const handleOwnerNameInputBlur = ({ setIsOwnerNameFilled }) => {
+  setIsOwnerNameFilled(true);
+};
+
 OwnerNameInput.displayName = 'OwnerNameInput';

src/pages/AddPages/AddFormPage/CardInfoForm/PasswordInput/index.js

@@ -1,7 +1,6 @@
 import { useRef, forwardRef } from 'react';
 import { Input, Label } from '../../../../../components';
-import { handlePasswordInputChange } from './handler';
-import { FIRST, SECOND } from '../../../../../constants';
+import { FIRST, SECOND, PASSWORD_UNIT_LENGTH } from '../../../../../constants';
 
 export const PasswordInput = forwardRef((props, firstRef) => {
   const { password, setPassword } = props;
@@ -38,4 +37,15 @@ export const PasswordInput = forwardRef((props, firstRef) => {
   );
 });
 
+function handlePasswordInputChange(props) {
+  const { e, password, setPassword, secondRef } = props;
+  const inputName = e.target.name;
+  const slicedInputValue = e.target.value.slice(0, PASSWORD_UNIT_LENGTH);
+
+  if (inputName === FIRST && slicedInputValue.length === PASSWORD_UNIT_LENGTH) {
+    secondRef?.current.focus();
+  }
+  setPassword({ ...password, [inputName]: slicedInputValue });
+}
+
 PasswordInput.displayName = 'PasswordInput';

src/pages/AddPages/AddFormPage/CardInfoForm/SecurityCodeInput/index.js

@@ -1,5 +1,4 @@
 import { Button, Input, Label } from '../../../../../components';
-import { handleSecurityCodeInputChange } from './handler';
 import { SECURITY_CODE_LENGTH } from '../../../../../constants';
 import cvcImage from '../../../../../images/cvc.png';
 
@@ -26,3 +25,13 @@ export const SecurityCodeInput = (props) => {
     </>
   );
 };
+
+function handleSecurityCodeInputChange(props) {
+  const { e, setSecurityCode, passwordInputRef } = props;
+  const slicedInputValue = e.target.value.slice(0, SECURITY_CODE_LENGTH);
+
+  if (slicedInputValue.length === SECURITY_CODE_LENGTH) {
+    passwordInputRef.current.focus();
+  }
+  setSecurityCode(slicedInputValue);
+}

src/pages/AddPages/AddFormPage/CardInfoForm/index.js

@@ -6,8 +6,8 @@ import { ExpirationDateInput } from './ExpirationDateInput';
 import { OwnerNameInput } from './OwnerNameInput';
 import { SecurityCodeInput } from './SecurityCodeInput';
 import { PasswordInput } from './PasswordInput';
-import { handleCardInfoSubmit } from './handler';
-import { isFormFulFilled } from './validator';
+import { isFormFulFilled, isCardNameFulfilled } from './validator';
+import { ROUTE } from '../../../../constants';
 
 export const CardInfoForm = (props) => {
   const { initialCardInfo, cardInfo, setCardInfo, setIsModalOpen } = props;
@@ -62,3 +62,13 @@ export const CardInfoForm = (props) => {
     </Form>
   );
 };
+
+function handleCardInfoSubmit({ e, initialCardInfo, cardInfo, setIsModalOpen, history }) {
+  e.preventDefault();
+
+  if (!isCardNameFulfilled(cardInfo.company, initialCardInfo.company)) {
+    setIsModalOpen(true);
+    return;
+  }
+  history.push(ROUTE.ADD_COMPLETE);
+}