[251012] fix: ProductAllSection 렌더링 최적화-1

🕐 커밋 시간: 2025. 10. 12. 08:02:13

📊 변경 통계:
  • 총 파일: 3개
  • 추가: +48줄
  • 삭제: -313줄

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

🗑️ 삭제된 파일:
  - com.twin.app.shoptime/src/views/MediaPanel/README.md

🔧 함수 변경 내용:
  📄 com.twin.app.shoptime/src/views/DetailPanel/ProductAllSection/ProductAllSection.jsx (javascript):
    🔄 Modified: SpotlightContainerDecorator(), extractProductMeta()
  📄 com.twin.app.shoptime/src/views/MediaPanel/README.md (md파일):
     Deleted: dispatch(), useDispatch(), useRef()

🔧 주요 변경 내용:
  • 개발 문서 및 가이드 개선

Performance: 코드 최적화로 성능 개선 기대
This commit is contained in:
2025-10-12 08:02:15 +09:00
parent a79b57ff4b
commit 159dfa3f3a
3 changed files with 50 additions and 322 deletions

View File

@@ -60,16 +60,16 @@ const MediaPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
// modal/full screen에 따른 일시정지/재생 처리
useEffect(() => {
console.log('[MediaPanel] ========== isOnTop useEffect ==========');
console.log('[MediaPanel] isOnTop:', isOnTop);
console.log('[MediaPanel] panelInfo:', JSON.stringify(panelInfo, null, 2));
// console.log('[MediaPanel] ========== isOnTop useEffect ==========');
// console.log('[MediaPanel] isOnTop:', isOnTop);
// console.log('[MediaPanel] panelInfo:', JSON.stringify(panelInfo, null, 2));
if (panelInfo && panelInfo.modal) {
if (!isOnTop) {
console.log('[MediaPanel] Not on top - pausing video');
// console.log('[MediaPanel] Not on top - pausing video');
dispatch(pauseModalMedia());
} else if (isOnTop && panelInfo.isPaused) {
console.log('[MediaPanel] Back on top - resuming video');
// console.log('[MediaPanel] Back on top - resuming video');
dispatch(resumeModalMedia());
}
}
@@ -79,10 +79,10 @@ const MediaPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
useEffect(() => {
if (panelInfo?.modal && videoPlayer.current) {
if (panelInfo.isPaused) {
console.log('[MediaPanel] Executing pause via videoPlayer.current');
// console.log('[MediaPanel] Executing pause via videoPlayer.current');
videoPlayer.current.pause();
} else if (panelInfo.isPaused === false) {
console.log('[MediaPanel] Executing play via videoPlayer.current');
// console.log('[MediaPanel] Executing play via videoPlayer.current');
videoPlayer.current.play();
}
}
@@ -148,7 +148,7 @@ const MediaPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
// 비디오 클릭 시 modal → fullscreen 전환
const onVideoClick = useCallback(() => {
if (panelInfo.modal) {
console.log('[MediaPanel] Video clicked - switching to fullscreen');
// console.log('[MediaPanel] Video clicked - switching to fullscreen');
dispatch(switchMediaToFullscreen());
}
}, [dispatch, panelInfo.modal]);
@@ -263,7 +263,7 @@ const MediaPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
const onEnded = useCallback(
(e) => {
console.log('[MediaPanel] Video ended');
// console.log('[MediaPanel] Video ended');
// 비디오 종료 시 패널 닫기
Spotlight.pause();
setTimeout(() => {
@@ -288,11 +288,11 @@ const MediaPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
setVideoLoaded(false);
}, [currentPlayingUrl]);
console.log('[MediaPanel] ========== Rendering ==========');
console.log('[MediaPanel] isOnTop:', isOnTop);
console.log('[MediaPanel] panelInfo:', JSON.stringify(panelInfo, null, 2));
console.log('[MediaPanel] currentPlayingUrl:', currentPlayingUrl);
console.log('[MediaPanel] hasVideoPlayer:', !!videoPlayer.current);
// console.log('[MediaPanel] ========== Rendering ==========');
// console.log('[MediaPanel] isOnTop:', isOnTop);
// console.log('[MediaPanel] panelInfo:', JSON.stringify(panelInfo, null, 2));
// console.log('[MediaPanel] currentPlayingUrl:', currentPlayingUrl);
// console.log('[MediaPanel] hasVideoPlayer:', !!videoPlayer.current);
return (
<TPanel