[ProductTag,productOption] shoptimePrice 태그 추가, 스타일 수정

com.twin.app.shoptime/src/views/DetailPanel/components/ProductTag.jsx

@@ -10,8 +10,8 @@ export default function ProductTag() {
   const couponInfos = useSelector(
     (state) => state.coupon.productCouponSearchData
   );
-  const { todaySpclFlag, freeShippingFlag, priceInfo } = productDataInfos;
 
+  const { todaySpclFlag, freeShippingFlag, priceInfo, rewd } = productDataInfos;
   const { originalPrice, discountedPrice } = usePriceInfo(priceInfo) || {};
 
   const isBigSale =
@@ -29,8 +29,9 @@ export default function ProductTag() {
       {originalPrice && discountedPrice && isBigSale && (
         <span className={css.bigSale}>Big Sale</span>
       )}
-      {/* TODO */}
-      <span className={css.shoptimePrice}>Shop Time Price</span>
+      {rewd && rewd.length > 0 && (
+        <span className={css.shoptimePrice}>Shop Time Price</span>
+      )}
       {Object.keys(couponInfos).length > 0 && (
         <span className={css.coupon}>COUPON</span>
       )}

com.twin.app.shoptime/src/views/DetailPanel/components/ProductTag.module.less

@@ -12,13 +12,13 @@
 }
 
 .ProductBadge {
-  margin-top: 14px;
+  margin-left: 26px;
+  height: 42px;
   .flex(@justifyCenter:flex-start);
   .specialValue {
     .tag-default(@backgroundColor:@PRIMARY_COLOR_RED, @fontColor:@COLOR_WHITE);
     .size(@w: 66px, @h: 42px);
-    line-height: 30px;
-    padding: 6px 10px;
+    line-height: 42px;
   }
 
   .freeShipping {
@@ -28,8 +28,7 @@
     background-color: rgba(199, 8, 80, 0.1);
     color: @PRIMARY_COLOR_RED;
     text-align: center;
-    line-height: 30px;
-    padding: 6px 10px;
+    line-height: 42px;
     .font(@fontFamily:@baseFontBold,@fontSize:24px);
     .size(@w: 120px, @h: 42px);
   }
@@ -43,8 +42,7 @@
   .shoptimePrice {
     .tag-default(@backgroundColor:#4f172c, @fontColor:@COLOR_WHITE);
     .size(@w: 200px, @h: 42px);
-    padding: 6px 10px;
-    line-height: 30px;
+    line-height: 42px;
   }
 
   .coupon {
@@ -53,8 +51,7 @@
     .size(@w: 120px, @h: 42px);
     color: @COLOR_WHITE;
     text-align: center;
-    padding: 6px 10px;
-    line-height: 30px;
+    line-height: 42px;
     .font(@fontFamily: @baseFontBold, @fontSize:24px);
   }
 }

com.twin.app.shoptime/src/views/DetailPanel/container/ProductOption.jsx

@@ -28,7 +28,7 @@ export default function ProductOption({ selectedPatnrId, selectedPardtId }) {
     <div className={css.optionContainer}>
       {productDataInfos && (
         <div className={css.contentHeader}>
-          <div className={css.brandName}>
+          <div className={css.topLayer}>
             <img
               src={
                 productDataInfos.patncLogoPath && productDataInfos.patncLogoPath
@@ -38,7 +38,7 @@ export default function ProductOption({ selectedPatnrId, selectedPardtId }) {
             <div>{$L(`ID: ${productDataInfos.prdtId}`)}</div>
           </div>
           <div className={css.title}>{$L(productDataInfos.prdtNm)}</div>
-          <div className={css.star}>
+          <div className={css.bottomLayer}>
             {productDataInfos.revwGrd && (
               <StarRating rating={productDataInfos?.revwGrd} />
             )}

com.twin.app.shoptime/src/views/DetailPanel/container/ProductOption.module.less

@@ -7,7 +7,7 @@
   background-color: @BG_COLOR_01;
   padding: 30px 120px 120px 60px;
 
-  .brandName {
+  .topLayer {
     width: 100%;
     .flex(@direction:row ,@justifyCenter:flex-start);
     text-align: left;
@@ -20,7 +20,10 @@
     }
   }
 
-  .star {
+  .bottomLayer {
+    .flex(@justifyCenter:flex-start,@alignCenter:center);
+    height: 42px;
+    margin-top: 14px;
     img {
       width: 180px;
       height: 36px;