[OnSalePanel] 버그 수정

Detail Notes :

1. TopButton 클릭 시 virtualGridList의 renderItem 좌표를 찾지 못하는 문제 수정

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

@@ -27,7 +27,7 @@ export default function CategoryNav({
         return scrollTop();
       }
 
-      setContainerLastFocusedElement(null, [`${SpotlightIds.TBODY}`]);
+      setContainerLastFocusedElement(null, [SpotlightIds.TBODY]);
       setCurrentCategoryCode(categoryCode);
       scrollTop();
     },

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useCallback, useEffect, useRef, useState } from "react";
 
 import { useDispatch, useSelector } from "react-redux";
 
@@ -26,8 +26,11 @@ export default function OnSalePanel() {
 
   const [currentCategoryCode, setCurrentCategoryCode] = useState();
   const [initialLoad, setInitialLoad] = useState(true);
+  const [isTopButtonClicked, setIsTopButtonClicked] = useState(false);
   const [targetId, setTargetId] = useState();
 
+  const timerRef = useRef();
+
   useEffect(() => {
     if (categoryInfos && !currentCategoryCode) {
       setCurrentCategoryCode(categoryInfos[0].lgCatCd);
@@ -56,6 +59,19 @@ export default function OnSalePanel() {
     }
   }, [currentCategoryCode, initialLoad]);
 
+  useEffect(() => {
+    return () => clearTimeout(timerRef.current);
+  }, []);
+
+  const handleTopButtonClick = useCallback(() => {
+    if (isTopButtonClicked) {
+      return;
+    }
+
+    setIsTopButtonClicked(true);
+    timerRef.current = setTimeout(() => Spotlight.focus(targetId), 0);
+  }, [isTopButtonClicked, targetId]);
+
   return (
     <TPanel className={css.container}>
       <CategoryNav
@@ -70,11 +86,13 @@ export default function OnSalePanel() {
             <OnSaleProductList
               exposureOrder={expsOrd}
               key={"saleInfo-" + index}
+              isTopButtonClicked={isTopButtonClicked}
+              setIsTopButtonClicked={setIsTopButtonClicked}
               saleName={saleNm}
               saleProductInfos={saleProductInfos}
             />
           ))}
-        <TopButton targetId={targetId} />
+        <TopButton onTopButtonClick={handleTopButtonClick} />
       </TBody>
     </TPanel>
   );

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

@@ -20,8 +20,10 @@ const LIST_ITEM_CONF = {
 
 export default function OnSaleProductList({
   exposureOrder,
+  isTopButtonClicked,
   saleName,
   saleProductInfos,
+  setIsTopButtonClicked,
   ...rest
 }) {
   const { getScrollTo, scrollLeft } = useScrollTo();
@@ -39,6 +41,13 @@ export default function OnSaleProductList({
     scrollLeft();
   }, [saleProductInfos]);
 
+  useEffect(() => {
+    if (exposureOrder === 1 && isTopButtonClicked) {
+      scrollLeft();
+      setIsTopButtonClicked(false);
+    }
+  }, [isTopButtonClicked]);
+
   const renderItem = useCallback(
     ({ index, ...rest }) => {
       return (