fix: 기획자의견 반영 2차수정

This commit is contained in:
djaco
2025-06-20 09:01:09 +09:00
parent 19a533b856
commit fa480e96f7
7 changed files with 198 additions and 227 deletions

View File

@@ -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;

View File

@@ -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;

View File

@@ -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;
}

View File

@@ -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({
<div className={css.requiredInfoPanel}>
<p className={css.infoText}>{$L("Required Consent")}</p>
<p className={css.infoText}>{$L("(Necessary for using the service)")}</p>
<p className={css.successText}>{$L("Thank you for agreeing to required terms!")}</p>
</div>
);
}
@@ -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."
);

View File

@@ -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;
}

View File

@@ -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 }) {
<TButton
onClick={handleOptionalDisagree}
className={css.disagreeButton}
spotlightDisabled={spotlightDisabled}
spotlightDisabled={spotlightDisabled || !optionalTermsAgree}
spotlightId="optional-disagree-button"
disabled={!optionalTermsAgree}
>
{$L("Do Not Agree")}
</TButton>

View File

@@ -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);
}
}
}