From 44e6590cce389c63e7872070260e694408118c9d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=B0=95=EB=AF=BC=EC=9A=B0?= Date: Mon, 3 Jun 2024 17:45:40 +0900 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20:=20#492=20-=20useInView=20hook?= =?UTF-8?q?=EB=A5=BC=20=EC=82=AC=EC=9A=A9=ED=95=B4=20=EB=B0=9C=EC=9E=90?= =?UTF-8?q?=EC=B7=A8=EC=A1=B0=ED=9A=8C=20=EB=AC=B4=ED=95=9C=20=EC=8A=A4?= =?UTF-8?q?=ED=81=AC=EB=A1=A4=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../FootPrintList/FootPrintList.tsx | 97 ++++++------------- .../_Components/FootPrintList/index.scss | 17 +++- .../FootprintItem/FootprintItem.tsx | 6 +- .../_Components/FootprintItem/index.scss | 1 + .../DebounceSwitchButton.tsx | 2 +- src/hooks/apis/useMyFootPrintsQuery.ts | 4 +- 6 files changed, 53 insertions(+), 74 deletions(-) diff --git a/src/app/footprints/_Components/FootPrintList/FootPrintList.tsx b/src/app/footprints/_Components/FootPrintList/FootPrintList.tsx index 88f67afe..aa7b9b25 100644 --- 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 ( - // 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 index 058209b2..c113e6fb 100644 --- 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; -} \ No newline at end of file + + &__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 index 79298e60..f5359365 100644 --- 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 (
  • - {`${createdAt} 작성`} + {`${changeCreatedAtToDate(createdAt)} 작성`}
    diff --git a/src/app/footprints/_Components/FootprintItem/index.scss b/src/app/footprints/_Components/FootprintItem/index.scss index 0ab6647f..554e6888 100644 --- 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 index bae990f1..07dc7058 100644 --- 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 index 67909279..ea210ddc 100644 --- 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에 넣어주기 위해