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"
>
- {/* 상단 버튼들 */}
-
- {/* 다운로드 버튼 */}
- {
- e.stopPropagation();
- downloadImage();
- }}
- >
-
-
- {/* 닫기 버튼 */}
-
-
-
-
-
- {/* 이전 버튼 */}
- {lightbox.images.length > 1 && (
- {
- e.stopPropagation();
- goToPrev();
- }}
- >
-
-
- )}
-
- {/* 로딩 스피너 */}
- {!imageLoaded && (
-
- )}
-
- {/* 이미지 */}
- e.stopPropagation()}
- onLoad={() => setImageLoaded(true)}
- initial={{ x: slideDirection * 100 }}
- animate={{ x: 0 }}
- transition={{ duration: 0.25, ease: 'easeOut' }}
- />
-
- {/* 다음 버튼 */}
- {lightbox.images.length > 1 && (
- {
- e.stopPropagation();
- goToNext();
- }}
- >
-
-
- )}
-
- {/* 인디케이터 - 이미지 2개 이상일 때만 표시 */}
- {lightbox.images.length > 1 && (
-
- {lightbox.images.map((_, i) => (
-
+ {/* 상단 버튼들 */}
+
+ {/* 다운로드 버튼 */}
+ {
e.stopPropagation();
- setLightbox({ ...lightbox, index: i });
+ downloadImage();
}}
+ >
+
+
+ {/* 닫기 버튼 */}
+
+
+
+
+
+ {/* 이전 버튼 */}
+ {lightbox.images.length > 1 && (
+ {
+ e.stopPropagation();
+ goToPrev();
+ }}
+ >
+
+
+ )}
+
+ {/* 로딩 스피너 */}
+ {!imageLoaded && (
+
+ )}
+
+ {/* 이미지 */}
+
+ e.stopPropagation()}
+ onLoad={() => setImageLoaded(true)}
+ initial={{ x: slideDirection * 100 }}
+ animate={{ x: 0 }}
+ transition={{ duration: 0.25, ease: 'easeOut' }}
/>
- ))}
+
+
+ {/* 다음 버튼 */}
+ {lightbox.images.length > 1 && (
+ {
+ e.stopPropagation();
+ goToNext();
+ }}
+ >
+
+
+ )}
+
+ {/* 인디케이터 */}
+ {lightbox.images.length > 1 && (
+
+ {lightbox.images.map((_, i) => (
+ {
+ e.stopPropagation();
+ setImageLoaded(false);
+ setLightbox({ ...lightbox, index: 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) => (
-
{
- setImageLoaded(false);
- setLightbox({ ...lightbox, index: i });
- }}
+ {/* 로딩 스피너 */}
+ {!imageLoaded && (
+
+ )}
+
+ {/* 이미지 + 컨셉 정보 - 양옆 margin으로 화살표와 간격 */}
+
+
setImageLoaded(true)}
+ initial={{ x: slideDirection * 100 }}
+ animate={{ x: 0 }}
+ transition={{ duration: 0.25, ease: 'easeOut' }}
/>
- ))}
+ {/* 컨셉 정보 - 정보가 있을 때만 표시 */}
+ {imageLoaded && photos[lightbox.index]?.title && (
+
+
+ {photos[lightbox.index]?.title}
+
+ {/* 멤버가 있고 빈 문자열이 아닐 때만 표시, 쉼표로 분리해서 개별 태그 */}
+ {photos[lightbox.index]?.members && String(photos[lightbox.index]?.members).trim() && (
+
+ {String(photos[lightbox.index]?.members).split(',').map((member, idx) => (
+
+ {member.trim()}
+
+ ))}
+
+ )}
+
+ )}
+
+
+ {/* 다음 버튼 - margin으로 이미지와 간격 */}
+ {photos.length > 1 && (
+
+
+
+ )}
+
+ {/* 하단 점 인디케이터 - 한 줄 고정, 스크롤바 숨김 */}
+
+ {photos.map((_, i) => (
+ {
+ setImageLoaded(false);
+ setLightbox({ ...lightbox, index: i });
+ }}
+ />
+ ))}
+
)}