[클론코딩] 무비앱 시리즈 #12

#12 Favorite list에 추가 삭제

 

저번 시간에는 [Add Favorite 0] 버튼까지 만들었다

이제 이 버튼을 클릭하면 Add Favorite 0 - Not Favorite 으로 바뀌는 과정을 구현할 것이다

 

 

Add Favorite 버튼을 누르면 event가 발생해야 하므로 코드를 수정한다

<Favorite.js>

  return (
    <div>
      <button onClick={onClickFavorite}>{Favorited ? " Not Favorite " : "Add to Favorite "} {FavoriteNumber}</button>
    </div>
  )

클릭을 하면 onClickFavorite이 실행된다는 뜻이다

 

그럼 onClickFavorite을 만들어보자

그 전에, variables를 onClickFavorite에서도 쓰기 위해서 variables의 위치를 useEffect()함수 바깥에서 선언하고(왠지 안되더라), 저번에는 쓰지 않았던 movieTitle, moviePost, movieRunTime을 넣어준다

이번에는 리스트에 그 값을 넣어야 되기 때문에 필요하다

  let variables = {
    userFrom: userFrom,
    movieId: movieId,
    movieTitle: movieTitle,
    moviePost: moviePost,
    movieRunTime: movieRunTime
  }

 

그럼 진짜로 onClickFavorite 코드를 작성한다

  const onClickFavorite = () => {

    if(Favorited){
      Axios.post('/api/favorite/removeFromFavorite', variables)
      .then(response => {
        if(response.data.success){
          setFavoriteNumber(FavoriteNumber - 1) // 한 명 삭제
          setFavorited(!Favorited) // true <-> false
        }
        else{
          alert('Favorite 리스트에서 지우는 걸 실패했습니다.')
        }
      })
    }
    else{
      Axios.post('/api/favorite/addToFavorite', variables)
      .then(response => {
        if(response.data.success){
          setFavoriteNumber(FavoriteNumber + 1) // 한 명 추가
          setFavorited(!Favorited) // true <-> false
        }
        else{
          alert('Favorite 리스트에 넣는 걸 실패했습니다.')
        }
      })
    }
  }

이미 Favorite인 상태라면? -> Not Favorite으로 변경, 리스트에서 영화 삭제

이미 Not Favorite인 상태라면? -> Favorite으로 변경, 리스트에 영화 추가

 

그럼 서버에 연결을 해줘야한다

server 폴더에 있는 favorite.js로 가서 코드를 추가한다

// favorite list
router.post('/removeFromFavorite', (req, res) => {
   // 정보들을 DB에 넣어줌
  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})
  })
})

router.post('/addToFavorite', (req, res) => {
  const favorite = new Favorite(req.body) // instance 생성
  favorite.save((err, doc) => {
    if(err) return res.status(400).send(err)
    return res.status(200).json({success: true, doc})
  })
})

 

 

이러면 버튼이 완성되긴 하는데 누를 때마다 색깔이 변하는.. 좀 이쁜 버튼을 만들고 싶으면

ant design에서 button을 가져와 쓸 것이다

 

Favorite.js에서 Button을 import한다

import { Button } from 'antd';

 

그리고 아까 return에서 있던 button을 Button으로 바꿔준다

  return (
    <div>
      <Button onClick={onClickFavorite}>{Favorited ? " Not Favorite " : "Add to Favorite "} {FavoriteNumber}</Button>
    </div>
  )

 

 

결과창

마우스를 갖다 대면 파란색으로 변하고

클릭하면 Not Favorite으로 바뀌면서 숫자도 변한다