optrader/shoptime
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[Log] Log, IF-LGSP-LOG-100 / TOP contents 노출 이력 반영

Browse Source
This commit is contained in:
younghoon100.park
2024-06-12 20:55:31 +09:00
parent a6bcf6fe0d
commit e956ca4a1d
5 changed files with 135 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
com.twin.app.shoptime/src/actions/logActions.js
View File

@@ -95,6 +95,10 @@ export const getUrlByLogTpNo = (logTpNo) => {
case LOG_TP_NO.THEME_PRODUCT:
return URLS.LOG_THEME_PRODUCT;
// IF-LGSP-LOG-100 / IF-LGSP-LOG-100 / TOP contents 노출 이력
case LOG_TP_NO.TOP_CONTENTS:
return URLS.LOG_TOP_CONTENTS;
// IF-LGSP-LOG-110 / Featured Brands View 이력
case LOG_TP_NO.BRANDS:
return URLS.LOG_BRANDS;

15
com.twin.app.shoptime/src/hooks/useLogService.js
View File

@@ -221,10 +221,10 @@ export default function useLogService() {
outDt: "",
};
dispatch(postLog(newParams));
dispatch({ type: types.SET_GNB_MENU, payload: menu });
dispatch(postLog(newParams));
},
[dispatch, menuMovSnoRef, nowMenuRef]
[dispatch]
);
/**
@@ -912,15 +912,15 @@ export default function useLogService() {
*
* (M) banrNo 배너 번호
*
* (M) banrTpNm 배너 유형 이름 Vertical / Horizontal
* (M) banrTpNm 배너 유형 이름, Vertical / Horizontal
*
* (M) contId 컨텐츠 아이디
*
* (M) contNm 컨텐츠 이름
*
* (M) contTpNm 컨텐츠 타입 이름 live / image / Today's deals
* (M) contTpNm 컨텐츠 타입 이름, live / image / Today's deals
*
* (M) dspyTpNm 디스플레이 유형 이름 Random / Rolling
* (M) dspyTpNm 디스플레이 유형 이름, Random / Rolling
*
* (M) entryMenu 진입 메뉴
*
@@ -930,6 +930,8 @@ export default function useLogService() {
*
* (M) linkTpCd 딥 링크 타입
*
* (M) logTpNo 로그 타입 넘버
*
* (M) nowMenu 현재 메뉴
*
* (M) outDt 진출 시간
@@ -944,6 +946,9 @@ export default function useLogService() {
(params) => {
const newParams = {
...params,
entryMenu: entryMenuRef.current,
outDt: formatGMTString(new Date()),
nowMenu: nowMenuRef.current,
};
dispatch(postLog(newParams));

2
com.twin.app.shoptime/src/utils/Config.js
View File

@@ -118,6 +118,8 @@ export const LOG_TP_NO = {
HOME: {},
TOP_CONTENTS: "310",
PRODUCT: {
PRODUCT_DETAIL: "400",
GROUP_DETAIL: "408",

53
com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RandomUnit.jsx
View File

@@ -1,7 +1,7 @@
import React, { useCallback, useEffect, useRef, useState } from "react";
import classNames from "classnames";
import { useDispatch } from "react-redux";
import { useDispatch, useSelector } from "react-redux";
import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
import Spottable from "@enact/spotlight/Spottable";
@@ -18,9 +18,11 @@ import {
startVideoPlayer,
} from "../../../actions/playActions";
import CustomImage from "../../../components/CustomImage/CustomImage";
import useLogService from "../../../hooks/useLogService";
import usePriceInfo from "../../../hooks/usePriceInfo";
import useScrollReset from "../../../hooks/useScrollReset";
import { panel_names } from "../../../utils/Config";
import { LOG_MENU, LOG_TP_NO, panel_names } from "../../../utils/Config";
import { formatGMTString } from "../../../utils/helperMethods";
import css from "./RandomUnit.module.less";
const SpottableComponent = Spottable("div");
@@ -39,12 +41,24 @@ export default function RandomUnit({
}) {
const bannerDetailInfos = bannerData.bannerDetailInfos;
const { sendLogTopContents } = useLogService();
const dispatch = useDispatch();
const curationId = useSelector((state) => state.home?.bannerData?.curationId);
const curtNm = useSelector((state) => state.home?.bannerData?.curtNm);
const shptmTmplCd = useSelector(
(state) => state.home?.bannerData?.shptmTmplCd
);
const nowMenu = useSelector((state) => state.common.menu.nowMenu);
const [randomData, setRandomData] = useState("");
const [priceInfos, setpriceInfos] = useState("");
const [isFocused, setIsFocused] = useState(false);
const timerRef = useRef();
const dispatch = useDispatch();
const timerRef = useRef();
const bannerDataRef = useRef(bannerData);
const randomDataRef = useRef(bannerDetailInfos[randomNumber]);
// 포커스 인
const onFocus = useCallback(() => {
@@ -243,6 +257,37 @@ export default function RandomUnit({
};
}, [isFocused, dispatch]);
useEffect(() => {
if (
bannerDataRef.current &&
randomDataRef.current &&
nowMenu &&
nowMenu === LOG_MENU.HOME_TOP
) {
const params = {
banrNo: `${randomDataRef.current?.banrDpOrd}`,
banrTpNm: randomDataRef.current?.vtctpYn
? randomDataRef.current.vtctpYn === "Y"
? "Vertical"
: "Horizontal"
: "",
contId: curationId ?? "",
contNm: curtNm ?? "",
contTpNm: randomDataRef.current?.shptmBanrTpNm ?? "",
dspyTpNm: bannerDataRef.current?.shptmDspyTpNm ?? "",
expsOrd: bannerDataRef.current?.banrLctnNo ?? "",
inDt: formatGMTString(new Date()),
linkTpCd: "",
logTpNo: LOG_TP_NO.TOP_CONTENTS,
patncNm: "",
patnrId: randomDataRef.current?.patnrId ?? "",
tmplCd: shptmTmplCd,
};
return () => sendLogTopContents(params);
}
}, [curationId, curtNm, nowMenu, sendLogTopContents, shptmTmplCd]);
return (
<>
<Container

74
com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RollingUnit.jsx
View File

@@ -1,7 +1,7 @@
import React, { useCallback, useEffect, useState } from "react";
import React, { useCallback, useEffect, useRef, useState } from "react";
import classNames from "classnames";
import { useDispatch } from "react-redux";
import { useDispatch, useSelector } from "react-redux";
import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
import Spottable from "@enact/spotlight/Spottable";
@@ -15,9 +15,11 @@ import liveShow from "../../../../assets/images/tag-liveshow.png";
import { pushPanel } from "../../../actions/panelActions";
import { startVideoPlayer } from "../../../actions/playActions";
import CustomImage from "../../../components/CustomImage/CustomImage";
import useLogService from "../../../hooks/useLogService";
import usePriceInfo from "../../../hooks/usePriceInfo";
import useScrollReset from "../../../hooks/useScrollReset";
import { panel_names } from "../../../utils/Config";
import { LOG_MENU, LOG_TP_NO, panel_names } from "../../../utils/Config";
import { formatGMTString } from "../../../utils/helperMethods";
import css from "./RollingUnit.module.less";
const SpottableComponent = Spottable("div");
@@ -36,6 +38,17 @@ export default function RollingUnit({
const rollingData = bannerData.bannerDetailInfos;
const rollingDataLength = bannerData.bannerDetailInfos.length;
const { sendLogTopContents } = useLogService();
const dispatch = useDispatch();
const curationId = useSelector((state) => state.home?.bannerData?.curationId);
const curtNm = useSelector((state) => state.home?.bannerData?.curtNm);
const shptmTmplCd = useSelector(
(state) => state.home?.bannerData?.shptmTmplCd
);
const nowMenu = useSelector((state) => state.common.menu.nowMenu);
const [startIndex, setStartIndex] = useState(0);
const [lastIndex, setLastIndex] = useState(rollingDataLength - 1);
const [rollingFocus, setRollingFocus] = useState(false);
@@ -43,7 +56,9 @@ export default function RollingUnit({
const [prevFocus, setPrevFocus] = useState(false);
const [nextFocus, setNextFocus] = useState(false);
const dispatch = useDispatch();
const arrRef = useRef([]);
const bannerDataRef = useRef(bannerData);
const rollingDataRef = useRef(rollingData);
// 비디오 에러일시, 클릭 이동
const videoErrorClick = () => {
@@ -291,6 +306,57 @@ export default function RollingUnit({
return () => clearInterval(intervalId);
}, [rollingDataLength, lastIndex, rollingFocus]);
useEffect(() => {
if (
bannerDataRef.current &&
rollingDataRef.current &&
nowMenu &&
nowMenu === LOG_MENU.HOME_TOP
) {
const currentRollingData = rollingDataRef.current[startIndex];
const params = {
banrNo: `${currentRollingData?.banrDpOrd}`,
banrTpNm: currentRollingData?.vtctpYn
? currentRollingData.vtctpYn === "Y"
? "Vertical"
: "Horizontal"
: "",
contId: curationId ?? "",
contNm: curtNm ?? "",
contTpNm: currentRollingData?.shptmBanrTpNm ?? "",
dspyTpNm: bannerDataRef.current?.shptmDspyTpNm ?? "",
expsOrd: bannerDataRef.current?.banrLctnNo ?? "",
inDt: formatGMTString(new Date()),
linkTpCd: "",
logTpNo: LOG_TP_NO.TOP_CONTENTS,
patncNm: "",
patnrId: currentRollingData?.patnrId ?? "",
tmplCd: shptmTmplCd,
};
return () => {
if (arrRef.current.every((number) => number !== startIndex)) {
sendLogTopContents(params);
arrRef.current.push(startIndex);
}
};
}
}, [
curationId,
curtNm,
nowMenu,
sendLogTopContents,
shptmTmplCd,
startIndex,
]);
useEffect(() => {
if (nowMenu !== LOG_MENU.HOME_TOP) {
arrRef.current = [];
}
}, [nowMenu]);
return (
<Container
className={classNames(