[OnSalePanel] Log, IF-LGSP-LOG-003 / Curation View 이력 수정

1. 변경 된 LOG_MENU 반영
2. 최초 진입시 반영

com.twin.app.shoptime/src/App/deepLinkHandler.js

@@ -147,7 +147,7 @@ export const handleDeepLink = (contentTarget) => (dispatch, getState) => {
         panelName = panel_names.ON_SALE_PANEL;
         panelInfo = {
           lgCatCd: lgCatCd,
-          // lgCatNm: lgCatNm,
+          lgCatNm: lgCatNm,
         };
         break;
       case "BS":

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

@@ -28,6 +28,7 @@ export default function HomeOnSaleItem({ homeOnSaleInfos, itemData, ...rest }) {
           name: panel_names.ON_SALE_PANEL,
           panelInfo: {
             lgCatCd: itemData.lgCatCd,
+            lgCatNm: itemData.catNm,
             prdtId: itemData.prdtId,
           },
         })

com.twin.app.shoptime/src/views/OnSalePanel/OnSaleNav/OnSaleNav.jsx

@@ -20,6 +20,7 @@ export default function OnSaleNav({
   scrollTopBody,
   selectedLgCatCd,
   setSelectedLgCatCd,
+  setSelectedLgCatNm,
   setFirstFocusableTarget,
 }) {
   const { getScrollTo, scrollLeft } = useScrollTo();
@@ -83,6 +84,7 @@ export default function OnSaleNav({
               selectedLgCatCd={selectedLgCatCd}
               setFirstFocusableTarget={setFirstFocusableTarget}
               setSelectedLgCatCd={setSelectedLgCatCd}
+              setSelectedLgCatNm={setSelectedLgCatNm}
             />
           ))}
         </ul>

com.twin.app.shoptime/src/views/OnSalePanel/OnSaleNav/OnSaleNavItem/OnSaleNavItem.jsx

@@ -6,11 +6,10 @@ import { useDispatch, useSelector } from "react-redux";
 import Spottable from "@enact/spotlight/Spottable";
 import { setContainerLastFocusedElement } from "@enact/spotlight/src/container";
 
-import { updatePanel } from "../../../../actions/panelActions";
-import { LOG_TP_NO, panel_names } from "../../../../utils/Config";
+import { resetPanels } from "../../../../actions/panelActions";
+import { panel_names } from "../../../../utils/Config";
 import { SpotlightIds } from "../../../../utils/SpotlightIds";
 import css from "./OnSaleNavItem.module.less";
-import useLogService from "../../../../hooks/useLogService";
 
 const SpottableComponent = Spottable("li");
 
