Skip to content

Commit 329c80a

Browse files
hyeeunchohyeeuncho
committed
feat: 예약 메일 삭제 api 연동
1 parent 8db9498 commit 329c80a

File tree

7 files changed

+85
-69
lines changed

7 files changed

+85
-69
lines changed

‎src/features/dashboard/api/mail.ts‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,4 +22,9 @@ export const sendEmail = async (data: EmailRequest) => {
2222
export const editEmail = async (reservationEmailId: number, data: EmailRequest) => {
2323
const response = await axiosClient.put(`/reservation-emails/${reservationEmailId}`, data);
2424
return response.data.result;
25-
};
25+
};
26+
27+
export const deleteEmail = async (reservationEmailId: number) => {
28+
const response = await axiosClient.delete(`/reservation-emails/${reservationEmailId}`);
29+
return response.data.result;
30+
}

‎src/features/dashboard/hook/useEmailHook.ts‎

Lines changed: 44 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,60 @@
11
import { useMutation, useQuery } from '@tanstack/react-query';
2-
import { sendEmail, editEmail, readEmail } from '../api/mail';
2+
import { sendEmail, editEmail, readEmail, deleteEmail } from '../api/mail';
33
import { EmailRequest, EmailResponse, ReadEmailResponse } from '../model/emailInformation';
4+
import { useNavigate, useParams } from 'react-router-dom';
5+
import { useEmailStore } from '../model/EmailStore';
6+
7+
export const useReadEmail = (eventId: number, status: 'PENDING' | 'SENT') => {
8+
return useQuery<ReadEmailResponse[]>({
9+
queryKey: ['emails', eventId, status],
10+
queryFn: () => readEmail(eventId, status),
11+
enabled: !!eventId && !!status,
12+
});
13+
}
414

515
export const useSendEmail = () => {
16+
const { id } = useParams();
17+
const navigate = useNavigate();
18+
const { reset } = useEmailStore();
619
return useMutation<EmailResponse, Error, EmailRequest>({
720
mutationFn: sendEmail,
21+
onSuccess: () => {
22+
reset();
23+
alert("예약 메일이 성공적으로 발송되었습니다!");
24+
navigate(`/dashboard/${id}/mailBox`);
25+
},
26+
onError: () => {
27+
alert("메일 전송에 실패했습니다. 다시 시도해 주세요.");
28+
},
829
});
930
};
1031

1132
export const useEditEmail = () => {
33+
const { id } = useParams();
34+
const navigate = useNavigate();
35+
const { reset } = useEmailStore();
1236
return useMutation<EmailResponse, Error, { reservationEmailId: number; data: EmailRequest }>({
1337
mutationFn: ({ reservationEmailId, data }) => editEmail(reservationEmailId, data),
38+
onSuccess: () => {
39+
reset();
40+
alert("예약 메일이 성공적으로 수정되었습니다!");
41+
navigate(`/dashboard/${id}/mailBox`);
42+
},
43+
onError: () => {
44+
alert("메일 수정에 실패했습니다. 다시 시도해 주세요.");
45+
},
1446
});
1547
};
1648

