[워닝제거] 큰범위 내에서 사용하지않는것, 공백 부분만 처리

- optionalConfirm, optionalTermsConfirm, optionalTermsConfirmBottom 3파일 우선처리.
This commit is contained in:
junghoon86.park
2025-12-12 11:01:33 +09:00
parent b3b1151a1d
commit ccc91ec662
3 changed files with 67 additions and 43 deletions

View File

@@ -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}
/> />
); );
}; };

View File

@@ -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}

View File

@@ -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}