[SearchPanel] 검색 후 포커싱 초기화 및 스크롤 초기화 변경

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

@@ -50,12 +50,6 @@ export default function SearchPanel() {
     dispatch(resetSearch());
   }, [dispatch]);
 
-  useEffect(() => {
-    setContainerLastFocusedElement(null, ["searchResultsItemBox"]);
-    setContainerLastFocusedElement(null, ["searchResultsShowBox"]);
-    setContainerLastFocusedElement(null, ["searchResultsThemeBox"]);
-  }, [searchDatas]);
-
   useEffect(() => {
     if (recommandedKeywords) {
       const startIndex = (currentPage - 1) * ITEMS_PER_PAGE;
@@ -96,6 +90,10 @@ export default function SearchPanel() {
       } else {
         dispatch(resetSearch());
       }
+
+      setContainerLastFocusedElement(null, ["searchResultsItemBox"]);
+      setContainerLastFocusedElement(null, ["searchResultsShowBox"]);
+      setContainerLastFocusedElement(null, ["searchResultsThemeBox"]);
     },
     [dispatch, searchQuery]
   );

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

@@ -1,9 +1,10 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 
 import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
 
 import TVirtualGridList from "../../../../components/TVirtualGridList/TVirtualGridList";
 import useScrollTo from "../../../../hooks/useScrollTo";
+import { SEARCH_DATA_MAX_RESULTS_LIMIT } from "../../../../utils/Config";
 import SearchItemCard from "./SearchItemCard/SearchItemCard";
 import css from "./SearchItemResults.module.less";
 
@@ -13,10 +14,14 @@ const Container = SpotlightContainerDecorator(
 );
 
 export default function SearchItemResults({ itemDatas, itemCount, ...rest }) {
+  delete rest.query;
+
   const { getScrollTo, scrollLeft } = useScrollTo();
 
   useEffect(() => {
-    scrollLeft();
+    if (itemDatas.length <= SEARCH_DATA_MAX_RESULTS_LIMIT) {
+      scrollLeft();
+    }
   }, [itemDatas]);
 
   return (

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

@@ -4,6 +4,7 @@ import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDeco
 
 import TVirtualGridList from "../../../../components/TVirtualGridList/TVirtualGridList";
 import useScrollTo from "../../../../hooks/useScrollTo";
+import { SEARCH_DATA_MAX_RESULTS_LIMIT } from "../../../../utils/Config";
 import SearchShowCard from "./SearchShowCard/SearchShowCard";
 import css from "./SearchShowResults.module.less";
 
@@ -13,10 +14,14 @@ const Container = SpotlightContainerDecorator(
 );
 
 export default function SearchShowResults({ showDatas, showCount, ...rest }) {
+  delete rest.query;
+
   const { getScrollTo, scrollLeft } = useScrollTo();
 
   useEffect(() => {
-    scrollLeft();
+    if (showDatas.length <= SEARCH_DATA_MAX_RESULTS_LIMIT) {
+      scrollLeft();
+    }
   }, [showDatas]);
 
   return (
@@ -24,8 +29,8 @@ export default function SearchShowResults({ showDatas, showCount, ...rest }) {
       {showDatas && (
         <TVirtualGridList
           spotlightId="searchResultsShowBox"
-          cbScrollTo={getScrollTo}
           className={css.grid}
+          cbScrollTo={getScrollTo}
           items={showDatas}
           dataSize={showDatas.length}
           direction="horizontal"

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

@@ -4,6 +4,7 @@ import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDeco
 
 import TVirtualGridList from "../../../../components/TVirtualGridList/TVirtualGridList";
 import useScrollTo from "../../../../hooks/useScrollTo";
+import { SEARCH_DATA_MAX_RESULTS_LIMIT } from "../../../../utils/Config";
 import SearchThemeCard from "./SearchThemeCard/SearchThemeCard";
 import css from "./SearchThemeResults.module.less";
 
@@ -17,10 +18,14 @@ export default function SearchThemeResults({
   themeCount,
   ...rest
 }) {
+  delete rest.query;
+
   const { getScrollTo, scrollLeft } = useScrollTo();
 
   useEffect(() => {
-    scrollLeft();
+    if (themeDatas.length <= SEARCH_DATA_MAX_RESULTS_LIMIT) {
+      scrollLeft();
+    }
   }, [themeDatas]);
 
   return (
@@ -28,9 +33,9 @@ export default function SearchThemeResults({
       {themeDatas && (
         <TVirtualGridList
           spotlightId="searchResultsThemeBox"
-          cbScrollTo={getScrollTo}
           className={css.grid}
           items={themeDatas}
+          cbScrollTo={getScrollTo}
           dataSize={themeDatas.length}
           direction="horizontal"
           itemCard={SearchThemeCard}