Feat: 메인 페이지 더미 api 생성 및 연결 (#61)

* feat:메인 더미 데미터 api 생성

* feat:api 출력

* refactor:기능에 맞는 코드로 수정

src/apis/supabase/getDummyData.ts

@@ -0,0 +1,13 @@
+import { unitripSupabase } from '@/utils/supabaseClient';
+
+const getDummyData = async () => {
+  const { data, error } = await unitripSupabase.from('PLACE').select('*');
+
+  if (error) {
+    throw new Error('서버에 문제가 있습니다');
+  }
+
+  return data;
+};
+
+export default getDummyData;

src/types/api/dummy.ts

@@ -0,0 +1,8 @@
+export interface MainDummyResponse {
+  contentId: number;
+  place: string;
+  review_count: number;
+  rating: number;
+  overview: string;
+  thumbnail: string;
+}

src/views/Main/components/RecommendedTravel.tsx

@@ -1,38 +1,48 @@
 import { css } from '@emotion/react';
+import { useState } from 'react';
+import { Link } from 'react-router-dom';
 
+import getDummyData from '@/apis/supabase/getDummyData';
+import { useAsyncEffect } from '@/hooks/use-async-effect';
 import { COLORS, FONTS } from '@/styles/constants';
+import { MainDummyResponse } from '@/types/api/dummy';
 
 import { cardContainer, scrollContainer } from '../styles/main';
 import ReviewCard from './ReviewCard';
 
 const RecommendedTravel = () => {
+  const [placeData, setPlaceData] = useState<MainDummyResponse[]>();
+
+  useAsyncEffect(async () => {
+    const response = await getDummyData();
+    setPlaceData(response);
+  }, []);
+
   return (
     <section css={sectionCss}>
       <h3 css={subTitle}>믿고 보는 유니트립 리뷰</h3>
       <h2 css={title}>유니트립 추천 여행지 🏖️</h2>
-
-      <div css={scrollContainer}>
-        <li css={cardContainer}>
-          <ReviewCard
-            name="대전 오월드"
-            score="4.9"
-            content="앱에서 보았던 것과 같이 작품마다 점자안내판으로 설명이 있어 시각장애인도 불편하지 않게 관람이 가능했어요. 오디오 가이드 대여 서비스도 제공하니 필요하신 분들은 꼭 대여해서 쓰세요!! 시설이 너무... "
-            reviewCount="391"
-          />
-          <ReviewCard
-            name="대전 오월드"
-            score="4.9"
-            content="앱에서 보았던 것과 같이 작품마다 점자안내판으로 설명이 있어 시각장애인도 불편하지 않게 관람이 가능했어요. 오디오 가이드 대여 서비스도 제공하니 필요하신 분들은 꼭 대여해서 쓰세요!! 시설이 너무... "
-            reviewCount="391"
-          />
-          <ReviewCard
-            name="대전 오월드"
-            score="4.9"
-            content="앱에서 보았던 것과 같이 작품마다 점자안내판으로 설명이 있어 시각장애인도 불편하지 않게 관람이 가능했어요. 오디오 가이드 대여 서비스도 제공하니 필요하신 분들은 꼭 대여해서 쓰세요!! 시설이 너무... "
-            reviewCount="391"
-          />
-        </li>
-      </div>
+      {placeData && (
+        <div css={scrollContainer}>
+          <ul css={cardContainer}>
+            {placeData.map((place) => {
+              return (
+                <li key={place.contentId + place.place}>
+                  <Link to={`/${place.contentId}`}>
+                    <ReviewCard
+                      name={place.place}
+                      thumbnail={place.thumbnail}
+                      score={place.rating}
+                      content={place.overview}
+                      reviewCount={place.review_count}
+                    />
+                  </Link>
+                </li>
+              );
+            })}
+          </ul>
+        </div>
+      )}
     </section>
   );
 };
@@ -50,6 +60,7 @@ const subTitle = css`
   color: ${COLORS.gray7};
   ${FONTS.Body2};
 `;
+
 const title = css`
   margin-left: 2rem;
 

src/views/Main/components/ReviewCard.tsx

@@ -5,17 +5,19 @@ import { COLORS, FONTS } from '@/styles/constants';
 
 interface ReviewCardProps {
   name: string;
-  score: string;
+  score: number;
+  thumbnail: string;
   content: string;
-  reviewCount: string;
+  reviewCount: number;
 }
 
 const ReviewCard = (props: ReviewCardProps) => {
-  const { name, score, content, reviewCount } = props;
+  const { name, score, thumbnail, content, reviewCount } = props;
+
   return (
     <ul css={card}>
       <div css={imgContainerCss}>
-        <img css={placeImg} src="" alt={`${name} 장소 사진`} />
+        <img css={placeImg} src={thumbnail} alt={`${name} 장소 사진`} />
         <div css={placeName}>
           <ShieldCheckMonoIcon />
           <p css={placeNameCss}>{name}</p>
@@ -25,7 +27,7 @@ const ReviewCard = (props: ReviewCardProps) => {
       <div css={reviewBox}>
         <p css={scoreText}>
           <Star1Icon />
-          {score}
+          {score.toFixed(1)}
         </p>
         <p css={contentText}>{content}</p>
         <p css={reviewCountText}>리뷰 {reviewCount}</p>
@@ -48,7 +50,7 @@ const card = css`
   display: flex;
   flex-direction: column;
 
-  width: 27.8rem;
+  width: 24rem;
   height: 30rem;
   border-radius: 1.2rem;
 
@@ -69,8 +71,8 @@ const placeName = css`
   gap: 0.4rem;
   align-items: center;
   position: absolute;
-  top: 12.2rem;
-  left: 1.6rem;
+  top: 12.5rem;
+  left: 1.2rem;
 
   padding: 0.4rem 0.8rem;
   border-radius: 1rem;
@@ -85,6 +87,8 @@ const reviewBox = css`
   display: flex;
   align-items: center;
   flex-direction: column;
+
+  width: 100%;
 `;
 
 const scoreText = css`
@@ -101,8 +105,9 @@ const contentText = css`
   display: -webkit-box;
   overflow: hidden;
 
-  width: 23.8rem;
-  margin-top: 1rem;
+  width: 24rem;
+  padding: 0 2rem;
+  margin: 1rem 0;
 
   color: ${COLORS.gray7};
 
@@ -113,8 +118,6 @@ const contentText = css`
 `;
 
 const reviewCountText = css`
-  margin-top: 0.6rem;
-
   color: ${COLORS.gray4};
   ${FONTS.Small1};
 `;