react-hook-form register → shadcn FormField render prop 전환 가이드¶

맥락¶

기존 register + formState.errors 수동 렌더 → shadcn <Form> + <FormField> 체계 전환 패턴. AssetManagement Phase 9-D2에서 TeamFormModal에 최초 적용. 9-G1·9-G2에서 11개 폼 반복 예정.

핵심 전환 규칙¶

1. useForm 반환을 form 단일 객체로 받음 (register 분해 제거)
2. <Form {...form}> → <form onSubmit={form.handleSubmit(fn)}> 이중 래핑
3. 각 필드: <FormField control={form.control} name="x" render={({field}) => ...}>
4. {...register("x")} → {...field} (FormField가 Controller 내장)
5. {errors.x && <p>} → <FormMessage /> (에러 자동 표시)
6. 네이티브 <select>는 <FormControl><select {...field}> wrapping (Radix Select 전환은 별도)

수정 모드 초기값 함정¶

defaultValues에 넣으면 select 옵션 미렌더 상태에서 무시됨. 반드시 옵션 API 로딩 완료 후 form.reset()으로 세팅.

RTL 테스트 주의¶

• vi.mock 팩토리 내 인라인 mock 데이터 (hoisting 회피)
• 드롭다운 로딩 완료 waitFor 필수 (비동기 API mock)
• 수정 모드: 이중 waitFor (옵션 렌더 → reset 완료)

적용 커밋¶

5fe3036 (AssetManagement/Frontend)