feat [#52] 메시지 삭제 기능 구현

Author: cskime

src/features/message/api/messages.js

@@ -37,4 +37,11 @@ async function getNextPageMessages() {
   return data.results;
 }
 
-export { getMessages, getNextPageMessages };
+async function deleteMessage({ id }) {
+  const response = await apiClient.delete(`messages/${id}/`);
+  if (response.status !== 204) {
+    throw new Error("Message를 삭제하는데 실패했습니다.");
+  }
+}
+
+export { deleteMessage, getMessages, getNextPageMessages };

src/features/message/components/messages-grid.jsx

@@ -48,7 +48,7 @@ function MessagesGrid({ isEditing, messages, onDelete, onInfiniteScroll }) {
       key={message.id}
       isEditing={isEditing}
       message={message}
-      onDelete={(event) => handleDeleteClick(event, message.id)}
+      onDelete={() => handleDeleteClick(message.id)}
     />
   );
 

src/pages/messages-page.jsx

@@ -5,6 +5,7 @@ import { OutlinedButton, PrimaryButton } from "../components/button/button";
 import BUTTON_SIZE from "../components/button/button-size";
 import BACKGROUND_COLOR from "../components/color/background-color";
 import {
+  deleteMessage,
   getMessages,
   getNextPageMessages,
 } from "../features/message/api/messages";
@@ -77,7 +78,7 @@ function EditingButtons({ onDelete, onCancel }) {
       />
       <OutlinedButton
         size={BUTTON_SIZE.medium}
-        title="취소하기"
+        title="완료하기"
         onClick={onCancel}
       />
     </ButtonContainer>
@@ -111,9 +112,14 @@ function MessagesPage() {
     navigate(-1);
   };
 
-  const handleMessageDelete = (messageId) => {
-    // TODO: Message 삭제
-    console.log(`Delete Message ${messageId}`);
+  const handleMessageDelete = async (messageId) => {
+    try {
+      await deleteMessage({ id: messageId });
+      setMessages((prev) => prev.filter((message) => message.id !== messageId));
+    } catch (error) {
+      // TODO: Error 처리
+      console.log(error);
+    }
   };
 
   const handleInfiniteScroll = async () => {