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

[251006] feat: HomeBanner에서 RandomUnit.new -> RandomUnit

Browse Source 
🕐 커밋 시간: 2025. 10. 06. 06:29:17

📊 변경 통계:
  • 총 파일: 1개
  • 추가: +1줄
  • 삭제: -1줄

📝 수정된 파일:
  ~ com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBanner.jsx

🔧 주요 변경 내용:
  • 코드 정리 및 최적화
This commit is contained in:
hyeon soo noh
2025-10-06 06:29:19 +09:00
parent bb74f9827a
commit d0b8a2cba9
1 changed files with 103 additions and 173 deletions
Download Patch File Download Diff File Expand all files Collapse all files

276
com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBanner.jsx
View File

@@ -1,21 +1,11 @@
// src/views/HomePanel/HomeBanner/HomeBanner.jsx
import React, {
useCallback,
useEffect,
useMemo,
useState,
} from 'react';
import React, { useCallback, useEffect, useMemo, useState } from 'react';
import {
useDispatch,
useSelector,
} from 'react-redux';
import { useDispatch, useSelector } from 'react-redux';
import Spotlight from '@enact/spotlight';
import {
SpotlightContainerDecorator,
} from '@enact/spotlight/SpotlightContainerDecorator';
import { SpotlightContainerDecorator } from '@enact/spotlight/SpotlightContainerDecorator';
import Spottable from '@enact/spotlight/Spottable';
import { types } from '../../../actions/actionTypes';
@@ -27,15 +17,9 @@ import {
setOptionalTermsUserDecision,
updateOptionalTermsAgreement,
} from '../../../actions/commonActions';
import {
fetchCurrentUserHomeTerms,
setDefaultFocus,
} from '../../../actions/homeActions';
import { fetchCurrentUserHomeTerms, setDefaultFocus } from '../../../actions/homeActions';
import { setMyPageTermsAgree } from '../../../actions/myPageActions';
import {
popPanel,
pushPanel,
} from '../../../actions/panelActions';
import { popPanel, pushPanel } from '../../../actions/panelActions';
import {
releasePlayControl,
requestPlayControl,
@@ -53,34 +37,19 @@ import css from './HomeBanner.module.less';
import PersistentVideoUnit from './PersistentVideoUnit';
import JustForSwitchBanner from './RandomBannerType/JustForYouBanner';
import Random from './RandomUnit';
import RandomUnitNew from './RandomUnit.new';
import RandomUnitNew from './RandomUnit';
import Rolling from './RollingUnit';
import SimpleVideoContainer from './SimpleVideoContainer';
const SpottableComponent = Spottable("div");
const Container = SpotlightContainerDecorator(
{ enterTo: "last-focused" },
"div"
);
const ContainerBasic = SpotlightContainerDecorator(
{ enterTo: "last-focused" },
"div"
);
const SpottableComponent = Spottable('div');
const Container = SpotlightContainerDecorator({ enterTo: 'last-focused' }, 'div');
const ContainerBasic = SpotlightContainerDecorator({ enterTo: 'last-focused' }, 'div');
export default function HomeBanner({
firstSpot,
spotlightId,
handleItemFocus,
handleShelfFocus,
}) {
export default function HomeBanner({ firstSpot, spotlightId, handleItemFocus, handleShelfFocus }) {
const dispatch = useDispatch();
const homeTopDisplayInfo = useSelector(
(state) => state.home.homeTopDisplayInfo
);
const homeTopDisplayInfo = useSelector((state) => state.home.homeTopDisplayInfo);
const bannerDataList = useSelector(
(state) => state.home.bannerData?.bannerInfos
);
const bannerDataList = useSelector((state) => state.home.bannerData?.bannerInfos);
const popupVisible = useSelector((state) => state.common.popup.popupVisible);
@@ -142,23 +111,22 @@ export default function HomeBanner({
const handleSecondBannerFocus = useCallback(() => {
const secondBannerData = bannerDataList?.[1];
if (secondBannerData) {
const randomData =
secondBannerData.bannerDetailInfos[secondBannerData.randomIndex];
const randomData = secondBannerData.bannerDetailInfos[secondBannerData.randomIndex];
const videoInfo = {
showUrl: randomData.showUrl,
patnrId: randomData.patnrId,
showId: randomData.showId,
shptmBanrTpNm: randomData.showId ? randomData.shptmBanrTpNm : "MEDIA",
shptmBanrTpNm: randomData.showId ? randomData.shptmBanrTpNm : 'MEDIA',
lgCatCd: randomData.lgCatCd,
chanId: randomData.brdcChnlId,
modal: true,
modalContainerId: "banner1",
modalContainerId: 'banner1',
modalClassName: css.videoModal,
isVerticalModal: true, // Assuming second banner is horizontal, so modal is vertical
};
// 중앙 제어 시스템에 '미리보기' 재생을 요청
dispatch(requestPlayControl("banner1_preview", videoInfo));
dispatch(requestPlayControl('banner1_preview', videoInfo));
}
if (handleItemFocus) {
@@ -168,24 +136,16 @@ export default function HomeBanner({
const handleSecondBannerBlur = useCallback(() => {
// 중앙 제어 시스템에 '미리보기' 제어권 해제를 요청
dispatch(releasePlayControl("banner1_preview"));
dispatch(releasePlayControl('banner1_preview'));
}, [dispatch]);
const termsData = useSelector((state) => state.home.termsData);
const termsIdMap = useSelector((state) => state.home.termsIdMap);
const optionalTermsAvailable = useSelector(
(state) => state.home.optionalTermsAvailable
);
const optionalTermsAvailable = useSelector((state) => state.home.optionalTermsAvailable);
const optionalTermsData = useSelector((state) => {
// Chromium68 호환성을 위해 Optional Chaining 제거
if (
state.home.termsData &&
state.home.termsData.data &&
state.home.termsData.data.terms
) {
return state.home.termsData.data.terms.find(
(term) => term.trmsTpCd === "MST00405"
);
if (state.home.termsData && state.home.termsData.data && state.home.termsData.data.terms) {
return state.home.termsData.data.terms.find((term) => term.trmsTpCd === 'MST00405');
}
return null;
});
@@ -193,26 +153,21 @@ export default function HomeBanner({
const isGnbOpened = useSelector((state) => state.common.isGnbOpened);
const currentTermsFlag = useSelector((state) => state.common.termsFlag);
// 선택약관 동의여부
const introTermsAgree = useSelector(
(state) => state.common.termsFlag.optionalTerms
);
const introTermsAgree = useSelector((state) => state.common.termsFlag.optionalTerms);
// 새로운 Redux 상태: 선택약관 팝업 플로우 관리
const optionalTermsPopupFlow = useSelector(
(state) => state.common.optionalTermsPopupFlow
);
const optionalTermsPopupFlow = useSelector((state) => state.common.optionalTermsPopupFlow);
//------------------------------------------------------------------------------
// 팝업표시 상태
const [isOptionalConfirmVisible, setIsOptionalConfirmVisible] =
useState(false);
const [isOptionalConfirmVisible, setIsOptionalConfirmVisible] = useState(false);
const [isOptionalTermsVisible, setIsOptionalTermsVisible] = useState(false);
const [optionalTermsAgreed, setOptionalTermsAgreed] = useState(false);
// 선택약관 팝업 표시 여부 ===================================================
const shouldShowOptionalTermsPopup = useMemo(() => {
console.log("[HomeBanner] Step 1: 상태 확인", {
console.log('[HomeBanner] Step 1: 상태 확인', {
termsLoading,
isGnbOpened,
optionalTermsAvailable,
@@ -221,7 +176,7 @@ export default function HomeBanner({
// 1. 기본 조건 확인
if (termsLoading || isGnbOpened || !optionalTermsAvailable) {
console.log("[HomeBanner] Early return: 기본 조건 불만족");
console.log('[HomeBanner] Early return: 기본 조건 불만족');
return false;
}
@@ -231,104 +186,95 @@ export default function HomeBanner({
optionalTermsPopupFlow.userDecision ||
optionalTermsPopupFlow.agreedInSession
) {
console.log(
"[HomeBanner] Early return: 이미 처리됨",
optionalTermsPopupFlow
);
console.log('[HomeBanner] Early return: 이미 처리됨', optionalTermsPopupFlow);
return false;
}
// 3. 서버 데이터 확인
const terms = termsData && termsData.data && termsData.data.terms;
console.log("[HomeBanner] Step 2: termsData 확인", terms);
console.log('[HomeBanner] Step 2: termsData 확인', terms);
if (!terms) {
console.log("[HomeBanner] Early return: terms가 존재하지 않음");
console.log('[HomeBanner] Early return: terms가 존재하지 않음');
return false;
}
const optionalTerm = terms.find((term) => term.trmsTpCd === "MST00405");
console.log("[HomeBanner] Step 3: optionalTerm 검색 결과", optionalTerm);
const optionalTerm = terms.find((term) => term.trmsTpCd === 'MST00405');
console.log('[HomeBanner] Step 3: optionalTerm 검색 결과', optionalTerm);
const result = optionalTerm
? optionalTerm.trmsPopFlag === "Y" && optionalTerm.trmsAgrFlag === "N"
? optionalTerm.trmsPopFlag === 'Y' && optionalTerm.trmsAgrFlag === 'N'
: false;
console.log("[HomeBanner] Step 4: 최종 결과", result);
console.log('[HomeBanner] Step 4: 최종 결과', result);
return result;
}, [
termsData,
termsLoading,
isGnbOpened,
optionalTermsAvailable,
optionalTermsPopupFlow,
]);
}, [termsData, termsLoading, isGnbOpened, optionalTermsAvailable, optionalTermsPopupFlow]);
// 선택약관 팝업 표시 여부 ===================================================
const handleOptionalAgree = useCallback(() => {
if (process.env.NODE_ENV === "development") {
console.log("[HomeBanner] handleAgree Click");
if (process.env.NODE_ENV === 'development') {
console.log('[HomeBanner] handleAgree Click');
}
if (!termsIdMap || Object.keys(termsIdMap).length === 0) {
if (process.env.NODE_ENV === "development") {
console.error("[HomeBanner] termsIdMap이 없습니다:", termsIdMap);
if (process.env.NODE_ENV === 'development') {
console.error('[HomeBanner] termsIdMap이 없습니다:', termsIdMap);
}
return;
}
const requiredTermTypes = ["MST00401", "MST00402", "MST00405"];
const requiredTermTypes = ['MST00401', 'MST00402', 'MST00405'];
const missingTerms = requiredTermTypes.filter((type) => !termsIdMap[type]);
if (missingTerms.length > 0) {
if (process.env.NODE_ENV === "development") {
console.error("[HomeBanner] 누락된 약관 타입:", missingTerms);
if (process.env.NODE_ENV === 'development') {
console.error('[HomeBanner] 누락된 약관 타입:', missingTerms);
}
return;
}
const termsList = [];
if (termsIdMap["MST00401"]) {
termsList.push(termsIdMap["MST00401"]); // 개인정보처리방침
if (termsIdMap['MST00401']) {
termsList.push(termsIdMap['MST00401']); // 개인정보처리방침
}
if (termsIdMap["MST00402"]) {
termsList.push(termsIdMap["MST00402"]); // 이용약관
if (termsIdMap['MST00402']) {
termsList.push(termsIdMap['MST00402']); // 이용약관
}
if (termsIdMap["MST00405"]) {
termsList.push(termsIdMap["MST00405"]); // 선택약관
if (termsIdMap['MST00405']) {
termsList.push(termsIdMap['MST00405']); // 선택약관
}
const notTermsList = [];
if (process.env.NODE_ENV === "development") {
console.log("[HomeBanner] 현재 termsIdMap:", termsIdMap);
console.log("[HomeBanner] 약관 동의 API 호출 파라미터:", {
if (process.env.NODE_ENV === 'development') {
console.log('[HomeBanner] 현재 termsIdMap:', termsIdMap);
console.log('[HomeBanner] 약관 동의 API 호출 파라미터:', {
termsList,
notTermsList,
});
}
const callback = (response) => {
if (response.retCode === "000" || response.retCode === 0) {
if (process.env.NODE_ENV === "development") {
console.log("[HomeBanner] 약관 동의 성공:", response);
if (response.retCode === '000' || response.retCode === 0) {
if (process.env.NODE_ENV === 'development') {
console.log('[HomeBanner] 약관 동의 성공:', response);
}
// ✅ IntroPanel과 동일한 방식으로 Redux 상태 직접 업데이트 (API 호출 없이)
dispatch(updateOptionalTermsAgreement(true));
// 로컬 상태도 업데이트 (기존 로직 유지)
setOptionalTermsAgreed(true);
console.log("###test pjh ___ 2");
console.log('###test pjh ___ 2');
} else {
if (process.env.NODE_ENV === "development") {
console.error("[HomeBanner] 약관 동의 실패:", response);
if (process.env.NODE_ENV === 'development') {
console.error('[HomeBanner] 약관 동의 실패:', response);
}
}
console.log("###test pjh ___ 1", introTermsAgree);
console.log('###test pjh ___ 1', introTermsAgree);
};
if (process.env.NODE_ENV === "development") {
console.log("[HomeBanner] 약관 동의 API 호출 payload:", {
if (process.env.NODE_ENV === 'development') {
console.log('[HomeBanner] 약관 동의 API 호출 payload:', {
termsList,
notTermsList,
});
@@ -338,7 +284,7 @@ export default function HomeBanner({
}, [dispatch, termsIdMap]);
const handleOptionalTermsClick = useCallback(() => {
console.log("[HomeBanner] 약관 자세히 보기 클릭");
console.log('[HomeBanner] 약관 자세히 보기 클릭');
setIsOptionalConfirmVisible(false);
setIsOptionalTermsVisible(true);
// 약관 상세 팝업을 띄우는 로직 추가
@@ -351,13 +297,13 @@ export default function HomeBanner({
type: types.GET_TERMS_AGREE_YN_SUCCESS,
payload: {
...currentTermsFlag,
optionalTerms: "Y",
optionalTerms: 'Y',
},
});
}, [handleOptionalAgree]);
const handleOptionalDeclineClick = useCallback(() => {
console.log("[HomeBanner] 거절/다음에 하기 버튼 클릭");
console.log('[HomeBanner] 거절/다음에 하기 버튼 클릭');
// ✅ 거절 상태 업데이트
dispatch(updateOptionalTermsAgreement(false));
setIsOptionalConfirmVisible(false);
@@ -367,12 +313,12 @@ export default function HomeBanner({
const handleTermsPopupClosed = useCallback(() => {
setIsOptionalTermsVisible(false);
setIsOptionalConfirmVisible(true);
Spotlight.focus("optional-confirm-popup");
Spotlight.focus('optional-confirm-popup');
}, []);
// 선택약관 팝업 Agree
const handleTermsPopupAgree = useCallback(() => {
console.log("[HomeBanner] handleTermsPopupAgree");
console.log('[HomeBanner] handleTermsPopupAgree');
handleOptionalAgree();
setIsOptionalTermsVisible(false);
}, [handleOptionalAgree]);
@@ -391,24 +337,22 @@ export default function HomeBanner({
const data = bannerDataList[i];
let bannerDetailInfos = data.bannerDetailInfos;
if (data.shptmDspyTpNm === "Random") {
if (data.shptmDspyTpNm === 'Random') {
if (
bannerDetailInfos[data.randomIndex].shptmBanrTpNm === "LIVE" ||
bannerDetailInfos[data.randomIndex].shptmBanrTpNm === "VOD"
bannerDetailInfos[data.randomIndex].shptmBanrTpNm === 'LIVE' ||
bannerDetailInfos[data.randomIndex].shptmBanrTpNm === 'VOD'
) {
targetIndex = i;
break;
}
} else if (
bannerDetailInfos.find(
(el) => el.shptmBanrTpNm === "LIVE" || el.shptmBanrTpNm === "VOD"
)
bannerDetailInfos.find((el) => el.shptmBanrTpNm === 'LIVE' || el.shptmBanrTpNm === 'VOD')
) {
targetIndex = i;
break;
}
}
return "banner" + targetIndex;
return 'banner' + targetIndex;
}
return null;
@@ -444,8 +388,8 @@ export default function HomeBanner({
// 선택 약관 팝업을 띄워야 하는 경우
if (shouldShowOptionalTermsPopup && !isOptionalConfirmVisible) {
console.log("shouldShowOptionalTermsPopup", shouldShowOptionalTermsPopup);
console.log("App.js optionalTermsConfirm 팝업 표시");
console.log('shouldShowOptionalTermsPopup', shouldShowOptionalTermsPopup);
console.log('App.js optionalTermsConfirm 팝업 표시');
const timer = setTimeout(() => {
setIsOptionalConfirmVisible(true);
@@ -456,12 +400,7 @@ export default function HomeBanner({
// 컴포넌트 언마운트 시 타이머 클리어
return () => clearTimeout(timer);
}
}, [
shouldShowOptionalTermsPopup,
termsLoading,
isOptionalConfirmVisible,
dispatch,
]);
}, [shouldShowOptionalTermsPopup, termsLoading, isOptionalConfirmVisible, dispatch]);
// const renderItem = useCallback(
// (index, isHorizontal) => {
@@ -539,27 +478,27 @@ export default function HomeBanner({
const data = bannerDataList?.[index] ?? {};
return (
<div className={!isHorizontal ? css.imgBox : undefined}>
{data.shptmDspyTpNm === "Rolling" ? (
{data.shptmDspyTpNm === 'Rolling' ? (
<Rolling
bannerData={data}
isHorizontal={isHorizontal}
key={"banner" + index}
spotlightId={"banner" + index}
key={'banner' + index}
spotlightId={'banner' + index}
handleShelfFocus={_handleShelfFocus}
handleItemFocus={_handleItemFocus}
/>
) : data.shptmDspyTpNm === "Random" ? (
) : data.shptmDspyTpNm === 'Random' ? (
<Random
bannerData={data}
isHorizontal={isHorizontal}
key={"banner" + index}
spotlightId={"banner" + index}
key={'banner' + index}
spotlightId={'banner' + index}
handleShelfFocus={_handleShelfFocus}
handleItemFocus={_handleItemFocus}
randomNumber={data.randomIndex}
/>
) : (
<SpottableComponent spotlightId={"banner" + index}>
<SpottableComponent spotlightId={'banner' + index}>
<CustomImage
delay={0}
src={
@@ -568,9 +507,7 @@ export default function HomeBanner({
: homeTopDisplayInfo.vtctpImgPath1
}
aria-label={
isHorizontal
? homeTopDisplayInfo.wdthtpImgNm1
: homeTopDisplayInfo.vtctpImgNm1
isHorizontal ? homeTopDisplayInfo.wdthtpImgNm1 : homeTopDisplayInfo.vtctpImgNm1
}
/>
</SpottableComponent>
@@ -587,14 +524,14 @@ export default function HomeBanner({
const data = bannerDataList?.[index] ?? {};
// DSP00201 레이아웃의 두 번째 배너는 새로운 RandomUnitNew를 사용
if (selectTemplate === "DSP00201" && index === 1) {
if (selectTemplate === 'DSP00201' && index === 1) {
return (
<div className={!isHorizontal ? css.imgBox : undefined}>
<RandomUnitNew
bannerData={data}
isHorizontal={isHorizontal}
key={"banner" + index}
spotlightId={"banner" + index}
key={'banner' + index}
spotlightId={'banner' + index}
handleShelfFocus={_handleShelfFocus}
handleItemFocus={_handleItemFocus}
randomNumber={data.randomIndex}
@@ -604,14 +541,14 @@ export default function HomeBanner({
}
// 다른 타입의 유닛 렌더링 (예: RollingUnit)
if (data.shptmDspyTpNm === "Rolling") {
if (data.shptmDspyTpNm === 'Rolling') {
return (
<div className={!isHorizontal ? css.imgBox : undefined}>
<RollingUnit
bannerData={data}
isHorizontal={isHorizontal}
key={"banner" + index}
spotlightId={"banner" + index}
key={'banner' + index}
spotlightId={'banner' + index}
handleShelfFocus={_handleShelfFocus}
handleItemFocus={_handleItemFocus}
/>
@@ -620,11 +557,8 @@ export default function HomeBanner({
}
// 기본 이미지만 있는 배너 등 다른 케이스 처리
return (
<div
className={!isHorizontal ? css.imgBox : undefined}
key={"banner" + index}
>
<SpottableComponent spotlightId={"banner" + index}>
<div className={!isHorizontal ? css.imgBox : undefined} key={'banner' + index}>
<SpottableComponent spotlightId={'banner' + index}>
{/* ... 정적 이미지 렌더링 로직 ... */}
</SpottableComponent>
</div>
@@ -639,7 +573,7 @@ export default function HomeBanner({
return (
<div className={!isHorizontal ? css.imgBox : undefined}>
<SimpleVideoContainer
spotlightId={"banner" + index} // "banner0"
spotlightId={'banner' + index} // "banner0"
isHorizontal={isHorizontal}
handleShelfFocus={_handleShelfFocus}
/>
@@ -654,7 +588,7 @@ export default function HomeBanner({
return (
<div className={!isHorizontal ? css.imgBox : undefined}>
<SimpleVideoContainer
spotlightId={"banner" + index}
spotlightId={'banner' + index}
isHorizontal={isHorizontal}
handleShelfFocus={_handleShelfFocus}
/>
@@ -665,12 +599,12 @@ export default function HomeBanner({
);
useEffect(() => {
console.log("####introTermsAgree", introTermsAgree);
console.log('####introTermsAgree', introTermsAgree);
}, [introTermsAgree]);
const renderLayout = useCallback(() => {
switch (selectTemplate) {
case "DSP00201": {
case 'DSP00201': {
return (
<>
<ContainerBasic className={css.smallBox}>
@@ -679,14 +613,14 @@ export default function HomeBanner({
</ContainerBasic>
{renderItem(2, false)}
{/* //NOTE - 약관 동의 여부 & 추후 API 따라 팝업 표시 여부 결정 */}
{introTermsAgree === "Y" ? (
{introTermsAgree === 'Y' ? (
<div className={css.imgBox}>
<JustForSwitchBanner
renderItem={renderItem}
handleShelfFocus={_handleShelfFocus}
handleItemFocus={_handleItemFocus}
isHorizontal={false}
spotlightId={"banner3"}
spotlightId={'banner3'}
/>
</div>
) : (
@@ -695,7 +629,7 @@ export default function HomeBanner({
</>
);
}
case "DSP00202": {
case 'DSP00202': {
return (
<>
{renderItem(0, false)}
@@ -707,7 +641,7 @@ export default function HomeBanner({
</>
);
}
case "DSP00203": {
case 'DSP00203': {
return (
<>
{renderItem(0, false)}
@@ -725,11 +659,7 @@ export default function HomeBanner({
return (
<>
<Container
className={css.container}
spotlightId={spotlightId}
data-wheel-point={true}
>
<Container className={css.container} spotlightId={spotlightId} data-wheel-point={true}>
<div className={css.homeTemplateBox}>{renderLayout()}</div>
</Container>
{/* 선택약관 동의 팝업 */}
@@ -742,19 +672,19 @@ export default function HomeBanner({
onOptionalDeclineClick={handleOptionalDeclineClick}
customPosition={true}
position={{
position: "absolute",
top: "342px", // 가운데를 기준으로 한 좌표 (1080/2) - 198
left: "0px",
bottom: "unset",
transform: "none",
position: 'absolute',
top: '342px', // 가운데를 기준으로 한 좌표 (1080/2) - 198
left: '0px',
bottom: 'unset',
transform: 'none',
}}
/>
{/* 선택약관 자세히 보기 팝업 */}
<TNewPopUp
kind="figmaTermsPopup"
open={isOptionalTermsVisible}
title={$L("Optional Terms")}
text={optionalTermsData?.trmsCntt || ""}
title={$L('Optional Terms')}
text={optionalTermsData?.trmsCntt || ''}
onClose={handleTermsPopupClosed}
onAgreeClick={handleTermsPopupAgree}
showAgreeButton={true}