파이널 프로젝트 - 회원가입(3) - 전화번호 인증

 

이번 포스트에서는 회원가입 절차 중 전화번호 인증에 관련된 부분이다.

 

먼저 , 구현된 UI는 다음과 같다.

먼저, 부모 컴포넌트에서 자식 컴포넌트로 Input에 관련된 변경 값을 추적하도록 해야한다.

왜냐하면 props로 전달받은 값이 아닌, 자식 컴포넌트에서 독립적으로 선언하여 값을 입력해봤자 부모 컴포넌트로 전달되지 않아 값이 입력되지 않기 때문이다.

 

부모 컴포넌트인 SIgn-in 컴포넌트에서 아래의 함수를 추가하여 변경되는 값에 따른 값을 추적하도록 한다.

  function handleInputChange(e: React.ChangeEvent<HTMLInputElement>) {
    const { key, value } = e.target;
    setFormData((prevData) => ({
      ...prevData,
      [key]: value,
    }));
  }

 

여기서 key는 각 항목별 이름을 의미한다. 예를들어

이름 : 차재식 과 같이..

 

그리고 자식 컴포넌트에서는 다음과 같이 타입을 선언하고

onInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void;

 

각 값인 이름, 전화번호에 따라 각각 값이 달라지게 한다.

  const handleNameChange = (e: ChangeEvent<HTMLInputElement>) => {
    setName(e.target.value);
    onInputChange(e);
  };

  const handlePhoneChange = (e: ChangeEvent<HTMLInputElement>) => {
    setPhone(e.target.value);
    onInputChange(e);
  };

 

모든 값이 알맞게 입력되었다면.. 

isCheckPhone의 값을 바탕으로 active되게 하였다.

  const goToNext = async () => {
    //...
    } else if (currentStep === 1 && isCheckPhone) {
      setCurrentStep(2);
      setIsLocked(true);

 

아쉬운 점

 

원래 계획으로는 네이버 인증 또는 aws 인증 서비스를 사용하려 하였으나, 실제로 적용하지는 못했다.