[MobileSentPopUp]

- MobileSentPopUp/SMSNumKeyPad 컴포넌트 추가,UI 스타일 적용
- TPopUp kind="mobileSendPopup" 추가
- TPopUp mobileSendPopup UI 스타일 적용

com.twin.app.shoptime/src/components/MobileSend/MobileSendPopUp.jsx

@@ -0,0 +1,65 @@
+import React, { useEffect, useState } from "react";
+
+import { $L } from "../../utils/helperMethods";
+import TPopUp from "../TPopUp/TPopUp";
+import css from "./MobileSendPopUp.module.less";
+import SMSNumKeyPad from "./SMSNumKeyPad";
+
+export default function MobileSendPopUp({
+  isPopUpOpen,
+  onClose,
+  title,
+  subTitle,
+  productImg,
+  productPrice,
+}) {
+  const [popUpOpen, setPopUpOpen] = useState(false);
+
+  useEffect(() => {
+    setPopUpOpen(isPopUpOpen);
+  }, [isPopUpOpen]);
+
+  const instruction = $L(`
+  <span>By clicking "Agree and Send" button below, I agree that LGE may collect and store my mobile number to send text messages as I requested, for data analysis, and for feature-enhancement purposes. </span>
+  <br/>
+  <span>
+  By entering my mobile number, I agree to receive messages from LGE with information on how to purchase the product I selected. Message and data rates may apply. </span>
+`);
+
+  return (
+    <TPopUp
+      kind={"mobileSendPopup"}
+      className={css.container}
+      open={popUpOpen}
+      onClose={onClose}
+      hasText
+      hasButton
+      button1Text={$L("Agree and Send")}
+      button2Text={$L("Cancel")}
+    >
+      <div className={css.header}>
+        {productImg && (
+          <p className={css.productImg}>
+            <img className={css.img} src={productImg} alt="alt" />
+          </p>
+        )}
+        <div className={css.textBox}>
+          {title && <div className={css.smsTitle}>{title}</div>}
+          {subTitle && <div className={css.subTitle}>{subTitle}</div>}
+          {productPrice && <div className={css.price}>{productPrice}</div>}
+        </div>
+      </div>
+      <div className={css.smsArea}>
+        <div className={css.smsContainer}>
+          <div className={css.smsNumLayer}>
+            <SMSNumKeyPad />
+          </div>
+        </div>
+        <div
+          className={css.instruction}
+          dangerouslySetInnerHTML={{ __html: instruction }}
+        ></div>
+      </div>
+    </TPopUp>
+  );
+}

com.twin.app.shoptime/src/components/MobileSend/MobileSendPopUp.module.less

