New : 술 상세페이지 연결

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

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

client/src/app/wiki/[alcoholNo]/(components)/AlcoholDetailLabel.tsx

@@ -0,0 +1,27 @@
+import { Stack, Typography } from "@mui/material";
+import React from "react";
+
+interface AlcoholDetailLabelProps {
+  title: string;
+  type: string;
+}
+
+const AlcoholDetailLabel = ({ title, type }: AlcoholDetailLabelProps) => {
+  return (
+    <Stack
+      bgcolor={"rgba(123, 31, 162, 0.4)"}
+      gap={1}
+      sx={{
+        borderRadius: 3,
+        p: 2,
+        backdropFilter: "blur(10px)",
+        color: "background.paper",
+      }}
+    >
+      <Typography variant='label'>{type}</Typography>
+      <Typography variant='subtitle2' fontWeight="bold">{title}</Typography>
+    </Stack>
+  );
+};
+
+export default AlcoholDetailLabel;

client/src/app/wiki/[alcoholNo]/(components)/AlcoholDetailPage.tsx

@@ -0,0 +1,88 @@
+"use client";
+import useGetAlcoholDetailQuery from "@/queries/alcohol/useGetAlcoholDetailQuery";
+import { AlcoholDetailInterface } from "@/types/alcohol/AlcoholInterface";
+import { Stack, Typography, Divider } from "@mui/material";
+import { ReactNode } from "react";
+import AlcoholDetailThumbnail from "./AlcoholDetailThumbnail";
+
+type Props = {
+  alcoholNo: string;
+  initialData: AlcoholDetailInterface;
+  children?: ReactNode;
+};
+
+const AlcoholDetailPage = ({ alcoholNo, initialData, children }: Props) => {
+  const { data: alcoholInfo } = useGetAlcoholDetailQuery(
+    alcoholNo,
+    initialData
+  );
+
+  return (
+    <Stack gap={2}>
+      <AlcoholDetailThumbnail
+        title={alcoholInfo.alcoholName}
+        type={alcoholInfo.alcoholType}
+        src={alcoholInfo.alcoholAttachUrls[0]?.attachUrl}
+      />
+      {children}
+
+      <Stack gap={2}>
+        <Typography
+          variant={"subtitle1"}
+          color="primary.main"
+          fontWeight="bold"
+        >
+          Tasting Notes
+        </Typography>
+        <Stack gap={2}>
+          <Stack direction="row">
+            <Typography width="78px">Aroma</Typography>
+            <Typography fontWeight="bold">
+              {alcoholInfo.taste.Aroma.join(", ")}
+            </Typography>
+          </Stack>
+          <Stack direction="row">
+            <Typography width="78px">Taste</Typography>
+            <Typography fontWeight="bold">
+              {alcoholInfo.taste.Taste.join(", ")}
+            </Typography>
+          </Stack>
+          <Stack direction="row">
+            <Typography width="78px">Finish</Typography>
+            <Typography fontWeight="bold">
+              {alcoholInfo.taste.Finish.join(", ")}
+            </Typography>
+          </Stack>
+        </Stack>
+      </Stack>
+
+      <Divider sx={{ borderColor: "#F6EAFB" }} />
+
+      <Stack gap={2}>
+        <Typography
+          variant={"subtitle1"}
+          color="primary.main"
+          fontWeight="bold"
+        >
+          Information
+        </Typography>
+        <Stack gap={2}>
+          <Stack direction="row">
+            <Typography width="78px">종류</Typography>
+            <Typography fontWeight="bold">{alcoholInfo.alcoholType}</Typography>
+          </Stack>
+          <Stack direction="row">
+            <Typography width="78px">도수</Typography>
+            <Typography fontWeight="bold">{alcoholInfo.degree}%</Typography>
+          </Stack>
+          <Stack direction="row">
+            <Typography width="78px">용량</Typography>
+            <Typography fontWeight="bold">{alcoholInfo.volume}ml</Typography>
+          </Stack>
+        </Stack>
+      </Stack>
+    </Stack>
+  );
+};
+
+export default AlcoholDetailPage;

client/src/app/wiki/[alcoholNo]/(components)/AlcoholDetailThumbnail.tsx

@@ -0,0 +1,34 @@
+//@ts-ignore
+import LogoLarge from "@/assets/icons/LogoLarge.svg?url";
+import { Box } from "@mui/material";
+import AlcoholDetailLabel from "./AlcoholDetailLabel";
+
+interface AlcoholDetailThumbnailProps {
+  title: string;
+  type: string;
+  src?: string;
+}
+
+const AlcoholDetailThumbnail = ({
+  title,
+  type,
+  src,
+}: AlcoholDetailThumbnailProps) => {
+  return (
+    <Box
+      height={410}
+      bgcolor={src ? "background.paper" : "gray.primary"}
+      p={2}
+      sx={{
+        backgroundImage: `url(${src ?? LogoLarge.src})`,
+        backgroundRepeat: "no-repeat",
+        backgroundSize: "contain",
+        backgroundPosition: "center",
+      }}
+    >
+      <AlcoholDetailLabel title={title} type={type} />
+    </Box>
+  );
+};
+
+export default AlcoholDetailThumbnail;

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

