술백과-페이지네이션-추가 (#95)

* FIX : Test 오류 수정 * Minor : 스타일 변경, 인터페이스 추가 * Refactor : 술백과 페이지 페이지네이션 추가
potenday-project · Jan 6, 2024 · fe16fbf · fe16fbf
1 parent 8f4f8bf
commit fe16fbf
Show file tree

Hide file tree

Showing 14 changed files with 159 additions and 56 deletions.
diff --git a/client/src/__test__/post/formatTime.test.ts b/client/src/__test__/post/formatTime.test.ts
@@ -5,7 +5,7 @@ describe("인스타그램 스타일 시간 포매팅 함수", () => {
   const THREE_DAYS_AGO = "Thu Dec 11 2023 00:50:25 GMT+0900 (한국 표준시)";
   const EIGHT_DAYS_AGO = "Thu Dec 6 2023 00:50:25 GMT+0900 (한국 표준시)";
   const ONE_MONTH_AGO = "Thu Nov 11 2023 00:50:25 GMT+0900 (한국 표준시)";
-  const THREE_MONTH_AGO = "Thu Sep 11 2023 00:50:25 GMT+0900 (한국 표준시)";
+  const THREE_MONTH_AGO = "Thu Oct 11 2023 00:50:25 GMT+0900 (한국 표준시)";
   const ONE_YEAR_AGO = "Thu Dec 14 2022 00:50:25 GMT+0900 (한국 표준시)";
 
   it("3일 전이 입력되었을때 '3일 전' 이 출력되는지", () => {
@@ -14,13 +14,13 @@ describe("인스타그램 스타일 시간 포매팅 함수", () => {
   it("8일 전이 입력되었을때 '1주 전' 이 출력되는지", () => {
     expect(formatTime(EIGHT_DAYS_AGO, MOCK_NOW)).toEqual("1주 전");
   });
-  it("1달전 이 입력되었을때 '1달 전'이 출력되는지 Trim 하는지 여부", () => {
+  it("1달전 이 입력되었을때 '1달 전'이 출력되는지 여부", () => {
     expect(formatTime(ONE_MONTH_AGO, MOCK_NOW)).toEqual("1달 전");
   });
-  it("3달전 이 입력되었을때 '3달 전'이 출력되는지 Trim 하는지 여부", () => {
+  it("3달전 이 입력되었을때 '3달 전'이 출력되는지 여부", () => {
     expect(formatTime(THREE_MONTH_AGO, MOCK_NOW)).toEqual("3달 전");
   });
-  it("1년전 이 입력되었을때 '1년 전'이 출력되는지 Trim 하는지 여부", () => {
+  it("1년전 이 입력되었을때 '1년 전'이 출력되는지 여부", () => {
     expect(formatTime(ONE_YEAR_AGO, MOCK_NOW)).toEqual("1년 전");
   });
 });
diff --git a/client/src/assets/icons/Alcohol/AllAlcoholIcon.svg b/client/src/assets/icons/Alcohol/AllAlcoholIcon.svg
diff --git a/client/src/components/layout/CustomContainer.tsx b/client/src/components/layout/CustomContainer.tsx
@@ -5,14 +5,10 @@ interface CustomContainerInterface extends ContainerProps {
   mt?: number;
 }
 
-const CustomContainer = ({
-  sx,
-  mt,
-  children,
-}: CustomContainerInterface) => {
+const CustomContainer = ({ sx, mt, children }: CustomContainerInterface) => {
   return (
     <Container
-      sx={{ ...sx, px: { xs: 0, sm: 4 }, mt: mt!==undefined ? mt : 8 }}
+      sx={{ ...sx, px: { xs: 0, sm: 4 }, mt: mt !== undefined ? mt : 8 }}
       maxWidth={"lg"}
     >
       <Paper

diff --git a/client/src/components/newpost/SearchAlcoholInput.tsx b/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">

diff --git a/client/src/components/post/PostCard.tsx b/client/src/components/post/PostCard.tsx
@@ -32,6 +32,7 @@ import { postcardContext } from "@/store/post/PostCardContext";
 import formatTime from "@/utils/formatTime";
 import copyToClipboard from "@/utils/copyToClipboard";
 import { useGlobalSnackbarStore } from "@/store/useGlobalSnackbarStore";
+import usePushToWikiDetail from "@/hooks/wiki/usePushToWikiDetail";
 
 const PostCard = ({
   postAttachUrls,
@@ -66,6 +67,8 @@ const PostCard = ({
     [currentUser]
   );
 
+  const onClickElementHandler = usePushToWikiDetail();
+
   const CLIENT_BASE_URL = process.env.NEXT_PUBLIC_CLIENT_BASE_URL;
   const fireToast = useGlobalSnackbarStore(({ fireToast }) => fireToast);
   const copyToClipboardHander = async () => {
@@ -134,6 +137,9 @@ const PostCard = ({
             alcoholNo={alcoholNo}
             alcoholName={alcoholName}
             alcoholType={alcoholType}
+            onClick={() => {
+              onClickElementHandler({ alcoholName, alcoholNo });
+            }}
           />
         )}
 
@@ -143,7 +149,7 @@ const PostCard = ({
             dangerouslySetInnerHTML={{
               __html: sanitize(postContent),
             }}
-          onClick={() => openPostDetailPage(id, String(postNo))}
+            onClick={() => openPostDetailPage(id, String(postNo))}
           ></div>
           {/* Hash tags */}
           <PostHashTagList tags={tagList} />

diff --git a/client/src/components/wiki/AlcoholList.tsx b/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);
diff --git a/client/src/components/wiki/AlcoholNameTag.tsx b/client/src/components/wiki/AlcoholNameTag.tsx
@@ -61,6 +61,7 @@ const WrapperStyle = {
   border: "1px solid",
   borderColor: "gray.secondary",
   backgroundColor: "gray.primary",
+  cursor: "pointer",
   display: "flex",
   flexDirection: "row",
   alignItems: "center",

diff --git a/client/src/components/wiki/AlcoholPagination.tsx b/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>
   );
 };

diff --git a/client/src/components/wiki/WikiAlcoholSelector.tsx b/client/src/components/wiki/WikiAlcoholSelector.tsx
@@ -3,6 +3,7 @@ import { useState, useCallback, useMemo } from "react";
 import { Stack } from "@mui/material";
 import WikiAlcoholSelectorBtn from "./WikiAlcoholSelectorBtn";
 import WineIcon from "@/assets/icons/Alcohol/WineIcon.svg";
+import AllAlcoholIcon from "@/assets/icons/Alcohol/AllAlcoholIcon.svg";
 import WiskyIcon from "@/assets/icons/Alcohol/WiskyIcon.svg";
 import SpiritsIcon from "@/assets/icons/Alcohol/SpiritsIcon.svg";
 import TraditionalAlcoholIcon from "@/assets/icons/Alcohol/TraditionalAlcoholIcon.svg";
@@ -11,6 +12,7 @@ import SakeIcon from "@/assets/icons/Alcohol/SakeIcon.svg";
 const WikiAlcoholSelector = () => {
   const btnList = useMemo(
     () => [
+      { title: "전체", iconComponent: <AllAlcoholIcon /> },
       { title: "포도주", iconComponent: <WineIcon /> },
       { title: "위스키", iconComponent: <WiskyIcon /> },
       { title: "증류주", iconComponent: <SpiritsIcon /> },

diff --git a/client/src/components/wiki/WikiAlcoholSelectorBtn.tsx b/client/src/components/wiki/WikiAlcoholSelectorBtn.tsx
@@ -16,24 +16,27 @@ const WikiAlcoholSelectorBtn = ({
   ...buttonBaseProps
 }: WiciAlcoholSelectorBtnProps) => {
   return (
-    <ButtonBase onClick={onClick} {...buttonBaseProps}>
-      <Stack alignItems="center">
-        <Stack
-          justifyContent="center"
-          alignItems="center"
-          sx={{
-            borderRadius: "50%",
-            width: 56,
-            height: 56,
-            backgroundColor: isSelected ? "primary.main" : "#F6EAFB",
-            transitionDuration: 200,
-          }}
-        >
-          {iconComponent}
-        </Stack>
-        <Typography sx={{ py: 1 }}>{title}</Typography>
+    <Stack
+      component={ButtonBase}
+      alignItems="center"
+      onClick={onClick}
+      {...buttonBaseProps}
+    >
+      <Stack
+        justifyContent="center"
+        alignItems="center"
+        sx={{
+          borderRadius: "50%",
+          width: 56,
+          height: 56,
+          backgroundColor: isSelected ? "primary.main" : "#F6EAFB",
+          transitionDuration: 200,
+        }}
+      >
+        {iconComponent}
       </Stack>
-    </ButtonBase>
+      <Typography sx={{ py: 1 }}>{title}</Typography>
+    </Stack>
   );
 };
 

diff --git a/client/src/components/wiki/searchDrawer/WikiSerachArea.tsx b/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();
 

diff --git a/client/src/hooks/wiki/usePushToWikiDetail.ts b/client/src/hooks/wiki/usePushToWikiDetail.ts
@@ -4,6 +4,12 @@ import { useCallback } from "react";
 import useSearchHistory from "../searchHistory/useSearchHistory";
 import { ALCOHOL_SEARCH_HISTORY } from "@/const/localstorageKey";
 import { WIKI_DETAIL } from "@/const/clientPath";
+
+interface OnclickElementHandlerInterface {
+  alcoholName: AlcoholDetailInterface["alcoholName"];
+  alcoholNo: AlcoholDetailInterface["alcoholNo"];
+}
+
 /**
  * 검색히스토리에 해당 술을 남기고, 디테일페이지로 이동시키는 함수를 리턴하는 훅
  * @returns 해당 callback함수
@@ -15,7 +21,7 @@ const usePushToWikiDetail = () => {
    * 검색히스토리에 해당 술을 남기고, 디테일페이지로 이동시키는 함수를 리턴하는 함수
    */
   const onClickElementHandler = useCallback(
-    ({ alcoholName, alcoholNo }: AlcoholDetailInterface) => {
+    ({ alcoholName, alcoholNo }: OnclickElementHandlerInterface) => {
       addToSearchHistory(alcoholName);
       router.push(WIKI_DETAIL(String(alcoholNo)));
     },