optrader/shoptime
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[251009] feat TabContainer v2 스포트라이트 ID 및 경로

Browse Source 
변경사항을 반영했습니다

🕐 커밋 시간: 2025. 10. 09. 21:22:02

📊 변경 통계:
  • 총 파일: 3개
  • 추가: +16줄
  • 삭제: -12줄

📝 수정된 파일:
  ~ com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx
  ~ com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/ShopNowButton.jsx
  ~ com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/TabContainer.v2.jsx

🔧 함수 변경 내용:
  📄 com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/ShopNowButton.jsx (javascript):
    🔄 Modified: Spottable()
This commit is contained in:
hyeon soo noh
2025-10-09 21:22:03 +09:00
parent 0ea842e569
commit 7d2ea49c63
3 changed files with 39 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx
View File

@@ -2195,6 +2195,7 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
onShopNowButtonClick={() => setTabIndexV2(0)} onShopNowButtonClick={() => setTabIndexV2(0)}
onLiveChannelButtonClick={() => setTabIndexV2(2)} onLiveChannelButtonClick={() => setTabIndexV2(2)}
onTabClose={(newTabIndex) => setTabIndexV2(newTabIndex)} onTabClose={(newTabIndex) => setTabIndexV2(newTabIndex)}
tabVisible={belowContentsVisible}
/> />
)} )}
</Container> </Container>

8
com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/ShopNowButton.jsx
View File

@@ -8,10 +8,10 @@ const SpottableDiv = Spottable('div');
export default function ShopNowButton({ onClick }) { export default function ShopNowButton({ onClick }) {
return ( return (
<div className={css.container}> <SpottableDiv className={css.container} spotlightId="shop-now-button-container">
<SpottableDiv className={css.shopNowButton} onClick={onClick} spotlightId="shop-now-button"> <div className={css.shopNowButton} onClick={onClick}>
<span className={css.buttonText}>SHOP NOW</span> <span className={css.buttonText}>SHOP NOW</span>
</SpottableDiv> </div>
</div> </SpottableDiv>
); );
} }

75
com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/TabContainer.v2.jsx
View File

