Minor : 스타일 변경, 인터페이스 추가

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

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

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",

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

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

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)));
     },