From a6766dde5742a648aa9e506b50b4c86d063bba30 Mon Sep 17 00:00:00 2001
From: grapefruit13 <liam.heo11@gmail.com>
Date: Tue, 2 Apr 2024 17:13:46 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20MatchCard=20default=EC=9D=BC=20=EB=95=8C?=
 =?UTF-8?q?=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20=EA=B0=80=EC=9A=B4=EB=8D=B0=20?=
 =?UTF-8?q?=EC=A0=95=EB=A0=AC=EB=90=98=EB=8F=84=EB=A1=9D=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../landing/MatchTeam/MatchCards.module.scss       | 14 ++++++++++++--
 src/components/landing/MatchTeam/MatchCards.tsx    |  6 +++---
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/components/landing/MatchTeam/MatchCards.module.scss b/src/components/landing/MatchTeam/MatchCards.module.scss
index 48981b1a..49d2fff6 100644
--- a/src/components/landing/MatchTeam/MatchCards.module.scss
+++ b/src/components/landing/MatchTeam/MatchCards.module.scss
@@ -150,9 +150,19 @@
     }
 
     .img {
-      @include image-fit(cover);
+      @include image-fit;
 
-      object-position: center;
+      &.bg {
+        object-position: 60%;
+      }
+
+      &.ow {
+        object-position: 40%;
+      }
+
+      &.mc {
+        object-position: 38%;
+      }
     }
 
     .title {
diff --git a/src/components/landing/MatchTeam/MatchCards.tsx b/src/components/landing/MatchTeam/MatchCards.tsx
index 8a46f226..04fd80d8 100644
--- a/src/components/landing/MatchTeam/MatchCards.tsx
+++ b/src/components/landing/MatchTeam/MatchCards.tsx
@@ -70,7 +70,7 @@ const MatchCards = ({ hoveredCard, setHoveredCard }: MatchCardsProps) => {
           <div className={cx('card-default-inner', { active: isBGHovered || isAllActive })}></div>
           <div className={cx('card-default-outer', { active: isBGHovered || isAllActive })}></div>
           <Image
-            className={cx('img')}
+            className={cx('img', 'bg')}
             src={isBGHovered || isAllActive ? bg.active : bg.default}
             alt={bg.alt}
             fill
@@ -90,7 +90,7 @@ const MatchCards = ({ hoveredCard, setHoveredCard }: MatchCardsProps) => {
           <div className={cx('card-default-inner', { active: isOWHovered || isAllActive })}></div>
           <div className={cx('card-default-outer', { active: isOWHovered || isAllActive })}></div>
           <Image
-            className={cx('img')}
+            className={cx('img', 'ow')}
             src={isOWHovered || isAllActive ? ow.active : ow.default}
             alt={ow.alt}
             fill
@@ -110,7 +110,7 @@ const MatchCards = ({ hoveredCard, setHoveredCard }: MatchCardsProps) => {
           <div className={cx('card-default-inner', { active: isMCHovered || isAllActive })}></div>
           <div className={cx('card-default-outer', { active: isMCHovered || isAllActive })}></div>
           <Image
-            className={cx('img')}
+            className={cx('img', 'mc')}
             src={isMCHovered || isAllActive ? mc.active : mc.default}
             alt={mc.alt}
             fill