PC 곡 상세: 디자인 정리 (뮤비 embed, 크레딧 줄바꿈, 가사 스크롤)
This commit is contained in:
parent
61b8bf4815
commit
a73658854b
1 changed files with 144 additions and 119 deletions
|
|
@ -2,9 +2,29 @@ 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, Disc3 } from 'lucide-react';
|
||||
import { Clock, User, Music, Mic2, Play, ExternalLink, ChevronRight } from 'lucide-react';
|
||||
import { getTrack } from '../../../api/public/albums';
|
||||
import { formatDate } from '../../../utils/date';
|
||||
|
||||
// 유튜브 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() {
|
||||
|
|
@ -18,6 +38,8 @@ function TrackDetail() {
|
|||
enabled: !!albumName && !!trackTitle,
|
||||
});
|
||||
|
||||
const youtubeVideoId = useMemo(() => getYoutubeVideoId(track?.music_video_url), [track?.music_video_url]);
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<motion.div
|
||||
|
|
@ -43,9 +65,8 @@ function TrackDetail() {
|
|||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
className="py-12"
|
||||
>
|
||||
{/* 히어로 섹션 - 그라데이션 배경 */}
|
||||
<div className="relative bg-gradient-to-b from-primary/10 via-primary/5 to-white pt-10 pb-16">
|
||||
<div className="max-w-5xl mx-auto px-6">
|
||||
{/* 브레드크럼 네비게이션 */}
|
||||
<div className="flex items-center gap-2 text-sm text-gray-500 mb-8">
|
||||
|
|
@ -64,16 +85,13 @@ function TrackDetail() {
|
|||
</div>
|
||||
|
||||
{/* 트랙 정보 헤더 */}
|
||||
<div className="flex gap-10 items-start">
|
||||
<div className="flex gap-10 items-start mb-10">
|
||||
{/* 앨범 커버 */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.9 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
transition={{ duration: 0.4 }}
|
||||
className="relative group"
|
||||
>
|
||||
<div
|
||||
className="w-64 h-64 rounded-2xl overflow-hidden shadow-2xl cursor-pointer"
|
||||
className="w-56 h-56 rounded-2xl overflow-hidden shadow-lg cursor-pointer group flex-shrink-0"
|
||||
onClick={() => navigate(`/album/${encodeURIComponent(track.album?.title || albumName)}`)}
|
||||
>
|
||||
<img
|
||||
|
|
@ -81,11 +99,6 @@ function TrackDetail() {
|
|||
alt={track.album?.title}
|
||||
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
|
||||
/>
|
||||
</div>
|
||||
{/* 재생 느낌의 오버레이 */}
|
||||
<div className="absolute -bottom-3 -right-3 w-14 h-14 bg-primary rounded-full shadow-lg flex items-center justify-center">
|
||||
<Disc3 size={28} className="text-white animate-spin" style={{ animationDuration: '3s' }} />
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* 트랙 정보 */}
|
||||
|
|
@ -93,66 +106,72 @@ function TrackDetail() {
|
|||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.1, duration: 0.4 }}
|
||||
className="flex-1 pt-4"
|
||||
className="flex-1"
|
||||
>
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<div className="flex items-center gap-3 mb-3">
|
||||
{track.is_title_track === 1 && (
|
||||
<span className="px-4 py-1.5 bg-gradient-to-r from-primary to-primary-dark text-white text-sm font-bold rounded-full shadow-md">
|
||||
<span className="px-3 py-1 bg-primary text-white text-sm font-bold rounded-full">
|
||||
TITLE
|
||||
</span>
|
||||
)}
|
||||
<span className="px-3 py-1 bg-white/80 backdrop-blur-sm text-gray-600 text-sm rounded-full shadow-sm">
|
||||
<span className="text-gray-500 text-sm">
|
||||
Track {String(track.track_number).padStart(2, '0')}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<h1 className="text-5xl font-bold mb-5 text-gray-900">{track.title}</h1>
|
||||
<h1 className="text-4xl font-bold mb-4 text-gray-900">{track.title}</h1>
|
||||
|
||||
{/* 앨범 정보 카드 */}
|
||||
{/* 앨범 정보 */}
|
||||
<Link
|
||||
to={`/album/${encodeURIComponent(track.album?.title || albumName)}`}
|
||||
className="inline-flex items-center gap-4 px-5 py-3 bg-white/70 backdrop-blur-sm rounded-2xl shadow-sm hover:shadow-md transition-all group mb-6"
|
||||
className="inline-flex items-center gap-3 mb-4 group"
|
||||
>
|
||||
<img
|
||||
src={track.album?.cover_thumb_url}
|
||||
alt=""
|
||||
className="w-12 h-12 rounded-lg object-cover"
|
||||
className="w-10 h-10 rounded-lg object-cover"
|
||||
/>
|
||||
<div>
|
||||
<p className="text-xs text-gray-400 mb-0.5">{track.album?.album_type}</p>
|
||||
<p className="font-semibold text-gray-800 group-hover:text-primary transition-colors">{track.album?.title}</p>
|
||||
<p className="text-xs text-gray-400">{track.album?.album_type}</p>
|
||||
<p className="font-medium text-gray-700 group-hover:text-primary transition-colors">{track.album?.title}</p>
|
||||
</div>
|
||||
<ChevronRight size={18} className="text-gray-400 group-hover:text-primary transition-colors" />
|
||||
</Link>
|
||||
|
||||
{/* 재생 시간 & 뮤비 */}
|
||||
<div className="flex items-center gap-4">
|
||||
{/* 재생 시간 */}
|
||||
{track.duration && (
|
||||
<div className="flex items-center gap-2 text-gray-500">
|
||||
<Clock size={18} />
|
||||
<span className="font-medium">{track.duration}</span>
|
||||
<Clock size={16} />
|
||||
<span>{track.duration}</span>
|
||||
</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-gradient-to-r from-red-500 to-red-600 text-white rounded-full hover:from-red-600 hover:to-red-700 transition-all shadow-lg hover:shadow-xl"
|
||||
>
|
||||
<Play size={18} fill="currentColor" />
|
||||
뮤직비디오
|
||||
<ExternalLink size={14} />
|
||||
</a>
|
||||
)}
|
||||
</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>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
{/* 메인 콘텐츠 */}
|
||||
<div className="max-w-5xl mx-auto px-6 py-10">
|
||||
<div className="grid grid-cols-3 gap-8">
|
||||
{/* 왼쪽: 크레딧 + 수록곡 */}
|
||||
<div className="col-span-1 space-y-6">
|
||||
|
|
@ -162,7 +181,7 @@ function TrackDetail() {
|
|||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.2, duration: 0.4 }}
|
||||
className="bg-gradient-to-br from-gray-50 to-gray-100 rounded-2xl p-6 border border-gray-100"
|
||||
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>
|
||||
|
|
@ -171,34 +190,40 @@ function TrackDetail() {
|
|||
<div className="space-y-5">
|
||||
{track.lyricist && (
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="w-10 h-10 bg-gradient-to-br from-primary/20 to-primary/10 rounded-xl flex items-center justify-center flex-shrink-0">
|
||||
<Mic2 size={18} className="text-primary" />
|
||||
<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">{track.lyricist}</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-10 h-10 bg-gradient-to-br from-blue-100 to-blue-50 rounded-xl flex items-center justify-center flex-shrink-0">
|
||||
<Music size={18} className="text-blue-500" />
|
||||
<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">{track.composer}</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-10 h-10 bg-gradient-to-br from-purple-100 to-purple-50 rounded-xl flex items-center justify-center flex-shrink-0">
|
||||
<User size={18} className="text-purple-500" />
|
||||
<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">{track.arranger}</p>
|
||||
<p className="text-sm text-gray-700 leading-relaxed">
|
||||
{formatCredit(track.arranger)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
|
@ -224,7 +249,7 @@ function TrackDetail() {
|
|||
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-gradient-to-r from-primary/10 to-primary/5 text-primary shadow-sm'
|
||||
? 'bg-primary/10 text-primary'
|
||||
: 'hover:bg-gray-50'
|
||||
}`}
|
||||
>
|
||||
|
|
@ -258,19 +283,19 @@ function TrackDetail() {
|
|||
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 min-h-[500px]">
|
||||
<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]">
|
||||
<div className="text-gray-700 leading-[2] whitespace-pre-line text-[15px] max-h-[600px] overflow-y-auto pr-4 scrollbar-thin scrollbar-thumb-gray-200 scrollbar-track-transparent">
|
||||
{track.lyrics}
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center py-20 text-gray-400">
|
||||
<Mic2 size={56} className="mx-auto mb-4 opacity-20" />
|
||||
<p className="text-lg">가사 정보가 없습니다</p>
|
||||
<div className="text-center py-16 text-gray-400">
|
||||
<Mic2 size={48} className="mx-auto mb-4 opacity-20" />
|
||||
<p>가사 정보가 없습니다</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue