style: BookmarkCard hover 시, 이미지 scale 변화

oduck-team · Nov 20, 2023 · 7b395c3 · 7b395c3
1 parent 57575a8
commit 7b395c3
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 6 deletions.
diff --git a/src/features/users/routes/Profile/TabMenu/BookmarkCard.style.ts b/src/features/users/routes/Profile/TabMenu/BookmarkCard.style.ts
@@ -8,23 +8,30 @@ export const BookmarkCardContainer = styled.div`
   padding: 16px;
   margin: 0 -16px;
   cursor: pointer;
-  transition: background-color ease 0.1s;
 
   @media (hover: hover) and (pointer: fine) {
-    &:hover {
-      background-color: #fdfdfd;
+    &:hover img {
+      transform: scale(1.2);
     }
   }
 `;
-export const Image = styled.img`
+export const ImageContainer = styled.div`
   flex-shrink: 0;
   width: 80px;
   height: 100px;
+  overflow: hidden;
   border-radius: 4px;
-  background-color: #d9d9d9;
   margin-right: 8px;
 `;
 
+export const Image = styled.img`
+  width: 100%;
+  object-fit: cover;
+  background-color: #d9d9d9;
+  overflow: hidden;
+  transition: transform ease 0.2s;
+`;
+
 export const InfoContainer = styled.div`
   display: flex;
   flex-direction: column;

diff --git a/src/features/users/routes/Profile/TabMenu/BookmarkCard.tsx b/src/features/users/routes/Profile/TabMenu/BookmarkCard.tsx
@@ -9,6 +9,7 @@ import {
   BottomContainer,
   CreatedDate,
   Image,
+  ImageContainer,
   InfoContainer,
   MyScore,
   RatingContainer,
@@ -39,7 +40,9 @@ export default function BookmarkCard({ bookmark, isMine }: BookmarkCardProps) {
   return (
     <>
       <BookmarkCardContainer onClick={handleLinkToAnime}>
-        <Image src={bookmark.thumbnail} alt={bookmark.title} />
+        <ImageContainer>
+          <Image src={bookmark.thumbnail} alt={bookmark.title} />
+        </ImageContainer>
         <InfoContainer>
           <Title>{bookmark.title}</Title>
           <div>