[OnSalePanel] issue fix, SHOPTIME-2038

Detail Notes :

1.  air mouse 모드, HomePanel에서 카테고리를 선택해서 진입시 nav의 scroll이 고정되어 있는 현상 수정

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

@@ -1,8 +1,9 @@
-import React from "react";
+import React, { useEffect } from "react";
 
 import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
 
 import TScroller from "../../../components/TScroller/TScroller";
+import useScrollTo from "../../../hooks/useScrollTo";
 import css from "./OnSaleNav.module.less";
 import OnSaleNavItem from "./OnSaleNavItem/OnSaleNavItem";
 
@@ -13,13 +14,58 @@ const Container = SpotlightContainerDecorator(
 
 export default function OnSaleNav({
   categoryInfos,
+  panelInfo,
   scrollTop,
   selectedLgCatCd,
   setSelectedLgCatCd,
 }) {
+  const { getScrollTo, scrollLeft } = useScrollTo();
+
+  useEffect(() => {
+    if (panelInfo?.lgCatCd) {
+      const container = document.querySelector("ul");
+      const item = document.querySelector(
+        `[data-spotlight-id="spotlightId-${panelInfo.lgCatCd}"]`
+      );
+
+      if (container && item) {
+        const containerRect = container.getBoundingClientRect();
+        const containerWidth = containerRect.width;
+
+        const itemRect = item.getBoundingClientRect();
+        const itemWidth = itemRect.width;
+        const offsetFromContainerLeft = itemRect.left;
+        const rightGap = parseInt(
+          window.getComputedStyle(item).getPropertyValue("margin-right")
+        );
+
+        const displayOrder = Array.from(container.children).indexOf(item) + 1;
+
+        const maxVisibleCount = Math.floor(
+          containerWidth / (itemWidth + rightGap)
+        );
+
+        if (displayOrder <= maxVisibleCount) {
+          return;
+        }
+
+        const clippedWidth =
+          containerWidth - (itemWidth + rightGap) * maxVisibleCount - rightGap;
+
+        const x = offsetFromContainerLeft - containerWidth + clippedWidth;
+
+        scrollLeft({ x });
+      }
+    }
+  }, []);
+
   return (
     <Container className={css.nav}>
-      <TScroller direction="horizontal" noScrollByWheel>
+      <TScroller
+        cbScrollTo={getScrollTo}
+        direction="horizontal"
+        noScrollByWheel
+      >
         <ul>
           {categoryInfos &&
             categoryInfos.map((categoryInfo, index) => (

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

@@ -110,6 +110,7 @@ export default function OnSalePanel() {
       {categories && categories.length > 0 && (
         <OnSaleNav
           categoryInfos={categories}
+          panelInfo={panelInfo}
           scrollTop={scrollTop}
           selectedLgCatCd={selectedLgCatCd}
           setSelectedLgCatCd={setSelectedLgCatCd}