[FE] refactor: 공용 모달 훅 추가 및 LongReviewItem 리팩토링 (#258)

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

* refactor: LongReviewItem 컴포넌트가 외부의 event를 props로 받을 수 있도록 변경

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}
       />

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;