interface UserForm {
  name: string;
  email: string;
  age: number;
}

function submitForm(data: UserForm) {
  // 여기서 data는 UserForm 타입이라고 보장되지만...
  // 실제로 런타임에 들어오는 값은 뭐가 될지 몰라!
}

npm install zod
# 또는
yarn add zod

import { z } from 'zod';

// 스키마 정의
const userFormSchema = z.object({
  name: z.string().min(2, '이름은 최소 2글자 이상이어야 해요'),
  email: z.string().email('올바른 이메일 형식이 아니에요'),
  age: z.number().min(18, '18세 이상만 가입할 수 있어요').max(100),
  password: z.string()
    .min(8, '비밀번호는 최소 8자 이상이어야 해요')
    .regex(/[A-Z]/, '대문자를 최소 1개 포함해야 해요')
    .regex(/[0-9]/, '숫자를 최소 1개 포함해야 해요'),
  agreeToTerms: z.boolean().refine(val => val === true, {
    message: '약관에 동의해야 해요'
  })
});

// 타입 자동 추론! 🎉
type UserForm = z.infer<typeof userFormSchema>;

// UserForm 타입은 이렇게 추론돼:
// {
//   name: string;
//   email: string;
//   age: number;
//   password: string;
//   agreeToTerms: boolean;
// }

function handleFormSubmit(formData: unknown) {
  try {
    // 데이터 검증 및 파싱
    const validatedData = userFormSchema.parse(formData);
    
    // 여기서 validatedData는 UserForm 타입으로 보장돼!
    console.log('검증 성공:', validatedData);
    
    // API 호출 등의 작업 수행
    await submitToServer(validatedData);
    
  } catch (error) {
    if (error instanceof z.ZodError) {
      // 검증 에러 처리
      console.error('검증 실패:', error.errors);
      
      // 에러 메시지 포맷팅
      const formattedErrors = error.errors.map(err => ({
        field: err.path.join('.'),
        message: err.message
      }));
      
      displayErrors(formattedErrors);
    }
  }
}

// 1. 선택적 필드와 기본값
const profileSchema = z.object({
  username: z.string(),
  bio: z.string().optional(), // 선택적 필드
  theme: z.enum(['light', 'dark']).default('light'), // 기본값
  notifications: z.boolean().default(true)
});

// 2. 조건부 검증
const conditionalSchema = z.object({
  accountType: z.enum(['personal', 'business']),
  companyName: z.string().optional()
}).refine(data => {
  // business 타입이면 companyName이 필수
  if (data.accountType === 'business') {
    return data.companyName !== undefined && data.companyName.length > 0;
  }
  return true;
}, {
  message: '사업자 계정은 회사명이 필수예요',
  path: ['companyName']
});

// 3. 배열과 중첩 객체
const orderSchema = z.object({
  orderId: z.string().uuid(),
  items: z.array(
    z.object({
      productId: z.string(),
      quantity: z.number().positive(),
      price: z.number().positive()
    })
  ).min(1, '최소 1개 이상의 상품이 필요해요'),
  shippingAddress: z.object({
    street: z.string(),
    city: z.string(),
    zipCode: z.string().regex(/^\d{5}$/, '우편번호는 5자리 숫자여야 해요')
  }),
  totalAmount: z.number()
}).refine(data => {
  // 총액이 아이템 가격의 합과 일치하는지 검증
  const calculatedTotal = data.items.reduce(
    (sum, item) => sum + (item.price * item.quantity), 
    0
  );
  return Math.abs(calculatedTotal - data.totalAmount) < 0.01;
}, {
  message: '총액이 일치하지 않아요'
});

// 4. 변환(Transform)
const dateSchema = z.object({
  birthDate: z.string().transform(str => new Date(str)),
  registeredAt: z.string().datetime().transform(str => new Date(str))
});

// 5. 유니온 타입
const paymentSchema = z.discriminatedUnion('method', [
  z.object({
    method: z.literal('card'),
    cardNumber: z.string().length(16),
    cvv: z.string().length(3)
  }),
  z.object({
    method: z.literal('bank'),
    accountNumber: z.string(),
    bankCode: z.string()
  }),
  z.object({
    method: z.literal('paypal'),
    email: z.string().email()
  })
]);

const result = userFormSchema.safeParse(formData);

if (result.success) {
  // 타입이 자동으로 좁혀져!
  const data = result.data; // UserForm 타입
  console.log('성공:', data);
} else {
  // 에러 처리
  const errors = result.error.errors;
  console.log('실패:', errors);
}

npm install yup
# 타입스크립트 타입 정의도 함께 설치돼

import * as yup from 'yup';

// 스키마 정의
const userFormSchema = yup.object({
  name: yup.string()
    .min(2, '이름은 최소 2글자 이상이어야 해요')
    .required('이름은 필수예요'),
  email: yup.string()
    .email('올바른 이메일 형식이 아니에요')
    .required('이메일은 필수예요'),
  age: yup.number()
    .min(18, '18세 이상만 가입할 수 있어요')
    .max(100)
    .required('나이는 필수예요'),
  password: yup.string()
    .min(8, '비밀번호는 최소 8자 이상이어야 해요')
    .matches(/[A-Z]/, '대문자를 최소 1개 포함해야 해요')
    .matches(/[0-9]/, '숫자를 최소 1개 포함해야 해요')
    .required('비밀번호는 필수예요'),
  agreeToTerms: yup.boolean()
    .oneOf([true], '약관에 동의해야 해요')
    .required()
});

