Fix/#96: 마이페이지, 게시글 상세 페이지에서 내 글 삭제 후 invalidate 정상적으로 되게 수정 (#97)

* fix: 마이페이지에서 내 글 삭제 후 invalidate 정상적으로 되게 수정

* feat: 게시글 상세 페이지 내부에서 글 삭제 기능 구현

노션 QA: DT_007

src/pages/Feed/components/NewIdeaCardListSection/NewIdeaCardListSection.tsx

@@ -3,6 +3,7 @@ import { Spacer, Text } from 'concept-be-design-system';
 import { Fragment, Suspense, useRef } from 'react';
 
 import NewIdeaCardListSkeleton from './NewIdeaCardListSkeleton';
+import useConfirm from '../../../../hooks/useConfrim';
 import { useDeleteIdea } from '../../../components/NewIdeaCard/hooks/mutations/useDeleteIdea';
 import NewIdeaCard from '../../../components/NewIdeaCard/NewIdeaCard';
 import useNavigatePage from '../../../hooks/useNavigatePage';
@@ -18,14 +19,16 @@ const CardList = () => {
   const { ideas, fetchNextPage } = useIdeasQuery(filterParams);
   const { goProfilePage } = useNavigatePage();
   const { deleteIdea } = useDeleteIdea();
+  const openConfirm = useConfirm();
 
   const intersectionRef = useRef(null);
 
   useFeedInfiniteFetch(intersectionRef, fetchNextPage);
 
-  const handleDeleteIdea = (ideaId: number) => {
-    //TODO: #54 머지 후 Confirm 컴포넌트로 대체
-    if (confirm('게시글을 삭제하시겠습니까?')) deleteIdea(ideaId);
+  const handleDeleteIdea = async (ideaId: number) => {
+    if (await openConfirm({ content: '게시글을 삭제하시겠습니까?' })) {
+      deleteIdea(ideaId);
+    }
   };
 
   return (

src/pages/FeedDetail/FeedDetail.page.tsx

@@ -8,9 +8,11 @@ import { CommentFocusProvider } from './contexts/CommentFocusContext';
 import useFeedDetailQuery from './hooks/queries/useFeedDetailQuery';
 import ProfileInfo from '../../components/ProfileInfo';
 import SEOMeta from '../../components/SEOMeta/SEOMeta';
+import useConfirm from '../../hooks/useConfrim';
 import useInitScrollPosition from '../../hooks/useInitScrollPosition';
 import Back from '../../layouts/Back';
 import Logo from '../../layouts/Logo';
+import { useDeleteIdea } from '../components/NewIdeaCard/hooks/mutations/useDeleteIdea';
 import { formatCommentDate } from '../Feed/utils/formatCommentDate';
 
 const FeedDetailPage = () => {
@@ -37,16 +39,21 @@ const FeedDetailPage = () => {
     ownerScrap,
     ownerLike,
   } = useFeedDetailQuery(feedId);
+  const openConfirm = useConfirm();
+  const { deleteIdea } = useDeleteIdea();
 
   useInitScrollPosition(`feed/${feedId}`);
 
   const onModifyFeedDetail = () => {
     // 게시글 수정 로직 필요
   };
 
-  const onDeleteFeedDetail = () => {
-    // 게시글 삭제 로직 필요
-    navigate(-1);
+  const onDeleteFeedDetail = async () => {
+    if (await openConfirm({ content: '게시글을 삭제하시겠습니까?' })) {
+      // feedId === ideaId
+      deleteIdea(Number(feedId));
+      navigate(-1);
+    }
   };
 
   return (

src/pages/Profile/components/MyProfile/IdeaSection.tsx

@@ -3,6 +3,7 @@ import { Box, Spacer, SVGProfileMessageDots } from 'concept-be-design-system';
 import { useRef } from 'react';
 import { useNavigate } from 'react-router-dom';
 
+import useConfirm from '../../../../hooks/useConfrim';
 import { useDeleteIdea } from '../../../components/NewIdeaCard/hooks/mutations/useDeleteIdea';
 import NewIdeaCard from '../../../components/NewIdeaCard/NewIdeaCard';
 import { useFeedInfiniteFetch } from '../../../Feed/hooks/useFeedInfiniteFetch';
@@ -16,15 +17,17 @@ type Props = {
 const IdeaSection = ({ userId }: Props) => {
   const navigate = useNavigate();
   const { ideas, fetchNextPage } = useIdeasQuery(userId);
+  const openConfirm = useConfirm();
 
   const intersectionRef = useRef(null);
 
   useFeedInfiniteFetch(intersectionRef, fetchNextPage);
 
   const { deleteIdea } = useDeleteIdea();
-  const handleDeleteIdea = (ideaId: number) => {
-    //TODO: #54 머지 후 Confirm 컴포넌트로 대체
-    if (confirm('게시글을 삭제하시겠습니까?')) deleteIdea(ideaId);
+  const handleDeleteIdea = async (ideaId: number) => {
+    if (await openConfirm({ content: '게시글을 삭제하시겠습니까?' })) {
+      deleteIdea(ideaId);
+    }
   };
 
   if (ideas.length === 0) {

src/pages/components/NewIdeaCard/hooks/mutations/useDeleteIdea.ts

@@ -1,6 +1,7 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 
 import { http } from '../../../../../api/http';
+import { getUserId } from '../../../../Profile/utils/getUserId';
 
 const _deleteIdea = (ideaId: number) => {
   return http.delete(`/ideas/${ideaId}`);
@@ -10,11 +11,9 @@ export const useDeleteIdea = () => {
   const queryClient = useQueryClient();
   const { mutate: deleteIdea, ...rest } = useMutation({
     mutationFn: _deleteIdea,
-    onSuccess: (data, variables) => {
-      const ideaId = variables;
-
+    onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['ideas'] });
-      queryClient.invalidateQueries({ queryKey: ['members', 'detail', ideaId, 'bookmarkedIdeas'] });
+      queryClient.invalidateQueries({ queryKey: ['members', 'detail', `${getUserId()}`, 'ideas'] });
     },
   });