[components] TItemCard, props 추가

Detail Notes :

1. props: offerInfo 추가
2. 추가에 따른 css 변경

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

@@ -46,6 +46,7 @@ export default memo(function TItemCard({
   onBlur,
   onClick,
   onFocus,
+  offerInfo,
   priceInfo,
   productId,
   productName,
@@ -101,17 +102,21 @@ export default memo(function TItemCard({
     >
       <div className={css.imageWrap}>
         <CustomImage alt={imageAlt} delay={0} src={imageSource} />
-        {discountRate && <span>{discountRate}</span>}
+        {!offerInfo && discountRate && <span>{discountRate}</span>}
         {soldoutFlag && soldoutFlag === "Y" && (
           <div>{STRING_CONF.SOLD_OUT}</div>
         )}
       </div>
       <div className={css.descWrap}>
         <h3 className={css.title}>{productName}</h3>
-        <p>
+        {!offerInfo ? (
+          <p className={css.priceInfo}>
             {discountRate ? discountedPrice : originalPrice}
             {discountRate && <span>{originalPrice}</span>}
           </p>
+        ) : (
+          <p className={css.offerInfo}>{offerInfo}</p>
+        )}
       </div>
       {isBestSeller && rank && (
         <div>

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

@@ -18,14 +18,14 @@
     margin-right: 20px;
     color: @COLOR_WHITE;
 
-    img {
+    > img {
       .size(@w: inherit, @h: inherit);
       object-fit: cover;
       border: solid 1px #f0f0f0;
     }
 
     // discount rate
-    span {
+    > span {
       .position(@position: absolute, @right: 12px, @bottom: 12px);
       .size(@w: 60px, @h: 60px);
       border-radius: 60px;
@@ -36,7 +36,7 @@
     }
 
     // sold out
-    div {
+    > div {
       .position(@position: absolute, @top: 0, @right: 0);
       .flex();
       .size(@w: 200px, @h: 200px);
@@ -62,13 +62,21 @@
       overflow: hidden;
     }
 
-    p {
-      .flex(@justifyCenter: flex-start);
+    > p {
       font-weight: bold;
       font-size: 30px;
       color: @PRIMARY_COLOR_RED;
 
-      span {
+      &.offerInfo {
+        overflow: hidden;
+        .elip(@clamp:1);
+        word-break: break-all;
+      }
+
+      &.priceInfo {
+        .flex(@justifyCenter: flex-start);
+
+        > span {
           margin-left: 5px;
           font-weight: bold;
           font-size: 18px;
@@ -77,6 +85,7 @@
         }
       }
     }
+  }
 
   /* focused */
   &:focus {
@@ -105,14 +114,14 @@
     margin-bottom: 12px;
     color: @COLOR_WHITE;
 
-    img {
+    > img {
       .size(@w: 288px, @h: 288px);
       object-fit: contain;
       border: solid 1px #f0f0f0;
     }
 
     // discount rate
-    span {
+    > span {
       .position(@position: absolute, @right: 12px, @bottom: 12px);
       .size(@w: 60px, @h: 60px);
       border-radius: 60px;
@@ -149,20 +158,30 @@
       overflow: hidden;
     }
 
-    p {
-      .flex(@justifyCenter: flex-start);
+    > p {
       font-weight: bold;
       font-size: 30px;
       color: @PRIMARY_COLOR_RED;
-      letter-spacing: -1px;
-      span {
+
+      &.offerInfo {
+        overflow: hidden;
+        .elip(@clamp:1);
+        word-break: break-all;
+      }
+
+      &.priceInfo {
+        .flex(@justifyCenter: flex-start);
+
+        > span {
           margin-left: 5px;
+          font-weight: bold;
           font-size: 18px;
           color: @COLOR_GRAY04;
           text-decoration: line-through;
         }
       }
     }
+  }
 
   // best seller (TOP mark)
   > div:nth-child(3) {
@@ -175,7 +194,7 @@
     border-bottom-left-radius: 79px;
     border-bottom-right-radius: 79px;
 
-    span {
+    > span {
       .font(@fontFamily: @arialFontBold, @fontSize: 42px);
       font-size: 42px;
     }
@@ -188,7 +207,7 @@
     }
 
     // best seller
-    div:nth-child(3) {
+    > div:nth-child(3) {
       background-color: @PRIMARY_COLOR_RED;
     }
   }