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

[통합로그 No.4] Home Shelf 이동 시 해당 Shelf에 맞는 정보 수집

Browse Source
This commit is contained in:
dongyoungKo
2025-05-12 18:04:22 +09:00
parent b68888a3b5
commit 80bcae4cae
10 changed files with 154 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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,

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

@@ -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",
};

15
com.twin.app.shoptime/src/views/HomePanel/BestSeller/BestSeller.jsx
View File

@@ -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 (
<Container
className={css.bestSellerWrap}
style={orderStyle}
spotlightId={spotlightId}
data-wheel-point={true}
onFocus={_handleShelfFocus}
>
<SectionTitle
title={$L("BEST SELLER")}

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

@@ -26,6 +26,7 @@ export default function HomeBanner({
firstSpot,
spotlightId,
handleItemFocus,
handleShelfFocus,
}) {
const dispatch = useDispatch();
@@ -49,6 +50,12 @@ export default function HomeBanner({
}
}, [handleItemFocus]);
const _handleShelfFocus = useCallback(() => {
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({
</div>
);
},
[_handleItemFocus, bannerDataList]
[_handleItemFocus, _handleShelfFocus, bannerDataList]
);
const renderLayout = useCallback(() => {

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

@@ -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" ? (
<SpottableComponent

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

@@ -77,6 +77,7 @@ export default function RollingUnit({
spotlightId,
isHorizontal,
handleItemFocus,
handleShelfFocus,
}) {
const rollingData = bannerData.bannerDetailInfos;
const rollingDataLength = bannerData.bannerDetailInfos.length;
@@ -289,6 +290,12 @@ export default function RollingUnit({
}, 300);
}, []);
const shelfFocus = useCallback(() => {
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 ? (
<SpottableComponent

8
com.twin.app.shoptime/src/views/HomePanel/HomeOnSale/HomeOnSale.jsx
View File

@@ -22,6 +22,7 @@ const HomeOnSale = ({
order,
scrollTopBody,
handleItemFocus,
handleShelfFocus,
spotlightId,
...rest
}) => {
@@ -113,6 +114,12 @@ const HomeOnSale = ({
}
}, [handleItemFocus]);
const _handleShelfFocus = useCallback(() => {
if (handleShelfFocus) {
handleShelfFocus();
}
}, [handleShelfFocus]);
return (
<Container
{...rest}
@@ -120,6 +127,7 @@ const HomeOnSale = ({
style={orderStyle}
spotlightId={spotlightId}
data-wheel-point={true}
onFocus={_handleShelfFocus}
>
<div className={css.onSaleWrap}>
<SectionTitle

122
com.twin.app.shoptime/src/views/HomePanel/HomePanel.jsx
View File

@@ -4,19 +4,16 @@ 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 Spotlight from "@enact/spotlight";
import {
getContainerNavigableElements,
setContainerLastFocusedElement,
} from '@enact/spotlight/src/container';
} from "@enact/spotlight/src/container";
import {
changeAppStatus,
@@ -24,49 +21,43 @@ import {
setExitApp,
setHidePopup,
setShowPopup,
} from '../../actions/commonActions';
import { getWelcomeEventInfo } from '../../actions/eventActions';
} from "../../actions/commonActions";
import { getWelcomeEventInfo } from "../../actions/eventActions";
import {
checkEnterThroughGNB,
getHomeLayout,
getHomeMainContents,
updateHomeInfo,
} from '../../actions/homeActions';
import {
sendLogGNB,
sendLogTotalRecommend,
} from '../../actions/logActions';
import {
getSubCategory,
getTop20Show,
} from '../../actions/mainActions';
import { getHomeOnSaleInfo } from '../../actions/onSaleActions';
import { finishVideoPreview } from '../../actions/playActions';
import { getBestSeller } from '../../actions/productActions';
import TBody from '../../components/TBody/TBody';
import TButton, { TYPES } from '../../components/TButton/TButton';
import TPanel from '../../components/TPanel/TPanel';
import TPopUp from '../../components/TPopUp/TPopUp';
import TVerticalPagenator
from '../../components/TVerticalPagenator/TVerticalPagenator';
import useDebugKey from '../../hooks/useDebugKey';
import usePrevious from '../../hooks/usePrevious';
} from "../../actions/homeActions";
import { sendLogGNB, sendLogTotalRecommend } from "../../actions/logActions";
import { getSubCategory, getTop20Show } from "../../actions/mainActions";
import { getHomeOnSaleInfo } from "../../actions/onSaleActions";
import { finishVideoPreview } from "../../actions/playActions";
import { getBestSeller } from "../../actions/productActions";
import TBody from "../../components/TBody/TBody";
import TButton, { TYPES } from "../../components/TButton/TButton";
import TPanel from "../../components/TPanel/TPanel";
import TPopUp from "../../components/TPopUp/TPopUp";
import TVerticalPagenator from "../../components/TVerticalPagenator/TVerticalPagenator";
import useDebugKey from "../../hooks/useDebugKey";
import usePrevious from "../../hooks/usePrevious";
import {
ACTIVE_POPUP,
LOG_CONTEXT_NAME,
LOG_MENU,
LOG_MESSAGE_ID,
panel_names,
} from '../../utils/Config';
import { $L } from '../../utils/helperMethods';
import { SpotlightIds } from '../../utils/SpotlightIds';
import BestSeller from '../HomePanel/BestSeller/BestSeller';
import HomeBanner from '../HomePanel/HomeBanner/HomeBanner';
import HomeOnSale from '../HomePanel/HomeOnSale/HomeOnSale';
import css from '../HomePanel/HomePanel.module.less';
import PopularShow from '../HomePanel/PopularShow/PopularShow';
import SubCategory from '../HomePanel/SubCategory/SubCategory';
import EventPopUpBanner from './EventPopUpBanner/EventPopUpBanner';
} from "../../utils/Config";
import { $L } from "../../utils/helperMethods";
import { SpotlightIds } from "../../utils/SpotlightIds";
import BestSeller from "../HomePanel/BestSeller/BestSeller";
import HomeBanner from "../HomePanel/HomeBanner/HomeBanner";
import HomeOnSale from "../HomePanel/HomeOnSale/HomeOnSale";
import css from "../HomePanel/HomePanel.module.less";
import PopularShow from "../HomePanel/PopularShow/PopularShow";
import SubCategory from "../HomePanel/SubCategory/SubCategory";
import EventPopUpBanner from "./EventPopUpBanner/EventPopUpBanner";
import { applyMiddleware } from "redux";
export const TEMPLATE_CODE_CONF = {
TOP: "DSP00101",
@@ -127,7 +118,7 @@ const HomePanel = ({ isOnTop }) => {
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 }) => {
<HomeOnSale
key={el.shptmApphmDspyOptCd}
spotlightId={el.shptmApphmDspyOptCd}
handleShelfFocus={handleItemFocus(
el.shptmApphmDspyOptCd,
el.expsOrd,
el.shptmApphmDspyOptNm
)}
handleItemFocus={handleItemFocus(el.shptmApphmDspyOptCd)}
/>
);
@@ -321,6 +341,11 @@ const HomePanel = ({ isOnTop }) => {
<PopularShow
key={el.shptmApphmDspyOptCd}
spotlightId={el.shptmApphmDspyOptCd}
handleShelfFocus={handleItemFocus(
el.shptmApphmDspyOptCd,
el.expsOrd,
el.shptmApphmDspyOptNm
)}
handleItemFocus={handleItemFocus(el.shptmApphmDspyOptCd)}
/>
);
@@ -332,6 +357,11 @@ const HomePanel = ({ isOnTop }) => {
<BestSeller
key={el.shptmApphmDspyOptCd}
spotlightId={el.shptmApphmDspyOptCd}
handleShelfFocus={handleItemFocus(
el.shptmApphmDspyOptCd,
el.expsOrd,
el.shptmApphmDspyOptNm
)}
handleItemFocus={handleItemFocus(el.shptmApphmDspyOptCd)}
/>
);
@@ -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;
}

8
com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShow.jsx
View File

@@ -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 (
<Container
className={css.popularShow}
style={orderStyle}
spotlightId={spotlightId}
data-wheel-point={true}
onFocus={_handleShelfFocus}
>
<SectionTitle
className={css.subTitle}

13
com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategory.jsx
View File

@@ -36,6 +36,7 @@ export default memo(function SubCategory({
catCd,
cateNm,
handleItemFocus,
handleShelfFocus,
}) {
const dispatch = useDispatch();
const { getScrollTo, scrollLeft } = useScrollTo();
@@ -194,8 +195,18 @@ export default memo(function SubCategory({
}
}, [handleItemFocus]);
const _handleShelfFocus = useCallback(() => {
if (handleShelfFocus) {
handleShelfFocus();
}
}, [handleShelfFocus]);
return (
<Container spotlightId={spotlightId} data-wheel-point>
<Container
spotlightId={spotlightId}
data-wheel-point
onFocus={_handleShelfFocus}
>
<CategoryNav
categoryInfos={categoryInfos}
currentCategoryCode={currentLgCatCd}