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

[251116] feat: useVideoMove 코멘트 처리:

Browse Source 
🕐 커밋 시간: 2025. 11. 16. 17:51:51

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

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

🔧 주요 변경 내용:
  • 코드 정리 및 최적화
This commit is contained in:
hyeon soo noh
2025-11-16 17:51:52 +09:00
parent 2d93ee6ca4
commit 4699797a99
2 changed files with 105 additions and 162 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,22 +1,11 @@
// src/views/HomePanel/HomeBanner/HomeBanner.jsx // src/views/HomePanel/HomeBanner/HomeBanner.jsx
import React, { import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
useCallback,
useEffect,
useMemo,
useRef,
useState,
} from 'react';
import { import { useDispatch, useSelector } from 'react-redux';
useDispatch,
useSelector,
} from 'react-redux';
import Spotlight from '@enact/spotlight'; import Spotlight from '@enact/spotlight';
import { import { SpotlightContainerDecorator } from '@enact/spotlight/SpotlightContainerDecorator';
SpotlightContainerDecorator,
} from '@enact/spotlight/SpotlightContainerDecorator';
import Spottable from '@enact/spotlight/Spottable'; import Spottable from '@enact/spotlight/Spottable';
import { types } from '../../../actions/actionTypes'; import { types } from '../../../actions/actionTypes';
@@ -29,15 +18,9 @@ import {
updateOptionalTermsAgreement, updateOptionalTermsAgreement,
} from '../../../actions/commonActions'; } from '../../../actions/commonActions';
import { justForYou } from '../../../actions/forYouActions'; import { justForYou } from '../../../actions/forYouActions';
import { import { fetchCurrentUserHomeTerms, setDefaultFocus } from '../../../actions/homeActions';
fetchCurrentUserHomeTerms,
setDefaultFocus,
} from '../../../actions/homeActions';
import { setMyPageTermsAgree } from '../../../actions/myPageActions'; import { setMyPageTermsAgree } from '../../../actions/myPageActions';
import { import { popPanel, pushPanel } from '../../../actions/panelActions';
popPanel,
pushPanel,
} from '../../../actions/panelActions';
import { import {
clearAllVideoTimers, clearAllVideoTimers,
releasePlayControl, releasePlayControl,
@@ -49,10 +32,9 @@ import CustomImage from '../../../components/CustomImage/CustomImage';
// import TButtonScroller from "../../../components/TButtonScroller/TButtonScroller"; // import TButtonScroller from "../../../components/TButtonScroller/TButtonScroller";
import OptionalConfirm from '../../../components/Optional/OptionalConfirm'; import OptionalConfirm from '../../../components/Optional/OptionalConfirm';
import TNewPopUp from '../../../components/TPopUp/TNewPopUp'; import TNewPopUp from '../../../components/TPopUp/TNewPopUp';
import { import { useFocusHistory } from '../../../hooks/useFocusHistory/useFocusHistory';
useFocusHistory, // [COMMENTED OUT] useVideoMove 관련 코드 주석 처리 - 향후 사용 검토 필요
} from '../../../hooks/useFocusHistory/useFocusHistory'; // import { useVideoMove } from '../../../hooks/useVideoTransition/useVideoMove';
import { useVideoMove } from '../../../hooks/useVideoTransition/useVideoMove';
import { panel_names } from '../../../utils/Config'; import { panel_names } from '../../../utils/Config';
import { $L } from '../../../utils/helperMethods'; import { $L } from '../../../utils/helperMethods';
import css from './HomeBanner.module.less'; import css from './HomeBanner.module.less';
@@ -65,53 +47,40 @@ import Random from './RandomUnit';
import Rolling from './RollingUnit'; import Rolling from './RollingUnit';
import SimpleVideoContainer from './SimpleVideoContainer'; import SimpleVideoContainer from './SimpleVideoContainer';
const SpottableComponent = Spottable("div"); const SpottableComponent = Spottable('div');
const Container = SpotlightContainerDecorator( const Container = SpotlightContainerDecorator({ enterTo: 'last-focused' }, 'div');
{ enterTo: "last-focused" }, const ContainerBasic = SpotlightContainerDecorator({ enterTo: 'last-focused' }, 'div');
"div"
);
const ContainerBasic = SpotlightContainerDecorator(
{ enterTo: "last-focused" },
"div"
);
export default function HomeBanner({ export default function HomeBanner({ firstSpot, spotlightId, handleItemFocus, handleShelfFocus }) {
firstSpot,
spotlightId,
handleItemFocus,
handleShelfFocus,
}) {
const dispatch = useDispatch(); const dispatch = useDispatch();
useEffect(() => { useEffect(() => {
dispatch(justForYou()); dispatch(justForYou());
}, [dispatch]); }, [dispatch]);
const homeTopDisplayInfo = useSelector( const homeTopDisplayInfo = useSelector((state) => state.home.homeTopDisplayInfo);
(state) => state.home.homeTopDisplayInfo
);
const bannerDataList = useSelector( const bannerDataList = useSelector((state) => state.home.bannerData?.bannerInfos);
(state) => state.home.bannerData?.bannerInfos
);
const popupVisible = useSelector((state) => state.common.popup.popupVisible); const popupVisible = useSelector((state) => state.common.popup.popupVisible);
// 🔽 useFocusHistory - 경량화된 범용 포커스 히스토리 // 🔽 useFocusHistory - 경량화된 범용 포커스 히스토리
const focusHistory = useFocusHistory({ const focusHistory = useFocusHistory({
enableLogging: true, enableLogging: true,
useGlobalState: true, useGlobalState: true,
logPrefix: "[HomeBanner-Focus]", logPrefix: '[HomeBanner-Focus]',
}); });
// 🔽 useVideoMove - 포커스 전환 기반 동영상 제어 // 🔽 useVideoMove - 포커스 전환 기반 동영상 제어
const { playByTransition, cleanup } = useVideoMove({ // [COMMENTED OUT] useVideoMove 미사용 - playByTransition() 호출되지 않음
enableLogging: true, // const { playByTransition, cleanup } = useVideoMove({
logPrefix: "[HomeBanner-VideoMove]", // enableLogging: true,
}); // logPrefix: "[HomeBanner-VideoMove]",
// });
// 🔽 컴포넌트 언마운트 시 비디오 리소스 정리 // 🔽 컴포넌트 언마운트 시 비디오 리소스 정리
useEffect(() => { useEffect(() => {
return () => { return () => {
// console.log('[HomeBanner] 컴포넌트 언마운트 - 비디오 리소스 정리'); // console.log('[HomeBanner] 컴포넌트 언마운트 - 비디오 리소스 정리');
cleanup(); // [COMMENTED OUT] useVideoMove cleanup 미사용
// cleanup();
// 전역 비디오 타이머 정리 (메모리 누수 방지) // 전역 비디오 타이머 정리 (메모리 누수 방지)
clearAllVideoTimers(); clearAllVideoTimers();
@@ -126,7 +95,7 @@ export default function HomeBanner({
} }
} }
}; };
}, [cleanup]); }, []); // [COMMENTED OUT] cleanup 변수 제거 - useVideoMove 미사용으로 인한 의존성 제거
const selectTemplate = useMemo(() => { const selectTemplate = useMemo(() => {
return homeTopDisplayInfo.shptmTmplCd; return homeTopDisplayInfo.shptmTmplCd;
@@ -140,19 +109,11 @@ export default function HomeBanner({
const termsData = useSelector((state) => state.home.termsData); const termsData = useSelector((state) => state.home.termsData);
const termsIdMap = useSelector((state) => state.home.termsIdMap); const termsIdMap = useSelector((state) => state.home.termsIdMap);
const optionalTermsAvailable = useSelector( const optionalTermsAvailable = useSelector((state) => state.home.optionalTermsAvailable);
(state) => state.home.optionalTermsAvailable
);
const optionalTermsData = useSelector((state) => { const optionalTermsData = useSelector((state) => {
// Chromium68 호환성을 위해 Optional Chaining 제거 // Chromium68 호환성을 위해 Optional Chaining 제거
if ( if (state.home.termsData && state.home.termsData.data && state.home.termsData.data.terms) {
state.home.termsData && return state.home.termsData.data.terms.find((term) => term.trmsTpCd === 'MST00405');
state.home.termsData.data &&
state.home.termsData.data.terms
) {
return state.home.termsData.data.terms.find(
(term) => term.trmsTpCd === "MST00405"
);
} }
return null; return null;
}); });
@@ -161,17 +122,14 @@ export default function HomeBanner({
const currentTermsFlag = useSelector((state) => state.common.termsFlag); const currentTermsFlag = useSelector((state) => state.common.termsFlag);
// 새로운 Redux 상태: 선택약관 팝업 플로우 관리 // 새로운 Redux 상태: 선택약관 팝업 플로우 관리
const optionalTermsPopupFlow = useSelector( const optionalTermsPopupFlow = useSelector((state) => state.common.optionalTermsPopupFlow);
(state) => state.common.optionalTermsPopupFlow
);
// 🔽 초기 비디오 재생 플래그 (1회만 실행되도록) // 🔽 초기 비디오 재생 플래그 (1회만 실행되도록)
const isInitialVideoPlayRef = useRef(false); const isInitialVideoPlayRef = useRef(false);
//------------------------------------------------------------------------------ //------------------------------------------------------------------------------
// 팝업표시 상태 // 팝업표시 상태
const [isOptionalConfirmVisible, setIsOptionalConfirmVisible] = const [isOptionalConfirmVisible, setIsOptionalConfirmVisible] = useState(false);
useState(false);
const [isOptionalTermsVisible, setIsOptionalTermsVisible] = useState(false); const [isOptionalTermsVisible, setIsOptionalTermsVisible] = useState(false);
const [optionalTermsAgreed, setOptionalTermsAgreed] = useState(false); const [optionalTermsAgreed, setOptionalTermsAgreed] = useState(false);
@@ -189,8 +147,8 @@ export default function HomeBanner({
// 1. 기본 조건 확인 // 1. 기본 조건 확인
if (termsLoading || isGnbOpened || !optionalTermsAvailable) { if (termsLoading || isGnbOpened || !optionalTermsAvailable) {
if (process.env.NODE_ENV === "development") { if (process.env.NODE_ENV === 'development') {
console.log("[HomeBanner] Early return: 기본 조건 불만족"); console.log('[HomeBanner] Early return: 기본 조건 불만족');
} }
return false; return false;
} }
@@ -201,11 +159,8 @@ export default function HomeBanner({
optionalTermsPopupFlow.userDecision || optionalTermsPopupFlow.userDecision ||
optionalTermsPopupFlow.agreedInSession optionalTermsPopupFlow.agreedInSession
) { ) {
if (process.env.NODE_ENV === "development") { if (process.env.NODE_ENV === 'development') {
console.log( console.log('[HomeBanner] Early return: 이미 처리됨', optionalTermsPopupFlow);
"[HomeBanner] Early return: 이미 처리됨",
optionalTermsPopupFlow
);
} }
return false; return false;
} }
@@ -216,19 +171,19 @@ export default function HomeBanner({
// console.log("[HomeBanner] Step 2: termsData 확인", terms); // console.log("[HomeBanner] Step 2: termsData 확인", terms);
// } // }
if (!terms) { if (!terms) {
if (process.env.NODE_ENV === "development") { if (process.env.NODE_ENV === 'development') {
console.log("[HomeBanner] Early return: terms가 존재하지 않음"); console.log('[HomeBanner] Early return: terms가 존재하지 않음');
} }
return false; return false;
} }
const optionalTerm = terms.find((term) => term.trmsTpCd === "MST00405"); const optionalTerm = terms.find((term) => term.trmsTpCd === 'MST00405');
// if (process.env.NODE_ENV === "development") { // if (process.env.NODE_ENV === "development") {
// console.log("[HomeBanner] Step 3: optionalTerm 검색 결과", optionalTerm); // console.log("[HomeBanner] Step 3: optionalTerm 검색 결과", optionalTerm);
// } // }
const result = optionalTerm const result = optionalTerm
? optionalTerm.trmsPopFlag === "Y" && optionalTerm.trmsAgrFlag === "N" ? optionalTerm.trmsPopFlag === 'Y' && optionalTerm.trmsAgrFlag === 'N'
: false; : false;
// if (process.env.NODE_ENV === "development") { // if (process.env.NODE_ENV === "development") {
@@ -251,62 +206,62 @@ export default function HomeBanner({
// } // }
if (!termsIdMap || Object.keys(termsIdMap).length === 0) { if (!termsIdMap || Object.keys(termsIdMap).length === 0) {
if (process.env.NODE_ENV === "development") { if (process.env.NODE_ENV === 'development') {
console.error("[HomeBanner] termsIdMap이 없습니다:", termsIdMap); console.error('[HomeBanner] termsIdMap이 없습니다:', termsIdMap);
} }
return; return;
} }
const requiredTermTypes = ["MST00401", "MST00402", "MST00405"]; const requiredTermTypes = ['MST00401', 'MST00402', 'MST00405'];
const missingTerms = requiredTermTypes.filter((type) => !termsIdMap[type]); const missingTerms = requiredTermTypes.filter((type) => !termsIdMap[type]);
if (missingTerms.length > 0) { if (missingTerms.length > 0) {
if (process.env.NODE_ENV === "development") { if (process.env.NODE_ENV === 'development') {
console.error("[HomeBanner] 누락된 약관 타입:", missingTerms); console.error('[HomeBanner] 누락된 약관 타입:', missingTerms);
} }
return; return;
} }
const termsList = []; const termsList = [];
if (termsIdMap["MST00401"]) { if (termsIdMap['MST00401']) {
termsList.push(termsIdMap["MST00401"]); // 개인정보처리방침 termsList.push(termsIdMap['MST00401']); // 개인정보처리방침
} }
if (termsIdMap["MST00402"]) { if (termsIdMap['MST00402']) {
termsList.push(termsIdMap["MST00402"]); // 이용약관 termsList.push(termsIdMap['MST00402']); // 이용약관
} }
if (termsIdMap["MST00405"]) { if (termsIdMap['MST00405']) {
termsList.push(termsIdMap["MST00405"]); // 선택약관 termsList.push(termsIdMap['MST00405']); // 선택약관
} }
const notTermsList = []; const notTermsList = [];
if (process.env.NODE_ENV === "development") { if (process.env.NODE_ENV === 'development') {
console.log("[HomeBanner] 현재 termsIdMap:", termsIdMap); console.log('[HomeBanner] 현재 termsIdMap:', termsIdMap);
console.log("[HomeBanner] 약관 동의 API 호출 파라미터:", { console.log('[HomeBanner] 약관 동의 API 호출 파라미터:', {
termsList, termsList,
notTermsList, notTermsList,
}); });
} }
const callback = (response) => { const callback = (response) => {
if (response.retCode === "000" || response.retCode === 0) { if (response.retCode === '000' || response.retCode === 0) {
if (process.env.NODE_ENV === "development") { if (process.env.NODE_ENV === 'development') {
console.log("[HomeBanner] 약관 동의 성공:", response); console.log('[HomeBanner] 약관 동의 성공:', response);
} }
// ✅ IntroPanel과 동일한 방식으로 Redux 상태 직접 업데이트 (API 호출 없이) // ✅ IntroPanel과 동일한 방식으로 Redux 상태 직접 업데이트 (API 호출 없이)
dispatch(updateOptionalTermsAgreement(true)); dispatch(updateOptionalTermsAgreement(true));
// 로컬 상태도 업데이트 (기존 로직 유지) // 로컬 상태도 업데이트 (기존 로직 유지)
setOptionalTermsAgreed(true); setOptionalTermsAgreed(true);
} else { } else {
if (process.env.NODE_ENV === "development") { if (process.env.NODE_ENV === 'development') {
console.error("[HomeBanner] 약관 동의 실패:", response); console.error('[HomeBanner] 약관 동의 실패:', response);
} }
} }
}; };
if (process.env.NODE_ENV === "development") { if (process.env.NODE_ENV === 'development') {
console.log("[HomeBanner] 약관 동의 API 호출 payload:", { console.log('[HomeBanner] 약관 동의 API 호출 payload:', {
termsList, termsList,
notTermsList, notTermsList,
}); });
@@ -316,8 +271,8 @@ export default function HomeBanner({
}, [dispatch, termsIdMap]); }, [dispatch, termsIdMap]);
const handleOptionalTermsClick = useCallback(() => { const handleOptionalTermsClick = useCallback(() => {
if (process.env.NODE_ENV === "development") { if (process.env.NODE_ENV === 'development') {
console.log("[HomeBanner] 약관 자세히 보기 클릭"); console.log('[HomeBanner] 약관 자세히 보기 클릭');
} }
setIsOptionalConfirmVisible(false); setIsOptionalConfirmVisible(false);
setIsOptionalTermsVisible(true); setIsOptionalTermsVisible(true);
@@ -331,14 +286,14 @@ export default function HomeBanner({
type: types.GET_TERMS_AGREE_YN_SUCCESS, type: types.GET_TERMS_AGREE_YN_SUCCESS,
payload: { payload: {
...currentTermsFlag, ...currentTermsFlag,
optionalTerms: "Y", optionalTerms: 'Y',
}, },
}); });
}, [handleOptionalAgree]); }, [handleOptionalAgree]);
const handleOptionalDeclineClick = useCallback(() => { const handleOptionalDeclineClick = useCallback(() => {
if (process.env.NODE_ENV === "development") { if (process.env.NODE_ENV === 'development') {
console.log("[HomeBanner] 거절/다음에 하기 버튼 클릭"); console.log('[HomeBanner] 거절/다음에 하기 버튼 클릭');
} }
// ✅ 거절 상태 업데이트 // ✅ 거절 상태 업데이트
dispatch(updateOptionalTermsAgreement(false)); dispatch(updateOptionalTermsAgreement(false));
@@ -349,13 +304,13 @@ export default function HomeBanner({
const handleTermsPopupClosed = useCallback(() => { const handleTermsPopupClosed = useCallback(() => {
setIsOptionalTermsVisible(false); setIsOptionalTermsVisible(false);
setIsOptionalConfirmVisible(true); setIsOptionalConfirmVisible(true);
Spotlight.focus("optional-confirm-popup"); Spotlight.focus('optional-confirm-popup');
}, []); }, []);
// 선택약관 팝업 Agree // 선택약관 팝업 Agree
const handleTermsPopupAgree = useCallback(() => { const handleTermsPopupAgree = useCallback(() => {
if (process.env.NODE_ENV === "development") { if (process.env.NODE_ENV === 'development') {
console.log("[HomeBanner] handleTermsPopupAgree"); console.log('[HomeBanner] handleTermsPopupAgree');
} }
handleOptionalAgree(); handleOptionalAgree();
setIsOptionalTermsVisible(false); setIsOptionalTermsVisible(false);
@@ -375,24 +330,22 @@ export default function HomeBanner({
const data = bannerDataList[i]; const data = bannerDataList[i];
let bannerDetailInfos = data.bannerDetailInfos; let bannerDetailInfos = data.bannerDetailInfos;
if (data.shptmDspyTpNm === "Random") { if (data.shptmDspyTpNm === 'Random') {
if ( if (
bannerDetailInfos[data.randomIndex].shptmBanrTpNm === "LIVE" || bannerDetailInfos[data.randomIndex].shptmBanrTpNm === 'LIVE' ||
bannerDetailInfos[data.randomIndex].shptmBanrTpNm === "VOD" bannerDetailInfos[data.randomIndex].shptmBanrTpNm === 'VOD'
) { ) {
targetIndex = i; targetIndex = i;
break; break;
} }
} else if ( } else if (
bannerDetailInfos.find( bannerDetailInfos.find((el) => el.shptmBanrTpNm === 'LIVE' || el.shptmBanrTpNm === 'VOD')
(el) => el.shptmBanrTpNm === "LIVE" || el.shptmBanrTpNm === "VOD"
)
) { ) {
targetIndex = i; targetIndex = i;
break; break;
} }
} }
return "banner" + targetIndex; return 'banner' + targetIndex;
} }
return null; return null;
@@ -452,8 +405,8 @@ export default function HomeBanner({
// 선택 약관 팝업을 띄워야 하는 경우 // 선택 약관 팝업을 띄워야 하는 경우
if (shouldShowOptionalTermsPopup && !isOptionalConfirmVisible) { if (shouldShowOptionalTermsPopup && !isOptionalConfirmVisible) {
console.log("shouldShowOptionalTermsPopup", shouldShowOptionalTermsPopup); console.log('shouldShowOptionalTermsPopup', shouldShowOptionalTermsPopup);
console.log("App.js optionalTermsConfirm 팝업 표시"); console.log('App.js optionalTermsConfirm 팝업 표시');
const timer = setTimeout(() => { const timer = setTimeout(() => {
setIsOptionalConfirmVisible(true); setIsOptionalConfirmVisible(true);
@@ -464,12 +417,7 @@ export default function HomeBanner({
// 컴포넌트 언마운트 시 타이머 클리어 // 컴포넌트 언마운트 시 타이머 클리어
return () => clearTimeout(timer); return () => clearTimeout(timer);
} }
}, [ }, [shouldShowOptionalTermsPopup, termsLoading, isOptionalConfirmVisible, dispatch]);
shouldShowOptionalTermsPopup,
termsLoading,
isOptionalConfirmVisible,
dispatch,
]);
const renderItem = useCallback( const renderItem = useCallback(
(index, isHorizontal) => { (index, isHorizontal) => {
@@ -478,37 +426,36 @@ export default function HomeBanner({
// videoPlayable을 동적으로 계산 // videoPlayable을 동적으로 계산
// Random이나 Rolling 배너에서 LIVE 또는 VOD 타입의 비디오가 있는지 확인 // Random이나 Rolling 배너에서 LIVE 또는 VOD 타입의 비디오가 있는지 확인
const videoPlayerable = const videoPlayerable =
(data.shptmDspyTpNm === "Random" || data.shptmDspyTpNm === "Rolling") && (data.shptmDspyTpNm === 'Random' || data.shptmDspyTpNm === 'Rolling') &&
data.bannerDetailInfos?.some(item => data.bannerDetailInfos?.some(
item.shptmBanrTpNm === "LIVE" || (item) => item.shptmBanrTpNm === 'LIVE' || item.shptmBanrTpNm === 'VOD'
item.shptmBanrTpNm === "VOD"
); );
return ( return (
<div className={!isHorizontal ? css.imgBox : undefined}> <div className={!isHorizontal ? css.imgBox : undefined}>
{data.shptmDspyTpNm === "Rolling" ? ( {data.shptmDspyTpNm === 'Rolling' ? (
<Rolling <Rolling
bannerData={data} bannerData={data}
isHorizontal={isHorizontal} isHorizontal={isHorizontal}
key={"banner" + index} key={'banner' + index}
spotlightId={"banner" + index} spotlightId={'banner' + index}
handleShelfFocus={_handleShelfFocus} handleShelfFocus={_handleShelfFocus}
handleItemFocus={_handleItemFocus} handleItemFocus={_handleItemFocus}
videoPlayerable={videoPlayerable} videoPlayerable={videoPlayerable}
/> />
) : data.shptmDspyTpNm === "Random" ? ( ) : data.shptmDspyTpNm === 'Random' ? (
<Random <Random
bannerData={data} bannerData={data}
isHorizontal={isHorizontal} isHorizontal={isHorizontal}
key={"banner" + index} key={'banner' + index}
spotlightId={"banner" + index} spotlightId={'banner' + index}
handleShelfFocus={_handleShelfFocus} handleShelfFocus={_handleShelfFocus}
handleItemFocus={_handleItemFocus} handleItemFocus={_handleItemFocus}
randomNumber={data.randomIndex} randomNumber={data.randomIndex}
videoPlayerable={videoPlayerable} videoPlayerable={videoPlayerable}
/> />
) : ( ) : (
<SpottableComponent spotlightId={"banner" + index}> <SpottableComponent spotlightId={'banner' + index}>
<CustomImage <CustomImage
delay={0} delay={0}
src={ src={
@@ -517,9 +464,7 @@ export default function HomeBanner({
: homeTopDisplayInfo.vtctpImgPath1 : homeTopDisplayInfo.vtctpImgPath1
} }
aria-label={ aria-label={
isHorizontal isHorizontal ? homeTopDisplayInfo.wdthtpImgNm1 : homeTopDisplayInfo.vtctpImgNm1
? homeTopDisplayInfo.wdthtpImgNm1
: homeTopDisplayInfo.vtctpImgNm1
} }
/> />
</SpottableComponent> </SpottableComponent>
@@ -536,7 +481,7 @@ export default function HomeBanner({
return ( return (
<div className={!isHorizontal ? css.imgBox : undefined}> <div className={!isHorizontal ? css.imgBox : undefined}>
<SimpleVideoContainer <SimpleVideoContainer
spotlightId={"banner" + index} // "banner0" spotlightId={'banner' + index} // "banner0"
isHorizontal={isHorizontal} isHorizontal={isHorizontal}
handleShelfFocus={_handleShelfFocus} handleShelfFocus={_handleShelfFocus}
/> />
@@ -551,7 +496,7 @@ export default function HomeBanner({
return ( return (
<div className={!isHorizontal ? css.imgBox : undefined}> <div className={!isHorizontal ? css.imgBox : undefined}>
<SimpleVideoContainer <SimpleVideoContainer
spotlightId={"banner" + index} spotlightId={'banner' + index}
isHorizontal={isHorizontal} isHorizontal={isHorizontal}
handleShelfFocus={_handleShelfFocus} handleShelfFocus={_handleShelfFocus}
/> />
@@ -563,7 +508,7 @@ export default function HomeBanner({
const renderLayout = useCallback(() => { const renderLayout = useCallback(() => {
switch (selectTemplate) { switch (selectTemplate) {
case "DSP00201": { case 'DSP00201': {
return ( return (
<> <>
<ContainerBasic className={css.smallBox}> <ContainerBasic className={css.smallBox}>
@@ -575,7 +520,7 @@ export default function HomeBanner({
</> </>
); );
} }
case "DSP00202": { case 'DSP00202': {
return ( return (
<> <>
{renderItem(0, false)} {renderItem(0, false)}
@@ -587,7 +532,7 @@ export default function HomeBanner({
</> </>
); );
} }
case "DSP00203": { case 'DSP00203': {
return ( return (
<> <>
{renderItem(0, false)} {renderItem(0, false)}
@@ -605,11 +550,7 @@ export default function HomeBanner({
return ( return (
<> <>
<Container <Container className={css.container} spotlightId={spotlightId} data-wheel-point={true}>
className={css.container}
spotlightId={spotlightId}
data-wheel-point={true}
>
<div className={css.homeTemplateBox}>{renderLayout()}</div> <div className={css.homeTemplateBox}>{renderLayout()}</div>
</Container> </Container>
{/* 선택약관 동의 팝업 */} {/* 선택약관 동의 팝업 */}
@@ -622,19 +563,19 @@ export default function HomeBanner({
onOptionalDeclineClick={handleOptionalDeclineClick} onOptionalDeclineClick={handleOptionalDeclineClick}
customPosition={true} customPosition={true}
position={{ position={{
position: "absolute", position: 'absolute',
top: "342px", // 가운데를 기준으로 한 좌표 (1080/2) - 198 top: '342px', // 가운데를 기준으로 한 좌표 (1080/2) - 198
left: "0px", left: '0px',
bottom: "unset", bottom: 'unset',
transform: "none", transform: 'none',
}} }}
/> />
{/* 선택약관 자세히 보기 팝업 */} {/* 선택약관 자세히 보기 팝업 */}
<TNewPopUp <TNewPopUp
kind="figmaTermsPopup" kind="figmaTermsPopup"
open={isOptionalTermsVisible} open={isOptionalTermsVisible}
title={$L("Optional Terms")} title={$L('Optional Terms')}
text={optionalTermsData?.trmsCntt || ""} text={optionalTermsData?.trmsCntt || ''}
onClose={handleTermsPopupClosed} onClose={handleTermsPopupClosed}
onAgreeClick={handleTermsPopupAgree} onAgreeClick={handleTermsPopupAgree}
showAgreeButton={true} showAgreeButton={true}

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

@@ -43,7 +43,8 @@ import useDebugKey from '../../hooks/useDebugKey';
import { useFocusHistory } from '../../hooks/useFocusHistory/useFocusHistory'; import { useFocusHistory } from '../../hooks/useFocusHistory/useFocusHistory';
import usePrevious from '../../hooks/usePrevious'; import usePrevious from '../../hooks/usePrevious';
import { useVideoPlay } from '../../hooks/useVideoPlay/useVideoPlay'; import { useVideoPlay } from '../../hooks/useVideoPlay/useVideoPlay';
import { useVideoMove } from '../../hooks/useVideoTransition/useVideoMove'; // [COMMENTED OUT] useVideoMove 관련 코드 주석 처리 - 향후 사용 검토 필요
// import { useVideoMove } from '../../hooks/useVideoTransition/useVideoMove';
import { import {
ACTIVE_POPUP, ACTIVE_POPUP,
LOG_CONTEXT_NAME, LOG_CONTEXT_NAME,
@@ -90,10 +91,11 @@ const HomePanel = ({ isOnTop }) => {
}); });
// 🔽 useVideoMove - 포커스 전환 기반 동영상 제어 // 🔽 useVideoMove - 포커스 전환 기반 동영상 제어
const { playByTransition, cleanup } = useVideoMove({ // [COMMENTED OUT] useVideoMove 미사용 - cleanup() 호출되지 않음
enableLogging: true, // const { playByTransition, cleanup } = useVideoMove({
logPrefix: '[HomePanel-VideoMove]', // enableLogging: true,
}); // logPrefix: '[HomePanel-VideoMove]',
// });
const isGnbOpened = useSelector((state) => state.common.isGnbOpened); const isGnbOpened = useSelector((state) => state.common.isGnbOpened);
const homeLayoutInfo = useSelector((state) => state.home.layoutData); const homeLayoutInfo = useSelector((state) => state.home.layoutData);
const panelInfo = useSelector((state) => state.home.homeInfo?.panelInfo ?? {}); const panelInfo = useSelector((state) => state.home.homeInfo?.panelInfo ?? {});