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:
2025-11-11 12:58:52 +09:00
parent a0de0530ab
commit 95db60c2dd

View File

@@ -142,8 +142,13 @@ export default function ProductVideoV2({
// 썸네일 클릭 핸들러 - 비디오 재생 시작 + Redux dispatch + MediaPlayer 메서드 호출 // 썸네일 클릭 핸들러 - 비디오 재생 시작 + Redux dispatch + MediaPlayer 메서드 호출
const handleThumbnailClick = useCallback(() => { const handleThumbnailClick = useCallback(() => {
console.log('🎬 [handleThumbnailClick] 썸네일 클릭됨', {
canPlayVideo,
isPlaying,
});
if (canPlayVideo && !isPlaying) { if (canPlayVideo && !isPlaying) {
// console.log('[BgVideo] ProductVideoV2 - Starting video playback'); // console.log('[BgVideo] ProductVideoV2 - Starting video playback');
console.log('🎬 [handleThumbnailClick] ✅ 비디오 재생 시작');
setIsPlaying(true); setIsPlaying(true);
// 백그라운드 전체화면 비디오 일시정지 // 백그라운드 전체화면 비디오 일시정지
@@ -237,7 +242,13 @@ export default function ProductVideoV2({
// 전체화면 토글 핸들러 // 전체화면 토글 핸들러
const toggleFullscreen = useCallback(() => { 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( const handleVideoPlayerClick = useCallback(
(e) => { (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에서도 중단) // 이벤트 전파 중단 (capture phase에서도 중단)
e.preventDefault?.(); e.preventDefault?.();
e.stopPropagation?.(); e.stopPropagation?.();
console.log('[ProductVideoV2] Click detected - toggling fullscreen'); console.log('🎬 [ProductVideoV2] Click detected - toggling fullscreen');
toggleFullscreen(); toggleFullscreen();
}, },
[isPlaying, isFullscreen, toggleFullscreen] [isPlaying, isFullscreen, toggleFullscreen]
@@ -275,14 +300,24 @@ export default function ProductVideoV2({
// 마우스 다운 (클릭) 이벤트 - capture phase에서 처리 // 마우스 다운 (클릭) 이벤트 - capture phase에서 처리
const handleVideoPlayerMouseDown = useCallback( const handleVideoPlayerMouseDown = useCallback(
(e) => { (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에서 이벤트 처리 // capture phase에서 이벤트 처리
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
console.log('[ProductVideoV2] MouseDown detected at capture phase'); console.log('🎬 [ProductVideoV2] MouseDown detected at capture phase');
}, },
[isPlaying, isFullscreen] [isPlaying, isFullscreen]
); );
@@ -402,15 +437,24 @@ export default function ProductVideoV2({
onTouchMove={handleUserActivity} onTouchMove={handleUserActivity}
onWheel={handleUserActivity} onWheel={handleUserActivity}
onClick={(e) => { onClick={(e) => {
console.log('🎬 [videoPlayerWrapper] onClick 실행됨', {
isFullscreen,
isPlaying,
eventType: e.type,
});
if (!isFullscreen) { if (!isFullscreen) {
handleVideoPlayerClick(e); handleVideoPlayerClick(e);
} }
}} }}
onMouseDownCapture={(e) => { onMouseDownCapture={(e) => {
console.log('🎬 [videoPlayerWrapper] onMouseDownCapture 실행됨', {
isFullscreen,
isPlaying,
});
if (!isFullscreen && isPlaying) { if (!isFullscreen && isPlaying) {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); 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 <div
ref={normalContainerRef} ref={normalContainerRef}
className={css.normalPlayerContainer} className={css.normalPlayerContainer}
onClick={handleVideoPlayerClick} onClick={(e) => {
onMouseDownCapture={handleVideoPlayerMouseDown} 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()} {renderVideoPlayer()}
</div> </div>