[DetailPanel] youmaylike cursorVisble job

com.twin.app.shoptime/src/views/DetailPanel/YouMayLike/YouMayLike.jsx

@@ -1,4 +1,10 @@
-import React, { useCallback, useEffect, useMemo, useState } from "react";
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 
 import classNames from "classnames";
 import { useDispatch, useSelector } from "react-redux";
@@ -42,6 +48,10 @@ export default function YouMayLike({
   const youmaylikeData = useSelector((state) => state.main.youmaylikeData);
   const { getScrollTo, scrollLeft } = useScrollTo();
   const panels = useSelector((state) => state.panels.panels);
+  const cursorVisible = useSelector(
+    (state) => state.common.appStatus.cursorVisible
+  );
+  const cursorOpen = useRef(new Job((func) => func(), 1500));
 
   const launchedFromPlayer = useMemo(() => {
     const detailPanelIndex = panels.findIndex(
@@ -66,11 +76,20 @@ export default function YouMayLike({
     scrollLeft();
   }, [dispatch, lgCatCd, panelInfo]);
 
-  const cursorVisibleFocus = useCallback(() => {
-    if (productInfo) {
-      setExpanded(true);
+  const cursorVisibleOnFocus = useCallback(() => {
+    if (productInfo && cursorVisible) {
+      cursorOpen.current.start(() => {
+        setExpanded(true);
+      });
     }
-  }, [productInfo]);
+  }, [productInfo, cursorVisible]);
+
+  const cursorVisibleOnBlur = useCallback(() => {
+    if (cursorVisible) {
+      cursorOpen.current.stop();
+    }
+  }, [cursorVisible]);
+
   const onFocus = useCallback(() => {
     if (productInfo) {
       setFocused(true);
@@ -151,7 +170,8 @@ export default function YouMayLike({
           focused && css.focused
         )}
         spotlightRestrict="self-only"
-        onFocus={cursorVisibleFocus}
+        onFocus={cursorVisibleOnFocus}
+        onBlur={cursorVisibleOnBlur}
       >
         <SpottableComponent
           className={classNames(css.button, focused && css.focused)}