39 lines
1.1 KiB
TypeScript
39 lines
1.1 KiB
TypeScript
import React, { useEffect } from 'react';
|
|
import VideoDetailContent from './VideoDetailContent';
|
|
import { useOverlayClose } from '../hooks/useOverlayClose';
|
|
|
|
interface VideoDetailModalProps {
|
|
videoId: string;
|
|
onClose: () => void;
|
|
}
|
|
|
|
const VideoDetailModal: React.FC<VideoDetailModalProps> = ({ videoId, onClose }) => {
|
|
useEffect(() => {
|
|
// 모달 열릴 때 배경 스크롤 잠금
|
|
const prev = document.body.style.overflow;
|
|
document.body.style.overflow = 'hidden';
|
|
|
|
const handleKeyDown = (e: KeyboardEvent) => {
|
|
if (e.key === 'Escape') onClose();
|
|
};
|
|
document.addEventListener('keydown', handleKeyDown);
|
|
|
|
return () => {
|
|
document.body.style.overflow = prev;
|
|
document.removeEventListener('keydown', handleKeyDown);
|
|
};
|
|
}, [onClose]);
|
|
|
|
const overlayCloseHandlers = useOverlayClose(onClose);
|
|
|
|
return (
|
|
<div className="video-detail-overlay" {...overlayCloseHandlers}>
|
|
<div className="video-detail-modal-box" onClick={(e) => e.stopPropagation()}>
|
|
<VideoDetailContent videoId={videoId} isModal={true} onClose={onClose} />
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default VideoDetailModal;
|