feat: 서랍장 서비스 삭제 API 연결 (#211)

* feat: `deleteProduct` api 함수 생성

* feat: 서비스 삭제 API 연결

- 내 서비스를 북마크했을 수도 있어서 내 서랍장 쿼리 2개 모두 무효화

* fix: 쿼리 무효화 코드를 onSuccess로 이동

src/drawer/apis/deleteProduct.ts

@@ -0,0 +1,6 @@
+import { soomsilClient } from '@/apis';
+
+export const deleteProduct = async (productId: number) => {
+  const { data } = await soomsilClient.delete(`/v2/drawer/${productId}`);
+  return data;
+};

src/drawer/components/CardLayout/CardLayout.tsx

@@ -24,6 +24,7 @@ export const CardLayout = ({ data, type }: CardLayoutProps) => {
             isBookmarked={product.isBookmarked}
             bigImgSrc={product.introductionImage[0]}
             smallImgSrc={product.mainImage}
+            productNo={product.productNo}
           />
         ) : (
           <BigDrawerCard

src/drawer/components/Dialog/ServiceRemoveModal.tsx

@@ -1,8 +1,10 @@
 import * as Dialog from '@radix-ui/react-dialog';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { BoxButton, IcXLine, IconContext } from '@yourssu/design-system-react';
 import { useTheme } from 'styled-components';
 
 import { FlexGrowItem } from '@/components/FlexContainer/FlexContainer';
+import { deleteProduct } from '@/drawer/apis/deleteProduct';
 
 import {
   StyledDialogContent,
@@ -13,11 +15,21 @@ import {
 
 interface ServiceRemoveModalProps {
   open: boolean;
+  productNo: number;
   onOpenChange: (open: boolean) => void;
 }
 
-export const ServiceRemoveModal = ({ open, onOpenChange }: ServiceRemoveModalProps) => {
+export const ServiceRemoveModal = ({ open, productNo, onOpenChange }: ServiceRemoveModalProps) => {
   const theme = useTheme();
+  const queryClient = useQueryClient();
+
+  const deleteProductMutation = useMutation({
+    mutationFn: deleteProduct,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['myRegistered', 'WEB'] });
+      queryClient.invalidateQueries({ queryKey: ['bookmarked', 'WEB'] });
+    },
+  });
 
   return (
     <Dialog.Root modal={true} open={open} onOpenChange={onOpenChange}>
@@ -30,7 +42,13 @@ export const ServiceRemoveModal = ({ open, onOpenChange }: ServiceRemoveModalPro
 
           <Dialog.Close asChild>
             <div>
-              <BoxButton size="medium" rounding={4} variant="filled" width="15.375rem">
+              <BoxButton
+                size="medium"
+                rounding={4}
+                variant="filled"
+                width="15.375rem"
+                onClick={() => deleteProductMutation.mutate(productNo)}
+              >
                 확인
               </BoxButton>
             </div>

src/drawer/components/DrawerCard/UserDrawerCard/UserDrawerCard.tsx

@@ -8,6 +8,10 @@ import { DrawerCardProps } from '../DrawerCard.type';
 
 import { StyledCardContainer } from './UserDrawerCard.style';
 
+interface UserDrawerCardProps extends DrawerCardProps {
+  productNo: number;
+}
+
 export const UserDrawerCard = ({
   link,
   bigImgSrc,
@@ -16,7 +20,8 @@ export const UserDrawerCard = ({
   body,
   bookmarkCount,
   isBookmarked,
-}: DrawerCardProps) => {
+  productNo,
+}: UserDrawerCardProps) => {
   const [isCardSettingClicked, setIsCardSettingClicked] = useState(false);
   const [openRemoveModal, setOpenRemoveModal] = useState(false);
 
@@ -52,7 +57,11 @@ export const UserDrawerCard = ({
           </CardSettingDropdownMenu.Trigger>
         </CardSettingDropdownMenu>
       </Card>
-      <ServiceRemoveModal open={openRemoveModal} onOpenChange={setOpenRemoveModal} />
+      <ServiceRemoveModal
+        open={openRemoveModal}
+        productNo={productNo}
+        onOpenChange={setOpenRemoveModal}
+      />
     </StyledCardContainer>
   );
 };

src/drawer/components/ServiceDetailContents/ServiceAction/ServiceAction.tsx

@@ -46,7 +46,7 @@ export const ServiceAction = ({ product }: { product: ProductDetailResult }) =>
 
   const bookmarkMutation = useMutation({
     mutationFn: product.isBookmarked ? deleteBookmarked : postBookmarked,
-    onSettled: () => {
+    onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['productDetail', product.productNo] });
     },
   });