[CheckoutPanel, ConfirmPanel] IF-LGSP-LOG-005 (GNB), 반영

com.twin.app.shoptime/src/hooks/useLogService.js

@@ -108,6 +108,7 @@ export default function useLogService() {
   const sendLogVOD = useCallback(
     (params) => {
       // todo pyh, add case return
+      // const { watchStrtDt } = params;
 
       const newParams = {
         ...params,
@@ -270,7 +271,7 @@ export default function useLogService() {
       dispatch({ type: types.SET_GNB_MENU, payload: menu });
       dispatch(postLog(newParams));
     },
-    [dispatch]
+    [dispatch, menuMovSnoRef, nowMenuRef]
   );
 
   /**

com.twin.app.shoptime/src/utils/Config.js

@@ -276,6 +276,7 @@ export const LOG_MENU = {
   FULL_LIVE_CHANNELS: "Full/Live Channels", // completed
   FULL_FEATURED_SHOWS: "Full/Featured Shows", // completed
 
-  CHECKOUT_PIN_CODE: "Checkout/PIN Code",
+  CHECKOUT: "Checkout/Checkout", // pyh todo, 문의, completed
-  CHECKOUT_ORDER_COMPLETE: "Checkout/Order Complete",
+  CHECKOUT_PIN_CODE: "Checkout/PIN Code", // completed
+  CHECKOUT_ORDER_COMPLETE: "Checkout/Order Complete", // completed
 };

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

@@ -26,6 +26,7 @@ import THeader from "../../components/THeader/THeader";
 import TPanel from "../../components/TPanel/TPanel";
 import TPopUp from "../../components/TPopUp/TPopUp";
 import TQRCode from "../../components/TQRCode/TQRCode";
+import useLogService from "../../hooks/useLogService";
 import useScrollTo from "../../hooks/useScrollTo";
 import * as Config from "../../utils/Config";
 import { $L, scaleH, scaleW } from "../../utils/helperMethods";
@@ -37,6 +38,7 @@ import OrderItemsSideBar from "./container/OrderItemsSideBar";
 import SummaryContainer from "./container/SummaryCotainer";
 
 export default function CheckOutPanel() {
+  const { sendLogGNB } = useLogService();
   const dispatch = useDispatch();
   const panels = useSelector((state) => state.panels.panels);
   const { userNumber } = useSelector(
@@ -76,6 +78,18 @@ export default function CheckOutPanel() {
 
   const spotJob = useRef(new Job((func) => func(), 0));
 
+  useEffect(() => {
+    let nowMenu;
+
+    if (!placeOrderPopup || popupVisible) {
+      nowMenu = Config.LOG_MENU.CHECKOUT;
+    } else if (placeOrderPopup) {
+      nowMenu = Config.LOG_MENU.CHECKOUT_PIN_CODE;
+    }
+
+    sendLogGNB(nowMenu);
+  }, [placeOrderPopup, popupVisible, sendLogGNB]);
+
   useEffect(() => {
     isMounted.current = true;
 

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

@@ -1,17 +1,20 @@
-import React, { useCallback } from "react";
+import React, { useCallback, useEffect } from "react";
 
 import { useDispatch, useSelector } from "react-redux";
 
 import { popPanel, pushPanel, resetPanels } from "../../actions/panelActions";
 import TButton from "../../components/TButton/TButton";
 import TPanel from "../../components/TPanel/TPanel";
+import useLogService from "../../hooks/useLogService";
 import * as Config from "../../utils/Config";
 import { $L } from "../../utils/helperMethods";
 import css from "./ConfirmPanel.module.less";
 
 export default function ConfirmPanel({ spotlightId }) {
+  const { sendLogGNB } = useLogService();
   const dispatch = useDispatch();
 
+  const popupVisible = useSelector((state) => state.common.popup.popupVisible);
   const panels = useSelector((state) => state.panels.panels);
   const panelInfo = panels.find(
     (panel) => panel.name === "confirmpanel"
@@ -40,6 +43,12 @@ export default function ConfirmPanel({ spotlightId }) {
   } = panelInfo?.orderInfo || {};
   const auctProdYn = panelInfo?.auctProdYn || {};
 
+  useEffect(() => {
+    if (!popupVisible) {
+      sendLogGNB(Config.LOG_MENU.CHECKOUT_ORDER_COMPLETE);
+    }
+  }, [popupVisible, sendLogGNB]);
+
   const handleCancel = useCallback((e) => {
     if (e && typeof e.preventDefault === "function") {
       e.preventDefault();