🐛 찜 목록 연결 안되던 오류 해결

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<HTMLDivElement | null>(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<GetMyDibsRes, unknown> | undefined
+}) => {
+  console.log(data?.pages)
   return (
     <>
-      <div className="flex flex-col items-center mt-6">
-        <ExceptionBoundary
-          isLoading={isLoading}
-          isError={isError}
-          isEmpty={isEmpty}
-          isFetchingNextPage={isFetchingNextPage}
-        >
-          <>
-            {data?.pages.map((currentPage, pageIndex) => (
-              <Fragment key={pageIndex}>
-                {currentPage.map((item: Card) => (
-                  <TradeStatusCard key={item.cardId} card={item} />
-                ))}
-              </Fragment>
-            ))}
-          </>
-        </ExceptionBoundary>
-      </div>
-
-      <div ref={lastElementRef} />
+      {data?.pages.map(({ data: { dibList } }: GetMyDibsRes, pageIndex) => (
+        <Fragment key={pageIndex}>
+          {dibList.map((card: Card) => (
+            <div key={card.cardId} className="mb-6">
+              <TradeStatusCard card={card} />
+            </div>
+          ))}
+        </Fragment>
+      ))}
     </>
   )
 }

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<HTMLDivElement | null>(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 (
+    <>
+      <div>
+        <ExceptionBoundary
+          isLoading={isLoading}
+          isError={isError}
+          isEmpty={isEmpty}
+          isFetchingNextPage={isFetchingNextPage}
+        >
+          <MyDibsList data={data} />
+        </ExceptionBoundary>
+      </div>
+
+      <div ref={lastElementRef} />
+    </>
+  )
+}
+export default MyDibsTemplate

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 (
-    <>
+    <MaxWidthWrapper>
       <PageTitle title="찜 목록" />
-      <MyDibsList />
-    </>
+      <MyDibsTemplate />
+    </MaxWidthWrapper>
   )
 }
 

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 (
     <div className="grid items-center justify-between w-full h-8 grid-cols-3 my-4">
       <Image
         src={Assets.arrowLeftIcon}
         alt="이전 아이콘"
         className="flex items-center justify-start"
+        onClick={() => router.back()}
       />
       <h2 className="flex items-center justify-center text-xl font-bold">
         {title}

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,

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
     },
   })
 }

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 = {