36 lines
1023 B
TypeScript
36 lines
1023 B
TypeScript
/**
|
|
* 📄 Form Section Component
|
|
* 폼 섹션 컴포넌트
|
|
*
|
|
* - 폼 필드 렌더링 및 제목 표시
|
|
* - 필수 입력 필드 표시 (별표 표시)
|
|
* - FormField를 통한 폼 상태 관리
|
|
* - 그리드 레이아웃을 통한 정렬 및 배치
|
|
* - 재사용 가능한 폼 섹션 구조 제공
|
|
* - react-hook-form 통합 지원
|
|
*/
|
|
import { FormField } from '@common/business_components/ui'
|
|
import React, { type ReactElement } from 'react'
|
|
|
|
interface FormSectionProps {
|
|
children: ReactElement
|
|
titleNm: string
|
|
form: any
|
|
name: string
|
|
required?: boolean
|
|
}
|
|
|
|
const FormSection = ({ children, titleNm, form, name, required }: FormSectionProps) => {
|
|
return (
|
|
<div className="grid grid-cols-[200px_1fr] items-center">
|
|
<div className="text-xl font-medium">{titleNm}{required && <span className="text-2xl text-red-500">*</span>}</div>
|
|
<FormField
|
|
control={form.control}
|
|
name={name}
|
|
render={({ field }) => children}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default FormSection |