debug: ProductVideoV2 클릭 이벤트 상세 로깅 추가
🎬 태그를 붙인 상세한 콘솔 로그 추가: - handleThumbnailClick: 썸네일 클릭 감지 - handleVideoPlayerClick: 비디오 재생 중 클릭 감지 및 상태 검사 - handleVideoPlayerMouseDown: MouseDown 이벤트 감지 - toggleFullscreen: 전체화면 토글 상태 변화 - videoPlayerWrapper onClick/onMouseDownCapture: wrapper 레벨 이벤트 - normalContainerRef onClick/onMouseDownCapture: 컨테이너 레벨 이벤트 각 로그에는 다음 정보 포함: - 현재 isPlaying, isFullscreen 상태 - 이벤트 타입 (type, target 등) - 조건 만족 여부 🤖 Generated with Claude Code Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -142,8 +142,13 @@ export default function ProductVideoV2({
|
||||
|
||||
// 썸네일 클릭 핸들러 - 비디오 재생 시작 + Redux dispatch + MediaPlayer 메서드 호출
|
||||
const handleThumbnailClick = useCallback(() => {
|
||||
console.log('🎬 [handleThumbnailClick] 썸네일 클릭됨', {
|
||||
canPlayVideo,
|
||||
isPlaying,
|
||||
});
|
||||
if (canPlayVideo && !isPlaying) {
|
||||
// console.log('[BgVideo] ProductVideoV2 - Starting video playback');
|
||||
console.log('🎬 [handleThumbnailClick] ✅ 비디오 재생 시작');
|
||||
setIsPlaying(true);
|
||||
|
||||
// 백그라운드 전체화면 비디오 일시정지
|
||||
@@ -237,7 +242,13 @@ export default function ProductVideoV2({
|
||||
|
||||
// 전체화면 토글 핸들러
|
||||
const toggleFullscreen = useCallback(() => {
|
||||
setIsFullscreen((prev) => !prev);
|
||||
setIsFullscreen((prev) => {
|
||||
console.log('🎬 [toggleFullscreen] 토글 실행', {
|
||||
prevIsFullscreen: prev,
|
||||
newIsFullscreen: !prev,
|
||||
});
|
||||
return !prev;
|
||||
});
|
||||
}, []);
|
||||
|
||||
// 일반 모드용 키보드 이벤트 핸들러 (컨테이너에 직접 연결)
|
||||
@@ -259,14 +270,28 @@ export default function ProductVideoV2({
|
||||
// 비디오 재생 중 클릭 핸들러 - 전체화면 토글
|
||||
const handleVideoPlayerClick = useCallback(
|
||||
(e) => {
|
||||
console.log('🎬 [ProductVideoV2] handleVideoPlayerClick 실행됨', {
|
||||
isPlaying,
|
||||
isFullscreen,
|
||||
eventType: e.type,
|
||||
target: e.target?.className,
|
||||
currentTarget: e.currentTarget?.className,
|
||||
});
|
||||
|
||||
// 비디오 재생 중이고 전체화면이 아닐 때만 작동
|
||||
if (!isPlaying || isFullscreen) return;
|
||||
if (!isPlaying || isFullscreen) {
|
||||
console.log('🎬 [ProductVideoV2] 조건 불만족 - 반환됨', {
|
||||
isPlaying,
|
||||
isFullscreen,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// 이벤트 전파 중단 (capture phase에서도 중단)
|
||||
e.preventDefault?.();
|
||||
e.stopPropagation?.();
|
||||
|
||||
console.log('[ProductVideoV2] Click detected - toggling fullscreen');
|
||||
console.log('🎬 [ProductVideoV2] ✅ Click detected - toggling fullscreen');
|
||||
toggleFullscreen();
|
||||
},
|
||||
[isPlaying, isFullscreen, toggleFullscreen]
|
||||
@@ -275,14 +300,24 @@ export default function ProductVideoV2({
|
||||
// 마우스 다운 (클릭) 이벤트 - capture phase에서 처리
|
||||
const handleVideoPlayerMouseDown = useCallback(
|
||||
(e) => {
|
||||
console.log('🎬 [ProductVideoV2] handleVideoPlayerMouseDown 실행됨', {
|
||||
isPlaying,
|
||||
isFullscreen,
|
||||
eventType: e.type,
|
||||
target: e.target?.className,
|
||||
});
|
||||
|
||||
// 비디오 재생 중이고 전체화면이 아닐 때만 작동
|
||||
if (!isPlaying || isFullscreen) return;
|
||||
if (!isPlaying || isFullscreen) {
|
||||
console.log('🎬 [ProductVideoV2] MouseDown 조건 불만족');
|
||||
return;
|
||||
}
|
||||
|
||||
// capture phase에서 이벤트 처리
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
console.log('[ProductVideoV2] MouseDown detected at capture phase');
|
||||
console.log('🎬 [ProductVideoV2] ✅ MouseDown detected at capture phase');
|
||||
},
|
||||
[isPlaying, isFullscreen]
|
||||
);
|
||||
@@ -402,15 +437,24 @@ export default function ProductVideoV2({
|
||||
onTouchMove={handleUserActivity}
|
||||
onWheel={handleUserActivity}
|
||||
onClick={(e) => {
|
||||
console.log('🎬 [videoPlayerWrapper] onClick 실행됨', {
|
||||
isFullscreen,
|
||||
isPlaying,
|
||||
eventType: e.type,
|
||||
});
|
||||
if (!isFullscreen) {
|
||||
handleVideoPlayerClick(e);
|
||||
}
|
||||
}}
|
||||
onMouseDownCapture={(e) => {
|
||||
console.log('🎬 [videoPlayerWrapper] onMouseDownCapture 실행됨', {
|
||||
isFullscreen,
|
||||
isPlaying,
|
||||
});
|
||||
if (!isFullscreen && isPlaying) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
console.log('[ProductVideoV2] MouseDown at wrapper - capturing');
|
||||
console.log('🎬 [videoPlayerWrapper] MouseDown at wrapper - capturing');
|
||||
}
|
||||
}}
|
||||
>
|
||||
@@ -490,8 +534,22 @@ export default function ProductVideoV2({
|
||||
<div
|
||||
ref={normalContainerRef}
|
||||
className={css.normalPlayerContainer}
|
||||
onClick={handleVideoPlayerClick}
|
||||
onMouseDownCapture={handleVideoPlayerMouseDown}
|
||||
onClick={(e) => {
|
||||
console.log('🎬 [normalContainerRef] onClick 실행됨', {
|
||||
isPlaying,
|
||||
isFullscreen,
|
||||
eventType: e.type,
|
||||
target: e.target?.className,
|
||||
});
|
||||
handleVideoPlayerClick(e);
|
||||
}}
|
||||
onMouseDownCapture={(e) => {
|
||||
console.log('🎬 [normalContainerRef] onMouseDownCapture 실행됨', {
|
||||
isPlaying,
|
||||
isFullscreen,
|
||||
});
|
||||
handleVideoPlayerMouseDown(e);
|
||||
}}
|
||||
>
|
||||
{renderVideoPlayer()}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user