TabLayout focus 수정(진행중)

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

@@ -12,7 +12,6 @@ import compose from "ramda/src/compose";
 import { Job } from "@enact/core/util";
 import { Marquee, MarqueeController } from "@enact/sandstone/Marquee";
 import Spottable from "@enact/spotlight/Spottable";
-import { getTargetByDirectionFromElement } from "@enact/spotlight/src/target";
 
 import css from "./TabItem.module.less";
 
@@ -24,23 +23,17 @@ const TabItemBase = ({
   selected = false,
   index = 0,
   target,
-  panel,
   deActivateTab,
-  className,
   onClick,
-  mainExpandend,
   lgCatCd,
   isSubItem,
-  subTitle,
-  showSubTab = false,
   onFocus,
   path,
+  isArrow = false,
   ...rest
 }) => {
   const [focused, setFocused] = useState(false);
-  // const [subFocused , setSubFocused] = useState(false)
   const [pressed, setPressed] = useState(false);
-  const [changeFocused, setChangeFocused] = useState(false);
   const itemRef = useRef();
 
   const clearPressedJob = useRef(
@@ -51,16 +44,11 @@ const TabItemBase = ({
   const _onClick = useCallback(
     (ev) => {
       setPressed(true);
-      setChangeFocused(false);
       clearPressedJob.current.start(() => {
         if (onClick) {
           onClick({ index, target });
         }
       });
-
-      setPressed(true);
-
-      onClick({ index, target });
     },
     [target, index, onClick]
   );
@@ -69,38 +57,56 @@ const TabItemBase = ({
 
   const _onFocus = useCallback(() => {
     setFocused(true);
-
     if (onFocus) {
       onFocus(index);
     }
-  }, [index]);
+  }, [index, isArrow]);
 
   const _onBlur = useCallback(() => {
     setFocused(false);
     setPressed(false);
-    setChangeFocused(true);
-    clearPressedJob.current.stop();
   }, []);
 
   const isDivider = useMemo(() => {
-    return !title;
+    if (!title || !path) {
+      return false;
+    }
+    return true;
   }, []);
 
   const onKeyDown = useCallback(
     (event) => {
       if (event.key === "ArrowRight") {
-        const next = getTargetByDirectionFromElement(
-          "right",
-          itemRef.current.node
-        );
-        if (!next && deActivateTab) {
-          deActivateTab();
-        }
+        _onClick();
       }
     },
     [deActivateTab]
   );
 
+  const ImageComponent = useCallback(() => {
+    return (
+      <>
+        <span className={classNames(css.outline)} />
+        <img src={path} alt="" />
+      </>
+    );
+  }, [path]);
+
+  const TextComponent = useCallback(() => {
+    return (
+      <>
+        {expanded && (
+          <Marquee
+            marqueeOn={"focus"}
+            className={classNames(css.text, isSubItem && css.subItem)}
+          >
+            {title}
+          </Marquee>
+        )}
+      </>
+    );
+  }, [title]);
+
   const renderIcon = useCallback(() => {
     if (icons) {
       const Component = icons;
@@ -120,7 +126,7 @@ const TabItemBase = ({
     } else {
       return null;
     }
-  }, [focused, expanded]);
+  }, [focused, expanded, selected]);
 
   delete rest.hasChildren;
   delete rest.getChildren;
@@ -129,30 +135,26 @@ const TabItemBase = ({
       ref={itemRef}
       className={classNames(
         css.tabItem,
-        focused && css.focused,
+        !path && focused && css.focused,
+        !isSubItem && focused && isArrow && css.arrow,
+
+        path && css.path,
         isSubItem && css.subDepth,
-        pressed && css.arrow,
-        !isDivider && selected && css.selected
+        !path && !isDivider && selected && css.selected,
+        focused && path && css.ImgFocus,
+        selected && css.ImgSelect
       )}
       onKeyDown={onKeyDown}
       onFocus={_onFocus}
       onBlur={_onBlur}
       onClick={_onClick}
-      spotlightDisabled={isDivider}
     >
-      <div className={classNames(css.layout, focused && css.focused)}>
+      <div className={css.layout}>
         {icons && <div className={css.icon}>{renderIcon()}</div>}
         <div className={classNames(isSubItem && css.subWrap)}>
-          <span className={classNames(css[`category-icon-${lgCatCd}`])} />
+          <span className={css[`category-icon-${lgCatCd}`]} />
 
-          {expanded && (
-            <Marquee
-              marqueeOn={"focus"}
-              className={classNames(css.text, isSubItem && css.subItem)}
-            >
-              {path ? <img src={path} alt="" /> : title}
-            </Marquee>
-          )}
+          {path ? <ImageComponent /> : <TextComponent />}
         </div>
       </div>
     </SpottableComponent>

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

@@ -3,16 +3,25 @@
 
 @ICON_SIZE: 48px;
 
+.spottable-next-left {
+  display:none;
+}
+
+
 .tabItem{
     font-size: 36px;
     display: flex;
     color: #606060;
     align-items: center;
     height: 84px;
-   
+    position: relative;
     padding-left: 42px;
     padding-right: 24px;
 
+    // .spottable-next-left {
+    //   background-color: red;
+    // }
+
     &.focused {
       color: #eee;
       background: linear-gradient(to right, #cb1253, #e15ba1);
@@ -21,42 +30,80 @@
       z-index: 1;
       margin-left: 30px;
       position:relative;
-      > div{
-        margin-left:-30px;
-      }
 
-  }
+      &.arrow {
+        &::after {
+          content: "";
+          .size(@w:36px, @h:36px);
+          .position(@position: absolute, @top: 24px, @right: 18px);
+          background-image: url('../../../assets/icons/ic-lnb-right-arrow.png');
+          background-size: 36px 36px;      
+        } }
+          > div{
+            margin-left:-30px;
+          }
 
-  &.arrow {
-    &::after {
-      content: "";
-      .size(@w:36px, @h:36px);
-      .position(@position: absolute, @top: 24px, @right: 18px);
-      background-image: url('../../../assets/icons/ic-lnb-right-arrow.png');
-      background-size: 36px 36px;
-      
-      
     }
-  }
+
+
     &.selected {
       color: #eee;
     }
-   
+
     &.subDepth{
       width: 386px;
       height: 78px;
-      margin-left: 0;
+      padding-left: 42px;
 
       &.focused {
         background: rgba(255, 255, 255, .1);
         border-radius: 0px;
         border-right: 6px solid #c70850;
+        margin-left: 0px;
         > div {
         padding-left: 30px;
+        }   
+      } 
+      &.path {
+        padding-left: 0px;
+        margin-bottom: 70px;
+      }
+    .outline {
+      .position(@position: absolute, @top: 0, @right: auto, @bottom: auto, @left: 0);
+      .size(@w: 138px, @h:138px);
+      
+      background-position: center;
+      background-size: cover;
 
-  
+    }
 
-}}}
+    img {
+      .size(@w: 120px, @h: 120px);
+    }
+
+    &.ImgFocus {
+      .outline {
+        border-radius: 60px;
+        z-index: 99;
+       // box-shadow: -3px 0px 30px 0 #c70850;
+        // border: solid 1px #dadada;
+        background-image: url("../../../assets/icons/ic-tab-partners-focus@3x.png");
+      }
+      img {
+        .size(@w: 138px, @h: 138px);
+        
+      } 
+    }
+
+    &.ImgSelect {
+      img {
+        .size(@w: 138px, @h: 138px);
+      }
+      .outline {
+        background-image: url("../../../assets/icons/ic-tab-partners-lnb-selected@3x.png");
+      }
+    }
+  }
 
 .icon {
     position: relative;
@@ -77,31 +124,29 @@
         left: 50%;
         transform: translate(-50%, -50%);
       } 
-
-
 }
-
 .text {
     line-height: 1.2;
     padding-left: 11px;
     .font(@fontFamily:@baseFontBold, @fontSize:36px);
     
-
- 
     &.subItem {
       .font (@fontFamily:@baseFontBold, @fontSize:30px);
-      width: 245px;
-      
+      width: 245px; 
     }
-  
-
+}
+.layout {
+  display: flex;
 }
 
+.marqueeWrap {
+    width: 100%;
+  }
+}
 .subWrap{
   .flex();
 
-
-   span {
+  span {
     .size(@w: 40px, @h:40px);
     background-size: cover;
     &.category-icon-1017 {
@@ -168,23 +213,8 @@
     &.category-icon-1013 {
       background-image: url("../../../assets/icons/ic-category-clearance-nor.png");
     }
-   }
- 
-  
-  
 }
-
-.layout {
-  display: flex;
-  
-  &.focused, &.selected {
-    // margin-left: -30px;
-  }
 }
 
 
-.marqueeWrap {
-    width: 100%;
-  }
-}
 

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

@@ -34,8 +34,6 @@ import TrendingNowIcon from "./iconComponents/TrendingNowIcon";
 import TabItem from "./TabItem";
 import css from "./TabLayout.module.less";
 
-//이미지
-
 const Container = SpotlightContainerDecorator(
   { enterTo: "default-element" },
   "div"
@@ -179,7 +177,9 @@ export default function TabLayout({ topPanelName, onTabActivated }) {
 
       case "Featured Brands":
         result = data?.shortFeaturedBrands.map((item) => ({
+          Id: item.patnrId,
           path: item.patncLogoPath,
+          target: [{ name: panel_names.FEATURED_BRANDS_PANEL }],
         }));
         break;
       case "My Page":
@@ -225,6 +225,7 @@ export default function TabLayout({ topPanelName, onTabActivated }) {
                 id: subItem.id,
                 title: subItem.title,
                 path: subItem.path,
+                target: subItem.target,
               }));
             }
           }
@@ -272,7 +273,8 @@ export default function TabLayout({ topPanelName, onTabActivated }) {
             const children = parent.childNodes;
             const index = Array.prototype.indexOf.call(children, event.target);
             setMainExpanded(true);
-            setMainSelectedIndex(index);
+            setMainSelectedIndex(index - 1);
+            setSecondDepthReduce(false);
           } else {
             if (!panelSwitching.current) {
               setMainExpanded(true);
@@ -288,7 +290,7 @@ export default function TabLayout({ topPanelName, onTabActivated }) {
         }
         case EXTRA_AREA: {
           if (cursorVisible) {
-            deActivateTabJob.start(deActivateTab);
+            // deActivateTabJob.start(deActivateTab);
             return;
           }
         }
@@ -299,7 +301,7 @@ export default function TabLayout({ topPanelName, onTabActivated }) {
         return prev;
       });
     },
-    [cursorVisible, deActivateTab, focused]
+    [cursorVisible, deActivateTab]
   );
 
   const onTabBlur = useCallback(
@@ -307,7 +309,7 @@ export default function TabLayout({ topPanelName, onTabActivated }) {
       switch (type) {
         case ACTIVATED_MAIN: {
           if (!cursorVisible) {
-            setMainExpanded(false);
+            // setMainExpanded(false);
           }
 
           break;
@@ -333,8 +335,12 @@ export default function TabLayout({ topPanelName, onTabActivated }) {
     [cursorVisible]
   );
 
-  const onFocus = () => {
+  const onFocus = (index) => {
     setFocused(true);
+    setMainSelectedIndex(index);
+    if (showSubTab) {
+      setSecondDepthReduce((prev) => !prev);
+    }
   };
 
   const onBlur = () => {
@@ -343,7 +349,6 @@ export default function TabLayout({ topPanelName, onTabActivated }) {
 
   const handleNavigation = useCallback(
     ({ index, target }) => {
-      setMainSelectedIndex(index);
       if (target) {
         dispatch(resetPanels(target));
         deActivateTab();
@@ -359,6 +364,7 @@ export default function TabLayout({ topPanelName, onTabActivated }) {
   const onClickSubItem = useCallback(
     ({ index, target }) => {
       if (target) {
+        dispatch(resetPanels(target));
         deActivateTab();
         panelSwitching.current = true;
         panelSwitchingJob.start(panelSwitching);
@@ -418,19 +424,17 @@ export default function TabLayout({ topPanelName, onTabActivated }) {
     }
   }, [tabActivated, showTab]);
 
-  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]);
+  }, [secondDepthReduce, showSubTab, focused]);
+
   if (!showTab) {
     return null;
   }
@@ -485,6 +489,7 @@ export default function TabLayout({ topPanelName, onTabActivated }) {
                   key={"tabitemExpanded" + index}
                   onClick={handleNavigation}
                   deActivateTab={deActivateTab}
+                  isArrow={showSubTab}
                   icons={item.icons}
                   expanded={mainExpanded}
                   selected={
@@ -505,7 +510,7 @@ export default function TabLayout({ topPanelName, onTabActivated }) {
               className={classNames(
                 css.tabWrap,
                 css.secondDepthLayout,
-                // secondDepthReduce && css.
+                secondDepthReduce && css.secondDepthReduce,
                 !showSubTab && css.hide
               )}
               onFocus={onTabHasFocus(ACTIVATED_SUB)}
@@ -517,16 +522,23 @@ export default function TabLayout({ topPanelName, onTabActivated }) {
                 tabs[mainSelectedIndex]?.children.map((item, index) => {
                   return (
                     <TabItem
+                      {...item}
                       key={"tabitemSubmenu" + index}
                       onClick={onClickSubItem}
                       expanded={true}
                       index={index}
                       isSubItem={true}
-                      showSubTab={showSubTab}
                       deActivateTab={deActivateTab}
                       title={item.title}
                       lgCatCd={item.id}
                       path={item.path}
+                      isArrow={showSubTab}
+                      // selected={
+                      //   (panels.length === 0 && index === 0) ||
+                      //   (Array.isArray(item.target) &&
+                      //     item.target[0]?.name &&
+                      //     panels[0]?.name === item.target[0]?.name)
+                      // }
                     />
                   );
                 })}

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

@@ -8,8 +8,7 @@
   left: 0;
   top: 0;
   display: flex;
-  // display: none;
-
+  
   &.hide {
     width: auto;
   }
@@ -40,8 +39,8 @@
   justify-content: center;
   z-index: 1;
   flex-grow: 0;
-  transition: width 0.5s ease;
-
+  // transition: width 0.5s ease;
+  
   > img {
     width: 54px;
     height: 54px;
@@ -66,6 +65,16 @@
     padding-top: 71px;
     z-index: 0;
     justify-content: flex-start;
+
+    &.secondDepthReduce {
+        width: 216px;
+        // transition: width 0.5s ease;
+
+        // > div {
+        //   margin-bottom: 90px;
+        // }
+
+    }
   }
   &.extraArea {
     flex-grow: 1;