@@ -0,0 +1,86 @@
+@import "../../style/CommonStyle.module.less";
+@import "../../style/utils.module.less";
+
+.container {
+  .header {
+    position: relative;
+    &::after {
+      width: 100%;
+      height: 102px;
+      position: absolute;
+      left: 0;
+      top: 0;
+      z-index: 0;
+      background-color: @COLOR_SKYBLUE;
+      content: "";
+    }
+    display: flex;
+    > .productImg,
+    > .textBox {
+      position: relative;
+      z-index: 1;
+    }
+
+    > .productImg {
+      margin: 30px -30px 0 60px;
+
+      > .img {
+        .border-solid(@size:1px,@color:#cccccc);
+        width: 132px;
+        height: 132px;
+        margin-bottom: 20px;
+      }
+    }
+
+    .smsTitle {
+      text-align: left;
+      font-size: 36px;
+      font-family: @baseFontBold;
+      line-height: normal;
+      color: @COLOR_BLACK;
+      padding: 30px 60px;
+    }
+    .subTitle {
+      text-align: left;
+      .font(@fontFamily:@baseFont,@fontSize: 28px);
+      color: @COLOR_GRAY06;
+      padding: 7px 60px 0 60px;
+    }
+    .price {
+      padding: 7px 60px 20px 60px;
+      .font(@baseFontBold,@fontSize:28px);
+      color: @PRIMARY_COLOR_RED;
+    }
+  }
+  .smsArea {
+    border-top: 1px solid #cccccc;
+    .flex(@justifyCenter: space-between, @alignCenter: flex-start);
+    padding-top: 25px;
+
+    .smsContainer {
+      .flex(@justifyCenter: space-between, @alignCenter: flex-start);
+      .smsNumLayer {
+        .inputNum {
+          height: 68px;
+          width: 100%;
+          .border-solid(@size:1px,@color:#cccccc);
+        }
+        min-width: 437px;
+        max-width: 497px;
+        margin: 0 70px 0 60px;
+      }
+    }
+
+    .instruction {
+      margin-right: 80px;
+      line-height: 1.3;
+      letter-spacing: -0.2px;
+      .font(@fontFamily:@baseFont,@fontSize: 24px);
+      text-align: left;
+      color: @COLOR_GRAY06;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+    }
+  }
+}

com.twin.app.shoptime/src/components/MobileSend/SMSNumKeyPad.jsx

@@ -0,0 +1,53 @@
+import React, { useState } from "react";
+
+import classNames from "classnames";
+
+import { SpotlightContainerDecorator } from "@enact/spotlight/SpotlightContainerDecorator";
+import Spottable from "@enact/spotlight/Spottable";
+
+import css from "./SMSNumKeyPad.module.less";
+
+const Container = SpotlightContainerDecorator(
+  { enterTo: "last-focused" },
+  "div"
+);
+
+const SpottableComponent = Spottable("div");
+
+export default function SMSNumKeyPad() {
+  const [numbers, setNumbers] = useState([]);
+
+  const updateResult = (value) =>
+    setNumbers((prevResult) => prevResult + value);
+
+  const clearResult = () => setNumbers("");
+
+  const renderButton = (value, idx) => {
+    return (
+      <SpottableComponent
+        className={css.btn}
+        onClick={() => updateResult(value)}
+        key={`button : ${idx}`}
+      >
+        {value}
+      </SpottableComponent>
+    );
+  };
+
+  return (
+    <div className={css.container}>
+      <input className={css.numInput} type="text" value={numbers} readOnly />
+      <Container className={css.btnContainer}>
+        {[...Array(9).keys()].map((num, idx) => renderButton(num + 1, idx))}
+        <SpottableComponent
+          className={classNames(css.btn, css.btnDelete)}
+          onClick={clearResult}
+        />
+        <SpottableComponent className={css.btn}>0</SpottableComponent>
+        <SpottableComponent className={classNames(css.btn, css.btnBack)}>
+          Enter
+        </SpottableComponent>
+      </Container>
+    </div>
+  );
+}

com.twin.app.shoptime/src/components/MobileSend/SMSNumKeyPad.module.less

@@ -0,0 +1,39 @@
+@import "../../style/CommonStyle.module.less";
+@import "../../style/utils.module.less";
+
+.container {
+  .numInput {
+    padding: 18px 5px 18px 20px;
+    width: 437px;
+    .border-solid(@size:1px,#cccccc);
+    height: 100%;
+    cursor: text;
+    .font(@fontFamily:@baseFont,@fontSize: 28px);
+  }
+  .btnContainer {
+    width: 441px;
+    .btn {
+      .flex();
+      outline: none;
+      width: 145px;
+      height: 70px;
+      margin: 0 1px 1px 0;
+      background-color: #434040;
+      color: #ffffff;
+      font-size: 34px;
+      letter-spacing: -0.5px;
+      text-align: center;
+      float: left;
+
+      &.btnDelete {
+        background-image: url("../../../assets//images/deltxt.png");
+        .imgElement(37px,27px,center,center);
+      }
+
+      &:focus {
+        background-color: @PRIMARY_COLOR_RED;
+        color: @COLOR_WHITE;
+      }
+    }
+  }
+}

com.twin.app.shoptime/src/components/TPopUp/TPopUp.jsx

@@ -31,6 +31,7 @@ const KINDS = [
   "supportPopup",
   "exitPopup",
   "couponPopup",
+  "mobileSendPopup",
 ];
 
 export default function TPopUp({

com.twin.app.shoptime/src/components/TPopUp/TPopUp.module.less

@@ -246,3 +246,24 @@
     }
   }
 }
+
+.mobileSendPopup {
+  .default-style();
+  .info {
+    min-width: 1132px;
+    background: @COLOR_WHITE;
+  }
+  .buttonContainer {
+    display: flex;
+    justify-content: center;
+    padding: 30px 0;
+
+    > div {
+      margin-top: 2;
+      min-width: 340px;
+      height: 80px;
+      margin: 0 10px;
+      background: @COLOR_GRAY09;
+    }
+  }
+}