핫픽스 초기 스팟관련 처리

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

@@ -191,6 +191,7 @@ export const getThemeCurationInfo = () => (dispatch, getState) => {
     dispatch({
       type: types.GET_THEME_CURATION_INFO,
       payload: response.data.data,
+      retCode: response.data.retCode,
     });
   };
 

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

@@ -15,6 +15,7 @@ const initialState = {
   },
   defaultFocus: null,
   enterThroughGNB: false,
+  themeCurationInfoDataCode: null,
 };
 
 export const homeReducer = (state = initialState, action) => {
@@ -81,6 +82,7 @@ export const homeReducer = (state = initialState, action) => {
       return {
         ...state,
         themeCurationInfoData: action.payload,
+        themeCurationInfoDataCode: action.retCode,
       };
     case types.GET_THEME_CURATION_DETAIL_INFO: {
       const productInfo = action.payload.themeInfo[0].productInfos;

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

@@ -86,13 +86,16 @@ export default function HotPicksPanel({ panelInfo, isOnTop, spotlightId }) {
   const dispatch = useDispatch();
 
   const scrollJob = useRef(new Job((func) => func(), 0));
-  const spotJob = useRef(new Job((func) => func(), 300));
+  const spotJob = useRef(new Job((func) => func(), 0));
 
   const { cursorVisible } = useSelector((state) => state.common.appStatus);
 
   const themeCurationInfoData = useSelector(
     (state) => state.home?.themeCurationInfoData?.themeInfos
   );
+  const themeCurationInfoDataRetCode = useSelector(
+    (state) => state.home?.themeCurationInfoDataCode
+  );
 
   const themeCurationInfoDataRef = usePrevious(themeCurationInfoData);
 
@@ -127,6 +130,7 @@ export default function HotPicksPanel({ panelInfo, isOnTop, spotlightId }) {
   const [components, setComponents] = useState([]);
   const [osVersion, setOsVersion] = useState(false);
   const [smsTpCode, setSmsTpCode] = useState(null);
+  const [loading, setLoading] = useState(true);
 
   const expsOrdRef = useRef(null);
   const shopByMobileLogRef = useRef(null);
@@ -146,13 +150,6 @@ export default function HotPicksPanel({ panelInfo, isOnTop, spotlightId }) {
           animate: false,
         });
       });
-      if (panelInfo) {
-        if (panelInfo?.currentSpot) {
-          Spotlight.focus(panelInfo?.currentSpot);
-        }
-      } else {
-        Spotlight.focus("hotpicks-data-spot" + (currentPage * 1 + 1));
-      }
     }
   };
   const themeCurationType = useCallback(
@@ -293,7 +290,6 @@ export default function HotPicksPanel({ panelInfo, isOnTop, spotlightId }) {
         themeCurationInfoData[currentPage];
       if (panelInfo?.linkTpCd) {
         //딥링크 탈때
-
         let matchData = themeCurationInfoData.filter(
           (item) =>
             item.curationId === panelInfo.curationId &&
@@ -502,6 +498,8 @@ export default function HotPicksPanel({ panelInfo, isOnTop, spotlightId }) {
     const spotJobValue = spotJob.current;
     const scrollJobValue = scrollJob.current;
     if (typeof window === "object" && scrollToRef.current) {
+      spotJobValue.stop();
+
       scrollJobValue.start(() => {
         scrollToRef.current({
           position: { y: currentPage * window.innerHeight },
@@ -509,31 +507,38 @@ export default function HotPicksPanel({ panelInfo, isOnTop, spotlightId }) {
         });
       });
 
-      spotJobValue.stop();
-
-      if (panelInfo?.currentSpot) {
-        spotJobValue.start(() => {
-          Spotlight.focus(panelInfo?.currentSpot);
-        });
-        dispatch(
-          updatePanel({
-            name: panel_names.HOT_PICKS_PANEL,
-            panelInfo: {
-              currentSpot: "",
-            },
-          })
-        );
-      } else {
-        spotJobValue.start(() => {
-          Spotlight.focus(panel_names.HOT_PICKS_PANEL);
-        });
+      if (themeCurationInfoDataRetCode === 0) {
+        setLoading(false);
+        if (panelInfo?.currentSpot) {
+          spotJobValue.start(() => {
+            Spotlight.focus(panelInfo?.currentSpot);
+          });
+          dispatch(
+            updatePanel({
+              name: panel_names.HOT_PICKS_PANEL,
+              panelInfo: {
+                currentSpot: "",
+              },
+            })
+          );
+        } else {
+          scrollJobValue.start(() => {
+            scrollToRef.current({
+              position: { y: currentPage * window.innerHeight },
+              animate: false,
+            });
+          });
+          spotJobValue.start(() => {
+            Spotlight.focus("hotpicks-data-spot" + (currentPage * 1 + 1));
+          });
+        }
       }
     }
     return () => {
       spotJobValue.stop();
       scrollJobValue.stop();
     };
-  }, [currentPage]);
+  }, [currentPage, themeCurationInfoDataRetCode]);
 
   const handleWheel = (e) => {
     let deltaY = e.deltaY;
@@ -684,11 +689,7 @@ export default function HotPicksPanel({ panelInfo, isOnTop, spotlightId }) {
   }, [couponDownloadRetCode, shopLinkInfo]);
 
   useEffect(() => {
-    spotJob.current.start(() => {
-      Spotlight.focus(panel_names.HOT_PICKS_PANEL);
-    });
     return () => {
-      spotJob.current.stop();
       dispatch(clearSMS);
       dispatch(clearGetProductCouponDownload());
     };