From b080b73ff30f67284765194dba2b9765b43ad6ee Mon Sep 17 00:00:00 2001
From: Jeongmin Lee <clcl6084@gmail.com>
Date: Sun, 25 Aug 2024 00:32:33 +0900
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=85=20style:=20=EC=8B=A4=EC=8B=9C?=
 =?UTF-8?q?=EA=B0=84=20=ED=95=AB=ED=95=9C=20=ED=9B=84=EA=B8=B0=20=ED=8D=BC?=
 =?UTF-8?q?=EB=B8=94=EB=A6=AC=EC=8B=B1=20=EC=9E=91=EC=97=85=20=EC=99=84?=
 =?UTF-8?q?=EB=A3=8C=20#31?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/(home)/_components/TopReviews.tsx | 23 +++++++++++++++++++++++
 src/app/(home)/_components/index.ts       |  3 +++
 src/app/(home)/page.tsx                   |  7 +++----
 3 files changed, 29 insertions(+), 4 deletions(-)
 create mode 100644 src/app/(home)/_components/TopReviews.tsx
 create mode 100644 src/app/(home)/_components/index.ts

diff --git a/src/app/(home)/_components/TopReviews.tsx b/src/app/(home)/_components/TopReviews.tsx
new file mode 100644
index 0000000..41d291e
--- /dev/null
+++ b/src/app/(home)/_components/TopReviews.tsx
@@ -0,0 +1,23 @@
+import { getTopReviews } from "@/apis/review/topReviews/topReviews";
+import { ReviewTile } from "@/components/core/List";
+
+const TopReviews = async () => {
+  const topReviews = await getTopReviews();
+  return (
+    <section className="flex w-full flex-col gap-[12px]">
+      <div className="flex w-full justify-between">
+        <div className="flex gap-[4px] text-title-bold text-gray-scale-900">
+          실시간 핫한 후기
+        </div>
+      </div>
+
+      <div className="flex w-full flex-col gap-[12px]">
+        {topReviews.map((review) => (
+          <ReviewTile key={review.reviewId} review={review} />
+        ))}
+      </div>
+    </section>
+  );
+};
+
+export default TopReviews;
diff --git a/src/app/(home)/_components/index.ts b/src/app/(home)/_components/index.ts
new file mode 100644
index 0000000..a081d7e
--- /dev/null
+++ b/src/app/(home)/_components/index.ts
@@ -0,0 +1,3 @@
+export { default as FestivalHot } from "./FestivalHot";
+export { default as FestivalThisWeek } from "./FestivalThisWeek";
+export { default as TopReviews } from "./TopReviews";
diff --git a/src/app/(home)/page.tsx b/src/app/(home)/page.tsx
index 0a018cb..4b8fd22 100644
--- a/src/app/(home)/page.tsx
+++ b/src/app/(home)/page.tsx
@@ -1,16 +1,15 @@
 import { HomeHeader } from "@/layout/Mobile/MobileHeader";
 import NavigationBar from "@/layout/Mobile/NavigationBar";
 
-import FestivalHot from "./_components/FestivalHot";
-import FestivalThisWeek from "./_components/FestivalThisWeek";
-
+import { FestivalHot, FestivalThisWeek, TopReviews } from "./_components";
 export default async function Home() {
   return (
     <div className="mb-[60px] mt-[44px]">
       <HomeHeader />
-      <main className="flex flex-wrap gap-4 px-[16px]">
+      <main className="flex flex-col gap-[40px] bg-gray-scale-100 px-[16px] pb-[36px] pt-[16px]">
         <FestivalHot />
         <FestivalThisWeek />
+        <TopReviews />
       </main>
       <NavigationBar />
     </div>