// 타입 추론
type UserForm = yup.InferType<typeof userFormSchema>;

// 검증
async function validateForm(data: unknown) {
  try {
    const validatedData = await userFormSchema.validate(data, {
      abortEarly: false // 모든 에러를 한번에 수집
    });
    
    console.log('검증 성공:', validatedData);
    return validatedData;
    
  } catch (error) {
    if (error instanceof yup.ValidationError) {
      console.error('검증 실패:', error.errors);
      // error.inner에 모든 검증 에러가 담겨있어
      const formattedErrors = error.inner.map(err => ({
        field: err.path,
        message: err.message
      }));
      return formattedErrors;
    }
  }
}

// 1. 조건부 검증 (when)
const conditionalSchema = yup.object({
  accountType: yup.string().oneOf(['personal', 'business']).required(),
  companyName: yup.string().when('accountType', {
    is: 'business',
    then: schema => schema.required('사업자는 회사명이 필수예요'),
    otherwise: schema => schema.notRequired()
  })
});

// 2. 커스텀 검증
const customSchema = yup.object({
  username: yup.string()
    .test('unique-username', '이미 사용중인 아이디예요', async (value) => {
      if (!value) return false;
      // API 호출로 중복 체크
      const isAvailable = await checkUsernameAvailability(value);
      return isAvailable;
    })
    .required()
});

// 3. 참조(Reference)를 이용한 검증
const passwordSchema = yup.object({
  password: yup.string()
    .min(8)
    .required('비밀번호를 입력해주세요'),
  confirmPassword: yup.string()
    .oneOf([yup.ref('password')], '비밀번호가 일치하지 않아요')
    .required('비밀번호 확인을 입력해주세요')
});

// 4. 배열 검증
const tagsSchema = yup.object({
  tags: yup.array()
    .of(yup.string().min(2).max(20))
    .min(1, '최소 1개의 태그가 필요해요')
    .max(5, '최대 5개까지만 가능해요')
    .required()
});

// 5. 중첩 객체와 배열
const complexSchema = yup.object({
  user: yup.object({
    profile: yup.object({
      firstName: yup.string().required(),
      lastName: yup.string().required()
    })
  }),
  posts: yup.array().of(
    yup.object({
      title: yup.string().required(),
      content: yup.string().required(),
      tags: yup.array().of(yup.string())
    })
  )
});

npm install react-hook-form @hookform/resolvers zod

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

// 스키마 정의
const signupSchema = z.object({
  username: z.string()
    .min(3, '아이디는 3글자 이상이어야 해요')
    .max(20, '아이디는 20글자 이하여야 해요')
    .regex(/^[a-zA-Z0-9_]+$/, '영문, 숫자, 언더스코어만 사용 가능해요'),
  email: z.string()
    .email('올바른 이메일 형식이 아니에요'),
  password: z.string()
    .min(8, '비밀번호는 8글자 이상이어야 해요')
    .regex(/[A-Z]/, '대문자를 포함해야 해요')
    .regex(/[a-z]/, '소문자를 포함해야 해요')
    .regex(/[0-9]/, '숫자를 포함해야 해요'),
  confirmPassword: z.string(),
  age: z.number()
    .min(18, '18세 이상만 가입 가능해요')
    .max(120, '올바른 나이를 입력해주세요'),
  terms: z.boolean()
    .refine(val => val === true, '약관에 동의해주세요')
}).refine(data => data.password === data.confirmPassword, {
  message: '비밀번호가 일치하지 않아요',
  path: ['confirmPassword']
});

// 타입 추론
type SignupForm = z.infer<typeof signupSchema>;

function SignupForm() {
  const {
    register,
    handleSubmit,
    formState: { errors, isSubmitting },
    reset
  } = useForm<SignupForm>({
    resolver: zodResolver(signupSchema),
    mode: 'onBlur' // 포커스를 벗어날 때 검증
  });

  const onSubmit = async (data: SignupForm) => {
    try {
      console.log('폼 데이터:', data);
      // API 호출
      await fetch('/api/signup', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(data)
      });
      
      alert('회원가입 성공! 🎉');
      reset(); // 폼 초기화
      
    } catch (error) {
      console.error('회원가입 실패:', error);
    }
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div>
        <label htmlFor="username">아이디</label>
        <input
          id="username"
          type="text"
          {...register('username')}
          placeholder="아이디를 입력하세요"
        />
        {errors.username && (
          <span className="error">{errors.username.message}</span>
        )}
      </div>

      <div>
        <label htmlFor="email">이메일</label>
        <input
          id="email"
          type="email"
          {...register('email')}
          placeholder="email@example.com"
        />
        {errors.email && (
          <span className="error">{errors.email.message}</span>
        )}
      </div>

      <div>
        <label htmlFor="password">비밀번호</label>
        <input
          id="password"
          type="password"
          {...register('password')}
          placeholder="비밀번호를 입력하세요"
        />
        {errors.password && (
          <span className="error">{errors.password.message}</span>
        )}
      </div>

      <div>
        <label htmlFor="confirmPassword">비밀번호 확인</label>
        <input
          id="confirmPassword"
          type="password"
          {...register('confirmPassword')}
          placeholder="비밀번호를 다시 입력하세요"
        />
        {errors.confirmPassword && (
          <span className="error">{errors.confirmPassword.message}</span>
        )}
      </div>

      <div>
        <label htmlFor="age">나이</label>
        <input
          id="age"
          type="number"
          {...register('age', { valueAsNumber: true })}
          placeholder="나이를 입력하세요"
        />
        {errors.age && (
          <span className="error">{errors.age.message}</span>
        )}
      </div>

      <div>
        <label>
          <input
            type="checkbox"
            {...register('terms')}
          />
          이용약관에 동의합니다
        </label>
        {errors.terms && (
          <span className="error">{errors.terms.message}</span>
        )}
      </div>

      <button type="submit" disabled={isSubmitting}>
        {isSubmitting ? '처리중...' : '회원가입'}
      </button>
    </form>
  );
}

