react-hook-form + zod

 

 

기존에는 input값을 전반적으로 관리하는 useState들이 필요했는데 따로 선언하지 않아도되어 편하다🤔

yup도 있는데 typescript 호환은 zod가 더 잘된다고 한다.

공통 util, validation 정책을 가져가기에도 좋은 선택이 될 것 같다.

 

'use client'

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

const schema = z.object({
    content: z.string()
        .min(30, "최소 30자 이상 입력해주세요.")
        .refine((val) => /입력값/.test(val) && /출력값/.test(val), {
            message: "입력값과 출력값이 포함되어야 합니다."
        })
})
type FormData = z.infer<typeof schema>

export default function SpecForm() {
    const { register, handleSubmit, formState: { errors, isValid } } = useForm<FormData>({
        resolver: zodResolver(schema),
        mode: 'onChange'
    })

    const onSubmit = (data: FormData) => {
        console.log(data)
    }

    return (
        <form onSubmit={handleSubmit(onSubmit)} className="max-w-xl mx-auto">
            <h2 className="font-bold text-lg">📝 기획서를 입력해주세요!</h2>

            <textarea
                {...register('content')}
                placeholder="예: 사용자는 글을 입력(입력값)하면, 실시간 리스트(출력값)가 표시됩니다."
                className="w-full h-40 p-4 border rounded resize-none mt-2"
            />

            {errors.content && (
                <p className="text-red-500 text-sm mt-1">{errors.content.message}</p>
            )}

            <button
                type="submit"
                disabled={!isValid}
                className={`mt-4 px-4 py-2 rounded ${isValid ? 'bg-blue-500 text-white' : 'bg-gray-300'}`}
            >
                분석 요청하기
            </button>
        </form>
    )
}