refactor: HoverButton 공통 스타일로 분리

SOPT-all · Nov 25, 2024 · 968deb5 · 968deb5
1 parent 9b48d98
commit 968deb5
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 25 deletions.
diff --git a/src/components/Cart/RecItemSection/RecItemSection.styled.ts b/src/components/Cart/RecItemSection/RecItemSection.styled.ts
@@ -48,7 +48,7 @@ export const RecItem = styled.div`
     display: none;
     position: absolute;
     z-index: 10;
-    bottom: 1.3rem;
+    bottom: 1.4rem;
     left: 50%;
     transform: translateX(-50%);
     gap: 2.5rem;
@@ -63,7 +63,7 @@ export const RecItem = styled.div`
   }
 `;
 
-export const LikeBtn = styled.button`
+export const HoverBtn = styled.button`
   background-color: ${({ theme }) => theme.colors.white};
   border-radius: 50%;
   display: flex;
@@ -72,27 +72,8 @@ export const LikeBtn = styled.button`
   width: 4.8rem;
   height: 4.8rem;
   z-index: 10;
-  filter: brightness(1);
 
   &:hover {
     background-color: ${({ theme }) => theme.colors.purple50};
   }
 `;
-
-export const CartBtn = styled.button`
-  background-color: ${({ theme }) => theme.colors.white};
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 4.8rem;
-  height: 4.8rem;
-  z-index: 10;
-  filter: brightness(1);
-
-  &:hover {
-    background-color: ${({ theme }) => theme.colors.purple50};
-  }
-`;
-
-export const ArrowBtn = styled.button``;
diff --git a/src/components/Cart/RecItemSection/RecItemSection.tsx b/src/components/Cart/RecItemSection/RecItemSection.tsx
@@ -25,7 +25,7 @@ const RecItemSection = () => {
               <S.RecItem>
                 <book.image className="img-cartbook" />
                 <div>
-                  <S.LikeBtn
+                  <S.HoverBtn
                     onMouseEnter={() => setHeartHovered(book.id)}
                     onMouseLeave={() => setHeartHovered(null)}
                   >
@@ -34,8 +34,8 @@ const RecItemSection = () => {
                     ) : (
                       <IcHeartGray />
                     )}
-                  </S.LikeBtn>
-                  <S.CartBtn
+                  </S.HoverBtn>
+                  <S.HoverBtn
                     onMouseEnter={() => setCartHovered(book.id)}
                     onMouseLeave={() => setCartHovered(null)}
                   >
@@ -44,7 +44,7 @@ const RecItemSection = () => {
                     ) : (
                       <IcCartGray />
                     )}
-                  </S.CartBtn>
+                  </S.HoverBtn>
                 </div>
               </S.RecItem>
               <p>{book.title}</p>