[OptionCommon] popup 컨트롤 이벤트 핸들러 추가(수정 예정), Incre/Decre 버튼 추가, assets > btn 이미지 추가, 버튼 별 PopUp 연결

com.twin.app.shoptime/src/views/DetailPanel/components/optionTypes/OptionCommon.jsx

@@ -1,14 +1,21 @@
 import React, { useCallback, useEffect, useState } from "react";
 
+import classNames from "classnames";
 import { useDispatch, useSelector } from "react-redux";
 
 import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
 import Spottable from "@enact/spotlight/Spottable";
 
+import { setHidePopup, setShowPopup } from "../../../../actions/commonActions";
+import {
+  getProductCouponInfo,
+  getProductCouponSearch,
+} from "../../../../actions/couponActions";
 import { getProductOption } from "../../../../actions/productActions";
 import TButton from "../../../../components/TButton/TButton";
 import TPopUp from "../../../../components/TPopUp/TPopUp";
 import TScroller from "../../../../components/TScroller/TScroller";
+import usePriceInfo from "../../../../hooks/usePriceInfo";
 import { $L } from "../../../../utils/helperMethods";
 import css from "./OptionCommon.module.less";
 
@@ -17,64 +24,121 @@ const Container = SpotlightContainerDecorator(
   "div"
 );
 
