From c3f18c8aef3b575445d5034f022e1da19607c06d Mon Sep 17 00:00:00 2001 From: "jiwon93.son" Date: Mon, 11 Mar 2024 16:57:50 +0900 Subject: [PATCH] =?UTF-8?q?[MobileSentPopUp]=20-=20MobileSentPopUp/SMSNumK?= =?UTF-8?q?eyPad=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80,UI=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=A0=81=EC=9A=A9?= =?UTF-8?q?=20-=20TPopUp=20kind=3D"mobileSendPopup"=20=EC=B6=94=EA=B0=80?= =?UTF-8?q?=20-=20TPopUp=20mobileSendPopup=20UI=20=EC=8A=A4=ED=83=80?= =?UTF-8?q?=EC=9D=BC=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../assets/images/deltxt.png | Bin 0 -> 1584 bytes .../components/MobileSend/MobileSendPopUp.jsx | 65 +++++++++++++ .../MobileSend/MobileSendPopUp.module.less | 86 ++++++++++++++++++ .../components/MobileSend/SMSNumKeyPad.jsx | 53 +++++++++++ .../MobileSend/SMSNumKeyPad.module.less | 39 ++++++++ .../src/components/TPopUp/TPopUp.jsx | 1 + .../src/components/TPopUp/TPopUp.module.less | 21 +++++ 7 files changed, 265 insertions(+) create mode 100644 com.twin.app.shoptime/assets/images/deltxt.png create mode 100644 com.twin.app.shoptime/src/components/MobileSend/MobileSendPopUp.jsx create mode 100644 com.twin.app.shoptime/src/components/MobileSend/MobileSendPopUp.module.less create mode 100644 com.twin.app.shoptime/src/components/MobileSend/SMSNumKeyPad.jsx create mode 100644 com.twin.app.shoptime/src/components/MobileSend/SMSNumKeyPad.module.less diff --git a/com.twin.app.shoptime/assets/images/deltxt.png b/com.twin.app.shoptime/assets/images/deltxt.png new file mode 100644 index 0000000000000000000000000000000000000000..4e108a566a29d7a9e2ac6cd089d9e5cc5fd751ba GIT binary patch literal 1584 zcmaJ>drT8|94}BdhloZQqD*%=c_v)%(dS*LP8Oi?Ec z(V#BkV{=msL0y=eY-U7=E@BX5uf#o+O(i&{nFbV{)1h%!pw2&xm)!lnzu)is`F!8E z)snYlM%4T$nM^jrw3M_;Ym)RPOnXK8j*sMCm6my8j$OTpjcF}HLLC^xPpn^Jz0Pm5|GFe7uz(dictOz*R63(p$M?24e0LSRT z0<{@2dyK4$TUza9^Q-f0bag3>GhpUoAR|CX1UxHJK!7iE`-p%ZoZuxSId}|%z=Voe zss|^XvYRb{QSh>WTA_hxRD}UrT!Cs398;wO7=mhHL<^%z2tf%%Lnv`z>H#HdUdBmS z$=oSh(oPS$MA1XQu;1@j_>~I5TLPmvj>8BBV;Cf9K)x!sNChCbZ&8SWWPP-k^N5__ z27-)~L#Pn-pycUf2)xH^en#x}O(jZ7862QIFseXco)5+~q3si`?Eh}OP}^s#^02U# z^$8VTTB?V0Q3x#M?&XGpijp_PTV75o3ROl5bOq14MH8t9r5gpqF$CjeF$`zb5Uo^F z5W=VsNQbdn2vgCB)`2>ev{Dn|c@aL>s8QvTMkSt&Wus`0L8n4>ByPYBXts{j8j%pz z&n0*OqY+3g;M|Ph_oW3ZG#N0- zdbvuL$@L06Fp*+{dx3d1t)sLK6$Lr9S{gzbl@6j1R0Cl;r&CSolsK){f>U_rxztUz zsB|KQ;0bv`(3C^1#U(a1#^8_xlO$Zns39EJFir=pQaKqV2um))!LE6(i$X_IYX-$< zGa+rBO%>~wM#(G9%r7gEV=`Iz5))~#1qQy|+n*O}h^;G4)@?boJ-s7Y5j~g`ShK%l z$xeArba`CyyE6O3@SfU)h38O1SEMFg&JNc_&aQM77AG>ZqUFg*)`w3MYj(9?G#8k^ zK5IHH{wn&1Z*?Eb7cbn)ST%6T(zq-91~l@U{8h!AlJ+%CmAj9H!&zZ%>%N%THLYP# z*|Fh%Pt5*zBH#Q*-B`2f_3Nj)iZzbL^wH__pUU~(pWL-<9mzzgHs&Dm)>V&>hAlcU z8r~7+ytpU(V5%y@os!s6I+AApv%~txT6Ms(V4wWT;ErXQmXQsqMGG!P>E)e&Ws>`B zN$8D zjlXdZtlX2mzBoL3V8!8&N-|wTkG_mo+Z?$)sSiGWV&1aw?x~8_?;j;M&Pj5%Wi^K@ z8Kuya_IFg<*yF0KW`e&zm~`}rMSp%?f60!Pmhb$V)CGs0) z?S-QouMLI;^6TtZXMHd*Ftl>p@Q%w7#_`?t71p-7T@|sNy?guSsav)cZ8-DB*nzoU z{cFqW`JoVt=ca9qG~QNduY~=0v!)vxiq0ez<%QxCkBe?SPX3<47sH3I3-`KA{_=CPI~r!b z@2Krw*B4VWCxg1HeQ#}l*>Y%g!i`fJfBo*hJ4O2me%I@#KSwv?gH?%+S% Ml#@pu&o18lAD4he*Z=?k literal 0 HcmV?d00001 diff --git a/com.twin.app.shoptime/src/components/MobileSend/MobileSendPopUp.jsx b/com.twin.app.shoptime/src/components/MobileSend/MobileSendPopUp.jsx new file mode 100644 index 00000000..9e93897a --- /dev/null +++ b/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(` + 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. +
+ + 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. +`); + + return ( + +
+ {productImg && ( +

+ alt +

+ )} +
+ {title &&
{title}
} + {subTitle &&
{subTitle}
} + {productPrice &&
{productPrice}
} +
+
+
+
+
+ +
+
+
+
+ + ); +} diff --git a/com.twin.app.shoptime/src/components/MobileSend/MobileSendPopUp.module.less b/com.twin.app.shoptime/src/components/MobileSend/MobileSendPopUp.module.less new file mode 100644 index 00000000..5aadc709 --- /dev/null +++ b/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; + } + } +} diff --git a/com.twin.app.shoptime/src/components/MobileSend/SMSNumKeyPad.jsx b/com.twin.app.shoptime/src/components/MobileSend/SMSNumKeyPad.jsx new file mode 100644 index 00000000..186515d8 --- /dev/null +++ b/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 ( + updateResult(value)} + key={`button : ${idx}`} + > + {value} + + ); + }; + + return ( +
+ + + {[...Array(9).keys()].map((num, idx) => renderButton(num + 1, idx))} + + 0 + + Enter + + +
+ ); +} diff --git a/com.twin.app.shoptime/src/components/MobileSend/SMSNumKeyPad.module.less b/com.twin.app.shoptime/src/components/MobileSend/SMSNumKeyPad.module.less new file mode 100644 index 00000000..08316ac1 --- /dev/null +++ b/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; + } + } + } +} diff --git a/com.twin.app.shoptime/src/components/TPopUp/TPopUp.jsx b/com.twin.app.shoptime/src/components/TPopUp/TPopUp.jsx index 6c7458d4..51861e2f 100644 --- a/com.twin.app.shoptime/src/components/TPopUp/TPopUp.jsx +++ b/com.twin.app.shoptime/src/components/TPopUp/TPopUp.jsx @@ -31,6 +31,7 @@ const KINDS = [ "supportPopup", "exitPopup", "couponPopup", + "mobileSendPopup", ]; export default function TPopUp({ diff --git a/com.twin.app.shoptime/src/components/TPopUp/TPopUp.module.less b/com.twin.app.shoptime/src/components/TPopUp/TPopUp.module.less index 07b96591..25a8fede 100644 --- a/com.twin.app.shoptime/src/components/TPopUp/TPopUp.module.less +++ b/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; + } + } +}