DetailPane 테마 , 일반상품 옵션 여백 안맞는 부분 수정

2024-04-09 14:01:47 +09:00
parent d5a642de49
commit f721d4e583
10 changed files with 66 additions and 47 deletions
--- a/com.twin.app.shoptime/src/views/DetailPanel/DetailPanel.jsx
+++ b/com.twin.app.shoptime/src/views/DetailPanel/DetailPanel.jsx
@@ -1,23 +1,30 @@
-import React, { useCallback, useEffect, useState } from "react";
+import React, {
+  useCallback,
+  useEffect,
+  useState,
+} from 'react';

-import { useDispatch, useSelector } from "react-redux";
+import {
+  useDispatch,
+  useSelector,
+} from 'react-redux';

 import {
  getThemeCurationDetailInfo,
  getThemeHotelDetailInfo,
-} from "../../actions/homeActions";
-import { getMainCategoryDetail } from "../../actions/mainActions";
-import { popPanel } from "../../actions/panelActions";
-import { getProductGroup } from "../../actions/productActions";
-import TBody from "../../components/TBody/TBody";
-import THeader from "../../components/THeader/THeader";
-import TPanel from "../../components/TPanel/TPanel";
-import css from "./DetailPanel.module.less";
-import GroupProduct from "./GroupProduct/GroupProduct";
-import SingleProduct from "./SingleProduct/SingleProduct";
-import ThemeProduct from "./ThemeProduct/ThemeProduct";
-import UnableProduct from "./UnableProduct/UnableProduct";
-import YouMayLike from "./YouMayLike/YouMayLike";
+} from '../../actions/homeActions';
+import { getMainCategoryDetail } from '../../actions/mainActions';
+import { popPanel } from '../../actions/panelActions';
+import { getProductGroup } from '../../actions/productActions';
+import TBody from '../../components/TBody/TBody';
+import THeader from '../../components/THeader/THeader';
+import TPanel from '../../components/TPanel/TPanel';
+import css from './DetailPanel.module.less';
+import GroupProduct from './GroupProduct/GroupProduct';
+import SingleProduct from './SingleProduct/SingleProduct';
+import ThemeProduct from './ThemeProduct/ThemeProduct';
+import UnableProduct from './UnableProduct/UnableProduct';
+import YouMayLike from './YouMayLike/YouMayLike';

 export default function ItemDetail() {
  const [selectedPatnrId, setSelectedPatnrId] = useState("");
@@ -34,9 +41,12 @@ export default function ItemDetail() {
    (state) => state.home.themeCurationDetailInfoData
  );

+  console.log("#panels", panels);
  const dispatch = useDispatch();
+
  const getPanelInfo = () => {
    if (panels) {
+      console.log("#getPanelInfo");
      for (let i = 0; i < panels.length; i++) {
        if (panels[i].name === "detailpanel") {
          setSelectedPatnrId(panels[i].panelInfo.patnrId);
@@ -87,7 +97,7 @@ export default function ItemDetail() {
        })
      );
    }
-  }, [dispatch, selectedPatnrId]);
+  }, [dispatch, selectedPatnrId, selectedPrdtId, panels]);

  const onClick = () => {
    dispatch(popPanel());
--- a/com.twin.app.shoptime/src/views/DetailPanel/GroupProduct/GroupProduct.jsx
+++ b/com.twin.app.shoptime/src/views/DetailPanel/GroupProduct/GroupProduct.jsx
@@ -16,8 +16,8 @@ export default function GroupProduct({
 }) {
  const productData = useSelector((state) => state.main.productData);
  return (
-    <div className={css.container}>
-      <div>
+    <>
+      <div className={css.container}>
        <Indicator
          selectedIndex={selectedIndex}
          setSelectedIndex={setSelectedIndex}
@@ -36,6 +36,6 @@ export default function GroupProduct({
          selectedPardtId={selectedPrdtId}
        />
      </div>
-    </div>
+    </>
  );
 }
--- a/com.twin.app.shoptime/src/views/DetailPanel/SingleProduct/SingleOption.jsx
+++ b/com.twin.app.shoptime/src/views/DetailPanel/SingleProduct/SingleOption.jsx
@@ -57,7 +57,8 @@ export default function SingleOption({
    (state) => state.common.popup
  );
  const { loginUserData } = useSelector((state) => state.common.appStatus);
-
+  const [promotions, setPromotions] = useState([]);
+  const [selectedCoupon, setSelectedCoupon] = useState([]);
  const [selectedBtnOptIdx, setSelectedBtnOptIdx] = useState(0);
  const [quantity, setQuantity] = useState(1);
  const [selectedOptionIdx, setSelectedOptionsIdx] = useState([]);
@@ -68,17 +69,28 @@ export default function SingleOption({
  const { originalPrice, discountedPrice, discountRate } =
    usePriceInfo(priceInfo) || {};

-  let promotions = [];
-
  useEffect(() => {
+    const newPromotions = [];
    if (partnerCoupon && partnerCoupon.length > 0) {
-      promotions.push($L("SHOPTIME PROMOTION"));
+      newPromotions.push($L("SHOPTIME PROMOTION"));
    }
    if (shoptiemCoupon && shoptiemCoupon.length > 0) {
-      promotions.push($L("SPECIAL PROMOTION"));
+      newPromotions.push($L("SPECIAL PROMOTION"));
    }
+
+    setPromotions(newPromotions);
  }, [partnerCoupon, shoptiemCoupon]);

+  useEffect(() => {
+    if (promotions === "SHOPTIME PROMOTION" && shoptiemCoupon) {
+      setSelectedCoupon(shoptiemCoupon);
+    } else if (promotions === "SPECIAL PROMOTION" && partnerCoupon) {
+      setSelectedCoupon(partnerCoupon);
+    }
+  }, [promotions, shoptiemCoupon, partnerCoupon]);
+
+  console.log("#selectedCoupon", selectedCoupon);
+
  useEffect(() => {
    dispatch(
      getProductOption({
@@ -88,8 +100,8 @@ export default function SingleOption({
    );
    dispatch(
      getProductCouponSearch({
-        patnrId: selectedPatnrId,
-        prdtId: selectedPrdtId,
+        patnrId: 11,
+        prdtId: 1089323,
      })
    );
  }, [dispatch, selectedPatnrId]);
@@ -182,7 +194,7 @@ export default function SingleOption({
        cpnAplyMaxDcAmt,
        cpnAplyStrtDtt,
        cpnAplyEndDtt,
-      } = partnerCoupon[index];
+      } = selectedCoupon[index];

      const couponAplyStartDate = cpnAplyStrtDtt.split(" ")[0];
      const couponAplyEndDate = cpnAplyEndDtt.split(" ")[0];
@@ -192,6 +204,7 @@ export default function SingleOption({
        <SpottableComponent
          className={css.couponContainer}
          spotlightid={`spotlightId-coupon-${index}`}
+          {...rest}
        >
          <div className={css.couponItem}>
            <span className={css.couponLate}>{`${cpnDctrt}%`}</span>
@@ -204,14 +217,12 @@ export default function SingleOption({
            <span className={classNames(css.content, css.date)}>
              {$L(`${couponAplyStartDate}~${couponAplyEndDate}`)}
            </span>
-            {/* <TButton className={css.couponBtn}>{$L("DOWNLOAD")}</TButton> */}
+            <TButton className={css.couponBtn}>{$L("DOWNLOAD")}</TButton>
          </div>
-
-          {/* <div>{`1/${partnerCoupon?.length}`}</div> */}
        </SpottableComponent>
      );
    },
-    [partnerCoupon]
+    [selectedCoupon]
  );

  return (
@@ -389,9 +400,9 @@ export default function SingleOption({
          button2Text={$L("DOWNLOAD ALL")}
        >
          <div className={css.itemWrap}>
-            {partnerCoupon && partnerCoupon.length > 0 && (
+            {selectedCoupon && selectedCoupon.length > 0 && (
              <TVirtualGridList
-                dataSize={partnerCoupon.length}
+                dataSize={selectedCoupon.length}
                direction="horizontal"
                autoScroll
                renderItem={renderItem}
@@ -402,6 +413,7 @@ export default function SingleOption({
              />
            )}
          </div>
+          <div>{`1/${selectedCoupon?.length}`}</div>
        </TPopUp>
      )}
    </div>
--- a/com.twin.app.shoptime/src/views/DetailPanel/SingleProduct/SingleOption.module.less
+++ b/com.twin.app.shoptime/src/views/DetailPanel/SingleProduct/SingleOption.module.less
@@ -265,7 +265,7 @@
 }

 .itemWrap {
-  // overflow: hidden;
+  overflow: hidden;
  position: relative;

  .itemList {
@@ -279,6 +279,7 @@
 .couponContainer {
  .flex(@direction:column);
  position: relative;
+
  // margin-left: 130px;

  &:focus {
--- a/com.twin.app.shoptime/src/views/DetailPanel/SingleProduct/SingleProduct.jsx
+++ b/com.twin.app.shoptime/src/views/DetailPanel/SingleProduct/SingleProduct.jsx
@@ -17,8 +17,8 @@ export default function SingleProduct({
  const productData = useSelector((state) => state.main.productData);

  return (
-    <div className={css.container}>
-      <div>
+    <>
+      <div className={css.container}>
        <Indicator
          selectedIndex={selectedIndex}
          setSelectedIndex={setSelectedIndex}
@@ -38,6 +38,6 @@ export default function SingleProduct({
          />
        </ProductOption>
      </div>
-    </div>
+    </>
  );
 }
--- a/com.twin.app.shoptime/src/views/DetailPanel/SingleProduct/SingleProduct.module.less
+++ b/com.twin.app.shoptime/src/views/DetailPanel/SingleProduct/SingleProduct.module.less
@@ -2,5 +2,5 @@
@import "../../../style/utils.module.less";

 .container {
-  display: flex;
+  .size(@w: 834px, @h: 930px);
 }
--- a/com.twin.app.shoptime/src/views/DetailPanel/ThemeProduct/ThemeOption.module.less
+++ b/com.twin.app.shoptime/src/views/DetailPanel/ThemeProduct/ThemeOption.module.less
@@ -4,7 +4,3 @@
 .indicatorContainer {
  .size(@w: 834px, @h: 930px);
 }
-
-.optionContainer {
-  margin-left: 61px;
-}
--- a/com.twin.app.shoptime/src/views/DetailPanel/UnableProduct/UnableProduct.jsx
+++ b/com.twin.app.shoptime/src/views/DetailPanel/UnableProduct/UnableProduct.jsx
@@ -17,8 +17,8 @@ export default function UnableProduct({
  const productData = useSelector((state) => state.main.productData);

  return (
-    <div className={css.container}>
-      <div>
+    <>
+      <div className={css.container}>
        <Indicator
          selectedIndex={selectedIndex}
          setSelectedIndex={setSelectedIndex}
@@ -38,6 +38,6 @@ export default function UnableProduct({
          />
        </ProductOption>
      </div>
-    </div>
+    </>
  );
 }
--- a/com.twin.app.shoptime/src/views/DetailPanel/UnableProduct/UnableProduct.module.less
+++ b/com.twin.app.shoptime/src/views/DetailPanel/UnableProduct/UnableProduct.module.less
@@ -2,5 +2,5 @@
@import "../../../style/utils.module.less";

 .container {
-  display: flex;
+  .size(@w: 834px, @h: 930px);
 }
--- a/com.twin.app.shoptime/src/views/DetailPanel/components/ProductOption.module.less
+++ b/com.twin.app.shoptime/src/views/DetailPanel/components/ProductOption.module.less
@@ -6,7 +6,7 @@
  .size(@w: 1026px, @h: 930px);
  background-color: @BG_COLOR_01;
  padding: 30px 120px 60px 60px;
-  margin-left: 61px;
+  // margin-left: 61px;
  .topLayer {
    width: 100%;
    .flex(@direction:row ,@justifyCenter:flex-start);