Merge pull request #65 from Beside-Potenday/seungbeom

�메일 저장 버튼 추가
Beside-Potenday · Aug 7, 2024 · f3c194a · f3c194a
2 parents b678276 + 2a34d79
commit f3c194a
Show file tree

Hide file tree

Showing 5 changed files with 101 additions and 5 deletions.
diff --git a/src/Provider/MailContext.tsx b/src/Provider/MailContext.tsx
@@ -1,6 +1,6 @@
 import React, { createContext, useContext, useState } from 'react';
 import type { ReactNode } from 'react';
-import { MailInput } from '@/types';
+import { MailPostData, MailInput } from '@/types';
 
 export type mailSendUniv = {
   sender: string;
@@ -27,6 +27,8 @@ interface MailContextProps {
   onIsActive: (state: 'univ' | 'business') => void;
   resetMailInputUniv: () => void;
   resetMailInputBusiness: () => void;
+  mailResult: MailPostData;
+  handleMailResult: (mailResult: MailPostData) => void;
 }
 
 export const MailContext = createContext<MailContextProps | null>(null);
@@ -41,6 +43,14 @@ export const MailProvider = ({ children }: { children: ReactNode }) => {
     subject: '',
     receiver: '',
   });
+  const [mailResult, setMailResult] = useState<MailPostData>({
+    subject: '',
+    body: '',
+  });
+
+  const handleMailResult = (mailResult: MailPostData) => {
+    setMailResult(mailResult);
+  };
 
   const handleMail = (mailBox: MailInput) => {
     setMailInput(mailBox);
@@ -86,6 +96,8 @@ export const MailProvider = ({ children }: { children: ReactNode }) => {
         onIsActive,
         resetMailInputUniv,
         resetMailInputBusiness,
+        mailResult,
+        handleMailResult,
       }}
     >
       {children}

diff --git a/src/api/hooks/usePostMail.tsx b/src/api/hooks/usePostMail.tsx
@@ -0,0 +1,36 @@
+import { MailPostData } from '@/types';
+import axios from 'axios';
+import { BASE_URL } from '..';
+import { useMutation } from '@tanstack/react-query';
+
+export const postMailPath = () => `${BASE_URL}/save-mail`;
+
+const apiClient = axios.create({
+  baseURL: BASE_URL,
+  headers: {
+    Authorization: `Bearer ${sessionStorage.getItem('accessToken')}`,
+  },
+});
+
+const postMail = async (mailInput: MailPostData) => {
+  try {
+    const response = await apiClient.post<number>(postMailPath(), mailInput);
+    return response.data;
+  } catch (error) {
+    console.error('Error posting mail:', error);
+    throw error;
+  }
+};
+
+export const usePostMail = () => {
+  const { mutate } = useMutation({
+    mutationFn: postMail,
+    onSuccess: (result) => {
+      console.log('Mail posted successfully:', result);
+    },
+    onError: (error) => {
+      console.error('Error posting mail:', error);
+    },
+  });
+  return { mutate };
+};
diff --git a/src/components/Mail/MailModal.tsx b/src/components/Mail/MailModal.tsx
@@ -30,6 +30,8 @@ import {
   warningTextsBusiness,
   warningTextsUniv,
 } from './MailModalData';
+import { useAuth } from '@/Provider/Auth';
+import { usePostMail } from '@/api/hooks/usePostMail';
 
 interface MailModalProps {
   isOpen: boolean;
@@ -51,7 +53,11 @@ export const MailModal = ({ isOpen, onOpen, onClose }: MailModalProps) => {
   const [isFocused, setIsFocused] = useState(false);
   const [isHide, setIsHide] = useState(false);
   const [firstInput, setFirstInput] = useState('');
-  const { isActive } = useMail();
+  const { isActive, handleMailResult, mailResult } = useMail();
+  const [noError, setNoError] = useState(false);
+  const { authInfo } = useAuth();
+
+  const { mutate: mailmutate } = usePostMail();
 
   const currentcurrentInputNames =
     isActive === 'univ' ? currentInputNames : currentInputNamesBusiness;
@@ -102,12 +108,18 @@ export const MailModal = ({ isOpen, onOpen, onClose }: MailModalProps) => {
           setContent(data.content || '메일이 성공적으로 생성되었습니다.');
           setIsSubmitted(true);
           setIsLoading(false);
+          setNoError(true);
+          handleMailResult({
+            subject: data.title,
+            body: data.content,
+          });
         },
         onError: (error) => {
           setTitle('메일 생성 실패');
           setContent('메일 생성 중 오류가 발생했습니다.');
           setIsSubmitted(true);
           setIsLoading(false);
+          setNoError(false);
         },
       },
     );
@@ -139,12 +151,19 @@ export const MailModal = ({ isOpen, onOpen, onClose }: MailModalProps) => {
           setContent(data.content || '메일이 성공적으로 생성되었습니다.');
           setIsSubmitted(true);
           setIsLoading(false);
+          setNoError(true);
+
+          handleMailResult({
+            subject: data.title,
+            body: data.content,
+          });
         },
         onError: (error) => {
           setTitle('메일 생성 실패');
           setContent('메일 생성 중 오류가 발생했습니다.');
           setIsSubmitted(true);
           setIsLoading(false);
+          setNoError(false);
         },
       },
     );
@@ -192,6 +211,14 @@ export const MailModal = ({ isOpen, onOpen, onClose }: MailModalProps) => {
     }
   };
 
+  const handlePutMail = () => {
+    if (authInfo) {
+      mailmutate({ ...mailResult });
+    } else {
+      alert('로그인 후 메일을 저장 할 수 있습니다.');
+    }
+  };
+
   useEffect(() => {
     setIsFocused(false);
     setValue(currentcurrentInputNames[currentIndex], '', { shouldValidate: true });
@@ -337,6 +364,13 @@ export const MailModal = ({ isOpen, onOpen, onClose }: MailModalProps) => {
             )}
           </CustomModalFooter>
         )}
+        {isSubmitted && noError && (
+          <ModalFooter>
+            <Button colorScheme="blue" onClick={handlePutMail}>
+              저장하기
+            </Button>
+          </ModalFooter>
+        )}
       </CustomModalContent>
     </CustomModal>
   );

diff --git a/src/pages/MyPage/index.tsx b/src/pages/MyPage/index.tsx
@@ -18,13 +18,13 @@ export const MyPage = () => {
       >
         <GridItem backgroundColor={'yellow'}>
           <h2>User Information</h2>
-          <h1>{authInfo?.email}</h1>
+          <h1>{authInfo?.name}</h1>
           <h1>{authInfo?.email}</h1>
           <img src={authInfo?.picture} alt="사용자 프로필" />
         </GridItem>
         <GridItem backgroundColor={'blue'}>
-          <h2>User History</h2>
-          {/* user history */}
+          <h2>메일 내역</h2>
+
         </GridItem>
       </Grid>
     </Wrapper>

diff --git a/src/types/index.ts b/src/types/index.ts
@@ -45,3 +45,17 @@ export interface AuthContextType {
   authInfo?: AuthInfo;
   updateAuthInfo: (auth: AuthInfo) => void;
 }
+
+export interface MailPostData {
+  subject: string;
+  body: string;
+}
+
+export interface MailGetData {
+  sender: string;
+  body: string;
+  year: string;
+  month: string;
+  day: string;
+  job: string;
+}