searchPanel 검색 후 ui 업데이트 로직 변경 / reducer, action 함수 수정

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

@@ -1,51 +1,71 @@
 import { URLS } from "../api/apiConfig";
 import { TAxios } from "../api/TAxios";
+import { SEARCH_DATA_MAX_RESULTS_LIMIT } from "../utils/Config";
 import { types } from "./actionTypes";
 
 // Search 통합검색 (IBS) 데이터 조회 IF-LGSP-090
-export const getSearch = (params) => (dispatch, getState) => {
-  const { service, query, startIndex, maxResults, domain } = params;
+let getSearchKey = null;
+export const getSearch =
+  (params, startIndex = 1, key) =>
+  (dispatch, getState) => {
+    const { service, query, domain } = params;
+    const maxResults = SEARCH_DATA_MAX_RESULTS_LIMIT;
 
-  const onSuccess = (response) => {
-    console.log("getSearch onSuccess: ", response.data);
+    let currentKey = key;
+    const onSuccess = (response) => {
+      console.log("getSearch onSuccess: ", response.data);
 
-    dispatch({
-      type: types.GET_SEARCH,
-      payload: response.data,
-    });
+      if (startIndex === 1) {
+        getSearchKey = new Date();
+        currentKey = getSearchKey;
 
-    const processedData = response.data.data.result.results.reduce(
-      (acc, current) => {
-        acc.data[current.type] = current.docs;
-        acc.totalCount[current.type] = current.total_count;
+        dispatch({
+          type: types.GET_SEARCH,
+          payload: response.data,
+        });
+      } else if (getSearchKey === currentKey) {
+        dispatch({
+          type: types.GET_SEARCH,
+          payload: response.data,
+          append: true,
+        });
+      }
 
-        return acc;
-      },
-      { data: {}, totalCount: {} }
+      const stateBeforeLoop = getState();
+      const nextStartIndex = response.data.data.result.results.reduce(
+        (acc, category) => {
+          const { type, total_count } = category;
+          const fetchedCount =
+            stateBeforeLoop.search.searchDatas[type]?.length ||
+            0 + category.docs.length;
+          const remainingData = total_count - fetchedCount;
+
+          return remainingData > 0 ? Math.max(acc, fetchedCount + 1) : acc;
+        },
+        startIndex
+      );
+
+      if (nextStartIndex > startIndex) {
+        dispatch(getSearch(params, nextStartIndex, currentKey));
+      }
+    };
+
+    const onFail = (error) => {
+      console.error("getSearch onFail: ", error);
+    };
+
+    TAxios(
+      dispatch,
+      getState,
+      "post",
+      URLS.GET_SEARCH,
+      {},
+      { service, query, startIndex, maxResults, domain },
+      onSuccess,
+      onFail
     );
-
-    dispatch({
-      type: types.GET_SEARCH_PROCESSED,
-      payload: processedData,
-    });
   };
 
-  const onFail = (error) => {
-    console.error("getSearch onFail: ", error);
-  };
-
-  TAxios(
-    dispatch,
-    getState,
-    "post",
-    URLS.GET_SEARCH,
-    {},
-    { service, query, startIndex, maxResults, domain },
-    onSuccess,
-    onFail
-  );
-};
-
 export const resetSearch = (status) => ({
   type: types.RESET_SEARCH,
   payload: status,

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

@@ -2,28 +2,35 @@ import { types } from "../actions/actionTypes";
 
 const initialState = {
   searchDatas: {},
-  processedDatas: {
-    data: {},
-    totalCount: {},
-  },
+  totalCount: {},
   searchPerformed: false,
 };
 
 export const searchReducer = (state = initialState, action) => {
   switch (action.type) {
-    case types.GET_SEARCH:
-      return {
-        ...state,
-        searchDatas: action.payload,
-        searchPerformed: true,
-      };
+    case types.GET_SEARCH: {
+      const newResults = action.payload.data.result.results;
+
+      const updatedSearchDatas = action.append ? { ...state.searchDatas } : {};
+      newResults.forEach(({ type, docs }) => {
+        updatedSearchDatas[type] =
+          action.append && updatedSearchDatas[type]
+            ? updatedSearchDatas[type].concat(docs)
+            : docs;
+      });
+
+      const updatedTotalCount = action.append ? { ...state.totalCount } : {};
+      newResults.forEach(({ type, total_count }) => {
+        updatedTotalCount[type] = total_count;
+      });
 
-    case types.GET_SEARCH_PROCESSED:
       return {
         ...state,
-        processedDatas: action.payload,
+        searchDatas: updatedSearchDatas,
+        totalCount: updatedTotalCount,
         searchPerformed: true,
       };
+    }
 
     case types.RESET_SEARCH:
       return {

com.twin.app.shoptime/src/utils/Config.js

@@ -29,3 +29,6 @@ export const panel_names = {
 
 //button
 export const TBUTTON_PRESS_DELAY = 100;
+
+//search data
+export const SEARCH_DATA_MAX_RESULTS_LIMIT = 30;

com.twin.app.shoptime/src/views/SearchPanel/NoSearchResults/NoSearchResults.jsx

@@ -17,7 +17,9 @@ export default function NoSearchResults() {
   return (
     <div className={css.container}>
       <div className={css.info}>
-        <img src={NoSearchResultsImage} alt="No Datas" />
+        <div className={css.imageBox}>
+          <img src={NoSearchResultsImage} alt="No Datas" />
+        </div>
         <p>{$L("SORRY, NO RESULTS MATCHING YOUR SEARCH")}</p>
       </div>
       <div className={css.bestSellerWrap}>

com.twin.app.shoptime/src/views/SearchPanel/NoSearchResults/NoSearchResults.module.less

@@ -7,6 +7,17 @@
   .info {
     text-align: center;
 
+    .imageBox {
+      .size(@w: 360px, @h: 180px);
+      margin: 0 auto;
+      background-size: cover;
+
+      > img {
+        object-fit: cover;
+        .size(@w: 100%, @h: 100%);
+      }
+    }
+
     > p {
       .font (@fontFamily: @baseFontBold, @fontSize: 36px);
       color: #a3a3a3;

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

@@ -21,19 +21,20 @@ export default function SearchPanel() {
   const recommandedKeywords = useSelector(
     (state) => state.myPage.recommandedKeywordData.data?.keywords
   );
-  const searchDatas = useSelector(
-    (state) => state.search.searchDatas.data?.result.results
+  const { searchDatas: searchDatas, totalCount: totalCount } = useSelector(
+    (state) => state.search
   );
   const {
     theme: themeDatas,
     show: showDatas,
     item: itemDatas,
-  } = useSelector((state) => state.search.processedDatas.data);
+  } = searchDatas || {};
   const {
     theme: themeCount,
     show: showCount,
     item: itemCount,
-  } = useSelector((state) => state.search.processedDatas.totalCount);
+  } = totalCount || {};
+
   const searchPerformed = useSelector((state) => state.search.searchPerformed);
 
   const [currentPage, setCurrentPage] = useState(1);
@@ -80,8 +81,6 @@ export default function SearchPanel() {
           getSearch({
             service: "com.lgshop.app",
             query: query,
-            startIndex: 1,
-            maxResults: 10,
             domain: "theme,show,item",
           })
         );
@@ -119,7 +118,7 @@ export default function SearchPanel() {
           onIconClick={() => handleSearchSubmit(searchQuery)}
         />
         {searchPerformed ? (
-          searchDatas && searchDatas.length > 0 ? (
+          (searchDatas && themeDatas) || showDatas || itemDatas ? (
             <SearchResults
               themeDatas={themeDatas}
               itemDatas={itemDatas}

com.twin.app.shoptime/src/views/SearchPanel/SearchResults/SearchItemResults/SearchItemResults.jsx

@@ -46,7 +46,6 @@ export default function SearchItemResults({ itemDatas, itemCount, ...rest }) {
           scrollMode="translate"
           horizontalScrollbar="hidden"
           noScrollByWheel
-          // onScrollStop={handleScrollStop}
         />
       )}
     </Container>