youmaylike 기능 수정 , DetailPanel css 수정

2024-04-15 10:45:55 +09:00
parent 9f6e2ab51d
commit 612523eb85
13 changed files with 255 additions and 187 deletions
--- a/com.twin.app.shoptime/src/actions/actionTypes.js
+++ b/com.twin.app.shoptime/src/actions/actionTypes.js
@@ -111,6 +111,8 @@ export const types = {
  // coupon actions
  GET_PRODUCT_COUPON_INFO: "GET_PRODUCT_COUPON_INFO",
  GET_PRODUCT_COUPON_SEARCH: "GET_PRODUCT_COUPON_SEARCH",
+  GET_PRODUCT_COUPON_DOWNLOAD: "GET_PRODUCT_COUPON_DOWNLOAD",
+  GET_PRODUCT_COUPON_TOTDOWNLOAD: "GET_PRODUCT_COUPON_TOTDOWNLOAD",

  // checkout actions
  GET_CHECKOUT_INFO: "GET_CHECKOUT_INFO",
@@ -122,4 +124,7 @@ export const types = {
  // play controller
  GET_CHAT_LOG: "GET_CHAT_LOG",
  GET_SUBTITLE: "GET_SUBTITLE",
+
+  // reset action
+  RESET_REDUX_STATE: "RESET_REDUX_STATE",
 };
--- a/com.twin.app.shoptime/src/actions/couponActions.js
+++ b/com.twin.app.shoptime/src/actions/couponActions.js
@@ -1,6 +1,6 @@
-import { URLS } from "../api/apiConfig";
-import { TAxios } from "../api/TAxios";
-import { types } from "./actionTypes";
+import { URLS } from '../api/apiConfig';
+import { TAxios } from '../api/TAxios';
+import { types } from './actionTypes';

 // IF-LGSP-339 : 회원 다운로드 쿠폰 정보 조회
 export const getProductCouponInfo = (props) => (dispatch, getState) => {
@@ -30,10 +30,66 @@ export const getProductCouponInfo = (props) => (dispatch, getState) => {
    onFail
  );
 };
+// IF-LGSP-364 : 상품 쿠폰 전체 다운로드
+export const getProductCouponTotDownload = (props) => (dispatch, getState) => {
+  // 쿠폰 아이디 여러개 일 경우 쉼표로 구분  ex)80,81,82
+  const { mbrNo, cpnSnoAll } = props;

+  const onSuccess = (response) => {
+    console.log("getProductCouponTotDownload onSuccess ", response.data);
+
+    dispatch({
+      type: types.GET_PRODUCT_COUPON_TOTDOWNLOAD,
+      payload: response.data.data,
+    });
+  };
+
+  const onFail = (error) => {
+    console.error("getProductCouponTotDownload onFail", error);
+  };
+
+  TAxios(
+    dispatch,
+    getState,
+    "post",
+    URLS.GET_PRODUCT_COUPON_TOTDOWNLOAD,
+    { mbrNo, cpnSnoAll },
+    {},
+    onSuccess,
+    onFail
+  );
+};
+// IF-LGSP-318 : 상품 쿠폰 다운로드
+export const getProductCouponDownload = (props) => (dispatch, getState) => {
+  const { mbrNo, cpnSno } = props;
+
+  const onSuccess = (response) => {
+    console.log("getProductCouponDownload onSuccess ", response.data);
+
+    dispatch({
+      type: types.GET_PRODUCT_COUPON_DONWLOAD,
+      payload: response.data.data,
+    });
+  };
+
+  const onFail = (error) => {
+    console.error("getProductCouponDownload onFail", error);
+  };
+
+  TAxios(
+    dispatch,
+    getState,
+    "post",
+    URLS.GET_PRODUCT_COUPON_DOWNLOAD,
+    { mbrNo, cpnSno },
+    {},
+    onSuccess,
+    onFail
+  );
+};
 // IF-LGSP-317 : 상품별 다운로드 가능 쿠폰정보 조회
 export const getProductCouponSearch = (props) => (dispatch, getState) => {
-  const { patnrId, prdtId } = props;
+  const { mbrNo, patnrId, prdtId, catCd } = props;

  const onSuccess = (response) => {
    console.log("getProductCouponSearch onSuccess ", response.data);
@@ -53,7 +109,7 @@ export const getProductCouponSearch = (props) => (dispatch, getState) => {
    getState,
    "get",
    URLS.GET_PRODUCT_COUPON_SEARCH,
-    { patnrId, prdtId },
+    { mbrNo, patnrId, prdtId, catCd },
    {},
    onSuccess,
    onFail
--- a/com.twin.app.shoptime/src/api/apiConfig.js
+++ b/com.twin.app.shoptime/src/api/apiConfig.js
@@ -93,6 +93,8 @@ export const URLS = {
  // coupon actions
  GET_PRODUCT_COUPON_INFO: "/lgsp/v1/product/coupon/info.lge",
  GET_PRODUCT_COUPON_SEARCH: "/lgsp/v1/product/coupon/search.lge",
+  GET_PRODUCT_COUPON_DOWNLOAD: "/lgsp/v1/product/coupon/download.lge",
+  GET_PRODUCT_COUPON_TOTDOWNLOAD: "/lgsp/v1/product/coupon/totDownload.lge",

  //checkout controller
  GET_CHECKOUT_INFO: "/lgsp/v1/myinfo/checkout/info.lge",
--- a/com.twin.app.shoptime/src/views/DetailPanel/DetailPanel.jsx
+++ b/com.twin.app.shoptime/src/views/DetailPanel/DetailPanel.jsx
@@ -35,12 +35,10 @@ export default function ItemDetail() {
  );
  const { httpHeader } = useSelector((state) => state.common);

-  console.log("#panels", panels);
  const dispatch = useDispatch();

  const getPanelInfo = () => {
    if (panels) {
-      console.log("#getPanelInfo");
      for (let i = 0; i < panels.length; i++) {
        if (panels[i].name === "detailpanel") {
          setSelectedPatnrId(panels[i].panelInfo.patnrId);
@@ -91,11 +89,11 @@ export default function ItemDetail() {
        })
      );
    }
-  }, [dispatch, selectedPatnrId, selectedPrdtId, panels]);
+  }, [dispatch, selectedPatnrId, selectedPrdtId, panels, selectedIndex]);

-  const onClick = () => {
+  const onClick = useCallback(() => {
    dispatch(popPanel());
-  };
+  }, [dispatch]);

  useEffect(() => {
    if (panels && selectedPatnrId && selectedPrdtId) {
@@ -192,7 +190,9 @@ export default function ItemDetail() {
          />
        )}
      </TBody>
-      {(selectedPrdtId || themeType === "theme") && <YouMayLike />}
+      {(selectedPrdtId || themeType === "theme") && (
+        <YouMayLike isUnable={productData?.pmtSuptYn === "N"} />
+      )}
    </TPanel>
  );
 }
--- a/com.twin.app.shoptime/src/views/DetailPanel/SingleProduct/SingleOption.jsx
+++ b/com.twin.app.shoptime/src/views/DetailPanel/SingleProduct/SingleOption.jsx
@@ -1,38 +1,26 @@
-import React, {
-  useCallback,
-  useEffect,
-  useState,
-} from 'react';
+import React, { useCallback, useEffect, useState } from "react";

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

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

-import {
-  setHidePopup,
-  setShowPopup,
-} from '../../../actions/commonActions';
-import { getProductCouponSearch } from '../../../actions/couponActions';
-import { pushPanel } from '../../../actions/panelActions';
-import { getProductOption } from '../../../actions/productActions';
-import TButton from '../../../components/TButton/TButton';
-import TPopUp from '../../../components/TPopUp/TPopUp';
-import TScroller from '../../../components/TScroller/TScroller';
-import TVirtualGridList
-  from '../../../components/TVirtualGridList/TVirtualGridList';
-import usePriceInfo from '../../../hooks/usePriceInfo';
-import * as Config from '../../../utils/Config';
-import { $L } from '../../../utils/helperMethods';
-import { SpotlightIds } from '../../../utils/SpotlightIds';
-import FavoriteBtn from '../components/FavoriteBtn';
-import css from './SingleOption.module.less';
+import { setHidePopup, setShowPopup } from "../../../actions/commonActions";
+import { getProductCouponSearch } from "../../../actions/couponActions";
+import { pushPanel } from "../../../actions/panelActions";
+import { getProductOption } from "../../../actions/productActions";
+import TButton from "../../../components/TButton/TButton";
+import TPopUp from "../../../components/TPopUp/TPopUp";
+import TScroller from "../../../components/TScroller/TScroller";
+import TVirtualGridList from "../../../components/TVirtualGridList/TVirtualGridList";
+import usePriceInfo from "../../../hooks/usePriceInfo";
+import * as Config from "../../../utils/Config";
+import { $L } from "../../../utils/helperMethods";
+import { SpotlightIds } from "../../../utils/SpotlightIds";
+import FavoriteBtn from "../components/FavoriteBtn";
+import css from "./SingleOption.module.less";

 const Container = SpotlightContainerDecorator(
  { enterTo: "default-element", preserveId: true },
@@ -58,9 +46,9 @@ export default function SingleOption({
  );
  const { loginUserData } = useSelector((state) => state.common.appStatus);
  const [promotions, setPromotions] = useState([]);
-  const [selectedCoupon, setSelectedCoupon] = useState([]);
  const [selectedBtnOptIdx, setSelectedBtnOptIdx] = useState(0);
  const [quantity, setQuantity] = useState(1);
+  const [selectedCoupon, setSelectedCoupon] = useState();
  const [selectedOptionIdx, setSelectedOptionsIdx] = useState([]);
  const [selectedOptions, setsSelectedOptions] = useState([]);
  const [couponTypes, setCouponTypes] = useState(null);
@@ -81,14 +69,7 @@ export default function SingleOption({
    setPromotions(newPromotions);
  }, [partnerCoupon, shoptiemCoupon]);

-  useEffect(() => {
-    if (promotions === "SHOPTIME PROMOTION" && shoptiemCoupon) {
-      setSelectedCoupon(shoptiemCoupon);
-    } else if (promotions === "SPECIAL PROMOTION" && partnerCoupon) {
-      setSelectedCoupon(partnerCoupon);
-    }
-  }, [promotions, shoptiemCoupon, partnerCoupon]);
-
+  console.log("#coupon ", partnerCoupon, shoptiemCoupon);
  console.log("#selectedCoupon", selectedCoupon);

  useEffect(() => {
@@ -175,10 +156,15 @@ export default function SingleOption({

  const handleCouponClick = useCallback(
    (idx) => {
+      if (idx === 0) {
+        setSelectedCoupon(partnerCoupon);
+      } else if (idx === 1) {
+        setSelectedCoupon(shoptiemCoupon);
+      }
      setCouponTypes(idx);
      dispatch(setShowPopup(Config.ACTIVE_POPUP.couponPopup));
    },
-    [dispatch, popupVisible]
+    [dispatch, popupVisible, promotions]
  );

  const onClose = useCallback(() => {
--- a/com.twin.app.shoptime/src/views/DetailPanel/UnableProduct/UnableOption.jsx
+++ b/com.twin.app.shoptime/src/views/DetailPanel/UnableProduct/UnableOption.jsx
@@ -1,14 +1,14 @@
-import React, { useCallback } from 'react';
+import React, { useCallback } from "react";

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

-import TButton from '../../../components/TButton/TButton';
-import TQRCode from '../../../components/TQRCode/TQRCode';
-import usePriceInfo from '../../../hooks/usePriceInfo';
-import { $L } from '../../../utils/helperMethods';
-import FavoriteBtn from '../components/FavoriteBtn';
-import css from './UnableOption.module.less';
+import TButton from "../../../components/TButton/TButton";
+import TQRCode from "../../../components/TQRCode/TQRCode";
+import usePriceInfo from "../../../hooks/usePriceInfo";
+import { $L } from "../../../utils/helperMethods";
+import FavoriteBtn from "../components/FavoriteBtn";
+import css from "./UnableOption.module.less";

 export default function OptionPartnerPrice({
  selectedPatnrId,
@@ -122,7 +122,7 @@ export default function OptionPartnerPrice({
        }
      }
    } else {
-      return <div>'@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@'</div>;
+      return;
    }
  }, [productInfos]);

--- a/com.twin.app.shoptime/src/views/DetailPanel/UnableProduct/UnableOption.module.less
+++ b/com.twin.app.shoptime/src/views/DetailPanel/UnableProduct/UnableOption.module.less
@@ -131,7 +131,7 @@
          letter-spacing: normal;
          color: @COLOR_WHITE;
          white-space: pre-wrap;
-          font-size: 24px;
+          font-size: 22px;
          font-weight: normal;

          &::before {
--- a/com.twin.app.shoptime/src/views/DetailPanel/UnableProduct/UnableProduct.jsx
+++ b/com.twin.app.shoptime/src/views/DetailPanel/UnableProduct/UnableProduct.jsx
@@ -1,12 +1,13 @@
-import React from 'react';
+import React from "react";

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

-import Indicator from '../components/indicator/Indicator';
-import IndicatorOptions from '../components/indicator/IndicatorOptions';
-import ProductOption from '../components/ProductOption';
-import UnableOption from './UnableOption';
-import css from './UnableProduct.module.less';
+import Indicator from "../components/indicator/Indicator";
+import IndicatorOptions from "../components/indicator/IndicatorOptions";
+import ProductOption from "../components/ProductOption";
+import SingleOption from "../SingleProduct/SingleOption";
+import UnableOption from "./UnableOption";
+import css from "./UnableProduct.module.less";

 export default function UnableProduct({
  selectedPatnrId,
@@ -15,7 +16,7 @@ export default function UnableProduct({
  setSelectedIndex,
 }) {
  const productData = useSelector((state) => state.main.productData);
-
+  console.log("#productData", productData);
  return (
    <>
      <div className={css.container}>
@@ -27,7 +28,7 @@ export default function UnableProduct({
        <IndicatorOptions
          productInfo={productData}
          thumbnailUrl={productData.imgUrls600[0]}
-          isFullOption
+          isCall
        />
      </div>
      <div>
@@ -37,6 +38,12 @@ export default function UnableProduct({
            selectedPrdtId={selectedPrdtId}
          />
        </ProductOption>
+        {/* <ProductOption>
+          <SingleOption
+            selectedPatnrId={selectedPatnrId}
+            selectedPrdtId={selectedPrdtId}
+          />
+        </ProductOption> */}
      </div>
    </>
  );
--- a/com.twin.app.shoptime/src/views/DetailPanel/YouMayLike/YouMayLike.jsx
+++ b/com.twin.app.shoptime/src/views/DetailPanel/YouMayLike/YouMayLike.jsx
@@ -23,9 +23,10 @@ const Container = SpotlightContainerDecorator(
 );

 const SpottableComponent = Spottable("div");
-export default function YouMayLike() {
+export default function YouMayLike({ isUnable }) {
  const [focused, setFocused] = useState(false);
  const [expanded, setExpanded] = useState(false);
+  const [unableExpanded, setUnableExpanded] = useState(false);
  const { cursorVisible } = useSelector((state) => state.common.appStatus);
  const dispatch = useDispatch();
  const youmaylikeData = useSelector((state) => state.main.youmaylikeData);
@@ -52,6 +53,7 @@ export default function YouMayLike() {
  };

  const onClickExtraArea = useCallback(() => {
+    setUnableExpanded(false);
    setExpanded(false);
  }, []);

@@ -63,10 +65,8 @@ export default function YouMayLike() {
  }, []);

  const onButtonClick = useCallback(() => {
-    if (cursorVisible) {
-      setExpanded((prev) => !prev);
-    }
-  }, [cursorVisible]);
+    setExpanded((prev) => !prev);
+  }, []);

  const renderItem = useCallback(
    ({ index, ...rest }) => {
@@ -107,6 +107,7 @@ export default function YouMayLike() {
        className={classNames(
          css.container,
          expanded && css.expanded,
+          isUnable && unableExpanded && css.unable,
          focused && css.focused
        )}
        spotlightRestrict="self-only"
--- a/com.twin.app.shoptime/src/views/DetailPanel/YouMayLike/YouMayLike.module.less
+++ b/com.twin.app.shoptime/src/views/DetailPanel/YouMayLike/YouMayLike.module.less
@@ -23,6 +23,13 @@
    left: 0;
  }

+  &.unableExpanded {
+    .size(@w: 1920px,@h: 300px);
+    background-color: #f8f8f8;
+    position: absolute;
+    top: 510px;
+    left: 0;
+  }
  .button {
    .flex();
    .size(@w: 324px,@h: 78px);
--- a/com.twin.app.shoptime/src/views/DetailPanel/components/indicator/IndicatorOptions.jsx
+++ b/com.twin.app.shoptime/src/views/DetailPanel/components/indicator/IndicatorOptions.jsx
@@ -1,32 +1,22 @@
-import React, {
-  useCallback,
-  useState,
-} from 'react';
+import React, { useCallback, useState } from "react";

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

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

-import {
-  setHidePopup,
-  setShowPopup,
-} from '../../../../actions/commonActions';
-import MobileSendPopUp from '../../../../components/MobileSend/MobileSendPopUp';
-import TButtonScroller
-  from '../../../../components/TButtonScroller/TButtonScroller';
-import TButtonTab from '../../../../components/TButtonTab/TButtonTab';
-import TPopUp from '../../../../components/TPopUp/TPopUp';
-import TQRCode from '../../../../components/TQRCode/TQRCode';
-import TScroller from '../../../../components/TScroller/TScroller';
-import useScrollTo from '../../../../hooks/useScrollTo';
-import * as Config from '../../../../utils/Config';
-import { $L } from '../../../../utils/helperMethods';
-import ProductTag from '../../components/ProductTag';
-import StarRating from '../../components/StarRating';
-import css from './IndicatorOptions.module.less';
+import { setHidePopup, setShowPopup } from "../../../../actions/commonActions";
+import MobileSendPopUp from "../../../../components/MobileSend/MobileSendPopUp";
+import TButtonScroller from "../../../../components/TButtonScroller/TButtonScroller";
+import TButtonTab from "../../../../components/TButtonTab/TButtonTab";
+import TPopUp from "../../../../components/TPopUp/TPopUp";
+import TQRCode from "../../../../components/TQRCode/TQRCode";
+import TScroller from "../../../../components/TScroller/TScroller";
+import useScrollTo from "../../../../hooks/useScrollTo";
+import * as Config from "../../../../utils/Config";
+import { $L } from "../../../../utils/helperMethods";
+import ProductTag from "../../components/ProductTag";
+import StarRating from "../../components/StarRating";
+import css from "./IndicatorOptions.module.less";

 const SpottableComponent = Spottable("div");

@@ -35,6 +25,7 @@ export default function IndicatorOptions({
  address,
  productInfo,
  thumbnailUrl,
+  isCall,
 }) {
  const [opened, setOpened] = useState(false);
  const [tabLabel, setTabLabel] = useState("");
@@ -52,16 +43,6 @@ export default function IndicatorOptions({
    setDescription(description);
  };

-  const handleUpClick = () => {
-    scrollTop({ y: 500 });
-  };
-
-  const handleDownClick = () => {
-    scrollTop({
-      y: 500,
-    });
-  };
-
  const handleSMSonClose = () => {
    dispatch(setHidePopup());
  };
@@ -123,15 +104,19 @@ export default function IndicatorOptions({
            <div>{address}</div>
          </div>
        )}
+
+        {(isCall || isFullOption) && productInfo?.orderPhnNo && (
+          <div className={css.order}>
+            <div>{$L("Call to Order")}</div>
+            <div className={css.icon}>
+              <span />
+              <div>{productInfo?.orderPhnNo}</div>
+            </div>
+          </div>
+        )}
+
        {isFullOption && (
          <>
-            <div className={css.order}>
-              <div>{$L("Call to Order")}</div>
-              <div className={css.icon}>
-                <span />
-                <div>{productInfo?.orderPhnNo}</div>
-              </div>
-            </div>
            <div className={css.buttonWrap}>
              <div className={css.tButton}>
                <SpottableComponent
@@ -179,7 +164,7 @@ export default function IndicatorOptions({
            productImg={productInfo?.thumbnailUrl}
            // productPrice={Price()}
            // patnrId={selectedPatnrId}
-            // smsTpCd={"APP00205"}
+            smsTpCd={"APP00205"}
          />
        )}
      </div>
--- a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx
+++ b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx
@@ -4,53 +4,44 @@ import React, {
  useMemo,
  useRef,
  useState,
-} from 'react';
+} from "react";

-import classNames from 'classnames';
-import ReactPlayer from 'react-player';
-import {
-  useDispatch,
-  useSelector,
-} from 'react-redux';
+import classNames from "classnames";
+import ReactPlayer from "react-player";
+import { useDispatch, useSelector } from "react-redux";

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

-import * as CommonActions from '../../actions/commonActions';
+import * as CommonActions from "../../actions/commonActions";
 import {
  getHomeFullVideoInfo,
  getMainCategoryShowDetail,
  getMainLiveShow,
  getMainLiveShowNowProduct,
-} from '../../actions/mainActions';
-import * as PanelActions from '../../actions/panelActions';
-import { updatePanel } from '../../actions/panelActions';
-import {
-  getChatLog,
-  getSubTitle,
-} from '../../actions/playActions';
-import { MediaControls } from '../../components/MediaPlayer';
-import TButton from '../../components/TButton/TButton';
-import TButtonTab, { LIST_TYPE } from '../../components/TButtonTab/TButtonTab';
-import TPanel from '../../components/TPanel/TPanel';
-import VideoOverlayWithPhoneNumber
-  from '../../components/VideoOverlayWithPhoneNumber/VideoOverlayWithPhoneNumber';
-import { VideoPlayer } from '../../components/VideoPlayer/VideoPlayer';
-import VideoPlayerSubtitle
-  from '../../components/VideoPlayerSubtitle/VideoPlayerSubtitle';
-import { panel_names } from '../../utils/Config';
-import { $L } from '../../utils/helperMethods';
-import PlayerOverlayChat from './PlayerOverlay/PlayerOverlayChat';
-import PlayerOverlayHeader from './PlayerOverlay/PlayerOverlayHeader';
-import PlayerOverlayQRCode from './PlayerOverlay/PlayerOverlayQRCode';
-import css from './PlayerPanel.module.less';
-import FeaturedShowContents from './PlayerTabContents/FeaturedShowContents';
-import LiveChannelContents from './PlayerTabContents/LiveChannelContents';
-import ShopNowContents from './PlayerTabContents/ShopNowContents';
-import YouMayLikeContents from './PlayerTabContents/YouMayLikeContents';
+} from "../../actions/mainActions";
+import * as PanelActions from "../../actions/panelActions";
+import { updatePanel } from "../../actions/panelActions";
+import { getChatLog, getSubTitle } from "../../actions/playActions";
+import { MediaControls } from "../../components/MediaPlayer";
+import TButton from "../../components/TButton/TButton";
+import TButtonTab, { LIST_TYPE } from "../../components/TButtonTab/TButtonTab";
+import TPanel from "../../components/TPanel/TPanel";
+import VideoOverlayWithPhoneNumber from "../../components/VideoOverlayWithPhoneNumber/VideoOverlayWithPhoneNumber";
+import { VideoPlayer } from "../../components/VideoPlayer/VideoPlayer";
+import VideoPlayerSubtitle from "../../components/VideoPlayerSubtitle/VideoPlayerSubtitle";
+import { panel_names } from "../../utils/Config";
+import { $L } from "../../utils/helperMethods";
+import PlayerOverlayChat from "./PlayerOverlay/PlayerOverlayChat";
+import PlayerOverlayHeader from "./PlayerOverlay/PlayerOverlayHeader";
+import PlayerOverlayQRCode from "./PlayerOverlay/PlayerOverlayQRCode";
+import css from "./PlayerPanel.module.less";
+import FeaturedShowContents from "./PlayerTabContents/FeaturedShowContents";
+import LiveChannelContents from "./PlayerTabContents/LiveChannelContents";
+import ShopNowContents from "./PlayerTabContents/ShopNowContents";
+import YouMayLikeContents from "./PlayerTabContents/YouMayLikeContents";

 const SpottableBtn = Spottable("button");
 const Container = SpotlightContainerDecorator(
@@ -90,9 +81,13 @@ const PlayerPanel = ({ hideChildren, isTabActivated, ...props }) => {
    $L(panelInfo?.shptmBanrTpNm === "LIVE" ? "LIVE CHANNEL" : "FEATURED SHOWS"),
  ];

-  // console.log("#shopNowInfo", shopNowInfo);
-  // console.log("#showDetailInfo", showDetailInfo);
+  console.log("#shopNowInfos", showNowInfos);
+  console.log("#showDetailInfo", showDetailInfo);
  // console.log("#playList", playListInfo);
+  // console.log("#panels", panels);
+  // console.log("#shopNowInfo", shopNowInfo);
+  // console.log("#panelInfos", panelInfo);
+
  // 패널 정보 받기
  const getPanelInfo = useCallback(() => {
    if (panels) {
@@ -102,7 +97,7 @@ const PlayerPanel = ({ hideChildren, isTabActivated, ...props }) => {
        }
      }
    }
-  }, [panelInfo]);
+  }, [panels]);

  const onClickBack = useCallback(
    (ev) => {
@@ -172,7 +167,7 @@ const PlayerPanel = ({ hideChildren, isTabActivated, ...props }) => {
        })
      );
    }
-  }, [dispatch, panelInfo, selectedIndex]);
+  }, [dispatch, panelInfo, selectedIndex, panels]);

  useEffect(() => {
    if (
@@ -198,9 +193,24 @@ const PlayerPanel = ({ hideChildren, isTabActivated, ...props }) => {
    }
    if (panelInfo?.shptmBanrTpNm === "LIVE") {
      setPlayListInfo(liveChannelInfos ? liveChannelInfos : liveShowInfos);
-      setShopNowInfo(showNowProduct);
+
+      if ((showDetailInfo && showDetailInfo.length > 0) || showNowInfos) {
+        setShopNowInfo(
+          showNowProduct
+            ? showNowInfos.productInfos
+            : showDetailInfo[0]?.productInfos
+        );
+      }
    }
-  }, [panelInfo, showDetailInfo, liveChannelInfos, showNowProduct, dispatch]);
+  }, [
+    panelInfo,
+    showDetailInfo,
+    liveChannelInfos,
+    showNowProduct,
+    selectedIndex,
+    shopNowInfo,
+    dispatch,
+  ]);

  // 일정시간마다 API를 재호출해야하는 기능  테스트기간 동안 주석
  useEffect(() => {
@@ -363,6 +373,7 @@ const PlayerPanel = ({ hideChildren, isTabActivated, ...props }) => {
              <LiveChannelContents
                setSelectedIndex={setSelectedIndex}
                liveInfos={playListInfo}
+                setPaneInfo={setPaneInfo}
              />
            )}

--- a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/LiveChannelContents.jsx
+++ b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/LiveChannelContents.jsx
@@ -1,24 +1,21 @@
-import React, {
-  useCallback,
-  useEffect,
-  useState,
-} from 'react';
+import React, { useCallback, useEffect, useState } from "react";

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

-import { pushPanel } from '../../../actions/panelActions';
-import TVirtualGridList
-  from '../../../components/TVirtualGridList/TVirtualGridList';
-import { panel_names } from '../../../utils/Config';
-import PlayerItemCard, { TYPES } from '../PlayerItemCard/PlayerItemCard';
-import css from './LiveChannelContents.module.less';
-import PlayerTabLoading from './PlayerTabLoading';
+import { pushPanel, updatePanel } from "../../../actions/panelActions";
+import TVirtualGridList from "../../../components/TVirtualGridList/TVirtualGridList";
+import { panel_names } from "../../../utils/Config";
+import PlayerItemCard, { TYPES } from "../PlayerItemCard/PlayerItemCard";
+import css from "./LiveChannelContents.module.less";
+import PlayerTabLoading from "./PlayerTabLoading";

-export default function LiveChannelContents({ liveInfos, setSelectedIndex }) {
-  const liveChannelInfos = useSelector((state) => state.main.liveChannelInfos);
+export default function LiveChannelContents({
+  liveInfos,
+  setSelectedIndex,
+  setPaneInfo,
+}) {
+  const dispatch = useDispatch();
+  console.log("#liveInfos", liveInfos);

  const renderItem = useCallback(
    ({ index, ...rest }) => {
@@ -26,15 +23,26 @@ export default function LiveChannelContents({ liveInfos, setSelectedIndex }) {
        dfltThumbnailImgPath,
        patncLogoPath,
        prdtId,
+        patnrId,
+        showId,
        showNm,
        patncNm,
        strtDt,
        endDt,
        timezone,
+        thumbnailUrl,
+        showType,
      } = liveInfos[index];

      const handleItemClick = () => {
        setSelectedIndex(index);
+
+        dispatch(
+          updatePanel({
+            name: panel_names.PLAYER_PANEL,
+            panelInfo: { patnrId, showId, shptmBanrTpNm: "LIVE" },
+          })
+        );
      };

      return (
@@ -43,7 +51,7 @@ export default function LiveChannelContents({ liveInfos, setSelectedIndex }) {
          key={prdtId}
          imageAlt={prdtId}
          logo={patncLogoPath}
-          imageSource={dfltThumbnailImgPath}
+          imageSource={thumbnailUrl ? thumbnailUrl : dfltThumbnailImgPath}
          productName={showNm}
          patnerName={patncNm}
          startDt={strtDt}
@@ -54,7 +62,7 @@ export default function LiveChannelContents({ liveInfos, setSelectedIndex }) {
        />
      );
    },
-    [liveInfos]
+    [liveInfos, dispatch]
  );
  return (
    <>