[feat]: 선택한 친구에 따른 버튼 내 프로필사진 변경 (#324)

KakaoFunding · May 30, 2024 · f59101a · f59101a
1 parent 5309589
commit f59101a
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 7 deletions.
diff --git a/src/layouts/Product/BuyInfo/ButtonBundles/index.module.scss b/src/layouts/Product/BuyInfo/ButtonBundles/index.module.scss
@@ -47,13 +47,18 @@
   .btn_gift {
     @include size(40%, 60px, 0 0 0 5px, 0);
 
-    .img_profile {
+    .wrapper_profile {
       @include size(32px, 32px, 0, 0);
 
       position: relative;
       margin-right: 6px;
-      background-image: url('assets/profile_noimg.png');
-      background-size: cover;
+
+      .img_profile {
+        @include masking;
+
+        width: 100%;
+        object-fit: cover;
+      }
     }
 
     .ico_profile {

diff --git a/src/layouts/Product/BuyInfo/ButtonBundles/index.tsx b/src/layouts/Product/BuyInfo/ButtonBundles/index.tsx
@@ -14,6 +14,8 @@ import { formatNumberWithPlus } from 'utils/format';
 import { RequestOrderPreview } from 'types/payment';
 import { OptionDetail, ProductDescriptionResponse } from 'types/product';
 
+import DefaultProfileImage from 'assets/profile_noimg.png';
+
 import styles from './index.module.scss';
 
 const mockData = {
@@ -37,7 +39,7 @@ const ButtonBundles = ({
     productDescription;
   const navigate = useNavigate();
   const { isLoggedIn, login, confirmLogin } = useLogin();
-  const { isSelected, isSelfSelected, selectedFriends } =
+  const { isSelected, isSelfSelected, selectedFriends, getImgUrl } =
     useSelectedFriendsStore();
   const { openKakaoPicker } = useKakaoPicker();
 
@@ -186,10 +188,14 @@ const ButtonBundles = ({
           onClick={handleClickGiftForFriend}
           className={styles.btn_gift}
         >
-          <span className={styles.img_profile}>
-            {/* TODO : 로그인 되었을 때만 보이게 */}
+          <div className={styles.wrapper_profile}>
+            <img
+              src={getImgUrl(DefaultProfileImage)}
+              alt="선물할 친구 프로필 사진"
+              className={styles.img_profile}
+            />
             <span className={styles.ico_profile} />
-          </span>
+          </div>
           선물하기
         </Button>
       </section>