From 529f7648d732cd2a6de1f7b6d5b374f6ac0b6ac3 Mon Sep 17 00:00:00 2001
From: dladncks1217 <dlaxodud1217@gmail.com>
Date: Mon, 9 Sep 2024 22:03:45 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EB=A9=94=EC=9D=BC=20=EC=82=AD=EC=A0=9C?=
 =?UTF-8?q?=20=ED=9B=84=20=EB=A6=AC=EB=8B=A4=EC=9D=B4=EB=A0=89=ED=8A=B8,?=
 =?UTF-8?q?=20=EB=A9=94=EC=9D=BC=20=EB=A6=AC=ED=94=84=EB=A0=88=EC=8B=9C=20?=
 =?UTF-8?q?=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/hooks/useFetchMailQuery.ts     |  5 +++--
 src/app/article/[id]/ArticleFooter.tsx | 25 ++++++++++++++++++-------
 src/app/main/DigestTab/TopSection.tsx  |  5 +++--
 src/app/main/DigestTab/index.tsx       |  4 ++--
 src/app/main/TodayTab/index.tsx        |  1 -
 5 files changed, 26 insertions(+), 14 deletions(-)

diff --git a/src/api/hooks/useFetchMailQuery.ts b/src/api/hooks/useFetchMailQuery.ts
index 50969da..b2ec7f3 100644
--- a/src/api/hooks/useFetchMailQuery.ts
+++ b/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
diff --git a/src/app/article/[id]/ArticleFooter.tsx b/src/app/article/[id]/ArticleFooter.tsx
index d881b29..32df764 100644
--- a/src/app/article/[id]/ArticleFooter.tsx
+++ b/src/app/article/[id]/ArticleFooter.tsx
@@ -1,6 +1,7 @@
 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 {
@@ -8,21 +9,31 @@ interface ArticleFooterProps {
 }
 
 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>
diff --git a/src/app/main/DigestTab/TopSection.tsx b/src/app/main/DigestTab/TopSection.tsx
index 77173cd..1acb7bd 100644
--- a/src/app/main/DigestTab/TopSection.tsx
+++ b/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 (
diff --git a/src/app/main/DigestTab/index.tsx b/src/app/main/DigestTab/index.tsx
index b85d949..d9d66b2 100644
--- a/src/app/main/DigestTab/index.tsx
+++ b/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 />
diff --git a/src/app/main/TodayTab/index.tsx b/src/app/main/TodayTab/index.tsx
index 4dc3718..c098afd 100644
--- a/src/app/main/TodayTab/index.tsx
+++ b/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 ? (