✨ : #492 - useInView hook를 사용해 발자취조회 무한 스크롤 구현

New-Barams · Jun 3, 2024 · 44e6590 · 44e6590
1 parent 2a67198
commit 44e6590
Show file tree

Hide file tree

Showing 6 changed files with 53 additions and 74 deletions.
diff --git a/src/app/footprints/_Components/FootPrintList/FootPrintList.tsx b/src/app/footprints/_Components/FootPrintList/FootPrintList.tsx
@@ -1,8 +1,11 @@
 'use client';
 
+import { COLOR } from '@/constants';
 import { useMyFootPrintsQuery } from '@/hooks/apis/useMyFootPrintsQuery';
 import classNames from 'classnames';
-import React from 'react';
+import React, { useEffect } from 'react';
+import { useInView } from 'react-intersection-observer';
+import { FadeLoader } from 'react-spinners';
 import FootprintItem from '../FootprintItem/FootprintItem';
 import { planType } from '../MyFootPrints/MyFootPrints';
 import './index.scss';
@@ -12,75 +15,26 @@ interface FootPrintListProps {
   plan: planType;
 }
 
-// type FootPrintItemType = {
-//   id: number;
-//   iconNumber: number;
-//   title: string;
-//   createdAt: string;
-//   ajajas: number;
-//   tags: string[];
-// };
-
-// const dummyFootPrintList: FootPrintItemType[] = [
-//   {
-//     id: 1,
-//     iconNumber: 0,
-//     title: '발자취1',
-//     createdAt: '2024.04.22',
-//     ajajas: 1,
-//     tags: ['태그1', '태그2', '태그3', '태그4', '태그5'],
-//   },
-//   {
-//     id: 2,
-//     iconNumber: 1,
-//     title: '발자취2',
-//     createdAt: '2024.04.22',
-//     ajajas: 2,
-//     tags: ['태그1', '태그2', '태그3', '태그4', '태그5'],
-//   },
-//   {
-//     id: 3,
-//     iconNumber: 1,
-//     title: '발자취3',
-//     createdAt: '2024.04.22',
-//     ajajas: 3,
-//     tags: ['태그1', '태그2', '태그3', '태그4', '태그5'],
-//   },
-//   {
-//     id: 4,
-//     iconNumber: 0,
-//     title: '발자취4',
-//     createdAt: '2024.04.22',
-//     ajajas: 1,
-//     tags: ['태그1', '태그2', '태그3', '태그4', '태그5'],
-//   },
-//   {
-//     id: 5,
-//     iconNumber: 1,
-//     title: '발자취5',
-//     createdAt: '2024.04.22',
-//     ajajas: 2,
-//     tags: ['태그1', '태그2', '태그3', '태그4', '태그5'],
-//   },
-//   {
-//     id: 6,
-//     iconNumber: 1,
-//     title: '발자취6',
-//     createdAt: '2024.04.22',
-//     ajajas: 3,
-//     tags: ['태그1', '태그2', '태그3', '태그4', '태그5'],
-//   },
-// ];
-
 export default function FootPrintList({ year, plan }: FootPrintListProps) {
   // TODO: prop으로 받은 year과 plan에 해당하는 발자취 list들을 서버로부터 받아온다.
   // - plan.planId === -1 => 모든 계획일 것
   // - plan.planId === -2 => 해당 year에 해당하는 계획이 없는 것
+  console.log(`${year}과 ${plan}에 해당하는 발자취 List로 변경 필요`);
+
+  const { tempFootPrintList, fetchNextPage, isFetchingNextPage } =
+    useMyFootPrintsQuery({
+      sort: 'latest',
+      current: true,
+    });
 
-  const { tempFootPrintList } = useMyFootPrintsQuery({
-    sort: 'latest',
-    current: true,
-  });
+  const { ref, inView } = useInView();
+
+  useEffect(() => {
+    // ref로 참조하고 있는 div 요소가 viewPort에 보여진다면 다음 페이지 fetch
+    if (inView) {
+      fetchNextPage();
+    }
+  }, [inView]);
 
   return (
     <ul className={classNames('footprint-list')}>
@@ -97,8 +51,17 @@ export default function FootPrintList({ year, plan }: FootPrintListProps) {
           />
         );
       })}
-      <div>{`${year}와 ${plan}에 해당하는 FootPrintList`}</div>
+
+      <div className="footprint-list__loading-wrapper">
+        {isFetchingNextPage ? (
+          <FadeLoader color={COLOR.PRIMARY} speedMultiplier={1.3} />
+        ) : (
+          <div className="footprint-list__end" ref={ref} />
+        )}
+      </div>
     </ul>
