zod에 Data 형식 맞춰보기(feat. time)

zod 의 날짜를 지정하는 타입은 두가지 방식이 있다. 

1. zod.date()
2. zod.string().date()

1번의 zod.date() 형식은 바로 Date 형식을 넣어주면 호환이 잘 됨. 

2번의 string이라는 단어에 맞춰 zod.string().date() 는 문자열로 지정 됨. 해당 문자열은 yyyy-MM-dd 

따라서 Date 형식을 바로 넣는다면 parse시 invalid 라는 에러 메시지가 뜸. 떄문에 Date 형식을 yyyy-MM-dd 으로 포맷할 필요가 있음.

해당 포맷은 date-fns/format 으로 진행했음

// start,end Date가 zod.string().date() 일 경우
const { from, to } = selectedDate;
if (from) setValue("startDate", format(from,'yyyy-MM-dd'));
if (to) setValue("endDate", format(to,'yyyy-MM-dd'));
      
      
// zod.date()일 경우

const { from, to } = selectedDate;
if (from) setValue("startDate", from);
if (to) setValue("endDate", to);

 

참고로 zod.time() 은 아래 이미지 형식에 맞추면 됨

 

나 같은 경우 select 안에 옵션들로 30분 단위의 "HH:MM"를 준뒤 select의 값이 변경 되면 그것을 감지하여 `${value}:00`으로 넣어서

HH:MM:SS 형식을 만들었음