From 4699797a997831ee87ba97c591e544cc3005d6da Mon Sep 17 00:00:00 2001 From: optrader Date: Sun, 16 Nov 2025 17:51:52 +0900 Subject: [PATCH] =?UTF-8?q?[251116]=20feat:=20useVideoMove=20=EC=BD=94?= =?UTF-8?q?=EB=A9=98=ED=8A=B8=20=EC=B2=98=EB=A6=AC:?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ๐Ÿ• ์ปค๋ฐ‹ ์‹œ๊ฐ„: 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 ๐Ÿ”ง ์ฃผ์š” ๋ณ€๊ฒฝ ๋‚ด์šฉ: โ€ข ์ฝ”๋“œ ์ •๋ฆฌ ๋ฐ ์ตœ์ ํ™” --- .../views/HomePanel/HomeBanner/HomeBanner.jsx | 255 +++++++----------- .../src/views/HomePanel/HomePanel.jsx | 12 +- 2 files changed, 105 insertions(+), 162 deletions(-) diff --git a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBanner.jsx b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBanner.jsx index b57ed8e3..4dd01426 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBanner.jsx +++ b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBanner.jsx @@ -1,22 +1,11 @@ // src/views/HomePanel/HomeBanner/HomeBanner.jsx -import React, { - useCallback, - useEffect, - useMemo, - useRef, - useState, -} from 'react'; +import React, { useCallback, useEffect, useMemo, useRef, 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'; @@ -29,15 +18,9 @@ import { updateOptionalTermsAgreement, } from '../../../actions/commonActions'; import { justForYou } from '../../../actions/forYouActions'; -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 { clearAllVideoTimers, releasePlayControl, @@ -49,10 +32,9 @@ import CustomImage from '../../../components/CustomImage/CustomImage'; // import TButtonScroller from "../../../components/TButtonScroller/TButtonScroller"; import OptionalConfirm from '../../../components/Optional/OptionalConfirm'; import TNewPopUp from '../../../components/TPopUp/TNewPopUp'; -import { - useFocusHistory, -} from '../../../hooks/useFocusHistory/useFocusHistory'; -import { useVideoMove } from '../../../hooks/useVideoTransition/useVideoMove'; +import { useFocusHistory } from '../../../hooks/useFocusHistory/useFocusHistory'; +// [COMMENTED OUT] useVideoMove ๊ด€๋ จ ์ฝ”๋“œ ์ฃผ์„ ์ฒ˜๋ฆฌ - ํ–ฅํ›„ ์‚ฌ์šฉ ๊ฒ€ํ†  ํ•„์š” +// import { useVideoMove } from '../../../hooks/useVideoTransition/useVideoMove'; import { panel_names } from '../../../utils/Config'; import { $L } from '../../../utils/helperMethods'; import css from './HomeBanner.module.less'; @@ -65,53 +47,40 @@ import Random 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(); - useEffect(() => { + useEffect(() => { dispatch(justForYou()); }, [dispatch]); - 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); // ๐Ÿ”ฝ useFocusHistory - ๊ฒฝ๋Ÿ‰ํ™”๋œ ๋ฒ”์šฉ ํฌ์ปค์Šค ํžˆ์Šคํ† ๋ฆฌ const focusHistory = useFocusHistory({ enableLogging: true, useGlobalState: true, - logPrefix: "[HomeBanner-Focus]", + logPrefix: '[HomeBanner-Focus]', }); // ๐Ÿ”ฝ useVideoMove - ํฌ์ปค์Šค ์ „ํ™˜ ๊ธฐ๋ฐ˜ ๋™์˜์ƒ ์ œ์–ด - const { playByTransition, cleanup } = useVideoMove({ - enableLogging: true, - logPrefix: "[HomeBanner-VideoMove]", - }); + // [COMMENTED OUT] useVideoMove ๋ฏธ์‚ฌ์šฉ - playByTransition() ํ˜ธ์ถœ๋˜์ง€ ์•Š์Œ + // const { playByTransition, cleanup } = useVideoMove({ + // enableLogging: true, + // logPrefix: "[HomeBanner-VideoMove]", + // }); // ๐Ÿ”ฝ ์ปดํฌ๋„ŒํŠธ ์–ธ๋งˆ์šดํŠธ ์‹œ ๋น„๋””์˜ค ๋ฆฌ์†Œ์Šค ์ •๋ฆฌ useEffect(() => { return () => { // console.log('[HomeBanner] ์ปดํฌ๋„ŒํŠธ ์–ธ๋งˆ์šดํŠธ - ๋น„๋””์˜ค ๋ฆฌ์†Œ์Šค ์ •๋ฆฌ'); - cleanup(); + // [COMMENTED OUT] useVideoMove cleanup ๋ฏธ์‚ฌ์šฉ + // cleanup(); // ์ „์—ญ ๋น„๋””์˜ค ํƒ€์ด๋จธ ์ •๋ฆฌ (๋ฉ”๋ชจ๋ฆฌ ๋ˆ„์ˆ˜ ๋ฐฉ์ง€) clearAllVideoTimers(); @@ -126,7 +95,7 @@ export default function HomeBanner({ } } }; - }, [cleanup]); + }, []); // [COMMENTED OUT] cleanup ๋ณ€์ˆ˜ ์ œ๊ฑฐ - useVideoMove ๋ฏธ์‚ฌ์šฉ์œผ๋กœ ์ธํ•œ ์˜์กด์„ฑ ์ œ๊ฑฐ const selectTemplate = useMemo(() => { return homeTopDisplayInfo.shptmTmplCd; @@ -140,19 +109,11 @@ export default function HomeBanner({ 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; }); @@ -161,17 +122,14 @@ export default function HomeBanner({ const currentTermsFlag = useSelector((state) => state.common.termsFlag); // ์ƒˆ๋กœ์šด Redux ์ƒํƒœ: ์„ ํƒ์•ฝ๊ด€ ํŒ์—… ํ”Œ๋กœ์šฐ ๊ด€๋ฆฌ - const optionalTermsPopupFlow = useSelector( - (state) => state.common.optionalTermsPopupFlow - ); + const optionalTermsPopupFlow = useSelector((state) => state.common.optionalTermsPopupFlow); // ๐Ÿ”ฝ ์ดˆ๊ธฐ ๋น„๋””์˜ค ์žฌ์ƒ ํ”Œ๋ž˜๊ทธ (1ํšŒ๋งŒ ์‹คํ–‰๋˜๋„๋ก) const isInitialVideoPlayRef = useRef(false); //------------------------------------------------------------------------------ // ํŒ์—…ํ‘œ์‹œ ์ƒํƒœ - const [isOptionalConfirmVisible, setIsOptionalConfirmVisible] = - useState(false); + const [isOptionalConfirmVisible, setIsOptionalConfirmVisible] = useState(false); const [isOptionalTermsVisible, setIsOptionalTermsVisible] = useState(false); const [optionalTermsAgreed, setOptionalTermsAgreed] = useState(false); @@ -189,8 +147,8 @@ export default function HomeBanner({ // 1. ๊ธฐ๋ณธ ์กฐ๊ฑด ํ™•์ธ if (termsLoading || isGnbOpened || !optionalTermsAvailable) { - if (process.env.NODE_ENV === "development") { - console.log("[HomeBanner] Early return: ๊ธฐ๋ณธ ์กฐ๊ฑด ๋ถˆ๋งŒ์กฑ"); + if (process.env.NODE_ENV === 'development') { + console.log('[HomeBanner] Early return: ๊ธฐ๋ณธ ์กฐ๊ฑด ๋ถˆ๋งŒ์กฑ'); } return false; } @@ -201,11 +159,8 @@ export default function HomeBanner({ optionalTermsPopupFlow.userDecision || optionalTermsPopupFlow.agreedInSession ) { - if (process.env.NODE_ENV === "development") { - console.log( - "[HomeBanner] Early return: ์ด๋ฏธ ์ฒ˜๋ฆฌ๋จ", - optionalTermsPopupFlow - ); + if (process.env.NODE_ENV === 'development') { + console.log('[HomeBanner] Early return: ์ด๋ฏธ ์ฒ˜๋ฆฌ๋จ', optionalTermsPopupFlow); } return false; } @@ -216,19 +171,19 @@ export default function HomeBanner({ // console.log("[HomeBanner] Step 2: termsData ํ™•์ธ", terms); // } if (!terms) { - if (process.env.NODE_ENV === "development") { - console.log("[HomeBanner] Early return: terms๊ฐ€ ์กด์žฌํ•˜์ง€ ์•Š์Œ"); + if (process.env.NODE_ENV === 'development') { + console.log('[HomeBanner] Early return: terms๊ฐ€ ์กด์žฌํ•˜์ง€ ์•Š์Œ'); } return false; } - const optionalTerm = terms.find((term) => term.trmsTpCd === "MST00405"); + const optionalTerm = terms.find((term) => term.trmsTpCd === 'MST00405'); // if (process.env.NODE_ENV === "development") { // console.log("[HomeBanner] Step 3: optionalTerm ๊ฒ€์ƒ‰ ๊ฒฐ๊ณผ", optionalTerm); // } const result = optionalTerm - ? optionalTerm.trmsPopFlag === "Y" && optionalTerm.trmsAgrFlag === "N" + ? optionalTerm.trmsPopFlag === 'Y' && optionalTerm.trmsAgrFlag === 'N' : false; // if (process.env.NODE_ENV === "development") { @@ -251,62 +206,62 @@ export default function HomeBanner({ // } 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); } else { - if (process.env.NODE_ENV === "development") { - console.error("[HomeBanner] ์•ฝ๊ด€ ๋™์˜ ์‹คํŒจ:", response); + if (process.env.NODE_ENV === 'development') { + console.error('[HomeBanner] ์•ฝ๊ด€ ๋™์˜ ์‹คํŒจ:', response); } } }; - if (process.env.NODE_ENV === "development") { - console.log("[HomeBanner] ์•ฝ๊ด€ ๋™์˜ API ํ˜ธ์ถœ payload:", { + if (process.env.NODE_ENV === 'development') { + console.log('[HomeBanner] ์•ฝ๊ด€ ๋™์˜ API ํ˜ธ์ถœ payload:', { termsList, notTermsList, }); @@ -316,8 +271,8 @@ export default function HomeBanner({ }, [dispatch, termsIdMap]); const handleOptionalTermsClick = useCallback(() => { - if (process.env.NODE_ENV === "development") { - console.log("[HomeBanner] ์•ฝ๊ด€ ์ž์„ธํžˆ ๋ณด๊ธฐ ํด๋ฆญ"); + if (process.env.NODE_ENV === 'development') { + console.log('[HomeBanner] ์•ฝ๊ด€ ์ž์„ธํžˆ ๋ณด๊ธฐ ํด๋ฆญ'); } setIsOptionalConfirmVisible(false); setIsOptionalTermsVisible(true); @@ -331,14 +286,14 @@ export default function HomeBanner({ type: types.GET_TERMS_AGREE_YN_SUCCESS, payload: { ...currentTermsFlag, - optionalTerms: "Y", + optionalTerms: 'Y', }, }); }, [handleOptionalAgree]); const handleOptionalDeclineClick = useCallback(() => { - if (process.env.NODE_ENV === "development") { - console.log("[HomeBanner] ๊ฑฐ์ ˆ/๋‹ค์Œ์— ํ•˜๊ธฐ ๋ฒ„ํŠผ ํด๋ฆญ"); + if (process.env.NODE_ENV === 'development') { + console.log('[HomeBanner] ๊ฑฐ์ ˆ/๋‹ค์Œ์— ํ•˜๊ธฐ ๋ฒ„ํŠผ ํด๋ฆญ'); } // โœ… ๊ฑฐ์ ˆ ์ƒํƒœ ์—…๋ฐ์ดํŠธ dispatch(updateOptionalTermsAgreement(false)); @@ -349,13 +304,13 @@ 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(() => { - if (process.env.NODE_ENV === "development") { - console.log("[HomeBanner] handleTermsPopupAgree"); + if (process.env.NODE_ENV === 'development') { + console.log('[HomeBanner] handleTermsPopupAgree'); } handleOptionalAgree(); setIsOptionalTermsVisible(false); @@ -375,24 +330,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; @@ -452,8 +405,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); @@ -464,12 +417,7 @@ export default function HomeBanner({ // ์ปดํฌ๋„ŒํŠธ ์–ธ๋งˆ์šดํŠธ ์‹œ ํƒ€์ด๋จธ ํด๋ฆฌ์–ด return () => clearTimeout(timer); } - }, [ - shouldShowOptionalTermsPopup, - termsLoading, - isOptionalConfirmVisible, - dispatch, - ]); + }, [shouldShowOptionalTermsPopup, termsLoading, isOptionalConfirmVisible, dispatch]); const renderItem = useCallback( (index, isHorizontal) => { @@ -478,37 +426,36 @@ export default function HomeBanner({ // videoPlayable์„ ๋™์ ์œผ๋กœ ๊ณ„์‚ฐ // Random์ด๋‚˜ Rolling ๋ฐฐ๋„ˆ์—์„œ LIVE ๋˜๋Š” VOD ํƒ€์ž…์˜ ๋น„๋””์˜ค๊ฐ€ ์žˆ๋Š”์ง€ ํ™•์ธ const videoPlayerable = - (data.shptmDspyTpNm === "Random" || data.shptmDspyTpNm === "Rolling") && - data.bannerDetailInfos?.some(item => - item.shptmBanrTpNm === "LIVE" || - item.shptmBanrTpNm === "VOD" + (data.shptmDspyTpNm === 'Random' || data.shptmDspyTpNm === 'Rolling') && + data.bannerDetailInfos?.some( + (item) => item.shptmBanrTpNm === 'LIVE' || item.shptmBanrTpNm === 'VOD' ); return (
- {data.shptmDspyTpNm === "Rolling" ? ( + {data.shptmDspyTpNm === 'Rolling' ? ( - ) : data.shptmDspyTpNm === "Random" ? ( + ) : data.shptmDspyTpNm === 'Random' ? ( ) : ( - + @@ -536,7 +481,7 @@ export default function HomeBanner({ return (
@@ -551,7 +496,7 @@ export default function HomeBanner({ return (
@@ -563,7 +508,7 @@ export default function HomeBanner({ const renderLayout = useCallback(() => { switch (selectTemplate) { - case "DSP00201": { + case 'DSP00201': { return ( <> @@ -575,7 +520,7 @@ export default function HomeBanner({ ); } - case "DSP00202": { + case 'DSP00202': { return ( <> {renderItem(0, false)} @@ -587,7 +532,7 @@ export default function HomeBanner({ ); } - case "DSP00203": { + case 'DSP00203': { return ( <> {renderItem(0, false)} @@ -605,11 +550,7 @@ export default function HomeBanner({ return ( <> - +
{renderLayout()}
 {/* ์„ ํƒ์•ฝ๊ด€ ๋™์˜ ํŒ์—… */} @@ -622,19 +563,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', }} /> {/* ์„ ํƒ์•ฝ๊ด€ ์ž์„ธํžˆ ๋ณด๊ธฐ ํŒ์—… */} { }); // ๐Ÿ”ฝ useVideoMove - ํฌ์ปค์Šค ์ „ํ™˜ ๊ธฐ๋ฐ˜ ๋™์˜์ƒ ์ œ์–ด - const { playByTransition, cleanup } = useVideoMove({ - enableLogging: true, - logPrefix: '[HomePanel-VideoMove]', - }); + // [COMMENTED OUT] useVideoMove ๋ฏธ์‚ฌ์šฉ - cleanup() ํ˜ธ์ถœ๋˜์ง€ ์•Š์Œ + // const { playByTransition, cleanup } = useVideoMove({ + // enableLogging: true, + // logPrefix: '[HomePanel-VideoMove]', + // }); const isGnbOpened = useSelector((state) => state.common.isGnbOpened); const homeLayoutInfo = useSelector((state) => state.home.layoutData); const panelInfo = useSelector((state) => state.home.homeInfo?.panelInfo ?? {});