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

[통합로그API No.16] HotPicks 화면 내에서 content 클릭 시 로그 정보 수집

Browse Source
This commit is contained in:
dongyoungKo
2025-05-20 17:38:43 +09:00
parent 81f212f5ec
commit 1f0b987a14
10 changed files with 168 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
com.twin.app.shoptime/src/views/HotPicksPanel/HotPicksPanel.jsx
View File

@@ -191,10 +191,21 @@ const HotPicksPanel = ({ panelInfo, isOnTop, spotlightId }) => {
showEffectiveFlag, showEffectiveFlag,
smsBtnExpsFlag, smsBtnExpsFlag,
eventInfoV2, eventInfoV2,
curationId,
curationNm,
expsOrd,
index index
) => { ) => {
const sendLogClick = () => { const sendLogClick = () => {
console.log("#sendLogClick", sendLogClick); const params = {
contextName: Config.LOG_CONTEXT_NAME.HOT_PICKS,
messageId: Config.LOG_MESSAGE_ID.HOTPICKS_CLICK,
curationId: curationId,
curationTitle: curationNm,
location: expsOrd,
};
dispatch(sendLogTotalRecommend(params));
}; };
let itemData = []; let itemData = [];
@@ -291,6 +302,9 @@ const HotPicksPanel = ({ panelInfo, isOnTop, spotlightId }) => {
item.showEffectiveFlag, item.showEffectiveFlag,
item.smsBtnExpsFlag, item.smsBtnExpsFlag,
item.eventInfoV2, item.eventInfoV2,
item.curationId,
item.curationNm,
item.expsOrd,
index index
) )
); );

10
com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFI/TCFI.jsx
View File