import { useForm } from 'react-hook-form';
import { yupResolver } from '@hookform/resolvers/yup';
import * as yup from 'yup';

const signupSchema = yup.object({
  username: yup.string()
    .min(3, '아이디는 3글자 이상이어야 해요')
    .max(20, '아이디는 20글자 이하여야 해요')
    .matches(/^[a-zA-Z0-9_]+$/, '영문, 숫자, 언더스코어만 사용 가능해요')
    .required('아이디를 입력해주세요'),
  email: yup.string()
    .email('올바른 이메일 형식이 아니에요')
    .required('이메일을 입력해주세요'),
  password: yup.string()
    .min(8, '비밀번호는 8글자 이상이어야 해요')
    .matches(/[A-Z]/, '대문자를 포함해야 해요')
    .matches(/[a-z]/, '소문자를 포함해야 해요')
    .matches(/[0-9]/, '숫자를 포함해야 해요')
    .required('비밀번호를 입력해주세요'),
  confirmPassword: yup.string()
    .oneOf([yup.ref('password')], '비밀번호가 일치하지 않아요')
    .required('비밀번호 확인을 입력해주세요'),
  age: yup.number()
    .min(18, '18세 이상만 가입 가능해요')
    .max(120, '올바른 나이를 입력해주세요')
    .required('나이를 입력해주세요'),
  terms: yup.boolean()
    .oneOf([true], '약관에 동의해주세요')
    .required()
});

type SignupForm = yup.InferType<typeof signupSchema>;

function SignupForm() {
  const {
    register,
    handleSubmit,
    formState: { errors, isSubmitting }
  } = useForm<SignupForm>({
    resolver: yupResolver(signupSchema)
  });

  // 나머지는 Zod와 동일!
}

import { z } from 'zod';

type AccountType = 'personal' | 'business';

function createAccountSchema(accountType: AccountType) {
  const baseSchema = z.object({
    accountType: z.enum(['personal', 'business']),
    email: z.string().email(),
    password: z.string().min(8)
  });

  if (accountType === 'business') {
    return baseSchema.extend({
      companyName: z.string().min(2, '회사명을 입력해주세요'),
      businessNumber: z.string()
        .regex(/^\d{10}$/, '사업자등록번호는 10자리 숫자예요'),
      companyAddress: z.string().min(5, '회사 주소를 입력해주세요')
    });
  }

  return baseSchema.extend({
    firstName: z.string().min(1, '이름을 입력해주세요'),
    lastName: z.string().min(1, '성을 입력해주세요'),
    birthDate: z.string().regex(/^\d{4}-\d{2}-\d{2}$/, 'YYYY-MM-DD 형식으로 입력해주세요')
  });
}

// 사용
function DynamicForm() {
  const [accountType, setAccountType] = useState<AccountType>('personal');
  const schema = useMemo(() => createAccountSchema(accountType), [accountType]);
  
  const { register, handleSubmit } = useForm({
    resolver: zodResolver(schema)
  });
  
  // ...
}

// Zod 방식
const usernameSchema = z.string()
  .min(3)
  .refine(async (username) => {
    // 디바운싱을 위해 약간의 딜레이
    await new Promise(resolve => setTimeout(resolve, 300));
    
    const response = await fetch(`/api/check-username?username=${username}`);
    const { available } = await response.json();
    return available;
  }, {
    message: '이미 사용중인 아이디예요'
  });

// React Hook Form에서 사용
function UsernameInput() {
  const { register, formState: { errors } } = useForm({
    resolver: zodResolver(z.object({ username: usernameSchema })),
    mode: 'onBlur' // 포커스를 벗어날 때만 검증
  });
  
  return (
    <div>
      <input {...register('username')} />
      {errors.username && <span>{errors.username.message}</span>}
    </div>
  );
}

import { z } from 'zod';

// 각 단계별 스키마
const step1Schema = z.object({
  email: z.string().email(),
  password: z.string().min(8)
});

const step2Schema = z.object({
  firstName: z.string().min(1),
  lastName: z.string().min(1),
  birthDate: z.string()
});

