[React] useNavigate로 state 넘기기

검색 결과 클릭하면 상세페이지로 넘어가는게 아무리 해도 안되더라....
근데 방금 어이없게 됨...

일단 이 블로그 참고했고
https://velog.io/@gin2808/React-useNavigate%EB%A1%9C-state-%EB%84%98%EA%B8%B0%EA%B8%B0

function Main() {
  const [query, setQuery] = useState("");
  const [movies, setMovies] = useState([]);
  const [filtered, setFiltered] = useState([]);
  const [isMouseOver, setIsMouseOver] = useState(false);

  const movie_url = "https://image.tmdb.org/t/p/w300";

  const options = {
    method: 'GET',
    url: 'https://api.themoviedb.org/3/search/movie',
    params: {include_adult: 'false', language: 'ko-KR', page: '1', query: query},
    headers: {
      accept: 'application/json',
      Authorization: 'Bearer eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiI1NmVhODk1ZWJhNDE2Yjc2YTk4MTZkOWQ1Nzc0ZDBjZSIsInN1YiI6IjY2MWU5YWI4NmQ5ZmU4MDE3ZDYwNmM5OSIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.TrsJisYxDoxOwAfg5jjHOj-3mvInGe-rqKtkM4xlQvA'
    }
  };

  useEffect(() => {
    const delayDebounceTimer = setTimeout(() => {
      axios
      .request(options)
      .then(function (response) {
        setMovies(response.data.results);
      })
      .catch(function (error) {
        console.error(error);
      });
    }, 1000);
    return () => clearTimeout(delayDebounceTimer);
  }, [query])

  const searchItems = (e) => {
    setQuery(e.target.value);
    const filteredData = movies.filter((movie) => {
      // return movie.title.includes(query);
      return movie.title.toLowerCase().includes(query.toLowerCase());
    })
    setFiltered(filteredData)
  }

  const navigate = useNavigate();

  // function handleClick() {
  //   navigate(`/movie/${id}`, {state: {id, poster_path, title, vote_average, overview, release_date}});
  // }

  return (
    <MainComponent>
      <div className="main">
        <div className="movie">
          {/* <BiSolidCameraMovie size="50"color="#FF748C"/> */}
          <h1>📽️Find your movies !</h1>
        </div>
        <div className="search">
          <input type="text"
            value={query} 
            onChange={searchItems}/>
          <button><FaSearch size="40" color="#FFC0CB"/></button>
        </div>

        <div className="search_component">
          {filtered.map((item) => {
            return (
              <div className="search_movie" 
                key={item.id}
                onMouseEnter={() => setIsMouseOver(true)}
                onMouseLeave={() => setIsMouseOver(false)}
                onClick={() => navigate(`/movie/${item.id}`, {state: {...item}})}
              >
                <img src={`${movie_url}${item.poster_path}`} alt="이미지" />
                <div className="search_info">
                  <p>{item.title}</p>
                  <span>⭐{item.vote_average}</span>
                </div>
                {isMouseOver && (
                  <div className="hover_movie">
                  <p>{item.title}</p>
                  <p>{item.overview}</p>
                </div>
                )}
              </div>
            )
          })}
        </div>
      </div>
    </MainComponent>
  );
}

function MainPage() {
  return(
      <div className="wrapper">
        <Banner />
        <Main />
      </div>
  );
}

export default MainPage;

Movie.jsx에서는 // 해놓은 것 처럼 이벤트 리스너 만들어서 썼는데 id 값을 모르니까 map 함수 안에서 써야 했다.
처음엔 ...filtered로 했는데 오류나서 그냥 item으로 했더니 그래도 오류.. 근데 ...item하니까 갑자기 됨.... 하하하