feat: now-playing-movie-review-list 컴포넌트 추가

apps/web/pages/index.tsx

@@ -7,6 +7,7 @@ import GenresApi from "@/entities/genres/api/genres-api";
 import { reviewsQueryKeys } from "@/entities/reviews";
 import ReviewsApi from "@/entities/reviews/api/reviews-api";
 import { NowPlayingMovieList } from "@/features/get-now-playing-movie-list";
+import { NowPlayingMovieReviewList } from "@/features/get-now-playing-movie-review-list";
 import { PopularMovieList } from "@/features/get-popular-movie-list";
 import { UpcomingMovieList } from "@/features/get-upcoming-movie-list";
 import { popularMovieListTitle } from "@/pages/home";
@@ -25,6 +26,17 @@ export default function Home({ dehydratedState }: InferGetServerSidePropsType<ty
         <link href="/favicon.ico" rel="icon" />
       </Head>
 
+      <Container>
+        <Row>
+          <Col lg={12} md={12} sm={4}>
+            <Text as="h2" className={popularMovieListTitle} size="xl" weight="bold">
+              리뷰
+            </Text>
+            <NowPlayingMovieReviewList />
+          </Col>
+        </Row>
+      </Container>
+
       <Container>
         <Row>
           <Col lg={12} md={12} sm={4}>

apps/web/src/features/get-now-playing-movie-list/ui/now-playing-movie-list/now-playing-movie-list.tsx

@@ -12,8 +12,6 @@ const swiperBreakPoints: SwiperOptions["breakpoints"] = {
 export function NowPlayingMovieList() {
   const { data: nowPlayingMovieList, status: nowPlayingMovieListStatus } = useNowPlayingMovieListQuery();
 
-  // useQueries(movieListQueries.nowPlayingMovieList());
-
   if (nowPlayingMovieListStatus === "pending") {
     return <div>Loading...</div>;
   }

apps/web/src/features/get-now-playing-movie-review-list/index.ts

@@ -0,0 +1 @@
+export * from "./ui";

apps/web/src/features/get-now-playing-movie-review-list/ui/index.ts

@@ -0,0 +1 @@
+export * from "./now-playing-movie-review-list/now-playing-movie-review-list";

apps/web/src/features/get-now-playing-movie-review-list/ui/now-playing-movie-review-list/now-playing-movie-review-list.tsx

@@ -0,0 +1,35 @@
+import { Swiper, SwiperSlide } from "swiper/react";
+import { SwiperOptions } from "swiper/types";
+
+import { useNowPlayingMovieListReviewsQuery } from "@/entities/reviews";
+import { NowPlayingMovieReviewCard } from "@/entities/reviews";
+import { screenBreakPoints } from "@/shared/styles";
+
+const swiperBreakPoints: SwiperOptions["breakpoints"] = {
+  [parseInt(screenBreakPoints.sm)]: { slidesPerView: 2, spaceBetween: 12 },
+  [parseInt(screenBreakPoints.md)]: { slidesPerView: 3, spaceBetween: 16 },
+};
+
+export function NowPlayingMovieReviewList() {
+  const { data, status } = useNowPlayingMovieListReviewsQuery();
+
+  if (status === "pending") {
+    return <div>Loading...</div>;
+  }
+
+  if (status === "error") {
+    return <div>Error...</div>;
+  }
+
+  return (
+    <Swiper breakpoints={swiperBreakPoints} slidesPerView={1} spaceBetween={8}>
+      {data.Reviews.map((review) => {
+        return (
+          <SwiperSlide key={review.reviewId}>
+            <NowPlayingMovieReviewCard review={review} />
+          </SwiperSlide>
+        );
+      })}
+    </Swiper>
+  );
+}