[ProductOption] OptionGroup 컴포넌트 추가 및 작업 중

2024-02-20 10:10:22 +09:00
parent dc215aafc4
commit 8ead15a714
4 changed files with 245 additions and 21 deletions
--- a/com.twin.app.shoptime/src/views/DetailPanel/components/optionTypes/OptionGroup.jsx
+++ b/com.twin.app.shoptime/src/views/DetailPanel/components/optionTypes/OptionGroup.jsx
@@ -1,13 +1,58 @@
-import React from "react";
+import React, { useEffect } from "react";

+import { useDispatch, useSelector } from "react-redux";
+
+import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
 import Spottable from "@enact/spotlight/Spottable";

+import { getProductGroup } from "../../../../actions/productActions";
+import TScroller from "../../../../components/TScroller/TScroller";
+import { $L } from "../../../../utils/helperMethods";
+import css from "./OptionGroup.module.less";
+
+const Container = SpotlightContainerDecorator(
+  { enterTo: "last-focused", continue5WayHold: true },
+  "div"
+);
+
 const SpottableComponent = Spottable("div");

-export default function OptionGroup() {
-  <div>
-    <p>description</p>
-    <SpottableComponent>{"item"}</SpottableComponent>
-  </div>;
-  return <div>OptionGroup</div>;
+export default function OptionGroup({ selectedPatnrId, selectedPardtId }) {
+  const dispatch = useDispatch();
+  const groupInfos = useSelector((state) => state.product.groupInfo);
+  console.log("# groupInfos", groupInfos);
+
+  useEffect(() => {
+    dispatch(
+      getProductGroup({
+        patnrId: selectedPatnrId,
+        prdtId: selectedPardtId,
+      })
+    );
+  }, [dispatch]);
+  return (
+    <Container>
+      <TScroller verticalScrollbar="visible" className={css.optionCroupScroll}>
+        <p css={css.optionDesc}>
+          {$L("Select from below to view the full product details.")}
+        </p>
+        {groupInfos &&
+          groupInfos.length > 0 &&
+          groupInfos.map((group, idx) => {
+            return (
+              <SpottableComponent
+                className={css.groupOptionInfo}
+                key={`groupInfos:${idx}`}
+              >
+                <div className={css.productName}>{group.prdtNm}</div>
+                <div className={css.priceInfo}>
+                  <div className={css.priceAfter}>{group.priceInfo}</div>
+                  <div className={css.priceBefore}></div>
+                </div>
+              </SpottableComponent>
+            );
+          })}
+      </TScroller>
+    </Container>
+  );
 }
--- a/com.twin.app.shoptime/src/views/DetailPanel/components/optionTypes/OptionGroup.module.less
+++ b/com.twin.app.shoptime/src/views/DetailPanel/components/optionTypes/OptionGroup.module.less
@@ -0,0 +1,61 @@
+@import "../../../../style/CommonStyle.module.less";
+@import "../../../../style/utils.module.less";
+
+.optionCroupScroll {
+  width: 846px;
+  height: 620px;
+  padding: 30px;
+  background: @BG_COLOR_02;
+  margin-top: 24px;
+  border-top: 1px solid @COLOR_GRAY02;
+
+  > div:nth-child(2) {
+    padding: 0;
+    > div {
+      width: 6px;
+      background: #e7e7e7;
+      > div {
+        background: #7a808d;
+      }
+    }
+  }
+
+  > div {
+    font-stretch: normal;
+    font-style: normal;
+    line-height: 1.33;
+    letter-spacing: normal;
+    text-align: left;
+    > p {
+      margin-bottom: 13px;
+      .font(@fontFamily:@baseFont,@fontSize:24px);
+
+      color: @COLOR_GRAY03;
+    }
+    > .groupOptionInfo {
+      width: 784px;
+      margin: 10px 0 10px 1px;
+      padding: 30px 30px 30px 29px;
+      border-radius: 12px;
+      border: 1px solid @COLOR_GRAY02;
+      background-color: @COLOR_WHITE;
+
+      .productName {
+        .font(@baseFontBold,@fontSize:24px);
+        color: @COLOR_GRAY06;
+      }
+      .priceInfo {
+        .priceAfter {
+          .font(@baseFontBold,@fontSize:30px);
+          color: @PRIMARY_COLOR_RED;
+        }
+      }
+      position: relative;
+      &:focus {
+        &::after {
+          .focused(@boxShadow: 22px, @borderRadius: 12px);
+        }
+      }
+    }
+  }
+}
--- a/com.twin.app.shoptime/src/views/DetailPanel/container/ProductOption.jsx
+++ b/com.twin.app.shoptime/src/views/DetailPanel/container/ProductOption.jsx
@@ -2,10 +2,15 @@ import React, { useEffect } from "react";

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

+import Spottable from "@enact/spotlight/Spottable";
+
+import StarZero from "../../../../assets/images/img-detail-star-0-0@3x.png";
+import Star_0_5 from "../../../../assets/images/img-detail-star-4-5@3x.png";
 import {
  getProductGroup,
  getProductOption,
 } from "../../../actions/productActions";
+import { $L } from "../../../utils/helperMethods";
 import OptionGroup from "../components/optionTypes/OptionGroup";
 import css from "./ProductOption.module.less";

@@ -13,7 +18,21 @@ export default function ProductOption({ selectedPatnrId, selectedPardtId }) {
  const dispatch = useDispatch();

  const productOpionInfos = useSelector((state) => state.product.prdtOptInfo);
-  const groupInfos = useSelector((state) => state.product.groupInfo);
+  const productDataInfos = useSelector((state) => state.main.productData);
+
+  const convertStarImageSrc = (rating) => {
+    console.log("#rating", rating);
+    if (!rating || isNaN(rating)) {
+      return `${StarZero}`;
+    }
+    let roundedRating = Math.floor(rating * 2) / 2;
+    console.log("#roundedRating", roundedRating);
+
+    roundedRating = `${parseFloat(roundedRating).toFixed(1)}`.replace(".", "-");
+    console.log("#roundedRating2", roundedRating);
+    // return `${Star}`;
+    return `./assets/images/img-detail-star-${roundedRating}@3x.png`;
+  };

  useEffect(() => {
    dispatch(
@@ -22,23 +41,80 @@ export default function ProductOption({ selectedPatnrId, selectedPardtId }) {
        prdtId: selectedPardtId,
      })
    );
-    dispatch(
-      getProductGroup({
-        patnrId: selectedPatnrId,
-        prdtId: selectedPardtId,
-      })
-    );
  }, [dispatch]);

+  // const groupInfos = useSelector((state) => state.product.groupInfo);
+
+  console.log("# productOpionInfos", productOpionInfos);
+  console.log("# productDataInfos", productDataInfos);
+  console.log("# Number", Number(productDataInfos.revwGrd));
+
+  // console.log("# groupInfos", groupInfos);
+
  return (
-    <div>
-      <div className={css.optionLayerTop}>
-        <div className={css.partner}>partner</div>
-        <div className={css.brandName}>brandName</div>
-        <div className={css.specialPrice}>specialPrice</div>
-      </div>
+    <div className={css.optionContainer}>
+      {productDataInfos && (
+        <div className={css.contentHeader}>
+          <div className={css.brandName}>
+            <img
+              src={
+                productDataInfos.patncLogoPath && productDataInfos.patncLogoPath
+              }
+              alt="patncLogoPath"
+            />
+            <div>{$L(`ID: ${productDataInfos.prdtId}`)}</div>
+          </div>
+          <div className={css.title}>{$L(productDataInfos.prdtNm)}</div>
+          <div className={css.star}>
+            {/* <div className={css.stars}>{$L(productDataInfos.revwGrd)}</div> */}
+            {productDataInfos.revwGrd && (
+              <img
+                className={css.stars}
+                // src={Star}
+                // src={convertStarImageSrc(Number(productDataInfos.revwGrd))}
+                // src={
+                //   require(convertStarImageSrc(Number(productDataInfos.revwGrd)))
+                //     .default
+                // }
+                src={
+                  require("../../../../assets/images/img-detail-star-3-0@3x.png")
+                    .default
+                }
+              />
+            )}
+            {
+              <div className={css.badge}>
+                {/* TSV */}
+                {productDataInfos.todaySpclFlag === "Y" && <span>TSV</span>}
+                {/* FREE SHIPPING */}
+                {productDataInfos.freeShippingFlag === "Y" && (
+                  <span className="badge-solid-pink02">Free S&amp;H</span>
+                )}
+                {/* SALE */}
+                {/* {parseFloat(productPriceInfo.off) >= 10 ? (
+                            <span className="badge-line-pink01">Big Sale</span>
+                        ) : (
+                            ""
+                        )} */}
+
+                {/* SHOPTIME PPRICE */}
+                {productDataInfos.rewd && (
+                  <span className="badge-solid-pink03">Shop Time Price</span>
+                )}
+                {/* COUPON */}
+                {/* {!productDataInfos.isSoldout && couponYn ? (
+                            <span className="badge-solid-gray01">COUPON</span>
+                        ) : null} */}
+              </div>
+            }
+          </div>
+        </div>
+      )}
      <div>
-        <OptionGroup />
+        <OptionGroup
+          selectedPatnrId={selectedPatnrId}
+          selectedPardtId={selectedPardtId}
+        />
      </div>
    </div>
  );
--- a/com.twin.app.shoptime/src/views/DetailPanel/container/ProductOption.module.less
+++ b/com.twin.app.shoptime/src/views/DetailPanel/container/ProductOption.module.less
@@ -0,0 +1,42 @@
+@import "../../../style/CommonStyle.module.less";
+@import "../../../style/utils.module.less";
+
+.optionContainer {
+  .flex(@direction:column ,@justifyCenter:flex-start,@alignCenter:flex-start);
+  .size(@w: 1026px, @h: 930px);
+  background-color: @BG_COLOR_01;
+  padding: 30px 120px 120px 60px;
+
+  .brandName {
+    width: 100%;
+    .flex(@direction:row ,@justifyCenter:flex-start);
+    text-align: left;
+    color: @COLOR_GRAY03;
+    .font(@fontFamily:@baseFontBold,30px);
+    img {
+      width: 42px;
+      height: 42px;
+      margin-right: 11px;
+    }
+  }
+
+  .star {
+    img {
+      width: 180px;
+      height: 36px;
+      object-fit: contain;
+    }
+  }
+  .title {
+    .font(@fontFamily:@baseFontBold,@fontSize:36px);
+    color: @COLOR_GRAY08;
+    width: 739px;
+    height: 76px;
+    margin: 24px 0 17px 0;
+    font-stretch: normal;
+    font-style: normal;
+    line-height: 1.17;
+    letter-spacing: normal;
+    text-align: left;
+  }
+}