[OptionCommon] OptionCommon 컴포넌트 추가, 스타일 작업, 상단 옵션버튼 작업중

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

@@ -4,7 +4,7 @@
 .tag-default(@backgroundColor,@fontColor) {
   display: block;
   border-radius: 4px;
-  margin-right: 6px;
+  margin-left: 6px;
   .font(@fontFamily:@baseFontBold,@fontSize:24px);
   background-color: @backgroundColor;
   color: @fontColor;
@@ -24,7 +24,7 @@
   .freeShipping {
     display: block;
     border-radius: 4px;
-    margin-right: 6px;
+    margin-left: 6px;
     background-color: rgba(199, 8, 80, 0.1);
     color: @PRIMARY_COLOR_RED;
     text-align: center;
@@ -50,6 +50,7 @@
     border-radius: 4px;
     .size(@w: 120px, @h: 42px);
     color: @COLOR_WHITE;
+    margin-left: 6px;
     text-align: center;
     line-height: 42px;
     .font(@fontFamily: @baseFontBold, @fontSize:24px);

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

@@ -1,5 +1,115 @@
-import React from 'react';
+import React, { useCallback, useEffect, useState } from "react";
 
-export default function OptionCommon() {
-  return <div>OptionCommon</div>;
+import { useDispatch, useSelector } from "react-redux";
+
+import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
+import Spottable from "@enact/spotlight/Spottable";
+
+import { getProductOption } from "../../../../actions/productActions";
+import TButton from "../../../../components/TButton/TButton";
+import TPopUp from "../../../../components/TPopUp/TPopUp";
+import TScroller from "../../../../components/TScroller/TScroller";
+import { $L } from "../../../../utils/helperMethods";
+import css from "./OptionCommon.module.less";
+
+const Container = SpotlightContainerDecorator(
+  { enterTo: "last-focused", continue5WayHold: true },
+  "div"
+);
+
+export default function OptionCommon({ selectedPatnrId, selectedPardtId }) {
+  const dispatch = useDispatch();
+  const productOptionInfos = useSelector((state) => state.product.prdtOptInfo);
+
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [optionPopupOpen, setOptionPopupOpen] = useState(false);
+  const [secondOptionOpen, setSecondOptionOpen] = useState(false);
+
+  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]
+  );
+
+  return (
+    <Container className={css.detailContainer}>
+      <TScroller verticalScrollbar="auto" className={css.detailScroll}>
+        {productOptionInfos &&
+          productOptionInfos.length > 0 &&
+          productOptionInfos.map((option, idx) => {
+            const {
+              cntryCd,
+              concProdOptSno,
+              optNm,
+              patnrId,
+              prdtId,
+              prodOptSno,
+              prodOptTpCdCval,
+              prdtOptDtl,
+            } = option;
+            return (
+              <div key={`option: ${idx}`} className={css.optionLayer}>
+                <span>{$L(optNm.toUpperCase())}</span>
+                <TButton
+                  className={css.optionBtn}
+                  onClick={() => {
+                    handleOptionClick(idx);
+                  }}
+                >
+                  <span className={css.optionValue}>
+                    {prdtOptDtl[0].prodOptCval}
+                  </span>
+                </TButton>
+                <TPopUp
+                  kind={"optionPopup"}
+                  options={
+                    productOptionInfos && productOptionInfos[idx].prdtOptDtl
+                  }
+                  onClose={() => {
+                    setOptionPopupOpen(false);
+                    setSecondOptionOpen(false);
+                  }}
+                  open={idx === 0 ? optionPopupOpen : secondOptionOpen}
+                  hasButton
+                  hasText
+                  title={$L(optNm.toUpperCase())}
+                  button1Text={$L("CLOSE")}
+                  selectedOptionIdx={selectedIndex}
+                  setSelectedOptionIdx={setSelectedIndex}
+                />
+              </div>
+            );
+          })}
+      </TScroller>
+      <div className={css.detailBottomLayer}>
+        <div className={css.leftLayer}>
+          <span>SHOPTIME PROMOTION</span>
+          <span>Coupon only applicable to this product!</span>
+        </div>
+        <TButton>COUPON</TButton>
+      </div>
+      <div>
+        <span>{$L("QVC Price")}</span>
+        <span></span>
+      </div>
+      <div>
+        <span>{$L("Shipping Free")}</span>
+        <span></span>
+      </div>
+    </Container>
+  );
 }

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

@@ -0,0 +1,58 @@
+@import "../../../../style/CommonStyle.module.less";
+@import "../../../../style/utils.module.less";
+
+.detailContainer {
+  width: 846px;
+  margin-top: 21px;
+
+  .detailScroll {
+    width: 100%;
+    height: 214px;
+    background: @BG_COLOR_02;
+    padding: 10px 30px;
+    border-top: 1px solid @COLOR_GRAY02;
+    border-bottom: 1px solid @COLOR_GRAY02;
+
+    .optionLayer {
+      .flex(@justifyCenter:space-between);
+      color: @COLOR_GRAY05;
+      .font(@baseFontBold,@fontSize:24px);
+      margin: 20px 0;
+
+      .optionBtn {
+        .border-solid(1px,@COLOR_GRAY02);
+        .flex();
+        .font(@baseFontBold,@fontSize:24px);
+
+        min-width: 560px;
+        background-color: @COLOR_WHITE;
+        color: @COLOR_GRAY03;
+        background-image: url(../../../../../assets/images/btn/btn-dropdown-nor@3x.png);
+        .imgElement(42px, 42px, right 30px, center);
+        position: relative;
+
+        &:focus {
+          color: @PRIMARY_COLOR_RED;
+          &::after {
+            .focused(@boxShadow: 22px, @borderRadius: 12px);
+            background-image: url(../../../../../assets/images/btn/btn-dropdown-foc@3x.png);
+            .imgElement(42px, 42px, right 26px, center);
+          }
+        }
+
+        > div {
+          .flex();
+
+          span {
+            line-height: 1.33;
+            width: 458px;
+          }
+          img {
+            width: 42px;
+            height: 42px;
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -1,53 +1,39 @@
-import React, { useEffect } from "react";
+import React from "react";
 
-import { useDispatch, useSelector } from "react-redux";
+import { useSelector } from "react-redux";
 
-import { getProductOption } from "../../../actions/productActions";
 import { $L } from "../../../utils/helperMethods";
+import OptionCommon from "../components/optionTypes/OptionCommon";
 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 productDataInfos = useSelector((state) => state.main.productData);
-
-  useEffect(() => {
-    dispatch(
-      getProductOption({
-        patnrId: selectedPatnrId,
-        prdtId: selectedPardtId,
-      })
-    );
-  }, [dispatch]);
+  const { patncLogoPath, prdtId, prdtNm, revwGrd } = productDataInfos;
 
   return (
     <div className={css.optionContainer}>
       {productDataInfos && (
         <div className={css.contentHeader}>
           <div className={css.topLayer}>
-            <img
-              src={
-                productDataInfos.patncLogoPath && productDataInfos.patncLogoPath
-              }
-              alt="patncLogoPath"
-            />
-            <div>{$L(`ID: ${productDataInfos.prdtId}`)}</div>
+            <img src={patncLogoPath && patncLogoPath} alt="patncLogoPath" />
+            <div>{$L(`ID: ${prdtId}`)}</div>
           </div>
-          <div className={css.title}>{$L(productDataInfos.prdtNm)}</div>
+          <div className={css.title}>{$L(prdtNm)}</div>
           <div className={css.bottomLayer}>
-            {productDataInfos.revwGrd && (
-              <StarRating rating={productDataInfos?.revwGrd} />
-            )}
+            {revwGrd && <StarRating rating={revwGrd} />}
             <ProductTag />
           </div>
         </div>
       )}
       <div>
-        <OptionGroup
+        {/* <OptionGroup
+          selectedPatnrId={selectedPatnrId}
+          selectedPardtId={selectedPardtId}
+        /> */}
+        <OptionCommon
           selectedPatnrId={selectedPatnrId}
           selectedPardtId={selectedPardtId}
         />