@@ -1,27 +1,24 @@
import React, { useCallback, useEffect } from "react"; import React, { useCallback, useEffect } from 'react';
import classNames from "classnames"; import classNames from 'classnames';
import Spotlight from "@enact/spotlight"; import Spotlight from '@enact/spotlight';
import Spottable from "@enact/spotlight/Spottable"; import Spottable from '@enact/spotlight/Spottable';
import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator"; import SpotlightContainerDecorator from '@enact/spotlight/SpotlightContainerDecorator';
import { LOG_MENU } from "../../../../utils/Config"; import { LOG_MENU } from '../../../../utils/Config';
import { $L } from "../../../../utils/helperMethods"; import { $L } from '../../../../utils/helperMethods';
import css from "./TabContainer.v2.module.less"; import css from './TabContainer.v2.module.less';
import LiveChannelContents from "../TabContents/LiveChannelContents"; import LiveChannelContents from '../TabContents/LiveChannelContents';
import ShopNowContents from "../TabContents/ShopNowContents"; import ShopNowContents from '../TabContents/ShopNowContents';
import YouMayLikeContents from "../TabContents/YouMayLikeContents"; import YouMayLikeContents from '../TabContents/YouMayLikeContents';
import ShopNowButton from "./ShopNowButton"; import ShopNowButton from './ShopNowButton';
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 icon_shop_now from "../../../../../assets/images/player/icon_tabcontainer_shopnow.png"; import icon_shop_now from '../../../../../assets/images/player/icon_tabcontainer_shopnow.png';
const Container = SpotlightContainerDecorator( const Container = SpotlightContainerDecorator({ enterTo: 'last-focused' }, 'div');
{ enterTo: "last-focused" },
"div"
);
const SpottableDiv = Spottable("div"); const SpottableDiv = Spottable('div');
export default function TabContainerV2({ export default function TabContainerV2({
panelInfo, panelInfo,
@@ -39,12 +36,11 @@ export default function TabContainerV2({
onShopNowButtonClick, onShopNowButtonClick,
onLiveChannelButtonClick, onLiveChannelButtonClick,
onTabClose, // 탭 닫기 콜백 함수 onTabClose, // 탭 닫기 콜백 함수
tabVisible,
}) { }) {
const tabList = [ const tabList = [
$L("SHOP NOW"), $L('SHOP NOW'),
panelInfo?.shptmBanrTpNm === "LIVE" panelInfo?.shptmBanrTpNm === 'LIVE' ? $L('LIVE CHANNEL') : $L('FEATURED SHOWS'),
? $L("LIVE CHANNEL")
: $L("FEATURED SHOWS"),
]; ];
useEffect(() => { useEffect(() => {
@@ -55,10 +51,8 @@ export default function TabContainerV2({
} }
if (tabIndex === 1) { if (tabIndex === 1) {
const isLive = panelInfo?.shptmBanrTpNm === "LIVE"; const isLive = panelInfo?.shptmBanrTpNm === 'LIVE';
nowMenu = isLive nowMenu = isLive ? LOG_MENU.FULL_LIVE_CHANNELS : LOG_MENU.FULL_FEATURED_SHOWS;
? LOG_MENU.FULL_LIVE_CHANNELS
: LOG_MENU.FULL_FEATURED_SHOWS;
} }
if (nowMenu) { if (nowMenu) {
@@ -80,7 +74,7 @@ export default function TabContainerV2({
if (videoVerticalVisible) { if (videoVerticalVisible) {
e.stopPropagation(); e.stopPropagation();
e.preventDefault(); e.preventDefault();
Spotlight.focus("spotlightId-video-contaienr"); Spotlight.focus('spotlightId-video-contaienr');
} }
}, },
[videoVerticalVisible] [videoVerticalVisible]
@@ -91,15 +85,15 @@ export default function TabContainerV2({
e.stopPropagation(); e.stopPropagation();
e.preventDefault(); e.preventDefault();
if (onTabClose) { if (onTabClose) {
onTabClose(-1); // tabIndex를 -1로 설정 onTabClose(1); // tabIndex를 -1로 설정
} }
}, },
[onTabClose] [onTabClose]
); );
useEffect(()=>{ // useEffect(()=>{
console.log('[tabIndex]',tabIndex) // console.log('[tabIndex]',tabIndex)
},[tabIndex]) // },[tabIndex])
return ( return (
<Container <Container
@@ -110,7 +104,7 @@ export default function TabContainerV2({
)} )}
spotlightId={spotlightId} spotlightId={spotlightId}
> >
{tabIndex === 0 && ( {tabVisible && tabIndex === 0 && (
<> <>
<div className={css.shopNowHeader}> <div className={css.shopNowHeader}>
<div className={css.shopNowHeaderLeft}> <div className={css.shopNowHeaderLeft}>
@@ -119,10 +113,7 @@ export default function TabContainerV2({
</div> </div>
<div className={css.shopNowHeaderText}>SHOP NOW</div> <div className={css.shopNowHeaderText}>SHOP NOW</div>
</div> </div>
<div <div className={css.closeButton} onClick={handleCloseButtonClick}>
className={css.closeButton}
onClick={handleCloseButtonClick}
>
× ×
</div> </div>
</div> </div>
@@ -149,7 +140,7 @@ export default function TabContainerV2({
</> </>
)} )}
{tabIndex === 1 && ( {tabVisible && tabIndex === 1 && (
<> <>
<SpottableDiv <SpottableDiv
className={css.liveChannelButton} className={css.liveChannelButton}
@@ -162,7 +153,7 @@ export default function TabContainerV2({
</div> </div>
</SpottableDiv> </SpottableDiv>
{panelInfo?.shptmBanrTpNm === "LIVE" && playListInfo && ( {panelInfo?.shptmBanrTpNm === 'LIVE' && playListInfo && (
<LiveChannelContents <LiveChannelContents
tabTitle={tabList} tabTitle={tabList}
selectedIndex={selectedIndex} selectedIndex={selectedIndex}
@@ -181,8 +172,10 @@ export default function TabContainerV2({
</> </>
)} )}
{tabIndex === 2 && ( {tabVisible && tabIndex === 2 && (
<ShopNowButton onClick={onShopNowButtonClick} /> <>
<ShopNowButton onClick={onShopNowButtonClick} />
</>
)} )}
</Container> </Container>
); );