2Depth active 수정

2024-02-13 15:03:32 +09:00
parent d16433826c
commit 2e8662f389
6 changed files with 93 additions and 38 deletions
--- a/com.twin.app.shoptime/src/components/TabLayout/TabItem.jsx
+++ b/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") {
-        _onClick();
+        if (!showSubTab) {
+          _onClick();
+        }
      }
    },
    [deActivateTab]
  );

  const renderIcon = useCallback(() => {
-    if (icons) {
-      const Component = icons;
-
-      let iconType;
-      if (expanded && index === mainSelectedIndex) {
-        iconType = "focused";
-      } else {
-        iconType = focused
-          ? "focused"
-          : selected
-          ? "selected"
-          : expanded
-          ? "expanded"
-          : "normal";
-      }
-
-      return <Component iconType={iconType} />;
-    } else {
+    if (!icons) {
      return null;
    }
-  }, [focused, expanded, selected, mainSelectedIndex, index, icons]);
+
+    const Component = icons;
+    let iconType = "normal";
+
+    if (expanded && index === mainSelectedIndex) {
+      iconType = "focused";
+    } else if (selected) {
+      iconType = "selected";
+    } else if (mainSelected) {
+      iconType = "selected";
+    } else if (focused) {
+      iconType = "focused";
+    } else if (expanded) {
+      iconType = "expanded";
+    }
+
+    return <Component iconType={iconType} />;
+  }, [
+    focused,
+    expanded,
+    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"}
          >
--- a/com.twin.app.shoptime/src/components/TabLayout/TabItem.module.less
+++ b/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%;
  }
--- a/com.twin.app.shoptime/src/components/TabLayout/TabItemSub.jsx
+++ b/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;
--- a/com.twin.app.shoptime/src/components/TabLayout/TabItemSub.module.less
+++ b/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;
    }
 }

--- a/com.twin.app.shoptime/src/components/TabLayout/TabLayout.jsx
+++ b/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) &&
-                          item.target[0]?.panelInfo &&
-                          panels[0]?.panelInfo === item.target[0]?.panelInfo)
+                        Array.isArray(item.target) &&
+                        item.target[0]?.panelInfo &&
+                        panels[0]?.panelInfo === item.target[0]?.panelInfo
                      }
                    />
                  );
--- a/com.twin.app.shoptime/src/components/TabLayout/TabLayout.module.less
+++ b/com.twin.app.shoptime/src/components/TabLayout/TabLayout.module.less
@@ -39,8 +39,8 @@
  justify-content: center;
  z-index: 1;
  flex-grow: 0;
-
  // transition: width 0.5s ease;
+
  
  > img {
    width: 54px;