[mainActions, mainReducer] 백그라운드 데이터 페칭 로직 적용

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

@@ -1,10 +1,8 @@
-import { URLS } from '../api/apiConfig';
-import { TAxios } from '../api/TAxios';
-import { CATEGORY_DATA_MAX_RESULTS_LIMIT } from '../utils/Config';
-import { types } from './actionTypes';
-
-// 서브카테고리 조회 IF-LGSP-051
-let getSubCategoryKey = null;
+import { URLS } from "../api/apiConfig";
+import { TAxios } from "../api/TAxios";
+import { CATEGORY_DATA_MAX_RESULTS_LIMIT } from "../utils/Config";
+import * as HelperMethods from "../utils/helperMethods";
+import { types } from "./actionTypes";
 
 export const getMainCategoryDetail = (props) => (dispatch, getState) => {
   const { patnrId, prdtId } = props;
@@ -32,37 +30,66 @@ export const getMainCategoryDetail = (props) => (dispatch, getState) => {
     onFail
   );
 };
-export const getSubCategory = (params, key) => (dispatch, getState) => {
-  const { lgCatCd, patnrIdList, tabType, pageSize, pageNo, filterType } =
-    params;
-  const maxResults = CATEGORY_DATA_MAX_RESULTS_LIMIT;
 
-  let currentKey = key;
-  const onSuccess = (response) => {
-    console.log("getSubCategory onSuccess ", response.data);
+// 서브카테고리 조회 IF-LGSP-051
+let getSubCategoryKey = null;
+export const getSubCategory =
+  (params, pageNo = 1, update = true, key) =>
+  (dispatch, getState) => {
+    const { lgCatCd, patnrIdList, tabType, filterType } = params;
+    let pageSize = params.pageSize || CATEGORY_DATA_MAX_RESULTS_LIMIT;
 
-    dispatch({
-      type: types.GET_SUB_CATEGORY,
-      payload: response.data.data,
-    });
+    let currentKey = key;
+    const onSuccess = (response) => {
+      console.log("getSubCategory onSuccess ", response.data);
+
+      if (pageNo === 1) {
+        getSubCategoryKey = new Date();
+        currentKey = getSubCategoryKey;
+
+        dispatch({
+          type: types.GET_SUB_CATEGORY,
+          payload: response.data.data,
+        });
+      } else if (getSubCategoryKey === currentKey) {
+        dispatch({
+          type: types.GET_SUB_CATEGORY,
+          payload: response.data.data,
+          append: true,
+        });
+      }
+
+      const totalInfo =
+        response.data.data.categoryShowInfos ||
+        response.data.data.categoryItemInfos;
+
+      const totalPage = Math.ceil(totalInfo[0].total / pageSize);
+
+      if (getSubCategoryKey === currentKey && pageNo < totalPage && update) {
+        // TODO: 지연 시간 주는 게 아니라, 데이터 받아오는 양을 늘려야 함, 로직 수정 필요
+
+        HelperMethods.wait(500).then(() => {
+          dispatch(getSubCategory(params, pageNo + 1, true, currentKey));
+        });
+      }
+    };
+
+    const onFail = (error) => {
+      console.error("getSubCategory onFail", error);
+    };
+
+    TAxios(
+      dispatch,
+      getState,
+      "get",
+      URLS.GET_SUB_CATEGORY,
+      { lgCatCd, patnrIdList, pageSize, pageNo, tabType, filterType },
+      {},
+      onSuccess,
+      onFail
+    );
   };
 
-  const onFail = (error) => {
-    console.error("getSubCategory onFail", error);
-  };
-
-  TAxios(
-    dispatch,
-    getState,
-    "get",
-    URLS.GET_SUB_CATEGORY,
-    { lgCatCd, patnrIdList, tabType, pageSize, pageNo, filterType },
-    {},
-    onSuccess,
-    onFail
-  );
-};
-
 // TOP20 영상 목록 조회 IF-LGSP-069
 export const getTop20Show = () => (dispatch, getState) => {
   const onSuccess = (response) => {

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

@@ -8,11 +8,30 @@ const initialState = {
 
 export const mainReducer = (state = initialState, action) => {
   switch (action.type) {
-    case types.GET_SUB_CATEGORY:
-      return {
-        ...state,
-        subCategoryData: action.payload,
-      };
+    case types.GET_SUB_CATEGORY: {
+      const dataType = action.payload.categoryShowInfos
+        ? "categoryShowInfos"
+        : "categoryItemInfos";
+      const newResults = action.payload[dataType];
+
+      if (action.append) {
+        const existingData = state.subCategoryData[dataType] || [];
+        const updatedData = existingData.concat(newResults);
+
+        return {
+          ...state,
+          subCategoryData: {
+            ...state.subCategoryData,
+            [dataType]: updatedData,
+          },
+        };
+      } else {
+        return {
+          ...state,
+          subCategoryData: action.payload,
+        };
+      }
+    }
 
     case types.GET_TOP_20_SHOW:
       return {