[250930] feat: YouMayLikeData관련 수정 및 배경이미지 개선

com.twin.app.shoptime/src/views/DetailPanel/DetailPanel.jsx

@@ -18,8 +18,6 @@ import DetailPanelSkeleton from './DetailPanelSkeleton/DetailPanelSkeleton';
 import Spotlight from '@enact/spotlight';
 import { setContainerLastFocusedElement } from '@enact/spotlight/src/container';
 
-import detailPanelBg
-  from '../../../assets/images/detailpanel/detailpanel-bg-1.png';
 import indicatorDefaultImage
   from '../../../assets/images/img-thumb-empty-144@3x.png';
 import { getDeviceAdditionInfo } from '../../actions/deviceActions';
@@ -47,6 +45,7 @@ import {
 } from '../../utils/helperMethods';
 import { SpotlightIds } from '../../utils/SpotlightIds';
 import THeaderCustom from './components/THeaderCustom';
+import DetailPanelBackground from './components/DetailPanelBackground';
 import css from './DetailPanel.module.less';
 import ProductAllSection from './ProductAllSection/ProductAllSection';
 import ThemeItemListOverlay from './ThemeItemListOverlay/ThemeItemListOverlay';
@@ -232,24 +231,8 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
     [scrollToSection]
   );
 
