From fa480e96f7736b7f15292d964d9bde971a6c7e91 Mon Sep 17 00:00:00 2001 From: djaco Date: Fri, 20 Jun 2025 09:01:09 +0900 Subject: [PATCH] =?UTF-8?q?fix:=20=EA=B8=B0=ED=9A=8D=EC=9E=90=EC=9D=98?= =?UTF-8?q?=EA=B2=AC=20=EB=B0=98=EC=98=81=202=EC=B0=A8=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/actions/deviceActions.js | 63 +++++---- .../src/actions/eventActions.js | 56 ++++---- .../src/components/TPopUp/TPopUp.module.less | 20 +-- .../src/views/IntroPanel/IntroPanel.new.jsx | 127 +++++++++++------- .../IntroPanel/IntroPanel.new.module.less | 117 ++++------------ .../TermsOfService/TermsOfService.jsx | 6 +- .../TermsOfService/TermsOfService.module.less | 36 ++--- 7 files changed, 198 insertions(+), 227 deletions(-) diff --git a/com.twin.app.shoptime/src/actions/deviceActions.js b/com.twin.app.shoptime/src/actions/deviceActions.js index f48fa5f9..e44e5214 100644 --- a/com.twin.app.shoptime/src/actions/deviceActions.js +++ b/com.twin.app.shoptime/src/actions/deviceActions.js @@ -37,38 +37,45 @@ export const getAuthenticationCode = () => (dispatch, getState) => { }; // IF-LGSP-001 디바이스 등록 및 약관 동의 -export const registerDevice = (params) => (dispatch, getState) => { - const { agreeTerms } = params; +export const registerDevice = + (params, onSuccessCallback, onFailCallback) => (dispatch, getState) => { + const { agreeTerms } = params; - const onSuccess = (response) => { - console.log("registerDevice onSuccess: ", response.data); + const onSuccess = (response) => { + console.log("registerDevice onSuccess: ", response.data); - dispatch({ - type: types.REGISTER_DEVICE, - payload: response.data.data, - retCode: response.data.retCode, - }); - dispatch(getAuthenticationCode()); - dispatch(fetchCurrentUserHomeTerms()); + dispatch({ + type: types.REGISTER_DEVICE, + payload: response.data.data, + retCode: response.data.retCode, + }); + dispatch(getAuthenticationCode()); + dispatch(fetchCurrentUserHomeTerms()); + if (onSuccessCallback) { + onSuccessCallback(response.data); + } + }; + + const onFail = (error) => { + console.error("registerDevice onFail: ", error); + if (onFailCallback) { + onFailCallback(error); + } + }; + + TAxios( + dispatch, + getState, + "post", + URLS.REGISTER_DEVICE, + {}, + { agreeTerms }, + onSuccess, + onFail, + true + ); }; - const onFail = (error) => { - console.error("registerDevice onFail: ", error); - }; - - TAxios( - dispatch, - getState, - "post", - URLS.REGISTER_DEVICE, - {}, - { agreeTerms }, - onSuccess, - onFail, - true - ); -}; - // 디바이스 부가 정보 저장 (IF-LGSP-002) export const registerDeviceInfo = (params) => (dispatch, getState) => { const { evntTpCd, evntId, evntApplcnFlag, entryMenu, mbphNo } = params; diff --git a/com.twin.app.shoptime/src/actions/eventActions.js b/com.twin.app.shoptime/src/actions/eventActions.js index b40f4fd0..da2801d8 100644 --- a/com.twin.app.shoptime/src/actions/eventActions.js +++ b/com.twin.app.shoptime/src/actions/eventActions.js @@ -3,33 +3,41 @@ import { TAxios } from "../api/TAxios"; import { types } from "./actionTypes"; // 이벤트 정보 조회 IF-LGSP-070 -export const getWelcomeEventInfo = () => (dispatch, getState) => { - const onSuccess = (response) => { - console.log("getWelcomeEventInfo onSuccess ", response.data); +export const getWelcomeEventInfo = + (onSuccessCallback, onFailCallback) => (dispatch, getState) => { + const onSuccess = (response) => { + console.log("getWelcomeEventInfo onSuccess ", response.data); - dispatch({ - type: types.GET_WELCOME_EVENT_INFO, - payload: response.data.data, - retCode: response.data.retCode, - }); + dispatch({ + type: types.GET_WELCOME_EVENT_INFO, + payload: response.data.data, + retCode: response.data.retCode, + }); + + if (onSuccessCallback) { + onSuccessCallback(response.data); + } + }; + + const onFail = (error) => { + console.error("getWelcomeEventInfo onFail ", error); + if (onFailCallback) { + onFailCallback(error); + } + }; + + TAxios( + dispatch, + getState, + "get", + URLS.GET_WELCOME_EVENT_INFO, + {}, + {}, + onSuccess, + onFail + ); }; - const onFail = (error) => { - console.error("getWelcomeEventInfo onFail ", error); - }; - - TAxios( - dispatch, - getState, - "get", - URLS.GET_WELCOME_EVENT_INFO, - {}, - {}, - onSuccess, - onFail - ); -}; - // 이벤트(쿠폰) 지급 요청 (IF-LGSP-071) export const setEventIssueReq = (params) => (dispatch, getState) => { const { evntTpCd, evntId, mbphNo, cntryCd } = params; 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 187cb5ca..6522879e 100644 --- a/com.twin.app.shoptime/src/components/TPopUp/TPopUp.module.less +++ b/com.twin.app.shoptime/src/components/TPopUp/TPopUp.module.less @@ -183,7 +183,7 @@ &.optionItem { display: flex; - color: red; + color: @PRIMARY_COLOR_RED; } } @@ -358,10 +358,10 @@ .textLayer { width: 100%; padding-bottom: 35px; - border-bottom: 1px solid #dadada; + border-bottom: 1px solid @COLOR_GRAY02; .text { min-height: 126px; - color: #1a1a1a; + color: @COLOR_GRAY08; font-size: 36px; line-height: 42px; text-align: left; @@ -384,10 +384,10 @@ height: 300px; } &::-webkit-scrollbar-track-piece { - background-color: #fff; + background-color: @COLOR_WHITE; } &::-webkit-scrollbar-thumb { - background-color: #7a808d; + background-color: @COLOR_GRAY04; } } } @@ -403,7 +403,7 @@ background: @COLOR_GRAY09; font-size: 30px; &:focus { - box-shadow: 0px 18px 28.2px 1.8px rgba(62, 59, 59, 0.4); + outline: 4px solid @PRIMARY_COLOR_RED; background-color: @PRIMARY_COLOR_RED; color: @COLOR_WHITE; } @@ -428,7 +428,7 @@ background: @COLOR_GRAY09; font-size: 30px; &:focus { - box-shadow: 0px 18px 28.2px 1.8px rgba(62, 59, 59, 0.4); + outline: 4px solid @PRIMARY_COLOR_RED; background-color: @PRIMARY_COLOR_RED; color: @COLOR_WHITE; } @@ -471,7 +471,7 @@ align-items: center; margin-right: 60px; .title { - color: #333; + color: @COLOR_GRAY06; font-size: 36px; font-weight: bold; margin-bottom: 12px; @@ -490,7 +490,7 @@ } .text { - color: #1a1a1a; + color: @COLOR_GRAY08; font-size: 24px; text-align: left; font-weight: normal; @@ -513,7 +513,7 @@ font-size: 24px; line-height: 60px; &:focus { - box-shadow: 0px 18px 28.2px 1.8px rgba(62, 59, 59, 0.4); + outline: 4px solid @PRIMARY_COLOR_RED; background-color: @PRIMARY_COLOR_RED; color: @COLOR_WHITE; } diff --git a/com.twin.app.shoptime/src/views/IntroPanel/IntroPanel.new.jsx b/com.twin.app.shoptime/src/views/IntroPanel/IntroPanel.new.jsx index 3cca51d4..45ae14b2 100644 --- a/com.twin.app.shoptime/src/views/IntroPanel/IntroPanel.new.jsx +++ b/com.twin.app.shoptime/src/views/IntroPanel/IntroPanel.new.jsx @@ -244,8 +244,7 @@ export default function IntroPanel({ }, [dispatch]); const handleAgree = useCallback(() => { - - if(isProcessing) return; + if (isProcessing) return; // 필수 약관이 체크되어 있는지 확인 if (!termsChecked || !privacyChecked) { @@ -278,24 +277,89 @@ export default function IntroPanel({ console.log('최종 전송될 agreeTerms:', agreeTerms); - // registerDevice 호출 - 필수 + 선택 약관 모두 포함 - dispatch(registerDevice({ - agreeTerms: agreeTerms - })); - // dispatch(fetchCurrentUserHomeTerms()); // 중복호출 방지 - setIsProcessing(false); - }, [termsChecked, privacyChecked, optionalChecked, dispatch]); + dispatch( + registerDevice( + { agreeTerms: agreeTerms }, + (regDeviceData) => { + if (regDeviceData && regDeviceData.retCode === 0) { + dispatch( + getWelcomeEventInfo((eventInfos) => { + if ( + eventInfos && + Object.keys(eventInfos.data).length > 0 && + webOSVersion + ) { + let displayWelcomeEventPanel = false; + + if ( + eventInfos.data?.welcomeEventFlag === "Y" || + (eventInfos.data?.welcomeBillCpnEventFlag === "Y" && + Number(webOSVersion) >= 6) + ) { + displayWelcomeEventPanel = true; + } + + dispatch( + sendLogTerms({ logTpNo: Config.LOG_TP_NO.TERMS.AGREE }) + ); + + if (displayWelcomeEventPanel) { + dispatch( + pushPanel({ + name: panel_names.WELCOME_EVENT_PANEL, + panelInfo: { eventInfos: eventInfos.data }, + }) + ); + } + } + dispatch(popPanel(panel_names.INTRO_PANEL)); + setIsProcessing(false); + }) + ); + } else { + dispatch( + setShowPopup(Config.ACTIVE_POPUP.alertPopup, { + title: $L("Error"), + text: $L("Device registration failed. Please try again."), + button1Text: $L("OK"), + }) + ); + setIsProcessing(false); + } + }, + () => { + dispatch( + setShowPopup(Config.ACTIVE_POPUP.alertPopup, { + title: $L("Error"), + text: $L("Device registration failed. Please try again."), + button1Text: $L("OK"), + }) + ); + setIsProcessing(false); + } + ) + ); + }, [ + termsChecked, + privacyChecked, + optionalChecked, + dispatch, + isProcessing, + webOSVersion, + ]); // 실패 감지를 위한 useEffect 추가 useEffect(() => { // isProcessing이 true일 때만 실패 체크 (= handleAgree 클릭 후에만) if (isProcessing && regDeviceData && regDeviceData.retCode !== 0) { - console.error('registerDevice 실패:', regDeviceData); - dispatch(setShowPopup(Config.ACTIVE_POPUP.alertPopup, { - title: $L("Error"), - text: $L("Device registration failed. Please try again."), - button1Text: $L("OK") - })); + console.error("registerDevice 실패:", regDeviceData); + dispatch( + setShowPopup(Config.ACTIVE_POPUP.alertPopup, { + title: $L("Error"), + text: $L("Device registration failed. Please try again."), + button1Text: $L("OK"), + }) + ); setIsProcessing(false); } }, [regDeviceData, dispatch, isProcessing]); // isProcessing 의존성 추가 @@ -384,7 +448,6 @@ export default function IntroPanel({

