Feat/385

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

@@ -1,3 +1,5 @@
+import { useQueryClient } from '@tanstack/react-query';
+
 import { MouseEvent } from 'react';
 
 import Spinner from 'components/ui/Spinner';
@@ -23,10 +25,16 @@ const CartButton = ({ productId }: CartButtonProps) => {
       optionDetailId: null,
     },
   });
+  const queryClient = useQueryClient();
 
   const handleAddCart = (e: MouseEvent<HTMLButtonElement>) => {
     e.preventDefault();
-    checkLoginBeforeAction(sendRequest);
+
+    checkLoginBeforeAction(async () => {
+      await sendRequest();
+      queryClient.invalidateQueries({ queryKey: ['cart'] });
+      queryClient.invalidateQueries({ queryKey: ['cartCount'] });
+    });
   };
 
   return (

src/layouts/App/Header/BundleUtil/index.module.scss

@@ -30,6 +30,21 @@
     @include ico-nav(-30px, -80px, 24px, 24px);
 
     margin: 8px;
+    position: relative;
+  }
+
+  .num_cart {
+    @include size(16px, 14px, 0, 1px 5px 0);
+    @include font(10px, 500, #fff);
+
+    position: absolute;
+    inset: 4px 0 0 22px;
+    border-radius: 100px;
+    letter-spacing: -0.05em;
+    line-height: 13px;
+    text-align: center;
+    background-color: #fc363c;
+    box-sizing: border-box;
   }
 
   .wrapper_login {

src/layouts/App/Header/BundleUtil/index.tsx

@@ -1,10 +1,24 @@
+import { useQuery } from '@tanstack/react-query';
+
 import { Link } from 'react-router-dom';
 
+import Spinner from 'components/ui/Spinner';
+
+import { useUserExists } from 'hooks/useUserExists';
+import { getCartCount } from 'services/api/v1/cart';
+
 import SocialKakaoLogin from '../SocialKakaoLogin';
 
 import styles from './index.module.scss';
 
 const BundleUtil = () => {
+  const isLoggedIn = useUserExists();
+  const { data: cartCount, isLoading } = useQuery({
+    queryKey: ['cartCount'],
+    queryFn: () => getCartCount(),
+    enabled: isLoggedIn,
+  });
+
   return (
     <section className={styles.wrapper_bundle_util}>
       <Link className={styles.link_search} to="/search">
@@ -16,6 +30,10 @@ const BundleUtil = () => {
         <div className={styles.wrapper_ico} aria-hidden="true">
           <span className={styles.ico_cart}>장바구니</span>
         </div>
+        {isLoggedIn && !isLoading && cartCount! > 0 && (
+          <span className={styles.num_cart}>{cartCount}</span>
+        )}
+        {isLoading && <Spinner />}
       </Link>
       <div className={styles.wrapper_login}>
         <SocialKakaoLogin />

src/layouts/Cart/CartBoxItem/index.module.scss

@@ -34,10 +34,14 @@
     &.on {
       @include ico-gift4(-170px, -790px, 24px, 24px);
     }
+
+    cursor: pointer;
   }
 
   .ico_delete {
     @include ico-gift4(-205px, -745px, 14px, 14px);
+
+    cursor: pointer;
   }
 }
 

src/layouts/Cart/CartBoxItem/index.tsx

@@ -1,3 +1,5 @@
+import { useQueryClient } from '@tanstack/react-query';
+
 import clsx from 'clsx';
 
 import { useAxios } from 'hooks/useAxios';
@@ -8,26 +10,24 @@ 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 = ({
-  refetch,
-  item,
-  handleSelect,
-  isSelected,
-}: CartBoxItemProps) => {
+const CartBoxItem = ({ item, handleSelect, isSelected }: CartBoxItemProps) => {
+  const queryClient = useQueryClient();
   const { sendRequest } = useAxios({
     method: 'delete',
     url: `cart/${item.productId}`,
   });
 
-  const handleDelete = async () => {
+  const handleDelete = async (e: React.MouseEvent<HTMLDivElement>) => {
+    e.stopPropagation();
     await sendRequest();
-    refetch();
+
+    queryClient.invalidateQueries({ queryKey: ['cart'] });
+    queryClient.invalidateQueries({ queryKey: ['cartCount'] });
   };
 
   return (

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

@@ -1,4 +1,4 @@
-import { useQuery } from '@tanstack/react-query';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
 
 import clsx from 'clsx';
 import { useEffect, useState } from 'react';
@@ -50,6 +50,7 @@
     wish: isWishedProp,
   } = productDescription;
   const navigate = useNavigate();
+  const queryClient = useQueryClient();
   const { checkLoginBeforeAction } = useLogin();
   const { isSelected, isSelfSelected, selectedFriends, getImgUrl } =
     useSelectedFriendsStore();
@@ -111,7 +112,7 @@
   // 옵션 선택 여부 확인
   const checkOptionBeforeAction = (action: () => void) => {
     if (hasOption && !selectedOption) {
       alert('옵션을 선택해주세요');
       return;
     }
     action();
@@ -121,7 +122,7 @@
   const handleClickFunding = () => {
     checkLoginBeforeAction(() => {
       if (!isEmptyObject(data!)) {
         alert('이미 등록된 펀딩 아이템이 있습니다.');
         return;
       }
 
@@ -173,7 +174,7 @@
       } else if (selectedFriends.length === 1) {
         navigate('/bill/gift', { state: { orderInfos, giftFor: 'friends' } });
       } else {
         alert('지금은 한 번에 한 명에게만 선물할 수 있어요.');
       }
     });
   };
@@ -187,7 +188,12 @@
   // 장바구니 등록 버튼 핸들러
   const handleAddCart = () => {
     checkLoginBeforeAction(() => {
-      checkOptionBeforeAction(addItemToCart);
+      checkOptionBeforeAction(async () => {
+        await addItemToCart();
+
+        queryClient.invalidateQueries({ queryKey: ['cart'] });
+        queryClient.invalidateQueries({ queryKey: ['cartCount'] });
+      });
     });
   };
 

src/pages/Cart/index.tsx

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

src/services/api/v1/cart.ts

@@ -1,4 +1,4 @@
-import { CartResponse } from 'types/cart';
+import { CartResponse, CartCountResponse } from 'types/cart';
 
 import { apiV1 } from '.';
 
@@ -7,3 +7,9 @@ export const getCartItems = async () => {
 
   return cartItems.data as CartResponse;
 };
+
+export const getCartCount = async () => {
+  const cartCount = await apiV1.get(`/cart/itemCount`);
+
+  return cartCount.data.count as CartCountResponse;
+};

src/types/cart.ts

@@ -14,3 +14,5 @@ export type CartItem = {
 };
 
 export type CartResponse = CartItem[];
+
+export type CartCountResponse = number;