[nbcu 관련수정]
- youmayalsolike 파트너사 21일때는 노출하지않음. - see more product 쉘프에 스폰서 이미지 추가 - see more product 쉘프에 쉘프명 수정.
This commit is contained in:
@@ -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({
|
||||
</TButton>
|
||||
</>
|
||||
)}
|
||||
{hasYouMayAlsoLike && (
|
||||
{(panelInfo?.patnrId !== 21 || panelInfo?.patnrId !== "21") && hasYouMayAlsoLike && (
|
||||
<TButton
|
||||
className={classNames(
|
||||
css.youMayLikeButton,
|
||||
@@ -2064,7 +2067,7 @@ export default function ProductAllSection({
|
||||
</div>
|
||||
<div ref={youMayAlsoLikelRef}>
|
||||
<div id="scroll-marker-you-may-also-like" className={css.scrollMarker}></div>
|
||||
{hasYouMayAlsoLike && (
|
||||
{(panelInfo?.patnrId !== 21 || panelInfo?.patnrId !== "21") && hasYouMayAlsoLike && (
|
||||
<div id="you-may-also-like-section">
|
||||
{/* {(() => {
|
||||
console.log('[YouMayLike] YouMayAlsoLike 컴포넌트 렌더링:', {
|
||||
@@ -2093,6 +2096,7 @@ export default function ProductAllSection({
|
||||
<div id="see-more-products-section" data-spotlight-id="see-more-products-area">
|
||||
<SeeMoreProducts
|
||||
groupProducts={seeMoreProductsData}
|
||||
sponserImage={sponserImage}
|
||||
panelInfo={panelInfo}
|
||||
onFocus={() => handleButtonFocus('seemoreproducts')}
|
||||
onBlur={handleButtonBlur}
|
||||
|
||||
@@ -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}
|
||||
>
|
||||
<Container className={css.container} onFocus={_onFocus} onBlur={_onBlur}>
|
||||
<THeader title={$L('SEE MORE PRODUCTS')} className={css.tHeader} />
|
||||
<THeader title={newGroupProductData[0].groupNm} className={css.tHeader} sponserImage={sponserImage} />
|
||||
|
||||
|
||||
<div className={css.renderCardContainer}>
|
||||
{newGroupProductData?.map((product, index) => {
|
||||
const {
|
||||
|
||||
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user