252 lines
13 KiB
React
252 lines
13 KiB
React
|
import { useState, useMemo } from 'react';
|
||
|
|
import { useParams, useNavigate, Link } from 'react-router-dom';
|
||
|
|
import { useQuery } from '@tanstack/react-query';
|
||
|
|
import { motion } from 'framer-motion';
|
||
|
|
import { Clock, User, Music, Mic2, Play, ExternalLink, ChevronRight } from 'lucide-react';
|
||
|
|
import { getTrack } from '../../../api/public/albums';
|
||
|
|
import { formatDate } from '../../../utils/date';
|
||
|
|
|
||
|
|
// PC 곡 상세 페이지
|
||
|
|
function TrackDetail() {
|
||
|
|
const { name: albumName, trackTitle } = useParams();
|
||
|
|
const navigate = useNavigate();
|
||
|
|
|
||
|
|
// useQuery로 트랙 데이터 로드
|
||
|
|
const { data: track, isLoading: loading, error } = useQuery({
|
||
|
|
queryKey: ['track', albumName, trackTitle],
|
||
|
|
queryFn: () => getTrack(albumName, trackTitle),
|
||
|
|
enabled: !!albumName && !!trackTitle,
|
||
|
|
});
|
||
|
|
|
||
|
|
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 (error || !track) {
|
||
|
|
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-5xl mx-auto px-6">
|
||
|
|
{/* 브레드크럼 네비게이션 */}
|
||
|
|
<div className="flex items-center gap-2 text-sm text-gray-500 mb-8">
|
||
|
|
<Link to="/album" className="hover:text-primary transition-colors">
|
||
|
|
앨범
|
||
|
|
</Link>
|
||
|
|
<span>/</span>
|
||
|
|
<Link
|
||
|
|
to={`/album/${encodeURIComponent(track.album?.title || albumName)}`}
|
||
|
|
className="hover:text-primary transition-colors"
|
||
|
|
>
|
||
|
|
{track.album?.title}
|
||
|
|
</Link>
|
||
|
|
<span>/</span>
|
||
|
|
<span className="text-gray-700">{track.title}</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* 트랙 정보 헤더 */}
|
||
|
|
<div className="flex gap-8 mb-10">
|
||
|
|
{/* 앨범 커버 */}
|
||
|
|
<motion.div
|
||
|
|
initial={{ opacity: 0, scale: 0.9 }}
|
||
|
|
animate={{ opacity: 1, scale: 1 }}
|
||
|
|
transition={{ duration: 0.4 }}
|
||
|
|
className="w-56 h-56 flex-shrink-0 rounded-2xl overflow-hidden shadow-lg cursor-pointer group"
|
||
|
|
onClick={() => navigate(`/album/${encodeURIComponent(track.album?.title || albumName)}`)}
|
||
|
|
>
|
||
|
|
<img
|
||
|
|
src={track.album?.cover_medium_url}
|
||
|
|
alt={track.album?.title}
|
||
|
|
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
|
||
|
|
/>
|
||
|
|
</motion.div>
|
||
|
|
|
||
|
|
{/* 트랙 정보 */}
|
||
|
|
<motion.div
|
||
|
|
initial={{ opacity: 0, y: 20 }}
|
||
|
|
animate={{ opacity: 1, y: 0 }}
|
||
|
|
transition={{ delay: 0.1, duration: 0.4 }}
|
||
|
|
className="flex-1"
|
||
|
|
>
|
||
|
|
<div className="flex items-center gap-3 mb-3">
|
||
|
|
{track.is_title_track === 1 && (
|
||
|
|
<span className="px-3 py-1 bg-primary text-white text-sm font-medium rounded-full">
|
||
|
|
TITLE
|
||
|
|
</span>
|
||
|
|
)}
|
||
|
|
<span className="text-sm text-gray-500">
|
||
|
|
Track {String(track.track_number).padStart(2, '0')}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h1 className="text-4xl font-bold mb-4">{track.title}</h1>
|
||
|
|
|
||
|
|
{/* 메타 정보 */}
|
||
|
|
<div className="flex items-center gap-6 text-gray-500 mb-6">
|
||
|
|
<Link
|
||
|
|
to={`/album/${encodeURIComponent(track.album?.title || albumName)}`}
|
||
|
|
className="flex items-center gap-2 hover:text-primary transition-colors"
|
||
|
|
>
|
||
|
|
<Music size={18} />
|
||
|
|
<span>{track.album?.title}</span>
|
||
|
|
</Link>
|
||
|
|
{track.duration && (
|
||
|
|
<div className="flex items-center gap-2">
|
||
|
|
<Clock size={18} />
|
||
|
|
<span>{track.duration}</span>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* 뮤직비디오 링크 */}
|
||
|
|
{track.music_video_url && (
|
||
|
|
<a
|
||
|
|
href={track.music_video_url}
|
||
|
|
target="_blank"
|
||
|
|
rel="noopener noreferrer"
|
||
|
|
className="inline-flex items-center gap-2 px-5 py-2.5 bg-red-500 text-white rounded-full hover:bg-red-600 transition-colors"
|
||
|
|
>
|
||
|
|
<Play size={18} fill="currentColor" />
|
||
|
|
뮤직비디오 보기
|
||
|
|
<ExternalLink size={14} />
|
||
|
|
</a>
|
||
|
|
)}
|
||
|
|
</motion.div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* 크레딧 & 가사 영역 */}
|
||
|
|
<div className="grid grid-cols-3 gap-8">
|
||
|
|
{/* 왼쪽: 크레딧 + 수록곡 */}
|
||
|
|
<div className="col-span-1 space-y-6">
|
||
|
|
{/* 크레딧 */}
|
||
|
|
{(track.lyricist || track.composer || track.arranger) && (
|
||
|
|
<motion.div
|
||
|
|
initial={{ opacity: 0, y: 20 }}
|
||
|
|
animate={{ opacity: 1, y: 0 }}
|
||
|
|
transition={{ delay: 0.2, duration: 0.4 }}
|
||
|
|
className="bg-gray-50 rounded-2xl p-6"
|
||
|
|
>
|
||
|
|
<h2 className="text-lg font-bold mb-4">크레딧</h2>
|
||
|
|
<div className="space-y-4">
|
||
|
|
{track.lyricist && (
|
||
|
|
<div className="flex items-start gap-3">
|
||
|
|
<div className="w-8 h-8 bg-primary/10 rounded-full flex items-center justify-center flex-shrink-0">
|
||
|
|
<Mic2 size={14} className="text-primary" />
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<p className="text-xs text-gray-400 mb-0.5">작사</p>
|
||
|
|
<p className="text-sm text-gray-700">{track.lyricist}</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
{track.composer && (
|
||
|
|
<div className="flex items-start gap-3">
|
||
|
|
<div className="w-8 h-8 bg-primary/10 rounded-full flex items-center justify-center flex-shrink-0">
|
||
|
|
<Music size={14} className="text-primary" />
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<p className="text-xs text-gray-400 mb-0.5">작곡</p>
|
||
|
|
<p className="text-sm text-gray-700">{track.composer}</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
{track.arranger && (
|
||
|
|
<div className="flex items-start gap-3">
|
||
|
|
<div className="w-8 h-8 bg-gray-200 rounded-full flex items-center justify-center flex-shrink-0">
|
||
|
|
<User size={14} className="text-gray-500" />
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<p className="text-xs text-gray-400 mb-0.5">편곡</p>
|
||
|
|
<p className="text-sm text-gray-700">{track.arranger}</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</motion.div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{/* 수록곡 */}
|
||
|
|
<motion.div
|
||
|
|
initial={{ opacity: 0, y: 20 }}
|
||
|
|
animate={{ opacity: 1, y: 0 }}
|
||
|
|
transition={{ delay: 0.3, duration: 0.4 }}
|
||
|
|
className="bg-white border border-gray-100 rounded-2xl p-6"
|
||
|
|
>
|
||
|
|
<h2 className="text-lg font-bold mb-4">수록곡</h2>
|
||
|
|
<div className="space-y-1">
|
||
|
|
{track.otherTracks?.map((t) => (
|
||
|
|
<Link
|
||
|
|
key={t.id}
|
||
|
|
to={`/album/${encodeURIComponent(track.album?.title || albumName)}/track/${encodeURIComponent(t.title)}`}
|
||
|
|
className={`flex items-center gap-3 p-2.5 rounded-lg transition-colors ${
|
||
|
|
t.title === track.title
|
||
|
|
? 'bg-primary/10 text-primary'
|
||
|
|
: 'hover:bg-gray-50'
|
||
|
|
}`}
|
||
|
|
>
|
||
|
|
<span className="w-6 text-center text-sm text-gray-400 tabular-nums">
|
||
|
|
{String(t.track_number).padStart(2, '0')}
|
||
|
|
</span>
|
||
|
|
<span className={`flex-1 text-sm truncate ${
|
||
|
|
t.title === track.title ? 'font-medium' : ''
|
||
|
|
}`}>
|
||
|
|
{t.title}
|
||
|
|
</span>
|
||
|
|
{t.is_title_track === 1 && (
|
||
|
|
<span className="px-1.5 py-0.5 bg-primary text-white text-[10px] font-bold rounded">
|
||
|
|
T
|
||
|
|
</span>
|
||
|
|
)}
|
||
|
|
</Link>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</motion.div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* 오른쪽: 가사 */}
|
||
|
|
<motion.div
|
||
|
|
initial={{ opacity: 0, y: 20 }}
|
||
|
|
animate={{ opacity: 1, y: 0 }}
|
||
|
|
transition={{ delay: 0.25, duration: 0.4 }}
|
||
|
|
className="col-span-2"
|
||
|
|
>
|
||
|
|
<div className="bg-white border border-gray-100 rounded-2xl p-8">
|
||
|
|
<h2 className="text-lg font-bold mb-6">가사</h2>
|
||
|
|
{track.lyrics ? (
|
||
|
|
<div className="text-gray-700 leading-loose whitespace-pre-line">
|
||
|
|
{track.lyrics}
|
||
|
|
</div>
|
||
|
|
) : (
|
||
|
|
<div className="text-center py-12 text-gray-400">
|
||
|
|
<Music size={48} className="mx-auto mb-4 opacity-30" />
|
||
|
|
<p>가사 정보가 없습니다</p>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</motion.div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</motion.div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
export default TrackDetail;
|