refactor: event handler의 경우 handle pre-fix를 활용하도록 개선

bytrustu · Mar 7, 2024 · 26b0143 · 26b0143
1 parent bcd93a5
commit 26b0143
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 43 deletions.
diff --git a/src/hook/useInputs.tsx b/src/hook/useInputs.tsx
@@ -16,7 +16,7 @@ export const useInputs = (inputConfigs: UseInputsProps = INPUT_CONFIG_DEFAULTS)
   const [values, setValues] = useState(INITIAL_VALUES);
   const refs = inputConfigs.map(() => useRef<HTMLInputElement>(null));
 
-  const handleChange = (index: number) => (event: ChangeEvent<HTMLInputElement>) => {
+  const createChangeHandlerByIndex = (index: number) => (event: ChangeEvent<HTMLInputElement>) => {
     const { value: inputValue } = event.target;
     const config = inputConfigs[index];
     const isValid = !config.pattern || config.pattern.test(inputValue);
@@ -53,7 +53,7 @@ export const useInputs = (inputConfigs: UseInputsProps = INPUT_CONFIG_DEFAULTS)
     setFocus(index + 1, nextFocusPosition);
   };
 
-  const handleKeyUp = (index: number) => (e: KeyboardEvent<HTMLInputElement>) => {
+  const createKeyUpHandlerByIndex = (index: number) => (e: KeyboardEvent<HTMLInputElement>) => {
     const { pattern, maxLength } = inputConfigs[index];
     const {
       key,
@@ -105,5 +105,5 @@ export const useInputs = (inputConfigs: UseInputsProps = INPUT_CONFIG_DEFAULTS)
     }
   };
 
-  return { values, refs, handleChange, handleKeyUp, prevFocus, nextFocus };
+  return { values, refs, createChangeHandlerByIndex, createKeyUpHandlerByIndex, prevFocus, nextFocus };
 };
diff --git a/src/hook/useModal.ts b/src/hook/useModal.ts
@@ -3,13 +3,13 @@ import { useState } from 'react';
 export const useModal = (initialOpenState?: boolean) => {
   const [isOpen, setIsOpen] = useState(Boolean(initialOpenState));
 
-  const handleOpen = () => {
+  const open = () => {
     setIsOpen(true);
   };
 
-  const handleClose = () => {
+  const close = () => {
     setIsOpen(false);
   };
 
-  return { isOpen, handleOpen, handleClose };
+  return { isOpen, open, close };
 };
diff --git a/src/hook/useSelectCardBrand.tsx b/src/hook/useSelectCardBrand.tsx
@@ -4,14 +4,14 @@ import { CardBrand } from '@/type';
 
 export const useSelectCardBrand = () => {
   const [cardBrand, setCardBrand] = useState<CardBrand>({ label: '', color: '' });
-  const handleCardBrandSelect = (card: CardBrand) => {
+  const selectCardBrand = (card: CardBrand) => {
     const selectedCardBrand = CARD_BRANDS.find((cardBrand) => cardBrand.label === card.label);
     if (selectedCardBrand) {
       setCardBrand(selectedCardBrand);
     }
   };
   return {
-    selected: cardBrand,
-    handleSelect: handleCardBrandSelect,
+    cardBrand,
+    selectCardBrand,
   };
 };
diff --git a/src/pages/CardAddPage.tsx b/src/pages/CardAddPage.tsx
@@ -18,18 +18,14 @@ export const CardAddPage = () => {
   const { goToPrev, goToNext } = useFunnel();
   const { card, setCard } = useCard();
 
-  const { selected: selectedCardBrand, handleSelect: handleCardBrandSelect } = useSelectCardBrand();
-  const {
-    isOpen: isCardSelectOpen,
-    handleOpen: handleCardSelectOpen,
-    handleClose: handleCardSelectClose,
-  } = useModal(true);
+  const { cardBrand: selectedCardBrand, selectCardBrand: handleCardBrandSelect } = useSelectCardBrand();
+  const { isOpen: isCardSelectOpen, open: cardSelectOpen, close: cardSelectClose } = useModal(true);
 
   const {
     values: cardNumber,
     refs: cardNumberInputRefs,
-    handleChange: handleCardNumberChange,
-    handleKeyUp: handleCardNumberKeyDown,
+    createChangeHandlerByIndex: createChangeCardNumberCHandlerByIndex,
+    createKeyUpHandlerByIndex: createKeyUpCardNumberCHandlerByIndex,
   } = useInputs([
     CARD_NUMBER_INPUT_CONFIG,
     CARD_NUMBER_INPUT_CONFIG,
@@ -40,8 +36,8 @@ export const CardAddPage = () => {
   const {
     values: expirationDate,
     refs: expirationDateRefs,
-    handleChange: handleExpirationDateChange,
-    handleKeyUp: handleExpirationDateKeyUp,
+    createChangeHandlerByIndex: createChangeExpirationDateCHandlerByIndex,
+    createKeyUpHandlerByIndex: createKeyUpExpirationDateCHandlerByIndex,
   } = useInputs([CARD_EXPIRATION_DATE, CARD_EXPIRATION_DATE]);
   const handleExpirationDateBlur = (index: number) => (e: FocusEvent<HTMLInputElement>) => {
     if (e.target.value.length === 1) {
@@ -51,28 +47,28 @@ export const CardAddPage = () => {
         e.target.value = `0${e.target.value}`;
       }
     }
-    handleExpirationDateChange(index)(e);
+    createChangeExpirationDateCHandlerByIndex(index)(e);
   };
 
   const {
     values: ownerName,
     refs: ownerNameRefs,
-    handleChange: handleOwnerNameChange,
-    handleKeyUp: handleOwnerNameKeyUp,
+    createChangeHandlerByIndex: createChangeOwnerNameCHandlerByIndex,
+    createKeyUpHandlerByIndex: handleOwnerNameKeyUp,
   } = useInputs();
 
   const {
     values: securityCode,
     refs: securityCodeRefs,
-    handleChange: handleSecurityCodeChange,
-    handleKeyUp: handleSecurityCodeKeyUp,
+    createChangeHandlerByIndex: createChangeSecurityCodeHandlerByIndex,
+    createKeyUpHandlerByIndex: createdKeyUpSecurityCodeHandlerByIndex,
   } = useInputs([CARD_SECURITY_CODE]);
 
   const {
     values: password,
     refs: passwordRefs,
-    handleChange: handlePasswordChange,
-    handleKeyUp: handlePasswordKeyUp,
+    createChangeHandlerByIndex: createChangePasswordCHandlerByIndex,
+    createKeyUpHandlerByIndex: createdKeyUpPasswordByIndex,
   } = useInputs([CARD_PASSWORD, CARD_PASSWORD]);
 
   const isValidateCardBrand = Boolean(selectedCardBrand.label);
@@ -87,12 +83,12 @@ export const CardAddPage = () => {
     isValidateSecurityCode &&
     isValidatePassword;
 
-  const handleCardSelectSubmit = (cardBrand: CardBrand) => {
+  const cardSelectSubmit = (cardBrand: CardBrand) => {
     handleCardBrandSelect(cardBrand);
-    handleCardSelectClose();
+    cardSelectClose();
   };
 
-  const handleCardStateAdd = () => {
+  const setCardWithGoToNextPage = () => {
     setCard({
       ...card,
       cardNumber,
@@ -107,9 +103,7 @@ export const CardAddPage = () => {
 
   return (
     <>
-      {isCardSelectOpen && (
-        <CardSelectBottomSheet onSubmit={handleCardSelectSubmit} onOverlayClick={handleCardSelectClose} />
-      )}
+      {isCardSelectOpen && <CardSelectBottomSheet onSubmit={cardSelectSubmit} onOverlayClick={cardSelectClose} />}
       <AppLayout.Header>
         <Button
           variant="ghost"
@@ -142,16 +136,16 @@ export const CardAddPage = () => {
               cardNumber={cardNumber}
               expirationDate={expirationDate}
               ownerName={ownerName[0]}
-              onClick={handleCardSelectOpen}
+              onClick={cardSelectOpen}
             />
           </Box>
           <CardInput.Number
             id={CARD_NUMBER_ID}
             values={cardNumber}
             label="카드 번호"
             refs={cardNumberInputRefs}
-            onChange={handleCardNumberChange}
-            onKeyUp={handleCardNumberKeyDown}
+            onChange={createChangeCardNumberCHandlerByIndex}
+            onKeyUp={createKeyUpCardNumberCHandlerByIndex}
             _inputRoot={{
               backgroundColor: `${styleToken.color.gray200}`,
               borderRadius: '7px',
@@ -160,35 +154,35 @@ export const CardAddPage = () => {
           />
           <CardInput.ExpirationDate
             values={expirationDate}
-            onChange={handleExpirationDateChange}
-            onKeyUp={handleExpirationDateKeyUp}
+            onChange={createChangeExpirationDateCHandlerByIndex}
+            onKeyUp={createKeyUpExpirationDateCHandlerByIndex}
             onBlur={handleExpirationDateBlur}
             refs={expirationDateRefs}
           />
           <CardInput.OwnerName
             value={ownerName[0]}
-            onChange={handleOwnerNameChange(0)}
+            onChange={createChangeOwnerNameCHandlerByIndex(0)}
             onKeyUp={handleOwnerNameKeyUp(0)}
             ref={ownerNameRefs[0]}
           />
           <CardInput.SecurityCode
             value={securityCode[0]}
-            onChange={handleSecurityCodeChange(0)}
-            onKeyUp={handleSecurityCodeKeyUp(0)}
+            onChange={createChangeSecurityCodeHandlerByIndex(0)}
+            onKeyUp={createdKeyUpSecurityCodeHandlerByIndex(0)}
             ref={securityCodeRefs[0]}
           />
           <CardInput.Password
             values={password}
-            onChange={handlePasswordChange}
-            onKeyUp={handlePasswordKeyUp}
+            onChange={createChangePasswordCHandlerByIndex}
+            onKeyUp={createdKeyUpPasswordByIndex}
             refs={passwordRefs}
           />
         </VStack>
       </AppLayout.Body>
       <AppLayout.Footer>
         <HStack justifyContent="flex-end">
           {isValidateCardState && (
-            <Button variant="ghost" color="teal" fontSize="100px" onClick={handleCardStateAdd}>
+            <Button variant="ghost" color="teal" fontSize="100px" onClick={setCardWithGoToNextPage}>
               다음
             </Button>
           )}