[Log] Log, IF-LGSP-LOG-005, TrandingNowPanel 반영

com.twin.app.shoptime/src/views/TrendingNowPanel/PopularShow/PopularShowIndicator.jsx

@@ -5,7 +5,7 @@ import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDeco
 
 import { pushPanel } from "../../../actions/panelActions";
 import useScrollReset from "../../../hooks/useScrollReset";
-import { panel_names } from "../../../utils/Config";
+import { LOG_MENU, panel_names } from "../../../utils/Config";
 import css from "./PopularShowIndicator.module.less";
 import PopularProductList from "./PopularShowVerticalContents/PopularProductList";
 import PopularVideoCard from "./PopularVideoCard/PopularVideoCard";
@@ -18,10 +18,11 @@ const Container = SpotlightContainerDecorator(
 );
 
 export default function PopularShowIndicator({
-  scrollTop,
+  scrollTopBody,
   onSpotlightDown,
   topInfos,
   selectedIndex,
+  handleItemFocus,
 }) {
   const {
     thumbnailUrl960,
@@ -39,12 +40,17 @@ export default function PopularShowIndicator({
   } = topInfos[selectedIndex];
 
   const isVertical = Boolean(vtctpYn === "Y");
-  const { handleScrollReset, handleStopScrolling } = useScrollReset(scrollTop);
 
   const onSpotlightRight = () => {
     Spotlight.focus("popular-next-arrow");
   };
 
+  const _handleItemFocus = useCallback(() => {
+    if (handleItemFocus) {
+      handleItemFocus(LOG_MENU.TRENDING_NOW_POPULAR_SHOWS);
+    }
+  }, [handleItemFocus]);
+
   return (
     <Container className={css.popularContainer}>
       {topInfos && topInfos.length > 0 && (
@@ -61,11 +67,12 @@ export default function PopularShowIndicator({
               popularShowInfos={topInfos[selectedIndex]}
               showUrl={showUrl}
               spotlightId="popular_video"
-              scrollTop={scrollTop}
+              scrollTopBody={scrollTopBody}
               onSpotlightDown={onSpotlightDown}
               showId={showId}
               patnrId={patnrId}
               lgCatCd={catCd}
+              handleItemFocus={_handleItemFocus}
             />
           </Container>
           <PopularProductList
@@ -74,9 +81,10 @@ export default function PopularShowIndicator({
             patnrId={patnrId}
             selectedPatnrId={selectedPatnrId}
             onSpotlightRight={onSpotlightRight}
-            onFocus={handleScrollReset}
+            scrollTopBody={scrollTopBody}
             onSpotlightDown={onSpotlightDown}
             selectedIndex={selectedIndex}
+            handleItemFocus={_handleItemFocus}
           />
         </div>
       )}

com.twin.app.shoptime/src/views/TrendingNowPanel/PopularShow/PopularShowVerticalContents/PopularProductList.jsx

@@ -1,23 +1,18 @@
-import React, {
-  memo,
-  useCallback,
-  useEffect,
-  useRef,
-} from 'react';
+import React, { memo, useCallback, useEffect, useRef } from "react";
 
-import { useDispatch } from 'react-redux';
+import { useDispatch } from "react-redux";
 
-import { pushPanel } from '../../../../actions/panelActions';
-import { startVideoPlayer } from '../../../../actions/playActions';
+import { pushPanel } from "../../../../actions/panelActions";
+import { startVideoPlayer } from "../../../../actions/playActions";
 import TItemCard, {
   removeDotAndColon,
   TYPES,
-} from '../../../../components/TItemCard/TItemCard';
-import TVirtualGridList
-  from '../../../../components/TVirtualGridList/TVirtualGridList';
-import useScrollTo from '../../../../hooks/useScrollTo';
-import { panel_names } from '../../../../utils/Config';
-import css from './PopularProductList.module.less';
+} from "../../../../components/TItemCard/TItemCard";
+import TVirtualGridList from "../../../../components/TVirtualGridList/TVirtualGridList";
+import useScrollTo from "../../../../hooks/useScrollTo";
+import { panel_names } from "../../../../utils/Config";
+import css from "./PopularProductList.module.less";
+import useScrollReset from "../../../../hooks/useScrollReset";
 
 export default function PopularProductList({
   patnrId,
@@ -28,8 +23,11 @@ export default function PopularProductList({
   onFocus,
   onSpotlightDown,
   selectedIndex,
+  scrollTopBody,
+  handleItemFocus,
 }) {
   const { getScrollTo, scrollTop } = useScrollTo();
+  const { handleScrollReset } = useScrollReset(scrollTopBody);
 
   const dispatch = useDispatch();
   const timerRef = useRef();
@@ -50,6 +48,14 @@ export default function PopularProductList({
     [onSpotlightDown]
   );
 
+  const handleFocus = useCallback(() => {
+    if (handleItemFocus) {
+      handleItemFocus();
+    }
+
+    handleScrollReset();
+  }, [handleItemFocus, handleScrollReset]);
+
   const renderItem = useCallback(
     ({ index, ...rest }) => {
       const { offerInfo, prdtId, imgUrl, prdtNm, priceInfo, soldoutFlag } =
@@ -74,6 +80,7 @@ export default function PopularProductList({
           imageAlt={prdtNm}
           imageSource={imgUrl}
           onClick={handleClick}
+          onFocus={handleFocus}
           offerInfo={offerInfo}
           priceInfo={priceInfo}
           productName={prdtNm}
@@ -82,13 +89,12 @@ export default function PopularProductList({
           type={TYPES.horizontal}
           onSpotlightRight={onSpotlightRight}
           spotlightId={"popular-spotlightId-" + removeDotAndColon(prdtId)}
-          onFocus={onFocus}
           onSpotlightDown={_onSpotlightDown}
           {...rest}
         />
       );
     },
-    [brandProductInfo, dispatch, patnrId]
+    [brandProductInfo, dispatch, patnrId, handleFocus]
   );
 
   return (

com.twin.app.shoptime/src/views/TrendingNowPanel/PopularShow/PopularVideoCard/PopularVideoCard.jsx

@@ -38,11 +38,13 @@ export default function PopularVideoCard({
   showId,
   patnrId,
   lgCatCd,
-  scrollTop,
+  scrollTopBody,
+  handleItemFocus,
 }) {
   const dispatch = useDispatch();
   const [isFocused, setIsFocused] = useState(false);
-  const { handleScrollReset, handleStopScrolling } = useScrollReset(scrollTop);
+  const { handleScrollReset, handleStopScrolling } =
+    useScrollReset(scrollTopBody);
   const timerRef = useRef();
 
   useEffect(() => {
@@ -73,6 +75,10 @@ export default function PopularVideoCard({
 
   // 포커스 인
   const onFocus = (ev) => {
+    if (handleItemFocus) {
+      handleItemFocus();
+    }
+
     setIsFocused(true);
     handleScrollReset();
   };

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

@@ -19,10 +19,11 @@ import TPanel from "../../components/TPanel/TPanel";
 import useScrollReset from "../../hooks/useScrollReset";
 import useScrollTo from "../../hooks/useScrollTo";
 import useScrollTopByDistance from "../../hooks/useScrollTopByDistance";
-import { panel_names } from "../../utils/Config";
+import { LOG_MENU, panel_names } from "../../utils/Config";
 import { $L, scaleH } from "../../utils/helperMethods";
 import PopularShowIndicator from "./PopularShow/PopularShowIndicator";
 import css from "./TrendingNowPanel.module.less";
+import useLogService from "../../hooks/useLogService";
 
 const Container = SpotlightContainerDecorator(
   { enterTo: "last-focused" },
@@ -33,6 +34,8 @@ const STRING_CONF = {
   BEST_SELLER: $L("BEST SELLER"),
 };
 export default function TrendingNowPanel({ panelInfo }) {
+  const { sendLogGNB } = useLogService();
+
   const dispatch = useDispatch();
   const topInfos = useSelector((state) => state.main.top20ShowData?.topInfos);
   const bestSellerDatas = useSelector(
@@ -44,10 +47,12 @@ export default function TrendingNowPanel({ panelInfo }) {
     scrollTop: scrollTopBody,
     scrollLeft,
   } = useScrollTo();
+
   const { handleScrollReset, handleStopScrolling } = useScrollReset(
     scrollLeft,
     true
   );
+
   const [targetId, setTargetId] = useState(null);
   const [firstChk, setFirstChk] = useState(false);
   const timerRef = useRef();
@@ -55,17 +60,18 @@ export default function TrendingNowPanel({ panelInfo }) {
   const { cursorVisible } = useSelector((state) => state.common.appStatus);
   const [selectedIndex, setSelectedIndex] = useState(0);
   const [arrowFlag, setArrowFlag] = useState(scaleH(378) + "px");
-  const handleCardClick = useCallback((item) => {
-    dispatch(
-      pushPanel(
-        {
+
+  const handleCardClick = useCallback(
+    (item) => {
+      dispatch(
+        pushPanel({
           name: panel_names.DETAIL_PANEL,
           panelInfo: { patnrId: item.patnrId, prdtId: item.prdtId },
-        },
-        [dispatch, item]
-      )
-    );
-  });
+        })
+      );
+    },
+    [dispatch]
+  );
 
   useEffect(() => {
     if (!topInfos && !bestSellerDatas) {
@@ -194,6 +200,8 @@ export default function TrendingNowPanel({ panelInfo }) {
   }, []);
 
   const handleFocus = useCallback(() => {
+    handleItemFocus(LOG_MENU.TRENDING_NOW_BEST_SELLER);
+
     if (cursorVisible) {
       return;
     }
@@ -204,13 +212,20 @@ export default function TrendingNowPanel({ panelInfo }) {
       scrollTopBody,
       36
     );
-  }, [cursorVisible]);
+  }, [cursorVisible, handleItemFocus, scrollTopBody, scrollTopByDistance]);
 
   const handleSpotlightRight = useCallback((e) => {
     e.stopPropagation();
     Spotlight.focus("spotlightId-trendingNowTopBtn");
   }, []);
 
+  const handleItemFocus = useCallback(
+    (nowMenu) => {
+      sendLogGNB(nowMenu);
+    },
+    [sendLogGNB]
+  );
+
   return (
     <div className={css.trendingNowWrap}>
       {selectedIndex >= 1 && (
@@ -234,10 +249,11 @@ export default function TrendingNowPanel({ panelInfo }) {
             <Container className={css.popularContainer}>
               <SectionTitle title={STRING_CONF.POPULAR_SHOW} />
               <PopularShowIndicator
-                scrollTop={scrollTopBody}
+                scrollTopBody={scrollTopBody}
                 onSpotlightDown={onItemSpotlightDown}
                 topInfos={topInfos}
                 selectedIndex={selectedIndex}
+                handleItemFocus={handleItemFocus}
               />
             </Container>
           )}