fix(mobile): 컨셉포토 라이트박스 정보를 바텀시트로 변경
AlbumGallery와 동일한 UX 패턴 적용:
- 사진 아래 직접 정보 표시 제거
- Info 버튼 추가 (ℹ️)
- 바텀시트로 멤버/컨셉 정보 표시
- 드래그하여 닫기 지원
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
parent
6cbe4fe6e2
commit
934fbb8ed6
1 changed files with 161 additions and 102 deletions
|
|
@ -13,6 +13,9 @@ import {
|
||||||
ChevronUp,
|
ChevronUp,
|
||||||
FileText,
|
FileText,
|
||||||
ChevronRight,
|
ChevronRight,
|
||||||
|
Info,
|
||||||
|
Users,
|
||||||
|
Tag,
|
||||||
} from 'lucide-react';
|
} from 'lucide-react';
|
||||||
import { Swiper, SwiperSlide } from 'swiper/react';
|
import { Swiper, SwiperSlide } from 'swiper/react';
|
||||||
import { Virtual } from 'swiper/modules';
|
import { Virtual } from 'swiper/modules';
|
||||||
|
|
@ -30,6 +33,7 @@ function MobileAlbumDetail() {
|
||||||
const [lightbox, setLightbox] = useState({ open: false, images: [], index: 0, showNav: true, teasers: null, photos: null });
|
const [lightbox, setLightbox] = useState({ open: false, images: [], index: 0, showNav: true, teasers: null, photos: null });
|
||||||
const [showAllTracks, setShowAllTracks] = useState(false);
|
const [showAllTracks, setShowAllTracks] = useState(false);
|
||||||
const [showDescriptionModal, setShowDescriptionModal] = useState(false);
|
const [showDescriptionModal, setShowDescriptionModal] = useState(false);
|
||||||
|
const [showPhotoInfo, setShowPhotoInfo] = useState(false);
|
||||||
const swiperRef = useRef(null);
|
const swiperRef = useRef(null);
|
||||||
|
|
||||||
// 앨범 데이터 로드
|
// 앨범 데이터 로드
|
||||||
|
|
@ -58,10 +62,18 @@ function MobileAlbumDetail() {
|
||||||
window.history.pushState({ description: true }, '');
|
window.history.pushState({ description: true }, '');
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
|
// 사진 정보 바텀시트 열기
|
||||||
|
const openPhotoInfo = useCallback(() => {
|
||||||
|
setShowPhotoInfo(true);
|
||||||
|
window.history.pushState({ photoInfo: true }, '');
|
||||||
|
}, []);
|
||||||
|
|
||||||
// 뒤로가기 처리
|
// 뒤로가기 처리
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const handlePopState = () => {
|
const handlePopState = () => {
|
||||||
if (showDescriptionModal) {
|
if (showPhotoInfo) {
|
||||||
|
setShowPhotoInfo(false);
|
||||||
|
} else if (showDescriptionModal) {
|
||||||
setShowDescriptionModal(false);
|
setShowDescriptionModal(false);
|
||||||
} else if (lightbox.open) {
|
} else if (lightbox.open) {
|
||||||
setLightbox((prev) => ({ ...prev, open: false }));
|
setLightbox((prev) => ({ ...prev, open: false }));
|
||||||
|
|
@ -70,7 +82,7 @@ function MobileAlbumDetail() {
|
||||||
|
|
||||||
window.addEventListener('popstate', handlePopState);
|
window.addEventListener('popstate', handlePopState);
|
||||||
return () => window.removeEventListener('popstate', handlePopState);
|
return () => window.removeEventListener('popstate', handlePopState);
|
||||||
}, [showDescriptionModal, lightbox.open]);
|
}, [showPhotoInfo, showDescriptionModal, lightbox.open]);
|
||||||
|
|
||||||
// 이미지 다운로드
|
// 이미지 다운로드
|
||||||
const downloadImage = useCallback(async () => {
|
const downloadImage = useCallback(async () => {
|
||||||
|
|
@ -384,112 +396,159 @@ function MobileAlbumDetail() {
|
||||||
|
|
||||||
{/* 라이트박스 - Swiper ViewPager 스타일 */}
|
{/* 라이트박스 - Swiper ViewPager 스타일 */}
|
||||||
<AnimatePresence>
|
<AnimatePresence>
|
||||||
{lightbox.open && (
|
{lightbox.open && (() => {
|
||||||
<motion.div
|
const currentPhoto = lightbox.photos?.[lightbox.index];
|
||||||
initial={{ opacity: 0 }}
|
const concept = currentPhoto?.title;
|
||||||
animate={{ opacity: 1 }}
|
const hasValidConcept = concept && concept.trim() && concept !== 'Default';
|
||||||
exit={{ opacity: 0 }}
|
const members = currentPhoto?.members;
|
||||||
className="fixed inset-0 bg-black z-[60] flex flex-col"
|
const hasMembers = members && String(members).trim();
|
||||||
>
|
const hasPhotoInfo = hasValidConcept || hasMembers;
|
||||||
{/* 상단 헤더 */}
|
|
||||||
<div className="absolute top-0 left-0 right-0 flex items-center px-4 py-3 z-20">
|
|
||||||
<div className="flex-1 flex justify-start">
|
|
||||||
<button onClick={() => window.history.back()} className="text-white/80 p-1">
|
|
||||||
<X size={24} />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
{lightbox.showNav && lightbox.images.length > 1 && (
|
|
||||||
<span className="text-white/70 text-sm tabular-nums">
|
|
||||||
{lightbox.index + 1} / {lightbox.images.length}
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
<div className="flex-1 flex justify-end">
|
|
||||||
<button onClick={downloadImage} className="text-white/80 p-1">
|
|
||||||
<Download size={22} />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Swiper */}
|
return (
|
||||||
<Swiper
|
<motion.div
|
||||||
modules={[Virtual]}
|
initial={{ opacity: 0 }}
|
||||||
virtual
|
animate={{ opacity: 1 }}
|
||||||
initialSlide={lightbox.index}
|
exit={{ opacity: 0 }}
|
||||||
onSwiper={(swiper) => {
|
className="fixed inset-0 bg-black z-[60] flex flex-col"
|
||||||
swiperRef.current = swiper;
|
|
||||||
}}
|
|
||||||
onSlideChange={(swiper) => setLightbox((prev) => ({ ...prev, index: swiper.activeIndex }))}
|
|
||||||
className="w-full h-full"
|
|
||||||
spaceBetween={0}
|
|
||||||
slidesPerView={1}
|
|
||||||
resistance={true}
|
|
||||||
resistanceRatio={0.5}
|
|
||||||
>
|
>
|
||||||
{lightbox.images.map((url, index) => (
|
{/* 상단 헤더 */}
|
||||||
<SwiperSlide key={index} virtualIndex={index}>
|
<div className="absolute top-0 left-0 right-0 flex items-center px-4 py-3 z-20">
|
||||||
<div className="w-full h-full flex flex-col items-center justify-center">
|
<div className="flex-1 flex justify-start">
|
||||||
{lightbox.teasers?.[index]?.media_type === 'video' ? (
|
<button onClick={() => window.history.back()} className="text-white/80 p-1">
|
||||||
<video
|
<X size={24} />
|
||||||
src={url}
|
</button>
|
||||||
className="max-w-full max-h-[70vh] object-contain"
|
</div>
|
||||||
controls
|
{lightbox.showNav && lightbox.images.length > 1 && (
|
||||||
autoPlay={index === lightbox.index}
|
<span className="text-white/70 text-sm tabular-nums">
|
||||||
/>
|
{lightbox.index + 1} / {lightbox.images.length}
|
||||||
) : (
|
</span>
|
||||||
<img
|
)}
|
||||||
src={url}
|
<div className="flex-1 flex justify-end items-center gap-2">
|
||||||
alt=""
|
{hasPhotoInfo && (
|
||||||
className="max-w-full max-h-[70vh] object-contain"
|
<button onClick={openPhotoInfo} className="text-white/80 p-1">
|
||||||
loading={Math.abs(index - lightbox.index) <= 2 ? 'eager' : 'lazy'}
|
<Info size={22} />
|
||||||
/>
|
</button>
|
||||||
)}
|
)}
|
||||||
{/* 컨셉 포토 정보 (멤버 + 컨셉) */}
|
<button onClick={downloadImage} className="text-white/80 p-1">
|
||||||
{lightbox.photos && (() => {
|
<Download size={22} />
|
||||||
const photo = lightbox.photos[index];
|
</button>
|
||||||
const title = photo?.title;
|
</div>
|
||||||
const hasValidTitle = title && title.trim() && title !== 'Default';
|
</div>
|
||||||
const members = photo?.members;
|
|
||||||
const hasMembers = members && String(members).trim();
|
|
||||||
|
|
||||||
if (!hasValidTitle && !hasMembers) return null;
|
{/* Swiper */}
|
||||||
|
<Swiper
|
||||||
|
modules={[Virtual]}
|
||||||
|
virtual
|
||||||
|
initialSlide={lightbox.index}
|
||||||
|
onSwiper={(swiper) => {
|
||||||
|
swiperRef.current = swiper;
|
||||||
|
}}
|
||||||
|
onSlideChange={(swiper) => setLightbox((prev) => ({ ...prev, index: swiper.activeIndex }))}
|
||||||
|
className="w-full h-full"
|
||||||
|
spaceBetween={0}
|
||||||
|
slidesPerView={1}
|
||||||
|
resistance={true}
|
||||||
|
resistanceRatio={0.5}
|
||||||
|
>
|
||||||
|
{lightbox.images.map((url, index) => (
|
||||||
|
<SwiperSlide key={index} virtualIndex={index}>
|
||||||
|
<div className="w-full h-full flex items-center justify-center">
|
||||||
|
{lightbox.teasers?.[index]?.media_type === 'video' ? (
|
||||||
|
<video
|
||||||
|
src={url}
|
||||||
|
className="max-w-full max-h-full object-contain"
|
||||||
|
controls
|
||||||
|
autoPlay={index === lightbox.index}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<img
|
||||||
|
src={url}
|
||||||
|
alt=""
|
||||||
|
className="max-w-full max-h-full object-contain"
|
||||||
|
loading={Math.abs(index - lightbox.index) <= 2 ? 'eager' : 'lazy'}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</SwiperSlide>
|
||||||
|
))}
|
||||||
|
</Swiper>
|
||||||
|
|
||||||
return (
|
{/* 모바일용 인디케이터 */}
|
||||||
<div className="mt-4 flex flex-col items-center gap-2 px-4">
|
{lightbox.showNav && lightbox.images.length > 1 && (
|
||||||
{hasValidTitle && (
|
<LightboxIndicator
|
||||||
<span className="px-3 py-1.5 bg-white/10 backdrop-blur-sm rounded-full text-white font-medium text-sm">
|
count={lightbox.images.length}
|
||||||
{title}
|
currentIndex={lightbox.index}
|
||||||
</span>
|
goToIndex={(i) => swiperRef.current?.slideTo(i)}
|
||||||
)}
|
width={120}
|
||||||
{hasMembers && (
|
/>
|
||||||
<div className="flex flex-wrap items-center justify-center gap-1.5">
|
)}
|
||||||
{String(members)
|
|
||||||
.split(',')
|
{/* 사진 정보 바텀시트 */}
|
||||||
.map((member, idx) => (
|
<AnimatePresence>
|
||||||
<span key={idx} className="px-2.5 py-1 bg-primary/80 rounded-full text-white text-xs">
|
{showPhotoInfo && hasPhotoInfo && (
|
||||||
{member.trim()}
|
<motion.div
|
||||||
</span>
|
initial={{ opacity: 0 }}
|
||||||
))}
|
animate={{ opacity: 1 }}
|
||||||
|
exit={{ opacity: 0 }}
|
||||||
|
className="absolute inset-0 bg-black/60 z-30"
|
||||||
|
onClick={() => window.history.back()}
|
||||||
|
>
|
||||||
|
<motion.div
|
||||||
|
initial={{ y: '100%' }}
|
||||||
|
animate={{ y: 0 }}
|
||||||
|
exit={{ y: '100%' }}
|
||||||
|
transition={{ type: 'spring', damping: 25, stiffness: 300 }}
|
||||||
|
drag="y"
|
||||||
|
dragConstraints={{ top: 0, bottom: 0 }}
|
||||||
|
dragElastic={{ top: 0, bottom: 0.5 }}
|
||||||
|
onDragEnd={(_, info) => {
|
||||||
|
if (info.offset.y > 100 || info.velocity.y > 300) {
|
||||||
|
window.history.back();
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
className="absolute bottom-0 left-0 right-0 bg-zinc-900 rounded-t-3xl"
|
||||||
|
onClick={(e) => e.stopPropagation()}
|
||||||
|
>
|
||||||
|
{/* 드래그 핸들 */}
|
||||||
|
<div className="flex justify-center pt-3 pb-2 cursor-grab active:cursor-grabbing">
|
||||||
|
<div className="w-10 h-1 bg-zinc-600 rounded-full" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 정보 내용 */}
|
||||||
|
<div className="px-5 pb-8 space-y-4">
|
||||||
|
<h3 className="text-white font-semibold text-lg">사진 정보</h3>
|
||||||
|
|
||||||
|
{hasMembers && (
|
||||||
|
<div className="flex items-start gap-3">
|
||||||
|
<div className="w-8 h-8 bg-primary/20 rounded-full flex items-center justify-center flex-shrink-0">
|
||||||
|
<Users size={16} className="text-primary" />
|
||||||
</div>
|
</div>
|
||||||
)}
|
<div>
|
||||||
</div>
|
<p className="text-zinc-400 text-xs mb-1">멤버</p>
|
||||||
);
|
<p className="text-white">{members}</p>
|
||||||
})()}
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</SwiperSlide>
|
)}
|
||||||
))}
|
|
||||||
</Swiper>
|
|
||||||
|
|
||||||
{/* 모바일용 인디케이터 */}
|
{hasValidConcept && (
|
||||||
{lightbox.showNav && lightbox.images.length > 1 && (
|
<div className="flex items-start gap-3">
|
||||||
<LightboxIndicator
|
<div className="w-8 h-8 bg-white/10 rounded-full flex items-center justify-center flex-shrink-0">
|
||||||
count={lightbox.images.length}
|
<Tag size={16} className="text-zinc-400" />
|
||||||
currentIndex={lightbox.index}
|
</div>
|
||||||
goToIndex={(i) => swiperRef.current?.slideTo(i)}
|
<div>
|
||||||
width={120}
|
<p className="text-zinc-400 text-xs mb-1">컨셉</p>
|
||||||
/>
|
<p className="text-white">{concept}</p>
|
||||||
)}
|
</div>
|
||||||
</motion.div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
</AnimatePresence>
|
||||||
|
</motion.div>
|
||||||
|
);
|
||||||
|
})()}
|
||||||
</AnimatePresence>
|
</AnimatePresence>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue