[TabLayout] featuredBrands 다른 채널로 이동 안되는 현상 fix

com.twin.app.shoptime/src/components/TabLayout/TabItem.jsx

@@ -1,15 +1,23 @@
-import React, { useCallback, useEffect, useRef, useState } from "react";
+import React, {
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
 
-import classNames from "classnames";
-import compose from "ramda/src/compose";
-import { useSelector } from "react-redux";
+import classNames from 'classnames';
+import compose from 'ramda/src/compose';
+import { useSelector } from 'react-redux';
 
-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 { 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 "./TabItem.module.less";
+import css from './TabItem.module.less';
 
 const SpottableComponent = Spottable("div");
 const TabItemBase = ({
@@ -126,8 +134,6 @@ const TabItemBase = ({
   const TextComponent = useCallback(() => {
     return (
       <>
-        {/* {expanded && title && ( */}
-        {/* // 1depth 하나만 사용시 pjh */}
         {title && (
           <Marquee
             marqueeDisabled={!focused}

com.twin.app.shoptime/src/components/TabLayout/TabItemSub.jsx

@@ -1,13 +1,21 @@
-import React, { useCallback, useEffect, useRef, useState } from "react";
+import React, {
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
 
-import classNames from "classnames";
-import compose from "ramda/src/compose";
+import classNames from 'classnames';
+import compose from 'ramda/src/compose';
 
-import { Job } from "@enact/core/util";
-import { Marquee, MarqueeController } from "@enact/sandstone/Marquee";
-import Spottable from "@enact/spotlight/Spottable";
+import { Job } from '@enact/core/util';
+import {
+  Marquee,
+  MarqueeController,
+} from '@enact/sandstone/Marquee';
+import Spottable from '@enact/spotlight/Spottable';
 
-import css from "./TabItemSub.module.less";
+import css from './TabItemSub.module.less';
 
 const SpottableComponent = Spottable("div");
 const TabItemBase = ({
@@ -40,7 +48,12 @@ const TabItemBase = ({
       clearPressedJob.current.start(() => {
         if (onClick) {
           onClick({ index, target, title, path });
-          setSelectedTitle(title || path);
+          if (path) {
+            setSelectedTitle(path);
+          } else {
+            setSelectedTitle(title);
+          }
+
           if (spotlightId) {
             setLastFocusId(spotlightId);
           }

com.twin.app.shoptime/src/components/TabLayout/TabLayout.jsx

@@ -465,6 +465,9 @@ export default function TabLayout({ topPanelName, onTabActivated }) {
 
   const onClickSubItem = useCallback(
     ({ index, target, title, path }) => {
+      console.log("#selectedTitle", selectedTitle);
+      console.log("#title", title);
+      console.log("#path", path);
       if (selectedTitle === (title || path)) {
         Spotlight.focus(SpotlightIds.TPANEL);
         deActivateTab();