07. Zod 통합 (Validation)

import { createInsertSchema } from 'drizzle-zod';
 
export const insertUserSchema = createInsertSchema(users, {
  // 이메일 필드 커스터마이징
  email: (schema) => schema.email({ message: "올바른 이메일 형식이 아닙니다." }),
 
  // 패스워드: 길이 제한 + 메시지
  password: (schema) => schema.min(8, { message: "비밀번호는 8자 이상이어야 합니다." }),
 
  // 선택적 필드 처리 (빈 문자열 -> null 처리 등)
  bio: (schema) => schema.max(500).optional().or(z.literal('')),
});

// 비밀번호 확인 로직 추가
export const signupSchema = insertUserSchema
  .extend({
    confirmPassword: z.string(), // DB에는 없지만 폼에는 있는 필드
  })
  .refine((data) => data.password === data.confirmPassword, {
    message: "비밀번호가 서로 일치하지 않습니다.",
    path: ["confirmPassword"], // 에러를 표시할 필드 위치
  });

// GET /posts?page=1&limit=10
// -> { page: "1", limit: "10" } (문자열임)
 
export const paginationSchema = z.object({
  // 문자열 "1"을 숫자 1로 변환 후 검증
  page: z.coerce.number().min(1).default(1),
  limit: z.coerce.number().min(1).max(100).default(10),
});

// apps/client/src/features/auth/SignUpForm.tsx
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { type NewUser, insertUserSchema } from '@repo/schema'; // 공유 패키지
 
export const SignUpForm = () => {
  const { register, handleSubmit, formState: { errors } } = useForm<NewUser>({
    resolver: zodResolver(insertUserSchema), // Zod 스키마 연결
  });
 
  const onSubmit = (data: NewUser) => {
    // data는 이미 검증 완료됨
    api.post('/users', data);
  };
 
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('email')} />
      <p>{errors.email?.message}</p> {/* "올바른 이메일 형식이 아닙니다" 출력 */}
      <button>가입</button>
    </form>
  );
};