diff --git a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx index 512d3247..cad82841 100644 --- a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx +++ b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx @@ -2588,11 +2588,11 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props dlog('[PlayerPanel] ๐Ÿ”„ HomePanel ๋ณต๊ท€ - tabIndex๋ฅผ ์ฝ˜ํ…์ธ  ํƒ€์ž…์— ๋”ฐ๋ผ ์„ค์ •'); if (tabContainerVersion === 2) { if (panelInfoRef.current.shptmBanrTpNm === 'VOD') { - setTabIndexV2(2); - dlog('[PlayerPanel] ๐Ÿ“ VOD ์ฝ˜ํ…์ธ  - tabIndexV2๋ฅผ 2๋กœ ์„ค์ •๋จ'); + setTabIndexV2(1); + dlog('[PlayerPanel] ๐Ÿ“ VOD ์ฝ˜ํ…์ธ  - tabIndexV2๋ฅผ 1๋กœ ์„ค์ •๋จ (FeaturedShowContents ํ‘œ์‹œ)'); } else { setTabIndexV2(1); - dlog('[PlayerPanel] ๐Ÿ“ LIVE ์ฝ˜ํ…์ธ  - tabIndexV2๋ฅผ 1๋กœ ์„ค์ •๋จ'); + dlog('[PlayerPanel] ๐Ÿ“ LIVE ์ฝ˜ํ…์ธ  - tabIndexV2๋ฅผ 1๋กœ ์„ค์ •๋จ (LiveChannelContents ํ‘œ์‹œ)'); } } } else { @@ -2651,11 +2651,11 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props ); if (panelInfoRef.current?.shptmBanrTpNm === 'VOD') { - setTabIndexV2(2); - dlog('[PlayerPanel] ๐Ÿ“ VOD ์ฝ˜ํ…์ธ  - tabIndexV2๋ฅผ 2๋กœ ์„ค์ •๋จ'); + setTabIndexV2(1); + dlog('[PlayerPanel] ๐Ÿ“ VOD ์ฝ˜ํ…์ธ  - tabIndexV2๋ฅผ 1๋กœ ์„ค์ •๋จ (FeaturedShowContents ํ‘œ์‹œ)'); } else { setTabIndexV2(1); - dlog('[PlayerPanel] ๐Ÿ“ LIVE ์ฝ˜ํ…์ธ  - tabIndexV2๋ฅผ 1๋กœ ์„ค์ •๋จ'); + dlog('[PlayerPanel] ๐Ÿ“ LIVE ์ฝ˜ํ…์ธ  - tabIndexV2๋ฅผ 1๋กœ ์„ค์ •๋จ (LiveChannelContents ํ‘œ์‹œ)'); } } }, [isOnTop, panelInfo.modal, videoVerticalVisible, tabContainerVersion]); diff --git a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/FeaturedShowContents.jsx b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/FeaturedShowContents.jsx index 767a0f37..36c0d199 100644 --- a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/FeaturedShowContents.jsx +++ b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/FeaturedShowContents.jsx @@ -12,7 +12,8 @@ import { LOG_CONTEXT_NAME, LOG_MENU, LOG_MESSAGE_ID, panel_names } from '../../. import { $L, removeSpecificTags } from '../../../../utils/helperMethods'; import PlayerItemCard, { TYPES } from '../../PlayerItemCard/PlayerItemCard'; import ListEmptyContents from '../TabContents/ListEmptyContents/ListEmptyContents'; -import css from './LiveChannelContents.module.less'; +import css from './FeaturedShowContents.module.less'; +import cssV2 from './FeaturedShowContents.v2.module.less'; import { getMainCategoryShowDetail } from '../../../../actions/mainActions'; import { sendLogTotalRecommend } from '../../../../actions/logActions'; // ======= @@ -44,6 +45,8 @@ export default function FeaturedShowContents({ handleItemFocus, tabTitle, panelInfo, + direction = 'vertical', + version = 1, }) { const dispatch = useDispatch(); const isClickBlocked = useRef(false); @@ -138,6 +141,16 @@ export default function FeaturedShowContents({ patnerName={patncNm} onClick={handleItemClick} onFocus={handleFocus()} + onSpotlightUp={ + version === 2 && index === 0 + ? (e) => { + // v2์—์„œ ์ฒซ ๋ฒˆ์งธ ์•„์ดํ…œ์ผ ๋•Œ ์œ„๋กœ ๊ฐ€๋ฉด FEATURED SHOWS ๋ฒ„ํŠผ์œผ๋กœ + e.stopPropagation(); + e.preventDefault(); + Spotlight.focus('below-tab-featured-show-button'); + } + : undefined + } type={TYPES.featuredHorizontal} spotlightId={`tabChannel-video-${index}`} videoVerticalVisible={videoVerticalVisible} @@ -166,17 +179,19 @@ export default function FeaturedShowContents({ }; }, []); + const containerClass = version === 2 ? cssV2.container : css.container; + return ( <> -
+
{featuredShowsInfos && featuredShowsInfos.length > 0 ? ( ) : ( diff --git a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/FeaturedShowContents.v2.module.less b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/FeaturedShowContents.v2.module.less new file mode 100644 index 00000000..b59d08f1 --- /dev/null +++ b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/FeaturedShowContents.v2.module.less @@ -0,0 +1,22 @@ +@import "../../../../style/CommonStyle.module.less"; +@import "../../../../style/utils.module.less"; + +.container { + width: 100%; + height: 155px; + + > div:nth-child(1) { + .size(@w: 100%, @h: 100%); + } +} + +.channelList { + width: 100%; + .flex(@display: flex, @justifyCenter: flex-start, @alignCenter: flex-start); + overflow-x: auto; + overflow-y: hidden; + + > * + * { + margin-left: 30px; + } +} 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 1beae590..393b1b9c 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 @@ -21,6 +21,7 @@ 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'; @@ -272,17 +273,17 @@ export default function TabContainerV2({ { // ์ฒซ ๋ฒˆ์งธ PlayerItem์œผ๋กœ ํฌ์ปค์Šค ์ด๋™ Spotlight.focus('tabChannel-video-0'); }} onSpotlightFocus={() => { - console.log('[TabContainerV2] below-tab-live-channel-button focused'); + console.log('[TabContainerV2] below-tab button focused'); }} > - LIVE CHANNEL + {tabList[1]}
arrow down
@@ -304,6 +305,23 @@ export default function TabContainerV2({ direction="horizontal" /> )} + + {panelInfo?.shptmBanrTpNm === 'VOD' && playListInfo && ( + + )} )}