[onSalePanel] useScrollTo hook 적용 및 SpotlightContainerDecorator 수정

Detail Notes :

1. OnSalePanel.jsx, useScrollTo 적용
2. CategoryNav.jsx, scrollTop props 추가
3. CategoryNav.jsx, OnSaleProductList.jsx, SpotlightContainerDecorator enterTo 삭제

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

@@ -14,13 +14,14 @@ const LIST_ITEM_CONF = {
 };
 
 const Container = SpotlightContainerDecorator(
-  { leaveFor: { right: "" }, enterTo: "last-focused" },
+  { leaveFor: { right: "" } },
   "nav"
 );
 
 export default function CategoryNav({
   categoryInfos,
   currentCategoryCode,
+  scrollTop,
   setCurrentCategoryCode,
   ...rest
 }) {
@@ -31,6 +32,7 @@ export default function CategoryNav({
       }
 
       setCurrentCategoryCode(categoryCode);
+      scrollTop();
     },
     [currentCategoryCode]
   );

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

@@ -6,12 +6,15 @@ import { getOnSaleInfo } from "../../actions/onSaleActions";
 import TBody from "../../components/TBody/TBody";
 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";
 
 export default function OnSalePanel() {
+  const { getScrollTo, scrollTop } = useScrollTo();
+
   const dispatch = useDispatch();
 
   const categoryInfos = useSelector(
@@ -40,7 +43,7 @@ export default function OnSalePanel() {
   useEffect(() => {
     if (saleInfos) {
       const id = saleInfos[0].saleProductInfos[0].prdtId;
-      setTargetId(id);
+      setTargetId(SpotlightIds.TITEM_CARD + id);
     }
   }, [dispatch, saleInfos]);
 
@@ -50,8 +53,9 @@ export default function OnSalePanel() {
         categoryInfos={categoryInfos}
         currentCategoryCode={currentCategoryCode}
         setCurrentCategoryCode={setCurrentCategoryCode}
+        scrollTop={scrollTop}
       />
-      <TBody className={css.tBody}>
+      <TBody className={css.tBody} cbScrollTo={getScrollTo}>
         {saleInfos &&
           saleInfos.map(({ saleNm, saleProductInfos }) => (
             <OnSaleProductList
@@ -60,7 +64,7 @@ export default function OnSalePanel() {
               saleProductInfos={saleProductInfos}
             />
           ))}
-        <TopButton targetId={SpotlightIds.TITEM_CARD + targetId} />
+        <TopButton targetId={targetId} />
       </TBody>
     </TPanel>
   );

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

@@ -15,7 +15,7 @@ const LIST_ITEM_CONF = {
 };
 
 const Container = SpotlightContainerDecorator(
-  { leaveFor: { right: "" }, enterTo: "last-focused" },
+  { leaveFor: { right: "" } },
   "div"
 );