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 (
+ {imageIndex === 0 && sponserImage &&( +
+ +
+ SPONSORED BY +
+
+ )}
); }, [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; + } + } }