Merge branch 'fix/communityscroll' into develop

4bujak-4bujak · May 31, 2024 · 74151cd · 74151cd
2 parents 8992725 + 307f124
commit 74151cd
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 29 deletions.
diff --git a/src/components/community/PostDetailIndex.tsx b/src/components/community/PostDetailIndex.tsx
@@ -33,7 +33,7 @@ const PostDetailIndex = () => {
       {/* 구분선 */}
       <div className="w-full h-1 bg-gray-100" />
       {/* 댓글자리 */}
-      <CommentsLayout />
+      <CommentsLayout postId={id} />
       {/* 댓글입력자리 */}
       <WriteCommentLayout postId={id} />
       {open ? <DeleteModal /> : ''}

diff --git a/src/components/community/comments/CommentsLayout.tsx b/src/components/community/comments/CommentsLayout.tsx
@@ -2,15 +2,12 @@
 import React, { Fragment, useCallback, useEffect, useRef } from 'react';
 import CommentsItem from './CommentsItem';
 import { CommentDataType } from '../model/commentType';
-import { useRouter } from 'next/router';
 import { useInfiniteQuery } from 'react-query';
 import { getAllComments } from '../remote/comment';
 import useIntersectionObserver from '../hooks/useIntersectionObserver';
 import Loader from '../shared/Loader';
 
-const CommentsLayout = () => {
-  const router = useRouter();
-  const { id } = router.query as { id: string };
+const CommentsLayout = ({ postId }: { postId: string }) => {
   const ref = useRef<HTMLDivElement | null>(null);
   const pageRef = useIntersectionObserver(ref, {});
   const isPageEnd = pageRef?.isIntersecting ?? false;
@@ -22,13 +19,13 @@ const CommentsLayout = () => {
     isFetching,
     isFetchingNextPage
   } = useInfiniteQuery(
-    ['AllComments', id],
-    ({ pageParam }) => getAllComments({ postId: id, cursorId: pageParam }),
+    ['AllComments', postId],
+    ({ pageParam }) => getAllComments({ postId: postId, cursorId: pageParam }),
     {
       getNextPageParam: (lastPage) => {
         return lastPage.hasNext ? lastPage.lastVisible : undefined;
       },
-      enabled: !!id
+      enabled: !!postId
     }
   );
 
@@ -65,7 +62,7 @@ const CommentsLayout = () => {
       {allComments?.length > 0 ? (
         allComments?.map((comment: CommentDataType, i) => (
           <Fragment key={i}>
-            <CommentsItem comment={comment} postId={id} />
+            <CommentsItem comment={comment} postId={comment.commentId} />
             {i < allComments.length - 1 && (
               <div className="w-full h-[2px] bg-gray-100 mr-12" />
             )}

diff --git a/src/components/community/comments/WriteCommentLayout.tsx b/src/components/community/comments/WriteCommentLayout.tsx
@@ -6,7 +6,7 @@ import Image from 'next/image';
 
 const WriteCommentLayout = ({ postId }: { postId: string }) => {
   const queryClient = useQueryClient();
-  const { imageUrl } = useMember();
+  const { imageUrl } = useMember() as { imageUrl: string };
   const [commentValue, setCommentValue] = useState<string>('');
   const textareaRef = useRef<HTMLTextAreaElement>(null);
 
@@ -37,7 +37,7 @@ const WriteCommentLayout = ({ postId }: { postId: string }) => {
       <div className="flex gap-[13px] flex-1">
         <div>
           <Image
-            src={imageUrl as string}
+            src={imageUrl}
             alt="image"
             className="w-[42px] h-[42px] rounded-full"
             width={42}

diff --git a/src/components/community/remote/comment.ts b/src/components/community/remote/comment.ts
@@ -1,5 +1,4 @@
 import { deleteRequest, getRequest, postRequest } from '@/api/request';
-import axios from 'axios';
 import { CommentType } from '../model/commentType';
 import { ICommon } from '@/api/types/common';
 
@@ -20,11 +19,21 @@ interface postCommentType {
 
 export const getAllComments = async ({ postId, cursorId }: getAllCommentsType) => {
   try {
-    const response = await getRequest<CommentType>(
-      `posts/${postId}/comments${cursorId != null ? `?cursorId=${cursorId}` : ''}`
-    );
-    const lastComment = response?.data?.content?.[response?.data?.content.length - 1];
-    const lastVisible = lastComment ? lastComment.commentId : undefined;
+    let url = `posts/${postId}/comments`;
+    const params = [];
+
+    if (cursorId != null) {
+      params.push(`cursorId=${cursorId}`);
+    }
+
+    if (params.length > 0) {
+      url += `?${params.join('&')}`;
+    }
+
+    const response = await getRequest<CommentType>(url);
+    const lastVisible =
+      response?.data?.content?.[response?.data?.content.length - 1]?.commentId;
+
     return {
       content: response?.data?.content,
       lastVisible,
@@ -43,13 +52,6 @@ export const deleteComment = async ({ postId, commentId }: deleteCommentType) =>
   } catch (error: any) {
     return error.response.data;
   }
-
-  const { data } = await axios.delete(
-    `http://localhost:3000/api/community/${postId}/comments/${commentId}`
-  );
-  console.log('삭제완료');
-
-  return data;
 };
 
 export const postComment = async ({ postId, content }: postCommentType) => {

diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -4,20 +4,20 @@ import '@/styles/globals.css';
 import type { AppProps } from 'next/app';
 import Script from 'next/script';
 import { QueryClient, QueryClientProvider } from 'react-query';
-
+import { ReactQueryDevtools } from 'react-query/devtools';
 
 const queryClient = new QueryClient();
 
 export default function App({ Component, pageProps }: AppProps) {
   return (
     <MockProvider>
       <QueryProvider>
-      <Script
-        strategy="beforeInteractive"
-          src={`https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=${process.env.NEXT_PUBLIC_NAVER_MAP_CLIENT_ID}`}
-      ></Script>
+        <Script
+          strategy="beforeInteractive"
+          src={`https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=${process.env.NEXT_PUBLIC_NAVER_MAP_CLIENT_ID}`}></Script>
         <QueryClientProvider client={queryClient}>
           <Component {...pageProps} />
+          <ReactQueryDevtools initialIsOpen={false} />
         </QueryClientProvider>
       </QueryProvider>
     </MockProvider>