[지라이슈없음] MyPage CouponTab 할인율/할인액 반영 및 간격 수정

com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyInfo/MyInfoTabContents/CouponTab/CouponListItem.jsx

@@ -1,10 +1,10 @@
-import React, { useCallback } from "react";
+import React, { useCallback, useMemo } from "react";
 
 import Spottable from "@enact/spotlight/Spottable";
 
 import useScrollReset from "../../../../../../hooks/useScrollReset";
+import { $L, formatCurrencyValue } from "../../../../../../utils/helperMethods";
 import css from "./CouponListItem.module.less";
-import { $L } from "../../../../../../utils/helperMethods";
 
 const SpottableListItem = Spottable("div");
 
@@ -20,6 +20,9 @@ export default function CouponListItem({
   cpnDctrt,
   ordNo,
   length,
+  currSign,
+  dcAmt,
+  shptmDcTpCd,
   index,
 }) {
   const { handleScrollReset, handleStopScrolling } = useScrollReset(scrollTop);
@@ -28,6 +31,19 @@ export default function CouponListItem({
     return datetimeStr.split(" ")[0];
   }, []);
 
+  const dcCount = useCallback((shptmDcTpCd) => {
+    switch (shptmDcTpCd) {
+      case "CPN00401":
+        return `${currSign}${dcAmt}`;
+
+      case "CPN00402":
+        return `${cpnDctrt}%`;
+
+      default:
+        return null;
+    }
+  }, []);
+
   return (
     <SpottableListItem
       className={css.itemContainer}
@@ -45,19 +61,21 @@ export default function CouponListItem({
         length
       }
     >
-      <span className={css.cpnDctrt}>{cpnDctrt + "%"}</span>
-      <span className={css.cpnTtl}>{cpnTtl}</span>
-      <span className={css.cpnDesc}>
+      <div className={css.cpnDctrt}>{dcCount(shptmDcTpCd)}</div>
+      <div className={css.cpnTtl}>{cpnTtl}</div>
+      <div className={css.cpnDesc}>
         {$L("Purchase over ${cpnAplyMinPurcAmt} (up to ${cpnAplyMaxDcAmt} off)")
           .replace("{cpnAplyMinPurcAmt}", cpnAplyMinPurcAmt)
           .replace("{cpnAplyMaxDcAmt}", cpnAplyMaxDcAmt)}
-      </span>
-      <span className={css.cpnDate}>{`${formatDate(
-        cpnAplyStrtDtt
-      )}~${formatDate(cpnAplyEndDtt)}`}</span>
-      {cpnUseYn === "Y" && ordNo && (
-        <span className={css.orderNum}>{ordNo}</span>
-      )}
+      </div>
+      <div className={css.cpnDate}>{`${formatDate(cpnAplyStrtDtt)}~${formatDate(
+        cpnAplyEndDtt
+      )}`}</div>
+      <div className={css.orderBox}>
+        {cpnUseYn === "Y" && ordNo && (
+          <span className={css.orderNum}>{ordNo}</span>
+        )}
+      </div>
     </SpottableListItem>
   );
 }

com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyInfo/MyInfoTabContents/CouponTab/CouponListItem.module.less

@@ -13,23 +13,26 @@
   position: relative;
 
   .cpnDctrt {
-    .font(@fontFamily : @baseFont , @fontSize: 36px);
-    .size(@w: 60px , @h: auto);
+    display: inline-block;
+    .font(@fontFamily : @baseFont , @fontSize: 30px);
+    .size(@w: 5% , @h: auto);
     font-weight: 700;
     color: @PRIMARY_COLOR_RED;
   }
   .cpnTtl {
-    .size(@w: 440px, @h:auto);
+    display: inline-block;
+    .size(@w: 30%, @h:auto);
     .elip(@clamp: 1);
-    .font(@fontFamily: @baseFont, @fontSize: 36px);
+    .font(@fontFamily: @baseFont, @fontSize: 30px);
     font-weight: bold;
     color: @COLOR_GRAY07;
     line-height: 1.2;
   }
 
   .cpnDesc {
-    .font(@fontFamily: @baseFont, @fontSize: 24px);
-    .size(@w: 440px, @h:auto);
+    display: inline-block;
+    .font(@fontFamily: @baseFont, @fontSize: 22px);
+    .size(@w: 30%, @h:auto);
     .elip(@clamp: 1);
     margin-left: 20px;
     color: @COLOR_GRAY03;
@@ -37,26 +40,31 @@
   }
 
   .cpnDate {
-    .font(@fontFamily: @baseFont, @fontSize: 24px);
-    .size(@w: 440px, @h:auto);
+    display: inline-block;
+    .font(@fontFamily: @baseFont, @fontSize: 22px);
+    .size(@w: 20%, @h:auto);
     .elip(@clamp: 1);
     margin-left: 20px;
     color: @COLOR_GRAY03;
     line-height: 1.2;
   }
 
-  .orderNum {
-    margin-left: 20px;
-    .size(@w:300px, @h: 60px);
-    height: 60px;
-    padding: 15px 10px;
-    border: 3px solid #606060;
-    border-radius: 4px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    font-size: 24px;
-    color: #606060;
+  .orderBox {
+    display: inline-block;
+    .size(@w: 15%, @h:auto);
+
+    .orderNum {
+      margin-left: 20px;
+      .size(@w:200px, @h: 40px);
+      padding: 10px 8px;
+      border: 2px solid #606060;
+      border-radius: 4px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      font-size: 16px;
+      color: #606060;
+    }
   }
 
   &:focus {

com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyInfo/MyInfoTabContents/CouponTab/CouponTab.jsx

@@ -58,6 +58,9 @@ export default function CouponTab() {
               ordNo,
               cpnAplyMaxDcAmt,
               cpnAplyMinPurcAmt,
+              currSign,
+              shptmDcTpCd,
+              dcAmt,
             } = coupon;
 
             return (
@@ -73,6 +76,9 @@ export default function CouponTab() {
                 cpnAplyMaxDcAmt={cpnAplyMaxDcAmt}
                 cpnAplyMinPurcAmt={cpnAplyMinPurcAmt}
                 cpnUseYn={cpnUseYn}
+                currSign={currSign}
+                dcAmt={dcAmt}
+                shptmDcTpCd={shptmDcTpCd}
                 ordNo={ordNo}
                 length={couponDatas[0]?.total}
               />