feat: 메일 삭제 UI 및 API 연결

src/api/hooks/useMailReadMutation.ts

@@ -0,0 +1,17 @@
+import { useMutation } from '@tanstack/react-query';
+import { axiosInstance } from '@/api/axiosInstance';
+import { AxiosError, AxiosResponse } from 'axios';
+
+interface patchParam {
+  mailId: string;
+}
+
+export const patchFn = ({ mailId }: patchParam) => {
+  return axiosInstance.patch(`/inbox/mails/${mailId}`, { action: 'read' });
+};
+
+export const useMailReadMutation = () => {
+  return useMutation<AxiosResponse, AxiosError, patchParam>({
+    mutationFn: patchFn,
+  });
+};

src/app/main/DigestTab/index.tsx

@@ -7,23 +7,32 @@ import ArticleCard from '@/components/Article/ArticleCard';
 import RecommendArea from '../TodayTab/RecommendArea';
 import { useUnreadQuery } from '@/api/hooks/useFetchMailQuery';
 import EmptyMailView from '@/components/EmptyMailView';
+import { useMailReadMutation } from '@/api/hooks/useMailReadMutation';
 
 const DigestTab = () => {
   const [selectedTab, setSelectedTab] = useState<'all' | 'unread'>('unread');
 
   const { data, isFetched } = useUnreadQuery({});
+  const readMutation = useMailReadMutation();
+
+  const handleReadMail = (mailId: string) => {
+    readMutation.mutate({ mailId });
+  };
 
   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} />
-
         {data?.length === 0 ? (
           <div className='h-[calc(100vh-8.5rem-94px)] overflow-visible w-articleCard'>
             <EmptyMailView />
           </div>
         ) : (
-          data?.map(article => <ArticleCard key={article.mailId} {...article} />)
+          data?.map(article => (
+            <div onClick={() => handleReadMail(article.mailId)}>
+              <ArticleCard key={article.mailId} {...article} />
+            </div>
+          ))
         )}
       </div>
       <div className='sticky top-0 pt-9 h-fit'>

src/components/Article/ArticleCard.tsx

@@ -9,17 +9,7 @@ interface ArticleCardProps extends MailDataType {
   currentTab?: string;
 }
 
-const ArticleCard = ({
-  subject,
-  mailId,
-  snippet,
-  date,
-  // thumbnail,
-  isRead,
-  payload,
-  from,
-  isToday = false,
-}: ArticleCardProps) => {
+const ArticleCard = ({ subject, mailId, snippet, date, isRead, payload, from, isToday = false }: ArticleCardProps) => {
   return (
     <Link
       // https://stackoverflow.com/questions/66821351/nextjs-error-message-failed-prop-type-the-prop-href-expects-a-string-or-o

src/components/PageInteraction/Domain/DomainInteraction.tsx

@@ -11,6 +11,7 @@ interface DomainInteractionAreaProps {
 
 const DomainInteractionArea = ({ domainArticleData }: DomainInteractionAreaProps) => {
   const [currentTab, setCurrentTab] = useState('unread');
+
   return (
     <div className='flex flex-col gap-3'>
       <div className='flex flex-row items-center justify-between w-full'>

src/mocks/handlers.ts

@@ -169,6 +169,10 @@ export const handlers = [
     });
   }),
 
+  http.patch('/inbox/mails/:id', () => {
+    return HttpResponse.json({}, { status: 204 });
+  }),
+
   http.get('/users', () => {
     return HttpResponse.json({
       user_id: 'RandomString',