diff --git a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/LiveChannelNext.jsx b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/LiveChannelNext.jsx index f198efe3..66ad574e 100644 --- a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/LiveChannelNext.jsx +++ b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/LiveChannelNext.jsx @@ -1,16 +1,13 @@ import React from 'react'; +import classNames from 'classnames'; import { compose } from 'ramda/src/compose'; import Spotlight from '@enact/spotlight'; import Spottable from '@enact/spotlight/Spottable'; -import { - Marquee, - MarqueeController, -} from '@enact/ui/Marquee'; +import { Marquee, MarqueeController } from '@enact/ui/Marquee'; -import icon_arrow_dwon - from '../../../../../assets/images/player/icon_tabcontainer_arrow_down.png'; +import icon_arrow_dwon from '../../../../../assets/images/player/icon_tabcontainer_arrow_down.png'; import CustomImage from '../../../../components/CustomImage/CustomImage'; import { SpotlightIds } from '../../../../utils/SpotlightIds'; import css from './LiveChannelNext.module.less'; @@ -55,9 +52,19 @@ export default function LiveChannelNext({ onSpotlightRight={handleSpotlightRight} >
-
+
{channelLogo ? ( - + ) : (
)} diff --git a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/LiveChannelNext.module.less b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/LiveChannelNext.module.less index 87b2a12b..ef17f195 100644 --- a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/LiveChannelNext.module.less +++ b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/LiveChannelNext.module.less @@ -1,5 +1,5 @@ -@import "../../../../style/CommonStyle.module.less"; -@import "../../../../style/utils.module.less"; +@import '../../../../style/CommonStyle.module.less'; +@import '../../../../style/utils.module.less'; .container { position: fixed; @@ -51,13 +51,16 @@ display: flex; justify-content: center; align-items: center; - background: linear-gradient(180deg, #284998 0%, #06B0EE 100%); } .logoImage { width: 100%; height: 100%; object-fit: cover; + &.qvcLogoImg { + width: 70%; + height: 70%; + } } .logoPlaceholder { @@ -69,7 +72,7 @@ .channelName { color: #fcfcfc; font-size: 25px; - font-family: "LG Smart UI"; + font-family: 'LG Smart UI'; font-weight: 700; line-height: 35px; white-space: nowrap; @@ -81,7 +84,7 @@ .programName { color: rgba(234, 234, 234, 0.7); font-size: 25px; - font-family: "LG Smart UI"; + font-family: 'LG Smart UI'; font-weight: 600; line-height: 35px; white-space: nowrap; @@ -91,7 +94,6 @@ max-width: 180px; // 최대 너비 제한 완화 } - .arrowIcon { display: flex; align-items: center; diff --git a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/TabContainer.v2.jsx b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/TabContainer.v2.jsx index d4cdce8b..8c2be7a6 100644 --- a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/TabContainer.v2.jsx +++ b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/TabContainer.v2.jsx @@ -7,27 +7,28 @@ import Spotlight from '@enact/spotlight'; import SpotlightContainerDecorator from '@enact/spotlight/SpotlightContainerDecorator'; 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 { $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 { dlog, dwarn, derror } = createDebugHelpers(DEBUG_MODE); -// import icon_arrow_right from '../../../../../assets/images/icons'; -import icon_arrow_dwon from '../../../../../assets/images/player/icon_tabcontainer_arrow_down.png'; -import icon_shop_now from '../../../../../assets/images/player/icon_tabcontainer_shopnow.png'; -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 Container = SpotlightContainerDecorator( + { enterTo: 'last-focused' }, + 'div' +); const SpottableDiv = Spottable('div'); @@ -50,18 +51,22 @@ export default function TabContainerV2({ onTabClose, // 탭 닫기 콜백 함수 tabVisible, }) { - const youmaylikeInfos = useSelector((state) => state.main.youmaylikeInfos); + const youmaylikeInfos = useSelector((state) => state.main.youmaylikeInfos); // 다음 재생 가능한 쇼 찾기 const findNextPlayableShow = useCallback((currentPlayList, currentIndex) => { 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 attempts = 0; // 유효한 showId를 가진 다음 쇼 찾기 - while (!currentPlayList[nextIndex]?.showId && attempts < currentPlayList.length) { + while ( + !currentPlayList[nextIndex]?.showId && + attempts < currentPlayList.length + ) { nextIndex = nextIndex === currentPlayList.length - 1 ? 0 : nextIndex + 1; attempts++; if (nextIndex === initialIndex) break; @@ -87,13 +92,18 @@ export default function TabContainerV2({ data: youmaylikeInfos, shopNowInfo_length: shopNowInfo?.length, shouldShowYouMayAlso: - shopNowInfo && shopNowInfo.length < 3 && youmaylikeInfos && youmaylikeInfos.length > 0, + shopNowInfo && + shopNowInfo.length < 3 && + youmaylikeInfos && + youmaylikeInfos.length > 0, }); }, [youmaylikeInfos, shopNowInfo]); const tabList = [ $L('SHOP NOW'), - panelInfo?.shptmBanrTpNm === 'LIVE' ? $L('LIVE CHANNEL') : $L('FEATURED SHOWS'), + panelInfo?.shptmBanrTpNm === 'LIVE' + ? $L('LIVE CHANNEL') + : $L('FEATURED SHOWS'), ]; useEffect(() => { @@ -105,7 +115,9 @@ export default function TabContainerV2({ if (tabIndex === 1) { 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) { @@ -160,7 +172,9 @@ export default function TabContainerV2({ // 하나의 함수에서 모든 tabIndex 변화 처리 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) { // tabIndex = 0 (ShopNow) @@ -220,8 +234,18 @@ export default function TabContainerV2({ Spotlight.focus('shop-now-item-0'); }} > -
- shop now icon +
+ shop now icon
SHOP NOW
@@ -250,7 +274,9 @@ export default function TabContainerV2({ youmaylikeInfos && youmaylikeInfos.length > 0 && (
-
You may also like
+
+ You may also like +
)}
@@ -273,7 +299,11 @@ export default function TabContainerV2({ { // 첫 번째 PlayerItem으로 포커스 이동 diff --git a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/TabContainer.v2.module.less b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/TabContainer.v2.module.less index 1b45dd41..8a4f40de 100644 --- a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/TabContainer.v2.module.less +++ b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/TabContainer.v2.module.less @@ -1,5 +1,5 @@ -@import "../../../../style/CommonStyle.module.less"; -@import "../../../../style/utils.module.less"; +@import '../../../../style/CommonStyle.module.less'; +@import '../../../../style/utils.module.less'; .tabContainer { .position(@position: fixed, @bottom: 0, @left: 0); @@ -61,7 +61,7 @@ } &::before { - content: ""; + content: ''; .position(@position: absolute, @top: 0, @left: 0); .size(@w: 100%, @h: 100%); background: linear-gradient( @@ -113,10 +113,17 @@ background: white; border-radius: 100px; .flex(@display: flex, @justifyCenter: center, @alignCenter: center); + &.shopNowQvcIconWrapper { + border-radius: 0; + .shopNowIcon { + .size(@w: 40px, @h: 40px); + object-fit: contain; + } + } } .shopNowIcon { - .size(@w: 20.67px, @h: 20.67px); + .size(@w: 40px, @h: 40px); object-fit: contain; } @@ -265,7 +272,7 @@ .youMayAlsoLikeText { margin-right: 15px; - color: #EAEAEA; + color: #eaeaea; font-size: 24px; font-family: @baseFont; font-weight: 700;