210 lines
9.1 KiB
React
210 lines
9.1 KiB
React
|
import { useState, useEffect } from 'react';
|
||
|
|
import { useParams, useNavigate } from 'react-router-dom';
|
||
|
|
import { motion } from 'framer-motion';
|
||
|
|
import { ArrowLeft, Calendar, Music2, Play, Clock } from 'lucide-react';
|
||
|
|
|
||
|
|
function AlbumDetail() {
|
||
|
|
const { id } = useParams();
|
||
|
|
const navigate = useNavigate();
|
||
|
|
const [album, setAlbum] = useState(null);
|
||
|
|
const [loading, setLoading] = useState(true);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
fetch(`/api/albums/${id}`)
|
||
|
|
.then(res => res.json())
|
||
|
|
.then(data => {
|
||
|
|
setAlbum(data);
|
||
|
|
setLoading(false);
|
||
|
|
})
|
||
|
|
.catch(error => {
|
||
|
|
console.error('앨범 데이터 로드 오류:', error);
|
||
|
|
setLoading(false);
|
||
|
|
});
|
||
|
|
}, [id]);
|
||
|
|
|
||
|
|
// 날짜 포맷팅
|
||
|
|
const formatDate = (dateStr) => {
|
||
|
|
if (!dateStr) return '';
|
||
|
|
const date = new Date(dateStr);
|
||
|
|
return `${date.getFullYear()}.${String(date.getMonth() + 1).padStart(2, '0')}.${String(date.getDate()).padStart(2, '0')}`;
|
||
|
|
};
|
||
|
|
|
||
|
|
// 총 재생 시간 계산
|
||
|
|
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')}`;
|
||
|
|
};
|
||
|
|
|
||
|
|
// 뒤로가기
|
||
|
|
const handleBack = () => {
|
||
|
|
navigate('/discography');
|
||
|
|
};
|
||
|
|
|
||
|
|
if (loading) {
|
||
|
|
return (
|
||
|
|
<motion.div
|
||
|
|
initial={{ opacity: 0 }}
|
||
|
|
animate={{ opacity: 1 }}
|
||
|
|
className="py-16 flex justify-center items-center min-h-[60vh]"
|
||
|
|
>
|
||
|
|
<div className="animate-spin rounded-full h-12 w-12 border-4 border-primary border-t-transparent"></div>
|
||
|
|
</motion.div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
if (!album) {
|
||
|
|
return (
|
||
|
|
<div className="py-16 text-center">
|
||
|
|
<p className="text-gray-500">앨범을 찾을 수 없습니다.</p>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<motion.div
|
||
|
|
initial={{ opacity: 0 }}
|
||
|
|
animate={{ opacity: 1 }}
|
||
|
|
transition={{ duration: 0.3 }}
|
||
|
|
className="py-16"
|
||
|
|
>
|
||
|
|
<div className="max-w-7xl mx-auto px-6">
|
||
|
|
{/* 뒤로가기 버튼 */}
|
||
|
|
<motion.button
|
||
|
|
initial={{ opacity: 0, x: -20 }}
|
||
|
|
animate={{ opacity: 1, x: 0 }}
|
||
|
|
onClick={handleBack}
|
||
|
|
className="flex items-center gap-2 text-gray-500 hover:text-primary mb-8 transition-colors"
|
||
|
|
>
|
||
|
|
<ArrowLeft size={20} />
|
||
|
|
<span>앨범으로 돌아가기</span>
|
||
|
|
</motion.button>
|
||
|
|
|
||
|
|
{/* 앨범 정보 헤더 */}
|
||
|
|
<div className="flex gap-10 mb-10">
|
||
|
|
{/* 앨범 커버 */}
|
||
|
|
<motion.div
|
||
|
|
initial={{ opacity: 0, scale: 0.9 }}
|
||
|
|
animate={{ opacity: 1, scale: 1 }}
|
||
|
|
transition={{ duration: 0.4 }}
|
||
|
|
className="w-72 h-72 flex-shrink-0 rounded-2xl overflow-hidden shadow-2xl"
|
||
|
|
>
|
||
|
|
<img
|
||
|
|
src={album.cover_url}
|
||
|
|
alt={album.title}
|
||
|
|
className="w-full h-full object-cover"
|
||
|
|
/>
|
||
|
|
</motion.div>
|
||
|
|
|
||
|
|
{/* 앨범 정보 */}
|
||
|
|
<motion.div
|
||
|
|
initial={{ opacity: 0, y: 20 }}
|
||
|
|
animate={{ opacity: 1, y: 0 }}
|
||
|
|
transition={{ delay: 0.1, duration: 0.4 }}
|
||
|
|
className="flex-1 pt-2"
|
||
|
|
>
|
||
|
|
<span className="inline-block w-fit px-3 py-1 bg-primary/10 text-primary text-sm font-medium rounded-full mb-3">
|
||
|
|
{album.album_type}
|
||
|
|
</span>
|
||
|
|
<h1 className="text-4xl font-bold mb-4">{album.title}</h1>
|
||
|
|
|
||
|
|
<div className="flex items-center gap-6 text-gray-500 mb-4">
|
||
|
|
<div className="flex items-center gap-2">
|
||
|
|
<Calendar size={18} />
|
||
|
|
<span>{formatDate(album.release_date)}</span>
|
||
|
|
</div>
|
||
|
|
<div className="flex items-center gap-2">
|
||
|
|
<Music2 size={18} />
|
||
|
|
<span>{album.tracks?.length || 0}곡</span>
|
||
|
|
</div>
|
||
|
|
<div className="flex items-center gap-2">
|
||
|
|
<Clock size={18} />
|
||
|
|
<span>{getTotalDuration()}</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<p className="text-sm text-primary font-medium">
|
||
|
|
타이틀곡: {album.tracks?.find(t => t.is_title_track === 1)?.title || album.tracks?.[0]?.title}
|
||
|
|
</p>
|
||
|
|
</motion.div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* 2열 그리드: 소개글 + 트랙 리스트 */}
|
||
|
|
<div className="grid grid-cols-3 gap-8">
|
||
|
|
{/* 소개글 */}
|
||
|
|
{album.description && (
|
||
|
|
<motion.div
|
||
|
|
initial={{ opacity: 0, y: 30 }}
|
||
|
|
animate={{ opacity: 1, y: 0 }}
|
||
|
|
transition={{ delay: 0.2, duration: 0.4 }}
|
||
|
|
className="col-span-1"
|
||
|
|
>
|
||
|
|
<h2 className="text-xl font-bold mb-4">앨범 소개</h2>
|
||
|
|
<div className="bg-white rounded-2xl shadow-lg p-6">
|
||
|
|
<p className="text-gray-600 leading-relaxed text-sm whitespace-pre-line">
|
||
|
|
{album.description}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</motion.div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{/* 트랙 리스트 */}
|
||
|
|
<motion.div
|
||
|
|
initial={{ opacity: 0, y: 30 }}
|
||
|
|
animate={{ opacity: 1, y: 0 }}
|
||
|
|
transition={{ delay: 0.3, duration: 0.4 }}
|
||
|
|
className={album.description ? "col-span-2" : "col-span-3"}
|
||
|
|
>
|
||
|
|
<h2 className="text-xl font-bold mb-4">수록곡</h2>
|
||
|
|
<div className="bg-white rounded-2xl shadow-lg overflow-hidden">
|
||
|
|
{album.tracks?.map((track, index) => (
|
||
|
|
<div
|
||
|
|
key={track.id}
|
||
|
|
className={`group flex items-center gap-4 p-4 hover:bg-primary/5 transition-all duration-200 cursor-pointer ${
|
||
|
|
index !== album.tracks.length - 1 ? 'border-b border-gray-100' : ''
|
||
|
|
}`}
|
||
|
|
>
|
||
|
|
{/* 트랙 번호 */}
|
||
|
|
<div className="w-10 h-10 flex items-center justify-center rounded-full bg-gray-100 group-hover:bg-primary/10 transition-colors">
|
||
|
|
<span className="text-gray-500 group-hover:text-primary transition-colors">
|
||
|
|
{String(track.track_number).padStart(2, '0')}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* 트랙 정보 */}
|
||
|
|
<div className="flex-1">
|
||
|
|
<div className="flex items-center gap-2">
|
||
|
|
<h3 className="font-semibold group-hover:text-primary transition-colors">{track.title}</h3>
|
||
|
|
{track.is_title_track === 1 && (
|
||
|
|
<span className="px-2 py-0.5 bg-primary text-white text-xs font-medium rounded-full">
|
||
|
|
타이틀
|
||
|
|
</span>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* 재생 시간 */}
|
||
|
|
<div className="text-gray-400 tabular-nums text-sm">
|
||
|
|
{track.duration || '-'}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</motion.div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</motion.div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
export default AlbumDetail;
|
||
|
|
|