[#98] ✨ shared 컴포넌트 Form 개발 (#118)

* [#98] 🌱 Initialize Form component creation

* [#98] ✨ Add onChange handler to update controlled component state

* [#98] ✨ Add onChange handler to update controlled component state and Change button tag to span

* [#98] ✨ Implement Form component (TagInput not implemented yet)

* [#98] ♻️ Make TagInput props exportable

* [#98] ✨ Update options type and add TagInput component to Form

* [#98] ✨ Add Storybook for Form component (WIP, to be updated after authentication page development)

* [#98] ✨ add type export to input components and integrate TextInput, PasswordInput into Form

* [#98] ✨ integrate TextInput and PasswordInput into Form

* [#98] 📦 Add es-hangul library

* [#98] ✨ implement form validation rules

* [#98] ✨ Add validation and textarea field

* [#98] ♻️ Update error message for introduce field

* [#98] ✨ Add rules to Tag

* [#98] 🐛 integrate state with Tag and correct typo in NAME_RULES

* [#98] ✨ Add email validation logic and Update variable names in form

Author: yongb2n

package.json

@@ -2,6 +2,7 @@
   "dependencies": {
     "@tanstack/react-query": "^5.59.19",
     "clsx": "^2.1.1",
+    "es-hangul": "^2.2.4",
     "ky": "^1.7.2",
     "next": "^15.0.2",
     "react": "^18.3.1",

pnpm-lock.yaml

@@ -66,6 +66,7 @@ export const CheckboxInput = ({
       <input
         type='checkbox'
         checked={checked}
+        onChange={onChange}
         disabled={disabled}
         {...props}
         className='hidden'

src/components/common/input/CheckboxInput.tsx

@@ -2,7 +2,8 @@ import clsx from 'clsx'
 
 import { handleKeyDown } from '@/utils/handleKeyDown'
 
-interface RadioInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+export interface RadioInputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {
   label: string
 }
 
@@ -22,12 +23,18 @@ export const RadioInput = ({
 
   return (
     <label className={labelClass}>
-      <input type='radio' checked={checked} disabled={disabled} {...props} />
-      <button
+      <input
+        type='radio'
+        checked={checked}
+        onChange={onChange}
+        disabled={disabled}
+        {...props}
+      />
+      <span
         role='radio'
         tabIndex={0}
         aria-checked={checked}
-        aria-label={'radio button'}
+        aria-label={'radio input'}
         onKeyDown={e =>
           handleKeyDown(
             e,

src/components/common/input/RadioInput.tsx

@@ -11,7 +11,7 @@ interface TagProps {
   label: string
 }
 
-interface TagInputProps extends Omit<TextInputProps, 'endAdornment'> {
+export interface TagInputProps extends Omit<TextInputProps, 'endAdornment'> {
   name: string
 }
 

src/components/common/input/TagInput.tsx

@@ -1,7 +1,13 @@
-import { CheckboxInput } from './CheckboxInput'
+import { CheckboxInput, CheckboxInputProps } from './CheckboxInput'
 import { PasswordInput } from './PasswordInput'
-import { RadioInput } from './RadioInput'
-import { TagInput } from './TagInput'
-import { TextInput } from './TextInput'
+import { RadioInput, RadioInputProps } from './RadioInput'
+import { TagInput, TagInputProps } from './TagInput'
+import { TextInput, TextInputProps } from './TextInput'
 
 export { CheckboxInput, PasswordInput, RadioInput, TagInput, TextInput }
+export type {
+  CheckboxInputProps,
+  RadioInputProps,
+  TagInputProps,
+  TextInputProps,
+}

src/components/common/input/index.ts

@@ -0,0 +1,255 @@
+import {
+  Controller,
+  FieldValues,
+  FormProvider,
+  UseFormReturn,
+  useFormContext,
+} from 'react-hook-form'
+
+import {
+  FormField,
+  PASSWORD_CONFIRM_RULES,
+  VALIDATION_RULES,
+} from '@/constants/formValidation'
+import clsx from 'clsx'
+
+import {
+  CheckboxInput,
+  CheckboxInputProps,
+  PasswordInput,
+  RadioInput,
+  RadioInputProps,
+  TagInput,
+  TagInputProps,
+  TextInput,
+  TextInputProps,
+} from '@/components/common/input'
+import { TextArea } from '@/components/common/textarea'
+import { TextAreaProps } from '@/components/common/textarea/TextArea'
+
+interface FormProps<TFieldValues extends FieldValues>
+  extends React.FormHTMLAttributes<HTMLFormElement> {
+  methods: UseFormReturn<TFieldValues>
+  children: React.ReactNode
+}
+
+export const Form = <TFieldValues extends FieldValues>({
+  methods,
+  children,
+  ...props
+}: FormProps<TFieldValues>): JSX.Element => {
+  return (
+    <FormProvider {...methods}>
+      <form {...props}>{children}</form>
+    </FormProvider>
+  )
+}
+
+const FormText = ({
+  name,
+  ...props
+}: {
+  name: FormField
+} & TextInputProps): JSX.Element => {
+  const {
+    register,
+    formState: { errors, touchedFields },
+    watch,
+  } = useFormContext()
+  const value = watch(name)
+  const isError = touchedFields[name] && errors[name]
+  const isSuccess = touchedFields[name] && !errors[name] && value
+
+  return (
+    <>
+      <TextInput
+        {...register(name, VALIDATION_RULES[name])}
+        error={Boolean(errors[name])}
+        {...props}
+      />
+      {isError && (
+        <StatusMessage hasError={true}>
+          {String(errors[name]?.message as string)}
+        </StatusMessage>
+      )}
+      {/* TODO: 이미 가입된 이메일 확인하는 로직 추가하면서 수정 필요 */}
+      {isSuccess && (
+        <StatusMessage hasError={false}>
+          가입 가능한 이메일입니다.
+        </StatusMessage>
+      )}
+    </>
+  )
+}
+
+const FormPassword = ({
+  name,
+  ...props
+}: {
+  name: FormField
+  rules?: Record<string, unknown>
+} & Omit<TextInputProps, 'type'>): JSX.Element => {
+  const {
+    register,
+    formState: { errors },
+    getValues,
+  } = useFormContext()
+  const registerOptions =
+    name === 'passwordConfirmation'
+      ? PASSWORD_CONFIRM_RULES(getValues('password'))
+      : VALIDATION_RULES[name]
+
+  return (
+    <>
+      <PasswordInput {...register(name, registerOptions)} {...props} />
+      {errors[name]?.message && (
+        <StatusMessage hasError={Boolean(errors[name])}>
+          {errors[name].message as string}
+        </StatusMessage>
+      )}
+    </>
+  )
+}
+
+const FormTextArea = ({
+  name,
+  ...props
+}: { name: FormField } & TextAreaProps): JSX.Element => {
+  const {
+    register,
+    formState: { errors },
+  } = useFormContext()
+
+  return (
+    <>
+      <TextArea {...register(name, VALIDATION_RULES[name])} {...props} />
+      {errors[name] && (
+        <StatusMessage hasError={Boolean(errors[name])}>
+          {String(errors[name].message)}
+        </StatusMessage>
+      )}
+    </>
+  )
+}
+
+const FormCheckbox = ({
+  name,
+  rules,
+  options,
+  ...props
+}: {
+  name: string
+  rules?: Record<string, unknown>
+  options: { label: string; value: string }[]
+} & CheckboxInputProps): JSX.Element => {
+  const { control } = useFormContext()
+  return (
+    <Controller
+      name={name}
+      control={control}
+      rules={rules}
+      render={({ field }) => (
+        <>
+          {options.map(option => (
+            <CheckboxInput
+              key={option.value}
+              {...props}
+              value={option.value}
+              label={option.label}
+              checked={(field.value || []).includes(option.value)}
+              onChange={e => {
+                const currentValue = field.value || []
+                const newValue = e.target.checked
+                  ? [...currentValue, option.value]
+                  : currentValue.filter((v: string) => v !== option.value)
+                field.onChange(newValue)
+              }}
+            />
+          ))}
+        </>
+      )}
+    />
+  )
+}
+
+const FormRadio = ({
+  name,
+  rules,
+  options,
+  ...props
+}: {
+  name: string
+  rules?: Record<string, unknown>
+  options: { label: string; value: string }[]
+} & RadioInputProps): JSX.Element => {
+  const { control } = useFormContext()
+  return (
+    <Controller
+      name={name}
+      control={control}
+      rules={rules}
+      render={({ field }) => (
+        <>
+          {options.map(option => (
+            <RadioInput
+              key={option.value}
+              {...props}
+              label={option.label}
+              value={option.value}
+              checked={field.value === option.value}
+              onChange={() => field.onChange(option.value)}
+            />
+          ))}
+        </>
+      )}
+    />
+  )
+}
+
+const FormTag = ({
+  name,
+  rules,
+  ...props
+}: {
+  name: string
+  rules?: Record<string, unknown>
+} & TagInputProps): JSX.Element => {
+  const { control } = useFormContext()
+  return (
+    <Controller
+      name={name}
+      control={control}
+      rules={rules}
+      render={({ field }) => <TagInput {...field} {...props} />}
+    />
+  )
+}
+
+interface StatusMessageProps {
+  className?: string
+  children: string
+  hasError: boolean
+}
+
+const StatusMessage = ({
+  className,
+  children,
+  hasError,
+}: StatusMessageProps): JSX.Element => {
+  const baseClass = 'mt-4 text-caption1 font-medium'
+  const statusClass = clsx({
+    'text-semantic-negative': hasError,
+    'text-semantic-positive': !hasError,
+  })
+
+  return (
+    <span className={clsx(baseClass, statusClass, className)}>{children}</span>
+  )
+}
+
+Form.Text = FormText
+Form.Password = FormPassword
+Form.TextArea = FormTextArea
+Form.Checkbox = FormCheckbox
+Form.Radio = FormRadio
+Form.TagInput = FormTag

src/components/shared/form/Form.tsx

@@ -0,0 +1,3 @@
+import { Form } from './Form'
+
+export { Form }