구현 방법

1. 초창기에 Server Actions로 작업했다가 바꿈.
2. BE에서 User 객체(entity)를 Client와 Mover로 나눠 작업했기 때문에, 처음에 ClientSignInForm과 MoverSignInForm을 나눠 만들었다가, 추후 userType 속성을 부여해 SignInForm으로 컴포넌트를 합침.
3. [경로] 팀원이 Router Guard 파일 따로 만들어서 작업. 경로 충돌 문제 있었음. (담당 팀원이 문제 해결.)

문제 및 해결책 (+ 소셜 로그인)

• 문제:

  서버와 연동되는 유효성 검사를 통과 못할 때, “어떻게 해당 오류를 표시할까” 하는 고민이 있었다. (ex. 중복 이메일) 모달을 띄우면 되는 경우는 고민할 게 없지만, 해당 프로젝트에서는 토스트 알림은 써도 모달을 사용하지 않는다. 그래서 입력창 밑에 붉은 글씨로 오류 메시지를 띄워야 하는 상황이었다.

• 해결:

  소셜 로그인에는 토스트 알림을 띄우고 일반 회원가입/로그인 시엔 일반 메시지와 똑같은 방식으로 오류 메시지를 출력하는 방향으로 구현했다.

  

유효성 검사 처리 방식

• zod + react-hook-form
• 오류 메시지 보내는 형태를 회원가입은 객체로, 로그인은 메시지로 구현.
  • 회원가입: “중복 이메일+중복 전화번호”처럼 동시에 두 개 이상의 오류 메시지를 띄워야 하는 경우가 있음.
  • 로그인: 한 번에 오류 메시지 하나씩만 받음.

// 로그인
if (customError?.body.message) {
  if (message === "사용자를 찾을 수 없습니다.") {
     setError("email", {
        type: "server",
        message: message,
     });
  } else if (message === "비밀번호가 일치하지 않습니다.") {
     setError("password", {
        type: "server",
        message: message,
     });
  }
  
// 회원가입
const customError = error as AuthFetchError;

if (customError?.status) {
Object.entries(customError.body.data!).forEach(([key, message]) => {
   setError(key as keyof SignUpFormValues, {
      type: "server",
      message: String(message),
   });