구현 - 개봉 예정작 목록 구현

apps/web/package.json

@@ -12,6 +12,7 @@
     "@repo/ui": "workspace:*",
     "@tanstack/react-query": "^5.52.0",
     "axios": "^1.7.4",
+    "dayjs": "^1.11.13",
     "next": "14.2.5",
     "react": "^18",
     "react-dom": "^18",

apps/web/pages/index.tsx

@@ -1,6 +1,7 @@
 import Head from "next/head";
 
 import { PopularMovieList } from "@/features/get-popular-movie-list";
+import { UpcomingMovieList } from "@/features/get-upcoming-movie-list";
 import { popularMovieListTitle } from "@/pages/home";
 import { Col } from "@/shared/ui/col";
 import { Container } from "@/shared/ui/container";
@@ -15,13 +16,21 @@ export default function Home() {
         <meta content="width=device-width, initial-scale=1" name="viewport" />
         <link href="/favicon.ico" rel="icon" />
       </Head>
+
       <Container>
         <Row>
           <Col lg={12} md={12} sm={4}>
             <h2 className={popularMovieListTitle}>트렌드</h2>
             <PopularMovieList />
           </Col>
         </Row>
+
+        <Row>
+          <Col lg={12} md={12} sm={4}>
+            <h2 className={popularMovieListTitle}>공개 예정작</h2>
+            <UpcomingMovieList />
+          </Col>
+        </Row>
       </Container>
     </>
   );

apps/web/src/entities/movie-list/api/movie-list-api.ts

@@ -1,20 +1,24 @@
 import { tmdbHttp } from "@/shared/api";
-import { camelCaseObjMapper, Nullable } from "@/shared/lib";
+import { camelCaseObjMapper } from "@/shared/lib";
 
-import { PopularMovieListReqParams } from "./request-types";
+import { MovieListReqParams } from "./request-types";
 import { MovieListDTO } from "./response-types";
+import { UpcomingMovieListDTO } from "./response-types/upcoming-movie-list";
 
