술-백과-페이지-퍼블리싱 (#54)

* New : 주류 아이콘 추가

* Refactor : AlcoholNameTag 디렉토리 변경

* Refactor : Custom Appbar 컴포넌트 리팩토링

* Refactor : AlcoholNameTag 디렉토리 변경

* Refactor : 버튼베이스 컴포넌트 스타일 변경

* Refactor : BFF 분리

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

client/src/app/(protectedRoute)/new-post/page.tsx

@@ -90,7 +90,7 @@ export default function NewpostPage() {
       {/* 최상단 앱바 */}
       <CustomAppbar
         title="포스팅"
-        buttonTitle="공유"
+        buttonComponent="공유"
         disableButton={isSuccess}
         onClickButton={submitHandler}
       />

client/src/app/user/[userId]/layout.tsx

@@ -19,7 +19,7 @@ const UserInfoPageLayout = ({ children, params }: Props) => {
   return (
     <Paper>
       <CustomAppbar
-        buttonTitle={isMyProfile ? "설정" : undefined}
+        buttonComponent={isMyProfile ? "설정" : undefined}
         onClickButton={() => {
           if(!isMyProfile){
             return

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/CustomAppbar.tsx

@@ -1,20 +1,20 @@
 "use client";
 import { AppBar, Button, IconButton, Toolbar, Typography } from "@mui/material";
 import GoBackIcon from "@/assets/icons/GoBackIcon.svg";
-import { MouseEventHandler, memo } from "react";
+import { MouseEventHandler, ReactNode, memo } from "react";
 import { useRouter } from "next/navigation";
 
 interface CustomAppbarInterface {
   title?: string;
-  buttonTitle?: string;
+  buttonComponent?: ReactNode;
   disableButton?: boolean;
   onClickButton?: MouseEventHandler<HTMLButtonElement>;
 }
 
 
 const CustomAppbar = ({
   title,
-  buttonTitle,
+  buttonComponent,
   disableButton,
   onClickButton,
 }: CustomAppbarInterface) => {
@@ -29,14 +29,14 @@ const CustomAppbar = ({
         <Typography variant="subtitle2" fontWeight={"bold"}>
           {title}
         </Typography>
-        {buttonTitle && (
+        {buttonComponent && (
           <Button
             disabled={disableButton}
             onClick={onClickButton}
             variant="text"
             sx={{ minWidth: 40, fontWeight: "medium" }}
           >
-            {buttonTitle}
+            {buttonComponent}
           </Button>
         )}
       </Toolbar>

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/newpost/SearchAlcoholInput.tsx

@@ -15,7 +15,7 @@ import AlcholeSearchIcon from "@/assets/icons/AlcholeSearchIcon.svg";
 import InputSearchIcon from "@/assets/icons/InputSearchIcon.svg";
 import useGetAlcoholListQuery from "@/queries/alcohol/useGetAlcoholListQuery";
 import { AlcoholDetailInterface } from "@/types/alcohol/AlcoholInterface";
-import AlcoleNameTag from "./../post/AlcoleNameTag";
+import AlcoleNameTag from "@/components/wiki/AlcoholNameTag";
 import useDebounce from "@/hooks/useDebounce";
 import { NewPostRequestAlCohol } from "@/types/newPost/NewPostInterface";
 

client/src/components/post/PostCard.tsx

@@ -19,7 +19,7 @@ import ShareIcon from "@/assets/icons/ShareIcon.svg";
 import LikeIcon from "@/assets/icons/LikeIcon.svg";
 import CommentIcon from "@/assets/icons/CommentIcon.svg";
 import QuoteIcon from "@/assets/icons/QuoteIcon.svg";
-import AlcoleNameTag from "./AlcoleNameTag";
+import AlcoleNameTag from "@/components/wiki/AlcoholNameTag";
 import dayjs from "dayjs";
 import useLikePostMutation from "@/queries/post/useLikePostMutation";
 import useUnLikePostMutation from "@/queries/post/useUnLikePostMutation";

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/post/AlcoleNameTag.tsx → client/src/components/wiki/AlcoholNameTag.tsx

@@ -10,7 +10,7 @@ interface AlcoholNameTagInterface extends BoxProps {
   onClickRemove?: () => void;
 }
 
-const AlcoleNameTag = ({
+const AlcoholNameTag = ({
   alcoholName,
   alcoholType,
   removable = false,
@@ -55,6 +55,7 @@ const AlcoleNameTag = ({
 };
 
 const WrapperStyle = {
+  width: '100%',
   border: "1px solid",
   borderColor: "gray.secondary",
   backgroundColor: "gray.primary",
@@ -74,4 +75,4 @@ const ChipStyle = {
   color: "#4A148C",
 };
 
-export default AlcoleNameTag;
+export default AlcoholNameTag;

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/components/wiki/WikiAppbar.tsx

@@ -0,0 +1,15 @@
+'use client'
+import CustomAppbar from "@/components/CustomAppbar";
+import SearchIcon from "@/assets/icons/SearchIcon.svg";
+
+const WikiAppbar = () => {
+  return (
+    <CustomAppbar
+      title="술백과"
+      buttonComponent={<SearchIcon />}
+      onClickButton={() => console.log("눌림")}
+    />
+  );
+};
+
+export default WikiAppbar;

client/src/const/theme.ts

@@ -94,22 +94,22 @@ const theme = createTheme({
       },
     },
     MuiButtonBase: {
-      styleOverrides: { root: { gap: 4 } },
+      styleOverrides: { root: { gap: 4, borderRadius: 8 } },
     },
     MuiSvgIcon: {
       styleOverrides: { root: { color: "#8A8A8A" } },
     },
-    MuiAppBar:{
-      styleOverrides:{
-        root:{
-          color:"#1C1C1C",
-          backgroundColor:'#fefefe'
-        }
+    MuiAppBar: {
+      styleOverrides: {
+        root: {
+          color: "#1C1C1C",
+          backgroundColor: "#fefefe",
+        },
       },
-      defaultProps:{
-        elevation:0
-      }
-    }
+      defaultProps: {
+        elevation: 0,
+      },
+    },
   },
 });
 

client/src/libs/axios.ts

@@ -25,4 +25,5 @@ export default axios.create({ baseURL: process.env.NEXT_PUBLIC_BASE_URL });
  */
 export const axiosBff = axios.create({
   baseURL: process.env.NEXT_PUBLIC_CLIENT_BASE_URL,
-});
+  withCredentials:true
+});

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;