fix: IntroPanel.new.jsx 이미지변경,선택약관 팝업 GNB닫혔을때만 작동

This commit is contained in:
djaco
2025-06-19 13:03:58 +09:00
parent 0528175457
commit 8b30bdd563
7 changed files with 35 additions and 21 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 MiB

View File

@@ -191,7 +191,7 @@ function AppBase(props) {
// dispatch(
// pushPanel({ name: Config.panel_names.INTRO_PANEL, panelInfo: {} })
// );
// }, 1500);
// }, 1000);
// return () => clearTimeout(timer);
// }, [dispatch]);
@@ -393,7 +393,7 @@ function AppBase(props) {
// setTimeout(() => {
// console.log("App.js optionalTermsTest 팝업 표시");
// dispatch(setShowPopup({ activePopup: "optionalTermsConfirmBottom" }));
// }, 3000);
// }, 1000);
// }, [dispatch]);
// 약관 동의 및 선택 약관 팝업 처리

View File

@@ -216,6 +216,8 @@ export const setMyPageTermsAgree =
(params, callback) => (dispatch, getState) => {
const { termsList, notTermsList } = params;
dispatch({ type: types.GET_TERMS_AGREE_YN_START });
const onSuccess = (response) => {
console.log("setMyPageTermsAgree onSuccess ", response.data);
@@ -228,7 +230,7 @@ export const setMyPageTermsAgree =
if (callback) callback(response.data);
};
const onFail = (error) => {
const onFail = (error) => {
console.error("setMyPageTermsAgree onFail ", error);
dispatch({
type: types.SET_MYPAGE_TERMS_AGREE_FAIL,

View File

@@ -238,6 +238,13 @@ export const commonReducer = (state = initialState, action) => {
termsLoading: false,
};
}
case types.SET_MYPAGE_TERMS_AGREE_SUCCESS:
case types.SET_MYPAGE_TERMS_AGREE_FAIL:
return {
...state,
termsLoading: false,
};
// case types.GET_TERMS_AGREE_YN: {
// const { privacyTerms, serviceTerms, purchaseTerms, paymentTerms,optionalTerms } =
// action.payload;

View File

@@ -3,12 +3,11 @@
import React, { useCallback, useEffect, useMemo, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import Spotlight from "@enact/spotlight";
import { SpotlightContainerDecorator } from "@enact/spotlight/SpotlightContainerDecorator";
import Spottable from "@enact/spotlight/Spottable";
import { $L, scaleH, scaleW } from '../../../utils/helperMethods';
import { setDefaultFocus, setShowPopup } from "../../../actions/homeActions";
import { setDefaultFocus, setShowPopup, fetchCurrentUserHomeTerms } from "../../../actions/homeActions";
import { changeAppStatus } from "../../../actions/commonActions";
import { setMyPageTermsAgree } from '../../../actions/myPageActions';
import { pushPanel } from "../../../actions/panelActions";
@@ -63,6 +62,7 @@ export default function HomeBanner({
state.home.termsData?.data?.terms.find(term => term.trmsTpCd === "MST00405")
);
const termsLoading = useSelector((state) => state.common.termsLoading);
const isGnbOpened = useSelector((state) => state.common.isGnbOpened);
// 선택약관 동의여부
const introTermsAgree = useSelector((state) => state.common.introTermsAgree);
@@ -73,13 +73,16 @@ export default function HomeBanner({
// 선택약관 팝업 표시 여부
const shouldShowOptionalTermsPopup = useMemo(() => {
if (termsLoading || isGnbOpened) {
return false;
}
const terms = termsData?.data?.terms;
if (!terms) {
return false;
}
const optionalTerm = terms.find(term => term.trmsTpCd === "MST00405");
return optionalTerm ? optionalTerm.trmsPopFlag === 'Y' && optionalTerm.trmsAgrFlag === 'N' : false;
}, [termsData]);
}, [termsData, termsLoading, isGnbOpened]);
const handleOptionalAgree = useCallback(() => {
console.log('handleAgree Click');
@@ -92,6 +95,8 @@ export default function HomeBanner({
const callback = (response) => {
if (response.retCode === "000" || response.retCode === 0) {
console.log('약관 동의 성공:', response);
// 약관 정보 갱신
dispatch(fetchCurrentUserHomeTerms());
} else {
console.error('약관 동의 실패:', response);
}
@@ -100,7 +105,7 @@ export default function HomeBanner({
console.log('OptionalTermsConfirm - 약관 동의 API 호출 payload:', { termsList, notTermsList });
dispatch(setMyPageTermsAgree({ termsList, notTermsList }, callback));
}, []);
}, [dispatch]);
const handleOptionalTermsClick = useCallback(() => {
console.log('약관 자세히 보기 클릭');
@@ -190,7 +195,7 @@ export default function HomeBanner({
// console.log("App.js optionalTermsTest 팝업 표시");
// setIsOptionalConfirmVisible(true);
// // setIsOptionalTermsVisible(true);
// }, 3000);
// }, 1000);
// }, []);
// 약관 동의 및 선택 약관 팝업 처리
@@ -207,7 +212,7 @@ export default function HomeBanner({
const timer = setTimeout(() => {
setIsOptionalConfirmVisible(true);
// dispatch(setShowPopup({ activePopup: "optionalTermsConfirm" }));
}, 3000); // 3000 milliseconds = 3 seconds
}, 1000); // 3000 milliseconds = 3 seconds
// 컴포넌트 언마운트 시 타이머 클리어
return () => clearTimeout(timer);

View File

@@ -6,10 +6,7 @@ import PropTypes from 'prop-types';
import $L from '@enact/i18n/$L';
import css from './OptionalTermsInfo.module.less';
import benefitImage1 from '/assets/images/benefits/image-benefits-1.png';
import benefitImage2 from '/assets/images/benefits/image-benefits-2.png';
import benefitImage3 from '/assets/images/benefits/image-benefits-3.png';
import benefitImage from '/assets/images/benefits/image-benefits.png';
/**
* OptionalTermsInfo 컴포넌트
@@ -54,9 +51,7 @@ const OptionalTermsInfo = kind({
defaultProps: {
displayMode: 'text',
imageSources: [
benefitImage1,
benefitImage2,
benefitImage3
benefitImage,
],
imageTitle: $L('Agree and Enjoy Special Benefits'),
textDescription: $L('By checking Optional terms, you allow Shop Time to use your activity (views, purchases, searches, etc.) to show you more relevant content, product recommendations, special offers, and ads. If you do not check, you can still use all basic Shop Time features')

View File

@@ -1,13 +1,13 @@
// src/views/MyPagePanel/MyPageSub/TermsOfService/OptionalTermsInfo.module.less
.termsInfo {
width: 100%;
// width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 20px;
// padding: 20px;
box-sizing: border-box;
min-height: 360px;
}
@@ -33,8 +33,10 @@
// 이미지 모드
.imageMode {
width: 100%;
height: 100%;
// width: 100%;
// height: 100%;
max-width: 595px;
max-height: 398px;
display: flex;
flex-direction: column;
align-items: center;
@@ -83,7 +85,10 @@
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}
.imageCount1 .benefitImage,
.imageCount1 .benefitImage {
height: 95%;
width: 100%;
}
.imageCount2 .benefitImage,
.imageCount3 .benefitImage {
height: 95%;