[SHOPTIME-3518] Category / GNB 2뎁스 맨 아래의 카테고리로 이동할 경우 스크롤 오류

1. TabLayout.jsx
2. TabItemSub.jsx
- 원인: scrollTop 동작 조건 오류
- 대책: scrollTop 동작 조건 수정

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);

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 &&