diff --git a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RandomUnit.jsx b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RandomUnit.jsx index bf97b885..1e0d321e 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RandomUnit.jsx +++ b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RandomUnit.jsx @@ -4,56 +4,45 @@ import React, { useMemo, useRef, useState, -} from 'react'; +} 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 { getContainerId } from '@enact/spotlight/src/container'; +import Spotlight from "@enact/spotlight"; +import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator"; +import Spottable from "@enact/spotlight/Spottable"; +import { getContainerId } from "@enact/spotlight/src/container"; -import btnPlay from '../../../../assets/images/btn/btn-play-thumb-nor.png'; -import defaultLogoImg - from '../../../../assets/images/ic-tab-partners-default@3x.png'; -import emptyHorImage - from '../../../../assets/images/img-home-banner-empty-hor.png'; -import emptyVerImage - from '../../../../assets/images/img-home-banner-empty-ver.png'; -import defaultImageItem - from '../../../../assets/images/img-thumb-empty-product@3x.png'; -import liveShow from '../../../../assets/images/tag-liveshow.png'; -import { changeAppStatus } from '../../../actions/commonActions'; -import { updateHomeInfo } from '../../../actions/homeActions'; +import btnPlay from "../../../../assets/images/btn/btn-play-thumb-nor.png"; +import defaultLogoImg from "../../../../assets/images/ic-tab-partners-default@3x.png"; +import emptyHorImage from "../../../../assets/images/img-home-banner-empty-hor.png"; +import emptyVerImage from "../../../../assets/images/img-home-banner-empty-ver.png"; +import defaultImageItem from "../../../../assets/images/img-thumb-empty-product@3x.png"; +import liveShow from "../../../../assets/images/tag-liveshow.png"; +import { changeAppStatus } from "../../../actions/commonActions"; +import { updateHomeInfo } from "../../../actions/homeActions"; import { sendLogTopContents, sendLogTotalRecommend, -} from '../../../actions/logActions'; -import { pushPanel } from '../../../actions/panelActions'; +} from "../../../actions/logActions"; +import { pushPanel } from "../../../actions/panelActions"; import { finishVideoPreview, startVideoPlayer, -} from '../../../actions/playActions'; -import CustomImage from '../../../components/CustomImage/CustomImage'; -import usePriceInfo from '../../../hooks/usePriceInfo'; +} from "../../../actions/playActions"; +import CustomImage from "../../../components/CustomImage/CustomImage"; +import usePriceInfo from "../../../hooks/usePriceInfo"; import { LOG_CONTEXT_NAME, LOG_MENU, LOG_MESSAGE_ID, LOG_TP_NO, panel_names, -} from '../../../utils/Config'; -import { - $L, - formatGMTString, -} from '../../../utils/helperMethods'; -import { TEMPLATE_CODE_CONF } from '../HomePanel'; -import css from './RandomUnit.module.less'; +} from "../../../utils/Config"; +import { $L, formatGMTString } from "../../../utils/helperMethods"; +import { TEMPLATE_CODE_CONF } from "../HomePanel"; +import css from "./RandomUnit.module.less"; const SpottableComponent = Spottable("div"); @@ -153,6 +142,30 @@ export default function RandomUnit({ return {}; }, [shptmTmplCd]); + const sendBannerLog = useCallback(() => { + const data = randomDataRef.current; + + if (data && nowMenu === LOG_MENU.HOME_TOP) { + dispatch( + sendLogTotalRecommend({ + contextName: LOG_CONTEXT_NAME.HOME, + messageId: LOG_MESSAGE_ID.BANNER, + curationId, + curationTitle, + contentType: data.shptmBanrTpNm, + contentId: "", + productId: data.prdtId, + productTitle: data.prdtNm, + displayType: "rolling", + partner: data.patncNm, + brand: data.brndNm, // <- 'brnad' 확인 + location: data.dspyOrder, + bannerType: data.vtctpYn === "Y" ? "Vertical" : "Horizontal", + }) + ); + } + }, [randomDataRef, nowMenu]); + // 1. 비디오(live) 에러 감지 // 2. 라이브 영상이 2개 이상이면, 그 다음 영상으로 전환 // 3. 라이브 영상이 1개면 그 다음 영상으로 전환을 할 수 없으므로 에러 로고 화면을 보여준다. @@ -331,6 +344,7 @@ export default function RandomUnit({ let action = linkType === "DSP00507" ? startVideoPlayer : pushPanel; dispatch(action(linkInfo)); + sendBannerLog(); dispatch( sendLogTopContents({ ...topContentsLogInfo, @@ -362,6 +376,8 @@ export default function RandomUnit({ }) ); + sendBannerLog(); + dispatch( sendLogTopContents({ ...topContentsLogInfo, @@ -369,7 +385,13 @@ export default function RandomUnit({ logTpNo: LOG_TP_NO.TOP_CONTENTS.CLICK, }) ); - }, [dispatch, randomData?.patnrId, randomData?.prdtId, topContentsLogInfo]); + }, [ + dispatch, + randomData?.patnrId, + randomData?.prdtId, + randomDataRef, + topContentsLogInfo, + ]); // 비디오 클릭 const videoClick = useCallback(() => { @@ -403,6 +425,8 @@ export default function RandomUnit({ }) ); + sendBannerLog(); + dispatch( sendLogTopContents({ ...topContentsLogInfo, @@ -412,7 +436,7 @@ export default function RandomUnit({ ); onBlur(); - }, [randomData, spotlightId, topContentsLogInfo]); + }, [randomData, spotlightId, topContentsLogInfo, nowMenu, randomDataRef]); // 투데이즈 딜 가격 정보 const { originalPrice, discountedPrice, discountRate, offerInfo } = @@ -438,26 +462,7 @@ export default function RandomUnit({ //통합로그 useEffect(() => { - if (randomDataRef.current && nowMenu === LOG_MENU.HOME_TOP) { - dispatch( - sendLogTotalRecommend({ - contextName: LOG_CONTEXT_NAME.HOME, - messageId: LOG_MESSAGE_ID.BANNER, - curationId: curationId, - curationTitle: curationTitle, - contentType: randomDataRef.current.shptmBanrTpNm, - contentId: "", - productId: randomDataRef.current.prdtId, - productTitle: randomDataRef.current.prdtNm, - displayType: "rolling", - partner: randomDataRef.current.patncNm, - brnad: randomDataRef.current.brndNm, - location: randomDataRef.current.dspyOrder, - bannerType: - randomDataRef.current.vtctpYn === "Y" ? "Vertical" : "Horizontal", - }) - ); - } + sendBannerLog(); }, [randomDataRef, nowMenu]); useEffect(() => { diff --git a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RollingUnit.jsx b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RollingUnit.jsx index c592eb3a..46505030 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RollingUnit.jsx +++ b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RollingUnit.jsx @@ -4,55 +4,41 @@ import React, { useMemo, useRef, useState, -} from 'react'; +} 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 { getContainerId } from '@enact/spotlight/src/container'; +import Spotlight from "@enact/spotlight"; +import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator"; +import Spottable from "@enact/spotlight/Spottable"; +import { getContainerId } from "@enact/spotlight/src/container"; -import btnPlay from '../../../../assets/images/btn/btn-play-thumb-nor.png'; -import defaultLogoImg - from '../../../../assets/images/ic-tab-partners-default@3x.png'; -import emptyHorImage - from '../../../../assets/images/img-home-banner-empty-hor.png'; -import emptyVerImage - from '../../../../assets/images/img-home-banner-empty-ver.png'; -import defaultImageItem - from '../../../../assets/images/img-thumb-empty-product@3x.png'; -import liveShow from '../../../../assets/images/tag-liveshow.png'; -import { - setBannerIndex, - updateHomeInfo, -} from '../../../actions/homeActions'; +import btnPlay from "../../../../assets/images/btn/btn-play-thumb-nor.png"; +import defaultLogoImg from "../../../../assets/images/ic-tab-partners-default@3x.png"; +import emptyHorImage from "../../../../assets/images/img-home-banner-empty-hor.png"; +import emptyVerImage from "../../../../assets/images/img-home-banner-empty-ver.png"; +import defaultImageItem from "../../../../assets/images/img-thumb-empty-product@3x.png"; +import liveShow from "../../../../assets/images/tag-liveshow.png"; +import { setBannerIndex, updateHomeInfo } from "../../../actions/homeActions"; import { sendLogTopContents, sendLogTotalRecommend, -} from '../../../actions/logActions'; -import { pushPanel } from '../../../actions/panelActions'; -import { startVideoPlayer } from '../../../actions/playActions'; -import CustomImage from '../../../components/CustomImage/CustomImage'; -import usePriceInfo from '../../../hooks/usePriceInfo'; +} from "../../../actions/logActions"; +import { pushPanel } from "../../../actions/panelActions"; +import { startVideoPlayer } from "../../../actions/playActions"; +import CustomImage from "../../../components/CustomImage/CustomImage"; +import usePriceInfo from "../../../hooks/usePriceInfo"; import { LOG_CONTEXT_NAME, LOG_MENU, LOG_MESSAGE_ID, LOG_TP_NO, panel_names, -} from '../../../utils/Config'; -import { - $L, - formatGMTString, -} from '../../../utils/helperMethods'; -import { TEMPLATE_CODE_CONF } from '../HomePanel'; -import css from './RollingUnit.module.less'; +} from "../../../utils/Config"; +import { $L, formatGMTString } from "../../../utils/helperMethods"; +import { TEMPLATE_CODE_CONF } from "../HomePanel"; +import css from "./RollingUnit.module.less"; const SpottableComponent = Spottable("div"); @@ -185,6 +171,31 @@ export default function RollingUnit({ return {}; }, [shptmTmplCd, startIndex]); + const sendBannerLog = useCallback(() => { + if (rollingDataRef.current && nowMenu === LOG_MENU.HOME_TOP) { + dispatch( + sendLogTotalRecommend({ + contextName: LOG_CONTEXT_NAME.HOME, + messageId: LOG_MESSAGE_ID.BANNER, + curationId: curationId, + curationTitle: curationTitle, + contentType: rollingDataRef.current[startIndex].shptmBanrTpNm, + contentId: "", + productId: rollingDataRef.current[startIndex].prdtId, + productTitle: rollingDataRef.current[startIndex].prdtNm, + displayType: "rolling", + partner: rollingDataRef.current[startIndex].patncNm, + brand: rollingDataRef.current[startIndex].brndNm, + location: rollingDataRef.current[startIndex].dspyOrder, + bannerType: + rollingDataRef.current[startIndex].vtctpYn === "Y" + ? "Vertical" + : "Horizontal", + }) + ); + } + }, [nowMenu, rollingDataRef]); + useEffect(() => { if (savedIndex !== undefined) { setStartIndex(savedIndex); @@ -325,6 +336,7 @@ export default function RollingUnit({ if (bannerType === "Today's Deals") { handlePushPanel(panel_names.DETAIL_PANEL, createPanelInfo(currentData)); + sendBannerLog(); dispatch( sendLogTopContents({ ...topContentsLogInfo, @@ -392,7 +404,7 @@ export default function RollingUnit({ default: return; } - + sendBannerLog(); dispatch( sendLogTopContents({ ...topContentsLogInfo, @@ -445,6 +457,7 @@ export default function RollingUnit({ modalClassName: css.videoModal, }); + sendBannerLog(); dispatch( sendLogTopContents({ ...topContentsLogInfo, @@ -510,28 +523,7 @@ export default function RollingUnit({ }, [dispatch, entryMenu, nowMenu, startIndex, topContentsLogInfo]); useEffect(() => { - if (rollingDataRef.current && nowMenu === LOG_MENU.HOME_TOP) { - dispatch( - sendLogTotalRecommend({ - contextName: LOG_CONTEXT_NAME.HOME, - messageId: LOG_MESSAGE_ID.BANNER, - curationId: curationId, - curationTitle: curationTitle, - contentType: rollingDataRef.current[startIndex].shptmBanrTpNm, - contentId: "", - productId: rollingDataRef.current[startIndex].prdtId, - productTitle: rollingDataRef.current[startIndex].prdtNm, - displayType: "rolling", - partner: rollingDataRef.current[startIndex].patncNm, - brnad: rollingDataRef.current[startIndex].brndNm, - location: rollingDataRef.current[startIndex].dspyOrder, - bannerType: - rollingDataRef.current[startIndex].vtctpYn === "Y" - ? "Vertical" - : "Horizontal", - }) - ); - } + sendBannerLog(); }, [rollingDataRef, nowMenu, startIndex]); useEffect(() => {