456 lines
17 KiB
React
456 lines
17 KiB
React
|
import { useState, useEffect, useCallback, useRef } from 'react';
|
||
|
|
import { useParams, useNavigate } from 'react-router-dom';
|
||
|
|
import { useQuery } from '@tanstack/react-query';
|
||
|
|
import { motion, AnimatePresence } from 'framer-motion';
|
||
|
|
import {
|
||
|
|
Play,
|
||
|
|
Calendar,
|
||
|
|
Music2,
|
||
|
|
Clock,
|
||
|
|
X,
|
||
|
|
Download,
|
||
|
|
ChevronDown,
|
||
|
|
ChevronUp,
|
||
|
|
FileText,
|
||
|
|
ChevronRight,
|
||
|
|
} from 'lucide-react';
|
||
|
|
import { Swiper, SwiperSlide } from 'swiper/react';
|
||
|
|
import { Virtual } from 'swiper/modules';
|
||
|
|
import 'swiper/css';
|
||
|
|
import { getAlbumByName } from '@/api/albums';
|
||
|
|
import { formatDate } from '@/utils';
|
||
|
|
import { LightboxIndicator } from '@/components/common';
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Mobile 앨범 상세 페이지
|
||
|
|
*/
|
||
|
|
function MobileAlbumDetail() {
|
||
|
|
const { name } = useParams();
|
||
|
|
const navigate = useNavigate();
|
||
|
|
const [lightbox, setLightbox] = useState({ open: false, images: [], index: 0, showNav: true, teasers: null });
|
||
|
|
const [showAllTracks, setShowAllTracks] = useState(false);
|
||
|
|
const [showDescriptionModal, setShowDescriptionModal] = useState(false);
|
||
|
|
const swiperRef = useRef(null);
|
||
|
|
|
||
|
|
// 앨범 데이터 로드
|
||
|
|
const { data: album, isLoading: loading } = useQuery({
|
||
|
|
queryKey: ['album', name],
|
||
|
|
queryFn: () => getAlbumByName(name),
|
||
|
|
enabled: !!name,
|
||
|
|
});
|
||
|
|
|
||
|
|
// 라이트박스 열기
|
||
|
|
const openLightbox = useCallback((images, index, options = {}) => {
|
||
|
|
setLightbox({
|
||
|
|
open: true,
|
||
|
|
images,
|
||
|
|
index,
|
||
|
|
showNav: options.showNav !== false,
|
||
|
|
teasers: options.teasers,
|
||
|
|
});
|
||
|
|
window.history.pushState({ lightbox: true }, '');
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
// 앨범 소개 열기
|
||
|
|
const openDescriptionModal = useCallback(() => {
|
||
|
|
setShowDescriptionModal(true);
|
||
|
|
window.history.pushState({ description: true }, '');
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
// 뒤로가기 처리
|
||
|
|
useEffect(() => {
|
||
|
|
const handlePopState = () => {
|
||
|
|
if (showDescriptionModal) {
|
||
|
|
setShowDescriptionModal(false);
|
||
|
|
} else if (lightbox.open) {
|
||
|
|
setLightbox((prev) => ({ ...prev, open: false }));
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
window.addEventListener('popstate', handlePopState);
|
||
|
|
return () => window.removeEventListener('popstate', handlePopState);
|
||
|
|
}, [showDescriptionModal, lightbox.open]);
|
||
|
|
|
||
|
|
// 이미지 다운로드
|
||
|
|
const downloadImage = useCallback(async () => {
|
||
|
|
const imageUrl = lightbox.images[lightbox.index];
|
||
|
|
if (!imageUrl) return;
|
||
|
|
|
||
|
|
try {
|
||
|
|
const response = await fetch(imageUrl);
|
||
|
|
const blob = await response.blob();
|
||
|
|
const url = window.URL.createObjectURL(blob);
|
||
|
|
const link = document.createElement('a');
|
||
|
|
link.href = url;
|
||
|
|
link.download = `fromis9_photo_${String(lightbox.index + 1).padStart(2, '0')}.webp`;
|
||
|
|
document.body.appendChild(link);
|
||
|
|
link.click();
|
||
|
|
document.body.removeChild(link);
|
||
|
|
window.URL.revokeObjectURL(url);
|
||
|
|
} catch (error) {
|
||
|
|
console.error('다운로드 오류:', error);
|
||
|
|
}
|
||
|
|
}, [lightbox.images, lightbox.index]);
|
||
|
|
|
||
|
|
// 라이트박스/모달 body 스크롤 방지
|
||
|
|
useEffect(() => {
|
||
|
|
if (lightbox.open || showDescriptionModal) {
|
||
|
|
document.body.style.overflow = 'hidden';
|
||
|
|
} else {
|
||
|
|
document.body.style.overflow = '';
|
||
|
|
}
|
||
|
|
return () => {
|
||
|
|
document.body.style.overflow = '';
|
||
|
|
};
|
||
|
|
}, [lightbox.open, showDescriptionModal]);
|
||
|
|
|
||
|
|
// 총 재생 시간 계산
|
||
|
|
const getTotalDuration = () => {
|
||
|
|
if (!album?.tracks) return '';
|
||
|
|
let totalSeconds = 0;
|
||
|
|
album.tracks.forEach((track) => {
|
||
|
|
if (track.duration) {
|
||
|
|
const parts = track.duration.split(':');
|
||
|
|
totalSeconds += parseInt(parts[0]) * 60 + parseInt(parts[1]);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
const mins = Math.floor(totalSeconds / 60);
|
||
|
|
const secs = totalSeconds % 60;
|
||
|
|
return `${mins}:${String(secs).padStart(2, '0')}`;
|
||
|
|
};
|
||
|
|
|
||
|
|
if (loading) {
|
||
|
|
return (
|
||
|
|
<div className="flex items-center justify-center h-64">
|
||
|
|
<div className="w-8 h-8 border-2 border-primary border-t-transparent rounded-full animate-spin" />
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
if (!album) {
|
||
|
|
return (
|
||
|
|
<div className="text-center py-12">
|
||
|
|
<p className="text-gray-500">앨범을 찾을 수 없습니다</p>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
const allPhotos = album.conceptPhotos ? Object.values(album.conceptPhotos).flat() : [];
|
||
|
|
const displayTracks = showAllTracks ? album.tracks : album.tracks?.slice(0, 5);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<div>
|
||
|
|
{/* 앨범 히어로 섹션 */}
|
||
|
|
<div className="relative">
|
||
|
|
{/* 배경 블러 이미지 */}
|
||
|
|
<div className="absolute inset-0 overflow-hidden">
|
||
|
|
<img src={album.cover_medium_url} alt="" className="w-full h-full object-cover blur-2xl scale-110 opacity-30" />
|
||
|
|
<div className="absolute inset-0 bg-gradient-to-b from-white/60 via-white/80 to-white" />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* 콘텐츠 */}
|
||
|
|
<div className="relative px-5 pt-4 pb-5">
|
||
|
|
<div className="flex flex-col items-center">
|
||
|
|
{/* 앨범 커버 */}
|
||
|
|
<motion.div
|
||
|
|
initial={{ opacity: 0, y: 20 }}
|
||
|
|
animate={{ opacity: 1, y: 0 }}
|
||
|
|
className="w-44 h-44 rounded-2xl overflow-hidden shadow-xl mb-4"
|
||
|
|
onClick={() => openLightbox([album.cover_original_url || album.cover_medium_url], 0, { showNav: false })}
|
||
|
|
>
|
||
|
|
<img src={album.cover_medium_url} alt={album.title} className="w-full h-full object-cover" />
|
||
|
|
</motion.div>
|
||
|
|
|
||
|
|
{/* 앨범 정보 */}
|
||
|
|
<motion.div
|
||
|
|
initial={{ opacity: 0, y: 10 }}
|
||
|
|
animate={{ opacity: 1, y: 0 }}
|
||
|
|
transition={{ delay: 0.1 }}
|
||
|
|
className="text-center"
|
||
|
|
>
|
||
|
|
<span className="inline-block px-3 py-1 bg-primary/10 text-primary text-xs font-medium rounded-full mb-2">
|
||
|
|
{album.album_type}
|
||
|
|
</span>
|
||
|
|
<h1 className="text-2xl font-bold mb-2">{album.title}</h1>
|
||
|
|
|
||
|
|
{/* 메타 정보 */}
|
||
|
|
<div className="flex items-center justify-center gap-4 text-sm text-gray-500">
|
||
|
|
<div className="flex items-center gap-1">
|
||
|
|
<Calendar size={14} />
|
||
|
|
<span>{formatDate(album.release_date, 'YYYY.MM.DD')}</span>
|
||
|
|
</div>
|
||
|
|
<div className="flex items-center gap-1">
|
||
|
|
<Music2 size={14} />
|
||
|
|
<span>{album.tracks?.length || 0}곡</span>
|
||
|
|
</div>
|
||
|
|
<div className="flex items-center gap-1">
|
||
|
|
<Clock size={14} />
|
||
|
|
<span>{getTotalDuration()}</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* 앨범 소개 버튼 */}
|
||
|
|
{album.description && (
|
||
|
|
<button
|
||
|
|
onClick={openDescriptionModal}
|
||
|
|
className="mt-3 flex items-center gap-1.5 mx-auto px-3 py-1.5 text-xs text-gray-500 bg-white/80 rounded-full shadow-sm"
|
||
|
|
>
|
||
|
|
<FileText size={12} />
|
||
|
|
앨범 소개
|
||
|
|
</button>
|
||
|
|
)}
|
||
|
|
</motion.div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* 티저 이미지 */}
|
||
|
|
{album.teasers && album.teasers.length > 0 && (
|
||
|
|
<motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} className="px-4 py-4 border-b border-gray-100">
|
||
|
|
<p className="text-sm font-semibold mb-3">티저 이미지</p>
|
||
|
|
<div className="flex gap-3 overflow-x-auto pb-1 -mx-4 px-4 scrollbar-hide">
|
||
|
|
{album.teasers.map((teaser, index) => (
|
||
|
|
<div
|
||
|
|
key={index}
|
||
|
|
onClick={() =>
|
||
|
|
openLightbox(
|
||
|
|
album.teasers.map((t) => (t.media_type === 'video' ? t.video_url || t.original_url : t.original_url)),
|
||
|
|
index,
|
||
|
|
{ teasers: album.teasers, showNav: true }
|
||
|
|
)
|
||
|
|
}
|
||
|
|
className="w-24 h-24 flex-shrink-0 bg-gray-100 rounded-2xl overflow-hidden relative shadow-sm"
|
||
|
|
>
|
||
|
|
<img
|
||
|
|
src={teaser.thumb_url || teaser.original_url}
|
||
|
|
alt={`Teaser ${index + 1}`}
|
||
|
|
className="w-full h-full object-cover"
|
||
|
|
/>
|
||
|
|
{teaser.media_type === 'video' && (
|
||
|
|
<div className="absolute inset-0 flex items-center justify-center bg-black/30">
|
||
|
|
<div className="w-8 h-8 bg-white/90 rounded-full flex items-center justify-center">
|
||
|
|
<Play size={14} fill="currentColor" className="ml-0.5 text-gray-800" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</motion.div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{/* 수록곡 */}
|
||
|
|
{album.tracks && album.tracks.length > 0 && (
|
||
|
|
<motion.div
|
||
|
|
initial={{ opacity: 0, y: 20 }}
|
||
|
|
animate={{ opacity: 1, y: 0 }}
|
||
|
|
className="px-4 py-4 border-b border-gray-100"
|
||
|
|
>
|
||
|
|
<p className="text-sm font-semibold mb-3">수록곡</p>
|
||
|
|
<div className="space-y-1">
|
||
|
|
{displayTracks?.map((track) => (
|
||
|
|
<div
|
||
|
|
key={track.id}
|
||
|
|
onClick={() =>
|
||
|
|
navigate(`/album/${encodeURIComponent(album.title)}/track/${encodeURIComponent(track.title)}`)
|
||
|
|
}
|
||
|
|
className="flex items-center gap-3 py-2.5 px-3 rounded-xl hover:bg-gray-50 active:bg-gray-100 transition-colors cursor-pointer"
|
||
|
|
>
|
||
|
|
<span className="w-6 text-center text-sm text-gray-400 tabular-nums">
|
||
|
|
{String(track.track_number).padStart(2, '0')}
|
||
|
|
</span>
|
||
|
|
<div className="flex-1 min-w-0 flex items-center gap-2">
|
||
|
|
<p className={`text-sm font-medium truncate ${track.is_title_track ? 'text-primary' : 'text-gray-800'}`}>
|
||
|
|
{track.title}
|
||
|
|
</p>
|
||
|
|
{track.is_title_track === 1 && (
|
||
|
|
<span className="px-1.5 py-0.5 bg-primary text-white text-[10px] font-bold rounded flex-shrink-0">
|
||
|
|
TITLE
|
||
|
|
</span>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
<span className="text-xs text-gray-400 tabular-nums">{track.duration || '-'}</span>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
{/* 더보기/접기 버튼 */}
|
||
|
|
{album.tracks.length > 5 && (
|
||
|
|
<button
|
||
|
|
onClick={() => setShowAllTracks(!showAllTracks)}
|
||
|
|
className="w-full mt-2 py-2 text-sm text-gray-500 flex items-center justify-center gap-1"
|
||
|
|
>
|
||
|
|
{showAllTracks ? '접기' : `${album.tracks.length - 5}곡 더보기`}
|
||
|
|
{showAllTracks ? <ChevronUp size={16} /> : <ChevronDown size={16} />}
|
||
|
|
</button>
|
||
|
|
)}
|
||
|
|
</motion.div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{/* 컨셉 포토 */}
|
||
|
|
{allPhotos.length > 0 && (
|
||
|
|
<motion.div
|
||
|
|
initial={{ opacity: 0, y: 20 }}
|
||
|
|
animate={{ opacity: 1, y: 0 }}
|
||
|
|
transition={{ delay: 0.1 }}
|
||
|
|
className="px-4 py-4"
|
||
|
|
>
|
||
|
|
<p className="text-sm font-semibold mb-3">컨셉 포토</p>
|
||
|
|
<div className="grid grid-cols-3 gap-2">
|
||
|
|
{allPhotos.slice(0, 6).map((photo, idx) => (
|
||
|
|
<div
|
||
|
|
key={photo.id}
|
||
|
|
onClick={() => openLightbox([photo.original_url], 0, { showNav: false })}
|
||
|
|
className="aspect-square bg-gray-100 rounded-xl overflow-hidden shadow-sm"
|
||
|
|
>
|
||
|
|
<img
|
||
|
|
src={photo.thumb_url || photo.medium_url}
|
||
|
|
alt={`컨셉 포토 ${idx + 1}`}
|
||
|
|
loading="lazy"
|
||
|
|
className="w-full h-full object-cover"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
{/* 전체보기 버튼 */}
|
||
|
|
<button
|
||
|
|
onClick={() => navigate(`/album/${name}/gallery`)}
|
||
|
|
className="w-full mt-3 py-3 text-sm text-primary font-medium bg-primary/5 rounded-xl flex items-center justify-center gap-1"
|
||
|
|
>
|
||
|
|
전체 {allPhotos.length}장 보기
|
||
|
|
<ChevronRight size={16} />
|
||
|
|
</button>
|
||
|
|
</motion.div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* 앨범 소개 다이얼로그 */}
|
||
|
|
<AnimatePresence>
|
||
|
|
{showDescriptionModal && album?.description && (
|
||
|
|
<motion.div
|
||
|
|
initial={{ opacity: 0 }}
|
||
|
|
animate={{ opacity: 1 }}
|
||
|
|
exit={{ opacity: 0 }}
|
||
|
|
className="fixed inset-0 bg-black/60 z-[60] flex items-end justify-center"
|
||
|
|
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="bg-white rounded-t-3xl w-full max-h-[80vh] overflow-hidden"
|
||
|
|
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-gray-300 rounded-full" />
|
||
|
|
</div>
|
||
|
|
{/* 헤더 */}
|
||
|
|
<div className="flex items-center justify-between px-5 pb-3 border-b border-gray-100">
|
||
|
|
<h3 className="text-lg font-bold">앨범 소개</h3>
|
||
|
|
<button onClick={() => window.history.back()} className="p-1.5">
|
||
|
|
<X size={20} className="text-gray-500" />
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
{/* 내용 */}
|
||
|
|
<div className="px-5 py-4 overflow-y-auto max-h-[60vh]">
|
||
|
|
<p className="text-sm text-gray-600 leading-relaxed whitespace-pre-line text-justify">{album.description}</p>
|
||
|
|
</div>
|
||
|
|
</motion.div>
|
||
|
|
</motion.div>
|
||
|
|
)}
|
||
|
|
</AnimatePresence>
|
||
|
|
|
||
|
|
{/* 라이트박스 - Swiper ViewPager 스타일 */}
|
||
|
|
<AnimatePresence>
|
||
|
|
{lightbox.open && (
|
||
|
|
<motion.div
|
||
|
|
initial={{ opacity: 0 }}
|
||
|
|
animate={{ opacity: 1 }}
|
||
|
|
exit={{ opacity: 0 }}
|
||
|
|
className="fixed inset-0 bg-black z-[60] flex flex-col"
|
||
|
|
>
|
||
|
|
{/* 상단 헤더 */}
|
||
|
|
<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 */}
|
||
|
|
<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>
|
||
|
|
|
||
|
|
{/* 모바일용 인디케이터 */}
|
||
|
|
{lightbox.showNav && lightbox.images.length > 1 && (
|
||
|
|
<LightboxIndicator
|
||
|
|
count={lightbox.images.length}
|
||
|
|
currentIndex={lightbox.index}
|
||
|
|
goToIndex={(i) => swiperRef.current?.slideTo(i)}
|
||
|
|
width={120}
|
||
|
|
/>
|
||
|
|
)}
|
||
|
|
</motion.div>
|
||
|
|
)}
|
||
|
|
</AnimatePresence>
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
export default MobileAlbumDetail;
|