NETFLIX CLONE(React)(2-4) - 상세 페이지 구현

저번에 한 box에서 info 버튼을 누르면 해당 영화에 대한 상세페이지를 보여주도록 하자

 

---

1️⃣info버튼 누르면 movie/movieid로 가게 하기

navigate를 사용할 것이다!

Box 컴포넌트에서 info버튼에 onClick이벤트를 넣어준다.

...
const navigate = useNavigate();
const onInfoClicked = (movieId: number) => {
    navigate(`${movieId}`);
  };
...
<div onClick = {() => onInfoClicked(id)} >
    <span>
    <RiInformationLine/>
    </span>
</div>

 

그리고 App에 가서 route를 추가시켜준다

function App() {
  return (
    <BrowserRouter /*basename="/netflix-clone/"*/>
      <Header/>
      <Routes>
        <Route path = "/tv" element = {<Tv/>}/>
        <Route path = "/search" element = {<Search/>}/>
        <Route path = "/" element = {<Home/>}/>
        <Route path = "/movie" element={<Movie/>}/>
        <Route path = "/movie/*" element={<Movie />}/>
      </Routes>
    </BrowserRouter>
  );
}

이렇게 해야 Movie컴포넌트 위에 detail정보를 넣을 수 있게 된다

 

2️⃣ movieId를 recoil을 통해서 관리하기

실제 onClick이벤트는 Box에서 발생하지만 

Detail(영화 상세페이지)는 Movie 컴포넌트 아래에 넣어줄 것이다.

이러려면 onClick당시에 넘겨주었던 movieId를 recoil 사용해서 넘겨주는 것이 편하다

recoil을 통한 movieId가 필요한 곳은 총 세 곳이다

: Movie, Box , Detail

 

위에 onClick이벤트에 movieId를 설정하는 함수를 추가하자

//Box
...
const [MId,setMId] = useRecoilState(movieIdState)
...
const onInfoClicked = (movieId: number) => {
    navigate(`${movieId}`);
    setMId(movieId);
  };

 

그 다음 Movie에서 Detail을 넣어줄 것이다

이 때는 movieId가 필요없지만 Movie에는 Banner가 있기 때문에 여기서 상세정보를 누를 때 movieId가 필요하다

//Movie
const [movieId,setMovieId] = useRecoilState(movieIdState);
  
const navigate = useNavigate();

const onInfoClicked = (movieId: number) => {
navigate(`${movieId}`);
setMovieId(movieId);
};

...
<Bannner bgphoto = {makeImagePath(nowPlayingData?.results.slice(-1)[0].backdrop_path || "")}>
    <Title>{nowPlayingData?.results.slice(-1)[0].title}</Title>
    <OverView>{nowPlayingData?.results.slice(-1)[0].overview}</OverView>
    <DetailBtn onClick = {() => onInfoClicked(nowPlayingData?.results.slice(-1)[0].id || 0)}> 
      <RiInformationLine/>
      <span>상세 정보</span> 
    </DetailBtn>
</Bannner>
...
<Routes>
  <Route path = {`${movieId}`} element = {<Detail/>}/>
</Routes>

Movie안에 Detail이 있도록 Route를 넣어준다

 

3️⃣Detial에서 movieId에 해당하는 정보 불러와서 꾸미기

Detail에서는 배경에 해당하는 Overlay와 영화 정보를 보여주는 BigMovie로 나뉜다

 

일단 movieId를 통해 api를 요청하고

//api
export interface IGetMovieDetial {
    adult: boolean,
    genres : IGenre[],
    id : number,
    original_title : string,
    overview: string,
    backdrop_path: string,
    runtime: number,
    release_date:string,
    tagline: string,
}
export function getMovie(movieId:number) {
    return axios.get(`${BASE_PATH}/movie/${movieId}?api_key=${API_KEY}`).then(res => res.data);
}

//Detail
...
const movieId = useRecoilValue(movieIdState
const {data, isLoading} = useQuery<IGetMovieDetial>(["detailMoive", movieId], () => getMovie(movieId))

 

정보가 보여지고 있는 상태에서 overlay를 누르면 다시movie로 돌아가도록 navigate를 이용해준다.

const navigate = useNavigate();
const onOverlayClick = () => navigate("/movie");
...
<Overlay
onClick={onOverlayClick}/>

 

가져온 정보들 가져와서 이것저것 꾸며주면 끝!

https://github.com/juhui88/netflix-clone/commit/03e612e6cd7af2fe8565544226457972fd887855

movie detail page complete · juhui88/netflix-clone@03e612e