[SearchPanel] TVirtualGridList 사용 시 UI 깨던 현상 수정,

[SearchReducer]
actionTypes, searchActions 에 initPerformed 추가

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

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

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

@@ -70,3 +70,8 @@ export const resetSearch = (status) => ({
   type: types.RESET_SEARCH,
   payload: status,
 });
+
+export const setInitPerformed = (performed) => ({
+  type: types.SET_SEARCH_INIT_PERFORMED,
+  payload: performed,
+});

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

@@ -4,6 +4,7 @@ const initialState = {
   searchDatas: {},
   totalCount: {},
   searchPerformed: false,
+  initPerformed: false,
 };
 
 export const searchReducer = (state = initialState, action) => {
@@ -29,6 +30,7 @@ export const searchReducer = (state = initialState, action) => {
         searchDatas: updatedSearchDatas,
         totalCount: updatedTotalCount,
         searchPerformed: true,
+        initPerformed: !action.append,
       };
     }
 
@@ -37,6 +39,12 @@ export const searchReducer = (state = initialState, action) => {
         ...initialState,
       };
 
+    case types.SET_SEARCH_INIT_PERFORMED:
+      return {
+        ...state,
+        initPerformed: action.payload,
+      };
+
     default:
       return state;
   }

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

@@ -1,13 +1,13 @@
 import React, { useCallback, useEffect } from "react";
 
 import classNames from "classnames";
+import { useSelector } from "react-redux";
 
 import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
 
 import SectionTitle from "../../../components/SectionTitle/SectionTitle";
 import TVirtualGridList from "../../../components/TVirtualGridList/TVirtualGridList";
 import useScrollTo from "../../../hooks/useScrollTo";
-import { SEARCH_DATA_MAX_RESULTS_LIMIT } from "../../../utils/Config";
 import SearchItemCard from "./SearchCard/SearchItemCard";
 import SearchShowCard from "./SearchCard/SearchShowCard";
 import SearchThemeCard from "./SearchCard/SearchThemeCard";
@@ -40,12 +40,13 @@ const ITEM_SIZE = {
 
 export default function SearchResultsType({ title, data, count, category }) {
   const { getScrollTo, scrollLeft } = useScrollTo();
+  const initPerformed = useSelector((state) => state.search.initPerformed);
 
   useEffect(() => {
-    if (data.length <= SEARCH_DATA_MAX_RESULTS_LIMIT) {
+    if (initPerformed) {
       scrollLeft();
     }
-  }, [data]);
+  }, [initPerformed]);
 
   const renderItem = useCallback(
     ({ index, ...rest }) => {
@@ -61,7 +62,14 @@ export default function SearchResultsType({ title, data, count, category }) {
             title,
           } = data[index];
 
-          return <SearchThemeCard title={title} keyword={keyword} {...rest} />;
+          return (
+            <SearchThemeCard
+              key={contentId}
+              title={title}
+              keyword={keyword}
+              {...rest}
+            />
+          );
         }
 
         case "show": {
@@ -79,6 +87,7 @@ export default function SearchResultsType({ title, data, count, category }) {
 
           return (
             <SearchShowCard
+              key={contentId}
               liveFlag={liveFlag}
               thumbnail={thumbnail}
               title={title}
@@ -102,6 +111,7 @@ export default function SearchResultsType({ title, data, count, category }) {
 
           return (
             <SearchItemCard
+              key={contentId}
               thumbnail={thumbnail}
               title={title}
               price={price}
@@ -127,6 +137,7 @@ export default function SearchResultsType({ title, data, count, category }) {
         className={classNames(css.container, category && css[category])}
       >
         <TVirtualGridList
+          key={title}
           cbScrollTo={getScrollTo}
           className={css.grid}
           dataSize={data.length}