From e71ba18ffae94838de37bfc9e599159229d2575f Mon Sep 17 00:00:00 2001
From: parkchanyoung0710 <call4892@naver.com>
Date: Thu, 20 Mar 2025 02:40:52 +0900
Subject: [PATCH] =?UTF-8?q?=EC=9D=B4=EB=AA=A8=ED=8B=B0=EC=BD=98=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/Emoji/Emoji.jsx | 65 ++++++++++++++++-----------
 1 file changed, 38 insertions(+), 27 deletions(-)

diff --git a/src/components/common/Emoji/Emoji.jsx b/src/components/common/Emoji/Emoji.jsx
index 033703d..93db027 100644
--- a/src/components/common/Emoji/Emoji.jsx
+++ b/src/components/common/Emoji/Emoji.jsx
@@ -38,35 +38,46 @@ function Emoji({ topReactions = [], setRecipientData }) {
 
   // 이모티콘 추가 및 상태 업데이트
   const handleEmojiSelect = async (emojiObject) => {
-    const { emoji } = emojiObject;
-    const type = "increase";
-
-    try {
-      await recipientsService.postRecipientsReactions(id, { emoji, type });
-      await fetchUpdatedReactions();
-    } catch (error) {
-      console.error("Error sending reaction:", error);
-    }
-  };
+  const { emoji } = emojiObject;
+  const type = "increase";
+
+  try {
+    // 서버에 반응을 보냄
+    await recipientsService.postRecipientsReactions(id, { emoji, type });
+
+    // 반응 데이터 갱신
+    await fetchUpdatedReactions();
+  } catch (error) {
+    console.error("Error sending reaction:", error);
+  }
+};
+
+const fetchUpdatedReactions = async () => {
+  try {
+    const response = await recipientsService.getRecipientsReactions(id);
+    const updatedReactions = response.data.results;
 
   
-  const fetchUpdatedReactions = async () => {
-    try {
-      const response = await recipientsService.getRecipientsReactions(id);
-      const updatedReactions = response.data.results;
-
-      setRecipientData((prev) => ({
-        ...prev,
-        topReactions: updatedReactions,
-      }));
-
-      // 전체 이모티콘 리스트 업데이트 후 로컬 스토리지 저장
-      setAllReactions(updatedReactions);
-      localStorage.setItem("allReactions", JSON.stringify(updatedReactions));
-    } catch (error) {
-      console.error("Error fetching reactions:", error);
-    }
-  };
+    const topEmojis = updatedReactions.slice(0, TOP_EMOJIS);
+
+  
+    const allEmojis = updatedReactions.length > 8 ? updatedReactions.slice(0, 8) : updatedReactions;
+
+    
+    setRecipientData((prev) => ({
+      ...prev,
+      topReactions: topEmojis, 
+    }));
+
+    setAllReactions(allEmojis); 
+
+    
+    localStorage.setItem("allReactions", JSON.stringify(allEmojis));
+
+  } catch (error) {
+    console.error("Error fetching reactions:", error);
+  }
+};
 
   return (
     <ServiceContainer>