Fix: Card Delete 후 리렌더링 안되던 내용 수정 (임시)

src/components/common/Buttons/DeleteMessageButton.js

@@ -1,18 +1,21 @@
 import styled from 'styled-components';
-import { useLocation } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 import { Outlined36 } from '../../../styles/ButtonStyle';
 
 function DeleteMessageButton({ id, onDelete }) {
+  const navigate = useNavigate();
   const location = useLocation();
   const isEditRoute = location.pathname.includes('/edit');
 
   const handleButtonClick = async (e) => {
     e.stopPropagation();
-    onDelete(id);
+    await onDelete(id);
+    // navigate('/post/4210/edit');
+    navigate(0);
   };
 
   return (
-    <Button onClick={(e) => handleButtonClick(e)} $isDisplay={isEditRoute}>
+    <Button onClick={handleButtonClick} $isDisplay={isEditRoute}>
       <DeleteImg src="/img/deleted.svg" alt="삭제" />
     </Button>
   );

src/components/post/card/CardItems.jsx

@@ -23,6 +23,7 @@ const CardContainer = styled.div`
 `;
 // eslint-disable-next-line
 const CardAdd = styled(CardContentWrapper)`
+  display: ${({ $isDisplay }) => ($isDisplay ? ' none' : 'block')};
   justify-content: center;
   position: relative;
   transition: all 0.4s ease-out;
@@ -71,9 +72,9 @@ function CardItems({ onDelete, data }) {
     }
   };
 
-  // useEffect(() => {
-  //   handleMessages(id);
-  // }, []);
+  useEffect(() => {
+    handleMessages(id);
+  }, [id]);
 
   useEffect(() => {
     let observer;

src/pages/PostIdEdit.jsx

@@ -1,7 +1,7 @@
 import { useParams } from 'react-router-dom';
 import { useState, useEffect } from 'react';
 import DeleteRecipientButton from '../components/common/Buttons/DeleteRecipientButton';
-import { getRecipientData, getAllMessages } from '../api/GetApi';
+import { getRecipientData } from '../api/GetApi';
 import { PostIdWrapper, HeaderWrapper, ButtonSection } from './PostId';
 import Header from '../components/common/Header';
 import SubHeader from '../components/post/SubHeader';
@@ -12,7 +12,7 @@ import BackToPostButton from '../components/common/Buttons/BackToPostButton';
 function PostIdEdit() {
   const { id } = useParams();
   const [data, setData] = useState({});
-  const [messages, setMessages] = useState(null);
+  // const [messages, setMessages] = useState(null);
 
   const handleIdData = async () => {
     try {
@@ -23,27 +23,27 @@ function PostIdEdit() {
     }
   };
 
-  const handleMessages = async () => {
-    try {
-      const result = await getAllMessages(id);
-      setMessages(result.results);
-    } catch (error) {
-      throw new Error('데이터를 불러오지 못했습니다.', error);
-    }
-  };
+  // const handleMessages = async () => {
+  //   try {
+  //     const result = await getAllMessages(id);
+  //     setMessages(result.results);
+  //   } catch (error) {
+  //     throw new Error('데이터를 불러오지 못했습니다.', error);
+  //   }
+  // };
 
   const handleDeleteMessage = async (messageId) => {
     try {
       await deleteMessages(messageId);
-      handleMessages(id);
+      // handleMessages(id);
     } catch (error) {
       throw new Error('메세지 삭제에 실패했습니다.', error);
     }
   };
 
   useEffect(() => {
     handleIdData();
-    handleMessages(id);
+    // handleMessages(id);
   }, [id]);
 
   return (
@@ -59,7 +59,7 @@ function PostIdEdit() {
         <BackToPostButton moveLink={`/post/${id}`} btnName="뒤로가기" />
         <DeleteRecipientButton />
       </ButtonSection>
-      <CardItems messages={messages} onDelete={handleDeleteMessage} />
+      <CardItems messages={data} onDelete={handleDeleteMessage} />
     </PostIdWrapper>
   );
 }