TabLayout 기획변경으로 기능 추가 및 수정

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

@@ -40,6 +40,10 @@ const TabItemBase = ({
     (ev) => {
       clearPressedJob.current.start(() => {
         if (onClick) {
+          if (showSubTab) {
+            Spotlight.focus("activatedSub");
+          }
+
           onClick({ index, target });
           if (spotlightId) {
             setLastFocusId(spotlightId);
@@ -47,7 +51,7 @@ const TabItemBase = ({
         }
       });
     },
-    [target, index, onClick]
+    [target, index, onClick, showSubTab]
   );
 
   const _onFocus = useCallback(() => {
@@ -99,7 +103,8 @@ const TabItemBase = ({
     <SpottableComponent
       className={classNames(
         css.tabItem,
-        (focused || opened) && css.focused,
+        focused && css.focused,
+        opened && css.opened,
         !isSubItem && opened && showSubTab && css.arrow,
         mainSelected && css.selected,
         selected && css.selected

com.twin.app.shoptime/src/components/TabLayout/TabItem.module.less

@@ -21,6 +21,14 @@
     z-index: 1;
     margin-left: 30px;
     position: relative;
+  }
+
+  &.opened {
+    color: #eee;
+    width: 402px;
+    z-index: 1;
+    margin-left: 30px;
+    position: relative;
 
     &.arrow {
       &::after {

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

@@ -1,10 +1,11 @@
-import React, { useCallback, useRef, useState } from "react";
+import React, { useCallback, useEffect, useRef, useState } from "react";
 
 import classNames from "classnames";
 import compose from "ramda/src/compose";
 
 import { Job } from "@enact/core/util";
 import { Marquee, MarqueeController } from "@enact/sandstone/Marquee";
+import Spotlight from "@enact/spotlight";
 import Spottable from "@enact/spotlight/Spottable";
 
 import css from "./TabItemSub.module.less";
@@ -22,6 +23,8 @@ const TabItemBase = ({
   isSubItem,
   onFocus,
   path,
+  spotlightId,
+  setLastFocusId,
   ...rest
 }) => {
   const [focused, setFocused] = useState(false);
@@ -37,6 +40,9 @@ const TabItemBase = ({
       clearPressedJob.current.start(() => {
         if (onClick) {
           onClick({ index, target });
+          if (spotlightId) {
+            setLastFocusId(spotlightId);
+          }
         }
       });
     },
@@ -48,10 +54,11 @@ const TabItemBase = ({
     if (onFocus) {
       onFocus(index);
     }
-  }, [index]);
+  }, [index, onFocus]);
 
   const _onBlur = useCallback(() => {
     setFocused(false);
+    setLastFocusId(null);
   }, [index]);
 
   const onKeyDown = useCallback(
@@ -111,6 +118,7 @@ const TabItemBase = ({
       onFocus={_onFocus}
       onBlur={_onBlur}
       onClick={_onClick}
+      spotlightId={spotlightId}
     >
       <div className={classNames(isSubItem && css.subWrap)}>
         {!path && (

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

@@ -128,6 +128,7 @@ export default function TabLayout({ topPanelName, onTabActivated }) {
   const [mainSelectedIndex, setMainSelectedIndex] = useState(-1);
   const [secondDepthReduce, setSecondDepthReduce] = useState(false);
   const [lastFocusId, setLastFocusId] = useState(null);
+  const [subTabLastFocusId, setSubTabLastFocusId] = useState(null);
   const [tabs, setTabs] = useState([]);
   const [tabFocused, setTabFocused] = useState([false, false, false]); //COLLABSED_MAIN, ACTIVATED_MAIN, ACTIVATED_SUB
   const panelSwitching = useRef(null);
@@ -216,7 +217,7 @@ export default function TabLayout({ topPanelName, onTabActivated }) {
         result =
           data?.shortFeaturedBrands &&
           data.shortFeaturedBrands.map((item) => ({
-            Id: item.patnrId,
+            id: item.patnrId,
             path: item.patncLogoPath,
             target: [
               {
@@ -230,6 +231,7 @@ export default function TabLayout({ topPanelName, onTabActivated }) {
         result =
           data?.mypage &&
           data.mypage.map((item) => ({
+            id: item.menuId,
             title: item.menuNm,
             target: [
               {
@@ -240,7 +242,7 @@ export default function TabLayout({ topPanelName, onTabActivated }) {
           }));
         break;
     }
-    //console.log("#data", data);
+
     return result;
   };
 
@@ -279,6 +281,7 @@ export default function TabLayout({ topPanelName, onTabActivated }) {
                 title: subItem.title,
                 path: subItem.path,
                 target: subItem.target,
+                spotlightId: `secondDetph-${subItem.id}`,
               }));
             }
           }
@@ -339,9 +342,8 @@ export default function TabLayout({ topPanelName, onTabActivated }) {
           break;
         }
         case ACTIVATED_SUB: {
-          if (cursorVisible) {
+          if (!cursorVisible) {
           }
-          break;
         }
         case EXTRA_AREA: {
           if (cursorVisible) {
@@ -401,6 +403,7 @@ export default function TabLayout({ topPanelName, onTabActivated }) {
         dispatch(resetPanels());
         deActivateTab();
         Spotlight.focus(SpotlightIds.TBODY);
+
         return;
       }
       if (target) {
@@ -453,7 +456,7 @@ export default function TabLayout({ topPanelName, onTabActivated }) {
       return true;
     }
     return false;
-  }, [tabActivated, tabs, mainSelectedIndex]);
+  }, [tabActivated, mainSelectedIndex]);
 
   const backKeyHandler = useCallback(
     (ev) => {
@@ -474,6 +477,7 @@ export default function TabLayout({ topPanelName, onTabActivated }) {
       } else {
         Spotlight.focus("spotlight_home");
       }
+
       dispatch(gnbOpened(true));
     }
     if (onTabActivated) {
@@ -481,11 +485,17 @@ export default function TabLayout({ topPanelName, onTabActivated }) {
     }
   }, [tabActivated, showTab, dispatch]);
 
+  useEffect(() => {
+    if (tabActivated && showSubTab && subTabLastFocusId !== null) {
+      Spotlight.focus(subTabLastFocusId);
+    }
+  }, [tabActivated, mainSelectedIndex, subTabLastFocusId]);
+
   useEffect(() => {
     setSecondDepthReduce(false);
 
     if (showSubTab) {
-      tabs[mainSelectedIndex]?.children.map((item) => {
+      tabs[mainSelectedIndex]?.children.forEach((item) => {
         if (item.path) {
           setSecondDepthReduce(true);
         }
@@ -514,7 +524,17 @@ export default function TabLayout({ topPanelName, onTabActivated }) {
           <TabItem
             key={"tabitem" + index}
             expanded={false}
-            selected={mainSelectedIndex === index}
+            mainSelected={
+              (panels.length === 0 && index === 3) ||
+              (Array.isArray(item.target) &&
+                item.target[0]?.name &&
+                panels[0]?.name === item.target[0]?.name)
+            }
+            selected={
+              Array.isArray(item.children[0]?.target) &&
+              item.children[0]?.target[0]?.name &&
+              panels[0]?.name === item.children[0]?.target?.[0].name
+            }
             index={index}
             onClick={handleNavigation}
             icons={item.icons}
@@ -550,10 +570,10 @@ export default function TabLayout({ topPanelName, onTabActivated }) {
               tabs.map((item, index) => (
                 <TabItem
                   {...item}
+                  key={"tabitemExpanded" + index}
                   onFocus={onFocus}
                   spotlightId={item.spotlightId}
                   setLastFocusId={setLastFocusId}
-                  key={"tabitemExpanded" + index}
                   onClick={handleNavigation}
                   deActivateTab={deActivateTab}
                   showSubTab={showSubTab}
@@ -598,8 +618,10 @@ export default function TabLayout({ topPanelName, onTabActivated }) {
                       <TabItemSub
                         {...item}
                         key={"tabitemSubmenu" + index}
+                        spotlightId={item.spotlightId}
+                        setLastFocusId={setSubTabLastFocusId}
                         onClick={onClickSubItem}
-                        expanded={true}
+                        expanded={mainExpanded}
                         index={index}
                         isSubItem={true}
                         deActivateTab={deActivateTab}