Feat/334

src/components/ui/Modal/WishModal/index.tsx

@@ -1,3 +1,5 @@
+import { useQueryClient } from '@tanstack/react-query';
+
 import { useState, useEffect } from 'react';
 
 import { Button } from 'components/ui/Button';
@@ -33,6 +35,7 @@ const WishModal = ({
   productId,
   onWishAdded = () => null,
 }: WishModalProps) => {
+  const queryClient = useQueryClient();
   const [radioStatus, setRadioStatus] = useState<WishRadioType>(
     WISH_RADIO_STATUS.OTHERS as WishRadioType,
   );
@@ -45,6 +48,8 @@ const WishModal = ({
   const handleAddWish = async () => {
     await addWish();
     close();
+
+    queryClient.invalidateQueries({ queryKey: ['productDescription'] });
   };
 
   useEffect(() => {

src/layouts/Product/BuyInfo/ButtonBundles/index.module.scss

@@ -41,6 +41,10 @@
       @include ico-pd-detail(-110px, -420px, 26px, 22px);
 
       margin-bottom: 5px;
+
+      &.on {
+        @include ico-pd-detail(-110px, -450px, 26px, 22px);
+      }
     }
   }
 

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

@@ -1,3 +1,5 @@
+import clsx from 'clsx';
+import { useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { Button } from 'components/ui/Button';
@@ -18,10 +20,6 @@
 
 import styles from './index.module.scss';
 
-const mockData = {
-  wishCnt: 999999,
-};
-
 type ButtonBundlesProps = {
   productDescription: ProductDescriptionResponse;
   hasOption: boolean;
@@ -35,8 +33,15 @@
   selectedOption,
   quantity,
 }: ButtonBundlesProps) => {
-  const { productId, name, price, productThumbnails, options } =
-    productDescription;
+  const {
+    productId,
+    name,
+    price,
+    productThumbnails,
+    options,
+    wishCount,
+    wish,
+  } = productDescription;
   const navigate = useNavigate();
   const { isLoggedIn, login, confirmLogin } = useLogin();
   const { isSelected, isSelfSelected, selectedFriends, getImgUrl } =
@@ -85,7 +90,7 @@
   // 옵션 선택 여부 확인
   const checkOptionBeforeAction = (action: () => void) => {
     if (hasOption && !selectedOption) {
       alert('옵션을 선택해주세요');
       return;
     }
     action();
@@ -125,7 +130,7 @@
       } else if (selectedFriends.length === 1) {
         navigate('/bill/gift', { state: { orderInfos, giftFor: 'friends' } });
       } else {
         alert('지금은 한 번에 한 명에게만 선물할 수 있어요.');
       }
     });
   };
@@ -141,6 +146,8 @@
     // console.log('선물상자 담기');
   };
 
+  useEffect(() => {}, [wish]);
+
   return (
     <section className={styles.wrapper_bundle}>
       <FundingModal
@@ -179,8 +186,8 @@
       </Button>
       <section className={styles.wrapper_gift}>
         <Button className={styles.btn_wish} onClick={handleClickWish}>
-          <span className={styles.ico_wish} />
-          {formatNumberWithPlus(mockData.wishCnt, 100000)}
+          <span className={clsx(styles.ico_wish, { [styles.on]: wish })} />
+          {formatNumberWithPlus(wishCount, 100000)}
         </Button>
         <Button
           color="black"

src/types/product.ts

@@ -24,6 +24,8 @@ type Product = {
   brandName: string;
   brandId: number;
   brandThumbnail: string;
+  wishCount: number;
+  wish: boolean;
 };
 
 export type ProductDescriptionResponse = Product & {