+
{title}
+ {data.genres.length > 0 && (
+
+ {data.genres.map(g => g.name).join(" ยท ")}
+
+ )}
+
{data.overview || "์ค๊ฑฐ๋ฆฌ๊ฐ ์์ต๋๋ค."}
+
+ );
+};
+
+export default DetailOverview;
diff --git a/src/components/home/AnimationMoviesSection.tsx b/src/components/home/AnimationMoviesSection.tsx
new file mode 100644
index 0000000..734295f
--- /dev/null
+++ b/src/components/home/AnimationMoviesSection.tsx
@@ -0,0 +1,15 @@
+import MediaCardCarousel from "@/components/home/MediaCardCarousel";
+import { getAnimationMovies } from "@/lib/apis/home";
+
+const AnimationMoviesSection = async () => {
+ const data = await getAnimationMovies();
+
+ return (
+
+
+
+ onChange(e.target.value)}
+ placeholder="Search for a show, movie, genre, e.t.c."
+ className="text-label-2 w-full px-[14px] text-white outline-none placeholder:text-gray-600"
+ />
+
+
+
+
+
+ );
+};
+
+export default SearchInput;
diff --git a/src/components/search/SearchResultItem.tsx b/src/components/search/SearchResultItem.tsx
new file mode 100644
index 0000000..d4f2cc2
--- /dev/null
+++ b/src/components/search/SearchResultItem.tsx
@@ -0,0 +1,55 @@
+import Image from "next/image";
+import Link from "next/link";
+
+import PlayIcon from "@/assets/icons/icon_play_circle_fill.svg";
+import { TmdbMedia } from "@/types/home";
+import { TmdbSearchResult } from "@/types/search";
+
+interface SearchMediaItemProps {
+ item: TmdbMedia | TmdbSearchResult;
+}
+
+const getTitle = (item: TmdbMedia | TmdbSearchResult) => {
+ if (item.media_type === "movie") {
+ return item.title;
+ }
+ return item.name;
+};
+
+const getImagePath = (item: TmdbMedia | TmdbSearchResult) => {
+ if (item.media_type === "person") {
+ return item.profile_path;
+ }
+ return item.poster_path;
+};
+
+export default function SearchMediaItem({ item }: SearchMediaItemProps) {
+ const title = getTitle(item);
+ const imagePath = getImagePath(item);
+
+ if (!imagePath) {
+ return null;
+ }
+
+ return (
+