feat: 메일 삭제 UI 및 API 연결

src/api/hooks/useMailReadMutation.ts

@@ -10,8 +10,18 @@ export const patchFn = ({ mailId }: patchParam) => {
   return axiosInstance.patch(`/inbox/mails/${mailId}`, { action: 'read' });
 };
 
+export const deleteFn = ({ mailId }: patchParam) => {
+  return axiosInstance.delete(`/inbox/mails/${mailId}`);
+};
+
 export const useMailReadMutation = () => {
   return useMutation<AxiosResponse, AxiosError, patchParam>({
     mutationFn: patchFn,
   });
 };
+
+export const useMailDeleteMutation = () => {
+  return useMutation<AxiosResponse, AxiosError, patchParam>({
+    mutationFn: deleteFn,
+  });
+};

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

@@ -0,0 +1,33 @@
+import { useMailDeleteMutation } from '@/api/hooks/useMailReadMutation';
+import DeleteIcon from '@/assets/icons/DeleteIcon.svg';
+import ListIcon from '@/assets/icons/ListIcon.svg';
+import Image from 'next/image';
+
+interface ArticleFooterProps {
+  mailId: string;
+}
+
+const ArticleFooter = ({ mailId }: ArticleFooterProps) => {
+  const deleteMutation = useMailDeleteMutation();
+
+  const handleDeleteMail = (mailId: string) => {
+    deleteMutation.mutate({ mailId });
+  };
+  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={ListIcon} alt='list' width={24} height={24} />
+        </span>
+      </div>
+    </div>
+  );
+};
+
+export default ArticleFooter;

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

@@ -4,19 +4,24 @@ import type { pageProps } from '@/types/page';
 import ArticleContent from '@/app/article/[id]/ArticleContent';
 import MainPageHeader from '@/components/Header/MainPageHeader';
 import { useMailByIdQuery } from '@/api/hooks/useFetchMailQuery';
+import ArticleFooter from './ArticleFooter';
 
-interface ArticlePageProps extends pageProps {
+interface ArticlePageProps {
   params: { id: string };
 }
 
-const ArticlePage = ({ searchParams, params }: ArticlePageProps) => {
+const ArticlePage = ({ params }: ArticlePageProps) => {
   const { data } = useMailByIdQuery(params.id);
 
   return (
     <main className='flex flex-col items-center w-full bg-white'>
       <MainPageHeader />
-      {/* TODO: 개별 mail 받아와서 데이터 넘겨줘야함~~ */}
-      {data && <ArticleContent mailData={data} />}
+      {data && (
+        <>
+          <ArticleContent mailData={data} />
+          <ArticleFooter mailId={data.mailId} />
+        </>
+      )}
     </main>
   );
 };

src/mocks/handlers.ts

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