[nbcu 관련수정]
- youmayalsolike 파트너사 21일때는 노출하지않음. - see more product 쉘프에 스폰서 이미지 추가 - see more product 쉘프에 쉘프명 수정.
This commit is contained in:
@@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -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}
|
||||||
|
|||||||
@@ -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 {
|
||||||
|
|||||||
@@ -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 {
|
||||||
|
|||||||
Reference in New Issue
Block a user