Search

client/src/components/Search/Search.js

@@ -10,11 +10,11 @@ const Search = ({ type, search, setSearch, handleClick }) => {
         <div className="d-flex">
             {type === "home" ? null :
                 <select className={`form-select ${styles.search}`} name="kind" aria-label="select search" onChange={handleSearch}>
-                    <option selected value="title">제목</option>
+                    <option value="title">제목</option>
                     <option value="director">감독명</option>
                 </select>
             }
-            <input className={`form-control ${type === "home" ? styles.searchWhite : `${styles.search}`}`} name="keyword" type="text" onChange={handleSearch} />
+            <input className={`form-control ${type === "home" ? styles.searchWhite : `${styles.search}`}`} name="keyword" type="text" autoComplete="off" onChange={handleSearch} />
             <i className={`bi bi-search align-self-center ${type === "home" ? "text-white" : "mx-2"} ${styles.icon}`} onClick={handleClick} style={{ fontSize: "1.3rem" }}></i>
         </div>
     )

client/src/components/SearchResult.js

-import { useLocation } from 'react-router-dom';
-import queryString from 'query-string';
-import MovieChart from "./MovieChart/index.js";
+import { useState, useEffect } from 'react'
+import { useLocation } from 'react-router-dom'
+import queryString from 'query-string'
+import MovieCard from "./MovieCard/index.js"
+import movieApi from '../apis/movie.api.js'
+import catchErrors from '../utils/catchErrors.js'
 
 const SearchResult = () => {
+    const [result, setResult] = useState([])
+    const [error, setError] = useState("")
     const { search } = useLocation()
     const { title } = queryString.parse(search)
 
-    console.log("search==",search,"title==",title)
+    useEffect(() => {
+        findforKeyword()
+    }, [search])
+
+    async function findforKeyword() {
+        try {
+            setError("")
+            const data = await movieApi.search(title)
+            setResult([...data])
+        } catch (error) {
+            catchErrors(error, setError)
+        }
+    }
+
+    console.log("search==", search, "title==", title)
     return (
         <>
-            <h3 className="text-white text-center my-5">'{title}' 에 관한 검색 결과입니다.</h3>
-            <MovieChart />
+            {result.length !== 0 ? (
+                <>
+                    <h3 className="text-white text-center my-5">'{title}' 에 관한 검색 결과입니다.</h3>
+                    <MovieCard list={result} />
+                </>
+            ) : <h3 className="text-white text-center my-5">'{title}' 에 관한 검색 결과가 존재하지 않습니다.</h3>}
         </>
     )
 }