From e97172fad519c95c80559a8892df2a8cf7f02779 Mon Sep 17 00:00:00 2001 From: "junghoon86.park" Date: Mon, 15 Dec 2025 09:43:22 +0900 Subject: [PATCH] =?UTF-8?q?[=EB=AA=A8=EB=B0=94=EC=9D=BC=20=EC=83=8C?= =?UTF-8?q?=EB=93=9C=20=ED=8C=9D=EC=97=85]=20qvc=EC=9D=BC=EB=95=8C=20?= =?UTF-8?q?=EC=9B=90=ED=98=95=EC=9C=BC=EB=A1=9C=20=EC=A7=A4=EB=A6=AC?= =?UTF-8?q?=EB=8A=94=EB=B6=80=EB=B6=84=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - qvc에서는 border-radius제거. - theme item일때 에러나는부분때문에 옵셔널체이닝 처리. --- .../components/MobileSend/MobileSendPopUp.jsx | 187 +++++++++--------- .../MobileSend/MobileSendPopUp.module.less | 15 +- 2 files changed, 105 insertions(+), 97 deletions(-) diff --git a/com.twin.app.shoptime/src/components/MobileSend/MobileSendPopUp.jsx b/com.twin.app.shoptime/src/components/MobileSend/MobileSendPopUp.jsx index cf0f0aa4..99911a4d 100644 --- a/com.twin.app.shoptime/src/components/MobileSend/MobileSendPopUp.jsx +++ b/com.twin.app.shoptime/src/components/MobileSend/MobileSendPopUp.jsx @@ -4,75 +4,75 @@ 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 css from "./MobileSendPopUp.module.less"; -import PhoneInputSection from "./PhoneInputSection"; -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"; +const SECRET_KEY = 'fy7BTKuM9eeTQqEC9sF3Iw5qG43Aaip'; const Container = SpotlightContainerDecorator( - { enterTo: "last-focused" }, - "div" + { enterTo: 'last-focused' }, + 'div' ); const InputContainer = SpotlightContainerDecorator( - { enterTo: "last-focused" }, - "div" + { enterTo: 'last-focused' }, + 'div' ); -const SpottableComponent = Spottable("div"); +const SpottableComponent = Spottable('div'); export default function MobileSendPopUp({ open, @@ -116,39 +116,41 @@ export default function MobileSendPopUp({ const popupVisible = useSelector((state) => state.common.popup.popupVisible); const nowMenu = useSelector((state) => state.common.menu.nowMenu); const entryMenu = useSelector((state) => state.common.menu.entryMenu); + const partnerNm = useSelector((state) => state.main.productData?.patncNm); + const [inputDisabled, setInputDisabled] = useState(true); - const [mobileNumber, setMobileNumber] = useState(""); + const [mobileNumber, setMobileNumber] = useState(''); const [recentSentNumber, setRecentSentNumber] = useState([]); const [keyPadOff, setKeyPadOff] = useState(false); const [smsRetCode, setSmsRetCode] = useState(undefined); const agreeBtnClickedRef = useRef(false); - const deviceCountryCode = httpHeader["X-Device-Country"]; + const deviceCountryCode = httpHeader['X-Device-Country']; const mobileSendPopUpSpotlightId = useMemo(() => { return !keyPadOff && recentSentNumber.length <= 0 - ? "keypad-number-1" - : "agreeAndSend"; + ? 'keypad-number-1' + : 'agreeAndSend'; }, [keyPadOff, recentSentNumber]); const getMaxNum = useCallback((_deviceCountryCode) => { - if (_deviceCountryCode === "DE" || _deviceCountryCode === "GB") { + if (_deviceCountryCode === 'DE' || _deviceCountryCode === 'GB') { return 11; - } else if (_deviceCountryCode === "KR") { + } else if (_deviceCountryCode === 'KR') { return 12; } else return 10; }, []); - const MSG_SUCCESS_SENT = $L("Text Send to") + " " + mobileNumber; - const MSG_SEND_LINK = $L("Send a purchase link for this item via SMS"); + const MSG_SUCCESS_SENT = $L('Text Send to') + ' ' + mobileNumber; + const MSG_SEND_LINK = $L('Send a purchase link for this item via SMS'); const handleClickSelect = (_phoneNumber) => { setKeyPadOff((state) => !state); setMobileNumber(_phoneNumber); setTimeout(() => { - Spotlight.focus("keypad-number-1"); + Spotlight.focus('keypad-number-1'); }, 0); }; @@ -161,9 +163,9 @@ export default function MobileSendPopUp({ const getRawPhoneNumber = useCallback( (key) => { - let rawPhoneNumber = `${mobileNumber}${key}`.replace(/\D/g, ""); + let rawPhoneNumber = `${mobileNumber}${key}`.replace(/\D/g, ''); if (rawPhoneNumber.length === getMaxNum(deviceCountryCode)) { - Spotlight.focus("agreeAndSend"); + Spotlight.focus('agreeAndSend'); } // 테스트용: 12자리까지 허용 if (rawPhoneNumber.length > 12) { @@ -182,11 +184,11 @@ export default function MobileSendPopUp({ numberProto, PhoneNumberFormat.NATIONAL ); - if (deviceCountryCode === "RU" && rawPhoneNumber.startsWith("8")) { + if (deviceCountryCode === 'RU' && rawPhoneNumber.startsWith('8')) { rawPhoneNumber = rawPhoneNumber.substring(1); } } else { - let formattedNumber = ""; + let formattedNumber = ''; for (let i = 0; i < rawPhoneNumber.length; i++) { formattedNumber = asYouTypeFormatter.inputDigit( @@ -206,7 +208,7 @@ export default function MobileSendPopUp({ ); const getBackspaceRawNumber = useCallback(() => { - let rawPhoneNumber = mobileNumber.replace(/\D/g, "").slice(0, -1); + let rawPhoneNumber = mobileNumber.replace(/\D/g, '').slice(0, -1); const phoneUtil = PhoneNumberUtil.getInstance(); const asYouTypeFormatter = new AsYouTypeFormatter(deviceCountryCode); @@ -221,7 +223,7 @@ export default function MobileSendPopUp({ PhoneNumberFormat.NATIONAL ); } else { - let formattedNumber = ""; + let formattedNumber = ''; for (let i = 0; i < rawPhoneNumber.length; i++) { formattedNumber = asYouTypeFormatter.inputDigit( @@ -242,7 +244,7 @@ export default function MobileSendPopUp({ (ev) => { if (ev && ev.key >= 0 && ev.key <= 9) { getRawPhoneNumber(ev.key); - } else if (ev.key === "Backspace") { + } else if (ev.key === 'Backspace') { getBackspaceRawNumber(); } }, @@ -250,9 +252,9 @@ export default function MobileSendPopUp({ ); useEffect(() => { - on("keydown", handleKeydown); + on('keydown', handleKeydown); return () => { - off("keydown", handleKeydown); + off('keydown', handleKeydown); }; }, [handleKeydown]); @@ -264,7 +266,7 @@ export default function MobileSendPopUp({ useEffect(() => { const timer = setTimeout(() => - setInputDisabled(mobileSendPopUpSpotlightId === "keypad-number-1") + setInputDisabled(mobileSendPopUpSpotlightId === 'keypad-number-1') ); return () => clearTimeout(timer); @@ -277,16 +279,16 @@ export default function MobileSendPopUp({ setMobileNumber(recentSentNumber[0]); } else { setKeyPadOff(false); - setMobileNumber(""); + setMobileNumber(''); } } }, [recentSentNumber]); const numKeypadClicked = useCallback( (key) => { - if (key === "clear") { - setMobileNumber(""); - } else if (key == "backspace") { + if (key === 'clear') { + setMobileNumber(''); + } else if (key == 'backspace') { getBackspaceRawNumber(); } else { getRawPhoneNumber(key); @@ -315,7 +317,7 @@ export default function MobileSendPopUp({ }; const handleAgreeSendClick = useCallback(() => { - let naturalNumber = mobileNumber.replace(/\D/g, ""); + let naturalNumber = mobileNumber.replace(/\D/g, ''); // 테스트용: 길이 체크를 더 유연하게 (10자리 또는 11자리 허용) if ( @@ -327,8 +329,8 @@ export default function MobileSendPopUp({ return; } - if (deviceCountryCode === "KR") { - naturalNumber = "82" + naturalNumber; + if (deviceCountryCode === 'KR') { + naturalNumber = '82' + naturalNumber; } if (recentSentNumber && recentSentNumber.length > 0) { @@ -394,22 +396,22 @@ export default function MobileSendPopUp({ }; // 호텔일 경우 날려야 하는 경우 - if (smsTpCd === "APP00205") { + if (smsTpCd === 'APP00205') { params = { ...params, hotelId, hotelNm, hotelDtlUrl, curationId }; } - if (smsTpCd === "APP00204") { + if (smsTpCd === 'APP00204') { params = { ...params, curationId }; } dispatch(sendSms(params)); } // EVT00101 & APP00207(welcome) EVT00103 & APP00209 (welcome+Prizes) : smsTpCd 값을 받지 않음 - if (evntTpCd === "EVT00101" || evntTpCd === "EVT00103") { + if (evntTpCd === 'EVT00101' || evntTpCd === 'EVT00103') { dispatch( registerDeviceInfo({ evntTpCd, evntId, - evntApplcnFlag: "Y", - entryMenu: "TermsPop", + evntApplcnFlag: 'Y', + entryMenu: 'TermsPop', mbphNo: naturalNumber, }) ); @@ -434,7 +436,7 @@ export default function MobileSendPopUp({ onClose(); dispatch(setShowPopup(ACTIVE_POPUP.smsPopup)); - setTimeout(() => Spotlight.focus("agreeAndSend")); + setTimeout(() => Spotlight.focus('agreeAndSend')); }, [dispatch, smsRetCode] ); @@ -450,7 +452,7 @@ export default function MobileSendPopUp({ curationCouponSuccess === 0 ) { const logParams = { - status: "send", + status: 'send', nowMenu: nowMenu, partner: patncNm ?? shopByMobileLogRef?.current?.patncNm, productId: prdtId ?? shopByMobileLogRef?.current?.prdtId, @@ -465,8 +467,8 @@ export default function MobileSendPopUp({ ...shopByMobileLogRef.current, locDt: formatLocalDateTime(new Date()), logTpNo: LOG_TP_NO.SHOP_BY_MOBILE.AGREE_AND_SEND, - mbphNoFlag: "Y", - trmsAgrFlag: "Y", + mbphNoFlag: 'Y', + trmsAgrFlag: 'Y', }; dispatch(sendLogShopByMobile(params)); @@ -497,24 +499,24 @@ export default function MobileSendPopUp({ }, [dispatch]); const getSmsErrorMsg = useMemo(() => { - const SMS_ERROR_502 = $L("The event information has not been registered"); - const SMS_ERROR_903 = $L("You have exceeded the daily text limit."); + const SMS_ERROR_502 = $L('The event information has not been registered'); + const SMS_ERROR_903 = $L('You have exceeded the daily text limit.'); const SMS_ERROR_904 = $L( - "You have exceeded the text limit for this product." + 'You have exceeded the text limit for this product.' ); const SMS_ERROR_905 = $L( - "This number is currently blocked. To receive a message, please send UNSTOP to the number below. 07860 064195" + 'This number is currently blocked. To receive a message, please send UNSTOP to the number below. 07860 064195' ); - const SMS_ERROR_906 = $L("Sorry. This item is sold out."); - const SMS_ERROR_600 = $L("This device had received first time coupon."); - const SMS_ERROR_601 = $L("There is no coupon."); - const SMS_ERROR_900 = $L("Failed to send text to {mobileNumber}").replace( - "{mobileNumber}", + const SMS_ERROR_906 = $L('Sorry. This item is sold out.'); + const SMS_ERROR_600 = $L('This device had received first time coupon.'); + const SMS_ERROR_601 = $L('There is no coupon.'); + const SMS_ERROR_900 = $L('Failed to send text to {mobileNumber}').replace( + '{mobileNumber}', mobileNumber ); const SMS_ERROR_907 = $L( - "Only {length} digits is permitted. Please check again" - ).replace("{length}", getMaxNum(deviceCountryCode)); + 'Only {length} digits is permitted. Please check again' + ).replace('{length}', getMaxNum(deviceCountryCode)); switch (smsRetCode) { case 502: @@ -542,12 +544,12 @@ export default function MobileSendPopUp({ const getEvntErrorMsg = useMemo(() => { if (curationCouponSuccess === 600) { - return $L("This device had received first time coupon."); + return $L('This device had received first time coupon.'); } else if (curationCouponSuccess === 601) { - return $L("There is no coupon."); + return $L('There is no coupon.'); } else { - return $L("Failed to sent text to {mobileNumber}").replace( - "{mobileNumber}", + return $L('Failed to sent text to {mobileNumber}').replace( + '{mobileNumber}', mobileNumber ); } @@ -571,7 +573,7 @@ export default function MobileSendPopUp({ regDeviceInfoRetCode === undefined && curationCouponSuccess === undefined && ( {brandLogo && ( Brand @@ -639,8 +644,8 @@ export default function MobileSendPopUp({ onClick={handleInputClick} spotlightDisabled={inputDisabled} > - {deviceCountryCode && deviceCountryCode === "RU" && ( - {"+7 "} + {deviceCountryCode && deviceCountryCode === 'RU' && ( + {'+7 '} )} {mobileNumber} @@ -662,10 +667,10 @@ export default function MobileSendPopUp({ )} @@ -698,11 +703,11 @@ export default function MobileSendPopUp({ - {$L("Agree and Send")} + {$L('Agree and Send')} - {$L("Cancel")} + {$L('Cancel')} )} @@ -714,7 +719,7 @@ export default function MobileSendPopUp({ text={smsTpCd ? getSmsErrorMsg : getEvntErrorMsg} onClick={_onClose} hasButton - button1Text={$L("OK")} + button1Text={$L('OK')} /> )} {(smsRetCode === 0 || @@ -727,7 +732,7 @@ export default function MobileSendPopUp({ text={MSG_SUCCESS_SENT} onClick={onClose} hasButton - button1Text={$L("OK")} + button1Text={$L('OK')} /> )} diff --git a/com.twin.app.shoptime/src/components/MobileSend/MobileSendPopUp.module.less b/com.twin.app.shoptime/src/components/MobileSend/MobileSendPopUp.module.less index 94386fea..5d0695bd 100644 --- a/com.twin.app.shoptime/src/components/MobileSend/MobileSendPopUp.module.less +++ b/com.twin.app.shoptime/src/components/MobileSend/MobileSendPopUp.module.less @@ -1,5 +1,5 @@ -@import "../../style/CommonStyle.module.less"; -@import "../../style/utils.module.less"; +@import '../../style/CommonStyle.module.less'; +@import '../../style/utils.module.less'; /* 🆕 [NEW] Figma 디자인용 타이틀 헤드 스타일 */ .titleHead { @@ -14,7 +14,7 @@ text-align: left; // center → left color: black; font-size: 32px; - font-family: "LG Smart UI"; + font-family: 'LG Smart UI'; font-weight: 700; line-height: 42px; word-wrap: break-word; @@ -32,12 +32,15 @@ height: 50px; margin-right: 15px; // TV 호환: gap 대신 margin 사용 border-radius: 100%; + &.headerTopRow__brandLogo__qvc { + border-radius: 0; + } } .headerTopRow__productId { color: #808080; font-size: 24px; - font-family: "LG Smart UI"; + font-family: 'LG Smart UI'; font-weight: 600; line-height: 18px; word-wrap: break-word; @@ -57,7 +60,7 @@ top: 0; z-index: 0; - content: ""; + content: ''; } display: flex; > .container__header__productImg, @@ -178,7 +181,7 @@ .flex { display: flex; justify-content: center; - flex-wrap:wrap; + flex-wrap: wrap; } .instruction { width: 492.5px; // 고정 너비