✨ frontend add

frontend/portal/src/hooks/useTextarea.ts

@@ -0,0 +1,53 @@
+import { COMMENTS_MAX_LENGTH } from '@constants'
+import { getTextLength } from '@utils'
+import React, { useState } from 'react'
+
+export interface ITextarea {
+  value: ValueType | ReadonlyArray<string>
+  currentCount: number
+}
+
+export default function useTextarea(
+  initial: ITextarea,
+  maxLength: number = COMMENTS_MAX_LENGTH,
+) {
+  const [textarea, setTextarea] = useState<ITextarea>(initial)
+  const max = maxLength
+
+  const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+    let targetValue = event.target.value
+    const count = getTextLength(targetValue)
+    if (count > max) {
+      setTextarea({
+        value: targetValue.slice(0, max),
+        currentCount: max,
+      })
+
+      return
+    }
+
+    setTextarea({
+      value: targetValue,
+      currentCount: count,
+    })
+  }
+
+  const clearTextarea = () => {
+    setTextarea({
+      value: '',
+      currentCount: 0,
+    })
+  }
+
+  /**
+   * @TODO
+   * validation 추가필요
+   */
+
+  return {
+    currentCount: textarea.currentCount,
+    clear: clearTextarea,
+    value: textarea.value,
+    onChange: handleChange,
+  }
+}