[ProductOption,OptionGroup] noItems 스타일 추가, priceInfo 적용, StarRating/ProductTag 컴포넌트 적용

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

@@ -5,6 +5,7 @@ import { useDispatch, useSelector } from "react-redux";
 import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
 import Spottable from "@enact/spotlight/Spottable";
 
+import noGroupImg from "../../../../../assets/images/img-my-info-billing@3x.png";
 import { getProductGroup } from "../../../../actions/productActions";
 import TScroller from "../../../../components/TScroller/TScroller";
 import { $L } from "../../../../utils/helperMethods";
@@ -20,6 +21,7 @@ const SpottableComponent = Spottable("div");
 export default function OptionGroup({ selectedPatnrId, selectedPardtId }) {
   const dispatch = useDispatch();
   const groupInfos = useSelector((state) => state.product.groupInfo);
+  const productDataInfos = useSelector((state) => state.main.productData);
 
   useEffect(() => {
     dispatch(
@@ -29,14 +31,17 @@ export default function OptionGroup({ selectedPatnrId, selectedPardtId }) {
       })
     );
   }, [dispatch]);
+
   return (
     <Container>
-      <TScroller verticalScrollbar="visible" className={css.optionCroupScroll}>
+      <TScroller verticalScrollbar="auto" className={css.optionCroupScroll}>
         <p css={css.optionDesc}>
-          {$L("Select from below to view the full product details.")}
+          {$L("Make a selection below to view full product details.")}
         </p>
         {groupInfos &&
-          groupInfos.length > 0 &&
+        groupInfos.length > 0 &&
+        productDataInfos &&
+        productDataInfos.grPrdtFlag === "Y" ? (
           groupInfos.map((group, idx) => {
             return (
               <SpottableComponent
@@ -44,13 +49,24 @@ export default function OptionGroup({ selectedPatnrId, selectedPardtId }) {
                 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 className={css.priceAfter}>
+                    {`${group.priceInfo.split("|")[1]}`}
+                  </div>
+                  <div className={css.priceBefore}>
+                    {`${group.priceInfo.split("|")[0]}`}
+                  </div>
                 </div>
               </SpottableComponent>
             );
-          })}
+          })
+        ) : (
+          <div className={css.noItems}>
+            <img src={noGroupImg} alt="" />
+            <div>{$L("There are no items in this group.")}</div>
+          </div>
+        )}
       </TScroller>
     </Container>
   );

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

@@ -45,9 +45,19 @@
         color: @COLOR_GRAY06;
       }
       .priceInfo {
+        .flex(@justifyCenter:flex-start);
+        margin-top: 6px;
+        text-align: left;
+        height: 36px;
         .priceAfter {
           .font(@baseFontBold,@fontSize:30px);
           color: @PRIMARY_COLOR_RED;
+          margin-right: 5px;
+        }
+        .priceBefore {
+          .font(@baseFont,@fontSize:18px);
+          color: @COLOR_GRAY04;
+          text-decoration: line-through;
         }
       }
       position: relative;
@@ -58,4 +68,17 @@
       }
     }
   }
+  .noItems {
+    .flex(@direction:column);
+    text-align: center;
+    color: #a3a3a3;
+    .font(@fontFamily:@baseFontBold,@fontSize:36px);
+    line-height: 1.11;
+    letter-spacing: normal;
+    img {
+      margin-top: 93px;
+      width: 360px;
+      height: 180px;
+    }
+  }
 }

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

@@ -2,38 +2,19 @@ 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 { getProductOption } from "../../../actions/productActions";
 import { $L } from "../../../utils/helperMethods";
 import OptionGroup from "../components/optionTypes/OptionGroup";
+import ProductTag from "../components/ProductTag";
+import StarRating from "../components/StarRating";
 import css from "./ProductOption.module.less";
 
 export default function ProductOption({ selectedPatnrId, selectedPardtId }) {
   const dispatch = useDispatch();
 
-  const productOpionInfos = useSelector((state) => state.product.prdtOptInfo);
+  // const productOpionInfos = useSelector((state) => state.product.prdtOptInfo);
   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(
       getProductOption({
@@ -43,14 +24,6 @@ export default function ProductOption({ selectedPatnrId, 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 className={css.optionContainer}>
       {productDataInfos && (
@@ -66,47 +39,10 @@ export default function ProductOption({ selectedPatnrId, selectedPardtId }) {
           </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
-                }
-              />
+              <StarRating rating={productDataInfos?.revwGrd} />
             )}
-            {
-              <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>
-            }
+            <ProductTag />
           </div>
         </div>
       )}

com.twin.app.shoptime/src/views/DetailPanel/container/ProductOption.module.less

@@ -31,8 +31,8 @@
     .font(@fontFamily:@baseFontBold,@fontSize:36px);
     color: @COLOR_GRAY08;
     width: 739px;
-    height: 76px;
-    margin: 24px 0 17px 0;
+    .elip(@clamp:2);
+    margin-top: 24px;
     font-stretch: normal;
     font-style: normal;
     line-height: 1.17;