From 7b395c3056139a8eae15011c4ca5ca0b29ac864f Mon Sep 17 00:00:00 2001
From: presentKey <kim.hyeonjae4@gmail.com>
Date: Mon, 20 Nov 2023 19:59:19 +0900
Subject: [PATCH] =?UTF-8?q?style:=20BookmarkCard=20hover=20=EC=8B=9C,=20?=
 =?UTF-8?q?=EC=9D=B4=EB=AF=B8=EC=A7=80=20scale=20=EB=B3=80=ED=99=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Profile/TabMenu/BookmarkCard.style.ts       | 17 ++++++++++++-----
 .../routes/Profile/TabMenu/BookmarkCard.tsx     |  5 ++++-
 2 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/src/features/users/routes/Profile/TabMenu/BookmarkCard.style.ts b/src/features/users/routes/Profile/TabMenu/BookmarkCard.style.ts
index cd1bf4e7..f5b248e1 100644
--- 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
index 048c4983..152c2697 100644
--- 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>