diff --git a/com.twin.app.shoptime/assets/images/benefits/image-benefits.png b/com.twin.app.shoptime/assets/images/benefits/image-benefits.png new file mode 100644 index 00000000..2de815e4 Binary files /dev/null and b/com.twin.app.shoptime/assets/images/benefits/image-benefits.png differ diff --git a/com.twin.app.shoptime/src/App/App.js b/com.twin.app.shoptime/src/App/App.js index 0399bdaa..4712854d 100644 --- a/com.twin.app.shoptime/src/App/App.js +++ b/com.twin.app.shoptime/src/App/App.js @@ -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]); // 약관 동의 및 선택 약관 팝업 처리 diff --git a/com.twin.app.shoptime/src/actions/myPageActions.js b/com.twin.app.shoptime/src/actions/myPageActions.js index 8fc194c6..4cea3abf 100644 --- a/com.twin.app.shoptime/src/actions/myPageActions.js +++ b/com.twin.app.shoptime/src/actions/myPageActions.js @@ -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, diff --git a/com.twin.app.shoptime/src/reducers/commonReducer.js b/com.twin.app.shoptime/src/reducers/commonReducer.js index d441f68f..99067138 100644 --- a/com.twin.app.shoptime/src/reducers/commonReducer.js +++ b/com.twin.app.shoptime/src/reducers/commonReducer.js @@ -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; diff --git a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBanner.jsx b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBanner.jsx index f538f52a..a444b789 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBanner.jsx +++ b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBanner.jsx @@ -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); diff --git a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/TermsOfService/OptionalTermsInfo.jsx b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/TermsOfService/OptionalTermsInfo.jsx index 8d16817f..2df14baa 100644 --- a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/TermsOfService/OptionalTermsInfo.jsx +++ b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/TermsOfService/OptionalTermsInfo.jsx @@ -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') diff --git a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/TermsOfService/OptionalTermsInfo.module.less b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/TermsOfService/OptionalTermsInfo.module.less index 887b549c..efb78ee7 100644 --- a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/TermsOfService/OptionalTermsInfo.module.less +++ b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/TermsOfService/OptionalTermsInfo.module.less @@ -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%;