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

View File

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

View File

@@ -238,6 +238,13 @@ export const commonReducer = (state = initialState, action) => {
termsLoading: false, 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: { // case types.GET_TERMS_AGREE_YN: {
// const { privacyTerms, serviceTerms, purchaseTerms, paymentTerms,optionalTerms } = // const { privacyTerms, serviceTerms, purchaseTerms, paymentTerms,optionalTerms } =
// action.payload; // action.payload;

View File

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

View File

@@ -6,10 +6,7 @@ import PropTypes from 'prop-types';
import $L from '@enact/i18n/$L'; import $L from '@enact/i18n/$L';
import css from './OptionalTermsInfo.module.less'; import css from './OptionalTermsInfo.module.less';
import benefitImage from '/assets/images/benefits/image-benefits.png';
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';
/** /**
* OptionalTermsInfo 컴포넌트 * OptionalTermsInfo 컴포넌트
@@ -54,9 +51,7 @@ const OptionalTermsInfo = kind({
defaultProps: { defaultProps: {
displayMode: 'text', displayMode: 'text',
imageSources: [ imageSources: [
benefitImage1, benefitImage,
benefitImage2,
benefitImage3
], ],
imageTitle: $L('Agree and Enjoy Special Benefits'), 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') 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 // src/views/MyPagePanel/MyPageSub/TermsOfService/OptionalTermsInfo.module.less
.termsInfo { .termsInfo {
width: 100%; // width: 100%;
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 20px; // padding: 20px;
box-sizing: border-box; box-sizing: border-box;
min-height: 360px; min-height: 360px;
} }
@@ -33,8 +33,10 @@
// 이미지 모드 // 이미지 모드
.imageMode { .imageMode {
width: 100%; // width: 100%;
height: 100%; // height: 100%;
max-width: 595px;
max-height: 398px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
@@ -83,7 +85,10 @@
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
} }
.imageCount1 .benefitImage, .imageCount1 .benefitImage {
height: 95%;
width: 100%;
}
.imageCount2 .benefitImage, .imageCount2 .benefitImage,
.imageCount3 .benefitImage { .imageCount3 .benefitImage {
height: 95%; height: 95%;