비밀번호 재설정 폼 제출 구조 리팩토링

[minji-gwak]

관련된 이슈 번호를 기입해주세요.

close #이슈번호 와 같은 형식으로 작성해주세요.

• close 비밀번호 재설정 폼 제출 구조 리팩토링 #34

어떤 부분이 변경됐나요?

어떤 부분을 변경했는지, 무슨 이유로 코드를 변경했는지 설명해주세요.

• 비밀번호 설정에 관련된 Server Action을 만들었습니다.
• Zod를 이용하여 Validation 처리했습니다.

추가 정보 (선택)

리뷰어가 특별히 봐주었으면 하는 부분이 있다면 작성해주세요.

• 폼 제출 후의 Server Action에서 빠뜨린 부분이 있을까요?

[sangpok]

아래와 같은 부분을 중점으로 수정 후에 다시 푸시해주시면 될 것 같아용. 내일까지 부탁드려요.

1. API 요청 Server Action 반환 값 수정
2. requestTokenValidation 실패 시 에러 핸들링

[sangpok]

나중에는 Fetcher로 따로 빼서 Endpoint만 신경쓸 수 있게 해도 좋을 것 같아요

[sangpok]

응답 자체가 해당 방식으로 오는 거에요, 따로 호출하는 API에서 지정해주는 게 아니구요.
그리고 fields로 담기는 게 아니고 payload 안에 필요한 fields가 담겨오는 거구요.
ActionStatus는 헷갈렸을 것 같긴 한데 백엔드랑 회의 전에 제가 임의로 설정해놓은 거라 enum의 형태라 현재 공유해놓은 응답 Status랑은 값이 달라요.

[sangpok]

어떨 때 catch로 들어오는지 알고 쓰신 건 아닌 것 같아서, fetch의 Error Handling에 대해서 알아볼 필요가 있을 것 같아요.
여기에 잡히는 catch는 네트워크 레벨에서 발생하는 오류이거나 CORS 오류가 오게 되고, 400, 500으로 오는 건 잡히지 않아요.

그래서 response의 status값을 확인해서(주로 response.ok) 에러에 따라 throw를 던져주는 형태가 되어야 합니다.

try {
  const res = await fetch("~");

  if (!res.ok) {
    // 아니면 응답에서 확인한다면 json으로 serialize하고 status를 확인
    if (res.status === "400") {
      throw new Error("404 Error")
    }

   if (res.status === "500") {
     throw new Error("500 Error")
   }

    throw new Error(res.status)
  }

  return res.json()
} catch (e) {
  
}

[sangpok]

물론 이것도 Fetcher를 만들어서 따로 수정하면 되겠지만, 관련 내용은 알고 계시는 게 좋을 것 같아서~

[sangpok]

에러 처리가 안 되어 있어요. fetch 과정에서 에러가 발생하면 작성하신 코드상으론 fields가 존재하지 않으므로 undefined가 반환될 텐데, undefined에서 email을 구조분해 하려고 하니 오류가 발생하게 될 거에요 ^~^

[sangpok]

맨 마지막 정규식은 앞단 min()과 max()로 처리해주고 있는데, 그럼에도 필요한 정규식일까요~?

[sangpok]

관련해서 디자인이 바뀔 것 같아서 input hidden으로 해놓는 게 좋을 것 같다는 거였는데, 제가 말씀을 못드렸네요😇
가져온 이메일을 disabled로 input에 채울 예정이에요. 관련해서는 나중에 따로 디자인 수정 후 알려드릴게요.