{$L("Required Consent")}

{$L("(Necessary for using the service)")}

-

{$L("Thank you for agreeing to required terms!")}

); } @@ -412,12 +475,6 @@ export default function IntroPanel({ Spotlight.focus(); }, [popupVisible]); - useEffect(() => { - if (regDeviceData && regDeviceData.retCode === 0) { - dispatch(getWelcomeEventInfo()); - } - }, [dispatch, regDeviceData]); - useEffect(() => { if (regDeviceInfoData && regDeviceInfoData.retCode === 0) { dispatch(setHidePopup()); @@ -425,32 +482,6 @@ export default function IntroPanel({ } }, [dispatch, regDeviceInfoData]); - useEffect(() => { - if (eventInfos && Object.keys(eventInfos).length > 0 && webOSVersion) { - let displayWelcomeEventPanel = false; - - if ( - eventInfos?.welcomeEventFlag === "Y" || - (eventInfos?.welcomeBillCpnEventFlag === "Y" && - Number(webOSVersion) >= 6) - ) { - displayWelcomeEventPanel = true; - } - setIsProcessing(false); - dispatch(popPanel(panel_names.INTRO_PANEL)); - dispatch(sendLogTerms({ logTpNo: Config.LOG_TP_NO.TERMS.AGREE })); - - if (displayWelcomeEventPanel) { - dispatch( - pushPanel({ - name: panel_names.WELCOME_EVENT_PANEL, - panelInfo: { eventInfos: eventInfos }, - }) - ); - } - } - }, [eventInfos, webOSVersion]); - const description = $L( "Check out more LIVE SHOWS now and enjoy shopping at Shop Time's special price on your TV by agreeing to the LG TV Shopping Terms and Conditions." ); diff --git a/com.twin.app.shoptime/src/views/IntroPanel/IntroPanel.new.module.less b/com.twin.app.shoptime/src/views/IntroPanel/IntroPanel.new.module.less index febd138a..ceafc45e 100644 --- a/com.twin.app.shoptime/src/views/IntroPanel/IntroPanel.new.module.less +++ b/com.twin.app.shoptime/src/views/IntroPanel/IntroPanel.new.module.less @@ -183,30 +183,10 @@ padding-left: 60px; padding-right: 60px; border-left: 1px #C5C6C9 solid; - justify-content: flex-start; - align-items: center; - gap: 10px; + justify-content: center; + align-items: flex-start; display: flex; - - .optionalDescription { - width: 595px; - color: #807F81; - font-size: 26px; - font-family: 'LG Smart UI'; - font-weight: 400; - line-height: 43px; - word-wrap: break-word; - } - - // OptionalTermsInfo 컴포넌트 스타일 - .termsInfo { - width: 100%; - height: auto; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - } + flex-direction: column; } } @@ -240,73 +220,25 @@ gap: 40px; justify-content: center; - .agreeButton { - width: 450px; - height: 100px; - // background-color: #C70850 !important; - // border: 2px solid #C70850 !important; - color: white !important; - border-radius: 12px; - font-size: 35px; - font-family: 'LG Smart UI'; - font-weight: 700; - line-height: 2rem; - cursor: pointer; - transition: all 0.3s ease; - - // 포커스 상태 - &.focused:not(:disabled) { - background-color: #a40640 !important; - border-color: #a40640 !important; - color: white !important; - transform: scale(1.05); - } - - // 호버 효과 - &:hover:not(:disabled) { - background-color: #a40640 !important; - border-color: #a40640 !important; - color: white !important; - transform: scale(1.05); - } - - // 비활성화 상태 - &:disabled { - background-color: @COLOR_GRAY03 !important; - border-color: @COLOR_GRAY03 !important; - cursor: not-allowed; - transform: none; - } - } - + .agreeButton, .disagreeButton { width: 450px; height: 100px; - // background-color: #999999 !important; - // border: 2px solid #999999 !important; - color: white !important; - border-radius: 12px; - font-size: 35px; - font-family: 'LG Smart UI'; - font-weight: 700; - line-height: 2rem; - cursor: pointer; - transition: all 0.3s ease; + margin: 0 20px; + font-size: 30px; + border-radius: 10px; + box-sizing: border-box; + line-height: normal; + background-color: #999999; + color: @COLOR_WHITE; + box-shadow: 0 5px 5px #003 0 6px 7px #0000001a; + .flex(); - // 포커스 상태 - &.focused { - background-color: #7a7a7a !important; - border-color: #7a7a7a !important; - color: white !important; - transform: scale(1.05); - } - - // 호버 효과 + &:focus, &:hover { - background-color: #7a7a7a !important; - border-color: #7a7a7a !important; - color: white !important; - transform: scale(1.05); + background-color: @PRIMARY_COLOR_RED; + color: @COLOR_WHITE; + box-shadow: 0px 18px 28.2px 1.8px rgba(0, 0, 0, 0.4); } } } @@ -403,11 +335,6 @@ // ✅ [추가] 필수 약관 안내 패널 스타일 .requiredInfoPanel { width: 100%; - height: 100%; - display: flex; - flex-direction: column; - justify-content: center; - align-items: flex-start; // 왼쪽 정렬 } .infoText { @@ -425,4 +352,14 @@ font-size: 28px; line-height: 1.4; font-weight: bold; +} + +.optionalDescription { + width: 595px; + color: #807F81; + font-size: 26px; + font-family: 'LG Smart UI'; + font-weight: 400; + line-height: 43px; + word-wrap: break-word; } \ No newline at end of file diff --git a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/TermsOfService/TermsOfService.jsx b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/TermsOfService/TermsOfService.jsx index 54dd19a6..fdf61fad 100644 --- a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/TermsOfService/TermsOfService.jsx +++ b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/TermsOfService/TermsOfService.jsx @@ -208,6 +208,9 @@ export default function TermsOfService({ title, cbScrollTo }) { ({ selected }) => { if (optionalTermsAgree) return; setIsOptionalChecked(selected); + if (selected) { + Spotlight.focus("optional-agree-button"); + } }, [optionalTermsAgree] ); @@ -375,8 +378,9 @@ export default function TermsOfService({ title, cbScrollTo }) { {$L("Do Not Agree")} diff --git a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/TermsOfService/TermsOfService.module.less b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/TermsOfService/TermsOfService.module.less index 0b0c212d..8a370ec1 100644 --- a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/TermsOfService/TermsOfService.module.less +++ b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/TermsOfService/TermsOfService.module.less @@ -101,39 +101,23 @@ color: #888888; } -.agreeButton { +.agreeButton, +.disagreeButton { width: 240px; height: 80px; - background: #777d8a; - box-shadow: 0px 0px 50px rgba(0, 0, 0, 0.5); + background: #999999; border-radius: 12px; color: white; font-size: 30px; font-weight: 700; + box-shadow: 0 5px 5px #003 0 6px 7px #0000001a; + .flex(); - &:not([disabled]) { - cursor: pointer; - - &:hover { - background: #a60641; - } - } -} - -.disagreeButton { - width: 240px; - height: 80px; - background: #777d8a; - border-radius: 12px; - color: #e6e6e6; - font-size: 30px; - font-weight: 700; - - &:not([disabled]) { - cursor: pointer; - - &:hover { - background: #626771; + &:focus, + &:hover { + &:not([disabled]) { + background: @PRIMARY_COLOR_RED; + box-shadow: 0px 18px 28.2px 1.8px rgba(0, 0, 0, 0.4); } } }