[HomePanel] 공통 스타일 적용건.

- util.module.less 적용건
2024-02-15 13:48:29 +09:00
parent ba50a2f425
commit aa09918513
11 changed files with 194 additions and 371 deletions
--- a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate1.module.less
+++ b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate1.module.less
@@ -1,7 +1,8 @@
@import "../../../style/CommonStyle.module.less";
+@import "../../../style/utils.module.less";

 .container {
-  background-color: #f8f8f8;
+  background-color: @BG_COLOR_01;
  display: flex;
 }

@@ -10,73 +11,58 @@
  display: flex;
  img,
  video {
-    width: 100%;
-    height: 100%;
+    .size(@w: 100%, @h: 100%);
    object-fit: cover;
  }
 }
 .leftBannerBox {
-  width: 744px;
-  height: 858px;
+  .size(@w: 744px, @h: 858px);
  margin-right: 18px;
  &.dualBox {
    .topBox {
-      width: 744px;
-      height: 420px;
-
+      .size(@w: 744px, @h: 420px);
+      .border-solid(@size:4px, @color:transparent);
      margin-bottom: 18px;
-      border: 4px solid transparent;
      border-radius: 12px;
      overflow: hidden;
      &:focus,
      &:hover,
      &:focus-within,
      &:active {
-        border: 4px solid @PRIMARY_COLOR_RED;
-        box-sizing: border-box;
-        .focusDropShadow();
-        border-radius: 12px;
+        .focused(@boxShadow: 22px, @borderRadius: 12px);
+        position: unset;
      }
    }
    .underBox {
-      width: 744px;
-      height: 420px;
-
-      border: 4px solid transparent;
+      .size(@w: 744px, @h: 420px);
+      .border-solid(@size:4px, @color:transparent);
      border-radius: 12px;
      overflow: hidden;
      &:focus,
      &:hover,
      &:focus-within,
      &:active {
-        border: 4px solid @PRIMARY_COLOR_RED;
-        box-sizing: border-box;
-        .focusDropShadow();
-        border-radius: 12px;
+        .focused(@boxShadow: 22px, @borderRadius: 12px);
+        position: unset;
      }
    }
  }
 }
 .videoBox {
-  width: 744px;
-  height: 420px;
+  .size(@w: 744px, @h: 420px);
+  .border-solid(@size:4px, @color:transparent);
  margin: 0 18px 18px 0;
-  border: 4px solid transparent;
-
  border-radius: 12px;
  overflow: hidden;
  &:focus,
  &:hover,
  &:focus-within,
  &:active {
-    border: 4px solid @PRIMARY_COLOR_RED;
-    box-sizing: border-box;
-    .focusDropShadow();
-    border-radius: 12px;
+    .focused(@boxShadow: 22px, @borderRadius: 12px);
+    position: unset;
  }
  .videoPlayer {
-    width: 744px;
-    height: 420px;
+    .size(@w: 744px, @h: 420px);
    outline: "teal dashed 1px";
    transform: "scale(1)";
    border-radius: 12px;
@@ -84,10 +70,9 @@
 }

 .banner02 {
-  width: 744px;
-  height: 420px;
+  .size(@w: 744px, @h: 420px);
+  .border-solid(@size:4px, @color:transparent);
  border-radius: 12px;
-  border: 4px solid transparent;
  box-sizing: border-box;
  &:focus,
  &:hover,
@@ -101,35 +86,28 @@
 }

 .banner03 {
-  width: 486px;
-  height: 858px;
-  border: 4px solid transparent;
+  .size(@w: 486px, @h: 858px);
+  .border-solid(@size:4px, @color:transparent);
  border-radius: 12px;
-  box-sizing: border-box;
  margin-right: 18px;
  &:focus,
  &:hover,
  &:focus-within,
  &:active {
-    border: 4px solid @PRIMARY_COLOR_RED;
-    box-sizing: border-box;
-    .focusDropShadow();
+    .focused(@boxShadow: 22px, @borderRadius: 12px);
+    position: unset;
  }
 }

 .banner04 {
-  width: 486px;
-  height: 858px;
-  border: 4px solid transparent;
-  box-sizing: border-box;
+  .size(@w: 486px, @h: 858px);
+  .border-solid(@size:4px, @color:transparent);
  &:focus,
  &:hover,
  &:focus-within,
  &:active {
-    border: 4px solid @PRIMARY_COLOR_RED;
-    box-sizing: border-box;
-    .focusDropShadow();
-    border-radius: 12px;
+    .focused(@boxShadow: 22px, @borderRadius: 12px);
+    position: unset;
  }
 }

@@ -173,23 +151,20 @@
  display: flex;

  .imgBox {
-    width: 486px;
-    height: 858px;
+    .size(@w: 486px, @h: 858px);
+    .border-solid(@size:4px, @color:transparent);
    margin-right: 18px;
-    border: 4px solid transparent;
    border-radius: 12px;
    overflow: hidden;
    &:focus,
    &:hover,
    &:focus-within,
    &:active {
-      border: 4px solid @PRIMARY_COLOR_RED;
-      box-sizing: border-box;
-      .focusDropShadow();
+      .focused(@boxShadow: 22px, @borderRadius: 12px);
+      position: unset;
    }
    > img {
-      width: 486px;
-      height: 858px;
+      .size(@w: 486px, @h: 858px);
      object-fit: contain;
    }
  }
--- a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate2.module.less
+++ b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate2.module.less
@@ -1,43 +1,36 @@
@import "../../../style/CommonStyle.module.less";
+@import "../../../style/utils.module.less";

 .container {
-  background-color: #f8f8f8;
-
+  background-color: @BG_COLOR_01;
  .homeTemplateBox {
    margin: 24px 24px 0px;
    .mainBox {
      display: flex;
      img,
      video {
-        width: 100%;
-        height: 100%;
+        .size(@w: 100%, @h: 100%);
        object-fit: cover;
      }
      .longBanner {
-        width: 486px;
-        height: 858px;
-        border: 4px solid transparent;
-        box-sizing: border-box;
+        position: relative;
+        .size(@w: 486px, @h: 858px);
+        .border-solid(@size:4px, @color:transparent);
        border-radius: 12px;
        overflow: hidden;
        &:focus,
        &:active,
        &:hover,
        &:focus-within {
-          border: 4px solid @PRIMARY_COLOR_RED;
-          box-sizing: border-box;
-          .focusDropShadow();
-          border-radius: 12px;
+          .focused(@boxShadow: 22px, @borderRadius: 12px);
+          position: unset;
        }
        &.rollingBox {
          position: relative;
          .rightBtn {
-            position: absolute;
-            right: 18px;
-            top: 408px;
+            .position(@position: absolute, @top: 408px, @right: 18px, @bottom: auto, @left: auto);
            z-index: 1;
-            width: 42px;
-            height: 42px;
+            .size(@w: 42px, @h: 42px);
            background-image: url("../../../../assets/button/42x42/btn-prev-thumb-nor.svg");
            background-size: 42px 42px;
            background-repeat: no-repeat;
@@ -49,12 +42,9 @@
            }
          }
          .leftBtn {
-            position: absolute;
-            left: 18px;
-            top: 408px;
+            .position(@position: absolute, @top: 408px, @right: auto, @bottom: auto, @left: 18px);
            z-index: 1;
-            width: 42px;
-            height: 42px;
+            .size(@w: 42px, @h: 42px);
            background-image: url("../../../../assets/button/42x42/btn-next-thumb-nor.svg");
            background-size: 42px 42px;
            background-repeat: no-repeat;
@@ -69,19 +59,17 @@
      }
      .dualBox {
        .smallBox {
-          width: 744px;
-          height: 420px;
-          border: 4px solid transparent;
+          .size(@w: 744px, @h: 420px);
          border-radius: 12px;
+          .border-solid(@size:4px, @color:transparent);
          overflow: hidden;
+
          &:focus,
          &:active,
          &:hover,
          &:focus-within {
-            border: 4px solid @PRIMARY_COLOR_RED;
-            box-sizing: border-box;
-            .focusDropShadow();
-            border-radius: 12px;
+            .focused(@boxShadow: 22px, @borderRadius: 12px);
+            position: unset;
          }
          &:nth-child(1) {
            margin-bottom: 18px;
@@ -89,12 +77,9 @@
          &.rollingBox {
            position: relative;
            .rightBtn {
-              position: absolute;
-              right: 18px;
-              top: 190px;
+              .position(@position: absolute, @top: 190px, @right: 18px, @bottom: auto, @left: auto);
              z-index: 1;
-              width: 42px;
-              height: 42px;
+              .size(@w: 42px, @h: 42px);
              background-image: url("../../../../assets/button/42x42/btn-prev-thumb-nor.svg");
              background-size: 42px 42px;
              background-repeat: no-repeat;
@@ -104,12 +89,9 @@
              }
            }
            .leftBtn {
-              position: absolute;
-              left: 18px;
-              top: 190px;
+              .position(@position: absolute, @top: 190px, @right: auto, @bottom: auto, @left: 18px);
              z-index: 1;
-              width: 42px;
-              height: 42px;
+              .size(@w: 42px, @h: 42px);
              background-image: url("../../../../assets/button/42x42/btn-next-thumb-nor.svg");
              background-size: 42px 42px;
              background-repeat: no-repeat;
--- a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate3.module.less
+++ b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate3.module.less
@@ -1,7 +1,8 @@
@import "../../../style/CommonStyle.module.less";
+@import "../../../style/utils.module.less";

 .container {
-  background-color: #f8f8f8;
+  background-color: @BG_COLOR_01;
  display: flex;
 }

@@ -10,68 +11,55 @@
  display: flex;
  img,
  video {
-    width: 100%;
-    height: 100%;
+    .size(@w: 100%, @h: 100%);
    object-fit: cover;
  }
 }
 .leftBannerBox {
-  width: 744px;
-  height: 858px;
+  .size(@w: 744px, @h: 858px);
  margin-right: 18px;
  &.dualBox {
+    position: relative;
    .topBox {
-      width: 744px;
-      height: 420px;
-
+      .size(@w: 744px, @h: 420px);
+      .border-solid(@size:4px, @color:transparent);
      margin-bottom: 18px;
-      border: 4px solid transparent;
      border-radius: 12px;
      &:focus,
      &:hover,
      &:focus-within,
      &:active {
-        border: 4px solid @PRIMARY_COLOR_RED;
-        box-sizing: border-box;
-        .focusDropShadow();
-        border-radius: 12px;
+        .focused(@boxShadow: 22px, @borderRadius: 12px);
+        position: unset;
      }
    }
    .underBox {
-      width: 744px;
-      height: 420px;
-
-      border: 4px solid transparent;
+      .size(@w: 744px, @h: 420px);
+      .border-solid(@size:4px, @color:transparent);
      border-radius: 12px;
      &:focus,
      &:hover,
      &:focus-within,
      &:active {
-        border: 4px solid @PRIMARY_COLOR_RED;
-        box-sizing: border-box;
-        .focusDropShadow();
-        border-radius: 12px;
+        .focused(@boxShadow: 22px, @borderRadius: 12px);
+        position: unset;
      }
    }
  }
 }
 .videoBox {
-  width: 744px;
-  height: 420px;
+  .size(@w: 744px, @h: 420px);
+  .border-solid(@size:4px, @color:transparent);
  margin: 0 18px 18px 0;
-  border: 4px solid transparent;
  &:focus,
  &:hover,
  &:focus-within,
  &:active {
-    border: 4px solid @PRIMARY_COLOR_RED;
-    box-sizing: border-box;
-    .focusDropShadow();
-    border-radius: 12px;
+    .focused(@boxShadow: 22px, @borderRadius: 12px);
+    position: unset;
  }
  .videoPlayer {
-    width: 744px;
-    height: 420px;
+    .size(@w: 744px, @h: 420px);
    outline: "teal dashed 1px";
    transform: "scale(1)";
    border-radius: 12px;
@@ -79,52 +67,41 @@
 }

 .banner02 {
-  width: 744px;
-  height: 420px;
+  .size(@w: 744px, @h: 420px);
+  .border-solid(@size:4px, @color:transparent);
  border-radius: 12px;
-  border: 4px solid transparent;
-  box-sizing: border-box;
  &:focus,
  &:hover,
  &:focus-within,
  &:active {
-    border: 4px solid @PRIMARY_COLOR_RED;
-    box-sizing: border-box;
-    .focusDropShadow();
-    border-radius: 12px;
+    .focused(@boxShadow: 22px, @borderRadius: 12px);
  }
 }

 .banner03 {
-  width: 486px;
-  height: 858px;
-  border: 4px solid transparent;
+  .size(@w: 486px, @h: 858px);
+  .border-solid(@size:4px, @color:transparent);
  border-radius: 12px;
-  box-sizing: border-box;
  margin-right: 18px;
  &:focus,
  &:hover,
  &:focus-within,
  &:active {
-    border: 4px solid @PRIMARY_COLOR_RED;
-    box-sizing: border-box;
-    .focusDropShadow();
+    .focused(@boxShadow: 22px, @borderRadius: 12px);
+    position: unset;
  }
 }

 .banner04 {
-  width: 486px;
-  height: 858px;
-  border: 4px solid transparent;
+  .size(@w: 486px, @h: 858px);
+  .border-solid(@size:4px, @color:transparent);
  box-sizing: border-box;
  &:focus,
  &:hover,
  &:focus-within,
  &:active {
-    border: 4px solid @PRIMARY_COLOR_RED;
-    box-sizing: border-box;
-    .focusDropShadow();
-    border-radius: 12px;
+    .focused(@boxShadow: 22px, @borderRadius: 12px);
+    position: unset;
  }
 }

@@ -166,25 +143,22 @@

 .mainBox {
  display: flex;
-
+  position: relative;
  .imgBox {
-    width: 486px;
-    height: 858px;
+    .size(@w: 486px, @h: 858px);
+    .border-solid(@size:4px, @color:transparent);
    margin-right: 18px;
-    border: 4px solid transparent;
    border-radius: 12px;
    overflow: hidden;
    &:focus,
    &:hover,
    &:focus-within,
    &:active {
-      border: 4px solid @PRIMARY_COLOR_RED;
-      box-sizing: border-box;
-      .focusDropShadow();
+      .focused(@boxShadow: 22px, @borderRadius: 12px);
+      position: unset;
    }
    > img {
-      width: 486px;
-      height: 858px;
+      .size(@w: 486px, @h: 858px);
      object-fit: contain;
    }
  }
--- a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/Template.module.less
+++ b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/Template.module.less
@@ -1,7 +1,8 @@
@import "../../../style/CommonStyle.module.less";
+@import "../../../style/utils.module.less";

 .container {
-  background-color: #f8f8f8;
+  background-color: @BG_COLOR_01;
  display: flex;
 }

@@ -10,121 +11,91 @@
  display: flex;
  img,
  video {
-    width: 100%;
-    height: 100%;
+    .size(@w: 100%, @h: 100%);
    object-fit: cover;
    border-radius: 12px;
  }
 }
 .leftBannerBox {
-  width: 744px;
-  height: 858px;
+  .size(@w: 744px, @h: 858px);
  margin-right: 18px;
  &.dualBox {
    .topBox {
-      width: 744px;
-      height: 420px;
-
+      .size(@w: 744px, @h: 420px);
      margin-bottom: 18px;
-      border: 4px solid transparent;
      border-radius: 12px;
+      .border-solid(@size:4px, @color:transparent);
      &:focus,
      &:hover,
      &:focus-within,
      &:active {
-        border: 4px solid @PRIMARY_COLOR_RED;
-        box-sizing: border-box;
-        .focusDropShadow();
-        border-radius: 12px;
+        .focused(@boxShadow: 22px, @borderRadius: 12px);
      }
    }
    .underBox {
-      width: 744px;
-      height: 420px;
-
-      border: 4px solid transparent;
+      .size(@w: 744px, @h: 420px);
+      .border-solid(@size:4px, @color:transparent);
      border-radius: 12px;
      &:focus,
      &:hover,
      &:focus-within,
      &:active {
-        border: 4px solid @PRIMARY_COLOR_RED;
-        box-sizing: border-box;
-        .focusDropShadow();
-        border-radius: 12px;
+        .focused(@boxShadow: 22px, @borderRadius: 12px);
      }
    }
  }
 }
 .videoBox {
-  width: 744px;
-  height: 420px;
+  .size(@w: 744px, @h: 420px);
  margin: 0 18px 18px 0;
-  border: 4px solid transparent;
+  .border-solid(@size:4px, @color:transparent);
  &:focus,
  &:hover,
  &:focus-within,
  &:active {
-    border: 4px solid @PRIMARY_COLOR_RED;
-    box-sizing: border-box;
-    .focusDropShadow();
+    .focused(@boxShadow: 22px, @borderRadius: 12px);
    border-radius: 12px;
  }
  .videoPlayer {
-    width: 744px;
-    height: 420px;
+    .size(@w: 744px, @h: 420px);
    outline: "teal dashed 1px";
    transform: "scale(1)";
    border-radius: 12px;
  }
 }
 .banner02 {
-  width: 744px;
-  height: 420px;
+  .size(@w: 744px, @h: 420px);
  border-radius: 12px;
-  border: 4px solid transparent;
-  box-sizing: border-box;
+  .border-solid(@size:4px, @color:transparent);
  &:focus,
  &:hover,
  &:focus-within,
  &:active {
-    border: 4px solid @PRIMARY_COLOR_RED;
-    box-sizing: border-box;
-    .focusDropShadow();
-    border-radius: 12px;
+    .focused(@boxShadow: 22px, @borderRadius: 12px);
  }
 }

 .banner03 {
-  width: 486px;
-  height: 858px;
-  border: 4px solid transparent;
+  .size(@w: 486px, @h: 858px);
+  .border-solid(@size:4px, @color:transparent);
  border-radius: 12px;
-  box-sizing: border-box;
  margin-right: 18px;
  &:focus,
  &:hover,
  &:focus-within,
  &:active {
-    border: 4px solid @PRIMARY_COLOR_RED;
-    box-sizing: border-box;
-    .focusDropShadow();
+    .focused(@boxShadow: 22px, @borderRadius: 12px);
  }
 }

 .banner04 {
-  width: 486px;
-  height: 858px;
-  border: 4px solid transparent;
-  box-sizing: border-box;
+  .size(@w: 486px, @h: 858px);
+  .border-solid(@size:4px, @color:transparent);
  &:focus,
  &:hover,
  &:focus-within,
  &:active {
-    border: 4px solid @PRIMARY_COLOR_RED;
-    box-sizing: border-box;
-    .focusDropShadow();
-    border-radius: 12px;
+    .focused(@boxShadow: 22px, @borderRadius: 12px);
  }
 }

@@ -168,18 +139,15 @@
  display: flex;

  .imgBox {
-    width: 486px;
-    height: 858px;
+    .size(@w: 486px, @h: 858px);
+    .border-solid(@size:4px, @color:transparent);
    margin-right: 18px;
-    border: 4px solid transparent;
    border-radius: 12px;
    &:focus,
    &:hover,
    &:focus-within,
    &:active {
-      border: 4px solid @PRIMARY_COLOR_RED;
-      box-sizing: border-box;
-      .focusDropShadow();
+      .focused(@boxShadow: 22px, @borderRadius: 12px);
    }
    img {
      width: 100%;
--- a/com.twin.app.shoptime/src/views/HomePanel/HomeOnSale/HomeOnSale.jsx
+++ b/com.twin.app.shoptime/src/views/HomePanel/HomeOnSale/HomeOnSale.jsx
@@ -23,7 +23,7 @@ const SALE_ITEM_CONF = {
 };

 const Container = SpotlightContainerDecorator(
-  { leaveFor: { left: "", right: "" }, enterTo: "last-focused" },
+  { enterTo: "last-focused" },
  "div"
 );

--- a/com.twin.app.shoptime/src/views/HomePanel/HomeOnSale/HomeOnSaleItem/HomeOnSaleItem.module.less
+++ b/com.twin.app.shoptime/src/views/HomePanel/HomeOnSale/HomeOnSaleItem/HomeOnSaleItem.module.less
@@ -1,48 +1,40 @@
@import "../../../../style/CommonStyle.module.less";
+@import "../../../../style/utils.module.less";
 .onSaleItemList {
-  width: 630px;
-  height: 300px;
+  .size(@w: 630px, @h: 300px);
  border-radius: 12px;
  display: flex;
  overflow: hidden;
  margin-right: 18px;
-  border: 4px solid transparent;
-  box-sizing: border-box;
+  .border-solid(@size:4px, @color:transparent);
  &:focus,
  &:hover,
  &:focus-within,
  &:active {
-    border: 4px solid #c70850;
-    box-sizing: border-box;
-    .focusDropShadow();
+    .focused(@boxShadow: 22px, @borderRadius: 12px);
  }

  .onSaleItemListImg {
-    width: 300px;
-    height: 300px;
+    .size(@w: 300px, @h: 300px);
    object-fit: contain;
    display: inline-block;
    box-sizing: border-box;
  }
  .onSaleItemListBox {
-    width: 330px;
-    height: 300px;
+    .size(@w: 330px, @h: 300px);
    box-sizing: border-box;
    padding: 24px;
    display: inline-block;
-
    .onSaleItemListBoxTitle {
-      width: 282px;
-      height: 30px;
+      .size(@w: 282px, @h: 30px);
      font-size: 24px;
      color: rgba(255, 255, 255, 0.5);
    }
    .onSaleItemListBoxSaleBox {
      margin-top: 11px;
-      width: 274px;
-      height: 70px;
+      .size(@w: 274px, @h: 70px);
      font-size: 50px;
-      color: #ffffff;
+      color: @COLOR_WHITE;
      text-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
      letter-spacing: -2px;
      line-height: 60px;
@@ -53,25 +45,19 @@
    }
    .onSaleItemListBoxName {
      margin-top: 41px;
-      width: 282px;
-      height: 60px;
-      text-overflow: ellipsis;
-      overflow: hidden;
-      display: -webkit-box;
-      -webkit-box-orient: vertical;
-      -webkit-line-clamp: 2;
+      .size(@w: 282px, @h: 60px);
+      .elip(@clamp:2);
      font-size: 24px;
      line-height: 1.33;
-      color: #fff;
+      color: @COLOR_WHITE;
      font-weight: bold;
    }
    .onSaleItemListBoxPrice {
      margin-top: 9px;
-      width: 282px;
-      height: 36px;
+      .size(@w: 282px, @h: 36px);
      font-size: 30px;
      line-height: 0.93;
-      color: #fff;
+      color: @COLOR_WHITE;
      letter-spacing: normal;
      .onSaleItemListBoxPriceStripe {
        margin-left: 4px;
--- a/com.twin.app.shoptime/src/views/HomePanel/HomeTodayDeal/HomeTodayDeal.module.less
+++ b/com.twin.app.shoptime/src/views/HomePanel/HomeTodayDeal/HomeTodayDeal.module.less
@@ -1,13 +1,13 @@
@import "../../../style/CommonStyle.module.less";
+@import "../../../style/utils.module.less";
 .itemBox {
  background-image: url(../../../../assets/images/mainTemplate/img_home_banner_td_ver.png);
  background-repeat: no-repeat;
  background-size: 486px 858px;
  background-position: center center;
-  width: 486px;
-  height: 858px;
+  .size(@w: 486px, @h: 858px);
  margin-right: 18px;
-  border: 4px solid transparent;
+  .border-solid(@size:4px, @color:transparent);
  border-radius: 12px;
  position: relative;

@@ -17,49 +17,38 @@
  }
  .textBox {
    margin: 268px 36px 0;
-    width: 406px;
-    height: 80px;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 2;
-    font-family: "LGSmartUIBold";
+    .size(@w: 406px, @h: 80px);
+    .elip(@clamp:2);
    font-weight: bold;
-    font-size: 30px;
-    color: #333;
+    .font (@fontFamily:@baseFontBold, @fontSize:30px);
+    color: @COLOR_GRAY06;
    line-height: 1.27;
  }
  .accBox {
-    width: 406px;
-    height: 50px;
+    .size(@w: 406px, @h: 50px);
    margin: 6px 36px 0;
    text-align: center;
-    font-size: 42px;
+    .font (@fontFamily:@baseFontBold, @fontSize:42px);
    color: @PRIMARY_COLOR_RED;
    font-weight: bold;
    line-height: 1.14;
    .saleAccBox {
-      font-size: 24px;
-      color: #767676;
+      .font (@fontFamily:@baseFontBold, @fontSize:24px);
+      color: @COLOR_GRAY04;
      vertical-align: middle;
      text-decoration: line-through;
    }
  }
  .itemImgBox {
    margin: 29px 62px 60px;
-    width: 354px;
-    height: 354px;
+    .size(@w: 354px, @h: 354px);
    > img {
      width: 100%;
    }
  }
  .leftBtn {
-    position: absolute;
-    left: 18px;
-    top: 408px;
-    width: 42px;
-    height: 42px;
+    .position(@position: absolute, @top: 408px, @right: auto, @bottom: auto, @left: 18px);
+    .size(@w: 42px, @h: 42px);
    background-image: url("../../../../assets/icon/button_icon/btn_prev_thumb_nor.png");
    background-size: 42px 42px;
    background-position: center center;
@@ -72,11 +61,8 @@
    }
  }
  .rightBtn {
-    position: absolute;
-    right: 18px;
-    top: 408px;
-    width: 42px;
-    height: 42px;
+    .position(@position: absolute, @top: 408px, @right: 18px, @bottom: auto, @left: auto);
+    .size(@w: 42px, @h: 42px);
    background-image: url("../../../../assets/icon/button_icon/btn_next_thumb_nor.png");
    background-size: 42px 42px;
    background-position: center center;
@@ -96,9 +82,8 @@
  background-repeat: no-repeat;
  background-size: 744px 420px;
  background-position: center center;
-  width: 744px;
-  height: 420px;
-  border: 4px solid transparent;
+  .size(@w: 744px, @h: 420px);
+  .border-solid(@size:4px, @color:transparent);
  border-radius: 12px;
  display: flex;

@@ -110,31 +95,24 @@
    object-fit: contain;
  }
  .textBox {
-    font-family: "LGSmartUIBold";
    margin: 230px 8px 0 46px;
-    width: 320px;
-    height: 80px;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 2;
+    .size(@w: 320px, @h: 80px);
+    .elip(@clamp:2);
    font-weight: bold;
-    font-size: 30px;
-    color: #333;
+    .font (@fontFamily:@baseFontBold, @fontSize:30px);
+    color: @COLOR_GRAY06;
    line-height: 1.27;
  }
  .accBox {
-    width: 320px;
-    height: 50px;
+    .size(@w: 320px, @h: 50px);
    margin: 6px 8px 0 46px;
    text-align: left;
-    font-size: 42px;
+    .font (@fontFamily:@baseFontBold, @fontSize:42px);
    color: @PRIMARY_COLOR_RED;
    font-weight: bold;
    line-height: 1.14;
    .saleAccBox {
-      font-size: 24px;
+      .font (@fontFamily:@baseFontBold, @fontSize:24px);
      color: #767676;
      vertical-align: middle;
      text-decoration: line-through;
@@ -142,18 +120,14 @@
  }
  .itemImgBox {
    margin: 44px 26px 44px 0;
-    width: 324px;
-    height: 324px;
+    .size(@w: 324px, @h: 324px);
    > img {
      width: 100%;
    }
  }
  .leftBtn {
-    position: absolute;
-    left: 18px;
-    top: 189px;
-    width: 42px;
-    height: 42px;
+    .position(@position: absolute, @top: 189px, @right: auto, @bottom: auto, @left: 18px);
+    .size(@w: 42px, @h: 42px);
    background-image: url("../../../../assets/icon/button_icon/btn_prev_thumb_nor.png");
    background-size: 42px 42px;
    background-position: center center;
@@ -165,11 +139,8 @@
    }
  }
  .rightBtn {
-    position: absolute;
-    right: 18px;
-    top: 189px;
-    width: 42px;
-    height: 42px;
+    .position(@position: absolute, @top: 189px, @right: 18px, @bottom: auto, @left:auto);
+    .size(@w: 42px, @h: 42px);
    background-image: url("../../../../assets/icon/button_icon/btn_next_thumb_nor.png");
    background-size: 42px 42px;
    background-position: center center;
--- a/com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShow.module.less
+++ b/com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShow.module.less
@@ -1,4 +1,5 @@
@import "../../../style/CommonStyle.module.less";
+@import "../../../style/utils.module.less";
 .popularShow {
  padding: 60px 0px 0px 60px;

@@ -19,9 +20,8 @@
 }

 .addItem {
-  width: 198px;
-  height: 438px;
-  background-color: #fff;
+  .size(@w: 198px, @h: 438px);
+  background-color: @COLOR_WHITE;
  border: 1px solid #e4e4e4;
  border-radius: 12px;
  background-image: url("../../../../assets/icon/button_icon/ic-more-nor.svg");
@@ -32,8 +32,7 @@
  &:hover,
  &:focus-within,
  &:active {
-    border: 4px solid @PRIMARY_COLOR_RED;
-    box-sizing: border-box;
+    .border-solid(@size:4px, @color:@PRIMARY_COLOR_RED);
    border-radius: 12px;
    background-image: url("../../../../assets/icon/button_icon/ic-more-sel.svg");
  }
--- a/com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShowItem/PopularShowItem.module.less
+++ b/com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShowItem/PopularShowItem.module.less
@@ -1,49 +1,40 @@
@import "../../../../style/CommonStyle.module.less";
+@import "../../../../style/utils.module.less";
+
 .listItem {
-  width: 546px;
-  height: 438px;
+  .size(@w:546px,@h:438px);
  padding: 14px;
  background-color: @COLOR_WHITE;
  border-radius: 12px;
-  border: solid 1px @COLOR_GRAY02;
-  box-sizing: border-box;
+  .border-solid(@size:4px,@color:transparent);
  font-weight: bold;
-  font-family: "LGSmartUIBold";
+  font-family: @baseFontBold;
  margin-right: 18px;
-  border: 4px solid transparent;
-  box-sizing: border-box;
-
+  position: relative;
  &:focus,
  &:hover,
  &:focus-within,
  &:active {
    border: 4px solid @PRIMARY_COLOR_RED;
    box-sizing: border-box;
-    .focusDropShadow();
+    .focused(@boxShadow: 22px, @borderRadius: 12px);
  }

  > img {
-    width: 510px;
-    height: 288px;
+    .size(@w:510px,@h:288px);
    object-fit: contain;
  }
  .horizonItem {
-    width: 510px;
-    height: 61px;
+    .size(@w:510px,@h:61px);
    margin-top: 38px;
    color: #333;
    font-size: 24px;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 2;
+    .elip(@clamp:2);
    display: flex;
  }
  .logo {
    display: inline-block;
-    width: 60px;
-    height: 60px;
+    .size(@w:60px,@h:60px);
    margin-right: 12px;
    .logoPath {
      width: 100%;
@@ -54,58 +45,42 @@
    display: inline-block;
    color: #333;
    font-size: 24px;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 2;
-    width: 438px;
-    height: 61px;
+    .elip(@clamp:2);
+    .size(@w:438px,@h:61px);
  }
 }
 .listItemVertical {
  display: flex;
-  width: 546px;
-  height: 438px;
-  padding: 18px;
+  .size(@w:546px,@h:438px);
+  padding: 14px;
  background-color: @COLOR_WHITE;
  border-radius: 12px;
-  border: solid 1px @COLOR_GRAY02;
-  box-sizing: border-box;
  margin-right: 18px;
-  border: 4px solid transparent;
-  box-sizing: border-box;
+  .border-solid(@size:4px,@color:transparent);
  font-weight: bold;
-  font-family: "LGSmartUIBold";
+  font-family: @baseFontBold;
  &:focus,
  &:hover,
  &:focus-within,
  &:active {
    border: 4px solid @PRIMARY_COLOR_RED;
    box-sizing: border-box;
-    .focusDropShadow();
+    .focused(@boxShadow: 22px, @borderRadius: 12px);
  }
  > img {
-    width: 228px;
-    height: 402px;
+    .size(@w:228px,@h:402px);
    object-fit: contain;
  }
  .verticalItem {
    margin-left: 11px;
    color: #333;
    font-size: 24px;
-    width: 270px;
-    height: 402px;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 12;
+    .size(@w:270px,@h:402px);
+    .elip(@clamp:12);
  }
  .logo {
    display: block;
-    width: 60px;
-    height: 60px;
+    .size(@w:60px,@h:60px);
    margin-right: 12px;
    .logoPath {
      width: 100%;
@@ -116,12 +91,7 @@
    margin-left: 11px;
    color: #333;
    font-size: 24px;
-    width: 270px;
-    height: 402px;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 12;
+    .size(@w:270px,@h:402px);
+    .elip(@clamp:12);
  }
 }
--- a/com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategory.jsx
+++ b/com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategory.jsx
@@ -27,7 +27,6 @@ import css from '../../HomePanel/SubCategory/SubCategory.module.less';
 const SpottableComponent = Spottable("div");
 const Container = SpotlightContainerDecorator(
  {
-    leaveFor: { left: "", right: "" },
    enterTo: "last-focused",
  },
  "div"
--- a/com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategory.module.less
+++ b/com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategory.module.less
@@ -1,10 +1,12 @@
@import "../../../style/CommonStyle.module.less";
+@import "../../../style/utils.module.less";
+
 .home {
  padding: 20px 0px 0 60px;
  justify-content: unset;
  align-items: unset;
  flex-direction: unset;
-  background-color: #f2f2f2;
+  background-color: @BG_COLOR_02;
  border: 1px solid #dadada;
  width: 100%;
 }
@@ -21,10 +23,9 @@
 }

 .addItem {
-  width: 198px;
-  height: 438px;
-  background-color: #fff;
-  border: 1px solid #e4e4e4;
+  .size(@w: 198px, @h: 438px);
+  background-color: @COLOR_WHITE;
+  .border-solid(@size:1px, @color:#e4e4e4);
  border-radius: 12px;
  background-image: url("../../../../assets/icon/button_icon/ic-more-nor.svg");
  background-size: 66px 66px;
@@ -34,9 +35,7 @@
  &:hover,
  &:focus-within,
  &:active {
-    border: 4px solid @PRIMARY_COLOR_RED;
-    box-sizing: border-box;
-    border-radius: 12px;
+    .focused(@boxShadow: 22px, @borderRadius: 12px);
    background-image: url("../../../../assets/icon/button_icon/ic-more-sel.svg");
  }
 }