17-
export const useReadEmail = (eventId: number, status: 'PENDING' | 'SENT') => {
18-
return useQuery<ReadEmailResponse[]>({
19-
queryKey: ['emails', eventId, status],
20-
queryFn: () => readEmail(eventId, status),
21-
enabled: !!eventId && !!status,
22-
});
49+
export const useDeleteEmail = () => {
50+
return useMutation<EmailResponse, Error, number>({
51+
mutationFn: (reservationEmailId) => deleteEmail(reservationEmailId),
52+
onSuccess: () => {
53+
alert("메일이 삭제되었습니다.");
54+
window.location.reload();
55+
},
56+
onError: () => {
57+
alert("메일 삭제에 실패했습니다. 다시 시도해 주세요.");
58+
}
59+
});
2360
}

‎src/pages/dashboard/ui/mail/EmailEditPage.tsx‎

Lines changed: 2 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { useState } from 'react';
2-
import { useNavigate, useParams } from 'react-router-dom';
2+
import { useParams } from 'react-router-dom';
33
import DashboardLayout from '../../../../shared/ui/backgrounds/DashboardLayout';
44
import EmailInput from '../../../../features/dashboard/ui/EmailInput';
55
import TimePicker from '../../../../features/event-manage/event-create/ui/TimePicker';
@@ -9,7 +9,6 @@ import { useParticipants } from '../../../../features/dashboard/hook/useParticip
99
import { useEmailStore } from '../../../../features/dashboard/model/EmailStore';
1010
import { useEditEmail } from '../../../../features/dashboard/hook/useEmailHook';
1111
const EmailEditPage = () => {
12-
const navigate = useNavigate();
1312
const [ticketModalOpen, setTicketModalOpen] = useState(false);
1413
const { participants } = useParticipants();
1514
const { id } = useParams();
@@ -24,7 +23,6 @@ const EmailEditPage = () => {
2423
reservationTime,
2524
setReservationDate,
2625
setReservationTime,
27-
reset,
2826
} = useEmailStore();
2927

3028
const handleEdit = () => {
@@ -37,21 +35,7 @@ const EmailEditPage = () => {
3735
reservationDate,
3836
reservationTime,
3937
};
40-
console.log(emailData);
41-
42-
editEmail({
43-
reservationEmailId: reservationEmailId,
44-
data: emailData,
45-
},{
46-
onSuccess: () => {
47-
reset();
48-
alert("예약 메일이 성공적으로 수정되었습니다!");
49-
navigate(`/dashboard/${id}/mailBox`);
50-
},
51-
onError: () => {
52-
alert("메일 수정에 실패했습니다. 다시 시도해 주세요.");
53-
},
54-
});
38+
editEmail({ reservationEmailId: reservationEmailId, data: emailData,});
5539
};
5640

5741
return (

‎src/pages/dashboard/ui/mail/EmailPage.tsx‎

Lines changed: 2 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,12 @@ import TimePicker from '../../../../features/event-manage/event-create/ui/TimePi
44
import EmailInput from '../../../../features/dashboard/ui/EmailInput';
55
import { useState } from 'react';
66
import SelectTicketModal from '../../../../widgets/dashboard/ui/SelectTicketModal';
7-
import { useNavigate, useParams } from 'react-router-dom';
7+
import { useParams } from 'react-router-dom';
88
import { useParticipants } from '../../../../features/dashboard/hook/useParticipants';
99
import { useEmailStore } from '../../../../features/dashboard/model/EmailStore';
1010
import { useSendEmail } from '../../../../features/dashboard/hook/useEmailHook';
1111

1212
const EmailPage = () => {
13-
const navigate = useNavigate();
1413
const [ticketModalOpen, setTicketModalOpen] = useState(false);
1514
const { participants } = useParticipants();
1615
const { id } = useParams();
@@ -24,7 +23,6 @@ const EmailPage = () => {
2423
reservationTime,
2524
setReservationDate,
2625
setReservationTime,
27-
reset,
2826
} = useEmailStore();
2927

3028
const handleSend = () => {
@@ -37,18 +35,8 @@ const EmailPage = () => {
3735
reservationDate,
3836
reservationTime,
3937
};
40-
console.log(emailData);
4138

42-
sendEmail(emailData, {
43-
onSuccess: () => {
44-
reset();
45-
alert("예약 메일이 성공적으로 발송되었습니다!");
46-
navigate(`/dashboard/${id}/mailBox`);
47-
},
48-
onError: () => {
49-
alert("메일 전송에 실패했습니다. 다시 시도해 주세요.");
50-
},
51-
});
39+
sendEmail(emailData);
5240
};
5341

5442
return (

‎src/pages/dashboard/ui/mail/MailBoxPage.tsx‎

Lines changed: 25 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,23 @@ import SearchBar from '../../../../shared/ui/SearchBar';
55
import SentMailCard from '../../../../widgets/dashboard/ui/SentMailCard';
66
import EmailDeleteMoal from '../../../../widgets/dashboard/ui/EmailDeleteModal';
77
import { useParams } from 'react-router-dom';
8-
import { useReadEmail } from '../../../../features/dashboard/hook/useEmailHook';
8+
import { useDeleteEmail, useReadEmail } from '../../../../features/dashboard/hook/useEmailHook';
99

1010
const MailBoxPage = () => {
1111
const { id } = useParams();
1212
const eventId = id ? parseInt(id) : 0;
1313
const [listType, setListType] = useState<'completed' | 'pending'>('completed');
1414
const [isModalOpen, setIsModalOpen] = useState(false);
15+
const [selectedEmailId, setSelectedEmailId] = useState<number | null>(null);
1516

1617
const status = listType === 'pending' ? 'PENDING' : 'SENT';
17-
const { data: emails = [], isLoading } = useReadEmail(eventId,status);
18+
const { data: emails = [], isLoading } = useReadEmail(eventId, status);
19+
const { mutate: deleteEmail } = useDeleteEmail();
20+
21+
const handleDelete = (reservationEmailId: number) => {
22+
deleteEmail(reservationEmailId);
23+
setIsModalOpen(false);
24+
}
1825

1926
return (
2027
<DashboardLayout centerContent="WOOACON 2024">
@@ -38,22 +45,28 @@ const MailBoxPage = () => {
3845
{isLoading ? (
3946
<div>로딩 중...</div>
4047
) : (
41-
emails.map(mail => (
42-
<SentMailCard
43-
key={mail.id}
44-
mail={mail}
45-
isPending={listType === 'pending' ? true : false}
46-
setIsModalOpen={setIsModalOpen}
47-
/>
48-
)))}
48+
emails.map(mail => (
49+
<SentMailCard
50+
key={mail.id}
51+
mail={mail}
52+
isPending={listType === 'pending' ? true : false}
53+
onClickDelete={() => {
54+
setSelectedEmailId(mail.id);
55+
setIsModalOpen(true);
56+
}}
57+
/>
58+
)))}
4959
</div>
5060
{isModalOpen && (
5161
<EmailDeleteMoal
5262
mainText="이메일을 삭제하면 예약이 자동으로 취소됩니다.. 그래도 삭제하시겠습니까?"
5363
approveButtonText="삭제"
5464
rejectButtonText="취소"
55-
onClose={() => setIsModalOpen(false)}
56-
onClick={() => setIsModalOpen(false)} //임시
65+
onClose={() => {
66+
setIsModalOpen(false);
67+
setSelectedEmailId(null);
68+
}}
69+
onClick={() => handleDelete(selectedEmailId || 0)}
5770
/>
5871
)}
5972
</DashboardLayout>

‎src/widgets/dashboard/ui/EmailModal.tsx‎

Lines changed: 2 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { useNavigate, useParams } from 'react-router-dom';
1+
import { useParams } from 'react-router-dom';
22
import TertiaryButton from '../../../../design-system/ui/buttons/TertiaryButton';
33
import { useEmailStore } from '../../../features/dashboard/model/EmailStore';
44
import EmailInput from '../../../features/dashboard/ui/EmailInput';
@@ -11,7 +11,6 @@ interface EmailModalProps {
1111
allParticipantEmails: string[];
1212
}
1313
const EmailModal = ({ onClose, openSelectTicket, allParticipantEmails }: EmailModalProps) => {
14-
const navigate = useNavigate();
1514
const { id } = useParams();
1615
const { mutate: sendEmail } = useSendEmail();
1716

@@ -23,7 +22,6 @@ const EmailModal = ({ onClose, openSelectTicket, allParticipantEmails }: EmailMo
2322
reservationTime,
2423
setReservationDate,
2524
setReservationTime,
26-
reset,
2725
} = useEmailStore();
2826

2927
const handleSend = () => {
@@ -36,17 +34,7 @@ const EmailModal = ({ onClose, openSelectTicket, allParticipantEmails }: EmailMo
3634
reservationDate,
3735
reservationTime,
3836
};
39-
console.log(emailData);
40-
sendEmail(emailData, {
41-
onSuccess: () => {
42-
reset();
43-
alert("예약 메일이 성공적으로 발송되었습니다!");
44-
navigate(`/dashboard/${id}/mailBox`);
45-
},
46-
onError: () => {
47-
alert("메일 전송에 실패했습니다. 다시 시도해 주세요.");
48-
},
49-
});
37+
sendEmail(emailData);
5038
};
5139

5240
return (

‎src/widgets/dashboard/ui/SentMailCard.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,11 @@ import { useEmailStore } from '../../../features/dashboard/model/EmailStore';
1010
interface SentMailCardProps {
1111
mail: ReadEmailResponse;
1212
isPending: boolean;
13-
setIsModalOpen: React.Dispatch<React.SetStateAction<boolean>>;
13+
setIsModalOpen?: React.Dispatch<React.SetStateAction<boolean>>;
14+
onClickDelete?: () => void;
1415
}
1516

16-
const SentMailCard = ({ mail, isPending = false, setIsModalOpen }: SentMailCardProps) => {
17+
const SentMailCard = ({ mail, isPending = false, onClickDelete }: SentMailCardProps) => {
1718
const navigate = useNavigate();
1819
const [isOpen, setIsOpen] = useState(false);
1920
const { id } = useParams();
@@ -55,7 +56,7 @@ const SentMailCard = ({ mail, isPending = false, setIsModalOpen }: SentMailCardP
5556
type="button"
5657
color="black"
5758
size="medium"
58-
onClick={() => setIsModalOpen(true)}
59+
onClick={onClickDelete}
5960
/>
6061
<TertiaryButton
6162
label="수정하기"

0 commit comments

Comments
 (0)
⚡