[HomePanel, OnSalePanel, TabLayout] focus fix & action edit

detail note:

1. Home OnSale > OnSale > Home OnSale의 경우 node를 찾지 못해 focus되지 않는 문제 수정
2. OnSalePanel, LoadingPanel 반영
3. TabLayout, 불필요 디펜던시 props 삭제

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

@@ -1,48 +1,56 @@
 import { URLS } from "../api/apiConfig";
 import { TAxios } from "../api/TAxios";
 import { types } from "./actionTypes";
+import { changeAppStatus } from "./commonActions";
 
 // On Sale 조회 IF-LGSP-086
-export const getOnSaleInfo = (props) => (dispatch, getState) => {
-  const { categoryIncFlag, homeSaleInfosIncFlag, lgCatCd, saleInfosIncFlag } =
-    props;
+export const getOnSaleInfo =
+  (props, showLoadingPanel = false) =>
+  (dispatch, getState) => {
+    const { categoryIncFlag, homeSaleInfosIncFlag, lgCatCd, saleInfosIncFlag } =
+      props;
 
-  dispatch({
-    type: types.GET_ON_SALE_INFO,
-    payload: {
-      ...getState().onSale.onSaleData,
-      status: "pending",
-    },
-  });
+    if (showLoadingPanel) {
+      dispatch(
+        changeAppStatus({ showLoadingPanel: { show: true, type: "wait" } })
+      );
+    }
 
-  const onSuccess = (response) => {
-    console.log("getOnSaleInfo onSuccess ", response.data);
+    const onSuccess = (response) => {
+      console.log("getOnSaleInfo onSuccess ", response.data);
 
-    dispatch({
-      type: types.GET_ON_SALE_INFO,
-      payload: {
-        data: response.data.data,
-        status: "fulfilled",
-      },
-    });
+      dispatch({
+        type: types.GET_ON_SALE_INFO,
+        payload: {
+          data: response.data.data,
+        },
+      });
+
+      if (showLoadingPanel) {
+        dispatch(changeAppStatus({ showLoadingPanel: { show: false } }));
+      }
+    };
+
+    const onFail = (error) => {
+      console.error("getOnSaleInfo onFail", error);
+
+      if (showLoadingPanel) {
+        dispatch(changeAppStatus({ showLoadingPanel: { show: false } }));
+      }
+    };
+
+    TAxios(
+      dispatch,
+      getState,
+      "get",
+      URLS.GET_ON_SALE_INFO,
+      { categoryIncFlag, homeSaleInfosIncFlag, lgCatCd, saleInfosIncFlag },
+      {},
+      onSuccess,
+      onFail
+    );
   };
 
-  const onFail = (error) => {
-    console.error("getOnSaleInfo onFail", error);
-  };
-
-  TAxios(
-    dispatch,
-    getState,
-    "get",
-    URLS.GET_ON_SALE_INFO,
-    { categoryIncFlag, homeSaleInfosIncFlag, lgCatCd, saleInfosIncFlag },
-    {},
-    onSuccess,
-    onFail
-  );
-};
-
 export const copyCategoryInfos = (categoryInfos) => ({
   type: types.COPY_CATEGORY_INFO,
   payload: categoryInfos,

com.twin.app.shoptime/src/components/TabLayout/TabLayout.jsx

@@ -511,7 +511,7 @@ export default function TabLayout({ topPanelName, onTabActivated, panelInfo }) {
         })
       );
     },
-    [dispatch, deActivateTab, panels, selectedTitle, SpotlightIds]
+    [dispatch, deActivateTab, panels, selectedTitle]
   );
   const onClickExtraArea = useCallback(
     ({ index, target }) => {

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

@@ -3,7 +3,6 @@ import { types } from "../actions/actionTypes";
 const initialState = {
   onSaleData: {
     data: {},
-    status: "idle",
   },
 
   copiedCategoryInfos: [],

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

@@ -159,26 +159,35 @@ export default function HomePanel({ isOnTop }) {
   }, []);
 
   useEffect(() => {
+    let timer;
+
     if (homeSpotlight) {
       const { y } = homeSpotlight;
+
       scrollTopBody({ y, animate: false });
-      setTimeout(() => {
+
+      timer = setTimeout(() => {
         Spotlight.resume();
         scrollTopBody({ y, animate: false }); //call again after some seconds
+
         if (homeSpotlight.currentCatCd) {
           Spotlight.focus("spotlightId-" + homeSpotlight.currentCatCd);
         }
+
         if (homeSpotlight.currentSpot) {
           Spotlight.focus(homeSpotlight.currentSpot);
         }
+
         setBtnActive(false);
         setFirstSpot(true);
-      }, 0);
+      }, 300);
     } else {
       setBtnActive(false);
     }
 
     return () => {
+      clearTimeout(timer);
+
       const c = Spotlight.getCurrent();
       let targetSpotlightId = null;
       let targetSpotlightCatcd = null;

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

@@ -4,7 +4,6 @@ import { useDispatch, useSelector } from "react-redux";
 
 import Spotlight from "@enact/spotlight";
 
-// import { changeAppStatus } from "../../actions/commonActions";
 import { copyCategoryInfos, getOnSaleInfo } from "../../actions/onSaleActions";
 import { updatePanel } from "../../actions/panelActions";
 import TBody from "../../components/TBody/TBody";
@@ -42,9 +41,6 @@ export default function OnSalePanel() {
   const saleInfos = useSelector(
     (state) => state.onSale.onSaleData.data.saleInfos
   );
-  // const onSaleDataStatus = useSelector(
-  //   (state) => state.onSale.onSaleData.status
-  // );
 
   const [categories, setCategories] = useState();
   const [firstFocusableTarget, setFirstFocusableTarget] = useState();
@@ -64,8 +60,6 @@ export default function OnSalePanel() {
   const previousPanelIsHome = Object.keys(panelInfo).length === 3;
   const previousPanelIsDetail = Object.keys(panelInfo).length > 4;
 
-  // const isLoading = onSaleDataStatus !== "fulfilled";
-
   // useEffect(() => {
   //   if (panelInfo) {
   //     console.log(
@@ -81,14 +75,6 @@ export default function OnSalePanel() {
   //   }
   // }, [panelInfo]);
 
-  // useEffect(() => {
-  //   const showLoadingPanel = isLoading
-  //     ? { show: true, type: "wait" }
-  //     : { show: false };
-
-  //   dispatch(changeAppStatus({ showLoadingPanel }));
-  // }, [dispatch, isLoading]);
-
   useEffect(() => {
     sendLogGNB(LOG_MENU.ON_SALE);
   }, [sendLogGNB]);
@@ -115,7 +101,7 @@ export default function OnSalePanel() {
       //   "background: blue; color: white"
       // );
 
-      dispatch(getOnSaleInfo(props));
+      dispatch(getOnSaleInfo(props, true));
       // dispatch(copyCategoryInfos(categoryInfos));
       setIsInitialRendered(false);
     }
@@ -165,7 +151,7 @@ export default function OnSalePanel() {
       // );
 
       dispatch(
-        getOnSaleInfo({ lgCatCd: selectedLgCatCd, saleInfosIncFlag: "Y" })
+        getOnSaleInfo({ lgCatCd: selectedLgCatCd, saleInfosIncFlag: "Y" }, true)
       );
     }
   }, [dispatch, selectedLgCatCd]);