술백과-Selector-기능-구현

client/package.json

@@ -19,6 +19,7 @@
     "@mui/material": "^5.14.15",
     "@tanstack/react-query": "^5.8.1",
     "@tanstack/react-query-devtools": "^5.8.1",
+    "@tanstack/react-virtual": "^3.0.1",
     "axios": "^1.6.0",
     "dayjs": "^1.11.10",
     "framer-motion": "^10.16.4",
@@ -29,6 +30,7 @@
     "react-dom": "^18",
     "react-intersection-observer": "^9.5.3",
     "react-quill": "^2.0.0",
+    "react-virtualized-auto-sizer": "^1.0.20",
     "sharp": "^0.32.6",
     "zustand": "^4.4.6"
   },
@@ -49,6 +51,7 @@
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "@types/react-window-infinite-loader": "^1.0.9",
     "autoprefixer": "^10",
     "eslint": "^8",
     "eslint-config-next": "14.0.0",

client/src/app/wiki/(wiki-main)/page.tsx

@@ -1,16 +1,28 @@
+"use client";
+import { useState } from "react";
 import AlcoholPagination from "@/components/wiki/AlcoholPagination";
 import WikiAlcoholSelector from "@/components/wiki/WikiAlcoholSelector";
-
 import SectionHeading from "@/components/SectionHeading";
-
+import { Stack } from "@mui/material";
 
 const WikiPage = () => {
+  const [currentAlcoholNo, setCurrentAlcoholNo] = useState<number | undefined>(
+    undefined
+  );
+
   return (
-    <>
-      <SectionHeading title={"술 정보"} subTitle={"다양한 술 정보를 알아보세요!"} />
-      <WikiAlcoholSelector />
-      <AlcoholPagination />
-    </>
+    <Stack gap={2}>
+      <SectionHeading
+        title={"술 정보"}
+        subTitle={"다양한 술 정보를 알아보세요!"}
+      />
+      <WikiAlcoholSelector
+        onChange={(alcoholNo) => {
+          setCurrentAlcoholNo(alcoholNo);
+        }}
+      />
+      <AlcoholPagination alcoholTypeNo={currentAlcoholNo} />
+    </Stack>
   );
 };
 

client/src/app/wiki/[alcoholNo]/page.tsx

@@ -30,9 +30,9 @@ export async function generateMetadata({ params }: Props): Promise<Metadata> {
       nameOfApp,
       alcoholType,
       `${alcoholType}추천`,
-      taste.Aroma.map((aroma) => `${aroma}향 ${alcoholType}`).join(", "),
-      taste.Finish.map((finish) => `${finish}피니시 ${alcoholType}`).join(", "),
-      taste.Taste.map((taste) => `${taste}맛 ${alcoholType}`).join(", "),
+      taste.Aroma?.map((aroma) => `${aroma}향 ${alcoholType}`).join(", "),
+      taste.Finish?.map((finish) => `${finish}피니시 ${alcoholType}`).join(", "),
+      taste.Taste?.map((taste) => `${taste}맛 ${alcoholType}`).join(", "),
     ],
     openGraph: {
       title: `${nameOfApp} | ${alcoholType} ${alcoholName}`,

client/src/components/layout/CustomContainer.tsx

@@ -19,6 +19,7 @@ const CustomContainer = ({ sx, mt, children }: CustomContainerInterface) => {
           gap: 2,
           p: 2,
           minHeight: `calc(100vh - ${appbarHeight} - ${navbarHeight})`,
+          height:'100%'
         }}
       >
         {children}

client/src/components/post/PostCardSkeleton.tsx

@@ -1,23 +1,28 @@
-import { Box, Card, Skeleton, Stack } from "@mui/material";
+import { Box, Card, CardProps, Skeleton, Stack } from "@mui/material";
+import { Ref, forwardRef } from "react";
 
