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..89de240c 100644
--- a/src/layouts/Product/BuyInfo/ButtonBundles/index.tsx
+++ b/src/layouts/Product/BuyInfo/ButtonBundles/index.tsx
@@ -1,3 +1,4 @@
+import clsx from 'clsx';
 import { useNavigate } from 'react-router-dom';
 
 import { Button } from 'components/ui/Button';
@@ -18,10 +19,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 +32,15 @@ const ButtonBundles = ({
   selectedOption,
   quantity,
 }: ButtonBundlesProps) => {
-  const { productId, name, price, productThumbnails, options } =
-    productDescription;
+  const {
+    productId,
+    name,
+    price,
+    productThumbnails,
+    options,
+    wishCount,
+    wish: isWished,
+  } = productDescription;
   const navigate = useNavigate();
   const { isLoggedIn, login, confirmLogin } = useLogin();
   const { isSelected, isSelfSelected, selectedFriends, getImgUrl } =
@@ -179,8 +183,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]: isWished })} />
+          {formatNumberWithPlus(wishCount, 100000)}
         </Button>
         <Button
           color="black"
diff --git a/src/types/product.ts b/src/types/product.ts
index c6280752..7b663381 100644
--- a/src/types/product.ts
+++ b/src/types/product.ts
@@ -24,6 +24,8 @@ type Product = {
   brandName: string;
   brandId: number;
   brandThumbnail: string;
+  wishCount: number;
+  wish: boolean;
 };
 
 export type ProductDescriptionResponse = Product & {