[Fix] 피드백 반영 후 수정

[onegood07]

📍 BackGround

• 세종대학교 아롬 동아리의 리액트 스터디에서 진행한 <우아한테크코스 - 페이먼츠 구현>을 React + Tsx를 사용해서 구현하기
• 1차 피드백을 받은 후 card가 아닌 card-refactor 브랜치를 새로 파서 수정한 코드

😎 Content

Type 추가

• 피드백 받은 대로 기존의 ErrorType 이외에 타입 추가

// cardtypes.ts
export type CardData = {
  numbers: {
    firstBlock: string;
    secondBlock: string;
    thirdBlock: string;
    fourthBlock: string;
  };
  expirationDate: {
    month: string;
    year: string;
  };
  owner: string;
};

자동 Focus

• useRef, useEffect 사용

// Home.tsx
const [isAllFocusDone, setIsAllFocusDone] = useState(false);

  const firstRef = useRef<HTMLInputElement>(null);
  const secondRef = useRef<HTMLInputElement>(null);
  const thirdRef = useRef<HTMLInputElement>(null);
  const fourthRef = useRef<HTMLInputElement>(null);
  const monthRef = useRef<HTMLInputElement>(null);
  const yearRef = useRef<HTMLInputElement>(null);
  const ownerRef = useRef<HTMLInputElement>(null);

onst currentInputRef = (
    key: string
  ): React.RefObject<HTMLInputElement> | null => {
    switch (key) {
      case INPUTS.FIRST_BLOCK:
        return firstRef;
      case INPUTS.SECOND_BLOCK:
        return secondRef;
      case INPUTS.THIRD_BLOCK:
        return thirdRef;
      case INPUTS.FOURTH_BLOCK:
        return fourthRef;
      case INPUTS.MONTH:
        return monthRef;
      case INPUTS.YEAR:
        return yearRef;
      case INPUTS.OWNER:
        return ownerRef;
      default:
        return null;
    }
  };

useEffect(() => {
    if (isAllFocusDone) return;
    if (cardNumbers.firstBlock.length === 4) secondRef.current?.focus();
    if (cardNumbers.secondBlock.length === 4) thirdRef.current?.focus();
    if (cardNumbers.thirdBlock.length === 4) fourthRef.current?.focus();
    if (cardNumbers.fourthBlock.length === 4) monthRef.current?.focus();
  }, [cardNumbers, isAllFocusDone]);

  useEffect(() => {
    if (isAllFocusDone) return;
    if (expirationDate.month.length === 2) yearRef.current?.focus();
    if (expirationDate.year.length === 2) {
      ownerRef.current?.focus();
      setIsAllFocusDone(true);
    }
  }, [expirationDate, isAllFocusDone]);

카드번호 숨기기

• onBlur, onFocus로 카드번호 숨기기

{Object.entries(cardNumbers).map(([key, value], index) => {
        const isNeedHiding =
          key === INPUTS.THIRD_BLOCK || key === INPUTS.FOURTH_BLOCK;

        return (
          <CardFormInput
            key={key}
            ref={currentInputRef(key)}
            name={key}
            cardInput={isNeedHiding && !isOnFocus ? hideNumber(value) : value}
            maxLength={4}
            width="50px"
            cardPlaceHolder={CARD_PLACEHOLDERS.CARD_NUMBER}
            hasError={
              cardError.numbers[key as keyof CardFormError["numbers"]].hasError
            }
            isDisable={
              cardError.numbers[key as keyof CardFormError["numbers"]].isDisable
            }
            handleChange={handleCardNumbersChange}
            handleOnInput={onInputOnlyNumber}
            handleOnFocus={() => setIsOnFocus(true)}
            handleBlur={() => setIsOnFocus(false)}
            autoFocus={index === 0}
          />
        );
      })}

📸 Screenshot

2025-05-14.5.19.53.mov