optrader/shoptime
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[20250728] IntroPanel.new.jsx prettier 설정

Browse Source
This commit is contained in:
djaco
2025-07-28 15:05:36 +09:00
parent 61ddd08e8c
commit 10263b7f65
2 changed files with 152 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files

200
com.twin.app.shoptime/src/views/IntroPanel/IntroPanel.new.jsx
View File

@@ -62,16 +62,22 @@ const RETRY_DELAY_MS = 1500; // 1.5 seconds
// 조건부 IntroPanel 컴포넌트 (선택약관 존재 여부에 따라 다른 컴포넌트 렌더링) // 조건부 IntroPanel 컴포넌트 (선택약관 존재 여부에 따라 다른 컴포넌트 렌더링)
export default function IntroPanel(props) { export default function IntroPanel(props) {
const optionalTermsAvailable = useSelector((state) => state.home.optionalTermsAvailable); const optionalTermsAvailable = useSelector(
(state) => state.home.optionalTermsAvailable,
);
// 선택약관이 없으면 기존 IntroPanel.jsx 사용 // 선택약관이 없으면 기존 IntroPanel.jsx 사용
if (!optionalTermsAvailable) { if (!optionalTermsAvailable) {
console.log('[IntroPanel.new] optionalTermsAvailable = false, 기존 IntroPanel 사용'); console.log(
"[IntroPanel.new] optionalTermsAvailable = false, 기존 IntroPanel 사용",
);
return <BasicIntroPanel {...props} />; return <BasicIntroPanel {...props} />;
} }
// 선택약관이 있으면 고급 IntroPanel 사용 // 선택약관이 있으면 고급 IntroPanel 사용
console.log('[IntroPanel.new] optionalTermsAvailable = true, 고급 IntroPanel 사용'); console.log(
"[IntroPanel.new] optionalTermsAvailable = true, 고급 IntroPanel 사용",
);
return <IntroPanelWithOptional {...props} />; return <IntroPanelWithOptional {...props} />;
} }
@@ -96,7 +102,9 @@ function IntroPanelWithOptional({
); );
// const eventInfos = useSelector((state) => state.event.eventData); // const eventInfos = useSelector((state) => state.event.eventData);
const regDeviceData = useSelector((state) => state.device.regDeviceData); const regDeviceData = useSelector((state) => state.device.regDeviceData);
const deviceRegistered = useSelector((state) => state.common.deviceRegistered); const deviceRegistered = useSelector(
(state) => state.common.deviceRegistered,
);
// const regDeviceInfoData = useSelector( // const regDeviceInfoData = useSelector(
// (state) => state.device.regDeviceInfoData // (state) => state.device.regDeviceInfoData
// ); // );
@@ -128,7 +136,7 @@ function IntroPanelWithOptional({
// Chromium68 호환성을 위해 Optional Chaining 제거 // Chromium68 호환성을 위해 Optional Chaining 제거
if (termsData && termsData.data && termsData.data.terms) { if (termsData && termsData.data && termsData.data.terms) {
return termsData.data.terms.filter( return termsData.data.terms.filter(
(item) => item.trmsTpCd === "MST00401" || item.trmsTpCd === "MST00402" (item) => item.trmsTpCd === "MST00401" || item.trmsTpCd === "MST00402",
); );
} }
return []; return [];
@@ -138,7 +146,7 @@ function IntroPanelWithOptional({
// Chromium68 호환성을 위해 Optional Chaining 제거 // Chromium68 호환성을 위해 Optional Chaining 제거
if (termsData && termsData.data && termsData.data.terms) { if (termsData && termsData.data && termsData.data.terms) {
return termsData.data.terms.filter( return termsData.data.terms.filter(
(item) => item.trmsTpCd === "MST00405" || item.trmsTpCd === "MST00406" (item) => item.trmsTpCd === "MST00405" || item.trmsTpCd === "MST00406",
); );
} }
return []; return [];
@@ -146,12 +154,16 @@ function IntroPanelWithOptional({
const webOSVersion = useSelector((state) => { const webOSVersion = useSelector((state) => {
// Chromium68 호환성을 위해 Optional Chaining 제거 // Chromium68 호환성을 위해 Optional Chaining 제거
if (state.common && state.common.appStatus && state.common.appStatus.webOSVersion) { if (
state.common &&
state.common.appStatus &&
state.common.appStatus.webOSVersion
) {
return state.common.appStatus.webOSVersion; return state.common.appStatus.webOSVersion;
} }
return null; return null;
}); });
// const webOSVersion = 4.5; // const webOSVersion = 4.5;
// WebOS 버전별 UI 표시 모드 결정 // WebOS 버전별 UI 표시 모드 결정
// 이미지 표시: 4.0, 5.0, 23, 24 // 이미지 표시: 4.0, 5.0, 23, 24
@@ -166,27 +178,26 @@ function IntroPanelWithOptional({
// 24 : 9.0.0~ // 24 : 9.0.0~
// 25 : 10.0.0~ // 25 : 10.0.0~
const shouldShowBenefitsView = useMemo(() => { const shouldShowBenefitsView = useMemo(() => {
// if (!webOSVersion) return false; // if (!webOSVersion) return false;
// webOSVersion 이 없거나 빈 문자열인 경우 이미지 보기 처리 // webOSVersion 이 없거나 빈 문자열인 경우 이미지 보기 처리
if (!webOSVersion || webOSVersion === "") { if (!webOSVersion || webOSVersion === "") {
return false; return false;
} }
const versionNum = Number.parseFloat(String(webOSVersion)); // 기존 로직 유지 const versionNum = Number.parseFloat(String(webOSVersion)); // 기존 로직 유지
const versionStr = String(webOSVersion); const versionStr = String(webOSVersion);
// 버전 문자열을 배열로 변환해서 비교 // 버전 문자열을 배열로 변환해서 비교
const parseVersionArray = (version) => { const parseVersionArray = (version) => {
return version.split('.').map(Number); return version.split(".").map(Number);
}; };
const currentVersionArray = parseVersionArray(versionStr); const currentVersionArray = parseVersionArray(versionStr);
// 버전 구간별 약관 버전 매핑 // 버전 구간별 약관 버전 매핑
let termsVersion = null; let termsVersion = null;
if (currentVersionArray[0] >= 10) { if (currentVersionArray[0] >= 10) {
termsVersion = 25; termsVersion = 25;
} else if (currentVersionArray[0] >= 9) { } else if (currentVersionArray[0] >= 9) {
@@ -203,18 +214,18 @@ function IntroPanelWithOptional({
// 4.x 버전은 세밀한 구분 필요 // 4.x 버전은 세밀한 구분 필요
const minor = currentVersionArray[1] || 0; const minor = currentVersionArray[1] || 0;
const patch = currentVersionArray[2] || 0; const patch = currentVersionArray[2] || 0;
if (minor >= 5) { if (minor >= 5) {
termsVersion = 4.5; // 4.5.0 이상 termsVersion = 4.5; // 4.5.0 이상
} else { } else {
termsVersion = 4.0; // 4.0.0 ~ 4.4.9 termsVersion = 4.0; // 4.0.0 ~ 4.4.9
} }
} }
const textTermsVersions = [4.5, 6.0, 22]; const textTermsVersions = [4.5, 6.0, 22];
// const imageTermsVersions = [4.0, 5.0, 23, 24]; // const imageTermsVersions = [4.0, 5.0, 23, 24];
const shouldShowText = textTermsVersions.includes(termsVersion); const shouldShowText = textTermsVersions.includes(termsVersion);
if (process.env.NODE_ENV === "development") { if (process.env.NODE_ENV === "development") {
console.log("🔍 WebOS 버전별 UI 모드:"); console.log("🔍 WebOS 버전별 UI 모드:");
console.log(" - webOSVersion:", webOSVersion); console.log(" - webOSVersion:", webOSVersion);
@@ -223,7 +234,7 @@ function IntroPanelWithOptional({
console.log(" - 매핑된 약관 버전:", termsVersion); console.log(" - 매핑된 약관 버전:", termsVersion);
console.log(" - shouldShowText (텍스트 모드):", shouldShowText); console.log(" - shouldShowText (텍스트 모드):", shouldShowText);
} }
return shouldShowText; return shouldShowText;
}, [webOSVersion]); }, [webOSVersion]);
@@ -300,13 +311,13 @@ function IntroPanelWithOptional({
// // 이전 상태가 true이고 현재 상태가 false인 경우 (체크 해제) // // 이전 상태가 true이고 현재 상태가 false인 경우 (체크 해제)
// if ((prevTermsChecked && !termsChecked) || (prevPrivacyChecked && !privacyChecked)) { // if ((prevTermsChecked && !termsChecked) || (prevPrivacyChecked && !privacyChecked)) {
// setRequiredAgreePopup(true); // setRequiredAgreePopup(true);
// //
// // 3초 후 자동 닫기 // // 3초 후 자동 닫기
// popupTimeoutRef.current = setTimeout(() => { // popupTimeoutRef.current = setTimeout(() => {
// setRequiredAgreePopup(false); // setRequiredAgreePopup(false);
// }, 3000); // }, 3000);
// } // }
// //
// // 현재 상태를 이전 상태로 업데이트 // // 현재 상태를 이전 상태로 업데이트
// setPrevTermsChecked(termsChecked); // setPrevTermsChecked(termsChecked);
// setPrevPrivacyChecked(privacyChecked); // setPrevPrivacyChecked(privacyChecked);
@@ -407,7 +418,9 @@ function IntroPanelWithOptional({
// [추가] 실제 처리 로직 분리 // [추가] 실제 처리 로직 분리
const executeAgree = useCallback( const executeAgree = useCallback(
(retryCount = 0) => { (retryCount = 0) => {
console.log(`[IntroPanel] executeAgree 실행 시작 (시도: ${retryCount + 1})`); console.log(
`[IntroPanel] executeAgree 실행 시작 (시도: ${retryCount + 1})`,
);
// Redux에서 가져온 termsIdMap을 사용하여 동적으로 약관 ID 매핑 // Redux에서 가져온 termsIdMap을 사용하여 동적으로 약관 ID 매핑
const agreeTerms = []; const agreeTerms = [];
@@ -435,22 +448,26 @@ function IntroPanelWithOptional({
// ================== SUCCESS ================== // ================== SUCCESS ==================
if (newRegDeviceData && newRegDeviceData.retCode === 0) { if (newRegDeviceData && newRegDeviceData.retCode === 0) {
dispatch(setDeviceRegistered(true)); dispatch(setDeviceRegistered(true));
// ✅ 선택약관 상태를 통합 액션으로 업데이트 (TV 환경 최적화) // ✅ 선택약관 상태를 통합 액션으로 업데이트 (TV 환경 최적화)
if (optionalChecked) { if (optionalChecked) {
// 선택약관에 동의한 경우 // 선택약관에 동의한 경우
console.log("[IntroPanel] 선택약관 동의됨 - 통합 Redux 상태 업데이트"); console.log(
"[IntroPanel] 선택약관 동의됨 - 통합 Redux 상태 업데이트",
);
dispatch(updateOptionalTermsAgreement(true)); dispatch(updateOptionalTermsAgreement(true));
} else { } else {
// 선택약관에 동의하지 않은 경우 - HomeBanner에서 팝업이 나올 수 있도록 상태를 초기화 // 선택약관에 동의하지 않은 경우 - HomeBanner에서 팝업이 나올 수 있도록 상태를 초기화
console.log("[IntroPanel] 선택약관 미동의 - HomeBanner 팝업 허용을 위해 상태 초기화"); console.log(
"[IntroPanel] 선택약관 미동의 - HomeBanner 팝업 허용을 위해 상태 초기화",
);
dispatch(updateOptionalTermsAgreement(false)); dispatch(updateOptionalTermsAgreement(false));
setTimeout(() => { setTimeout(() => {
console.log("[IntroPanel] 선택약관 세션 리셋 실행"); console.log("[IntroPanel] 선택약관 세션 리셋 실행");
dispatch(resetOptionalTermsSession()); dispatch(resetOptionalTermsSession());
}, 1000); }, 1000);
} }
dispatch( dispatch(
getWelcomeEventInfo((eventInfos) => { getWelcomeEventInfo((eventInfos) => {
if ( if (
@@ -469,7 +486,7 @@ function IntroPanelWithOptional({
} }
dispatch( dispatch(
sendLogTerms({ logTpNo: Config.LOG_TP_NO.TERMS.AGREE }) sendLogTerms({ logTpNo: Config.LOG_TP_NO.TERMS.AGREE }),
); );
if (displayWelcomeEventPanel) { if (displayWelcomeEventPanel) {
@@ -477,12 +494,12 @@ function IntroPanelWithOptional({
pushPanel({ pushPanel({
name: panel_names.WELCOME_EVENT_PANEL, name: panel_names.WELCOME_EVENT_PANEL,
panelInfo: { eventInfos: eventInfos.data }, panelInfo: { eventInfos: eventInfos.data },
}) }),
); );
} }
} }
setIsProcessing(false); setIsProcessing(false);
}) }),
); );
} else { } else {
// retCode가 0이 아닌 경우도 실패로 간주하고 재시도 // retCode가 0이 아닌 경우도 실패로 간주하고 재시도
@@ -495,10 +512,10 @@ function IntroPanelWithOptional({
setShowPopup(Config.ACTIVE_POPUP.alertPopup, { setShowPopup(Config.ACTIVE_POPUP.alertPopup, {
title: $L("Error"), title: $L("Error"),
text: $L( text: $L(
"A temporary network error occurred. Please try again in a moment." "A temporary network error occurred. Please try again in a moment.",
), ),
button1Text: $L("OK"), button1Text: $L("OK"),
}) }),
); );
setIsProcessing(false); setIsProcessing(false);
} }
@@ -506,7 +523,9 @@ function IntroPanelWithOptional({
}, },
() => { () => {
// ================== FAIL ================== // ================== FAIL ==================
console.error(`[IntroPanel] registerDevice 실패 (시도: ${retryCount + 1})`); console.error(
`[IntroPanel] registerDevice 실패 (시도: ${retryCount + 1})`,
);
if (retryCount < MAX_RETRY_ATTEMPTS - 1) { if (retryCount < MAX_RETRY_ATTEMPTS - 1) {
setTimeout(() => { setTimeout(() => {
executeAgree(retryCount + 1); executeAgree(retryCount + 1);
@@ -517,15 +536,15 @@ function IntroPanelWithOptional({
setShowPopup(Config.ACTIVE_POPUP.alertPopup, { setShowPopup(Config.ACTIVE_POPUP.alertPopup, {
title: $L("Error"), title: $L("Error"),
text: $L( text: $L(
"A temporary network error occurred. Please try again in a moment." "A temporary network error occurred. Please try again in a moment.",
), ),
button1Text: $L("OK"), button1Text: $L("OK"),
}) }),
); );
setIsProcessing(false); setIsProcessing(false);
} }
} },
) ),
); );
}, },
[ [
@@ -535,7 +554,7 @@ function IntroPanelWithOptional({
dispatch, dispatch,
webOSVersion, webOSVersion,
termsIdMap, termsIdMap,
] ],
); );
// [추가] 재시도 메커니즘 시작 // [추가] 재시도 메커니즘 시작
@@ -582,15 +601,15 @@ function IntroPanelWithOptional({
// button1Text: $L("OK"), // button1Text: $L("OK"),
// }), // }),
// ); // );
// 새로운 requiredAgreePopup 사용 // 새로운 requiredAgreePopup 사용
setRequiredAgreePopup(true); setRequiredAgreePopup(true);
// 3초 후 자동 닫기 // 3초 후 자동 닫기
popupTimeoutRef.current = setTimeout(() => { popupTimeoutRef.current = setTimeout(() => {
setRequiredAgreePopup(false); setRequiredAgreePopup(false);
}, 3000); }, 3000);
return; return;
} }
@@ -796,12 +815,14 @@ function IntroPanelWithOptional({
// privacyChecked, // privacyChecked,
// shouldShowBenefitsView, // shouldShowBenefitsView,
// ); // 1단계: 제거 // ); // 1단계: 제거
// 1단계: WebOS 버전 기반 고정 콘텐츠로 교체 // 1단계: WebOS 버전 기반 고정 콘텐츠로 교체
const rightPanelContent = useMemo(() => { const rightPanelContent = useMemo(() => {
return shouldShowBenefitsView ? ( return shouldShowBenefitsView ? (
<div className={css.optionalDescription}> <div className={css.optionalDescription}>
{$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')} {$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',
)}
</div> </div>
) : ( ) : (
<OptionalTermsInfo <OptionalTermsInfo
@@ -875,20 +896,20 @@ function IntroPanelWithOptional({
<div className={css.termsLeftPanel}> <div className={css.termsLeftPanel}>
{/* Terms & Conditions */} {/* Terms & Conditions */}
<div className={css.termsItem}> <div className={css.termsItem}>
<TCheckBoxSquare <TCheckBoxSquare
className={css.customeCheckbox} className={css.customeCheckbox}
selected={termsChecked} selected={termsChecked}
onToggle={handleTermsToggle} onToggle={handleTermsToggle}
spotlightId="termsCheckbox" spotlightId="termsCheckbox"
ariaLabel={$L("Terms & Conditions checkbox")} ariaLabel={$L("Terms & Conditions checkbox")}
/> />
<TButton <TButton
className={css.termsButton} className={css.termsButton}
onClick={handleTermsClickMST00402} onClick={handleTermsClickMST00402}
spotlightId="termsButton" spotlightId="termsButton"
type={TYPES.terms} type={TYPES.terms}
ariaLabel={$L("View Terms & Conditions")} ariaLabel={$L("View Terms & Conditions")}
> >
<span className={`${css.termsText} ${css.required}`}> <span className={`${css.termsText} ${css.required}`}>
{$L("Terms & Conditions")} {$L("Terms & Conditions")}
</span> </span>
@@ -897,20 +918,20 @@ function IntroPanelWithOptional({
{/* Privacy Policy */} {/* Privacy Policy */}
<div className={css.termsItem}> <div className={css.termsItem}>
<TCheckBoxSquare <TCheckBoxSquare
className={css.customeCheckbox} className={css.customeCheckbox}
selected={privacyChecked} selected={privacyChecked}
onToggle={handlePrivacyToggle} onToggle={handlePrivacyToggle}
spotlightId="privacyCheckbox" spotlightId="privacyCheckbox"
ariaLabel={$L("Privacy Policy checkbox")} ariaLabel={$L("Privacy Policy checkbox")}
/> />
<TButton <TButton
className={css.termsButton} className={css.termsButton}
onClick={handleTermsClickMST00401} onClick={handleTermsClickMST00401}
spotlightId="privacyButton" spotlightId="privacyButton"
type={TYPES.terms} type={TYPES.terms}
ariaLabel={$L("View Privacy Policy")} ariaLabel={$L("View Privacy Policy")}
> >
<span className={`${css.termsText} ${css.required}`}> <span className={`${css.termsText} ${css.required}`}>
{$L("Privacy Policy")} {$L("Privacy Policy")}
</span> </span>
@@ -919,21 +940,21 @@ function IntroPanelWithOptional({
{/* Optional Terms */} {/* Optional Terms */}
<div className={css.termsItem}> <div className={css.termsItem}>
<TCheckBoxSquare <TCheckBoxSquare
className={css.customeCheckbox} className={css.customeCheckbox}
selected={optionalChecked} selected={optionalChecked}
onToggle={handleOptionalToggle} onToggle={handleOptionalToggle}
spotlightId="optionalCheckbox" spotlightId="optionalCheckbox"
ariaLabel={$L("Optional Terms checkbox")} ariaLabel={$L("Optional Terms checkbox")}
/> />
<TButton <TButton
className={css.termsButton} className={css.termsButton}
onClick={handleOptionalTermsClickMST00405} onClick={handleOptionalTermsClickMST00405}
spotlightId="optionalButton" spotlightId="optionalButton"
type={TYPES.terms} type={TYPES.terms}
ariaLabel={$L("View Optional Terms")} ariaLabel={$L("View Optional Terms")}
style={{ marginBottom: 0 }} // 제일 아래 버튼의 경우 margin-bottom 0 style={{ marginBottom: 0 }} // 제일 아래 버튼의 경우 margin-bottom 0
> >
<span className={css.termsText}>{$L("Optional Terms")}</span> <span className={css.termsText}>{$L("Optional Terms")}</span>
</TButton> </TButton>
</div> </div>
@@ -958,7 +979,7 @@ function IntroPanelWithOptional({
<TButton <TButton
className={classNames( className={classNames(
css.agreeButton, css.agreeButton,
(!termsChecked || !privacyChecked) && css.disabled (!termsChecked || !privacyChecked) && css.disabled,
)} )}
onClick={handleAgree} onClick={handleAgree}
spotlightId="agreeButton" spotlightId="agreeButton"
@@ -1068,10 +1089,9 @@ function IntroPanelWithOptional({
hasText hasText
title={$L("")} title={$L("")}
text={$L( text={$L(
"Please check the box to accept the Terms & Conditions and Privacy Policy." "Please check the box to accept the Terms & Conditions and Privacy Policy.",
)} )}
/> />
</Region> </Region>
); );
} }

86
com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/TermsOfService/OptionalTermsInfo.jsx
View File

@@ -1,19 +1,19 @@
// src/views/MyPagePanel/MyPageSub/TermsOfService/OptionalTermsInfo.jsx // src/views/MyPagePanel/MyPageSub/TermsOfService/OptionalTermsInfo.jsx
import React, { memo } from 'react'; import React, { memo } from "react";
import kind from '@enact/core/kind'; import kind from "@enact/core/kind";
import PropTypes from 'prop-types'; import PropTypes from "prop-types";
import $L from '@enact/i18n/$L'; import $L from "@enact/i18n/$L";
import css from './OptionalTermsInfo.module.less'; import css from "./OptionalTermsInfo.module.less";
import benefitImage from '/assets/images/benefits/image-benefits.png'; import benefitImage from "/assets/images/benefits/image-benefits.png";
/** /**
* OptionalTermsInfo 컴포넌트 * OptionalTermsInfo 컴포넌트
* WebOS 버전에 따라 텍스트 또는 이미지로 선택적 약관 정보를 표시합니다. * WebOS 버전에 따라 텍스트 또는 이미지로 선택적 약관 정보를 표시합니다.
*/ */
const OptionalTermsInfo = kind({ const OptionalTermsInfo = kind({
name: 'OptionalTermsInfo', name: "OptionalTermsInfo",
propTypes: { propTypes: {
/** /**
@@ -25,7 +25,7 @@ const OptionalTermsInfo = kind({
* 표시 모드 - 텍스트 또는 이미지 * 표시 모드 - 텍스트 또는 이미지
* @type {('text'|'image')} * @type {('text'|'image')}
*/ */
displayMode: PropTypes.oneOf(['text', 'image']), displayMode: PropTypes.oneOf(["text", "image"]),
/** /**
* 이미지 모드일 때 사용할 이미지 소스들 (배열) * 이미지 모드일 때 사용할 이미지 소스들 (배열)
@@ -45,68 +45,66 @@ const OptionalTermsInfo = kind({
/** /**
* Spotlight ID * Spotlight ID
*/ */
spotlightId: PropTypes.string spotlightId: PropTypes.string,
}, },
defaultProps: { defaultProps: {
displayMode: 'text', displayMode: "text",
imageSources: [ imageSources: [benefitImage],
benefitImage, imageTitle: $L("Agree and Enjoy Special Benefits"),
], textDescription: $L(
imageTitle: $L('Agree and Enjoy Special Benefits'), "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",
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') ),
}, },
styles: { styles: {
css, css,
className: 'termsInfo' className: "termsInfo",
}, },
computed: { computed: {
className: ({ className, styler }) => styler.append(className) className: ({ className, styler }) => styler.append(className),
}, },
render: ({ render: ({
displayMode, displayMode,
imageSources, imageSources,
imageTitle, imageTitle,
textDescription, textDescription,
spotlightId, spotlightId,
...rest ...rest
}) => { }) => {
const imageCount = imageSources ? imageSources.length : 0; const imageCount = imageSources ? imageSources.length : 0;
return ( return (
<div <div {...rest} data-spotlight-id={spotlightId}>
{...rest} {displayMode === "text" ? (
data-spotlight-id={spotlightId}
>
{displayMode === 'text' ? (
// 텍스트 모드 // 텍스트 모드
<div className={css.textMode}> <div className={css.textMode}>
<p className={css.textDescription}> <p className={css.textDescription}>{textDescription}</p>
{textDescription}
</p>
</div> </div>
) : ( ) : (
// 이미지 모드 // 이미지 모드
<div className={css.imageMode}> <div className={css.imageMode}>
<div className={`${css.imageContainer} ${css[`imageCount${imageCount}`]}`}> <div
{imageSources && imageSources.map((src, index) => ( className={`${css.imageContainer} ${css[`imageCount${imageCount}`]}`}
<img >
key={index} {imageSources &&
className={css.benefitImage} imageSources.map((src, index) => (
src={src} <img
alt={$L(`Benefit image ${index + 1}`)} key={index}
/> className={css.benefitImage}
))} src={src}
alt={$L(`Benefit image ${index + 1}`)}
/>
))}
</div> </div>
</div> </div>
)} )}
</div> </div>
); );
} },
}); });
export default memo(OptionalTermsInfo); export default memo(OptionalTermsInfo);
export { OptionalTermsInfo }; export { OptionalTermsInfo };