[TabLayout, TabItem] 2depts 이동 시 1depts 포커싱 유지

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

@@ -24,6 +24,7 @@ const TabItemBase = ({
   showSubTab = false,
   temp,
   setTemp,
+  mainSelectedIndex,
   ...rest
 }) => {
   const [focused, setFocused] = useState(false);
@@ -68,23 +69,25 @@ const TabItemBase = ({
   const renderIcon = useCallback(() => {
     if (icons) {
       const Component = icons;
-      return (
-        <Component
-          iconType={
-            focused
-              ? "focused"
-              : selected
-              ? "selected"
-              : expanded
-              ? "expanded"
-              : "normal"
-          }
-        />
-      );
+
+      let iconType;
+      if (expanded && index === mainSelectedIndex) {
+        iconType = "focused";
+      } else {
+        iconType = focused
+          ? "focused"
+          : selected
+          ? "selected"
+          : expanded
+          ? "expanded"
+          : "normal";
+      }
+
+      return <Component iconType={iconType} />;
     } else {
       return null;
     }
-  }, [focused, expanded, selected, fixed]);
+  }, [focused, expanded, selected, mainSelectedIndex, index, icons]);
 
   delete rest.hasChildren;
   delete rest.getChildren;
@@ -92,9 +95,13 @@ const TabItemBase = ({
     <SpottableComponent
       className={classNames(
         css.tabItem,
-        focused && css.focused,
+        (focused || index === mainSelectedIndex) && css.focused,
+        // focused && css.focused,
         showSubTab && fixed && css.fixed,
-        !isSubItem && focused && showSubTab && css.arrow,
+        !isSubItem &&
+          (focused || index === mainSelectedIndex) &&
+          showSubTab &&
+          css.arrow,
         selected && css.selected
       )}
       onKeyDown={onKeyDown}
@@ -102,7 +109,12 @@ const TabItemBase = ({
       onBlur={_onBlur}
       onClick={_onClick}
     >
-      <div className={classNames(css.itemWrap, focused && css.focused)}>
+      <div
+        className={classNames(
+          css.itemWrap,
+          (focused || index === mainSelectedIndex) && css.focused
+        )}
+      >
         {icons && <div className={css.icon}>{renderIcon()}</div>}
         {expanded && title && (
           <Marquee

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

@@ -516,6 +516,7 @@ export default function TabLayout({ topPanelName, onTabActivated }) {
                   }
                   title={item.title}
                   index={index}
+                  mainSelectedIndex={mainSelectedIndex}
                 />
               ))}
           </MainContainer>