フォームのバリデーションとニコ連携の画面変更 (#090) (#355)

Reviewed-on: #355
Co-authored-by: miteruzo <miteruzo@naver.com>
Co-committed-by: miteruzo <miteruzo@naver.com>

frontend/src/components/common/FormField.tsx

@@ -0,0 +1,36 @@
+import { useId } from 'react'
+
+import FieldError from '@/components/common/FieldError'
+import Label from '@/components/common/Label'
+import { cn } from '@/lib/utils'
+
+import type { FC, ReactNode } from 'react'
+
+type FieldState = { describedBy?: string
+		    invalid:      boolean }
+
+type Props = {
+    children:   (state: FieldState) => ReactNode
+    checkBox?:   { label:    string
+		   checked:  boolean
+		   onChange: (event: React.ChangeEvent<HTMLInputElement>) => void }
+    className?:  string
+    label:      ReactNode
+    messages?:  string[] }
+
+
+const FormField: FC<Props> = ({ children, checkBox, className, label, messages }: Props) => {
+  const id = useId ()
+  const invalid = messages != null && messages.length > 0
+  const errorId = invalid ? `${ id }-error` : undefined
+
+  return (
+      <div className={cn (className)}>
+	<Label checkBox={checkBox} invalid={invalid}>{label}</Label>
+	{children ({ describedBy: errorId, invalid })}
+	<FieldError id={errorId} messages={messages}/>
+      </div>)
+}
+
+
+export default FormField