diff --git a/frontend/src/pages/pc/AlbumDetail.jsx b/frontend/src/pages/pc/AlbumDetail.jsx index 39fd0e9..96c68df 100644 --- a/frontend/src/pages/pc/AlbumDetail.jsx +++ b/frontend/src/pages/pc/AlbumDetail.jsx @@ -37,6 +37,21 @@ function AlbumDetail() { setLightbox(prev => ({ ...prev, open: false })); }, []); + // 라이트박스 열릴 때 body 스크롤 숨기기 + useEffect(() => { + if (lightbox.open) { + document.documentElement.style.overflow = 'hidden'; + document.body.style.overflow = 'hidden'; + } else { + document.documentElement.style.overflow = ''; + document.body.style.overflow = ''; + } + return () => { + document.documentElement.style.overflow = ''; + document.body.style.overflow = ''; + }; + }, [lightbox.open]); + // 이미지 다운로드 함수 const downloadImage = useCallback(async () => { const imageUrl = lightbox.images[lightbox.index]; @@ -373,90 +388,96 @@ function AlbumDetail() { animate={{ opacity: 1 }} exit={{ opacity: 0 }} transition={{ duration: 0.2 }} - className="fixed inset-0 bg-black/90 z-50 flex items-center justify-center" + className="fixed inset-0 bg-black/95 z-50 overflow-auto" > - {/* 상단 버튼들 */} -
- {/* 다운로드 버튼 */} - - {/* 닫기 버튼 */} - -
- - {/* 이전 버튼 */} - {lightbox.images.length > 1 && ( - - )} - - {/* 로딩 스피너 */} - {!imageLoaded && ( -
-
-
- )} - - {/* 이미지 */} - e.stopPropagation()} - onLoad={() => setImageLoaded(true)} - initial={{ x: slideDirection * 100 }} - animate={{ x: 0 }} - transition={{ duration: 0.25, ease: 'easeOut' }} - /> - - {/* 다음 버튼 */} - {lightbox.images.length > 1 && ( - - )} - - {/* 인디케이터 - 이미지 2개 이상일 때만 표시 */} - {lightbox.images.length > 1 && ( -
- {lightbox.images.map((_, i) => ( - + {/* 닫기 버튼 */} + +
+ + {/* 이전 버튼 */} + {lightbox.images.length > 1 && ( + + )} + + {/* 로딩 스피너 */} + {!imageLoaded && ( +
+
+
+ )} + + {/* 이미지 */} +
+ e.stopPropagation()} + onLoad={() => setImageLoaded(true)} + initial={{ x: slideDirection * 100 }} + animate={{ x: 0 }} + transition={{ duration: 0.25, ease: 'easeOut' }} /> - ))} +
+ + {/* 다음 버튼 */} + {lightbox.images.length > 1 && ( + + )} + + {/* 인디케이터 */} + {lightbox.images.length > 1 && ( +
+ {lightbox.images.map((_, i) => ( +
+ )} - )} )} diff --git a/frontend/src/pages/pc/AlbumGallery.jsx b/frontend/src/pages/pc/AlbumGallery.jsx index 75bff93..4ab29c0 100644 --- a/frontend/src/pages/pc/AlbumGallery.jsx +++ b/frontend/src/pages/pc/AlbumGallery.jsx @@ -76,6 +76,21 @@ function AlbumGallery() { setLightbox(prev => ({ ...prev, open: false })); }, []); + // 라이트박스 열릴 때 body 스크롤 숨기기 + useEffect(() => { + if (lightbox.open) { + document.documentElement.style.overflow = 'hidden'; + document.body.style.overflow = 'hidden'; + } else { + document.documentElement.style.overflow = ''; + document.body.style.overflow = ''; + } + return () => { + document.documentElement.style.overflow = ''; + document.body.style.overflow = ''; + }; + }, [lightbox.open]); + // 이전/다음 이미지 const goToPrev = useCallback(() => { if (photos.length <= 1) return; @@ -225,80 +240,103 @@ function AlbumGallery() { animate={{ opacity: 1 }} exit={{ opacity: 0 }} transition={{ duration: 0.2 }} - className="fixed inset-0 bg-black/95 z-50 flex items-center justify-center" + className="fixed inset-0 bg-black/95 z-50 overflow-auto" > - {/* 상단 버튼들 */} -
- - -
- - {/* 카운터 */} -
- {lightbox.index + 1} / {photos.length} -
- - {/* 이전 버튼 */} - {photos.length > 1 && ( - - )} - - {/* 로딩 스피너 */} - {!imageLoaded && ( -
-
+ {/* 내부 컨테이너 - min-width, min-height 적용 (화면 줄여도 크기 유지, 스크롤) */} +
+ {/* 상단 버튼들 */} +
+ +
- )} - {/* 이미지 */} - setImageLoaded(true)} - initial={{ x: slideDirection * 100 }} - animate={{ x: 0 }} - transition={{ duration: 0.25, ease: 'easeOut' }} - /> + {/* 카운터 */} +
+ {lightbox.index + 1} / {photos.length} +
- {/* 다음 버튼 */} - {photos.length > 1 && ( - - )} + {/* 이전 버튼 - margin으로 이미지와 간격 */} + {photos.length > 1 && ( + + )} - {/* 하단 점 인디케이터 */} -
- {photos.map((_, i) => ( - + )} + + {/* 하단 점 인디케이터 - 한 줄 고정, 스크롤바 숨김 */} +
+ {photos.map((_, i) => ( +
)}