Merge branch 'detail_v3' of http://gitlab.t-win.kr/ifheone/shoptime into detail_v3

com.twin.app.shoptime/src/views/PlayerPanel/PlayerOverlay/PlayerOverlayContents.jsx

@@ -1,14 +1,24 @@
-import React, { useCallback, useEffect, useMemo, useRef } from 'react';
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+} from 'react';
 
 import classNames from 'classnames';
-import { useDispatch, useSelector } from 'react-redux';
+import {
+  useDispatch,
+  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 Marquee from '@enact/ui/Marquee';
 
-import defaultLogoImg from '../../../../assets/images/ic-tab-partners-default@3x.png';
+import defaultLogoImg
+  from '../../../../assets/images/ic-tab-partners-default@3x.png';
 import { setShowPopup } from '../../../actions/commonActions';
 import CustomImage from '../../../components/CustomImage/CustomImage';
 import { ACTIVE_POPUP } from '../../../utils/Config';
@@ -16,9 +26,12 @@ import { SpotlightIds } from '../../../utils/SpotlightIds';
 import PlayerTabButton from '../PlayerTabContents/TabButton/PlayerTabButton';
 import css from './PlayerOverlayContents.module.less';
 
-const SpottableBtn = Spottable('button');
+const SpottableBtn = Spottable("button");
 
-const Container = SpotlightContainerDecorator({ enterTo: 'default-element' }, 'div');
+const Container = SpotlightContainerDecorator(
+  { enterTo: "default-element" },
+  "div"
+);
 
 export default function PlayerOverlayContents({
   type,
@@ -55,7 +68,7 @@ export default function PlayerOverlayContents({
   const backBtnRef = useRef(null);
 
   useEffect(() => {
-    if (type === 'MEDIA' && !panelInfo.modal && backBtnRef.current) {
+    if (type === "MEDIA" && !panelInfo.modal && backBtnRef.current) {
       Spotlight.focus(SpotlightIds.PLAYER_BACK_BUTTON);
     }
   }, [panelInfo?.shptmBanrTpNm, panelInfo.modal, backBtnRef.current]);
@@ -70,7 +83,7 @@ export default function PlayerOverlayContents({
 
   const patncLogoPath = useMemo(() => {
     let logo = playListInfo[selectedIndex]?.patncLogoPath;
-    if (type === 'MEDIA') {
+    if (type === "MEDIA") {
       logo = panelInfo?.patncLogoPath;
     }
 
@@ -79,7 +92,7 @@ export default function PlayerOverlayContents({
 
   const partnerName = useMemo(() => {
     let name = playListInfo[selectedIndex]?.patncNm;
-    if (type === 'MEDIA') {
+    if (type === "MEDIA") {
       name = panelInfo?.patncNm;
     }
 
@@ -88,11 +101,11 @@ export default function PlayerOverlayContents({
 
   const showName = useMemo(() => {
     let name = playListInfo[selectedIndex]?.showNm;
-    if (type === 'MEDIA') {
+    if (type === "MEDIA") {
       name = panelInfo?.showNm;
     }
 
-    return name ? name.replace(/<br\s*\/?>/gi, ' ') : '';
+    return name ? name.replace(/<br\s*\/?>/gi, " ") : "";
   }, [playListInfo, selectedIndex, panelInfo]);
 
   const onSpotlightMoveTabButton = (e) => {
@@ -103,15 +116,15 @@ export default function PlayerOverlayContents({
 
   const onSpotlightMoveMediaButton = (e) => {
     e.stopPropagation();
-    if (type === 'LIVE') {
+    if (type === "LIVE") {
-      return Spotlight.focus('videoIndicator-down-button');
+      return Spotlight.focus("videoIndicator-down-button");
     }
-    Spotlight.focus('videoPlayer_mediaControls');
+    Spotlight.focus("videoPlayer_mediaControls");
   };
 
   const onSpotlightMoveSlider = useCallback(
     (e) => {
-      if (type === 'VOD') {
+      if (type === "VOD") {
         e.stopPropagation();
 
         Spotlight.focus(SpotlightIds.PLAYER_SLIDER);
@@ -123,7 +136,7 @@ export default function PlayerOverlayContents({
   const onSpotlightMoveSideTab = (e) => {
     e.stopPropagation();
     e.preventDefault();
-    Spotlight.focus('tab-0');
+    Spotlight.focus("tab-0");
   };
 
   const onSpotlightMoveBelowTab = (e) => {
@@ -133,13 +146,14 @@ export default function PlayerOverlayContents({
     // tabIndexV2에 따라 다른 버튼으로 포커스 이동
     if (tabIndexV2 === 0) {
       // ShopNow 탭: Close 버튼으로
-      Spotlight.focus('below-tab-close-button');
+      // Spotlight.focus('below-tab-close-button');
+      Spotlight.focus("shownow_close_button");
     } else if (tabIndexV2 === 1) {
       // LIVE CHANNEL 탭: LIVE CHANNEL 버튼으로
-      Spotlight.focus('below-tab-live-channel-button');
+      Spotlight.focus("below-tab-live-channel-button");
     } else if (tabIndexV2 === 2) {
       // ShopNowButton: ShopNowButton으로
-      Spotlight.focus('below-tab-shop-now-button');
+      Spotlight.focus("below-tab-shop-now-button");
     }
   };
 
@@ -149,7 +163,7 @@ export default function PlayerOverlayContents({
 
   const currentSideButtonStatus = useMemo(() => {
     if (
-      type !== 'MEDIA' &&
+      type !== "MEDIA" &&
       !panelInfo?.modal &&
       !sideContentsVisible &&
       tabContainerVersion === 1
@@ -175,7 +189,9 @@ export default function PlayerOverlayContents({
   return (
     <>
       <Container className={css.overlayContainer}>
-        {type !== 'MEDIA' && playListInfo.length > 1 && noLiveContentsVisible && (
+        {type !== "MEDIA" &&
+          playListInfo.length > 1 &&
+          noLiveContentsVisible && (
             <>
               <div className={css.indicatorUpButton}>
                 <SpottableBtn
@@ -225,13 +241,15 @@ export default function PlayerOverlayContents({
             setSideContentsVisible={setSideContentsVisible}
             sideContentsVisible={sideContentsVisible}
             onSpotlightLeft={
-              type !== 'MEDIA' && playListInfo.length < 2 && onSpotlightMoveBackButton
+              type !== "MEDIA" &&
+              playListInfo.length < 2 &&
+              onSpotlightMoveBackButton
             }
             videoType={type}
           />
         )}
 
-        {cntry_cd === 'US' && (
+        {cntry_cd === "US" && (
           <div className={css.videoButtonContainer}>
             <SpottableBtn
               className={classNames(
@@ -260,8 +278,8 @@ export default function PlayerOverlayContents({
             ref={backBtnRef}
           />
           <div
-            className={classNames(type === 'LIVE' && css.liveIcon)}
+            className={classNames(type === "LIVE" && css.liveIcon)}
-            aria-label={type === 'LIVE' && 'Live Icon'}
+            aria-label={type === "LIVE" && "Live Icon"}
           />
 
           {partnerName && (
@@ -276,14 +294,17 @@ export default function PlayerOverlayContents({
           <h2 className={css.patnerName}>{partnerName}</h2>
 
           <Marquee
-            className={classNames(css.title, videoVerticalVisible && css.videoVerticalMarquee)}
+            className={classNames(
+              css.title,
+              videoVerticalVisible && css.videoVerticalMarquee
+            )}
             marqueeOn="render"
           >
             {showName}
           </Marquee>
         </div>
       </Container>
-      {type === 'VOD' && disclaimer && (
+      {type === "VOD" && disclaimer && (
         <div className={css.disclaimer}>
           <span className={css.icon} />
           <h3 aria-label={disclaimer}>{disclaimer}</h3>

com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/ShopNowContents.jsx

@@ -1,37 +1,61 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 
-import { useDispatch, useSelector } from 'react-redux';
+import {
+  useDispatch,
+  useSelector,
+} from 'react-redux';
 
 import { Job } from '@enact/core/util';
 import Spotlight from '@enact/spotlight';
-import SpotlightContainerDecorator from '@enact/spotlight/SpotlightContainerDecorator';
+import SpotlightContainerDecorator
-import { getContainerNode, setContainerLastFocusedElement } from '@enact/spotlight/src/container';
+  from '@enact/spotlight/SpotlightContainerDecorator';
+import {
+  getContainerNode,
+  setContainerLastFocusedElement,
+} from '@enact/spotlight/src/container';
 
 import { sendLogTotalRecommend } from '../../../../actions/logActions';
 import { pushPanel } from '../../../../actions/panelActions';
 import { hidePlayerOverlays } from '../../../../actions/videoPlayActions';
 import TItemCard, { TYPES } from '../../../../components/TItemCard/TItemCard';
-import TVirtualGridList from '../../../../components/TVirtualGridList/TVirtualGridList';
+import TVirtualGridList
+  from '../../../../components/TVirtualGridList/TVirtualGridList';
 import useScrollTo from '../../../../hooks/useScrollTo';
-import { LOG_CONTEXT_NAME, LOG_MENU, LOG_MESSAGE_ID, panel_names } from '../../../../utils/Config';
+import {
+  LOG_CONTEXT_NAME,
+  LOG_MENU,
+  LOG_MESSAGE_ID,
+  panel_names,
+} from '../../../../utils/Config';
 import { scaleH } from '../../../../utils/helperMethods';
-import ListEmptyContents from '../TabContents/ListEmptyContents/ListEmptyContents';
+import ListEmptyContents
+  from '../TabContents/ListEmptyContents/ListEmptyContents';
 import css1 from './ShopNowContents.module.less';
 import cssV2 from './ShopNowContents.v2.module.less';
 
 const extractPriceInfo = (priceInfo) => {
-  if (!priceInfo) return { originalPrice: '', discountedPrice: '', discountRate: '' };
+  if (!priceInfo)
+    return { originalPrice: "", discountedPrice: "", discountRate: "" };
 
-  const parts = priceInfo.split('|').map((part) => part.trim());
+  const parts = priceInfo.split("|").map((part) => part.trim());
 
   return {
-    originalPrice: parts[0] || '',
+    originalPrice: parts[0] || "",
-    discountedPrice: parts[1] || '',
+    discountedPrice: parts[1] || "",
-    discountRate: parts[4] || '',
+    discountRate: parts[4] || "",
   };
 };
 
-const Container = SpotlightContainerDecorator({ enterTo: 'last-focused' }, 'div');
+const Container = SpotlightContainerDecorator(
+  { enterTo: "last-focused" },
+  "div"
+);
 export default function ShopNowContents({
   shopNowInfo,
   videoVerticalVisible,
@@ -41,7 +65,7 @@ export default function ShopNowContents({
   panelInfo,
   tabTitle,
   version = 1,
-  direction = 'vertical',
+  direction = "vertical",
 }) {
   const css = version === 2 ? cssV2 : css1;
   const { getScrollTo, scrollTop } = useScrollTo();
@@ -66,7 +90,7 @@ export default function ShopNowContents({
 
   useEffect(() => {
     return () => {
-      const gridListId = 'playVideoShopNowBox';
+      const gridListId = "playVideoShopNowBox";
       const girdList = getContainerNode(gridListId);
 
       if (girdList) setContainerLastFocusedElement(null, [gridListId]);
@@ -119,7 +143,8 @@ export default function ShopNowContents({
       } = shopNowInfo[index];
 
       // 미리 계산된 가격 정보를 사용
-      const { originalPrice, discountedPrice, discountRate } = priceInfoMap[index] || {};
+      const { originalPrice, discountedPrice, discountRate } =
+        priceInfoMap[index] || {};
 
       const handleItemClick = () => {
         const params = {
@@ -148,7 +173,7 @@ export default function ShopNowContents({
               showId: playListInfo?.showId,
               liveFlag: playListInfo?.liveFlag,
               thumbnailUrl: playListInfo?.thumbnailUrl,
-              liveReqFlag: panelInfo?.shptmBanrTpNm === 'LIVE' && 'Y',
+              liveReqFlag: panelInfo?.shptmBanrTpNm === "LIVE" && "Y",
               patnrId,
               prdtId,
               launchedFromPlayer: true,
@@ -177,7 +202,7 @@ export default function ShopNowContents({
                   // v2에서 첫 번째 아이템일 때 위로 가면 Close 버튼으로
                   e.stopPropagation();
                   e.preventDefault();
-                  Spotlight.focus('below-tab-close-button');
+                  Spotlight.focus("shownow_close_button");
                 }
               : undefined
           }
@@ -212,7 +237,9 @@ export default function ShopNowContents({
             itemWidth={version === 2 ? 310 : videoVerticalVisible ? 540 : 600}
             itemHeight={version === 2 ? 445 : 236}
             spacing={version === 2 ? 30 : 12}
-            className={videoVerticalVisible ? css.verticalItemList : css.itemList}
+            className={
+              videoVerticalVisible ? css.verticalItemList : css.itemList
+            }
             noScrollByWheel={false}
             spotlightId="playVideoShopNowBox"
           />

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

@@ -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_arrow_right from '../../../../../assets/images/icons';
-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';
@@ -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'),
+    $L("SHOP NOW"),
-    panelInfo?.shptmBanrTpNm === 'LIVE' ? $L('LIVE CHANNEL') : $L('FEATURED SHOWS'),
+    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';
+      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) {
@@ -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>
   );
 }

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

@@ -113,8 +113,16 @@
 }
 
 .shopNowHeaderLeft {
-  .flex(@display: flex, @justifyCenter: flex-start, @alignCenter: center);
+  .size(@w: 300px, @h: 70px);
-
+  padding: 20px 30px;
+  border-radius: 100px;
+  border: 1px solid rgba(234, 234, 234, 0.5);
+  overflow: hidden;
+  .flex(@display: flex, @justifyCenter: space-between, @alignCenter: center);
+  background: rgba(0, 0, 0, 0.3);
+  backdrop-filter: blur(5px);
+  cursor: pointer;
+  transition: all 0.3s ease;
   > * {
     margin-right: 15px;
 
@@ -122,6 +130,32 @@
       margin-right: 0;
     }
   }
+  .arrowIcon {
+    .size(@w: 26.25px, @h: 15.63px);
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+      transform: rotate(270deg);
+    }
+  }
+  &:hover {
+    background: rgba(0, 0, 0, 0.5);
+    border-color: rgba(234, 234, 234, 0.7);
+  }
+
+  &:focus {
+    background: @PRIMARY_COLOR_RED;
+    border-color: @PRIMARY_COLOR_RED;
+
+    .buttonText {
+      color: white;
+    }
+
+    &::after {
+      .focused(@boxShadow: 22px, @borderRadius: 100px);
+    }
+  }
 }
 
 .shopNowHeaderText {