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

com.twin.app.shoptime/src/actions/logActions.js

@@ -1,20 +1,11 @@
-import {
+import { countryCode, URLS } from "../api/apiConfig";
-  countryCode,
+import { TLogEvent } from "../api/TLogEvent";
-  URLS,
+import { LOG_MENU, LOG_TP_NO } from "../utils/Config";
-} from '../api/apiConfig';
-import { TLogEvent } from '../api/TLogEvent';
-import {
-  LOG_MENU,
-  LOG_TP_NO,
-} from '../utils/Config';
 import {
   formatGMTString,
   getTimeDifferenceByMilliseconds,
-} from '../utils/helperMethods';
+} from "../utils/helperMethods";
-import {
+import { setGNBMenu, setSecondLayerInfo } from "./commonActions";
-  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,

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

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

com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBanner.jsx

@@ -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(() => {

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

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

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

com.twin.app.shoptime/src/views/HomePanel/HomeOnSale/HomeOnSale.jsx

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

com.twin.app.shoptime/src/views/HomePanel/HomePanel.jsx

@@ -4,19 +4,16 @@ import React, {
   useMemo,
   useRef,
   useState,
-} from 'react';
+} from "react";
 
-import classNames from 'classnames';
+import classNames from "classnames";
-import {
+import { useDispatch, useSelector } from "react-redux";
-  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';
+} from "../../actions/commonActions";
-import { getWelcomeEventInfo } from '../../actions/eventActions';
+import { getWelcomeEventInfo } from "../../actions/eventActions";
 import {
   checkEnterThroughGNB,
   getHomeLayout,
   getHomeMainContents,
   updateHomeInfo,
-} from '../../actions/homeActions';
+} from "../../actions/homeActions";
-import {
+import { sendLogGNB, sendLogTotalRecommend } from "../../actions/logActions";
-  sendLogGNB,
+import { getSubCategory, getTop20Show } from "../../actions/mainActions";
-  sendLogTotalRecommend,
+import { getHomeOnSaleInfo } from "../../actions/onSaleActions";
-} from '../../actions/logActions';
+import { finishVideoPreview } from "../../actions/playActions";
-import {
+import { getBestSeller } from "../../actions/productActions";
-  getSubCategory,
+import TBody from "../../components/TBody/TBody";
-  getTop20Show,
+import TButton, { TYPES } from "../../components/TButton/TButton";
-} from '../../actions/mainActions';
+import TPanel from "../../components/TPanel/TPanel";
-import { getHomeOnSaleInfo } from '../../actions/onSaleActions';
+import TPopUp from "../../components/TPopUp/TPopUp";
-import { finishVideoPreview } from '../../actions/playActions';
+import TVerticalPagenator from "../../components/TVerticalPagenator/TVerticalPagenator";
-import { getBestSeller } from '../../actions/productActions';
+import useDebugKey from "../../hooks/useDebugKey";
-import TBody from '../../components/TBody/TBody';
+import usePrevious from "../../hooks/usePrevious";
-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';
+} from "../../utils/Config";
-import { $L } from '../../utils/helperMethods';
+import { $L } from "../../utils/helperMethods";
-import { SpotlightIds } from '../../utils/SpotlightIds';
+import { SpotlightIds } from "../../utils/SpotlightIds";
-import BestSeller from '../HomePanel/BestSeller/BestSeller';
+import BestSeller from "../HomePanel/BestSeller/BestSeller";
-import HomeBanner from '../HomePanel/HomeBanner/HomeBanner';
+import HomeBanner from "../HomePanel/HomeBanner/HomeBanner";
-import HomeOnSale from '../HomePanel/HomeOnSale/HomeOnSale';
+import HomeOnSale from "../HomePanel/HomeOnSale/HomeOnSale";
-import css from '../HomePanel/HomePanel.module.less';
+import css from "../HomePanel/HomePanel.module.less";
-import PopularShow from '../HomePanel/PopularShow/PopularShow';
+import PopularShow from "../HomePanel/PopularShow/PopularShow";
-import SubCategory from '../HomePanel/SubCategory/SubCategory';
+import SubCategory from "../HomePanel/SubCategory/SubCategory";
-import EventPopUpBanner from './EventPopUpBanner/EventPopUpBanner';
+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) => () => {
+    (containerId, location, title) => () => {
-      doSendLogGNB(containerId);
+      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;
       }
 

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

com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategory.jsx

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