From 32a83eef4ecd7eeae6de6e2fb53eaf29117977b0 Mon Sep 17 00:00:00 2001
From: kimtree24 <ktj503@naver.com>
Date: Thu, 5 Dec 2024 18:17:26 +0900
Subject: [PATCH] =?UTF-8?q?FIX:=EB=A9=94=EC=84=B8=EC=A7=80=20=EB=A1=9C?=
 =?UTF-8?q?=EC=A7=81=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/userpage/MessageDetail.jsx | 122 ++++++++++++++++++---------
 1 file changed, 84 insertions(+), 38 deletions(-)

diff --git a/src/pages/userpage/MessageDetail.jsx b/src/pages/userpage/MessageDetail.jsx
index eba73c9..5571154 100644
--- a/src/pages/userpage/MessageDetail.jsx
+++ b/src/pages/userpage/MessageDetail.jsx
@@ -29,57 +29,103 @@ const MessageDetail = () => {
     userA = localStorage.getItem("localReceiverId")
   }
 
-  useEffect(() => {
-    const messageList = async () => {
-      try {
-        //console.log(receiverId)
-        const response = await getMessage(localStorage.getItem("localSenderId"), localStorage.getItem("localReceiverId"), itemId, itemType);
-        //console.log(userA, userID)
-        const formattedMessages = response.map((msg) => ({
-          sender: localStorage.getItem("userID") == msg.senderId ? "me" : "you",
-          timestamp: `${msg.timestamp.slice(0, 10)} ${msg.timestamp.slice(11, 16)}`,
-          message: msg.message
-        }));
-        setMessages(formattedMessages);
-        console.log(response)
-      } catch (error) {
-        console.error(error);
-        //console.log(userA, userID)
-      }
-    };
+  // useEffect(() => {
+  //   const messageList = async () => {
+  //     try {
+  //       //console.log(receiverId)
+  //       const response = await getMessage(localStorage.getItem("localSenderId"), localStorage.getItem("localReceiverId"), itemId, itemType);
+  //       //console.log(userA, userID)
+  //       const formattedMessages = response.map((msg) => ({
+  //         sender: localStorage.getItem("userID") == msg.senderId ? "me" : "you",
+  //         timestamp: `${msg.timestamp.slice(0, 10)} ${msg.timestamp.slice(11, 16)}`,
+  //         message: msg.message
+  //       }));
+  //       setMessages(formattedMessages);
+  //       console.log(response)
+  //     } catch (error) {
+  //       console.error(error);
+  //       //console.log(userA, userID)
+  //     }
+  //   };
 
-    messageList();
+  //   messageList();
 
-    const interval = setInterval(() => {
-      window.location.reload();
-    }, 2000); // 1000ms = 1초
+  //   const interval = setInterval(() => {
+  //     window.location.reload();
+  //   }, 2000); // 1000ms = 1초
 
-    // 컴포넌트가 언마운트될 때 interval 제거
-    return () => clearInterval(interval);
+  //   // 컴포넌트가 언마운트될 때 interval 제거
+  //   return () => clearInterval(interval);
 
-    //console.log(itemId, itemType, userA)
-  }, []);
+  //   //console.log(itemId, itemType, userA)
+  // }, []);
 
 
   const [messages, setMessages] = useState([]);
 
   const [newMessage, setNewMessage] = useState("");
 
-  const handleSendMessage = async() => {
-    console.log(itemId, itemType, receiverId, newMessage)
-    //let newReceiverId = senderId;
-    let userA
-    if(localStorage.getItem("userID") == localStorage.getItem("localReceiverId")){
-      userA = localStorage.getItem("localSenderId")
-    }else{
-      userA = localStorage.getItem("localReceiverId")
+  const fetchMessages = async () => {
+    try {
+      const response = await getMessage(
+        localStorage.getItem("localSenderId"),
+        localStorage.getItem("localReceiverId"),
+        itemId,
+        itemType
+      );
+      const formattedMessages = response.map((msg) => ({
+        sender: localStorage.getItem("userID") === msg.senderId ? "me" : "you",
+        timestamp: `${msg.timestamp.slice(0, 10)} ${msg.timestamp.slice(11, 16)}`,
+        message: msg.message,
+      }));
+      // 상태가 변경된 경우만 업데이트
+      if (JSON.stringify(messages) !== JSON.stringify(formattedMessages)) {
+        setMessages(formattedMessages);
+      }
+    } catch (error) {
+      console.error(error);
     }
-    const response = await sendMessage(itemId, itemType, userA, newMessage)
-    //console.log(response)
-    window.location.reload();
+  };
+
+  useEffect(() => {
+    fetchMessages(); // 처음 렌더링 시 메시지 가져오기
+
+    const interval = setInterval(() => {
+      fetchMessages(); // 2초마다 메시지 가져오기
+    }, 2000);
+
+    return () => clearInterval(interval); // 컴포넌트 언마운트 시 interval 제거
+  }, []);
 
+  const handleSendMessage = async () => {
+    let userA = localStorage.getItem("userID") === localStorage.getItem("localReceiverId")
+      ? localStorage.getItem("localSenderId")
+      : localStorage.getItem("localReceiverId");
+
+    try {
+      await sendMessage(itemId, itemType, userA, newMessage);
+      setNewMessage(""); // 입력창 초기화
+      fetchMessages(); // 메시지 전송 후 최신 메시지 가져오기
+    } catch (error) {
+      console.error(error);
+    }
   };
 
+  // const handleSendMessage = async() => {
+  //   console.log(itemId, itemType, receiverId, newMessage)
+  //   //let newReceiverId = senderId;
+  //   let userA
+  //   if(localStorage.getItem("userID") == localStorage.getItem("localReceiverId")){
+  //     userA = localStorage.getItem("localSenderId")
+  //   }else{
+  //     userA = localStorage.getItem("localReceiverId")
+  //   }
+  //   const response = await sendMessage(itemId, itemType, userA, newMessage)
+  //   //console.log(response)
+  //   window.location.reload();
+
+  // };
+
   const handleInputChange = (e) => {
     setNewMessage(e.target.value);
   };
@@ -88,7 +134,7 @@ const MessageDetail = () => {
     if (e.key === "Enter") {
       e.preventDefault();
       handleSendMessage();
-      window.location.reload();
+      //window.location.reload();
     }
   };