diff --git a/src/api/hooks/Mail/useGetMailBusiness.tsx b/src/api/hooks/Mail/useGetMail.tsx similarity index 59% rename from src/api/hooks/Mail/useGetMailBusiness.tsx rename to src/api/hooks/Mail/useGetMail.tsx index 1ad16e8..bb36d7f 100644 --- a/src/api/hooks/Mail/useGetMailBusiness.tsx +++ b/src/api/hooks/Mail/useGetMail.tsx @@ -6,21 +6,21 @@ import { useQuery } from '@tanstack/react-query'; export const getMailPath = (page: number, size: number) => `${BASE_URL}/emails?page=${page}&size=${size}`; -const createApiClient = () => { +const createApiClient = (job: string) => { const token = sessionStorage.getItem('accessToken'); return axios.create({ baseURL: BASE_URL, headers: { Authorization: `Bearer ${token}`, - Job: 'business', + Job: job, }, }); }; -const getMailBusiness = async (page: number, size: number) => { +const getMail = async (page: number, size: number, job: string) => { try { console.log('business', page, size); - const apiClient = createApiClient(); + const apiClient = createApiClient(job); const response = await apiClient.get(getMailPath(page, size)); return response.data; } catch (error) { @@ -29,11 +29,14 @@ const getMailBusiness = async (page: number, size: number) => { } }; -export const useGetMailBusiness = (page: number, size: number) => { +export const useGetMail = (page: number, size: number, job: string) => { const { - data: businessData, - isLoading: businessLoading, - isError: businessError, - } = useQuery({ queryKey: ['emails', page, size], queryFn: () => getMailBusiness(page, size) }); - return { businessData, businessLoading, businessError }; + data: mailData, + isLoading: mailLoading, + isError: mailError, + } = useQuery({ + queryKey: ['emails', page, size, job], + queryFn: () => getMail(page, size, job), + }); + return { mailData, mailLoading, mailError }; }; diff --git a/src/api/hooks/Mail/useGetMailUniv.tsx b/src/api/hooks/Mail/useGetMailUniv.tsx deleted file mode 100644 index b9c65d6..0000000 --- a/src/api/hooks/Mail/useGetMailUniv.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import { BASE_URL } from '@/api'; -import axios from 'axios'; -import { MailListResponse } from '@/types'; -import { useQuery } from '@tanstack/react-query'; - -export const getMailPath = (page: number, size: number) => - `${BASE_URL}/emails?page=${page}&size=${size}`; - -const createApiClient = () => { - const token = sessionStorage.getItem('accessToken'); - return axios.create({ - baseURL: BASE_URL, - headers: { - Authorization: `Bearer ${token}`, - Job: 'univ', - }, - }); -}; - -const getMailUniv = async (page: number, size: number) => { - try { - console.log('univ', page, size); - - const apiClient = createApiClient(); - const response = await apiClient.get(getMailPath(page, size)); - return response.data; - } catch (error) { - console.error('Error fetching mail:', error); - throw error; - } -}; - -export const useGetMailUniv = (page: number, size: number) => { - const { - data: univData, - isLoading: univLoading, - isError: univError, - } = useQuery({ queryKey: ['emails', page, size], queryFn: () => getMailUniv(page, size) }); - - return { univData, univLoading, univError }; -}; diff --git a/src/pages/MyPage/index.tsx b/src/pages/MyPage/index.tsx index 88a0593..025b5f9 100644 --- a/src/pages/MyPage/index.tsx +++ b/src/pages/MyPage/index.tsx @@ -12,43 +12,27 @@ import { Button, Spinner, } from '@chakra-ui/react'; -import { useGetMailBusiness } from '@/api/hooks/Mail/useGetMailBusiness'; -import { useGetMailUniv } from '@/api/hooks/Mail/useGetMailUniv'; +import { useGetMail } from '@/api/hooks/Mail/useGetMail'; import { useEffect, useState } from 'react'; export const MyPage = () => { const { authInfo } = useAuth(); const [isJob, setIsJob] = useState('univ'); + const [page, setPage] = useState(0); - const [univPage, setUnivPage] = useState(0); - const [businessPage, setBusinessPage] = useState(0); - - const { univData, univLoading, univError } = useGetMailUniv(univPage, 5); - const { businessData, businessLoading, businessError } = useGetMailBusiness(businessPage, 5); + const { mailData, mailLoading, mailError } = useGetMail(page, 5, isJob); useEffect(() => { - if (isJob === 'univ') { - setUnivPage(0); - } else { - setBusinessPage(0); - } + setPage(0); }, [isJob]); const handlePrev = () => { - if (isJob === 'univ') { - setUnivPage((prev) => Math.max(prev - 1, 0)); - } else { - setBusinessPage((prev) => Math.max(prev - 1, 0)); - } + setPage((prev) => Math.max(prev - 1, 0)); }; const handleNext = () => { - if (isJob === 'univ') { - setUnivPage((prev) => (univData && !univData.totalPages ? prev + 1 : prev)); - } else { - setBusinessPage((prev) => (businessData && !businessData.totalPages ? prev + 1 : prev)); - } + setPage((prev) => (mailData && mailData.totalPages > prev + 1 ? prev + 1 : prev)); }; return ( @@ -65,50 +49,19 @@ export const MyPage = () => { 메일 내역 - - - {isJob === 'univ' ? ( - univLoading ? ( - - ) : univError ? ( - 오류가 발생했습니다. - ) : ( - univData?.content.map((email, index) => ( - - - {email.subject} - - {email.createDate} - - - {email.body} - - - )) - ) - ) : businessLoading ? ( + {mailLoading ? ( - ) : businessError ? ( + ) : mailError ? ( 오류가 발생했습니다. ) : ( - businessData?.content.map((email, index) => ( + mailData?.content.map((email, index) => ( {email.subject} @@ -123,20 +76,10 @@ export const MyPage = () => { )} - -