8. Favorite 버튼 만들기 - 영화사이트 만들기

1. Favorite Model만들기(server-routes-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); //1st모델의이름,2nd데이터
module.exports = Favorite; //다른파일에서사용가능

* 데이터를 몽고DB 저장해야하기 때문에 이렇게 Collection을 만들어준다. 

2.Favorite Button UI 만들기(MovieDetailPage-Section-Favorite.js)

3.Favorite.js를 MovieDetailPage.js에 import한다.

import Favorite from './Sections/Favorite';

  {/* Body*/}
      <div style={{ width: '85%', margin: '1rem auto' }}>
        <div
          style={{display: 'flex', justifyContent: 'flex-end' /*버튼을 오른쪽으로밀겠다는의미*/,}}>
          <Favorite
            movieInfo={Movie} //무비정보
            movieId={movieId} //무비Id
            userFrom={localStorage.getItem('userId')} //로그인한 사람의정보
          />
        </div>
        {/* Movie Info*/}
        ...이하생략

4-5 Favorite를 얼마나 많이 받았고 내가 Favorite버튼을 이미 눌렀는지에대한 정보 가져오기(Axios통신)(Favorite.js)

  function Favorite(props) {
    const [FavoriteNumber, setFavoriteNumber] = useState(0);
    const [Favorited, setFavorited] = useState(false);

    const movieId = props.movieId;
    const userFrom = props.userFrom;
    const movieTitle = props.movieInfo.title;
    const moviePost = props.movieInfo.backdrop_path;
    const movieRunTime = props.movieInfo.runtime;
	
    useEffect(() => {
    
    let variables = {
      userFrom: userFrom,
      movieId: movieId,
    };
    Axios.post('/api/favorite/favoriteNumber', variables)
      //좋아요 숫자 가져오는 API
      .then((response) => {
        if (response.data.success) {
          setFavoriteNumber(response.data.favoriteNumber);
        } else {
          alert('숫자 정보를 가져오는데 실패하였습니다.');
        }
      });

    Axios.post('/api/favorite/favorited', variables)
      //내가 좋아요를 눌렀는지에대한 정보가져오는 API
      .then((response) => {
        if (response.data.success) {
          setFavorited(response.data.favorited);
        } else {
          alert('좋아요 정보를 가져오는데 실패하였습니다.');
        }
      });
  }, []);
  ...이하생략

*처음 페이지를 로딩할 때 한번만 실행되어야하기 때문에 useEffect를 사용하였고 2번째 인자에 빈 배열 [] 을 주었다.

6. 서버에서 Axios통신을 받고 데이터를 주기위한 routes만들기(server-routes-favorite.js)

const express = require('express');
const router = express.Router();
const Favorite = require('../models/Favorite');
//=================================
//             Favorite
//=================================

router.post('/favoriteNumber', (req, res) => {
  //mongoDB에서 favorite 숫자를 가져오기
  Favorite.find({ movieId: req.body.movieId }).exec((err, info) => {
    if (err) return res.status(400).send(err);
    console.log('info', info);
    //그다음 프론트에 다시 숫자 정보를 보내기
    res.status(200).json({ success: true, favoriteNumber: info.length });
  });
});

router.post('/favorited', (req, res) => {
  //내가 이 영화를 favorite 리스트에 넣었는지 정보를 DB에서 가져오기
  Favorite.find({
    movieId: req.body.movieId,
    userFrom: req.body.userFrom,
  }).exec((err, info) => {
    if (err) return res.status(400).send(err);
    let result = false;
    if (info.length !== 0) {
      result = true;
    }
    res.status(200).json({ success: true, favorited: result });
  });
});

module.exports = router;

* server-routes-favorite.js 라우트 만들고 꼭 index.js에서 라우트 등록하기!

app.use('/api/favorite', require('./routes/favorite'));

 

7.jsx에 버튼 적용시키기(Favorite.js)

return (
    <div>
      <button>
        {Favorited ? 'Not Favorite' : 'Add to Favorite'} {FavoriteNumber}
      </button>
    </div>
  );

*Favorite.js의 전체코드 

import React, { useEffect, useState } from 'react';
import Axios from 'axios';
function Favorite(props) {
  const [FavoriteNumber, setFavoriteNumber] = useState(0);
  const [Favorited, setFavorited] = useState(false);

  useEffect(() => {
    const movieId = props.movieId;
    const userFrom = props.userFrom;
    const movieTitle = props.movieInfo.title;
    const moviePost = props.movieInfo.backdrop_path;
    const movieRunTime = props.movieInfo.runtime;

    let variables = {
      userFrom: userFrom,
      movieId: movieId,
    };
    Axios.post('/api/favorite/favoriteNumber', variables)
      //좋아요 숫자 가져오는 API
      .then((response) => {
        if (response.data.success) {
          setFavoriteNumber(response.data.favoriteNumber);
        } else {
          alert('숫자 정보를 가져오는데 실패하였습니다.');
        }
      });

    Axios.post('/api/favorite/favorited', variables)
      //내가 좋아요를 눌렀는지에대한 정보가져오는 API
      .then((response) => {
        if (response.data.success) {
          setFavorited(response.data.favorited);
        } else {
          alert('좋아요 정보를 가져오는데 실패하였습니다.');
        }
      });
  }, []);
  return (
    <div>
      <button>
        {Favorited ? 'Not Favorite' : 'Add to Favorite'} {FavoriteNumber}
      </button>
    </div>
  );
}

export default Favorite;

실행결과

 

동영상강의