실전 코드 예제

컴포넌트 사용 방법과 실전 패턴을 코드 예제로 배웁니다.
각 탭에서 동작하는 예제와 함께 소스 코드를 확인할 수 있습니다.

로그인 폼 예제

react-hook-form과 Zod를 사용한 검증 폼 예제입니다.

LoginForm.tsx

react-hook-form으로 폼 처리

// LoginForm.tsx
'use client'

import { useForm } from 'react-hook-form'
import { zodResolver } from '@hookform/resolvers/zod'
import { z } from 'zod'
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form'
import { Input } from '@/components/ui/input'
import { Button } from '@/components/ui/button'

// Zod 스키마
const loginSchema = z.object({
  email: z.string().email('유효한 이메일을 입력하세요'),
  password: z.string().min(6, '최소 6글자 이상'),
})

type LoginForm = z.infer<typeof loginSchema>

export function LoginForm() {
  const form = useForm<LoginForm>({
    resolver: zodResolver(loginSchema),
    defaultValues: {
      email: '',
      password: '',
    },
  })

  const onSubmit = async (data: LoginForm) => {
    // API 호출 로직
    console.log(data)
  }

  return (
    <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
      <FormField
        control={form.control}
        name="email"
        render={({ field }) => (
          <FormItem>
            <FormLabel>이메일</FormLabel>
            <FormControl>
              <Input placeholder="user@example.com" {...field} />
            </FormControl>
            <FormMessage />
          </FormItem>
        )}
      />
      <Button type="submit">로그인</Button>
    </form>
  )
}

💾 코드 스니펫

validations/auth.ts

타입 안전한 검증 스키마

// validations/auth.ts
import { z } from 'zod'

export const loginSchema = z.object({
  email: z
    .string()
    .email('유효한 이메일을 입력해주세요')
    .trim()
    .toLowerCase(),
  password: z
    .string()
    .min(6, '최소 6글자 이상이어야 합니다')
    .max(100, '100글자 이하여야 합니다'),
})

export type LoginInput = z.infer<typeof loginSchema>

💾 코드 스니펫