{hasResult &&
isSuccess &&
// 검색결과가 있을시
data?.pages.map((page) =>
- page.list.map((post) =>
)
+ page.content.map((post) =>
)
)}
{isSuccess && !hasResult && (
// 검색결과 없을 시
@@ -56,7 +56,7 @@ function PostCardList(props: UseGetPostListQueryInterface) {
)}
{/* 로딩창 */}
{isFetchingNextPage || isLoading ? (
-
+
) : (
// 인터섹션옵저버
diff --git a/client/src/queries/post/useGetPostListInfiniteQuery.tsx b/client/src/queries/post/useGetPostListInfiniteQuery.tsx
index b2f7476..b1e2569 100644
--- a/client/src/queries/post/useGetPostListInfiniteQuery.tsx
+++ b/client/src/queries/post/useGetPostListInfiniteQuery.tsx
@@ -2,8 +2,9 @@ import { useInfiniteQuery, useQueryClient } from "@tanstack/react-query";
import { PostInterface } from "@/types/post/PostInterface";
import { AxiosRequestConfig } from "axios";
import getTokenFromLocalStorage from "@/utils/getTokenFromLocalStorage";
-import { POST_LIST } from "@/const/serverPath";
+import { POST_LIST_V2 } from "@/const/serverPath";
import useAxiosPrivate from "@/hooks/useAxiosPrivate";
+import Pagenated from "@/types/Pagenated";
export interface UseGetPostListQueryInterface extends GetPostListOptions {
initialData?: AugmentedGetPostListResponse;
@@ -15,12 +16,14 @@ export const useGetPostListInfiniteQuery = ({
size,
searchKeyword,
searchUserNos,
+ sort,
headers,
}: UseGetPostListQueryInterface) => {
return useInfiniteQuery({
queryKey: getPostListInfiniteQueryKey.byKeyword({
- keyword: searchKeyword,
- userNo: searchUserNos,
+ searchKeyword,
+ searchUserNos,
+ sort
}),
queryFn: async ({ pageParam = 0 }) =>
@@ -29,6 +32,7 @@ export const useGetPostListInfiniteQuery = ({
size,
searchKeyword,
searchUserNos,
+ sort,
headers: headers?.Authorization
? headers
: { Authorization: getTokenFromLocalStorage() },
@@ -54,20 +58,14 @@ export const useGetPostListInfiniteQuery = ({
export interface GetPostListOptions {
page?: number;
size?: number;
+ sort?: string;
searchKeyword?: string;
searchUserNos?: string;
}
-/**
- * 실제 서버에서 응답해주는 값
- */
-export interface GetPostListResponse {
- list: PostInterface[];
- totalCount: number;
-}
/**
* 서버응답값 + 무한스크롤을 위해 증강된 값
*/
-export interface AugmentedGetPostListResponse extends GetPostListResponse {
+export interface AugmentedGetPostListResponse extends Pagenated
{
currentPage: number;
hasNextPage: boolean;
}
@@ -77,32 +75,46 @@ export const getPostListQueryFn = async ({
size = 10,
searchKeyword,
searchUserNos,
+ sort,
headers,
}: GetPostListOptions & {
headers?: AxiosRequestConfig["headers"];
}): Promise => {
- const axiosPrivate = useAxiosPrivate()
- const { data } = await axiosPrivate.get(POST_LIST, {
- baseURL: process.env.NEXT_PUBLIC_BASE_URL,
- params: { page, size, searchKeyword, searchUserNos },
- headers,
- });
+ const axiosPrivate = useAxiosPrivate();
+ const { data } = await axiosPrivate.get>(
+ POST_LIST_V2,
+ {
+ baseURL: process.env.NEXT_PUBLIC_BASE_URL,
+ params: {
+ page,
+ size,
+ searchKeyword,
+ searchUserNos,
+ sort: sort ?? "lastModifiedDate,desc",
+ },
+ headers,
+ }
+ );
return {
...data,
currentPage: page,
- hasNextPage: data.totalCount / ((page + 1) * size) > 1,
+ hasNextPage: data.totalElements / ((page + 1) * size) > 1,
};
};
-export interface PostListInfiniteQueryKey {
- keyword?: string;
- userNo?: string;
-}
+// export interface PostListInfiniteQueryKey {
+// keyword?: string;
+// userNo?: string;
+// }
export const getPostListInfiniteQueryKey = {
all: ["posts"] as const,
- byKeyword: ({ keyword, userNo }: PostListInfiniteQueryKey) =>
- ["posts", { keyword, userNo }] as const,
+ byKeyword: ({
+ searchKeyword,
+ searchUserNos,
+ sort,
+ }: Omit) =>
+ ["posts", { searchKeyword, searchUserNos, sort }] as const,
};
/**
diff --git a/client/src/store/post/PostCardContext.ts b/client/src/store/post/PostCardContext.ts
index bc5c1ea..2cfcf01 100644
--- a/client/src/store/post/PostCardContext.ts
+++ b/client/src/store/post/PostCardContext.ts
@@ -3,13 +3,15 @@ import { createContext } from "react";
export interface PostcardContextInterface {
searchKeyword?: string;
searchUserNos?: string;
+ sort?: string;
}
/**
- * 현재 보고있는 페이지의 컨텍스트
+ * 현재 보고있는 페이지의 컨텍스트
* (검색,유저페이지,메인페이지의 글 리스트가 같은 쿼리를 바라보고있으므로,
* 적절한 Invalidation을 위한 쿼리키를 추출하기 위해 사용됨)
*/
export const postcardContext = createContext({
searchKeyword: undefined,
searchUserNos: undefined,
+ sort: undefined,
});