Merge branch 'detail_v3' of http://gitlab.t-win.kr/ifheone/shoptime into detail_v3

com.twin.app.shoptime/src/views/DetailPanel/components/BuyOption.jsx

@@ -40,6 +40,7 @@ import FavoriteBtn from '../components/FavoriteBtn';
 import styles from './BuyOption.module.less';
 import BuyOptionPriceBlock from './BuyOptionPriceBlock';
 import CustomDropDown from './CustomDropDown';
+import ProductEa from './ProductEa';
 
 const Container = SpotlightContainerDecorator(
   { spotlightRestrict: "self-only" },
@@ -585,12 +586,13 @@ const BuyOption = ({
             <div className={styles.buy_option__label_text}>QUANTITY</div>
           </div>
           <div className={styles.buy_option__option_control}>
-            <CustomDropDown
+            {/* <CustomDropDown
               options={["1", "2", "3", "4", "5"]}
               selectedIndex={quantity - 1}
               onSelect={handleQuantitySelect}
               spotlightId="buy-option-quantity-dropdown"
-            />
+            /> */}
+            <ProductEa />
           </div>
         </div>
       </div>

com.twin.app.shoptime/src/views/DetailPanel/components/ProductEa.jsx

@@ -0,0 +1,54 @@
+import React, {
+  useCallback,
+  useState,
+} from 'react';
+
+import SpotlightContainerDecorator
+  from '@enact/spotlight/SpotlightContainerDecorator';
+
+import decreaseBtnDim
+  from '../../../../assets/images/btn/btn-quantity-decrease-dim_new@3x.png';
+import decreaseBtnFoc
+  from '../../../../assets/images/btn/btn-quantity-decrease-foc@3x.png';
+import decreaseBtnNor
+  from '../../../../assets/images/btn/btn-quantity-decrease-nor@3x.png';
+import increaseBtnDim
+  from '../../../../assets/images/btn/btn-quantity-increase-dim@3x.png';
+import increaseBtnFoc
+  from '../../../../assets/images/btn/btn-quantity-increase-foc@3x.png';
+import increaseBtnNor
+  from '../../../../assets/images/btn/btn-quantity-increase-nor@3x.png';
+import CustomImage from '../../../components/CustomImage/CustomImage';
+import css from './ProductEa.module.less';
+
+const ProductEa = () => {
+  const Container = SpotlightContainerDecorator("div");
+  const [ea, setEa] = useState(1);
+
+  const minusClick = useCallback(() => {
+    if (ea > 1) {
+      setEa(ea - 1);
+    }
+  }, [ea]);
+  const plusClick = useCallback(() => {
+    setEa(ea + 1);
+  }, [ea]);
+
+  return (
+    <Container className={css.container}>
+      <CustomImage
+        src={decreaseBtnNor}
+        className={css.minusBtn}
+        onClick={minusClick}
+      />
+      <div className={css.inputBox}>{ea}</div>
+      <CustomImage
+        src={increaseBtnNor}
+        className={css.plusBtn}
+        onClick={plusClick}
+      />
+    </Container>
+  );
+};
+
+export default ProductEa;

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

@@ -0,0 +1,28 @@
+@import "../../../style/CommonStyle.module.less";
+@import "../../../style/utils.module.less";
+
+.container {
+  width: 675px;
+  height: 60px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  .minusBtn,
+  .plusBtn {
+    width: 60px;
+    height: 60px;
+    vertical-align: top;
+  }
+  .inputBox {
+    width: 525px;
+    height: 60px;
+    text-align: center;
+    background: #2f2d2d;
+    margin: 0 15px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 4px;
+  }
+}