diff --git a/frontend/src/pages/mobile/public/AlbumGallery.jsx b/frontend/src/pages/mobile/public/AlbumGallery.jsx index 3b5c184..964d700 100644 --- a/frontend/src/pages/mobile/public/AlbumGallery.jsx +++ b/frontend/src/pages/mobile/public/AlbumGallery.jsx @@ -109,16 +109,24 @@ function MobileAlbumGallery() { return () => { document.body.style.overflow = ''; }; }, [selectedIndex]); - // 사진을 2열 지그재그로 분배 + // 사진을 2열로 균등 분배 (높이 기반) const distributePhotos = () => { const leftColumn = []; const rightColumn = []; + let leftHeight = 0; + let rightHeight = 0; photos.forEach((photo, index) => { - if (index % 2 === 0) { + // 이미지 높이 비율 계산 (width가 동일하다고 가정하면 height/width 비율 사용) + const aspectRatio = photo.height && photo.width ? photo.height / photo.width : 1; + + // 더 짧은 열에 사진 추가 + if (leftHeight <= rightHeight) { leftColumn.push({ ...photo, originalIndex: index }); + leftHeight += aspectRatio; } else { rightColumn.push({ ...photo, originalIndex: index }); + rightHeight += aspectRatio; } }); @@ -208,10 +216,6 @@ function MobileAlbumGallery() { /> ))} - {/* 홀수개일 때 오른쪽 열 하단에 빈 공간 방지용 플레이스홀더 */} - {photos.length % 2 === 1 && ( -
- )}