-const PostCardSkeleton = () => {
+const PostCardSkeleton = (
+  cardProps?: Omit<CardProps, "elevation">,
+  ref?: Ref<HTMLDivElement>
+) => {
   return (
-    <Card sx={{ display: "flex", gap: 2, p: 2 }}>
+    <Card
+      sx={{ display: "flex", gap: 2, py: 2 }}
+      ref={ref}
+      elevation={0}
+      {...cardProps}
+    >
       <Skeleton width={40} height={40} variant="circular" />
       <Box sx={{ flexGrow: 1 }}>
         <Stack justifyContent="space-between" gap={2} px={0}>
-          <Stack
-            direction="row"
-            gap={1}
-            alignItems= {"center"}
-          >
+          <Stack direction="row" gap={1} alignItems={"center"}>
             <Skeleton width={100} />
             <Skeleton width={80} />
             <Skeleton width={50} />
           </Stack>
           <Stack>
-            <Skeleton width={'100%'} />
-            <Skeleton width={'50%'} />
+            <Skeleton width={"100%"} />
+            <Skeleton width={"50%"} />
           </Stack>
           <Skeleton width={"100%"} height={142} variant="rectangular" />
           <Stack direction="row" justifyContent={"end"} gap={2}>
@@ -32,4 +37,4 @@ const PostCardSkeleton = () => {
   );
 };
 
-export default PostCardSkeleton;
+export default forwardRef(PostCardSkeleton);

client/src/components/post/VirtualizedPostCardList.tsx

@@ -0,0 +1,127 @@
+"use client";
+
+import PostCard from "@/components/post/PostCard";
+import useGetPostListInfiniteQuery, {
+  UseGetPostListQueryInterface,
+} from "@/queries/post/useGetPostListInfiniteQuery";
+
+import { memo, useEffect, useRef } from "react";
+import { useMemo } from "react";
+import getTokenFromLocalStorage from "@/utils/getTokenFromLocalStorage";
+import { postcardContext } from "@/store/post/PostCardContext";
+import PostCardSkeleton from "./PostCardSkeleton";
+
+import { useVirtualizer } from "@tanstack/react-virtual";
+
+function VirtualizedPostCardList({
+  height,
+  width,
+  searchAlcoholNos,
+  searchKeyword,
+  searchUserNos,
+  sort,
+  ...props
+}: UseGetPostListQueryInterface & { width: number; height: number }) {
+  const { data, fetchNextPage, isFetchingNextPage, hasNextPage, isSuccess } =
+    useGetPostListInfiniteQuery({
+      searchAlcoholNos:
+        searchKeyword === "" && searchAlcoholNos ? searchAlcoholNos : undefined,
+      sort,
+      searchUserNos,
+      searchKeyword: searchKeyword !== "" ? searchKeyword : undefined,
+      ...props,
+      headers: { Authorization: getTokenFromLocalStorage() },
+    });
+
+  const allRows = data ? data.pages.flatMap(({ content }) => content) : [];
+
+  const parentRef = useRef<HTMLDivElement | null>(null);
+
+  const rowVirtualizer = useVirtualizer({
+    count: allRows.length,
+    getScrollElement: () => parentRef.current,
+    estimateSize: () => 550,
+    initialRect: { width, height },
+    overscan: 5,
+  });
+
+  const hasResult = useMemo(
+    () => data && data.pages[0].content.length > 0,
+    [data]
+  );
+
+  const loadMoreItems = () => {
+    const [lastItem] = [...rowVirtualizer.getVirtualItems()].reverse();
+
+    if (
+      lastItem &&
+      lastItem.index >= allRows.length - 1 &&
+      hasNextPage &&
+      !isFetchingNextPage
+    ) {
+      fetchNextPage();
+    }
+  };
+
+  useEffect(loadMoreItems, [
+    hasNextPage,
+    fetchNextPage,
+    allRows.length,
+    isFetchingNextPage,
+    rowVirtualizer.getVirtualItems(),
+  ]);
+
+  return (
+    <postcardContext.Provider value={{ searchKeyword, searchUserNos, sort }}>
+      <div>
+        {hasResult && isSuccess && (
+          <div
+            ref={parentRef}
+            style={{
+              height: `${height}px`,
+              width: `${width}px`,
+              overflowY: "auto",
+              contain: "strict",
+            }}
+          >
+            <div
+              style={{
+                height: `${rowVirtualizer.getTotalSize()}px`,
+                width: "100%",
+                position: "relative",
+              }}
+            >
+              {rowVirtualizer.getVirtualItems().map((virtualRow) => {
+                const post = allRows[virtualRow.index];
+                const isLoaderRow = virtualRow.index > allRows.length - 1;
+
+                return (
+                  <div
+                    key={virtualRow.index}
+                    data-index={virtualRow.index}
+                    ref={rowVirtualizer.measureElement}
+                    style={{
+                      position: "absolute",
+                      top: 0,
+                      left: 0,
+                      width: "100%",
+                      transform: `translateY(${virtualRow.start}px)`,
+                    }}
+                  >
+                    {isLoaderRow ? (
+                      hasNextPage && <PostCardSkeleton />
+                    ) : (
+                      <PostCard {...post} />
+                    )}
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        )}
+      </div>
+    </postcardContext.Provider>
+  );
+}
+
+export default memo(VirtualizedPostCardList);

client/src/components/wiki/AlcoholPagination.tsx

@@ -9,32 +9,34 @@ import usePushToWikiDetail from "@/hooks/wiki/usePushToWikiDetail";
 import { useEffect, useState } from "react";
 import { useQueryClient } from "@tanstack/react-query";
 
-const AlcoholPagenation = () => {
+const AlcoholPagenation = ({ alcoholTypeNo }: { alcoholTypeNo?: number }) => {
   const [currentPage, setCurrentPage] = useState(1);
   const size = 10;
 
   const { data: alcohols } = useGetAlcoholListQuery({
     searchKeyword: "",
     page: currentPage - 1,
+    alcoholType: alcoholTypeNo,
     size,
   });
 
-  const [totalCount, setTotalCount] = useState(alcohols?.totalCount);
+  // const [totalCount, setTotalCount] = useState(alcohols?.totalPages);
 
-  useEffect(() => {
-    const isSameWithPreviousValue =
-      totalCount === alcohols?.totalCount || alcohols?.totalCount === undefined;
+  // useEffect(() => {
+  //   const isSameWithPreviousValue =
+  //     totalCount === alcohols?.totalPages || alcohols?.totalPages === undefined;
 
-    if (isSameWithPreviousValue) return;
-    setTotalCount(alcohols?.totalCount);
-  }, [alcohols]);
+  //   if (isSameWithPreviousValue) return;
+  //   setTotalCount(alcohols?.totalPages);
+  // }, [alcohols]);
 
   const queryClient = useQueryClient();
 
   useEffect(() => {
     const handler = async () => {
       const nextPageParams = {
         searchKeyword: "",
+        alcoholType: alcoholTypeNo,
         size,
         page: currentPage + 1,
       };
@@ -61,15 +63,15 @@ const AlcoholPagenation = () => {
     <Stack alignItems="center" gap={2}>
       <Stack gap={1} alignItems="center" width={"100%"}>
         <AlcoholList
-          data={alcohols?.list}
+          data={alcohols?.content}
           size={size}
           onClickElement={({ alcoholName, alcoholNo }) =>
             onClickElementHandler({ alcoholName, alcoholNo })
           }
         />
       </Stack>
       <Pagination
-        count={(totalCount ?? 0) / size - 1}
+        count={alcohols?.totalPages}
         page={currentPage}
         siblingCount={2}
         onChange={(_e, page) => setCurrentPage(page)}