2Depth active 수정

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

@@ -14,6 +14,7 @@ const TabItemBase = ({
   icons,
   title,
   expanded = false,
+  mainSelected = false,
   selected = false,
   index = 0,
   target,
@@ -44,7 +45,6 @@ const TabItemBase = ({
 
   const _onFocus = useCallback(() => {
     setFocused(true);
-
     if (onFocus) {
       onFocus(index);
     }
@@ -57,34 +57,44 @@ const TabItemBase = ({
   const onKeyDown = useCallback(
     (event) => {
       if (event.key === "ArrowRight") {
+        if (!showSubTab) {
           _onClick();
         }
+      }
     },
     [deActivateTab]
   );
 
   const renderIcon = useCallback(() => {
-    if (icons) {
+    if (!icons) {
-      const Component = icons;
+      return null;
+    }
+
+    const Component = icons;
+    let iconType = "normal";
 
-      let iconType;
     if (expanded && index === mainSelectedIndex) {
       iconType = "focused";
-      } else {
+    } else if (selected) {
-        iconType = focused
+      iconType = "selected";
-          ? "focused"
+    } else if (mainSelected) {
-          : selected
+      iconType = "selected";
-          ? "selected"
+    } else if (focused) {
-          : expanded
+      iconType = "focused";
-          ? "expanded"
+    } else if (expanded) {
-          : "normal";
+      iconType = "expanded";
     }
 
     return <Component iconType={iconType} />;
-    } else {
+  }, [
-      return null;
+    focused,
-    }
+    expanded,
-  }, [focused, expanded, selected, mainSelectedIndex, index, icons]);
+    mainSelected,
+    mainSelectedIndex,
+    index,
+    icons,
+    selected,
+  ]);
 
   delete rest.hasChildren;
   delete rest.getChildren;
@@ -97,6 +107,7 @@ const TabItemBase = ({
           (focused || index === mainSelectedIndex) &&
           showSubTab &&
           css.arrow,
+        mainSelected && css.selected,
         selected && css.selected
       )}
       onKeyDown={onKeyDown}
@@ -113,6 +124,7 @@ const TabItemBase = ({
         {icons && <div className={css.icon}>{renderIcon()}</div>}
         {expanded && title && (
           <Marquee
+            marqueeDisabled={!focused}
             className={classNames(css.text, isSubItem && css.subItem)}
             marqueeOn={"focus"}
           >

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

@@ -3,6 +3,29 @@
 
 @ICON_SIZE: 48px;
 
+// @-webkit-keyframes textLoop {
+//   0% {
+//     -webkit-transform: translate(50%);
+//     transform: translate(50%);
+//   }
+//   to {
+//     -webkit-transform: translate(calc(-100% - 189px));
+//     transform: translate(calc(-100% - 189px));
+//   }
+// }
+
+// @keyframes textLoop {
+//   0% {
+//     -webkit-transform: translate(50%);
+//     transform: translate(50%);
+//   }
+//   to {
+//     -webkit-transform: translate(calc(-100% - 289px));
+//     transform: translate(calc(-100% - 189px));
+//     left: 100%; /* 끝 위치 */
+//   }
+// }
+
 .tabItem{
     font-size: 36px;
     display: flex;
@@ -69,15 +92,21 @@
 .text {
     line-height: 1.2;
     padding-left: 11px;
+    // .elip(@clamp: 1);
+   
     .font(@fontFamily:@baseFontBold, @fontSize:36px);
 
     &.subItem {
       .font (@fontFamily:@baseFontBold, @fontSize:30px);
       width: 245px; 
+      // word-break:break-all;
     }
+
+ 
 }
 
 
+
 .marqueeWrap {
     width: 100%;
   }

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

@@ -84,6 +84,7 @@ const TabItemBase = ({
       <>
         {expanded && (
           <Marquee
+            marqueeDisabled={!focused}
             marqueeOn={"focus"}
             className={classNames(css.text, isSubItem && css.subItem)}
           >
@@ -92,7 +93,7 @@ const TabItemBase = ({
         )}
       </>
     );
-  }, [title]);
+  }, [title, focused]);
 
   delete rest.hasChildren;
   delete rest.getChildren;

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

@@ -89,11 +89,14 @@
 .text {
     line-height: 1.2;
     padding-left: 11px;
+
+    .elip(@clamp: 1);
     .font(@fontFamily:@baseFontBold, @fontSize:36px);
     
     &.subItem {
         .font (@fontFamily:@baseFontBold, @fontSize:30px);
-        width: 245px; 
+        width: 248px;
+        word-break:break-all;
     }
 }
 

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

@@ -114,7 +114,6 @@ export default function TabLayout({ topPanelName, onTabActivated }) {
   const [mainExpanded, setMainExpanded] = useState(false);
   const [mainSelectedIndex, setMainSelectedIndex] = useState(-1);
   const [secondDepthReduce, setSecondDepthReduce] = useState(false);
-  const [temp, setTemp] = useState(false);
   const [tabs, setTabs] = useState([]);
   const [tabFocused, setTabFocused] = useState([false, false, false]); //COLLABSED_MAIN, ACTIVATED_MAIN, ACTIVATED_SUB
   const panelSwitching = useRef(null);
@@ -126,9 +125,11 @@ export default function TabLayout({ topPanelName, onTabActivated }) {
     return [
       {
         icons: CategoryIcon,
+        // target: [{ name: panel_names.CATEGORY_PANEL }],
       },
       {
         icons: MyPageIcon,
+        // target: [{ name: panel_names.MY_PAGE_PANEL }],
       },
       {
         icons: SearchIcon,
@@ -140,6 +141,7 @@ export default function TabLayout({ topPanelName, onTabActivated }) {
       },
       {
         icons: FeaturedBrandIcon,
+        // target: [{ name: panel_names.FEATURED_BRANDS_PANEL }],
       },
       {
         icons: OnSaleIcon,
@@ -201,9 +203,16 @@ export default function TabLayout({ topPanelName, onTabActivated }) {
       case "My Page":
         result = data?.mypage.map((item) => ({
           title: item.menuNm,
+          target: [
+            {
+              name: panel_names.MY_PAGE_PANEL,
+              panelInfo: item.menuOrd,
+            },
+          ],
         }));
         break;
     }
+    //console.log("#data", data);
     return result;
   };
 
@@ -306,7 +315,6 @@ export default function TabLayout({ topPanelName, onTabActivated }) {
         }
         case EXTRA_AREA: {
           if (cursorVisible) {
-            // deActivateTabJob.start(deActivateTab);
             return;
           }
         }
@@ -351,19 +359,15 @@ export default function TabLayout({ topPanelName, onTabActivated }) {
 
   const onFocus = (index) => {
     setMainSelectedIndex(index);
-    setTemp(false);
+
     if (showSubTab) {
       setSecondDepthReduce((prev) => !prev);
     }
   };
 
-  const onBlur = useCallback(() => {
-    setTemp(true);
-  }, []);
-
   const handleNavigation = useCallback(
     ({ index, target }) => {
-      if (target) {
+      if (target && !showSubTab) {
         dispatch(resetPanels(target));
         deActivateTab();
         panelSwitching.current = true;
@@ -441,6 +445,7 @@ export default function TabLayout({ topPanelName, onTabActivated }) {
 
   useEffect(() => {
     setSecondDepthReduce(false);
+
     if (showSubTab) {
       tabs[mainSelectedIndex]?.children.map((item) => {
         if (item.path) {
@@ -506,12 +511,18 @@ export default function TabLayout({ topPanelName, onTabActivated }) {
                   showSubTab={showSubTab}
                   icons={item.icons}
                   expanded={mainExpanded}
-                  selected={
+                  mainSelected={
                     (panels.length === 0 && index === 0) ||
                     (Array.isArray(item.target) &&
                       item.target[0]?.name &&
                       panels[0]?.name === item.target[0]?.name)
                   }
+                  selected={
+                    (panels.length === 0 && index === 0) ||
+                    (Array.isArray(item.children[0]?.target) &&
+                      item.children[0]?.target[0]?.name &&
+                      panels[0]?.name === item.children[0]?.target?.[0].name)
+                  }
                   title={item.title}
                   index={index}
                   mainSelectedIndex={mainSelectedIndex}
@@ -549,10 +560,9 @@ export default function TabLayout({ topPanelName, onTabActivated }) {
                       path={item.path}
                       showSubTab={showSubTab}
                       selected={
-                        (panels.length === 0 && index === 0) ||
+                        Array.isArray(item.target) &&
-                        (Array.isArray(item.target) &&
                         item.target[0]?.panelInfo &&
-                          panels[0]?.panelInfo === item.target[0]?.panelInfo)
+                        panels[0]?.panelInfo === item.target[0]?.panelInfo
                       }
                     />
                   );

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

@@ -39,9 +39,9 @@
   justify-content: center;
   z-index: 1;
   flex-grow: 0;
-
   // transition: width 0.5s ease;
 
+  
   > img {
     width: 54px;
     height: 54px;