[feat]: 위시 클릭시 위시 색상 변경(#334)

- 위시 요청 성공시 productDescription에 캐싱된 데이터를 무효화 시켜 다시 데이터를 fetch함

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 DefaultProfileImage from 'assets/profile_noimg.png';
 
 import styles from './index.module.scss';
 
-const mockData = {
-  wishCnt: 999999,
-};
-
 type ButtonBundlesProps = {
   productDescription: ProductDescriptionResponse;
   hasOption: boolean;
@@ -35,8 +33,15 @@ const ButtonBundles = ({
   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 } =
@@ -141,6 +146,8 @@ const ButtonBundles = ({
     // console.log('선물상자 담기');
   };
 
+  useEffect(() => {}, [wish]);
+
   return (
     <section className={styles.wrapper_bundle}>
       <FundingModal
@@ -179,8 +186,8 @@ const ButtonBundles = ({
       </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"