@@ -35,6 +35,7 @@ export default function TCFI({
changePop, changePop,
osVersion, osVersion,
eventInfo, eventInfo,
sendLogClick,
}) { }) {
const bgImgNm = data && data[0].bgImgNo !== null ? data[0].bgImgNo : null; const bgImgNm = data && data[0].bgImgNo !== null ? data[0].bgImgNo : null;
let typeChk = data && data[0].hotelInfos?.length !== 0 ? "hotel" : "theme"; let typeChk = data && data[0].hotelInfos?.length !== 0 ? "hotel" : "theme";
@@ -48,9 +49,14 @@ export default function TCFI({
const currentSmsRetCode = usePrevious(smsRetCode); const currentSmsRetCode = usePrevious(smsRetCode);
const dispatch = useDispatch(); const dispatch = useDispatch();
const handleItemClick = () => {
const handleItemClick = useCallback(() => {
const { evntTpCd, evntId, patnrId, curationId, curationNm, eventInfoV2 } = const { evntTpCd, evntId, patnrId, curationId, curationNm, eventInfoV2 } =
data[0]; data[0];
if (sendLogClick) {
sendLogClick();
}
if ( if (
eventInfo?.evntTpCd === "EVT00102" || eventInfo?.evntTpCd === "EVT00102" ||
eventInfo?.evntTpCd === "EVT00104" eventInfo?.evntTpCd === "EVT00104"
@@ -61,7 +67,7 @@ export default function TCFI({
handelEvent(); handelEvent();
setClickEvt(false); setClickEvt(false);
} }
}; }, [dispatch, sendLogClick, eventInfo]);
const changePopTCFI = useCallback( const changePopTCFI = useCallback(
(patnrId, curationId, evntId, evntTpCd, eventInfoV2) => { (patnrId, curationId, evntId, evntTpCd, eventInfoV2) => {

31
com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFI_2/TCFI_2.jsx
View File

@@ -1,18 +1,16 @@
import React, { useCallback } from 'react'; import React, { useCallback } from "react";
import classNames from 'classnames'; import classNames from "classnames";
import { useDispatch } from 'react-redux'; import { useDispatch } from "react-redux";
import SpotlightContainerDecorator import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
from '@enact/spotlight/SpotlightContainerDecorator'; import Spottable from "@enact/spotlight/Spottable";
import Spottable from '@enact/spotlight/Spottable';
import defaultImageItem import defaultImageItem from "../../../../../assets/images/img-thumb-empty-product@3x.png";
from '../../../../../assets/images/img-thumb-empty-product@3x.png'; import { pushPanel } from "../../../../actions/panelActions";
import { pushPanel } from '../../../../actions/panelActions'; import CustomImage from "../../../../components/CustomImage/CustomImage";
import CustomImage from '../../../../components/CustomImage/CustomImage'; import { panel_names } from "../../../../utils/Config";
import { panel_names } from '../../../../utils/Config'; import css from "./TCFI_2.module.less";
import css from './TCFI_2.module.less';
const SpottableComponent = Spottable("li"); const SpottableComponent = Spottable("li");
@@ -31,12 +29,17 @@ export default function TCFI_2({
onSpotlightDown, onSpotlightDown,
onSpotlightUp, onSpotlightUp,
onItemClick, onItemClick,
sendLogClick,
}) { }) {
const dispatch = useDispatch(); const dispatch = useDispatch();
const handleItemClick = (prdtId) => { const handleItemClick = (prdtId) => {
if (onItemClick) { if (onItemClick) {
onItemClick(); onItemClick();
} }
if (sendLogClick) {
sendLogClick();
}
dispatch( dispatch(
pushPanel({ pushPanel({
name: panel_names.DETAIL_PANEL, name: panel_names.DETAIL_PANEL,
@@ -55,6 +58,10 @@ export default function TCFI_2({
if (onItemClick) { if (onItemClick) {
onItemClick(); onItemClick();
} }
if (sendLogClick) {
sendLogClick();
}
dispatch( dispatch(
pushPanel({ pushPanel({
name: panel_names.DETAIL_PANEL, name: panel_names.DETAIL_PANEL,

31
com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFI_3/TCFI_3.jsx
View File

@@ -1,18 +1,16 @@
import React, { useCallback } from 'react'; import React, { useCallback } from "react";
import classNames from 'classnames'; import classNames from "classnames";
import { useDispatch } from 'react-redux'; import { useDispatch } from "react-redux";
import SpotlightContainerDecorator import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
from '@enact/spotlight/SpotlightContainerDecorator'; import Spottable from "@enact/spotlight/Spottable";
import Spottable from '@enact/spotlight/Spottable';
import defaultImageItem import defaultImageItem from "../../../../../assets/images/img-thumb-empty-product@3x.png";
from '../../../../../assets/images/img-thumb-empty-product@3x.png'; import { pushPanel } from "../../../../actions/panelActions";
import { pushPanel } from '../../../../actions/panelActions'; import CustomImage from "../../../../components/CustomImage/CustomImage";
import CustomImage from '../../../../components/CustomImage/CustomImage'; import { panel_names } from "../../../../utils/Config";
import { panel_names } from '../../../../utils/Config'; import css from "./TCFI_3.module.less";
import css from './TCFI_3.module.less';
const SpottableComponent = Spottable("li"); const SpottableComponent = Spottable("li");
const Container = SpotlightContainerDecorator( const Container = SpotlightContainerDecorator(
@@ -29,12 +27,17 @@ export default function TCFI_3({
onSpotlightDown, onSpotlightDown,
onSpotlightUp, onSpotlightUp,
onItemClick, onItemClick,
sendLogClick,
}) { }) {
const dispatch = useDispatch(); const dispatch = useDispatch();
const handleItemClick = (prdtId) => { const handleItemClick = (prdtId) => {
if (onItemClick) { if (onItemClick) {
onItemClick(); onItemClick();
} }
if (sendLogClick) {
sendLogClick();
}
dispatch( dispatch(
pushPanel({ pushPanel({
name: panel_names.DETAIL_PANEL, name: panel_names.DETAIL_PANEL,
@@ -53,6 +56,10 @@ export default function TCFI_3({
if (onItemClick) { if (onItemClick) {
onItemClick(); onItemClick();
} }
if (sendLogClick) {
sendLogClick();
}
dispatch( dispatch(
pushPanel({ pushPanel({
name: panel_names.DETAIL_PANEL, name: panel_names.DETAIL_PANEL,

30
com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFI_4/TCFI_4.jsx
View File

@@ -1,19 +1,17 @@
// @@@ 포커스 처리 남음 // @@@ 포커스 처리 남음
import React, { useCallback } from 'react'; import React, { useCallback } from "react";
import classNames from 'classnames'; import classNames from "classnames";
import { useDispatch } from 'react-redux'; import { useDispatch } from "react-redux";
import SpotlightContainerDecorator import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
from '@enact/spotlight/SpotlightContainerDecorator'; import Spottable from "@enact/spotlight/Spottable";
import Spottable from '@enact/spotlight/Spottable';
import defaultImageItem import defaultImageItem from "../../../../../assets/images/img-thumb-empty-product@3x.png";
from '../../../../../assets/images/img-thumb-empty-product@3x.png'; import { pushPanel } from "../../../../actions/panelActions";
import { pushPanel } from '../../../../actions/panelActions'; import CustomImage from "../../../../components/CustomImage/CustomImage";
import CustomImage from '../../../../components/CustomImage/CustomImage'; import { panel_names } from "../../../../utils/Config";
import { panel_names } from '../../../../utils/Config'; import css from "./TCFI_4.module.less";
import css from './TCFI_4.module.less';
const SpottableComponent = Spottable("li"); const SpottableComponent = Spottable("li");
@@ -31,12 +29,17 @@ export default function TCFI_4({
onSpotlightDown, onSpotlightDown,
onSpotlightUp, onSpotlightUp,
onItemClick, onItemClick,
sendLogClick,
}) { }) {
const dispatch = useDispatch(); const dispatch = useDispatch();
const handleItemClick = (prdtId) => { const handleItemClick = (prdtId) => {
if (onItemClick) { if (onItemClick) {
onItemClick(); onItemClick();
} }
if (sendLogClick) {
sendLogClick();
}
dispatch( dispatch(
pushPanel({ pushPanel({
name: panel_names.DETAIL_PANEL, name: panel_names.DETAIL_PANEL,
@@ -52,6 +55,9 @@ export default function TCFI_4({
); );
}; };
const handleHotelClick = (hotelId) => { const handleHotelClick = (hotelId) => {
if (sendLogClick) {
sendLogClick();
}
if (onItemClick) { if (onItemClick) {
onItemClick(); onItemClick();
} }

7
com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFV/TCFV.jsx
View File

@@ -36,6 +36,7 @@ export default function TCFV({
onSpotlightUp, onSpotlightUp,
currentPage, currentPage,
onItemClick, onItemClick,
sendLogClick,
mobilePop, mobilePop,
changePop, changePop,
eventInfo, eventInfo,
@@ -60,6 +61,9 @@ export default function TCFV({
if (onItemClick) { if (onItemClick) {
onItemClick(); onItemClick();
} }
if (sendLogClick) {
sendLogClick();
}
if (osVersion === false) { if (osVersion === false) {
if (mobilePop !== "Y") { if (mobilePop !== "Y") {
dispatch( dispatch(
@@ -122,6 +126,9 @@ export default function TCFV({
}; };
const handleVideoClick = useCallback(() => { const handleVideoClick = useCallback(() => {
if (sendLogClick) {
sendLogClick();
}
dispatch( dispatch(
startVideoPlayer({ startVideoPlayer({
showId: data[0].showId, showId: data[0].showId,

78
com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFV_2/TCFV_2.jsx
View File

@@ -35,6 +35,7 @@ export default function TCFV_2({
onSpotlightUp, onSpotlightUp,
currentPage, currentPage,
scrolling = false, scrolling = false,
sendLogClick,
}) { }) {
const dispatch = useDispatch(); const dispatch = useDispatch();
@@ -45,39 +46,54 @@ export default function TCFV_2({
const spotName = "hotpicks-data-spot" + orders; const spotName = "hotpicks-data-spot" + orders;
const handleItemClick = (prdtId) => { const handleItemClick = useCallback(
dispatch(finishVideoPreview()); (prdtId) => {
dispatch( if (sendLogClick) {
pushPanel({ sendLogClick();
name: panel_names.DETAIL_PANEL, }
panelInfo: { dispatch(finishVideoPreview());
patnrId: data[0].patnrId, dispatch(
themePrdtId: prdtId, pushPanel({
prdtId: prdtId, name: panel_names.DETAIL_PANEL,
curationId: data[0].curationId, panelInfo: {
curationNm: data[0].curationNm, patnrId: data[0].patnrId,
type: "theme", themePrdtId: prdtId,
}, prdtId: prdtId,
}) curationId: data[0].curationId,
); curationNm: data[0].curationNm,
}; type: "theme",
const handleHotelClick = (hotelId) => { },
dispatch(finishVideoPreview()); })
dispatch( );
pushPanel({ },
name: panel_names.DETAIL_PANEL, [sendLogClick]
panelInfo: { );
patnrId: data[0].patnrId, const handleHotelClick = useCallback(
themeHotelId: hotelId, (hotelId) => {
curationId: data[0].curationId, if (sendLogClick) {
curationNm: data[0].curationNm, sendLogClick();
type: "hotel", }
}, dispatch(finishVideoPreview());
}) dispatch(
); pushPanel({
}; name: panel_names.DETAIL_PANEL,
panelInfo: {
patnrId: data[0].patnrId,
themeHotelId: hotelId,
curationId: data[0].curationId,
curationNm: data[0].curationNm,
type: "hotel",
},
})
);
},
[sendLogClick]
);
const handleVideoClick = useCallback(() => { const handleVideoClick = useCallback(() => {
if (sendLogClick) {
sendLogClick();
}
dispatch( dispatch(
startVideoPlayer({ startVideoPlayer({
showId: data[0].showId, showId: data[0].showId,

10
com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFV_3/TCFV_3.jsx
View File

@@ -43,6 +43,7 @@ export default function TCFV_3({
onSpotlightUp, onSpotlightUp,
currentPage, currentPage,
scrolling = false, scrolling = false,
sendLogClick,
}) { }) {
const dispatch = useDispatch(); const dispatch = useDispatch();
@@ -55,6 +56,9 @@ export default function TCFV_3({
const spotName = "hotpicks-data-spot" + orders; const spotName = "hotpicks-data-spot" + orders;
const handleItemClick = (prdtId) => { const handleItemClick = (prdtId) => {
if (sendLogClick) {
sendLogClick();
}
dispatch(finishVideoPreview()); dispatch(finishVideoPreview());
dispatch( dispatch(
pushPanel({ pushPanel({
@@ -71,6 +75,9 @@ export default function TCFV_3({
); );
}; };
const handleHotelClick = (hotelId) => { const handleHotelClick = (hotelId) => {
if (sendLogClick) {
sendLogClick();
}
dispatch(finishVideoPreview()); dispatch(finishVideoPreview());
dispatch( dispatch(
pushPanel({ pushPanel({
@@ -87,6 +94,9 @@ export default function TCFV_3({
}; };
const handleVideoClick = useCallback(() => { const handleVideoClick = useCallback(() => {
if (sendLogClick) {
sendLogClick();
}
dispatch( dispatch(
startVideoPlayer({ startVideoPlayer({
showId: data[0].showId, showId: data[0].showId,

10
com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFV_4/TCFV_4.jsx
View File

@@ -35,6 +35,7 @@ export default function TCFV_4({
onSpotlightDown, onSpotlightDown,
onSpotlightUp, onSpotlightUp,
currentPage, currentPage,
sendLogClick,
scrolling = false, scrolling = false,
}) { }) {
const dispatch = useDispatch(); const dispatch = useDispatch();
@@ -46,6 +47,9 @@ export default function TCFV_4({
const spotName = "hotpicks-data-spot" + orders; const spotName = "hotpicks-data-spot" + orders;
const handleItemClick = (prdtId) => { const handleItemClick = (prdtId) => {
if (sendLogClick) {
sendLogClick();
}
dispatch(finishVideoPreview()); dispatch(finishVideoPreview());
dispatch( dispatch(
pushPanel({ pushPanel({
@@ -63,6 +67,9 @@ export default function TCFV_4({
}; };
const handleHotelClick = (hotelId) => { const handleHotelClick = (hotelId) => {
if (sendLogClick) {
sendLogClick();
}
dispatch(finishVideoPreview()); dispatch(finishVideoPreview());
dispatch( dispatch(
pushPanel({ pushPanel({
@@ -79,6 +86,9 @@ export default function TCFV_4({
}; };
const handleVideoClick = useCallback(() => { const handleVideoClick = useCallback(() => {
if (sendLogClick) {
sendLogClick();
}
dispatch( dispatch(
startVideoPlayer({ startVideoPlayer({
showId: data[0].showId, showId: data[0].showId,

27
com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCHH/TCHH.jsx
View File

@@ -1,18 +1,16 @@
import React, { useCallback } from 'react'; import React, { useCallback } from "react";
import classNames from 'classnames'; import classNames from "classnames";
import { useDispatch } from 'react-redux'; import { useDispatch } from "react-redux";
import SpotlightContainerDecorator import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
from '@enact/spotlight/SpotlightContainerDecorator'; import Spottable from "@enact/spotlight/Spottable";
import Spottable from '@enact/spotlight/Spottable';
import defaultImageItem import defaultImageItem from "../../../../../assets/images/img-thumb-empty-product@3x.png";
from '../../../../../assets/images/img-thumb-empty-product@3x.png'; import { pushPanel } from "../../../../actions/panelActions";
import { pushPanel } from '../../../../actions/panelActions'; import CustomImage from "../../../../components/CustomImage/CustomImage";
import CustomImage from '../../../../components/CustomImage/CustomImage'; import { panel_names } from "../../../../utils/Config";
import { panel_names } from '../../../../utils/Config'; import css from "./TCHH.module.less";
import css from './TCHH.module.less';
const SpottableComponent = Spottable("div"); const SpottableComponent = Spottable("div");
const Container = SpotlightContainerDecorator( const Container = SpotlightContainerDecorator(
@@ -30,6 +28,7 @@ export default function TCHH({
onSpotlightDown, onSpotlightDown,
onSpotlightUp, onSpotlightUp,
onItemClick, onItemClick,
sendLogClick,
}) { }) {
const dispatch = useDispatch(); const dispatch = useDispatch();
@@ -42,6 +41,10 @@ export default function TCHH({
if (onItemClick) { if (onItemClick) {
onItemClick(); onItemClick();
} }
if (sendLogClick) {
sendLogClick();
}
dispatch( dispatch(
pushPanel({ pushPanel({
name: panel_names.DETAIL_PANEL, name: panel_names.DETAIL_PANEL,