From 013055692f6821b37492777e49a672e1481521c8 Mon Sep 17 00:00:00 2001 From: "junghoon86.park" Date: Thu, 11 Dec 2025 15:06:09 +0900 Subject: [PATCH] =?UTF-8?q?[nbcu=20=EA=B4=80=EB=A0=A8=EC=88=98=EC=A0=95]?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - youmayalsolike 파트너사 21일때는 노출하지않음. - see more product 쉘프에 스폰서 이미지 추가 - see more product 쉘프에 쉘프명 수정. --- .../src/components/THeader/THeader.jsx | 12 +++++++ .../components/THeader/THeader.module.less | 23 +++++++++++- .../ProductAllSection/ProductAllSection.jsx | 10 ++++-- .../SeeMoreProducts/SeeMoreProducts.jsx | 36 +++++++++++++++---- .../SeeMoreProducts.module.less | 11 +++--- 5 files changed, 75 insertions(+), 17 deletions(-) diff --git a/com.twin.app.shoptime/src/components/THeader/THeader.jsx b/com.twin.app.shoptime/src/components/THeader/THeader.jsx index f99e4ed4..141b3cb0 100644 --- a/com.twin.app.shoptime/src/components/THeader/THeader.jsx +++ b/com.twin.app.shoptime/src/components/THeader/THeader.jsx @@ -30,6 +30,7 @@ export default function THeader({ ariaLabel, children, kind, + sponserImage, ...rest }) { const convertedTitle = useMemo(() => { @@ -86,6 +87,17 @@ export default function THeader({ {children} + {sponserImage &&( +
+ +
+ SPONSORED BY +
+
+ )} ); } diff --git a/com.twin.app.shoptime/src/components/THeader/THeader.module.less b/com.twin.app.shoptime/src/components/THeader/THeader.module.less index a20c0167..d47314f9 100644 --- a/com.twin.app.shoptime/src/components/THeader/THeader.module.less +++ b/com.twin.app.shoptime/src/components/THeader/THeader.module.less @@ -10,7 +10,7 @@ display: flex; justify-content: flex-start; align-items: center; - + position: relative; .title { width: 1788px; font-size: 42px; @@ -42,3 +42,24 @@ box-shadow: 0px 6px 30px 0 rgba(0, 0, 0, 0.4); } } + +.sponserImgBox { + position:absolute; + right:0; + top:0; + height:30px; + display:flex; + flex-wrap: wrap; + align-items: center; + justify-content: center; + .sponserImg { + height:30px; + } + .sponserTextBox { + padding:3px; + background-color: #474747; + color:rgba(255, 255, 255, 0.5); + font-size:14px; + border-radius: 6px; + } +} \ No newline at end of file diff --git a/com.twin.app.shoptime/src/views/DetailPanel/ProductAllSection/ProductAllSection.jsx b/com.twin.app.shoptime/src/views/DetailPanel/ProductAllSection/ProductAllSection.jsx index c35283d9..22195bda 100644 --- a/com.twin.app.shoptime/src/views/DetailPanel/ProductAllSection/ProductAllSection.jsx +++ b/com.twin.app.shoptime/src/views/DetailPanel/ProductAllSection/ProductAllSection.jsx @@ -1366,7 +1366,7 @@ export default function ProductAllSection({ }); // 🆕 SeeMoreProducts 컴포넌트를 위한 데이터 변환 - const formattedProducts = otherProducts.map(product => ({ + const formattedProducts = otherProducts.map(product => ({ prdtId: product.prdtId, prdtNm: product.prdtNm, priceInfo: product.priceInfo, @@ -1376,6 +1376,7 @@ export default function ProductAllSection({ imgUrl: product.prdtImgUrl, lgCatCd: product.lgCatCd, offerInfo: product.offerInfo, + groupNm: foundGroup.clctNm, })); // YouMayAlsoLike 데이터 형식으로 맞추기 @@ -1600,6 +1601,8 @@ export default function ProductAllSection({ }; }, []); + const sponserImage = useMemo(() => productData?.spnsrImgUrl, [productData]); + // WebOS TV focus-within 대체 로직 // useEffect(() => { // const detailAreaElement = document.querySelector('.detailArea'); @@ -1878,7 +1881,7 @@ export default function ProductAllSection({ )} - {hasYouMayAlsoLike && ( + {(panelInfo?.patnrId !== 21 || panelInfo?.patnrId !== "21") && hasYouMayAlsoLike && (
- {hasYouMayAlsoLike && ( + {(panelInfo?.patnrId !== 21 || panelInfo?.patnrId !== "21") && hasYouMayAlsoLike && (
{/* {(() => { console.log('[YouMayLike] YouMayAlsoLike 컴포넌트 렌더링:', { @@ -2093,6 +2096,7 @@ export default function ProductAllSection({
handleButtonFocus('seemoreproducts')} onBlur={handleButtonBlur} diff --git a/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/SeeMoreProducts/SeeMoreProducts.jsx b/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/SeeMoreProducts/SeeMoreProducts.jsx index ed5c7357..73c1abfa 100644 --- a/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/SeeMoreProducts/SeeMoreProducts.jsx +++ b/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/SeeMoreProducts/SeeMoreProducts.jsx @@ -1,20 +1,39 @@ -import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'; +import React, { + useCallback, + useEffect, + useMemo, + useRef, + useState, +} from 'react'; -import { useDispatch, useSelector } from 'react-redux'; +import { + useDispatch, + useSelector, +} from 'react-redux'; import { Job } from '@enact/core/util'; -import SpotlightContainerDecorator from '@enact/spotlight/SpotlightContainerDecorator'; +import SpotlightContainerDecorator + from '@enact/spotlight/SpotlightContainerDecorator'; import Spottable from '@enact/spotlight/Spottable'; import { clearThemeDetail } from '../../../../actions/homeActions'; import { finishModalMediaForce } from '../../../../actions/mediaActions'; -import { popPanel, pushPanel, updatePanel } from '../../../../actions/panelActions'; +import { + popPanel, + pushPanel, + updatePanel, +} from '../../../../actions/panelActions'; import { finishVideoPreview } from '../../../../actions/playActions'; import THeader from '../../../../components/THeader/THeader'; import TItemCardNew from '../../../../components/TItemCard/TItemCard.new'; -import TVerticalPagenator from '../../../../components/TVerticalPagenator/TVerticalPagenator'; +import TVerticalPagenator + from '../../../../components/TVerticalPagenator/TVerticalPagenator'; import useScrollTo from '../../../../hooks/useScrollTo'; -import { LOG_CONTEXT_NAME, LOG_MESSAGE_ID, panel_names } from '../../../../utils/Config'; +import { + LOG_CONTEXT_NAME, + LOG_MESSAGE_ID, + panel_names, +} from '../../../../utils/Config'; import { $L } from '../../../../utils/helperMethods'; import css from './SeeMoreProducts.module.less'; @@ -32,6 +51,7 @@ const Container = SpotlightContainerDecorator( export default function SeeMoreProducts({ groupProducts, + sponserImage, panelInfo, onFocus, onBlur, @@ -106,7 +126,9 @@ export default function SeeMoreProducts({ topMargin={36} > - + + +
{newGroupProductData?.map((product, index) => { const { diff --git a/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/SeeMoreProducts/SeeMoreProducts.module.less b/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/SeeMoreProducts/SeeMoreProducts.module.less index fea0513d..5b623efc 100644 --- a/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/SeeMoreProducts/SeeMoreProducts.module.less +++ b/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/SeeMoreProducts/SeeMoreProducts.module.less @@ -28,13 +28,11 @@ // } .tHeader { background: transparent; - .size(@w: 1144px, @h: 36px); // 마진 제외 콘텐츠 크기 - max-width: 1144px; + .size(@w: 100%, @h: 36px); // 마진 제외 콘텐츠 크기 margin-bottom: 20px; - - > div { - .size(@w:100%,@h:100%); - padding: 0; + position:relative; + > div{ + padding:0; } .averageOverallRating { .size(@w: 176px,@h:30px); @@ -46,6 +44,7 @@ height: 36px; color: rgba(234, 234, 234, 1); } + } .container {