From 312b86bc5d5669afa20942a023ac67d841df9efd Mon Sep 17 00:00:00 2001
From: chysis <chysiss@naver.com>
Date: Sun, 11 Aug 2024 18:19:12 +0900
Subject: [PATCH] =?UTF-8?q?refactor:=20=EC=84=9C=EC=88=A0=ED=98=95=20?=
 =?UTF-8?q?=EB=8B=B5=EB=B3=80=20=EC=9C=A0=ED=9A=A8=EC=84=B1=20=EA=B2=80?=
 =?UTF-8?q?=EC=82=AC=20=ED=9B=85=20=EA=B5=AC=EC=A1=B0=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/hooks/useLongReviewItem.ts     | 41 ---------------
 frontend/src/hooks/useLongReviewValidate.ts | 58 +++++++++++++++++++++
 2 files changed, 58 insertions(+), 41 deletions(-)
 delete mode 100644 frontend/src/hooks/useLongReviewItem.ts
 create mode 100644 frontend/src/hooks/useLongReviewValidate.ts

diff --git a/frontend/src/hooks/useLongReviewItem.ts b/frontend/src/hooks/useLongReviewItem.ts
deleted file mode 100644
index 246d036a1..000000000
--- a/frontend/src/hooks/useLongReviewItem.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-import { useState } from 'react';
-
-interface UseLongReviewItemProps {
-  minLength: number;
-  maxLength: number;
-  initialValue?: string;
-}
-
-const useLongReviewItem = ({ minLength, maxLength, initialValue }: UseLongReviewItemProps) => {
-  const [value, setValue] = useState(initialValue);
-  const [isError, setIsError] = useState(false);
-  const [errorMessage, setErrorMessage] = useState('');
-
-  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-    const value = e.target.value;
-    if (value.length <= maxLength) setValue(value);
-    if (value.length >= minLength) setIsError(false);
-  };
-
-  const handleBlur = (e: React.FocusEvent<HTMLTextAreaElement>) => {
-    const value = e.target.value;
-    if (value.length < minLength) {
-      setIsError(true);
-      setErrorMessage(`최소 ${minLength}자 이상 작성해 주세요.`);
-    } else {
-      setIsError(false);
-      setErrorMessage('');
-    }
-  };
-
-  return {
-    value,
-    textLength: `${(value && value.length) || 0} / ${maxLength}`,
-    isError,
-    errorMessage,
-    handleChange,
-    handleBlur,
-  };
-};
-
-export default useLongReviewItem;
diff --git a/frontend/src/hooks/useLongReviewValidate.ts b/frontend/src/hooks/useLongReviewValidate.ts
new file mode 100644
index 000000000..e4f4d28da
--- /dev/null
+++ b/frontend/src/hooks/useLongReviewValidate.ts
@@ -0,0 +1,58 @@
+import { useEffect, useState } from 'react';
+
+interface UseLongReviewItemProps {
+  minLength: number;
+  maxLength: number;
+  initialValue?: string;
+  handleErrorChange: (isError: boolean) => void;
+}
+
+const useLongReviewValidate = ({
+  minLength,
+  maxLength,
+  initialValue = '',
+  handleErrorChange,
+}: UseLongReviewItemProps) => {
+  const [value, setValue] = useState(initialValue);
+  const [isError, setIsError] = useState(false);
+  const [errorMessage, setErrorMessage] = useState('');
+
+  const REACHED_MAX_LENGTH = '더 이상 입력할 수 없어요.';
+  const UNDER_MIN_LENGTH = `최소 ${minLength}자 이상 작성해 주세요.`;
+
+  useEffect(() => {
+    handleErrorChange(isError);
+  }, [isError]);
+
+  const handleChangeValidation = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const value = e.target.value;
+    if (value.length >= minLength) setIsError(false);
+
+    if (value.length <= maxLength) setValue(value);
+    else {
+      setIsError(true);
+      setErrorMessage(REACHED_MAX_LENGTH);
+    }
+  };
+
+  const handleBlurValidation = (e: React.FocusEvent<HTMLTextAreaElement>) => {
+    const value = e.target.value;
+    if (value.length < minLength) {
+      setIsError(true);
+      setErrorMessage(UNDER_MIN_LENGTH);
+    } else {
+      setIsError(false);
+      setErrorMessage('');
+    }
+  };
+
+  return {
+    value,
+    isError,
+    errorMessage,
+    handleChangeValidation,
+    handleBlurValidation,
+  };
+};
+
+export default useLongReviewValidate;