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