[인프런 강의]리액트 무비앱 시리즈2 - LandingPage(2)

* 인프런 '따라하며 배우는 노드, 리액트 시리즈 - 영화 사이트 만들기' 내용 정리

* The Moive DB API 이용 (사이트 : https://www.themoviedb.org/)

* The Moive DB API 관련 설명 - 영어(사이트 : https://developers.themoviedb.org/3/getting-started/images)

* 회원가입/로그인/인증한 페이지에 이 부분 넣을 예정

(정리한 글 : https://ba-gotocode131.tistory.com/category/%EA%B0%9C%EC%9D%B8%EA%B3%B5%EB%B6%80/%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8)

 

 

* antd 적용하기 : client/src/index.js에 import 추가하기

 

import "antd/dist/antd.css"; // or 'antd/dist/antd.less'

 

 

[API 이용해서 LandingPage에 메인 화면 이외의 정보 넣기]

1. LandingPage에서 아래의 이미지 들어갈 부분 만들기

2. components/views/commons/GridCards.js 만들기

3. 이미지 확인하기

 

 

1. LandingPage에서 아래의 이미지 들어갈 부분 만들기

 

import React, { useEffect, useState } from "react";
// import axios from "axios";
// import { useNavigate } from "react-router-dom";
import { API_URL, API_KEY, IMAGE_BASE_URL } from "../../../Config";
import MainImage from "./Sections/MainImage";
import GridCards from "../commons/GridCards";
import { Row } from "antd";

function LandingPage() {
  // const navigate = useNavigate();

  //많은 정보들 => Array([])에 넣기
  const [Movies, setMovies] = useState([]);
  const [MainMovieImage, setMainMovieImage] = useState(null);
  useEffect(() => {
    const endpoint = `${API_URL}movie/popular?api_key=${API_KEY}&language=en-US&page=1`;

    fetch(endpoint)
      .then((response) => response.json())
      .then((response) => {
        setMovies([...Movies, ...response.results]); //Movies에 들어감
        setMainMovieImage(response.results[0]); //results의 첫 정보
        console.log(response.results);
      });
  }, []);
  //로그아웃
  // const onClickHandler = () => {
  //   axios.get("/api/users/logout").then((response) => {
  //     // console.log(response.data);
  //     if (response.data.success) {
  //       navigate("/login");
  //     } else {
  //       alert("로그아웃하는데 실패했습니다.");
  //     }
  //   });
  // };

  return (
    // 로그아웃
    // <div
    //   style={{
    //     display: "flex",
    //     justifyContent: "center",
    //     alignItems: "center",
    //     width: "100%",
    //     height: "100vh",
    //   }}
    // >
    //   <h2>시작페이지</h2>
    //   <button onClick={onClickHandler}>로그아웃</button>
    // </div>
    <div style={{ width: "100%", margin: "0" }}>
      {/* Main Image movie이름 : backdrop_path*/}

      {MainMovieImage && (
        <MainImage
          image={`${IMAGE_BASE_URL}w1280${MainMovieImage.backdrop_path}`}
          title={MainMovieImage.original_title}
          text={MainMovieImage.overview}
        />
      )}
      <div style={{ width: "85%", margin: "1rem auto" }}>
        <h2>Movie by latest</h2>
        <hr />
        {/* Movie Grid Cards */}
        {/* gutter: 상하좌우 여백 생성 */}
        <Row gutter={[16, 16]}>
          {Movies &&
            Movies.map((movie, index) => (
              <React.Fragment key={index}>
                <GridCards
                  landingPage
                  image={
                    movie.poster_path
                      ? `${IMAGE_BASE_URL}w500${movie.poster_path}`
                      : null
                  }
                  movieId={movie.id}
                  movieName={movie.original_title}
                />
              </React.Fragment>
            ))}
        </Row>
      </div>

      <div style={{ display: "flex", justifyContent: "center" }}>
        <button>Load More</button>
      </div>
    </div>
  );
}

export default LandingPage;

 

 

2. components/views/commons/GridCards.js 만들기

 

import React from "react";
import { Col } from "antd";

function GridCards(props) {
  return (
    // lg 시, 4열 배치(6*4), md 시, 3열 배치(8*3), xs 시 1열 배치(24*1)
    <Col lg={6} md={8} xs={24}>
      <div style={{ position: "relative" }}>
        <a href={`/movie/${props.movieId}`}>
          <img
            style={{ width: "100%", height: "320px" }}
            src={props.image}
            alt={props.movieName}
          />
        </a>
      </div>
    </Col>
  );
}

export default GridCards;

 

 

3. 이미지 확인하기

 

전체화면 - 이미지 4개 확인

중간 사이즈 - 이미지 3개 확인

아주 작은 사이즈 - 이미지 1개 확인