[251114] feat: ProductAllSection ProductVideo.v3

🕐 커밋 시간: 2025. 11. 14. 14:24:07

📊 변경 통계:
  • 총 파일: 13개
  • 추가: +135줄
  • 삭제: -54줄

📁 추가된 파일:
  + com.twin.app.shoptime/src/components/VideoPlayer/VideoPlayer.v3.js
  + com.twin.app.shoptime/src/components/VideoPlayer/VideoPlayer.v3.module.less
  + com.twin.app.shoptime/src/hooks/useMediaPanelController.js
  + com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/ProductVideo/ProductVideo.v3.jsx
  + com.twin.app.shoptime/src/views/MediaPanel/MediaPanel.v3.jsx
  + com.twin.app.shoptime/src/views/MediaPanel/MediaPanel.v3.module.less

📝 수정된 파일:
  ~ com.twin.app.shoptime/src/actions/mediaActions.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/ProductAllSection/ProductAllSection.module.less
  ~ com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/ProductVideo/ProductVideo.jsx
  ~ com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/ProductVideo/ProductVideo.v2.jsx
  ~ com.twin.app.shoptime/src/views/MainView/MainView.jsx

🔧 함수 변경 내용:
  📄 com.twin.app.shoptime/src/actions/mediaActions.js (javascript):
    🔄 Modified: switchMediaToModal()
  📄 com.twin.app.shoptime/src/views/DetailPanel/ProductAllSection/ProductAllSection.jsx (javascript):
    🔄 Modified: SpotlightContainerDecorator(), extractProductMeta()
  📄 com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/ProductVideo/ProductVideo.jsx (javascript):
    ✅ Added: Spottable()
  📄 com.twin.app.shoptime/src/components/VideoPlayer/VideoPlayer.v3.js (javascript):
    ✅ Added: getControlsHandleAboveHoldConfig(), shouldJump(), calcNumberValueOfPlaybackRate(), getDurFmt(), getVideoPhoneNumberClassNames()
  📄 com.twin.app.shoptime/src/components/VideoPlayer/VideoPlayer.v3.module.less (unknown):
    ✅ Added: gradient(), focused(), position(), rotate(), applySkins(), scale()
  📄 com.twin.app.shoptime/src/hooks/useMediaPanelController.js (javascript):
    ✅ Added: MediaPanelControllerProvider(), useMediaPanelController()
  📄 com.twin.app.shoptime/src/views/MediaPanel/MediaPanel.v3.jsx (javascript):
    ✅ Added: findSelector(), getLogTpNo(), normalizeModalStyle(), parseValue(), handleVisibilityChange(), onKeyDown(), handleEvent(), propsAreEqual()

🔧 주요 변경 내용:
  • 핵심 비즈니스 로직 개선
  • UI 컴포넌트 아키텍처 개선

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

@@ -1,41 +1,22 @@
 // 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';
@@ -148,7 +129,7 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
     };
   }, [dispatch]);
 
-  const onClick = useCallback(
+  const onBackClick = useCallback(
     (isCancelClick) => (ev) => {
       fp.pipe(
         () => {
@@ -195,7 +176,7 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
 
   const onBackButtonFocus = useCallback(() => {
     dispatch(clearAllToasts());
-  },[dispatch])
+  }, [dispatch]);
 
   const handleScrollToSection = useCallback(
     (sectionId) => {
@@ -429,13 +410,22 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
       dispatch(
         updatePanel({
           name: panel_names.DETAIL_PANEL,
-          panelInfo: { shouldReload: false }
+          panelInfo: { shouldReload: false },
         })
       );
 
       console.log('[DetailPanel] Reload complete');
     }
-  }, [panelShouldReload, dispatch, panelType, panelPatnrId, panelCurationId, panelBgImgNo, panelPrdtId, panelLiveReqFlag]);
+  }, [
+    panelShouldReload,
+    dispatch,
+    panelType,
+    panelPatnrId,
+    panelCurationId,
+    panelBgImgNo,
+    panelPrdtId,
+    panelLiveReqFlag,
+  ]);
 
   // 최근 본 상품 트리거 예시:
   // useEffect(() => {
@@ -730,7 +720,7 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
       <TPanel
         isTabActivated={false}
         className={css.detailPanelWrap}
-        handleCancel={onClick(true)}
+        handleCancel={onBackClick(true)}
         spotlightId={spotlightId}
       >
         <THeaderCustom
@@ -738,7 +728,7 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
           prdtId={productData?.prdtId}
           title={headerTitle}
           onBackButton
-          onClick={onClick(false)}
+          onClick={onBackClick(false)}
           onBackButtonFocus={onBackButtonFocus}
           spotlightDisabled={isLoading}
           onSpotlightUp={onSpotlightUpTButton}
@@ -747,7 +737,6 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
           ariaLabel={ariaLabel}
           logoImg={productData?.patncLogoPath}
           patnrId={panelPatnrId}
-          
         />
         <TBody
           className={css.tbody}