diff --git a/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/YouMayAlsoLike/YouMayAlsoLike.jsx b/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/YouMayAlsoLike/YouMayAlsoLike.jsx index f2a7e0df..3ce12f32 100644 --- a/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/YouMayAlsoLike/YouMayAlsoLike.jsx +++ b/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/YouMayAlsoLike/YouMayAlsoLike.jsx @@ -1,52 +1,33 @@ -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 { Job } from '@enact/core/util'; -import SpotlightContainerDecorator - from '@enact/spotlight/SpotlightContainerDecorator'; +import SpotlightContainerDecorator from '@enact/spotlight/SpotlightContainerDecorator'; import Spottable from '@enact/spotlight/Spottable'; import { clearThemeDetail } from '../../../../actions/homeActions'; -import { - popPanel, - pushPanel, -} from '../../../../actions/panelActions'; +import { popPanel, pushPanel, updatePanel } from '../../../../actions/panelActions'; import { finishVideoPreview } from '../../../../actions/playActions'; import THeader from '../../../../components/THeader/THeader'; import TItemCard from '../../../../components/TItemCard/TItemCard'; -import TVerticalPagenator - from '../../../../components/TVerticalPagenator/TVerticalPagenator'; -import TVirtualGridList - from '../../../../components/TVirtualGridList/TVirtualGridList'; +import TVerticalPagenator from '../../../../components/TVerticalPagenator/TVerticalPagenator'; +import TVirtualGridList from '../../../../components/TVirtualGridList/TVirtualGridList'; import useScrollTo from '../../../../hooks/useScrollTo'; -import { - LOG_CONTEXT_NAME, - LOG_MESSAGE_ID, - panel_names, -} from '../../../../utils/Config'; +import { LOG_CONTEXT_NAME, LOG_MESSAGE_ID, panel_names } from '../../../../utils/Config'; import { $L } from '../../../../utils/helperMethods'; import css from './YouMayAlsoLike.module.less'; -const SpottableComponent = Spottable("div"); +const SpottableComponent = Spottable('div'); const Container = SpotlightContainerDecorator( { - enterTo: "last-focused", + enterTo: 'last-focused', leaveFor: { - left: "spotlight-product-info-section-container", + left: 'spotlight-product-info-section-container', }, }, - "div" + 'div' ); export default function YouMayAlsoLike({ @@ -79,10 +60,7 @@ export default function YouMayAlsoLike({ youmaylikeProductData.length > 0 && youmaylikeProductData.length > 9 ) { - const processedData = youmaylikeProductData.slice( - 0, - youmaylikeProductData.length - 1 - ); + const processedData = youmaylikeProductData.slice(0, youmaylikeProductData.length - 1); // console.log('[YouMayLike] 처리된 데이터 설정:', { // processedLength: processedData.length, // processedData @@ -95,21 +73,15 @@ export default function YouMayAlsoLike({ }, [youmaylikeProductData]); const panels = useSelector((state) => state.panels.panels); - const themeProductInfos = useSelector( - (state) => state.home.themeCurationDetailInfoData - ); + const themeProductInfos = useSelector((state) => state.home.themeCurationDetailInfoData); // const [focused, setFocused] = useState(false); const cursorOpen = useRef(new Job((func) => func(), 1000)); const launchedFromPlayer = useMemo(() => { - const detailPanelIndex = panels.findIndex( - ({ name }) => name === "detailpanel" - ); - const playerPanelIndex = panels.findIndex( - ({ name }) => name === "playerpanel" - ); + const detailPanelIndex = panels.findIndex(({ name }) => name === 'detailpanel'); + const playerPanelIndex = panels.findIndex(({ name }) => name === 'playerpanel'); return detailPanelIndex - 1 === playerPanelIndex; }, [panels]); @@ -142,19 +114,15 @@ export default function YouMayAlsoLike({
{newYoumaylikeProductData && newYoumaylikeProductData.length > 0 && ( - - + +
{newYoumaylikeProductData?.map((product, index) => { const { @@ -171,15 +139,22 @@ export default function YouMayAlsoLike({ const handleItemClick = () => { dispatch(finishVideoPreview()); - dispatch(popPanel(panel_names.DETAIL_PANEL)); if (themeProductInfos && themeProductInfos.length > 0) { dispatch(clearThemeDetail()); } + + // popPanel + pushPanel 대신 updatePanel 사용 + // DetailPanel을 언마운트하지 않고 상품 정보만 업데이트 + // 이렇게 하면 백그라운드 비디오 제어 상태가 유지됨 dispatch( - pushPanel({ + updatePanel({ name: panel_names.DETAIL_PANEL, panelInfo: { + showNm: panelInfo?.showNm, + showId: panelInfo?.showId, + liveFlag: panelInfo?.liveFlag, + thumbnailUrl: panelInfo?.thumbnailUrl, patnrId, prdtId, launchedFromPlayer: launchedFromPlayer, @@ -207,9 +182,7 @@ export default function YouMayAlsoLike({ offerInfo={offerInfo} productName={prdtNm} onClick={handleItemClick} - label={ - index * 1 + 1 + " of " + newYoumaylikeProductData.length - } + label={index * 1 + 1 + ' of ' + newYoumaylikeProductData.length} lastLabel=" go to detail, button" /> );