[ImagePanel] IF-LGSP-LOG-005 (GNB)

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

@@ -280,6 +280,9 @@ export const LOG_MENU = {
   FULL_LIVE_CHANNELS: "Full/Live Channels", // completed
   FULL_FEATURED_SHOWS: "Full/Featured Shows", // completed
 
+  SHOW_ROOM_SHOP_NOW: "Showroom/Shop Now", // completed
+  SHOW_ROOM_ROOM_THEME: "Showroom/Room Theme", // completed
+
   CHECKOUT: "Checkout/Checkout", // pyh todo, 문의, completed
   CHECKOUT_PIN_CODE: "Checkout/PIN Code", // completed
   CHECKOUT_ORDER_COMPLETE: "Checkout/Order Complete", // completed

com.twin.app.shoptime/src/views/ImagePanel/ImageOverlayContents/ImageOverlayContents.jsx

@@ -113,6 +113,7 @@ export default memo(function ImageOverlayContents({
           css.darkGradient,
           overlayContentsVisible ? css.show : css.hidden
         )}
+        id="dark-gradient"
       />
 
       <SpottableButton

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

@@ -10,6 +10,7 @@ import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDeco
 import { updatePanel } from "../../actions/panelActions";
 import CustomImage from "../../components/CustomImage/CustomImage";
 import TPanel from "../../components/TPanel/TPanel";
+import useLogService from "../../hooks/useLogService";
 import { panel_names } from "../../utils/Config";
 import ImageOverlayContents from "./ImageOverlayContents/ImageOverlayContents";
 import css from "./ImagePanel.module.less";
@@ -39,6 +40,8 @@ const findSelector = (selector, maxAttempts = 5, currentAttempts = 0) => {
 };
 
 export default function ImagePanel({ spotlightId, ...rest }) {
+  const { sendLogGNB } = useLogService();
+
   const dispatch = useDispatch();
 
   const panelInfo = useSelector((state) => state.panels.panels[1]?.panelInfo);
@@ -209,9 +212,9 @@ export default function ImagePanel({ spotlightId, ...rest }) {
   const handleClick = useCallback(
     (e) => {
       if (sideContentsVisible) {
-        // if (e.target === e.currentTarget) {
-        setSideContentsVisible(false);
-        // }
+        if (e.target.id === "dark-gradient") {
+          setSideContentsVisible(false);
+        }
       } else {
         setOverlayContentsVisible((prev) => !prev);
       }
@@ -219,6 +222,13 @@ export default function ImagePanel({ spotlightId, ...rest }) {
     [sideContentsVisible]
   );
 
+  const handleSeletedTab = useCallback(
+    (nowMenu) => {
+      sendLogGNB(nowMenu);
+    },
+    [sendLogGNB]
+  );
+
   return (
     <TPanel
       className={css.tPanel}
@@ -254,6 +264,7 @@ export default function ImagePanel({ spotlightId, ...rest }) {
             {sideContentsVisible && (
               <ImageSideContents
                 otherRoomThemeInfos={otherRoomThemeInfos}
+                handleSeletedTab={handleSeletedTab}
                 selectedRoomThemeInfo={selectedRoomThemeInfo}
               />
             )}

com.twin.app.shoptime/src/views/ImagePanel/ImageSideContents/ImageSideContents.jsx

@@ -1,8 +1,9 @@
-import React, { memo, useCallback, useState } from "react";
+import React, { memo, useCallback, useEffect, useState } from "react";
 
 import TButtonTab, {
   LIST_TYPE,
 } from "../../../components/TButtonTab/TButtonTab";
+import { LOG_MENU } from "../../../utils/Config";
 import { $L } from "../../../utils/helperMethods";
 import css from "./ImageSideContents.module.less";
 import ListEmptyContents from "./ListEmptyContents/ListEmptyContents";
@@ -13,12 +14,24 @@ const tabList = [$L("SHOP NOW"), $L("ROOM THEME")];
 
 export default memo(function ImageSideContents({
   otherRoomThemeInfos,
+  handleSeletedTab,
   selectedRoomThemeInfo,
 }) {
   const [tabIndex, setTabIndex] = useState(0);
 
   const { roomThemeProducts } = selectedRoomThemeInfo;
 
+  useEffect(() => {
+    if (handleSeletedTab) {
+      const nowMenu =
+        tabIndex === 0
+          ? LOG_MENU.SHOW_ROOM_SHOP_NOW
+          : LOG_MENU.SHOW_ROOM_ROOM_THEME;
+
+      handleSeletedTab(nowMenu);
+    }
+  }, [tabIndex, handleSeletedTab]);
+
   const handleItemClick = useCallback(
     ({ index }) => {
       if (index === tabIndex) {