-    // TODO: `${year}와 ${plan.planTitle}에 해당하는 FootPrintList 출력`
+
+    // TODO: ${year}와 ${plan.planTitle}에 해당하는 FootPrintList 출력
+    // -> 지금은 임시로 "계획 전체조회 api(계획 둘러보기)"를 사용하고 있음
   );
 }
diff --git a/src/app/footprints/_Components/FootPrintList/index.scss b/src/app/footprints/_Components/FootPrintList/index.scss
@@ -1,6 +1,19 @@
-.footprint-list{
+.footprint-list {
   display: flex;
   flex-direction: column;
   gap: 1rem;
   overflow-y: scroll;
-}
+
+  &__loading-wrapper {
+    display: flex;
+    justify-content: center;
+  }
+
+  &__end {
+    &:before {
+      content: '';
+      display: block;
+      height: 12px;
+    }
+  }
+}
diff --git a/src/app/footprints/_Components/FootprintItem/FootprintItem.tsx b/src/app/footprints/_Components/FootprintItem/FootprintItem.tsx
@@ -1,4 +1,5 @@
 import { AjajaButton, Tag } from '@/components';
+import { changeCreatedAtToDate } from '@/utils';
 import classNames from 'classnames';
 import Link from 'next/link';
 import React from 'react';
@@ -17,6 +18,7 @@ type FootPrintIconMapType = {
   [key: number]: string;
 };
 
+// TODO: 임시로 정의
 const FOOTPRINT_ICON_MAP: FootPrintIconMapType = {
   0: '🤗',
   1: '🗽',
@@ -47,7 +49,7 @@ export default function FootprintItem({
   return (
     <li key={id}>
       <Link
-        href={`/발자취단건조회/${id}`}
+        href={`/footprint/${id}`}
         className={classNames(
           'footprint-item',
           'border-origin-secondary',
@@ -62,7 +64,7 @@ export default function FootprintItem({
             'font-size-xs',
             'color-origin-text-300',
           )}>
-          {`${createdAt} 작성`}
+          {`${changeCreatedAtToDate(createdAt)} 작성`}
         </div>
         <AjajaButton ajajaCount={ajajas} isFilled={true} disabled />
         <div className={classNames('footprint-item__tags')}>

diff --git a/src/app/footprints/_Components/FootprintItem/index.scss b/src/app/footprints/_Components/FootprintItem/index.scss
@@ -29,6 +29,7 @@
 
   &__tags {
     @include ellipsis(2);
+    padding-left: 0.2rem;
     display: flex;
     gap: 0 0.5rem;
     height: 2.5rem;

diff --git a/src/components/DebounceSwitchButton/DebounceSwitchButton.tsx b/src/components/DebounceSwitchButton/DebounceSwitchButton.tsx
@@ -44,7 +44,7 @@ export default function DebounceSwitchButton({
 
   const submitIfReallyChanged = () => {
     if (isOn !== originalIsOn) {
-      submitToggleAPI();
+      submitToggleAPI(); // TODO: 여기서 만약 실패하면 아래 isOn은 바뀌면 안되는 거 아닌가?
       setOriginalIsOn(isOn);
     }
   };

diff --git a/src/hooks/apis/useMyFootPrintsQuery.ts b/src/hooks/apis/useMyFootPrintsQuery.ts
@@ -5,7 +5,7 @@ import { QUERY_KEY } from '@/constants/queryKey';
 import { GetAllPlansRequestQuery } from '@/types/apis/plan/GetAllPlans';
 import { useSuspenseInfiniteQuery } from '@tanstack/react-query';
 
-// TODO: 수정 필요
+// TODO: 계획 전체조회 API -> 발자취 전체 조회 API로 수정 필요
 export const useMyFootPrintsQuery = (query: GetAllPlansRequestQuery) => {
   const {
     data,
@@ -38,7 +38,7 @@ export const useMyFootPrintsQuery = (query: GetAllPlansRequestQuery) => {
         return undefined;
       }
 
-      const lastItem = lastPage[lastPage.length - 1]; // 가장 최근 받아온 3개 data 중 마지막 ite
+      const lastItem = lastPage[lastPage.length - 1]; // 가장 최근 받아온 3개 data 중 마지막 item
       return query.sort === 'ajaja'
         ? { start: lastItem.id, ajaja: lastItem.ajajas } // 인기순이면 start, ajaja 모두 params에 넣어주기 위해
         : { start: lastItem.id }; // 인기순이면 start를 params에 넣어주기 위해