[251019] fix: TabContainerV2 , ShopNowContents YouMayAlsoConents처리

🕐 커밋 시간: 2025. 10. 19. 15:45:14

📊 변경 통계:
  • 총 파일: 6개
  • 추가: +220줄
  • 삭제: -62줄

📝 수정된 파일:
  ~ com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/ShopNowContents.jsx
  ~ com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/ShopNowContents.v2.module.less
  ~ com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/ShopNowContainer.module.less
  ~ com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/ShopNowItem.module.less
  ~ com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/TabContainer.v2.jsx
  ~ com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/TabContainer.v2.module.less

🔧 함수 변경 내용:
  📄 com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/ShopNowContents.jsx (javascript):
    ✅ Added: handleItemClick()

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

@@ -1,35 +1,26 @@
-import React, {
-  useCallback,
-  useEffect,
-} from 'react';
+import React, { useCallback, useEffect } from 'react';
 
 import classNames from 'classnames';
+import { useSelector } from 'react-redux';
 
 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_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 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 LiveChannelContents from '../TabContents/LiveChannelContents';
 import ShopNowContents from '../TabContents/ShopNowContents';
-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,
@@ -49,11 +40,11 @@ export default function TabContainerV2({
   onTabClose, // 탭 닫기 콜백 함수
   tabVisible,
 }) {
+  const youmaylikeInfos = useSelector((state) => state.main.youmaylikeInfos);
+
   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(() => {
@@ -64,10 +55,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) {
@@ -89,7 +78,7 @@ export default function TabContainerV2({
       if (videoVerticalVisible) {
         e.stopPropagation();
         e.preventDefault();
-        Spotlight.focus("spotlightId-video-contaienr");
+        Spotlight.focus('spotlightId-video-contaienr');
       }
     },
     [videoVerticalVisible]
@@ -120,7 +109,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]);
@@ -136,45 +125,53 @@ export default function TabContainerV2({
     >
       {tabVisible && tabIndex === 0 && (
         <>
-          <div className={css.shopNowHeader}>
-            <SpottableDiv
-              className={css.shopNowHeaderLeft}
-              spotlightId="shownow_close_button"
-              onClick={handleCloseButtonClick}
-              onSpotlightUp={handleSpotlightUpToBackButton}
-              onSpotlightDown={(e) => {
-                // 첫 번째 ShopNow 아이템으로 포커스 이동
-                e.stopPropagation();
-                e.preventDefault();
-                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> */}
+          <div className={css.shopNowHeaderContainer}>
+            <div className={css.shopNowHeader}>
+              <SpottableDiv
+                className={css.shopNowHeaderLeft}
+                spotlightId="shownow_close_button"
+                onClick={handleCloseButtonClick}
+                onSpotlightUp={handleSpotlightUpToBackButton}
+                onSpotlightDown={(e) => {
+                  // 첫 번째 ShopNow 아이템으로 포커스 이동
+                  e.stopPropagation();
+                  e.preventDefault();
+                  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> */}
+            </div>
+
+            {/* YouMayAlso Like 헤더 (ShopNow 아이템 < 3 && YouMayLike 데이터 존재) */}
+            {shopNowInfo &&
+              shopNowInfo.length < 3 &&
+              youmaylikeInfos &&
+              youmaylikeInfos.length > 0 && (
+                <div className={css.youMayAlsoLikeHeader}>
+                  <div className={css.youMayAlsoLikeText}>You may also like</div>
+                </div>
+              )}
           </div>
           <ShopNowContents
             tabTitle={tabList}
@@ -187,15 +184,6 @@ export default function TabContainerV2({
             version={2}
             direction="horizontal"
           />
-          {shopNowInfo && shopNowInfo.length < 3 && (
-            <YouMayLikeContents
-              shopNowInfo={shopNowInfo}
-              handleItemFocus={_handleItemFocus}
-              playListInfo={playListInfo && playListInfo[selectedIndex]}
-              version={2}
-              direction="horizontal"
-            />
-          )}
         </>
       )}
 
@@ -208,7 +196,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>
@@ -217,7 +205,7 @@ export default function TabContainerV2({
             </div>
           </SpottableDiv>
 
-          {panelInfo?.shptmBanrTpNm === "LIVE" && playListInfo && (
+          {panelInfo?.shptmBanrTpNm === 'LIVE' && playListInfo && (
             <LiveChannelContents
               tabTitle={tabList}
               selectedIndex={selectedIndex}
@@ -236,9 +224,7 @@ export default function TabContainerV2({
         </>
       )}
 
-      {tabVisible && tabIndex === 2 && (
-        <ShopNowButton onClick={onShopNowButtonClick} />
-      )}
+      {tabVisible && tabIndex === 2 && <ShopNowButton onClick={onShopNowButtonClick} />}
     </Container>
   );
 }