New : 술백과 페이지 퍼블리싱

client/src/app/wiki/layout.tsx

@@ -0,0 +1,26 @@
+import { Paper, Container } from "@mui/material";
+import WikiAppbar from "@/components/wiki/WikiAppbar";
+import { ReactNode } from "react";
+
+const layout = ({ children }: { children: ReactNode }) => {
+  return (
+    <Paper>
+      <WikiAppbar />
+      <Container sx={{ p: { xs: 0, sm: 4 } }} maxWidth={"lg"}>
+        <Paper
+          sx={{
+            display: "flex",
+            position: "relative",
+            flexDirection: "column",
+            gap: 2,
+            p: 2,
+          }}
+        >
+          {children}
+        </Paper>
+      </Container>
+    </Paper>
+  );
+};
+
+export default layout;

client/src/app/wiki/page.tsx

@@ -1,7 +1,27 @@
-import DevelopingPage from "@/components/DevelopingPage";
+import AlcoholList from "@/components/wiki/AlcoholList";
+import WikiAlcoholSelector from "@/components/wiki/WikiAlcoholSelector";
+import { Stack } from "@mui/material";
+import SectionHeading from "@/components/SectionHeading";
 
-const WikiPage = () => {
-  return <DevelopingPage />;
+import DevelopingNoticeImgae from "@/assets/images/developing.png";
+import Image from "next/image";
+
+const WikiPage = async () => {
+  return (
+    <>
+      <SectionHeading
+        title={"투파이아 게시판"}
+        subTitle={"투파이아들이 쓴 리뷰를 확인할 수 있어요!"}
+      />
+      <WikiAlcoholSelector />
+      <AlcoholList />
+
+      <SectionHeading title={"술 정보"} subTitle={"곧 출시 됩니다!"} />
+      <Stack alignItems="center">
+        <Image src={DevelopingNoticeImgae} alt="개발중" />
+      </Stack>
+    </>
+  );
 };
 
 export default WikiPage;

client/src/components/SectionHeading.tsx

@@ -0,0 +1,26 @@
+import { Stack, StackProps, Typography } from "@mui/material";
+import React from "react";
+
+interface SectionHeadingProps extends StackProps {
+  title?: string;
+  subTitle?: string;
+}
+
+const SectionHeading = ({
+  title,
+  subTitle,
+  ...stackProps
+}: SectionHeadingProps) => {
+  return (
+    <Stack {...stackProps}>
+      <Typography variant={"subtitle2"} sx={{ fontWeight: "bold" }}>
+        {title}
+      </Typography>
+      <Typography variant={"label"} sx={{ color: "text.secondary" }}>
+        {subTitle}
+      </Typography>
+    </Stack>
+  );
+};
+
+export default SectionHeading;

client/src/components/wiki/AlcoholList.tsx

@@ -0,0 +1,25 @@
+"use client";
+import AlcoholNameTag from "@/components/wiki/AlcoholNameTag";
+import useGetAlcoholListQuery from "@/queries/alcohol/useGetAlcoholListQuery";
+import { Pagination, Stack } from "@mui/material";
+
+const AlcoholList = () => {
+  const { data: alcohols } = useGetAlcoholListQuery();
+  return (
+    <Stack alignItems="center" gap={2}>
+      <Stack gap={1} alignItems="center" width={'100%'}>
+        {alcohols &&
+          alcohols.list.map((alcohol) => (
+            <AlcoholNameTag
+              key={alcohol.alcoholNo}
+              alcoholName={alcohol.alcoholName}
+              alcoholType={alcohol.alcoholType}
+            />
+          ))}
+      </Stack>
+      <Pagination count={alcohols?.totalCount} />
+    </Stack>
+  );
+};
+
+export default AlcoholList;

client/src/components/wiki/WikiAlcoholSelector.tsx

@@ -0,0 +1,41 @@
+"use client";
+import { useState, useCallback, useMemo } from "react";
+import { Stack } from "@mui/material";
+import WikiAlcoholSelectorBtn from "./WikiAlcoholSelectorBtn";
+import WineIcon from "@/assets/icons/Alcohol/WineIcon.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";
+import SakeIcon from "@/assets/icons/Alcohol/SakeIcon.svg";
+
+const WikiAlcoholSelector = () => {
+
+  const btnList =useMemo(()=>[
+    { title: "포도주", iconComponent: <WineIcon /> },
+    { title: "위스키", iconComponent: <WiskyIcon /> },
+    { title: "증류주", iconComponent: <SpiritsIcon /> },
+    { title: "우리술", iconComponent: <TraditionalAlcoholIcon /> },
+    { title: "사케", iconComponent: <SakeIcon /> },
+  ],[]) 
+
+  const [selectedAlcohol, setSelectedAlcohol] = useState(btnList[0].title);
+
+  const clickHandler = useCallback((title:string)=>{
+    setSelectedAlcohol(title)
+  },[])
+
+  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>
+  );
+};
+
+export default WikiAlcoholSelector;

client/src/components/wiki/WikiAlcoholSelectorBtn.tsx

@@ -0,0 +1,40 @@
+import { Stack, Typography, ButtonBase, ButtonBaseProps } from "@mui/material";
+import { ReactNode, memo } from "react";
+
+interface WiciAlcoholSelectorBtnProps extends Omit<ButtonBaseProps, "onClick"> {
+  isSelected?: boolean;
+  title: string;
+  iconComponent: ReactNode;
+  onClick: () => void;
+}
+
+const WikiAlcoholSelectorBtn = ({
+  isSelected,
+  title,
+  iconComponent,
+  onClick,
+  ...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={{ p: 1 }}>{title}</Typography>
+      </Stack>
+    </ButtonBase>
+  );
+};
+
+export default memo(WikiAlcoholSelectorBtn);

client/src/queries/alcohol/useGetAlcoholListQuery.tsx

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