Merge pull request #140 from FinalDoubleTen/FE-79--feat/MypageReview

Fe 79 feat/mypage review
WePlanPlans · Jan 11, 2024 · 2f455f9 · 2f455f9
2 parents a3939c7 + 48f3603
commit 2f455f9
Show file tree

Hide file tree

Showing 4 changed files with 80 additions and 66 deletions.
diff --git a/src/components/Review/ReviewComments.tsx b/src/components/Review/ReviewComments.tsx
@@ -63,43 +63,45 @@ export default function ReviewComments() {
         댓글
         <span className="pl-0.5 font-bold">{commentDataLength}</span>
       </div>
-      {commentDataLength == 0 && (
-        <div className="mb-4 flex flex-col items-center justify-center text-sm text-gray4">
-          <div>댓글이 없습니다. </div>
-          <div>첫 댓글을 작성해보세요!</div>
-        </div>
-      )}
-      <InfiniteScroll
-        pageStart={0}
-        loadMore={() => fetchNextPage()}
-        hasMore={hasNextPage}
-        loader={
-          <div className="loader" key={0}>
-            Loading ...
+      <div className="flex flex-col">
+        {commentDataLength == 0 && (
+          <div className="mb-4 flex flex-col items-center justify-center text-sm text-gray4">
+            <div>댓글이 없습니다. </div>
+            <div>첫 댓글을 작성해보세요!</div>
           </div>
-        }>
-        <div>
-          {reviewComments?.pages.map((group, index) => {
-            {
-              return (
-                <React.Fragment key={index}>
-                  {group?.data.data.comments.content.map((item: any) => (
-                    <CommentItem
-                      key={item.commentId}
-                      commentId={item.commentId}
-                      authorNickname={item.authorNickname}
-                      authorProfileImageUrl={item.authorProfileImageUrl}
-                      createdTime={item.createdTime}
-                      content={item.content}
-                      isAuthor={item.isAuthor}
-                    />
-                  ))}
-                </React.Fragment>
-              );
-            }
-          })}
-        </div>
-      </InfiniteScroll>
+        )}
+        <InfiniteScroll
+          pageStart={0}
+          loadMore={() => fetchNextPage()}
+          hasMore={hasNextPage}
+          loader={
+            <div className="loader" key={0}>
+              Loading ...
+            </div>
+          }>
+          <div>
+            {reviewComments?.pages.map((group, index) => {
+              {
+                return (
+                  <React.Fragment key={index}>
+                    {group?.data.data.comments.content.map((item: any) => (
+                      <CommentItem
+                        key={item.commentId}
+                        commentId={item.commentId}
+                        authorNickname={item.authorNickname}
+                        authorProfileImageUrl={item.authorProfileImageUrl}
+                        createdTime={item.createdTime}
+                        content={item.content}
+                        isAuthor={item.isAuthor}
+                      />
+                    ))}
+                  </React.Fragment>
+                );
+              }
+            })}
+          </div>
+        </InfiniteScroll>
+      </div>
       <Modal isOpen={isModalOpen} closeModal={closeModal}>
         {modalChildren === 'EditDelete' && <EditDelete />}
         {modalChildren === 'MyAlert' && (

diff --git a/src/components/common/nav/InputComment.tsx b/src/components/common/nav/InputComment.tsx
@@ -10,14 +10,17 @@ import { useMutation, useQueryClient } from '@tanstack/react-query';
 interface InputCommentProps {
   classNameName?: string;
 }
+
 interface PostCommentMutationParams {
   comment: string;
   reviewId: number;
 }
+
 interface EditCommentMutationParams {
   comment: string;
   targetCommentId: number;
 }
+
 export const InputComment: React.FC<InputCommentProps> = () => {
   const [comment, setComment] = useRecoilState(commentState);
   const params = useParams();
@@ -28,19 +31,29 @@ export const InputComment: React.FC<InputCommentProps> = () => {
   const targetCommentId = useRecoilValue(targetCommentIdState);
   const queryClient = useQueryClient();
 
-  const { mutate: postCommentMutate } = useMutation({
+  const { mutate: postReviewMutate } = useMutation({
     mutationFn: ({ comment, reviewId }: PostCommentMutationParams) =>
       postComments(comment, reviewId),
     onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['reviewComments'] });
+      queryClient.invalidateQueries({
+        queryKey: ['reviewComments'],
+      });
+      queryClient.invalidateQueries({
+        queryKey: ['myReviews'],
+      });
     },
     onError: () => console.log('error'),
   });
-  const { mutate: editCommentMutate } = useMutation({
+  const { mutate: editReviewMutate } = useMutation({
     mutationFn: ({ comment, targetCommentId }: EditCommentMutationParams) =>
       putComments(comment, targetCommentId),
     onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['reviewComments'] });
+      queryClient.invalidateQueries({
+        queryKey: ['reviewComments'],
+      });
+      queryClient.invalidateQueries({
+        queryKey: ['myReviews'],
+      });
     },
     onError: () => console.log('error'),
   });
@@ -52,10 +65,10 @@ export const InputComment: React.FC<InputCommentProps> = () => {
 
   const handleSubmit = async () => {
     if (isModifyingComment) {
-      await editCommentMutate({ comment, targetCommentId });
+      await editReviewMutate({ comment, targetCommentId });
       setIsModifyingComment(false);
     } else {
-      await postCommentMutate({ comment, reviewId });
+      await postReviewMutate({ comment, reviewId });
     }
     setComment('');
   };
@@ -65,29 +78,27 @@ export const InputComment: React.FC<InputCommentProps> = () => {
     }
   };
   return (
-    <>
-      <div className="sticky bottom-0 mt-auto flex flex h-[64px] w-full items-center justify-center border  border-solid border-[#EDEDED] bg-white ">
-        <div className="ml-4 mr-4 flex h-[40px] w-full items-center  rounded-md border border-solid border-[#EDEDED]">
-          <div className="pl-1 pr-0.5 text-sm font-bold text-[#29ddf6]">ㅣ</div>
-          <div className="flex  w-full ">
-            <input
-              type="text"
-              placeholder="댓글을 입력하세요"
-              className=" w-full max-w-full text-sm placeholder-[#d7d7d7]  outline-none"
-              onChange={handleTextChange}
-              value={comment}
-              onKeyPress={handleKeyPress}
-            />
-          </div>
-          <div className="ml-auto mr-1 min-w-[2rem] ">
-            <button
-              onClick={handleSubmit}
-              className=" text-sm font-bold text-[#29ddf6]">
-              등록
-            </button>
-          </div>
+    <div className="sticky bottom-0 mt-auto flex flex h-[64px] w-full items-center justify-center border  border-solid border-[#EDEDED] bg-white ">
+      <div className="ml-4 mr-4 flex h-[40px] w-full items-center  rounded-md border border-solid border-[#EDEDED]">
+        <div className="pl-1 pr-0.5 text-sm font-bold text-[#29ddf6]">ㅣ</div>
+        <div className="flex  w-full ">
+          <input
+            type="text"
+            placeholder="댓글을 입력하세요"
+            className=" w-full max-w-full text-sm placeholder-[#d7d7d7]  outline-none"
+            onChange={handleTextChange}
+            value={comment}
+            onKeyPress={handleKeyPress}
+          />
+        </div>
+        <div className="ml-auto mr-1 min-w-[2rem] ">
+          <button
+            onClick={handleSubmit}
+            className=" text-sm font-bold text-[#29ddf6]">
+            등록
+          </button>
         </div>
       </div>
-    </>
+    </div>
   );
 };
diff --git a/src/pages/detail/detail.page.tsx b/src/pages/detail/detail.page.tsx
@@ -1,15 +1,15 @@
 import { DetailHeader } from '@components/common/header';
 import DetailSectionTop from '@components/DetailSectionTop/DetailSectionTop';
 import DetailSectionBottom from '@components/DetailSectionBottom/DetailSectionBottom';
-import { DetailTopButton } from '@components/DetailSectionTop';
+// import { DetailTopButton } from '@components/DetailSectionTop';
 
 const DetailTours = () => {
   return (
     <>
       <DetailHeader />
       <DetailSectionTop />
       <DetailSectionBottom />
-      <DetailTopButton />
+      {/* <DetailTopButton /> */}
     </>
   );
 };

diff --git a/src/pages/reviewComment/reviewComment.page.tsx b/src/pages/reviewComment/reviewComment.page.tsx
@@ -1,5 +1,6 @@
 import { DetailHeader } from '@components/common/header';
 import { DetailReview, ReviewComments } from '@components/Review';
+
 const ReviewComment = () => {
   return (
     <>