feat: add recommended reviews

src/pages/component/NowReviews.tsx

@@ -1,5 +1,4 @@
-import React, { useState } from 'react';
-import { Link } from 'react-router-dom';
+import { useQuery } from '@tanstack/react-query';
 import NowReview from './NowReview';
 
 type NowReviews = {
@@ -8,41 +7,21 @@ type NowReviews = {
   address: string;
   img: string;
 };
-const NowReviews: React.FC = () => {
+const NowReviews = () => {
+  const { data } = useQuery({ queryKey: ['/reviews/recommended'] });
   return (
     <div className={`w-[100%] px-[5%] mx-auto mt-[10px] max-w-[480px] `}>
       <h1 className="text-xl">오늘의 추천 리뷰</h1>
       <div className="flex flex-wrap">
-        <NowReview
-          link="Etiam semper"
-          title="Etiam semper"
-          address="Etiam semper"
-          img="Etiam semper"
-        />
-        <NowReview
-          link="Etiam semper"
-          title="Etiam semper"
-          address="Etiam semper"
-          img="Etiam semper"
-        />
-        <NowReview
-          link="Etiam semper"
-          title="Etiam semper"
-          address="Etiam semper"
-          img="Etiam semper"
-        />
-        <NowReview
-          link="Etiam semper"
-          title="Etiam semper"
-          address="Etiam semper"
-          img="Etiam semper"
-        />
-        <NowReview
-          link="Etiam semper"
-          title="Etiam semper"
-          address="Etiam semper"
-          img="Etiam semper"
-        />
+        {data?.list.map((review) => (
+          <NowReview
+            key={review.id}
+            link={`/review/${review.id}`}
+            title={review.place.name}
+            address={review.user.nickname}
+            img={review.files[0].thumbnail}
+          />
+        ))}
       </div>
     </div>
   );