[feat]: 위시 취소 로직 추가 및 위시 등록 시 상태 변경 (#380)

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

@@ -1,6 +1,7 @@
 import { useQuery } from '@tanstack/react-query';
 
 import clsx from 'clsx';
+import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { Button } from 'components/ui/Button';
@@ -13,6 +14,7 @@
 import { useKakaoPicker } from 'hooks/useKakaoPicker';
 import { useLogin } from 'hooks/useLogin';
 import { useModal } from 'hooks/useModal';
+import { useDeleteWish } from 'hooks/useWish';
 import { getMyFundingItem } from 'services/api/v1/funding';
 import { formatNumberWithPlus } from 'utils/format';
 import { isEmptyObject } from 'utils/validate';
@@ -44,13 +46,15 @@
     productThumbnails,
     options,
     wishCount,
-    wish: isWished,
+    wish: isWishedProp,
   } = productDescription;
   const navigate = useNavigate();
   const { checkLoginBeforeAction } = useLogin();
   const { isSelected, isSelfSelected, selectedFriends, getImgUrl } =
     useSelectedFriendsStore();
   const { openKakaoPicker } = useKakaoPicker();
+  const [isWished, setIsWished] = useState<boolean>(isWishedProp);
+  const { deleteWishData, deleteWish } = useDeleteWish(productId);
 
   const { data } = useQuery({
     queryKey: ['myFundingItem'],
@@ -104,7 +108,7 @@
   // 옵션 선택 여부 확인
   const checkOptionBeforeAction = (action: () => void) => {
     if (hasOption && !selectedOption) {
       alert('옵션을 선택해주세요');
       return;
     }
     action();
@@ -114,7 +118,7 @@
   const handleClickFunding = () => {
     checkLoginBeforeAction(() => {
       if (!isEmptyObject(data!)) {
         alert('이미 등록된 펀딩 아이템이 있습니다.');
         return;
       }
 
@@ -124,9 +128,16 @@
 
   // 위시 버튼 핸들러
   const handleClickWish = () => {
-    checkLoginBeforeAction(openWishModal);
+    checkLoginBeforeAction(() => {
+      if (isWished) deleteWish();
+      else openWishModal();
+    });
   };
 
+  useEffect(() => {
+    if (deleteWishData) setIsWished(false);
+  }, [deleteWishData]);
+
   // 나에게 선물하기 버튼 핸들러
   const handleClickGiftForMe = () => {
     checkLoginBeforeAction(() => {
@@ -149,7 +160,7 @@
       } else if (selectedFriends.length === 1) {
         navigate('/bill/gift', { state: { orderInfos, giftFor: 'friends' } });
       } else {
         alert('지금은 한 번에 한 명에게만 선물할 수 있어요.');
       }
     });
   };
@@ -184,6 +195,7 @@
         isOpen={isWishOpen}
         scrollPos={scrollWishPos}
         productId={productId}
+        onWishAdded={() => setIsWished(true)}
       />
       {/* TODO : 로그인 되었을 때만 보이게 */}
       <Button