[워닝제거] 큰범위 내에서 사용하지않는것, 공백 부분만 처리
- optionalConfirm, optionalTermsConfirm, optionalTermsConfirmBottom 3파일 우선처리.
This commit is contained in:
@@ -1,5 +1,7 @@
|
||||
import React from 'react';
|
||||
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import TNewPopUp from '../TPopUp/TNewPopUp'; // TNewPopUp 컴포넌트의 정확한 경로를 확인해주세요.
|
||||
import css from './OptionalConfirm.module.less';
|
||||
|
||||
@@ -16,7 +18,7 @@ const OptionalConfirm = ({
|
||||
onOptionalTermsClick, // 약관 자세히 보기 버튼 클릭 핸들러
|
||||
onOptionalAgreeClick, // 동의 버튼 클릭 핸들러
|
||||
onOptionalDeclineClick, // 거절 또는 다음에 하기 버튼 클릭 핸들러
|
||||
customPosition,
|
||||
customPosition,
|
||||
position,
|
||||
}) => {
|
||||
return (
|
||||
@@ -31,7 +33,7 @@ const OptionalConfirm = ({
|
||||
onOptionalAgreeClick={onOptionalAgreeClick}
|
||||
onOptionalDeclineClick={onOptionalDeclineClick}
|
||||
customPosition={customPosition}
|
||||
position={position}
|
||||
position={position}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,14 +1,26 @@
|
||||
// src/components/Optional/OptionalTermsConfirm.jsx
|
||||
|
||||
import React, { useEffect, useCallback, useState } from 'react';
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
import TPopUp from '../TPopUp/TPopUp';
|
||||
import TButton from '../TButton/TButton';
|
||||
import TCheckBoxSquare from '../TCheckBox/TCheckBoxSquare';
|
||||
import TButtonScroller from '../TButtonScroller/TButtonScroller';
|
||||
import { $L, scaleH, scaleW } from '../../utils/helperMethods';
|
||||
import React, {
|
||||
useCallback,
|
||||
useState,
|
||||
} from 'react';
|
||||
|
||||
import {
|
||||
useDispatch,
|
||||
useSelector,
|
||||
} from 'react-redux';
|
||||
|
||||
import { setHidePopup } from '../../actions/commonActions';
|
||||
import { setMyPageTermsAgree } from '../../actions/myPageActions';
|
||||
import {
|
||||
$L,
|
||||
scaleH,
|
||||
scaleW,
|
||||
} from '../../utils/helperMethods';
|
||||
import TButton from '../TButton/TButton';
|
||||
import TButtonScroller from '../TButtonScroller/TButtonScroller';
|
||||
import TCheckBoxSquare from '../TCheckBox/TCheckBoxSquare';
|
||||
import TPopUp from '../TPopUp/TPopUp';
|
||||
import css from './OptionalTermsConfirm.module.less';
|
||||
|
||||
const OptionalTermsConfirm = ({ open }) => {
|
||||
@@ -17,9 +29,8 @@ const OptionalTermsConfirm = ({ open }) => {
|
||||
const [isChecked, setIsChecked] = useState(false);
|
||||
const [isTermsPopupVisible, setIsTermsPopupVisible] = useState(false);
|
||||
const [isWarningPopupVisible, setIsWarningPopupVisible] = useState(false);
|
||||
|
||||
|
||||
const optionalTermsData = useSelector((state) =>
|
||||
const optionalTermsData = useSelector((state) =>
|
||||
state.home.termsData?.data?.terms.find(term => term.trmsTpCd === "MST00405")
|
||||
);
|
||||
|
||||
@@ -46,7 +57,7 @@ const OptionalTermsConfirm = ({ open }) => {
|
||||
if (isChecked) {
|
||||
// 약관 동의할 항목들 (string array)
|
||||
const termsList = ["TID0000222", "TID0000223", "TID0000232"];
|
||||
|
||||
|
||||
// 동의하지 않을 항목들 (빈 배열)
|
||||
const notTermsList = [];
|
||||
|
||||
@@ -67,15 +78,15 @@ const OptionalTermsConfirm = ({ open }) => {
|
||||
setIsWarningPopupVisible(true);
|
||||
}
|
||||
}, [isChecked, dispatch]);
|
||||
|
||||
|
||||
const handleCloseWarningPopup = useCallback(() => {
|
||||
setIsWarningPopupVisible(false);
|
||||
}, []);
|
||||
|
||||
const handleDontAskAgain = () => {
|
||||
const handleDontAskAgain = useCallback(() => {
|
||||
console.log("Don't Ask Again 처리 필요");
|
||||
dispatch(setHidePopup());
|
||||
};
|
||||
},[dispatch]);
|
||||
|
||||
if (isTermsPopupVisible) {
|
||||
return (
|
||||
@@ -144,7 +155,7 @@ const OptionalTermsConfirm = ({ open }) => {
|
||||
<div className={css.mainContent}>
|
||||
<div className={css.checkboxSection}>
|
||||
<div className={css.checkboxArea}>
|
||||
<TCheckBoxSquare
|
||||
<TCheckBoxSquare
|
||||
selected={isChecked}
|
||||
onToggle={handleCheckboxToggle}
|
||||
spotlightId="optional-checkbox"
|
||||
@@ -157,34 +168,34 @@ const OptionalTermsConfirm = ({ open }) => {
|
||||
type="terms"
|
||||
ariaLabel={$L("View Optional Terms")}
|
||||
>
|
||||
<div className={css.termTitle}>Optional Terms</div>
|
||||
<div className={css.termTitle}>Optional Terms</div>
|
||||
</TButton>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div className={css.descriptionSection}>
|
||||
<div className={css.description}>
|
||||
Get recommendations, special offers, and ads tailored just for you.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div className={css.buttonSection}>
|
||||
<div className={css.buttonGroup}>
|
||||
<TButton
|
||||
<TButton
|
||||
onClick={handleAgree}
|
||||
spotlightId="agree-button"
|
||||
className={css.agreeButton}
|
||||
>
|
||||
{$L('Agree')}
|
||||
</TButton>
|
||||
<TButton
|
||||
<TButton
|
||||
onClick={handleMainPopupClose}
|
||||
spotlightId="not-now-button"
|
||||
className={css.notNowButton}
|
||||
>
|
||||
{$L('Not Now')}
|
||||
</TButton>
|
||||
<TButton
|
||||
<TButton
|
||||
onClick={handleDontAskAgain}
|
||||
spotlightId="dont-ask-button"
|
||||
className={css.dontAskButton}
|
||||
|
||||
@@ -1,17 +1,28 @@
|
||||
// src/components/Optional/OptionalTermsConfirm.jsx
|
||||
|
||||
import React, { useEffect, useCallback, useState } from 'react';
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
import TNewPopUp from '../TPopUp/TNewPopUp';
|
||||
import TButton from '../TButton/TButton';
|
||||
import TCheckBoxSquare from '../TCheckBox/TCheckBoxSquare';
|
||||
import TButtonScroller from '../TButtonScroller/TButtonScroller';
|
||||
import { $L, scaleH, scaleW } from '../../utils/helperMethods';
|
||||
import React, {
|
||||
useCallback,
|
||||
useEffect,
|
||||
useState,
|
||||
} from 'react';
|
||||
|
||||
import {
|
||||
useDispatch,
|
||||
useSelector,
|
||||
} from 'react-redux';
|
||||
|
||||
import Spotlight from '@enact/spotlight';
|
||||
|
||||
import { setHidePopup } from '../../actions/commonActions';
|
||||
import { setMyPageTermsAgree } from '../../actions/myPageActions';
|
||||
import {
|
||||
$L,
|
||||
scaleH,
|
||||
scaleW,
|
||||
} from '../../utils/helperMethods';
|
||||
import TButtonScroller from '../TButtonScroller/TButtonScroller';
|
||||
import TNewPopUp from '../TPopUp/TNewPopUp';
|
||||
import css from './OptionalTermsConfirmBottom.module.less';
|
||||
import cssPopup from '../TPopUp/TNewPopUp.module.less';
|
||||
import Spotlight from "@enact/spotlight";
|
||||
|
||||
const OptionalTermsConfirm = ({ open }) => {
|
||||
const dispatch = useDispatch();
|
||||
@@ -19,9 +30,9 @@ const OptionalTermsConfirm = ({ open }) => {
|
||||
const [isChecked, setIsChecked] = useState(false);
|
||||
const [isTermsPopupVisible, setIsTermsPopupVisible] = useState(false);
|
||||
const [isWarningPopupVisible, setIsWarningPopupVisible] = useState(false);
|
||||
|
||||
|
||||
const optionalTermsData = useSelector((state) =>
|
||||
|
||||
const optionalTermsData = useSelector((state) =>
|
||||
state.home.termsData?.data?.terms.find(term => term.trmsTpCd === "MST00405")
|
||||
);
|
||||
|
||||
@@ -37,13 +48,13 @@ const OptionalTermsConfirm = ({ open }) => {
|
||||
}
|
||||
}, [open, isTermsPopupVisible, isWarningPopupVisible]);
|
||||
|
||||
const handleMainPopupClose = useCallback(() => {
|
||||
dispatch(setHidePopup());
|
||||
}, [dispatch]);
|
||||
// const handleMainPopupClose = useCallback(() => {
|
||||
// dispatch(setHidePopup());
|
||||
// }, [dispatch]);
|
||||
|
||||
const handleCheckboxToggle = useCallback(({ selected }) => {
|
||||
setIsChecked(selected);
|
||||
}, []);
|
||||
// const handleCheckboxToggle = useCallback(({ selected }) => {
|
||||
// setIsChecked(selected);
|
||||
// }, []);
|
||||
|
||||
const handleViewTermsClick = useCallback(() => {
|
||||
setIsTermsPopupVisible(true);
|
||||
@@ -66,20 +77,20 @@ const OptionalTermsConfirm = ({ open }) => {
|
||||
const handleAgreeTest = useCallback(() => {
|
||||
console.log("handleAgreeTest");
|
||||
Spotlight.pause();
|
||||
setIsTermsPopupVisible(false);
|
||||
setIsTermsPopupVisible(false);
|
||||
// 상태 업데이트 후 DOM이 완전히 렌더링될 때까지 기다린 후 포커스
|
||||
setTimeout(() => {
|
||||
Spotlight.resume();
|
||||
Spotlight.focus("optional-terms-confirm-popup");
|
||||
}, 500); // 50ms에서 100ms로 증가
|
||||
|
||||
|
||||
}, []);
|
||||
|
||||
const handleAgree = useCallback(() => {
|
||||
if (isChecked) {
|
||||
// 약관 동의할 항목들 (string array)
|
||||
const termsList = ["TID0000222", "TID0000223", "TID0000232"];
|
||||
|
||||
|
||||
// 동의하지 않을 항목들 (빈 배열)
|
||||
const notTermsList = [];
|
||||
|
||||
@@ -163,7 +174,7 @@ const OptionalTermsConfirm = ({ open }) => {
|
||||
return (
|
||||
<TNewPopUp
|
||||
kind="optionalConfirm"
|
||||
open={open}
|
||||
open={open}
|
||||
spotlightId="optional-terms-confirm-popup"
|
||||
spotlightRestrict="self-only"
|
||||
className={css.optionalConfirmPopup}
|
||||
|
||||
Reference in New Issue
Block a user