Form Validate

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

'use client'

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

  const { login, loginError, isLoggingIn, logout } = useAuth()
  const username = useUserinfoStore((state) => state.username)

  const form = useForm<LoginFormValues>({
    resolver: zodResolver(loginSchema),
    defaultValues: {
      email: '',
      password: ''
    },
    mode: 'onBlur'
  })

  function onSubmit(values: LoginFormValues) {
    login.mutate(values)
  }

  const handleLogout = () => {
    logout()
    form.reset({
      email: '',
      password: ''
    })
  }

  const isLoggedIn = username !== ''

  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>
  )
}