feat: Signature Comment 무한스크롤 구현

src/apis/request/signature.js

@@ -61,8 +61,7 @@ const getLikeList = signatureId => {
 
 // 시그니처 댓글 / 답글 불러오기 (무한 스크롤)
 const getSignatureComments = (signatureId, take, { pageParam }) => {
-  const url = `api/v1/signature/${signatureId}/comment?take${take}&cursorId=${pageParam}`;
-  console.log(url);
+  const url = `api/v1/signature/${signatureId}/comment?take=${take}&cursorId=${pageParam}`;
   return axiosWithToken.get(url);
 };
 

src/components/comment/signature/SignatureCommentList.jsx

@@ -1,4 +1,7 @@
+import { useEffect } from 'react';
+import { useInView } from 'react-intersection-observer';
 import { useParams } from 'react-router-dom';
+import { ClipLoader } from 'react-spinners';
 
 import * as S from './SignatureCommentList.style';
 import SignatureComment from './commentView/SignatureComment';
@@ -7,20 +10,34 @@ import { useGetSignatureComments } from '@/hooks/signature/queries/useGetSignatu
 const SignatureCommentList = () => {
   const { signatureId } = useParams();
 
-  const { data, isLoading, isPending } = useGetSignatureComments(
-    signatureId,
-    2,
-  );
+  const { data, isFetching, hasNextPage, fetchNextPage } =
+    useGetSignatureComments(signatureId, 3);
 
   const signatureComments = data?.pages;
 
+  const { ref, inView } = useInView({
+    threshold: 0,
+    delay: 0,
+  });
+
+  useEffect(() => {
+    if (inView) {
+      console.log('fire');
+      !isFetching && hasNextPage && fetchNextPage();
+    }
+  }, [inView, isFetching, hasNextPage, fetchNextPage]);
+
   return (
     <S.Container>
       {signatureComments?.map(comments =>
         comments?.data?.data?.data?.map(comment => (
           <SignatureComment key={comment._id} data={comment} />
         )),
       )}
+      <S.LoadingWrapper>
+        {isFetching && <ClipLoader size={50} color={'#1B9C85'} />}
+      </S.LoadingWrapper>
+      <div ref={ref} style={{ height: 5 }} />
     </S.Container>
   );
 };

src/components/comment/signature/SignatureCommentList.style.js

@@ -1,10 +1,25 @@
 import styled from 'styled-components';
 
+import theme from '@/theme';
+
 const Container = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
+  ${theme.ALIGN.COLUMN_CENTER};
+  max-height: 500px;
   width: 100%;
+  overflow: scroll;
+
+  &::-webkit-scrollbar {
+    width: 4px;
+  }
+  &::-webkit-scrollbar-thumb {
+    border-radius: 20px;
+    background: #ccc;
+  }
+`;
+
+const LoadingWrapper = styled.div`
+  ${theme.ALIGN.ROW_CENTER}
+  height: 20px;
 `;
 
-export { Container };
+export { Container, LoadingWrapper };

src/hooks/signature/queries/useGetSignatureComments.js

@@ -9,12 +9,14 @@ const useGetSignatureComments = (signatureId, take) => {
     initialPageParam: 0,
     getNextPageParam: (lastPage, allPages, lastPageParam) => {
       const meta = lastPage?.data?.data?.meta;
-      if (meta && meta.hasNextData) {
-        return meta.cursor;
+      console.log(lastPage);
+      if (meta?.hasNextData) {
+        return meta?.cursor;
       } else {
         return null;
       }
     },
+    staleTime: 60 * 1000,
   });
 };