fix: 선택약관관련 수정 250619
This commit is contained in:
djaco
@@ -1,16 +1,25 @@
|
||||
import React, { useCallback, useEffect, useMemo, useRef } from "react";
|
||||
// src/views/HomePanel/HomeBanner/HomeBanner.jsx
|
||||
|
||||
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 { setDefaultFocus } from "../../../actions/homeActions";
|
||||
import { $L, scaleH, scaleW } from '../../../utils/helperMethods';
|
||||
import { setDefaultFocus, setShowPopup } from "../../../actions/homeActions";
|
||||
import { changeAppStatus } from "../../../actions/commonActions";
|
||||
import { setMyPageTermsAgree } from '../../../actions/myPageActions';
|
||||
import { pushPanel } from "../../../actions/panelActions";
|
||||
import CustomImage from "../../../components/CustomImage/CustomImage";
|
||||
import css from "./HomeBanner.module.less";
|
||||
import Random from "./RandomUnit";
|
||||
import Rolling from "./RollingUnit";
|
||||
import TNewPopUp from "../../../components/TPopUp/TNewPopUp";
|
||||
import TButtonScroller from "../../../components/TButtonScroller/TButtonScroller";
|
||||
import OptionalConfirm from "../../../components/Optional/OptionalConfirm";
|
||||
import * as Config from "../../../utils/Config";
|
||||
|
||||
const SpottableComponent = Spottable("div");
|
||||
const Container = SpotlightContainerDecorator(
|
||||
@@ -49,6 +58,84 @@ export default function HomeBanner({
|
||||
}
|
||||
}, [handleItemFocus]);
|
||||
|
||||
const termsData = useSelector((state) => state.home.termsData);
|
||||
const optionalTermsData = useSelector((state) =>
|
||||
state.home.termsData?.data?.terms.find(term => term.trmsTpCd === "MST00405")
|
||||
);
|
||||
const termsLoading = useSelector((state) => state.common.termsLoading);
|
||||
// 선택약관 동의여부
|
||||
const introTermsAgree = useSelector((state) => state.common.introTermsAgree);
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
// 팝업표시 상태
|
||||
const [isOptionalConfirmVisible, setIsOptionalConfirmVisible] = useState(false);
|
||||
const [isOptionalTermsVisible, setIsOptionalTermsVisible] = useState(false);
|
||||
|
||||
// 선택약관 팝업 표시 여부
|
||||
const shouldShowOptionalTermsPopup = useMemo(() => {
|
||||
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]);
|
||||
|
||||
const handleOptionalAgree = useCallback(() => {
|
||||
console.log('handleAgree Click');
|
||||
|
||||
// 약관 동의할 항목들 (string array)
|
||||
const termsList = ["TID0000222", "TID0000223", "TID0000232"];
|
||||
// 동의하지 않을 항목들 (빈 배열)
|
||||
const notTermsList = [];
|
||||
console.log('OptionalTermsConfirm -약관 동의 API 호출 파라미터:', { termsList, notTermsList });
|
||||
const callback = (response) => {
|
||||
if (response.retCode === "000" || response.retCode === 0) {
|
||||
console.log('약관 동의 성공:', response);
|
||||
} else {
|
||||
console.error('약관 동의 실패:', response);
|
||||
}
|
||||
};
|
||||
|
||||
console.log('OptionalTermsConfirm - 약관 동의 API 호출 payload:', { termsList, notTermsList });
|
||||
dispatch(setMyPageTermsAgree({ termsList, notTermsList }, callback));
|
||||
|
||||
}, []);
|
||||
|
||||
const handleOptionalTermsClick = useCallback(() => {
|
||||
console.log('약관 자세히 보기 클릭');
|
||||
setIsOptionalConfirmVisible(false);
|
||||
setIsOptionalTermsVisible(true);
|
||||
// 약관 상세 팝업을 띄우는 로직 추가
|
||||
}, []);
|
||||
|
||||
const handleOptionalAgreeClick = useCallback(() => {
|
||||
handleOptionalAgree();
|
||||
setIsOptionalConfirmVisible(false);
|
||||
}, []);
|
||||
|
||||
const handleOptionalDeclineClick = useCallback(() => {
|
||||
console.log('거절/다음에 하기 버튼 클릭');
|
||||
setIsOptionalConfirmVisible(false);
|
||||
// 거절 처리 로직 추가
|
||||
}, []);
|
||||
|
||||
// 선택약관 팝업 Close
|
||||
const handleTermsPopupClosed = useCallback(() => {
|
||||
setIsOptionalTermsVisible(false);
|
||||
setIsOptionalConfirmVisible(true);
|
||||
Spotlight.focus("optional-confirm-popup");
|
||||
}, []);
|
||||
|
||||
// 선택약관 팝업 Agree
|
||||
const handleTermsPopupAgree = useCallback(() => {
|
||||
console.log("handleTermsPopupAgree");
|
||||
handleOptionalAgree();
|
||||
setIsOptionalTermsVisible(false);
|
||||
}, []);
|
||||
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
const _handleShelfFocus = useCallback(() => {
|
||||
if (handleShelfFocus) {
|
||||
handleShelfFocus();
|
||||
@@ -97,6 +184,36 @@ export default function HomeBanner({
|
||||
}
|
||||
}, [defaultFocus, dispatch, popupVisible]);
|
||||
|
||||
// 테스트용 팝업 표시
|
||||
// useEffect(() => {
|
||||
// setTimeout(() => {
|
||||
// console.log("App.js optionalTermsTest 팝업 표시");
|
||||
// setIsOptionalConfirmVisible(true);
|
||||
// // setIsOptionalTermsVisible(true);
|
||||
// }, 3000);
|
||||
// }, []);
|
||||
|
||||
// 약관 동의 및 선택 약관 팝업 처리
|
||||
useEffect(() => {
|
||||
if (termsLoading) {
|
||||
// 약관 데이터 로딩 중에는 아무것도 하지 않음
|
||||
return;
|
||||
}
|
||||
// 선택 약관 팝업을 띄워야 하는 경우
|
||||
if (shouldShowOptionalTermsPopup) {
|
||||
// 3초 후에 팝업을 띄우도록 설정
|
||||
console.log("shouldShowOptionalTermsPopup", shouldShowOptionalTermsPopup);
|
||||
console.log("App.js optionalTermsConfirm 팝업 표시");
|
||||
const timer = setTimeout(() => {
|
||||
setIsOptionalConfirmVisible(true);
|
||||
// dispatch(setShowPopup({ activePopup: "optionalTermsConfirm" }));
|
||||
}, 3000); // 3000 milliseconds = 3 seconds
|
||||
|
||||
// 컴포넌트 언마운트 시 타이머 클리어
|
||||
return () => clearTimeout(timer);
|
||||
}
|
||||
}, [shouldShowOptionalTermsPopup, termsLoading]);
|
||||
|
||||
const renderItem = useCallback(
|
||||
(index, isHorizontal) => {
|
||||
const data = bannerDataList?.[index] ?? {};
|
||||
@@ -187,12 +304,58 @@ export default function HomeBanner({
|
||||
}, [selectTemplate, renderItem]);
|
||||
|
||||
return (
|
||||
<Container
|
||||
className={css.container}
|
||||
spotlightId={spotlightId}
|
||||
data-wheel-point={true}
|
||||
>
|
||||
<div className={css.homeTemplateBox}>{renderLayout()}</div>
|
||||
</Container>
|
||||
<>
|
||||
<Container
|
||||
className={css.container}
|
||||
spotlightId={spotlightId}
|
||||
data-wheel-point={true}
|
||||
>
|
||||
<div className={css.homeTemplateBox}>{renderLayout()}</div>
|
||||
</Container>
|
||||
{/* 선택약관 동의 팝업 */}
|
||||
<OptionalConfirm
|
||||
open={isOptionalConfirmVisible}
|
||||
spotlightId="optional-confirm-popup"
|
||||
onOptionalTermsClick={handleOptionalTermsClick}
|
||||
onOptionalAgreeClick={handleOptionalAgreeClick}
|
||||
onOptionalDeclineClick={handleOptionalDeclineClick}
|
||||
customPosition={true}
|
||||
position={{
|
||||
position: 'absolute',
|
||||
top: '342px', // 가운데를 기준으로 한 좌표 (1080/2) - 198
|
||||
left: '0px',
|
||||
bottom: 'unset',
|
||||
transform: 'none',
|
||||
}}
|
||||
/>
|
||||
{/* 선택약관 자세히 보기 팝업 */}
|
||||
<TNewPopUp
|
||||
kind="introTermsPopup"
|
||||
open={isOptionalTermsVisible}
|
||||
// onClose={handleTermsPopupClosed}
|
||||
onClick={handleTermsPopupClosed}
|
||||
onIntroTermsAgreeClick={handleTermsPopupAgree}
|
||||
hasButton
|
||||
button1Text={$L("Close")}
|
||||
>
|
||||
{optionalTermsData && (
|
||||
<div className={css.termsViewerContent}>
|
||||
<div className={css.termsViewerTitle}>{$L("Optional Terms")}</div>
|
||||
<TButtonScroller
|
||||
boxHeight={scaleH(300)}
|
||||
width={scaleW(980)}
|
||||
className={css.termsDescription}
|
||||
>
|
||||
<div
|
||||
className={css.termsDesc}
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: optionalTermsData.trmsCntt,
|
||||
}}
|
||||
/>
|
||||
</TButtonScroller>
|
||||
</div>
|
||||
)}
|
||||
</TNewPopUp>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user