[components] modify for 2depth subItem in TabLayout.jsx and TabItemSub.jsx

com.twin.app.shoptime/src/components/TabLayout/TabItemSub.jsx

@@ -10,6 +10,7 @@ import Spottable from "@enact/spotlight/Spottable";
 import css from "./TabItemSub.module.less";
 
 const SpottableComponent = Spottable("div");
+
 const TabItemBase = ({
   selected = false,
   expanded = false,
@@ -31,60 +32,41 @@ const TabItemBase = ({
   ...rest
 }) => {
   const [focused, setFocused] = useState(false);
+
   const itemRef = useRef();
+
   const clearPressedJob = useRef(
     new Job((func) => {
       setTimeout(func, 0);
     }, 0)
   );
+
   const _onClick = useCallback(
     (ev) => {
       clearPressedJob.current.start(() => {
+        if (itemId) {
+          setSelectedSubItemId(itemId);
+        }
+
+        if (spotlightId) {
+          setLastFocusId(spotlightId);
+        }
+
         if (onClick) {
-          onClick({
-            // index,
-            target,
-            // title,
-            // path,
-            itemId,
-          });
-          // if (path) {
-          //   setSelectedTitle(path);
-          // } else {
-          //   setSelectedTitle(title);
-          // }
-
-          if (itemId) {
-            setSelectedSubItemId(itemId);
-          }
-
-          if (spotlightId) {
-            setLastFocusId(spotlightId);
-          }
+          onClick({ target, itemId });
         }
       });
     },
-    [
-      // index,
-      // title,
-      // path,
-      target,
-      itemId,
-      onClick,
-      spotlightId,
-      setSelectedSubItemId,
-      setLastFocusId,
-    ]
+    [target, itemId, onClick, spotlightId, setSelectedSubItemId, setLastFocusId]
   );
 
   const _onFocus = useCallback(() => {
     setFocused(true);
-    setSelectedSubItemId(null);
 
     if (onFocus) {
       onFocus(index);
     }
-  }, [index, onFocus, setSelectedSubItemId]);
+  }, [index, onFocus]);
 
   const _onBlur = useCallback(() => {
     setFocused(false);

com.twin.app.shoptime/src/components/TabLayout/TabLayout.jsx

@@ -509,15 +509,8 @@ export default function TabLayout({ topPanelName, onTabActivated, panelInfo }) {
   );
 
   const onClickSubItem = useCallback(
-    ({
-      // index, title, path,
-      target,
-      itemId,
-    }) => {
-      if (
-        // selectedTitle === (title || path) ||
-        selectedSubItemId === itemId
-      ) {
+    ({ target, itemId }) => {
+      if (selectedSubItemId === itemId) {
         deActivateTab();
         spotToPanel();
         return;
@@ -542,13 +535,7 @@ export default function TabLayout({ topPanelName, onTabActivated, panelInfo }) {
         })
       );
     },
-    [
-      dispatch,
-      deActivateTab,
-      // panels,
-      // selectedTitle,
-      selectedSubItemId,
-    ]
+    [dispatch, deActivateTab, selectedSubItemId]
   );
   const onClickExtraArea = useCallback(
     ({ index, target }) => {
@@ -605,6 +592,7 @@ export default function TabLayout({ topPanelName, onTabActivated, panelInfo }) {
   useEffect(() => {
     if (tabActivated) {
       dispatch(gnbOpened(true));
+
       if (panels.length === 0) {
         Spotlight.focus("spotlight_home");
         return;
@@ -624,18 +612,35 @@ export default function TabLayout({ topPanelName, onTabActivated, panelInfo }) {
     if (onTabActivated) {
       onTabActivated(tabActivated && showTab);
     }
-  }, [tabActivated, showTab, dispatch]);
+  }, [dispatch, showTab, tabActivated]);
 
   //서브탭 라스트 포커스 & 서브탭 초기화
   useEffect(() => {
-    if (panelInfo?.lgCatCd) {
-      setSubTabLastFocusId(`secondDepth-${panelInfo.lgCatCd}`);
-    }
-
     if (!panelInfo) {
       setMainSelectedIndex(-1);
       setLastFocusId("spotlight_home");
       setSubTabLastFocusId(null);
+      return;
+    }
+
+    let subTarget;
+
+    // case: Category 2depth
+    if (panelInfo?.lgCatCd) {
+      subTarget = panelInfo.lgCatCd;
+    }
+    // case: Featured Brands 2depth
+    else if (panelInfo?.patnrId) {
+      subTarget = panelInfo.patnrId;
+    }
+    // case: My Info 2depth
+    else if (panelInfo?.menuId) {
+      subTarget = panelInfo.menuId;
+    }
+
+    if (subTarget) {
+      setSelectedSubItemId(subTarget);
+      setSubTabLastFocusId(`secondDepth-${subTarget}`);
     }
   }, [panelInfo]);