From 24efef98951eee63c4d4445a4e34803a8ee6db23 Mon Sep 17 00:00:00 2001 From: juyeon-park Date: Thu, 23 Nov 2023 17:02:03 +0900 Subject: [PATCH] =?UTF-8?q?:bug:=20=EC=B0=9C=20=EB=AA=A9=EB=A1=9D=20?= =?UTF-8?q?=EC=97=B0=EA=B2=B0=20=EC=95=88=EB=90=98=EB=8D=98=20=EC=98=A4?= =?UTF-8?q?=EB=A5=98=20=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../mypage/mydibs/components/MyDibsList.tsx | 63 ++++++------------- .../mydibs/components/MyDibsTemplate.tsx | 46 ++++++++++++++ .../(root)/(routes)/mypage/mydibs/page.tsx | 9 +-- .../domain/page-title/PageTitle.tsx | 5 ++ src/config/apiEndPoint.ts | 12 +++- src/hooks/api/queries/useMyDibsQuery.ts | 14 ++--- src/services/card/card.ts | 18 +++++- 7 files changed, 105 insertions(+), 62 deletions(-) create mode 100644 src/app/(root)/(routes)/mypage/mydibs/components/MyDibsTemplate.tsx diff --git a/src/app/(root)/(routes)/mypage/mydibs/components/MyDibsList.tsx b/src/app/(root)/(routes)/mypage/mydibs/components/MyDibsList.tsx index 4fe04454..60d5282d 100644 --- a/src/app/(root)/(routes)/mypage/mydibs/components/MyDibsList.tsx +++ b/src/app/(root)/(routes)/mypage/mydibs/components/MyDibsList.tsx @@ -1,53 +1,26 @@ -'use client' - -import { useEffect, useRef, Fragment } from 'react' +import { Fragment } from 'react' +import { InfiniteData } from '@tanstack/react-query' import TradeStatusCard from '@/components/domain/card/trade-status-card' -import ExceptionBoundary from '@/components/domain/exception-boundary' -import { useMyDibsQuery } from '@/hooks/api/queries/useMyDibsQuery' -import { useIntersectionObserver } from '@/hooks/useIntersectionObserver' +import { GetMyDibsRes } from '@/services/card/card' import { Card } from '@/types/card' -const MyDibsList = () => { - const { data, fetchNextPage, isLoading, isError, isFetchingNextPage } = - useMyDibsQuery() - console.log(data) - - const lastElementRef = useRef(null) - const entry = useIntersectionObserver(lastElementRef, { threshold: 1.0 }) - - useEffect(() => { - if (isFetchingNextPage) { - return - } - - if (entry?.isIntersecting) { - fetchNextPage() - } - }, [entry?.isIntersecting, fetchNextPage, isFetchingNextPage]) - - const isEmpty = data?.pages[0].length === 0 +const MyDibsList = ({ + data, +}: { + data: InfiniteData | undefined +}) => { + console.log(data?.pages) return ( <> -
- - <> - {data?.pages.map((currentPage, pageIndex) => ( - - {currentPage.map((item: Card) => ( - - ))} - - ))} - - -
- -
+ {data?.pages.map(({ data: { dibList } }: GetMyDibsRes, pageIndex) => ( + + {dibList.map((card: Card) => ( +
+ +
+ ))} + + ))} ) } diff --git a/src/app/(root)/(routes)/mypage/mydibs/components/MyDibsTemplate.tsx b/src/app/(root)/(routes)/mypage/mydibs/components/MyDibsTemplate.tsx new file mode 100644 index 00000000..9f48f608 --- /dev/null +++ b/src/app/(root)/(routes)/mypage/mydibs/components/MyDibsTemplate.tsx @@ -0,0 +1,46 @@ +'use client' + +import { useEffect, useRef } from 'react' +import ExceptionBoundary from '@/components/domain/exception-boundary' +import { useMyDibsQuery } from '@/hooks/api/queries/useMyDibsQuery' +import { useIntersectionObserver } from '@/hooks/useIntersectionObserver' +import MyDibsList from './MyDibsList' + +const MyDibsTemplate = () => { + const { data, fetchNextPage, isLoading, isError, isFetchingNextPage } = + useMyDibsQuery() + console.log(data) + + const lastElementRef = useRef(null) + const entry = useIntersectionObserver(lastElementRef, { threshold: 1.0 }) + + useEffect(() => { + if (isFetchingNextPage) { + return + } + + if (entry?.isIntersecting) { + fetchNextPage() + } + }, [entry?.isIntersecting, fetchNextPage, isFetchingNextPage]) + + const isEmpty = data?.pages[0].data.dibList.length === 0 + + return ( + <> +
+ + + +
+ +
+ + ) +} +export default MyDibsTemplate diff --git a/src/app/(root)/(routes)/mypage/mydibs/page.tsx b/src/app/(root)/(routes)/mypage/mydibs/page.tsx index 0c646448..4cbb1366 100644 --- a/src/app/(root)/(routes)/mypage/mydibs/page.tsx +++ b/src/app/(root)/(routes)/mypage/mydibs/page.tsx @@ -1,12 +1,13 @@ +import MaxWidthWrapper from '@/components/domain/max-width-wrapper' import PageTitle from '@/components/domain/page-title' -import MyDibsList from './components' +import MyDibsTemplate from './components/MyDibsTemplate' const MyDibsPage = () => { return ( - <> + - - + + ) } diff --git a/src/components/domain/page-title/PageTitle.tsx b/src/components/domain/page-title/PageTitle.tsx index 8042e9dd..496cb7b1 100644 --- a/src/components/domain/page-title/PageTitle.tsx +++ b/src/components/domain/page-title/PageTitle.tsx @@ -1,13 +1,18 @@ +'use client' + import Image from 'next/image' +import { useRouter } from 'next/navigation' import Assets from '@/config/assets' const PageTitle = ({ title }: { title: string }) => { + const router = useRouter() return (
이전 아이콘 router.back()} />

{title} diff --git a/src/config/apiEndPoint.ts b/src/config/apiEndPoint.ts index ec997016..26b563c7 100644 --- a/src/config/apiEndPoint.ts +++ b/src/config/apiEndPoint.ts @@ -1,5 +1,9 @@ import { COMMON_PAGE_SIZE } from '@/constants/pageSize' -import { GetCardListReq, GetMyCardListReq } from '@/services/card/card' +import { + GetCardListReq, + GetMyCardListReq, + GetMyDibsReq, +} from '@/services/card/card' import { GetMyTradeHistoryListReq } from '@/services/history/history' import { GetMySuggestionListReq } from '@/services/suggestion/suggestion' import { getQueryParams } from '@/utils/getQueryParams' @@ -50,7 +54,11 @@ const ApiEndPoint = { putUserProfile: () => '/users/profile-image', putUserNickname: () => '/users/nickname', postSuggestion: (suggestionType: string) => `/suggestions/${suggestionType}`, - getMyDibsList: (cursorId: number) => `/dibs/?cursorId=${cursorId}`, + getMyDibsList: ({ cursorId }: GetMyDibsReq) => + `/dibs/?${getQueryParams({ + cursorId, + size: COMMON_PAGE_SIZE, + })}`, getMyTradeHistoryList: ({ cursorId }: GetMyTradeHistoryListReq) => { return `/complete-requests/user/?${getQueryParams({ cursorId, diff --git a/src/hooks/api/queries/useMyDibsQuery.ts b/src/hooks/api/queries/useMyDibsQuery.ts index 60cd8d24..241c986d 100644 --- a/src/hooks/api/queries/useMyDibsQuery.ts +++ b/src/hooks/api/queries/useMyDibsQuery.ts @@ -1,16 +1,14 @@ import { useInfiniteQuery } from '@tanstack/react-query' -import { getMyDibs } from '@/services/card/card' +import { GetMyDibsRes, getMyDibs } from '@/services/card/card' export const useMyDibsQuery = () => { return useInfiniteQuery({ queryKey: ['myDibs'], - queryFn: async ({ pageParam = 0 }) => await getMyDibs(pageParam), - initialPageParam: 0, - getNextPageParam: (lastPage, allPages, lastPageParam) => { - if (lastPage.length === 0) { - return undefined - } - return lastPageParam + 1 + queryFn: async ({ pageParam = undefined }) => + await getMyDibs({ cursorId: pageParam }), + initialPageParam: undefined, + getNextPageParam: (lastPage: GetMyDibsRes) => { + return lastPage.data.nextCursorId }, }) } diff --git a/src/services/card/card.ts b/src/services/card/card.ts index 299cad63..54ac4135 100644 --- a/src/services/card/card.ts +++ b/src/services/card/card.ts @@ -128,9 +128,21 @@ const deleteCard = async (cardId: number) => { const response = await apiClient.delete(ApiEndPoint.deleteCard(cardId)) return response } - -const getMyDibs = async (cursorId: number) => { - const response = await apiClient.get(ApiEndPoint.getMyDibsList(cursorId)) +export type GetMyDibsReq = { + cursorId: string | undefined +} +export type GetMyDibsRes = { + code: string + message: string + data: { + dibList: Card[] + nextCursorId: string + } +} +const getMyDibs = async ({ cursorId }: GetMyDibsReq) => { + const response: GetMyDibsRes = await apiClient.get( + ApiEndPoint.getMyDibsList({ cursorId }), + ) return response } export type PopularCardsRes = {