카테고리 부분 포커스 셀렉트 변경건.

com.twin.app.shoptime/src/views/HomePanel/SubCategory/CategoryNav/CategoryNavItem/CategoryNavItem.module.less

@@ -2,12 +2,90 @@
 @import "../../../../../style/utils.module.less";
 
 .category {
+  &.selected {
+    div {
+      background-color: @COLOR_WHITE;
+      border: solid 2px @PRIMARY_COLOR_RED;
+    }
+
+    strong {
+      color: @PRIMARY_COLOR_RED;
+    }
+    span {
+      .size(@w: 80px, @h:80px);
+      background-position: center;
+      background-size: cover;
+      border-radius: 50%;
+      &.category-icon-1017 {
+        // LG Electronics
+        background-image: url("../../../../../../assets/images/icons/ic-category-lgelectronics-foc@3x.png");
+      }
+
+      // Garden and Outdoors
+      &.category-icon-1008 {
+        background-image: url("../../../../../../assets/images/icons/ic-category-garden-foc@3x.png");
+      }
+
+      // Fashion
+      &.category-icon-1000 {
+        background-image: url("../../../../../../assets/images/icons/ic-category-fashion-foc@3x.png");
+      }
+
+      // Beauty
+      &.category-icon-1003 {
+        background-image: url("../../../../../../assets/images/icons/ic-category-beauty-foc@3x.png");
+      }
+
+      // Jewelry
+      &.category-icon-1004 {
+        background-image: url("../../../../../../assets/images/icons/ic-category-jewelry-foc@3x.png");
+      }
+
+      // Home
+      &.category-icon-1006 {
+        background-image: url("../../../../../../assets/images/icons/ic-category-home-foc@3x.png");
+      }
+
+      // Kitchen & Food
+      &.category-icon-1007 {
+        background-image: url("../../../../../../assets/images/icons/ic-category-kitchen-foc@3x.png");
+      }
+
+      // Accessories
+      &.category-icon-1014 {
+        background-image: url("../../../../../../assets/images/icons/ic-category-accessories-no@3x.png");
+      }
+
+      // Heaclth & Fitness
+      &.category-icon-1009 {
+        background-image: url("../../../../../../assets/images/icons/ic-category-health-foc@3x.png");
+      }
+
+      // Crafts & Sewing
+      &.category-icon-1011 {
+        background-image: url("../../../../../../assets/images/icons/ic-category-cw-foc@3x.png");
+      }
+
+      // Electronics
+      &.category-icon-1010 {
+        background-image: url("../../../../../../assets/images/icons/ic-category-electronics-foc@3x.png");
+      }
+
+      // Clearance
+      &.category-icon-1013 {
+        background-image: url("../../../../../../assets/images/icons/ic-category-clearance-foc@3x.png");
+      }
+    }
+  }
   /* normal */
   position: relative;
   .flex(@direction: column);
   color: @COLOR_GRAY08;
   text-align: center;
-
+  padding-top: 20px;
+  &:focus {
+    background-color: #eaeaea;
+  }
   div {
     .flex();
     .size(@w: 94px, @h: 94px);
@@ -104,13 +182,76 @@
     div {
       background-color: @PRIMARY_COLOR_RED;
       border: solid 2px @PRIMARY_COLOR_RED;
-      box-shadow: 0 0 25px 0 rgba(2, 3, 3, 0.8);
     }
 
     strong {
       color: @PRIMARY_COLOR_RED;
     }
+    span {
+      .size(@w: 80px, @h:80px);
+      background-position: center;
+      background-size: cover;
 
+      &.category-icon-1017 {
+        // LG Electronics
+        background-image: url("../../../../../../assets/images/icons/ic-category-lgelectronics-nor@3x.png");
+      }
+
+      // Garden and Outdoors
+      &.category-icon-1008 {
+        background-image: url("../../../../../../assets/images/icons/ic-category-garden-nor@3x.png");
+      }
+
+      // Fashion
+      &.category-icon-1000 {
+        background-image: url("../../../../../../assets/images/icons/ic-category-fashion-nor@3x.png");
+      }
+
+      // Beauty
+      &.category-icon-1003 {
+        background-image: url("../../../../../../assets/images/icons/ic-category-beauty-nor@3x.png");
+      }
+
+      // Jewelry
+      &.category-icon-1004 {
+        background-image: url("../../../../../../assets/images/icons/ic-category-jewelry-nor@3x.png");
+      }
+
+      // Home
+      &.category-icon-1006 {
+        background-image: url("../../../../../../assets/images/icons/ic-category-home-nor@3x.png");
+      }
+
+      // Kitchen & Food
+      &.category-icon-1007 {
+        background-image: url("../../../../../../assets/images/icons/ic-category-kitchen-nor@3x.png");
+      }
+
+      // Accessories
+      &.category-icon-1014 {
+        background-image: url("../../../../../../assets/images/icons/ic-category-accessories-nor@3x.png");
+      }
+
+      // Heaclth & Fitness
+      &.category-icon-1009 {
+        background-image: url("../../../../../../assets/images/icons/ic-category-health-nor@3x.png");
+      }
+
+      // Crafts & Sewing
+      &.category-icon-1011 {
+        background-image: url("../../../../../../assets/images/icons/ic-category-cw-nor@3x.png");
+      }
+
+      // Electronics
+      &.category-icon-1010 {
+        background-image: url("../../../../../../assets/images/icons/ic-category-electronics-nor@3x.png");
+      }
+
+      // Clearance
+      &.category-icon-1013 {
+        background-image: url("../../../../../../assets/images/icons/ic-category-clearance-nor@3x.png");
+      }
+    }
     &::after {
       background-color: @PRIMARY_COLOR_RED;
     }
@@ -118,13 +259,3 @@
 }
 
 /* selected */
-.selected {
-  div {
-    background-color: @SELECTED_COLOR_RED;
-    border: solid 2px @SELECTED_COLOR_RED;
-  }
-
-  strong {
-    color: @SELECTED_COLOR_RED;
-  }
-}

com.twin.app.shoptime/src/views/OnSalePanel/OnSaleNav/OnSaleNavItem/OnSaleNavItem.module.less

@@ -2,12 +2,88 @@
 @import "../../../../style/utils.module.less";
 
 .item {
+  &.selected {
+    > figure:nth-child(1) {
+      background-color: @COLOR_WHITE;
+      border: solid 2px @PRIMARY_COLOR_RED;
+      > div {
+        .size(@w: 80px, @h:80px);
+        background-position: center;
+        background-size: cover;
+
+        &.icon-1017 {
+          // LG Electronics
+          background-image: url("../../../../../assets/images/icons/ic-category-lgelectronics-foc@3x.png");
+        }
+
+        // Garden and Outdoors
+        &.icon-1008 {
+          background-image: url("../../../../../assets/images/icons/ic-category-garden-foc@3x.png");
+        }
+
+        // Fashion
+        &.icon-1000 {
+          background-image: url("../../../../../assets/images/icons/ic-category-fashion-foc@3x.png");
+        }
+
+        // Beauty
+        &.icon-1003 {
+          background-image: url("../../../../../assets/images/icons/ic-category-beauty-foc@3x.png");
+        }
+
+        // Jewelry
+        &.icon-1004 {
+          background-image: url("../../../../../assets/images/icons/ic-category-jewelry-foc@3x.png");
+        }
+
+        // Home
+        &.icon-1006 {
+          background-image: url("../../../../../assets/images/icons/ic-category-home-foc@3x.png");
+        }
+
+        // Kitchen & Food
+        &.icon-1007 {
+          background-image: url("../../../../../assets/images/icons/ic-category-kitchen-foc@3x.png");
+        }
+
+        // Accessories
+        &.icon-1014 {
+          background-image: url("../../../../../assets/images/icons/ic-category-accessories-no@3x.png");
+        }
+
+        // Heaclth & Fitness
+        &.icon-1009 {
+          background-image: url("../../../../../assets/images/icons/ic-category-health-foc@3x.png");
+        }
+
+        // Crafts & Sewing
+        &.icon-1011 {
+          background-image: url("../../../../../assets/images/icons/ic-category-cw-foc@3x.png");
+        }
+
+        // Electronics
+        &.icon-1010 {
+          background-image: url("../../../../../assets/images/icons/ic-category-electronics-foc@3x.png");
+        }
+
+        // Clearance
+        &.icon-1013 {
+          background-image: url("../../../../../assets/images/icons/ic-category-clearance-foc@3x.png");
+        }
+      }
+    }
+
+    > strong:nth-child(2) {
+      color: @PRIMARY_COLOR_RED;
+    }
+  }
   position: relative;
   .flex(@direction: column);
   min-width: 210px;
-  margin: 50px 30px 0 0;
+  margin: 30px 30px 0 0;
   color: @COLOR_GRAY08;
   text-align: center;
+  padding-top: 20px;
 
   > figure:nth-child(1) {
     .flex();
@@ -88,21 +164,73 @@
     height: 60px;
     margin-bottom: 12px;
   }
-
-  &::after {
-    .position(@position: absolute, @bottom: 0);
-    display: block;
-    .size(@w: 100%, @h:6px);
-    background-color: transparent;
-    content: "";
-  }
-
   // focused
   &:focus {
+    background-color: #eaeaea;
     > figure:nth-child(1) {
       background-color: @PRIMARY_COLOR_RED;
       border: solid 2px @PRIMARY_COLOR_RED;
-      box-shadow: 0 0 22px 0 rgba(2, 3, 3, 0.8);
+      > div {
+        &.icon-1017 {
+          // LG Electronics
+          background-image: url("../../../../../assets/images/icons/ic-category-lgelectronics-nor@3x.png");
+        }
+
+        // Garden and Outdoors
+        &.icon-1008 {
+          background-image: url("../../../../../assets/images/icons/ic-category-garden-nor@3x.png");
+        }
+
+        // Fashion
+        &.icon-1000 {
+          background-image: url("../../../../../assets/images/icons/ic-category-fashion-nor@3x.png");
+        }
+
+        // Beauty
+        &.icon-1003 {
+          background-image: url("../../../../../assets/images/icons/ic-category-beauty-nor@3x.png");
+        }
+
+        // Jewelry
+        &.icon-1004 {
+          background-image: url("../../../../../assets/images/icons/ic-category-jewelry-nor@3x.png");
+        }
+
+        // Home
+        &.icon-1006 {
+          background-image: url("../../../../../assets/images/icons/ic-category-home-nor@3x.png");
+        }
+
+        // Kitchen & Food
+        &.icon-1007 {
+          background-image: url("../../../../../assets/images/icons/ic-category-kitchen-nor@3x.png");
+        }
+
+        // Accessories
+        &.icon-1014 {
+          background-image: url("../../../../../assets/images/icons/ic-category-accessories-nor@3x.png");
+        }
+
+        // Heaclth & Fitness
+        &.icon-1009 {
+          background-image: url("../../../../../assets/images/icons/ic-category-health-nor@3x.png");
+        }
+
+        // Crafts & Sewing
+        &.icon-1011 {
+          background-image: url("../../../../../assets/images/icons/ic-category-cw-nor@3x.png");
+        }
+
+        // Electronics
+        &.icon-1010 {
+          background-image: url("../../../../../assets/images/icons/ic-category-electronics-nor@3x.png");
+        }
+
+        // Clearance
+        &.icon-1013 {
+          background-image: url("../../../../../assets/images/icons/ic-category-clearance-nor@3x.png");
+        }
+      }
     }
 
     > strong:nth-child(2) {
@@ -113,16 +241,13 @@
       background-color: @PRIMARY_COLOR_RED;
     }
   }
+  &::after {
+    .position(@position: absolute, @bottom: 0);
+    display: block;
+    .size(@w: 100%, @h:6px);
+    background-color: transparent;
+    content: "";
+  }
 }
 
 // selected
-.selected {
-  > figure:nth-child(1) {
-    background-color: @SELECTED_COLOR_RED;
-    border: solid 2px @SELECTED_COLOR_RED;
-  }
-
-  > strong:nth-child(2) {
-    color: @SELECTED_COLOR_RED;
-  }
-}