[상품 상세 배경 관련]

- 배경 이미지 적용
 - 파트너 아이디 props로 내려주고 받아서 처리하는 방식으로 처리.

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

@@ -1,22 +1,41 @@
 // src/views/DetailPanel/DetailPanel.new.jsx
-import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import React, {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 
-import { useDispatch, useSelector } from 'react-redux';
+import {
+  useDispatch,
+  useSelector,
+} from 'react-redux';
 
 import Spotlight from '@enact/spotlight';
 import { setContainerLastFocusedElement } from '@enact/spotlight/src/container';
 
 import { getDeviceAdditionInfo } from '../../actions/deviceActions';
 import { getThemeCurationDetailInfo } from '../../actions/homeActions';
-import { getMainCategoryDetail, getMainYouMayLike } from '../../actions/mainActions';
+import {
+  getMainCategoryDetail,
+  getMainYouMayLike,
+} from '../../actions/mainActions';
 import { finishModalMediaForce } from '../../actions/mediaActions';
-import { popPanel, updatePanel } from '../../actions/panelActions';
+import {
+  popPanel,
+  updatePanel,
+} from '../../actions/panelActions';
 import {
   finishVideoPreview,
   pauseFullscreenVideo,
   resumeFullscreenVideo,
 } from '../../actions/playActions';
-import { clearProductDetail, getProductOptionId } from '../../actions/productActions';
+import {
+  clearProductDetail,
+  getProductOptionId,
+} from '../../actions/productActions';
 import { clearAllToasts } from '../../actions/toastActions';
 import TBody from '../../components/TBody/TBody';
 import TPanel from '../../components/TPanel/TPanel';
@@ -734,7 +753,7 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
 
   return (
     <div ref={containerRef}>
-      <DetailPanelBackground launchedFromPlayer={panelLaunchedFromPlayer} />
+      <DetailPanelBackground launchedFromPlayer={panelLaunchedFromPlayer} patnrId={panelPatnrId}/>
 
       <TPanel
         isTabActivated={false}

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

@@ -1,7 +1,17 @@
 // src/views/DetailPanel/components/DetailPanelBackground/DetailPanelBackground.jsx
-import React, { useEffect } from 'react';
+import React, {
+  useEffect,
+  useMemo,
+} from 'react';
+
+import hsn from '../../../../../assets/images/bg/hsn.png';
+import koreaKiosk from '../../../../../assets/images/bg/koreaKiosk.png';
+import lgelectronics from '../../../../../assets/images/bg/lgelectronics.png';
+import ontv4u from '../../../../../assets/images/bg/ontv4u.png';
+import Pinkfong from '../../../../../assets/images/bg/Pinkfong.png';
+import qvc from '../../../../../assets/images/bg/qvc.png';
+import shoplc from '../../../../../assets/images/bg/shoplc.png';
 import css from './DetailPanelBackground.module.less';
-import detailPanelBg from '../../../../../assets/images/detailpanel/detailpanel-bg-1.png';
 
 /**
  * DetailPanel의 배경 이미지와 그라데이션을 렌더링하는 컴포넌트
@@ -12,12 +22,28 @@ import detailPanelBg from '../../../../../assets/images/detailpanel/detailpanel-
  *   - false/undefined: 다른 패널(Shop Now, You May Like 등)에서 진입
  *   - 이 값에 따라 배경 UI를 다르게 표시할 수 있음
  */
-export default function DetailPanelBackground({ launchedFromPlayer = false }) {
+export default function DetailPanelBackground({ launchedFromPlayer = false, patnrId }) {
   useEffect(() => {
     console.log('[DetailPanelBackground] 배경 이미지 경로:', detailPanelBg);
     console.log('[DetailPanelBackground] launchedFromPlayer:', launchedFromPlayer);
   }, [launchedFromPlayer]);
 
+  const BG_MAP = {
+    1: qvc,
+    2: hsn,
+    4: ontv4u,
+    9: lgelectronics,
+    11: shoplc,
+    16: koreaKiosk,
+    19: Pinkfong,
+  };
+
+  const detailPanelBg = useMemo(() => {
+    return BG_MAP[patnrId] || qvc;
+  }, [patnrId]);
+
+  //partnrId 1 = QVC, 2 = HSN, 4 = ONTV, 9 = LG ELECTRONICS, 11 = SHOPLC, 19 = PINKPONG, 16 = KOREA KIOSK, 
+
   return (
     <div className={css.backgroundContainer}>
       {/* 실제 배경 이미지 */}