[SearchPanel] 검색어 입력 후 포커싱 이동 시 스크롤 위치 초기화

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

@@ -3,6 +3,7 @@ import React, { useCallback, useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 
 import Spotlight from "@enact/spotlight";
+import { setContainerLastFocusedElement } from "@enact/spotlight/src/container";
 
 import { getSearch, resetSearch } from "../../actions/searchActions";
 import TBody from "../../components/TBody/TBody";
@@ -49,6 +50,12 @@ 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;

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

@@ -1,8 +1,9 @@
-import React from "react";
+import React, { useEffect } from "react";
 
 import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
 
 import TVirtualGridList from "../../../../components/TVirtualGridList/TVirtualGridList";
+import useScrollTo from "../../../../hooks/useScrollTo";
 import SearchItemCard from "./SearchItemCard/SearchItemCard";
 import css from "./SearchItemResults.module.less";
 
@@ -12,10 +13,18 @@ const Container = SpotlightContainerDecorator(
 );
 
 export default function SearchItemResults({ itemDatas, itemCount, ...rest }) {
+  const { getScrollTo, scrollLeft } = useScrollTo();
+
+  useEffect(() => {
+    scrollLeft();
+  }, [itemDatas]);
+
   return (
     <Container className={css.container}>
       {itemDatas && (
         <TVirtualGridList
+          spotlightId="searchResultsItemBox"
+          cbScrollTo={getScrollTo}
           className={css.grid}
           items={itemDatas}
           dataSize={itemDatas.length}

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

@@ -1,8 +1,9 @@
-import React from "react";
+import React, { useEffect } from "react";
 
 import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
 
 import TVirtualGridList from "../../../../components/TVirtualGridList/TVirtualGridList";
+import useScrollTo from "../../../../hooks/useScrollTo";
 import SearchShowCard from "./SearchShowCard/SearchShowCard";
 import css from "./SearchShowResults.module.less";
 
@@ -12,10 +13,18 @@ const Container = SpotlightContainerDecorator(
 );
 
 export default function SearchShowResults({ showDatas, showCount, ...rest }) {
+  const { getScrollTo, scrollLeft } = useScrollTo();
+
+  useEffect(() => {
+    scrollLeft();
+  }, [showDatas]);
+
   return (
     <Container className={css.container}>
       {showDatas && (
         <TVirtualGridList
+          spotlightId="searchResultsShowBox"
+          cbScrollTo={getScrollTo}
           className={css.grid}
           items={showDatas}
           dataSize={showDatas.length}

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

@@ -1,8 +1,9 @@
-import React from "react";
+import React, { useEffect } from "react";
 
 import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
 
 import TVirtualGridList from "../../../../components/TVirtualGridList/TVirtualGridList";
+import useScrollTo from "../../../../hooks/useScrollTo";
 import SearchThemeCard from "./SearchThemeCard/SearchThemeCard";
 import css from "./SearchThemeResults.module.less";
 
@@ -16,10 +17,18 @@ export default function SearchThemeResults({
   themeCount,
   ...rest
 }) {
+  const { getScrollTo, scrollLeft } = useScrollTo();
+
+  useEffect(() => {
+    scrollLeft();
+  }, [themeDatas]);
+
   return (
     <Container className={css.container}>
       {themeDatas && (
         <TVirtualGridList
+          spotlightId="searchResultsThemeBox"
+          cbScrollTo={getScrollTo}
           className={css.grid}
           items={themeDatas}
           dataSize={themeDatas.length}