diff --git a/src/apis/post/queries.ts b/src/apis/post/queries.ts index 8f62a741..bc650ef5 100644 --- a/src/apis/post/queries.ts +++ b/src/apis/post/queries.ts @@ -1,3 +1,4 @@ +import type { InfiniteData, DefaultError } from '@tanstack/react-query' import { useMutation, useQuery, useInfiniteQuery } from '@tanstack/react-query' import { getPost, @@ -16,6 +17,7 @@ import type { UpdatePostReq, UpdateTradeStatusReq } from './types' +import type { PostSummaries } from '@types' export const useCreatePostMutation = () => useMutation({ @@ -81,15 +83,25 @@ export const useGetPostsQuery = (searchOptions: GetPostsReq) => enabled: typeof searchOptions.sellerId === 'number' }) -export const useGetInfinitePostsQuery = (params: GetPostsReq) => - useInfiniteQuery({ - queryKey: ['infinitePosts', params], - queryFn: () => getPosts(params), +export const useGetInfinitePostsQuery = ({ + limit = 8, + ...params +}: GetPostsReq) => + useInfiniteQuery< + GetPostsRes, + DefaultError, + InfiniteData & { totalPage: number } + >({ + queryKey: ['getInfinitePosts', params], + queryFn: ({ pageParam }) => + getPosts({ ...params, limit, lastId: pageParam as number }), initialPageParam: null, getNextPageParam: lastPage => - lastPage?.hasNext - ? lastPage.posts[lastPage.posts.length - 1].id - : undefined + lastPage?.hasNext ? lastPage.posts.at(-1)?.id : undefined, + select: data => ({ + ...data, + totalPage: data.pages[0].totalCount || 0 + }) }) export const useUpdateTradeStatusMutation = () => diff --git a/src/components/home/ProductList/index.tsx b/src/components/home/ProductList/index.tsx index dc6d1ab2..3c4c10c0 100644 --- a/src/components/home/ProductList/index.tsx +++ b/src/components/home/ProductList/index.tsx @@ -1,6 +1,6 @@ import { useRouter } from 'next/router' import type { ReactElement } from 'react' -import { useEffect, useState } from 'react' +import { useEffect } from 'react' import { useInView } from 'react-intersection-observer' import { Styled } from './styled' import type { ProductListProps } from './types' @@ -8,14 +8,15 @@ import { ProductItem } from '../ProductItem' import { useUpdateLikeStatusMutation } from '@apis/like' const ProductList = ({ - postData, + postList, hasNextPage, fetchNextPage }: ProductListProps): ReactElement => { - const [isFirstRender, setIsFirstRender] = useState(false) - const updateLikeStatusMutation = useUpdateLikeStatusMutation() const router = useRouter() - const { ref: isLastPrdRef, inView } = useInView({ + + const updateLikeStatusMutation = useUpdateLikeStatusMutation() + + const { ref: isLastPostRef, inView } = useInView({ threshold: 1 }) @@ -26,21 +27,13 @@ const ProductList = ({ } useEffect(() => { - if (!shouldFetchNextPage) { - return - } - if (!isFirstRender) { - setIsFirstRender(true) - return - } - - fetchNextPage && fetchNextPage() - }, [fetchNextPage, shouldFetchNextPage, isFirstRender]) + fetchNextPage?.() + }, [fetchNextPage, shouldFetchNextPage]) return ( <> - {postData?.map(page => + {postList?.map(page => page?.posts?.map(post => ( - + ) } diff --git a/src/components/home/ProductList/types.ts b/src/components/home/ProductList/types.ts index 40f23696..b404e7a5 100644 --- a/src/components/home/ProductList/types.ts +++ b/src/components/home/ProductList/types.ts @@ -6,7 +6,7 @@ import type { import type { GetPostsRes } from '@apis/post' export type ProductListProps = { - postData?: GetPostsRes[] + postList?: GetPostsRes[] hasNextPage?: boolean fetchNextPage?( options?: FetchNextPageOptions diff --git a/src/pages/categories/[categoryCode].tsx b/src/pages/categories/[categoryCode].tsx index 65eeb7f0..1f846140 100644 --- a/src/pages/categories/[categoryCode].tsx +++ b/src/pages/categories/[categoryCode].tsx @@ -11,10 +11,6 @@ import { PostSection, ResultHeader } from '@components' import type { SortOptionCodes, TradeTypeCodes } from '@types' import { find, removeNullish, toQueryString } from '@utils' -const DEFAULT_PER_PAGE = 8 -// TODO: 포스트 전체 갯수 내려달라고 요청해놓았습니다 -const POSTS_COUNT_MOCK = 10 - type CategoriesProps = { category?: string sort?: SortOptionCodes @@ -62,12 +58,13 @@ const Categories: NextPage = ({ getCategoriesQuery.data?.map(({ code, name }) => ({ code, name })) || [] const currentCategory = find(categories, { code: searchOptions.category }) - const infinitePosts = useGetInfinitePostsQuery({ + const getInfinitePostsQuery = useGetInfinitePostsQuery({ lastId: null, - limit: DEFAULT_PER_PAGE, ...searchParams }) + const postCount = getInfinitePostsQuery.data?.totalPage || 0 + const searchByCategory = ({ category, priceRange, @@ -96,16 +93,16 @@ const Categories: NextPage = ({ diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 3144c422..15c62747 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -7,32 +7,26 @@ import { ProductList } from '../components/home/ProductList' import { useGetInfinitePostsQuery } from '@apis/post' import { CategorySlider, HomeBanner } from '@components' -const DEFAULT_PER_PAGE = 8 -// TODO: 포스트 전체 갯수 내려달라고 요청해놓았습니다 -const POSTS_COUNTS_MOCK = 10 - const Home: NextPage = () => { - const { - data: postList, - fetchNextPage, - hasNextPage - } = useGetInfinitePostsQuery({ - lastId: null, - limit: DEFAULT_PER_PAGE - }) const router = useRouter() + const getInfinitePostsQuery = useGetInfinitePostsQuery({ + lastId: null + }) + + const postCount = getInfinitePostsQuery.data?.totalPage || 0 + return ( 새로운 상품 - {POSTS_COUNTS_MOCK > 0 ? ( + {postCount > 0 ? ( ) : ( diff --git a/src/pages/result/index.tsx b/src/pages/result/index.tsx index 2ea6d78a..a8d3b527 100644 --- a/src/pages/result/index.tsx +++ b/src/pages/result/index.tsx @@ -13,10 +13,6 @@ import { ResultHeader, PostSection } from '@components' import type { SortOptionCodes, TradeTypeCodes } from '@types' import { toQueryString, removeNullish } from '@utils' -const DEFAULT_PER_PAGE = 8 -// TODO: 포스트 전체 갯수 내려달라고 요청해놓았습니다 -const POST_COUNT_MOCK = 10 - type ResultPageProps = { keyword?: string category?: string | null @@ -47,11 +43,13 @@ const ResultPage: NextPage = ({ tradeType }: ResultPageProps) => { const router = useRouter() - const searchKeyword = useAtomValue(searchKeywordAtom) const [searchOptions, setSearchOptions] = useState({ sort: 'CREATED_DATE_DESC', priceRange: {} }) + + const searchKeyword = useAtomValue(searchKeywordAtom) + const currentKeyword = searchKeyword ?? keyword const searchParams = removeNullish({ category: searchOptions?.category ?? category, @@ -62,12 +60,13 @@ const ResultPage: NextPage = ({ searchKeyword: currentKeyword }) - const infinitePosts = useGetInfinitePostsQuery({ + const getInfinitePostsQuery = useGetInfinitePostsQuery({ lastId: null, - limit: DEFAULT_PER_PAGE, ...searchParams }) + const postCount = getInfinitePostsQuery.data?.totalPage || 0 + const searchByResult = ({ priceRange, ...params }: SearchOptionsState) => { router.push( `/result?${toQueryString({ @@ -92,16 +91,16 @@ const ResultPage: NextPage = ({ diff --git a/src/types/scheme.ts b/src/types/scheme.ts index 9a69f02f..9161e459 100644 --- a/src/types/scheme.ts +++ b/src/types/scheme.ts @@ -57,6 +57,7 @@ export type PostSummary = { hasReview: boolean } export type PostSummaries = { + totalCount: number posts: PostSummary[] hasNext: boolean }