본 컴포넌트는 Next.js 환경에서 폼 요소(Input, Select, Textarea 등)를 서버에서 안전하게 감싸기 위한 공통 레이아웃 컨테이너를 제공하도록 설계되었습니다.

이벤트 처리나 상태 관리를 포함하지 않으며, 구조적인 역할만 담당하는 순수 UI 컴포넌트이다.

✅ 컴포넌트 구조

✅ 공통 속성 (FieldProps)

본 컴포넌트는 아래의 타입을 기반으로 하며,

<div>가 지원하는 모든 기본 HTML 속성을 사용할 수 있다.

• React.HTMLAttributes<HTMLDivElement> 모든 속성 지원

  • 예: id, role, aria-*, data-*, onClick 등

• className?: string

  Field 컨테이너에 커스텀 스타일을 적용하기 위한 클래스

• children: React.ReactNode

  Field 내부에 렌더링될 폼 요소들

✅ 사용 예시

1. 일반적인 사용 (Server / Client 공통)

폼 요소를 하나의 필드 단위로 묶는 가장 기본적인 사용 방법이다.

import Field from "@/shared/ui/field";
export default function Page() {
  return (
    <Field className="flex flex-col gap-2">
      <label>이메일</label>
      <input type="email" />
    </Field>
  );
}

2. 접근성 속성 사용 예시