인기게시글-불러오기-기능-추가

client/src/components/post/MainPagePostList.tsx

@@ -5,6 +5,7 @@ import PostCardList from "@/components/post/PostCardList";
 import CustomContainer from "@/components/layout/CustomContainer";
 import { useState } from "react";
 import CustomToggleButtonGroup from "@/components/CustomToggleButtonGroup";
+import PopularPostCardList from "./PopularPostCardList";
 
 type Props = {
   initialData: AugmentedGetPostListResponse;
@@ -19,11 +20,13 @@ const MainPagePostList = ({ initialData }: Props) => {
       <CustomToggleButtonGroup
         value={selectableList}
         onChange={setCurrentView}
-        sx={{ position: "fixed", top: 0, left: 0, right: 0,zIndex:1 }}
+        sx={{ position: "fixed", top: 0, left: 0, right: 0, zIndex: 1 }}
       />
       <CustomContainer mt={5}>
-        {currentView==="전체 캐스크"&&<PostCardList initialData={initialData} />}
-        {currentView==="인기"&&<PostCardList sort="likeCount"/>}
+        {currentView === "전체 캐스크" && (
+          <PostCardList initialData={initialData} />
+        )}
+        {currentView === "인기" && <PopularPostCardList />}
       </CustomContainer>
     </>
   );

client/src/components/post/PopularPostCardList.tsx

@@ -0,0 +1,64 @@
+"use client";
+
+import PostCard from "@/components/post/PostCard";
+import useGetPopularPostListInfiniteQuery, {
+  UseGetPopularPostListQueryInterface,
+} from "@/queries/post/useGetPopularPostListInfiniteQuery";
+import { useInView } from "react-intersection-observer";
+import { useEffect } from "react";
+import { Stack } from "@mui/material";
+import { useMemo } from "react";
+import Image from "next/image";
+import NoResult from "@/assets/images/noResult.png";
+import getTokenFromLocalStorage from "@/utils/getTokenFromLocalStorage";
+import PostCardSkeleton from "./PostCardSkeleton";
+
+function PopularPostCardList(props: UseGetPopularPostListQueryInterface) {
+  const {
+    data,
+    fetchNextPage,
+    isFetchingNextPage,
+    hasNextPage,
+    isSuccess,
+    isLoading,
+  } = useGetPopularPostListInfiniteQuery({
+    ...props,
+    headers: { Authorization: getTokenFromLocalStorage() },
+  });
+
+  const { ref, inView } = useInView();
+  useEffect(() => {
+    if (hasNextPage && inView) fetchNextPage();
+  }, [inView, hasNextPage]);
+
+  const hasResult = useMemo(
+    () => data && data.pages[0].content.length > 0,
+    [data]
+  );
+
+  return (
+    <div>
+      {hasResult &&
+        isSuccess &&
+        // 검색결과가 있을시
+        data?.pages.map((page) =>
+          page.content.map((post) => <PostCard {...post} key={post.postNo} />)
+        )}
+      {isSuccess && !hasResult && (
+        // 검색결과 없을 시
+        <Stack justifyContent="center" alignItems="center" py={8}>
+          <Image src={NoResult} alt="no result alert" />
+        </Stack>
+      )}
+      {/* 로딩창 */}
+      {isFetchingNextPage || isLoading ? (
+        <PostCardSkeleton />
+      ) : (
+        // 인터섹션옵저버
+        hasNextPage && <div style={{ height: 60 }} ref={ref}></div>
+      )}
+    </div>
+  );
+}
+
+export default PopularPostCardList;

client/src/const/serverPath.ts

@@ -47,7 +47,13 @@ export const DELETE_COMMENT = (postPk: string, commentPk: string) =>
 /**
  * 게시물리스트를 받아오거나, 작성하는 Path 버전2 (Breaking Change)
  */
-export const POST_LIST_V2 = "/posts/v2" as const;
+export const POST_LIST_V2 = "/posts/v2";
+
+/**
+ * 게시물리스트를 받아오거나, 작성하는 Path 버전2 (Breaking Change)
+ */
+export const POPULAR_POST_LIST = "/posts/popular";
+
 /**
  * ID(pk) 를 입력받아 해당 포스트를 지우는 URL
  */

client/src/queries/post/useGetPopularPostListInfiniteQuery.ts

@@ -0,0 +1,127 @@
+import { useInfiniteQuery, useQueryClient } from "@tanstack/react-query";
+import { PostInterface } from "@/types/post/PostInterface";
+import { AxiosRequestConfig } from "axios";
+import getTokenFromLocalStorage from "@/utils/getTokenFromLocalStorage";
+import { POPULAR_POST_LIST } from "@/const/serverPath";
+import useAxiosPrivate from "@/hooks/useAxiosPrivate";
+import Pagenated from "@/types/Pagenated";
+
+export interface UseGetPopularPostListQueryInterface
+  extends GetPostListOptions {
+  initialData?: AugmentedGetPostListResponse;
+  headers?: AxiosRequestConfig["headers"];
+}
+
+export const useGetPopularPostListInfiniteQuery = ({
+  initialData,
+  size,
+  sort,
+  headers,
+}: UseGetPopularPostListQueryInterface) => {
+  return useInfiniteQuery({
+    queryKey: getPopularPostListInfiniteQueryKey.byKeyword({
+      sort,
+    }),
+
+    queryFn: async ({ pageParam = 0 }) =>
+      await getPopularPostListQueryFn({
+        page: pageParam,
+        size,
+        sort,
+        headers: headers?.Authorization
+          ? headers
+          : { Authorization: getTokenFromLocalStorage() },
+      }),
+
+    getNextPageParam: ({
+      currentPage,
+      hasNextPage,
+    }: AugmentedGetPostListResponse) =>
+      hasNextPage ? currentPage + 1 : undefined,
+
+    getPreviousPageParam: ({ currentPage }: AugmentedGetPostListResponse) =>
+      currentPage > 0 ? currentPage - 1 : undefined,
+    initialPageParam: 0,
+    initialData: initialData
+      ? { pages: [initialData], pageParams: [0] }
+      : undefined,
+  });
+};
+/**
+ * 포스트리스트를 받아올 때 Query string으로 사용되는 값
+ */
+export interface GetPostListOptions {
+  page?: number;
+  size?: number;
+  sort?: string;
+}
+/**
+ * 서버응답값 + 무한스크롤을 위해 증강된 값
+ */
+export interface AugmentedGetPostListResponse extends Pagenated<PostInterface> {
+  currentPage: number;
+  hasNextPage: boolean;
+}
+
+export const getPopularPostListQueryFn = async ({
+  page = 0,
+  size = 10,
+  sort,
+  headers,
+}: GetPostListOptions & {
+  headers?: AxiosRequestConfig<any>["headers"];
+}): Promise<AugmentedGetPostListResponse> => {
+  const axiosPrivate = useAxiosPrivate();
+  const { data } = await axiosPrivate.get<{ data: Pagenated<PostInterface> }>(
+    POPULAR_POST_LIST,
+    {
+      baseURL: process.env.NEXT_PUBLIC_BASE_URL,
+      params: {
+        page,
+        size,
+        sort: sort ?? "lastModifiedDate,desc",
+      },
+      headers,
+    }
+  );
+  return {
+    ...data.data,
+    currentPage: page,
+    hasNextPage: data.data.totalElements / ((page + 1) * size) > 1,
+  };
+};
+
+export interface PopularPostListInfiniteQueryKey {
+  keyword?: string;
+  userNo?: string;
+  sort?: string;
+}
+
+export const getPopularPostListInfiniteQueryKey = {
+  all: ["popular_posts"] as const,
+  byKeyword: ({ sort }: Omit<GetPostListOptions, "page" | "size">) =>
+    [
+      "popular_posts",
+      {
+        sort,
+      },
+    ] as const,
+};
+
+/**
+ * 모든 포스트리스트 쿼리를 Invalidate 하는 Hooks
+ * @returns Invalidate 함수
+ */
+export const useInvalidatePopularPostList = () => {
+  /**
+   * 모든 포스트리스트 쿼리를 Invalidate 하는함수
+   */
+  const queryClinet = useQueryClient();
+  return () => {
+    queryClinet.invalidateQueries({
+      queryKey: getPopularPostListInfiniteQueryKey.all,
+    });
+  };
+};
+
+export default useGetPopularPostListInfiniteQuery;