[CategoryPanel] 포커싱 이동 안 하는 버그 수정

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

@@ -23,6 +23,18 @@ 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 {
@@ -71,7 +83,7 @@ export default function ItemContents() {
     <>
       <div>
         <Container className={css.container}>
-          {itemListDatas && itemListDatas.length > 0 ? (
+          {itemListDatas && itemListDatas.length > 0 && (
             <TVirtualGridList
               spotlightId="categoryContentsBox"
               dataSize={itemListDatas.length}
@@ -79,8 +91,10 @@ 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,22 +19,23 @@ 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>
-        </>
-      ) : (
+        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 && (
         <NoResultsCategoryShows />
       )}
     </>

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

@@ -7,6 +7,7 @@ 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";
 
@@ -23,6 +24,12 @@ 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];
@@ -58,6 +65,8 @@ 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,6 +16,7 @@ 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";
@@ -102,23 +103,26 @@ 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]);
-
-  const categoryKey = panelInfos
-    ? panelInfos.panelInfo.lgCatNm.replace(/ /g, "")
-    : null;
+  }, [scrollTop, tab]);
 
   return (
     <TPanel>
       <THeader title="Category" />
-      <TBody className={css.tBody} cbScrollTo={getScrollTo} key={categoryKey}>
+      <TBody className={css.tBody} cbScrollTo={getScrollTo}>
         <div className={css.paddingContainer}>
           {panelInfos && panelInfos.panelInfo && categoryDatas && (
             <SectionTitle
@@ -157,13 +161,12 @@ export default function CategoryPanel() {
           )}
           {tab === 0 && <ShowContents />}
           {tab === 1 && <ItemContents />}
+          <TButton
+            type={TYPES.topButton}
+            size={null}
+            onClick={handleTopButtonClick}
+          />
         </div>
-        <TButton
-          type={TYPES.topButton}
-          size={null}
-          onClick={handleTopButtonClick}
-          className={css.tButton}
-        />
       </TBody>
     </TPanel>
   );

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

@@ -2,11 +2,13 @@
 @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;
@@ -25,8 +27,4 @@
       }
     }
   }
-
-  .tButton {
-    margin: 60px auto;
-  }
 }