From 8652bcc206c335eeb03c7caf66a3140aaeecb388 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B3=A0=EB=8F=99=EC=98=81?=
 <dongyoung@godong-yeong-ui-noteubug.local>
Date: Fri, 8 Mar 2024 14:41:37 +0900
Subject: [PATCH] =?UTF-8?q?TabLayout=20=EA=B8=B0=ED=9A=8D=EB=B3=80?=
 =?UTF-8?q?=EA=B2=BD=EC=9C=BC=EB=A1=9C=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80=20=EB=B0=8F=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/TabLayout/TabItem.jsx      |  9 ++++-
 .../components/TabLayout/TabItem.module.less  |  8 ++++
 .../src/components/TabLayout/TabItemSub.jsx   | 12 +++++-
 .../src/components/TabLayout/TabLayout.jsx    | 40 ++++++++++++++-----
 4 files changed, 56 insertions(+), 13 deletions(-)

diff --git a/com.twin.app.shoptime/src/components/TabLayout/TabItem.jsx b/com.twin.app.shoptime/src/components/TabLayout/TabItem.jsx
index a1d6da0c..b4001f58 100644
--- a/com.twin.app.shoptime/src/components/TabLayout/TabItem.jsx
+++ b/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
diff --git a/com.twin.app.shoptime/src/components/TabLayout/TabItem.module.less b/com.twin.app.shoptime/src/components/TabLayout/TabItem.module.less
index 13b44ede..9da0a7e6 100644
--- a/com.twin.app.shoptime/src/components/TabLayout/TabItem.module.less
+++ b/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 {
diff --git a/com.twin.app.shoptime/src/components/TabLayout/TabItemSub.jsx b/com.twin.app.shoptime/src/components/TabLayout/TabItemSub.jsx
index f8fcec1b..0017a7e5 100644
--- a/com.twin.app.shoptime/src/components/TabLayout/TabItemSub.jsx
+++ b/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 && (
diff --git a/com.twin.app.shoptime/src/components/TabLayout/TabLayout.jsx b/com.twin.app.shoptime/src/components/TabLayout/TabLayout.jsx
index 610314cd..90a87c42 100644
--- a/com.twin.app.shoptime/src/components/TabLayout/TabLayout.jsx
+++ b/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}