caadiq/fromis_9
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: 라이트박스 이미지 크기 고정 및 스크롤바 숨기기

Browse source 
- 이미지 max-h를 75vh에서 900px 고정값으로 변경
- 라이트박스 컨테이너 min값 1400x1200으로 설정
- 스크롤바 숨기기 (Firefox/Chrome/Safari 지원)
This commit is contained in:
caadiq 2026-01-04 01:56:05 +09:00
parent 5610a337c5
commit 326cb02df6
3 changed files with 14 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
frontend/src/index.css
View file

@ -73,3 +73,8 @@ body {
opacity: 1; opacity: 1;
} }
} }
/* 라이트박스 스크롤바 숨기기 */
.lightbox-no-scrollbar::-webkit-scrollbar {
display: none;
}

9
frontend/src/pages/pc/AlbumDetail.jsx
View file

@ -474,10 +474,11 @@ function AlbumDetail() {
animate={{ opacity: 1 }} animate={{ opacity: 1 }}
exit={{ opacity: 0 }} exit={{ opacity: 0 }}
transition={{ duration: 0.2 }} transition={{ duration: 0.2 }}
className="fixed inset-0 bg-black/95 z-50 overflow-auto" className="fixed inset-0 bg-black/95 z-50 overflow-scroll lightbox-no-scrollbar"
style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}
> >
{/* 내부 컨테이너 - min-width, min-height 적용 */} {/* 내부 컨테이너 - min-width, min-height 적용 */}
<div className="min-w-[1200px] min-h-[800px] w-full h-full relative flex items-center justify-center"> <div className="min-w-[1400px] min-h-[1200px] w-full h-full relative flex items-center justify-center">
{/* 상단 버튼들 */} {/* 상단 버튼들 */}
<div className="absolute top-6 right-6 flex gap-3 z-10"> <div className="absolute top-6 right-6 flex gap-3 z-10">
{/* 다운로드 버튼 */} {/* 다운로드 버튼 */}
@ -525,7 +526,7 @@ function AlbumDetail() {
<motion.video <motion.video
key={lightbox.index} key={lightbox.index}
src={lightbox.images[lightbox.index]} src={lightbox.images[lightbox.index]}
className={`max-w-[1100px] max-h-[75vh] object-contain transition-opacity duration-200 ${imageLoaded ? 'opacity-100' : 'opacity-0'}`} className={`max-w-[1100px] max-h-[900px] object-contain transition-opacity duration-200 ${imageLoaded ? 'opacity-100' : 'opacity-0'}`}
onClick={(e) => e.stopPropagation()} onClick={(e) => e.stopPropagation()}
onCanPlay={() => setImageLoaded(true)} onCanPlay={() => setImageLoaded(true)}
initial={{ x: slideDirection * 100 }} initial={{ x: slideDirection * 100 }}
@ -539,7 +540,7 @@ function AlbumDetail() {
key={lightbox.index} key={lightbox.index}
src={lightbox.images[lightbox.index]} src={lightbox.images[lightbox.index]}
alt="확대 이미지" alt="확대 이미지"
className={`max-w-[1100px] max-h-[75vh] object-contain transition-opacity duration-200 ${imageLoaded ? 'opacity-100' : 'opacity-0'}`} className={`max-w-[1100px] max-h-[900px] object-contain transition-opacity duration-200 ${imageLoaded ? 'opacity-100' : 'opacity-0'}`}
onClick={(e) => e.stopPropagation()} onClick={(e) => e.stopPropagation()}
onLoad={() => setImageLoaded(true)} onLoad={() => setImageLoaded(true)}
initial={{ x: slideDirection * 100 }} initial={{ x: slideDirection * 100 }}

7
frontend/src/pages/pc/AlbumGallery.jsx
View file

@ -308,10 +308,11 @@ function AlbumGallery() {
animate={{ opacity: 1 }} animate={{ opacity: 1 }}
exit={{ opacity: 0 }} exit={{ opacity: 0 }}
transition={{ duration: 0.2 }} transition={{ duration: 0.2 }}
className="fixed inset-0 bg-black/95 z-50 overflow-auto" className="fixed inset-0 bg-black/95 z-50 overflow-scroll lightbox-no-scrollbar"
style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}
> >
{/* 내부 컨테이너 - min-width, min-height 적용 (화면 줄여도 크기 유지, 스크롤) */} {/* 내부 컨테이너 - min-width, min-height 적용 (화면 줄여도 크기 유지, 스크롤) */}
<div className="min-w-[1200px] min-h-[800px] w-full h-full relative flex items-center justify-center"> <div className="min-w-[1400px] min-h-[1200px] w-full h-full relative flex items-center justify-center">
{/* 상단 버튼들 */} {/* 상단 버튼들 */}
<div className="absolute top-6 right-6 flex gap-3 z-10"> <div className="absolute top-6 right-6 flex gap-3 z-10">
<button <button
@ -356,7 +357,7 @@ function AlbumGallery() {
key={lightbox.index} key={lightbox.index}
src={photos[lightbox.index]?.originalUrl} src={photos[lightbox.index]?.originalUrl}
alt="확대 이미지" alt="확대 이미지"
className={`max-w-[1100px] max-h-[75vh] object-contain transition-opacity duration-200 ${imageLoaded ? 'opacity-100' : 'opacity-0'}`} className={`max-w-[1100px] max-h-[900px] object-contain transition-opacity duration-200 ${imageLoaded ? 'opacity-100' : 'opacity-0'}`}
onLoad={() => setImageLoaded(true)} onLoad={() => setImageLoaded(true)}
initial={{ x: slideDirection * 100 }} initial={{ x: slideDirection * 100 }}
animate={{ x: 0 }} animate={{ x: 0 }}