[251215] merge: Soft merge gitlab/develop_si

다음 변경사항들을 merge: - [영상내 shopnow 수정] - [라이브 채널 넥스트 버튼 수정] 충돌 없이 성공적으로 merge 완료
2025-12-15 13:16:08 +09:00
parent ab2dd7385b f46090863f
commit 2c681bab68
4 changed files with 91 additions and 45 deletions
--- a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/LiveChannelNext.jsx
+++ b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/LiveChannelNext.jsx
@@ -1,16 +1,13 @@
 import React from 'react';

+import classNames from 'classnames';
 import { compose } from 'ramda/src/compose';

 import Spotlight from '@enact/spotlight';
 import Spottable from '@enact/spotlight/Spottable';
-import {
-  Marquee,
-  MarqueeController,
-} from '@enact/ui/Marquee';
+import { Marquee, MarqueeController } from '@enact/ui/Marquee';

-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 CustomImage from '../../../../components/CustomImage/CustomImage';
 import { SpotlightIds } from '../../../../utils/SpotlightIds';
 import css from './LiveChannelNext.module.less';
@@ -55,9 +52,19 @@ export default function LiveChannelNext({
        onSpotlightRight={handleSpotlightRight}
      >
        <div className={css.logoWrapper}>
-          <div className={css.logoBackground} style={{ background: backgroundColor }}>
+          <div
+            className={css.logoBackground}
+            style={{ background: backgroundColor }}
+          >
            {channelLogo ? (
-              <CustomImage src={channelLogo} alt={channelName} className={css.logoImage} />
+              <CustomImage
+                src={channelLogo}
+                alt={channelName}
+                className={classNames(
+                  css.logoImage,
+                  channelName === 'QVC' && css.qvcLogoImg
+                )}
+              />
            ) : (
              <div className={css.logoPlaceholder} />
            )}
--- a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/LiveChannelNext.module.less
+++ b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/LiveChannelNext.module.less
@@ -1,5 +1,5 @@
-@import "../../../../style/CommonStyle.module.less";
-@import "../../../../style/utils.module.less";
+@import '../../../../style/CommonStyle.module.less';
+@import '../../../../style/utils.module.less';

 .container {
  position: fixed;
@@ -51,13 +51,16 @@
  display: flex;
  justify-content: center;
  align-items: center;
-  background: linear-gradient(180deg, #284998 0%, #06B0EE 100%);
 }

 .logoImage {
  width: 100%;
  height: 100%;
  object-fit: cover;
+  &.qvcLogoImg {
+    width: 70%;
+    height: 70%;
+  }
 }

 .logoPlaceholder {
@@ -69,7 +72,7 @@
 .channelName {
  color: #fcfcfc;
  font-size: 25px;
-  font-family: "LG Smart UI";
+  font-family: 'LG Smart UI';
  font-weight: 700;
  line-height: 35px;
  white-space: nowrap;
@@ -81,7 +84,7 @@
 .programName {
  color: rgba(234, 234, 234, 0.7);
  font-size: 25px;
-  font-family: "LG Smart UI";
+  font-family: 'LG Smart UI';
  font-weight: 600;
  line-height: 35px;
  white-space: nowrap;
@@ -91,7 +94,6 @@
  max-width: 180px; // 최대 너비 제한 완화
 }

-
 .arrowIcon {
  display: flex;
  align-items: center;
--- 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
@@ -7,27 +7,28 @@ import Spotlight from '@enact/spotlight';
 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 usePrevious from '../../../../hooks/usePrevious';
+import { LOG_MENU } from '../../../../utils/Config';
 import { createDebugHelpers } from '../../../../utils/debug';
+import { $L } from '../../../../utils/helperMethods';
+import { SpotlightIds } from '../../../../utils/SpotlightIds';
+import FeaturedShowContents from '../TabContents/FeaturedShowContents';
+import LiveChannelContents from '../TabContents/LiveChannelContents';
+import ShopNowContents from '../TabContents/ShopNowContents';
+import LiveChannelNext from './LiveChannelNext';
+import ShopNowButton from './ShopNowButton';
+import css from './TabContainer.v2.module.less';

 // 디버그 헬퍼 설정
 const DEBUG_MODE = false;
 const { dlog, dwarn, derror } = createDebugHelpers(DEBUG_MODE);

-// 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';
-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';
-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');

@@ -50,18 +51,22 @@ export default function TabContainerV2({
  onTabClose, // 탭 닫기 콜백 함수
  tabVisible,
 }) {
-  const youmaylikeInfos = useSelector((state) => state.main.youmaylikeInfos);  
+  const youmaylikeInfos = useSelector((state) => state.main.youmaylikeInfos);

  // 다음 재생 가능한 쇼 찾기
  const findNextPlayableShow = useCallback((currentPlayList, currentIndex) => {
    if (!currentPlayList || currentPlayList.length === 0) return null;

-    let nextIndex = currentIndex === currentPlayList.length - 1 ? 0 : currentIndex + 1;
+    let nextIndex =
+      currentIndex === currentPlayList.length - 1 ? 0 : currentIndex + 1;
    let initialIndex = nextIndex;
    let attempts = 0;

    // 유효한 showId를 가진 다음 쇼 찾기
-    while (!currentPlayList[nextIndex]?.showId && attempts < currentPlayList.length) {
+    while (
+      !currentPlayList[nextIndex]?.showId &&
+      attempts < currentPlayList.length
+    ) {
      nextIndex = nextIndex === currentPlayList.length - 1 ? 0 : nextIndex + 1;
      attempts++;
      if (nextIndex === initialIndex) break;
@@ -87,13 +92,18 @@ export default function TabContainerV2({
      data: youmaylikeInfos,
      shopNowInfo_length: shopNowInfo?.length,
      shouldShowYouMayAlso:
-        shopNowInfo && shopNowInfo.length < 3 && youmaylikeInfos && youmaylikeInfos.length > 0,
+        shopNowInfo &&
+        shopNowInfo.length < 3 &&
+        youmaylikeInfos &&
+        youmaylikeInfos.length > 0,
    });
  }, [youmaylikeInfos, shopNowInfo]);

  const tabList = [
    $L('SHOP NOW'),
-    panelInfo?.shptmBanrTpNm === 'LIVE' ? $L('LIVE CHANNEL') : $L('FEATURED SHOWS'),
+    panelInfo?.shptmBanrTpNm === 'LIVE'
+      ? $L('LIVE CHANNEL')
+      : $L('FEATURED SHOWS'),
  ];

  useEffect(() => {
@@ -105,7 +115,9 @@ export default function TabContainerV2({

    if (tabIndex === 1) {
      const isLive = panelInfo?.shptmBanrTpNm === 'LIVE';
-      nowMenu = isLive ? LOG_MENU.FULL_LIVE_CHANNELS : LOG_MENU.FULL_FEATURED_SHOWS;
+      nowMenu = isLive
+        ? LOG_MENU.FULL_LIVE_CHANNELS
+        : LOG_MENU.FULL_FEATURED_SHOWS;
    }

    if (nowMenu) {
@@ -160,7 +172,9 @@ export default function TabContainerV2({

  // 하나의 함수에서 모든 tabIndex 변화 처리
  const handleTabIndexChange = useCallback((newTabIndex, oldTabIndex) => {
-    console.log(`[TabIndexChange] Tab changed from ${oldTabIndex} to ${newTabIndex}`);
+    console.log(
+      `[TabIndexChange] Tab changed from ${oldTabIndex} to ${newTabIndex}`
+    );

    if (newTabIndex === 0) {
      // tabIndex = 0 (ShopNow)
@@ -220,8 +234,18 @@ export default function TabContainerV2({
                  Spotlight.focus('shop-now-item-0');
                }}
              >
-                <div className={css.shopNowIconWrapper}>
-                  <img src={icon_shop_now} alt="shop now icon" className={css.shopNowIcon} />
+                <div
+                  className={classNames(
+                    css.shopNowIconWrapper,
+                    playListInfo[selectedIndex]?.patncNm === 'QVC' &&
+                      css.shopNowQvcIconWrapper
+                  )}
+                >
+                  <img
+                    src={playListInfo[selectedIndex]?.patncLogoPath}
+                    alt="shop now icon"
+                    className={css.shopNowIcon}
+                  />
                </div>
                <div className={css.shopNowHeaderText}>SHOP NOW</div>
                <div className={css.arrowIcon}>
@@ -250,7 +274,9 @@ export default function TabContainerV2({
              youmaylikeInfos &&
              youmaylikeInfos.length > 0 && (
                <div className={css.youMayAlsoLikeHeader}>
-                  <div className={css.youMayAlsoLikeText}>You may also like</div>
+                  <div className={css.youMayAlsoLikeText}>
+                    You may also like
+                  </div>
                </div>
              )}
          </div>
@@ -273,7 +299,11 @@ export default function TabContainerV2({
          <SpottableDiv
            className={css.liveChannelButton}
            onClick={onLiveChannelButtonClick}
-            spotlightId={panelInfo?.shptmBanrTpNm === 'LIVE' ? 'below-tab-live-channel-button' : 'below-tab-featured-show-button'}
+            spotlightId={
+              panelInfo?.shptmBanrTpNm === 'LIVE'
+                ? 'below-tab-live-channel-button'
+                : 'below-tab-featured-show-button'
+            }
            onSpotlightUp={handleSpotlightUpToBackButton}
            onSpotlightDown={(e) => {
              // 첫 번째 PlayerItem으로 포커스 이동
--- a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/TabContainer.v2.module.less
+++ b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/TabContainer.v2.module.less
@@ -1,5 +1,5 @@
-@import "../../../../style/CommonStyle.module.less";
-@import "../../../../style/utils.module.less";
+@import '../../../../style/CommonStyle.module.less';
+@import '../../../../style/utils.module.less';

 .tabContainer {
  .position(@position: fixed, @bottom: 0, @left: 0);
@@ -61,7 +61,7 @@
    }

    &::before {
-      content: "";
+      content: '';
      .position(@position: absolute, @top: 0, @left: 0);
      .size(@w: 100%, @h: 100%);
      background: linear-gradient(
@@ -113,10 +113,17 @@
  background: white;
  border-radius: 100px;
  .flex(@display: flex, @justifyCenter: center, @alignCenter: center);
+  &.shopNowQvcIconWrapper {
+    border-radius: 0;
+    .shopNowIcon {
+      .size(@w: 40px, @h: 40px);
+      object-fit: contain;
+    }
+  }
 }

 .shopNowIcon {
-  .size(@w: 20.67px, @h: 20.67px);
+  .size(@w: 40px, @h: 40px);
  object-fit: contain;
 }

@@ -265,7 +272,7 @@

 .youMayAlsoLikeText {
  margin-right: 15px;
-  color: #EAEAEA;
+  color: #eaeaea;
  font-size: 24px;
  font-family: @baseFont;
  font-weight: 700;