@@ -4,7 +4,6 @@ import { Metadata } from "next";
 import AlcoholDetailPage from "./(components)/AlcoholDetailPage";
 import CustomAppbar from "@/components/layout/CustomAppbar";
 import CustomContainer from "@/components/layout/CustomContainer";
-import PostCardList from "@/components/post/PostCardList";
 
 type Props = {
   params: { alcoholNo: string };
@@ -54,7 +53,6 @@ const page = async ({ params }: Props) => {
         >
           {/* 포스트리스트자리 */}
           {/* FIXME */}
-          {/* <PostCardList searchKeyword={searchKeyword}/> */}
         </AlcoholDetailPage>
       </CustomContainer>
     </>

client/src/components/post/PostCard.tsx

@@ -64,15 +64,6 @@ const PostCard = ({
   const { mutateAsync: deletePost } = useDeletePostMutation();
   const { mutateAsync: deleteFile } = useDeleteAttachMutation();
 
-  const deleteHandler = async () => {
-    if (confirm("정말 삭제하시겠습니까?")) {
-      await deletePost(postNo);
-      postAttachUrls?.[0].attachUrl &&
-        (await deleteFile(postAttachUrls?.[0].attachUrl));
-      router.push(HOME);
-    }
-  };
-
   const { data: currentUser } = useMyInfoQuery();
 
   const isMyPost = useMemo(

client/src/const/brand.ts

@@ -5,4 +5,10 @@ export const nameOfApp = "투파이아" as const;
 /**
  * One line brand message to change brand description
  */
-export const oneLineMessage = "앱을 위한 한 줄 설명" as const;
+export const oneLineMessage = "술에 대한 진짜 이야기" as const;
+/**
+ * title 을 입력받아 Tupaia | title 형태의 html title 을 리턴
+ * @param title 제목으로 사용할 문자열
+ * @returns Tupaia | title
+ */
+export const HTML_TITLE =(title:string)=>`${nameOfApp} | ${title}`

client/src/const/serverPath.ts

@@ -81,6 +81,11 @@ export const REMOVE_FILE = (attachNo: string) => `/attach/${attachNo}` as const;
  */
 export const GET_ALCOHOL_LIST = "/alcohols" as const;
 
+/**
+ * 알콜 디테일을 받아오는 URL
+ */
+export const GET_ALCOHOL_DETAIL = (id: string) => `${GET_ALCOHOL_LIST}/${id}` as const;
+
 /**
  * 포스트의 PK를 입력받아 해당 PK의 게시글의 좋아요 취소를 요청
  * @param id 게시글의 PK

client/src/queries/alcohol/useGetAlcoholDetailQuery.ts

@@ -0,0 +1,28 @@
+import { GET_ALCOHOL_DETAIL } from "@/const/serverPath";
+import axios from "@/libs/axios";
+import { AlcoholDetailInterface } from "@/types/alcohol/AlcoholInterface";
+import { useSuspenseQuery } from "@tanstack/react-query";
+
+const useGetAlcoholDetailQuery = (
+  id: string,
+  initialData?: AlcoholDetailInterface
+) =>
+  useSuspenseQuery({
+    queryKey: AlcoholDetailQueryKey.byId(id),
+    queryFn: () => getAlcoholDetailById(id),
+    initialData,
+  });
+
+export const AlcoholDetailQueryKey = {
+  all: ["alcoholDetail"] as const,
+  byId: (id: string) => ["alcoholDetail", id] as const,
+};
+
+export const getAlcoholDetailById = async (id: string) => {
+  const { data } = await axios.get<AlcoholDetailInterface>(
+    GET_ALCOHOL_DETAIL(id)
+  );
+  return data;
+};
+
+export default useGetAlcoholDetailQuery;

client/src/types/alcohol/AlcoholInterface.ts

@@ -9,6 +9,7 @@ export interface AlcoholDetailInterface {
   description: string;
   degree: number;
   period: number;
+  taste: AlcoholTasteNoteInterface;
   productionYear: number;
   volume: number;
   tagList: string[];
@@ -19,3 +20,9 @@ export interface AlcoholAttachUrlsInterface {
   attachUrl: string;
   attachType: string;
 }
+
+export interface AlcoholTasteNoteInterface {
+  Taste: string[];
+  Aroma: string[];
+  Finish: string[];
+}