From 2f4f6889a1454c69c6d3048167e3dd9c90a8bed9 Mon Sep 17 00:00:00 2001
From: devkyoung2 <devkyoung2@gmail.com>
Date: Sat, 8 Jun 2024 02:29:25 +0900
Subject: [PATCH] =?UTF-8?q?[feat]:=20=EC=9C=84=EC=8B=9C=20=ED=81=B4?=
 =?UTF-8?q?=EB=A6=AD=EC=8B=9C=20=EC=9C=84=EC=8B=9C=20=EC=83=89=EC=83=81=20?=
 =?UTF-8?q?=EB=B3=80=EA=B2=BD(#334)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 위시 요청 성공시 productDescription에 캐싱된 데이터를 무효화 시켜 다시 데이터를 fetch함
---
 src/components/ui/Modal/WishModal/index.tsx   |  5 ++++
 .../BuyInfo/ButtonBundles/index.module.scss   |  4 ++++
 .../Product/BuyInfo/ButtonBundles/index.tsx   | 23 ++++++++++++-------
 3 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/src/components/ui/Modal/WishModal/index.tsx b/src/components/ui/Modal/WishModal/index.tsx
index f9ceb383..cec9c494 100644
--- a/src/components/ui/Modal/WishModal/index.tsx
+++ b/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(() => {
diff --git a/src/layouts/Product/BuyInfo/ButtonBundles/index.module.scss b/src/layouts/Product/BuyInfo/ButtonBundles/index.module.scss
index 5b05a41c..8f799b5f 100644
--- a/src/layouts/Product/BuyInfo/ButtonBundles/index.module.scss
+++ b/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);
+      }
     }
   }
 
diff --git a/src/layouts/Product/BuyInfo/ButtonBundles/index.tsx b/src/layouts/Product/BuyInfo/ButtonBundles/index.tsx
index f89123fa..0dc2dba0 100644
--- a/src/layouts/Product/BuyInfo/ButtonBundles/index.tsx
+++ b/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"