form-validate with React Hook Form

Overview

해당 기능은 공통업무 기능입니다. 다음과 같이 미리 준비된 Boilerplate confy-app 형태로 제공됩니다.

Form 상태관리는 React Hook Form 라이브러리를 사용하여 구현되어 있습니다.
유효성 검증은 Zod 라이브러리를 사용하여 구현되어 있습니다.
예제에 사용되는 <Form />는 @confy-ui/react라이브러리를 통해 제공됩니다.

Usage

1. 컴포넌트 계층 구조

<Form>
  <FormField
    control={...}
    name="..."
    render={() => (
      <FormItem>
        <FormLabel />
        <FormControl>
          { /* 사용하려는 구성요소 정의: TextFild, Checkbox, Select 등등 */}
        </FormControl>
        <FormDescription />
        <FormMessage />
      </FormItem>
    )}
  />
</Form>

2. 기본 사용법 예시

텍스트 입력 페이지 작성

'use client'

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

const formSchema = z.object({
  username: z.string().min(2, {
    message: '두 글자 이상 적어주세요.'
  })
})

export default function App() {
  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      username: ''
    }
  })

  function onSubmit(values: z.infer<typeof formSchema>) {
    console.log(values)
  }

  return (
    <div style={{ padding: '1rem' }}>
      <Form {...form}>
        <form onSubmit={form.handleSubmit(onSubmit)}>
          <FormField
            control={form.control}
            name='username'
            render={({ field }) => (
              <FormItem>
                <FormLabel>Username</FormLabel>
                <FormControl>
                  <TextField.Root
                    size='1'
                    placeholder='이름을 입력해주세요. 플레이스홀더 입니다.'
                    {...field}
                  />
                </FormControl>
                <FormDescription>
                  이름을 입력해주세요. 설명 부분입니다.
                </FormDescription>
                <FormMessage />
              </FormItem>
            )}
          />
          <Button type='submit'>작성</Button>
        </form>
      </Form>
    </div>
  )
}