[지라이슈없음] checkoutPanel 사이드바 포커스 아웃 방지, OFFERS & PROMOTION 가격 노출 변경

com.twin.app.shoptime/src/views/CheckOutPanel/components/OffersPromotionItemCard.jsx

@@ -1,7 +1,7 @@
-import React, { memo, useCallback, useEffect, useState } from "react";
+import React, { memo, useCallback, useEffect, useMemo, useState } from "react";
 
 import classNames from "classnames";
-import { useDispatch } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 
 import Spotlight from "@enact/spotlight";
 import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
@@ -9,10 +9,13 @@ import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDeco
 import { updateSelectedCoupon } from "../../../actions/checkoutActions";
 import CustomImage from "../../../components/CustomImage/CustomImage";
 import TDropDown from "../../../components/TDropDown/TDropDown";
-import { $L } from "../../../utils/helperMethods";
+import { $L, formatCurrencyValue } from "../../../utils/helperMethods";
 import css from "./OffersPromotionItemCard.module.less";
 
-const OffersPromotionItemContainer = SpotlightContainerDecorator("div");
+const OffersPromotionItemContainer = SpotlightContainerDecorator(
+  { leaveFor: { left: "", right: "" } },
+  "div"
+);
 const DropDownBox = SpotlightContainerDecorator("div");
 export const SIZES = {
   itemWidth: 660,
@@ -24,8 +27,6 @@ export default memo(function OffersPromotionItemCard({
   imgUrls,
   prdtNm,
   prodQty,
-  price2,
-  price3,
   prodtOpt,
   patncLogPath,
   prdtId,
@@ -37,12 +38,29 @@ export default memo(function OffersPromotionItemCard({
   prdtCoupon,
   spotlightId,
   offerSideBarOpen,
+  expsPrdtNo,
   ...rest
 }) {
+  const priceTotalData = useSelector(
+    (state) => state.checkout?.checkoutTotalData
+  );
+
   const dispatch = useDispatch();
   const [selectedIndex, setSelectedIndex] = useState(-1);
   const [openChk, setOpenChk] = useState(false);
 
+  const formattedPrices = useMemo(() => {
+    return {
+      discounted: priceTotalData?.totProdPrc
+        ? formatCurrencyValue(priceTotalData?.totProdPrc, currSign, currSignLoc)
+        : "-",
+
+      shipping: priceTotalData?.totDlvrAmt
+        ? formatCurrencyValue(priceTotalData?.totDlvrAmt, currSign, currSignLoc)
+        : "-",
+    };
+  }, [priceTotalData, currSign, currSignLoc]);
+
   const handleCouponSelect = (e) => {
     const selectedIdx = e.selected;
     const selected = prdtCoupon[selectedIdx];
@@ -69,11 +87,12 @@ export default memo(function OffersPromotionItemCard({
       Spotlight.focus("fixed_dropdown");
     }
   }, [offerSideBarOpen]);
+
   return (
     <OffersPromotionItemContainer className={css.itemContainer}>
       <div className={css.itemHeader}>
         <CustomImage src={patncLogPath} alt="" className={css.patnrLogo} />
-        <h2 className={css.prdtIt}>ID: {prdtId}</h2>
+        <h2 className={css.prdtIt}>ID: {expsPrdtNo}</h2>
       </div>
       <div className={css.itemContents}>
         <div className={css.leftContents}>
@@ -87,27 +106,18 @@ export default memo(function OffersPromotionItemCard({
           <p className={css.prdtNm}>{prdtNm}</p>
           <p className={css.priceWrap}>
             <span className={css.itemPrice}>
-              {currSignLoc === "L" ? (
-                <>
-                  {currSign} {price3}
-                  <strong className={css.originalPrice}>
-                    {currSign} {price2}
-                  </strong>
-                </>
-              ) : (
-                <>
-                  {price2 || price3} {currSign}
-                  <strong className={css.originalPrice}>
-                    {price2} {currSign}
-                  </strong>
-                </>
-              )}
+              <span className={css.discountedPrice}>
+                {formattedPrices.discounted}
+              </span>
+              {/* {originalPrice && originalPrice !== discountedPrice && (
+                <span className={css.originalPrice}>
+                  {formattedPrices.original}
+                </span>
+              )} */}
             </span>
-            <span className={css.shPrice}>
+            <span className={css.shippingPrice}>
               {`${$L("S&H")}: `}
-              {currSignLoc === "L"
-                ? `${currSign} ${shippingCharge || 0.0}`
-                : `${shippingCharge || 0.0} ${currSign}`}
+              {formattedPrices.shipping}
             </span>
             {auctProdYn === "Y" && !auctFinalPriceChgDt && (
               <div className={css.noticeBox}>

com.twin.app.shoptime/src/views/CheckOutPanel/container/FixedSideBar.jsx

@@ -14,7 +14,10 @@ import OffersPromotionItemCard, {
 } from "../components/OffersPromotionItemCard";
 import css from "./FixedSideBar.module.less";
 
-const SideBarContainer = SpotlightContainerDecorator("div");
+const SideBarContainer = SpotlightContainerDecorator(
+  { leaveFor: { left: "", right: "" } },
+  "div"
+);
 
 export default function FixedSideBar({ closeSideBar, offerSideBarOpen }) {
   const orderItemList = useSelector(
@@ -35,9 +38,8 @@ export default function FixedSideBar({ closeSideBar, offerSideBarOpen }) {
           imgUrls={item.imgUrls}
           prdtNm={item.prdtNm}
           prodQty={item.prodQty}
-          price2={item.price2}
-          price3={item.price3}
           prdtOpt={item.prdtOpt}
+          expsPrdtNo={item.expsPrdtNo}
           patncLogPath={item.patncLogPath}
           prdtId={item.prdtId}
           currSign={item.currSign}

com.twin.app.shoptime/src/views/CheckOutPanel/container/OrderItemsSideBar.jsx

@@ -12,7 +12,10 @@ import { $L } from "../../../utils/helperMethods";
 import OrderItemCard, { SIZES } from "../components/OrderItemCard";
 import css from "./OrderItemsSideBar.module.less";
 
-const SideBarContainer = SpotlightContainerDecorator("div");
+const SideBarContainer = SpotlightContainerDecorator(
+  { leaveFor: { left: "", right: "" } },
+  "div"
+);
 
 export default function OrderItemsSideBar({ closeSideBar }) {
   const orderItemList = useSelector(