Zod enum 타입 error message 변경 방법

☘️ 시작하며...

현재 프로젝트에서 Zod 와 React-Hook-Form 조합으로 입력폼 내용을 구현하고 있고

아래 사진처럼 스키마 객체를 생성하여 폼 제출 시 유효성 검증을 만족하지 못하면 토스트 UI 가 뜨도록 구현을 했다.

편지 작성하기 스키마

현재 신고하기 기능을 구현하는 중이며, 신고종류를 라디오 버튼을 사용하여 고르게 되는데,

이 때 스키마객체에서 신고종류의 타입을 enum 으로 설정하였다. 

 

그래서 신고종류를 선택하지 않고 폼을 제출할 경우, 에러 토스트 UI 를 띄우려는데

아무생각없이 다른 타입처럼 enum 이 min 값을 1을 만족하지 못하였을 때, message 를 다음과 같이 설정하려고 했다.

// 적용 X
reportType: z
  .enum([report, ...otherReport])
  .min(1, '신고 타입을 선택해주세요.'),

 

하지만 zod enum 에는 min 속성이 없어 적용이 되지 않는다..!

그래서 zod enum 에서 에러 메시지를 설정할 수 있는 방법에 대해 글을 쓰게 되었다.

(+ 틀릴 수도 있음..!)

 

☘️ errorMap 사용

첫 번째 방법은 ErrorMap 을 사용하여 에러 메시지를 직접 설정하는 방법이다.

[Zod 공식문서] - ErrorMap 

GitHub - colinhacks/zod: TypeScript-first schema validation with static type inference

 

errorMap 사용방법

errorMap 의 파라미터는 issue 와 _ctx 가 있다.

errorMap

 

신고 종류를 입력하지 않았을 때, invalid_type 에러가 발생한다.

그래서 나는 발생한 에러(이슈)의 코드가 invalid_type 일 경우, 직접 메시지를 커스텀하였고

그 이외에는 기본 에러 메시지로 설정하였다.

reportType: z.enum([report, ...otherReport], {
  errorMap: (issue, ctx) => {
    if (issue.code === z.ZodIssueCode.invalid_type) {
      return { message: '신고 타입을 선택해주세요.' };
    } else {
      return { message: ctx.defaultError };
    }
  },
}),

 

결과가 잘 나온다!

결과

 

+) 이렇게 한꺼번에 에러 메시지를 수정할 수 있다.

reportType: z.enum([report, ...otherReport], {
  errorMap: () => ({ message: '신고 타입을 선택해주세요.' }),
}),

 

이슈 코드 종류

이슈 코드의 종류는 다음과 같다.

[Zod 공식문서] - Issue Code 

issue code 종류

 

☘️ error 파라미터

enum 스키마를 만드는 함수를 보면 파라미터로 다음 내용을 받을 수 있다.

enum 만드는 함수

파라미터

 

 

error 파라미터 사용방법

신고 종류를 선택하지 않았을 때, invalid_type 에러가 발생하므로 다음과 같이 설정하였고

reportType: z.enum([report, ...otherReport], {
  invalid_type_error: '신고 타입을 선택해주세요.',
}),

결과도 역시 잘 나온다!

결과

 

+) 참고로 실제로는 메시지를 직접 하드코딩 안 함

 

☘️ 마무리하며...

이 방법 말고도 다양한 방법이 있겠지만 나는 위에 있는 방법을 사용하였다.

직접 라이브러리 코드를 뜯어보면서 파라미터에 어떤 내용을 받을 수 있는지 살펴보고, 또 구글링과 공식 문서를 통해 문제를 해결하였다.

라이브러리 코드 뜯어보기(?)