내일배움캠프 최종 프로젝트 - 로그인과 회원가입 (7)

오늘 구현한 로그인 관련 기능은 다음과 같음

1. 비밀번호 옆에 눈 아이콘 클릭하면 비밀번호 보이기

• 상태 변수 'isShowPassword'를 사용하여 비밀번호 옆에 눈 아이콘 클릭하면 비밀번호 보이기가 됨
• 눈 아이콘('AiOutlineEye', 'AiOutlineEyeInvisible') 클릭 시 'isShowPassword' 상태를 변경하여 비밀번호 입력란의 타입을 'text' 또는 'password'로 전환하는 방식

const [isShowPassword, setIsShowPassword] = useState(false);
const clickTogglePasswordhandler = () => {
  setIsShowPassword(!isShowPassword);
};
// ...
<span onClick={clickTogglePasswordhandler}>
  {isShowPassword ? <AiOutlineEyeInvisible /> : <AiOutlineEye />}
</span>

2. 비밀번호 찾기 모달창 UI 구현

• 비밀번호 재설정을 위한 모달창 UI를 구현하고, 스타일 조정
• 'Modal', 'ModalContent', 'ModalHeader' 등을 사용하여 사용자 친화적인 모달창 디자인 구현

const [isResetModalOpen, setIsResetModalOpen] = useState(false);
// ...
<Modal isOpen={isResetModalOpen} onClose={closeResetModal}>
  {/* 모달 내용 */}
</Modal>

3. 로그인 UI 스타일링

• 로그인 페이지의 UI 요소들에 스타일을 적용하여 사용자 경험 개선
• CSS 클래스와 Next UI 라이브러리를 활용하여 로그인 폼의 시각적 디자인 강화

4. 로그인화면 진입시 로딩 UI 구현

• 로그인 페이지에 접속 시 사용자 인증 상태를 확인하는 동안 'MoonLoader'를 표시하여 로딩 상태를 시각적 표현
• 사용자에게 현재 로딩 중임을 알리는 피드백 제공

const [isLoading, setIsLoading] = useState(true);
// ...
if (isLoading) {
  return <MoonLoader />;
}

5. 비밀번호 찾기 기능 구현

• 'sendPasswordResetEmail' 함수를 사용하여 비밀번호 재설정 이메일을 발송하는 기능 추가
• 사용자가 등록된 이메일을 입력하면 해당 이메일로 비밀번호 재설정 링크 전송

const clickPasswordResetHandler = async () => {
  try {
    await sendPasswordResetEmail(auth, resetEmail);
    // 성공 메시지 처리
  } catch (error) {
    // 에러 처리
  }
};

6. 비밀번호 찾기 버튼 클릭 시 없는 이메일의 경우 예외 처리

• 비밀번호 재설정 시, 존재하지 않는 이메일을 입력한 경우 적절한 에러 메시지를 표시하는 로직 구현
• 사용자가 올바른 이메일을 입력하도록 안내하는 예외 처리 함

if (!emailExists) {
  setEmailCheckMessage('가입되지 않은 이메일입니다.');
  return;
}

오늘 구현한 회원가입 관련 기능은 다음과 같음

7. 프로그래스바 스타일링

• 회원가입 진행률을 표시하기 위해 프로그래스바를 구현했었는데 오늘은 스타일링함

   const progressBarStyle = {
     width: '${progress}%',
     transition: 'width 0.3s ease-in-out',
   };
   <div className="bg-gray-200 w-full h-4 rounded-lg">
     <div className="bg-blue-500 h-4 rounded-lg" style={progressBarStyle}></div>
   </div>

8. 이메일 중복 확인 시 빈칸과 정규표현식이 아닌 경우 추가

• 이메일 입력 시 빈칸 검사와 정규표현식 검사를 추가하여 유효성 체크
• 중복 확인 로직에 에러 메시지와 스타일 클래스를 동적으로 적용

   if (!email) {
     setEmailCheck('이메일을 입력해주세요');
     setEmailValidationClass('text-red-500');
   } else if (!emailValidation.test(email)) {
     setEmailCheck('유효한 이메일 형식이 아닙니다');
     setEmailValidationClass('text-red-500');
   }

9. 회원가입 UI 스타일링

• 회원가입 폼의 UI 요소들에 스타일을 적용하여 시각적인 효과가 있음
• CSS 클래스와 Next UI 컴포넌트를 활용하여 디자인 개선

10. 회원가입 버튼 UI 수정

• 회원가입 버튼의 스타일을 수정하여 사용자 인터페이스 개선
• 버튼 컴포넌트에 클래스를 적용하여 시각적으로 강조함

   <Button className="mt-[20px]  w-full bg-[#0051FF] text-white" size="lg">
     회원가입
   </Button>

11. 가입 완료 시 폭죽 추가

• 회원가입 완료 시 'confetti' 라이브러리를 사용하여 폭죽 애니메이션 추가
• 성공적인 가입의 순간에 사용자에게 시각적인 축하 메시지를 표시함

   const triggerConfetti = () => {
     confetti({
       angle: 90,
       spread: 180,
       particleCount: 100,
       origin: {y: 0.6},
     });
   };

12. 가입 진행 시 로딩 UI 설정

• 회원가입 진행 중 'SyncLoader'를 사용하여 로딩 인디케이터를 표시함
• 사용자에게 현재 가입 진행 중임을 알리는 피드백을 제공함

   {isJoining && (
     <div>
       <SyncLoader color="#0051FF" loading={isJoining} size={15} />
       <p>회원가입이 진행중입니다. 잠시만 기다려주세요...</p>
     </div>
   )}

오늘의 한줄평 : 유능함을 증명하는 거 같아서 좋다.