[#32] 동기화 관련 리팩토링

app/(route)/verification/ibulsin/_components/Textarea/index.tsx

@@ -3,90 +3,37 @@
 import React from 'react'
 import S from './index.module.css'
 import cn from 'classnames'
-import { useForm } from 'react-hook-form'
+import { RecoilState } from 'recoil'
+import { RegisterOptions } from 'react-hook-form'
+import { useFormCustom } from '@/app/_hooks/useFormWithRecoil'
 
 interface TextAreaProps {
   fieldKey: 'outline' | 'why' | 'marketResponse' | 'XYZ' | 'xyz' | 'pretotyping'
+  atom: RecoilState<string>
+  option?: RegisterOptions
 }
 
-function Textarea({ fieldKey }: TextAreaProps) {
-  const { register, watch } = useForm()
-
-  const outlineField = register('outline', {
-    required: '',
-    maxLength: { value: 500, message: '최대 500자까지 작성가능합니다.' },
-  })
-  const whyField = register('why', {
-    required: '',
-    maxLength: { value: 500, message: '최대 500자까지 작성가능합니다.' },
-  })
-  const marketResponseField = register('marketResponse', {
-    required: '',
-    maxLength: { value: 500, message: '최대 500자까지 작성가능합니다.' },
-  })
-  const XYZField = register('XYZ', {
-    required: '',
-    maxLength: { value: 500, message: '최대 500자까지 작성가능합니다.' },
-  })
-  const xyzField = register('xyz', {
-    required: '',
-    maxLength: { value: 500, message: '최대 500자까지 작성가능합니다.' },
-  })
-  const pretotypingField = register('pretotyping', {
-    required: '',
-    maxLength: { value: 500, message: '최대 500자까지 작성가능합니다.' },
-  })
-
-  const fields = {
-    outline: {
-      register: outlineField,
-      MaxLength: 500,
-    },
-    why: {
-      register: whyField,
-      MaxLength: 500,
-    },
-    marketResponse: {
-      register: marketResponseField,
-      MaxLength: 500,
-    },
-    XYZ: {
-      register: XYZField,
-      MaxLength: 500,
-    },
-    xyz: {
-      register: xyzField,
-      MaxLength: 500,
-    },
-    pretotyping: {
-      register: pretotypingField,
-      MaxLength: 500,
-    },
-  }
+function Textarea({ fieldKey, atom, option }: TextAreaProps) {
+  const { field, countCharacters, handleChange } = useFormCustom(
+    fieldKey,
+    atom,
+    option,
+  )
 
-  const countCharacters = () => {
-    const content = watch(fieldKey)
-    if (!content) {
-      return 0
-    }
-    return content.length
-  }
+  const MAX_LENGTH = 500
 
   return (
     <div className={S.textarea_container}>
-      <textarea
-        {...fields[fieldKey].register}
-        maxLength={fields[fieldKey].MaxLength - 1}
-      />
+      <textarea {...field} maxLength={MAX_LENGTH} onChange={handleChange} />
       <div className={S.letter_count_container}>
         <span
           className={cn({
-            [S.letter_max]: countCharacters() >= fields[fieldKey].MaxLength,
+            [S.letter_max]: countCharacters() >= MAX_LENGTH,
           })}
         >
           {countCharacters()}
         </span>
-        <span>{`/${fields[fieldKey].MaxLength}`}</span>
+        <span>{`/${MAX_LENGTH}`}</span>
       </div>
     </div>
   )