From 07e5d5c6debb54d02dd26994388f82cb4b1b2b8b Mon Sep 17 00:00:00 2001
From: "junghoon86.park" <junghoon86.park@lgepartner.com>
Date: Wed, 10 Dec 2025 17:16:39 +0900
Subject: [PATCH] =?UTF-8?q?[=EC=8A=A4=ED=8F=B0=EC=84=9C=20=EC=9D=B4?=
 =?UTF-8?q?=EB=AF=B8=EC=A7=80=20=EC=B6=94=EA=B0=80]?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

 - 상품 상세 첫번째 이미지에 스폰서 이미지 추가.
---
 .../ProductDetail/ProductDetail.new.jsx       | 47 ++++++++++++++-----
 .../ProductDetail.new.module.less             | 23 +++++++--
 2 files changed, 56 insertions(+), 14 deletions(-)

diff --git a/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/ProductDetail/ProductDetail.new.jsx b/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/ProductDetail/ProductDetail.new.jsx
index 80c1845b..48672a26 100644
--- a/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/ProductDetail/ProductDetail.new.jsx
+++ b/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]);
diff --git a/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/ProductDetail/ProductDetail.new.module.less b/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/ProductDetail/ProductDetail.new.module.less
index 1e027813..3a35e4ee 100644
--- a/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/ProductDetail/ProductDetail.new.module.less
+++ b/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/ProductDetail/ProductDetail.new.module.less
@@ -39,7 +39,7 @@
       }
 
       .thumbnailWrapper .productImage {
-        transform: scale(1.015); // 가로세로 10px 정도 확대 효과
+        transform: scale(1.015); // 가로세로 10px 정도 확대 효과        
       }
     }
   }
@@ -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;
+    }
+  }
 }