feat: 메일 삭제 후 리다이렉트, 메일 리프레시 기능 추가

src/api/hooks/useFetchMailQuery.ts

@@ -5,6 +5,7 @@ import { AxiosError, AxiosResponse } from 'axios';
 interface fetchUnreadMailsParams {
   group?: string;
   sender?: string;
+  type?: string;
 }
 
 export type MailDataType = {
@@ -38,9 +39,9 @@ export const fetchUnReadMails = ({ group, sender }: fetchUnreadMailsParams) => {
   return data;
 };
 
-export const useUnreadQuery = ({ group, sender }: fetchUnreadMailsParams) => {
+export const useUnreadQuery = ({ group, sender, type }: fetchUnreadMailsParams) => {
   return useQuery<AxiosResponse<Response>, AxiosError, MailDataType[]>({
-    queryKey: ['unreadMail', group, sender],
+    queryKey: ['unreadMail', group, sender, type],
     queryFn: () => fetchUnReadMails({ group, sender }),
     select: ({ data }) => [...data.mails],
     staleTime: 1000 * 60 * 30, // 30 minutes

src/app/article/[id]/ArticleFooter.tsx

@@ -1,28 +1,39 @@
 import { useMailDeleteMutation } from '@/api/hooks/useMailReadMutation';
 import DeleteIcon from '@/assets/icons/DeleteIcon.svg';
 import ListIcon from '@/assets/icons/ListIcon.svg';
+import { useRouter } from 'next/navigation';
 import Image from 'next/image';
 
 interface ArticleFooterProps {
   mailId: string;
 }
 
 const ArticleFooter = ({ mailId }: ArticleFooterProps) => {
+  const router = useRouter();
   const deleteMutation = useMailDeleteMutation();
 
   const handleDeleteMail = (mailId: string) => {
-    deleteMutation.mutate({ mailId });
+    deleteMutation.mutate(
+      { mailId },
+      {
+        onSuccess: () => {
+          router.push('/main?tab=Digest'); // 클라이언트 사이드에서 리디렉션
+        },
+      },
+    );
   };
+
+  const handleRedirectMain = () => {
+    router.push('/main?tab=Digest'); // 클라이언트 사이드에서 리디렉션
+  };
+
   return (
     <div className='fixed bottom-0 flex flex-row items-center justify-center w-full h-12 bg-white border-t border-lightgrey'>
       <div className='flex flex-row justify-end gap-6 px-6 w-content'>
-        <span
-          className='flex items-center justify-center w-6 h-6 cursor-pointer'
-          onClick={() => handleDeleteMail(mailId)}
-        >
-          <Image src={DeleteIcon} alt='delete' width={16} height={24} />
-        </span>
         <span className='flex items-center justify-center w-6 h-6 cursor-pointer'>
+          <Image src={DeleteIcon} alt='delete' width={16} height={24} onClick={() => handleDeleteMail(mailId)} />
+        </span>
+        <span className='flex items-center justify-center w-6 h-6 cursor-pointer' onClick={handleRedirectMain}>
           <Image src={ListIcon} alt='list' width={24} height={24} />
         </span>
       </div>

src/app/main/DigestTab/TopSection.tsx

@@ -5,15 +5,16 @@ import Image from 'next/image';
 interface TopSectionProps {
   selectedTab: 'all' | 'unread';
   setSelectedTab: React.Dispatch<React.SetStateAction<'all' | 'unread'>>;
+  handleRefresh: () => void;
 }
 
-const TopSection = ({ selectedTab, setSelectedTab }: TopSectionProps) => {
+const TopSection = ({ selectedTab, setSelectedTab, handleRefresh }: TopSectionProps) => {
   const handleClickTab = (tab: string) => {
     setSelectedTab(tab as 'all' | 'unread');
   };
 
   const handleRefreshBtnClick = () => {
-    // TODO: refresh data
+    handleRefresh();
   };
 
   return (

src/app/main/DigestTab/index.tsx

@@ -12,7 +12,7 @@ import { useMailReadMutation } from '@/api/hooks/useMailReadMutation';
 const DigestTab = () => {
   const [selectedTab, setSelectedTab] = useState<'all' | 'unread'>('unread');
 
-  const { data, isFetched } = useUnreadQuery({});
+  const { data, isFetched, refetch } = useUnreadQuery({ type: selectedTab });
   const readMutation = useMailReadMutation();
 
   const handleReadMail = (mailId: string) => {
@@ -22,7 +22,7 @@ const DigestTab = () => {
   return isFetched ? (
     <div className='flex flex-row w-full h-full gap-16'>
       <div className='flex flex-col h-full gap-3 pt-3'>
-        <TopSection selectedTab={selectedTab} setSelectedTab={setSelectedTab} />
+        <TopSection selectedTab={selectedTab} setSelectedTab={setSelectedTab} handleRefresh={() => refetch()} />
         {data?.length === 0 ? (
           <div className='h-[calc(100vh-8.5rem-94px)] overflow-visible w-articleCard'>
             <EmptyMailView />

src/app/main/TodayTab/index.tsx

@@ -69,7 +69,6 @@ const TodayTab = () => {
     }
   }, [isError]);
 
-  console.log(todayArticleData, isFetched);
   if (!todayArticleData.length && isFetched) return <div>No Today's Contents</div>;
 
   return isFetched && todayArticleData.length > 0 ? (