💅 style: 실시간 핫한 후기 퍼블리싱 작업 완료 #31

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;

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";

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>