+const ACTIVE_POPUP = {
+  options: "options",
+  favorite: "favorite",
+  coupon: "coupon",
+};
+
 export default function OptionCommon({ selectedPatnrId, selectedPardtId }) {
   const dispatch = useDispatch();
   const productOptionInfos = useSelector((state) => state.product.prdtOptInfo);
-
+  const productInfos = useSelector((state) => state.main.productData);
-  const [selectedIndex, setSelectedIndex] = useState(0);
+  const popupVisible = useSelector((state) => state.common.popupVisible);
-  const [optionPopupOpen, setOptionPopupOpen] = useState(false);
+  const couponInfos = useSelector(
-  const [secondOptionOpen, setSecondOptionOpen] = useState(false);
+    (state) => state.coupon.productCouponSearchData
-
-  useEffect(() => {
-    dispatch(
-      getProductOption({
-        patnrId: selectedPatnrId,
-        prdtId: selectedPardtId,
-      })
-    );
-  }, [dispatch]);
-
-  const handleClose = useCallback(() => {
-    setOptionPopupOpen(false);
-  }, [optionPopupOpen]);
-
-  const handleOptionClick = useCallback(
-    (idx) => {
-      idx === 0 ? setOptionPopupOpen(true) : setSecondOptionOpen(true);
-    },
-    [productOptionInfos]
   );
 
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [quantity, setQuantity] = useState(1);
+  const [activePopup, setActivePopup] = useState(null);
+  const [couponTypes, setCouponTypes] = useState(null);
+
+  const { priceInfo, shippingCharge, favorYn } = productInfos;
+  const { originalPrice, discountedPrice, discountRate } =
+    usePriceInfo(priceInfo) || {};
+
+  const promotions = [$L("SHOPTIME PROMOTION"), $L("SPECIAL PROMOTION")];
+  const promotionDesc = $L("Coupon only applicable to this product!");
+
+  useEffect(() => {
+    if (selectedPardtId && selectedPatnrId) {
+      dispatch(
+        getProductOption({
+          patnrId: selectedPatnrId,
+          prdtId: selectedPardtId,
+        })
+      );
+      dispatch(
+        getProductCouponSearch({
+          // patnrId: selectedPatnrId,
+          // prdtId: selectedPardtId,
+          patnrId: 11,
+          prdtId: 7280567,
+        })
+      );
+      dispatch(
+        getProductCouponInfo({
+          patnrId: selectedPatnrId,
+          prdtId: selectedPardtId,
+        })
+      );
+    }
+  }, [dispatch, selectedPardtId, selectedPatnrId]);
+
+  const handleOptionClick = useCallback(() => {}, []);
+
+  const handleIncrement = useCallback(() => {
+    setQuantity(quantity + 1);
+  }, [quantity]);
+
+  const handlDecrement = useCallback(() => {
+    if (quantity <= 1) setQuantity(1);
+    else setQuantity(quantity - 1);
+  }, [quantity]);
+
+  const handleFavoriteClick = useCallback(() => {
+    // TODO : 찜 로직
+    setActivePopup(ACTIVE_POPUP.favorite);
+    dispatch(setShowPopup());
+  }, [dispatch]);
+
+  const handleCouponClick = useCallback(
+    (idx) => {
+      setActivePopup(ACTIVE_POPUP.coupon);
+      setCouponTypes(idx);
+      dispatch(setShowPopup());
+    },
+    [dispatch]
+  );
+
+  const onClose = useCallback(() => {
+    dispatch(setHidePopup());
+    setActivePopup(null);
+  }, [dispatch]);
+
+  // console.log("#couponInfos", couponInfos);
   return (
-    <Container className={css.detailContainer}>
+    <div className={css.detailContainer}>
-      <TScroller verticalScrollbar="auto" className={css.detailScroll}>
+      <Container>
-        {productOptionInfos &&
+        <TScroller verticalScrollbar="auto" className={css.detailScroll}>
-          productOptionInfos.length > 0 &&
+          {productOptionInfos &&
-          productOptionInfos.map((option, idx) => {
+            productOptionInfos.length > 0 &&
-            const {
+            productOptionInfos.map((option, idx) => {
-              cntryCd,
+              const {
-              concProdOptSno,
+                cntryCd,
-              optNm,
+                concProdOptSno,
-              patnrId,
+                optNm,
-              prdtId,
+                patnrId,
-              prodOptSno,
+                prdtId,
-              prodOptTpCdCval,
+                prodOptSno,
-              prdtOptDtl,
+                prodOptTpCdCval,
-            } = option;
+                prdtOptDtl,
-            return (
+              } = option;
-              <div key={`option: ${idx}`} className={css.optionLayer}>
+              return (
-                <span>{$L(optNm.toUpperCase())}</span>
+                <div key={`option: ${idx}`} className={css.optionLayer}>
-                <TButton
+                  <span>{$L(optNm.toUpperCase())}</span>
-                  className={css.optionBtn}
+                  <TButton
-                  onClick={() => {
+                    className={css.optionBtn}
-                    handleOptionClick(idx);
+                    onClick={() => {
-                  }}
+                      handleOptionClick(idx);
-                >
+                    }}
-                  <span className={css.optionValue}>
+                  >
-                    {prdtOptDtl[0].prodOptCval}
+                    <span className={css.optionValue}>
-                  </span>
+                      {prdtOptDtl[0].prodOptCval}
-                </TButton>
+                    </span>
-                <TPopUp
+                  </TButton>
+                  {/* <TPopUp
                   kind={"optionPopup"}
                   options={
                     productOptionInfos && productOptionInfos[idx].prdtOptDtl
@@ -90,26 +154,122 @@ export default function OptionCommon({ selectedPatnrId, selectedPardtId }) {
                   button1Text={$L("CLOSE")}
                   selectedOptionIdx={selectedIndex}
                   setSelectedOptionIdx={setSelectedIndex}
-                />
+                /> */}
-              </div>
+                </div>
-            );
+              );
-          })}
+            })}
-      </TScroller>
+          {/* QUANTITY */}
-      <div className={css.detailBottomLayer}>
+          <Container className={css.quantityLayer}>
-        <div className={css.leftLayer}>
+            <span>{$L("QUANTITY")}</span>
-          <span>SHOPTIME PROMOTION</span>
+            <div className={css.wrapper}>
-          <span>Coupon only applicable to this product!</span>
+              <TButton
+                className={classNames(
+                  css.quantityBtn,
+                  css.decreaseBtn,
+                  quantity === 1 && css.decreaseDimBtn
+                )}
+                onClick={handlDecrement}
+              />
+              <span>{quantity}</span>
+              <TButton
+                className={classNames(css.quantityBtn, css.increaseBtn)}
+                onClick={handleIncrement}
+              />
+            </div>
+          </Container>
+        </TScroller>
+      </Container>
+      {/* COUPON */}
+      {promotions.map((promotion, idx) => {
+        return (
+          <Container className={css.detailBottomLayer} key={`coupon: ${idx}`}>
+            <div className={css.leftLayer}>
+              <span className={css.promotionName}>{promotion}</span>
+              <span className={css.promotionDesc}>{promotionDesc}</span>
+            </div>
+            <TButton
+              className={css.promotionBtn}
+              onClick={() => {
+                handleCouponClick(idx);
+              }}
+            >
+              {$L("COUPON")}
+            </TButton>
+          </Container>
+        );
+      })}
+
+      {/* QVC Price */}
+      {originalPrice && discountedPrice && (
+        <div
+          className={
+            originalPrice === discountedPrice
+              ? css.notDiscountedPriceLayer
+              : css.discountedPriceLayer
+          }
+        >
+          <span>{$L("QVC Price")}</span>
+          <div className={css.priceWrapper}>
+            {discountedPrice !== originalPrice && (
+              <span className={css.discountRateTag}>{discountRate}</span>
+            )}
+            <span className={css.discountedPrice}>{discountedPrice}</span>
+            {discountedPrice !== originalPrice && (
+              <span className={css.originalPrice}>{originalPrice}</span>
+            )}
+          </div>
         </div>
-        <TButton>COUPON</TButton>
+      )}
-      </div>
+      {shippingCharge && (
-      <div>
+        <div className={css.shippingLayer}>
-        <span>{$L("QVC Price")}</span>
+          <span>{$L("Shipping Free")}</span>
-        <span></span>
+          <span>{shippingCharge}</span>
-      </div>
+        </div>
-      <div>
+      )}
-        <span>{$L("Shipping Free")}</span>
+      {/* BYU NOW & FAVORITE */}
-        <span></span>
+      <Container className={css.bottomBtnLayer}>
-      </div>
+        <TButton className={css.buyNowBtn}>{$L("BUY NOW")}</TButton>
-    </Container>
+        <TButton className={css.favoriteBtn} onClick={handleFavoriteClick} />
+      </Container>
+      {/* COUPON POPUP */}
+      {activePopup && activePopup === "coupon" && (
+        <TPopUp
+          kind="couponPopup"
+          className={css.couponContainer}
+          hasText
+          title={
+            couponTypes === 0
+              ? $L("SHOPTIME PROMOTION")
+              : $L("SPECIAL PROMOTION")
+          }
+          text={couponTypes === 0 ? promotions[0] : promotions[1]}
+          open={ACTIVE_POPUP.coupon && popupVisible}
+          onClose={onClose}
+          hasButton
+          button1Text={$L("CLOSE")}
+          button2Text={$L("DOWNLOAD ALL")}
+        >
+          <div className={css.itemContainer}>
+            <div className={css.couponItem}></div>
+          </div>
+        </TPopUp>
+      )}
+      {/* FAVORITE POPUP */}
+      {activePopup && activePopup === "favorite" && (
+        <TPopUp
+          kind="textPopup"
+          open={ACTIVE_POPUP.favorite && popupVisible}
+          onClose={onClose}
+          hasButton
+          button1Text={$L("OK")}
+          hasText
+          text={
+            favorYn && favorYn === "N"
+              ? $L("Added to My Favorites List")
+              : $L("Canceled from My Favorites List")
+          }
+        />
+      )}
+    </div>
   );
 }

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

@@ -54,5 +54,176 @@
         }
       }
     }
