[compnents] TItemCard, css 수정

Detail Notes :

1. videoShow 타입에서 imageWrap의 width, height 설정

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

@@ -119,14 +119,12 @@ export default memo(function TItemCard({
         )}
       </div>
       {isBestSeller && rank && (
-        <div>
+        <div className={css.bestSeller}>
           {STRING_CONF.TOP}
           <span>{rank}</span>
         </div>
       )}
-      {isLive && (
-        <CustomImage className={css.liveTag} src={IcLiveShow} alt="" />
-      )}
+      {isLive && <img className={css.liveTag} src={IcLiveShow} alt="" />}
     </SpottableComponent>
   );
 });

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

@@ -1,9 +1,8 @@
 @import "../../style/CommonStyle.module.less";
 @import "../../style/utils.module.less";
 
-/* horizontal type */
+/* horizontal */
 .horizontal {
-  /* normal */
   display: flex;
   .size(@w: 660px, @h: 236px);
   padding: 18px;
@@ -11,8 +10,7 @@
   border: solid 1px @COLOR_GRAY02;
   background-color: @COLOR_WHITE;
 
-  // left contents (image contetns)
-  > div:nth-child(1) {
+  .imageWrap {
     position: relative;
     .size(@w: 200px, @h: 200px);
     margin-right: 20px;
@@ -47,8 +45,7 @@
     }
   }
 
-  // right contents
-  > div:nth-child(2) {
+  .descWrap {
     .flex(@direction: column, @justifyCenter: space-between, @alignCenter: flex-start);
     flex-grow: 1;
     width: 404px;
@@ -88,7 +85,7 @@
     }
   }
 
-  /* focused */
+  // focused
   &:focus {
     &::after {
       .focused(@boxShadow:22px, @borderRadius:12px);
@@ -96,9 +93,8 @@
   }
 }
 
-/* vertical type (Thumbnail) */
+/* vertical */
 .vertical {
-  /* normal */
   position: relative;
   display: flex;
   flex-direction: column;
@@ -108,8 +104,7 @@
   border: solid 1px @COLOR_GRAY02;
   background-color: @COLOR_WHITE;
 
-  // top contents (image contetns)
-  > div:nth-child(1) {
+  .imageWrap {
     position: relative;
     .size(@w: 288px, @h: 288px);
     margin-bottom: 6px;
@@ -134,7 +129,7 @@
     }
 
     // sold out
-    > div:nth-child(3) {
+    > div {
       .position(@position: absolute, @top: 0, @right: 0);
       .flex();
       .size(@w: 288px, @h: 288px);
@@ -144,8 +139,7 @@
     }
   }
 
-  // bottom contents
-  > div:nth-child(2) {
+  .descWrap {
     .flex(@direction: column, @alignCenter: flex-start);
     flex-grow: 1;
 
@@ -186,8 +180,8 @@
     }
   }
 
-  // best seller (TOP mark)
-  > div:nth-child(3) {
+  // best seller
+  .bestSeller {
     .position(@position: absolute, @top: -1px, @left: 18px);
     .flex(@direction: column, @justifyCenter: space-between);
     padding: 15px 16px 21px;
@@ -203,7 +197,7 @@
     }
   }
 
-  /* focused */
+  // focused
   &:focus {
     &::after {
       .focused(@boxShadow: 22px, @borderRadius: 12px);
@@ -218,6 +212,7 @@
 
 /* videoShow */
 .videoShow {
+  // horizontal
   &.imgHorizontal {
     .size(@w: 546px, @h:438px);
     padding: 18px;
@@ -240,8 +235,10 @@
       }
     }
     .imageWrap {
+      .size(@w: 100%, @h: 288px);
+
       > img {
-        .size(@w: 100%, @h: 288px);
+        .size(@w: inherit, @h: inherit);
         object-fit: cover;
       }
     }
@@ -261,6 +258,8 @@
       }
     }
   }
+
+  // vertical
   &.imgVertical {
     .size(@w: 546px, @h:438px);
     padding: 18px;
@@ -270,11 +269,13 @@
     font-weight: bold;
     position: relative;
     display: flex;
+
     &:focus {
       &::after {
         .focused(@boxShadow: 22px, @borderRadius: 12px);
       }
     }
+
     &.nonPosition {
       &:focus {
         &::after {
@@ -282,10 +283,13 @@
         }
       }
     }
+
     .imageWrap {
       flex: none;
+      .size(@w: 228px, @h: 402px);
+
       > img {
-        .size(@w: 228px, @h: 402px);
+        .size(@w: inherit, @h: inherit);
         object-fit: cover;
       }
     }