찜 기능 (위시리시트)

• 호텔 카테고리 list 화면에서 좋아요된 호텔이 채워진하트로 표시 필요
  → BE에서 isLike 와 같은필드명으로 구분해줘야함
• 호텔 list 조회화면에서 like가 전역으로 관리되게 되면 호텔별 "좋아요" 상태 표시가(한개 누르면 전체 상태가 다 바뀌게 됨) 힘드므로 개별 상태로 관리가능하도록 수정해야하는 상황
• 위시리스트 페이지에서는 호텔 하트 채워진상태로 표시

메인 프로젝트때의 상황
→ BE에 isLike 구분이 안되어 있었으며,
→ wishlist에선 data정보들이 있었음
⇒ 따라서, 좋아요를 눌렀는지 안눌렀는지를 판단하는것보다
위시리스트에 있는 호텔이 전체리스트의 호텔 id값과 일치할 경우 좋아요가 되어있는 상태 & 위시리스트에 없으면 좋아요가 안되어있는 상태로 구분

---

1. WishList data 불러오기

• store/WishList.js

import axios from "axios";
import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
import { accessToken } from "../utils/localStorage";

export const getWishList = createAsyncThunk("GET_WISH", async () => {
  const wishList = await (
    await axios.get(`/member/wishlists`, {
      headers: {
        Authorization: accessToken,
      },
    })
  ).data;
  return wishList.data;
});

const initialState = [];

export const WishState = createSlice({
  name: "wishstate",
  initialState,
  reducers: {},
  extraReducers: {
    [getWishList.fulfilled]: (state, { payload }) => [...payload],
  },
});

2. 전체 호텔 리스트 조회 페이지에서 wishList data 불러오기

• pages/AllProducts.jsx

export default function AllProducts() {
	const wish = useSelector((state) => state.Wishlist);
	const { isLoading, error, productsList } = useAllProducts(getUrl, pathname);
	
	const likedHotelList = wish.map((el) => el.hotelId);

	useEffect(() => {
    dispatch(getWishList());
  }, [dispatch]);

return (
	{productsList &&
            productsList.map((el) => (
              <HotelCard
                isLogin={isLogin}
                key={el.hotelId}
                id={el.hotelId}
                title={el.hotelTitle}
                price={el.price}
                score={el.hotelReviewScore}
                img={el.hotelImage}
                reviewNum={el.reviewQuantity}
                wish={wish}
                isSelected={likedHotelList.includes(el.hotelId)} //wishList에 있는 hotelId값과 전체리스트페이지(productList)의 hotelid값이 같은게 있는지 찾기 => boolean
              />
            ))}
)

3. 개별 HotelCard component에서 해당 정보를 이용해서 하트 채우기/비우기

• components/HotelCard.jsx

export default function HotelCard({
  title,
  price,
  score,
  img,
  id,
  reviewNum,
  isSelected,
  isLogin,
}) {
	const handleNavigate = () => {
    	navigate(`/rooms/${id}`, { state: id });
 	};

  const dispatch = useDispatch();
  const [isLike, setIsLike] = useState(isSelected); //포함되어있으면 true(좋아요 된상태가 됨) 포함안되어있으면 false(좋아요 안된상태가 됨)

const handleLike = async (id, e) => {
    e.stopPropagation();
    // 로그인 안될 시, 먼저 잡고 로그인
    if (!isLogin) {
      dispatch(modalOpen());
      return;
    }

    if (isLike === false) {
      try {
        await axios.post(`/member/wishlists?hotelId=${id}`, undefined, {
          headers: {
            Authorization: localStorage.getItem("accessToken"),
          },
        });
      } catch (error) {
        console.error(error);
       }
    } else {
      try {
        await axios.delete(`/member/wishlists?hotelId=${id}`, {
          headers: {
            Authorization: localStorage.getItem("accessToken"),
          },
        });
      } catch (error) {
        console.error(error);
      }
    }
    setIsLike(!isLike) //false이건 true이건 똑같이 로직 뒤집어 주는거니까 if문 끝나면 한꺼번에 처리
  };

  return (
    <CardBox onClick={(e) => handleNavigate(e)}>
      <ImgBox img={img}>
        <Icon onClick={(e) => handleLike(id, e)}>
			{isLike ? <AiFillHeart className="heart" /> : <AiOutlineHeart />}
        </Icon>

4. wishList page에선 좋아요 된 상태만 남기기

• pages/WishLists.jsx

export default function WishLists() {
  const wish = useSelector((state) => state.Wishlist);
  const dispatch = useDispatch();

	useEffect(() => {
    dispatch(getWishList());
  }, [dispatch]);

	return (
		{wish &&
            wish.map((el) => (
              <HotelCard
                isLogin={isLogin}
                key={el.hotelId}
                id={el.hotelId}
                title={el.hotelTitle}
                price={el.price}
                score={el.hotelReviewScore}
                img={el.hotelImage}
                reviewNum={el.reviewQuantity}
                isSelected //true값만 넘겨줘서 위시리스트 페이지는 하트가 찬 것들만 있게됨
              />
            ))}