diff --git a/com.twin.app.shoptime/src/App/deepLinkHandler.js b/com.twin.app.shoptime/src/App/deepLinkHandler.js index 30515f6e..ac233438 100644 --- a/com.twin.app.shoptime/src/App/deepLinkHandler.js +++ b/com.twin.app.shoptime/src/App/deepLinkHandler.js @@ -1,6 +1,7 @@ import { updateHomeInfo } from "../actions/homeActions"; import { pushPanel } from "../actions/panelActions"; import { LOG_MENU, panel_names } from "../utils/Config"; +import { SpotlightIds } from "../utils/SpotlightIds"; //V2_진입경로코드_진입경로명_MT_노출순번 export const handleDeepLink = (contentTarget) => (dispatch, getState) => { @@ -177,6 +178,7 @@ export const handleDeepLink = (contentTarget) => (dispatch, getState) => { panelName = panel_names.TRENDING_NOW_PANEL; panelInfo = { pageName: "BS", + focusedContainerId: SpotlightIds.TRENDING_NOW_BEST_SELLER, }; break; @@ -186,6 +188,7 @@ export const handleDeepLink = (contentTarget) => (dispatch, getState) => { panelName = panel_names.TRENDING_NOW_PANEL; panelInfo = { pageName: "PS", + focusedContainerId: SpotlightIds.TRENDING_NOW_POPULAR_SHOW, }; break; diff --git a/com.twin.app.shoptime/src/views/TrendingNowPanel/PopularShow/PopularShowIndicator.jsx b/com.twin.app.shoptime/src/views/TrendingNowPanel/PopularShow/PopularShowIndicator.jsx index 76179865..bd9f5453 100644 --- a/com.twin.app.shoptime/src/views/TrendingNowPanel/PopularShow/PopularShowIndicator.jsx +++ b/com.twin.app.shoptime/src/views/TrendingNowPanel/PopularShow/PopularShowIndicator.jsx @@ -27,12 +27,8 @@ const PopularShowIndicator = ({ showNm, disclaimer, expsOrd, - orderPhnNo, - productInfos, patnrId, - selectedPatnrId, vtctpYn, - showUrl, catCd, showId, patncNm, @@ -41,58 +37,40 @@ const PopularShowIndicator = ({ const isVertical = Boolean(vtctpYn === "Y"); const _handleItemFocus = useCallback(() => { - if (handleItemFocus) { - handleItemFocus(LOG_MENU.TRENDING_NOW_POPULAR_SHOWS); - } + if (handleItemFocus) handleItemFocus(LOG_MENU.TRENDING_NOW_POPULAR_SHOWS); }, [handleItemFocus]); const _handleItemClick = useCallback(() => { - if (handleItemClick) { - handleItemClick(); - } + if (handleItemClick) handleItemClick(); }, [handleItemClick]); return ( -
-
- - - - - - -
-
+ + + + ); }; diff --git a/com.twin.app.shoptime/src/views/TrendingNowPanel/PopularShow/PopularShowIndicator.module.less b/com.twin.app.shoptime/src/views/TrendingNowPanel/PopularShow/PopularShowIndicator.module.less index f6daa35c..e3163331 100644 --- a/com.twin.app.shoptime/src/views/TrendingNowPanel/PopularShow/PopularShowIndicator.module.less +++ b/com.twin.app.shoptime/src/views/TrendingNowPanel/PopularShow/PopularShowIndicator.module.less @@ -2,9 +2,12 @@ @import "../../../style/utils.module.less"; .popularContainer { - .size(@w:1638px,@h:564px); position: relative; + display: flex; + justify-content: space-between; + .size(@w:1638px,@h:564px); margin: 42px 0 0 90px; + &::after { .position(@position: absolute, @right: 18px, @bottom: -46px); z-index: 12; @@ -13,42 +16,4 @@ background-image: url("../../../../assets/images/img-topdeals-list-masking.png"); content: ""; } - .popularContents { - display: flex; - justify-content: space-between; - } - - .player { - .position(@position: absolute, @top: 22px, @left: 0); - z-index: 20; - height: 564px; - display: none; - overflow: hidden; - border-radius: 12px; - - &.vertical { - width: 326px; - } - - &.horizontal { - width: 1002px; - } - - &::before { - // Video desc - // .position(@position: absolute, @top: 33px, @left: 18px); - // z-index: 20; - // .size(@w: 108px, @h: 48px); - // border-radius: 12px; - // background-image: url("../../../../../assets/images/tag/tag-liveshow.png"); - // background-position: center center; - // background-repeat: no-repeat; - // content: ""; - } - - &::after { - .focused(@borderRadius: 12px); - } - .focusDropShadow(); - } } diff --git a/com.twin.app.shoptime/src/views/TrendingNowPanel/PopularShow/PopularShowVerticalContents/PopularProductList.jsx b/com.twin.app.shoptime/src/views/TrendingNowPanel/PopularShow/PopularShowVerticalContents/PopularProductList.jsx index e3149f76..c1818ebd 100644 --- a/com.twin.app.shoptime/src/views/TrendingNowPanel/PopularShow/PopularShowVerticalContents/PopularProductList.jsx +++ b/com.twin.app.shoptime/src/views/TrendingNowPanel/PopularShow/PopularShowVerticalContents/PopularProductList.jsx @@ -1,8 +1,7 @@ -import React, { memo, useCallback, useEffect, useRef } from "react"; +import React, { memo, useCallback, useEffect } from "react"; import { useDispatch } from "react-redux"; -import { pushPanel } from "../../../../actions/panelActions"; import { startVideoPlayer } from "../../../../actions/playActions"; import TItemCard, { removeDotAndColon, @@ -10,64 +9,38 @@ import TItemCard, { } from "../../../../components/TItemCard/TItemCard"; import TVirtualGridList from "../../../../components/TVirtualGridList/TVirtualGridList"; import useScrollTo from "../../../../hooks/useScrollTo"; -import { panel_names } from "../../../../utils/Config"; import { scaleH } from "../../../../utils/helperMethods"; import { SpotlightIds } from "../../../../utils/SpotlightIds"; import css from "./PopularProductList.module.less"; -export default function PopularProductList({ - patnrId, - selectedPatnrId, +const PopularProductList = ({ + handleItemClick, + handleItemFocus, onSpotlightRight, - topInfosData, - brandProductInfo, - onFocus, onSpotlightDown, selectedIndex, - handleItemFocus, - handleItemClick, - lgCatCd, -}) { + topInfo, +}) => { const { getScrollTo, scrollTop } = useScrollTo(); const dispatch = useDispatch(); - const timerRef = useRef(); + + const { catCd, patnrId, productInfos, showId } = topInfo; useEffect(() => { - timerRef.current = setTimeout(() => scrollTop({ animate: false })); - return () => clearTimeout(timerRef.current); + let timer = setTimeout(() => scrollTop({ animate: false })); + return () => clearTimeout(timer); }, [selectedIndex]); const _onSpotlightDown = useCallback( (ev) => { - if (onSpotlightDown) { - ev.stopPropagation(); - ev.preventDefault(); - onSpotlightDown(ev); - } + if (onSpotlightDown) onSpotlightDown(ev); }, [onSpotlightDown] ); - const handleFocus = useCallback(() => { - if (handleItemFocus) { - handleItemFocus(); - } - }, [handleItemFocus]); - - const renderItem = useCallback( - ({ index, ...rest }) => { - const { - offerInfo, - prdtId, - imgUrl, - prdtNm, - priceInfo, - soldoutFlag, - offsetHour, - } = brandProductInfo[index]; - const { showId, patnrId } = topInfosData; - + const handleClick = useCallback( + (index, offsetHour, prdtId) => () => { let y = index < 2 ? 0 @@ -75,32 +48,47 @@ export default function PopularProductList({ ? scaleH(208) : scaleH(index * 248 - 248 - 40); - const handleClick = () => { - dispatch( - startVideoPlayer({ - targetId: "spotlightId-" + removeDotAndColon(prdtId), - offsetHour, - showId, - patnrId, - prdtId, - lgCatCd, - shptmBanrTpNm: "VOD", - index, - modal: false, - y, - }) - ); + dispatch( + startVideoPlayer({ + targetId: "spotlightId-" + removeDotAndColon(prdtId), + offsetHour, + showId, + patnrId, + prdtId, + lgCatCd: catCd, + shptmBanrTpNm: "VOD", + index, + modal: false, + y, + }) + ); - if (handleItemClick) { - handleItemClick(); - } - }; + if (handleItemClick) handleItemClick(); + }, + [catCd, patnrId, showId, handleItemClick] + ); + + const handleFocus = useCallback(() => { + if (handleItemFocus) handleItemFocus(); + }, [handleItemFocus]); + + const renderItem = useCallback( + ({ index, ...rest }) => { + const { + imgUrl, + offerInfo, + offsetHour, + prdtId, + prdtNm, + priceInfo, + soldoutFlag, + } = productInfos[index]; return ( ); }, - [brandProductInfo, dispatch, patnrId, handleFocus, handleItemClick] + [productInfos, handleClick, handleFocus, _onSpotlightDown] ); return (
- {brandProductInfo && ( + {productInfos && ( ); -} +}; + +export default memo(PopularProductList); diff --git a/com.twin.app.shoptime/src/views/TrendingNowPanel/PopularShow/PopularVideoCard/PopularVideoCard.jsx b/com.twin.app.shoptime/src/views/TrendingNowPanel/PopularShow/PopularVideoCard/PopularVideoCard.jsx index 865c01ec..b9473b27 100644 --- a/com.twin.app.shoptime/src/views/TrendingNowPanel/PopularShow/PopularVideoCard/PopularVideoCard.jsx +++ b/com.twin.app.shoptime/src/views/TrendingNowPanel/PopularShow/PopularVideoCard/PopularVideoCard.jsx @@ -1,7 +1,7 @@ -import React, { useCallback, useEffect, useRef, useState } from "react"; +import React, { memo, useCallback, useEffect, useRef, useState } from "react"; import classNames from "classnames"; -import { useDispatch, useSelector } from "react-redux"; +import { useDispatch } from "react-redux"; import { Job } from "@enact/core/util"; import Spotlight from "@enact/spotlight"; @@ -10,7 +10,7 @@ import { Marquee } from "@enact/ui/Marquee"; import ic_crown from "../../../../../assets/images/icons/ic-crown-badge@3x.png"; import ic_warning from "../../../../../assets/images/icons/ic-warning@3x.png"; -import ic_call from "../../../../../assets/images/icons/ic-wh-call@3x.png"; +// import ic_call from "../../../../../assets/images/icons/ic-wh-call@3x.png"; import { finishVideoPreview, startVideoPlayer, @@ -20,7 +20,7 @@ import css from "./PopularVideoCard.module.less"; const SpottableComponent = Spottable("div"); -const PHONE_STRING = "Phone"; +// const PHONE_STRING = "Phone"; const WARNING_STRING = "warning"; const TYPE = { @@ -28,46 +28,39 @@ const TYPE = { vertical: "vertical", }; -export default function PopularVideoCard({ - showNm, - expsOrd, - orderPhnNo, - thumbnailImgPath, +const PopularVideoCard = ({ disclaimer, - isVertical, - showUrl, + expsOrd, + handleItemClick, + handleItemFocus, + isOnTop, + lgCatCd, + onSpotlightDown, + patncNm, + patnrId, + showId, + showNm, spotlightId, thumbnailType = TYPE.horizontal, - onSpotlightDown, - onSpotlightRight, - onSpotlightLeft, - showId, - patnrId, - lgCatCd, - handleItemFocus, - patncNm, - handleItemClick, - isOnTop, -}) { + thumbnailImgPath, +}) => { const dispatch = useDispatch(); - const [isFocused, setIsFocused] = useState(false); - const videoFocusTimeoutJob = useRef(new Job((func) => func(), 1000)); - const isFullScreenModeActivedRef = useRef(false); - const cursorVisible = useSelector( - (state) => state.common.appStatus.cursorVisible - ); + const [isFocused, setIsFocused] = useState(false); + + const isFullScreenModeActiveRef = useRef(false); + const videoFocusTimeoutJob = useRef(new Job((func) => func(), 1000)); useEffect(() => { - if (isFullScreenModeActivedRef.current && isOnTop) { + if (isFullScreenModeActiveRef.current && isOnTop) { setTimeout(() => { - if (cursorVisible || Spotlight.getPointerMode()) { + if (Spotlight.getPointerMode()) { dispatch(finishVideoPreview()); - isFullScreenModeActivedRef.current = false; + isFullScreenModeActiveRef.current = false; } }); } - }, [cursorVisible, isOnTop]); + }, [isOnTop]); useEffect(() => { const videoFocusTimeoutJobValue = videoFocusTimeoutJob.current; @@ -87,7 +80,7 @@ export default function PopularVideoCard({ }) ); - isFullScreenModeActivedRef.current = true; + isFullScreenModeActiveRef.current = true; }); } else { videoFocusTimeoutJobValue.stop(); @@ -97,9 +90,8 @@ export default function PopularVideoCard({ const onFocus = useCallback(() => { setIsFocused(true); - if (handleItemFocus) { - handleItemFocus(); - } + + if (handleItemFocus) handleItemFocus(); }, [handleItemFocus]); const onBlur = useCallback(() => { @@ -122,18 +114,12 @@ export default function PopularVideoCard({ }) ); - if (handleItemClick) { - handleItemClick(); - } + if (handleItemClick) handleItemClick(); }, [dispatch, showId, spotlightId, handleItemClick]); const _onSpotlightDown = useCallback( (ev) => { - if (onSpotlightDown) { - ev.stopPropagation(); - ev.preventDefault(); - onSpotlightDown(ev); - } + if (onSpotlightDown) onSpotlightDown(ev); }, [onSpotlightDown] ); @@ -175,4 +161,6 @@ export default function PopularVideoCard({
); -} +}; + +export default memo(PopularVideoCard); diff --git a/com.twin.app.shoptime/src/views/TrendingNowPanel/TrendingNowPanel.jsx b/com.twin.app.shoptime/src/views/TrendingNowPanel/TrendingNowPanel.jsx index c5eacc01..bb248059 100644 --- a/com.twin.app.shoptime/src/views/TrendingNowPanel/TrendingNowPanel.jsx +++ b/com.twin.app.shoptime/src/views/TrendingNowPanel/TrendingNowPanel.jsx @@ -15,10 +15,11 @@ import { getBestSeller } from "../../actions/productActions"; import SectionTitle from "../../components/SectionTitle/SectionTitle"; import TBody from "../../components/TBody/TBody"; import TButton, { TYPES } from "../../components/TButton/TButton"; -import TItemCard from "../../components/TItemCard/TItemCard"; +import TItemCard, { + removeDotAndColon, +} from "../../components/TItemCard/TItemCard"; import TPanel from "../../components/TPanel/TPanel"; import TVerticalPagenator from "../../components/TVerticalPagenator/TVerticalPagenator"; -import usePrevious from "../../hooks/usePrevious"; import useWhyDidYouUpdate from "../../hooks/useWhyDidYouUpdate"; import { LOG_MENU, panel_names } from "../../utils/Config"; import { $L } from "../../utils/helperMethods"; @@ -91,15 +92,25 @@ const TrendingNowPanel = ({ panelInfo, spotlightId, isOnTop, ...rest }) => { }, [panelInfo?.selectedIndex]); useEffect(() => { - if (isOnTop && panelInfo?.focusedContainerId) { - const menu = - panelInfo?.focusedContainerId === SpotlightIds.TRENDING_NOW_POPULAR_SHOW - ? LOG_MENU.TRENDING_NOW_POPULAR_SHOWS - : LOG_MENU.TRENDING_NOW_BEST_SELLER; + if (isOnTop) { + let menu; - dispatch(sendLogGNB(menu)); + // case: entering through a deep link or the Home, and returning from the player or details + if (panelInfo?.focusedContainerId) { + menu = + panelInfo.focusedContainerId !== + SpotlightIds.TRENDING_NOW_POPULAR_SHOW + ? LOG_MENU.TRENDING_NOW_BEST_SELLER + : LOG_MENU.TRENDING_NOW_POPULAR_SHOWS; + } + // case: entering through the GNB + else { + menu = LOG_MENU.TRENDING_NOW_POPULAR_SHOWS; + } + + if (menu) dispatch(sendLogGNB(menu)); } - }, [isOnTop && panelInfo?.focusedContainerId]); + }, [isOnTop]); const onFocusedContainerId = useCallback((containerId) => { focusedContainerIdRef.current = containerId; @@ -288,21 +299,26 @@ const TrendingNowPanel = ({ panelInfo, spotlightId, isOnTop, ...rest }) => {
{bestSeller.map((item, index) => ( = 5} + firstLabel={getFirstLabel(item.rankOrd)} imageAlt={item.prdtId} imageSource={item.imgUrl} - priceInfo={item.priceInfo} - productName={item.prdtNm} + key={item.prdtId} isBestSeller - rank={item.rankOrd} - onFocus={handleBestSellerFocus} - onClick={handleBestSellerClick(item)} - offerInfo={item.offerInfo} - productId={item.prdtId} - firstLabel={getFirstLabel(item.rankOrd)} label={index * 1 + 1 + " of " + bestSeller.length} lastLabel=" go to detail, button" - data-wheel-point={index >= 5} + offerInfo={item.offerInfo} + onFocus={handleBestSellerFocus} + onClick={handleBestSellerClick(item)} + priceInfo={item.priceInfo} + productName={item.prdtNm} + productId={item.prdtId} + rank={item.rankOrd} + spotlightId={ + "spotlightId-" + + "bestSeller-" + + removeDotAndColon(item.prdtId) + } /> ))}