TabLayout 2Depth TScroller 추가 및 featureBrands 메뉴 css 수정

com.twin.app.shoptime/src/components/TabLayout/TabItemSub.module.less

@@ -6,7 +6,7 @@
 .tabItem {
   font-size: 36px;
   color: #999;
-  margin: 12px 0;
+  margin: 21px 0;
   position: relative;
   padding: 0 24px 0 48px;
   > div {

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

@@ -24,6 +24,7 @@ import shopTimeIcon from "../../../assets/images/icons/ic-lnb-shoptime-symbol@3x
 import { gnbOpened } from "../../actions/commonActions";
 import { resetPanels } from "../../actions/panelActions";
 import { panel_names } from "../../utils/Config";
+import TScroller from "../TScroller/TScroller";
 import CartIcon from "./iconComponents/CartIcon";
 import CategoryIcon from "./iconComponents/CategoryIcon";
 import FeaturedBrandIcon from "./iconComponents/FeaturedBrandIcon";
@@ -56,6 +57,7 @@ class TabMenuItem {
   constructor(
     icons = "",
     title = "",
+    id = "",
     spotlightId,
     path,
     target,
@@ -63,6 +65,7 @@ class TabMenuItem {
   ) {
     this.icons = icons;
     this.title = title;
+    this.id = id;
     this.spotlightId = spotlightId;
     this.path = path;
     this.target = target;
@@ -72,6 +75,7 @@ class TabMenuItem {
         const tabmenu = new TabMenuItem(
           children[i].icons,
           children[i].title,
+          children[i].id,
           children[i].spotlightId,
           children[i].path,
           children[i].target,
@@ -290,6 +294,7 @@ export default function TabLayout({ topPanelName, onTabActivated }) {
       const tabmenu = new TabMenuItem(
         menuItems[i].icons,
         menuItems[i].title,
+        menuItems[i].id,
         menuItems[i].spotlightId,
         menuItems[i].path,
         menuItems[i].target,
@@ -580,29 +585,31 @@ export default function TabLayout({ topPanelName, onTabActivated }) {
               onBlur={onTabBlur(ACTIVATED_SUB)}
               onMouseLeave={onTabBlur(ACTIVATED_SUB)}
             >
-              {showSubTab &&
-                tabs[mainSelectedIndex]?.children.map((item, index) => {
-                  return (
-                    <TabItemSub
-                      {...item}
-                      key={"tabitemSubmenu" + index}
-                      onClick={onClickSubItem}
-                      expanded={true}
-                      index={index}
-                      isSubItem={true}
-                      deActivateTab={deActivateTab}
-                      title={item.title}
-                      lgCatCd={item.id}
-                      path={item.path}
-                      showSubTab={showSubTab}
-                      selected={
-                        Array.isArray(item.target) &&
-                        item.target[0]?.panelInfo &&
-                        panels[0]?.panelInfo === item.target[0]?.panelInfo
-                      }
-                    />
-                  );
-                })}
+              <TScroller>
+                {showSubTab &&
+                  tabs[mainSelectedIndex]?.children.map((item, index) => {
+                    return (
+                      <TabItemSub
+                        {...item}
+                        key={"tabitemSubmenu" + index}
+                        onClick={onClickSubItem}
+                        expanded={true}
+                        index={index}
+                        isSubItem={true}
+                        deActivateTab={deActivateTab}
+                        title={item.title}
+                        lgCatCd={item.id}
+                        path={item.path}
+                        showSubTab={showSubTab}
+                        selected={
+                          Array.isArray(item.target) &&
+                          item.target[0]?.panelInfo &&
+                          panels[0]?.panelInfo === item.target[0]?.panelInfo
+                        }
+                      />
+                    );
+                  })}
+              </TScroller>
             </Container>
           }
           {/* Extra Area*/}