feat: 서비스 삭제 API 연결

- 내 서비스를 북마크했을 수도 있어서 내 서랍장 쿼리 2개 모두 무효화
yourssu · Jun 4, 2024 · 3abb2f5 · 3abb2f5
1 parent 55545eb
commit 3abb2f5
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 4 deletions.
diff --git a/src/drawer/components/CardLayout/CardLayout.tsx b/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

diff --git a/src/drawer/components/Dialog/ServiceRemoveModal.tsx b/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,
+    onSettled: () => {
+      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>

diff --git a/src/drawer/components/DrawerCard/UserDrawerCard/UserDrawerCard.tsx b/src/drawer/components/DrawerCard/UserDrawerCard/UserDrawerCard.tsx
@@ -13,6 +13,10 @@ import {
   StyledServiceTextContainer,
 } from './UserDrawerCard.style';
 
+interface UserDrawerCardProps extends DrawerCardProps {
+  productNo: number;
+}
+
 export const UserDrawerCard = ({
   link,
   bigImgSrc,
@@ -21,7 +25,8 @@ export const UserDrawerCard = ({
   body,
   bookmarkCount,
   isBookmarked,
-}: DrawerCardProps) => {
+  productNo,
+}: UserDrawerCardProps) => {
   const [isCardSettingClicked, setIsCardSettingClicked] = useState(false);
   const [openRemoveModal, setOpenRemoveModal] = useState(false);
   const dropdownRef = useRef<HTMLDivElement | null>(null);
@@ -81,7 +86,11 @@ export const UserDrawerCard = ({
           </StyledServiceTextContainer>
         </Dropdown>
       )}
-      <ServiceRemoveModal open={openRemoveModal} onOpenChange={setOpenRemoveModal} />
+      <ServiceRemoveModal
+        open={openRemoveModal}
+        productNo={productNo}
+        onOpenChange={setOpenRemoveModal}
+      />
     </StyledCardContainer>
   );
 };