-export default class MovieListApi {
-  static baseURL = "movie";
+const movieBaseURL = "movie";
 
+export default class MovieListApi {
+  /**
+   * 트렌드 영화 목록
+   */
   static async getPopularMovieList({
     page = 1,
     language = "ko-KR",
     region = 410,
     ...axiosConfig
-  }: PopularMovieListReqParams): Promise<Nullable<MovieListDTO>> {
+  }: MovieListReqParams): Promise<MovieListDTO> {
     return tmdbHttp
-      .get(`${this.baseURL}/popular`, {
+      .get(`${movieBaseURL}/popular`, {
         params: {
           page,
           language,
@@ -24,4 +28,15 @@ export default class MovieListApi {
       })
       .then((res) => camelCaseObjMapper(res.data));
   }
+
+  /**
+   * 개봉 예정 영화 목록
+   */
+  static async getUpcomingMovieList(
+    { page, language, region, ...axiosConfig }: MovieListReqParams = { page: 1, language: "ko-KR", region: "KR" },
+  ): Promise<UpcomingMovieListDTO> {
+    return tmdbHttp
+      .get(`${movieBaseURL}/upcoming`, { params: { page, language, region }, ...axiosConfig })
+      .then((res) => camelCaseObjMapper(res.data));
+  }
 }

apps/web/src/entities/movie-list/api/movie-list.queries.ts

@@ -1,21 +1,27 @@
 import { queryOptions } from "@tanstack/react-query";
 
 import { MovieList } from "../model";
+import { UpcomingMovieList } from "../model/upcoming-movie-list";
 
 import MovieListApi from "./movie-list-api";
-import { PopularMovieListReqParams } from "./request-types";
+import { MovieListReqParams } from "./request-types";
 
 export const movieListQueryKeys = {
   popularMovieList: () => ["popular-movie-list"] as const,
+  upcomingMovieList: () => ["upcoming-movie-list"] as const,
 };
 
 export const movieListQueries = {
-  popularMovieList: (
-    { page, language, region }: PopularMovieListReqParams = { page: 1, language: "ko-KR", region: 410 },
-  ) =>
+  popularMovieList: ({ page, language, region }: MovieListReqParams = { page: 1, language: "ko-KR", region: 410 }) =>
     queryOptions({
       queryKey: [...movieListQueryKeys.popularMovieList(), { page, language, region }],
       queryFn: () => MovieListApi.getPopularMovieList({ page, language, region }),
       select: (data) => new MovieList(data),
     }),
+  upcomingMovieList: ({ page, language, region }: MovieListReqParams = { page: 1, language: "ko-KR", region: "KR" }) =>
+    queryOptions({
+      queryKey: [...movieListQueryKeys.upcomingMovieList(), { page, language, region }],
+      queryFn: () => MovieListApi.getUpcomingMovieList({ page, language, region }),
+      select: (data) => new UpcomingMovieList(data),
+    }),
 };

apps/web/src/entities/movie-list/api/request-types/index.ts

@@ -1 +1 @@
-export * from "./popular-movie-list";
+export * from "./movie-list";

apps/web/src/entities/movie-list/api/request-types/popular-movie-list.ts → apps/web/src/entities/movie-list/api/request-types/movie-list.ts

@@ -1,6 +1,6 @@
 import { BaseAxiosReq } from "@/shared/api";
 
-export interface PopularMovieListReqParams extends BaseAxiosReq {
+export interface MovieListReqParams extends BaseAxiosReq {
   page: number;
   language: string;
   region: number;

apps/web/src/entities/movie-list/api/response-types/upcoming-movie-list.ts

@@ -0,0 +1,8 @@
+import { MovieListDTO } from "./movie-list";
+
+export interface UpcomingMovieListDTO extends MovieListDTO {
+  dates: {
+    maximum: string;
+    minimum: string;
+  };
+}

apps/web/src/entities/movie-list/model/movie-list-item.ts

@@ -1,3 +1,5 @@
+import dayjs from "dayjs";
+
 import { languageRegions } from "@/shared/config";
 import { createBaseModel } from "@/shared/lib";
 
@@ -23,4 +25,12 @@ export class MovieListItem extends createBaseModel<MovieListItemDTO>() {
   get Region() {
     return languageRegions[this.originalLanguage] ?? this.originalLanguage;
   }
+
+  get Platform() {
+    return this.video ? "OTT" : "극장";
+  }
+
+  get ReleasedDateDotParsed() {
+    return dayjs(this.ReleasedDate).format("YYYY.MM.DD");
+  }
 }

apps/web/src/entities/movie-list/model/upcoming-movie-list.ts

@@ -0,0 +1,15 @@
+import { UpcomingMovieListDTO } from "../api/response-types/upcoming-movie-list";
+
+import { MovieList } from "./movie-list";
+
+export class UpcomingMovieList extends MovieList {
+  public rangeStartDate: string;
+  public rangeEndData: string;
+
+  constructor(private upcomingMovieList: UpcomingMovieListDTO) {
+    super(upcomingMovieList);
+
+    this.rangeStartDate = upcomingMovieList.dates.minimum;
+    this.rangeEndData = upcomingMovieList.dates.maximum;
+  }
+}

apps/web/src/entities/movie-list/ui/index.ts

@@ -1 +1,2 @@
 export * from "./popular-movie-card/popular-movie-card";
+export * from "./upcoming-movie-card/upcoming-movie-card";

apps/web/src/entities/movie-list/ui/upcoming-movie-card/upcoming-movie-card.css.ts

@@ -0,0 +1,12 @@
+import { style } from "@vanilla-extract/css";
+
+import { themeColorContract } from "@/shared/styles";
+
+export const descriptionWrapper = style({
+  display: "flex",
+  gap: "5px",
+});
+
+export const releasedDate = style({
+  color: themeColorContract.color.primary10,
+});

apps/web/src/entities/movie-list/ui/upcoming-movie-card/upcoming-movie-card.tsx

@@ -0,0 +1,39 @@
+import { AspectRatio } from "@repo/ui/aspect-ratio";
+import Image from "next/image";
+
+import { MovieInfoCard } from "@/shared/ui/movie-info-card";
+
+import { MovieListItem } from "../../model";
+
+import { descriptionWrapper, releasedDate } from "./upcoming-movie-card.css";
+
+export function UpcomingMovieCard({ movieInfo }: { movieInfo: MovieListItem }) {
+  const { posterPath, title, ReleasedDateDotParsed, Platform } = movieInfo;
+
+  return (
+    <MovieInfoCard>
+      <MovieInfoCard.Poster>
+        <AspectRatio ratio={4 / 3}>
+          <Image
+            alt={`${title} poster image`}
+            height={500}
+            src={`${process.env.NEXT_PUBLIC_TMDB_RESOURCE_BASE_URL}/t/p/w500${posterPath}`}
+            style={{ width: "100%", height: "100%" }}
+            width={500}
+          />
+        </AspectRatio>
+      </MovieInfoCard.Poster>
+
+      <MovieInfoCard.Title>
+        <span>{title}</span>
+      </MovieInfoCard.Title>
+
+      <MovieInfoCard.Description>
+        <div className={descriptionWrapper}>
+          <span>{Platform}</span>
+          <span className={releasedDate}>{ReleasedDateDotParsed}</span>
+        </div>
+      </MovieInfoCard.Description>
+    </MovieInfoCard>
+  );
+}

apps/web/src/features/get-upcoming-movie-list/index.ts

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

apps/web/src/features/get-upcoming-movie-list/ui/index.ts

@@ -0,0 +1 @@
+export * from "./upcoming-movie-list/upcoming-movie-list";

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

@@ -0,0 +1,39 @@
+import { useQuery } from "@tanstack/react-query";
+import { useMemo } from "react";
+import { Swiper, SwiperSlide } from "swiper/react";
+import { SwiperOptions } from "swiper/types";
+
+import { UpcomingMovieCard, movieListQueries } from "@/entities/movie-list";
+import { screenBreakPoints } from "@/shared/styles";
+
+export function UpcomingMovieList() {
+  const { data: upcomingMovieList, status: upcomingMovieListStatus } = useQuery(movieListQueries.upcomingMovieList());
+
+  const swiperBreakPoints: SwiperOptions["breakpoints"] = useMemo(
+    () => ({
+      [parseInt(screenBreakPoints.sm)]: { slidesPerView: 4, spaceBetween: 12 },
+      [parseInt(screenBreakPoints.md)]: { slidesPerView: 5, spaceBetween: 16 },
+    }),
+    [],
+  );
+
+  if (upcomingMovieListStatus === "pending") {
+    return <div>Loading...</div>;
+  }
+
+  if (upcomingMovieListStatus === "error") {
+    return <div>Error...</div>;
+  }
+
+  return (
+    <Swiper breakpoints={swiperBreakPoints} slidesPerView={3} spaceBetween={8}>
+      {upcomingMovieList.GeneralAudienceMovies?.map((movieInfo) => {
+        return (
+          <SwiperSlide key={movieInfo.id}>
+            <UpcomingMovieCard movieInfo={movieInfo} />
+          </SwiperSlide>
+        );
+      })}
+    </Swiper>
+  );
+}

apps/web/src/shared/config/language-regions.ts

@@ -4,4 +4,6 @@ export const languageRegions: Record<string, string> = {
   ja: "일본",
   hi: "인도",
   fr: "프랑스",
+  pt: "포르투갈",
+  cn: "중국",
 };