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

2024-09-27 09:26:48 +09:00
parent 222ce6e3b6 6b4a469fe5
commit 8be7750e21
4 changed files with 113 additions and 92 deletions
--- a/com.twin.app.shoptime/src/views/DetailPanel/DetailPanel.jsx
+++ b/com.twin.app.shoptime/src/views/DetailPanel/DetailPanel.jsx
@@ -4,49 +4,52 @@ import React, {
  useMemo,
  useRef,
  useState,
-} from "react";
+} from 'react';

-import { useDispatch, useSelector } from "react-redux";
+import {
+  useDispatch,
+  useSelector,
+} from 'react-redux';

-import Spotlight from "@enact/spotlight";
+import Spotlight from '@enact/spotlight';

 import {
  changeAppStatus,
  changeLocalSettings,
  setHidePopup,
-} from "../../actions/commonActions";
-import { clearCouponInfo } from "../../actions/couponActions";
-import { getDeviceAdditionInfo } from "../../actions/deviceActions";
+} from '../../actions/commonActions';
+import { clearCouponInfo } from '../../actions/couponActions';
+import { getDeviceAdditionInfo } from '../../actions/deviceActions';
 import {
  clearThemeDetail,
  getThemeCurationDetailInfo,
  getThemeHotelDetailInfo,
-} from "../../actions/homeActions";
+} from '../../actions/homeActions';
 import {
  getMainCategoryDetail,
  getMainYouMayLike,
-} from "../../actions/mainActions";
-import { popPanel } from "../../actions/panelActions";
-import { finishVideoPreview } from "../../actions/playActions";
+} from '../../actions/mainActions';
+import { popPanel } from '../../actions/panelActions';
+import { finishVideoPreview } from '../../actions/playActions';
 import {
  clearProductDetail,
  getProductGroup,
  getProductImageLength,
  getProductOptionId,
-} from "../../actions/productActions";
-import MobileSendPopUp from "../../components/MobileSend/MobileSendPopUp";
-import TBody from "../../components/TBody/TBody";
-import THeader from "../../components/THeader/THeader";
-import TPanel from "../../components/TPanel/TPanel";
-import * as Config from "../../utils/Config";
-import { panel_names } from "../../utils/Config";
-import { $L } from "../../utils/helperMethods";
-import css from "./DetailPanel.module.less";
-import GroupProduct from "./GroupProduct/GroupProduct";
-import SingleProduct from "./SingleProduct/SingleProduct";
-import ThemeProduct from "./ThemeProduct/ThemeProduct";
-import UnableProduct from "./UnableProduct/UnableProduct";
-import YouMayLike from "./YouMayLike/YouMayLike";
+} from '../../actions/productActions';
+import MobileSendPopUp from '../../components/MobileSend/MobileSendPopUp';
+import TBody from '../../components/TBody/TBody';
+import THeader from '../../components/THeader/THeader';
+import TPanel from '../../components/TPanel/TPanel';
+import * as Config from '../../utils/Config';
+import { panel_names } from '../../utils/Config';
+import { $L } from '../../utils/helperMethods';
+import css from './DetailPanel.module.less';
+import GroupProduct from './GroupProduct/GroupProduct';
+import SingleProduct from './SingleProduct/SingleProduct';
+import ThemeProduct from './ThemeProduct/ThemeProduct';
+import UnableProduct from './UnableProduct/UnableProduct';
+import YouMayLike from './YouMayLike/YouMayLike';

 export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
  const dispatch = useDispatch();
@@ -471,22 +474,19 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
          )}
        </TBody>
      </TPanel>
