From 5169a378db35253bd70dbccfcc6a597ade1c76c2 Mon Sep 17 00:00:00 2001
From: "younghoon100.park" <younghoon100.park@lgepartner.com>
Date: Thu, 31 Oct 2024 19:16:03 +0900
Subject: [PATCH] =?UTF-8?q?[SHOPTIME-3518]=20Category=20/=20GNB=202?=
 =?UTF-8?q?=EB=8E=81=EC=8A=A4=20=EB=A7=A8=20=EC=95=84=EB=9E=98=EC=9D=98=20?=
 =?UTF-8?q?=EC=B9=B4=ED=85=8C=EA=B3=A0=EB=A6=AC=EB=A1=9C=20=EC=9D=B4?=
 =?UTF-8?q?=EB=8F=99=ED=95=A0=20=EA=B2=BD=EC=9A=B0=20=EC=8A=A4=ED=81=AC?=
 =?UTF-8?q?=EB=A1=A4=20=EC=98=A4=EB=A5=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1. TabLayout.jsx
2. TabItemSub.jsx
- 원인: scrollTop 동작 조건 오류
- 대책: scrollTop 동작 조건 수정
---
 .../src/components/TabLayout/TabItemSub.jsx      | 11 +++--------
 .../src/components/TabLayout/TabLayout.jsx       | 16 ++++++++++++----
 2 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/com.twin.app.shoptime/src/components/TabLayout/TabItemSub.jsx b/com.twin.app.shoptime/src/components/TabLayout/TabItemSub.jsx
index c379d866..b13cd869 100644
--- a/com.twin.app.shoptime/src/components/TabLayout/TabItemSub.jsx
+++ b/com.twin.app.shoptime/src/components/TabLayout/TabItemSub.jsx
@@ -28,19 +28,13 @@ const TabItemBase = ({
   setLastFocusId,
   setSelectedTitle,
   setSelectedSubItemId,
+  setSelectedSubIndex,
   label,
   ...rest
 }) => {
   const [focused, setFocused] = useState(false);
 
   const itemRef = useRef();
-
-  // const clearPressedJob = useRef(
-  //   new Job((func) => {
-  //     setTimeout(func, 0);
-  //   }, 0)
-  // );
-
   const clearPressedJob = useRef(new Job((func) => func(), 0));
 
   const _onClick = useCallback(
@@ -65,11 +59,12 @@ const TabItemBase = ({
   const _onFocus = useCallback(() => {
     setFocused(true);
     setSelectedSubItemId(null);
+    setSelectedSubIndex(index);
 
     if (onFocus) {
       onFocus(index);
     }
-  }, [index, onFocus, setSelectedSubItemId]);
+  }, [index, onFocus, setSelectedSubItemId, setSelectedSubIndex]);
 
   const _onBlur = useCallback(() => {
     setFocused(false);
diff --git a/com.twin.app.shoptime/src/components/TabLayout/TabLayout.jsx b/com.twin.app.shoptime/src/components/TabLayout/TabLayout.jsx
index e412e8d8..646c58b0 100644
--- a/com.twin.app.shoptime/src/components/TabLayout/TabLayout.jsx
+++ b/com.twin.app.shoptime/src/components/TabLayout/TabLayout.jsx
@@ -136,6 +136,7 @@ export default function TabLayout({ topPanelName, onTabActivated, panelInfo }) {
   const [lastFocusId, setLastFocusId] = useState(null);
   const [selectedTitle, setSelectedTitle] = useState("");
   const [selectedSubItemId, setSelectedSubItemId] = useState(null);
+  const [selectedSubIndex, setSelectedSubIndex] = useState(-1);
   const [subTabLastFocusId, setSubTabLastFocusId] = useState(null);
   const [tabs, setTabs] = useState([]);
   const [tabFocused, setTabFocused] = useState([false, false, false]); //COLLABSED_MAIN, ACTIVATED_MAIN, ACTIVATED_SUB
@@ -159,6 +160,7 @@ export default function TabLayout({ topPanelName, onTabActivated, panelInfo }) {
   const deviceCountryCode = httpHeader["X-Device-Country"];
   const mouseNavOpen = useRef(new Job((func) => func(), 1000));
   const mouseMainEntered = useRef(false);
+  const scrollTopJobRef = useRef(new Job((func) => func(), 0));
 
   const getMenuData = (type) => {
     let result = [];
@@ -679,13 +681,18 @@ export default function TabLayout({ topPanelName, onTabActivated, panelInfo }) {
   useEffect(() => {
     if (tabActivated && showSubTab && subTabLastFocusId !== null) {
       Spotlight.focus(subTabLastFocusId);
-    } else {
-      if (tabActivated) {
-        scrollTop({ y: 0 });
-      }
     }
   }, [tabActivated, subTabLastFocusId, mainSelectedIndex]);
 
+  useEffect(() => {
+    if (selectedSubIndex >= 0) {
+      if (selectedSubIndex === 0) {
+        scrollTopJobRef.current.start(() => scrollTop({ y: 0 }));
+        return () => scrollTopJobRef.current.stop();
+      }
+    }
+  }, [selectedSubIndex]);
+
   // 1Depth > 2Depth로 넘어갈때 서브메뉴가 없을때만 ( 의존성배열 )
   useEffect(() => {
     if (tabActivated && lastFocusId && !showSubTab) {
@@ -863,6 +870,7 @@ export default function TabLayout({ topPanelName, onTabActivated, panelInfo }) {
                             showSubTab={showSubTab}
                             setSelectedTitle={setSelectedTitle}
                             setSelectedSubItemId={setSelectedSubItemId}
+                            setSelectedSubIndex={setSelectedSubIndex}
                             selected={
                               Array.isArray(item.target) &&
                               item.target[0]?.panelInfo &&