수정사항

1. 이메일 인증 프로세스 순서를 변경

요청에 따라 아래와 같이 이메일 발송에서 이메일 인증 순서를 변경

• 기존 : ① → ②(링크) → ③

• 수정 : ① → ③ → ②(링크 사용x) → ③

1) 이메일 발송 시 이메일 인증 컴포넌트로 즉시 이동하기

SendEmail.js

import { useNavigate } from 'react-router-dom';

const navigate = useNavigate(); // 페이지 이동을 위한 navigate 훅 추가

navigate(`/verify-email/${url_code}/${email_code}`);

email 발송 후 바로 다음 컴포넌트(verify-email)로 이동하게 위해
SendEmail.js의 handleSubmit에 navigate 라이브러리를 호출했습니다.

SendEmailAPIView

return Response(
               {
                 "message": "인증코드가 발송 되었습니다.",
                 "url_code": url_code,
                 "email_code": email_code,
               },
                status=status.HTTP_200_OK,
           )

django에서는 SendEmailAPIView의 return 값에 url_code,email_code를 추가하여 이 값을 SendEmail.js의 navigate가 참고하여 verify-email url로 이동할 수 있게 하였습니다.

2. 이메일 인증 컴포넌트에 이메일 재발송 추가하기

1) 이메일 재발송시 URL을 갱신하여 재랜더링하기

<Route path="/verify-email/:url_code/:email_code" element={<VerifyEmailPage />} />

현재 이메일 인증 컴포넌트(verify-email) url은 백엔드에서 생성한 인증코드와 입력 이메일을 인코딩한 값으로 url을 구성합니다.

이메일이 재발송된다면 새롭게 인증코드가 생성되고 기존의 url이 아닌 갱신된 url로 컴포넌트를 재랜더링 하는 것이 필요합니다!

VerifyEmalil.js

const decodedEmail = atob(email_code); // Base64 디코딩

const handleResendEmail = async () => {
    try {
      const response = await sendEmail(decodedEmail);
      setMessage(response.message);
      // 새로운 URL로 이동하여 컴포넌트를 재렌더링
      navigate(`/verify-email/${response.url_code}/${response.email_code}`);
    } catch (error) {
      setMessage('이메일 재전송 중 오류가 발생했습니다. 다시 시도해주세요.');
    }
  };

이메일 재전송 버튼 클릭 시 사용될 handleResendEmail 함수를 추가합니다.

현재 url에서 useParams를 통해 email_code를 추출하여 Base64 디코딩 후 얻은 원래의 email 값을 decodedEmail에 저장하여 sendEmail API에 입력랍니다. 그리고 다시 입력 email로 인증코드를 전송합니다.

백엔드에서 새롭게 생성한 url_code, email_code 값을 통해 VerifyEmalil의 url을 재구성하고 navigate 합니다.

요약

navigate

• React Router에서 제공하는 훅(hook)인 useNavigate를 사용하여 컴포넌트의 URL을 변경하고 새로운 경로로 이동하게 했습니다.

• 주로 페이지 간 이동이나 URL 변경 시 사용됩니다.

atob

• 브라우저 내장 함수로, Base64 인코딩된 문자열을 디코딩하여 원래의 문자열로 복원합니다.

• 주로 Base64로 인코딩된 데이터를 읽거나 처리할 때 사용됩니다.

• 이메일 인증 프로세스에서는 URL에서 받은 인코딩된 이메일 주소를 디코딩하여 원래 이메일 주소로 복원하는 데 사용했습니다.