refactor: CardExpirationDate 입력값이 1자리 인경우 처리 개선

bytrustu · Mar 6, 2024 · 3d90152 · 3d90152
1 parent f3240a0
commit 3d90152
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 8 deletions.
diff --git a/src/components/CardInput/CardExpirationDateInput.tsx b/src/components/CardInput/CardExpirationDateInput.tsx
@@ -1,4 +1,4 @@
-import { ChangeEvent, KeyboardEvent, RefObject } from 'react';
+import { ChangeEvent, KeyboardEvent, RefObject, FocusEvent } from 'react';
 import { CARD_INPUT_COLOR, CARD_INPUT_TEXT_FONT_SIZE, CARD_INPUT_TEXT_FONT_WEIGHT } from './constants/cardInputStyles';
 import { HStack, Label, TextField, Typography, VStack } from '@/shared/components';
 import { styleToken } from '@/shared/styles';
@@ -11,19 +11,23 @@ type CardExpirationDateInputProps = Partial<{
   values: string[];
   onChange: (index: number) => (event: ChangeEvent<HTMLInputElement>) => void;
   onKeyUp: (index: number) => (event: KeyboardEvent<HTMLInputElement>) => void;
+  onBlur: (index: number) => (event: FocusEvent<HTMLInputElement>) => void;
 }>;
 
-export const CardExpirationDateInput = ({ refs, values, onChange, onKeyUp }: CardExpirationDateInputProps) => {
-  const handleCardNumberPartChange = (index: number) => (e: ChangeEvent<HTMLInputElement>) => {
+export const CardExpirationDateInput = ({ refs, values, onChange, onKeyUp, onBlur }: CardExpirationDateInputProps) => {
+  const handleExpirationDateOnChange = (index: number) => (e: ChangeEvent<HTMLInputElement>) => {
     const datesString = e.target.value;
     if (index === 0 && datesString.length === 2 && !validateMonthString(datesString)) {
       console.warn('월 형식이 올바르지 않습니다. (01 ~ 12)');
       return;
     }
-
     onChange?.(index)(e);
   };
 
+  const handleExpirationDateKeyUp = (index: number) => (e: KeyboardEvent<HTMLInputElement>) => {
+    onKeyUp?.(index)(e);
+  };
+
   return (
     <VStack>
       <Label htmlFor={`${CARD_EXPIRATIONS_DATE_ID}-0`} variant="caption" color={styleToken.color.gray700}>
@@ -42,8 +46,9 @@ export const CardExpirationDateInput = ({ refs, values, onChange, onKeyUp }: Car
           ref={refs?.[0]}
           variant="unstyled"
           value={values?.[0]}
-          onChange={handleCardNumberPartChange(0)}
-          onKeyUp={onKeyUp?.(0)}
+          onChange={handleExpirationDateOnChange(0)}
+          onKeyUp={handleExpirationDateKeyUp?.(0)}
+          onBlur={onBlur?.(0)}
           maxLength={2}
           width="30px"
           color={CARD_INPUT_COLOR}
@@ -71,14 +76,15 @@ export const CardExpirationDateInput = ({ refs, values, onChange, onKeyUp }: Car
           ref={refs?.[1]}
           variant="unstyled"
           value={values?.[1]}
-          onChange={handleCardNumberPartChange(1)}
-          onKeyUp={onKeyUp?.(1)}
+          onChange={handleExpirationDateOnChange(1)}
+          onKeyUp={handleExpirationDateKeyUp?.(1)}
           maxLength={2}
           width="24px"
           color={CARD_INPUT_COLOR}
           textAlign="left"
           fontSize={CARD_INPUT_TEXT_FONT_SIZE}
           fontWeight={CARD_INPUT_TEXT_FONT_WEIGHT}
+          onBlur={onBlur?.(1)}
           placeholder="YY"
           _placeholder={{
             fontSize: '16px',

diff --git a/src/pages/CardAddPage.tsx b/src/pages/CardAddPage.tsx
@@ -1,3 +1,4 @@
+import { FocusEvent } from 'react';
 import ArrowLeft from '@/assets/arrow-left.svg';
 import { AppLayout, CardDisplay, useCard, useFunnel, CardSelectBottomSheet, CardInput } from '@/components';
 import { ONLY_NUMBERS_REGEX } from '@/constant';
@@ -42,6 +43,16 @@ export const CardAddPage = () => {
     handleChange: handleExpirationDateChange,
     handleKeyUp: handleExpirationDateKeyUp,
   } = useInputs([CARD_EXPIRATION_DATE, CARD_EXPIRATION_DATE]);
+  const handleExpirationDateBlur = (index: number) => (e: FocusEvent<HTMLInputElement>) => {
+    if (e.target.value.length === 1) {
+      if (e.target.value === '0') {
+        e.target.value = '';
+        return;
+      }
+      e.target.value = `0${e.target.value}`;
+    }
+    handleExpirationDateChange(index)(e);
+  };
 
   const {
     values: ownerName,
@@ -151,6 +162,7 @@ export const CardAddPage = () => {
             values={expirationDate}
             onChange={handleExpirationDateChange}
             onKeyUp={handleExpirationDateKeyUp}
+            onBlur={handleExpirationDateBlur}
             refs={expirationDateRefs}
           />
           <CardInput.OwnerName