From 58641c1bac733868a5942a519c16e4e0d650f3c8 Mon Sep 17 00:00:00 2001 From: "junghoon86.park" Date: Fri, 17 Oct 2025 16:45:22 +0900 Subject: [PATCH] =?UTF-8?q?[detail]=20=EB=AA=A8=EB=B0=94=EC=9D=BC=20?= =?UTF-8?q?=EC=83=8C=EB=93=9C=20=ED=8C=9D=EC=97=85=20=EC=8A=A4=ED=83=80?= =?UTF-8?q?=EC=9D=BC=20=EC=88=98=EC=A0=95#1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 피그마에 맞게 수정(단 팝업 크기 자체의 문제가 있어 이부분 처리 필요) - 에러관련 부분은 미처리. --- .../components/MobileSend/MobileSendPopUp.jsx | 76 ++++++++++-------- .../MobileSend/MobileSendPopUp.module.less | 80 ++++++++++--------- .../components/MobileSend/SMSNumKeyPad.jsx | 34 ++++---- .../MobileSend/SMSNumKeyPad.module.less | 46 ++++++----- 4 files changed, 131 insertions(+), 105 deletions(-) diff --git a/com.twin.app.shoptime/src/components/MobileSend/MobileSendPopUp.jsx b/com.twin.app.shoptime/src/components/MobileSend/MobileSendPopUp.jsx index 542b3f3b..3618a5e7 100644 --- a/com.twin.app.shoptime/src/components/MobileSend/MobileSendPopUp.jsx +++ b/com.twin.app.shoptime/src/components/MobileSend/MobileSendPopUp.jsx @@ -4,61 +4,72 @@ import React, { useMemo, useRef, useState, -} from "react"; +} from 'react'; -import classNames from "classnames"; +import classNames from 'classnames'; import { AsYouTypeFormatter, PhoneNumberFormat, PhoneNumberUtil, -} from "google-libphonenumber"; -import { useDispatch, useSelector } from "react-redux"; +} from 'google-libphonenumber'; +import { + useDispatch, + useSelector, +} from 'react-redux'; -import { off, on } from "@enact/core/dispatcher"; -import spotlight, { Spotlight } from "@enact/spotlight"; -import { SpotlightContainerDecorator } from "@enact/spotlight/SpotlightContainerDecorator"; -import { Spottable } from "@enact/spotlight/Spottable"; +import { + off, + on, +} from '@enact/core/dispatcher'; +import spotlight, { Spotlight } from '@enact/spotlight'; +import { + SpotlightContainerDecorator, +} from '@enact/spotlight/SpotlightContainerDecorator'; +import { Spottable } from '@enact/spotlight/Spottable'; -import defaultImage from "../../../assets/images/img-thumb-empty-144@3x.png"; -import { types } from "../../actions/actionTypes"; -import { clearSMS, sendSms } from "../../actions/appDataActions"; +import defaultImage from '../../../assets/images/img-thumb-empty-144@3x.png'; +import { types } from '../../actions/actionTypes'; +import { + clearSMS, + sendSms, +} from '../../actions/appDataActions'; import { changeLocalSettings, setHidePopup, setShowPopup, -} from "../../actions/commonActions"; +} from '../../actions/commonActions'; import { clearRegisterDeviceInfo, getDeviceAdditionInfo, registerDeviceInfo, -} from "../../actions/deviceActions"; +} from '../../actions/deviceActions'; import { clearCurationCoupon, setEventIssueReq, -} from "../../actions/eventActions"; +} from '../../actions/eventActions'; import { sendLogShopByMobile, sendLogTotalRecommend, -} from "../../actions/logActions"; +} from '../../actions/logActions'; import { ACTIVE_POPUP, LOG_CONTEXT_NAME, LOG_MESSAGE_ID, LOG_TP_NO, -} from "../../utils/Config"; +} from '../../utils/Config'; import { $L, decryptPhoneNumber, encryptPhoneNumber, formatLocalDateTime, -} from "../../utils/helperMethods"; -import CustomImage from "../CustomImage/CustomImage"; -import TButton from "../TButton/TButton"; -import TPopUp from "../TPopUp/TPopUp"; -import HistoryPhoneNumber from "./HistoryPhoneNumber/HistoryPhoneNumber"; -import PhoneInputSection from "./PhoneInputSection"; -import css from "./MobileSendPopUp.module.less"; -import SMSNumKeyPad from "./SMSNumKeyPad"; +} from '../../utils/helperMethods'; +import CustomImage from '../CustomImage/CustomImage'; +import TButton from '../TButton/TButton'; +import TPopUp from '../TPopUp/TPopUp'; +import HistoryPhoneNumber from './HistoryPhoneNumber/HistoryPhoneNumber'; +import css from './MobileSendPopUp.module.less'; +import PhoneInputSection from './PhoneInputSection'; +import SMSNumKeyPad from './SMSNumKeyPad'; const SECRET_KEY = "fy7BTKuM9eeTQqEC9sF3Iw5qG43Aaip"; @@ -616,13 +627,15 @@ export default function MobileSendPopUp({ )} {productPrice && ( -
{productPrice}
+
+ {productPrice} +
)}
- {/* 🔄 [BACKUP] 기존 전화번호 입력 영역 - 원상복구용 -
+ {/* 🔄 [BACKUP] 기존 전화번호 입력 영역 - 원상복구용 */} +
{mobileNumber} - - +
+ {keyPadOff && recentSentNumber.length > 0 ? ( )}
- */} {/* 🆕 [NEW] PhoneInputSection + instruction 좌우 배치 */} -
+ {/*
)} -
+
*/}
div { - flex: 1; - align-self: stretch; + > span { color: #808080; - font-size: 20px; // 피그마 스펙대로 복원 - font-family: "LG Smart UI"; - font-weight: 400; - line-height: 24px; // 피그마 스펙대로 복원 - word-wrap: break-word; - display: flex; - flex-direction: column; - justify-content: flex-start; - align-items: flex-start; - overflow: hidden; // 넘치는 내용 숨김 - - &.instructionRu { - font-size: 18px; // 피그마 스펙대로 복원 - line-height: 22px; - } - - > div { - word-wrap: break-word; - overflow-wrap: break-word; - } + font-size: 20px; + line-height: 24px; } } } diff --git a/com.twin.app.shoptime/src/components/MobileSend/SMSNumKeyPad.jsx b/com.twin.app.shoptime/src/components/MobileSend/SMSNumKeyPad.jsx index 34ed3f59..e65ad2f6 100644 --- a/com.twin.app.shoptime/src/components/MobileSend/SMSNumKeyPad.jsx +++ b/com.twin.app.shoptime/src/components/MobileSend/SMSNumKeyPad.jsx @@ -1,12 +1,14 @@ -import React, { useCallback } from "react"; +import React, { useCallback } from 'react'; -import classNames from "classnames"; +import classNames from 'classnames'; -import { SpotlightContainerDecorator } from "@enact/spotlight/SpotlightContainerDecorator"; -import Spottable from "@enact/spotlight/Spottable"; +import { + SpotlightContainerDecorator, +} from '@enact/spotlight/SpotlightContainerDecorator'; +import Spottable from '@enact/spotlight/Spottable'; -import { $L } from "../../utils/helperMethods"; -import css from "./SMSNumKeyPad.module.less"; +import { $L } from '../../utils/helperMethods'; +import css from './SMSNumKeyPad.module.less'; const Container = SpotlightContainerDecorator( { defaultElement: `[data-spotlight-id="keypad-number-1"]` }, @@ -42,10 +44,12 @@ export default function SMSNumKeyPad({ onKeyDown }) { {[...Array(9).keys()].map((num, idx) => renderButton(num + 1, idx))} + className={classNames(css.btn, css.btnBack)} + onClick={_onKeyDown("clear")} + aria-label="Clear Key" + > + {$L("Clear")} + - {$L("Clear")} - + className={classNames(css.btn, css.btnDelete)} + onClick={_onKeyDown("backspace")} + aria-label="Delete Key" + /> ); } diff --git a/com.twin.app.shoptime/src/components/MobileSend/SMSNumKeyPad.module.less b/com.twin.app.shoptime/src/components/MobileSend/SMSNumKeyPad.module.less index 5d15ce68..f7dc29e1 100644 --- a/com.twin.app.shoptime/src/components/MobileSend/SMSNumKeyPad.module.less +++ b/com.twin.app.shoptime/src/components/MobileSend/SMSNumKeyPad.module.less @@ -4,38 +4,48 @@ .container { display: flex; flex-wrap: wrap; - .numInput { - padding: 18px 5px 18px 20px; - width: 437px; - .border-solid(@size:1px,#cccccc); - height: 100%; - cursor: text; - font-weight: normal; - font-size: 28px; - } - width: 441px; + width: 202.5px; + height: 218px; + justify-content: end; + align-items: center; + // .numInput { + // padding: 18px 5px 18px 20px; + // width: 437px; + // .border-solid(@size:1px,#cccccc); + // height: 100%; + // cursor: text; + // font-weight: normal; + // font-size: 28px; + // } + // width: 441px; .btn { .flex(); outline: none; - width: 145px; - height: 70px; - margin: 0 1px 1px 0; - background-color: #434040; + width: 54.5px; + height: 54.5px; + // margin: 0 1px 1px 0; + &:nth-child(3n + 2) { + margin: 0px 19px; + } color: #ffffff; - font-size: 34px; - letter-spacing: -0.5px; + font-size: 27px; text-align: center; &:nth-child(3n + 3) { margin: 0 0 1px 0; } + &.btnBack { + font-size: 18px; + font-weight: 600; + } &.btnDelete { background-image: url("../../../assets//images/deltxt.png"); .imgElement(37px,27px,center,center); } &:focus { - background-color: @PRIMARY_COLOR_RED; - color: @COLOR_WHITE; + background-color: #e6e6e6; + color: #4c5059; + border-radius: 6px; } } }