Feat/355

src/components/feature/ProductItem/CartButton/index.tsx

@@ -1,17 +1,45 @@
 import { MouseEvent } from 'react';
 
+import Spinner from 'components/ui/Spinner';
+
+import { useAxios } from 'hooks/useAxios';
+import { useLogin } from 'hooks/useLogin';
+
 import styles from './index.module.scss';
 
-const CartButton = () => {
-  // TODO : API 요청
+type CartButtonProps = {
+  productId: number;
+};
+
+const CartButton = ({ productId }: CartButtonProps) => {
+  const { isLoggedIn, login, confirmLogin } = useLogin();
+  const { isLoading, sendRequest } = useAxios<{ cartId: number }>({
+    url: '/cart',
+    method: 'post',
+    data: {
+      productId,
+      itemCount: 1,
+      optionId: null,
+      optionDetailId: null,
+    },
+  });
+
   const handleAddCart = (e: MouseEvent<HTMLButtonElement>) => {
     e.preventDefault();
+    if (isLoggedIn) sendRequest();
+    else {
+      const result = confirmLogin();
+      if (result) login();
+    }
   };
 
   return (
-    <button type="button" className={styles.btn_cart} onClick={handleAddCart}>
-      <span className={styles.ico_cart}>선물상자 담기</span>
-    </button>
+    <>
+      {isLoading && <Spinner />}
+      <button type="button" className={styles.btn_cart} onClick={handleAddCart}>
+        <span className={styles.ico_cart}>선물상자 담기</span>
+      </button>
+    </>
   );
 };
 

src/components/feature/ProductItem/ColumnProductItem/index.tsx

@@ -27,7 +27,7 @@ const ColumnProductItem = ({ product, size }: ColumnProductItemProps) => {
         </div>
       </Link>
       <div className={styles.wrapper_util_info}>
-        <CartButton />
+        <CartButton productId={product.productId} />
         <WishButton
           productId={product.productId}
           isWished={product.wished}

src/layouts/Home/Receiver/FriendWish/FriendWishItem/index.tsx

@@ -28,7 +28,7 @@ const FriendWishItem = ({ product }: { product: ProductItem }) => {
               <span className={styles.txt_unit}>원</span>
             </p>
             <div className={styles.wrapper_btn}>
-              <CartButton />
+              <CartButton productId={product.productId} />
               <WishButton
                 productId={product.productId}
                 isWished={product.wished}

src/layouts/Product/BuyInfo/ButtonBundles/index.tsx

@@ -6,6 +6,7 @@
 
 import { useSelectedFriendsStore } from 'store/useSelectedFriendsStore';
 
+import { useAxios } from 'hooks/useAxios';
 import { useKakaoPicker } from 'hooks/useKakaoPicker';
 import { useLogin } from 'hooks/useLogin';
 import { useModal } from 'hooks/useModal';
@@ -57,6 +58,20 @@
     scrollPos: scrollWishPos,
   } = useModal();
 
+  // 장바구니 등록 API
+  const { sendRequest: addItemToCart } = useAxios<{
+    cartId: number;
+  }>({
+    url: '/cart',
+    method: 'post',
+    data: {
+      productId,
+      itemCount: quantity,
+      optionId: selectedOption ? options[0].optionsId : null,
+      optionDetailId: selectedOption ? selectedOption.id : null,
+    },
+  });
+
   // 주문 정보
   const orderInfos: RequestOrderPreview = [
     {
@@ -85,7 +100,7 @@
   // 옵션 선택 여부 확인
   const checkOptionBeforeAction = (action: () => void) => {
     if (hasOption && !selectedOption) {
       alert('옵션을 선택해주세요');
       return;
     }
     action();
@@ -125,7 +140,7 @@
       } else if (selectedFriends.length === 1) {
         navigate('/bill/gift', { state: { orderInfos, giftFor: 'friends' } });
       } else {
         alert('지금은 한 번에 한 명에게만 선물할 수 있어요.');
       }
     });
   };
@@ -136,9 +151,11 @@
     openKakaoPicker();
   };
 
-  // 선물상자 담기 버튼 핸들러
-  const handleClickCart = () => {
-    // console.log('선물상자 담기');
+  // 장바구니 등록 버튼 핸들러
+  const handleAddCart = () => {
+    checkLoginBeforeAction(() => {
+      checkOptionBeforeAction(addItemToCart);
+    });
   };
 
   return (
@@ -168,12 +185,7 @@
         <span className={styles.ico_funding} />
         펀딩 아이템으로 등록하기
       </Button>
-      {/* TODO : 로그인 되었을 때만 보이게 */}
-      <Button
-        color="white"
-        onClick={handleClickCart}
-        className={styles.btn_cart}
-      >
+      <Button color="white" onClick={handleAddCart} className={styles.btn_cart}>
         <span className={styles.ico_cart} />
         선물상자 담기
       </Button>

src/layouts/Product/DetailBottom/ProductItem.tsx

@@ -20,7 +20,7 @@ const ProductItem = ({ product }: ProductItemProps) => {
       <strong className={styles.txt_prod_name}>{product.name}</strong>
       <Price price={product.price} />
       <div className={styles.wrapper_util_info}>
-        <CartButton />
+        <CartButton productId={product.productId} />
       </div>
     </article>
   );