무비앱 - Favorite 페이지 (2)

먼저 Movie Title 부분을 hover하면 영화 이미지가 작게 뜨게 할 것이다.

 

이번엔 hover 가 아닌Popover라는 라이브러리를 사용 할 것 이다.

import 해주고 movie Title 부분을 감싸준다.

import { Popover } from 'antd';

      <Popover content={content} title={`${favorite.movieTitle}`}>
        <td>{favorite.movieTitle}</td>
      </Popover>

라이브러리에 맞게 content와 title을 넣어준다.

 

 

좋아요한 영화리스트가 들어가는 map함수를 따로 함수로 만들어준다.

  const renderCards = Favorites.map((favorite, index) => {

    const content = (
      <div>
        {favorite.moviePost ?

          <img src={`${IMAGE_BASE_URL}w500${favorite.moviePost}`} /> : "no image"
        }
      </div>
    )
    return <tr key={index}>
      <Popover content={content} title={`${favorite.movieTitle}`}>
        <td>{favorite.movieTitle}</td>
      </Popover>

      <td>{favorite.movieRunTime}</td>
      <td><button onClick={() => onClickDelete(favorite.movieId, favorite.userFrom)}>Remove</button></td>
    </tr>

  })

 

여기서 content 부분에는 해당 영화 이미지가 들어가야 되는데, 이미지가 있다면 그 이미지를 넣고 없다면 "no image"표시를 해두었다.

 

 

 

그 다음은 Remove 기능이다.

 

remove 버튼을 누르면 해당 movieId와userFrom이 일치하는 영화가 delete 되어야 하기 때문에

 

onClick 안에 단순히 함수만 넣지 않고 해당 movieId와 userFrom까지 넣어준다.

 

 

 

이제 onClickDelete 함수를 만들어주고 Axios, 백엔드에선 router를 만들어준다.

  const onClickDelete = (movieId, userFrom) => {
    const variables = {
      movieId,userFrom
    }

    Axios.post('/api/favorite/removeFromFavorite', variables)
    .then(response => {
      if(response.data.success){
        fetchFavoriteMovie()
      } else{
        alert('리스트에서 지우는데 실패했습니다.')
      }
    })
  }

router.post('/removeFromFavorite', (req, res) => {
    Favorite.findOneAndDelete({movieId: req.body.movieId, userFrom: req.body.userFrom})
    .exec((err, doc)=>{
        if(err) return res.status(400).send(err)
        res.status(200).json({success:true, doc})
    })
});

 

 

그 다음 uusEffect함수 안에 있던 favorite한 것들을 가져오는 Axios를 따로 함수로 만들어 준다.

  useEffect(() => {
    fetchFavoriteMovie()
  })

  const fetchFavoriteMovie = () => {
    Axios.post('/api/favorite/getFavoriteMovie', { userFrom: localStorage.getItem('userId') })
    .then(response => {
      if (response.data.success) {
        console.log(response.data)
        setFavorites(response.data.favorites)
      }
      else {
        alert('영화 정보를 가져오는데 실패했습니다.')
      }
    })
  }

 

그러면 맨 처음 화면이 로딩될 때 useEffect 안에 있던 fetchFavoriteMovie() 함수가 실행되고 remove 버튼을 누를 때 다시 한 번 실행되게 된다.

 

따라서 버튼을 누르면 해당 영화가 삭제 된다!

 

 

한 영화의 Favorite 버튼을 누르고

 

Favorite 페이지로 가면 영화가 올라가있다.

 

remove 버튼을 누르면 이렇게 사라진다.