Refactor: post id 페이지, post 카드 리팩터링

src/components/post/PostCard.jsx

@@ -1,6 +1,5 @@
 import { motion } from 'framer-motion';
 
-import { deleteMessage } from '@/apis/post/postAPI';
 import Button from '@/components/common/button/Button';
 import Card from '@/components/common/card/Card';
 import Icon from '@/components/common/icon/Icon';
@@ -10,7 +9,7 @@ import { fontNamesEng } from '@/constants/fontNames';
 import { formatDate } from '@/utils/dateUtils';
 import { hoverCard } from '@/utils/framerAnimation';
 
-function PostCard({ message, openModal, isEdit, reload }) {
+function PostCard({ message, openModal, isEdit, deleteMessage }) {
 	const {
 		profileImageURL,
 		sender,
@@ -23,13 +22,7 @@ function PostCard({ message, openModal, isEdit, reload }) {
 
 	const handleClickDelete = async (e) => {
 		e.stopPropagation();
-		const result = await deleteMessage(id);
-		if (!result) {
-			// TODO: 삭제 실패 toast
-			return;
-		}
-
-		await reload();
+		deleteMessage(id);
 	};
 
 	return (

src/components/post/PostModal.jsx

@@ -17,7 +17,8 @@ const PostModal = () => {
 	useEffect(() => {
 		if (isModalOpen) {
 			dialogRef.current.showModal();
-		} else if (dialogRef.current.open) {
+		}
+		if (!isModalOpen) {
 			dialogRef.current.close();
 		}
 	}, [isModalOpen]);

src/pages/post/PostIdPage.jsx

@@ -1,7 +1,11 @@
 import { useState } from 'react';
 import { useLoaderData, useLocation, useNavigate } from 'react-router-dom';
 
-import { deleteRecipient, getMessageList } from '@/apis/post/postAPI';
+import {
+	deleteMessage,
+	deleteRecipient,
+	getMessageList,
+} from '@/apis/post/postAPI';
 import Button from '@/components/common/button/Button';
 import NewMessageCTA from '@/components/post/NewMessageCTA';
 import PostCard from '@/components/post/PostCard';
@@ -17,6 +21,7 @@ export default function PostIdPage() {
 	const navigate = useNavigate();
 	const { recipientId, messageListInfo, recipientInfo } = useLoaderData();
 	const { isModalOpen, openModal } = useModalContext();
+	console.log(isModalOpen);
 
 	const isEdit = pathname.includes('edit');
 
@@ -59,6 +64,16 @@ export default function PostIdPage() {
 		setIsLoading(false);
 	};
 
+	const handleClickDeleteMessage = async (id) => {
+		const result = await deleteMessage(id);
+		if (!result) {
+			// TODO: 삭제 실패 toast
+			return;
+		}
+
+		await reload();
+	};
+
 	const handleClickDelete = async () => {
 		const result = await deleteRecipient(recipientId);
 		if (!result) {
@@ -101,7 +116,7 @@ export default function PostIdPage() {
 						message={message}
 						openModal={openModal}
 						isEdit={isEdit}
-						reload={reload}
+						deleteMessage={handleClickDeleteMessage}
 					></PostCard>
 				))}