[홈] 에너지 라벨 #1

1. 우선 홈 > 카테고리 부분에만 적용해둠.
		- TItemCard.new.jsx에 적용.
		- 노출이 어떨때 되어야하는지 아직 이야기없음.
		- api가 아직 나오지않아 이부분에 대해서는 1000달러 이상인 금액에만 나오도록 처리.
	2. 에너지 라벨 관련에 대해서 이미지 assset/energyLabel 에 추가.
	3. Config 파일에 energyPopup추가
	4. Tpopup에 스타일 추가.

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

@@ -1,6 +1,8 @@
 @import "../../style/CommonStyle.module.less";
 @import "../../style/utils.module.less";
 
+// moved into scoped blocks
+
 /* horizontal */
 .horizontal {
   display: flex;
@@ -10,6 +12,14 @@
   border: solid 1px @COLOR_GRAY02;
   background-color: @COLOR_WHITE;
 
+  .justForYouTag {
+    position: absolute;
+    width: 100px;
+    top: 40px;
+    right: 20px;
+    background-color: transparent;
+  }
+
   .imageWrap {
     position: relative;
     .size(@w: 200px, @h: 200px);
@@ -117,6 +127,14 @@
   border: solid 1px @COLOR_GRAY02;
   background-color: @COLOR_WHITE;
 
+  .justForYouTag {
+    position: absolute;
+    width: 100px;
+    top: 40px;
+    right: 20px;
+    background-color: transparent;
+  }
+
   .imageWrap {
     position: relative;
     .size(@w: 288px, @h: 288px);
@@ -154,12 +172,46 @@
       font-size: 36px;
     }
   }
-
+  .flexBox {
+    display: flex;
+    flex-wrap: nowrap;
+  }
+  .labelImgBox {
+    display: flex;
+    flex-wrap: wrap;
+    align-content: flex-end;
+    width: 60px;
+    gap: 3px;
+    > div {
+      position: relative;
+      z-index: 100;
+      &:focus {
+        &::after {
+          .focused(@boxShadow: 22px, @borderRadius: 2px);
+        }
+      }
+      > img {
+        width: 60px;
+        height: 35px;
+      }
+    }
+  }
   .descWrap {
     .flex(@direction: column, @alignCenter: flex-start);
     width: 100%;
-
+    &.labelBox {
+      width: calc(100% - 60px);
+      > p {
+        font-size: 27px;
+        &.priceInfo {
+          > span {
+            font-size: 16px;
+          }
+        }
+      }
+    }
     > div.title {
+      width: 100%;
       height: 64px;
       font-weight: bold;
       line-height: 1.33;
@@ -315,8 +367,7 @@
         margin-top: 11px;
 
         .size(@w: 508px, @h: 107px);
-
-        .title {
+        &.title {
           margin-left: 15px;
           .size(@w: 430px, @h: 100px);
           .productNameTitle {
@@ -414,4 +465,53 @@
     .size(@w: 108px, @h: 48px);
     .position(@position: absolute, @top: 30px, @left: 30px);
   }
+
+  .justForYouTag {
+    position: absolute;
+    width: 100px;
+    top: 40px;
+    right: 20px;
+    background-color: transparent;
+  }
+}
+
+.popupContainer {
+  .header {
+    .size(@w: 780px , @h: 102px);
+    .flex(@display: flex, @justifyCenter: center, @alignCenter: center, @direction: row);
+    background-color: #e7ebef;
+
+    > h3 {
+      font-size: 36px;
+      color: #222222;
+      font-weight: bold;
+    }
+  }
+
+  .qrcodeContainer {
+    padding: 30px 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    .qrcode {
+      .size(@w: 360px , @h: 360px);
+      background-color: #ffffff;
+      border-radius: 12px;
+      box-shadow: 0 0 0 1px #dadada inset;
+      margin-bottom: 41px;
+    }
+
+    > h3 {
+      display: flex;
+      text-align: center;
+      word-break: break-word;
+      line-height: 1.27;
+    }
+
+    .popupBtn {
+      .size(@w: 300px , @h: 78px);
+      margin-top: 38px;
+    }
+  }
 }