const step3Schema = z.object({
  address: z.string().min(5),
  city: z.string().min(2),
  zipCode: z.string().regex(/^\d{5}$/)
});

// 전체 스키마
const fullSchema = step1Schema.merge(step2Schema).merge(step3Schema);

type FullForm = z.infer<typeof fullSchema>;

function MultiStepForm() {
  const [step, setStep] = useState(1);
  const [formData, setFormData] = useState<Partial<FullForm>>({});

  const getCurrentSchema = () => {
    switch(step) {
      case 1: return step1Schema;
      case 2: return step2Schema;
      case 3: return step3Schema;
      default: return step1Schema;
    }
  };

  const { register, handleSubmit, formState: { errors } } = useForm({
    resolver: zodResolver(getCurrentSchema()),
    defaultValues: formData
  });

  const onSubmit = (data: any) => {
    const updatedData = { ...formData, ...data };
    setFormData(updatedData);

    if (step < 3) {
      setStep(step + 1);
    } else {
      // 최종 제출
      console.log('최종 데이터:', updatedData);
      submitToServer(updatedData);
    }
  };

  return (
    <div>
      <h2>단계 {step} / 3</h2>
      <form onSubmit={handleSubmit(onSubmit)}>
        {step === 1 && (
          <>
            <input {...register('email')} placeholder="이메일" />
            {errors.email && <span>{errors.email.message}</span>}
            
            <input {...register('password')} type="password" placeholder="비밀번호" />
            {errors.password && <span>{errors.password.message}</span>}
          </>
        )}

        {step === 2 && (
          <>
            <input {...register('firstName')} placeholder="이름" />
            {errors.firstName && <span>{errors.firstName.message}</span>}
            
            <input {...register('lastName')} placeholder="성" />
            {errors.lastName && <span>{errors.lastName.message}</span>}
            
            <input {...register('birthDate')} type="date" />
            {errors.birthDate && <span>{errors.birthDate.message}</span>}
          </>
        )}

        {step === 3 && (
          <>
            <input {...register('address')} placeholder="주소" />
            {errors.address && <span>{errors.address.message}</span>}
            
            <input {...register('city')} placeholder="도시" />
            {errors.city && <span>{errors.city.message}</span>}
            
            <input {...register('zipCode')} placeholder="우편번호" />
            {errors.zipCode && <span>{errors.zipCode.message}</span>}
          </>
        )}

        <div>
          {step > 1 && (
            <button type="button" onClick={() => setStep(step - 1)}>
              이전
            </button>
          )}
          <button type="submit">
            {step === 3 ? '완료' : '다음'}
          </button>
        </div>
      </form>
    </div>
  );
}

const fileSchema = z.object({
  avatar: z.custom<FileList>()
    .refine(files => files?.length === 1, '파일을 선택해주세요')
    .refine(
      files => files?.[0]?.size <= 5 * 1024 * 1024,
      '파일 크기는 5MB 이하여야 해요'
    )
    .refine(
      files => ['image/jpeg', 'image/png', 'image/webp'].includes(files?.[0]?.type),
      'JPG, PNG, WEBP 파일만 업로드 가능해요'
    )
    .transform(files => files?.[0])
});

function FileUploadForm() {
  const { register, handleSubmit, formState: { errors } } = useForm({
    resolver: zodResolver(z.object({ avatar: fileSchema }))
  });

  const onSubmit = async (data: any) => {
    const formData = new FormData();
    formData.append('avatar', data.avatar);
    
    await fetch('/api/upload', {
      method: 'POST',
      body: formData
    });
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input
        type="file"
        accept="image/*"
        {...register('avatar')}
      />
      {errors.avatar && <span>{errors.avatar.message}</span>}
      <button type="submit">업로드</button>
    </form>
  );
}

src/
├── schemas/
│   ├── auth.schema.ts        # 인증 관련 스키마
│   ├── user.schema.ts        # 사용자 관련 스키마
│   ├── product.schema.ts     # 상품 관련 스키마
│   └── index.ts              # 스키마 export
├── types/
│   ├── auth.types.ts         # 인증 타입
│   ├── user.types.ts         # 사용자 타입
│   └── index.ts
├── components/
│   ├── forms/
│   │   ├── LoginForm.tsx
│   │   ├── SignupForm.tsx
│   │   └── ProfileForm.tsx
│   └── common/
│       ├── FormInput.tsx     # 재사용 가능한 입력 컴포넌트
│       └── FormError.tsx     # 에러 표시 컴포넌트
└── utils/
    └── validation.ts         # 검증 유틸리티

// schemas/auth.schema.ts
import { z } from 'zod';

export const loginSchema = z.object({
  email: z.string()
    .email('올바른 이메일 형식이 아니에요')
    .min(1, '이메일을 입력해주세요'),
  password: z.string()
    .min(1, '비밀번호를 입력해주세요'),
  rememberMe: z.boolean().optional()
});

