From c9c6fc07a9098d9b77ca1e03bf4c19bbbac8c397 Mon Sep 17 00:00:00 2001 From: optrader Date: Fri, 14 Nov 2025 15:36:07 +0900 Subject: [PATCH] [251114] fix: ProductAllSection ProductVideo.v3 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ๐Ÿ• ์ปค๋ฐ‹ ์‹œ๊ฐ„: 2025. 11. 14. 15:36:07 ๐Ÿ“Š ๋ณ€๊ฒฝ ํ†ต๊ณ„: โ€ข ์ด ํŒŒ์ผ: 4๊ฐœ โ€ข ์ถ”๊ฐ€: +27์ค„ โ€ข ์‚ญ์ œ: -333์ค„ ๐Ÿ“ ์ˆ˜์ •๋œ ํŒŒ์ผ: ~ com.twin.app.shoptime/src/utils/helperMethods.js ~ com.twin.app.shoptime/src/views/DetailPanel/ProductAllSection/ProductAllSection.jsx ~ com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/ProductVideo/ProductVideo.v3.jsx ~ com.twin.app.shoptime/src/views/MediaPanel/MediaPanel.v3.jsx ๐Ÿ”ง ํ•จ์ˆ˜ ๋ณ€๊ฒฝ ๋‚ด์šฉ: ๐Ÿ“„ com.twin.app.shoptime/src/utils/helperMethods.js (javascript): โœ… Added: getFormattingDate() ๐Ÿ“„ com.twin.app.shoptime/src/views/DetailPanel/ProductAllSection/ProductAllSection.jsx (javascript): ๐Ÿ”„ Modified: extractProductMeta() ๐Ÿ“„ com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/ProductVideo/ProductVideo.v3.jsx (javascript): โœ… Added: Spottable() ๐Ÿ“„ com.twin.app.shoptime/src/views/MediaPanel/MediaPanel.v3.jsx (javascript): ๐Ÿ”„ Modified: normalizeModalStyle() โŒ Deleted: handleEvent() ๐Ÿ”ง ์ฃผ์š” ๋ณ€๊ฒฝ ๋‚ด์šฉ: โ€ข ๊ณตํ†ต ์œ ํ‹ธ๋ฆฌํ‹ฐ ํ•จ์ˆ˜ ์ตœ์ ํ™” Performance: ์ฝ”๋“œ ์ตœ์ ํ™”๋กœ ์„ฑ๋Šฅ ๊ฐœ์„  ๊ธฐ๋Œ€ --- .../src/utils/helperMethods.js | 5 + .../ProductAllSection/ProductAllSection.jsx | 8 +- .../ProductVideo/ProductVideo.v3.jsx | 10 + .../src/views/MediaPanel/MediaPanel.v3.jsx | 349 +----------------- 4 files changed, 28 insertions(+), 344 deletions(-) diff --git a/com.twin.app.shoptime/src/utils/helperMethods.js b/com.twin.app.shoptime/src/utils/helperMethods.js index e8b5e80b..387cc054 100644 --- a/com.twin.app.shoptime/src/utils/helperMethods.js +++ b/com.twin.app.shoptime/src/utils/helperMethods.js @@ -397,6 +397,11 @@ export const getFormattingDate = (dateString) => { }; export const removeSpecificTags = (html) => { + // null ๋˜๋Š” undefined ์ฒดํฌ + if (!html) { + return html; + } + const tagPatterns = [ /]*>(.*?)<\/a>/gi, /]*>(.*?)<\/script>/gi, diff --git a/com.twin.app.shoptime/src/views/DetailPanel/ProductAllSection/ProductAllSection.jsx b/com.twin.app.shoptime/src/views/DetailPanel/ProductAllSection/ProductAllSection.jsx index 3fba30d5..931b4873 100644 --- a/com.twin.app.shoptime/src/views/DetailPanel/ProductAllSection/ProductAllSection.jsx +++ b/com.twin.app.shoptime/src/views/DetailPanel/ProductAllSection/ProductAllSection.jsx @@ -151,6 +151,8 @@ export default function ProductAllSection({ // ProductVideo ๋ฒ„์ „ ๊ด€๋ฆฌ (1: ๊ธฐ์กด modal ๋ฐฉ์‹, 2: ๋‚ด์žฅ ๋ฐฉ์‹ , 3: ๋น„๋””์˜ค ์ƒ๋žต) const [productVideoVersion, setProductVideoVersion] = useState(1); + // ๋น„๋””์˜ค ์žฌ์ƒ ์—ฌ๋ถ€ flag (์žฌ์ƒ ์ „์—๋Š” minimize/restore ๋กœ์ง ๋น„ํ™œ์„ฑํ™”) + const [isVideoPlaying, setIsVideoPlaying] = useState(false); // const [currentHeight, setCurrentHeight] = useState(0); //ํ•˜๋‹จ๋ถ€๋ถ„๊นŒ์ง€ ๊ฐ”์„๋•Œ ์ฒดํฌ์šฉ @@ -666,7 +668,8 @@ export default function ProductAllSection({ // ๐Ÿ”ฝ ProductVideo (v3.jsx)์—๋งŒ HomePanel ์Šคํƒ€์ผ ์ฆ‰๊ฐ ์Šคํฌ๋กค ๋กœ์ง ์ ์šฉ // ProductVideo.v3.jsx๋Š” ProductVideo๋กœ import๋˜์–ด productVideoVersion === 1์ผ ๋•Œ ์‚ฌ์šฉ๋จ - if (productVideoVersion === 1) { + // โš ๏ธ ๋น„๋””์˜ค๊ฐ€ ์žฌ์ƒ๋˜์—ˆ์„ ๋•Œ๋งŒ minimize/restore ๋กœ์ง ์‹คํ–‰ + if (productVideoVersion === 1 && isVideoPlaying) { const isScrollingDown = currentScrollTop > prevScrollTop; prevScrollTopRef.current = currentScrollTop; @@ -710,7 +713,7 @@ export default function ProductAllSection({ } // v2: onScrollStop์—์„œ ์ฒ˜๋ฆฌ (๊ธฐ์กด ๋กœ์ง ์œ ์ง€) }, - [documentHeight, isBottom, productVideoVersion, dispatch] + [documentHeight, isBottom, productVideoVersion, isVideoPlaying, dispatch] ); // ์Šคํฌ๋กค ๋ฉˆ์ถ”์—ˆ์„ ๋•Œ๋งŒ ํ˜ธ์ถœ (์„ฑ๋Šฅ ์ตœ์ ํ™”) @@ -1112,6 +1115,7 @@ export default function ProductAllSection({ thumbnailUrl={renderItems[0].thumbnail} autoPlay={true} continuousPlay={true} + onVideoPlaying={() => setIsVideoPlaying(true)} onScrollToImages={handleScrollToImagesV1} onFocus={() => console.log('[ProductVideo V1] Focused')} /> diff --git a/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/ProductVideo/ProductVideo.v3.jsx b/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/ProductVideo/ProductVideo.v3.jsx index f521321f..bf990476 100644 --- a/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/ProductVideo/ProductVideo.v3.jsx +++ b/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/ProductVideo/ProductVideo.v3.jsx @@ -20,6 +20,7 @@ export default function ProductVideo({ videoUrl, thumbnailUrl, onScrollToImages, + onVideoPlaying = null, // ๋น„๋””์˜ค ์žฌ์ƒ ์‹œ ํ˜ธ์ถœ๋˜๋Š” ์ฝœ๋ฐฑ autoPlay = false, // ์ž๋™ ์žฌ์ƒ ์—ฌ๋ถ€ continuousPlay = false, // ๋ฐ˜๋ณต ์žฌ์ƒ ์—ฌ๋ถ€ onFocus = null, // ์™ธ๋ถ€์—์„œ ์ „๋‹ฌ๋œ ํฌ์ปค์Šค ํ•ธ๋“ค๋Ÿฌ @@ -32,6 +33,7 @@ export default function ProductVideo({ const [focused, setFocused] = useState(false); const [modalState, setModalState] = useState(true); // ๋ชจ๋‹ฌ ์ƒํƒœ ๊ด€๋ฆฌ ์ถ”๊ฐ€ const [hasAutoPlayed, setHasAutoPlayed] = useState(false); // ์ž๋™ ์žฌ์ƒ ์™„๋ฃŒ ์—ฌ๋ถ€ + const [isVideoPlaying, setIsVideoPlaying] = useState(false); // ๋น„๋””์˜ค ์žฌ์ƒ ์—ฌ๋ถ€ flag const topPanel = panels[panels.length - 1]; @@ -59,6 +61,10 @@ export default function ProductVideo({ // ์งง์€ ๋”œ๋ ˆ์ด ํ›„ ์žฌ์ƒ ์‹œ์ž‘ (์ปดํฌ๋„ŒํŠธ ๋งˆ์šดํŠธ ์™„๋ฃŒ ํ›„) setTimeout(() => { + setIsVideoPlaying(true); // ๋น„๋””์˜ค ์žฌ์ƒ flag ์„ค์ • + if (onVideoPlaying) { + onVideoPlaying(); // ๋ถ€๋ชจ ์ปดํฌ๋„ŒํŠธ์— ์•Œ๋ฆผ + } dispatch( startMediaPlayer({ qrCurrentItem: productInfo, @@ -178,6 +184,10 @@ export default function ProductVideo({ console.log('[ProductVideo] *** Starting modal MediaPanel ***'); console.log('[ProductVideo] productInfo:', JSON.stringify(productInfo, null, 2)); // ์ฒ˜์Œ ์žฌ์ƒ ์‹œ์ž‘ - modal=true๋กœ ์‹œ์ž‘ + setIsVideoPlaying(true); // ๋น„๋””์˜ค ์žฌ์ƒ flag ์„ค์ • + if (onVideoPlaying) { + onVideoPlaying(); // ๋ถ€๋ชจ ์ปดํฌ๋„ŒํŠธ์— ์•Œ๋ฆผ + } dispatch( startMediaPlayer({ qrCurrentItem: productInfo, diff --git a/com.twin.app.shoptime/src/views/MediaPanel/MediaPanel.v3.jsx b/com.twin.app.shoptime/src/views/MediaPanel/MediaPanel.v3.jsx index 02bf1d49..8734455a 100644 --- a/com.twin.app.shoptime/src/views/MediaPanel/MediaPanel.v3.jsx +++ b/com.twin.app.shoptime/src/views/MediaPanel/MediaPanel.v3.jsx @@ -67,16 +67,7 @@ import * as Config from '../../utils/Config'; import { ACTIVE_POPUP, panel_names } from '../../utils/Config'; import { $L, formatGMTString } from '../../utils/helperMethods'; import { SpotlightIds } from '../../utils/SpotlightIds'; -import { removeDotAndColon } from '../PlayerPanel/PlayerItemCard/PlayerItemCard'; -import PlayerOverlayChat from '../PlayerPanel/PlayerOverlay/PlayerOverlayChat'; -import PlayerOverlayQRCode from '../PlayerPanel/PlayerOverlay/PlayerOverlayQRCode'; import css from './MediaPanel.v3.module.less'; -import PlayerTabButton from '../PlayerPanel/PlayerTabContents/TabButton/PlayerTabButton'; -import TabContainer from '../PlayerPanel/PlayerTabContents/TabContainer'; -import TabContainerV2 from '../PlayerPanel/PlayerTabContents/v2/TabContainer.v2'; -// import LiveShowContainer from './PlayerTabContents/v2/LiveShowContainer'; -// import ShopNowContainer from './PlayerTabContents/v2/ShopNowContainer'; -// import ShopNowButton from './PlayerTabContents/v2/ShopNowButton'; const Container = SpotlightContainerDecorator( { enterTo: 'default-element', preserveld: true }, @@ -168,12 +159,6 @@ const YOUTUBECONFIG = { }, }; -const INITIAL_TIMEOUT = 30000; -const REGULAR_TIMEOUT = 30000; -const TAB_CONTAINER_SPOTLIGHT_ID = 'tab-container-spotlight-id'; -const TAB_CONTAINER_V2_SPOTLIGHT_ID = 'tab-container-v2-spotlight-id'; -const TARGET_EVENTS = ['mousemove', 'keydown', 'click']; - // last time error const VIDEO_END_ACTION_DELAY = 1500; @@ -236,8 +221,6 @@ const MediaPanel = React.forwardRef( 1 ); const [prevChannelIndex, setPrevChannelIndex] = USE_STATE('prevChannelIndex', 0); - const [sideContentsVisible, setSideContentsVisible] = USE_STATE('sideContentsVisible', true); - const [belowContentsVisible, setBelowContentsVisible] = USE_STATE('belowContentsVisible', true); const [currentTime, setCurrentTime] = USE_STATE('currentTime', 0); const [isInitialFocusOccurred, setIsInitialFocusOccurred] = USE_STATE( 'isInitialFocusOccurred', @@ -261,8 +244,6 @@ const MediaPanel = React.forwardRef( isDetailMediaReady: false, }); const [isVODPaused, setIsVODPaused] = USE_STATE('isVODPaused', false); - const [tabIndexV2, setTabIndexV2] = USE_STATE('tabIndexV2', 1); // 0: ShopNow, 1: LiveChannel, 2: ShopNowButton - const [tabContainerVersion, setTabContainerVersion] = USE_STATE('tabContainerVersion', 2); // 1: TabContainer (์šฐ์ธก), 2: TabContainerV2 (ํ•˜๋‹จ) const panels = USE_SELECTOR('panels', (state) => state.panels.panels); const chatData = USE_SELECTOR('chatData', (state) => state.play.chatData); @@ -890,30 +871,13 @@ const MediaPanel = React.forwardRef( const handleItemFocus = useCallback( (menu) => { dispatch(sendLogGNB(menu)); - - if (!videoVerticalVisible) { - resetTimer(REGULAR_TIMEOUT); - } }, - [dispatch, resetTimer, videoVerticalVisible] + [dispatch] ); const onClickBack = useCallback( (ev, isEnd) => { //modal๋กœ๋ถ€ํ„ฐ Full ์ „ํ™˜๋œ ๊ฒฝ์šฐ ๋‹ค์‹œ preview ๋ชจ๋“œ๋กœ ๋Œ์•„๊ฐ. - - // TabContainer(v1)๋งŒ: Side Contents๊ฐ€ ๋ณด์ด๋Š” ๊ฒฝ์šฐ ๋จผ์ € ์ˆจ๊ธฐ๊ณ  return - if ( - tabContainerVersion === 1 && - sideContentsVisible && - !videoVerticalVisible && - panelInfo.shptmBanrTpNm !== 'MEDIA' - ) { - setSideContentsVisible(false); - ev?.stopPropagation(); - // ev?.preventDefault(); - return; - } if (panelInfo.modalContainerId && !panelInfo.modal) { dispatch( startMediaPlayer({ @@ -954,16 +918,7 @@ const MediaPanel = React.forwardRef( return; } }, - [ - dispatch, - panelInfo, - videoPlayer, - sideContentsVisible, - videoVerticalVisible, - backupInitialIndex, - panels, - tabContainerVersion, - ] + [dispatch, panelInfo, videoPlayer, videoVerticalVisible, backupInitialIndex, panels] ); useEffect(() => { @@ -1043,11 +998,7 @@ const MediaPanel = React.forwardRef( } if (!panelInfo.modal && !videoVerticalVisible && !hasProperSpot) { - if (tabContainerVersion === 1) { - Spotlight.focus(SpotlightIds.PLAYER_TAB_BUTTON); - } else if (tabContainerVersion === 2) { - Spotlight.focus('below-tab-live-channel-button'); - } + Spotlight.focus('below-tab-live-channel-button'); return; } //๋น„๋””์˜ค ์ง„์ž…์‹œ ํฌ์ปค์Šค @@ -1063,7 +1014,6 @@ const MediaPanel = React.forwardRef( panelInfo.isUpdatedByClick, panelInfo.isIndicatorByClick, panelInfo.shptmBanrTpNm, - tabContainerVersion, ]); // ์ตœ์ƒ๋‹จ ํŒจ๋„ ์ •๋ณด (์—ฌ๋Ÿฌ useMemo์—์„œ ๊ณตํ†ต์œผ๋กœ ์‚ฌ์šฉ) @@ -1326,7 +1276,7 @@ const MediaPanel = React.forwardRef( if (playListInfo && playListInfo.length > 0) { videoInitialFocused(); } - }, [sideContentsVisible, panelInfo.modal]); + }, [panelInfo.modal]); // liveChannel initial selectedIndex useEffect(() => { @@ -1796,11 +1746,8 @@ const MediaPanel = React.forwardRef( }, [currentSubtitleBlob, isSubtitleActive]); const currentSideButtonStatus = useMemo(() => { - if (panelInfo?.shptmBanrTpNm !== 'MEDIA' && !panelInfo?.modal && sideContentsVisible) { - return true; - } return false; - }, [panelInfo, sideContentsVisible]); + }, []); const videoType = useMemo(() => { if (currentPlayingUrl) { @@ -1920,11 +1867,7 @@ const MediaPanel = React.forwardRef( ); } } - if (!sideContentsVisible) { - setPrevChannelIndex(selectedIndex); - } - setSideContentsVisible(true); - }, [dispatch, playListInfo, selectedIndex, sideContentsVisible, initialEnter]); + }, [dispatch, playListInfo, selectedIndex, initialEnter]); const handleIndicatorUpClick = useCallback(() => { if (!initialEnter) { @@ -1967,11 +1910,7 @@ const MediaPanel = React.forwardRef( ); } } - if (!sideContentsVisible) { - setPrevChannelIndex(selectedIndex); - } - setSideContentsVisible(true); - }, [dispatch, playListInfo, selectedIndex, sideContentsVisible, initialEnter]); + }, [dispatch, playListInfo, selectedIndex, initialEnter]); useEffect(() => { if (panelInfo.shptmBanrTpNm === 'VOD' && panelInfo.patnrId && panelInfo.showId) { @@ -2041,29 +1980,6 @@ const MediaPanel = React.forwardRef( }; const [initialEnter, setInitialEnter] = USE_STATE('initialEnter', true); - const [initialEnterV2, setInitialEnterV2] = USE_STATE('initialEnterV2', true); - const timerId = useRef(null); - const timerIdV2 = useRef(null); - - const showSideContents = useMemo(() => { - return ( - sideContentsVisible && - playListInfo && - panelInfo?.shptmBanrTpNm !== 'MEDIA' && - !panelInfo?.modal && - isOnTop - ); - }, [sideContentsVisible, playListInfo, panelInfo, isOnTop]); - - const showBelowContents = useMemo(() => { - return ( - belowContentsVisible && - playListInfo && - panelInfo?.shptmBanrTpNm !== 'MEDIA' && - !panelInfo?.modal && - isOnTop - ); - }, [belowContentsVisible, playListInfo, panelInfo, isOnTop]); const qrCurrentItem = useMemo(() => { if (shopNowInfo?.length && panelInfo?.shptmBanrTpNm === 'LIVE') { @@ -2096,61 +2012,11 @@ const MediaPanel = React.forwardRef( return panelInfo.shptmBanrTpNm; }, [panelInfo.shptmBanrTpNm, playListInfo, selectedIndex]); - const clearTimer = useCallback(() => { - clearTimeout(timerId.current); - timerId.current = null; - }, []); - - const resetTimer = useCallback( - (timeout) => { - if (timerId.current) { - clearTimer(); - } - - if (initialEnter) { - setInitialEnter(false); - } - - timerId.current = setTimeout(() => { - setSideContentsVisible(false); - // setBelowContentsVisible(false); - }, timeout); - }, - [clearTimer, initialEnter, setInitialEnter, setSideContentsVisible] - ); - - const clearTimerV2 = useCallback(() => { - clearTimeout(timerIdV2.current); - timerIdV2.current = null; - }, []); - - const resetTimerV2 = useCallback( - (timeout) => { - // console.log('[TabContainerV2] resetTimerV2 ํ˜ธ์ถœ', timeout); - if (timerIdV2.current) { - // console.log('[TabContainerV2] ๊ธฐ์กด ํƒ€์ด๋จธ ํด๋ฆฌ์–ด'); - clearTimerV2(); - } - - if (initialEnterV2) { - // console.log('[TabContainerV2] initialEnterV2 false๋กœ ๋ณ€๊ฒฝ'); - setInitialEnterV2(false); - } - - timerIdV2.current = setTimeout(() => { - // console.log('[TabContainerV2] ํƒ€์ด๋จธ ์‹คํ–‰ - belowContentsVisible false๋กœ ๋ณ€๊ฒฝ'); - setBelowContentsVisible(false); - }, timeout); - }, - [clearTimerV2, initialEnterV2, setInitialEnterV2, setBelowContentsVisible] - ); // Redux๋กœ ์˜ค๋ฒ„๋ ˆ์ด ์ˆจ๊น€ useEffect(() => { if (shouldHideOverlays) { console.log('[MediaPanel] shouldHideOverlays true - ์˜ค๋ฒ„๋ ˆ์ด ์ˆจ๊น€'); - setSideContentsVisible(false); - setBelowContentsVisible(false); if (videoPlayer.current?.hideControls) { videoPlayer.current.hideControls(); @@ -2164,8 +2030,6 @@ const MediaPanel = React.forwardRef( useEffect(() => { if (shouldShowOverlays) { console.log('[MediaPanel] shouldShowOverlays true - ์˜ค๋ฒ„๋ ˆ์ด ํ‘œ์‹œ'); - setSideContentsVisible(true); - setBelowContentsVisible(true); if (videoPlayer.current?.showControls) { videoPlayer.current.showControls(); @@ -2175,16 +2039,6 @@ const MediaPanel = React.forwardRef( } }, [shouldShowOverlays, dispatch]); - // MediaPanel์ด ์ตœ์ƒ๋‹จ์ด ๋  ๋•Œ ์˜ค๋ฒ„๋ ˆ์ด ํ‘œ์‹œ (DetailPanel์—์„œ ๋ณต๊ท€) - useEffect(() => { - if (isOnTop && !panelInfo.modal && !videoVerticalVisible) { - console.log('[MediaPanel] isOnTop true - ์˜ค๋ฒ„๋ ˆ์ด ํ‘œ์‹œ'); - setSideContentsVisible(true); - setBelowContentsVisible(true); - // VideoPlayer๊ฐ€ belowContentsVisible prop์„ ๊ฐ์ง€ํ•ด์„œ ์ž๋™์œผ๋กœ controls ํ‘œ์‹œํ•จ - } - }, [isOnTop, panelInfo.modal, videoVerticalVisible]); - useEffect(() => { if (panelInfoRef.current?.modal && !panelInfo.modal && isOnTop && !videoVerticalVisible) { const focusTimer = setTimeout(() => { @@ -2197,104 +2051,6 @@ const MediaPanel = React.forwardRef( } }, [panelInfo.modal, isOnTop, videoVerticalVisible]); - useEffect(() => { - // tabContainerVersion === 1์ผ ๋•Œ๋งŒ ์‹คํ–‰ - if (tabContainerVersion !== 1) return; - - const node = document.querySelector(`[data-spotlight-id=${TAB_CONTAINER_SPOTLIGHT_ID}]`); - - if (!showSideContents || !node || videoVerticalVisible) return; - - // NOTE ์ฒซ ์ง„์ž… ์‹œ์—๋Š” 10์ดˆ ํ›„ ํƒญ์ด ๋‹ซํžˆ๋„๋ก ์„ค์ • - if (initialEnter) { - resetTimer(INITIAL_TIMEOUT); - } - - const handleEvent = () => resetTimer(REGULAR_TIMEOUT); - TARGET_EVENTS.forEach((event) => node.addEventListener(event, handleEvent)); - - return () => { - TARGET_EVENTS.forEach((event) => node.removeEventListener(event, handleEvent)); - - if (timerId.current) { - clearTimer(); - } - }; - }, [ - showSideContents, - videoVerticalVisible, - tabContainerVersion, - resetTimer, - initialEnter, - clearTimer, - ]); - - useEffect(() => { - if (initialEnter || !sideContentsVisible || videoVerticalVisible) return; - - // NOTE button์„ ํ†ตํ•ด ํƒญ์„ ์—ฐ ๊ฒฝ์šฐ 5์ดˆ ํ›„ ํƒญ์ด ๋‹ซํžˆ๋„๋ก ์„ค์ • - if (sideContentsVisible) { - resetTimer(REGULAR_TIMEOUT); - } - - return () => { - if (timerId.current) { - clearTimer(); - } - }; - }, [sideContentsVisible]); - - // TabContainerV2 ์ž๋™ ๋‹ซ๊ธฐ - useEffect(() => { - // tabContainerVersion === 2์ผ ๋•Œ๋งŒ ์‹คํ–‰ - if (tabContainerVersion !== 2) return; - - // console.log('[TabContainerV2] useEffect ์‹œ์ž‘', { - // showBelowContents, - // videoVerticalVisible, - // initialEnterV2, - // }); - - const node = document.querySelector(`[data-spotlight-id=${TAB_CONTAINER_V2_SPOTLIGHT_ID}]`); - // console.log('[TabContainerV2] DOM node:', node); - - if (!showBelowContents || !node || videoVerticalVisible) { - // console.log('[TabContainerV2] early return'); - return; - } - - // NOTE ์ฒซ ์ง„์ž… ์‹œ์—๋Š” 30์ดˆ ํ›„ ํƒญ์ด ๋‹ซํžˆ๋„๋ก ์„ค์ • - if (initialEnterV2) { - // console.log('[TabContainerV2] ์ฒซ ์ง„์ž… - ํƒ€์ด๋จธ ์‹œ์ž‘', INITIAL_TIMEOUT); - resetTimerV2(INITIAL_TIMEOUT); - } - - const handleEvent = (e) => { - // console.log('[TabContainerV2] ์ด๋ฒคํŠธ ๋ฐœ์ƒ:', e.type); - resetTimerV2(REGULAR_TIMEOUT); - }; - TARGET_EVENTS.forEach((event) => { - // console.log('[TabContainerV2] ์ด๋ฒคํŠธ ๋ฆฌ์Šค๋„ˆ ๋“ฑ๋ก:', event); - node.addEventListener(event, handleEvent); - }); - - return () => { - // console.log('[TabContainerV2] cleanup'); - TARGET_EVENTS.forEach((event) => node.removeEventListener(event, handleEvent)); - - if (timerIdV2.current) { - clearTimerV2(); - } - }; - }, [ - showBelowContents, - videoVerticalVisible, - tabContainerVersion, - resetTimerV2, - initialEnterV2, - clearTimerV2, - ]); - useLayoutEffect(() => { const videoContainer = document.querySelector(`.${css.videoContainer}`); @@ -2466,16 +2222,10 @@ const MediaPanel = React.forwardRef( selectedIndex={selectedIndex} qrCurrentItem={qrCurrentItem} setIsSubtitleActive={setIsSubtitleActive} - setSideContentsVisible={setSideContentsVisible} - sideContentsVisible={sideContentsVisible} - setBelowContentsVisible={setBelowContentsVisible} - belowContentsVisible={belowContentsVisible} videoVerticalVisible={videoVerticalVisible} setCurrentTime={setCurrentTime} setIsVODPaused={setIsVODPaused} broadcast={broadcast} - tabContainerVersion={tabContainerVersion} - tabIndexV2={tabIndexV2} dispatch={dispatch} > {typeof window === 'object' && window.PalmSystem && ( @@ -2501,91 +2251,6 @@ const MediaPanel = React.forwardRef( QRCodeUrl={playListInfo[selectedIndex]?.chatUrl} /> )} - - {tabContainerVersion === 1 && - currentSideButtonStatus && - !videoVerticalVisible && - playListInfo && ( - - )} - - {tabContainerVersion === 1 && showSideContents && ( - - )} - - {/* {shouldShowBelowTab && ( - <> - {belowTabMode === 'liveShow' && ( - setBelowTabMode('shopNowButton')} - tabTitle={[ - $L('SHOP NOW'), - panelInfo?.shptmBanrTpNm === 'LIVE' ? $L('LIVE CHANNEL') : $L('FEATURED SHOWS'), - ]} - selectedIndex={selectedIndex} - tabIndex={1} - /> - )} - {belowTabMode === 'shopNowButton' && ( - setBelowTabMode('shopNow')} /> - )} - {belowTabMode === 'shopNow' && ( - - )} - - )} */} - - {tabContainerVersion === 2 && showBelowContents && ( - setTabIndexV2(0)} - onLiveChannelButtonClick={() => setTabIndexV2(2)} - onTabClose={(newTabIndex) => setTabIndexV2(newTabIndex)} - tabVisible={belowContentsVisible} - /> - )} {activePopup === ACTIVE_POPUP.alertPopup && (