Merge pull request codeit-maso#113 from codeit-maso/feature/chan

✨ feat: 이모지 리액션 옵티미스틱 UI 적용 및 드래그 방지

Author: LeeCh0129

src/components/FontSelect/FontSelect.jsx

@@ -1,4 +1,4 @@
-import { useState, useRef, useId } from 'react';
+import { useRef, useId } from 'react';
 import useDetectClose from '../../hooks/useDetectClose';
 import styles from './FontSelect.module.scss';
 

src/components/recipient/HeaderService/HeaderService.jsx

@@ -9,6 +9,8 @@ export default function HeaderService({ recipient }) {
   const [reactions, setReactions] = useState([]);
   const [showEmojiPicker, setShowEmojiPicker] = useState(false);
   const [showAllEmojisDropdown, setShowAllEmojisDropdown] = useState(false);
+  const pendingEmojisRef = useRef([]);
+  const [pendingEmojis, setPendingEmojis] = useState([]);
   const emojiPickerRef = useRef(null);
   const emojiMoreRef = useRef(null);
   const [isLargeScreen, setIsLargeScreen] = useState(true);
@@ -81,16 +83,45 @@ export default function HeaderService({ recipient }) {
 
   const handleAddReaction = async (emoji) => {
     if (!recipient?.id) return;
+    if (pendingEmojisRef.current.includes(emoji)) return;
+
+    pendingEmojisRef.current = [...pendingEmojisRef.current, emoji];
+    setPendingEmojis(pendingEmojisRef.current);
+
+    setReactions((prev) => {
+      const found = prev.find((r) => r.emoji === emoji);
+      if (found) {
+        return prev.map((r) =>
+          r.emoji === emoji ? { ...r, count: r.count + 1 } : r,
+        );
+      } else {
+        return [...prev, { id: `optimistic-${emoji}`, emoji, count: 1 }];
+      }
+    });
 
     try {
       await addReaction(recipient.id, emoji);
-
       const updatedReactions = await fetchReactions(recipient.id);
       setReactions(updatedReactions);
+    } catch (error) {
+      console.error(error);
+      setReactions((prev) => {
+        const found = prev.find((r) => r.emoji === emoji);
+        if (found && found.count === 1 && found.id?.startsWith('optimistic-')) {
+          return prev.filter((r) => r.emoji !== emoji);
+        } else {
+          return prev.map((r) =>
+            r.emoji === emoji ? { ...r, count: r.count - 1 } : r,
+          );
+        }
+      });
+    } finally {
+      pendingEmojisRef.current = pendingEmojisRef.current.filter(
+        (e) => e !== emoji,
+      );
+      setPendingEmojis(pendingEmojisRef.current);
       setShowEmojiPicker(false);
       setShowAllEmojisDropdown(false);
-    } catch (error) {
-      console.error('이모지 추가 실패:', error);
     }
   };
 
@@ -148,13 +179,19 @@ export default function HeaderService({ recipient }) {
               <div className={styles['header-service__emojis']}>
                 {topReactions.length > 0 ? (
                   topReactions.map((reaction) => (
-                    <div
+                    <button
                       key={reaction.id}
                       className={styles['header-service__emoji-item']}
                       onClick={() => handleAddReaction(reaction.emoji)}
+                      disabled={pendingEmojis.includes(reaction.emoji)}
                     >
-                      {reaction.emoji} {reaction.count}
-                    </div>
+                      <span className={styles['header-service__emoji']}>
+                        {reaction.emoji}
+                      </span>{' '}
+                      <span className={styles['header-service__count']}>
+                        {reaction.count}
+                      </span>
+                    </button>
                   ))
                 ) : (
                   <span>아직 리액션이 없어요</span>
@@ -188,15 +225,21 @@ export default function HeaderService({ recipient }) {
                           .sort((a, b) => b.count - a.count)
                           .slice(0, isLargeScreen ? 8 : 6)
                           .map((reaction) => (
-                            <div
+                            <button
                               key={reaction.id}
                               className={
                                 styles['header-service__emoji-dropdown-item']
                               }
                               onClick={() => handleAddReaction(reaction.emoji)}
+                              disabled={pendingEmojis.includes(reaction.emoji)}
                             >
-                              {reaction.emoji} {reaction.count}
-                            </div>
+                              <span className={styles['header-service__emoji']}>
+                                {reaction.emoji}
+                              </span>{' '}
+                              <span className={styles['header-service__count']}>
+                                {reaction.count}
+                              </span>
+                            </button>
                           ))
                       ) : (
                         <span>아직 리액션이 없어요</span>

src/components/recipient/HeaderService/HeaderService.module.scss

@@ -232,6 +232,8 @@
     transition:
       transform 0.2s ease,
       background-color 0.2s ease;
+    user-select: none;
+    -webkit-user-select: none;
 
     &:hover {
       background-color: #5d5d5d;
@@ -252,6 +254,12 @@
       padding: 2px 6px;
       font-size: 13px;
     }
+
+    &:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+      pointer-events: none;
+    }
   }
 
   &__emoji-more-container {
@@ -296,13 +304,15 @@
     }
 
     @media (max-width: 767px) {
+      right: -24px;
       width: 240px;
       min-width: auto;
       box-sizing: border-box;
     }
 
     @media (max-width: 420px) {
-      width: 220px;
+      right: -12px;
+      width: 200px;
       padding: 8px;
       top: 35px;
     }
@@ -347,6 +357,8 @@
       transform 0.2s ease,
       background-color 0.2s ease;
     text-align: center;
+    user-select: none;
+    -webkit-user-select: none;
 
     &:hover {
       background-color: #5d5d5d;
@@ -366,6 +378,12 @@
       padding: 2px 6px;
       font-size: 13px;
     }
+
+    &:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+      pointer-events: none;
+    }
   }
 
   &__add-button {