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

[live] 영상쪽 스타일 피그마 동기화

Browse Source 
- 영상쪽 스타일 피그마와 동기화작업.
 - 스타일 변경및 spotlightId변경.
This commit is contained in:
junghoon86.park
2025-10-13 18:39:57 +09:00
parent 8c28f3ba8b
commit 0e13d775b0
4 changed files with 231 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,13 +1,20 @@
import React, { useCallback, useEffect } from 'react';
import React, {
useCallback,
useEffect,
} from 'react';
import classNames from 'classnames';
import Spotlight from '@enact/spotlight';
import SpotlightContainerDecorator from '@enact/spotlight/SpotlightContainerDecorator';
import SpotlightContainerDecorator
from '@enact/spotlight/SpotlightContainerDecorator';
import Spottable from '@enact/spotlight/Spottable';
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_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';
@@ -17,9 +24,12 @@ import YouMayLikeContents from '../TabContents/YouMayLikeContents';
import ShopNowButton from './ShopNowButton';
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');
const SpottableDiv = Spottable("div");
export default function TabContainerV2({
panelInfo,
@@ -40,8 +50,10 @@ export default function TabContainerV2({
tabVisible,
}) {
const tabList = [
$L('SHOP NOW'),
panelInfo?.shptmBanrTpNm === 'LIVE' ? $L('LIVE CHANNEL') : $L('FEATURED SHOWS'),
$L("SHOP NOW"),
panelInfo?.shptmBanrTpNm === "LIVE"
? $L("LIVE CHANNEL")
: $L("FEATURED SHOWS"),
];
useEffect(() => {
@@ -52,8 +64,10 @@ export default function TabContainerV2({
}
if (tabIndex === 1) {
const isLive = panelInfo?.shptmBanrTpNm === 'LIVE';
nowMenu = isLive ? LOG_MENU.FULL_LIVE_CHANNELS : LOG_MENU.FULL_FEATURED_SHOWS;
const isLive = panelInfo?.shptmBanrTpNm === "LIVE";
nowMenu = isLive
? LOG_MENU.FULL_LIVE_CHANNELS
: LOG_MENU.FULL_FEATURED_SHOWS;
}
if (nowMenu) {
@@ -75,7 +89,7 @@ export default function TabContainerV2({
if (videoVerticalVisible) {
e.stopPropagation();
e.preventDefault();
Spotlight.focus('spotlightId-video-contaienr');
Spotlight.focus("spotlightId-video-contaienr");
}
},
[videoVerticalVisible]
@@ -106,7 +120,7 @@ export default function TabContainerV2({
useEffect(() => {
if (tabIndex === 2) {
setTimeout(() => {
Spotlight.focus('below-tab-shop-now-button');
Spotlight.focus("below-tab-shop-now-button");
}, 100);
}
}, [tabIndex]);
@@ -123,26 +137,44 @@ export default function TabContainerV2({
{tabVisible && tabIndex === 0 && (
<>
<div className={css.shopNowHeader}>
<div className={css.shopNowHeaderLeft}>
<div className={css.shopNowIconWrapper}>
<img src={icon_shop_now} alt="shop now icon" className={css.shopNowIcon} />
</div>
<div className={css.shopNowHeaderText}>SHOP NOW</div>
</div>
<SpottableDiv
className={css.closeButton}
className={css.shopNowHeaderLeft}
spotlightId="shownow_close_button"
onClick={handleCloseButtonClick}
spotlightId="below-tab-close-button"
onSpotlightUp={handleSpotlightUpToBackButton}
onSpotlightDown={(e) => {
// 첫 번째 ShopNow 아이템으로 포커스 이동
e.stopPropagation();
e.preventDefault();
Spotlight.focus('shop-now-item-0');
Spotlight.focus("shop-now-item-0");
}}
>
<div className={css.shopNowIconWrapper}>
<img
src={icon_shop_now}
alt="shop now icon"
className={css.shopNowIcon}
/>
</div>
<div className={css.shopNowHeaderText}>SHOP NOW</div>
<div className={css.arrowIcon}>
<img src={icon_arrow_dwon} alt="arrow down" />
</div>
</SpottableDiv>
{/* <SpottableDiv
className={css.closeButton}
spotlightId="below-tab-close-button"
onClick={handleCloseButtonClick}
onSpotlightUp={handleSpotlightUpToBackButton}
onSpotlightDown={(e) => {
// 첫 번째 ShopNow 아이템으로 포커스 이동
e.stopPropagation();
e.preventDefault();
Spotlight.focus("shop-now-item-0");
}}
>
×
</SpottableDiv>
</SpottableDiv> */}
</div>
<ShopNowContents
tabTitle={tabList}
@@ -176,7 +208,7 @@ export default function TabContainerV2({
onSpotlightUp={handleSpotlightUpToBackButton}
onSpotlightDown={(e) => {
// 첫 번째 PlayerItem으로 포커스 이동
Spotlight.focus('tabChannel-video-0');
Spotlight.focus("tabChannel-video-0");
}}
>
<span className={css.buttonText}>LIVE CHANNEL</span>
@@ -185,7 +217,7 @@ export default function TabContainerV2({
</div>
</SpottableDiv>
{panelInfo?.shptmBanrTpNm === 'LIVE' && playListInfo && (
{panelInfo?.shptmBanrTpNm === "LIVE" && playListInfo && (
<LiveChannelContents
tabTitle={tabList}
selectedIndex={selectedIndex}
@@ -204,7 +236,9 @@ export default function TabContainerV2({
</>
)}
{tabVisible && tabIndex === 2 && <ShopNowButton onClick={onShopNowButtonClick} />}
{tabVisible && tabIndex === 2 && (
<ShopNowButton onClick={onShopNowButtonClick} />
)}
</Container>
);
}