[nbcu 관련수정]

- youmayalsolike 파트너사 21일때는 노출하지않음.
 - see more product 쉘프에 스폰서 이미지 추가
 - see more product 쉘프에 쉘프명 수정.
This commit is contained in:
junghoon86.park
2025-12-11 15:06:09 +09:00
parent 98df524ecf
commit 013055692f
5 changed files with 75 additions and 17 deletions

View File

@@ -30,6 +30,7 @@ export default function THeader({
ariaLabel, ariaLabel,
children, children,
kind, kind,
sponserImage,
...rest ...rest
}) { }) {
const convertedTitle = useMemo(() => { const convertedTitle = useMemo(() => {
@@ -86,6 +87,17 @@ export default function THeader({
</Marquee> </Marquee>
{children} {children}
{sponserImage &&(
<div className={css.sponserImgBox}>
<CustomImage
src={sponserImage}
className={css.sponserImg}
/>
<div className={css.sponserTextBox}>
SPONSORED BY
</div>
</div>
)}
</Container> </Container>
); );
} }

View File

@@ -10,7 +10,7 @@
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
position: relative;
.title { .title {
width: 1788px; width: 1788px;
font-size: 42px; font-size: 42px;
@@ -42,3 +42,24 @@
box-shadow: 0px 6px 30px 0 rgba(0, 0, 0, 0.4); 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;
}
}

View File

@@ -1376,6 +1376,7 @@ export default function ProductAllSection({
imgUrl: product.prdtImgUrl, imgUrl: product.prdtImgUrl,
lgCatCd: product.lgCatCd, lgCatCd: product.lgCatCd,
offerInfo: product.offerInfo, offerInfo: product.offerInfo,
groupNm: foundGroup.clctNm,
})); }));
// YouMayAlsoLike 데이터 형식으로 맞추기 // YouMayAlsoLike 데이터 형식으로 맞추기
@@ -1600,6 +1601,8 @@ export default function ProductAllSection({
}; };
}, []); }, []);
const sponserImage = useMemo(() => productData?.spnsrImgUrl, [productData]);
// WebOS TV focus-within 대체 로직 // WebOS TV focus-within 대체 로직
// useEffect(() => { // useEffect(() => {
// const detailAreaElement = document.querySelector('.detailArea'); // const detailAreaElement = document.querySelector('.detailArea');
@@ -1878,7 +1881,7 @@ export default function ProductAllSection({
</TButton> </TButton>
</> </>
)} )}
{hasYouMayAlsoLike && ( {(panelInfo?.patnrId !== 21 || panelInfo?.patnrId !== "21") && hasYouMayAlsoLike && (
<TButton <TButton
className={classNames( className={classNames(
css.youMayLikeButton, css.youMayLikeButton,
@@ -2064,7 +2067,7 @@ export default function ProductAllSection({
</div> </div>
<div ref={youMayAlsoLikelRef}> <div ref={youMayAlsoLikelRef}>
<div id="scroll-marker-you-may-also-like" className={css.scrollMarker}></div> <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"> <div id="you-may-also-like-section">
{/* {(() => { {/* {(() => {
console.log('[YouMayLike] YouMayAlsoLike 컴포넌트 렌더링:', { 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"> <div id="see-more-products-section" data-spotlight-id="see-more-products-area">
<SeeMoreProducts <SeeMoreProducts
groupProducts={seeMoreProductsData} groupProducts={seeMoreProductsData}
sponserImage={sponserImage}
panelInfo={panelInfo} panelInfo={panelInfo}
onFocus={() => handleButtonFocus('seemoreproducts')} onFocus={() => handleButtonFocus('seemoreproducts')}
onBlur={handleButtonBlur} onBlur={handleButtonBlur}

View File

@@ -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 { Job } from '@enact/core/util';
import SpotlightContainerDecorator from '@enact/spotlight/SpotlightContainerDecorator'; import SpotlightContainerDecorator
from '@enact/spotlight/SpotlightContainerDecorator';
import Spottable from '@enact/spotlight/Spottable'; import Spottable from '@enact/spotlight/Spottable';
import { clearThemeDetail } from '../../../../actions/homeActions'; import { clearThemeDetail } from '../../../../actions/homeActions';
import { finishModalMediaForce } from '../../../../actions/mediaActions'; 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 { finishVideoPreview } from '../../../../actions/playActions';
import THeader from '../../../../components/THeader/THeader'; import THeader from '../../../../components/THeader/THeader';
import TItemCardNew from '../../../../components/TItemCard/TItemCard.new'; 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 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 { $L } from '../../../../utils/helperMethods';
import css from './SeeMoreProducts.module.less'; import css from './SeeMoreProducts.module.less';
@@ -32,6 +51,7 @@ const Container = SpotlightContainerDecorator(
export default function SeeMoreProducts({ export default function SeeMoreProducts({
groupProducts, groupProducts,
sponserImage,
panelInfo, panelInfo,
onFocus, onFocus,
onBlur, onBlur,
@@ -106,7 +126,9 @@ export default function SeeMoreProducts({
topMargin={36} topMargin={36}
> >
<Container className={css.container} onFocus={_onFocus} onBlur={_onBlur}> <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}> <div className={css.renderCardContainer}>
{newGroupProductData?.map((product, index) => { {newGroupProductData?.map((product, index) => {
const { const {

View File

@@ -28,12 +28,10 @@
// } // }
.tHeader { .tHeader {
background: transparent; background: transparent;
.size(@w: 1144px, @h: 36px); // 마진 제외 콘텐츠 크기 .size(@w: 100%, @h: 36px); // 마진 제외 콘텐츠 크기
max-width: 1144px;
margin-bottom: 20px; margin-bottom: 20px;
position:relative;
> div{ > div{
.size(@w:100%,@h:100%);
padding:0; padding:0;
} }
.averageOverallRating { .averageOverallRating {
@@ -46,6 +44,7 @@
height: 36px; height: 36px;
color: rgba(234, 234, 234, 1); color: rgba(234, 234, 234, 1);
} }
} }
.container { .container {