diff --git a/src/Provider/MailContext.tsx b/src/Provider/MailContext.tsx index ade65fc..2911e0d 100644 --- 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(null); @@ -41,6 +43,14 @@ export const MailProvider = ({ children }: { children: ReactNode }) => { subject: '', receiver: '', }); + const [mailResult, setMailResult] = useState({ + 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 new file mode 100644 index 0000000..68487de --- /dev/null +++ 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(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 index 37d927b..b0301a3 100644 --- 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) => { )} )} + {isSubmitted && noError && ( + + + + )} ); diff --git a/src/pages/MyPage/index.tsx b/src/pages/MyPage/index.tsx index 3e131ef..c21f38b 100644 --- a/src/pages/MyPage/index.tsx +++ b/src/pages/MyPage/index.tsx @@ -18,13 +18,13 @@ export const MyPage = () => { >

User Information

-

{authInfo?.email}

+

{authInfo?.name}

{authInfo?.email}

사용자 프로필
-

User History

- {/* user history */} +

메일 내역

+
diff --git a/src/types/index.ts b/src/types/index.ts index 5380e7f..e55f433 100644 --- 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; +}