diff --git a/apps/client/src/pages/myBookmark/MyBookmark.tsx b/apps/client/src/pages/myBookmark/MyBookmark.tsx index cd68ea2f..a0b2db44 100644 --- a/apps/client/src/pages/myBookmark/MyBookmark.tsx +++ b/apps/client/src/pages/myBookmark/MyBookmark.tsx @@ -1,4 +1,4 @@ -import { Badge, Card } from '@pinback/design-system/ui'; +import { Badge, Card, PopupContainer } from '@pinback/design-system/ui'; import { useState } from 'react'; import { useGetBookmarkArticles, @@ -25,6 +25,9 @@ const MyBookmark = () => { const [activeBadge, setActiveBadge] = useState<'all' | 'notRead'>('all'); const [isEditOpen, setIsEditOpen] = useState(false); + const [isDeleteOpen, setIsDeleteOpen] = useState(false); + const [deleteTargetId, setDeleteTargetId] = useState(null); + const [searchParams] = useSearchParams(); const queryClient = useQueryClient(); const category = searchParams.get('category'); @@ -59,17 +62,16 @@ const MyBookmark = () => { const handleDeleteArticle = (id: number) => { deleteArticle(id, { onSuccess: () => { - queryClient.invalidateQueries({ - queryKey: ['bookmarkReadArticles'], - }); - queryClient.invalidateQueries({ - queryKey: ['bookmarkUnreadArticles'], - }); + // TODO: 쿼리키 팩토리 패턴 적용 + queryClient.invalidateQueries({ queryKey: ['bookmarkReadArticles'] }); + queryClient.invalidateQueries({ queryKey: ['bookmarkUnreadArticles'] }); queryClient.invalidateQueries({ queryKey: ['categoryBookmarkArticles'], }); - - close(); + queryClient.invalidateQueries({ queryKey: ['arcons'] }); + setIsDeleteOpen(false); + setDeleteTargetId(null); + closeMenu(); }, onError: (error) => { console.error('아티클 삭제 실패:', error); @@ -181,15 +183,47 @@ const MyBookmark = () => { closeMenu(); }} onDelete={(articleId) => { - handleDeleteArticle(articleId); + setDeleteTargetId(articleId); + setIsDeleteOpen(true); + closeMenu(); }} onClose={closeMenu} /> + {/* 삭제 확인 모달 */} + {isDeleteOpen && ( +
+
setIsDeleteOpen(false)} + /> +
+ setIsDeleteOpen(false)} + onRightClick={() => { + if (deleteTargetId != null) { + handleDeleteArticle(deleteTargetId); + } else { + setIsDeleteOpen(false); + } + }} + onClose={() => setIsDeleteOpen(false)} + /> +
+
+ )} + + {/* 편집 모달 */} {isEditOpen && (
setIsEditOpen(false)} />
diff --git a/apps/client/src/pages/remind/Remind.tsx b/apps/client/src/pages/remind/Remind.tsx index db4d2205..a5b7d62e 100644 --- a/apps/client/src/pages/remind/Remind.tsx +++ b/apps/client/src/pages/remind/Remind.tsx @@ -1,5 +1,5 @@ import { useState } from 'react'; -import { Badge, Card } from '@pinback/design-system/ui'; +import { Badge, Card, PopupContainer } from '@pinback/design-system/ui'; import CardEditModal from '@shared/components/cardEditModal/CardEditModal'; import OptionsMenuPortal from '@shared/components/sidebar/OptionsMenuPortal'; import { useAnchoredMenu } from '@shared/hooks/useAnchoredMenu'; @@ -20,6 +20,9 @@ import NoRemindArticles from './components/noRemindArticles/NoRemindArticles'; const Remind = () => { const [isEditOpen, setIsEditOpen] = useState(false); const [activeBadge, setActiveBadge] = useState<'read' | 'notRead'>('notRead'); + const [isDeleteOpen, setIsDeleteOpen] = useState(false); + const [deleteTargetId, setDeleteTargetId] = useState(null); + const formattedDate = formatLocalDateTime(); const queryClient = useQueryClient(); @@ -50,6 +53,10 @@ const Remind = () => { deleteArticle(id, { onSuccess: () => { queryClient.invalidateQueries({ queryKey: ['remindArticles'] }); + queryClient.invalidateQueries({ queryKey: ['arcons'] }); + setIsDeleteOpen(false); + setDeleteTargetId(null); + closeMenu(); close(); }, onError: (error) => { @@ -143,11 +150,41 @@ const Remind = () => { closeMenu(); }} onDelete={(articleId) => { - handleDeleteArticle(articleId); + setDeleteTargetId(articleId); + setIsDeleteOpen(true); + closeMenu(); }} onClose={closeMenu} /> + {isDeleteOpen && ( +
+
setIsDeleteOpen(false)} + /> +
+ setIsDeleteOpen(false)} + onRightClick={() => { + if (deleteTargetId != null) { + handleDeleteArticle(deleteTargetId); + } else { + setIsDeleteOpen(false); + } + }} + onClose={() => setIsDeleteOpen(false)} + /> +
+
+ )} + {isEditOpen && (