TIL

카트에 상품이 들어있는지 여부에 따른 버튼 바꾸기

const [isCart, setIsCart] = useState(false)

useEffect(() => {
  const productInCart = cartList.find(item => item.id === product.id);
  
  if(productInCart){
    setInCart(true);
  }else{
    setInCart(false);
  }
}, [cartList, product.id]);

카트에 들어있는지 없는지에 대한 useState로 조건 확인 만들어준 다음

useEffect를 통해서 카트 리스트에 접근하여 일치하는 아이템의 id 가 있는지 확인

inCart의 참 거짓 여부로 보여주는 버튼 다르게 하기

---

재고 없는 상품 버튼 비활성화하기 (단순 css 조건 추가)

className={`product.in_stock ? "" : "cursor-not-allowed"`}
disabled={product.in_stock ? "" : "disabled"}

cursor-now-allowed 조건 추가 시 마우스 포인터에 금지표시(?) 가 추가된다