[SHOPTIME-2653] SHOPTIME-1933 Search / 검색된 아이템이 왼쪽이 아닌 오른쪽에 표시된 현상

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

@@ -139,6 +139,7 @@ export const types = {
   RESET_SEARCH: "RESET_SEARCH",
   GET_SEARCH_PROCESSED: "GET_SEARCH_PROCESSED",
   SET_SEARCH_INIT_PERFORMED: "SET_SEARCH_INIT_PERFORMED",
+  UPDATE_SEARCH_TIMESTAMP: "UPDATE_SEARCH_TIMESTAMP",
 
   // event actions
   GET_WELCOME_EVENT_INFO: "GET_WELCOME_EVENT_INFO",

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

@@ -10,10 +10,13 @@ export const getSearch =
   (params, startIndex = 1, key) =>
   (dispatch, getState) => {
     const { service, query, domain } = params;
-    if(startIndex === 1){
+    if (startIndex === 1) {
       lastSearchedParams = params;
     }
-    const maxResults = startIndex === 1 ? SEARCH_DATA_MAX_RESULTS_LIMIT*2: SEARCH_DATA_MAX_RESULTS_LIMIT;
+    const maxResults =
+      startIndex === 1
+        ? SEARCH_DATA_MAX_RESULTS_LIMIT * 2
+        : SEARCH_DATA_MAX_RESULTS_LIMIT;
 
     let currentKey = key;
     const onSuccess = (response) => {
@@ -27,12 +30,14 @@ export const getSearch =
           type: types.GET_SEARCH,
           payload: response.data,
         });
+
+        dispatch(updateSearchTimestamp());
       } else if (getSearchKey === currentKey) {
         dispatch({
           type: types.GET_SEARCH,
           payload: response.data,
           append: true,
-          startIndex: startIndex-1
+          startIndex: startIndex - 1,
         });
       }
     };
@@ -52,25 +57,39 @@ export const getSearch =
       onFail
     );
   };
-export const continueSearch =(key, startIndex=1) =>
-(dispatch, getState) => {
-  const searchDatas = getState().search.searchDatas;
-  const totalCount = getState().search.totalCount;
-  if(startIndex<=1 && !searchDatas[key] || searchDatas[key][startIndex-1] || !totalCount[key] || totalCount[key] < startIndex){
-    //ignore search
-    return;
-  }
-  dispatch(getSearch({...lastSearchedParams, domain: key}, startIndex, getSearchKey));
-};
+export const continueSearch =
+  (key, startIndex = 1) =>
+  (dispatch, getState) => {
+    const searchDatas = getState().search.searchDatas;
+    const totalCount = getState().search.totalCount;
+    if (
+      (startIndex <= 1 && !searchDatas[key]) ||
+      searchDatas[key][startIndex - 1] ||
+      !totalCount[key] ||
+      totalCount[key] < startIndex
+    ) {
+      //ignore search
+      return;
+    }
+    dispatch(
+      getSearch(
+        { ...lastSearchedParams, domain: key },
+        startIndex,
+        getSearchKey
+      )
+    );
+  };
 
 export const resetSearch = (status) => {
   getSearchKey = null;
-  return {type: types.RESET_SEARCH,
-    payload: status,
-  };
+  return { type: types.RESET_SEARCH, payload: status };
 };
 
 export const setInitPerformed = (performed) => ({
   type: types.SET_SEARCH_INIT_PERFORMED,
   payload: performed,
 });
+
+export const updateSearchTimestamp = () => ({
+  type: types.UPDATE_SEARCH_TIMESTAMP,
+});

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

@@ -5,6 +5,7 @@ const initialState = {
   totalCount: {},
   searchPerformed: false,
   initPerformed: false,
+  searchTimestamp: null,
 };
 
 export const searchReducer = (state = initialState, action) => {
@@ -14,11 +15,11 @@ export const searchReducer = (state = initialState, action) => {
 
       const updatedSearchDatas = action.append ? { ...state.searchDatas } : {};
       newResults.forEach(({ type, docs }) => {
-        if(action.append && updatedSearchDatas[type]){
-          for(let i=0; i< docs.length;i++){
-            updatedSearchDatas[type][action.startIndex+i] = docs[i];
+        if (action.append && updatedSearchDatas[type]) {
+          for (let i = 0; i < docs.length; i++) {
+            updatedSearchDatas[type][action.startIndex + i] = docs[i];
           }
-        }else{
+        } else {
           updatedSearchDatas[type] = docs;
         }
       });
@@ -47,6 +48,12 @@ export const searchReducer = (state = initialState, action) => {
         initPerformed: action.payload,
       };
 
+    case types.UPDATE_SEARCH_TIMESTAMP:
+      return {
+        ...state,
+        searchTimestamp: Date.now(),
+      };
+
     default:
       return state;
   }

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

@@ -56,6 +56,7 @@ export default function SearchResultsType({
   const { getScrollTo, scrollLeft } = useScrollTo();
   const searchAppendJob = useRef(new Job((func) => func(), 1000));
   const dataRef = usePrevious(data);
+  const searchTimestamp = useSelector((state) => state.search.searchTimestamp);
 
   useEffect(() => {
     if (data && !panelInfo.currentSpot) {
@@ -208,7 +209,7 @@ export default function SearchResultsType({
       <TVirtualGridList
         defaultSpotlightId={panelInfo.currentSpot}
         restorePositionX={panelInfo.x}
-        // key={searchQueryRef.current}
+        key={`${category}-${searchTimestamp}`}
         spotlightId={gridListId}
         cbScrollTo={getScrollTo}
         className={classNames(