From eeb931a5e4bfb3dc7ed8d730ad06d1ad43317d3c Mon Sep 17 00:00:00 2001
From: dladncks1217 <dlaxodud1217@gmail.com>
Date: Mon, 9 Sep 2024 00:06:07 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EB=A9=94=EC=9D=BC=20=EC=9D=BD=EA=B8=B0?=
 =?UTF-8?q?=20api=20=EC=97=B0=EB=8F=99=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/useMailReadMutation.ts            | 17 +++++++++++++++++
 src/app/main/DigestTab/index.tsx                | 12 +++++++++++-
 src/components/Article/ArticleCard.tsx          | 12 +-----------
 .../Domain/DomainInteraction.tsx                |  1 +
 src/mocks/handlers.ts                           |  4 ++++
 5 files changed, 34 insertions(+), 12 deletions(-)
 create mode 100644 src/api/hooks/useMailReadMutation.ts

diff --git a/src/api/hooks/useMailReadMutation.ts b/src/api/hooks/useMailReadMutation.ts
new file mode 100644
index 0000000..141cc0a
--- /dev/null
+++ b/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,
+  });
+};
diff --git a/src/app/main/DigestTab/index.tsx b/src/app/main/DigestTab/index.tsx
index 44c6c14..576a394 100644
--- a/src/app/main/DigestTab/index.tsx
+++ b/src/app/main/DigestTab/index.tsx
@@ -6,17 +6,27 @@ import { useEffect, useState } from 'react';
 import ArticleCard from '@/components/Article/ArticleCard';
 import RecommendArea from '../TodayTab/RecommendArea';
 import { useUnreadQuery } from '@/api/hooks/useFetchMailQuery';
+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 gap-3 pt-3'>
         <TopSection selectedTab={selectedTab} setSelectedTab={setSelectedTab} />
-        {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'>
         <RecommendArea />
diff --git a/src/components/Article/ArticleCard.tsx b/src/components/Article/ArticleCard.tsx
index ea96b2f..41d3cf2 100644
--- a/src/components/Article/ArticleCard.tsx
+++ b/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
diff --git a/src/components/PageInteraction/Domain/DomainInteraction.tsx b/src/components/PageInteraction/Domain/DomainInteraction.tsx
index bb5691e..a5d202c 100644
--- a/src/components/PageInteraction/Domain/DomainInteraction.tsx
+++ b/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'>
diff --git a/src/mocks/handlers.ts b/src/mocks/handlers.ts
index 49926ba..28e6d73 100644
--- a/src/mocks/handlers.ts
+++ b/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',