[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,19 +30,48 @@ 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;
+
+// 서브카테고리 조회 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;
 
     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) => {
@@ -56,12 +83,12 @@ export const getSubCategory = (params, key) => (dispatch, getState) => {
       getState,
       "get",
       URLS.GET_SUB_CATEGORY,
-    { lgCatCd, patnrIdList, tabType, pageSize, pageNo, filterType },
+      { lgCatCd, patnrIdList, pageSize, pageNo, tabType, filterType },
       {},
       onSuccess,
       onFail
     );
-};
+  };
 
 // TOP20 영상 목록 조회 IF-LGSP-069
 export const getTop20Show = () => (dispatch, getState) => {

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:
+    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 {