From 0b5c3d0a554a1360378b73c1dd49cf776b850a70 Mon Sep 17 00:00:00 2001
From: Fe <64690761+chysis@users.noreply.github.com>
Date: Thu, 8 Aug 2024 16:47:34 +0900
Subject: [PATCH] =?UTF-8?q?[FE]=20refactor:=20=EA=B3=B5=EC=9A=A9=20?=
 =?UTF-8?q?=EB=AA=A8=EB=8B=AC=20=ED=9B=85=20=EC=B6=94=EA=B0=80=20=EB=B0=8F?=
 =?UTF-8?q?=20LongReviewItem=20=EB=A6=AC=ED=8C=A9=ED=86=A0=EB=A7=81=20(#25?=
 =?UTF-8?q?8)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: 모달 상태 관리 훅 추가

* refactor: LongReviewItem 컴포넌트가 외부의 event를 props로 받을 수 있도록 변경
---
 .../common/LongReviewItem/index.tsx           | 17 +++++++++--
 frontend/src/hooks/useModals.ts               | 29 +++++++++++++++++++
 2 files changed, 44 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/hooks/useModals.ts

diff --git a/frontend/src/components/common/LongReviewItem/index.tsx b/frontend/src/components/common/LongReviewItem/index.tsx
index 18a743606..6ad068289 100644
--- a/frontend/src/components/common/LongReviewItem/index.tsx
+++ b/frontend/src/components/common/LongReviewItem/index.tsx
@@ -8,22 +8,35 @@ interface LongReviewItemProps extends TextareaHTMLAttributes<HTMLTextAreaElement
   minLength: number;
   maxLength: number;
   initialValue?: string;
+  handleTextareaChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
 }
 
-const LongReviewItem = ({ minLength, maxLength, initialValue = '', style, ...rest }: LongReviewItemProps) => {
+const LongReviewItem = ({
+  minLength,
+  maxLength,
+  initialValue = '',
+  handleTextareaChange,
+  style,
+  ...rest
+}: LongReviewItemProps) => {
   const { value, textLength, isError, errorMessage, handleChange, handleBlur } = useLongReviewItem({
     minLength,
     maxLength,
     initialValue,
   });
 
+  const handleWriteTextarea = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    handleChange(e);
+    handleTextareaChange(e);
+  };
+
   return (
     <S.TextareaContainer>
       <S.Textarea
         value={value}
         $isError={isError}
         $style={style}
-        onChange={handleChange}
+        onChange={handleWriteTextarea}
         onBlur={handleBlur}
         {...rest}
       />
diff --git a/frontend/src/hooks/useModals.ts b/frontend/src/hooks/useModals.ts
new file mode 100644
index 000000000..d10113453
--- /dev/null
+++ b/frontend/src/hooks/useModals.ts
@@ -0,0 +1,29 @@
+import { useState } from 'react';
+
+interface Modals {
+  [key: string]: boolean;
+}
+
+const useModals = () => {
+  const [modals, setModals] = useState<Modals>({});
+
+  const openModal = (key: string) => {
+    setModals((prev) => ({
+      ...prev,
+      [key]: true,
+    }));
+  };
+
+  const closeModal = (key: string) => {
+    setModals((prev) => ({
+      ...prev,
+      [key]: false,
+    }));
+  };
+
+  const isOpen = (key: string) => modals[key];
+
+  return { isOpen, openModal, closeModal };
+};
+
+export default useModals;