From 076b029a10930dd853b3cf41d74e5fcaad7eb2b9 Mon Sep 17 00:00:00 2001 From: hyeseon han Date: Sat, 24 Feb 2024 00:55:59 +0900 Subject: [PATCH] =?UTF-8?q?fix:=20=EB=82=98=EB=88=94=20=EB=AA=A9=EB=A1=9D?= =?UTF-8?q?=20=EC=A1=B0=ED=9A=8C=20=EB=AC=B4=ED=95=9C=20=EC=8A=A4=ED=81=AC?= =?UTF-8?q?=EB=A1=A4=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/queries/queryKeys.ts | 12 +++- src/hooks/queries/share/useGetShares.ts | 17 ++++- src/pages/share/index.tsx | 86 ++++++++++++------------- 3 files changed, 65 insertions(+), 50 deletions(-) diff --git a/src/hooks/queries/queryKeys.ts b/src/hooks/queries/queryKeys.ts index 7cb76f3..225174a 100644 --- a/src/hooks/queries/queryKeys.ts +++ b/src/hooks/queries/queryKeys.ts @@ -1,4 +1,8 @@ -import type { FriendshipSortType } from '@/types/friendship'; +import type { + FriendshipSortType, + ShareSortType, + ShareStatusType, +} from '@/types/friendship'; export const queryKeys = { MY_FRIDGE_LIST: () => ['my_fridge_list'], @@ -8,7 +12,11 @@ export const queryKeys = { INGREDIENT_ID: (id: number) => ['ingredient', id], INGREDIENTS: () => ['my-ingredient'], KAKAO: () => ['kakao'], - SHARES: () => ['shares'], + SHARES: (sort: ShareSortType, status: ShareStatusType) => [ + 'shares', + sort, + status, + ], ME: () => ['my-info'], FRIENDSHIPS: (sort: FriendshipSortType) => ['friendship', sort], DELETE_FRIENDSHIP: () => ['deleteFriendship'], diff --git a/src/hooks/queries/share/useGetShares.ts b/src/hooks/queries/share/useGetShares.ts index dadda6c..f6a55ed 100644 --- a/src/hooks/queries/share/useGetShares.ts +++ b/src/hooks/queries/share/useGetShares.ts @@ -1,7 +1,18 @@ +import { type ShareStatusType, type ShareSortType } from '@/types/friendship'; import { queryKeys } from '../queryKeys'; -import { useBaseQuery } from '../useBaseQuery'; +import { useBaseInfiniteQuery } from '../useBaseInfiniteQuery'; -const useGetShares = () => - useBaseQuery(queryKeys.SHARES(), '/shares', true); +const useGetShares = ({ + sort, + status, +}: { + sort: ShareSortType; + status: ShareStatusType; +}) => + useBaseInfiniteQuery({ + queryKey: queryKeys.SHARES(sort, status), + url: '/shares', + params: { sort, status }, + }); export default useGetShares; diff --git a/src/pages/share/index.tsx b/src/pages/share/index.tsx index dbac79c..8cc76e0 100644 --- a/src/pages/share/index.tsx +++ b/src/pages/share/index.tsx @@ -1,63 +1,55 @@ -import { RadioButtonField, SortButton, TabButton } from '@/components/atoms'; -import Header from '@/components/organisms/Header'; -import ShareListItem from '@/components/organisms/ShareListItem'; -import { type NextPage } from 'next'; -import { useState } from 'react'; import { Modal, - ModalOverlay, ModalBody, ModalContent, + ModalOverlay, useDisclosure, } from '@chakra-ui/react'; -import { PlusIcon } from '@/assets/icons'; -import { type SortLabel, type TabLabel } from '@/types/common'; -import dayjs from 'dayjs'; +import { RadioButtonField, SortButton, TabButton } from '@/components/atoms'; +import type { ShareSortType, ShareStatusType } from '@/types/friendship'; +import type { SortLabel, TabLabel } from '@/types/common'; +import { useRef, useState } from 'react'; + +import Header from '@/components/organisms/Header'; import Link from 'next/link'; -import { useGetShares } from '@/hooks/queries/share'; +import type { NextPage } from 'next'; +import { PlusIcon } from '@/assets/icons'; +import ShareListItem from '@/components/organisms/ShareListItem'; import { SuspenseFallback } from '@/components/templates'; +import { useGetShares } from '@/hooks/queries/share'; +import { useObserver } from '@/hooks/useObserver'; const TABS: TabLabel[] = [ - { label: '나눔 신청', value: 'enroll' }, - { label: '나눔 중', value: 'proceeding' }, - { label: '나눔 완료', value: 'complete' }, + { label: '나눔 신청', value: 'SHARE_START' }, + { label: '나눔 중', value: 'SHARE_IN_PROGRESS' }, + { label: '나눔 완료', value: 'SHARE_END' }, ]; const SORT_TYPES: SortLabel[] = [ - { label: '최신순', value: 'latest' }, - { label: '마감순', value: 'earliest' }, + { label: '최신순', value: 'registeredDate' }, + { label: '마감순', value: 'dueDate' }, ]; -const MOCK_DATA = { - count: 2, - data: [ - { - id: 1, - thumbnail: null, - title: '사과 받아갈 사람', - location: '공덕역', - date: dayjs('2024-12-14 10:35'), - }, - { - id: 2, - thumbnail: null, - title: '사과 받아갈 사람', - location: '디지털미디어시티역', - date: dayjs('2024-12-14 10:35'), - }, - ], -}; - const SharePage: NextPage = () => { const [curTab, setCurTab] = useState(TABS[0]); const [curSortType, setCurSortType] = useState(SORT_TYPES[0]); const { isOpen, onOpen, onClose } = useDisclosure(); - const { data } = useGetShares(); - console.log(data?.data); + const bottom = useRef(null); + const { data, fetchNextPage, isFetchingNextPage } = useGetShares({ + sort: curSortType.value as ShareSortType, + status: curTab.value as ShareStatusType, + }); - if (!data?.data) { - return ; - } + const onIntersect: IntersectionObserverCallback = ([entry]) => { + if (entry.isIntersecting) { + void fetchNextPage(); + } + }; + + useObserver({ + target: bottom, + onIntersect, + }); return ( <> @@ -78,16 +70,20 @@ const SharePage: NextPage = () => {
-

총 {MOCK_DATA.count}건

+

총 {data?.pages[0].totalElements}건

-
- {data?.data.map((ele) => ( - - ))} +
+ {data?.pages.map((page) => + page.content.map((ele: ShareData) => ( + + )), + )} + {isFetchingNextPage ? :
}
+