보고싶어요 페이지 구현 완료

이번 게시글로 1차 프로젝트에서 내가 담당한 페이지 구현 설명이 완료될 것 같다! 10개가 넘는 게시글을 모두 프로젝트에 대한 내용으로 채워질 줄 몰랐다. 생각보다 정리할 것도 많고 꼭꼭 십어서 내것으로 만든 후 작성하고 싶었기 때문에 오랜 시간이 걸렸다. 느려도 옳은 길로 가고 있다.

⛳ [보고싶어요] 페이지 코드

//MovieCart.js
import React, { useEffect, useState } from "react";
import WishList from "./components/WishList/WishList";
import "./Cart.scss";

const MovieCart = () => {
  const [wish, setWish] = useState([]);

  useEffect(() => {
    fetch(`http://10.58.2.194:8000/users/watchlist`, {
      method: "GET",
      headers: { Authorization: localStorage.getItem("token") },
    })
      .then(res => res.json())
      .then(data => setWish(data));
  }, []);

  if (wish.length === 0) return <>loading...</>;

  return (
    <>
      <div className="wantToWatch">보고싶어요</div>
      <div className="cartBox">
        <ul className="filmList">
          <WishList wish={wish.results} />
        </ul>
      </div>
    </>
  );
};

export default MovieCart;

서버에서 받은 데이터를 <WishList />에 넘겨준다.

import React from "react";
import { Link } from "react-router-dom";
import "./WishList.scss";
const WishList = ({ wish }) => {
  if (wish.length === 0) return;
  return (
    <div>
      {wish.map(wishEl => (
        <li className="wishFilm" id={wishEl.id} key={wishEl.id}>
          <Link to={`/detail/${wishEl.id}`} className="wishFilmDetail">
            <div className="wishPosterBox">
              <img
                src={wishEl.image_url}
                alt="영화"
                className="wishFilmPosters"
              />
            </div>
            <div className="wishFilmDescription">
              <p className="wishFilmName">{wishEl.name}</p>
            </div>
          </Link>
        </li>
      ))}
    </div>
  );
};

export default WishList;

MainPage에 작성했던 바와 동일하게 데이터를 map함수를 이용해서 배열 안의 객체들을 하나씩 순회하며 명령문을 작성한다.

[보고싶어요]에 담긴 영화들을 클릭하면 영화의 상세페이지로 넘어갈 수 있게 <Link />태그도 달아준다. 영화의 id 또한 넘겨받았기 때문에 Path Parameter를 사용하면 된다.

⛳ Long Story Short

1차 프로젝트가 끝났다!!!
영화를 좋아하는 팀원들이 모여 시작한 Watcha Classic
힘들기 보다는 알아가는 재미와 이게 된다고? 하면서 배운게 많았다.
무엇보다 팀원들이랑 무척 가까워졌다.
회고록은 다음 글에!
프로젝트의 결과물이 궁금하시다면 클릭!!