Merge pull request #371 from KakaoFunding/feat/357

[feat]: 장바구니 상품 삭제 api 연동(#357)

src/layouts/Cart/CartBoxItem/index.tsx

@@ -1,18 +1,35 @@
 import clsx from 'clsx';
 
+import { useAxios } from 'hooks/useAxios';
 import { formatNumberWithComma, formatNumberWithUnit } from 'utils/format';
 
 import { CartItem } from 'types/cart';
 
 import styles from './index.module.scss';
 
 type CartBoxItemProps = {
+  refetch: () => void;
   item: CartItem;
   handleSelect: (productId: number) => void;
   isSelected: boolean;
 };
 
-const CartBoxItem = ({ item, handleSelect, isSelected }: CartBoxItemProps) => {
+const CartBoxItem = ({
+  refetch,
+  item,
+  handleSelect,
+  isSelected,
+}: CartBoxItemProps) => {
+  const { sendRequest } = useAxios({
+    method: 'delete',
+    url: `cart/${item.productId}`,
+  });
+
+  const handleDelete = async () => {
+    await sendRequest();
+    refetch();
+  };
+
   return (
     <div className={styles.wrapper_item}>
       <div
@@ -24,8 +41,7 @@ const CartBoxItem = ({ item, handleSelect, isSelected }: CartBoxItemProps) => {
           id="checkbox"
           className={clsx(styles.ico_input, { [styles.on]: isSelected })}
         />
-
-        <span className={styles.ico_delete} />
+        <span className={styles.ico_delete} onClick={handleDelete} />
       </div>
       <div className={styles.wrapper_prod}>
         <img

src/pages/Cart/index.tsx

@@ -25,6 +25,7 @@ const Cart = () => {
     data: cartItems,
     isFetched,
     isLoading,
+    refetch,
   } = useQuery({
     queryKey: ['cart'],
     queryFn: () => getCartItems(),
@@ -80,6 +81,7 @@ const Cart = () => {
                     {cartItems!.map((item) => (
                       <li key={item.cartId}>
                         <CartBoxItem
+                          refetch={refetch}
                           item={item}
                           handleSelect={handleSelect}
                           isSelected={selectedItems.some(