export const signupSchema = z.object({
  email: z.string().email('올바른 이메일 형식이 아니에요'),
  password: z.string()
    .min(8, '비밀번호는 8글자 이상이어야 해요')
    .regex(/[A-Z]/, '대문자를 포함해야 해요')
    .regex(/[0-9]/, '숫자를 포함해야 해요'),
  confirmPassword: z.string(),
  username: z.string()
    .min(3, '아이디는 3글자 이상이어야 해요')
    .regex(/^[a-zA-Z0-9_]+$/, '영문, 숫자, 언더스코어만 가능해요'),
  agreeToTerms: z.boolean()
    .refine(val => val === true, '약관에 동의해주세요')
}).refine(data => data.password === data.confirmPassword, {
  message: '비밀번호가 일치하지 않아요',
  path: ['confirmPassword']
});

export const resetPasswordSchema = z.object({
  email: z.string().email('올바른 이메일 형식이 아니에요')
});

// schemas/index.ts
export * from './auth.schema';
export * from './user.schema';
export * from './product.schema';

// types/auth.types.ts
import { z } from 'zod';
import { loginSchema, signupSchema, resetPasswordSchema } from '@/schemas';

export type LoginForm = z.infer<typeof loginSchema>;
export type SignupForm = z.infer<typeof signupSchema>;
export type ResetPasswordForm = z.infer<typeof resetPasswordSchema>;

// API 응답 타입
export interface AuthResponse {
  token: string;
  user: {
    id: string;
    email: string;
    username: string;
  };
}

export interface AuthError {
  message: string;
  field?: string;
}

// components/common/FormInput.tsx
import { UseFormRegister, FieldError } from 'react-hook-form';

interface FormInputProps {
  label: string;
  name: string;
  type?: string;
  placeholder?: string;
  register: UseFormRegister<any>;
  error?: FieldError;
  required?: boolean;
}

export function FormInput({
  label,
  name,
  type = 'text',
  placeholder,
  register,
  error,
  required = false
}: FormInputProps) {
  return (
    <div className="form-group">
      <label htmlFor={name}>
        {label}
        {required && <span className="required">*</span>}
      </label>
      <input
        id={name}
        type={type}
        placeholder={placeholder}
        {...register(name)}
        className={error ? 'error' : ''}
      />
      {error && (
        <span className="error-message">{error.message}</span>
      )}
    </div>
  );
}

// components/common/FormError.tsx
interface FormErrorProps {
  message?: string;
}

export function FormError({ message }: FormErrorProps) {
  if (!message) return null;
  
  return (
    <div className="form-error">
      <span>⚠️ {message}</span>
    </div>
  );
}

// components/forms/LoginForm.tsx
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { loginSchema } from '@/schemas';
import { LoginForm as LoginFormType } from '@/types';
import { FormInput, FormError } from '@/components/common';

export function LoginForm() {
  const {
    register,
    handleSubmit,
    formState: { errors, isSubmitting },
    setError
  } = useForm<LoginFormType>({
    resolver: zodResolver(loginSchema)
  });

  const onSubmit = async (data: LoginFormType) => {
    try {
      const response = await fetch('/api/auth/login', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(data)
      });

      if (!response.ok) {
        const error = await response.json();
        setError('root', {
          message: error.message || '로그인에 실패했어요'
        });
        return;
      }

      const result = await response.json();
      // 로그인 성공 처리
      console.log('로그인 성공:', result);
      
    } catch (error) {
      setError('root', {
        message: '네트워크 오류가 발생했어요'
      });
    }
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)} className="login-form">
      <h2>로그인</h2>
      
      <FormError message={errors.root?.message} />
      
      <FormInput
        label="이메일"
        name="email"
        type="email"
        placeholder="email@example.com"
        register={register}
        error={errors.email}
        required
      />
      
      <FormInput
        label="비밀번호"
        name="password"
        type="password"
        placeholder="비밀번호를 입력하세요"
        register={register}
        error={errors.password}
        required
      />
      
      <div className="form-group">
        <label>
          <input type="checkbox" {...register('rememberMe')} />
          로그인 상태 유지
        </label>
      </div>
      
      <button type="submit" disabled={isSubmitting}>
        {isSubmitting ? '로그인 중...' : '로그인'}
      </button>
    </form>
  );
}

// 옵션 1: onChange - 입력할 때마다 검증 (가장 빠른 피드백, 성능 부담)
useForm({
  mode: 'onChange'
});

// 옵션 2: onBlur - 포커스를 벗어날 때 검증 (균형잡힌 선택)
useForm({
  mode: 'onBlur'
});

// 옵션 3: onSubmit - 제출할 때만 검증 (가장 가벼움)
useForm({
  mode: 'onSubmit'
});

// 옵션 4: 혼합 - 첫 제출 후에는 onChange로 전환
useForm({
  mode: 'onSubmit',
  reValidateMode: 'onChange'
});

import { useDebounce } from 'use-debounce';

function SearchForm() {
  const [searchTerm, setSearchTerm] = useState('');
  const [debouncedSearchTerm] = useDebounce(searchTerm, 500);

  useEffect(() => {
    if (debouncedSearchTerm) {
      // 디바운싱된 값으로 검색
      performSearch(debouncedSearchTerm);
    }
  }, [debouncedSearchTerm]);

  return (
    <input
      value={searchTerm}
      onChange={(e) => setSearchTerm(e.target.value)}
      placeholder="검색어를 입력하세요"
    />
  );
}

