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

#9 Favorite 버튼 만들기 (1)

 

영화를 클릭하고 난 페이지에 Favorite을 누르면 그 영화가 저장되고, Remove를 누르면 Favorite 목록에서 삭제되게 만들 것이다

 

1. Favorite Model 만들기

server 폴더에 Favorite.js을 생성한다

그리고 아래와 같이 적는다

const mongoose = require('mongoose');
const Schema = mongoose.Schema;

const favoriteSchema = mongoose.Schema({
  userFrom: {
    type: Schema.Types.ObjectId,
    ref: 'User'
  },
  movieId: {
    type: String
  },
  movieTitle:{
    type: String
  },
  moviePost: {
    type: String
  },
  movieRunTime: {
    type: String
  }
}, { timestamps : true })

const Favorite = mongoose.model('Favorite', favoriteSchema);

module.exports = { Favorite }

 

 

2. Favorite 버튼 만들기

MovieDetail.js은 이미 각종 코드들이 많이 있기 때문에 Favorite 버튼에 대한 로직 처리는 또 다른 파일에서 할 것이다

MovieDetail 폴더 안에 있는 Sections 폴더에 Favorite.js을 생성해준다

그리고 rfce를 눌러 기본 함수 형태를 갖는다

client - src - components - views - MovieDetail - Sections

import React from 'react'

function Favorite() {
  return (
    <div>
      <button >Favorite</button>
    </div>
  )
}

export default Favorite

 

이렇게 하면 오른쪽 상단 위에 Favorite 버튼이 생긴다

 

 

3. 몇 명이 Favorite으로 담았는지 숫자 정보 얻기

Favorite.js에서 useEffect함수를 이용한다

  useEffect(() =>{
    // fetch, Axios

    let variables = {
      userFrom,
      movieId
    }

    Axios.post('/api/favorite/favoriteNumber', variables)
    .then(response => {
      if(response.data.success){

      }
      else{
        alert('숫자 정보를 가져오는데 실패했습니다.')
      }
    })



  }, [])

Axios를 사용했기 때문에 import도 해준다

import Axios from 'axios'

 

variables에 있는 userFrom과 movieId는 어떻게 가져와야 할까?

MovieDetail.js에서 가져온다

 

일단 MovieDetail.js에서 아까 작성했던 부분을 수정한다

        <div style={{display: 'flex', justifyContent: 'flex-end'}}>
          <Favorite movieInfo={Movie} movieId={movieId} userFrom={localStorage.getItem('userId')}  />
        </div>

userFrom은 전에 LoginPage.js에 가보면

userId

로그인이 될 때 localStorage에 userId로 저장했던 것이 있는데 그것을 사용한 것이다

 

그럼 Favorite.js로 가서 props로 받아온 것을 변수에 넣는다

  const movieId = props.movieId
  const userFrom = props.userFrom
  const movieTitle = props.movieInfo.title
  const moviePost = props.movieInfo.backdrop_path
  const movieRunTime = props.movieInfo.movieRunTime

 

지금까지의 Favorite.js를 정리하면 아래와 같다

import React, { useEffect } from 'react'
import Axios from 'axios'


function Favorite(props) {

  const movieId = props.movieId
  const userFrom = props.userFrom
  const movieTitle = props.movieInfo.title
  const moviePost = props.movieInfo.backdrop_path
  const movieRunTime = props.movieInfo.movieRunTime

  useEffect(() =>{
    // fetch, Axios

    let variables = {
      userFrom,
      movieId
    }

    Axios.post('/api/favorite/favoriteNumber', variables)
    .then(response => {
      if(response.data.success){

      }
      else{
        alert('숫자 정보를 가져오는데 실패했습니다.')
      }
    })
  }, [])

  return (
    <div>
      <button >Favorite</button>
    </div>
  )
}

export default Favorite

 

근데 이렇게 하다가 갑자기 강의가 끝남