[#60] EmojiBadge component에 hover displaying 기능 추가

src/components/badge/emoji-badge.jsx

@@ -19,17 +19,43 @@ const Content = styled.div`
   font-weight: 400;
   line-height: 20px;
 
+  ${({ $hidesCount }) =>
+    $hidesCount
+      ? `
+          &:hover {
+            & > span:first-child {
+              display: none;
+            }
+
+            & > span:last-child {
+              display: inline;
+            }  
+          }
+
+          & > span:last-child {
+            display: none;
+          }
+        `
+      : ""};
+
   ${media.mobile} {
     gap: 6px;
     font-size: 14px;
     line-height: 20px;
   }
 `;
 
-function EmojiBadge({ emoji, count }) {
+function EmojiBadge({ emoji, count, maxDigits }) {
+  let hidesCount;
+  if (maxDigits) {
+    hidesCount = String(count).length > maxDigits;
+  } else {
+    hidesCount = false;
+  }
+
   return (
     <StyledEmojiBadge>
-      <Content>
+      <Content $hidesCount={hidesCount}>
         <span>{emoji}</span>
         <span>{count}</span>
       </Content>

src/features/rolling-paper/components/rolling-paper-list.jsx

@@ -1,12 +1,13 @@
-import ArrowButton from "../../../components/button/arrow-button";
-import ARROW_BUTTON_DIRECTION from "../../../components/button/arrow-button-direction";
-import { media } from "../../../utils/media";
-import React, { useMemo } from "react";
+import { useMemo } from "react";
 import styled, { css } from "styled-components";
 import Avatar from "../../../components/avatar/avatar";
 import AVATAR_SIZE from "../../../components/avatar/avatar-size";
+import EmojiBadge from "../../../components/badge/emoji-badge";
+import ArrowButton from "../../../components/button/arrow-button";
+import ARROW_BUTTON_DIRECTION from "../../../components/button/arrow-button-direction";
 import CardBackground from "../../../components/image/card-background";
 import { useImageListLodeChecker } from "../../../hooks/use-image-loader";
+import { media } from "../../../utils/media";
 import { useNavigate } from "react-router";
 
 const CardContainer = styled.div`
@@ -218,57 +219,12 @@ const CardEmojiBox = styled.div`
 
   display: flex;
   flex-wrap: wrap;
-  row-gap: 5px;
+  gap: 8px;
   z-index: 2;
 
   ${media.mobile} {
     padding-top: 10px;
-  }
-`;
-
-const CardEmoji = styled.span`
-  background-color: rgba(0, 0, 0, 0.54);
-  border-radius: 32px;
-  color: #ffffff;
-  padding: 8px 12px;
-  margin-right: 5px;
-
-  position: relative;
-  white-space: nowrap;
-  overflow: hidden;
-
-  font-size: 16px;
-  font-weight: 400;
-
-  transition: max-width 0.3s ease, z-index 0s;
-
-  &:hover {
-    max-width: 200px;
-    z-index: 100;
-    position: relative;
-  }
-
-  ${media.mobile} {
-    font-size: 14px;
-    padding: 8px 8px;
-    margin-right: 3px;
-  }
-`;
-
-const HiddenCount = styled.span`
-  display: inline;
-
-  .show-on-hover {
-    display: none;
-  }
-
-  ${CardEmoji}:hover & {
-    .show-on-hover {
-      display: inline;
-    }
-    .hide-on-hover {
-      display: none;
-    }
+    gap: 4px;
   }
 `;
 
@@ -352,23 +308,13 @@ function RollingPaperList({ cardData, totalPages, currentPage, onTurnCards }) {
             <em>{card.messageCount}</em>명이 작성했어요!
           </MessageCountText>
           <CardEmojiBox $haveEmoji={card.topReactions.length > 0}>
-            {card.topReactions.map((emoji, index) => {
-              const countLength = emoji.count.toString().length;
-              const isLongCount = countLength > 2;
-
-              return (
-                <CardEmoji key={index} $isLong={isLongCount}>
-                  {isLongCount ? (
-                    <HiddenCount>
-                      <span className="hide-on-hover">{emoji.emoji}</span>
-                      <span className="show-on-hover"> {emoji.count}</span>
-                    </HiddenCount>
-                  ) : (
-                    `${emoji.emoji} ${emoji.count}`
-                  )}
-                </CardEmoji>
-              );
-            })}
+            {card.topReactions.map((reaction) => (
+              <EmojiBadge
+                emoji={reaction.emoji}
+                count={reaction.count}
+                maxDigits={2}
+              />
+            ))}
           </CardEmojiBox>
         </CardItem>
       ))}

src/tests/test-components-page.jsx

@@ -165,7 +165,7 @@ function TestComponentsPage() {
         <EmojiBadge emoji="😚" count={1} />
         <EmojiBadge emoji="😁" count={10} />
         <EmojiBadge emoji="😉" count={100} />
-        <EmojiBadge emoji="😊" count={1000} />
+        <EmojiBadge emoji="😊" count={1000} maxDigits={2} />
       </div>
       <div style={{ display: "flex", gap: 16 }}>
         <TextField type={TEXT_FIELD_TYPE.input} placeholder="Placeholder" />