// 또는 React Hook Form의 watch와 함께
function DebouncedValidation() {
  const { watch, setValue } = useForm();
  const username = watch('username');
  const [debouncedUsername] = useDebounce(username, 500);

  useEffect(() => {
    if (debouncedUsername) {
      checkUsernameAvailability(debouncedUsername);
    }
  }, [debouncedUsername]);
}

function DynamicForm({ userType }: { userType: string }) {
  // ❌ 나쁜 예: 매 렌더링마다 새 스키마 생성
  const schema = createSchema(userType);

  // ✅ 좋은 예: userType이 변경될 때만 새 스키마 생성
  const schema = useMemo(() => createSchema(userType), [userType]);

  const { register, handleSubmit } = useForm({
    resolver: zodResolver(schema)
  });

  // ...
}

// ❌ 비효율적: 모든 필드를 항상 렌더링
function IneffcientForm() {
  const { register, watch } = useForm();
  const accountType = watch('accountType');

  return (
    <>
      <select {...register('accountType')}>
        <option value="personal">개인</option>
        <option value="business">사업자</option>
      </select>

      {/* 항상 렌더링되지만 숨겨짐 */}
      <div style={{ display: accountType === 'business' ? 'block' : 'none' }}>
        <input {...register('companyName')} />
      </div>
    </>
  );
}

// ✅ 효율적: 필요할 때만 렌더링
function EfficientForm() {
  const { register, watch } = useForm();
  const accountType = watch('accountType');

  return (
    <>
      <select {...register('accountType')}>
        <option value="personal">개인</option>
        <option value="business">사업자</option>
      </select>

      {/* 조건부 렌더링 */}
      {accountType === 'business' && (
        <input {...register('companyName')} />
      )}
    </>
  );
}

// ❌ 전체 라이브러리 import
import * as yup from 'yup';

// ✅ 필요한 것만 import (tree-shaking 가능)
import { object, string, number } from 'yup';

// Zod는 기본적으로 tree-shaking이 잘 돼
import { z } from 'zod'; // 이미 최적화되어 있음

// schemas/signup.schema.ts
import { z } from 'zod';

export const signupSchema = z.object({
  // 기본 정보
  email: z.string()
    .min(1, '이메일을 입력해주세요')
    .email('올바른 이메일 형식이 아니에요')
    .refine(async (email) => {
      // 이메일 중복 체크
      const response = await fetch(`/api/check-email?email=${email}`);
      const { available } = await response.json();
      return available;
    }, '이미 사용중인 이메일이에요'),

  username: z.string()
    .min(3, '아이디는 3글자 이상이어야 해요')
    .max(20, '아이디는 20글자 이하여야 해요')
    .regex(/^[a-zA-Z0-9_]+$/, '영문, 숫자, 언더스코어만 사용 가능해요')
    .refine(async (username) => {
      const response = await fetch(`/api/check-username?username=${username}`);
      const { available } = await response.json();
      return available;
    }, '이미 사용중인 아이디예요'),

  password: z.string()
    .min(8, '비밀번호는 8글자 이상이어야 해요')
    .max(100, '비밀번호가 너무 길어요')
    .regex(/[A-Z]/, '대문자를 최소 1개 포함해야 해요')
    .regex(/[a-z]/, '소문자를 최소 1개 포함해야 해요')
    .regex(/[0-9]/, '숫자를 최소 1개 포함해야 해요')
    .regex(/[^A-Za-z0-9]/, '특수문자를 최소 1개 포함해야 해요'),

  confirmPassword: z.string()
    .min(1, '비밀번호 확인을 입력해주세요'),

  // 개인 정보
  firstName: z.string()
    .min(1, '이름을 입력해주세요')
    .max(50, '이름이 너무 길어요'),

  lastName: z.string()
    .min(1, '성을 입력해주세요')
    .max(50, '성이 너무 길어요'),

  birthDate: z.string()
    .regex(/^\d{4}-\d{2}-\d{2}$/, 'YYYY-MM-DD 형식으로 입력해주세요')
    .refine((date) => {
      const birthDate = new Date(date);
      const today = new Date();
      const age = today.getFullYear() - birthDate.getFullYear();
      return age >= 18;
    }, '18세 이상만 가입할 수 있어요'),

  phone: z.string()
    .regex(/^010-\d{4}-\d{4}$/, '010-0000-0000 형식으로 입력해주세요')
    .optional(),

  // 약관 동의
  agreeToTerms: z.boolean()
    .refine(val => val === true, '이용약관에 동의해주세요'),

  agreeToPrivacy: z.boolean()
    .refine(val => val === true, '개인정보 처리방침에 동의해주세요'),

  agreeToMarketing: z.boolean()
    .optional()

}).refine(data => data.password === data.confirmPassword, {
  message: '비밀번호가 일치하지 않아요',
  path: ['confirmPassword']
});

export type SignupFormData = z.infer<typeof signupSchema>;

// components/SignupForm.tsx
import { useState } from 'react';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { signupSchema, SignupFormData } from '@/schemas/signup.schema';

