[CategoryPanel] 탭레이아웃으로 진입 시, 초기화 되도록 변경

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

@@ -23,18 +23,6 @@ export default function ItemContents() {
     (state) => state.main.subCategoryData?.categoryItemInfos
   );
 
-  const handleItemClick = useCallback((itemData) => {
-    dispatch(
-      pushPanel({
-        name: panel_names.DETAIL_PANEL,
-        panelInfo: {
-          patnrId: itemData.patnrId,
-          prdtId: itemData.prdtId,
-        },
-      })
-    );
-  });
-
   const renderItem = useCallback(
     ({ index, ...rest }) => {
       const {
@@ -83,7 +71,7 @@ export default function ItemContents() {
     <>
       <div>
         <Container className={css.container}>
-          {itemListDatas && itemListDatas.length > 0 && (
+          {itemListDatas && itemListDatas.length > 0 ? (
             <TVirtualGridList
               spotlightId="categoryContentsBox"
               dataSize={itemListDatas.length}
@@ -91,10 +79,8 @@ export default function ItemContents() {
               itemWidth={324}
               itemHeight={438}
               spacing={18}
-              onClick={handleItemClick}
             />
-          )}
-          {itemListDatas && itemListDatas.length === 0 && (
+          ) : (
             <NoResultsCategoryItems />
           )}
         </Container>

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

@@ -19,23 +19,22 @@ export default function ShowContents() {
   return (
     <>
       {showContentDatas &&
-        topShowInfo &&
-        categoryShowInfos &&
-        categoryShowInfos.length > 0 && (
-          <>
-            <h1 className={css.topsTitle}>{topShowInfo.showNm}</h1>
-            <div className={css.topShowContainer}>
-              <SpottableVideoContainer className={css.videoContainer}>
-                <img src={topShowInfo.thumbnailUrl} alt={topShowInfo.showNm} />
-              </SpottableVideoContainer>
-              <ShowProductContents />
-            </div>
-            <div>
-              <ShowLists />
-            </div>
-          </>
-        )}
-      {categoryShowInfos && categoryShowInfos.length === 0 && (
+      topShowInfo &&
+      categoryShowInfos &&
+      categoryShowInfos.length > 0 ? (
+        <>
+          <h1 className={css.topsTitle}>{topShowInfo.showNm}</h1>
+          <div className={css.topShowContainer}>
+            <SpottableVideoContainer className={css.videoContainer}>
+              <img src={topShowInfo.thumbnailUrl} alt={topShowInfo.showNm} />
+            </SpottableVideoContainer>
+            <ShowProductContents />
+          </div>
+          <div>
+            <ShowLists />
+          </div>
+        </>
+      ) : (
         <NoResultsCategoryShows />
       )}
     </>

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

@@ -7,7 +7,6 @@ import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDeco
 import { pushPanel } from "../../../../../actions/panelActions";
 import TItemCard from "../../../../../components/TItemCard/TItemCard";
 import TVirtualGridList from "../../../../../components/TVirtualGridList/TVirtualGridList";
-import useScrollTo from "../../../../../hooks/useScrollTo";
 import { panel_names } from "../../../../../utils/Config";
 import css from "./ShowProductContents.module.less";
 
@@ -24,12 +23,6 @@ export default function ShowProductContents() {
   );
   const { productInfos } = showProductContentDatas || {};
 
-  const { getScrollTo, scrollLeft } = useScrollTo();
-
-  useEffect(() => {
-    scrollLeft();
-  }, [productInfos]);
-
   const renderItem = useCallback(
     ({ index, ...rest }) => {
       const { prdtId, prdtNm, imgUrl, priceInfo } = productInfos[index];
@@ -65,8 +58,6 @@ export default function ShowProductContents() {
     <Container className={css.container}>
       {productInfos && productInfos.length > 0 && (
         <TVirtualGridList
-          cbScrollTo={getScrollTo}
-          spotlightId="showProductBox"
           className={css.grid}
           itemRenderer={renderItem}
           dataSize={productInfos.length}

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

@@ -16,7 +16,6 @@ import THeader from "../../components/THeader/THeader";
 import TPanel from "../../components/TPanel/TPanel";
 import useScrollTo from "../../hooks/useScrollTo";
 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";
@@ -103,26 +102,23 @@ export default function CategoryPanel() {
 
   useEffect(() => {
     scrollTop({ animate: false });
-    setContainerLastFocusedElement(null, [SpotlightIds.TBODY]);
-    setContainerLastFocusedElement(null, ["showProductBox"]);
-    setContainerLastFocusedElement(null, ["categoryContentsBox"]);
     Spotlight.focus("tab-0");
   }, [panelInfos]);
 
-  useEffect(() => {
-    setContainerLastFocusedElement(null, ["showProductBox"]);
-  }, [dropDownTab]);
-
   const handleTopButtonClick = useCallback(() => {
     scrollTop();
     setContainerLastFocusedElement(null, ["categoryContentsBox"]);
     Spotlight.focus(`tab-${tab}`);
-  }, [scrollTop, tab]);
+  }, [scrollTop]);
+
+  const categoryKey = panelInfos
+    ? panelInfos.panelInfo.lgCatNm.replace(/ /g, "")
+    : null;
 
   return (
     <TPanel>
       <THeader title="Category" />
-      <TBody className={css.tBody} cbScrollTo={getScrollTo}>
+      <TBody className={css.tBody} cbScrollTo={getScrollTo} key={categoryKey}>
         <div className={css.paddingContainer}>
           {panelInfos && panelInfos.panelInfo && categoryDatas && (
             <SectionTitle

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

@@ -2,13 +2,11 @@
 @import "../../style/utils.module.less";
 
 .tBody {
-  width: 100%;
   height: calc(100% - 90px);
   background-color: @BG_COLOR_01;
 
   .paddingContainer {
     padding-left: 60px;
-    padding-bottom: 60px;
 
     .title {
       margin: 38px 0 33px 0;
@@ -27,4 +25,8 @@
       }
     }
   }
+
+  .tButton {
+    margin: 60px auto;
+  }
 }

com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategory.jsx

@@ -82,6 +82,7 @@ const SubCategory = () => {
         className={css.home}
         direction="horizontal"
         cbScrollTo={getScrollTo}
+        noScrollByWheel
       >
         {categoryItemInfos &&
           categoryItemInfos.map((item, index) => {

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

@@ -3,7 +3,6 @@ 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";