From 8d6373b5bc086c2694ab5595ebbdeb45f2596bad Mon Sep 17 00:00:00 2001
From: devkyoung2 <devkyoung2@gmail.com>
Date: Tue, 18 Jun 2024 15:22:07 +0900
Subject: [PATCH] =?UTF-8?q?[feat]:=20=EC=9E=A5=EB=B0=94=EA=B5=AC=EB=8B=88?=
 =?UTF-8?q?=20=EC=83=81=ED=92=88=20=EC=82=AD=EC=A0=9C=20api=20=EC=97=B0?=
 =?UTF-8?q?=EB=8F=99(#357)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layouts/Cart/CartBoxItem/index.tsx | 22 +++++++++++++++++++---
 src/pages/Cart/index.tsx               |  2 ++
 2 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/src/layouts/Cart/CartBoxItem/index.tsx b/src/layouts/Cart/CartBoxItem/index.tsx
index 90112e59..cfe006bd 100644
--- a/src/layouts/Cart/CartBoxItem/index.tsx
+++ b/src/layouts/Cart/CartBoxItem/index.tsx
@@ -1,5 +1,6 @@
 import clsx from 'clsx';
 
+import { useAxios } from 'hooks/useAxios';
 import { formatNumberWithComma, formatNumberWithUnit } from 'utils/format';
 
 import { CartItem } from 'types/cart';
@@ -7,12 +8,28 @@ 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
diff --git a/src/pages/Cart/index.tsx b/src/pages/Cart/index.tsx
index d93df6bf..4a1da20d 100644
--- a/src/pages/Cart/index.tsx
+++ b/src/pages/Cart/index.tsx
@@ -25,6 +25,7 @@ const Cart = () => {
     data: cartItems,
     isFetched,
     isLoading,
+    refetch,
   } = useQuery({
     queryKey: ['cart'],
     queryFn: () => getCartItems(),
@@ -81,6 +82,7 @@ const Cart = () => {
                       {cartItems!.map((item) => (
                         <li key={item.cartId}>
                           <CartBoxItem
+                            refetch={refetch}
                             item={item}
                             handleSelect={handleSelect}
                             isSelected={selectedItems.some(