Skip to content

Commit

Permalink
Merge pull request #74 from Beside-Potenday/seungbeom
Browse files Browse the repository at this point in the history
마이페이지 메일 내역 추가
  • Loading branch information
seung365 authored Aug 7, 2024
2 parents c5bd560 + 9a0ba6b commit 160a6d3
Show file tree
Hide file tree
Showing 5 changed files with 207 additions and 29 deletions.
3 changes: 0 additions & 3 deletions src/api/hooks/Mail/useGetMail.tsx

This file was deleted.

36 changes: 36 additions & 0 deletions src/api/hooks/Mail/useGetMailBusiness.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
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 token = sessionStorage.getItem('accessToken');

const apiClient = axios.create({
baseURL: BASE_URL,
headers: {
Authorization: `Bearer ${token}`,
job: `business`,
},
});

const getMailBusiness = async (page: number, size: number) => {
try {
const response = await apiClient.get<MailListResponse>(getMailPath(page, size));
return response.data;
} catch (error) {
console.error('Error fetching mail:', error);
throw error;
}
};

export const useGetMailBusiness = (page: number, size: number) => {
const {
data: businessData,
isLoading: businessLoading,
isError: businessError,
} = useQuery({ queryKey: ['emails', page, size], queryFn: () => getMailBusiness(page, size) });
return { businessData, businessLoading, businessError };
};
37 changes: 37 additions & 0 deletions src/api/hooks/Mail/useGetMailUniv.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
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 token = sessionStorage.getItem('accessToken');

const apiClient = axios.create({
baseURL: BASE_URL,
headers: {
Authorization: `Bearer ${token}`,
job: `univ`,
},
});

const getMailUniv = async (page: number, size: number) => {
try {
const response = await apiClient.get<MailListResponse>(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 };
};
154 changes: 128 additions & 26 deletions src/pages/MyPage/index.tsx
Original file line number Diff line number Diff line change
@@ -1,37 +1,139 @@
import { useAuth } from '@/Provider/Auth';
import { Grid, GridItem } from '@chakra-ui/react';
import styled from '@emotion/styled';
import {
Box,
Grid,
GridItem,
VStack,
HStack,
Text,
Avatar,
Heading,
Divider,
Button,
Spinner,
} from '@chakra-ui/react';
import { useGetMailBusiness } from '@/api/hooks/Mail/useGetMailBusiness';
import { useGetMailUniv } from '@/api/hooks/Mail/useGetMailUniv';
import { useState } from 'react';

export const MyPage = () => {
const { authInfo } = useAuth();

const [isJob, setIsJob] = useState('univ');

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 handlePrev = () => {
if (isJob === 'univ') {
setUnivPage((prev) => Math.max(prev - 1, 0));
} else {
setBusinessPage((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));
}
};

return (
<Wrapper>
<Grid
h="100%"
w="100%"
templateColumns="0.5fr 1fr"
gap={20}
p={10}
background="gray.50"
borderRadius="lg"
>
<GridItem backgroundColor={'yellow'}>
<h2>User Information</h2>
<h1>{authInfo?.name}</h1>
<h1>{authInfo?.email}</h1>
<img src={authInfo?.picture} alt="사용자 프로필" />
<Box w="100%" h="1000px" p={10}>
<Grid h="100%" templateColumns="0.5fr 1fr" gap={20} bg="gray.50" borderRadius="lg" p={10}>
<GridItem bg="white" p={6} borderRadius="md" boxShadow="md">
<VStack align="start" spacing={4}>
<Heading size="md">사용자 정보</Heading>
<Avatar size="2xl" name={authInfo?.name} src={authInfo?.picture} />
<Text fontWeight="bold">{authInfo?.name}</Text>
<Text>{authInfo?.email}</Text>
</VStack>
</GridItem>
<GridItem backgroundColor={'blue'}>
<h2>메일 내역</h2>

<GridItem bg="white" p={6} borderRadius="md" boxShadow="md">
<VStack align="start" spacing={6} w="100%">
<Heading size="md">메일 내역</Heading>
<Button
onClick={() => {
setIsJob('univ');
setUnivPage(0); // 페이지를 0으로 초기화
}}
disabled={isJob === 'univ'}
>
대학생
</Button>
<Button
onClick={() => {
setIsJob('business');
setBusinessPage(0); // 페이지를 0으로 초기화
}}
disabled={isJob === 'business'}
>
직장인
</Button>

{isJob === 'univ' ? (
univLoading ? (
<Spinner />
) : univError ? (
<Text color="red.500">오류가 발생했습니다.</Text>
) : (
univData?.content.map((email, index) => (
<Box key={email.createDate} w="100%">
<HStack justify="space-between" mb={2}>
<Text fontWeight="bold">{email.subjet}</Text>
<Text fontSize="sm" color="gray.500">
{email.createDate}
</Text>
</HStack>
<Text noOfLines={2}>{email.body}</Text>
<Divider mt={2} />
</Box>
))
)
) : businessLoading ? (
<Spinner />
) : businessError ? (
<Text color="red.500">오류가 발생했습니다.</Text>
) : (
businessData?.content.map((email, index) => (
<Box key={email.createDate} w="100%">
<HStack justify="space-between" mb={2}>
<Text fontWeight="bold">{email.subjet}</Text>
<Text fontSize="sm" color="gray.500">
{email.createDate}
</Text>
</HStack>
<Text noOfLines={2}>{email.body}</Text>
<Divider mt={2} />
</Box>
))
)}

<HStack mt={4} justify="space-between" w="100%">
<Button
onClick={handlePrev}
disabled={isJob === 'univ' ? univPage === 0 : businessPage === 0}
>
이전
</Button>
<Button
onClick={handleNext}
disabled={
isJob === 'univ'
? !univData || univData.totalPages <= univPage + 1
: !businessData || businessData.totalPages <= businessPage + 1
}
>
다음
</Button>
</HStack>
</VStack>
</GridItem>
</Grid>
</Wrapper>
</Box>
);
};

export const Wrapper = styled.div`
width: 100%;
height: 1000px;
`;
6 changes: 6 additions & 0 deletions src/types/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -60,3 +60,9 @@ export interface MailGetData {
day: string;
job: string;
}

export interface MailListResponse {
totalPages: number;
content: [{ subjet: string; body: string; createDate: string }];
pageable: { pageNumber: number; pageSize: number };
}

0 comments on commit 160a6d3

Please sign in to comment.