optrader/shoptime
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[스폰서 이미지 추가]

Browse Source 
- 상품 상세 첫번째 이미지에 스폰서 이미지 추가.
This commit is contained in:
junghoon86.park
2025-12-10 17:16:39 +09:00
parent bc8317483f
commit 07e5d5c6de
2 changed files with 56 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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]);

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

@@ -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;
}
}
}