Merge pull request #339 from SlamTalk/hotfix/community-comment

#338 모바일 브라우저 환경에서 댓글 작성 오류 수정
SlamTalk · May 16, 2024 · f9def30 · f9def30
2 parents 6e8eeaf + b42bede
commit f9def30
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 36 deletions.
diff --git a/src/app/community/article/[id]/page.tsx b/src/app/community/article/[id]/page.tsx
@@ -48,7 +48,11 @@ const Page = () => {
   const router = useRouter();
 
   const params = useParams<{ id: string }>();
-  const { data: articleData, isLoading } = useQuery({
+  const {
+    data: articleData,
+    isLoading,
+    refetch,
+  } = useQuery({
     queryKey: ['articleData'],
 
     queryFn: () => getCommunityArticle(params.id),
@@ -78,12 +82,9 @@ const Page = () => {
   const postCommunityComment: any = useMutation({
     mutationKey: ['postComment'],
     mutationFn: () => postComment(commentData),
+    onSuccess: () => refetch(),
   });
   const handlePostComment = async () => {
-    if (comment.length > 200) {
-      CommentModal.onOpen();
-      return;
-    }
     if (comment !== '') {
       setCommentData({
         communityId: +params.id,
@@ -92,14 +93,9 @@ const Page = () => {
 
       await postCommunityComment.mutate();
       setComment('');
-
-      const currentUrl = window.location.href;
-      const domain = new URL(currentUrl).origin;
-      if (domain === 'http://localhost:3000') {
-        window.location.href = `http://localhost:3000/community/article/${params.id}`;
-      } else {
-        window.location.href = `${process.env.NEXT_PUBLIC_BASE_URL}/community/article/${params.id}`;
-      }
+    }
+    if (comment.length > 200) {
+      CommentModal.onOpen();
     }
   };
   const deleteArticle: any = useMutation({
@@ -292,7 +288,10 @@ const Page = () => {
               </Button>
             )}
           </div>
-          <CommentList commentListData={articleData?.comments} />
+          <CommentList
+            commentListData={articleData?.comments}
+            refetch={refetch}
+          />
         </div>
       ) : null}
     </div>

diff --git a/src/app/community/components/commentItem.tsx b/src/app/community/components/commentItem.tsx
@@ -13,13 +13,15 @@ export interface ICommentItemProps {
   communityId: number;
   userId: number;
   content: string;
+  refetch: () => void;
 }
 
 const CommentItem: React.FC<ICommentItemProps> = ({
   userId,
   communityId,
   content,
   commentId,
+  refetch,
 }) => {
   const [editToggle, setEditToggle] = useState(false);
 
@@ -29,7 +31,7 @@ const CommentItem: React.FC<ICommentItemProps> = ({
     mutationKey: ['patchComment'],
     mutationFn: () => patchComment(communityId, editedComment, commentId),
     onSuccess: () => {
-      window.location.reload();
+      refetch();
     },
   });
   const { isOpen, onOpen, onClose } = useDisclosure();
@@ -41,22 +43,22 @@ const CommentItem: React.FC<ICommentItemProps> = ({
     queryKey: ['getLoginData'],
     queryFn: getUserData,
   });
-  const handleEdit = () => {
+  const handleEdit = async () => {
     setEditToggle(!editToggle);
     if (editToggle && editedComment !== '') {
-      patchArticleComment.mutate();
+      await patchArticleComment.mutate();
       setEditToggle(false);
     }
   };
   const deleteArticleComment = useMutation({
     mutationKey: ['deleteComment'],
     mutationFn: () => deleteComment(communityId, commentId),
     onSuccess: () => {
-      window.location.reload();
+      refetch();
     },
   });
-  const handleDelete = () => {
-    deleteArticleComment.mutate();
+  const handleDelete = async () => {
+    await deleteArticleComment.mutate();
   };
 
   return (

diff --git a/src/app/community/components/commentList.tsx b/src/app/community/components/commentList.tsx
@@ -1,25 +1,37 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 
 import CommentItem, { ICommentItemProps } from './commentItem';
 
 interface ICommentListProps {
   commentListData: ICommentItemProps[];
+  refetch: () => void;
 }
 
-const CommentList: React.FC<ICommentListProps> = ({ commentListData }) => (
-  <div className="mx-1 h-[calc(100vh-450px)] overflow-auto pb-4 sm:text-sm">
-    {commentListData?.map((i: ICommentItemProps) => (
-      <div key={i.commentId}>
-        <CommentItem
-          key={i.commentId}
-          commentId={+i.commentId}
-          userId={+i.userId}
-          content={i.content}
-          communityId={+i.communityId}
-        />
-      </div>
-    ))}
-  </div>
-);
+const CommentList: React.FC<ICommentListProps> = ({
+  commentListData,
+  refetch,
+}) => {
+  const [comments, setComments] =
+    useState<ICommentItemProps[]>(commentListData);
+  useEffect(() => {
+    setComments(commentListData);
+  }, [comments, commentListData]);
+  return (
+    <div className="mx-1 h-[calc(100vh-450px)] overflow-auto pb-4 sm:text-sm">
+      {comments?.map((i: ICommentItemProps) => (
+        <div key={i.commentId}>
+          <CommentItem
+            key={i.commentId}
+            commentId={+i.commentId}
+            userId={+i.userId}
+            content={i.content}
+            communityId={+i.communityId}
+            refetch={refetch}
+          />
+        </div>
+      ))}
+    </div>
+  );
+};
 
 export default CommentList;