React Hook Form

react-hook-form과 zod, zodResolver로 스키마 검증을 연결한 예시입니다. DS TextFieldSingleLine은 Controller의 field를 inputProps로 넘깁니다.

폼 예시

핵심 코드

스키마는 z.object로 정의하고, useForm의 resolver에 zodResolver(formSchema)를 넘깁니다.

import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";
import { z } from "zod";

const formSchema = z.object({
  name: z.string().trim().min(2, "이름은 2자 이상"),
  email: z
    .string()
    .trim()
    .min(1, "이메일을 입력해 주세요")
    .pipe(z.email("이메일 형식이 올바르지 않습니다")),
  acceptTerms: z.boolean().refine((v) => v === true, {
    message: "필수 동의",
  }),
});

type FormValues = z.infer<typeof formSchema>;

const { control, handleSubmit } = useForm<FormValues>({
  resolver: zodResolver(formSchema),
  defaultValues: { name: "", email: "", acceptTerms: false },
  mode: "onBlur",
});

폼 예시

핵심 코드

아트봉봉스쿨은더 큰 화면에서 쓸 수 있어요