@@ -21,10 +20,9 @@ export default memo(function OnSaleNavItem({
   selectedLgCatCd,
   setFirstFocusableTarget,
   setSelectedLgCatCd,
+  setSelectedLgCatNm,
   ...rest
 }) {
-  const { sendLogCuration } = useLogService();
-
   const dispatch = useDispatch();
 
   const panelInfo = useSelector((state) => state.panels.panels[0]?.panelInfo);
@@ -36,35 +34,22 @@ export default memo(function OnSaleNavItem({
       return scrollTopBody();
     }
 
-    sendLogCuration({
-      expsOrd: itemIndex.toString(),
-      lgCatCd,
-      lgCatNm,
-      logTpNo: LOG_TP_NO.CURATION.ON_SALE,
-    });
-
-    dispatch(
-      updatePanel({
-        name: panel_names.ON_SALE_PANEL,
-        panelInfo: { ...panelInfo, exprOrd: null },
-      })
-    );
+    dispatch(resetPanels([{ name: panel_names.ON_SALE_PANEL }]));
 
     setContainerLastFocusedElement(null, [SpotlightIds.TBODY]);
     setSelectedLgCatCd(lgCatCd);
+    setSelectedLgCatNm(lgCatNm);
     setFirstFocusableTarget();
     scrollTopBody();
   }, [
     dispatch,
-    itemIndex,
     lgCatCd,
     lgCatNm,
-    panelInfo,
     scrollTopBody,
-    sendLogCuration,
     selectedLgCatCd,
     setFirstFocusableTarget,
     setSelectedLgCatCd,
+    setSelectedLgCatNm,
   ]);
 
   return (

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

@@ -12,12 +12,20 @@ import TButton, { TYPES } from "../../components/TButton/TButton";
 import { removeDotAndColon } from "../../components/TItemCard/TItemCard";
 import TPanel from "../../components/TPanel/TPanel";
 import useScrollTo from "../../hooks/useScrollTo";
-import { panel_names } from "../../utils/Config";
+import { LOG_TP_NO, panel_names } from "../../utils/Config";
 import OnSaleContents from "./OnSaleContents/OnSaleContents";
 import OnSaleNav from "./OnSaleNav/OnSaleNav";
 import css from "./OnSalePanel.module.less";
+import useLogService from "../../hooks/useLogService";
+
+const getExpsOrdByLgCatCd = (array, value) => {
+  const expsOrd = array.findIndex(({ lgCatCd }) => value === lgCatCd) + 1;
+  return expsOrd.toString();
+};
 
 export default function OnSalePanel() {
+  const { sendLogCuration } = useLogService();
+
   const { getScrollTo: getScrollToBody, scrollTop: scrollTopBody } =
     useScrollTo();
 
@@ -46,14 +54,15 @@ export default function OnSalePanel() {
     useState(false);
   const [isTopButtonClicked, setIsTopButtonClicked] = useState(false);
   const [selectedLgCatCd, setSelectedLgCatCd] = useState();
+  const [selectedLgCatNm, setSelectedLgCatNm] = useState();
   const [spotlightDisabled, setSpotlightDisabled] = useState(true);
 
   const firstFocusableItemTimeoutRef = useRef();
   const initialFocusTimeoutRef = useRef();
 
   const hasPanelInfo = Object.keys(panelInfo).length > 0;
-  const previousPanelIsHome = Object.keys(panelInfo).length === 2;
-  const previousPanelIsDetail = Object.keys(panelInfo).length >= 5;
+  const previousPanelIsHome = Object.keys(panelInfo).length === 3;
+  const previousPanelIsDetail = Object.keys(panelInfo).length > 4;
 
   // const isLoading = onSaleDataStatus !== "fulfilled";
 
@@ -103,7 +112,7 @@ export default function OnSalePanel() {
       // );
 
       dispatch(getOnSaleInfo(props));
-      dispatch(copyCategoryInfos(categoryInfos));
+      // dispatch(copyCategoryInfos(categoryInfos));
       setIsInitialRendered(false);
     }
   }, [
@@ -132,10 +141,17 @@ export default function OnSalePanel() {
         //   "background: blue; color: white"
         // );
 
+        dispatch(copyCategoryInfos(categoryInfos));
         setCategories(categoryInfos);
       }
     }
-  }, [categories, categoryInfos, copiedCategoryInfos, previousPanelIsDetail]);
+  }, [
+    categories,
+    categoryInfos,
+    copiedCategoryInfos,
+    dispatch,
+    previousPanelIsDetail,
+  ]);
 
   useEffect(() => {
     if (selectedLgCatCd) {
@@ -167,25 +183,27 @@ export default function OnSalePanel() {
     if (isReadyForInitialFocusTarget && !isInitialFocusOccurred) {
       let targetId;
 
-      if (hasPanelInfo) {
-        if (previousPanelIsDetail) {
-          targetId = panelInfo?.targetId;
-        }
-
-        if (previousPanelIsHome) {
-          targetId = panelInfo?.linkTpCd
-            ? "spotlightId-" + panelInfo?.lgCatCd
-            : "spotlightId-" + panelInfo?.prdtId;
-        }
-
-        if (panelInfo?.y) {
-          const { y } = panelInfo;
-          scrollTopBody({ y, animate: false });
-        }
-      } else {
-        if (categories) {
+      if (categories) {
+        if (!hasPanelInfo) {
           targetId = "spotlightId-" + categories[0]?.lgCatCd;
         }
+        //
+        else {
+          if (previousPanelIsDetail) {
+            targetId = panelInfo?.targetId;
+          }
+
+          if (previousPanelIsHome) {
+            targetId = panelInfo?.linkTpCd
+              ? "spotlightId-" + panelInfo?.lgCatCd
+              : "spotlightId-" + panelInfo?.prdtId;
+          }
+
+          if (panelInfo?.y) {
+            const { y } = panelInfo;
+            scrollTopBody({ y, animate: false });
+          }
+        }
       }
 
       setSpotlightDisabled(false);
@@ -223,6 +241,52 @@ export default function OnSalePanel() {
     scrollTopBody,
   ]);
 
+  useEffect(() => {
+    if (categories && isInitialFocusOccurred && !previousPanelIsDetail) {
+      let params = { logTpNo: LOG_TP_NO.CURATION.ON_SALE };
+
+      if (!selectedLgCatCd) {
+        if (!hasPanelInfo) {
+          params = {
+            ...params,
+            expsOrd: getExpsOrdByLgCatCd(categories, categories[0]?.lgCatCd),
+            lgCatCd: categories[0]?.lgCatCd,
+            lgCatNm: categories[0]?.lgCatNm,
+          };
+        }
+
+        if (previousPanelIsHome) {
+          params = {
+            ...params,
+            expsOrd: getExpsOrdByLgCatCd(categories, panelInfo?.lgCatCd),
+            lgCatCd: panelInfo?.lgCatCd,
+            lgCatNm: panelInfo?.lgCatNm,
+          };
+        }
+      } else {
+        params = {
+          ...params,
+          expsOrd: getExpsOrdByLgCatCd(categories, selectedLgCatCd),
+          lgCatCd: selectedLgCatCd,
+          lgCatNm: selectedLgCatNm,
+        };
+      }
+
+      sendLogCuration(params);
+    }
+  }, [
+    categories,
+    hasPanelInfo,
+    isInitialFocusOccurred,
+    panelInfo?.lgCatCd,
+    panelInfo?.lgCatNm,
+    previousPanelIsHome,
+    previousPanelIsDetail,
+    selectedLgCatCd,
+    selectedLgCatNm,
+    sendLogCuration,
+  ]);
+
   useEffect(() => {
     return () => {
       const lastFocusedTarget = Spotlight.getCurrent();
@@ -275,6 +339,7 @@ export default function OnSalePanel() {
             selectedLgCatCd={selectedLgCatCd}
             setFirstFocusableTarget={setFirstFocusableTarget}
             setSelectedLgCatCd={setSelectedLgCatCd}
+            setSelectedLgCatNm={setSelectedLgCatNm}
           />
 
           <TBody className={css.tBody} cbScrollTo={getScrollToBody}>