[상품 상세] 스타일변경

배경부분 적용 및  스타일 적용
 - 배경 이미지 추가(예제 이미지, 변경필요 및 파트너 별 적용 필요)
좋아요 버튼 스타일 추가 및 변경
 - 크기 조절 및 스타일 추가.
버튼 간격 및 스타일 수정
 - 버튼 간격 조정 및 길이 조절

com.twin.app.shoptime/src/views/DetailPanel/ProductAllSection/ProductAllSection.jsx

@@ -294,7 +294,12 @@ export default function ProductAllSection({
                 productType={productType}
               >
                 <div className={css.qrWrapper}>
-                  <QRCode productInfo={productData} productType={productType} />
+                  {/* <QRCode productInfo={productData} productType={productType} /> */}
+                  <QRCode
+                    productInfo={productData}
+                    productType={productType}
+                    kind="detail"
+                  />
                 </div>
               </ProductOverview>
 

com.twin.app.shoptime/src/views/DetailPanel/ProductAllSection/ProductAllSection.module.less

@@ -42,6 +42,9 @@
   display: flex;
   justify-content: flex-start;
   align-items: flex-start;
+  > div {
+    height: 339px;
+  }
 }
 
 // 3. Content Section - 1180px (1114px 콘텐츠 + 66px 스크롤바)
@@ -428,13 +431,7 @@
 
 // ProductOverview 컨테이너 스타일 수정 (자식 요소에 맞게 크기 조정)
 [class*="ProductOverview"] {
-  align-self: stretch;
+  padding: 0 0 5px;
-  padding: 0 0 5px; // ProductDetailCard mainContent와 동일한 패딩
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  align-items: flex-start;
-
   // 내부 div (productInfoWrapper)
   > div {
     align-self: stretch;

com.twin.app.shoptime/src/views/DetailPanel/ProductInfoSection/QRCode/QRCode.jsx

@@ -21,6 +21,7 @@ export default function QRCode({
   selectedPrdtId,
   selectedPatnrId,
   deviceInfo,
+  kind,
 }) {
   const isBuyNow = productType === "buyNow";
   const isTheme = productType === "theme";
@@ -54,8 +55,12 @@ export default function QRCode({
 
   return (
     <div className={css.qrcode}>
-      {qrCodeUrl && <TQRCode text={qrCodeUrl} width="190" height="190" />}
+      {/* {qrCodeUrl && <TQRCode text={qrCodeUrl} width="190" height="190" />} */}
-
+      {kind === "detail" ? (
+        <TQRCode text={qrCodeUrl} width="240" height="240" />
+      ) : (
+        ""
+      )}
       {/* todo : 시나리오,UI 릴리즈 후 */}
       {/* <div className={css.tooltip}>
         <div className={css.tooltipBody}>

com.twin.app.shoptime/src/views/DetailPanel/ProductOverview/ProductPriceDisplay/ShopByMobilePriceDisplay/ShopByMobilePriceDisplay.jsx

@@ -71,10 +71,12 @@ export default function ShopByMobilePriceDisplay({
             </div>
             <div className={css.rewdBtmLayer}>
               <span className={css.rewdNm}>{$L("Shop Time Price")}</span>
+
+              <span className={css.rewdRate}>{discountedPrice} </span>
               <div className={css.btmPrc}>
                 {/* TODO : rewd data*/}
                 {/* 분할금액 조건문처리 케이스별로  */}
-                <span className={css.rewdRate}>{discountedPrice} </span>
+
                 {/* 리워드 금액 */}
                 {(TYPE_CASE.case7 ||
                   TYPE_CASE.case5 ||
@@ -113,10 +115,10 @@ export default function ShopByMobilePriceDisplay({
                     ? patncNm + " " + $L("Price")
                     : patnrName + $L("Price")}
                 </span>
-                {discountRate && Number(discountRate.replace("%", "")) > 4 && (
-                  <div className={css.rateTag}>{discountRate}</div>
-                )}
               </div>
+              {discountRate && Number(discountRate.replace("%", "")) > 4 && (
+                <div className={css.rateTag}>{discountRate}</div>
+              )}
               <div className={css.btmLayer}>
                 <span className={css.price}>
                   {isDiscountedPriceEmpty ? offerInfo : discountedPrice}

com.twin.app.shoptime/src/views/DetailPanel/ProductOverview/ProductPriceDisplay/ShopByMobilePriceDisplay/ShopByMobilePriceDisplay.module.less

@@ -14,7 +14,7 @@
   .topLayer {
     margin-bottom: 20px;
     height: 42px;
-    .flex();
+    flex-wrap: wrap;
   }
   .rateTag {
     background: linear-gradient(309.43deg, #ef775b 23.84%, #c70850 100%);
@@ -23,7 +23,6 @@
     padding: 6px 12px;
     border-radius: 6px;
     color: @COLOR_WHITE;
-    margin-right: 10px;
     .font(@fontFamily: @baseFont, @fontSize: 24px);
     font-weight: 700;
     .flex();
@@ -35,8 +34,9 @@
     width: 100%;
   }
   .btmLayer {
-    .flex();
     margin-top: 14px;
+    display: flex;
+    align-items: center;
   }
   .price {
     font-weight: bold;
@@ -71,6 +71,7 @@
     }
     .partnerPrc {
       text-decoration: line-through;
+      align-items: center;
     }
   }
   .rewdBtmLayer {
@@ -91,12 +92,12 @@
         margin-right: 10px;
         padding-top: 14px;
       }
-      .rewdRate {
+    }
-        font-size: 60px;
+    .rewdRate {
-        font-weight: bold;
+      font-size: 60px;
-        color: @PRIMARY_COLOR_RED;
+      font-weight: bold;
-        margin-top: 18px;
+      color: @PRIMARY_COLOR_RED;
-      }
+      margin-top: 18px;
     }
   }
 }