보고싶어요 페이지?

실제 Watcha Pedia 페이지에서 로그인을 하면 상단의 프로필을 클릭하여 위의 페이지로 이동할 수 있다.

영화 콘텐츠란에 [보고싶어요] 버튼이 있다.
해당 버튼을 클릭하면 이동할 수 있는 페이지를 [보고싶어요] 페이지라고 명칭을 붙였다.

영화 상세 페이지에 [보고싶어요] 버튼이 있다.
그 버튼을 누르면 장바구니에 상품이 담기 듯 [보고싶어요] 페이지에 영화가 담긴다.

---

⛳ 레이아웃은 MainBox 컴포넌트를 재사용하자!

[보고싶어요] 페이지 또한 영화 테마이기 때문에 대부분 Main Page와 겹친다.

따라서 컴포넌트 존재의 이유인 재사용을 통해 금방 구현했다.
SCSS로 포스터의 크기를 줄이는 것, 슬라이드가 아닌 무한 스크롤이기 때문에 버튼과 슬라이드 기능 삭제가 전부였다.

⛳ 보고싶어요 버튼이 클릭된 영화 정보 받아오기

순서
1. [상세페이지]에서 보고싶어요 버튼 클릭
2. 백엔드에 정보 전달
3. 백엔드에 저장된 데이터 요청
4. 받은 데이터 UI에 렌더링

📌
Watcha Classic에서 프로필 페이지를 클릭하려면 먼저 로그인을 해야 한다.
순서
회원가입 ▶️ 로그인 ▶️ 상세 페이지 ▶️ 보고싶어요 클릭 ▶️ 프로필 클릭 ▶️ 보고싶어요 클릭 ▶️ 보고싶은 영화 조회

📌
전제 조건은 모두 로그인이 되어 있는 상태에서 [보고싶어요] 기능을 사용할 수 있다는 것

그렇다면...? LocalStorage에 토큰을 저장해야 한다.
그래야 로그인을 했다는 증명서를 가지고 사용자가 사이트를 자유롭게 돌아다닐 수 있기 때문이다.

//MovieCart.js
  
const [wish, setWish] = useState([]);

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

fetch함수의 header에 이미 로그인때 받아 두었던 토큰을 서버에서 가져온다. (method : "GET"은 생략가능)

localStorage.getItem() 메소드는 token이라는 key를 가진 데이터의 value에 접근한다.

위의 주소를 통해 서버와 통신하면 개발자 도구 Application 패널 localStorage안에
"token" : dlkfjasp23425lknslkcnskf(막 적음)
이런식으로 토큰이 저장되어 있다.

해당 토큰은 어떻게 보면 사용자의 고유 id가 될 수 있다.
따라서 a라는 사용자가 "위대한 개츠비"를 [보고싶어요] 했다면,
a라는 사용자의 토큰이 상세페이지, 프로필 페이지, 보고싶어요 페이지에 전달되면서 a라는 사용자의 정보 및 활동을 받을 수 있다.

이렇게 받아온 데이터를 wish라는 변수에 담는다.

---

⛳ Long Story Short

백엔드에서 [보고싶어요]로 영화를 추가하고 삭제하는 기능도 구현했다.
이미 백엔드에 모든 기능을 구현한 후에 페이지를 만들기 시작해서 바로바로 서버와의 통신이 가능했다.

이번 페이지가 프런트와 백과의 연결이 가장 많았다.
우선 상세 페이지에서 버튼을 누를 때부터 [보고싶어요]페이지는 관련성이 발생한다.

구현하기 전에는 와...너무 복잡한데...? 프로젝트 마감 하루 남았는데 어떻게 하지...? 했지만 정말 하루만에 다 만들고 통신도 성공했다...와우!

아직 무한 스크롤링은 구현하지 못했지만 점점 욕심이 난다. 난이도가 있는 작업인데 꼭 하고싶단 말이지...