[Fix] 댓글의 답글 달기 여러개 열리는 문제 Close #592

blind-42 · Apr 4, 2022 · 42b4859 · 42b4859
1 parent 51437fe
commit 42b4859
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 5 deletions.
diff --git a/client/src/components/Comments/Comments.tsx b/client/src/components/Comments/Comments.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { useQueryClient, useMutation } from 'react-query';
 import instance from 'utils/functions/axios';
 import DropdownMenu from 'components/DropdownMenu/DropdownMenu';
@@ -32,7 +32,6 @@ type GreetingProps = {
   roleType: string;
   comment: CommentData;
   commentsUserList: number[];
-  // setReRender: React.Dispatch<React.SetStateAction<boolean>>
 };
 
 function Comments({ roleType, comment, commentsUserList }: GreetingProps) {
@@ -69,6 +68,18 @@ function Comments({ roleType, comment, commentsUserList }: GreetingProps) {
       instance.put(path, data),
   );
 
+  useEffect(() => {
+    if (openReCmt) {
+      window.addEventListener(
+        'click',
+        () => {
+          setOpenReCmt(false);
+        },
+        { once: true },
+      );
+    }
+  });
+
   const modifyCmtHandler = () => {
     setOpenEditor(!openEditor);
   };
@@ -226,7 +237,7 @@ function Comments({ roleType, comment, commentsUserList }: GreetingProps) {
         <>
           <GLine />
           <FLine />
-          <RecommentContainer>
+          <RecommentContainer onClick={(e) => e.stopPropagation()}>
             <span>&#8627;</span>
             <ReCommentWrap>
               <CommentInput

diff --git a/client/src/components/Comments/ReComments.tsx b/client/src/components/Comments/ReComments.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { useQueryClient, useMutation } from 'react-query';
 import instance from 'utils/functions/axios';
 import DropdownMenu from 'components/DropdownMenu/DropdownMenu';
@@ -65,6 +65,18 @@ function ReComments({ roleType, recomment, commentsUserList }: GreetingProps) {
       instance.put(path, data),
   );
 
+  useEffect(() => {
+    if (openReReCmt) {
+      window.addEventListener(
+        'click',
+        () => {
+          setOpenReReCmt(false);
+        },
+        { once: true },
+      );
+    }
+  });
+
   const modifyCmtHandler = () => {
     setOpenEditor(!openEditor);
   };
@@ -239,7 +251,7 @@ function ReComments({ roleType, recomment, commentsUserList }: GreetingProps) {
         <>
           <GLine />
           <FLine />
-          <RecommentContainer>
+          <RecommentContainer onClick={(e) => e.stopPropagation()}>
             <span>&#8627;</span>
             <ReCommentWrap>
               <CommentInput