300 lines
15 KiB
JavaScript
300 lines
15 KiB
JavaScript
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, ChevronRight } from 'lucide-react';
|
|
import { getTrack } from '../../../api/public/albums';
|
|
|
|
// 유튜브 URL에서 비디오 ID 추출
|
|
const getYoutubeVideoId = (url) => {
|
|
if (!url) return null;
|
|
const patterns = [
|
|
/(?:youtube\.com\/watch\?v=|youtu\.be\/|youtube\.com\/embed\/)([^&\n?#]+)/,
|
|
];
|
|
for (const pattern of patterns) {
|
|
const match = url.match(pattern);
|
|
if (match) return match[1];
|
|
}
|
|
return null;
|
|
};
|
|
|
|
// 쉼표 기준 줄바꿈 처리
|
|
const formatCredit = (text) => {
|
|
if (!text) return null;
|
|
return text.split(',').map((item, index) => (
|
|
<span key={index} className="block">{item.trim()}</span>
|
|
));
|
|
};
|
|
|
|
// 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,
|
|
});
|
|
|
|
const youtubeVideoId = useMemo(() => getYoutubeVideoId(track?.music_video_url), [track?.music_video_url]);
|
|
|
|
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-12"
|
|
>
|
|
<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>
|
|
<ChevronRight size={14} />
|
|
<Link
|
|
to={`/album/${encodeURIComponent(track.album?.title || albumName)}`}
|
|
className="hover:text-primary transition-colors"
|
|
>
|
|
{track.album?.title}
|
|
</Link>
|
|
<ChevronRight size={14} />
|
|
<span className="text-gray-700 font-medium">{track.title}</span>
|
|
</div>
|
|
|
|
{/* 트랙 정보 헤더 */}
|
|
<div className="flex gap-8 items-start mb-10">
|
|
{/* 앨범 커버 */}
|
|
<motion.div
|
|
initial={{ opacity: 0, scale: 0.9 }}
|
|
animate={{ opacity: 1, scale: 1 }}
|
|
transition={{ duration: 0.4 }}
|
|
className="w-48 h-48 rounded-2xl overflow-hidden shadow-lg flex-shrink-0"
|
|
>
|
|
<img
|
|
src={track.album?.cover_medium_url}
|
|
alt={track.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"
|
|
>
|
|
<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-bold rounded-full">
|
|
TITLE
|
|
</span>
|
|
)}
|
|
<span className="text-gray-500 text-sm">
|
|
Track {String(track.track_number).padStart(2, '0')}
|
|
</span>
|
|
</div>
|
|
|
|
<h1 className="text-4xl font-bold mb-3 text-gray-900">{track.title}</h1>
|
|
|
|
{/* 앨범 정보 (텍스트만) */}
|
|
<Link
|
|
to={`/album/${encodeURIComponent(track.album?.title || albumName)}`}
|
|
className="text-gray-500 hover:text-primary transition-colors mb-3 block"
|
|
>
|
|
{track.album?.album_type} · {track.album?.title}
|
|
</Link>
|
|
|
|
{/* 재생 시간 */}
|
|
{track.duration && (
|
|
<div className="flex items-center gap-2 text-gray-500">
|
|
<Clock size={16} />
|
|
<span>{track.duration}</span>
|
|
</div>
|
|
)}
|
|
</motion.div>
|
|
</div>
|
|
|
|
{/* 뮤직비디오 섹션 (유튜브 embed) */}
|
|
{youtubeVideoId && (
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ delay: 0.15, duration: 0.4 }}
|
|
className="mb-10"
|
|
>
|
|
<h2 className="text-lg font-bold mb-4 flex items-center gap-2">
|
|
<div className="w-1 h-5 bg-red-500 rounded-full"></div>
|
|
뮤직비디오
|
|
</h2>
|
|
<div className="relative w-full aspect-video rounded-2xl overflow-hidden shadow-lg bg-black">
|
|
<iframe
|
|
src={`https://www.youtube.com/embed/${youtubeVideoId}`}
|
|
title={`${track.title} 뮤직비디오`}
|
|
className="absolute inset-0 w-full h-full"
|
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
|
allowFullScreen
|
|
/>
|
|
</div>
|
|
</motion.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-white rounded-2xl p-6 border border-gray-100 shadow-sm"
|
|
>
|
|
<h2 className="text-lg font-bold mb-5 flex items-center gap-2">
|
|
<div className="w-1 h-5 bg-primary rounded-full"></div>
|
|
크레딧
|
|
</h2>
|
|
<div className="space-y-5">
|
|
{track.lyricist && (
|
|
<div className="flex items-start gap-4">
|
|
<div className="w-9 h-9 bg-gray-100 rounded-lg flex items-center justify-center flex-shrink-0">
|
|
<Mic2 size={16} className="text-gray-500" />
|
|
</div>
|
|
<div className="flex-1">
|
|
<p className="text-xs text-gray-400 font-medium mb-1">작사</p>
|
|
<p className="text-sm text-gray-700 leading-relaxed">
|
|
{formatCredit(track.lyricist)}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
{track.composer && (
|
|
<div className="flex items-start gap-4">
|
|
<div className="w-9 h-9 bg-gray-100 rounded-lg flex items-center justify-center flex-shrink-0">
|
|
<Music size={16} className="text-gray-500" />
|
|
</div>
|
|
<div className="flex-1">
|
|
<p className="text-xs text-gray-400 font-medium mb-1">작곡</p>
|
|
<p className="text-sm text-gray-700 leading-relaxed">
|
|
{formatCredit(track.composer)}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
{track.arranger && (
|
|
<div className="flex items-start gap-4">
|
|
<div className="w-9 h-9 bg-gray-100 rounded-lg flex items-center justify-center flex-shrink-0">
|
|
<User size={16} className="text-gray-500" />
|
|
</div>
|
|
<div className="flex-1">
|
|
<p className="text-xs text-gray-400 font-medium mb-1">편곡</p>
|
|
<p className="text-sm text-gray-700 leading-relaxed">
|
|
{formatCredit(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 rounded-2xl p-6 border border-gray-100 shadow-sm"
|
|
>
|
|
<h2 className="text-lg font-bold mb-4 flex items-center gap-2">
|
|
<div className="w-1 h-5 bg-primary rounded-full"></div>
|
|
수록곡
|
|
</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-3 rounded-xl transition-all ${
|
|
t.title === track.title
|
|
? 'bg-primary/10 text-primary'
|
|
: 'hover:bg-gray-50'
|
|
}`}
|
|
>
|
|
<span className={`w-7 h-7 flex items-center justify-center text-xs rounded-lg ${
|
|
t.title === track.title
|
|
? 'bg-primary text-white font-bold'
|
|
: 'bg-gray-100 text-gray-500'
|
|
}`}>
|
|
{String(t.track_number).padStart(2, '0')}
|
|
</span>
|
|
<span className={`flex-1 text-sm truncate ${
|
|
t.title === track.title ? 'font-semibold' : ''
|
|
}`}>
|
|
{t.title}
|
|
</span>
|
|
{t.is_title_track === 1 && (
|
|
<span className="px-2 py-0.5 bg-primary text-white text-[10px] font-bold rounded-md">
|
|
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 rounded-2xl p-8 border border-gray-100 shadow-sm">
|
|
<h2 className="text-lg font-bold mb-6 flex items-center gap-2">
|
|
<div className="w-1 h-5 bg-primary rounded-full"></div>
|
|
가사
|
|
</h2>
|
|
{track.lyrics ? (
|
|
<div className="text-gray-700 leading-[2] whitespace-pre-line text-[15px] max-h-[600px] overflow-y-auto pr-4">
|
|
{track.lyrics}
|
|
</div>
|
|
) : (
|
|
<div className="text-center py-16 text-gray-400">
|
|
<Mic2 size={48} className="mx-auto mb-4 opacity-20" />
|
|
<p>가사 정보가 없습니다</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
);
|
|
}
|
|
|
|
export default TrackDetail;
|