From aeadd94941de0eeec6585bbbec988fb9ea15325e Mon Sep 17 00:00:00 2001
From: "younghoon100.park" <younghoon100.park@lgepartner.com>
Date: Wed, 14 Feb 2024 15:41:44 +0900
Subject: [PATCH] =?UTF-8?q?[onSalePanel]=20useScrollTo=20hook=20=EC=A0=81?=
 =?UTF-8?q?=EC=9A=A9=20=EB=B0=8F=20SpotlightContainerDecorator=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Detail Notes :

1. OnSalePanel.jsx, useScrollTo 적용
2. CategoryNav.jsx, scrollTop props 추가
3. CategoryNav.jsx, OnSaleProductList.jsx, SpotlightContainerDecorator enterTo 삭제
---
 .../src/views/OnSalePanel/CategoryNav/CategoryNav.jsx  |  4 +++-
 .../src/views/OnSalePanel/OnSalePanel.jsx              | 10 +++++++---
 .../OnSaleProductList/OnSaleProductList.jsx            |  2 +-
 3 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/com.twin.app.shoptime/src/views/OnSalePanel/CategoryNav/CategoryNav.jsx b/com.twin.app.shoptime/src/views/OnSalePanel/CategoryNav/CategoryNav.jsx
index 408654a0..da525c5d 100644
--- a/com.twin.app.shoptime/src/views/OnSalePanel/CategoryNav/CategoryNav.jsx
+++ b/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]
   );
diff --git a/com.twin.app.shoptime/src/views/OnSalePanel/OnSalePanel.jsx b/com.twin.app.shoptime/src/views/OnSalePanel/OnSalePanel.jsx
index c03dbaf6..7ea5f08d 100644
--- a/com.twin.app.shoptime/src/views/OnSalePanel/OnSalePanel.jsx
+++ b/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>
   );
diff --git a/com.twin.app.shoptime/src/views/OnSalePanel/OnSaleProductList/OnSaleProductList.jsx b/com.twin.app.shoptime/src/views/OnSalePanel/OnSaleProductList/OnSaleProductList.jsx
index 4fbf3dc5..9739f625 100644
--- a/com.twin.app.shoptime/src/views/OnSalePanel/OnSaleProductList/OnSaleProductList.jsx
+++ b/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"
 );