+
+
+ {/* 검색결과 목록 */}
+
+ {/* mt-[104px] = fixed 헤더(SearchSection + Top search) 높이만큼 */}
+
+
+ );
+}
diff --git a/app/title/[id]/page.tsx b/app/title/[id]/page.tsx
new file mode 100644
index 0000000..de4bab9
--- /dev/null
+++ b/app/title/[id]/page.tsx
@@ -0,0 +1,65 @@
+'use client';
+
+import Image from 'next/image';
+import { useEffect, useState } from 'react';
+import { useSearchParams, useParams } from 'next/navigation';
+import { fetchOverview } from '@/lib/api/tdmb/getOverview';
+
+const IMG_BASE = 'https://image.tmdb.org/t/p';
+
+export default function TitlePreviewPage() {
+ const searchParams = useSearchParams();
+ const params = useParams<{ id: string }>();
+
+ const imgPath = searchParams.get('img') || '';
+ const id = params?.id ?? '';
+
+ const [overview, setOverview] = useState('');
+ const [loading, setLoading] = useState(true);
+
+ useEffect(() => {
+ if (!id) return;
+ (async () => {
+ try {
+ const data = await fetchOverview(id, { language: 'en-' });
+ setOverview(data.overview);
+ } finally {
+ setLoading(false);
+ }
+ })();
+ }, [id]);
+
+ const normalized = imgPath.startsWith('/') ? imgPath : `/${imgPath}`;
+ const src = `${IMG_BASE}/w780${normalized}`;
+
+ return (
+
+
+
+ {/* Play 버튼 */}
+
+
+ {/* Previews */}
+
+ Previews
+ {overview}
+
+
+
+
+
+ );
+}
diff --git a/components/LottieLogo.tsx b/components/LottieLogo.tsx
new file mode 100644
index 0000000..5cf393f
--- /dev/null
+++ b/components/LottieLogo.tsx
@@ -0,0 +1,21 @@
+'use client';
+
+import dynamic from 'next/dynamic';
+import { useRouter } from 'next/navigation';
+import LogoAnimation from '@/public/animations/logo.json';
+
+const Lottie = dynamic(() => import('lottie-react'), { ssr: false });
+
+export default function LottieLogo() {
+ const router = useRouter();
+
+ const handleComplete = () => {
+ router.push('/home');
+ };
+
+ return (
+
+
+ );
+}
diff --git a/components/Navbar.tsx b/components/Navbar.tsx
new file mode 100644
index 0000000..61453a3
--- /dev/null
+++ b/components/Navbar.tsx
@@ -0,0 +1,46 @@
+'use client';
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+
+import HomeIcon from '@/public/icons/iconsGen/Home';
+import Search from '@/public/icons/iconsGen/Search';
+import ComingSoon from '@/public/icons/iconsGen/ComingSoon';
+import Download from '@/public/icons/iconsGen/Downloads';
+import Menu from '@/public/icons/iconsGen/Menu';
+
+export default function Navbar() {
+ const pathname = usePathname();
+
+ const getLinkClass = (path: string) =>
+ `flex flex-col items-center text-[8px] ${pathname === path ? 'text-white' : 'text-[#8C8787]'}`;
+
+ return (
+
+
+
+ );
+}
diff --git a/components/NavbarWrapper.tsx b/components/NavbarWrapper.tsx
new file mode 100644
index 0000000..d5dd4f5
--- /dev/null
+++ b/components/NavbarWrapper.tsx
@@ -0,0 +1,16 @@
+"use client";
+
+import { usePathname } from "next/navigation";
+import Navbar from "./Navbar";
+
+export default function NavbarWrapper() {
+ const pathname = usePathname();
+
+ // 숨기고 싶은 경로 배열 (예: /)
+ const hiddenPaths = ["/"];
+
+ // 현재 경로가 숨김 대상이라면 표시하지 않음
+ if (hiddenPaths.includes(pathname)) return null;
+
+ return
+
+
+
+
+ TOP
+ 10
+
+
+ #{rank} in {regionName} Today
+
+
+
+
+
+ {/* My List */}
+
+
+ {/* Play */}
+
+
+ {/* Info */}
+
+
+
+
+ {/* 탭들 */}
+
+
+ Previews
+
+
+ );
+}
diff --git a/components/home/section/Banner.tsx b/components/home/section/Banner.tsx
new file mode 100644
index 0000000..1ec0ed3
--- /dev/null
+++ b/components/home/section/Banner.tsx
@@ -0,0 +1,145 @@
+"use client";
+
+import { useEffect, useMemo, useRef, useState } from "react";
+import Link from "next/link";
+import Image from "next/image";
+import { fetcher } from "@/lib/fetcher";
+import type { tmdbListResponse, tmdbTitle } from "@/types/tmdb";
+import add from "@/public/icons/add.svg";
+import play from "@/public/icons/play.svg";
+import info from "@/public/icons/info.svg";
+
+const imgBase =
+ process.env.NEXT_PUBLIC_TMDB_IMAGE_BASE || "https://image.tmdb.org/t/p";
+const rotateTime = 20_000; // 20초 간격
+const regionName = "Korea";
+
+// URL 만드는 함수
+function buildImageUrl(
+ path?: string | null,
+ size: "w780" | "w1280" | "original" = "w1280"
+) {
+ if (!path) return "";
+ try {
+ const cleanPath = path.startsWith("/") ? path.slice(1) : path;
+ return `${imgBase}/${size}/${cleanPath}`;
+ } catch {
+ return "";
+ }
+}
+
+export default function Banner() {
+ const [items, setItems] = useState
+ {items.map((item) => {
+ const pathOnly = item.poster_path.startsWith("/")
+ ? item.poster_path
+ : `/${item.poster_path}`;
+
+ //쿼리에 path전달
+ const thumbUrl = `${IMG_BASE}/w342${pathOnly}`;
+
+ return (
+
+
+
+ 
+
+
+ );
+ })}
+
+
+
+
+
+ TOP
+ 10
+
+ #{rank} in {regionName} Today
+
+
+
+
+ {/* My List */}
+
+
+ {/* Play */}
+
+
+ {/* Info */}
+
+
+
+ {movies
+ .filter((movie) => movie.poster_path)
+ .map((movie) => (
+
+
+
+ ))}
+
+
+
+
+ {data
+ .filter((movie) => movie.poster_path) // null 아닌 것만
+ .slice(0, 5) // 5개만 표시
+ .map((movie) => (
+
+
+
+ ))}
+
+ {movies
+ .filter((movie) => movie.poster_path) // null 아닌 것만
+ .slice(0, 5) // 5개만 표시
+ .map((movie) => (
+
+
+
+ ))}
+
+ {movies
+ .filter((movie) => movie.poster_path)
+ .map((movie) => (
+
+
+
+ ))}
+
+ {movies
+ .filter((movie) => movie.poster_path) // null 아닌 것만
+ .slice(0, 5) // 5개만 표시
+ .map((movie) => (
+
+
+
+ ))}
+
+ {data
+ .filter((movie) => movie.poster_path) // null 아닌 것만
+ .slice(0, 5) // 5개만 표시
+ .map((movie) => (
+
+
+
+ ))}
+
+ {movies
+ .filter((movie) => movie.poster_path) // null 아닌 것만
+ .slice(0, 5) // 5개만 표시
+ .map((movie) => (
+
+
+
+ ))}
+
+ {movies
+ .filter((movie) => movie.poster_path) // null 아닌 것만
+ .slice(0, 5) // 5개만 표시
+ .map((movie) => (
+
+
+
+ ))}
+
+ Previews
+
+
+ );
+}
diff --git a/components/home/section/SectionTitle.tsx b/components/home/section/SectionTitle.tsx
new file mode 100644
index 0000000..2c15a2d
--- /dev/null
+++ b/components/home/section/SectionTitle.tsx
@@ -0,0 +1,9 @@
+type Props = {
+ title: string;
+};
+
+export default function SectionTitle({ title }: Props) {
+ return (
+
+ {items.map((item) => {
+ const pathOnly = item.poster_path.startsWith('/') ? item.poster_path : `/${item.poster_path}`;
+
+ //쿼리에 path전달
+ const thumbUrl = `${IMG_BASE}/w342${pathOnly}`;
+
+ return (
+
+
+
+
+
+
+ );
+ })}
+ {title}
+ );
+}
diff --git a/components/home/section/Top10.tsx b/components/home/section/Top10.tsx
new file mode 100644
index 0000000..6d5baa9
--- /dev/null
+++ b/components/home/section/Top10.tsx
@@ -0,0 +1,42 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import Image from 'next/image';
+import SectionTitle from '@/components/home/section/SectionTitle';
+import { fetchTop10Movies } from '@/lib/api/tdmb/movie';
+import type { TMDBMovie } from '@/lib/api/types/tdmbs';
+import Thumbnail from '@/components/Thumbnail';
+
+export default function Top10() {
+ const [movies, setMovies] = useState
+ {movies
+ .filter((movie) => movie.poster_path || movie.backdrop_path)
+ .slice(0, 10)
+ .map((movie) => (
+
+
+
+ ))}
+
+ {movies
+ .filter((movie) => movie.poster_path) // null 아닌 것만
+ .slice(0, 5) // 5개만 표시
+ .map((movie) => (
+
+
+
+ ))}
+
+ {movies
+ .filter((movie) => movie.poster_path) // null 아닌 것만
+ .slice(0, 5) // 5개만 표시
+ .map((movie) => (
+
+
+
+ ))}
+
+ {movies
+ .filter((movie) => movie.poster_path)
+ .map((movie) => (
+
+
+
+ ))}
+ 검색 결과가 없습니다. 😢
;
+ return (
+
+
+ {m.title}
+
+ {hasMore ? '로딩 중입니다.' : '더 이상 조회된 영화가 없습니다.'}
+
+
+ onChange('')}
+ />
+ )}
+
+ );
+}
diff --git a/components/search/SearchSkeleton.tsx b/components/search/SearchSkeleton.tsx
new file mode 100644
index 0000000..0484ed3
--- /dev/null
+++ b/components/search/SearchSkeleton.tsx
@@ -0,0 +1,21 @@
+export default function MovieSkeleton({ count = 6 }: { count?: number }) {
+ return (
+
+
+ {query && (
+
+ {Array.from({ length: count }).map((_, idx) => (
+
+ );
+}
diff --git a/data/watchHistory.ts b/data/watchHistory.ts
new file mode 100644
index 0000000..8f4e92d
--- /dev/null
+++ b/data/watchHistory.ts
@@ -0,0 +1,35 @@
+export type WatchHistoryItem = {
+ id: number; // 더미 데이터 고유 ID
+ userName: string; // 사용자 이름
+ contentId: number; // TMDB id
+ title: string; // 영화/TV 제목
+ type: "movie" | "tv"; // 구분
+ watchedAt: string; // 시청 날짜 (ISO 문자열)
+};
+
+export const watchHistory: WatchHistoryItem[] = [
+ {
+ id: 1,
+ userName: "성아 조",
+ contentId: 552,
+ title: "Fight Club",
+ type: "movie",
+ watchedAt: "2025-10-31T14:23:00Z",
+ },
+ {
+ id: 2,
+ userName: "성아 조",
+ contentId: 598,
+ title: "Game of Thrones",
+ type: "movie",
+ watchedAt: "2025-10-30T20:45:00Z",
+ },
+ {
+ id: 3,
+ userName: "성아 조",
+ contentId: 680,
+ title: "The Shawshank Redemption",
+ type: "movie",
+ watchedAt: "2025-10-29T19:10:00Z",
+ },
+];
diff --git a/lib/api/tdmb/combined.ts b/lib/api/tdmb/combined.ts
new file mode 100644
index 0000000..9c86ad6
--- /dev/null
+++ b/lib/api/tdmb/combined.ts
@@ -0,0 +1,79 @@
+import { BASE_URL, API_KEY, REVALIDATE_TIME } from '@/lib/constants/tdmbs';
+import type { TMDBApiResponse, TMDBMovie, TMDBTvShow } from '@/lib/api/types/tdmbs';
+import axios from 'axios';
+
+//Netflix Originals 부분
+export async function fetchNetflixOriginals(
+ language = 'en-US',
+ page = 1,
+ netflixID = 213,
+ with_watch_providers = 8,
+ watch_region = 'US',
+) {
+ try {
+ const [movieRes, tvRes] = await Promise.all([
+ axios.get
+ {/* 왼쪽 썸네일 영역 */}
+
+
+ {/* 가운데 제목 자리 */}
+
+
+ {/* 오른쪽 아이콘 자리 */}
+
+
+ ))}
+