Refactor : 술백과 페이지 페이지네이션 추가

client/src/components/newpost/SearchAlcoholInput.tsx

@@ -37,7 +37,9 @@ const SearchAlcoholInput = ({
   const [isSearchingAlcohol, setIsSearchingAlCohol] = useState(false);
 
   // 검색결과
-  const { data, isLoading, isSuccess } = useGetAlcoholListQuery(debouncedValue);
+  const { data, isLoading, isSuccess } = useGetAlcoholListQuery({
+    searchKeyword: debouncedValue,
+  });
   // 유저가 검색후 최종적으로 선택한 값
   const [selectedAlcohol, setSelectedAlcohol] = useState<
     | Pick<AlcoholDetailInterface, "alcoholName" | "alcoholNo" | "alcoholType">

client/src/components/wiki/AlcoholList.tsx

@@ -5,16 +5,17 @@ import { Typography } from "@mui/material";
 import { memo } from "react";
 import AlcoholListSkeleton from "./AlcoholListSkeleton";
 
-interface AlcoholList {
+interface AlcoholListInterface {
   data?: AlcoholDetailInterface[];
   onClickElement?: (data: AlcoholDetailInterface) => void;
+  size?:number
 }
 /**
  * 술 정보 Array 를 입력받아 List로 맵핑해주는 컴포넌트
  * onClickElement 속성으로 각 엘리먼트 클릭 시 속성을 지정가능
  * @returns
  */
-const AlcoholList = ({ data: alcohols, onClickElement }: AlcoholList) => {
+const AlcoholList = ({ data: alcohols, onClickElement,size=5 }: AlcoholListInterface) => {
   return alcohols ? (
     <>
       {alcohols.length > 0 ? (
@@ -37,7 +38,7 @@ const AlcoholList = ({ data: alcohols, onClickElement }: AlcoholList) => {
       )}
     </>
   ) : (
-    <AlcoholListSkeleton disableTimer />
+    <AlcoholListSkeleton size={size} disableTimer/>
   );
 };
 export default memo(AlcoholList);

client/src/components/wiki/AlcoholPagination.tsx

@@ -1,21 +1,79 @@
 "use client";
-import useGetAlcoholListQuery from "@/queries/alcohol/useGetAlcoholListQuery";
+import useGetAlcoholListQuery, {
+  AlcohilListQueryKey,
+  getAlcoholListByKeyword,
+} from "@/queries/alcohol/useGetAlcoholListQuery";
 import AlcoholList from "@/components/wiki/AlcoholList";
 import { Pagination, Stack } from "@mui/material";
 import usePushToWikiDetail from "@/hooks/wiki/usePushToWikiDetail";
+import { useEffect, useState } from "react";
+import { useQueryClient } from "@tanstack/react-query";
 
 const AlcoholPagenation = () => {
-  const { data: alcohols } = useGetAlcoholListQuery("");
+  const [currentPage, setCurrentPage] = useState(1);
+  const size = 10;
+
+  const { data: alcohols } = useGetAlcoholListQuery({
+    searchKeyword: "",
+    page: currentPage - 1,
+    size,
+  });
+
+  const [totalCount, setTotalCount] = useState(alcohols?.totalCount);
+
+  useEffect(() => {
+    const isSameWithPreviousValue =
+      totalCount === alcohols?.totalCount || alcohols?.totalCount === undefined;
+
+    if (isSameWithPreviousValue) return;
+    setTotalCount(alcohols?.totalCount);
+  }, [alcohols]);
+
+  const queryClient = useQueryClient();
+
+  useEffect(() => {
+    const handler = async () => {
+      const nextPageParams = {
+        searchKeyword: "",
+        size,
+        page: currentPage + 1,
+      };
+
+      const fetchedNextPage = queryClient.getQueryData(
+        AlcohilListQueryKey.byKeyword(nextPageParams)
+      );
+
+      if (fetchedNextPage) return;
+      const nextPage = await getAlcoholListByKeyword(nextPageParams);
+
+      queryClient.setQueryData(
+        AlcohilListQueryKey.byKeyword(nextPageParams),
+        nextPage
+      );
+    };
+
+    handler();
+  }, [currentPage]);
+
   const onClickElementHandler = usePushToWikiDetail();
+
   return (
     <Stack alignItems="center" gap={2}>
-      <Stack gap={1} alignItems="center" width={"100%"} height={"232px"}>
+      <Stack gap={1} alignItems="center" width={"100%"}>
         <AlcoholList
           data={alcohols?.list}
-          onClickElement={onClickElementHandler}
+          size={size}
+          onClickElement={({ alcoholName, alcoholNo }) =>
+            onClickElementHandler({ alcoholName, alcoholNo })
+          }
         />
       </Stack>
-      <Pagination count={alcohols?.totalCount} />
+      <Pagination
+        count={(totalCount ?? 0) / size - 1}
+        page={currentPage}
+        siblingCount={2}
+        onChange={(_e, page) => setCurrentPage(page)}
+      />
     </Stack>
   );
 };

client/src/components/wiki/searchDrawer/WikiSerachArea.tsx

@@ -14,7 +14,9 @@ const WikiSerachArea = () => {
 
   const [searchKeyword, setSearchKeyword] = useState("");
   const debouncedValue = useDebounce(searchKeyword, 300);
-  const { data: alcohols } = useGetAlcoholListQuery(debouncedValue);
+  const { data: alcohols } = useGetAlcoholListQuery({
+    searchKeyword: debouncedValue,
+  });
 
   const onClickElementHandler = usePushToWikiDetail();
 

client/src/queries/alcohol/useGetAlcoholListQuery.tsx

@@ -3,31 +3,47 @@ import axios from "@/libs/axios";
 import { AlcoholDetailInterface } from "@/types/alcohol/AlcoholInterface";
 import { useQuery } from "@tanstack/react-query";
 
-const useGetAlcoholListQuery = (keyword?: string) => {
+export interface useGetAlcoholListQueryInterface {
+  page?: number;
+  size?: number;
+  searchKeyword?: string;
+}
+
+const useGetAlcoholListQuery = ({
+  searchKeyword = "",
+  size = 5,
+  page = 0,
+}: useGetAlcoholListQueryInterface) => {
   return useQuery({
-    queryKey: AlcohilListQueryKey.byKeyword(keyword),
-    queryFn: async () => await getAlcoholListByKeyword(keyword),
-    enabled: keyword!=undefined,
+    queryKey: AlcohilListQueryKey.byKeyword({ page, size, searchKeyword }),
+    queryFn: async () =>
+      await getAlcoholListByKeyword({ searchKeyword, size, page }),
+    enabled: searchKeyword != undefined,
   });
 };
 
-export const getAlcoholListByKeyword = async (keyword?: string) => {
+export const getAlcoholListByKeyword = async ({
+  searchKeyword,
+  size,
+  page,
+}: useGetAlcoholListQueryInterface) => {
   const { data } = await axios.get<{
     list: AlcoholDetailInterface[];
     totalCount: number;
   }>(GET_ALCOHOL_LIST, {
     params: {
-      page: 0,
-      size: 5,
-      searchKeyword: keyword,
+      page,
+      size,
+      searchKeyword,
     },
-  }); 
+  });
   return data;
 };
 
 export const AlcohilListQueryKey = {
   all: ["alcohol"] as const,
-  byKeyword: (keyword?: string) => ["alcohol", { keyword }] as const,
+  byKeyword: ({ searchKeyword, size, page }: useGetAlcoholListQueryInterface) =>
+    ["alcohol", { searchKeyword, size, page }] as const,
 };
 
 export default useGetAlcoholListQuery;