[OnSalePanel] 버그 수정, 불필요 lib 삭제

Detail Notes :

1. 초기 진입시 focus 문제 수정
2. 마우스로 nav 클릭 후 최상단에서 키보드로 포커스 이동 시 이전 포커스로 이동하는 문제 수정
3. 불필요 SpotlightContainerDecorator 삭제
4. 일부 SpottableComponent, spotlightId 수정

com.twin.app.shoptime/src/views/OnSalePanel/CategoryNav/CategoryNav.jsx

@@ -1,9 +1,10 @@
 import React, { useCallback } from "react";
 
 import { VirtualGridList } from "@enact/sandstone/VirtualList";
-import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
+import { setContainerLastFocusedElement } from "@enact/spotlight/src/container";
 
 import { scaleH, scaleW } from "../../../utils/helperMethods";
+import { SpotlightIds } from "../../../utils/SpotlightIds";
 import CategoryNavItem from "../CategoryNav/CategoryNavItem/CategoryNavItem";
 import css from "./CategoryNav.module.less";
 
@@ -13,11 +14,6 @@ const LIST_ITEM_CONF = {
   SAPCING: 30,
 };
 
-const Container = SpotlightContainerDecorator(
-  { leaveFor: { right: "" } },
-  "nav"
-);
-
 export default function CategoryNav({
   categoryInfos,
   currentCategoryCode,
@@ -28,9 +24,10 @@ export default function CategoryNav({
   const handleCategoryNavClick = useCallback(
     (categoryCode) => {
       if (currentCategoryCode === categoryCode) {
-        return;
+        return scrollTop();
       }
 
+      setContainerLastFocusedElement(null, [`${SpotlightIds.TBODY}`]);
       setCurrentCategoryCode(categoryCode);
       scrollTop();
     },
@@ -53,7 +50,7 @@ export default function CategoryNav({
   );
 
   return (
-    <Container className={css.container} {...rest}>
+    <nav className={css.container} {...rest}>
       {categoryInfos && categoryInfos.length > 0 && (
         <VirtualGridList
           className={css.virtualGridList}
@@ -70,6 +67,6 @@ export default function CategoryNav({
           spacing={scaleW(LIST_ITEM_CONF.SAPCING)}
         />
       )}
-    </Container>
+    </nav>
   );
 }

com.twin.app.shoptime/src/views/OnSalePanel/CategoryNav/CategoryNavItem/CategoryNavItem.jsx

@@ -33,8 +33,9 @@ export default memo(function CategoryNavItem({
         css.category,
         categoryCode === currentCategoryCode && css.selected
       )}
-      key={categoryCode}
+      key={"categoryInfo-" + index}
       onClick={() => handleClick(categoryCode)}
+      spotlightId={"spotlightId-" + currentCategoryCode}
       {...rest}
     >
       <div>

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

@@ -2,12 +2,14 @@ import React, { useEffect, useState } from "react";
 
 import { useDispatch, useSelector } from "react-redux";
 
+import Spotlight from "@enact/spotlight";
+
 import { getOnSaleInfo } from "../../actions/onSaleActions";
 import TBody from "../../components/TBody/TBody";
+import { removeDotAndColon } from "../../components/TItemCard/TItemCard";
 import TopButton from "../../components/TopButton/TopButton";
 import TPanel from "../../components/TPanel/TPanel";
 import useScrollTo from "../../hooks/useScrollTo";
-import { SpotlightIds } from "../../utils/SpotlightIds";
 import CategoryNav from "../OnSalePanel/CategoryNav/CategoryNav";
 import css from "./OnSalePanel.module.less";
 import OnSaleProductList from "./OnSaleProductList/OnSaleProductList";
@@ -23,12 +25,12 @@ export default function OnSalePanel() {
   const saleInfos = useSelector((state) => state.onSale.onSaleData.saleInfos);
 
   const [currentCategoryCode, setCurrentCategoryCode] = useState();
+  const [initialLoad, setInitialLoad] = useState(true);
   const [targetId, setTargetId] = useState();
 
   useEffect(() => {
     if (categoryInfos && !currentCategoryCode) {
-      const initialLgCatCd = categoryInfos[0].lgCatCd;
-      setCurrentCategoryCode(initialLgCatCd);
+      setCurrentCategoryCode(categoryInfos[0].lgCatCd);
     }
   }, []);
 
@@ -42,11 +44,18 @@ export default function OnSalePanel() {
 
   useEffect(() => {
     if (saleInfos) {
-      const id = saleInfos[0].saleProductInfos[0].prdtId;
-      setTargetId(SpotlightIds.TITEM_CARD + id);
+      const productId = saleInfos[0].saleProductInfos[0].prdtId;
+      setTargetId("spotlightId-" + removeDotAndColon(productId));
     }
   }, [dispatch, saleInfos]);
 
+  useEffect(() => {
+    if (currentCategoryCode && initialLoad) {
+      Spotlight.focus("spotlightId-" + currentCategoryCode);
+      setInitialLoad(false);
+    }
+  }, [currentCategoryCode, initialLoad]);
+
   return (
     <TPanel className={css.container}>
       <CategoryNav
@@ -57,9 +66,9 @@ export default function OnSalePanel() {
       />
       <TBody className={css.tBody} cbScrollTo={getScrollTo}>
         {saleInfos &&
-          saleInfos.map(({ saleNm, saleProductInfos }) => (
+          saleInfos.map(({ saleNm, saleProductInfos }, index) => (
             <OnSaleProductList
-              key={saleNm}
+              key={"saleInfo-" + index}
               saleName={saleNm}
               saleProductInfos={saleProductInfos}
             />

com.twin.app.shoptime/src/views/OnSalePanel/OnSaleProductList/OnSaleProductList.jsx

@@ -1,7 +1,6 @@
 import React, { useCallback } from "react";
 
 import { VirtualGridList } from "@enact/sandstone/VirtualList";
-import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
 
 import SectionTitle from "../../../components/SectionTitle/SectionTitle";
 import { scaleH, scaleW } from "../../../utils/helperMethods";
@@ -14,11 +13,6 @@ const LIST_ITEM_CONF = {
   SAPCING: 18,
 };
 
-const Container = SpotlightContainerDecorator(
-  { leaveFor: { right: "" } },
-  "div"
-);
-
 export default function OnSaleProductList({
   saleName,
   saleProductInfos,
@@ -38,7 +32,7 @@ export default function OnSaleProductList({
   );
 
   return (
-    <Container className={css.container} {...rest}>
+    <div className={css.container} {...rest}>
       {saleName && <SectionTitle title={saleName} />}
 
       {saleProductInfos && (
@@ -57,6 +51,6 @@ export default function OnSaleProductList({
           spacing={scaleW(LIST_ITEM_CONF.SAPCING)}
         />
       )}
-    </Container>
+    </div>
   );
 }