export function SignupForm() {
  const [step, setStep] = useState(1);
  const [isSuccess, setIsSuccess] = useState(false);

  const {
    register,
    handleSubmit,
    watch,
    formState: { errors, isSubmitting, isValid },
    trigger
  } = useForm<SignupFormData>({
    resolver: zodResolver(signupSchema),
    mode: 'onBlur'
  });

  const password = watch('password');

  // 비밀번호 강도 계산
  const getPasswordStrength = (pwd: string): number => {
    if (!pwd) return 0;
    let strength = 0;
    if (pwd.length >= 8) strength++;
    if (/[A-Z]/.test(pwd)) strength++;
    if (/[a-z]/.test(pwd)) strength++;
    if (/[0-9]/.test(pwd)) strength++;
    if (/[^A-Za-z0-9]/.test(pwd)) strength++;
    return strength;
  };

  const passwordStrength = getPasswordStrength(password);

  const onSubmit = async (data: SignupFormData) => {
    try {
      const response = await fetch('/api/auth/signup', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(data)
      });

      if (!response.ok) {
        throw new Error('회원가입에 실패했어요');
      }

      setIsSuccess(true);
      
    } catch (error) {
      console.error('회원가입 오류:', error);
      alert('회원가입 중 오류가 발생했어요. 다시 시도해주세요.');
    }
  };

  const handleNextStep = async () => {
    const fieldsToValidate = step === 1 
      ? ['email', 'username', 'password', 'confirmPassword']
      : ['firstName', 'lastName', 'birthDate', 'phone'];

    const isStepValid = await trigger(fieldsToValidate as any);
    
    if (isStepValid) {
      setStep(step + 1);
    }
  };

  if (isSuccess) {
    return (
      <div className="success-message">
        <h2>🎉 회원가입 완료!</h2>
        <p>환영합니다! 이메일을 확인해주세요.</p>
      </div>
    );
  }

  return (
    <div className="signup-container">
      <div className="progress-bar">
        <div 
          className="progress" 
          style={{ width: `${(step / 3) * 100}%` }}
        />
      </div>

      <h2>회원가입 - {step}/3</h2>

      <form onSubmit={handleSubmit(onSubmit)}>
        {/* Step 1: 계정 정보 */}
        {step === 1 && (
          <div className="form-step">
            <h3>계정 정보</h3>

            <div className="form-group">
              <label htmlFor="email">이메일 *</label>
              <input
                id="email"
                type="email"
                {...register('email')}
                placeholder="email@example.com"
              />
              {errors.email && (
                <span className="error">{errors.email.message}</span>
              )}
            </div>

            <div className="form-group">
              <label htmlFor="username">아이디 *</label>
              <input
                id="username"
                type="text"
                {...register('username')}
                placeholder="3-20자의 영문, 숫자, 언더스코어"
              />
              {errors.username && (
                <span className="error">{errors.username.message}</span>
              )}
            </div>

            <div className="form-group">
              <label htmlFor="password">비밀번호 *</label>
              <input
                id="password"
                type="password"
                {...register('password')}
                placeholder="8자 이상, 대소문자, 숫자, 특수문자 포함"
              />
              {password && (
                <div className="password-strength">
                  <div className="strength-bar">
                    <div 
                      className={`strength-fill strength-${passwordStrength}`}
                      style={{ width: `${(passwordStrength / 5) * 100}%` }}
                    />
                  </div>
                  <span className="strength-text">
                    {passwordStrength <= 2 && '약함'}
                    {passwordStrength === 3 && '보통'}
                    {passwordStrength === 4 && '강함'}
                    {passwordStrength === 5 && '매우 강함'}
                  </span>
                </div>
              )}
              {errors.password && (
                <span className="error">{errors.password.message}</span>
              )}
            </div>

            <div className="form-group">
              <label htmlFor="confirmPassword">비밀번호 확인 *</label>
              <input
                id="confirmPassword"
                type="password"
                {...register('confirmPassword')}
                placeholder="비밀번호를 다시 입력하세요"
              />
              {errors.confirmPassword && (
                <span className="error">{errors.confirmPassword.message}</span>
              )}
            </div>
          </div>
        )}

        {/* Step 2: 개인 정보 */}
        {step === 2 && (
          <div className="form-step">
            <h3>개인 정보</h3>

            <div className="form-row">
              <div className="form-group">
                <label htmlFor="lastName">성 *</label>
                <input
                  id="lastName"
                  type="text"
                  {...register('lastName')}
                  placeholder="홍"
                />
                {errors.lastName && (
                  <span className="error">{errors.lastName.message}</span>
                )}
              </div>

              <div className="form-group">
                <label htmlFor="firstName">이름 *</label>
                <input
                  id="firstName"
                  type="text"
                  {...register('firstName')}
                  placeholder="길동"
                />
                {errors.firstName && (
                  <span className="error">{errors.firstName.message}</span>
                )}
              </div>
            </div>

            <div className="form-group">
              <label htmlFor="birthDate">생년월일 *</label>
              <input
                id="birthDate"
                type="date"
                {...register('birthDate')}
              />
              {errors.birthDate && (
                <span className="error">{errors.birthDate.message}</span>
              )}
            </div>

            <div className="form-group">
              <label htmlFor="phone">휴대폰 번호</label>
              <input
                id="phone"
                type="tel"
                {...register('phone')}
                placeholder="010-0000-0000"
              />
              {errors.phone && (
                <span className="error">{errors.phone.message}</span>
              )}
            </div>
          </div>
        )}

        {/* Step 3: 약관 동의 */}
        {step === 3 && (
          <div className="form-step">
            <h3>약관 동의</h3>

            <div className="terms-group">
              <label className="checkbox-label">
                <input
                  type="checkbox"
                  {...register('agreeToTerms')}
                />
                <span>[필수] 이용약관에 동의합니다</span>
              </label>
              {errors.agreeToTerms && (
                <span className="error">{errors.agreeToTerms.message}</span>
              )}
            </div>

            <div className="terms-group">
              <label className="checkbox-label">
                <input
                  type="checkbox"
                  {...register('agreeToPrivacy')}
                />
                <span>[필수] 개인정보 처리방침에 동의합니다</span>
              </label>
              {errors.agreeToPrivacy && (
                <span className="error">{errors.agreeToPrivacy.message}</span>
              )}
            </div>

            <div className="terms-group">
              <label className="checkbox-label">
                <input
                  type="checkbox"
                  {...register('agreeToMarketing')}
                />
                <span>[선택] 마케팅 정보 수신에 동의합니다</span>
              </label>
            </div>
          </div>
        )}

        {/* 버튼 */}
        <div className="form-actions">
          {step > 1 && (
            <button
              type="button"
              onClick={() => setStep(step - 1)}
              className="btn-secondary"
            >
              이전
            </button>
          )}

          {step < 3 ? (
            <button
              type="button"
              onClick={handleNextStep}
              className="btn-primary"
            >
              다음
            </button>
          ) : (
            <button
              type="submit"
              disabled={isSubmitting}
              className="btn-primary"
            >
              {isSubmitting ? '처리중...' : '가입하기'}
            </button>
          )}
        </div>
      </form>
    </div>
  );
}

