New : 술백과-selector 기능 실제 구현

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/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)}

client/src/components/wiki/WikiAlcoholSelector.tsx

@@ -1,43 +1,77 @@
 "use client";
-import { useState, useCallback, useMemo } from "react";
-import { Stack } from "@mui/material";
+import { useState, useCallback, useMemo, useEffect } from "react";
+import { Stack, StackProps } from "@mui/material";
 import WikiAlcoholSelectorBtn from "./WikiAlcoholSelectorBtn";
 import WineIcon from "@/assets/icons/Alcohol/WineIcon.svg";
+import BrandyIcon from "@/assets/icons/Alcohol/BrandyIcon.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 LiquorIcon from "@/assets/icons/Alcohol/LiquorIcon.svg";
+import BeerIcon from "@/assets/icons/Alcohol/BeerIcon.svg";
+import RumIcon from "@/assets/icons/Alcohol/RumIcon.svg";
+
 import TraditionalAlcoholIcon from "@/assets/icons/Alcohol/TraditionalAlcoholIcon.svg";
 import SakeIcon from "@/assets/icons/Alcohol/SakeIcon.svg";
 
-const WikiAlcoholSelector = () => {
+interface WikiAlcoholSelectorInterface extends Omit<StackProps, "onChange"> {
+  onChange?: (selectedAlcoholNo: number | undefined) => void;
+}
+
+const WikiAlcoholSelector = ({ onChange }: WikiAlcoholSelectorInterface) => {
   const btnList = useMemo(
     () => [
-      { title: "전체", iconComponent: <AllAlcoholIcon /> },
-      { title: "포도주", iconComponent: <WineIcon /> },
-      { title: "위스키", iconComponent: <WiskyIcon /> },
-      { title: "증류주", iconComponent: <SpiritsIcon /> },
-      { title: "우리술", iconComponent: <TraditionalAlcoholIcon /> },
-      { title: "사케", iconComponent: <SakeIcon /> },
+      {
+        title: "전체",
+        iconComponent: <AllAlcoholIcon />,
+        alcoholTypeNo: undefined,
+      },
+      { title: "포도주", iconComponent: <WineIcon />, alcoholTypeNo: 167 },
+      { title: "브랜디", iconComponent: <BrandyIcon />, alcoholTypeNo: 69 },
+      { title: "위스키", iconComponent: <WiskyIcon />, alcoholTypeNo: 111 },
+      { title: "리큐르", iconComponent: <LiquorIcon />, alcoholTypeNo: 33 },
+      { title: "맥주", iconComponent: <BeerIcon />, alcoholTypeNo: 2 },
+
+      {
+        title: "우리술",
+        iconComponent: <TraditionalAlcoholIcon />,
+        alcoholTypeNo: 109,
+      },
+      { title: "사케", iconComponent: <SakeIcon />, alcoholTypeNo: 78 },
+      { title: "럼", iconComponent: <RumIcon />, alcoholTypeNo: 28 },
+      {
+        title: "미분류",
+        iconComponent: <AllAlcoholIcon />,
+        alcoholTypeNo: 149,
+      },
     ],
     []
   );
 
-  const [selectedAlcohol, setSelectedAlcohol] = useState(btnList[0].title);
+  const [selectedAlcohol, setSelectedAlcohol] = useState(
+    btnList[0].alcoholTypeNo
+  );
+
+  useEffect(() => {
+    onChange?.(selectedAlcohol);
+  }, [selectedAlcohol]);
 
-  const clickHandler = useCallback((title: string) => {
-    setSelectedAlcohol(title);
+  const clickHandler = useCallback((alcoholTypeNo: number | undefined) => {
+    setSelectedAlcohol(alcoholTypeNo);
   }, []);
 
   return (
-    <Stack direction="row" justifyContent="center" gap={2}>
-      {btnList.map((btnInfo) => (
-        <WikiAlcoholSelectorBtn
-          key={btnInfo.title}
-          isSelected={selectedAlcohol === btnInfo.title}
-          onClick={() => clickHandler(btnInfo.title)}
-          {...btnInfo}
-        />
-      ))}
+    <Stack width="100%" sx={{ overflowX: "auto" }}>
+      <Stack direction="row" justifyContent="center" gap={2} mx="auto">
+        {btnList.map(({ alcoholTypeNo, title, iconComponent }) => (
+          <WikiAlcoholSelectorBtn
+            key={title}
+            title={title}
+            isSelected={selectedAlcohol === alcoholTypeNo}
+            onClick={() => clickHandler(alcoholTypeNo)}
+            iconComponent={iconComponent}
+          />
+        ))}
+      </Stack>
     </Stack>
   );
 };

client/src/components/wiki/detail/AlcoholDetailPage.tsx

@@ -38,19 +38,19 @@ const AlcoholDetailPage = ({ alcoholNo, initialData, children }: Props) => {
           <Stack direction="row">
             <Typography width="78px">Aroma</Typography>
             <Typography fontWeight="bold">
-              {alcoholInfo.taste.Aroma.join(", ")}
+              {alcoholInfo.taste.Aroma?.join(", ")}
             </Typography>
           </Stack>
           <Stack direction="row">
             <Typography width="78px">Taste</Typography>
             <Typography fontWeight="bold">
-              {alcoholInfo.taste.Taste.join(", ")}
+              {alcoholInfo.taste.Taste?.join(", ")}
             </Typography>
           </Stack>
           <Stack direction="row">
             <Typography width="78px">Finish</Typography>
             <Typography fontWeight="bold">
-              {alcoholInfo.taste.Finish.join(", ")}
+              {alcoholInfo.taste.Finish?.join(", ")}
             </Typography>
           </Stack>
         </Stack>

client/src/queries/alcohol/useGetAlcoholListQuery.tsx

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