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,
|
||||
FileText,
|
||||
ChevronRight,
|
||||
Info,
|
||||
Users,
|
||||
Tag,
|
||||
} from 'lucide-react';
|
||||
import { Swiper, SwiperSlide } from 'swiper/react';
|
||||
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 [showAllTracks, setShowAllTracks] = useState(false);
|
||||
const [showDescriptionModal, setShowDescriptionModal] = useState(false);
|
||||
const [showPhotoInfo, setShowPhotoInfo] = useState(false);
|
||||
const swiperRef = useRef(null);
|
||||
|
||||
// 앨범 데이터 로드
|
||||
|
|
@ -58,10 +62,18 @@ function MobileAlbumDetail() {
|
|||
window.history.pushState({ description: true }, '');
|
||||
}, []);
|
||||
|
||||
// 사진 정보 바텀시트 열기
|
||||
const openPhotoInfo = useCallback(() => {
|
||||
setShowPhotoInfo(true);
|
||||
window.history.pushState({ photoInfo: true }, '');
|
||||
}, []);
|
||||
|
||||
// 뒤로가기 처리
|
||||
useEffect(() => {
|
||||
const handlePopState = () => {
|
||||
if (showDescriptionModal) {
|
||||
if (showPhotoInfo) {
|
||||
setShowPhotoInfo(false);
|
||||
} else if (showDescriptionModal) {
|
||||
setShowDescriptionModal(false);
|
||||
} else if (lightbox.open) {
|
||||
setLightbox((prev) => ({ ...prev, open: false }));
|
||||
|
|
@ -70,7 +82,7 @@ function MobileAlbumDetail() {
|
|||
|
||||
window.addEventListener('popstate', handlePopState);
|
||||
return () => window.removeEventListener('popstate', handlePopState);
|
||||
}, [showDescriptionModal, lightbox.open]);
|
||||
}, [showPhotoInfo, showDescriptionModal, lightbox.open]);
|
||||
|
||||
// 이미지 다운로드
|
||||
const downloadImage = useCallback(async () => {
|
||||
|
|
@ -384,7 +396,15 @@ function MobileAlbumDetail() {
|
|||
|
||||
{/* 라이트박스 - Swiper ViewPager 스타일 */}
|
||||
<AnimatePresence>
|
||||
{lightbox.open && (
|
||||
{lightbox.open && (() => {
|
||||
const currentPhoto = lightbox.photos?.[lightbox.index];
|
||||
const concept = currentPhoto?.title;
|
||||
const hasValidConcept = concept && concept.trim() && concept !== 'Default';
|
||||
const members = currentPhoto?.members;
|
||||
const hasMembers = members && String(members).trim();
|
||||
const hasPhotoInfo = hasValidConcept || hasMembers;
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
|
|
@ -403,7 +423,12 @@ function MobileAlbumDetail() {
|
|||
{lightbox.index + 1} / {lightbox.images.length}
|
||||
</span>
|
||||
)}
|
||||
<div className="flex-1 flex justify-end">
|
||||
<div className="flex-1 flex justify-end items-center gap-2">
|
||||
{hasPhotoInfo && (
|
||||
<button onClick={openPhotoInfo} className="text-white/80 p-1">
|
||||
<Info size={22} />
|
||||
</button>
|
||||
)}
|
||||
<button onClick={downloadImage} className="text-white/80 p-1">
|
||||
<Download size={22} />
|
||||
</button>
|
||||
|
|
@ -427,11 +452,11 @@ function MobileAlbumDetail() {
|
|||
>
|
||||
{lightbox.images.map((url, index) => (
|
||||
<SwiperSlide key={index} virtualIndex={index}>
|
||||
<div className="w-full h-full flex flex-col items-center justify-center">
|
||||
<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-[70vh] object-contain"
|
||||
className="max-w-full max-h-full object-contain"
|
||||
controls
|
||||
autoPlay={index === lightbox.index}
|
||||
/>
|
||||
|
|
@ -439,41 +464,10 @@ function MobileAlbumDetail() {
|
|||
<img
|
||||
src={url}
|
||||
alt=""
|
||||
className="max-w-full max-h-[70vh] object-contain"
|
||||
className="max-w-full max-h-full object-contain"
|
||||
loading={Math.abs(index - lightbox.index) <= 2 ? 'eager' : 'lazy'}
|
||||
/>
|
||||
)}
|
||||
{/* 컨셉 포토 정보 (멤버 + 컨셉) */}
|
||||
{lightbox.photos && (() => {
|
||||
const photo = lightbox.photos[index];
|
||||
const title = photo?.title;
|
||||
const hasValidTitle = title && title.trim() && title !== 'Default';
|
||||
const members = photo?.members;
|
||||
const hasMembers = members && String(members).trim();
|
||||
|
||||
if (!hasValidTitle && !hasMembers) return null;
|
||||
|
||||
return (
|
||||
<div className="mt-4 flex flex-col items-center gap-2 px-4">
|
||||
{hasValidTitle && (
|
||||
<span className="px-3 py-1.5 bg-white/10 backdrop-blur-sm rounded-full text-white font-medium text-sm">
|
||||
{title}
|
||||
</span>
|
||||
)}
|
||||
{hasMembers && (
|
||||
<div className="flex flex-wrap items-center justify-center gap-1.5">
|
||||
{String(members)
|
||||
.split(',')
|
||||
.map((member, idx) => (
|
||||
<span key={idx} className="px-2.5 py-1 bg-primary/80 rounded-full text-white text-xs">
|
||||
{member.trim()}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})()}
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
))}
|
||||
|
|
@ -488,9 +482,74 @@ function MobileAlbumDetail() {
|
|||
width={120}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* 사진 정보 바텀시트 */}
|
||||
<AnimatePresence>
|
||||
{showPhotoInfo && hasPhotoInfo && (
|
||||
<motion.div
|
||||
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>
|
||||
<p className="text-zinc-400 text-xs mb-1">멤버</p>
|
||||
<p className="text-white">{members}</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{hasValidConcept && (
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="w-8 h-8 bg-white/10 rounded-full flex items-center justify-center flex-shrink-0">
|
||||
<Tag size={16} className="text-zinc-400" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-zinc-400 text-xs mb-1">컨셉</p>
|
||||
<p className="text-white">{concept}</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</motion.div>
|
||||
);
|
||||
})()}
|
||||
</AnimatePresence>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue