diff --git a/com.twin.app.shoptime/src/actions/logActions.js b/com.twin.app.shoptime/src/actions/logActions.js index 42fa8ef8..2e5a1f19 100644 --- a/com.twin.app.shoptime/src/actions/logActions.js +++ b/com.twin.app.shoptime/src/actions/logActions.js @@ -1,20 +1,11 @@ -import { - countryCode, - URLS, -} from '../api/apiConfig'; -import { TLogEvent } from '../api/TLogEvent'; -import { - LOG_MENU, - LOG_TP_NO, -} from '../utils/Config'; +import { countryCode, URLS } from "../api/apiConfig"; +import { TLogEvent } from "../api/TLogEvent"; +import { LOG_MENU, LOG_TP_NO } from "../utils/Config"; import { formatGMTString, getTimeDifferenceByMilliseconds, -} from '../utils/helperMethods'; -import { - setGNBMenu, - setSecondLayerInfo, -} from './commonActions'; +} from "../utils/helperMethods"; +import { setGNBMenu, setSecondLayerInfo } from "./commonActions"; export const getUrlByLogTpNo = (logTpNo) => { switch (logTpNo) { @@ -166,11 +157,11 @@ export const getUrlByLogTpNo = (logTpNo) => { export const postTotalLog = (params, url) => (dispatch, getState) => { const onSuccess = (response) => { - console.log("Total Log onSuccess.....", response); + // console.log("Total Log onSuccess.....", response); }; const onFail = (error) => { - console.error("totalLog onFail...", error); + // console.error("totalLog onFail...", error); }; TLogEvent( @@ -1608,6 +1599,7 @@ export const sendLogTotalRecommend = (params) => (dispatch, getState) => { const logCreateTime = new Date().toISOString(); + console.log("#params", params); const newParams = { ...params, userNumber: userNumber, diff --git a/com.twin.app.shoptime/src/utils/Config.js b/com.twin.app.shoptime/src/utils/Config.js index a267e47a..65d62883 100644 --- a/com.twin.app.shoptime/src/utils/Config.js +++ b/com.twin.app.shoptime/src/utils/Config.js @@ -1,4 +1,4 @@ -import { $L } from './helperMethods'; +import { $L } from "./helperMethods"; export const SUPPORT_COUNTRIES = { US: "en", DE: "de", UK: "uk", RU: "ru" }; @@ -596,4 +596,5 @@ export const LOG_MESSAGE_ID = { PINCODE: "AL_PINCODE_BUTTON", CONTENTCLICK: "AL_PAGE_CONTENT_CLICK", SHOWVIEW: "AL_SHOW_VIEW_CHANGE", + SHELF: "AL_SHELF_LIST_SHOWN", }; diff --git a/com.twin.app.shoptime/src/views/HomePanel/BestSeller/BestSeller.jsx b/com.twin.app.shoptime/src/views/HomePanel/BestSeller/BestSeller.jsx index 556c2eeb..81f3d5b2 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/BestSeller/BestSeller.jsx +++ b/com.twin.app.shoptime/src/views/HomePanel/BestSeller/BestSeller.jsx @@ -23,7 +23,13 @@ const Container = SpotlightContainerDecorator( "div" ); -const BestSeller = ({ order, scrollTopBody, spotlightId, handleItemFocus }) => { +const BestSeller = ({ + order, + scrollTopBody, + spotlightId, + handleItemFocus, + handleShelfFocus, +}) => { const { getScrollTo, scrollLeft } = useScrollTo(); const { handleScrollReset, handleStopScrolling } = useScrollReset( scrollLeft, @@ -134,12 +140,19 @@ const BestSeller = ({ order, scrollTopBody, spotlightId, handleItemFocus }) => { } }, [handleItemFocus]); + const _handleShelfFocus = useCallback(() => { + if (handleShelfFocus) { + handleShelfFocus(); + } + }, [handleShelfFocus]); + return ( { + if (handleShelfFocus) { + handleShelfFocus(); + } + }, [handleShelfFocus]); + const defaultFocus = useMemo(() => { if (bannerDataList) { let targetIndex = 0; @@ -102,6 +109,7 @@ export default function HomeBanner({ isHorizontal={isHorizontal} key={"banner" + index} spotlightId={"banner" + index} + handleShelfFocus={_handleShelfFocus} handleItemFocus={_handleItemFocus} /> ) : data.shptmDspyTpNm === "Random" ? ( @@ -110,6 +118,7 @@ export default function HomeBanner({ isHorizontal={isHorizontal} key={"banner" + index} spotlightId={"banner" + index} + handleShelfFocus={_handleShelfFocus} handleItemFocus={_handleItemFocus} randomNumber={data.randomIndex} /> @@ -133,7 +142,7 @@ export default function HomeBanner({ ); }, - [_handleItemFocus, bannerDataList] + [_handleItemFocus, _handleShelfFocus, bannerDataList] ); const renderLayout = useCallback(() => { 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 1e0d321e..b83696ad 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RandomUnit.jsx +++ b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RandomUnit.jsx @@ -55,6 +55,7 @@ export default function RandomUnit({ bannerData, spotlightId, isHorizontal, + handleShelfFocus, handleItemFocus, randomNumber, }) { @@ -200,6 +201,12 @@ export default function RandomUnit({ } }, [handleItemFocus]); + const shelfFocus = useCallback(() => { + if (handleShelfFocus) { + handleShelfFocus(); + } + }, [handleShelfFocus]); + // 포커스 아웃 const onBlur = useCallback(() => { setIsFocused(false); @@ -534,6 +541,7 @@ export default function RandomUnit({ css.rollingWrap, isHorizontal && css.isHorizontalWrap )} + onFocus={shelfFocus} > {randomData?.shptmBanrTpNm == "Image Banner" ? ( { + if (handleShelfFocus) { + handleShelfFocus(); + } + }, [handleShelfFocus]); + const categoryData = useMemo(() => { if ( Object.keys(rollingData[startIndex]).length > 0 && @@ -539,6 +546,7 @@ export default function RollingUnit({ isHorizontal && css.isHorizontalWrap )} spotlightId={`container-${spotlightId}`} + onFocus={shelfFocus} > {rollingDataLength !== 1 ? ( { @@ -113,6 +114,12 @@ const HomeOnSale = ({ } }, [handleItemFocus]); + const _handleShelfFocus = useCallback(() => { + if (handleShelfFocus) { + handleShelfFocus(); + } + }, [handleShelfFocus]); + return (
{ const [arrowBottom, setArrowBottom] = useState(true); const [firstSpot, setFirstSpot] = useState(false); const [eventPopOpen, setEventPopOpen] = useState(false); - + const [nowShelf, setNowShelf] = useState(""); const [firstLgCatCd, setFirstLgCatCd] = useState( panelInfo.currentCatCd ?? null ); @@ -231,7 +222,7 @@ const HomePanel = ({ isOnTop }) => { }, [sortedHomeLayoutInfo]); const doSendLogGNB = useCallback( - (containerId) => { + (containerId, location = null, title = null) => { let nowMenu; switch (containerId) { case TEMPLATE_CODE_CONF.TOP: @@ -253,17 +244,31 @@ const HomePanel = ({ isOnTop }) => { nowMenu = LOG_MENU.HOME_TOP; break; } + + if (containerId !== nowShelf && location && title) { + dispatch( + sendLogTotalRecommend({ + contextName: LOG_CONTEXT_NAME.HOME, + messageId: LOG_MESSAGE_ID.SHELF, + shelfLocation: location, + shelfId: containerId, + shelfTitle: title, + }) + ); + + setNowShelf(containerId); + } if (nowMenu && nowMenu !== currentSentMenuRef.current) { dispatch(sendLogGNB(nowMenu)); currentSentMenuRef.current = nowMenu; } }, - [pageSpotIds] + [pageSpotIds, nowShelf] ); const handleItemFocus = useCallback( - (containerId) => () => { - doSendLogGNB(containerId); + (containerId, location, title) => () => { + doSendLogGNB(containerId, location, title); }, [doSendLogGNB] ); @@ -282,6 +287,11 @@ const HomePanel = ({ isOnTop }) => { !panelInfo.focusedContainerId && !panelInfo.currentSpot } className={css.homeBannerWrap} + handleShelfFocus={handleItemFocus( + el.shptmApphmDspyOptCd, + el.expsOrd, + el.shptmApphmDspyOptNm + )} handleItemFocus={handleItemFocus(el.shptmApphmDspyOptCd)} /> ); @@ -299,6 +309,11 @@ const HomePanel = ({ isOnTop }) => { spotlightId={el.shptmApphmDspyOptCd} catCd={cateCd} cateNm={cateNm} + handleShelfFocus={handleItemFocus( + el.shptmApphmDspyOptCd, + el.expsOrd, + el.shptmApphmDspyOptNm + )} handleItemFocus={handleItemFocus(el.shptmApphmDspyOptCd)} /> ); @@ -310,6 +325,11 @@ const HomePanel = ({ isOnTop }) => { ); @@ -321,6 +341,11 @@ const HomePanel = ({ isOnTop }) => { ); @@ -332,6 +357,11 @@ const HomePanel = ({ isOnTop }) => { ); @@ -388,13 +418,13 @@ const HomePanel = ({ isOnTop }) => { const _onFocusedContainerId = useCallback( (containerId) => { setFocusedContainerId(containerId); - if (enterThroughGNB && cbChangePageRef.current && !isOnTop) { Spotlight.resume(); cbChangePageRef.current(0, false); Spotlight.focus(defaultFocus); setBtnDisabled(false); dispatch(checkEnterThroughGNB(false)); + return; } diff --git a/com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShow.jsx b/com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShow.jsx index 198a9f47..3307b1a4 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShow.jsx +++ b/com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShow.jsx @@ -36,6 +36,7 @@ const PopularShow = ({ scrollTopBody, spotlightId, handleItemFocus, + handleShelfFocus, ...rest }) => { const { getScrollTo, scrollLeft } = useScrollTo(); @@ -177,12 +178,19 @@ const PopularShow = ({ } }, [handleItemFocus]); + const _handleShelfFocus = useCallback(() => { + if (handleShelfFocus) { + handleShelfFocus(); + } + }, [handleShelfFocus]); + return ( { + if (handleShelfFocus) { + handleShelfFocus(); + } + }, [handleShelfFocus]); + return ( - +