Implement Form component

[sungik-choi]

Description

하위 FormControl 을 컨트롤하는 Form 컴포넌트를 구현합니다.

Reasons for suggestion

위와 같은 유즈케이스에서, '테마 색상' 라벨을 포함한 FormControl 컴포넌트의 레이아웃 내부에 버튼이 위치하는 건 이상합니다. 버튼은 그보다 더 상위의 컨텍스트에 포함되어야 하는 컴포넌트여야합니다.

Proposed solution

위 케이스를 예시로 들어보면, JSX가 아래와 같았으면 좋겠습니다.

<Form labelPosition="left" onSubmit={/* ... */}>
  <FormLegend hidden>테마 설정</FormLegend> {/* 필요한가 ? */}
  <FormControl>
    <FormLabel>봇 프로필</FormLabel>
    <Select />
  </FormControl>
  <FormControl>
    <FormLabel>테마 색상</FormLabel>
    <Select />
  </FormControl>
  <FormLayout field={(
    <ButtonGroup>
      <Button type="submit" text="저장" />
      <Button text="취소 />
    </ButtonGroup>
  )} />
</Form>

• Form 컴포넌트는 컨텍스트를 통해 하위 FormControl 컴포넌트에게 일괄적으로 labelPosition 값 및 FormControlProps 들을 전달합니다.
• FormControl 과 동일한 레이아웃을 제공하는 FormLayout(미정) 같은 컴포넌트를 제공해서 애플리케이션단에서 FormControl 의 레이아웃에 대한 의존성 없이 전송 버튼 등의 컴포넌트를 사용할 수 있도록 개선합니다.
• Form 컴포넌트가 form 이어야하는지, fieldset 이어야하는지, 단순 role을 가진 div 혹은 section 이어야하는지 고민이 필요합니다.

References

• https://developer.mozilla.org/en-US/docs/Learn/Forms/How_to_structure_a_web_form
• https://www.w3.org/WAI/tutorials/forms/
• https://developer.mozilla.org/ko/docs/Web/HTML/Element/fieldset
• https://aoa.gitbook.io/skymimo/aoa-2018/2018-aria/dialog

[sungik-choi]

디자인 시스템에서 컴포넌트 정의 후 피그마에 추가하고 작업을 진행해야합니다.