// ❌ 문제: 폼 데이터와 스키마 타입이 불일치
const schema = z.object({
  age: z.number()
});

// HTML input은 항상 string을 반환!
<input type="number" {...register('age')} />

// ✅ 해결: valueAsNumber 옵션 사용
<input 
  type="number" 
  {...register('age', { valueAsNumber: true })} 
/>

// 또는 스키마에서 변환
const schema = z.object({
  age: z.string().transform(val => parseInt(val, 10))
});

// ❌ 문제: 매 입력마다 API 호출
const schema = z.object({
  username: z.string().refine(async (val) => {
    const response = await fetch(`/api/check/${val}`);
    return response.ok;
  })
});

// ✅ 해결: 디바운싱 + onBlur 모드
useForm({
  resolver: zodResolver(schema),
  mode: 'onBlur' // 포커스를 벗어날 때만 검증
});

// 또는 별도의 검증 로직으로 분리
const { setError, clearErrors } = useForm();
const username = watch('username');
const [debouncedUsername] = useDebounce(username, 500);

useEffect(() => {
  if (debouncedUsername) {
    checkUsername(debouncedUsername).then(available => {
      if (!available) {
        setError('username', {
          message: '이미 사용중인 아이디예요'
        });
      } else {
        clearErrors('username');
      }
    });
  }
}, [debouncedUsername]);

// ❌ 문제: 중첩 객체의 에러 접근
const schema = z.object({
  address: z.object({
    street: z.string(),
    city: z.string()
  })
});

// 이렇게 하면 타입 에러!
{errors.address.street?.message}

// ✅ 해결: 옵셔널 체이닝 제대로 사용
{errors.address?.street?.message}

// 또는 더 안전하게
{errors.address && errors.address.street && (
  <span>{errors.address.street.message}</span>
)}

// ❌ 문제: 배열 필드를 일반 필드처럼 처리
const schema = z.object({
  tags: z.array(z.string())
});

<input {...register('tags')} /> // 작동 안 함!

// ✅ 해결: useFieldArray 사용
import { useFieldArray } from 'react-hook-form';

function TagsInput() {
  const { control, register } = useForm({
    defaultValues: {
      tags: ['']
    }
  });

  const { fields, append, remove } = useFieldArray({
    control,
    name: 'tags'
  });

  return (
    <div>
      {fields.map((field, index) => (
        <div key={field.id}>
          <input {...register(`tags.${index}`)} />
          <button type="button" onClick={() => remove(index)}>
            삭제
          </button>
        </div>
      ))}
      <button type="button" onClick={() => append('')}>
        태그 추가
      </button>
    </div>
  );
}

// ❌ 문제: 조건부 필드가 항상 검증됨
const schema = z.object({
  hasCompany: z.boolean(),
  companyName: z.string().min(1) // 항상 필수!
});

// ✅ 해결: 조건부 검증 적용
const schema = z.object({
  hasCompany: z.boolean(),
  companyName: z.string().optional()
}).refine(data => {
  if (data.hasCompany) {
    return data.companyName && data.companyName.length > 0;
  }
  return true;
}, {
  message: '회사명을 입력해주세요',
  path: ['companyName']
});

// 또는 Yup의 when 사용
const schema = yup.object({
  hasCompany: yup.boolean(),
  companyName: yup.string().when('hasCompany', {
    is: true,
    then: schema => schema.required('회사명을 입력해주세요'),
    otherwise: schema => schema.notRequired()
  })
});