save home default focus in redux, add eventPopup focus

com.twin.app.shoptime/src/actions/actionTypes.js

@@ -53,6 +53,7 @@ export const types = {
   GET_THEME_MENU_SHELF_INFO: "GET_THEME_MENU_SHELF_INFO",
   UPDATE_SPOTLIGHTID: "UPDATE_SPOTLIGHTID",
   CLEAR_THEME_DETAIL: "CLEAR_THEME_DETAIL",
+  SET_DEFAULT_FOCUS: "SET_DEFAULT_FOCUS",
 
   // brand actions
   GET_BRAND_LIST: "GET_BRAND_LIST",

com.twin.app.shoptime/src/actions/homeActions.js

@@ -239,3 +239,8 @@ export const updateSpotlightId = (currentSpot) => {
 export const clearThemeDetail = () => ({
   type: types.CLEAR_THEME_DETAIL,
 });
+
+export const setDefaultFocus = (focus) => ({
+  type: types.SET_DEFAULT_FOCUS,
+  payload: focus,
+});

com.twin.app.shoptime/src/reducers/homeReducer.js

@@ -13,6 +13,7 @@ const initialState = {
     data: {},
     status: "idle",
   },
+  defaultFocus: null,
 };
 
 export const homeReducer = (state = initialState, action) => {
@@ -58,9 +59,9 @@ export const homeReducer = (state = initialState, action) => {
       };
 
     case types.GET_HOME_MAIN_CONTENTS: {
-      const  homeTopDisplayInfo = action.payload?.homeTopDisplayInfos?.[0] ?? {};
+      const homeTopDisplayInfo = action.payload?.homeTopDisplayInfos?.[0] ?? {};
       const bannerData = action.payload?.homeMainContentsBannerInfos?.[0] ?? {};
-      if(bannerData.bannerInfos){
+      if (bannerData.bannerInfos) {
         for (let i = 0; i < bannerData.bannerInfos.length; i++) {
           const info = bannerData.bannerInfos[i];
           if (info.shptmDspyTpNm === "Random") {
@@ -72,7 +73,7 @@ export const homeReducer = (state = initialState, action) => {
       return {
         ...state,
         homeTopDisplayInfo: homeTopDisplayInfo,
-        bannerData: bannerData
+        bannerData: bannerData,
       };
     }
     case types.GET_THEME_CURATION_INFO:
@@ -122,6 +123,14 @@ export const homeReducer = (state = initialState, action) => {
         hotelData: null,
       };
     }
+
+    case types.SET_DEFAULT_FOCUS: {
+      return {
+        ...state,
+        defaultFocus: action.payload,
+      };
+    }
+
     default:
       return state;
   }

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

@@ -51,6 +51,7 @@ export default function EventPopUpBanner() {
 
   const timerRef = useRef();
   const shopByMobileLogRef = useRef(null);
+  const defaultFocus = useSelector((state) => state.home.defaultFocus);
 
   const evntId = eventPopInfosData?.evntId;
   const evntTpCd = eventPopInfosData?.evntTpCd;
@@ -167,7 +168,11 @@ export default function EventPopUpBanner() {
       dispatch(setEventPopClickInfo({ evntApplcnFlag: "N", evntId }));
       dispatch(setHidePopup());
     }
-  }, [dispatch, eventPopInfosData]);
+
+    if (defaultFocus) {
+      Spotlight.focus(defaultFocus);
+    }
+  }, [dispatch, eventPopInfosData, defaultFocus]);
 
   useEffect(() => {
     timerRef.current = setTimeout(() => {

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

@@ -6,7 +6,10 @@ import Spotlight from "@enact/spotlight";
 import { SpotlightContainerDecorator } from "@enact/spotlight/SpotlightContainerDecorator";
 import Spottable from "@enact/spotlight/Spottable";
 
-import { getHomeMainContents } from "../../../actions/homeActions";
+import {
+  getHomeMainContents,
+  setDefaultFocus,
+} from "../../../actions/homeActions";
 import CustomImage from "../../../components/CustomImage/CustomImage";
 import useScrollReset from "../../../hooks/useScrollReset";
 import css from "./HomeBanner.module.less";
@@ -28,9 +31,12 @@ export default function HomeBanner({
   spotlightId,
   handleItemFocus,
 }) {
+  const dispatch = useDispatch();
+
   const homeTopDisplayInfo = useSelector(
     (state) => state.home.homeTopDisplayInfo
   );
+  const popupVisible = useSelector((state) => state.common.popup.popupVisible);
 
   const bannerDataList = useSelector(
     (state) => state.home.bannerData?.bannerInfos
@@ -81,13 +87,17 @@ export default function HomeBanner({
         Spotlight.focus(defaultFocus);
       }, 0);
     }
-  }, [defaultFocus]);
+
+    if (defaultFocus) {
+      dispatch(setDefaultFocus(defaultFocus));
+    }
+  }, [defaultFocus, dispatch]);
 
   const renderItem = useCallback(
     (index, isHorizontal) => {
       const data = bannerDataList?.[index] ?? {};
       return (
-        <div className={!isHorizontal ? css.imgBox: undefined}>
+        <div className={!isHorizontal ? css.imgBox : undefined}>
           {data.shptmDspyTpNm === "Rolling" ? (
             <Rolling
               bannerData={data}