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

변경사항을 반영했습니다 🕐 커밋 시간: 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()
2025-10-09 21:22:03 +09:00
parent 0ea842e569
commit 7d2ea49c63
3 changed files with 39 additions and 45 deletions
--- a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx
+++ b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx
@@ -2195,6 +2195,7 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
            onShopNowButtonClick={() => setTabIndexV2(0)}
            onLiveChannelButtonClick={() => setTabIndexV2(2)}
            onTabClose={(newTabIndex) => setTabIndexV2(newTabIndex)}
+            tabVisible={belowContentsVisible}
          />
        )}
      </Container>
--- a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/ShopNowButton.jsx
+++ b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/ShopNowButton.jsx
@@ -8,10 +8,10 @@ const SpottableDiv = Spottable('div');

 export default function ShopNowButton({ onClick }) {
  return (
-    <div className={css.container}>
-      <SpottableDiv className={css.shopNowButton} onClick={onClick} spotlightId="shop-now-button">
+    <SpottableDiv className={css.container} spotlightId="shop-now-button-container">
+      <div className={css.shopNowButton} onClick={onClick}>
        <span className={css.buttonText}>SHOP NOW</span>
-      </SpottableDiv>
-    </div>
+      </div>
+    </SpottableDiv>
  );
 }
--- 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
@@ -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 Spottable from "@enact/spotlight/Spottable";
-import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
+import Spotlight from '@enact/spotlight';
+import Spottable from '@enact/spotlight/Spottable';
+import SpotlightContainerDecorator from '@enact/spotlight/SpotlightContainerDecorator';

-import { LOG_MENU } from "../../../../utils/Config";
-import { $L } from "../../../../utils/helperMethods";
-import css from "./TabContainer.v2.module.less";
-import LiveChannelContents from "../TabContents/LiveChannelContents";
-import ShopNowContents from "../TabContents/ShopNowContents";
-import YouMayLikeContents from "../TabContents/YouMayLikeContents";
-import ShopNowButton from "./ShopNowButton";
-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 css from './TabContainer.v2.module.less';
+import LiveChannelContents from '../TabContents/LiveChannelContents';
+import ShopNowContents from '../TabContents/ShopNowContents';
+import YouMayLikeContents from '../TabContents/YouMayLikeContents';
+import ShopNowButton from './ShopNowButton';
+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';

-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,
@@ -39,12 +36,11 @@ export default function TabContainerV2({
  onShopNowButtonClick,
  onLiveChannelButtonClick,
  onTabClose, // 탭 닫기 콜백 함수
+  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(() => {
@@ -55,10 +51,8 @@ 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) {
@@ -80,7 +74,7 @@ export default function TabContainerV2({
      if (videoVerticalVisible) {
        e.stopPropagation();
        e.preventDefault();
-        Spotlight.focus("spotlightId-video-contaienr");
+        Spotlight.focus('spotlightId-video-contaienr');
      }
    },
    [videoVerticalVisible]
@@ -91,15 +85,15 @@ export default function TabContainerV2({
      e.stopPropagation();
      e.preventDefault();
      if (onTabClose) {
-        onTabClose(-1); // tabIndex를 -1로 설정
+        onTabClose(1); // tabIndex를 -1로 설정
      }
    },
    [onTabClose]
  );

-  useEffect(()=>{
-    console.log('[tabIndex]',tabIndex)
-  },[tabIndex])
+  // useEffect(()=>{
+  //   console.log('[tabIndex]',tabIndex)
+  // },[tabIndex])

  return (
    <Container
@@ -110,7 +104,7 @@ export default function TabContainerV2({
      )}
      spotlightId={spotlightId}
    >
-      {tabIndex === 0 && (
+      {tabVisible && tabIndex === 0 && (
        <>
          <div className={css.shopNowHeader}>
            <div className={css.shopNowHeaderLeft}>
@@ -119,10 +113,7 @@ export default function TabContainerV2({
              </div>
              <div className={css.shopNowHeaderText}>SHOP NOW</div>
            </div>
-            <div
-              className={css.closeButton}
-              onClick={handleCloseButtonClick}
-            >
+            <div className={css.closeButton} onClick={handleCloseButtonClick}>
              ×
            </div>
          </div>
@@ -149,7 +140,7 @@ export default function TabContainerV2({
        </>
      )}

-      {tabIndex === 1 && (
+      {tabVisible && tabIndex === 1 && (
        <>
          <SpottableDiv
            className={css.liveChannelButton}
@@ -162,7 +153,7 @@ export default function TabContainerV2({
            </div>
          </SpottableDiv>

-          {panelInfo?.shptmBanrTpNm === "LIVE" && playListInfo && (
+          {panelInfo?.shptmBanrTpNm === 'LIVE' && playListInfo && (
            <LiveChannelContents
              tabTitle={tabList}
              selectedIndex={selectedIndex}
@@ -181,8 +172,10 @@ export default function TabContainerV2({
        </>
      )}

-      {tabIndex === 2 && (
-        <ShopNowButton onClick={onShopNowButtonClick} />
+      {tabVisible && tabIndex === 2 && (
+        <>
+          <ShopNowButton onClick={onShopNowButtonClick} />
+        </>
      )}
    </Container>
  );