featured Bradns focus && selected 작업 완료

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

@@ -22,13 +22,10 @@ const TabItemBase = ({
   isSubItem,
   onFocus,
   showSubTab = false,
-  temp,
-  setTemp,
   mainSelectedIndex,
   ...rest
 }) => {
   const [focused, setFocused] = useState(false);
-  const [fixed, setFixed] = useState(false);
   const clearPressedJob = useRef(
     new Job((func) => {
       setTimeout(func, 100);
@@ -96,8 +93,6 @@ const TabItemBase = ({
       className={classNames(
         css.tabItem,
         (focused || index === mainSelectedIndex) && css.focused,
-        // focused && css.focused,
-        showSubTab && fixed && css.fixed,
         !isSubItem &&
           (focused || index === mainSelectedIndex) &&
           showSubTab &&
@@ -124,7 +119,6 @@ const TabItemBase = ({
             {title}
           </Marquee>
         )}
-        {/* <TabItemSub /> */}
       </div>
     </SpottableComponent>
   );

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

@@ -38,26 +38,6 @@
       color: #eee;
     }
 
-    &.fixed {
-        color: #eee;
-        background: linear-gradient(to right, #cb1253, #e15ba1);
-        border-radius: 42px;
-        width: 402px;
-        z-index: 1;
-        margin-left: 30px;
-        position:relative;
-  
-        &.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;      
-          } 
-        }
-      
-    }
 
 .itemWrap {
     display: flex;

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

@@ -11,19 +11,17 @@ import css from "./TabItemSub.module.less";
 
 const SpottableComponent = Spottable("div");
 const TabItemBase = ({
-  title,
-  expanded = false,
   selected = false,
+  expanded = false,
   index = 0,
+  title,
   target,
   deActivateTab,
   onClick,
   lgCatCd,
   isSubItem,
   onFocus,
-  onBlur,
   path,
-  subTitle,
   ...rest
 }) => {
   const [focused, setFocused] = useState(false);
@@ -54,10 +52,6 @@ const TabItemBase = ({
 
   const _onBlur = useCallback(() => {
     setFocused(false);
-
-    if (onBlur) {
-      onBlur(index);
-    }
   }, [index]);
 
   const onKeyDown = useCallback(
@@ -71,12 +65,19 @@ const TabItemBase = ({
 
   const ImageComponent = useCallback(() => {
     return (
-      <div className={css.imageLayout}>
+      <div
-        <span className={classNames(css.outline)} />
+        className={classNames(
+          css.imageWrap,
+          focused && css.focused,
+          selected && css.selected,
+          focused && selected && css.selectedFocus
+        )}
+      >
         <img src={path} alt="" />
+        <span className={classNames(css.outline)} />
       </div>
     );
-  }, [path]);
+  }, [path, focused, selected]);
 
   const TextComponent = useCallback(() => {
     return (
@@ -102,20 +103,23 @@ const TabItemBase = ({
         css.tabItem,
         !path && focused && css.focused,
         path && css.path
-
-        // focused && path && css.imageFocus,
-        // selected && css.imageSelect
       )}
       onKeyDown={onKeyDown}
       onFocus={_onFocus}
       onBlur={_onBlur}
       onClick={_onClick}
     >
-      <div className={css.layout}>
+      <div className={classNames(isSubItem && css.subWrap)}>
-        <div className={classNames(isSubItem && css.subWrap)}>
+        {!path && (
-          {!path && <span className={css[`category-icon-${lgCatCd}`]} />}
+          <span
-          {path ? <ImageComponent /> : <TextComponent />}
+            className={classNames(
-        </div>
+              css.icon,
+              focused && css.focused,
+              css[`category-icon-${lgCatCd}`]
+            )}
+          />
+        )}
+        {path ? <ImageComponent /> : <TextComponent />}
       </div>
     </SpottableComponent>
   );

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

@@ -12,7 +12,7 @@
     position: relative;
     padding-left: 42px;
     padding-right: 24px;
-
+ 
 
     &.focused {
         background: rgba(255, 255, 255, .1);
@@ -32,43 +32,59 @@
     color: #eee;
     }
 
-
+.imageWrap {
-.imageLayout {
+    position: relative;
-    &.outline {
+    margin:0 30px 0 48px;
-        .position(@position: absolute, @top: 0, @right: auto, @bottom: auto, @left: 0);
+    img {
-        .size(@w: 138px, @h:138px);
-        background-position: center;
-        background-size: cover;
-
-        > img {
         .size(@w: 120px, @h: 120px);
-        }
+        object-fit: contain;
-    }
-    &.imageFocus {
-        .outline {
-            .focusDropShadow();
-            border-radius: 60px;
-            z-index: 99;
-            background-image: url("../../../assets/icons/ic-tab-partners-focus@3x.png");
-
-            // box-shadow: -3px 0px 30px 0 #c70850;
-         // border: solid 1px #dadada;
-        > 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");
-    //   }
-    // }
-
     }
     
+   span {
+        .position(@position: absolute, @top: 0, @right: 0, @bottom: 0, @left: 0);
+        .size(@w: 140px, @h: 140px);
+    
+        background-position: center;
+        background-size: cover;
+       
+    }
+
+    &.focused {
+        
+        img {
+            box-shadow: -3px 0px 30px 0 #c70850;
+            border-radius: 37%;
+            .size(@w: 138px, @h: 138px);
+            object-fit: contain;
+
+            
+        }
+        span {
+            background-image: url('../../../assets/icons/ic-tab-partners-focus@3x.png');
+        }
+        }
+    &.selected {
+        img {
+            .size(@w: 138px, @h: 138px);
+            object-fit: contain;
+        }
+        span {
+            background-image: url('../../../assets/icons/ic-tab-partners-lnb-selected@3x.png');
+        }
+    }
+    &.selectedFocus {
+        img {
+            box-shadow: -3px 0px 30px 0 #808080;
+            border-radius: 37%;
+        }
+       
+    }
+
+}
+
+
+
+
 
 .text {
     line-height: 1.2;
@@ -81,10 +97,11 @@
     }
 }
 
+
 .subWrap{
 .flex();
 
-    span {
+    .icon {
     .size(@w: 40px, @h:40px);
     background-size: cover;
     &.category-icon-1017 {
@@ -151,6 +168,69 @@
     &.category-icon-1013 {
         background-image: url("../../../assets/icons/ic-category-clearance-nor.png");
     }
+
+    &.focused {
+        // LG Electronics
+        &.category-icon-1017 {
+            background-image: url("../../../assets/category/ic-category-lgelectronics-nor@3x.png");
+            }
+    
+        // Garden and Outdoors
+        &.category-icon-1008 {
+            background-image: url("../../../assets/category/ic-category-garden-nor@3x.png");
+            }
+    
+        // Fashion
+        &.category-icon-1000 {
+            background-image: url("../../../assets/category/ic-category-fashion-nor@3x.png");
+            }
+    
+        // Beauty
+        &.category-icon-1003 {
+            background-image: url("../../../assets/category/ic-category-beauty-nor@3x.png");
+            }
+    
+        // Jewelry
+        &.category-icon-1004 {
+            background-image: url("../../../assets/category/ic-category-jewelry-nor@3x.png");
+            }
+    
+        // Home
+        &.category-icon-1006 {
+            background-image: url("../../../assets/category/ic-category-home-nor@3x.png");
+            }
+    
+        // Kitchen & Food
+        &.category-icon-1007 {
+            background-image: url("../../../assets/category/ic-category-kitchen-nor@3x.png");
+            }
+    
+        // Accessories
+        &.category-icon-1014 {
+            background-image: url("../../../assets/category/ic-category-accessories-nor@3x.png");
+            }
+    
+        // Heaclth & Fitness
+        &.category-icon-1009 {
+            background-image: url("../../../assets/category/ic-category-health-nor@3x.png");
+            }
+    
+        // Crafts & Sewing
+        &.category-icon-1011 {
+            background-image: url("../../../assets/category/ic-category-cw-nor@3x.png");
+            }
+    
+        // Electronics
+        &.category-icon-1010 {
+            background-image: url("../../../assets/category/ic-category-electronics-nor@3x.png");
+            }
+    
+        // Clearance
+        &.category-icon-1013 {
+            background-image: url("../../../assets/category/ic-category-clearance-nor@3x.png");
+            
+        }
+    }
 }
 
 }

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

@@ -506,8 +506,6 @@ export default function TabLayout({ topPanelName, onTabActivated }) {
                   showSubTab={showSubTab}
                   icons={item.icons}
                   expanded={mainExpanded}
-                  temp={temp}
-                  setTemp={setTemp}
                   selected={
                     (panels.length === 0 && index === 0) ||
                     (Array.isArray(item.target) &&
@@ -540,7 +538,6 @@ export default function TabLayout({ topPanelName, onTabActivated }) {
                   return (
                     <TabItemSub
                       {...item}
-                      onBlur={onBlur}
                       key={"tabitemSubmenu" + index}
                       onClick={onClickSubItem}
                       expanded={true}
@@ -551,12 +548,12 @@ export default function TabLayout({ topPanelName, onTabActivated }) {
                       lgCatCd={item.id}
                       path={item.path}
                       showSubTab={showSubTab}
-                      // selected={
+                      selected={
-                      //   (panels.length === 0 && index === 0) ||
+                        (panels.length === 0 && index === 0) ||
-                      //   (Array.isArray(item.target) &&
+                        (Array.isArray(item.target) &&
-                      //     item.target[0]?.name &&
+                          item.target[0]?.panelInfo &&
-                      //     panels[0]?.name === item.target[0]?.name)
+                          panels[0]?.panelInfo === item.target[0]?.panelInfo)
-                      // }
+                      }
                     />
                   );
                 })}

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

@@ -71,11 +71,6 @@
 
     &.secondDepthReduce {
         width: 216px;
-        // transition: width 0.5s ease;
-
-        // > div {
-        //   margin-bottom: 90px;
-        // }
 
     }
   }