antd Carousel(auto), a href

https://github.com/jaewonhimnae/react-movie-app-ko

jaewonhimnae/react-movie-app-ko

기본 코드는 이곳에 있는 코드를 활용했다.

아직 실력이 많이 부족한지라 이미 만들어진 project에 내가 간단한 기능을 한두개씩 더하는 식으로 연습을 해나갈 생각이다.

 

import React, { useEffect, useState } from "react";
// import { FaCode } from "react-icons/fa";
import { API_URL, API_KEY, IMAGE_BASE_URL } from "../../Config";
import MainImage from "./Sections/MainImage";
// import axios from "axios";
import GridCards from "../commons/GridCards";
import { Row, Carousel } from "antd";

function LandingPage() {
  const [Movies, setMovies] = useState([]);
  const [MainMovieImage, setMainMovieImage] = useState([]);
  const [CurrentPage, setCurrentPage] = useState(0);

  useEffect(() => {
    const endpoint = `${API_URL}movie/popular?api_key=${API_KEY}&language=en-US&page=1`;
    fetchMovies(endpoint);
  }, []);

  const fetchMovies = useCallback((endpoint) => {
    fetch(endpoint)
      .then((response) => response.json())
      .then((response) => {
        console.log(response);
        setMovies([...Movies, ...response.results]);
        const copy1 = response.results.slice(0, 10);
        setMainMovieImage(copy1);

        setCurrentPage(response.page);
      });
  });

  const loadMoreItems = () => {
    const endpoint = `${API_URL}movie/popular?api_key=${API_KEY}&language=en-US&page=${
      CurrentPage + 1
    }`;
    fetchMovies(endpoint);
  };

  return (
    <div style={{ width: "100%", margin: "0" }}>
      {/* Main Image */}
      <Carousel autoplay>
        {MainMovieImage &&
          MainMovieImage.map((movieImage, index) => (
            <MainImage
              image={`${IMAGE_BASE_URL}w1280${MainMovieImage[index].backdrop_path}`}
              title={MainMovieImage.original_title}
              text={MainMovieImage.overview}
            />
          ))}
      </Carousel>

      <div style={{ width: "85%", margin: "1rem auto" }}>
        <h2>Movies by latest</h2>
        <hr />

        {/* Movie Grid Cards */}

        <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 onClick={loadMoreItems}> Load More</button>
      </div>
    </div>
  );
}

export default LandingPage;

 

먼저 landing page이다. 내가 이곳에서 한 일은 딱 하나의 이미지로만 구성되던 main page를 10개로 그리고 그 사진들이 자동으로 넘어가도록 만들었다. results 전체 배열에서 사진 10개를 가져오기 위해

 

const copy1 = response.results.slice(0, 10);
        setMainMovieImage(copy1);

slice 함수를 이용했다.

 

main page가 자동으로 넘어가는 것은 antd의 carousel을 사용했는데 antd를 사용할 때마다 느끼는 거지만 정말 편리하다.

 

 <Carousel autoplay>
        {MainMovieImage &&
          MainMovieImage.map((movieImage, index) => (
            <MainImage
              image={`${IMAGE_BASE_URL}w1280${MainMovieImage[index].backdrop_path}`}
              title={MainMovieImage.original_title}
              text={MainMovieImage.overview}
            />
          ))}
      </Carousel>

이런 식으로 carousel tag를 감싸서 자동으로 넘어가도록 구성하였다. 자세한 내용과 예제 코드는

 

https://ant.design/components/carousel/

Carousel - Ant Design

이곳에 자세히 설명되어 있다.

 

두번째로는, toggle button을 눌렀을 때 나오는 이미지를 클릭하면 자동으로 나무위키에서 검색되는 a href tag를 만들었다.

 

 

 

 <a href={`https://en.wikipedia.org/wiki/${props.characterName}`} target="_blank">
            <img
              style={{ width: "100%", height: "320px" }}
              src={props.image}
              alt={props.characterName}
            />
</a>

 

이런 식으로 img tag 바깥에 a href tag를 감싸서 구성시켰다. 부모 component로 부터 charactername이 props로 넘어오기 때문에 그것을 이용하였다. 

 

또한, 위키피디아의 검색 url은 항상 https://en.wikipedia.org/wiki/+검색한한 내용  이다.

이를 이용하여 link를 결정하였다.