Merge pull request #106 from SOPT-all/fix/#103/product-card-hover

[FIX] 상품 카드 호버 효과 변경
SOPT-all · Nov 29, 2024 · 5e2a311 · 5e2a311
2 parents f4f24e9 + d869694
commit 5e2a311
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 2 deletions.
diff --git a/src/components/orderDetail/productRecommend/productRecommendStyle.ts b/src/components/orderDetail/productRecommend/productRecommendStyle.ts
@@ -22,7 +22,7 @@ export const productListContainer = css`
 	display: flex;
 	justify-content: space-between;
 	width: 86.5rem;
-	height: 33rem;
+	height: 34rem;
 	padding: 0 1.3rem;
 	overflow: hidden;
 `;

diff --git a/src/components/product/ProductCardStyle.ts b/src/components/product/ProductCardStyle.ts
@@ -8,6 +8,10 @@ export const productContainer = (theme: Theme, width: string, hoverLarge: boolea
 	background-color: ${theme.colors.white};
 	border-radius: ${hoverLarge ? '12px' : '16px'};
 
+	transition:
+		transform 0.2s ease-in-out,
+		box-shadow 0.2s ease-in-out;
+
 	&:hover {
 		z-index: 1;
 
@@ -18,7 +22,6 @@ export const productContainer = (theme: Theme, width: string, hoverLarge: boolea
 		${hoverLarge
 			? `
             transform: scale(1.13, 1.065);
-            transform-origin: top center; /* 상단의 시작 지점을 고정 */
             border-radius: 16px;
             `
 			: `