[6주차] Reddigg 미션 제출합니다.

src/app/search/page.tsx

@@ -5,8 +5,7 @@ import tmdbApi, { requests } from "@/components/api";
 import NavBar from "@/components/navbar";
 import SearchBar from "./searchBar";
 import { renderMovieLists } from "../utils/movieFunctions";
-import { render } from "react-dom";
-
+import { includesChosung } from "../utils/searchChosung";
 type Props = {};
 interface Movie {
   id: number;
@@ -18,6 +17,16 @@ interface Movie {
 
 function Search({}: Props) {
   const [topRated, setTopRated] = useState<Movie[]>([]);
+  const [searchQuery, setSearchQuery] = useState("");
+
+  const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchQuery(event.target.value);
+  };
+
+  const filteredMovies = topRated.filter((movie) =>
+    includesChosung(movie.title, searchQuery),
+  );
+
   useEffect(() => {
     const fetchMovies = async () => {
       try {
@@ -34,14 +43,17 @@ function Search({}: Props) {
 
   return (
     <div className="flex flex-col items-center w-full h-screen">
-      <SearchBar />
+      <SearchBar
+        searchQuery={searchQuery}
+        onSearchChange={handleSearchChange}
+      />
 
       <h3 className="pl-[0.63rem] pt-[117px] text-start text-white text-preview font-bold mb-[1.3rem] w-[375px]">
         Top Searches
       </h3>
 
       <div className="flex flex-col items-center justify-center w-full pb-[60px] overflow-y-auto">
-        {renderMovieLists(topRated)}
+        {renderMovieLists(filteredMovies)}
       </div>
       <NavBar />
     </div>

src/app/search/searchBar.tsx

@@ -1,6 +1,11 @@
 import { SearchIcon2, XIcon } from "../../../public/svgs";
 
-const SearchBar = () => {
+interface SearchBarProps {
+  searchQuery: string;
+  onSearchChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+}
+
+const SearchBar = ({ searchQuery, onSearchChange }: SearchBarProps) => {
   return (
     <div className="fixed top-[50px] left-1/2 transform -translate-x-1/2 flex items-center bg-[#424242] w-[375px] h-[50px]">
       <div className="absolute inset-y-0 left-0 pl-5 flex items-center pointer-events-none">
@@ -9,10 +14,11 @@ const SearchBar = () => {
 
       <input
         type="text"
+        value={searchQuery}
+        onChange={onSearchChange}
         className="w-full bg-[#424242] text-[#C4C4C4] pl-12 pr-12 focus:outline-none"
         placeholder="Search for a show, movie, genre, e.t.c"
       />
-
       <div className="absolute inset-y-0 right-0 pr-5 flex items-center pointer-events-none">
         <XIcon className="h-5 w-5" />
       </div>

src/app/utils/searchChosung.tsx

@@ -0,0 +1,58 @@
+const CHO_HANGUL: string[] = [
+  "ㄱ",
+  "ㄲ",
+  "ㄴ",
+  "ㄷ",
+  "ㄸ",
+  "ㄹ",
+  "ㅁ",
+  "ㅂ",
+  "ㅃ",
+  "ㅅ",
+  "ㅆ",
+  "ㅇ",
+  "ㅈ",
+  "ㅉ",
+  "ㅊ",
+  "ㅋ",
+  "ㅌ",
+  "ㅍ",
+  "ㅎ",
+];
+
+const HANGUL_START_CHARCODE: number = "가".charCodeAt(0);
+
+const CHO_INTERVAL: number = Math.floor(
+  "까".charCodeAt(0) - "가".charCodeAt(0),
+);
+const JUNG_INTERVAL: number = Math.floor(
+  "개".charCodeAt(0) - "가".charCodeAt(0),
+);
+
+function combineHangul(cho: number, jung: number, jong: number): string {
+  return String.fromCharCode(
+    HANGUL_START_CHARCODE + cho * CHO_INTERVAL + jung * JUNG_INTERVAL + jong,
+  );
+}
+
+function createChosungRegex(search: string = ""): RegExp {
+  const regexPattern: string = CHO_HANGUL.reduce(
+    (acc: string, cho: string, index: number) =>
+      acc.replace(
+        new RegExp(cho, "g"),
+        `[${combineHangul(index, 0, 0)}-${combineHangul(index + 1, 0, -1)}]`,
+      ),
+    search,
+  );
+
+  return new RegExp(`(${regexPattern})`, "g");
+}
+
+export function includesChosung(target: string, query: string): boolean {
+  if (!query) return true;
+  if (/[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/.test(query)) {
+    return createChosungRegex(query).test(target);
+  } else {
+    return target.toLowerCase().includes(query.toLowerCase());
+  }
+}