From 2e82ebea2cf12d48690cb9a45b89d52ce21d6b77 Mon Sep 17 00:00:00 2001
From: jangheon Pyo <ifheone@gmail.com>
Date: Thu, 2 May 2024 15:08:09 +0900
Subject: [PATCH] =?UTF-8?q?[TabLayout]=20=EB=A7=A4=EC=A7=81=EB=A7=88?=
 =?UTF-8?q?=EC=9A=B0=EC=8A=A4=EC=9D=BC=20=EA=B2=BD=EC=9A=B0=202=EC=B4=88?=
 =?UTF-8?q?=20=ED=9B=84=20=EB=A9=94=EB=89=B4=20=EC=97=B4=EB=A6=AC=EB=8F=84?=
 =?UTF-8?q?=EB=A1=9D=20=EC=B2=98=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/TabLayout/TabItem.jsx      |  2 +-
 .../src/components/TabLayout/TabItemSub.jsx   |  4 +-
 .../src/components/TabLayout/TabLayout.jsx    | 55 ++++++++++++++++---
 3 files changed, 50 insertions(+), 11 deletions(-)

diff --git a/com.twin.app.shoptime/src/components/TabLayout/TabItem.jsx b/com.twin.app.shoptime/src/components/TabLayout/TabItem.jsx
index b7f362af..b87612cb 100644
--- a/com.twin.app.shoptime/src/components/TabLayout/TabItem.jsx
+++ b/com.twin.app.shoptime/src/components/TabLayout/TabItem.jsx
@@ -139,7 +139,7 @@ const TabItemBase = ({
         )}
       </>
     );
-  }, [title, focused]);
+  }, [title, focused, expanded]);
 
   delete rest.hasChildren;
   delete rest.getChildren;
diff --git a/com.twin.app.shoptime/src/components/TabLayout/TabItemSub.jsx b/com.twin.app.shoptime/src/components/TabLayout/TabItemSub.jsx
index 22126958..f0f3a955 100644
--- a/com.twin.app.shoptime/src/components/TabLayout/TabItemSub.jsx
+++ b/com.twin.app.shoptime/src/components/TabLayout/TabItemSub.jsx
@@ -93,7 +93,7 @@ const TabItemBase = ({
     const subtitle = title.split("-")[0];
     return (
       <>
-        {expanded && (
+        {subtitle && (
           <Marquee
             marqueeDisabled={!focused}
             marqueeOn={"focus"}
@@ -104,7 +104,7 @@ const TabItemBase = ({
         )}
       </>
     );
-  }, [title, focused]);
+  }, [title, focused, expanded]);
 
   delete rest.hasChildren;
   delete rest.getChildren;
diff --git a/com.twin.app.shoptime/src/components/TabLayout/TabLayout.jsx b/com.twin.app.shoptime/src/components/TabLayout/TabLayout.jsx
index d084224d..34c1e045 100644
--- a/com.twin.app.shoptime/src/components/TabLayout/TabLayout.jsx
+++ b/com.twin.app.shoptime/src/components/TabLayout/TabLayout.jsx
@@ -136,6 +136,8 @@ export default function TabLayout({ topPanelName, onTabActivated }) {
   const { loginUserData } = useSelector((state) => state.common.appStatus);
   const menuItems = useSelector((state) => state.home.menuItems);
 
+  const mouseNavOpen = useRef(new Job((func) => func(), 1500));
+  const mouseMainEntered = useRef(false);
   const { getScrollTo, scrollTop } = useScrollTo();
 
   const getMenuData = (type) => {
@@ -327,20 +329,25 @@ export default function TabLayout({ topPanelName, onTabActivated }) {
 
   const onTabHasFocus = useCallback(
     (type) => (event) => {
+      console.log("yhcho onTabHasFocus ", cursorVisible);
       switch (type) {
-        case COLLABSED_MAIN:
+        case COLLABSED_MAIN: {
+          if (cursorVisible) {
+            mouseNavOpen.current.start(() => {
+              setMainExpanded(true);
+            });
+          }
+          break;
+        }
         case ACTIVATED_MAIN: {
           if (!cursorVisible) {
             const parent = event.target.parentNode;
             const children = parent.childNodes;
             const index = Array.prototype.indexOf.call(children, event.target);
+
             setMainExpanded(true);
             setMainSelectedIndex(index - 1);
             setSecondDepthReduce(false);
-          } else {
-            if (!panelSwitching.current) {
-              setMainExpanded(true);
-            }
           }
 
           break;
@@ -367,6 +374,12 @@ export default function TabLayout({ topPanelName, onTabActivated }) {
   const onTabBlur = useCallback(
     (type) => (event) => {
       switch (type) {
+        case COLLABSED_MAIN: {
+          if (cursorVisible) {
+            mouseNavOpen.current.stop();
+          }
+          break;
+        }
         case ACTIVATED_MAIN: {
           if (!cursorVisible) {
           }
@@ -550,9 +563,35 @@ export default function TabLayout({ topPanelName, onTabActivated }) {
     }
   }, [secondDepthReduce, showSubTab, mainSelectedIndex]);
 
+  const onMainMouseEnter = useCallback(
+    (ev) => {
+      mouseMainEntered.current = true;
+      onTabHasFocus(COLLABSED_MAIN)(ev);
+    },
+    [onTabHasFocus]
+  );
+
+  const onMainMouseLeave = useCallback(
+    (ev) => {
+      mouseMainEntered.current = false;
+      onTabBlur(COLLABSED_MAIN)(ev);
+    },
+    [onTabBlur]
+  );
+
+  const onMainMouseMove = useCallback(
+    (ev) => {
+      if (!mouseMainEntered.current) {
+        onMainMouseEnter(ev);
+      }
+    },
+    [onMainMouseEnter]
+  );
+
   if (!showTab) {
     return null;
   }
+
   return (
     <div className={classNames(css.tabLayoutWrap, !tabActivated && css.hide)}>
       {data && (
@@ -572,9 +611,10 @@ export default function TabLayout({ topPanelName, onTabActivated }) {
                   mainExpanded && css.expanded
                 )}
                 onFocus={onTabHasFocus(ACTIVATED_MAIN)}
-                onMouseOver={onTabHasFocus(COLLABSED_MAIN)}
                 onBlur={onTabBlur(ACTIVATED_MAIN)}
-                onMouseLeave={onTabBlur(ACTIVATED_MAIN)}
+                onMouseMove={onMainMouseMove}
+                onMouseEnter={onMainMouseEnter}
+                onMouseLeave={onMainMouseLeave}
               >
                 <h1 className={css.logo}>
                   <img src={shoptimeFullIcon} alt="" />
@@ -649,7 +689,6 @@ export default function TabLayout({ topPanelName, onTabActivated }) {
                             isSubItem={true}
                             deActivateTab={deActivateTab}
                             title={item.title + "-sub"}
-                            F
                             lgCatCd={item.id}
                             path={item.path}
                             showSubTab={showSubTab}