[CategoryPanel] scrollTop 및 카테고리 변경 시 scroll 위치 초기화, TopButton 적용

com.twin.app.shoptime/src/views/CategoryPanel/CategoryContents/ItemContents/ItemContents.jsx

@@ -24,6 +24,7 @@ export default function ItemContents() {
         <Container className={css.container}>
           {itemListDatas && itemListDatas.length > 0 && (
             <TVirtualGridList
+              spotlightId="categoryContentsBox"
               items={itemListDatas}
               dataSize={itemListDatas.length}
               itemWidth={324}

com.twin.app.shoptime/src/views/CategoryPanel/CategoryContents/ShowContents/ShowLists/ShowLists.jsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from "react";
+import React from "react";
 
 import { useSelector } from "react-redux";
 
@@ -22,6 +22,7 @@ export default function ShowLists() {
     <Container className={css.container}>
       {showListDatas && showListDatas.length > 0 && (
         <TVirtualGridList
+          spotlightId="categoryContentsBox"
           items={showListDatas}
           itemType={TYPES.videoShow}
           dataSize={showListDatas.length}

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

@@ -4,6 +4,7 @@ import { useDispatch, useSelector } from "react-redux";
 
 import Spotlight from "@enact/spotlight";
 import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
+import { setContainerLastFocusedElement } from "@enact/spotlight/src/container";
 
 import { getSubCategory } from "../../actions/mainActions";
 import SectionTitle from "../../components/SectionTitle/SectionTitle";
@@ -11,8 +12,12 @@ import TBody from "../../components/TBody/TBody";
 import TButtonTab, { LIST_TYPE } from "../../components/TButtonTab/TButtonTab";
 import TDropDown from "../../components/TDropDown/TDropDown";
 import THeader from "../../components/THeader/THeader";
+import TopButton from "../../components/TopButton/TopButton";
 import TPanel from "../../components/TPanel/TPanel";
+import useScrollTo from "../../hooks/useScrollTo";
+import useScrollToTop from "../../hooks/useScrollToTop";
 import { $L } from "../../utils/helperMethods";
+import { SpotlightIds } from "../../utils/SpotlightIds";
 import ItemContents from "./CategoryContents/ItemContents/ItemContents";
 import ShowContents from "./CategoryContents/ShowContents/ShowContents";
 import css from "./CategoryPanel.module.less";
@@ -38,6 +43,8 @@ export default function CategoryPanel() {
   const categoryDatas = useSelector((state) => state.main.subCategoryData);
   const panelInfos = useSelector((state) => state.panels.panels?.[0]);
 
+  const { getScrollTo, scrollTop } = useScrollTo();
+
   const { lgCatCd, lgCatNm, COUNT } = panelInfos.panelInfo || {};
   const {
     bannerInfos,
@@ -59,7 +66,9 @@ export default function CategoryPanel() {
     setDropDownTab(0);
 
     if (panelInfos?.panelInfo) {
-      dispatch(getSubCategory({ lgCatCd, filterType: "CAT00202" }));
+      dispatch(
+        getSubCategory({ lgCatCd, pageSize: "100", filterType: "CAT00202" }, 1)
+      );
     }
   }, [panelInfos, lgCatCd, dispatch]);
 
@@ -90,17 +99,24 @@ export default function CategoryPanel() {
     const filterType = dropDownTab === 0 ? "CAT00202" : "CAT00201";
     const tabType = tab === 0 ? "CAT00101" : "CAT00102";
 
-    dispatch(getSubCategory({ lgCatCd, tabType, filterType }));
+    dispatch(getSubCategory({ lgCatCd, pageSize: "100", tabType, filterType }));
   }, [dropDownTab, dispatch, tab]);
 
   useEffect(() => {
+    scrollTop({ animate: false });
+    setContainerLastFocusedElement(null, [SpotlightIds.TBODY]);
+    Spotlight.focus("tab-0");
+  }, [panelInfos]);
+
+  const handleTopButtonClick = useCallback(() => {
+    setContainerLastFocusedElement(null, ["categoryContentsBox"]);
     Spotlight.focus(`tab-${tab}`);
-  }, []);
+  }, [tab]);
 
   return (
     <TPanel>
       <THeader title="Category" />
-      <TBody className={css.tBody}>
+      <TBody className={css.tBody} cbScrollTo={getScrollTo}>
         <div className={css.paddingContainer}>
           {panelInfos && panelInfos.panelInfo && categoryDatas && (
             <SectionTitle
@@ -124,12 +140,14 @@ export default function CategoryPanel() {
                 onItemClick={handleItemClick}
                 selectedIndex={tab}
                 listType={LIST_TYPE.medium}
+                scrollTop={scrollTop}
               />
               <TDropDown
                 className={css.dropdown}
                 onSelect={handleSelectFilter}
                 selectedIndex={dropDownTab}
                 width="small"
+                scrollTop={scrollTop}
               >
                 {filterMethods}
               </TDropDown>
@@ -137,6 +155,7 @@ export default function CategoryPanel() {
           )}
           {tab === 0 && <ShowContents />}
           {tab === 1 && <ItemContents />}
+          <TopButton onTopButtonClick={handleTopButtonClick} />
         </div>
       </TBody>
     </TPanel>

com.twin.app.shoptime/src/views/CategoryPanel/CategoryPanel.module.less

@@ -15,7 +15,7 @@
 
     .tabContainer {
       width: fit-content;
-      height: fit-content;
+      height: 100%;
       position: relative;
 
       .dropdown {