-      {lgCatCd &&
-        (productData || themeProductInfos) &&
-        youmaylikeData &&
-        youmaylikeData.length > 0 && (
-          <YouMayLike
-            isUnable={
-              productData?.pmtSuptYn === "N" ||
-              panelInfo?.type === "hotel" ||
-              panelInfo?.type === "theme"
-            }
-            panelInfo={panelInfo}
-            setSelectedIndex={setSelectedIndex}
-            productInfo={productData || themeData}
-            setIsYouMayLikeOpened={setIsYouMayLikeOpened}
-          />
-        )}
+      {youmaylikeData && youmaylikeData.length > 0 && (
+        <YouMayLike
+          isUnable={
+            productData?.pmtSuptYn === "N" ||
+            panelInfo?.type === "hotel" ||
+            panelInfo?.type === "theme"
+          }
+          panelInfo={panelInfo}
+          setSelectedIndex={setSelectedIndex}
+          productInfo={productData || themeData}
+          setIsYouMayLikeOpened={setIsYouMayLikeOpened}
+        />
+      )}
      {activePopup === Config.ACTIVE_POPUP.smsPopup && (
        <MobileSendPopUp
          open={popupVisible}
--- a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/QuickMenu/QuickMenuItem/QuickMenuItem.jsx
+++ b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/QuickMenu/QuickMenuItem/QuickMenuItem.jsx
@@ -63,7 +63,7 @@ export default memo(function QuickMenuItem({
  }, [handleStopScrolling, itemIndex]);

  const handleClick = useCallback(() => {
-    if (patnrId === selectedPatnrId) {
+    if (patnrId === (selectedPatnrId ?? panelInfo?.patnrId)) {
      return;
    }

--- a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerOverlay/PlayerOverlayQRCode.jsx
+++ b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerOverlay/PlayerOverlayQRCode.jsx
@@ -1,10 +1,14 @@
-import React, { useEffect, useMemo, useState } from "react";
+import React, {
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';

-import classNames from "classnames";
-import { useSelector } from "react-redux";
+import classNames from 'classnames';
+import { useSelector } from 'react-redux';

-import TQRCode from "../../../components/TQRCode/TQRCode";
-import css from "./PlayerOverlayQRCode.module.less";
+import TQRCode from '../../../components/TQRCode/TQRCode';
+import css from './PlayerOverlayQRCode.module.less';

 export default function PlayerOverlayQRCode({
  shopNowInfos,
@@ -69,6 +73,10 @@ export default function PlayerOverlayQRCode({
        setInnerStyle({ position: "absolute", top: "90px", left: "74px" });
      }
    }
+
+    return () => {
+      setInnerStyle(null);
+    };
  }, [shopNowInfos, smallestOffsetHourIndex, cntry_cd, currentVideoItem]);

  const innerStylePosition = useMemo(() => innerStyle, [innerStyle]);
--- a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx
+++ b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx
@@ -1,53 +1,64 @@
-import React, { useCallback, useEffect, useMemo, useRef } from "react";
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+} from 'react';

-import classNames from "classnames";
-import { useDispatch } from "react-redux";
+import classNames from 'classnames';
+import { useDispatch } from 'react-redux';

-import { Job } from "@enact/core/util";
-import Spotlight from "@enact/spotlight";
-import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
-import { setContainerLastFocusedElement } from "@enact/spotlight/src/container";
+import { Job } from '@enact/core/util';
+import Spotlight from '@enact/spotlight';
+import SpotlightContainerDecorator
+  from '@enact/spotlight/SpotlightContainerDecorator';
+import { setContainerLastFocusedElement } from '@enact/spotlight/src/container';

-import dummyVtt from "../../../assets/mock/video.vtt";
+import dummyVtt from '../../../assets/mock/video.vtt';
 import {
  changeAppStatus,
  changeLocalSettings,
  requestLiveSubtitle,
  sendBroadCast,
-} from "../../actions/commonActions";
-import { sendLogGNB, sendLogLive, sendLogVOD } from "../../actions/logActions";
+} from '../../actions/commonActions';
+import {
+  sendLogGNB,
+  sendLogLive,
+  sendLogVOD,
+} from '../../actions/logActions';
 import {
  clearShopNowInfo,
  getHomeFullVideoInfo,
  getMainCategoryShowDetail,
  getMainLiveShow,
  getMainLiveShowNowProduct,
-} from "../../actions/mainActions";
-import * as PanelActions from "../../actions/panelActions";
-import { updatePanel } from "../../actions/panelActions";
+} from '../../actions/mainActions';
+import * as PanelActions from '../../actions/panelActions';
+import { updatePanel } from '../../actions/panelActions';
 import {
  CLEAR_PLAYER_INFO,
  getChatLog,
  getSubTitle,
  startVideoPlayer,
-} from "../../actions/playActions";
-import { convertUtcToLocal } from "../../components/MediaPlayer/util";
-import TPanel from "../../components/TPanel/TPanel";
-import VideoOverlayWithPhoneNumber from "../../components/VideoOverlayWithPhoneNumber/VideoOverlayWithPhoneNumber";
-import Media from "../../components/VideoPlayer/Media";
-import TReactPlayer from "../../components/VideoPlayer/TReactPlayer";
-import { VideoPlayer } from "../../components/VideoPlayer/VideoPlayer";
-import usePrevious from "../../hooks/usePrevious";
-import useWhyDidYouUpdate from "../../hooks/useWhyDidYouUpdate";
-import * as Config from "../../utils/Config";
-import { panel_names } from "../../utils/Config";
-import { formatGMTString } from "../../utils/helperMethods";
-import { SpotlightIds } from "../../utils/SpotlightIds";
-import PlayerOverlayChat from "./PlayerOverlay/PlayerOverlayChat";
-import PlayerOverlayQRCode from "./PlayerOverlay/PlayerOverlayQRCode";
-import css from "./PlayerPanel.module.less";
-import PlayerTabButton from "./PlayerTabContents/TabButton/PlayerTabButton";
-import TabContainer from "./PlayerTabContents/TabContainer";
+} from '../../actions/playActions';
+import { convertUtcToLocal } from '../../components/MediaPlayer/util';
+import TPanel from '../../components/TPanel/TPanel';
+import VideoOverlayWithPhoneNumber
+  from '../../components/VideoOverlayWithPhoneNumber/VideoOverlayWithPhoneNumber';
+import Media from '../../components/VideoPlayer/Media';
+import TReactPlayer from '../../components/VideoPlayer/TReactPlayer';
+import { VideoPlayer } from '../../components/VideoPlayer/VideoPlayer';
+import usePrevious from '../../hooks/usePrevious';
+import useWhyDidYouUpdate from '../../hooks/useWhyDidYouUpdate';
+import * as Config from '../../utils/Config';
+import { panel_names } from '../../utils/Config';
+import { formatGMTString } from '../../utils/helperMethods';
+import { SpotlightIds } from '../../utils/SpotlightIds';
+import PlayerOverlayChat from './PlayerOverlay/PlayerOverlayChat';
+import PlayerOverlayQRCode from './PlayerOverlay/PlayerOverlayQRCode';
+import css from './PlayerPanel.module.less';
+import PlayerTabButton from './PlayerTabContents/TabButton/PlayerTabButton';
+import TabContainer from './PlayerTabContents/TabContainer';

 const Container = SpotlightContainerDecorator(
  { enterTo: "default-element", preserveld: true },
@@ -938,6 +949,7 @@ const PlayerPanel = ({
    if (
      panelInfo.shptmBanrTpNm === "VOD" &&
      showDetailInfo &&
+      showDetailInfo[0]?.showCatCd &&
      showDetailInfo.length > 0
    ) {
      dispatch(
@@ -954,18 +966,22 @@ const PlayerPanel = ({
      playListInfo.length > 0 &&
      panelInfo.shptmBanrTpNm === "LIVE"
    ) {
-      dispatch(
-        getMainLiveShowNowProduct({
-          patnrId: playListInfo[selectedIndex]?.patnrId,
-          showId: playListInfo[selectedIndex]?.showId,
-        })
-      );
+      if (playListInfo[selectedIndex]?.patnrId) {
+        dispatch(
+          getMainLiveShowNowProduct({
+            patnrId: playListInfo[selectedIndex]?.patnrId,
+            showId: playListInfo[selectedIndex]?.showId,
+          })
+        );
+      }

-      dispatch(
-        getHomeFullVideoInfo({
-          lgCatCd: playListInfo[selectedIndex]?.catCd,
-        })
-      );
+      if (playListInfo[selectedIndex]?.catCd) {
+        dispatch(
+          getHomeFullVideoInfo({
+            lgCatCd: playListInfo[selectedIndex]?.catCd,
+          })
+        );
+      }
    }
  }, [playListInfo, selectedIndex, panelInfo.shptmBanrTpNm]);

@@ -1064,10 +1080,7 @@ const PlayerPanel = ({

  // live subtitle Luna API
  useEffect(() => {
-    if (
-      currentSubtitleBlob ||
-      (panelInfo?.shptmBanrTpNm === "MEDIA" && panelInfo?.patnrNm !== "QVC")
-    ) {
+    if (currentSubtitleBlob) {
      return;
    } else if (isYoutube) {
      if (mediaId) {