+
+ );
+}
diff --git a/app/detail/[id]/queries/getMovieDetail.tsx b/app/detail/[id]/queries/getMovieDetail.tsx
new file mode 100644
index 0000000..6cfffc0
--- /dev/null
+++ b/app/detail/[id]/queries/getMovieDetail.tsx
@@ -0,0 +1,12 @@
+export default async function getMovieDetail(url: string) {
+ const apiKey =
+ "eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiIzZDJjYWU5NGI2Yzk1MWNiY2EyMmVjMTc5Y2JmZDM3ZSIsInN1YiI6IjYzZDhiNDYzM2RjMzEzMDA4MjMyZTkyMSIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.fMlQjoW-zgChmdjBWD4oB0mHbaJ4fRjmXL8XAGougHY";
+ const headers = {
+ Authorization: `Bearer ${apiKey}`,
+ };
+
+ const res = await fetch(url, { headers });
+ const data = await res.json();
+
+ return data;
+}
diff --git a/app/favicon.ico b/app/favicon.ico
new file mode 100644
index 0000000..718d6fe
Binary files /dev/null and b/app/favicon.ico differ
diff --git a/app/layout.tsx b/app/layout.tsx
new file mode 100644
index 0000000..7b3a5bf
--- /dev/null
+++ b/app/layout.tsx
@@ -0,0 +1,16 @@
+import "@/app/styles/global.css";
+import Providers from "./common/components/Provider";
+
+export default function RootLayout({
+ children,
+}: {
+ children: React.ReactNode;
+}) {
+ return (
+
+
+
+
+
+
+
+
+
+ Previews
+ {movieInfo.overview}
+
+ {text && (
+
+ {data.map((movie) => (
+
+
+ );
+}
diff --git a/app/main/page.tsx b/app/main/page.tsx
new file mode 100644
index 0000000..dfcaa33
--- /dev/null
+++ b/app/main/page.tsx
@@ -0,0 +1,49 @@
+import CustomSlider from "./components/Slider/CustomSlider";
+import getMovies from "./queries/getMovies";
+import { getMainSliderMovieResponse } from "./queries/dto/get-popular-movie";
+import Header from "../common/components/layout/Header";
+import Footer from "../common/components/layout/Footer";
+import PlayBar from "../common/components/layout/PlayBar";
+
+export default async function Main() {
+ const sliderInfo = [
+ {
+ text: "Popular on Netflix",
+ url: `${process.env.NEXT_PUBLIC_BASE_URL}/popular`,
+ },
+ {
+ text: "Now Playing",
+ url: `${process.env.NEXT_PUBLIC_BASE_URL}/now_playing`,
+ },
+ {
+ text: "Top Rated",
+ url: `${process.env.NEXT_PUBLIC_BASE_URL}/top_rated`,
+ },
+ {
+ text: "Upcoming Contents",
+ url: `${process.env.NEXT_PUBLIC_BASE_URL}/upcoming`,
+ },
+ ];
+ return (
+
+ {text}
+
+ )}
+ router.push(`/detail/${movie.id}`)}
+ >
+
+ ))}
+
+
+
+ {type === "big" && (
+
+ )}
+
+
+ type="big"
+ data={await getMovies(sliderInfo[0].url)}
+ />
+
+ key={slider.url}
+ type="small"
+ text={slider.text}
+ data={await getMovies(slider.url)}
+ className={`mt-[2.2rem] pl-[0.5rem] ${
+ sliderInfo.length === index + 1 ? "pb-[7rem]" : null
+ }`}
+ />
+ ))}
+
+
+ );
+}
diff --git a/app/main/queries/dto/get-popular-movie.ts b/app/main/queries/dto/get-popular-movie.ts
new file mode 100644
index 0000000..0296f82
--- /dev/null
+++ b/app/main/queries/dto/get-popular-movie.ts
@@ -0,0 +1,34 @@
+// 메인 페이지 슬라이더 데이터 상태
+export interface getMainSliderMovieResponse {
+ adult: boolean;
+ backdrop_path: string;
+ genre_ids: number[];
+ id: number;
+ original_language: string;
+ original_title: string;
+ overview: string;
+ popularity: number;
+ poster_path: string;
+ release_date: string;
+ title: string;
+ video: boolean;
+ vote_average: number;
+ vote_count: number;
+}
+
+export interface IMovie {
+ poster_path: string | null;
+ title: string;
+ backdrop_path: string | null;
+ adult: boolean;
+ overview: string;
+ release_date: string;
+ genre_ids: number[];
+ id: number;
+ original_title: string;
+ original_language: string;
+ popularity: number;
+ vote_count: number;
+ video: boolean;
+ vote_average: number;
+}
diff --git a/app/main/queries/getMovies.tsx b/app/main/queries/getMovies.tsx
new file mode 100644
index 0000000..60f12b0
--- /dev/null
+++ b/app/main/queries/getMovies.tsx
@@ -0,0 +1,11 @@
+export default async function getMovies(url: string) {
+ const apiKey = process.env.NEXT_PUBLIC_API_KEY;
+ const headers = {
+ Authorization: `Bearer ${apiKey}`,
+ };
+
+ const res = await fetch(url, { headers });
+ const data = await res.json();
+
+ return data.results;
+}
diff --git a/app/main/state/slider-state.ts b/app/main/state/slider-state.ts
new file mode 100644
index 0000000..b94b2f3
--- /dev/null
+++ b/app/main/state/slider-state.ts
@@ -0,0 +1,6 @@
+export interface CustomSliderProps
+
+ );
+}
diff --git a/app/search/components/MovieList.tsx b/app/search/components/MovieList.tsx
new file mode 100644
index 0000000..021bbd7
--- /dev/null
+++ b/app/search/components/MovieList.tsx
@@ -0,0 +1,45 @@
+import { BiPlayCircle } from "react-icons/bi";
+import InfiniteScroll from "react-infinite-scroller";
+import { IMovie } from "@/app/main/queries/dto/get-popular-movie";
+import Link from "next/link";
+import useGetSearchMovies from "../queries/useGetSearchMovies";
+
+export default function MovieList({ searchText }: { searchText: string }) {
+ const { getByFarMovieData, hasNextPage, fetchNextPage } = useGetSearchMovies({
+ api: searchText === "" ? "/movie/now_playing" : "/search/movie",
+ searchText: searchText === "" ? undefined : searchText,
+ });
+
+ return (
+
+ 
+
+ ))}
+
+
+
+ {data.title}
+
+
+
+
+
+ ))}
+
+
+
+ {data.title}
+
+
+
+
+
+ );
+}
diff --git a/app/search/components/SearchMovieSkeletonList.tsx b/app/search/components/SearchMovieSkeletonList.tsx
new file mode 100644
index 0000000..3e32395
--- /dev/null
+++ b/app/search/components/SearchMovieSkeletonList.tsx
@@ -0,0 +1,16 @@
+import SearchMovieSkeleton from "./SearchMovieSkeleton";
+
+export default function SearchMovieSkeletonList() {
+ return (
+
+
+
+ -
+ {Array(6)
+ .fill(null)
+ .map((_, i) => (
+
+
+ );
+}
diff --git a/app/search/queries/useGetSearchMovies.tsx b/app/search/queries/useGetSearchMovies.tsx
new file mode 100644
index 0000000..30595a2
--- /dev/null
+++ b/app/search/queries/useGetSearchMovies.tsx
@@ -0,0 +1,66 @@
+import { searchAxiosInstance } from "@/app/common/libs/axios";
+import { useInfiniteQuery } from "@tanstack/react-query";
+import { IMovie } from "@/app/main/queries/dto/get-popular-movie";
+
+interface DateRange {
+ maximum: string;
+ minimum: string;
+}
+
+interface SearchMovieResponse {
+ dates: DateRange;
+ page: number;
+ results: IMovie[];
+ total_pages: number;
+ total_results: number;
+}
+
+export async function getSearchMovies({
+ searchText,
+ api,
+ pageParam,
+}: {
+ searchText?: string;
+ api: string;
+ pageParam: number;
+}): Promise
+
+
+ Top Searches
+
+