+
+ ))}
+ Loading...
; + if (!contentDetails) returnDetail not found
;
+
+ return (
+
+
+ );
+}
diff --git a/netflix-assignment/src/app/(route)/downloads/page.tsx b/netflix-assignment/src/app/(route)/downloads/page.tsx
new file mode 100644
index 0000000..5930d65
--- /dev/null
+++ b/netflix-assignment/src/app/(route)/downloads/page.tsx
@@ -0,0 +1,7 @@
+import Image from "next/image";
+
+export default function Downloads() {
+ return (
+
+ {/* 그림자 그라데이션 추가 */}
+
+
+
+
+
+ + {type === 'movie' ? contentDetails.title : contentDetails.name} +
++ {contentDetails.overview} +
+ +Downloads
+ );
+}
diff --git a/netflix-assignment/src/app/(route)/home/_components/ContentRow.tsx b/netflix-assignment/src/app/(route)/home/_components/ContentRow.tsx
new file mode 100644
index 0000000..181d418
--- /dev/null
+++ b/netflix-assignment/src/app/(route)/home/_components/ContentRow.tsx
@@ -0,0 +1,45 @@
+"use client"
+
+import Link from 'next/link';
+import { Movie } from '@/types/movie';
+import { TvShow } from '@/types/tvshows';
+
+type Props = {
+ title: string;
+
+ content: Movie[] | TvShow[] | null;
+
+};
+
+export default function ContentRow({ title, content }: Props) {
+
+ if (!content || content.length === 0) return null;
+ const getAltText = (item: Movie | TvShow) =>
+ 'title' in item ? item.title : 'name' in item ? item.name : 'No Title';
+
+ const getPrefix = (item: Movie | TvShow) =>
+ 'title' in item ? 'movie' : 'name' in item ? 'tv' : 'No';
+
+
+
+ return (
+ {title}
+
+ {content.map((item) => (
+
+
+
+ ))}
+
+
+
+ ))}
+
+
+
+ );
+}
diff --git a/netflix-assignment/src/app/(route)/home/_components/MovieCategory.tsx b/netflix-assignment/src/app/(route)/home/_components/MovieCategory.tsx
new file mode 100644
index 0000000..030eeec
--- /dev/null
+++ b/netflix-assignment/src/app/(route)/home/_components/MovieCategory.tsx
@@ -0,0 +1,22 @@
+"use client"
+
+import { movieCategories } from '@/data/categories';
+import ContentRow from './ContentRow';
+import { useFetchAllMovies } from '@/hooks/useFetchContents';
+
+export default function MovieCategory() {
+ const { data: movies, isLoading } = useFetchAllMovies();
+
+
+ if (isLoading) {
+ return Loading...
;
+ }
+ return (
+ <>
+ {movieCategories.map((item) => (
+ Previews
+
+
+ ))}
+
+
+
+
+
+ );
+}
diff --git a/netflix-assignment/src/app/(route)/home/_components/TvCategory.tsx b/netflix-assignment/src/app/(route)/home/_components/TvCategory.tsx
new file mode 100644
index 0000000..eecf756
--- /dev/null
+++ b/netflix-assignment/src/app/(route)/home/_components/TvCategory.tsx
@@ -0,0 +1,20 @@
+"use client"
+
+import { tvCategories } from '@/data/categories';
+import ContentRow from './ContentRow';
+import { useFetchAllTvShows } from '@/hooks/useFetchContents';
+
+export default function TvCategory() {
+ const { data: tvShows, isLoading } = useFetchAllTvShows();
+
+ if (isLoading) {
+ return Loading...
;
+ }
+ return (
+ <>
+ {tvCategories.map((item) => (
+
+
+ );
+}
diff --git a/netflix-assignment/src/app/(route)/layout.tsx b/netflix-assignment/src/app/(route)/layout.tsx
new file mode 100644
index 0000000..de6a022
--- /dev/null
+++ b/netflix-assignment/src/app/(route)/layout.tsx
@@ -0,0 +1,26 @@
+"use client"
+
+import Footer from "@/components/Footer";
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { useState } from 'react';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+
+
+export default function RouteLayout({
+ children,
+}: Readonly<{
+ children: React.ReactNode;
+}>) {
+ const [queryClient] = useState(() => new QueryClient());
+
+ return (
+
+ {children}
+
+
+ More
+ );
+}
diff --git a/netflix-assignment/src/app/(route)/search/_components/SearchBar.tsx b/netflix-assignment/src/app/(route)/search/_components/SearchBar.tsx
new file mode 100644
index 0000000..3235a65
--- /dev/null
+++ b/netflix-assignment/src/app/(route)/search/_components/SearchBar.tsx
@@ -0,0 +1,41 @@
+"use client"
+
+import SearchBarIcon from '../../../../public/svg/SearchBar.svg'
+import Close from '../../../../public/svg/Close.svg'
+import { useState } from 'react';
+
+export default function SearchBar({ onSearch }: { onSearch: (query: string) => void }) {
+ const [query, setQuery] = useState("");
+ // 검색어 상태를 관리해서 API 요청에 사용
+
+ const handleInputChange = (e: React.ChangeEvent
+ 
+
+);
+
+export default function SearchedMovie({ query }: SearchedProps) {
+ const { data: searchedData } = useFetchSearchedMovies(query);
+ const { data: topRatedMovies } = useFetchMovies('top_rated');
+
+ if (!searchedData) {
+ return (
+
+ {movie.title}
+ +Top Searches
+ {topRatedMovies?.map((movie: Movie) => ( +Top Searches
+ {searchedData.map((movie: Movie) => ( +
+
+ );
+}
diff --git a/netflix-assignment/src/app/api/details/[type]/[id]/route.ts b/netflix-assignment/src/app/api/details/[type]/[id]/route.ts
new file mode 100644
index 0000000..264e388
--- /dev/null
+++ b/netflix-assignment/src/app/api/details/[type]/[id]/route.ts
@@ -0,0 +1,33 @@
+import { NextRequest, NextResponse } from 'next/server';
+import axios from 'axios';
+
+const instance = axios.create({
+ baseURL: process.env.NEXT_PUBLIC_URL,
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ params: {
+ api_key: process.env.NEXT_PUBLIC_TMDB_API_KEY,
+ language: 'en-US',
+ page: 1,
+ },
+});
+
+export async function GET(req: NextRequest, { params }: { params: { type: string; id: string } }) {
+ const { type, id } = params;
+
+ // 유효한 type인지 검사
+ if (type !== 'movie' && type !== 'tv') {
+ return NextResponse.json({ error: 'Invalid type' }, { status: 400 });
+ }
+
+ try {
+ // 동적으로 받은 type, id를 사용하여 API 요청
+ const response = await instance.get(`/${type}/${id}`);
+
+ return NextResponse.json(response.data);
+ } catch (error) {
+ console.error(`Error fetching ${type} details:`, error);
+ return NextResponse.json({ error: 'Failed to fetch movie details' }, { status: 500 });
+ }
+}
diff --git a/netflix-assignment/src/app/api/movie/route.ts b/netflix-assignment/src/app/api/movie/route.ts
new file mode 100644
index 0000000..5c9f838
--- /dev/null
+++ b/netflix-assignment/src/app/api/movie/route.ts
@@ -0,0 +1,30 @@
+import { NextRequest, NextResponse } from 'next/server';
+import axios from 'axios';
+
+const instance = axios.create({
+ baseURL: process.env.NEXT_PUBLIC_URL,
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ params: {
+ api_key: process.env.NEXT_PUBLIC_TMDB_API_KEY,
+ language: 'en-US',
+ page: 1,
+ },
+});
+
+// GET 요청 처리
+export async function GET(req: NextRequest) {
+ // 동적으로 카테고리를 가져옴
+ const pathSegments = req.nextUrl.pathname.split('/');
+ const category = pathSegments[pathSegments.length - 1] || 'popular';
+
+ try {
+ const response = await instance.get(`/movie/${category}`);
+
+ return NextResponse.json(response.data.results);
+ } catch (error) {
+ console.error('Error fetching movies:', error);
+ return NextResponse.json({ error: 'Failed to fetch movies' }, { status: 500 });
+ }
+}
diff --git a/netflix-assignment/src/app/api/search/movie/route.ts b/netflix-assignment/src/app/api/search/movie/route.ts
new file mode 100644
index 0000000..d0e192d
--- /dev/null
+++ b/netflix-assignment/src/app/api/search/movie/route.ts
@@ -0,0 +1,37 @@
+import { NextRequest, NextResponse } from 'next/server';
+import axios from 'axios';
+
+const instance = axios.create({
+ baseURL: process.env.NEXT_PUBLIC_URL,
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ params: {
+ api_key: process.env.NEXT_PUBLIC_TMDB_API_KEY,
+ language: 'en-US',
+ include_adult: false,
+ },
+});
+
+// 영화 검색 GET 요청 처리
+export async function GET(req: NextRequest) {
+ const query = req.nextUrl.searchParams.get('query');
+
+ if (!query) {
+ return NextResponse.json({ error: '검색어가 필요합니다.' }, { status: 400 });
+ } // 검색어 없을 시 로직 수정하기
+
+ try {
+ const response = await instance.get(`/search/movie`, {
+ params: {
+ query,
+ page: 1, // 페이지가 있어도 되나?..
+ }
+ });
+
+ return NextResponse.json(response.data.results); // 결과 반환
+ } catch (error) {
+ console.error('Error searching movies:', error);
+ return NextResponse.json({ error: 'Failed to searching movies' }, { status: 500 });
+ }
+}
\ No newline at end of file
diff --git a/netflix-assignment/src/app/api/tv/route.ts b/netflix-assignment/src/app/api/tv/route.ts
new file mode 100644
index 0000000..4359b55
--- /dev/null
+++ b/netflix-assignment/src/app/api/tv/route.ts
@@ -0,0 +1,28 @@
+import { NextRequest, NextResponse } from 'next/server';
+import axios from 'axios';
+
+const instance = axios.create({
+ baseURL: process.env.NEXT_PUBLIC_URL,
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ params: {
+ api_key: process.env.NEXT_PUBLIC_TMDB_API_KEY,
+ language: 'en-US',
+ page: 1,
+ },
+});
+
+export async function GET(req: NextRequest) {
+ // 동적으로 카테고리를 가져옴
+ const pathSegments = req.nextUrl.pathname.split('/');
+ const category = pathSegments[pathSegments.length - 1] || 'popular';
+
+ try {
+ const response = await instance.get(`/tv/${category}`);
+ return NextResponse.json(response.data.results);
+ } catch (error) {
+ console.error('Error fetching TV shows:', error);
+ return NextResponse.json({ error: 'Failed to fetch TV shows' }, { status: 500 });
+ }
+}
diff --git a/netflix-assignment/src/app/favicon.ico b/netflix-assignment/src/app/favicon.ico
new file mode 100644
index 0000000..2176c74
Binary files /dev/null and b/netflix-assignment/src/app/favicon.ico differ
diff --git a/netflix-assignment/src/app/globals.css b/netflix-assignment/src/app/globals.css
new file mode 100644
index 0000000..511ae4b
--- /dev/null
+++ b/netflix-assignment/src/app/globals.css
@@ -0,0 +1,22 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@font-face {
+ font-family: "SF Pro Display";
+ src: local("SF Pro Display"), local(".SFNSText"), local(".SFNS"), local(".SF Pro Text"), local(".Helvetica Neue");
+ font-weight: 300 900;
+ font-style: normal;
+}
+
+html, body {
+ font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+ height: 100%;
+ width: 100vw;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-color: black;
+ overflow-y: auto;
+ color: white;
+}
\ No newline at end of file
diff --git a/netflix-assignment/src/app/layout.tsx b/netflix-assignment/src/app/layout.tsx
new file mode 100644
index 0000000..97dfd8b
--- /dev/null
+++ b/netflix-assignment/src/app/layout.tsx
@@ -0,0 +1,27 @@
+import type { Metadata } from "next";
+import "./globals.css";
+
+
+
+export const metadata: Metadata = {
+ title: "Netflix Assignment",
+ description: "Netflix Assignment",
+ icons: {
+ icon: '/favicon.ico',
+ }
+};
+
+export default function RootLayout({
+ children,
+}: Readonly<{
+ children: React.ReactNode;
+}>) {
+
+ return (
+
+
+ {children}
+
+
+ );
+}
diff --git a/netflix-assignment/src/app/page.tsx b/netflix-assignment/src/app/page.tsx
new file mode 100644
index 0000000..fa68dc4
--- /dev/null
+++ b/netflix-assignment/src/app/page.tsx
@@ -0,0 +1,37 @@
+"use client"
+
+import "./style.css";
+import LogoSVG from '@/public/svg/logos_netflix.svg';
+import { useRouter } from 'next/navigation';
+import { useEffect } from "react";
+
+
+export default function Landing() {
+
+ const router = useRouter();
+
+ useEffect(() => {
+ const timer = setTimeout(() => {
+ router.push('/home');
+ }, 5500);
+
+ return () => clearTimeout(timer); // 컴포넌트가 언마운트될 때 타이머 정리
+
+ },[]);
+
+
+ return (
+
+
+ );
+}
diff --git a/netflix-assignment/src/app/style.css b/netflix-assignment/src/app/style.css
new file mode 100644
index 0000000..dfa0c07
--- /dev/null
+++ b/netflix-assignment/src/app/style.css
@@ -0,0 +1,165 @@
+html, body {
+ height: 100vh;
+ width: 100vw;
+ background-color: black;
+ color: white;
+ overflow: hidden;
+}
+.container {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+.netflix {
+ position: relative;
+ width: 181.5px;
+ height: 300px;
+ overflow: hidden;
+ /* 첫 번째 애니메이션 */
+ animation: anim-netflix 0.5s linear forwards;
+ animation-delay: 1.4s;
+
+ /* 두 번째 애니메이션 */
+ animation: anim-netflix, anim-netflix-opacity;
+ animation-duration: 0.5s, 0.5s;
+ animation-timing-function: linear, linear;
+ animation-fill-mode: forwards;
+ animation-delay: 1.4s, 1.9s;
+}
+
+.n-1 {
+ background-color: #B10510;
+ height: 300px;
+ width: 60px;
+ position: absolute;
+ top: 300px;
+ animation: anim-top 0.6s linear forwards;
+ animation-delay: 0.2s; /* 딜레이 조정 */
+}
+
+.n-1::before {
+ content: '';
+ position: absolute;
+ width: 100%;
+ height: 7px;
+ background-color: black;
+ bottom: -2px;
+ transform: rotateZ(-3deg);
+ z-index: 99;
+}
+.n-3 {
+ background-color: #B10510;
+ height: 300px;
+ width: 60px;
+ position: absolute;
+ top: 300px;
+ right: 0;
+ animation: anim-top 0.4s linear forwards;
+ animation-delay: 1.2s;
+
+}
+.n-3::after {
+ content: '';
+ position: absolute;
+ width: 130px;
+ height: 10px;
+ background-color: black;
+ bottom: -5px;
+ left: -25px;
+ transform: rotateZ(5deg);
+ z-index: 99;
+}
+
+.n-2 {
+ background-color: transparent;
+ height: 375px;
+ width: 60px;
+ position: absolute;
+ transform: rotateZ(-21deg);
+ top: -51px;
+ left: 56.25px;
+ box-shadow: 4px 4px 15px #00000085;
+}
+.filler {
+ background-color: #e50815;
+ height: 0;
+ animation: anim-filler 0.4s linear forwards;
+ animation-delay: 0.8s;
+}
+.etflix {
+ position: absolute;
+ left: 70px; /* 시작 위치 */
+ top: 0;
+ color: #e50815;
+ font-size: 4rem;
+ opacity: 0;
+ animation: anim-etflix 0.5s ease forwards;
+ animation-delay: 1.6s; /* `N` 애니메이션 후 나타남 */
+}
+.netflix-logo {
+ position: absolute;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ opacity: 0;
+ animation: fadeInLeftToRight 1s ease forwards;
+ animation-delay: 2.4s;
+
+ animation: fadeInLeftToRight, fadeOut;
+ animation-duration: 1s, 1s;
+ animation-timing-function: linear, linear;
+ animation-fill-mode: forwards;
+ animation-delay: 2.4s, 4.0s;
+}
+@keyframes anim-top {
+ 0% {
+ top: 300px;
+ }
+ 100% {
+ top: 0px;
+ }
+}
+@keyframes anim-filler {
+ 0% {
+ height: 0px;
+ }
+ 100% {
+ height: 375px;
+ }
+}
+@keyframes anim-netflix {
+ 0% {
+ transform: scale(1) translateX(0);
+ }
+ 100% {
+ transform: scale(0.2) translateX(-450px);
+ }
+}
+@keyframes anim-netflix-opacity {
+ 0% {
+ opacity: 1;
+ }
+ 100% {
+ opacity: 0;
+ }
+}
+@keyframes fadeInLeftToRight {
+ 0% {
+ opacity: 0;
+ transform: translateX(-20px); /* 왼쪽에서 시작 */
+ }
+ 100% {
+ opacity: 1;
+ transform: translateX(0); /* 원래 위치로 이동 */
+ }
+}
+@keyframes fadeOut {
+ 0% {
+ opacity: 1;
+ transform: scale(1);
+ }
+ 100% {
+ opacity: 0;
+ transform: scale(0.8);
+ }
+ }
diff --git a/netflix-assignment/src/components/Footer.tsx b/netflix-assignment/src/components/Footer.tsx
new file mode 100644
index 0000000..2fad3e3
--- /dev/null
+++ b/netflix-assignment/src/components/Footer.tsx
@@ -0,0 +1,67 @@
+"use client";
+
+import { useEffect, useState } from 'react';
+import { usePathname, useRouter } from 'next/navigation';
+import Home from '@/public/svg/Home.svg';
+import Search from '@/public/svg/Search.svg';
+import ComingSoon from '@/public/svg/ComingSoon.svg';
+import Downloads from '@/public/svg/Downloads.svg';
+import More from '@/public/svg/More.svg';
+
+type NavItem = {
+ id: number;
+ icon: React.FC
+
+
+
+
+
+
+
+
+