[251013] feat:ProductVideoV2 , react-portal적용

🕐 커밋 시간: 2025. 10. 13. 15:15:13

📊 변경 통계:
  • 총 파일: 6개
  • 추가: +77줄
  • 삭제: -448줄

📁 추가된 파일:
  + com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/ProductVideo/ProductVideo.v2.jsx
  + com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/ProductVideo/index.js

📝 수정된 파일:
  ~ com.twin.app.shoptime/src/views/DetailPanel/DetailPanel.jsx
  ~ com.twin.app.shoptime/src/views/DetailPanel/ProductAllSection/ProductAllSection.jsx
  ~ com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/ProductVideo/ProductVideo.module.less

🗑️ 삭제된 파일:
  - com.twin.app.shoptime/[251013]_RollingUnit_리렌더링_분석_및_해결방법.md

🔧 함수 변경 내용:
  📄 com.twin.app.shoptime/src/views/DetailPanel/ProductAllSection/ProductAllSection.jsx (javascript):
    🔄 Modified: extractProductMeta()
  📄 com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/ProductVideo/ProductVideo.module.less (unknown):
    ✅ Added: global()
  📄 com.twin.app.shoptime/[251013]_RollingUnit_리렌더링_분석_및_해결방법.md (md파일):
    ❌ Deleted: Chain(), handleItemFocus(), useCallback(), renderItem(), JustForSwitchBanner(), useState(), useEffect(), cancelAnimationFrame(), requestAnimationFrame(), doSendLogGNB(), onItemFocus(), useRef(), current(), JustForYouBanner(), RollingUnit()

🔧 주요 변경 내용:
  • 핵심 비즈니스 로직 개선
  • 개발 문서 및 가이드 개선

Performance: 코드 최적화로 성능 개선 기대

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

@@ -590,30 +590,6 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
     [panelPrdtId, productData]
   );
 
-  // ===== 파트너사별 배경 이미지 설정 로직 (현재 비활성화) =====
-  // thumbnailUrl960을 사용하여 파트너사별로 다른 배경 이미지를 설정하는 기능
-  // Pink Pong 등 특정 파트너사에서만 thumbnailUrl960 데이터가 있어서 배경이 변경됨
-  // 현재는 고정 배경(detailPanelBg)만 사용하기 위해 주석 처리
-
-  /*
-  useLayoutEffect(() => {
-    const shouldSetBackground = fp.pipe(
-      () => ({ imageUrl, containerRef }),
-      ({ imageUrl, containerRef }) => 
-        fp.isNotNil(imageUrl) && fp.isNotNil(containerRef.current)
-    )();
-
-    if (shouldSetBackground) {
-      containerRef.current.style.setProperty("--bg-url", `url('${imageUrl}')`);
-    }
-  }, [imageUrl]);
-  */
-
-  // console.log('productDataSource :', productDataSource);
-
-  // 언마운트 시 인덱스 초기화가 필요하면:
-  // useEffect(() => () => setSelectedIndex(0), [])
-
   const handleProductAllSectionReady = useCallback(() => {
     const spotTime = setTimeout(() => {
       Spotlight.focus(SpotlightIds.DETAIL_SHOPBYMOBILE);
@@ -625,8 +601,6 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
 
   return (
     <div ref={containerRef}>
-      {/* 배경 이미지 및 그라데이션 컴포넌트 - 모든 콘텐츠 뒤에 렌더링 */}
-      {/* launchedFromPlayer: PlayerPanel에서 진입 시 true, 다른 패널에서 진입 시 false/undefined */}
       <DetailPanelBackground launchedFromPlayer={panelLaunchedFromPlayer} />
 
       <TPanel