[TabLayout] 매직마우스일 경우 2초 후 메뉴 열리도록 처리

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;

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;

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}