[251019] fix: YouMayAlsoLike.jsx pushPanel->updatePanel

🕐 커밋 시간: 2025. 10. 19. 18:02:54

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

📝 수정된 파일:
  ~ com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/YouMayAlsoLike/YouMayAlsoLike.jsx

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({
     <div>
       {newYoumaylikeProductData && newYoumaylikeProductData.length > 0 && (
         <TVerticalPagenator
-          spotlightId={"detail_youMayAlsoLike_area"}
+          spotlightId={'detail_youMayAlsoLike_area'}
           data-wheel-point={true}
           className={css.tVerticalPagenator}
           defaultContainerId={panelInfo?.focusedContainerId}
           onFocusedContainerId={onFocusedContainerId}
           topMargin={36}
         >
-          <Container
-            className={css.container}
-            onFocus={_onFocus}
-            onBlur={_onBlur}
-          >
-            <THeader title={$L("YOU MAY ALSO LIKE")} className={css.tHeader} />
+          <Container className={css.container} onFocus={_onFocus} onBlur={_onBlur}>
+            <THeader title={$L('YOU MAY ALSO LIKE')} className={css.tHeader} />
             <div className={css.renderCardContainer}>
               {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"
                   />
                 );