Feat: 개발 QA 1차(정민 | 삭제하기 모달 추가) (#121)

Author: jjangminii

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<number | null>(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 && (
+        <div className="fixed inset-0" aria-modal="true" role="dialog">
+          <div
+            className="absolute inset-0"
+            onClick={() => setIsDeleteOpen(false)}
+          />
+          <div className="absolute inset-0 z-[100] flex items-center justify-center p-4">
+            <PopupContainer
+              isOpen
+              type="subtext"
+              title="정말 삭제하시겠어요?"
+              subtext="저장된 내용이 모두 사라지게 돼요."
+              left="취소"
+              right="삭제"
+              onLeftClick={() => setIsDeleteOpen(false)}
+              onRightClick={() => {
+                if (deleteTargetId != null) {
+                  handleDeleteArticle(deleteTargetId);
+                } else {
+                  setIsDeleteOpen(false);
+                }
+              }}
+              onClose={() => setIsDeleteOpen(false)}
+            />
+          </div>
+        </div>
+      )}
+
+      {/* 편집 모달 */}
       {isEditOpen && (
         <div className="fixed inset-0 z-[1000]" aria-modal="true" role="dialog">
           <div
-            className="absolute inset-0 bg-black/60 backdrop-blur-[2px]"
+            className="absolute inset-0 bg-black/60"
             onClick={() => setIsEditOpen(false)}
           />
           <div className="absolute inset-0 flex items-center justify-center p-4">

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<number | null>(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 && (
+        <div className="fixed inset-0" aria-modal="true" role="dialog">
+          <div
+            className="absolute inset-0"
+            onClick={() => setIsDeleteOpen(false)}
+          />
+          <div className="absolute inset-0 z-[100] flex items-center justify-center p-4">
+            <PopupContainer
+              isOpen
+              type="subtext"
+              title="정말 삭제하시겠어요?"
+              subtext="저장된 내용이 모두 사라지게 돼요."
+              left="취소"
+              right="삭제"
+              onLeftClick={() => setIsDeleteOpen(false)}
+              onRightClick={() => {
+                if (deleteTargetId != null) {
+                  handleDeleteArticle(deleteTargetId);
+                } else {
+                  setIsDeleteOpen(false);
+                }
+              }}
+              onClose={() => setIsDeleteOpen(false)}
+            />
+          </div>
+        </div>
+      )}
+
       {isEditOpen && (
         <div className="fixed inset-0 z-[1000]" aria-modal="true" role="dialog">
           <div