[스폰서 이미지 추가]

- 상품 상세 첫번째 이미지에 스폰서 이미지 추가.

com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/ProductDetail/ProductDetail.new.jsx

@@ -1,14 +1,25 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import css from "./ProductDetail.new.module.less";
-import TVirtualGridList from "../../../../components/TVirtualGridList/TVirtualGridList";
-import Spottable from "@enact/spotlight/Spottable";
-import CustomImage from "../../../../components/CustomImage/CustomImage";
-import indicatorDefaultImage from "../../../../../assets/images/img-thumb-empty-144@3x.png";
-import useScrollTo from "../../../../hooks/useScrollTo";
-import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+
+import Spotlight from '@enact/spotlight';
+import SpotlightContainerDecorator
+  from '@enact/spotlight/SpotlightContainerDecorator';
+import Spottable from '@enact/spotlight/Spottable';
+
+import indicatorDefaultImage
+  from '../../../../../assets/images/img-thumb-empty-144@3x.png';
+import CustomImage from '../../../../components/CustomImage/CustomImage';
+import TVirtualGridList
+  from '../../../../components/TVirtualGridList/TVirtualGridList';
+import useScrollTo from '../../../../hooks/useScrollTo';
 // TVerticalPagenator 제거됨 - TScrollerNew와 충돌 문제로 인해
-import { removeSpecificTags } from "../../../../utils/helperMethods";
-import Spotlight from "@enact/spotlight";
+import { removeSpecificTags } from '../../../../utils/helperMethods';
+import css from './ProductDetail.new.module.less';
 
 const Container = SpotlightContainerDecorator(
   { 
@@ -59,7 +70,8 @@ export default function ProductDetail({ productInfo }) {
     const image = listImages[0] || indicatorDefaultImage;
     const imageIndex = productInfo?.imageIndex ?? 0;
     const totalImages = productInfo?.totalImages ?? listImages.length;
-    
+    const sponserImage = productInfo?.spnsrImgUrl;
+    const spnsrNm = productInfo?.spnsrNm;
     return (
       <div className={css.thumbnailWrapper}>
         <CustomImage
@@ -68,6 +80,19 @@ export default function ProductDetail({ productInfo }) {
           fallbackSrc={indicatorDefaultImage}
           className={css.productImage}
         />
+        {imageIndex === 0 && sponserImage &&(
+          <div className={css.sponserImgBox}>
+            <CustomImage
+              src={sponserImage}
+              alt={spnsrNm}
+              fallbackSrc={indicatorDefaultImage}
+              className={css.sponserImg}
+            />
+            <div className={css.sponserTextBox}>
+              SPONSORED BY
+            </div>          
+          </div>
+        )}
       </div>
     );
   }, [listImages, productInfo?.imageIndex, productInfo?.totalImages]);

com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/ProductDetail/ProductDetail.new.module.less

@@ -70,14 +70,15 @@
 
   .thumbnailWrapper {
     position: relative;
-    width: 658px;
+    // width: 658px;
+    width:100%;
     height: 610px;
     display: flex;
     align-items: center;
     justify-content: center;
 
     .productImage {
-      width: 100%;
+      width: 658px;
       height: 100%;
       margin: 0;
       padding: 0;
@@ -89,4 +90,20 @@
       transition: all 0.2s ease;
     }
   }
+  .sponserImgBox {
+    position:absolute;
+    right:20px;
+    top:20px;
+    .sponserImg {
+      width:145px;      
+    }
+    .sponserTextBox {      
+      padding: 3px;      
+      background-color: #474747;
+      font-size:14px;
+      font-weight:bold;
+      color: rgba(255, 255, 255, 0.5);
+      border-radius: 12px;
+    }
+  }
 }