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

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

@@ -13,7 +13,7 @@ import TScroller from "../../../components/TScroller/TScroller";
 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, scaleW } from "../../../utils/helperMethods";
 import css from "./BestSeller.module.less";
 
@@ -23,55 +23,66 @@ const Container = SpotlightContainerDecorator(
   "div"
 );
 
-const BestSeller = ({ order, scrollTopBody, panelInfo }) => {
-  const dispatch = useDispatch();
-  const bestSellerDatas = useSelector(
-    (state) => state.product.bestSellerData?.bestSeller
-  );
-  const [drawChk, setDrawChk] = useState(false);
+const BestSeller = ({ order, scrollTopBody, handleItemFocus }) => {
   const { getScrollTo, scrollLeft } = useScrollTo();
   const { handleScrollReset, handleStopScrolling } = useScrollReset(
     scrollLeft,
     true
   );
   const { scrollTopByDistance } = useScrollTopByDistance();
+
+  const dispatch = useDispatch();
+
   const { cursorVisible } = useSelector((state) => state.common.appStatus);
+
+  const bestSellerDatas = useSelector(
+    (state) => state.product.bestSellerData?.bestSeller
+  );
+
+  const [drawChk, setDrawChk] = useState(false);
+
+  const orderStyle = useMemo(() => ({ order: order }), [order]);
+
   useEffect(() => {
     setDrawChk(true);
   }, [bestSellerDatas]);
-  const handleCardClick = useCallback((patnrId, prdtId) => {
-    dispatch(
-      pushPanel(
-        {
+
+  const handleCardClick = useCallback(
+    (patnrId, prdtId) => () => {
+      dispatch(
+        pushPanel({
           name: panel_names.DETAIL_PANEL,
           panelInfo: { patnrId: patnrId, prdtId: prdtId },
-        },
-        [dispatch]
-      )
-    );
-  });
+        })
+      );
+    },
+    [dispatch]
+  );
+
   const handleMoreCardClick = useCallback(() => {
     dispatch(
-      pushPanel(
-        {
-          name: panel_names.TRENDING_NOW_PANEL,
-          panelInfo: {
-            pageName: "BS",
-          },
+      pushPanel({
+        name: panel_names.TRENDING_NOW_PANEL,
+        panelInfo: {
+          pageName: "BS",
         },
-        [dispatch]
-      )
+      })
     );
-  });
+  }, [dispatch]);
 
-  const handleBlur = useCallback((itemIndex) => {
-    if (itemIndex === 0) {
-      handleStopScrolling();
-    }
-  }, []);
+  const handleBlur = useCallback(
+    (itemIndex) => () => {
+      if (itemIndex === 0) {
+        handleStopScrolling();
+      }
+    },
+    [handleStopScrolling]
+  );
 
   const handleFocus = useCallback(
-    (itemIndex) => {
+    (itemIndex) => () => {
+      _handleItemFocus();
+
       if (itemIndex === 0) {
         handleScrollReset();
       }
@@ -87,10 +98,15 @@ const BestSeller = ({ order, scrollTopBody, panelInfo }) => {
         36
       );
     },
-    [cursorVisible]
+    [
+      cursorVisible,
+      _handleItemFocus,
+      handleScrollReset,
+      scrollTopBody,
+      scrollTopByDistance,
+    ]
   );
 
-  const orderStyle = useMemo(() => ({ order: order }), [order]);
   const handleScrollRight = (e) => {
     const container = e.currentTarget?.parentNode;
     const x = container.scrollWidth - container.clientWidth + 60;
@@ -99,6 +115,13 @@ const BestSeller = ({ order, scrollTopBody, panelInfo }) => {
       scrollLeft({ x, animate: true });
     });
   };
+
+  const _handleItemFocus = useCallback(() => {
+    if (handleItemFocus) {
+      handleItemFocus(LOG_MENU.HOME_BEST_SELLER);
+    }
+  }, [handleItemFocus]);
+
   return (
     <Container className={css.bestSellerWrap} style={orderStyle}>
       <SectionTitle
@@ -135,9 +158,9 @@ const BestSeller = ({ order, scrollTopBody, panelInfo }) => {
                 isBestSeller={true}
                 productId={prdtId}
                 rank={rankOrd}
-                onFocus={() => handleFocus(itemIndex)}
-                onBlur={() => handleBlur(itemIndex)}
-                onClick={() => handleCardClick(patnrId, prdtId)}
+                onFocus={handleFocus(itemIndex)}
+                onBlur={handleBlur(itemIndex)}
+                onClick={handleCardClick(patnrId, prdtId)}
                 offerInfo={offerInfo}
                 spotlightId={"bestsellerItem" + itemIndex}
               />