찜하기 기능 구현

찜하기 기능 서버통신 로직구상하기

1. 처음에는 isWishAdd의 값을 false로 지정

const [isWishAdd, setIsWishAdd] = useState(false)

2. 처음 렌더링되면, 모달서버와 통신하고 호출되는 updateDetailData()에서, detailData에 모달의 정보가 담긴다

useEffect(function, [])

3. detailData가 빈 객체가 아닐 때, isWishAdd의 값에 detailData.wishlist 데이터 담아주기

if (Object.keys(etailData).length != 0) {
  setIsWishAdd(detailData.wishlist);
}

3-1. detailData가 변경될 때마다 setIsWishAdd(detailData.wishlist); 호출

useEffect(() => setIsWishAdd(detailData.wishlist), [detailData]);

3번의 과정에서 빈객체의 여부를 판단하는 것보다는 hooks의 속성을 활용하면 좋을 것같아서 3-1번의 방법을 이용했다

4. 아이콘을 누를 때마다 wishlist 서버에 patch요청해서 wishlist 데이터 변경

function fetchWishList() {
  fetch(WISH_URL, {
    method: "PATCH",
    headers: {
      Authorization: WISH_TOKEN,
      // Authorization: localStorage.getItem("flix_token"),
    },
    body: JSON.stringify({
      content_id: 30,
    }),
  })
    .then((res) => res.json())
    .then((res) => {
    // 서버에서 전달하는 wishlist 여부를 나타내는 값 : true, false로 나뉜다
      const wishListResult = res.Result.like;
      setIsWishAdd(wishListResult);
    });
}

<Right onClick={fetchWishList}>
  <i className={`${!isWishAdd ? "far" : "fas"} fa-heart`}></i>
</Right>

만약 이 로직이 성공한다면 WISH_URL 서버로 전달하는 body의 키값인
content_id: 30 30이 아니라 DETAIL_URL에서 받는 해당하는 Card의 content_id 값으로 전달할 것이다