[#3] 커스텀 textarea

app/(route)/verification/ibulsin/_components/Textarea/index.module.css

@@ -0,0 +1,26 @@
+.textarea_container {
+  position: relative;
+  padding: 12px;
+  padding-bottom: 28px;
+  border: 1px solid #ccc;
+  border-radius: 8px;
+}
+.textarea_container:focus-within {
+  border: 1px solid #000000;
+}
+.textarea_container > textarea {
+  width: 100%;
+  height: 80px;
+  border:none;
+  outline: none;
+  resize: none;
+}
+.letter_count_container {
+  position: absolute;
+  font-size: 12px;
+  bottom: 8px;
+  right: 8px;
+}
+.letter_max {
+  color: rgba(255, 0, 0, 0.8);
+}

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

@@ -0,0 +1,62 @@
+'use client'
+
+import React from 'react'
+import S from './index.module.css'
+import cn from 'classnames'
+import { useForm } from 'react-hook-form'
+
+interface TextAreaProps {
+  fieldKey: 'outline' | 'why'
+}
+
+function Textarea({ fieldKey }: TextAreaProps) {
+  const { register, watch } = useForm()
+
+  const outlineField = register('outline', {
+    required: '',
+    maxLength: { value: 500, message: '최대 500자까지 작성가능합니다.' },
+  })
+  const whyField = register('whyField', {
+    required: '',
+    maxLength: { value: 500, message: '최대 500자까지 작성가능합니다.' },
+  })
+  const fields = {
+    outline: {
+      register: outlineField,
+      MaxLength: 500,
+    },
+    why: {
+      register: whyField,
+      MaxLength: 500,
+    },
+  }
+
+  const countCharacters = () => {
+    const content = watch(fieldKey)
+    if (!content) {
+      return 0
+    }
+    return content.length
+  }
+
+  return (
+    <div className={S.textarea_container}>
+      <textarea
+        {...fields[fieldKey].register}
+        maxLength={fields[fieldKey].MaxLength - 1}
+      />
+      <div className={S.letter_count_container}>
+        <span
+          className={cn({
+            [S.letter_max]: countCharacters() >= fields[fieldKey].MaxLength,
+          })}
+        >
+          {countCharacters()}
+        </span>
+        <span>{`/${fields[fieldKey].MaxLength}`}</span>
+      </div>
+    </div>
+  )
+}
+
+export default Textarea