[SHOPTIME-3672] [결제가능상품상세] 상품상세 UI 확인 요청

[수정파일] 1. BillingProductPrcie.module.less 2. SingleOption.jsx 3. SingleOption.module.less [수정내용] 1. 상품상세 페이지 UI 변경점 반영
2024-09-24 13:54:44 +09:00
parent 73969aa823
commit be0086969e
3 changed files with 177 additions and 142 deletions
--- a/com.twin.app.shoptime/src/views/DetailPanel/SingleProduct/BillingProductPrice/BillingProductPrice.module.less
+++ b/com.twin.app.shoptime/src/views/DetailPanel/SingleProduct/BillingProductPrice/BillingProductPrice.module.less
@@ -46,7 +46,6 @@
  font-weight: bold;
  font-size: 36px;
  color: @COLOR_GRAY07;
-  margin-top: 31px;
  .priceWrapper {
    .flex();
  }
--- a/com.twin.app.shoptime/src/views/DetailPanel/SingleProduct/SingleOption.jsx
+++ b/com.twin.app.shoptime/src/views/DetailPanel/SingleProduct/SingleOption.jsx
@@ -67,7 +67,7 @@ export default function SingleOption({
  const dispatch = useDispatch();
  const productOptionInfos = useSelector((state) => state.product.prdtOptInfo);
  const productData = useSelector((state) => state.main.productData);
-  const { partnerCoupon, shoptimeCoupon } = useSelector(
+  const { partnerCoupon } = useSelector(
    (state) => state.coupon.productCouponSearchData
  );
  const { popupVisible, activePopup } = useSelector(
@@ -116,9 +116,9 @@ export default function SingleOption({
        couponInfo = partnerCoupon[0];
      }

-      if (shoptimeCoupon && shoptimeCoupon.length > 0) {
-        couponInfo = shoptimeCoupon[0];
-      }
+      // if (shoptimeCoupon && shoptimeCoupon.length > 0) {
+      //   couponInfo = shoptimeCoupon[0];
+      // }

      const { catCd, catNm, patncNm, patnrId, prdtId, prdtNm, priceInfo } =
        productData;
@@ -152,7 +152,7 @@ export default function SingleOption({
    productData,
    productOptionInfos,
    quantity,
-    shoptimeCoupon,
+    // shoptimeCoupon,
  ]);

  useEffect(() => {
@@ -160,12 +160,12 @@ export default function SingleOption({
    if (partnerCoupon && partnerCoupon.length > 0) {
      newPromotions.push($L("SPECIAL PROMOTION"));
    }
-    if (shoptimeCoupon && shoptimeCoupon.length > 0) {
-      newPromotions.push($L("SHOPTIME PROMOTION"));
-    }
+    // if (shoptimeCoupon && shoptimeCoupon.length > 0) {
+    //   newPromotions.push($L("SHOPTIME PROMOTION"));
+    // }

    setPromotions(newPromotions);
-  }, [partnerCoupon, shoptimeCoupon]);
+  }, [partnerCoupon]);

  useEffect(() => {
    dispatch(getProductOptionId(undefined));
@@ -293,6 +293,15 @@ export default function SingleOption({
    ]
  );

+  useEffect(() => {
+    if (productOptionInfos) {
+      console.log("#productOptionInfos", productOptionInfos.length);
+    }
+    if (promotions) {
+      console.log("#promotions", promotions, promotions.length);
+    }
+  }, [productOptionInfos, promotions]);
+
  const handleLoginPopUpOpen = useCallback(() => {
    if (hasOnClose) {
      dispatch(setHidePopup());
@@ -416,9 +425,8 @@ export default function SingleOption({
      if (!userNumber) {
        dispatch(setShowPopup(Config.ACTIVE_POPUP.loginPopup));
        return;
-      } else if (promotion === "SHOPTIME PROMOTION") {
-        setSelectedCoupon(shoptimeCoupon);
-      } else if (promotion === "SPECIAL PROMOTION") {
+      }
+      if (promotion === "SPECIAL PROMOTION") {
        setSelectedCoupon(partnerCoupon);
      }
      setCouponTypes(idx);
@@ -633,7 +641,18 @@ export default function SingleOption({
  return (
    <div className={css.detailContainer}>
      <ContainerLF>
-        <TScroller verticalScrollbar="auto" className={css.detailScroll}>
+        <TScroller
+          verticalScrollbar={
+            productOptionInfos && productOptionInfos.length > 2 && "auto"
+          }
+          className={classNames(
+            css.detailScroll,
+            productOptionInfos &&
+              productOptionInfos.length > 1 &&
+              css.optionSecondary,
+            !promotions && promotions.length < 0 && css.couponMissing
+          )}
+        >
          {productOptionInfos && productOptionInfos.length > 0 && (
            <ContainerLF spotlightId="billingProduct-optionContainer">
              {productOptionInfos.length !== 1 && (
@@ -702,58 +721,61 @@ export default function SingleOption({
          </Container>
        </TScroller>
      </ContainerLF>
-
-      <div className={css.middleLayer}>
-        {/* COUPON */}
-        <div className={css.couponWrap}>
-          {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}
-                  onSpotlightLeft={onSpotlightLeftCoupon}
-                  onClick={() => {
-                    handleCouponClick(idx, promotion);
-                  }}
+      <div className={css.temp}>
+        <div className={css.middleLayer}>
+          {/* COUPON */}
+          <div className={css.couponWrap}>
+            {promotions.map((promotion, idx) => {
+              return (
+                <Container
+                  className={css.detailBottomLayer}
+                  key={`coupon: ${idx}`}
                >
-                  {$L("COUPON")}
-                </TButton>
-              </Container>
-            );
-          })}
-        </div>
+                  <div className={css.leftLayer}>
+                    <span className={css.promotionName}>{promotion}</span>
+                    <span className={css.promotionDesc}>{promotionDesc}</span>
+                  </div>
+                  <TButton
+                    className={css.promotionBtn}
+                    onSpotlightLeft={onSpotlightLeftCoupon}
+                    onClick={() => {
+                      handleCouponClick(idx, promotion);
+                    }}
+                  >
+                    {$L("COUPON")}
+                  </TButton>
+                </Container>
+              );
+            })}
+          </div>

-        {/* Price */}
-        <BillingProductPrice
-          productInfo={productInfo}
-          selectedOptions={selectedOptions}
-          patncNm={patncNm || productData?.patncNm}
-        />
-      </div>
-      {/* BYU NOW & FAVORITE */}
-      <div>
-        <Container className={css.bottomBtnLayer}>
-          <TButton
-            className={css.buyNowBtn}
-            onClick={handleClickBuyNow}
-            spotlightId={"spotlightId_buynowBtn"}
-            spotlightDisabled={productInfo.soldoutFlag === "Y"}
-          >
-            {$L("BUY NOW")}
-          </TButton>
-          <FavoriteBtn
-            selectedPatnrId={selectedPatnrId}
-            selectedPrdtId={selectedPrdtId}
+          {/* Price */}
+          <BillingProductPrice
+            productInfo={productInfo}
+            selectedOptions={selectedOptions}
+            patncNm={patncNm || productData?.patncNm}
          />
-        </Container>
-        <div className={css.disclaimerContainer}>{productInfo.disclaimer}</div>
+        </div>
+        {/* BYU NOW & FAVORITE */}
+        <div>
+          <Container className={css.bottomBtnLayer}>
+            <TButton
+              className={css.buyNowBtn}
+              onClick={handleClickBuyNow}
+              spotlightId={"spotlightId_buynowBtn"}
+              spotlightDisabled={productInfo.soldoutFlag === "Y"}
+            >
+              {$L("BUY NOW")}
+            </TButton>
+            <FavoriteBtn
+              selectedPatnrId={selectedPatnrId}
+              selectedPrdtId={selectedPrdtId}
+            />
+          </Container>
+          <div className={css.disclaimerContainer}>
+            {productInfo.disclaimer}
+          </div>
+        </div>
      </div>
      {/* LOGIN POPUP */}
      {activePopup === Config.ACTIVE_POPUP.loginPopup && (
--- a/com.twin.app.shoptime/src/views/DetailPanel/SingleProduct/SingleOption.module.less
+++ b/com.twin.app.shoptime/src/views/DetailPanel/SingleProduct/SingleOption.module.less
@@ -3,11 +3,19 @@

 .detailContainer {
  width: 846px;
-  margin-top: 20px;

  .detailScroll {
    width: 100%;
-    height: 214px;
+    height: 314px;
+    &.optionPrimary {
+      height: 314px;
+    }
+    &.optionSecondaty {
+      height: 370px;
+    }
+    &.couponMissing {
+      height: 414px;
+    }
    background: @BG_COLOR_02;

    border-top: 1px solid @COLOR_GRAY02;
@@ -116,100 +124,106 @@
      }
    }
  }
-  .middleLayer {
-    height: 300px;
-    // COUPON
-    .couponWrap {
-      width: 100%;
-      height: 180px;
-    }
-    .detailBottomLayer {
-      width: 100%;
+  .temp {
+    // flex-direction: column;
+    // display: flex;
+    // justify-content: flex-end;

-      margin-top: 27px;
-      .flex(@justifyCenter:space-between);
-      .leftLayer {
-        .flex(@direction:column, @justifyCenter:center,@alignCenter:flex-start);
-        .promotionName {
-          color: @COLOR_GRAY05;
+    .middleLayer {
+      // COUPON
+      .couponWrap {
+        width: 100%;
+      }
+      .detailBottomLayer {
+        width: 100%;
+
+        margin-top: 27px;
+        margin-bottom: 31px;
+        .flex(@justifyCenter:space-between);
+        .leftLayer {
+          .flex(@direction:column, @justifyCenter:center,@alignCenter:flex-start);
+          .promotionName {
+            color: @COLOR_GRAY05;
+            font-weight: bold;
+            font-size: 24px;
+          }
+          .promotionDesc {
+            color: @COLOR_GRAY03;
+            font-size: 24px;
+          }
+        }
+        .promotionBtn {
+          min-width: 144px;
+          height: 60px;
          font-weight: bold;
          font-size: 24px;
+          line-height: 60px;
+          border-radius: 6px;
+          background: @COLOR_GRAY03;
+          position: relative;
+          &:focus {
+            background: @PRIMARY_COLOR_RED;
+          }
        }
-        .promotionDesc {
-          color: @COLOR_GRAY03;
+      }
+
+      .shippingLayer {
+        width: 100%;
+        .flex(@justifyCenter:space-between);
+        // margin-top: 10px;
+        > span {
          font-size: 24px;
-        }
-      }
-      .promotionBtn {
-        min-width: 144px;
-        height: 60px;
-        font-weight: bold;
-        font-size: 24px;
-        line-height: 60px;
-        border-radius: 6px;
-        background: @COLOR_GRAY03;
-        position: relative;
-        &:focus {
-          background: @PRIMARY_COLOR_RED;
+          line-height: 1.33;
+          color: @COLOR_GRAY03;
        }
      }
    }

-    .shippingLayer {
-      width: 100%;
+    .bottomBtnLayer {
+      margin-top: 24px;
      .flex(@justifyCenter:space-between);
-      // margin-top: 10px;
-      > span {
-        font-size: 24px;
-        line-height: 1.33;
-        color: @COLOR_GRAY03;
+      .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);
      }
    }
-  }
-
-  .bottomBtnLayer {
-    .flex(@justifyCenter:space-between);
-    .buyNowBtn {
-      min-width: 756px;
-      height: 78px;
+    .disclaimerContainer {
+      background: url("../../../../assets/images/icons/ic-warning.svg")
+        no-repeat left top;
+      background-size: 18px 18px;
+      font-size: 18px;
+      padding-left: 28px;
+      line-height: 1.1;
+      margin-top: 16px;
    }
-    .favoriteBtn {
-      min-width: 78px;
-      height: 78px;
-      background-image: url(../../../../assets/images/icons/ic-heart-nor@3x.png);
-      .imgElement(54px, 54px, center, center);
-    }
-  }
-  .disclaimerContainer {
-    background: url("../../../../assets/images/icons/ic-warning.svg") no-repeat
-      left top;
-    background-size: 18px 18px;
-    font-size: 18px;
-    padding-left: 28px;
-    line-height: 1.1;
-    margin-top: 16px;
-  }
-  .itemContainer {
-    background: #f00;
-    width: 440px;
-    height: 320px;
-    .couponItem {
+    .itemContainer {
+      background: #f00;
      width: 440px;
      height: 320px;
-      position: relative;
-      background: yellow;
+      .couponItem {
+        width: 440px;
+        height: 320px;
+        position: relative;
+        background: yellow;
+      }
    }
-  }

-  .loginPopup {
-    .btnContainer {
-      margin: 0 0 30px 0;
-      display: flex;
-      justify-content: center;
-      .btn {
-        min-width: 300px;
-        height: 20px;
-        margin: 0 6px;
+    .loginPopup {
+      .btnContainer {
+        margin: 0 0 30px 0;
+        display: flex;
+        justify-content: center;
+        .btn {
+          min-width: 300px;
+          height: 20px;
+          margin: 0 6px;
+        }
      }
    }
  }