14-4 장바구니 목록

14-4 장바구니 목록

{
  path: "/cart",
  element: (
    <Layout>
    	<Cart />
    </Layout>
    ),
}

상세 페이지와 동일하게 레이아웃으로 감싸서 라우트 등록

function Cart() {
  const { carts } = useCart();
  
  const [checkedItems, setCheckedItems] = useState<number[]>([30]);
  
  const handleCheckItem = (id: number) => {
    if (checkedItem.includes(id)) { // 언체크
      setCheckedItems(checkedItems.filter((item) => item !== id));
    } else { // 체크
    setCheckedItem([...checkedItem, id])
    }
  }
  
  const handleItemDelete = (id: number) => {
    deleteCartItem(id);
  };
  
  
  return (
    <>
      <Title size="large">장바구니</Title>
      <CartStyle>
    	<div className="content"> // 장바구니에 담간 각 도서를 표시 - 도서ooo, 도서xxx
    	  {carts.map((item) => (
    		<CartItem
    		  key={item.id}
			  cart={item}
			  checkedItems={checkedItems}
			  onCheck={handleCheckItem}
  			  onDelete={handleItemDelete}
			/>
          ))}
    	
    	</div>
    	<div className="summary"> // 주문에 대한 정보를 요약 - 수량, 금액
    	
    	</div>
      </CartStyle>
    </>
  );
}

carts.api.ts
~
  export const deleteCart = async (cartId: number) => {
    const response = await httpclient.delete(`/carts/${cartId}`);
    return response.data;
  };