+
+    // QUANTITY
+    .quantityLayer {
+      .flex(@justifyCenter:space-between);
+      .font(@baseFontBold,@fontSize:24px);
+      color: @COLOR_GRAY05;
+      margin-bottom: 20px;
+      .wrapper {
+        min-width: 560px;
+        .flex(@justifyCenter:space-between);
+      }
+      .quantityBtn {
+        min-width: 90px;
+        background-color: @COLOR_WHITE;
+        color: @COLOR_GRAY03;
+        position: relative;
+
+        &:focus {
+          color: @PRIMARY_COLOR_RED;
+          &::after {
+            .focused(@boxShadow: 22px, @borderRadius: 12px);
+            .imgElement(42px, 42px, right 26px, center);
+          }
+        }
+
+        &.increaseBtn {
+          background-image: url(../../../../../assets/images/btn/btn-quantity-increase-nor@3x.png);
+          .imgElement(90px, 90px, center, center);
+          &:focus {
+            background-image: url(../../../../../assets/images/btn/btn-quantity-increase-foc@3x.png);
+            .imgElement(90px, 90px, center, center);
+          }
+        }
+
+        &.decreaseBtn {
+          background-image: url(../../../../../assets/images/btn/btn-quantity-decrease-nor@3x.png);
+          .imgElement(90px, 90px, center, center);
+          &:focus {
+            background-image: url(../../../../../assets/images/btn/btn-quantity-decrease-foc@3x.png);
+            .imgElement(90px, 90px, center, center);
+          }
+        }
+
+        &.decreaseDimBtn {
+          background-image: url(../../../../../assets/images/btn/btn-quantity-decrease-dim@3x.png);
+          .imgElement(90px, 90px, center, center);
+          opacity: 0.3;
+        }
+      }
+    }
+  }
+
+  // COUPON
+  .detailBottomLayer {
+    width: 100%;
+    margin-top: 27px;
+    .flex(@justifyCenter:space-between);
+    .leftLayer {
+      .flex(@direction:column, @justifyCenter:center,@alignCenter:flex-start);
+      .promotionName {
+        color: @COLOR_GRAY05;
+        .font(@baseFontBold,@fontSize:24px);
+      }
+      .promotionDesc {
+        color: @COLOR_GRAY03;
+        .font(@baseFont,@fontSize:24px);
+      }
+    }
+    .promotionBtn {
+      min-width: 144px;
+      height: 60px;
+      .font(@baseFontBold,@fontSize:24px);
+      line-height: 60px;
+      border-radius: 6px;
+      background: @COLOR_GRAY03;
+      position: relative;
+      &:focus {
+        background: @PRIMARY_COLOR_RED;
+      }
+    }
+  }
+
+  .discountedPriceLayer {
+    .flex(@justifyCenter:space-between);
+    .font(@baseFontBold,@fontSize:36px);
+    color: @COLOR_GRAY07;
+    margin-top: 31px;
+
+    .priceWrapper {
+      .flex();
+    }
+
+    .discountRateTag {
+      padding: 0 12px;
+      background: #f00;
+      color: @COLOR_WHITE;
+      .font(@baseFontBold,@fontSize:24px);
+      text-align: center;
+      border-radius: 6px;
+      height: 42px;
+      line-height: 42px;
+    }
+
+    .discountedPrice {
+      .font(@baseFontBold,@fontSize:44px);
+      line-height: 1.14;
+      color: @PRIMARY_COLOR_RED;
+      margin-left: 12px;
+    }
+
+    .originalPrice {
+      .font(@baseFont,@fontSize:24px);
+      color: @COLOR_GRAY03;
+      text-decoration: line-through;
+      margin-left: 9px;
+    }
+  }
+
+  .notDiscountedPriceLayer {
+    .flex(@justifyCenter:space-between);
+    .font(@baseFontBold,@fontSize:36px);
+    color: @COLOR_GRAY07;
+    margin-top: 31px;
+    .priceWrapper {
+      .flex();
+    }
+    .discountedPrice {
+      .font(@baseFontBold,@fontSize:44px);
+      line-height: 1.14;
+      color: @PRIMARY_COLOR_RED;
+      margin-left: 12px;
+    }
+  }
+
+  .shippingLayer {
+    width: 100%;
+    .flex(@justifyCenter:space-between);
+    margin-top: 13px;
+    > span {
+      .font(@baseFont,@fontSize:24px);
+      line-height: 1.33;
+      color: @COLOR_GRAY03;
+    }
+  }
+
+  .bottomBtnLayer {
+    margin-top: 24px;
+    position: relative;
+    .flex(@justifyCenter:space-between);
+    .buyNowBtn {
+      min-width: 756px;
+      height: 78px;
+    }
+    .favoriteBtn {
+      min-width: 78px;
+      height: 78px;
+      background-image: url(../../../../../assets/images/icons/ic-heart-nor@3x.png);
+      .imgElement(54px, 54px, center, center);
+    }
+  }
+
+  .itemContainer {
+    background: #f00;
+    width: 440px;
+    height: 320px;
+    .couponItem {
+      width: 440px;
+      height: 320px;
+      position: relative;
+      background: yellow;
+    }
   }
 }

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

@@ -23,7 +23,7 @@ export default function ProductOption({ selectedPatnrId, selectedPardtId }) {
           </div>
           <div className={css.title}>{$L(prdtNm)}</div>
           <div className={css.bottomLayer}>
-            {revwGrd && <StarRating rating={revwGrd} />}
+            <div>{revwGrd && <StarRating rating={revwGrd} />}</div>
             <ProductTag />
           </div>
         </div>