Tablayout width 100% 이슈 및 Featured Brands 이미지 로드

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

@@ -34,6 +34,7 @@ const TabItemBase = ({
   subTitle,
   showSubTab = false,
   onFocus,
+  path,
   ...rest
 }) => {
   const [focused, setFocused] = useState(false);
@@ -149,7 +150,7 @@ const TabItemBase = ({
               marqueeOn={"focus"}
               className={classNames(css.text, isSubItem && css.subItem)}
             >
-              {title}
+              {path ? <img src={path} alt="" /> : title}
             </Marquee>
           )}
         </div>

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

@@ -52,10 +52,11 @@ const CancelableDiv = Cancelable(
 );
 
 class TabMenuItem {
-  constructor(icons = "", title = "", id, target, children = []) {
+  constructor(icons = "", title = "", id, path, target, children = []) {
     this.icons = icons;
     this.title = title;
     this.id = id;
+    this.path = path;
     this.target = target;
     this.children = []; //TabMenuItem
     if (children && children.length > 0) {
@@ -64,6 +65,7 @@ class TabMenuItem {
           children[i].icons,
           children[i].title,
           children[i].id,
+          children[i].path,
           children[i].target,
           children[i].children
         );
@@ -112,6 +114,7 @@ export default function TabLayout({ topPanelName, onTabActivated }) {
   const dispatch = useDispatch();
   const [mainExpanded, setMainExpanded] = useState(false);
   const [mainSelectedIndex, setMainSelectedIndex] = useState(-1);
+  const [secondDepthReduce, setSecondDepthReduce] = useState(false);
   const [focused, setFocused] = useState(false);
   const [tabs, setTabs] = useState([]);
   const [tabFocused, setTabFocused] = useState([false, false, false]); //COLLABSED_MAIN, ACTIVATED_MAIN, ACTIVATED_SUB
@@ -176,7 +179,7 @@ export default function TabLayout({ topPanelName, onTabActivated }) {
 
       case "Featured Brands":
         result = data?.shortFeaturedBrands.map((item) => ({
-          title: item.patncLogoPath,
+          path: item.patncLogoPath,
         }));
         break;
       case "My Page":
@@ -221,6 +224,7 @@ export default function TabLayout({ topPanelName, onTabActivated }) {
               menuItems[i].children = subData.map((subItem) => ({
                 id: subItem.id,
                 title: subItem.title,
+                path: subItem.path,
               }));
             }
           }
@@ -237,6 +241,7 @@ export default function TabLayout({ topPanelName, onTabActivated }) {
         menuItems[i].icons,
         menuItems[i].title,
         menuItems[i].id,
+        menuItems[i].path,
         menuItems[i].target,
         menuItems[i].children
       );
@@ -413,15 +418,27 @@ export default function TabLayout({ topPanelName, onTabActivated }) {
     }
   }, [tabActivated, showTab]);
 
-  useEffect(() => {}, [showSubTab, mainSelectedIndex]);
+  useEffect(() => {}, []);
+
+  useEffect(() => {
+    setSecondDepthReduce(false);
+    if (showSubTab) {
+      tabs[mainSelectedIndex]?.children.map((item) => {
+        if (item.path) {
+          console.log("#item.path", item.path);
+          setSecondDepthReduce(true);
+        }
+      });
+    }
+  }, [showSubTab, mainSelectedIndex, secondDepthReduce]);
   if (!showTab) {
     return null;
   }
   return (
-    <div className={css.tabLayoutWrap}>
+    <div className={classNames(css.tabLayoutWrap, !tabActivated && css.hide)}>
       {/* collabsed Main */}
       <Container
-        className={classNames(css.tabWrap, css.basicLayout)}
+        className={classNames(css.tabWrap)}
         onFocus={onTabHasFocus(COLLABSED_MAIN)}
         onMouseOver={onTabHasFocus(COLLABSED_MAIN)}
         onBlur={onTabBlur(COLLABSED_MAIN)}
@@ -488,6 +505,7 @@ export default function TabLayout({ topPanelName, onTabActivated }) {
               className={classNames(
                 css.tabWrap,
                 css.secondDepthLayout,
+                // secondDepthReduce && css.
                 !showSubTab && css.hide
               )}
               onFocus={onTabHasFocus(ACTIVATED_SUB)}
@@ -508,6 +526,7 @@ export default function TabLayout({ topPanelName, onTabActivated }) {
                       deActivateTab={deActivateTab}
                       title={item.title}
                       lgCatCd={item.id}
+                      path={item.path}
                     />
                   );
                 })}

com.twin.app.shoptime/src/components/TabLayout/iconComponents/convertThemeColor.js

@@ -3,7 +3,9 @@ export const convertThemeColor = (iconType) => {
   const theme = {
     light: {
       normal: "#353535",
-      expanded: "#FEFEFE",
+      expanded: "#353535",
+      selected: "#FEFEFE",
+      focused: "#FEFEFE",
     },
   };