feat: 상단 태그 api 연결 (related to: #38)

api/reviewApi.ts

@@ -0,0 +1,16 @@
+import { PARTNER_DOMAIN, REVIEW_MATE_URL } from '@/config/constant';
+import axios from 'axios';
+import { ProductDataType } from './types/reviewTypes';
+
+export async function fetchProductData(
+  productPartnerCustomId: string
+): Promise<ProductDataType> {
+  try {
+    const response = await axios.get(
+      `${REVIEW_MATE_URL}/api/console/v1/${PARTNER_DOMAIN}/products/travel/single/${productPartnerCustomId}`
+    );
+    return response.data;
+  } catch (error) {
+    throw error;
+  }
+}

api/types/reviewTypes.ts

@@ -0,0 +1,18 @@
+export interface ProductDataType {
+  id: number;
+  partnerCustomId: string;
+  thumbnailUrl: string;
+  name: string;
+  reviewsCount: number;
+  rating: number;
+  partnerSellerName: string;
+  partnerSellerPhoneNumber: string;
+  positiveTags: {
+    category: string;
+    count: number;
+  }[];
+  negativeTags: {
+    category: string;
+    count: number;
+  }[];
+}

components/detail/Top/Index.tsx

@@ -1,5 +1,5 @@
 import Image from 'next/image';
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import LeftInfo from './LeftInfo';
 import RightInfo from './RightInfo';
 import star from '@/public/images/star.png';
@@ -9,14 +9,28 @@ import { hotelInfo } from '@/data/detail/hotelData';
 import { formatNumberWithCommas } from 'utils/globalUtils';
 import { motion } from 'framer-motion';
 import { BlackButton } from './global/button';
+import { fetchProductData } from 'api/reviewApi';
+import { productId } from '@/data/detail/productData';
+import { ProductDataType } from 'api/types/reviewTypes';
 
 export default function TopInfo() {
+  const [productData, setProductData] = useState<ProductDataType | null>(null);
   const [heart, setHeart] = useState(false);
 
   const heartClick = () => {
     setHeart(!heart);
   };
 
+  useEffect(() => {
+    async function fetchData() {
+      const data = await fetchProductData(productId); // userId를 원하는 값으로 수정
+      setProductData(data);
+      console.log(data);
+    }
+
+    fetchData();
+  }, []);
+
   return (
     <div>
       <h1 className='text-title font-bold mb-1'>{hotelInfo.name}</h1>
@@ -28,12 +42,15 @@ export default function TopInfo() {
           width={15}
           height={15}
         />
-        <div className='mr-[10px] font-bold'>5.0</div>
+        <div className='mr-[10px] font-bold'>{productData?.rating}</div>
         <div className='text-gray02'>{hotelInfo.grade}</div>
       </div>
       <div className='grid grid-cols-1 md:grid-cols-2 gap-4 mb-8'>
         <LeftInfo />
-        <RightInfo />
+        <RightInfo
+          positiveTags={productData?.positiveTags || []}
+          negativeTags={productData?.negativeTags || []}
+        />
       </div>
       <div className='grid grid-cols-1 md:grid-cols-2 gap-4'>
         <div />

components/detail/Top/RightInfo.tsx

@@ -4,7 +4,17 @@ import map from '/public/images/map.svg';
 import checkin from '/public/images/checkin.svg';
 import { hotelInfo } from '@/data/detail/hotelData';
 
-export default function RightInfo() {
+interface Tag {
+  category: string;
+  count: number;
+}
+
+interface Props {
+  positiveTags: Tag[];
+  negativeTags: Tag[];
+}
+
+export default function RightInfo({ positiveTags, negativeTags }: Props) {
   return (
     <div>
       <div className='flex flex-col justify-end h-full'>
@@ -25,22 +35,21 @@ export default function RightInfo() {
           <li className='ml-[28px]'>체크아웃 : {hotelInfo.checkout}</li>
         </ul>
         <div>
-          <TagBox color='blue' title='긍정 태그' />
-          <TagBox color='red' title='부정 태그' />
+          <TagBox tags={positiveTags} color='blue' title='긍정 태그' />
+          <TagBox tags={negativeTags} color='red' title='부정 태그' />
         </div>
       </div>
     </div>
   );
 }
 
 interface TagBoxProps {
+  tags: Tag[];
   color: string;
   title: string;
 }
 
-const TagBox = ({ color, title }: TagBoxProps) => {
-  const tags = ['청결', '위치', '서비스', '가격', '편의시설', '안전'];
-
+const TagBox = ({ tags, color, title }: TagBoxProps) => {
   return (
     <div className='flex flex-col justify-center p-5 mt-1 bg-gray08 rounded-[10px]'>
       <div
@@ -51,14 +60,19 @@ const TagBox = ({ color, title }: TagBoxProps) => {
         {title}
       </div>
       <div className='flex flex-wrap gap-1'>
+        {tags.length === 0 && (
+          <div className='text-caption text-gray01'>
+            태그가 존재하지 않습니다.
+          </div>
+        )}
         {tags.map((tag, index) => (
           <div
             key={index}
             className={`${
               color === 'blue' ? 'border-blue text-blue' : 'border-red text-red'
             } border py-1 px-2.5 bg-white rounded text-body3 font-mid`}
           >
-            {tag}
+            {tag.category}
           </div>
         ))}
       </div>

data/detail/productData.tsx

@@ -0,0 +1 @@
+export const productId = 'PRODUCT-0001'