-  // ===== 고정 배경 이미지 설정 (detailPanelBg만 사용) =====
-  // 모든 DetailPanel에서 동일한 배경 이미지(detailpanel-bg-1.png) 사용
-  useEffect(() => {
-    console.log("[PartnerId] Partner background info:", {
-      panelPatnrId: panelPatnrId,
-      productDataPatnrId: productData?.patnrId,
-      productDataPatncNm: productData?.patncNm,
-      productDataThumbnailUrl960: productData?.thumbnailUrl960,
-      imageUrl: imageUrl,
-      detailPanelBg: detailPanelBg,
-    });
-
-    // 고정 배경 이미지만 설정 (파트너사별 변경 없이)
-    document.documentElement.style.setProperty(
-      "--bg-url",
-      `url(${detailPanelBg})`
-    );
-  }, [panelPatnrId, productData, imageUrl]);
+  // ===== 배경 이미지 설정 (컴포넌트로 구현되어 useEffect 불필요) =====
+  // DetailPanelBackground 컴포넌트로 배경 렌더링
 
   // FP 방식으로 pending scroll 처리 (메모리 누수 방지)
   useEffect(() => {
@@ -338,43 +321,25 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
   useEffect(() => {
     const shouldLoadRecommendations = fp.pipe(() => lgCatCd, fp.isNotEmpty)();
 
-    console.log('[YouMayLike] API 호출 체크:', {
-      lgCatCd,
-      shouldLoadRecommendations,
-      panelInfo_curationId: panelInfo?.curationId,
-      panelInfo_patnrId: panelInfo?.patnrId,
-      panelInfo_prdtId: panelInfo?.prdtId,
-      // 비교용 - 제거 예정
-      old_panelCurationId: panelCurationId,
-      old_panelPatnrId: panelPatnrId,
-      old_panelPrdtId: panelPrdtId
-    });
-
     if (shouldLoadRecommendations) {
-      const apiParams = {
+      const youMayLikeParams = {
         lgCatCd: lgCatCd,
         exclCurationId: panelInfo?.curationId,
         exclPatnrId: panelInfo?.patnrId,
         exclPrdtId: panelInfo?.prdtId,
+        catDpTh3: productData?.catDpTh3,
+        catDpTh4: productData?.catDpTh4,
       };
-      console.log('[YouMayLike] getMainYouMayLike API 호출 중...', {
-        apiParams,
-        currentProduct: {
-          patnrId: panelInfo?.patnrId,
-          prdtId: panelInfo?.prdtId,
-          curationId: panelInfo?.curationId
-        }
-      });
-      dispatch(getMainYouMayLike(apiParams));
-    } else {
-      console.log('[YouMayLike] API 호출하지 않음 - lgCatCd가 비어있음');
+
+      // console.log('[YouMayLike]-youmaylikeData 요청 파라미터:', youMayLikeParams);
+      dispatch(getMainYouMayLike(youMayLikeParams));
     }
   }, [panelInfo?.curationId, panelInfo?.patnrId, panelInfo?.prdtId, lgCatCd]);
 
   const getlgCatCd = useCallback(() => {
     // DetailPanel.backup.jsx와 완전히 동일한 로직
     if (productData && !panelInfo?.curationId) {
-      console.log('[YouMayLike] lgCatCd 설정 (일반상품):', productData.catCd);
+      // console.log('[YouMayLike] lgCatCd 설정 (일반상품):', productData.catCd);
       setLgCatCd(productData.catCd);
     } else if (
       themeProductInfos &&
@@ -382,16 +347,16 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
       panelInfo?.curationId
     ) {
       const themeCatCd = themeProductInfos[selectedIndex]?.catCd;
-      console.log('[YouMayLike] lgCatCd 설정 (테마상품):', themeCatCd);
+      // console.log('[YouMayLike] lgCatCd 설정 (테마상품):', themeCatCd);
       setLgCatCd(themeCatCd);
     } else {
-      console.log('[YouMayLike] lgCatCd 설정 (빈값):', {
-        hasProductData: !!productData,
-        panelCurationId: panelInfo?.curationId,
-        hasThemeProductInfos: !!themeProductInfos,
-        selectedIndex,
-        themeProductPmtSuptYn: themeProductInfos?.[selectedIndex]?.pmtSuptYn
-      });
+      // console.log('[YouMayLike] lgCatCd 설정 (빈값):', {
+      //   hasProductData: !!productData,
+      //   panelCurationId: panelInfo?.curationId,
+      //   hasThemeProductInfos: !!themeProductInfos,
+      //   selectedIndex,
+      //   themeProductPmtSuptYn: themeProductInfos?.[selectedIndex]?.pmtSuptYn
+      // });
       setLgCatCd("");
     }
   }, [productData, themeProductInfos, selectedIndex, panelInfo?.curationId]);
@@ -402,21 +367,21 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
   }, [themeProductInfos, productData, panelInfo, selectedIndex, getlgCatCd]);
 
   // lgCatCd 변경 추적 로그
-  useEffect(() => {
-    console.log('[YouMayLike] lgCatCd 변경됨:', {
-      lgCatCd,
-      willTriggerYouMayLike: !!lgCatCd
-    });
-  }, [lgCatCd]);
+  // useEffect(() => {
+  //   console.log('[YouMayLike] lgCatCd 변경됨:', {
+  //     lgCatCd,
+  //     willTriggerYouMayLike: !!lgCatCd
+  //   });
+  // }, [lgCatCd]);
 
   // youmaylikeData 변경 추적 로그
-  useEffect(() => {
-    console.log('[YouMayLike] DetailPanel - youmaylikeData 변경됨:', {
-      youmaylikeData,
-      hasData: !!(youmaylikeData && youmaylikeData.length > 0),
-      dataLength: youmaylikeData?.length || 0
-    });
-  }, [youmaylikeData]);
+  // useEffect(() => {
+  //   console.log('[YouMayLike] DetailPanel - youmaylikeData 변경됨:', {
+  //     youmaylikeData,
+  //     hasData: !!(youmaylikeData && youmaylikeData.length > 0),
+  //     dataLength: youmaylikeData?.length || 0
+  //   });
+  // }, [youmaylikeData]);
 
   // 최근 본 상품 저장이 필요하면:
   // - 순수 유틸로 빌드/업서트 함수 작성 후, 적절한 useEffect에서 호출하세요.
@@ -729,7 +694,10 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
   }, []);
 
   return (
-    <div ref={containerRef}>
+    <div ref={containerRef} style={{ position: 'relative', width: '100%', height: '100%' }}>
+      {/* 배경 이미지 및 그라데이션 컴포넌트 - 모든 콘텐츠 뒤에 렌더링 */}
+      <DetailPanelBackground />
+      
       <TPanel
         isTabActivated={false}
         className={css.detailPanelWrap}
@@ -791,7 +759,6 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
                   themeProductInfo={themeProductInfo}
                   onReady={handleProductAllSectionReady}
                   isOnRender={renderStates.canRender}
-                  youmaylikeData={youmaylikeData}
                 />
               );
             }