optrader/shoptime
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[251118] feat: playActions 함수 추가

Browse Source 
🕐 커밋 시간: 2025. 11. 18. 05:08:17

📊 변경 통계:
  • 총 파일: 4개
  • 추가: +245줄
  • 삭제: -22줄

📝 수정된 파일:
  ~ com.twin.app.shoptime/src/actions/playActions.js
  ~ com.twin.app.shoptime/src/views/DetailPanel/DetailPanel.jsx
  ~ com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RandomUnit.jsx
  ~ com.twin.app.shoptime/src/views/HomePanel/HomePanel.jsx

🔧 주요 변경 내용:
  • 핵심 비즈니스 로직 개선
  • 대규모 기능 개발
This commit is contained in:
hyeon soo noh
2025-11-18 05:08:18 +09:00
parent 42095d9d61
commit ae0e24144a
4 changed files with 245 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

135
com.twin.app.shoptime/src/actions/playActions.js
View File

@@ -217,7 +217,7 @@ export const finishVideoPreview = () => (dispatch, getState) => {
clearTimeout(startVideoFocusTimer);
startVideoFocusTimer = null;
}
dispatch(popPanel());
// dispatch(popPanel());
}
};
@@ -235,7 +235,7 @@ export const finishModalVideoForce = () => (dispatch, getState) => {
startVideoFocusTimer = null;
}
// panelName을 지정하면 스택 어디에 있든 해당 패널을 제거
dispatch(popPanel(panel_names.PLAYER_PANEL));
// dispatch(popPanel(panel_names.PLAYER_PANEL));
}
};
@@ -256,6 +256,123 @@ export const finishAllVideoForce = () => (dispatch, getState) => {
}
};
// 🔽 패널은 유지하고 비디오만 중지하는 함수들
/**
* 패널을 닫지 않고(popPanel 하지 않고) 비디오만 중지합니다.
* 모달 비디오의 재생을 중지하고 숨김 상태로 만듭니다.
*/
export const stopModalVideoWithoutClosingPanel = () => (dispatch, getState) => {
const panels = getState().panels.panels;
// modal PlayerPanel 찾기
const modalPlayerPanel = panels.find(
(panel) => panel.name === panel_names.PLAYER_PANEL && panel.panelInfo?.modal
);
if (modalPlayerPanel) {
console.log('[stopModalVideoWithoutClosingPanel] Stopping modal video playback');
// 타이머 정리
if (startVideoFocusTimer) {
clearTimeout(startVideoFocusTimer);
startVideoFocusTimer = null;
}
// 패널은 유지하되, 비디오 중지 상태로 업데이트
dispatch(
updatePanel({
name: panel_names.PLAYER_PANEL,
panelInfo: {
...modalPlayerPanel.panelInfo,
shouldStop: true, // 비디오 중지 플래그
isPaused: true, // 일시정지 상태
isHidden: true, // 화면에서 숨김
},
})
);
// Redux 상태도 중지로 업데이트
dispatch(setVideoStopped());
}
};
/**
* 패널을 닫지 않고 전체화면 비디오만 중지합니다.
*/
export const stopFullscreenVideoWithoutClosingPanel = () => (dispatch, getState) => {
const panels = getState().panels.panels;
// 전체화면 PlayerPanel 찾기
const fullscreenPlayerPanel = panels.find(
(panel) => panel.name === panel_names.PLAYER_PANEL && !panel.panelInfo?.modal
);
if (fullscreenPlayerPanel) {
console.log('[stopFullscreenVideoWithoutClosingPanel] Stopping fullscreen video playback');
// 타이머 정리
if (startVideoFocusTimer) {
clearTimeout(startVideoFocusTimer);
startVideoFocusTimer = null;
}
// 패널은 유지하되, 비디오 중지 상태로 업데이트
dispatch(
updatePanel({
name: panel_names.PLAYER_PANEL,
panelInfo: {
...fullscreenPlayerPanel.panelInfo,
shouldStop: true, // 비디오 중지 플래그
isPaused: true,
isHidden: true,
},
})
);
// Redux 상태도 중지로 업데이트
dispatch(setVideoStopped());
}
};
/**
* 모든 비디오(모달+전체화면)를 패널 닫지 않고 중지합니다.
*/
export const stopAllVideosWithoutClosingPanel = () => (dispatch, getState) => {
const panels = getState().panels.panels;
// 모든 PlayerPanel 찾기
const playerPanels = panels.filter((panel) => panel.name === panel_names.PLAYER_PANEL);
if (playerPanels.length > 0) {
console.log('[stopAllVideosWithoutClosingPanel] Stopping all video playback');
// 타이머 정리
if (startVideoFocusTimer) {
clearTimeout(startVideoFocusTimer);
startVideoFocusTimer = null;
}
// 모든 PlayerPanel을 중지 상태로 업데이트
playerPanels.forEach((playerPanel) => {
dispatch(
updatePanel({
name: panel_names.PLAYER_PANEL,
panelInfo: {
...playerPanel.panelInfo,
shouldStop: true,
isPaused: true,
isHidden: true,
},
})
);
});
// Redux 상태도 중지로 업데이트
dispatch(setVideoStopped());
}
};
// 모달 비디오를 일시정지 (패널은 유지)
export const pauseModalVideo = () => (dispatch, getState) => {
const panels = getState().panels.panels;
@@ -358,7 +475,7 @@ export const resumeFullscreenVideo = () => (dispatch, getState) => {
};
// 모달 비디오를 1px로 축소 (배너 정보 저장)
export const shrinkVideoTo1px = () => (dispatch, getState) => {
export const hideModalVideo = () => (dispatch, getState) => {
const panels = getState().panels.panels;
// modal PlayerPanel 찾기
@@ -389,7 +506,7 @@ export const shrinkVideoTo1px = () => (dispatch, getState) => {
},
};
// console.log('[HomePanel] shrinkVideoTo1px: saving shrinkInfo', {
// console.log('[HomePanel] hideModalVideo: saving shrinkInfo', {
// shrinkInfo: updatedPlayerState.shrinkInfo,
// modalStyle: panelInfo.modalStyle,
// });
@@ -405,7 +522,7 @@ export const shrinkVideoTo1px = () => (dispatch, getState) => {
})
);
} else {
console.log('[HomePanel] shrinkVideoTo1px: No modal PlayerPanel found', {
console.log('[HomePanel] hideModalVideo: No modal PlayerPanel found', {
panels: panels.map((p) => ({
name: p.name,
modal: p.panelInfo?.modal,
@@ -416,7 +533,7 @@ export const shrinkVideoTo1px = () => (dispatch, getState) => {
};
// 축소된 모달 비디오를 원래 크기로 복구
export const expandVideoFrom1px = () => (dispatch, getState) => {
export const showModalVideo = () => (dispatch, getState) => {
const panels = getState().panels.panels;
// 축소된 modal PlayerPanel 찾기
@@ -431,7 +548,7 @@ export const expandVideoFrom1px = () => (dispatch, getState) => {
const panelInfo = shrunkModalPlayerPanel.panelInfo;
const shrinkInfo = panelInfo.playerState?.shrinkInfo;
// console.log('[HomePanel] expandVideoFrom1px: expanding video', {
// console.log('[HomePanel] showModalVideo: expanding video', {
// hasShrinkInfo: !!shrinkInfo,
// hasModalStyle: !!shrinkInfo?.modalStyle,
// hasModalContainerId: !!shrinkInfo?.modalContainerId,
@@ -450,7 +567,7 @@ export const expandVideoFrom1px = () => (dispatch, getState) => {
}),
};
// console.log('[HomePanel] expandVideoFrom1px: updated panelInfo shouldShrinkTo1px=false, modalStyle restored, skipModalStyleRecalculation=true');
// console.log('[HomePanel] showModalVideo: updated panelInfo shouldShrinkTo1px=false, modalStyle restored, skipModalStyleRecalculation=true');
dispatch(
updatePanel({
@@ -459,7 +576,7 @@ export const expandVideoFrom1px = () => (dispatch, getState) => {
})
);
} else {
console.log('[HomePanel] expandVideoFrom1px: No shrunk modal PlayerPanel found', {
console.log('[HomePanel] showModalVideo: No shrunk modal PlayerPanel found', {
panels: panels.map((p) => ({
name: p.name,
modal: p.panelInfo?.modal,

5
com.twin.app.shoptime/src/views/DetailPanel/DetailPanel.jsx
View File

@@ -28,7 +28,6 @@ import {
updatePanel,
} from '../../actions/panelActions';
import {
finishVideoPreview,
pauseFullscreenVideo,
resumeFullscreenVideo,
} from '../../actions/playActions';
@@ -170,9 +169,9 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
fp.pipe(
() => {
dispatch(clearAllToasts()); // BuyOption Toast 포함 모든 토스트 제거
dispatch(pauseFullscreenVideo()); // PLAYER_PANEL 비디오 중지
// dispatch(pauseFullscreenVideo()); // PLAYER_PANEL 비디오 중지
dispatch(finishModalMediaForce()); // MEDIA_PANEL(ProductVideo) 강제 종료
dispatch(finishVideoPreview());
// ✅ [251118] finishVideoPreview() 제거 - PlayerPanel 유지하기 위함
dispatch(popPanel(panel_names.DETAIL_PANEL));
},
() => {

6
com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RandomUnit.jsx
View File

@@ -22,7 +22,7 @@ import {
finishVideoPreview,
startVideoPlayer,
startVideoPlayerNew,
shrinkVideoTo1px,
hideModalVideo,
} from '../../../actions/playActions';
import CustomImage from '../../../components/CustomImage/CustomImage';
import usePriceInfo from '../../../hooks/usePriceInfo';
@@ -324,7 +324,7 @@ export default function RandomUnit({
videoPlayerable,
currentVideoBannerId,
});
dispatch(shrinkVideoTo1px());
dispatch(hideModalVideo());
}
if (handleItemFocus) {
@@ -346,7 +346,7 @@ export default function RandomUnit({
// 현재 비디오가 재생 중이면 1px로 축소 (주석: HomePanel 스크롤로 처리)
// if (currentVideoBannerId && videoPlayerable) {
// console.log('[RandomUnit] onBlur: shrinking video to 1px');
// dispatch(shrinkVideoTo1px());
// dispatch(hideModalVideo());
// }
// dispatch(finishVideoPreview());

121
com.twin.app.shoptime/src/views/HomePanel/HomePanel.jsx
View File

@@ -29,9 +29,9 @@ import { getSubCategory, getTop20Show } from '../../actions/mainActions';
import { getHomeOnSaleInfo } from '../../actions/onSaleActions';
import { updatePanel } from '../../actions/panelActions';
import {
expandVideoFrom1px,
showModalVideo,
finishVideoPreview,
shrinkVideoTo1px,
hideModalVideo,
startVideoPlayerNew,
} from '../../actions/playActions';
import { getBestSeller } from '../../actions/productActions';
@@ -497,7 +497,7 @@ const HomePanel = ({ isOnTop }) => {
}
// console.log('[HomePanel] Expansion attempt', expandAttemptRef.current + 1);
dispatch(expandVideoFrom1px());
dispatch(showModalVideo());
expandAttemptRef.current++;
}, 200);
}
@@ -514,7 +514,7 @@ const HomePanel = ({ isOnTop }) => {
// 아래로 스크롤: 비디오를 1px로 축소
// console.log('[HomePanel] Scrolling down - shrinking video');
if (!isVideoTransitionLocked) {
dispatch(shrinkVideoTo1px());
dispatch(hideModalVideo());
}
// 기존 타이머 취소
if (scrollExpandTimerRef.current) {
@@ -533,7 +533,7 @@ const HomePanel = ({ isOnTop }) => {
// 1초 후 자동으로 크기 조정
scrollExpandTimerRef.current = setTimeout(() => {
// console.log('[HomePanel] 1s passed - auto expanding video');
dispatch(expandVideoFrom1px());
dispatch(showModalVideo());
scrollExpandTimerRef.current = null;
}, 1000);
}
@@ -705,6 +705,22 @@ const HomePanel = ({ isOnTop }) => {
panels.map((p) => ({ name: p.name, modal: p.panelInfo?.modal }))
);
// ✅ [251118] 현재 재생 중인 비디오 정보 상세 로그
const playerPanel = panels.find((p) => p.name === panel_names.PLAYER_PANEL);
if (playerPanel) {
console.log('[HomeActive] 🎬 PlayerPanel 정보:', {
modal: playerPanel.panelInfo?.modal,
shouldShrinkTo1px: playerPanel.panelInfo?.shouldShrinkTo1px,
currentBannerId: playerPanel.panelInfo?.playerState?.currentBannerId,
bannerId: playerPanel.panelInfo?.bannerId,
showUrl: playerPanel.panelInfo?.showUrl?.substring(0, 50),
patnrId: playerPanel.panelInfo?.patnrId,
showId: playerPanel.panelInfo?.showId,
});
} else {
console.log('[HomeActive] ❌ PlayerPanel을 찾을 수 없음');
}
const isHomePanelActive = isOnTop;
console.log('[HomeActive] isHomePanelActive:', isHomePanelActive);
@@ -756,7 +772,7 @@ const HomePanel = ({ isOnTop }) => {
// 재생 기록 업데이트
lastPlayedBannerIdRef.current = bannerId;
console.log('[HomeActive] 재생 기록 업데이트:', bannerId);
}, [isOnTop, dispatch]);
}, [isOnTop, dispatch, panels]);
// ✅ [251118] DetailPanel 닫힘 감지 useEffect
const detailPanelClosedTime = useSelector(
@@ -770,8 +786,99 @@ const HomePanel = ({ isOnTop }) => {
console.log('[HomePanel] isOnTop:', isOnTop);
console.log('[HomePanel] videoPlayIntentRef.current:', videoPlayIntentRef.current);
console.log('[HomePanel] lastPlayedBannerIdRef.current:', lastPlayedBannerIdRef.current);
// ✅ [핵심] videoPlayIntentRef.current.videoProps가 있으면 비디오 재생
if (videoPlayIntentRef.current?.videoProps) {
const videoProps = videoPlayIntentRef.current.videoProps;
const bannerId = videoPlayIntentRef.current.bannerId;
console.log('[HomePanel] 비디오 재생 정보 있음:', {
bannerId,
showUrl: videoProps.showUrl,
patnrId: videoProps.patnrId,
showId: videoProps.showId,
});
// ✅ 중복 체크 우회를 위해 ref 초기화
lastPlayedBannerIdRef.current = null;
// ✅ scrollTop 상태 확인 (0이면 normal, 아니면 1px로 축소)
const currentScrollTop = prevScrollTopRef.current;
console.log('[HomePanel] 현재 scrollTop:', currentScrollTop);
// modalContainerId 변경으로 중복 체크 우회
const modifiedVideoProps = {
...videoProps,
modalContainerId: 'banner-modal-' + bannerId,
};
console.log('[HomePanel] dispatch(startVideoPlayerNew) 호출:', modifiedVideoProps);
dispatch(startVideoPlayerNew(modifiedVideoProps));
} else {
console.log('[HomePanel] ❌ videoProps가 없어서 비디오 재생 불가');
}
}, [detailPanelClosedTime, isOnTop]);
}
}, [detailPanelClosedTime, isOnTop, dispatch]);
// ✅ [251118] DetailPanel 복귀 후 비디오 크기 자동 조정
useEffect(() => {
// ✅ [251118] videoProps가 없으면 PlayerPanel에서 직접 읽기
const hasVideoInfo = videoPlayIntentRef.current?.videoProps ||
(panels.find((p) => p.name === panel_names.PLAYER_PANEL)?.panelInfo?.modal);
if (detailPanelClosedTime && isOnTop && hasVideoInfo) {
console.log('[HomePanel] 비디오 크기 조정 타이머 시작...');
console.log('[HomePanel] videoProps 여부:', !!videoPlayIntentRef.current?.videoProps);
// 약간의 지연 후 비디오 상태 확인 (재생이 완료된 후)
const timer = setTimeout(() => {
const currentScrollTop = prevScrollTopRef.current;
const playerPanelInfo = panels.find((p) => p.name === panel_names.PLAYER_PANEL);
const shouldShrink = playerPanelInfo?.panelInfo?.shouldShrinkTo1px;
// ✅ [251118] 더 자세한 로그 추가
console.log('[HomePanel] 비디오 크기 조정 체크:', {
currentScrollTop,
shouldShrink,
bannerId: videoPlayIntentRef.current?.bannerId,
playerPanelExists: !!playerPanelInfo,
});
console.log('[HomePanel] 📊 PlayerPanel 전체 정보:', {
hasPlayerPanel: !!playerPanelInfo,
modal: playerPanelInfo?.panelInfo?.modal,
shouldShrinkTo1px: playerPanelInfo?.panelInfo?.shouldShrinkTo1px,
currentBannerId: playerPanelInfo?.panelInfo?.playerState?.currentBannerId,
panelName: playerPanelInfo?.name,
});
console.log('[HomePanel] 📍 Ref 정보:', {
prevScrollTopRef: prevScrollTopRef.current,
shouldShrinkRef: shouldShrinkRef.current,
videoPlayIntentRef: videoPlayIntentRef.current?.bannerId,
});
if (currentScrollTop <= 1 && shouldShrink) {
// scrollTop = 0이고 현재 1px 상태면 → 확대
console.log('[HomePanel] ▲ 비디오 확대 (scrollTop <= 1 && shouldShrink)');
dispatch(showModalVideo());
} else if (currentScrollTop > 1 && !shouldShrink) {
// scrollTop > 0이고 normal size면 → 축소
console.log('[HomePanel] ▼ 비디오 축소 (scrollTop > 1 && !shouldShrink)');
dispatch(hideModalVideo());
} else {
console.log('[HomePanel] ⚠️ 비디오 크기 조정 불필요', {
reason: currentScrollTop <= 1 && !shouldShrink ? 'scrollTop 최상단이고 이미 normal size' :
currentScrollTop > 1 && shouldShrink ? 'scrollTop > 1이고 이미 1px 상태' : '기타',
condition1: `currentScrollTop <= 1: ${currentScrollTop <= 1}`,
condition2: `shouldShrink: ${shouldShrink}`,
});
}
}, 500); // 비디오 재생 완료 대기
return () => clearTimeout(timer);
}
}, [detailPanelClosedTime, isOnTop, dispatch, panels]);
useEffect(() => {
return () => {