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

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 && (