[영상내 shopnow 수정]

- shopnowIcon이미지 변경. qvc로 고정되어있었던부분 영상에 맞게 노출되도록 수정.
 - qvc영상일때 이미지는 border-radius먹지않도록 변경.
This commit is contained in:
junghoon86.park
2025-12-15 11:02:52 +09:00
parent 1e9c9bee40
commit f46090863f
2 changed files with 68 additions and 31 deletions

View File

@@ -7,27 +7,28 @@ import Spotlight from '@enact/spotlight';
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 icon_arrow_right from '../../../../../assets/images/icons';
import icon_arrow_dwon from '../../../../../assets/images/player/icon_tabcontainer_arrow_down.png';
import usePrevious from '../../../../hooks/usePrevious';
import { LOG_MENU } from '../../../../utils/Config';
import { createDebugHelpers } from '../../../../utils/debug'; import { createDebugHelpers } from '../../../../utils/debug';
import { $L } from '../../../../utils/helperMethods';
import { SpotlightIds } from '../../../../utils/SpotlightIds';
import FeaturedShowContents from '../TabContents/FeaturedShowContents';
import LiveChannelContents from '../TabContents/LiveChannelContents';
import ShopNowContents from '../TabContents/ShopNowContents';
import LiveChannelNext from './LiveChannelNext';
import ShopNowButton from './ShopNowButton';
import css from './TabContainer.v2.module.less';
// 디버그 헬퍼 설정 // 디버그 헬퍼 설정
const DEBUG_MODE = false; const DEBUG_MODE = false;
const { dlog, dwarn, derror } = createDebugHelpers(DEBUG_MODE); const { dlog, dwarn, derror } = createDebugHelpers(DEBUG_MODE);
// import icon_arrow_right from '../../../../../assets/images/icons'; const Container = SpotlightContainerDecorator(
import icon_arrow_dwon from '../../../../../assets/images/player/icon_tabcontainer_arrow_down.png'; { enterTo: 'last-focused' },
import icon_shop_now from '../../../../../assets/images/player/icon_tabcontainer_shopnow.png'; 'div'
import { LOG_MENU } from '../../../../utils/Config'; );
import { $L } from '../../../../utils/helperMethods';
import { SpotlightIds } from '../../../../utils/SpotlightIds';
import usePrevious from '../../../../hooks/usePrevious';
import LiveChannelContents from '../TabContents/LiveChannelContents';
import FeaturedShowContents from '../TabContents/FeaturedShowContents';
import ShopNowContents from '../TabContents/ShopNowContents';
import ShopNowButton from './ShopNowButton';
import LiveChannelNext from './LiveChannelNext';
import css from './TabContainer.v2.module.less';
const Container = SpotlightContainerDecorator({ enterTo: 'last-focused' }, 'div');
const SpottableDiv = Spottable('div'); const SpottableDiv = Spottable('div');
@@ -50,18 +51,22 @@ export default function TabContainerV2({
onTabClose, // 탭 닫기 콜백 함수 onTabClose, // 탭 닫기 콜백 함수
tabVisible, tabVisible,
}) { }) {
const youmaylikeInfos = useSelector((state) => state.main.youmaylikeInfos); const youmaylikeInfos = useSelector((state) => state.main.youmaylikeInfos);
// 다음 재생 가능한 쇼 찾기 // 다음 재생 가능한 쇼 찾기
const findNextPlayableShow = useCallback((currentPlayList, currentIndex) => { const findNextPlayableShow = useCallback((currentPlayList, currentIndex) => {
if (!currentPlayList || currentPlayList.length === 0) return null; if (!currentPlayList || currentPlayList.length === 0) return null;
let nextIndex = currentIndex === currentPlayList.length - 1 ? 0 : currentIndex + 1; let nextIndex =
currentIndex === currentPlayList.length - 1 ? 0 : currentIndex + 1;
let initialIndex = nextIndex; let initialIndex = nextIndex;
let attempts = 0; let attempts = 0;
// 유효한 showId를 가진 다음 쇼 찾기 // 유효한 showId를 가진 다음 쇼 찾기
while (!currentPlayList[nextIndex]?.showId && attempts < currentPlayList.length) { while (
!currentPlayList[nextIndex]?.showId &&
attempts < currentPlayList.length
) {
nextIndex = nextIndex === currentPlayList.length - 1 ? 0 : nextIndex + 1; nextIndex = nextIndex === currentPlayList.length - 1 ? 0 : nextIndex + 1;
attempts++; attempts++;
if (nextIndex === initialIndex) break; if (nextIndex === initialIndex) break;
@@ -87,13 +92,18 @@ export default function TabContainerV2({
data: youmaylikeInfos, data: youmaylikeInfos,
shopNowInfo_length: shopNowInfo?.length, shopNowInfo_length: shopNowInfo?.length,
shouldShowYouMayAlso: shouldShowYouMayAlso:
shopNowInfo && shopNowInfo.length < 3 && youmaylikeInfos && youmaylikeInfos.length > 0, shopNowInfo &&
shopNowInfo.length < 3 &&
youmaylikeInfos &&
youmaylikeInfos.length > 0,
}); });
}, [youmaylikeInfos, shopNowInfo]); }, [youmaylikeInfos, shopNowInfo]);
const tabList = [ const tabList = [
$L('SHOP NOW'), $L('SHOP NOW'),
panelInfo?.shptmBanrTpNm === 'LIVE' ? $L('LIVE CHANNEL') : $L('FEATURED SHOWS'), panelInfo?.shptmBanrTpNm === 'LIVE'
? $L('LIVE CHANNEL')
: $L('FEATURED SHOWS'),
]; ];
useEffect(() => { useEffect(() => {
@@ -105,7 +115,9 @@ export default function TabContainerV2({
if (tabIndex === 1) { if (tabIndex === 1) {
const isLive = panelInfo?.shptmBanrTpNm === 'LIVE'; const isLive = panelInfo?.shptmBanrTpNm === 'LIVE';
nowMenu = isLive ? LOG_MENU.FULL_LIVE_CHANNELS : LOG_MENU.FULL_FEATURED_SHOWS; nowMenu = isLive
? LOG_MENU.FULL_LIVE_CHANNELS
: LOG_MENU.FULL_FEATURED_SHOWS;
} }
if (nowMenu) { if (nowMenu) {
@@ -160,7 +172,9 @@ export default function TabContainerV2({
// 하나의 함수에서 모든 tabIndex 변화 처리 // 하나의 함수에서 모든 tabIndex 변화 처리
const handleTabIndexChange = useCallback((newTabIndex, oldTabIndex) => { const handleTabIndexChange = useCallback((newTabIndex, oldTabIndex) => {
console.log(`[TabIndexChange] Tab changed from ${oldTabIndex} to ${newTabIndex}`); console.log(
`[TabIndexChange] Tab changed from ${oldTabIndex} to ${newTabIndex}`
);
if (newTabIndex === 0) { if (newTabIndex === 0) {
// tabIndex = 0 (ShopNow) // tabIndex = 0 (ShopNow)
@@ -220,8 +234,18 @@ export default function TabContainerV2({
Spotlight.focus('shop-now-item-0'); Spotlight.focus('shop-now-item-0');
}} }}
> >
<div className={css.shopNowIconWrapper}> <div
<img src={icon_shop_now} alt="shop now icon" className={css.shopNowIcon} /> className={classNames(
css.shopNowIconWrapper,
playListInfo[selectedIndex]?.patncNm === 'QVC' &&
css.shopNowQvcIconWrapper
)}
>
<img
src={playListInfo[selectedIndex]?.patncLogoPath}
alt="shop now icon"
className={css.shopNowIcon}
/>
</div> </div>
<div className={css.shopNowHeaderText}>SHOP NOW</div> <div className={css.shopNowHeaderText}>SHOP NOW</div>
<div className={css.arrowIcon}> <div className={css.arrowIcon}>
@@ -250,7 +274,9 @@ export default function TabContainerV2({
youmaylikeInfos && youmaylikeInfos &&
youmaylikeInfos.length > 0 && ( youmaylikeInfos.length > 0 && (
<div className={css.youMayAlsoLikeHeader}> <div className={css.youMayAlsoLikeHeader}>
<div className={css.youMayAlsoLikeText}>You may also like</div> <div className={css.youMayAlsoLikeText}>
You may also like
</div>
</div> </div>
)} )}
</div> </div>
@@ -273,7 +299,11 @@ export default function TabContainerV2({
<SpottableDiv <SpottableDiv
className={css.liveChannelButton} className={css.liveChannelButton}
onClick={onLiveChannelButtonClick} onClick={onLiveChannelButtonClick}
spotlightId={panelInfo?.shptmBanrTpNm === 'LIVE' ? 'below-tab-live-channel-button' : 'below-tab-featured-show-button'} spotlightId={
panelInfo?.shptmBanrTpNm === 'LIVE'
? 'below-tab-live-channel-button'
: 'below-tab-featured-show-button'
}
onSpotlightUp={handleSpotlightUpToBackButton} onSpotlightUp={handleSpotlightUpToBackButton}
onSpotlightDown={(e) => { onSpotlightDown={(e) => {
// 첫 번째 PlayerItem으로 포커스 이동 // 첫 번째 PlayerItem으로 포커스 이동

View File

@@ -1,5 +1,5 @@
@import "../../../../style/CommonStyle.module.less"; @import '../../../../style/CommonStyle.module.less';
@import "../../../../style/utils.module.less"; @import '../../../../style/utils.module.less';
.tabContainer { .tabContainer {
.position(@position: fixed, @bottom: 0, @left: 0); .position(@position: fixed, @bottom: 0, @left: 0);
@@ -61,7 +61,7 @@
} }
&::before { &::before {
content: ""; content: '';
.position(@position: absolute, @top: 0, @left: 0); .position(@position: absolute, @top: 0, @left: 0);
.size(@w: 100%, @h: 100%); .size(@w: 100%, @h: 100%);
background: linear-gradient( background: linear-gradient(
@@ -113,10 +113,17 @@
background: white; background: white;
border-radius: 100px; border-radius: 100px;
.flex(@display: flex, @justifyCenter: center, @alignCenter: center); .flex(@display: flex, @justifyCenter: center, @alignCenter: center);
&.shopNowQvcIconWrapper {
border-radius: 0;
.shopNowIcon {
.size(@w: 40px, @h: 40px);
object-fit: contain;
}
}
} }
.shopNowIcon { .shopNowIcon {
.size(@w: 20.67px, @h: 20.67px); .size(@w: 40px, @h: 40px);
object-fit: contain; object-fit: contain;
} }
@@ -265,7 +272,7 @@
.youMayAlsoLikeText { .youMayAlsoLikeText {
margin-right: 15px; margin-right: 15px;
color: #EAEAEA; color: #eaeaea;
font-size: 24px; font-size: 24px;
font-family: @baseFont; font-family: @baseFont;
font-weight: 700; font-weight: 700;