From f46090863f8d683c9b502ee43d5bf981cd95ab75 Mon Sep 17 00:00:00 2001 From: "junghoon86.park" Date: Mon, 15 Dec 2025 11:02:52 +0900 Subject: [PATCH] =?UTF-8?q?[=EC=98=81=EC=83=81=EB=82=B4=20shopnow=20?= =?UTF-8?q?=EC=88=98=EC=A0=95]?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - shopnowIcon이미지 변경. qvc로 고정되어있었던부분 영상에 맞게 노출되도록 수정. - qvc영상일때 이미지는 border-radius먹지않도록 변경. --- .../PlayerTabContents/v2/TabContainer.v2.jsx | 82 +++++++++++++------ .../v2/TabContainer.v2.module.less | 17 ++-- 2 files changed, 68 insertions(+), 31 deletions(-) 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;